@opensite/ui 2.7.6 → 2.7.8

package/dist/faq-gradient-categories.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';
@@ -10,32 +11,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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 DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -53,7 +28,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b ", className),
+      className: cn(className, "border-b"),
       ...props
     }
   );
@@ -68,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,
@@ -78,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"
           }
         )
       ]
@@ -94,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 })
     }
@@ -109,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(
@@ -415,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,
@@ -476,19 +451,51 @@ 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 FaqGradientCategories({
   heading,
   description,
   categories,
   categoriesSlot,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
-  gradientWrapperClassName,
+  contentWrapperClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -511,15 +518,15 @@ function FaqGradientCategories({
         ),
         children: categories.map((category, categoryIndex) => /* @__PURE__ */ jsxs("div", { children: [
           typeof category.title === "string" ? /* @__PURE__ */ jsx(
-            "h3",
+            "div",
             {
               className: cn(
-                "mb-4 text-xl font-semibold",
+                "leading-none font-bold opacity-60 uppercase text-sm tracking-widest",
                 categoryTitleClassName
               ),
               children: category.title
             }
-          ) : /* @__PURE__ */ jsx("div", { className: categoryTitleClassName, children: category.title }),
+          ) : category.title,
           /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item) => /* @__PURE__ */ jsxs(
             AccordionItem,
             {
@@ -530,17 +537,19 @@ function FaqGradientCategories({
                   AccordionTrigger,
                   {
                     className: cn(
-                      "transition-opacity duration-200 hover:no-underline hover:opacity-60",
+                      "transition-opacity",
+                      "hover:no-underline hover:opacity-75",
+                      "cursor-pointer duration-200",
                       accordionTriggerClassName
                     ),
-                    children: /* @__PURE__ */ jsx("div", { className: "font-medium sm:py-1 lg:py-2 lg:text-lg", children: item.question })
+                    children: /* @__PURE__ */ jsx("div", { className: "font-medium py-1 md:py-2 text-lg leading-tight", children: item.question })
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   AccordionContent,
                   {
-                    className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                    children: /* @__PURE__ */ jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
+                    className: cn("mb-1 md:mb-2", accordionContentClassName),
+                    children: /* @__PURE__ */ jsx("div", { className: "text-base md:text-lg", children: item.answer })
                   }
                 )
               ]
@@ -561,6 +570,40 @@ function FaqGradientCategories({
     accordionContentClassName,
     background
   ]);
+  const contentItems = 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__ */ jsx(
     Section,
     {
@@ -570,44 +613,28 @@ function FaqGradientCategories({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxs(
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "rounded-lg bg-linear-to-b from-muted/50 to-muted p-8 md:p-12 lg:p-16",
-            gradientWrapperClassName
+            "bg-card text-card-foreground",
+            "p-8 md:p-12 lg:p-16",
+            "rounded-xl shadow-xl",
+            contentWrapperClassName
           ),
           children: [
-            /* @__PURE__ */ jsxs(
-              "div",
+            /* @__PURE__ */ 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__ */ 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(
-                        getTextColor(background, "muted"),
-                        "lg:text-lg",
-                        descriptionClassName
-                      ),
-                      children: description
-                    }
-                  ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-                ]
+                items: contentItems
               }
             ),
             categoriesContent

package/dist/faq-icon-benefits.cjs

@@ -1,50 +1,36 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // components/blocks/faq/faq-icon-benefits.tsx
 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";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -58,7 +44,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(
@@ -364,7 +350,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,
@@ -425,18 +411,50 @@ 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 FaqIconBenefits({
   heading,
   description,
   benefits,
   benefitsSlot,
   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,
@@ -447,54 +465,69 @@ function FaqIconBenefits({
   titleClassName,
   benefitDescriptionClassName
 }) {
-  const benefitsContent = React.useMemo(() => {
+  const benefitsContent = React4.useMemo(() => {
     if (benefitsSlot) return benefitsSlot;
     if (!benefits || benefits.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: cn(
-          "mx-auto mt-10 grid max-w-7xl gap-6 md:grid-cols-2 lg:grid-cols-3",
+          "mx-auto mt-10",
+          "grid gap-8 md:gap-12 md:grid-cols-2 lg:grid-cols-3",
+          "max-w-full md:max-w-7xl",
           gridClassName
         ),
         children: benefits.map((benefit, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "flex flex-col items-center gap-4 rounded-lg border p-6 text-center",
+              "flex flex-col items-center",
+              "gap-4 p-4 md:p-6 text-center",
+              "shadow-md rounded-lg",
+              "bg-card text-card-foreground",
+              "ring-4 ring-primary",
               benefitCardClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+              benefit.icon && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn(
-                    "flex size-12 items-center justify-center rounded-full",
-                    getAccentColor(background),
-                    "opacity-10",
+                    "flex size-12 items-center",
+                    "justify-center rounded-lg shadow-lg",
+                    "bg-primary text-primary-foreground",
+                    "mb-4",
                     iconWrapperClassName
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,
                     {
                       name: benefit.icon,
-                      className: cn("size-6", getAccentColor(background), iconClassName)
+                      className: cn("size-6", iconClassName)
                     }
                   )
                 }
               ),
-              typeof benefit.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-lg font-semibold", titleClassName), children: benefit.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: benefit.title }),
+              typeof benefit.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-lg md:text-xl font-semibold text-pretty",
+                    titleClassName
+                  ),
+                  children: benefit.title
+                }
+              ) : benefit.title,
               typeof benefit.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
                   className: cn(
-                    getTextColor(background, "muted"),
-                    "text-sm",
+                    "text-sm md:text-base text-balance",
                     benefitDescriptionClassName
                   ),
                   children: benefit.description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: benefitDescriptionClassName, children: benefit.description })
+              ) : benefit.description
             ]
           },
           index
@@ -512,6 +545,40 @@ function FaqIconBenefits({
     benefitDescriptionClassName,
     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,
     {
@@ -521,37 +588,19 @@ function FaqIconBenefits({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__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
           }
         ),
         benefitsContent

package/dist/faq-icon-benefits.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';
 
@@ -94,6 +94,6 @@ interface FaqIconBenefitsProps {
      */
     benefitDescriptionClassName?: string;
 }
-declare function FaqIconBenefits({ heading, description, benefits, benefitsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, benefitCardClassName, iconWrapperClassName, iconClassName, titleClassName, benefitDescriptionClassName, }: FaqIconBenefitsProps): react_jsx_runtime.JSX.Element;
+declare function FaqIconBenefits({ heading, description, benefits, benefitsSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, headerClassName, headingClassName, descriptionClassName, gridClassName, benefitCardClassName, iconWrapperClassName, iconClassName, titleClassName, benefitDescriptionClassName, }: FaqIconBenefitsProps): react_jsx_runtime.JSX.Element;
 
 export { type FaqBenefit, FaqIconBenefits, type FaqIconBenefitsProps };

package/dist/faq-icon-benefits.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';
 
@@ -94,6 +94,6 @@ interface FaqIconBenefitsProps {
      */
     benefitDescriptionClassName?: string;
 }
-declare function FaqIconBenefits({ heading, description, benefits, benefitsSlot, background, spacing, pattern, patternOpacity, patternClassName, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, benefitCardClassName, iconWrapperClassName, iconClassName, titleClassName, benefitDescriptionClassName, }: FaqIconBenefitsProps): react_jsx_runtime.JSX.Element;
+declare function FaqIconBenefits({ heading, description, benefits, benefitsSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, headerClassName, headingClassName, descriptionClassName, gridClassName, benefitCardClassName, iconWrapperClassName, iconClassName, titleClassName, benefitDescriptionClassName, }: FaqIconBenefitsProps): react_jsx_runtime.JSX.Element;
 
 export { type FaqBenefit, FaqIconBenefits, type FaqIconBenefitsProps };