@opensite/ui 2.3.5 → 2.3.7

package/dist/project-video-hover-rounded.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-NncH7Ewd.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverRoundedItem {

package/dist/project-video-hover-stack.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-B6-QT7N6.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverStackItem {

package/dist/project-video-hover-stack.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-NncH7Ewd.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverStackItem {

package/dist/project-video-hover-two-by-two.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-B6-QT7N6.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverTwoByTwoItem {

package/dist/project-video-hover-two-by-two.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-NncH7Ewd.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ProjectVideoHoverTwoByTwoItem {

package/dist/project-work-showcase.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-B6-QT7N6.cjs';
-import './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectWorkShowcaseProject {

package/dist/project-work-showcase.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-NncH7Ewd.js';
-import './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ProjectWorkShowcaseProject {

package/dist/project-zigzag-layout.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground } from './community-initiatives-B6-QT7N6.cjs';
+import { f as SectionBackground } from './community-initiatives-BFOWojwp.cjs';
 import 'react';
-import './blocks-Cohq4eio.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ProjectZigzagLayoutItem {

package/dist/project-zigzag-layout.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { f as SectionBackground } from './community-initiatives-NncH7Ewd.js';
+import { f as SectionBackground } from './community-initiatives-CUqiRX_E.js';
 import 'react';
-import './blocks-k17uluAz.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ProjectZigzagLayoutItem {

package/dist/registry.cjs

@@ -16,6 +16,7 @@ var forms = require('@page-speed/forms');
 var integration = require('@page-speed/forms/integration');
 var framerMotion = require('framer-motion');
 var inputs = require('@page-speed/forms/inputs');
+var lightbox = require('@page-speed/lightbox');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var useEmblaCarousel = require('embla-carousel-react');
@@ -23,7 +24,6 @@ var Autoplay = require('embla-carousel-autoplay');
 var ProgressPrimitive = require('@radix-ui/react-progress');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var AutoScroll3 = require('embla-carousel-auto-scroll');
-var lightbox = require('@page-speed/lightbox');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var LabelPrimitive = require('@radix-ui/react-label');
@@ -884,7 +884,7 @@ function AboutStatsShowcase({
           "gap-6 md:gap-16",
           statsClassName
         ),
-        children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 border-b pb-8", children: [
+        children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
           stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-medium md:text-5xl", children: stat.value }) : stat.value),
           stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base", children: stat.label }) : stat.label)
         ] }, idx))
@@ -918,7 +918,7 @@ function AboutStatsShowcase({
               className: cn(
                 "flex flex-col md:flex-row",
                 "justify-center items-center flex-wrap",
-                "gap-6 md:gap-12 opacity-70",
+                "gap-6 md:gap-12 opacity-50",
                 logosClassName
               ),
               children: logos.map((logo, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -926,7 +926,7 @@ function AboutStatsShowcase({
                 {
                   src: logo.src,
                   alt: logo.alt,
-                  className: "h-8 object-contain w-auto md:h-14 max-h-14",
+                  className: "h-8 object-contain w-auto md:h-10 max-h-10",
                   optixFlowConfig
                 }
               ) }, idx))
@@ -1731,8 +1731,6 @@ function AboutVisionGallery({
   secondarySectionTitleClassName,
   secondarySectionContent,
   secondarySectionContentClassName,
-  secondarySectionLinkText,
-  secondarySectionLinkUrl,
   ctaTitle,
   ctaTitleClassName,
   ctaAction,
@@ -1784,7 +1782,7 @@ function AboutVisionGallery({
     );
   }, [ctaSlot, ctaAction]);
   const hasPrimarySection = primarySectionTitle || primarySectionContent;
-  const hasSecondarySection = secondarySectionTitle || secondarySectionContent || secondarySectionLinkText;
+  const hasSecondarySection = secondarySectionTitle || secondarySectionContent;
   const hasCtaSection = ctaTitle || ctaSlot || ctaAction;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1812,7 +1810,6 @@ function AboutVisionGallery({
             {
               className: cn(
                 "text-xl font-medium text-balance",
-                getTextColor(background, "muted"),
                 subtitleClassName
               ),
               children: subtitle
@@ -1820,7 +1817,7 @@ function AboutVisionGallery({
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: subtitle }))
         ] }),
         imagesContent,
-        (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid max-w-5xl gap:7 md:gap-28 py-6 md:py-16 md:grid-cols-2", children: [
+        (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap:7 md:gap-28 py-6 md:py-16 md:grid-cols-2", children: [
           hasPrimarySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             primarySectionTitle && (typeof primarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h2",
@@ -1831,18 +1828,17 @@ function AboutVisionGallery({
                 ),
                 children: primarySectionTitle
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", primarySectionTitleClassName), children: primarySectionTitle })),
+            ) : primarySectionTitle),
             primarySectionContent && (typeof primarySectionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
                 className: cn(
                   "text-normal md:text-xl leading-8 font-medium whitespace-pre-line",
-                  getTextColor(background, "muted"),
                   primarySectionContentClassName
                 ),
                 children: primarySectionContent
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: primarySectionContentClassName, children: primarySectionContent }))
+            ) : primarySectionContent)
           ] }),
           hasSecondarySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             secondarySectionTitle && (typeof secondarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1854,36 +1850,26 @@ function AboutVisionGallery({
                 ),
                 children: secondarySectionTitle
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", secondarySectionTitleClassName), children: secondarySectionTitle })),
-            (secondarySectionContent || secondarySectionLinkText) && /* @__PURE__ */ jsxRuntime.jsxs(
-              "p",
+            ) : secondarySectionTitle),
+            secondarySectionContent && (typeof secondarySectionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
               {
                 className: cn(
                   "text-normal md:text-xl leading-8 font-medium",
-                  getTextColor(background, "muted"),
                   secondarySectionContentClassName
                 ),
-                children: [
-                  secondarySectionLinkText && secondarySectionLinkUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                    Pressable,
-                    {
-                      href: secondarySectionLinkUrl,
-                      className: "mr-1 underline",
-                      children: secondarySectionLinkText
-                    }
-                  ),
-                  secondarySectionContent
-                ]
+                children: secondarySectionContent
               }
-            )
+            ) : secondarySectionContent)
           ] })
         ] }),
         hasCtaSection && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl p-14 text-center md:flex-row md:text-left",
-              getNestedCardBg(background, "subtle"),
+              "flex flex-col items-center justify-between",
+              "gap-8 rounded-2xl p-14 text-center",
+              "md:flex-row md:text-left bg-muted text-muted-foreground",
               ctaClassName
             ),
             children: [
@@ -1896,7 +1882,7 @@ function AboutVisionGallery({
                   ),
                   children: ctaTitle
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaTitleClassName, children: ctaTitle })),
+              ) : ctaTitle),
               ctaContent
             ]
           }
@@ -2464,7 +2450,7 @@ function AboutSplitHero({
     }
   }, [background]);
   const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
-  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
   const contentArea = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -7757,11 +7743,31 @@ function AboutStoryGallery({
   imagesClassName,
   optixFlowConfig,
   background,
-  spacing = "py-8 md:py-32",
+  spacing = "lg",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
+  const [lightboxOpen, setLightboxOpen] = React26.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React26.useState(0);
+  const lightboxItems = React26.useMemo(
+    () => (images ?? []).map((img, index) => ({
+      id: `gallery-image-${index}`,
+      type: "image",
+      src: img.src,
+      alt: img.alt,
+      download: true,
+      share: true
+    })),
+    [images]
+  );
+  const handleImageClick = React26.useCallback((index) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = React26.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const imagesContent = React26.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -7773,21 +7779,38 @@ function AboutStoryGallery({
           imagesClassName
         ),
         children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
+          "div",
           {
-            src: image.src,
-            alt: image.alt,
             className: cn(
-              "h-64 w-full rounded-xl object-cover",
-              image.className
+              "cursor-pointer overflow-hidden",
+              "rounded-xl transition-transform duration-500",
+              "hover:scale-[1.02] hover:shadow-lg"
             ),
-            optixFlowConfig
+            onClick: () => handleImageClick(idx),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleImageClick(idx);
+              }
+            },
+            "aria-label": `View ${image.alt} in lightbox`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn("h-64 w-full object-cover", image.className),
+                optixFlowConfig
+              }
+            )
           },
           idx
         ))
       }
     );
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig, handleImageClick]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -7820,7 +7843,28 @@ function AboutStoryGallery({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
         ] }),
-        imagesContent
+        imagesContent,
+        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          lightbox.Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
       ]
     }
   );
@@ -7861,7 +7905,9 @@ function AboutStreamlineTeam({
         "div",
         {
           className: cn(
-            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
+            "flex  shrink-0 items-center justify-center",
+            "size-12 rounded-lg",
+            "bg-primary text-primary-foreground",
             feature.iconBgClass
           ),
           children: feature.icon
@@ -7869,35 +7915,10 @@ function AboutStreamlineTeam({
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
-        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: cn("text-sm", getTextColor(background, "muted")),
-            children: feature.description
-          }
-        ) : feature.description)
+        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: feature.description }) : feature.description)
       ] })
     ] }, idx)) });
   }, [featuresSlot, features, featuresClassName, background]);
-  const actionsContent = React26.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        size: action.size || "lg",
-        variant: action.variant || "default",
-        asButton: true,
-        children: [
-          action.label,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-        ]
-      },
-      idx
-    )) });
-  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -7905,7 +7926,7 @@ function AboutStreamlineTeam({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-2 lg:items-center", children: [
@@ -7928,14 +7949,17 @@ function AboutStreamlineTeam({
                 src: secondaryImage.src,
                 alt: secondaryImage.alt,
                 className: cn(
-                  "absolute -bottom-8 -right-8 h-48 w-48 rounded-xl border-4 border-background object-cover shadow-lg",
+                  "size-24 md:size-48",
+                  "rounded-xl object-cover shadow-lg",
+                  "border-4 border-background",
+                  "absolute -bottom-8 -right-2 md:-right-8",
                   secondaryImageClassName
                 ),
                 optixFlowConfig
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-0 md:pl-8", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h1",
               {
@@ -7945,18 +7969,8 @@ function AboutStreamlineTeam({
                 ),
                 children: title
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "mt-6 text-lg",
-                  getTextColor(background, "muted"),
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
+            ) : title),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg", descriptionClassName), children: description }) : description),
             featuresContent
           ] })
         ] }),
@@ -7964,9 +7978,9 @@ function AboutStreamlineTeam({
           "div",
           {
             className: cn(
-              "mt-6 md:mt-32 rounded-2xl p-8 md:p-16",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
+              "mt-10 md:mt-24 p-6 md:p-16",
+              "bg-muted text-muted-foreground",
+              "rounded-2xl shadow-lg",
               teamSectionClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
@@ -7979,19 +7993,16 @@ function AboutStreamlineTeam({
                   ),
                   children: teamTitle
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: teamTitleClassName, children: teamTitle })),
-              teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
+              ) : teamTitle),
+              teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", teamDescriptionClassName), children: teamDescription }) : teamDescription),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
                 {
-                  className: cn(
-                    "mt-4 text-lg",
-                    getTextColor(background, "muted"),
-                    teamDescriptionClassName
-                  ),
-                  children: teamDescription
+                  actions,
+                  actionsSlot,
+                  actionsClassName
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", teamDescriptionClassName), children: teamDescription })),
-              actionsContent
+              )
             ] })
           }
         )
@@ -39503,12 +39514,12 @@ function FaqNumberedGrid({
   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,
@@ -39525,7 +39536,9 @@ function FaqNumberedGrid({
       "div",
       {
         className: cn(
-          "mx-auto mt-10 grid max-w-7xl gap-6 md:grid-cols-2",
+          "mx-0 md:mx-auto mt-6 md:mt-10",
+          "max-w-full md:max-w-7xl",
+          "grid gap-3 md:gap-6 grid-cols-1 md:grid-cols-2",
           gridClassName
         ),
         children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -39540,27 +39553,17 @@ function FaqNumberedGrid({
                 "span",
                 {
                   className: cn(
-                    "flex size-10 shrink-0 items-center justify-center rounded-lg text-md font-semibold",
-                    getNestedCardBg(background),
-                    getNestedCardTextColor(background),
+                    "flex size-10 shrink-0 items-center justify-center",
+                    "rounded-lg text-md font-semibold shadow-lg",
+                    "bg-primary text-primary-foreground",
                     numberClassName
                   ),
                   children: index + 1
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex items-center justify-between", children: typeof item.question === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium", questionClassName), children: item.question }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: questionClassName, children: item.question }) }),
-                typeof item.answer === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    className: cn(
-                      getTextColor(background, "muted"),
-                      "text-sm",
-                      answerClassName
-                    ),
-                    children: item.answer
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: answerClassName, children: item.answer })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex items-center justify-between", children: typeof item.question === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium", questionClassName), children: item.question }) : item.question }),
+                typeof item.answer === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", answerClassName), children: item.answer }) : item.answer
               ] })
             ]
           },
@@ -39587,7 +39590,8 @@ function FaqNumberedGrid({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -39605,18 +39609,8 @@ function FaqNumberedGrid({
                   ),
                   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 }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-md lg:text-lg", descriptionClassName), children: description }) : description)
             ]
           }
         ),