@opensite/ui 2.7.6 → 2.7.8

package/dist/faq-rounded-cards.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
-import './blocks-CsMdf2Jh.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-64wrtPed.js';
+import './blocks-DmMuCMEh.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -90,6 +90,6 @@ interface FaqRoundedCardsProps {
      */
     accordionContentClassName?: string;
 }
-declare function FaqRoundedCards({ heading, description, items, itemsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardsWrapperClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqRoundedCardsProps): react_jsx_runtime.JSX.Element;
+declare function FaqRoundedCards({ heading, description, items, itemsSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, headerClassName, headingClassName, descriptionClassName, cardsWrapperClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqRoundedCardsProps): react_jsx_runtime.JSX.Element;
 
 export { type FaqItem, FaqRoundedCards, type FaqRoundedCardsProps };

package/dist/faq-rounded-cards.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useMemo } from 'react';
+import * as React4 from 'react';
+import React4__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -27,7 +28,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b ", className),
+      className: cn(className, "border-b"),
       ...props
     }
   );
@@ -42,7 +43,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "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",
+        "cursor-pointer 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,
@@ -52,7 +53,7 @@ function AccordionTrigger({
           DynamicIcon,
           {
             name: "lucide/chevron-down",
-            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+            className: "pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
           }
         )
       ]
@@ -68,7 +69,7 @@ function AccordionContent({
     AccordionPrimitive.Content,
     {
       "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-base",
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
     }
@@ -83,7 +84,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -389,7 +390,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -450,18 +451,50 @@ var Section = React.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React4.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React4.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React4.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React4.isValidElement(reactNode)) {
+          return React4.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsx(React4.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function FaqRoundedCards({
   heading,
   description,
   items,
   itemsSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -479,13 +512,18 @@ function FaqRoundedCards({
       {
         type: "single",
         collapsible: true,
-        className: cn("space-y-3", accordionClassName),
+        className: cn("space-y-4", accordionClassName),
         children: items.map((item) => /* @__PURE__ */ jsxs(
           AccordionItem,
           {
             value: item.id,
             className: cn(
-              "rounded-xl border border-border/60 px-5 shadow-sm transition-shadow hover:shadow-md data-[state=open]:shadow-md",
+              "border border-border/50",
+              "transition-all duration-500",
+              "rounded-xl shadow-lg px-5",
+              "backdrop-blur-xs hover:backdrop-blur-lg",
+              "data-[state=open]:bg-card",
+              "data-[state=open]:text-card-foreground",
               accordionItemClassName
             ),
             children: [
@@ -493,7 +531,11 @@ function FaqRoundedCards({
                 AccordionTrigger,
                 {
                   className: cn(
-                    "py-4 font-medium transition-opacity hover:no-underline hover:opacity-70 lg:text-lg [&[data-state=open]>svg]:rotate-180",
+                    "text-base md:text-lg",
+                    "cursor-pointer py-4 font-semibold",
+                    "transition-opacity",
+                    "hover:no-underline hover:opacity-70",
+                    "leading-tight",
                     accordionTriggerClassName
                   ),
                   children: item.question
@@ -502,7 +544,10 @@ function FaqRoundedCards({
               /* @__PURE__ */ jsx(
                 AccordionContent,
                 {
-                  className: cn("pb-4 ", accordionContentClassName),
+                  className: cn(
+                    "pb-4 text-base md:text-lg",
+                    accordionContentClassName
+                  ),
                   children: item.answer
                 }
               )
@@ -520,6 +565,44 @@ function FaqRoundedCards({
     accordionTriggerClassName,
     accordionContentClassName
   ]);
+  const contentItems = useMemo(() => {
+    const items2 = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "font-bold ",
+            "mb-4 text-pretty",
+            "text-3xl lg:text-4xl",
+            "max-w-full md:max-w-sm",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items2.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "text-lg md:text-xl text-balance",
+            "max-w-full md:max-w-sm",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -528,32 +611,22 @@ function FaqRoundedCards({
       pattern,
       patternOpacity,
       patternClassName,
-      className,
-      children: /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-full md:max-w-3xl w-full space-y-8 md:space-y-12", children: [
+        /* @__PURE__ */ jsx(
+          ContentGroup,
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col text-left md:text-center",
+              "flex flex-col",
+              "items-start md:items-center",
+              "text-left md:text-center",
               headerClassName
             ),
-            children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-            ]
+            items: contentItems
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-10 max-w-3xl", cardsWrapperClassName), children: itemsContent })
-      ] })
+        /* @__PURE__ */ jsx("div", { className: cardsWrapperClassName, children: itemsContent })
+      ] }) })
     }
   );
 }

package/dist/faq-sidebar-navigation.cjs

@@ -50,7 +50,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b ", className),
+      className: cn(className, "border-b"),
       ...props
     }
   );
@@ -65,7 +65,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "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",
+        "cursor-pointer 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,
@@ -75,7 +75,7 @@ function AccordionTrigger({
           DynamicIcon,
           {
             name: "lucide/chevron-down",
-            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+            className: "pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
           }
         )
       ]
@@ -91,7 +91,7 @@ function AccordionContent({
     AccordionPrimitive__namespace.Content,
     {
       "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-base",
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
     }
@@ -542,53 +542,59 @@ function FaqSidebarNavigation({
   const categoriesContent = React4.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     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(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        id: `faq-category-${category.id}`,
-        className: "scroll-mt-24",
-        children: [
-          typeof category.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h3",
-            {
-              className: cn(
-                "mb-4 text-xl font-semibold",
-                categoryTitleClassName
-              ),
-              children: category.title
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: categoryTitleClassName, children: category.title }),
-          /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-            AccordionItem,
-            {
-              value: item.id,
-              className: accordionItemClassName,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  AccordionTrigger,
-                  {
-                    className: cn(
-                      "transition-opacity duration-200 hover:no-underline hover:opacity-60",
-                      accordionTriggerClassName
+        className: cn("space-y-10 w-full lg:w-3/4", categoriesWrapperClassName),
+        children: filteredCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: `faq-category-${category.id}`,
+            className: "scroll-mt-24",
+            children: [
+              typeof category.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "mb-4 text-xl font-semibold",
+                    categoryTitleClassName
+                  ),
+                  children: category.title
+                }
+              ) : category.title,
+              /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+                AccordionItem,
+                {
+                  value: item.id,
+                  className: accordionItemClassName,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      AccordionTrigger,
+                      {
+                        className: cn(
+                          "transition-opacity duration-200 hover:no-underline hover:opacity-60",
+                          accordionTriggerClassName
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium py-1 lg:py-2 text-lg", children: item.question })
+                      }
                     ),
-                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium sm:py-1 lg:py-2 lg:text-lg", children: item.question })
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  AccordionContent,
-                  {
-                    className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:text-lg"), children: item.answer })
-                  }
-                )
-              ]
-            },
-            item.id
-          )) })
-        ]
-      },
-      category.id
-    )) });
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      AccordionContent,
+                      {
+                        className: cn("mb-1 lg:mb-2", accordionContentClassName),
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-base"), children: item.answer })
+                      }
+                    )
+                  ]
+                },
+                item.id
+              )) })
+            ]
+          },
+          category.id
+        ))
+      }
+    );
   }, [
     categoriesSlot,
     filteredCategories,
@@ -660,14 +666,18 @@ function FaqSidebarNavigation({
               contentWrapperClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 flex gap-1 overflow-x-auto lg:flex-col lg:gap-2 lg:overflow-visible p-2 ring-2 rounded-lg", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("w-full lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 flex overflow-x-auto lg:flex-col gap-1 lg:gap-2 lg:overflow-visible p-1 md:p-2 ring-2 rounded-lg", children: [
                 categories && categories.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     onClick: () => setActiveCategory("all"),
                     className: cn(
                       "cursor-pointer",
-                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "w-fit lg:w-full",
+                      "shrink-0 whitespace-nowrap",
+                      "rounded-md px-4 py-2",
+                      "text-left text-sm font-medium",
+                      "transition-colors",
                       activeCategory === "all" ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName
@@ -685,7 +695,11 @@ function FaqSidebarNavigation({
                     onClick: () => setActiveCategory(category.id),
                     className: cn(
                       "cursor-pointer",
-                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "w-full lg:w-full",
+                      "shrink-0 whitespace-nowrap",
+                      "rounded-md px-4 py-2",
+                      "text-left text-sm font-medium",
+                      "transition-colors",
                       activeCategory === category.id ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName

package/dist/faq-sidebar-navigation.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2FsyKLdT.cjs';
-import './blocks-gR13ES5A.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DM27LAzE.cjs';
+import './blocks-U7wOoE0O.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/faq-sidebar-navigation.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
-import './blocks-CsMdf2Jh.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-64wrtPed.js';
+import './blocks-DmMuCMEh.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/faq-sidebar-navigation.js

@@ -28,7 +28,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b ", className),
+      className: cn(className, "border-b"),
       ...props
     }
   );
@@ -43,7 +43,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "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",
+        "cursor-pointer 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,
@@ -53,7 +53,7 @@ function AccordionTrigger({
           DynamicIcon,
           {
             name: "lucide/chevron-down",
-            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+            className: "pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
           }
         )
       ]
@@ -69,7 +69,7 @@ function AccordionContent({
     AccordionPrimitive.Content,
     {
       "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-base",
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
     }
@@ -520,53 +520,59 @@ function FaqSidebarNavigation({
   const categoriesContent = useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     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(
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        id: `faq-category-${category.id}`,
-        className: "scroll-mt-24",
-        children: [
-          typeof category.title === "string" ? /* @__PURE__ */ jsx(
-            "h3",
-            {
-              className: cn(
-                "mb-4 text-xl font-semibold",
-                categoryTitleClassName
-              ),
-              children: category.title
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: categoryTitleClassName, children: category.title }),
-          /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item) => /* @__PURE__ */ jsxs(
-            AccordionItem,
-            {
-              value: item.id,
-              className: accordionItemClassName,
-              children: [
-                /* @__PURE__ */ jsx(
-                  AccordionTrigger,
-                  {
-                    className: cn(
-                      "transition-opacity duration-200 hover:no-underline hover:opacity-60",
-                      accordionTriggerClassName
+        className: cn("space-y-10 w-full lg:w-3/4", categoriesWrapperClassName),
+        children: filteredCategories.map((category) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: `faq-category-${category.id}`,
+            className: "scroll-mt-24",
+            children: [
+              typeof category.title === "string" ? /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "mb-4 text-xl font-semibold",
+                    categoryTitleClassName
+                  ),
+                  children: category.title
+                }
+              ) : category.title,
+              /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item) => /* @__PURE__ */ jsxs(
+                AccordionItem,
+                {
+                  value: item.id,
+                  className: accordionItemClassName,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      AccordionTrigger,
+                      {
+                        className: cn(
+                          "transition-opacity duration-200 hover:no-underline hover:opacity-60",
+                          accordionTriggerClassName
+                        ),
+                        children: /* @__PURE__ */ jsx("div", { className: "font-medium py-1 lg:py-2 text-lg", children: item.question })
+                      }
                     ),
-                    children: /* @__PURE__ */ jsx("div", { className: "font-medium sm:py-1 lg:py-2 lg:text-lg", children: item.question })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  AccordionContent,
-                  {
-                    className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                    children: /* @__PURE__ */ jsx("div", { className: cn("lg:text-lg"), children: item.answer })
-                  }
-                )
-              ]
-            },
-            item.id
-          )) })
-        ]
-      },
-      category.id
-    )) });
+                    /* @__PURE__ */ jsx(
+                      AccordionContent,
+                      {
+                        className: cn("mb-1 lg:mb-2", accordionContentClassName),
+                        children: /* @__PURE__ */ jsx("div", { className: cn("text-base"), children: item.answer })
+                      }
+                    )
+                  ]
+                },
+                item.id
+              )) })
+            ]
+          },
+          category.id
+        ))
+      }
+    );
   }, [
     categoriesSlot,
     filteredCategories,
@@ -638,14 +644,18 @@ function FaqSidebarNavigation({
               contentWrapperClassName
             ),
             children: [
-              /* @__PURE__ */ jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-24 flex gap-1 overflow-x-auto lg:flex-col lg:gap-2 lg:overflow-visible p-2 ring-2 rounded-lg", children: [
+              /* @__PURE__ */ jsx("nav", { className: cn("w-full lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-24 flex overflow-x-auto lg:flex-col gap-1 lg:gap-2 lg:overflow-visible p-1 md:p-2 ring-2 rounded-lg", children: [
                 categories && categories.length > 1 && /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: () => setActiveCategory("all"),
                     className: cn(
                       "cursor-pointer",
-                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "w-fit lg:w-full",
+                      "shrink-0 whitespace-nowrap",
+                      "rounded-md px-4 py-2",
+                      "text-left text-sm font-medium",
+                      "transition-colors",
                       activeCategory === "all" ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName
@@ -663,7 +673,11 @@ function FaqSidebarNavigation({
                     onClick: () => setActiveCategory(category.id),
                     className: cn(
                       "cursor-pointer",
-                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "w-full lg:w-full",
+                      "shrink-0 whitespace-nowrap",
+                      "rounded-md px-4 py-2",
+                      "text-left text-sm font-medium",
+                      "transition-colors",
                       activeCategory === category.id ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName