@opensite/ui 0.7.5 → 0.7.6

package/dist/project-table-list.d.ts

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-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 ProjectTableListItem {

package/dist/project-video-carousel.d.cts

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-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 ProjectVideoCarouselItem {

package/dist/project-video-carousel.d.ts

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-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 ProjectVideoCarouselItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-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 ProjectVideoHoverBentoItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-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 ProjectVideoHoverBentoItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-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 ProjectVideoHoverGridItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-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 ProjectVideoHoverGridItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-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 ProjectVideoHoverRoundedItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-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 ProjectVideoHoverRoundedItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-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 ProjectVideoHoverStackItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-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 ProjectVideoHoverStackItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-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 ProjectVideoHoverTwoByTwoItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-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 ProjectVideoHoverTwoByTwoItem {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-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 ProjectWorkShowcaseProject {

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

@@ -1,11 +1,11 @@
 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 } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-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 ProjectWorkShowcaseProject {

package/dist/registry.cjs

@@ -18280,7 +18280,7 @@ function CarouselFullscreenScrollFx({
   slides,
   slidesSlot,
   className,
-  containerClassName = "h-full flex flex-col justify-center",
+  containerClassName = "mx-auto w-full p-0 px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-full flex flex-col justify-center",
   navigationClassName,
   contentClassName,
   subtitleClassName,
@@ -18302,9 +18302,9 @@ function CarouselFullscreenScrollFx({
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer || !slides?.length) return;
     const handleScroll = () => {
-      const scrollLeft = scrollContainer.scrollLeft;
-      const slideWidth = scrollContainer.clientWidth;
-      const newIndex = Math.round(scrollLeft / slideWidth);
+      const scrollTop = scrollContainer.scrollTop;
+      const slideHeight = scrollContainer.clientHeight;
+      const newIndex = Math.round(scrollTop / slideHeight);
       setActiveIndex(newIndex);
     };
     scrollContainer.addEventListener("scroll", handleScroll);
@@ -18313,14 +18313,14 @@ function CarouselFullscreenScrollFx({
   const scrollToSlide = React52__namespace.useCallback((index) => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) return;
-    const slideWidth = scrollContainer.clientWidth;
+    const slideHeight = scrollContainer.clientHeight;
     if (typeof scrollContainer.scrollTo === "function") {
       scrollContainer.scrollTo({
-        left: slideWidth * index,
+        top: slideHeight * index,
         behavior: "smooth"
       });
     } else {
-      scrollContainer.scrollLeft = slideWidth * index;
+      scrollContainer.scrollTop = slideHeight * index;
     }
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -18333,7 +18333,7 @@ function CarouselFullscreenScrollFx({
       pattern,
       patternOpacity,
       containerMaxWidth,
-      containerClassName: "p-0",
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -18360,7 +18360,7 @@ function CarouselFullscreenScrollFx({
           "div",
           {
             ref: scrollContainerRef,
-            className: "flex h-screen snap-x snap-mandatory overflow-x-auto overflow-y-hidden scroll-smooth",
+            className: "flex h-screen flex-col snap-y snap-mandatory overflow-x-hidden overflow-y-auto scroll-smooth",
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
             children: slidesSlot ? slidesSlot : slides?.map((slide, index) => {
               const renderActions = React52__namespace.useMemo(() => {
@@ -18396,7 +18396,7 @@ function CarouselFullscreenScrollFx({
                 {
                   id: `fullscreen-${slide.id}`,
                   className: cn(
-                    "relative flex h-screen min-w-full snap-start items-center justify-center overflow-hidden",
+                    "relative flex h-screen min-h-screen w-full snap-start items-center justify-center overflow-hidden",
                     slide.className
                   ),
                   children: [
@@ -18427,7 +18427,7 @@ function CarouselFullscreenScrollFx({
                       "div",
                       {
                         className: cn(
-                          "relative z-10 mx-auto max-w-4xl md:max-w-2xl px-6 text-center text-white text-shadow",
+                          "relative z-10 mx-auto max-w-4xl md:max-w-xl px-6 text-center text-shadow",
                           contentClassName
                         ),
                         children: [
@@ -18466,12 +18466,14 @@ function CarouselFullscreenScrollFx({
                       }
                     ),
                     index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
+                      "button",
                       {
+                        onClick: () => scrollToSlide(index + 1),
                         className: cn(
-                          "absolute bottom-8 left-1/2 -translate-x-1/2",
+                          "absolute bottom-8 left-1/2 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
                           scrollIndicatorClassName
                         ),
+                        "aria-label": "Scroll to next slide",
                         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
@@ -19514,6 +19516,8 @@ function SliderWrapper({ children, value, className }) {
   ) });
 }
 function CarouselProgressSlider({
+  heading,
+  subheading,
   slides,
   slidesSlot,
   duration = 5e3,
@@ -19527,8 +19531,8 @@ function CarouselProgressSlider({
   buttonClassName,
   progressBarClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -19594,12 +19598,14 @@ function CarouselProgressSlider({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Section,
         {
+          title: heading,
+          subtitle: subheading,
           background,
           spacing,
           className: cn(className),
           pattern,
           patternOpacity,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto px-4", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative min-h-[300px]", imageClassName), children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
               SliderWrapper,
               {
@@ -19610,26 +19616,44 @@ function CarouselProgressSlider({
                   {
                     src: slide.image,
                     alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
-                    className: cn("h-full w-full object-cover", slide.imageClassName),
+                    className: cn(
+                      "h-full w-full object-cover",
+                      slide.imageClassName
+                    ),
                     optixFlowConfig
                   }
                 ) })
               },
               slide.id
             )) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-4", navigationClassName), children: slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsxs(
-              SliderBtn,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                value: slide.id,
-                className: cn("rounded-lg border p-4 text-left transition-colors hover:bg-muted", buttonClassName),
-                progressBarClass: cn("bottom-0 h-1 bg-primary", progressBarClassName),
-                children: [
-                  slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: slide.title })),
-                  slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: slide.description }))
-                ]
-              },
-              slide.id
-            )) })
+                className: cn(
+                  "flex flex-col justify-center gap-4",
+                  navigationClassName
+                ),
+                children: slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  SliderBtn,
+                  {
+                    value: slide.id,
+                    className: cn(
+                      "rounded-lg border p-4 text-left transition-colors hover:bg-muted",
+                      buttonClassName
+                    ),
+                    progressBarClass: cn(
+                      "bottom-0 h-1 bg-primary",
+                      progressBarClassName
+                    ),
+                    children: [
+                      slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: slide.title })),
+                      slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: slide.description }))
+                    ]
+                  },
+                  slide.id
+                ))
+              }
+            )
           ] }) })
         }
       )

package/dist/registry.js

@@ -18240,7 +18240,7 @@ function CarouselFullscreenScrollFx({
   slides,
   slidesSlot,
   className,
-  containerClassName = "h-full flex flex-col justify-center",
+  containerClassName = "mx-auto w-full p-0 px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-full flex flex-col justify-center",
   navigationClassName,
   contentClassName,
   subtitleClassName,
@@ -18262,9 +18262,9 @@ function CarouselFullscreenScrollFx({
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer || !slides?.length) return;
     const handleScroll = () => {
-      const scrollLeft = scrollContainer.scrollLeft;
-      const slideWidth = scrollContainer.clientWidth;
-      const newIndex = Math.round(scrollLeft / slideWidth);
+      const scrollTop = scrollContainer.scrollTop;
+      const slideHeight = scrollContainer.clientHeight;
+      const newIndex = Math.round(scrollTop / slideHeight);
       setActiveIndex(newIndex);
     };
     scrollContainer.addEventListener("scroll", handleScroll);
@@ -18273,14 +18273,14 @@ function CarouselFullscreenScrollFx({
   const scrollToSlide = React52.useCallback((index) => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) return;
-    const slideWidth = scrollContainer.clientWidth;
+    const slideHeight = scrollContainer.clientHeight;
     if (typeof scrollContainer.scrollTo === "function") {
       scrollContainer.scrollTo({
-        left: slideWidth * index,
+        top: slideHeight * index,
         behavior: "smooth"
       });
     } else {
-      scrollContainer.scrollLeft = slideWidth * index;
+      scrollContainer.scrollTop = slideHeight * index;
     }
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -18293,7 +18293,7 @@ function CarouselFullscreenScrollFx({
       pattern,
       patternOpacity,
       containerMaxWidth,
-      containerClassName: "p-0",
+      containerClassName,
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -18320,7 +18320,7 @@ function CarouselFullscreenScrollFx({
           "div",
           {
             ref: scrollContainerRef,
-            className: "flex h-screen snap-x snap-mandatory overflow-x-auto overflow-y-hidden scroll-smooth",
+            className: "flex h-screen flex-col snap-y snap-mandatory overflow-x-hidden overflow-y-auto scroll-smooth",
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
             children: slidesSlot ? slidesSlot : slides?.map((slide, index) => {
               const renderActions = React52.useMemo(() => {
@@ -18356,7 +18356,7 @@ function CarouselFullscreenScrollFx({
                 {
                   id: `fullscreen-${slide.id}`,
                   className: cn(
-                    "relative flex h-screen min-w-full snap-start items-center justify-center overflow-hidden",
+                    "relative flex h-screen min-h-screen w-full snap-start items-center justify-center overflow-hidden",
                     slide.className
                   ),
                   children: [
@@ -18387,7 +18387,7 @@ function CarouselFullscreenScrollFx({
                       "div",
                       {
                         className: cn(
-                          "relative z-10 mx-auto max-w-4xl md:max-w-2xl px-6 text-center text-white text-shadow",
+                          "relative z-10 mx-auto max-w-4xl md:max-w-xl px-6 text-center text-shadow",
                           contentClassName
                         ),
                         children: [
@@ -18426,12 +18426,14 @@ function CarouselFullscreenScrollFx({
                       }
                     ),
                     index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsx(
-                      "div",
+                      "button",
                       {
+                        onClick: () => scrollToSlide(index + 1),
                         className: cn(
-                          "absolute bottom-8 left-1/2 -translate-x-1/2",
+                          "absolute bottom-8 left-1/2 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
                           scrollIndicatorClassName
                         ),
+                        "aria-label": "Scroll to next slide",
                         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
                           /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
                           /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
@@ -19474,6 +19476,8 @@ function SliderWrapper({ children, value, className }) {
   ) });
 }
 function CarouselProgressSlider({
+  heading,
+  subheading,
   slides,
   slidesSlot,
   duration = 5e3,
@@ -19487,8 +19491,8 @@ function CarouselProgressSlider({
   buttonClassName,
   progressBarClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -19554,12 +19558,14 @@ function CarouselProgressSlider({
       children: /* @__PURE__ */ jsx(
         Section,
         {
+          title: heading,
+          subtitle: subheading,
           background,
           spacing,
           className: cn(className),
           pattern,
           patternOpacity,
-          children: /* @__PURE__ */ jsx("div", { className: cn("container mx-auto px-4", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
+          children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
             /* @__PURE__ */ jsx("div", { className: cn("relative min-h-[300px]", imageClassName), children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
               SliderWrapper,
               {
@@ -19570,26 +19576,44 @@ function CarouselProgressSlider({
                   {
                     src: slide.image,
                     alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
-                    className: cn("h-full w-full object-cover", slide.imageClassName),
+                    className: cn(
+                      "h-full w-full object-cover",
+                      slide.imageClassName
+                    ),
                     optixFlowConfig
                   }
                 ) })
               },
               slide.id
             )) }),
-            /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-4", navigationClassName), children: slides?.map((slide) => /* @__PURE__ */ jsxs(
-              SliderBtn,
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                value: slide.id,
-                className: cn("rounded-lg border p-4 text-left transition-colors hover:bg-muted", buttonClassName),
-                progressBarClass: cn("bottom-0 h-1 bg-primary", progressBarClassName),
-                children: [
-                  slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : /* @__PURE__ */ jsx("div", { children: slide.title })),
-                  slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: slide.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: slide.description }))
-                ]
-              },
-              slide.id
-            )) })
+                className: cn(
+                  "flex flex-col justify-center gap-4",
+                  navigationClassName
+                ),
+                children: slides?.map((slide) => /* @__PURE__ */ jsxs(
+                  SliderBtn,
+                  {
+                    value: slide.id,
+                    className: cn(
+                      "rounded-lg border p-4 text-left transition-colors hover:bg-muted",
+                      buttonClassName
+                    ),
+                    progressBarClass: cn(
+                      "bottom-0 h-1 bg-primary",
+                      progressBarClassName
+                    ),
+                    children: [
+                      slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : /* @__PURE__ */ jsx("div", { children: slide.title })),
+                      slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: slide.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: slide.description }))
+                    ]
+                  },
+                  slide.id
+                ))
+              }
+            )
           ] }) })
         }
       )

package/dist/resource-detail-whitepaper-sidebar.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ResourceDetailWhitepaperSidebarSidebar {