@opensite/ui 3.4.3 → 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/image-slider.cjs

@@ -61,25 +61,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;
@@ -167,38 +148,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/image-slider.js

@@ -39,25 +39,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;
@@ -145,38 +126,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/index.cjs

@@ -827,25 +827,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;
@@ -933,38 +914,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/index.js

@@ -805,25 +805,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;
@@ -911,38 +892,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/registry.cjs

@@ -721,25 +721,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;
@@ -827,38 +808,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",
@@ -59752,7 +59750,7 @@ function HeroConversationIntelligence({
     }
   );
 }
-var fadeVariants2 = {
+var fadeVariants = {
   initial: { opacity: 0 },
   animate: {
     opacity: 1,
@@ -59872,7 +59870,7 @@ function HeroBusinessCarouselDots({
               carouselSlot ? carouselSlot : activeImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full overflow-hidden ", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
                 framerMotion.motion.div,
                 {
-                  variants: fadeVariants2,
+                  variants: fadeVariants,
                   initial: "initial",
                   animate: "animate",
                   exit: "exit",

package/dist/registry.js

@@ -681,25 +681,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;
@@ -787,38 +768,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",
@@ -59712,7 +59710,7 @@ function HeroConversationIntelligence({
     }
   );
 }
-var fadeVariants2 = {
+var fadeVariants = {
   initial: { opacity: 0 },
   animate: {
     opacity: 1,
@@ -59832,7 +59830,7 @@ function HeroBusinessCarouselDots({
               carouselSlot ? carouselSlot : activeImage ? /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden ", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
                 motion.div,
                 {
-                  variants: fadeVariants2,
+                  variants: fadeVariants,
                   initial: "initial",
                   animate: "animate",
                   exit: "exit",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3386,9 +3386,9 @@
     "prepublishOnly": "pnpm run build && pnpm run test:ci"
   },
   "peerDependencies": {
-    "@tailwindcss/typography": ">=0.5.0",
     "@page-speed/pressable": ">=0.0.9",
     "@page-speed/router": ">=1.0.0",
+    "@tailwindcss/typography": ">=0.5.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
@@ -3461,7 +3461,7 @@
   "optionalDependencies": {
     "valibot": "^1.2.0"
   },
-  "packageManager": "pnpm@10.28.2",
+  "packageManager": "pnpm@10.33.3",
   "engines": {
     "node": ">=18.0.0",
     "pnpm": ">=9.0.0"