@opensite/ui 2.7.6 → 2.7.7

package/dist/faq-bordered-badge.cjs

@@ -37,32 +37,6 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -127,7 +101,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,
@@ -543,12 +517,12 @@ function FaqBorderedBadge({
   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,
   badgeClassName,
   headingClassName,
@@ -584,13 +558,7 @@ function FaqBorderedBadge({
                   children: item.question
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                AccordionContent,
-                {
-                  className: cn(getTextColor(background, "muted"), accordionContentClassName),
-                  children: item.answer
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn(accordionContentClassName), children: item.answer })
             ]
           },
           item.id
@@ -615,7 +583,8 @@ function FaqBorderedBadge({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -624,20 +593,10 @@ function FaqBorderedBadge({
               headerClassName
             ),
             children: [
-              badge && /* @__PURE__ */ jsxRuntime.jsxs(
-                Badge,
-                {
-                  variant: "outline",
-                  className: cn(
-                    "gap-1.5 px-2.5 py-1 text-sm font-medium",
-                    badgeClassName
-                  ),
-                  children: [
-                    badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16, className: "shrink-0" }),
-                    badge
-                  ]
-                }
-              ),
+              badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-2.5 py-1", badgeClassName), children: [
+                badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+                badge
+              ] }),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h2",
                 {
@@ -647,18 +606,8 @@ function FaqBorderedBadge({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    getTextColor(background, "muted"),
-                    "max-w-2xl text-balance",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl text-balance", descriptionClassName), children: description }) : description)
             ]
           }
         ),

package/dist/faq-bordered-badge.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-B-4_HCwb.cjs';
+import './blocks-UTlgYg4k.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -102,6 +102,6 @@ interface FaqBorderedBadgeProps {
      */
     accordionContentClassName?: string;
 }
-declare function FaqBorderedBadge({ badge, badgeIcon, heading, description, items, itemsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, accordionWrapperClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqBorderedBadgeProps): react_jsx_runtime.JSX.Element;
+declare function FaqBorderedBadge({ badge, badgeIcon, heading, description, items, itemsSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, headerClassName, badgeClassName, headingClassName, descriptionClassName, accordionWrapperClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqBorderedBadgeProps): react_jsx_runtime.JSX.Element;
 
 export { FaqBorderedBadge, type FaqBorderedBadgeProps, type FaqItem };

package/dist/faq-bordered-badge.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-BwFLQ6RR.js';
+import './blocks-B3quAlwK.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
@@ -102,6 +102,6 @@ interface FaqBorderedBadgeProps {
      */
     accordionContentClassName?: string;
 }
-declare function FaqBorderedBadge({ badge, badgeIcon, heading, description, items, itemsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, accordionWrapperClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqBorderedBadgeProps): react_jsx_runtime.JSX.Element;
+declare function FaqBorderedBadge({ badge, badgeIcon, heading, description, items, itemsSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, headerClassName, badgeClassName, headingClassName, descriptionClassName, accordionWrapperClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, }: FaqBorderedBadgeProps): react_jsx_runtime.JSX.Element;
 
 export { FaqBorderedBadge, type FaqBorderedBadgeProps, type FaqItem };

package/dist/faq-bordered-badge.js

@@ -12,32 +12,6 @@ import { Icon } from '@page-speed/icon';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -102,7 +76,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,
@@ -518,12 +492,12 @@ function FaqBorderedBadge({
   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,
   badgeClassName,
   headingClassName,
@@ -559,13 +533,7 @@ function FaqBorderedBadge({
                   children: item.question
                 }
               ),
-              /* @__PURE__ */ jsx(
-                AccordionContent,
-                {
-                  className: cn(getTextColor(background, "muted"), accordionContentClassName),
-                  children: item.answer
-                }
-              )
+              /* @__PURE__ */ jsx(AccordionContent, { className: cn(accordionContentClassName), children: item.answer })
             ]
           },
           item.id
@@ -590,7 +558,8 @@ function FaqBorderedBadge({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -599,20 +568,10 @@ function FaqBorderedBadge({
               headerClassName
             ),
             children: [
-              badge && /* @__PURE__ */ jsxs(
-                Badge,
-                {
-                  variant: "outline",
-                  className: cn(
-                    "gap-1.5 px-2.5 py-1 text-sm font-medium",
-                    badgeClassName
-                  ),
-                  children: [
-                    badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16, className: "shrink-0" }),
-                    badge
-                  ]
-                }
-              ),
+              badge && /* @__PURE__ */ jsxs(Badge, { className: cn("px-2.5 py-1", badgeClassName), children: [
+                badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+                badge
+              ] }),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h2",
                 {
@@ -622,18 +581,8 @@ function FaqBorderedBadge({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    getTextColor(background, "muted"),
-                    "max-w-2xl text-balance",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl text-balance", descriptionClassName), children: description }) : description)
             ]
           }
         ),

package/dist/faq-card-categories.cjs

@@ -1,15 +1,13 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var icon = require('@page-speed/icon');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -28,65 +26,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/faq/faq-card-categories.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function Card({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -165,7 +111,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,
@@ -206,7 +152,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -512,7 +458,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -573,22 +519,54 @@ var Section = React__default.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React4__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React4__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React4__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React4__namespace.isValidElement(reactNode)) {
+          return React4__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function FaqCardCategories({
+  headerClassName,
   heading,
+  headingClassName,
   description,
+  descriptionClassName,
   categories,
   categoriesSlot,
   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,
   contentWrapperClassName,
-  headerClassName,
-  headingClassName,
-  descriptionClassName,
   gridClassName,
   cardClassName,
   categoryTitleClassName,
@@ -597,7 +575,7 @@ function FaqCardCategories({
   accordionTriggerClassName,
   accordionContentClassName
 }) {
-  const categoriesContent = React.useMemo(() => {
+  const categoriesContent = React4.useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -607,55 +585,44 @@ function FaqCardCategories({
           "mx-auto mt-10 grid max-w-7xl gap-6 md:grid-cols-2 lg:grid-cols-3",
           gridClassName
         ),
-        children: categories.map((category, categoryIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-          Card,
-          {
-            className: cn("bg-background", cardClassName),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: typeof category.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: categoryTitleClassName, children: category.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: categoryTitleClassName, children: category.title }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                Accordion,
+        children: categories.map((category, categoryIndex) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClassName, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: typeof category.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: categoryTitleClassName, children: category.title }) : category.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            Accordion,
+            {
+              type: "single",
+              collapsible: true,
+              className: accordionClassName,
+              children: category.items?.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+                AccordionItem,
                 {
-                  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(
-                              "text-sm transition-opacity duration-200 hover:no-underline hover:opacity-60",
-                              accordionTriggerClassName
-                            ),
-                            children: item.question
-                          }
+                  value: item.id,
+                  className: accordionItemClassName,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      AccordionTrigger,
+                      {
+                        className: cn(
+                          "text-sm transition-opacity duration-200 hover:no-underline hover:opacity-60",
+                          accordionTriggerClassName
                         ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          AccordionContent,
-                          {
-                            className: cn(
-                              getTextColor(background, "muted"),
-                              "text-sm",
-                              accordionContentClassName
-                            ),
-                            children: item.answer
-                          }
-                        )
-                      ]
-                    },
-                    item.id
-                  ))
-                }
-              ) })
-            ]
-          },
-          categoryIndex
-        ))
+                        children: item.question
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      AccordionContent,
+                      {
+                        className: cn("text-sm", accordionContentClassName),
+                        children: item.answer
+                      }
+                    )
+                  ]
+                },
+                item.id
+              ))
+            }
+          ) })
+        ] }, categoryIndex))
       }
     );
   }, [
@@ -670,6 +637,40 @@ function FaqCardCategories({
     accordionContentClassName,
     background
   ]);
+  const contentItems = React4.useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "mb-4 text-3xl font-semibold lg:text-4xl text-pretty",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "text-xl max-w-full md:max-w-md text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -679,48 +680,26 @@ function FaqCardCategories({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
             "relative rounded-lg p-8 md:p-12 lg:p-16",
-            getNestedCardBg(background, "muted"),
             contentWrapperClassName
           ),
-          style: {
-            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
-          },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ContentGroup,
               {
                 className: cn(
-                  "mx-auto flex max-w-3xl flex-col text-left md:text-center",
+                  "mx-auto flex flex-col",
+                  "max-w-full md:max-w-3xl",
+                  "text-left md:text-center",
+                  "mb-12 md:mb-20",
                   headerClassName
                 ),
-                children: [
-                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "h2",
-                    {
-                      className: cn(
-                        "mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl",
-                        headingClassName
-                      ),
-                      children: heading
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "p",
-                    {
-                      className: cn(
-                        getTextColor(background, "muted"),
-                        "lg:text-lg",
-                        descriptionClassName
-                      ),
-                      children: description
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-                ]
+                items: contentItems
               }
             ),
             categoriesContent