@opensite/ui 1.1.8 → 1.2.0

package/dist/cta-workflow-tabs.cjs

@@ -947,7 +947,7 @@ var Section = React__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/cta-workflow-tabs.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Cuk3GvML.cjs';
-import { A as ActionConfig, S as StatItem } from './blocks-qOnR4WhL.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig, S as StatItem } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface CtaWorkflowTabItem {

package/dist/cta-workflow-tabs.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-e8Z-KfHF.js';
-import { A as ActionConfig, S as StatItem } from './blocks-MliqP3QH.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig, S as StatItem } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface CtaWorkflowTabItem {

package/dist/cta-workflow-tabs.js

@@ -926,7 +926,7 @@ var Section = React__default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children

package/dist/expandable-case-study-cards.cjs

@@ -8,7 +8,6 @@ var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
-var lightbox = require('@page-speed/lightbox');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -563,7 +562,7 @@ var Section = React__namespace.default.forwardRef(
               className: cn("relative z-10", containerClassName),
               children: [
                 (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
-                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
                 children
@@ -577,6 +576,8 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ExpandableCaseStudyCards({
+  title,
+  description,
   items,
   itemsSlot,
   className,
@@ -594,36 +595,6 @@ function ExpandableCaseStudyCards({
   optixFlowConfig
 }) {
   const [selection, setSelection] = React.useState(items?.[0]?.id);
-  const [lightboxOpen, setLightboxOpen] = React.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React.useState(0);
-  const lightboxItems = React.useMemo(() => {
-    if (!items) return [];
-    return items.flatMap((item) => [
-      {
-        id: `image-${item.id}`,
-        type: "image",
-        src: item.image,
-        alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
-        download: true,
-        share: true
-      },
-      {
-        id: `logo-${item.id}`,
-        type: "image",
-        src: item.logo,
-        alt: item.logoAlt || item.company,
-        download: true,
-        share: true
-      }
-    ]);
-  }, [items]);
-  const handleImageClick = React.useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const itemsContent = React.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -646,119 +617,69 @@ function ExpandableCaseStudyCards({
             className: "relative block h-full w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card",
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: 'absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm', children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:right-[calc(50%+40px)] lg:right-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:right-[calc(50%+40px)] lg:right-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
                   {
-                    className: "h-full w-full overflow-clip rounded-xl cursor-pointer",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      handleImageClick(itemIndex * 2);
-                    },
-                    role: "button",
-                    tabIndex: 0,
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleImageClick(itemIndex * 2);
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      img.Img,
-                      {
-                        src: item.image,
-                        alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
-                        className: cn(
-                          "h-full w-full object-cover object-center",
-                          imageClassName
-                        ),
-                        loading: "lazy",
-                        optixFlowConfig
-                      }
-                    )
+                    src: item.image,
+                    alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
+                    className: cn(
+                      "h-full w-full object-cover object-center",
+                      imageClassName
+                    ),
+                    loading: "lazy",
+                    optixFlowConfig
                   }
-                ) }),
+                ) }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "absolute inset-y-[25%] left-[50%] flex aspect-389/420 h-[50%] items-center justify-center max-lg:hidden cursor-pointer",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      handleImageClick(itemIndex * 2 + 1);
-                    },
-                    role: "button",
-                    tabIndex: 0,
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleImageClick(itemIndex * 2 + 1);
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                    className: cn(
+                      "absolute top-[50%] left-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full max-lg:hidden",
+                      getNestedCardBg(background, "accent"),
+                      getNestedCardTextColor(background)
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/plus", size: 32 })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:inset-x-[50%] md:max-lg:w-[50%]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: 'flex flex-col gap-3 p-4 pt-6 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                    item.logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                       img.Img,
                       {
                         src: item.logo,
-                        alt: item.logoAlt || item.company,
-                        className: cn("h-8 invert", logoClassName),
+                        alt: item.logoAlt || item.company || "Logo",
+                        className: cn("h-6 max-w-[120px] object-contain object-left lg:h-8 lg:max-w-[150px]", logoClassName),
                         loading: "lazy",
                         optixFlowConfig
                       }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute top-[50%] left-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full max-lg:hidden", getNestedCardBg(background, "accent"), getNestedCardTextColor(background)), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  DynamicIcon,
-                  {
-                    name: "lucide/plus",
-                    size: 32
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:inset-x-[50%] md:max-lg:w-[50%]", children: [
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
+                    item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-primary-foreground/70", children: item.description })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex size-8 shrink-0 items-center justify-center rounded-full text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10",
+                        getNestedCardBg(background, "card")
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
+                    }
+                  )
+                ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     className: cn(
-                      'flex h-20 items-center gap-2 p-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0',
+                      'flex h-20 items-center gap-2 px-4 pb-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0',
                       badgesClassName
                     ),
                     children: item.badges?.map((badge, idx) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: 'flex flex-col gap-2 p-4 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:translate-y-4 lg:group-data-[state="closed"]:opacity-0', children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "lg:hidden cursor-pointer",
-                      onClick: (e) => {
-                        e.preventDefault();
-                        handleImageClick(itemIndex * 2 + 1);
-                      },
-                      role: "button",
-                      tabIndex: 0,
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
-                          handleImageClick(itemIndex * 2 + 1);
-                        }
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        img.Img,
-                        {
-                          src: item.logo,
-                          alt: item.logoAlt || item.company,
-                          className: cn("h-5 invert lg:h-6", logoClassName),
-                          loading: "lazy",
-                          optixFlowConfig
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex size-8 items-center justify-center rounded-full transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10", getNestedCardBg(background, "card"), getNestedCardTextColor(background)), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 }) })
-                  ] })
-                ] })
+                )
               ] })
             ]
           }
@@ -776,50 +697,29 @@ function ExpandableCaseStudyCards({
     badgesClassName,
     badgeClassName,
     optixFlowConfig,
-    handleImageClick
+    background
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      title,
+      subtitle: description,
       background,
       spacing,
       pattern,
       patternOpacity,
       patternClassName,
       className,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row",
-              containerClassName
-            ),
-            children: itemsContent
-          }
-        ),
-        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
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row",
+            containerClassName
+          ),
+          children: itemsContent
+        }
+      )
     }
   );
 }

package/dist/expandable-case-study-cards.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Cuk3GvML.cjs';
-import { O as OptixFlowConfig } from './blocks-qOnR4WhL.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -18,6 +18,10 @@ interface ExpandableCaseStudyItem {
      * Title of the case study
      */
     title: React.ReactNode;
+    /**
+     * Optional description for the case study
+     */
+    description?: React.ReactNode;
     /**
      * Link URL for the case study
      */
@@ -31,9 +35,9 @@ interface ExpandableCaseStudyItem {
      */
     imageAlt?: string;
     /**
-     * Company logo source URL
+     * Company logo source URL (optional)
      */
-    logo: string;
+    logo?: string;
     /**
      * Alt text for the logo
      */
@@ -41,7 +45,7 @@ interface ExpandableCaseStudyItem {
     /**
      * Company name
      */
-    company: string;
+    company?: string;
     /**
      * Array of badge labels
      */
@@ -52,6 +56,14 @@ interface ExpandableCaseStudyItem {
     className?: string;
 }
 interface ExpandableCaseStudyCardsProps {
+    /**
+     * Section title (displayed above cards)
+     */
+    title?: string;
+    /**
+     * Section description/subtitle (displayed above cards)
+     */
+    description?: string;
     /**
      * Array of case study items to display
      */
@@ -117,27 +129,40 @@ interface ExpandableCaseStudyCardsProps {
  * ExpandableCaseStudyCards displays case study cards that expand on hover.
  *
  * Features a horizontal row of cards where the hovered card expands to 60% width
- * while others shrink to 20%. Each card shows a background image, company logo,
- * badges, and a title with an arrow icon. Ideal for showcasing portfolio items,
+ * while others shrink to 20%. Each card shows a background image, title with optional
+ * description, badges, and an arrow icon. Ideal for showcasing portfolio items,
  * case studies, or featured projects with visual emphasis on the selected item.
  *
  * @example
  * ```tsx
  * <ExpandableCaseStudyCards
+ *   title="Our Work"
+ *   description="Featured case studies"
  *   items={[
  *     {
  *       id: "1",
  *       title: "E-commerce Platform Redesign",
+ *       description: "A complete overhaul of the shopping experience",
  *       href: "/case-studies/ecommerce",
  *       image: "/images/case-1.jpg",
- *       logo: "/logos/client-1.svg",
- *       company: "TechCorp",
  *       badges: ["E-commerce", "UX Design"]
+ *     },
+ *     {
+ *       id: "2",
+ *       title: "Mobile App Launch",
+ *       description: "Cross-platform development for iOS and Android",
+ *       href: "/case-studies/mobile-app",
+ *       image: "/images/case-2.jpg",
+ *       logo: "/logos/client-2.svg",
+ *       company: "TechCorp",
+ *       badges: ["Mobile", "React Native"]
  *     }
  *   ]}
+ *   background="gray"
+ *   spacing="lg"
  * />
  * ```
  */
-declare function ExpandableCaseStudyCards({ items, itemsSlot, className, containerClassName, cardClassName, imageClassName, logoClassName, badgesClassName, badgeClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ExpandableCaseStudyCardsProps): React.JSX.Element;
+declare function ExpandableCaseStudyCards({ title, description, items, itemsSlot, className, containerClassName, cardClassName, imageClassName, logoClassName, badgesClassName, badgeClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ExpandableCaseStudyCardsProps): React.JSX.Element;
 
 export { ExpandableCaseStudyCards, type ExpandableCaseStudyCardsProps, type ExpandableCaseStudyItem };

package/dist/expandable-case-study-cards.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-e8Z-KfHF.js';
-import { O as OptixFlowConfig } from './blocks-MliqP3QH.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-BmOlmOJa.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -18,6 +18,10 @@ interface ExpandableCaseStudyItem {
      * Title of the case study
      */
     title: React.ReactNode;
+    /**
+     * Optional description for the case study
+     */
+    description?: React.ReactNode;
     /**
      * Link URL for the case study
      */
@@ -31,9 +35,9 @@ interface ExpandableCaseStudyItem {
      */
     imageAlt?: string;
     /**
-     * Company logo source URL
+     * Company logo source URL (optional)
      */
-    logo: string;
+    logo?: string;
     /**
      * Alt text for the logo
      */
@@ -41,7 +45,7 @@ interface ExpandableCaseStudyItem {
     /**
      * Company name
      */
-    company: string;
+    company?: string;
     /**
      * Array of badge labels
      */
@@ -52,6 +56,14 @@ interface ExpandableCaseStudyItem {
     className?: string;
 }
 interface ExpandableCaseStudyCardsProps {
+    /**
+     * Section title (displayed above cards)
+     */
+    title?: string;
+    /**
+     * Section description/subtitle (displayed above cards)
+     */
+    description?: string;
     /**
      * Array of case study items to display
      */
@@ -117,27 +129,40 @@ interface ExpandableCaseStudyCardsProps {
  * ExpandableCaseStudyCards displays case study cards that expand on hover.
  *
  * Features a horizontal row of cards where the hovered card expands to 60% width
- * while others shrink to 20%. Each card shows a background image, company logo,
- * badges, and a title with an arrow icon. Ideal for showcasing portfolio items,
+ * while others shrink to 20%. Each card shows a background image, title with optional
+ * description, badges, and an arrow icon. Ideal for showcasing portfolio items,
  * case studies, or featured projects with visual emphasis on the selected item.
  *
  * @example
  * ```tsx
  * <ExpandableCaseStudyCards
+ *   title="Our Work"
+ *   description="Featured case studies"
  *   items={[
  *     {
  *       id: "1",
  *       title: "E-commerce Platform Redesign",
+ *       description: "A complete overhaul of the shopping experience",
  *       href: "/case-studies/ecommerce",
  *       image: "/images/case-1.jpg",
- *       logo: "/logos/client-1.svg",
- *       company: "TechCorp",
  *       badges: ["E-commerce", "UX Design"]
+ *     },
+ *     {
+ *       id: "2",
+ *       title: "Mobile App Launch",
+ *       description: "Cross-platform development for iOS and Android",
+ *       href: "/case-studies/mobile-app",
+ *       image: "/images/case-2.jpg",
+ *       logo: "/logos/client-2.svg",
+ *       company: "TechCorp",
+ *       badges: ["Mobile", "React Native"]
  *     }
  *   ]}
+ *   background="gray"
+ *   spacing="lg"
  * />
  * ```
  */
-declare function ExpandableCaseStudyCards({ items, itemsSlot, className, containerClassName, cardClassName, imageClassName, logoClassName, badgesClassName, badgeClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ExpandableCaseStudyCardsProps): React.JSX.Element;
+declare function ExpandableCaseStudyCards({ title, description, items, itemsSlot, className, containerClassName, cardClassName, imageClassName, logoClassName, badgesClassName, badgeClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: ExpandableCaseStudyCardsProps): React.JSX.Element;
 
 export { ExpandableCaseStudyCards, type ExpandableCaseStudyCardsProps, type ExpandableCaseStudyItem };