@opensite/ui 0.8.3 → 0.8.4

package/dist/project-scroll-reveal.js

@@ -477,7 +477,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-showcase-alternating.cjs

@@ -376,7 +376,7 @@ var Section = React__default.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-showcase-alternating.js

@@ -370,7 +370,7 @@ var Section = React.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-sticky-scroll.cjs

@@ -376,7 +376,7 @@ var Section = React__default.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-sticky-scroll.js

@@ -370,7 +370,7 @@ var Section = React.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-studio-hover-preview.cjs

@@ -377,7 +377,7 @@ var Section = React__default.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-studio-hover-preview.js

@@ -371,7 +371,7 @@ var Section = React.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-table-list.cjs

@@ -376,7 +376,7 @@ var Section = React__default.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-table-list.js

@@ -370,7 +370,7 @@ var Section = React.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-carousel.cjs

@@ -502,7 +502,7 @@ var Section = React6__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -1094,7 +1094,7 @@ function CarouselPrevious({
 }
 function CarouselNext({
   className,
-  variant = "outline",
+  variant = "default",
   size = "icon",
   ...props
 }) {

package/dist/project-video-carousel.js

@@ -478,7 +478,7 @@ var Section = React6__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -1070,7 +1070,7 @@ function CarouselPrevious({
 }
 function CarouselNext({
   className,
-  variant = "outline",
+  variant = "default",
   size = "icon",
   ...props
 }) {

package/dist/project-video-hover-bento.cjs

@@ -497,7 +497,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-hover-bento.js

@@ -476,7 +476,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-hover-grid.cjs

@@ -497,7 +497,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-hover-grid.js

@@ -476,7 +476,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-hover-rounded.cjs

@@ -497,7 +497,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-hover-rounded.js

@@ -476,7 +476,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-hover-stack.cjs

@@ -497,7 +497,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-hover-stack.js

@@ -476,7 +476,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-hover-two-by-two.cjs

@@ -497,7 +497,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-video-hover-two-by-two.js

@@ -476,7 +476,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-work-showcase.cjs

@@ -972,7 +972,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/project-work-showcase.js

@@ -951,7 +951,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/registry.cjs

@@ -449,7 +449,7 @@ var Section = React52__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -19884,9 +19884,9 @@ function CarouselProgressSlider({
           className: cn(className),
           pattern,
           patternOpacity,
-          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.jsxs("div", { className: cn("relative min-h-[400px]", imageClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-4 lg:gap-8 lg:grid-cols-2", contentClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-video", children: [
+              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
                 SliderWrapper,
                 {
                   value: slide.id,
@@ -19905,20 +19905,26 @@ function CarouselProgressSlider({
                   ) })
                 },
                 slide.id
-              )) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+              )),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
                 Pressable,
                 {
                   onClick: togglePause,
                   asButton: true,
                   variant: "outline",
                   size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-background/80 backdrop-blur-sm",
                   "aria-label": isPaused ? "Play" : "Pause",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: isPaused ? "lucide/play" : "lucide/pause", size: 18 })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: isPaused ? "lucide/play" : "lucide/pause",
+                      size: 18
+                    }
+                  )
                 }
               ) })
-            ] }),
+            ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -20290,7 +20296,7 @@ function CarouselPrevious({
 }
 function CarouselNext({
   className,
-  variant = "outline",
+  variant = "default",
   size = "icon",
   ...props
 }) {
@@ -20329,7 +20335,7 @@ function FeatureShowcase({
   equalizeOnMobile,
   stretchMediaOnMobile,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -20361,9 +20367,7 @@ function FeatureShowcase({
       const heights = slideRefs.current.slice(0, items.length).map((node) => node?.offsetHeight ?? 0);
       const maxHeight = Math.max(...heights, 0);
       if (maxHeight > 0) {
-        setMobileSlideHeight(
-          (prev) => prev === maxHeight ? prev : maxHeight
-        );
+        setMobileSlideHeight((prev) => prev === maxHeight ? prev : maxHeight);
       }
     };
     updateHeights();
@@ -20413,17 +20417,28 @@ function FeatureShowcase({
       /* @__PURE__ */ jsxRuntime.jsx(
         CarouselPrevious,
         {
-          className: cn(baseArrowClassName, "left-4 md:left-6", arrowClassName)
+          className: cn(baseArrowClassName, "right-16", arrowClassName)
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         CarouselNext,
         {
-          className: cn(baseArrowClassName, "right-4 md:right-6", arrowClassName)
+          className: cn(baseArrowClassName, "right-0", arrowClassName)
         }
       )
     ] });
-  }, [items, carouselClassName, equalizeOnMobile, mobileSlideHeight, slideClassName, contentClassName, mediaWrapperClassName, mediaClassName, baseArrowClassName, arrowClassName]);
+  }, [
+    items,
+    carouselClassName,
+    equalizeOnMobile,
+    mobileSlideHeight,
+    slideClassName,
+    contentClassName,
+    mediaWrapperClassName,
+    mediaClassName,
+    baseArrowClassName,
+    arrowClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/registry.js

@@ -409,7 +409,7 @@ var Section = React52__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -19844,9 +19844,9 @@ function CarouselProgressSlider({
           className: cn(className),
           pattern,
           patternOpacity,
-          children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-            /* @__PURE__ */ jsxs("div", { className: cn("relative min-h-[400px]", imageClassName), children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4 lg:gap-8 lg:grid-cols-2", contentClassName), children: [
+            /* @__PURE__ */ jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-video", children: [
+              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
                 SliderWrapper,
                 {
                   value: slide.id,
@@ -19865,20 +19865,26 @@ function CarouselProgressSlider({
                   ) })
                 },
                 slide.id
-              )) }),
-              /* @__PURE__ */ jsx("div", { className: "relative mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsx(
+              )),
+              /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsx(
                 Pressable,
                 {
                   onClick: togglePause,
                   asButton: true,
                   variant: "outline",
                   size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-background/80 backdrop-blur-sm",
                   "aria-label": isPaused ? "Play" : "Pause",
-                  children: /* @__PURE__ */ jsx(DynamicIcon, { name: isPaused ? "lucide/play" : "lucide/pause", size: 18 })
+                  children: /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: isPaused ? "lucide/play" : "lucide/pause",
+                      size: 18
+                    }
+                  )
                 }
               ) })
-            ] }),
+            ] }) }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -20250,7 +20256,7 @@ function CarouselPrevious({
 }
 function CarouselNext({
   className,
-  variant = "outline",
+  variant = "default",
   size = "icon",
   ...props
 }) {
@@ -20289,7 +20295,7 @@ function FeatureShowcase({
   equalizeOnMobile,
   stretchMediaOnMobile,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -20321,9 +20327,7 @@ function FeatureShowcase({
       const heights = slideRefs.current.slice(0, items.length).map((node) => node?.offsetHeight ?? 0);
       const maxHeight = Math.max(...heights, 0);
       if (maxHeight > 0) {
-        setMobileSlideHeight(
-          (prev) => prev === maxHeight ? prev : maxHeight
-        );
+        setMobileSlideHeight((prev) => prev === maxHeight ? prev : maxHeight);
       }
     };
     updateHeights();
@@ -20373,17 +20377,28 @@ function FeatureShowcase({
       /* @__PURE__ */ jsx(
         CarouselPrevious,
         {
-          className: cn(baseArrowClassName, "left-4 md:left-6", arrowClassName)
+          className: cn(baseArrowClassName, "right-16", arrowClassName)
         }
       ),
       /* @__PURE__ */ jsx(
         CarouselNext,
         {
-          className: cn(baseArrowClassName, "right-4 md:right-6", arrowClassName)
+          className: cn(baseArrowClassName, "right-0", arrowClassName)
         }
       )
     ] });
-  }, [items, carouselClassName, equalizeOnMobile, mobileSlideHeight, slideClassName, contentClassName, mediaWrapperClassName, mediaClassName, baseArrowClassName, arrowClassName]);
+  }, [
+    items,
+    carouselClassName,
+    equalizeOnMobile,
+    mobileSlideHeight,
+    slideClassName,
+    contentClassName,
+    mediaWrapperClassName,
+    mediaClassName,
+    baseArrowClassName,
+    arrowClassName
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/resource-detail-whitepaper-sidebar.cjs

@@ -917,7 +917,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-detail-whitepaper-sidebar.js

@@ -896,7 +896,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-course-cards.cjs

@@ -996,7 +996,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-course-cards.js

@@ -974,7 +974,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-featured-articles.cjs

@@ -949,7 +949,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-featured-articles.js

@@ -928,7 +928,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-featured-grid.cjs

@@ -1027,7 +1027,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-featured-grid.js

@@ -1004,7 +1004,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-news-updates.cjs

@@ -968,7 +968,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-news-updates.js

@@ -945,7 +945,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/reviews-images-helpful.cjs

@@ -1015,7 +1015,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", 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 }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),