@opensite/ui 0.8.5 → 0.8.7

package/dist/faq-sidebar-navigation.cjs

@@ -150,7 +150,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -165,13 +165,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -593,19 +599,17 @@ function FaqSidebarNavigation({
   accordionContentClassName
 }) {
   const [activeCategory, setActiveCategory] = React__namespace.useState(
-    categories?.[0]?.id || ""
+    categories && categories.length > 1 ? "all" : categories?.[0]?.id || ""
   );
-  const scrollToCategory = (categoryId) => {
-    setActiveCategory(categoryId);
-    const element = document.getElementById(`faq-category-${categoryId}`);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "start" });
-    }
-  };
+  const filteredCategories = React.useMemo(() => {
+    if (!categories || categories.length === 0) return [];
+    if (activeCategory === "all") return categories;
+    return categories.filter((category) => category.id === activeCategory);
+  }, [categories, activeCategory]);
   const categoriesContent = React.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
-    if (!categories || categories.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
+    if (filteredCategories.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: filteredCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         id: `faq-category-${category.id}`,
@@ -652,7 +656,7 @@ function FaqSidebarNavigation({
       },
       category.id
     )) });
-  }, [categoriesSlot, categories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -702,21 +706,37 @@ function FaqSidebarNavigation({
               contentWrapperClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-24 space-y-2", children: categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => scrollToCategory(category.id),
-                  className: cn(
-                    "w-full rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors",
-                    activeCategory === category.id ? cn(
-                      "bg-primary text-primary-foreground",
-                      navButtonActiveClassName
-                    ) : cn("hover:bg-muted", navButtonClassName)
-                  ),
-                  children: category.title
-                },
-                category.id
-              )) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:gap-2 lg:overflow-visible lg:pb-0", children: [
+                categories && categories.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => setActiveCategory("all"),
+                    className: cn(
+                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      activeCategory === "all" ? cn(
+                        "bg-primary text-primary-foreground",
+                        navButtonActiveClassName
+                      ) : cn("hover:bg-muted", navButtonClassName)
+                    ),
+                    children: "All"
+                  }
+                ),
+                categories?.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => setActiveCategory(category.id),
+                    className: cn(
+                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      activeCategory === category.id ? cn(
+                        "bg-primary text-primary-foreground",
+                        navButtonActiveClassName
+                      ) : cn("hover:bg-muted", navButtonClassName)
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              ] }) }),
               categoriesContent
             ]
           }

package/dist/faq-sidebar-navigation.js

@@ -128,7 +128,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -143,13 +143,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -571,19 +577,17 @@ function FaqSidebarNavigation({
   accordionContentClassName
 }) {
   const [activeCategory, setActiveCategory] = React.useState(
-    categories?.[0]?.id || ""
+    categories && categories.length > 1 ? "all" : categories?.[0]?.id || ""
   );
-  const scrollToCategory = (categoryId) => {
-    setActiveCategory(categoryId);
-    const element = document.getElementById(`faq-category-${categoryId}`);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "start" });
-    }
-  };
+  const filteredCategories = useMemo(() => {
+    if (!categories || categories.length === 0) return [];
+    if (activeCategory === "all") return categories;
+    return categories.filter((category) => category.id === activeCategory);
+  }, [categories, activeCategory]);
   const categoriesContent = useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
-    if (!categories || categories.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: categories.map((category) => /* @__PURE__ */ jsxs(
+    if (filteredCategories.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-10 lg:w-3/4", categoriesWrapperClassName), children: filteredCategories.map((category) => /* @__PURE__ */ jsxs(
       "div",
       {
         id: `faq-category-${category.id}`,
@@ -630,7 +634,7 @@ function FaqSidebarNavigation({
       },
       category.id
     )) });
-  }, [categoriesSlot, categories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -680,21 +684,37 @@ function FaqSidebarNavigation({
               contentWrapperClassName
             ),
             children: [
-              /* @__PURE__ */ jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsx("div", { className: "sticky top-24 space-y-2", children: categories?.map((category) => /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => scrollToCategory(category.id),
-                  className: cn(
-                    "w-full rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors",
-                    activeCategory === category.id ? cn(
-                      "bg-primary text-primary-foreground",
-                      navButtonActiveClassName
-                    ) : cn("hover:bg-muted", navButtonClassName)
-                  ),
-                  children: category.title
-                },
-                category.id
-              )) }) }),
+              /* @__PURE__ */ jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-24 flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:gap-2 lg:overflow-visible lg:pb-0", children: [
+                categories && categories.length > 1 && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setActiveCategory("all"),
+                    className: cn(
+                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      activeCategory === "all" ? cn(
+                        "bg-primary text-primary-foreground",
+                        navButtonActiveClassName
+                      ) : cn("hover:bg-muted", navButtonClassName)
+                    ),
+                    children: "All"
+                  }
+                ),
+                categories?.map((category) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setActiveCategory(category.id),
+                    className: cn(
+                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      activeCategory === category.id ? cn(
+                        "bg-primary text-primary-foreground",
+                        navButtonActiveClassName
+                      ) : cn("hover:bg-muted", navButtonClassName)
+                    ),
+                    children: category.title
+                  },
+                  category.id
+                ))
+              ] }) }),
               categoriesContent
             ]
           }

package/dist/faq-simple-accordion.cjs

@@ -150,7 +150,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -165,13 +165,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -571,7 +577,7 @@ function FaqSimpleAccordion({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -613,7 +619,14 @@ function FaqSimpleAccordion({
       },
       item.id || index
     )) });
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/faq-simple-accordion.js

@@ -128,7 +128,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -143,13 +143,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -549,7 +555,7 @@ function FaqSimpleAccordion({
   items,
   itemsSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -591,7 +597,14 @@ function FaqSimpleAccordion({
       },
       item.id || index
     )) });
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/faq-split-help.cjs

@@ -151,7 +151,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -166,13 +166,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -995,7 +1001,7 @@ function FaqSplitHelp({
   helpAction,
   helpSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -1039,7 +1045,7 @@ function FaqSplitHelp({
                 AccordionContent,
                 {
                   className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground lg:text-lg", children: item.answer })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: " lg:text-lg", children: item.answer })
                 }
               )
             ]
@@ -1048,22 +1054,29 @@ function FaqSplitHelp({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   const helpSectionContent = React.useMemo(() => {
     if (helpSlot) return helpSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: cn(
-          "mt-16 flex flex-col items-center gap-4 rounded-lg bg-accent p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg bg-muted p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
           helpSectionClassName
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             helpHeading && (typeof helpHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: helpHeading }) : helpHeading),
-            helpDescription && (typeof helpDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1", children: helpDescription }) : helpDescription)
+            helpDescription && (typeof helpDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1", children: helpDescription }) : helpDescription)
           ] }),
-          helpAction && /* @__PURE__ */ jsxRuntime.jsx(
+          helpAction && /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
               href: helpAction.href,
@@ -1071,13 +1084,24 @@ function FaqSplitHelp({
               variant: helpAction.variant,
               size: helpAction.size,
               className: helpAction.className,
-              children: helpAction.children ?? helpAction.label
+              asButton: helpAction.asButton,
+              children: [
+                helpAction.children ?? helpAction.label,
+                helpAction.icon && helpAction.icon,
+                helpAction.iconAfter && helpAction.iconAfter
+              ]
             }
           )
         ]
       }
     );
-  }, [helpSlot, helpHeading, helpDescription, helpAction, helpSectionClassName]);
+  }, [
+    helpSlot,
+    helpHeading,
+    helpDescription,
+    helpAction,
+    helpSectionClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1100,16 +1124,7 @@ function FaqSplitHelp({
                 children: heading
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-muted-foreground lg:text-lg",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           itemsContent
         ] }),

package/dist/faq-split-help.js

@@ -129,7 +129,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -144,13 +144,19 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });
@@ -973,7 +979,7 @@ function FaqSplitHelp({
   helpAction,
   helpSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -1017,7 +1023,7 @@ function FaqSplitHelp({
                 AccordionContent,
                 {
                   className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                  children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground lg:text-lg", children: item.answer })
+                  children: /* @__PURE__ */ jsx("div", { className: " lg:text-lg", children: item.answer })
                 }
               )
             ]
@@ -1026,22 +1032,29 @@ function FaqSplitHelp({
         ))
       }
     );
-  }, [itemsSlot, items, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName]);
+  }, [
+    itemsSlot,
+    items,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
   const helpSectionContent = useMemo(() => {
     if (helpSlot) return helpSlot;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "mt-16 flex flex-col items-center gap-4 rounded-lg bg-accent p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
+          "mt-8 md:mt-16 flex flex-col items-center gap-4 rounded-lg bg-muted p-6 text-center md:flex-row md:justify-between md:text-left lg:p-8",
           helpSectionClassName
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { children: [
             helpHeading && (typeof helpHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: helpHeading }) : helpHeading),
-            helpDescription && (typeof helpDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: helpDescription }) : helpDescription)
+            helpDescription && (typeof helpDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1", children: helpDescription }) : helpDescription)
           ] }),
-          helpAction && /* @__PURE__ */ jsx(
+          helpAction && /* @__PURE__ */ jsxs(
             Pressable,
             {
               href: helpAction.href,
@@ -1049,13 +1062,24 @@ function FaqSplitHelp({
               variant: helpAction.variant,
               size: helpAction.size,
               className: helpAction.className,
-              children: helpAction.children ?? helpAction.label
+              asButton: helpAction.asButton,
+              children: [
+                helpAction.children ?? helpAction.label,
+                helpAction.icon && helpAction.icon,
+                helpAction.iconAfter && helpAction.iconAfter
+              ]
             }
           )
         ]
       }
     );
-  }, [helpSlot, helpHeading, helpDescription, helpAction, helpSectionClassName]);
+  }, [
+    helpSlot,
+    helpHeading,
+    helpDescription,
+    helpAction,
+    helpSectionClassName
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1078,16 +1102,7 @@ function FaqSplitHelp({
                 children: heading
               }
             ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-muted-foreground lg:text-lg",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           itemsContent
         ] }),