@opensite/ui 3.4.2 → 3.4.4

package/dist/components.cjs

@@ -766,25 +766,6 @@ var slideVariants = {
     }
   }
 };
-var fadeVariants = {
-  initial: {
-    opacity: 0
-  },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  },
-  fadeExit: {
-    opacity: 0,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  }
-};
 var normalizeIndex = (index, length) => {
   if (!length) return 0;
   const safeIndex = index % length;
@@ -872,38 +853,55 @@ var ImageSlider = ({
         perspective: "1000px"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.AnimatePresence,
+        transition === "fade" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            mode: transition === "fade" ? "sync" : "wait",
-            initial: false,
-            children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
-              react.motion.div,
+            "aria-hidden": index !== currentIndex,
+            className: cn(
+              "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
+              index === currentIndex && "opacity-100"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
               {
-                initial: "initial",
-                animate: "visible",
-                exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
-                variants: transition === "fade" ? fadeVariants : slideVariants,
-                className: "absolute inset-0",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: activeImage.src,
-                    alt: activeImage.alt,
-                    className: cn(
-                      "h-full w-full object-cover object-center",
-                      imageClassName,
-                      activeImage.className
-                    ),
-                    optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    loading: "eager"
-                  }
-                )
-              },
-              `${currentIndex}-${activeImage.src ?? "image"}`
-            ) : null
-          }
-        ),
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  image.className
+                ),
+                optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${image.src ?? "image"}-${index}`
+        )) }) : /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: "initial",
+            animate: "visible",
+            exit: direction === "up" ? "upExit" : "downExit",
+            variants: slideVariants,
+            className: "absolute inset-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: activeImage.src,
+                alt: activeImage.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  activeImage.className
+                ),
+                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${currentIndex}-${activeImage.src ?? "image"}`
+        ) : null }),
         overlayContent,
         children ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",

package/dist/components.js

@@ -743,25 +743,6 @@ var slideVariants = {
     }
   }
 };
-var fadeVariants = {
-  initial: {
-    opacity: 0
-  },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  },
-  fadeExit: {
-    opacity: 0,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  }
-};
 var normalizeIndex = (index, length) => {
   if (!length) return 0;
   const safeIndex = index % length;
@@ -849,38 +830,55 @@ var ImageSlider = ({
         perspective: "1000px"
       },
       children: [
-        /* @__PURE__ */ jsx(
-          AnimatePresence$1,
+        transition === "fade" ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsx(
+          "div",
           {
-            mode: transition === "fade" ? "sync" : "wait",
-            initial: false,
-            children: activeImage ? /* @__PURE__ */ jsx(
-              motion$1.div,
+            "aria-hidden": index !== currentIndex,
+            className: cn(
+              "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
+              index === currentIndex && "opacity-100"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Img,
               {
-                initial: "initial",
-                animate: "visible",
-                exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
-                variants: transition === "fade" ? fadeVariants : slideVariants,
-                className: "absolute inset-0",
-                children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: activeImage.src,
-                    alt: activeImage.alt,
-                    className: cn(
-                      "h-full w-full object-cover object-center",
-                      imageClassName,
-                      activeImage.className
-                    ),
-                    optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    loading: "eager"
-                  }
-                )
-              },
-              `${currentIndex}-${activeImage.src ?? "image"}`
-            ) : null
-          }
-        ),
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  image.className
+                ),
+                optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${image.src ?? "image"}-${index}`
+        )) }) : /* @__PURE__ */ jsx(AnimatePresence$1, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsx(
+          motion$1.div,
+          {
+            initial: "initial",
+            animate: "visible",
+            exit: direction === "up" ? "upExit" : "downExit",
+            variants: slideVariants,
+            className: "absolute inset-0",
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: activeImage.src,
+                alt: activeImage.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  activeImage.className
+                ),
+                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${currentIndex}-${activeImage.src ?? "image"}`
+        ) : null }),
         overlayContent,
         children ? /* @__PURE__ */ jsx(
           "div",

package/dist/hero-image-slider.cjs

@@ -440,25 +440,6 @@ var slideVariants = {
     }
   }
 };
-var fadeVariants = {
-  initial: {
-    opacity: 0
-  },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  },
-  fadeExit: {
-    opacity: 0,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  }
-};
 var normalizeIndex = (index, length) => {
   if (!length) return 0;
   const safeIndex = index % length;
@@ -546,38 +527,55 @@ var ImageSlider = ({
         perspective: "1000px"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          react.AnimatePresence,
+        transition === "fade" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            mode: transition === "fade" ? "sync" : "wait",
-            initial: false,
-            children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
-              react.motion.div,
+            "aria-hidden": index !== currentIndex,
+            className: cn(
+              "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
+              index === currentIndex && "opacity-100"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
               {
-                initial: "initial",
-                animate: "visible",
-                exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
-                variants: transition === "fade" ? fadeVariants : slideVariants,
-                className: "absolute inset-0",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: activeImage.src,
-                    alt: activeImage.alt,
-                    className: cn(
-                      "h-full w-full object-cover object-center",
-                      imageClassName,
-                      activeImage.className
-                    ),
-                    optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    loading: "eager"
-                  }
-                )
-              },
-              `${currentIndex}-${activeImage.src ?? "image"}`
-            ) : null
-          }
-        ),
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  image.className
+                ),
+                optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${image.src ?? "image"}-${index}`
+        )) }) : /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: "initial",
+            animate: "visible",
+            exit: direction === "up" ? "upExit" : "downExit",
+            variants: slideVariants,
+            className: "absolute inset-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: activeImage.src,
+                alt: activeImage.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  activeImage.className
+                ),
+                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${currentIndex}-${activeImage.src ?? "image"}`
+        ) : null }),
         overlayContent,
         children ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",

package/dist/hero-image-slider.js

@@ -419,25 +419,6 @@ var slideVariants = {
     }
   }
 };
-var fadeVariants = {
-  initial: {
-    opacity: 0
-  },
-  visible: {
-    opacity: 1,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  },
-  fadeExit: {
-    opacity: 0,
-    transition: {
-      duration: 0.8,
-      ease: [0.4, 0, 0.2, 1]
-    }
-  }
-};
 var normalizeIndex = (index, length) => {
   if (!length) return 0;
   const safeIndex = index % length;
@@ -525,38 +506,55 @@ var ImageSlider = ({
         perspective: "1000px"
       },
       children: [
-        /* @__PURE__ */ jsx(
-          AnimatePresence,
+        transition === "fade" ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: images.map((image, index) => /* @__PURE__ */ jsx(
+          "div",
           {
-            mode: transition === "fade" ? "sync" : "wait",
-            initial: false,
-            children: activeImage ? /* @__PURE__ */ jsx(
-              motion.div,
+            "aria-hidden": index !== currentIndex,
+            className: cn(
+              "absolute inset-0 opacity-0 transition-opacity duration-1000 ease-in-out motion-reduce:transition-none",
+              index === currentIndex && "opacity-100"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Img,
               {
-                initial: "initial",
-                animate: "visible",
-                exit: transition === "fade" ? "fadeExit" : direction === "up" ? "upExit" : "downExit",
-                variants: transition === "fade" ? fadeVariants : slideVariants,
-                className: "absolute inset-0",
-                children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: activeImage.src,
-                    alt: activeImage.alt,
-                    className: cn(
-                      "h-full w-full object-cover object-center",
-                      imageClassName,
-                      activeImage.className
-                    ),
-                    optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
-                    loading: "eager"
-                  }
-                )
-              },
-              `${currentIndex}-${activeImage.src ?? "image"}`
-            ) : null
-          }
-        ),
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  image.className
+                ),
+                optixFlowConfig: image.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${image.src ?? "image"}-${index}`
+        )) }) : /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: "initial",
+            animate: "visible",
+            exit: direction === "up" ? "upExit" : "downExit",
+            variants: slideVariants,
+            className: "absolute inset-0",
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: activeImage.src,
+                alt: activeImage.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  activeImage.className
+                ),
+                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
+                loading: "eager"
+              }
+            )
+          },
+          `${currentIndex}-${activeImage.src ?? "image"}`
+        ) : null }),
         overlayContent,
         children ? /* @__PURE__ */ jsx(
           "div",

package/dist/hero-overlay-cta-grid.cjs

@@ -501,6 +501,25 @@ function ActionComponent({ action }) {
     }
   );
 }
+function CardArrowIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 5 7 7-7 7" })
+      ]
+    }
+  );
+}
 function HeroOverlayCtaGrid({
   sectionId = "hero-overlay-cta-grid",
   badgeText,
@@ -560,9 +579,7 @@ function HeroOverlayCtaGrid({
           card.href ? /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
-              name: "lucide/arrow-right",
-              size: 18,
-              className: cn("ml-auto flex-none text-card-foreground")
+              name: /* @__PURE__ */ jsxRuntime.jsx(CardArrowIcon, { className: "ml-auto size-[18px] flex-none text-card-foreground" })
             }
           ) : null
         ]
@@ -608,7 +625,7 @@ function HeroOverlayCtaGrid({
               initial: { opacity: 0, y: 28 },
               animate: { opacity: 1, y: 0 },
               transition: { duration: 0.6, ease: "easeOut" },
-              className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
+              className: "mx-auto max-w-3xl text-center text-balance text-white px-0 flex flex-col items-center justify-center",
               children: [
                 renderBadge,
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -620,16 +637,7 @@ function HeroOverlayCtaGrid({
                     ),
                     children: heading
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  "h1",
-                  {
-                    className: cn(
-                      "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                )),
+                ) : heading),
                 description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "p",
                   {
@@ -639,16 +647,7 @@ function HeroOverlayCtaGrid({
                     ),
                     children: description
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "mt-5 text-lg md:text-xl text-balance",
-                      descriptionClassName
-                    ),
-                    children: description
-                  }
-                )),
+                ) : description),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   BlockActions,
                   {

package/dist/hero-overlay-cta-grid.js

@@ -480,6 +480,25 @@ function ActionComponent({ action }) {
     }
   );
 }
+function CardArrowIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx("path", { d: "m12 5 7 7-7 7" })
+      ]
+    }
+  );
+}
 function HeroOverlayCtaGrid({
   sectionId = "hero-overlay-cta-grid",
   badgeText,
@@ -539,9 +558,7 @@ function HeroOverlayCtaGrid({
           card.href ? /* @__PURE__ */ jsx(
             DynamicIcon,
             {
-              name: "lucide/arrow-right",
-              size: 18,
-              className: cn("ml-auto flex-none text-card-foreground")
+              name: /* @__PURE__ */ jsx(CardArrowIcon, { className: "ml-auto size-[18px] flex-none text-card-foreground" })
             }
           ) : null
         ]
@@ -587,7 +604,7 @@ function HeroOverlayCtaGrid({
               initial: { opacity: 0, y: 28 },
               animate: { opacity: 1, y: 0 },
               transition: { duration: 0.6, ease: "easeOut" },
-              className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
+              className: "mx-auto max-w-3xl text-center text-balance text-white px-0 flex flex-col items-center justify-center",
               children: [
                 renderBadge,
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
@@ -599,16 +616,7 @@ function HeroOverlayCtaGrid({
                     ),
                     children: heading
                   }
-                ) : /* @__PURE__ */ jsx(
-                  "h1",
-                  {
-                    className: cn(
-                      "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                )),
+                ) : heading),
                 description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                   "p",
                   {
@@ -618,16 +626,7 @@ function HeroOverlayCtaGrid({
                     ),
                     children: description
                   }
-                ) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "mt-5 text-lg md:text-xl text-balance",
-                      descriptionClassName
-                    ),
-                    children: description
-                  }
-                )),
+                ) : description),
                 /* @__PURE__ */ jsx(
                   BlockActions,
                   {