@opensite/ui 0.7.0 → 0.7.2

package/dist/registry.cjs

@@ -17285,7 +17285,7 @@ function CarouselAnimatedSections({
   actionsSlot,
   actions,
   className,
-  containerClassName,
+  containerClassName = "h-full",
   contentClassName,
   subtitleClassName,
   titleClassName,
@@ -17296,20 +17296,21 @@ function CarouselAnimatedSections({
   counterClassName,
   overlayClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
-  pattern,
-  patternOpacity
+  background = "dark",
+  spacing = "py-0",
+  containerMaxWidth = "full",
+  pattern = "diagonalCrossBasic",
+  patternOpacity = 0.033
 }) {
   const [currentIndex, setCurrentIndex] = React52__namespace.useState(0);
   const [direction, setDirection] = React52__namespace.useState(0);
   const [isAnimating, setIsAnimating] = React52__namespace.useState(false);
   const goToNext = React52__namespace.useCallback(() => {
-    if (isAnimating || currentIndex >= sections.length - 1) return;
+    if (isAnimating || currentIndex >= (sections?.length ?? 0) - 1) return;
     setIsAnimating(true);
     setDirection(1);
     setCurrentIndex((prev) => prev + 1);
-  }, [currentIndex, isAnimating, sections.length]);
+  }, [currentIndex, isAnimating, sections?.length]);
   const goToPrev = React52__namespace.useCallback(() => {
     if (isAnimating || currentIndex <= 0) return;
     setIsAnimating(true);
@@ -17333,25 +17334,6 @@ function CarouselAnimatedSections({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [goToNext, goToPrev]);
-  React52__namespace.useEffect(() => {
-    let timeout;
-    const handleWheel = (e) => {
-      e.preventDefault();
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        if (e.deltaY > 0) {
-          goToNext();
-        } else if (e.deltaY < 0) {
-          goToPrev();
-        }
-      }, 50);
-    };
-    window.addEventListener("wheel", handleWheel, { passive: false });
-    return () => {
-      window.removeEventListener("wheel", handleWheel);
-      clearTimeout(timeout);
-    };
-  }, [goToNext, goToPrev]);
   const slideVariants2 = {
     enter: (direction2) => ({
       y: direction2 > 0 ? "100%" : "-100%",
@@ -17366,7 +17348,7 @@ function CarouselAnimatedSections({
       opacity: 0
     })
   };
-  const currentSection = sections[currentIndex];
+  const currentSection = sections?.[currentIndex];
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
@@ -17378,7 +17360,10 @@ function CarouselAnimatedSections({
           asButton: true,
           variant: action.variant,
           size: action.size || "lg",
-          className: cn("bg-white text-black hover:bg-white/90", action.className),
+          className: cn(
+            "bg-white text-black hover:bg-white/90",
+            action.className
+          ),
           children: [
             action.label,
             action.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: action.icon }),
@@ -17398,8 +17383,10 @@ function CarouselAnimatedSections({
       className: cn("relative h-screen w-full overflow-hidden", className),
       pattern,
       patternOpacity,
+      containerMaxWidth,
+      containerClassName,
       children: [
-        sectionsSlot ? sectionsSlot : /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.div,
           {
             custom: direction,
@@ -17409,103 +17396,174 @@ function CarouselAnimatedSections({
             exit: "exit",
             transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
             onAnimationComplete: () => setIsAnimating(false),
-            className: cn("absolute inset-0", currentSection.className),
+            className: cn("absolute inset-0", currentSection?.className),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 img.Img,
                 {
-                  src: currentSection.image,
-                  alt: typeof currentSection.title === "string" ? currentSection.title : `Section ${currentSection.id}`,
-                  className: cn("h-full w-full object-cover", currentSection.imageClassName),
+                  src: currentSection?.image,
+                  alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
+                  className: cn(
+                    "h-full w-full object-cover",
+                    currentSection?.imageClassName
+                  ),
                   optixFlowConfig
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 bg-black/50", overlayClassName) })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("absolute inset-0 bg-black/50", overlayClassName)
+                }
+              )
             ]
           },
           currentIndex
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 flex h-full items-center", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto px-6", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          framerMotion.motion.div,
+        ) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            initial: { opacity: 0, y: 40 },
-            animate: { opacity: 1, y: 0 },
-            exit: { opacity: 0, y: -40 },
-            transition: { duration: 0.4, delay: 0.2 },
-            className: "max-w-2xl text-white",
+            className: cn(
+              "relative z-10 flex h-full items-center",
+              contentClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto px-6", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              framerMotion.motion.div,
+              {
+                initial: { opacity: 0, y: 40 },
+                animate: { opacity: 1, y: 0 },
+                exit: { opacity: 0, y: -40 },
+                transition: { duration: 0.4, delay: 0.2 },
+                className: "max-w-2xl text-white",
+                children: [
+                  currentSection?.subtitle && (typeof currentSection?.subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-2 text-sm font-medium uppercase tracking-widest text-white/70",
+                        subtitleClassName
+                      ),
+                      children: currentSection?.subtitle
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2", subtitleClassName), children: currentSection?.subtitle })),
+                  currentSection?.title && (typeof currentSection?.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mb-4 text-4xl font-bold md:text-5xl lg:text-6xl",
+                        titleClassName
+                      ),
+                      children: currentSection?.title
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", titleClassName), children: currentSection?.title })),
+                  currentSection?.description && (typeof currentSection?.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-8 text-lg text-white/80 text-balance",
+                        descriptionClassName
+                      ),
+                      children: currentSection?.description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", descriptionClassName), children: currentSection?.description })),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() || currentSection?.ctaText && /* @__PURE__ */ jsxRuntime.jsxs(
+                    Pressable,
+                    {
+                      href: currentSection?.ctaHref,
+                      onClick: currentSection?.ctaOnClick,
+                      asButton: true,
+                      size: "lg",
+                      className: "bg-white text-black hover:bg-white/90",
+                      children: [
+                        currentSection?.ctaText,
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/arrow-right",
+                            size: 16,
+                            className: "ml-2"
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                ]
+              },
+              currentIndex
+            ) }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute right-6 top-1/2 z-20 flex -translate-y-1/2 flex-col gap-3",
+              navigationClassName
+            ),
+            children: sections?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => goToSlide(index),
+                className: cn(
+                  "h-3 w-3 rounded-full border-2 transition-all",
+                  currentIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
+                ),
+                "aria-label": `Go to section ${index + 1}`
+              },
+              index
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute bottom-8 left-1/2 z-20 flex -translate-x-1/2 gap-4",
+              arrowsClassName
+            ),
             children: [
-              currentSection.subtitle && (typeof currentSection.subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-2 text-sm font-medium uppercase tracking-widest text-white/70", subtitleClassName), children: currentSection.subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2", subtitleClassName), children: currentSection.subtitle })),
-              currentSection.title && (typeof currentSection.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-4xl font-bold md:text-5xl lg:text-6xl", titleClassName), children: currentSection.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", titleClassName), children: currentSection.title })),
-              currentSection.description && (typeof currentSection.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 text-lg text-white/80", descriptionClassName), children: currentSection.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", descriptionClassName), children: currentSection.description })),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() || currentSection.ctaText && /* @__PURE__ */ jsxRuntime.jsxs(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 Pressable,
                 {
-                  href: currentSection.ctaHref,
-                  onClick: currentSection.ctaOnClick,
+                  onClick: goToPrev,
                   asButton: true,
-                  size: "lg",
-                  className: "bg-white text-black hover:bg-white/90",
-                  children: [
-                    currentSection.ctaText,
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/arrow-right",
-                        size: 16,
-                        className: "ml-2"
-                      }
-                    )
-                  ]
+                  variant: "ghost",
+                  size: "icon",
+                  disabled: currentIndex === 0,
+                  className: "rounded-full border border-white/30 text-white hover:bg-white/10 disabled:opacity-30",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-up", size: 20 })
                 }
-              ) })
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
+                {
+                  onClick: goToNext,
+                  asButton: true,
+                  variant: "ghost",
+                  size: "icon",
+                  disabled: currentIndex === (sections?.length ?? 0) - 1,
+                  className: "rounded-full border border-white/30 text-white hover:bg-white/10 disabled:opacity-30",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", size: 20 })
+                }
+              )
             ]
-          },
-          currentIndex
-        ) }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute right-6 top-1/2 z-20 flex -translate-y-1/2 flex-col gap-3", navigationClassName), children: sections.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            onClick: () => goToSlide(index),
             className: cn(
-              "h-3 w-3 rounded-full border-2 transition-all",
-              currentIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
+              "absolute bottom-8 right-8 z-20 text-sm text-white/50",
+              counterClassName
             ),
-            "aria-label": `Go to section ${index + 1}`
-          },
-          index
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute bottom-8 left-1/2 z-20 flex -translate-x-1/2 gap-4", arrowsClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              onClick: goToPrev,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              disabled: currentIndex === 0,
-              className: "rounded-full border border-white/30 text-white hover:bg-white/10 disabled:opacity-30",
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-up", size: 20 })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              onClick: goToNext,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              disabled: currentIndex === sections.length - 1,
-              className: "rounded-full border border-white/30 text-white hover:bg-white/10 disabled:opacity-30",
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", size: 20 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute bottom-8 right-8 z-20 text-sm text-white/50", counterClassName), children: [
-          String(currentIndex + 1).padStart(2, "0"),
-          " /",
-          " ",
-          String(sections.length).padStart(2, "0")
-        ] })
+            children: [
+              String(currentIndex + 1).padStart(2, "0"),
+              " /",
+              " ",
+              String(sections?.length ?? 0).padStart(2, "0")
+            ]
+          }
+        )
       ]
     }
   );
@@ -17532,11 +17590,11 @@ var variants = {
 function CarouselAutoProgressSlides({
   heading,
   subheading,
-  slideLabel,
   items,
   slidesSlot,
-  autoAdvanceInterval = 50,
+  autoAdvanceInterval = 4200,
   className,
+  containerClassName = "flex flex-col items-center justify-center gap-6 md:gap-12",
   headerClassName,
   headingClassName,
   subheadingClassName,
@@ -17545,8 +17603,8 @@ function CarouselAutoProgressSlides({
   slideContainerClassName,
   imageClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -17602,54 +17660,73 @@ function CarouselAutoProgressSlides({
       ),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-6xl tracking-tighter", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-2xl text-foreground/50", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-center gap-5", navigationClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
             {
-              onClick: handlePrev,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-foreground/50 hover:bg-foreground/20 active:scale-95",
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
+              className: cn(
+                "mt-4 text-2xl text-foreground/50",
+                subheadingClassName
+              ),
+              children: subheading
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1", children: items?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.button,
-            {
-              initial: false,
-              onClick: () => handleDotClick(index),
-              animate: {
-                width: index === currentIndex ? "30px" : "8px"
-              },
-              className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-foreground/15 p-0.5 text-foreground/50",
-              children: currentIndex === index && /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.div,
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center gap-5",
+              navigationClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
                 {
-                  style: { clipPath },
-                  className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-foreground"
+                  onClick: handlePrev,
+                  asButton: true,
+                  variant: "ghost",
+                  size: "icon",
+                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-foreground/50 hover:bg-foreground/20 active:scale-95",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center gap-1", children: items?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.button,
+                {
+                  initial: false,
+                  onClick: () => handleDotClick(index),
+                  animate: {
+                    width: index === currentIndex ? "30px" : "8px"
+                  },
+                  className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-foreground/15 p-0.5 text-foreground/50",
+                  children: currentIndex === index && /* @__PURE__ */ jsxRuntime.jsx(
+                    framerMotion.motion.div,
+                    {
+                      style: { clipPath },
+                      className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-foreground"
+                    }
+                  )
+                },
+                index
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
+                {
+                  onClick: handleNext,
+                  asButton: true,
+                  variant: "ghost",
+                  size: "icon",
+                  className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-neutral-400 hover:bg-foreground/20 active:scale-95",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
                 }
               )
-            },
-            index
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              onClick: handleNext,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: "flex size-6 cursor-pointer items-center justify-center rounded-full bg-foreground/10 p-0.5 text-neutral-400 hover:bg-foreground/20 active:scale-95",
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         slidesSlot ? slidesSlot : /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, mode: "popLayout", custom: direction, children: currentIndex !== null && /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.div,
           {
@@ -17659,26 +17736,51 @@ function CarouselAutoProgressSlides({
             exit: "exit",
             custom: direction,
             transition: { type: "spring", stiffness: 100, damping: 30 },
-            className: cn("flex w-full max-w-3xl flex-col items-center justify-center", items?.[currentIndex]?.className),
+            className: cn(
+              "flex w-full max-w-3xl flex-col items-center justify-center",
+              items?.[currentIndex]?.className
+            ),
             children: [
-              slideLabel && (typeof slideLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 text-2xl text-foreground/50", slideLabelClassName), children: slideLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", slideLabelClassName), children: slideLabel })),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-[550px] w-full overflow-hidden rounded-3xl bg-foreground/10 p-1", slideContainerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-                framerMotion.motion.div,
+              typeof items?.[currentIndex]?.label === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
                 {
-                  initial: { scale: 0.9 },
-                  animate: { scale: 1 },
-                  className: "h-full w-full",
+                  className: cn(
+                    "mb-6 font-medium text-center text-lg text-foreground/50",
+                    slideLabelClassName
+                  ),
+                  children: items?.[currentIndex]?.label
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "h-[550px] w-full overflow-hidden rounded-3xl bg-foreground/10 p-1",
+                    slideContainerClassName
+                  ),
                   children: /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
+                    framerMotion.motion.div,
                     {
-                      src: items?.[currentIndex]?.src ?? "",
-                      alt: typeof items?.[currentIndex]?.label === "string" ? items[currentIndex].label : `Slide ${currentIndex + 1}`,
-                      className: cn("h-full w-full rounded-3xl object-cover", imageClassName, items?.[currentIndex]?.imageClassName),
-                      optixFlowConfig
+                      initial: { scale: 0.9 },
+                      animate: { scale: 1 },
+                      className: "h-full w-full",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        img.Img,
+                        {
+                          src: items?.[currentIndex]?.src ?? "",
+                          alt: typeof items?.[currentIndex]?.label === "string" ? items[currentIndex].label : `Slide ${currentIndex + 1}`,
+                          className: cn(
+                            "h-full w-full rounded-3xl object-cover",
+                            imageClassName,
+                            items?.[currentIndex]?.imageClassName
+                          ),
+                          optixFlowConfig
+                        }
+                      )
                     }
                   )
                 }
-              ) })
+              )
             ]
           },
           currentIndex
@@ -17810,7 +17912,7 @@ function CarouselAutoplayProgress({
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("ml-auto mr-3 flex touch-pan-y touch-pinch-zoom", trackClassName), children: slidesSlot ? slidesSlot : slides.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("ml-auto mr-3 flex touch-pan-y touch-pinch-zoom", trackClassName), children: slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn("flex-[0_0_70%] transform-gpu pl-3", slideClassName, slide.className),
@@ -17874,7 +17976,7 @@ function CarouselAutoplayProgress({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("style", { jsx: true, children: `
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         @keyframes autoplay-progress {
           from {
             transform: translateX(0);
@@ -18154,7 +18256,7 @@ function CarouselFullscreenScrollFx({
   const [activeIndex, setActiveIndex] = React52__namespace.useState(0);
   React52__namespace.useEffect(() => {
     const observers = [];
-    slides.forEach((slide, index) => {
+    slides?.forEach((slide, index) => {
       const element = document.getElementById(`fullscreen-${slide.id}`);
       if (element) {
         const observer = new IntersectionObserver(
@@ -18185,7 +18287,7 @@ function CarouselFullscreenScrollFx({
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("fixed right-6 top-1/2 z-50 hidden -translate-y-1/2 flex-col gap-3 lg:flex", navigationClassName), children: slides.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("fixed right-6 top-1/2 z-50 hidden -translate-y-1/2 flex-col gap-3 lg:flex", navigationClassName), children: slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => {
@@ -18200,7 +18302,7 @@ function CarouselFullscreenScrollFx({
           },
           slide.id
         )) }),
-        slidesSlot ? slidesSlot : slides.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             id: `fullscreen-${slide.id}`,
@@ -18230,7 +18332,7 @@ function CarouselFullscreenScrollFx({
                 slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm font-medium uppercase tracking-widest text-white/70", subtitleClassName), children: slide.subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: slide.subtitle })),
                 slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: slide.title })),
                 slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-2xl text-lg text-white/80 md:text-xl", descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: slide.description })),
-                index < slides.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-8 left-1/2 -translate-x-1/2", scrollIndicatorClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-8 left-1/2 -translate-x-1/2", scrollIndicatorClassName), 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-gradient-to-b from-white/50 to-transparent" })
                 ] }) })
@@ -18239,7 +18341,7 @@ function CarouselFullscreenScrollFx({
                 String(index + 1).padStart(2, "0"),
                 " /",
                 " ",
-                String(slides.length).padStart(2, "0")
+                String(slides?.length ?? 0).padStart(2, "0")
               ] })
             ]
           },
@@ -18271,14 +18373,14 @@ function CarouselGalleryThumbnails({
   const [currentIndex, setCurrentIndex] = React52__namespace.useState(0);
   const prevSlide = React52__namespace.useCallback(() => {
     setCurrentIndex(
-      (prev) => prev === 0 ? images.length - 1 : prev - 1
+      (prev) => prev === 0 ? (images?.length ?? 0) - 1 : prev - 1
     );
-  }, [images.length]);
+  }, [images?.length]);
   const nextSlide = React52__namespace.useCallback(() => {
     setCurrentIndex(
-      (prev) => prev === images.length - 1 ? 0 : prev + 1
+      (prev) => prev === (images?.length ?? 0) - 1 ? 0 : prev + 1
     );
-  }, [images.length]);
+  }, [images?.length]);
   React52__namespace.useEffect(() => {
     if (!autoPlay) return;
     const interval = setInterval(() => {
@@ -18307,7 +18409,7 @@ function CarouselGalleryThumbnails({
       patternOpacity,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden rounded-lg", containerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-video w-full overflow-hidden", slideClassName), children: imagesSlot ? imagesSlot : images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-video w-full overflow-hidden", slideClassName), children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
@@ -18347,9 +18449,9 @@ function CarouselGalleryThumbnails({
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-sm text-white", captionClassName), children: images[currentIndex].alt && (typeof images[currentIndex].alt === "string" ? images[currentIndex].alt : /* @__PURE__ */ jsxRuntime.jsx("div", { children: images[currentIndex].alt })) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-sm text-white", captionClassName), children: images?.[currentIndex].alt && (typeof images?.[currentIndex].alt === "string" ? images?.[currentIndex].alt : /* @__PURE__ */ jsxRuntime.jsx("div", { children: images?.[currentIndex].alt })) })
         ] }),
-        showThumbnails && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 flex gap-2 overflow-x-auto px-2 py-2", thumbnailsClassName), children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        showThumbnails && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 flex gap-2 overflow-x-auto px-2 py-2", thumbnailsClassName), children: images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             className: cn(
@@ -19277,18 +19379,18 @@ function CarouselProgressSlider({
   pattern,
   patternOpacity
 }) {
-  const [active, setActive] = React52__namespace.useState(slides[0].id);
+  const [active, setActive] = React52__namespace.useState(slides?.[0]?.id ?? "");
   const [progress, setProgress] = React52__namespace.useState(0);
   const [isFastForward, setIsFastForward] = React52__namespace.useState(false);
   const frame = React52__namespace.useRef(0);
   const firstFrameTime = React52__namespace.useRef(performance.now());
   const targetValue = React52__namespace.useRef(null);
   const sliderValues = React52__namespace.useMemo(
-    () => slides.map((slide) => slide.id),
+    () => slides?.map((slide) => slide.id),
     [slides]
   );
   React52__namespace.useEffect(() => {
-    if (sliderValues.length > 0) {
+    if ((sliderValues?.length ?? 0) > 0) {
       firstFrameTime.current = performance.now();
       frame.current = requestAnimationFrame(animate);
     }
@@ -19313,9 +19415,10 @@ function CarouselProgressSlider({
           targetValue.current = null;
         }
       } else {
-        const currentIndex = sliderValues.indexOf(active);
-        const nextIndex = (currentIndex + 1) % sliderValues.length;
-        setActive(sliderValues[nextIndex]);
+        const currentIndex = sliderValues?.indexOf(active) ?? -1;
+        const nextIndex = (currentIndex + 1) % (sliderValues?.length ?? 1);
+        const nextValue = sliderValues?.[nextIndex];
+        if (nextValue) setActive(nextValue);
       }
       setProgress(0);
       firstFrameTime.current = performance.now();
@@ -19344,7 +19447,7 @@ function CarouselProgressSlider({
           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: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative min-h-[300px]", imageClassName), children: slidesSlot ? slidesSlot : slides.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative min-h-[300px]", imageClassName), children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
               SliderWrapper,
               {
                 value: slide.id,
@@ -19361,7 +19464,7 @@ function CarouselProgressSlider({
               },
               slide.id
             )) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-4", navigationClassName), children: slides.map((slide) => /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-4", navigationClassName), children: slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsxs(
               SliderBtn,
               {
                 value: slide.id,
@@ -32175,7 +32278,7 @@ function BlogGridAuthorCardsComponent({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 md:mb-14 lg:mb-16", headerClassName), children: [
+        (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-6 md:mb-14 lg:mb-16", headerClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -32342,7 +32445,7 @@ function BlogCardsTaglineCta({
               "div",
               {
                 className: cn(
-                  "text-center flex flex-col items-center px-6 md:px-0",
+                  "text-center flex flex-col items-center px-4 md:px-0",
                   headerClassName
                 ),
                 children: [
@@ -32485,7 +32588,7 @@ function BlogCardsReadTime({
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center px-8 md:px-0",
+              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center px-4 md:px-0",
               headerClassName
             ),
             children: [
@@ -32671,7 +32774,7 @@ function BlogCategoryOverlay({
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center px-8 md:px-0",
+              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center px-4 md:px-0",
               headerClassName
             ),
             children: [
@@ -32837,7 +32940,7 @@ function BlogFeaturedPopular({
           "div",
           {
             className: cn(
-              "mb-6 md:mb-16 text-center px-8 md:px-0",
+              "mb-6 md:mb-16 text-center px-4 md:px-0",
               headerClassName
             ),
             children: [
@@ -33161,55 +33264,64 @@ function BlogTechInsights({
       className: cn("dark relative", className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-3xl font-bold text-foreground md:text-4xl lg:text-5xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-start", children: [
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: cn(
-                  "mt-2 block text-sm text-muted-foreground md:text-base",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-            readMoreActionContent
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
-              contentClassName
-            ),
-            children: [
-              featuredPostContent,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col items-center gap-8 md:gap-14",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full", headerClassName), children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
                 {
                   className: cn(
-                    "space-y-6 text-foreground md:space-y-8",
-                    secondaryPostsClassName
+                    "text-3xl font-bold text-foreground md:text-4xl lg:text-5xl",
+                    headingClassName
                   ),
-                  children: secondaryPostsContent
+                  children: heading
                 }
-              )
-            ]
-          }
-        )
-      ] })
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-start", children: [
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "mt-2 block text-sm text-muted-foreground md:text-base",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                readMoreActionContent
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12",
+                  contentClassName
+                ),
+                children: [
+                  featuredPostContent,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "space-y-6 text-foreground md:space-y-8",
+                        secondaryPostsClassName
+                      ),
+                      children: secondaryPostsContent
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -33337,7 +33449,7 @@ function BlogHorizontalCards({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto", containerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
           badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -34115,7 +34227,7 @@ function BlogGridNinePosts({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 md:mb-14 lg:mb-16", headerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-6 md:mb-14 lg:mb-16", headerClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap:4 md:gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -97817,7 +97929,6 @@ var BLOCK_REGISTRY = {
 <CarouselAutoProgressSlides
   heading="Featured Products"
   subheading="Discover our latest collection"
-  slideLabel="Explore"
   items={[
     { src: "/images/product-1.jpg", label: "Product 1" },
     { src: "/images/product-2.jpg", label: "Product 2" }