@opensite/ui 3.6.2 → 3.6.3

package/dist/carousel-autoplay-progress.cjs

@@ -39,32 +39,6 @@ var Autoplay__default = /*#__PURE__*/_interopDefault(Autoplay);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React4__namespace.memo(function DynamicIcon2({
   apiKey,
@@ -547,7 +521,7 @@ function CarouselAutoplayProgress({
   slides,
   slidesSlot,
   options,
-  autoplayDelay = 3e3,
+  autoplayDelay = 5e3,
   className,
   containerClassName,
   trackClassName,
@@ -557,7 +531,7 @@ function CarouselAutoplayProgress({
   dotsClassName,
   progressClassName,
   optixFlowConfig,
-  background = "white",
+  background,
   spacing = "xl",
   pattern,
   patternOpacity
@@ -579,71 +553,97 @@ 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
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: slide.src,
+                      alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        imageClassName,
+                        slide.imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  ) }),
+                  slide.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: slide.content })
+                ]
+              },
+              index
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("flex-[0_0_70%] transform-gpu pl-3", slideClassName, slide.className),
+            className: cn(
+              "mx-auto mt-7 flex max-w-80 items-center justify-between gap-3",
+              controlsClassName
+            ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
                 {
-                  src: slide.src,
-                  alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
-                  className: cn("h-full w-full object-cover", imageClassName, slide.imageClassName),
-                  optixFlowConfig
+                  type: "button",
+                  onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
+                  className: cn(
+                    "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
+                    index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
+                  )
+                },
+                index
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
+                    "bg-card text-card-foreground",
+                    showAutoplayProgress ? "opacity-100" : "opacity-0",
+                    progressClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
+                      ref: progressNode,
+                      style: {
+                        animation: "autoplay-progress linear 1",
+                        animationPlayState: showAutoplayProgress ? "running" : "paused"
+                      }
+                    }
+                  )
                 }
-              ) }),
-              slide.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: slide.content })
-            ]
-          },
-          index
-        )) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mt-7 flex max-w-80 items-center justify-between gap-3", controlsClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
-              className: cn(
-                "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
-                index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
-              )
-            },
-            index
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
-                getNestedCardBg(background),
-                showAutoplayProgress ? "opacity-100" : "opacity-0",
-                progressClassName
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                pressable.Pressable,
                 {
-                  className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
-                  ref: progressNode,
-                  style: {
-                    animation: "autoplay-progress linear 1",
-                    animationPlayState: showAutoplayProgress ? "running" : "paused"
-                  }
+                  size: "icon",
+                  variant: "secondary",
+                  onClick: toggleAutoplay,
+                  asButton: true,
+                  children: autoplayIsPlaying ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play", size: 16 })
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            pressable.Pressable,
-            {
-              size: "icon",
-              variant: "secondary",
-              onClick: toggleAutoplay,
-              asButton: true,
-              children: autoplayIsPlaying ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play", size: 16 })
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         @keyframes autoplay-progress {
           from {

package/dist/carousel-autoplay-progress.js

@@ -14,32 +14,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React4.memo(function DynamicIcon2({
   apiKey,
@@ -522,7 +496,7 @@ function CarouselAutoplayProgress({
   slides,
   slidesSlot,
   options,
-  autoplayDelay = 3e3,
+  autoplayDelay = 5e3,
   className,
   containerClassName,
   trackClassName,
@@ -532,7 +506,7 @@ function CarouselAutoplayProgress({
   dotsClassName,
   progressClassName,
   optixFlowConfig,
-  background = "white",
+  background,
   spacing = "xl",
   pattern,
   patternOpacity
@@ -554,71 +528,97 @@ function CarouselAutoplayProgress({
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsx("div", { className: cn("ml-auto mr-3 flex touch-pan-y touch-pinch-zoom", trackClassName), children: slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "ml-auto mr-3 flex touch-pan-y touch-pinch-zoom",
+              trackClassName
+            ),
+            children: slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex-[0_0_70%] transform-gpu pl-3",
+                  slideClassName,
+                  slide.className
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: slide.src,
+                      alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        imageClassName,
+                        slide.imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  ) }),
+                  slide.content && /* @__PURE__ */ jsx("div", { className: "mt-4", children: slide.content })
+                ]
+              },
+              index
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("flex-[0_0_70%] transform-gpu pl-3", slideClassName, slide.className),
+            className: cn(
+              "mx-auto mt-7 flex max-w-80 items-center justify-between gap-3",
+              controlsClassName
+            ),
             children: [
-              /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
-                Img,
+              /* @__PURE__ */ jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx(
+                "button",
                 {
-                  src: slide.src,
-                  alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
-                  className: cn("h-full w-full object-cover", imageClassName, slide.imageClassName),
-                  optixFlowConfig
+                  type: "button",
+                  onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
+                  className: cn(
+                    "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
+                    index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
+                  )
+                },
+                index
+              )) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
+                    "bg-card text-card-foreground",
+                    showAutoplayProgress ? "opacity-100" : "opacity-0",
+                    progressClassName
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
+                      ref: progressNode,
+                      style: {
+                        animation: "autoplay-progress linear 1",
+                        animationPlayState: showAutoplayProgress ? "running" : "paused"
+                      }
+                    }
+                  )
                 }
-              ) }),
-              slide.content && /* @__PURE__ */ jsx("div", { className: "mt-4", children: slide.content })
-            ]
-          },
-          index
-        )) }) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mt-7 flex max-w-80 items-center justify-between gap-3", controlsClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
-              className: cn(
-                "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
-                index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
-              )
-            },
-            index
-          )) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
-                getNestedCardBg(background),
-                showAutoplayProgress ? "opacity-100" : "opacity-0",
-                progressClassName
               ),
-              children: /* @__PURE__ */ jsx(
-                "div",
+              /* @__PURE__ */ jsx(
+                Pressable,
                 {
-                  className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
-                  ref: progressNode,
-                  style: {
-                    animation: "autoplay-progress linear 1",
-                    animationPlayState: showAutoplayProgress ? "running" : "paused"
-                  }
+                  size: "icon",
+                  variant: "secondary",
+                  onClick: toggleAutoplay,
+                  asButton: true,
+                  children: autoplayIsPlaying ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 16 })
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              size: "icon",
-              variant: "secondary",
-              onClick: toggleAutoplay,
-              asButton: true,
-              children: autoplayIsPlaying ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 16 })
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("style", { children: `
         @keyframes autoplay-progress {
           from {

package/dist/registry.cjs

@@ -19992,7 +19992,7 @@ function CarouselAutoplayProgress({
   slides,
   slidesSlot,
   options,
-  autoplayDelay = 3e3,
+  autoplayDelay = 5e3,
   className,
   containerClassName,
   trackClassName,
@@ -20002,7 +20002,7 @@ function CarouselAutoplayProgress({
   dotsClassName,
   progressClassName,
   optixFlowConfig,
-  background = "white",
+  background,
   spacing = "xl",
   pattern,
   patternOpacity
@@ -20024,71 +20024,97 @@ 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("flex-[0_0_70%] transform-gpu pl-3", slideClassName, slide.className),
+            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
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: slide.src,
+                      alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        imageClassName,
+                        slide.imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  ) }),
+                  slide.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: slide.content })
+                ]
+              },
+              index
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-7 flex max-w-80 items-center justify-between gap-3",
+              controlsClassName
+            ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
                 {
-                  src: slide.src,
-                  alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
-                  className: cn("h-full w-full object-cover", imageClassName, slide.imageClassName),
-                  optixFlowConfig
+                  type: "button",
+                  onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
+                  className: cn(
+                    "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
+                    index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
+                  )
+                },
+                index
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
+                    "bg-card text-card-foreground",
+                    showAutoplayProgress ? "opacity-100" : "opacity-0",
+                    progressClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
+                      ref: progressNode,
+                      style: {
+                        animation: "autoplay-progress linear 1",
+                        animationPlayState: showAutoplayProgress ? "running" : "paused"
+                      }
+                    }
+                  )
                 }
-              ) }),
-              slide.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: slide.content })
-            ]
-          },
-          index
-        )) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mt-7 flex max-w-80 items-center justify-between gap-3", controlsClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
-              className: cn(
-                "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
-                index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
-              )
-            },
-            index
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
-                getNestedCardBg(background),
-                showAutoplayProgress ? "opacity-100" : "opacity-0",
-                progressClassName
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                pressable.Pressable,
                 {
-                  className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
-                  ref: progressNode,
-                  style: {
-                    animation: "autoplay-progress linear 1",
-                    animationPlayState: showAutoplayProgress ? "running" : "paused"
-                  }
+                  size: "icon",
+                  variant: "secondary",
+                  onClick: toggleAutoplay,
+                  asButton: true,
+                  children: autoplayIsPlaying ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play", size: 16 })
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            pressable.Pressable,
-            {
-              size: "icon",
-              variant: "secondary",
-              onClick: toggleAutoplay,
-              asButton: true,
-              children: autoplayIsPlaying ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/play", size: 16 })
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         @keyframes autoplay-progress {
           from {

package/dist/registry.js

@@ -19952,7 +19952,7 @@ function CarouselAutoplayProgress({
   slides,
   slidesSlot,
   options,
-  autoplayDelay = 3e3,
+  autoplayDelay = 5e3,
   className,
   containerClassName,
   trackClassName,
@@ -19962,7 +19962,7 @@ function CarouselAutoplayProgress({
   dotsClassName,
   progressClassName,
   optixFlowConfig,
-  background = "white",
+  background,
   spacing = "xl",
   pattern,
   patternOpacity
@@ -19984,71 +19984,97 @@ function CarouselAutoplayProgress({
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsx("div", { className: cn("ml-auto mr-3 flex touch-pan-y touch-pinch-zoom", trackClassName), children: slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden", containerClassName), ref: emblaRef, children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn("flex-[0_0_70%] transform-gpu pl-3", slideClassName, slide.className),
+            className: cn(
+              "ml-auto mr-3 flex touch-pan-y touch-pinch-zoom",
+              trackClassName
+            ),
+            children: slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex-[0_0_70%] transform-gpu pl-3",
+                  slideClassName,
+                  slide.className
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: slide.src,
+                      alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        imageClassName,
+                        slide.imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  ) }),
+                  slide.content && /* @__PURE__ */ jsx("div", { className: "mt-4", children: slide.content })
+                ]
+              },
+              index
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-7 flex max-w-80 items-center justify-between gap-3",
+              controlsClassName
+            ),
             children: [
-              /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
-                Img,
+              /* @__PURE__ */ jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx(
+                "button",
                 {
-                  src: slide.src,
-                  alt: typeof slide.alt === "string" ? slide.alt : `Slide ${index + 1}`,
-                  className: cn("h-full w-full object-cover", imageClassName, slide.imageClassName),
-                  optixFlowConfig
+                  type: "button",
+                  onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
+                  className: cn(
+                    "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
+                    index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
+                  )
+                },
+                index
+              )) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
+                    "bg-card text-card-foreground",
+                    showAutoplayProgress ? "opacity-100" : "opacity-0",
+                    progressClassName
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
+                      ref: progressNode,
+                      style: {
+                        animation: "autoplay-progress linear 1",
+                        animationPlayState: showAutoplayProgress ? "running" : "paused"
+                      }
+                    }
+                  )
                 }
-              ) }),
-              slide.content && /* @__PURE__ */ jsx("div", { className: "mt-4", children: slide.content })
-            ]
-          },
-          index
-        )) }) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mt-7 flex max-w-80 items-center justify-between gap-3", controlsClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: cn("flex justify-center gap-2", dotsClassName), children: scrollSnaps.map((_, index) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onAutoplayButtonClick(() => onDotButtonClick(index)),
-              className: cn(
-                "h-3 w-3 rounded-full border-2 border-border transition-colors duration-200",
-                index === selectedIndex ? "bg-primary" : "bg-transparent hover:bg-muted"
-              )
-            },
-            index
-          )) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "relative h-2 w-40 max-w-[90%] justify-self-center self-center overflow-hidden rounded-[1.8rem] border-2 border-border transition-opacity duration-300 ease-in-out",
-                getNestedCardBg(background),
-                showAutoplayProgress ? "opacity-100" : "opacity-0",
-                progressClassName
               ),
-              children: /* @__PURE__ */ jsx(
-                "div",
+              /* @__PURE__ */ jsx(
+                Pressable,
                 {
-                  className: "absolute bottom-0 top-0 -left-full w-full bg-primary",
-                  ref: progressNode,
-                  style: {
-                    animation: "autoplay-progress linear 1",
-                    animationPlayState: showAutoplayProgress ? "running" : "paused"
-                  }
+                  size: "icon",
+                  variant: "secondary",
+                  onClick: toggleAutoplay,
+                  asButton: true,
+                  children: autoplayIsPlaying ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 16 })
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              size: "icon",
-              variant: "secondary",
-              onClick: toggleAutoplay,
-              asButton: true,
-              children: autoplayIsPlaying ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/pause", size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/play", size: 16 })
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("style", { children: `
         @keyframes autoplay-progress {
           from {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.6.2",
+  "version": "3.6.3",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",