@opensite/ui 0.7.6 → 0.7.8

package/dist/registry.js

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import { cva } from 'class-variance-authority';
-import { motion, AnimatePresence, useMotionValue, useMotionTemplate, useScroll, useTransform, useSpring, useInView, useMotionValueEvent } from 'framer-motion';
+import { motion, AnimatePresence, useMotionValue, useMotionTemplate, useSpring, useTransform, useInView, useScroll, useMotionValueEvent } from 'framer-motion';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { useForm, Form, Field } from '@page-speed/forms';
 import { TextInput as TextInput$1, Select, TextArea as TextArea$1, Radio } from '@page-speed/forms/inputs';
@@ -38,6 +38,16 @@ import { createPortal } from 'react-dom';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -17239,16 +17249,6 @@ function ContactHelpCenter({
     }
   );
 }
-var BRIGHTNESS_CLASS_MAP = {
-  "10": "brightness-[.1]",
-  "20": "brightness-[.2]",
-  "25": "brightness-[.25]",
-  "30": "brightness-[.3]",
-  "40": "brightness-[.4]",
-  "50": "brightness-50",
-  "75": "brightness-75",
-  "100": "brightness-100"
-};
 function CarouselAnimatedSections({
   sections,
   sectionsSlot,
@@ -18483,7 +18483,8 @@ function CarouselGalleryThumbnails({
   background = "white",
   spacing = "xl",
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideMediaBrightness = "50"
 }) {
   const [currentIndex, setCurrentIndex] = React52.useState(0);
   const prevSlide = React52.useCallback(() => {
@@ -18537,7 +18538,11 @@ function CarouselGalleryThumbnails({
                 {
                   src: image.src,
                   alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
-                  className: cn("h-full w-full object-cover", image.imageClassName),
+                  className: cn(
+                    "h-full w-full object-cover",
+                    BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                    image.imageClassName
+                  ),
                   optixFlowConfig
                 }
               )
@@ -18648,7 +18653,7 @@ function CarouselHorizontalCards({
     return items.map((item, index) => /* @__PURE__ */ jsx(
       motion.div,
       {
-        className: cn("group w-[280px] shrink-0", item.className),
+        className: cn("group w-[320px] shrink-0 sm:w-[360px] lg:w-[400px]", item.className),
         initial: { opacity: 0, y: 20 },
         animate: { opacity: 1, y: 0 },
         transition: { duration: 0.5, delay: index * 0.1 },
@@ -18684,7 +18689,7 @@ function CarouselHorizontalCards({
       patternOpacity,
       "aria-labelledby": "carousel-title",
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 md:px-6", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: cn("mb-6 flex items-center justify-between", headerClassName), children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: cn("mb-8 flex items-center justify-between gap-4", headerClassName), children: /* @__PURE__ */ jsxs("div", { children: [
           heading && /* @__PURE__ */ jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
             typeof heading === "string" ? /* @__PURE__ */ jsx(
               "h2",
@@ -18699,7 +18704,7 @@ function CarouselHorizontalCards({
               {
                 name: "lucide/chevron-right",
                 size: 24,
-                className: "ml-2 transition-transform group-hover:translate-x-1"
+                className: "ml-2 flex-shrink-0 self-center transition-transform group-hover:translate-x-1"
               }
             )
           ] }),
@@ -18718,20 +18723,20 @@ function CarouselHorizontalCards({
             Pressable,
             {
               onClick: () => scroll("left"),
-              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 rounded-full border bg-background/60 p-2 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
               "aria-label": "Scroll left",
               asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
             }
           ),
           !isAtEnd && /* @__PURE__ */ jsx(
             Pressable,
             {
               onClick: () => scroll("right"),
-              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 rounded-full border bg-background/60 p-2 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
               "aria-label": "Scroll right",
               asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
             }
           )
         ] })
@@ -18787,7 +18792,7 @@ function CarouselImageHero({
         Pressable,
         {
           asButton: true,
-          className: cn("bg-primary-foreground text-primary dark:bg-primary dark:text-primary-foreground", actionClassName),
+          className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
             icon,
@@ -18855,12 +18860,12 @@ function CarouselImageHero({
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24, className: "text-white" })
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-2", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => setCurrentImageIndex(index),
               className: cn(
-                "h-2.5 w-2.5 rounded-full transition-colors",
+                "flex h-3 w-3 items-center justify-center rounded-full transition-colors",
                 index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
               ),
               "aria-label": `Go to image ${index + 1}`
@@ -18868,7 +18873,7 @@ function CarouselImageHero({
             index
           )) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-24 text-center md:px-6 md:py-32 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-3xl space-y-8", contentClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-16 text-center md:px-6 md:py-20", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
             badge && (typeof badge === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm", badgeClassName), children: /* @__PURE__ */ jsx("span", { children: badge }) }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badge })),
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-primary-foreground dark:text-primary sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
@@ -18925,7 +18930,14 @@ function CarouselMultiStepShowcase({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -18935,7 +18947,14 @@ function CarouselMultiStepShowcase({
           children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
             icon,
             label,
-            iconAfter ?? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
+            iconAfter ?? /* @__PURE__ */ jsx(
+              DynamicIcon,
+              {
+                name: "lucide/arrow-right",
+                size: 16,
+                className: "ml-2"
+              }
+            )
           ] })
         },
         index
@@ -18969,124 +18988,191 @@ function CarouselMultiStepShowcase({
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-4 text-lg text-muted-foreground",
+                subheadingClassName
+              ),
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
         ] }),
-        stepsSlot ? /* @__PURE__ */ jsx("div", { className: stepNavigationClassName, children: stepsSlot }) : /* @__PURE__ */ jsx("div", { className: cn("mb-8 flex flex-wrap justify-center gap-2", stepNavigationClassName), children: steps?.map((step, index) => /* @__PURE__ */ jsxs(
-          "button",
+        stepsSlot ? /* @__PURE__ */ jsx("div", { className: cn("hidden sm:block", stepNavigationClassName), children: stepsSlot }) : /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: () => goToStep(index),
             className: cn(
-              "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
-              activeStep === index ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
-              step.className
+              "mb-8 hidden flex-wrap justify-center gap-2 sm:flex",
+              stepNavigationClassName
+            ),
+            children: steps?.map((step, index) => {
+              const isCompleted = index < activeStep;
+              const isActive = index === activeStep;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => goToStep(index),
+                  className: cn(
+                    "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
+                    isActive ? "bg-primary text-primary-foreground" : isCompleted ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
+                    step.className
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "flex h-6 w-6 items-center justify-center rounded-full text-xs",
+                          isActive ? "bg-primary-foreground text-primary" : isCompleted ? "bg-primary-foreground text-primary" : "bg-background"
+                        ),
+                        children: isCompleted ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 14 }) : step.step
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
+                  ]
+                },
+                step.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-12 h-1 max-w-2xl overflow-hidden rounded-full bg-muted",
+              progressClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                className: "h-full bg-primary",
+                initial: { width: 0 },
+                animate: {
+                  width: `${(activeStep + 1) / (steps?.length ?? 1) * 100}%`
+                },
+                transition: { duration: 0.3 }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 lg:grid-cols-2 lg:gap-12",
+              contentClassName
             ),
             children: [
               /* @__PURE__ */ jsx(
-                "span",
+                "div",
                 {
                   className: cn(
-                    "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                    activeStep === index ? "bg-primary-foreground text-primary" : "bg-background"
+                    "relative aspect-video overflow-hidden rounded-xl bg-muted",
+                    imageClassName
                   ),
-                  children: step.step
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      custom: direction,
+                      variants: slideVariants2,
+                      initial: "enter",
+                      animate: "center",
+                      exit: "exit",
+                      transition: { duration: 0.3, ease: "easeInOut" },
+                      className: cn(
+                        "absolute inset-0",
+                        steps?.[activeStep]?.imageClassName
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        Img,
+                        {
+                          src: steps?.[activeStep]?.image,
+                          alt: typeof steps?.[activeStep]?.title === "string" ? steps[activeStep].title : `Step ${activeStep + 1}`,
+                          className: "h-full w-full object-cover",
+                          optixFlowConfig
+                        }
+                      )
+                    },
+                    activeStep
+                  ) })
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
-            ]
-          },
-          step.id
-        )) }),
-        /* @__PURE__ */ jsx("div", { className: cn("mx-auto mb-12 h-1 max-w-2xl overflow-hidden rounded-full bg-muted", progressClassName), children: /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "h-full bg-primary",
-            initial: { width: 0 },
-            animate: {
-              width: `${(activeStep + 1) / (steps?.length ?? 1) * 100}%`
-            },
-            transition: { duration: 0.3 }
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: cn("relative aspect-video overflow-hidden rounded-xl bg-muted", imageClassName), children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              custom: direction,
-              variants: slideVariants2,
-              initial: "enter",
-              animate: "center",
-              exit: "exit",
-              transition: { duration: 0.3, ease: "easeInOut" },
-              className: cn("absolute inset-0", steps?.[activeStep]?.imageClassName),
-              children: /* @__PURE__ */ jsx(
-                Img,
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
+                motion.div,
                 {
-                  src: steps?.[activeStep]?.image,
-                  alt: typeof steps?.[activeStep]?.title === "string" ? steps[activeStep].title : `Step ${activeStep + 1}`,
-                  className: "h-full w-full object-cover",
-                  optixFlowConfig
-                }
-              )
-            },
-            activeStep
-          ) }) }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
-            motion.div,
-            {
-              initial: { opacity: 0, y: 20 },
-              animate: { opacity: 1, y: 0 },
-              exit: { opacity: 0, y: -20 },
-              transition: { duration: 0.3 },
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "mb-4 inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary", children: [
-                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle", size: 16 }),
-                  "Step ",
-                  steps?.[activeStep]?.step,
-                  " of ",
-                  steps?.length ?? 0
-                ] }),
-                steps?.[activeStep]?.title && (typeof steps[activeStep].title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: steps[activeStep].title }) : /* @__PURE__ */ jsx("div", { children: steps[activeStep].title })),
-                steps?.[activeStep]?.description && (typeof steps[activeStep].description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: steps[activeStep].description }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: steps[activeStep].description })),
-                /* @__PURE__ */ jsxs("div", { className: cn("mt-8 flex gap-4", actionsClassName), children: [
-                  /* @__PURE__ */ jsxs(
-                    Pressable,
-                    {
-                      onClick: goToPrev,
-                      asButton: true,
-                      variant: "outline",
-                      disabled: activeStep === 0,
-                      className: "disabled:opacity-50",
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          DynamicIcon,
-                          {
-                            name: "lucide/arrow-left",
-                            size: 16,
-                            className: "mr-2"
-                          }
-                        ),
-                        "Previous"
-                      ]
-                    }
-                  ),
-                  activeStep < (steps?.length ?? 0) - 1 ? /* @__PURE__ */ jsxs(Pressable, { onClick: goToNext, asButton: true, children: [
-                    "Next",
-                    /* @__PURE__ */ jsx(
-                      DynamicIcon,
+                  initial: { opacity: 0, y: 20 },
+                  animate: { opacity: 1, y: 0 },
+                  exit: { opacity: 0, y: -20 },
+                  transition: { duration: 0.3 },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "mb-4 inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary", children: [
+                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle", size: 16 }),
+                      "Step ",
+                      steps?.[activeStep]?.step,
+                      " of ",
+                      steps?.length ?? 0
+                    ] }),
+                    steps?.[activeStep]?.title && (typeof steps[activeStep].title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: steps[activeStep].title }) : /* @__PURE__ */ jsx("div", { children: steps[activeStep].title })),
+                    steps?.[activeStep]?.description && (typeof steps[activeStep].description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: steps[activeStep].description }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: steps[activeStep].description })),
+                    /* @__PURE__ */ jsxs(
+                      "div",
                       {
-                        name: "lucide/arrow-right",
-                        size: 16,
-                        className: "ml-2"
+                        className: cn("mt-8 flex gap-3 flex-wrap", actionsClassName),
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            Pressable,
+                            {
+                              onClick: goToPrev,
+                              asButton: true,
+                              variant: "outline",
+                              disabled: activeStep === 0,
+                              className: "disabled:opacity-50",
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  DynamicIcon,
+                                  {
+                                    name: "lucide/arrow-left",
+                                    size: 16,
+                                    className: "mr-2"
+                                  }
+                                ),
+                                "Previous"
+                              ]
+                            }
+                          ),
+                          activeStep < (steps?.length ?? 0) - 1 ? /* @__PURE__ */ jsxs(Pressable, { onClick: goToNext, asButton: true, children: [
+                            "Next",
+                            /* @__PURE__ */ jsx(
+                              DynamicIcon,
+                              {
+                                name: "lucide/arrow-right",
+                                size: 16,
+                                className: "ml-2"
+                              }
+                            )
+                          ] }) : (actionsSlot || actions && actions.length > 0) && renderActions()
+                        ]
                       }
                     )
-                  ] }) : (actionsSlot || actions && actions.length > 0) && renderActions()
-                ] })
-              ]
-            },
-            activeStep
-          ) }) })
-        ] })
+                  ]
+                },
+                activeStep
+              ) }) })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -19107,10 +19193,11 @@ function CarouselPortfolioHero({
   navigationClassName,
   counterClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background = "dark",
+  spacing = "none",
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideMediaBrightness = "50"
 }) {
   const [currentIndex, setCurrentIndex] = React52.useState(0);
   const goToNext = React52.useCallback(() => {
@@ -19156,7 +19243,7 @@ function CarouselPortfolioHero({
       pattern,
       patternOpacity,
       children: [
-        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
+        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
@@ -19164,22 +19251,23 @@ function CarouselPortfolioHero({
               index === currentIndex ? "opacity-100" : "opacity-0",
               slide.className
             ),
-            children: [
-              /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: slide.image,
-                  alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
-                  className: cn("h-full w-full object-cover", slide.imageClassName),
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" })
-            ]
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: slide.image,
+                alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
+                className: cn(
+                  "h-full w-full object-cover",
+                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                  slide.imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           },
           slide.id
         )),
-        /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex h-full w-full flex-col justify-end p-4 pb-16 text-white sm:p-8 md:p-12", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-3xl", contentClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
           currentSlide?.tag && /* @__PURE__ */ jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsx("span", { className: cn("inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium", tagClassName), children: currentSlide.tag }) : /* @__PURE__ */ jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
           currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold sm:text-5xl md:text-6xl", titleClassName), children: currentSlide.title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: currentSlide.title })),
           currentSlide?.description && (typeof currentSlide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl", descriptionClassName), children: currentSlide.description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: currentSlide.description })),
@@ -19283,13 +19371,13 @@ function CarouselProductFeatureShowcase({
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
+    return /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-wrap gap-3", children: actions.map((action, index) => {
       const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
           asButton: true,
-          className: cn("mt-8", actionClassName),
+          className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
             icon,
@@ -19299,7 +19387,7 @@ function CarouselProductFeatureShowcase({
         },
         index
       );
-    });
+    }) });
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -19344,9 +19432,9 @@ function CarouselProductFeatureShowcase({
                 {
                   onClick: goToPrev,
                   asButton: true,
-                  variant: "secondary",
+                  variant: "outline",
                   size: "icon",
-                  className: "rounded-full bg-background/80 backdrop-blur-sm",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full border-border bg-background/90 text-foreground backdrop-blur-sm hover:bg-background",
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
                 }
               ),
@@ -19355,9 +19443,9 @@ function CarouselProductFeatureShowcase({
                 {
                   onClick: goToNext,
                   asButton: true,
-                  variant: "secondary",
+                  variant: "outline",
                   size: "icon",
-                  className: "rounded-full bg-background/80 backdrop-blur-sm",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full border-border bg-background/90 text-foreground backdrop-blur-sm hover:bg-background",
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
                 }
               )
@@ -19443,13 +19531,13 @@ function SliderBtn({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute inset-0 -z-10 max-h-full max-w-full overflow-hidden",
+            className: "absolute inset-0 -z-10 max-h-full max-w-full overflow-hidden rounded-lg",
             role: "progressbar",
             "aria-valuenow": active === value ? progress : 0,
             children: /* @__PURE__ */ jsx(
               "span",
               {
-                className: cn("absolute left-0", progressBarClass),
+                className: cn("absolute left-0 rounded-b-lg", progressBarClass),
                 style: {
                   [vertical ? "height" : "width"]: active === value ? `${progress}%` : "0%"
                 }
@@ -19480,7 +19568,7 @@ function CarouselProgressSlider({
   subheading,
   slides,
   slidesSlot,
-  duration = 5e3,
+  duration = 8e3,
   fastDuration = 400,
   vertical = false,
   className,
@@ -19499,22 +19587,35 @@ function CarouselProgressSlider({
   const [active, setActive] = React52.useState(slides?.[0]?.id ?? "");
   const [progress, setProgress] = React52.useState(0);
   const [isFastForward, setIsFastForward] = React52.useState(false);
+  const [isPaused, setIsPaused] = React52.useState(false);
   const frame = React52.useRef(0);
   const firstFrameTime = React52.useRef(performance.now());
   const targetValue = React52.useRef(null);
+  const pausedProgress = React52.useRef(0);
   const sliderValues = React52.useMemo(
     () => slides?.map((slide) => slide.id),
     [slides]
   );
   React52.useEffect(() => {
-    if ((sliderValues?.length ?? 0) > 0) {
+    if ((sliderValues?.length ?? 0) > 0 && !isPaused) {
       firstFrameTime.current = performance.now();
+      if (pausedProgress.current > 0) {
+        setProgress(pausedProgress.current);
+        pausedProgress.current = 0;
+      }
       frame.current = requestAnimationFrame(animate);
     }
     return () => {
       cancelAnimationFrame(frame.current);
     };
-  }, [sliderValues, active, isFastForward]);
+  }, [sliderValues, active, isFastForward, isPaused]);
+  const togglePause = () => {
+    if (!isPaused) {
+      pausedProgress.current = progress;
+      cancelAnimationFrame(frame.current);
+    }
+    setIsPaused(!isPaused);
+  };
   const animate = (now) => {
     const currentDuration = isFastForward ? fastDuration : duration;
     const elapsedTime = now - firstFrameTime.current;
@@ -19566,26 +19667,40 @@ function CarouselProgressSlider({
           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__ */ jsx("div", { className: cn("relative min-h-[300px]", imageClassName), children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
-              SliderWrapper,
-              {
-                value: slide.id,
-                className: cn("absolute inset-0", slide.className),
-                children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: slide.image,
-                    alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
-                    className: cn(
-                      "h-full w-full object-cover",
-                      slide.imageClassName
-                    ),
-                    optixFlowConfig
-                  }
-                ) })
-              },
-              slide.id
-            )) }),
+            /* @__PURE__ */ jsxs("div", { className: cn("relative", imageClassName), children: [
+              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
+                SliderWrapper,
+                {
+                  value: slide.id,
+                  className: cn("", slide.className),
+                  children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: slide.image,
+                      alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        slide.imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  ) })
+                },
+                slide.id
+              )),
+              /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  onClick: togglePause,
+                  asButton: true,
+                  variant: "outline",
+                  size: "icon",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full",
+                  "aria-label": isPaused ? "Play" : "Pause",
+                  children: /* @__PURE__ */ jsx(DynamicIcon, { name: isPaused ? "lucide/play" : "lucide/pause", size: 18 })
+                }
+              ) })
+            ] }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -19643,78 +19758,85 @@ function CarouselScrollingFeatureShowcase({
   const [activeFeature, setActiveFeature] = React52.useState(
     features?.[0]?.id ?? ""
   );
-  const containerRef = React52.useRef(null);
-  const { scrollYProgress } = useScroll({
-    target: containerRef,
-    offset: ["start start", "end end"]
-  });
-  const imageOpacity = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
+  const featureRefs = React52.useRef(/* @__PURE__ */ new Map());
   React52.useEffect(() => {
-    const observers = [];
-    features?.forEach((feature) => {
-      const element = document.getElementById(feature.id);
-      if (element) {
-        const observer = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting) {
-                setActiveFeature(feature.id);
-              }
-            });
-          },
-          { threshold: 0.5 }
-        );
-        observer.observe(element);
-        observers.push(observer);
-      }
+    if (!features || features.length === 0) return;
+    const observerOptions = {
+      root: null,
+      rootMargin: "-20% 0px -60% 0px",
+      threshold: 0
+    };
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const featureId = entry.target.getAttribute("data-feature-id");
+          if (featureId) {
+            setActiveFeature(featureId);
+          }
+        }
+      });
+    }, observerOptions);
+    featureRefs.current.forEach((element) => {
+      observer.observe(element);
     });
     return () => {
-      observers.forEach((observer) => observer.disconnect());
+      observer.disconnect();
     };
   }, [features]);
   const activeFeatureData = features?.find((f) => f.id === activeFeature);
+  const setFeatureRef = (id) => (el) => {
+    if (el) {
+      featureRefs.current.set(id, el);
+    } else {
+      featureRefs.current.delete(id);
+    }
+  };
   return /* @__PURE__ */ jsx(
     Section,
     {
-      ref: containerRef,
       background,
       spacing,
       className: cn(className),
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("py-16 text-center", headerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
           subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
+          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsx("div", { className: cn("aspect-video overflow-hidden rounded-xl bg-muted", imageClassName), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsx(
             motion.div,
             {
-              style: { opacity: imageOpacity },
-              className: cn("aspect-video overflow-hidden rounded-xl", imageClassName),
-              children: activeFeatureData && /* @__PURE__ */ jsx(
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.3 },
+              className: "h-full w-full",
+              children: /* @__PURE__ */ jsx(
                 Img,
                 {
                   src: activeFeatureData.image,
                   alt: typeof activeFeatureData.title === "string" ? activeFeatureData.title : `Feature ${activeFeatureData.id}`,
-                  className: cn("h-full w-full object-cover transition-all duration-500", activeFeatureData.imageClassName),
+                  className: cn("h-full w-full object-cover", activeFeatureData.imageClassName),
                   optixFlowConfig
                 }
               )
-            }
-          ) }) }),
-          /* @__PURE__ */ jsx("div", { className: cn("space-y-32 py-16", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxs(
+            },
+            activeFeatureData.id
+          ) }) }) }) }),
+          /* @__PURE__ */ jsx("div", { className: cn("space-y-24 lg:space-y-32", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxs(
             "div",
             {
-              id: feature.id,
+              ref: setFeatureRef(feature.id),
+              "data-feature-id": feature.id,
               className: cn(
-                "min-h-[50vh] transition-opacity duration-300",
+                "scroll-mt-24 transition-opacity duration-300",
                 activeFeature === feature.id ? "opacity-100" : "opacity-50",
                 feature.className
               ),
               children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(
                   Img,
                   {
                     src: feature.image,