@opensite/ui 0.8.1 → 0.8.2

package/dist/carousel-scrolling-feature-showcase.js

@@ -401,8 +401,8 @@ function CarouselScrollingFeatureShowcase({
   featuresClassName,
   numberBadgeClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "md",
   pattern,
   patternOpacity
 }) {
@@ -452,62 +452,113 @@ function CarouselScrollingFeatureShowcase({
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsx("div", { className: cn("aspect-video overflow-hidden rounded-xl bg-muted", imageClassName), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsx(
-            motion.div,
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
             {
-              initial: { opacity: 0 },
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: { duration: 0.3 },
-              className: "h-full w-full",
-              children: /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: activeFeatureData.image,
-                  alt: typeof activeFeatureData.title === "string" ? activeFeatureData.title : `Feature ${activeFeatureData.id}`,
-                  className: cn("h-full w-full object-cover", activeFeatureData.imageClassName),
-                  optixFlowConfig
-                }
-              )
-            },
-            activeFeatureData.id
-          ) }) }) }) }),
-          /* @__PURE__ */ jsx("div", { className: cn("space-y-24 lg:space-y-32", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxs(
-            "div",
+              className: cn(
+                "text-3xl font-bold tracking-tight md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+            "p",
             {
-              ref: setFeatureRef(feature.id),
-              "data-feature-id": feature.id,
               className: cn(
-                "scroll-mt-24 transition-opacity duration-300",
-                activeFeature === feature.id ? "opacity-100" : "opacity-50",
-                feature.className
+                "mt-4 text-lg text-muted-foreground",
+                subheadingClassName
               ),
-              children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: feature.image,
-                    alt: typeof feature.title === "string" ? feature.title : `Feature ${feature.id}`,
-                    className: cn("h-full w-full object-cover", feature.imageClassName),
-                    optixFlowConfig
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
-                  /* @__PURE__ */ jsx("div", { className: cn("flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", numberBadgeClassName), children: index + 1 }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold", children: feature.title }) : /* @__PURE__ */ jsx("div", { children: feature.title })),
-                    feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: feature.description }))
-                  ] })
-                ] })
-              ]
-            },
-            feature.id
-          )) })
-        ] })
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 lg:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "aspect-video overflow-hidden rounded-xl bg-muted",
+                    imageClassName
+                  ),
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      exit: { opacity: 0 },
+                      transition: { duration: 0.3 },
+                      className: "h-full w-full",
+                      children: /* @__PURE__ */ jsx(
+                        Img,
+                        {
+                          src: activeFeatureData.image,
+                          alt: typeof activeFeatureData.title === "string" ? activeFeatureData.title : `Feature ${activeFeatureData.id}`,
+                          className: cn(
+                            "h-full w-full object-cover",
+                            activeFeatureData.imageClassName
+                          ),
+                          optixFlowConfig
+                        }
+                      )
+                    },
+                    activeFeatureData.id
+                  ) })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx("div", { className: cn("space-y-24 lg:space-y-32", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: setFeatureRef(feature.id),
+                  "data-feature-id": feature.id,
+                  className: cn(
+                    "scroll-mt-24 transition-opacity duration-300",
+                    activeFeature === feature.id ? "opacity-100" : "opacity-50",
+                    feature.className
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(
+                      Img,
+                      {
+                        src: feature.image,
+                        alt: typeof feature.title === "string" ? feature.title : `Feature ${feature.id}`,
+                        className: cn(
+                          "h-full w-full object-cover",
+                          feature.imageClassName
+                        ),
+                        optixFlowConfig
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground",
+                            numberBadgeClassName
+                          ),
+                          children: index + 1
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold", children: feature.title }) : /* @__PURE__ */ jsx("div", { children: feature.title })),
+                        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: feature.description }))
+                      ] })
+                    ] })
+                  ]
+                },
+                feature.id
+              )) })
+            ]
+          }
+        )
       ] })
     }
   );

package/dist/feature-accordion-image.cjs

@@ -572,7 +572,7 @@ function FeatureAccordionImage({
   description,
   items,
   itemsSlot,
-  defaultValue = "item-0",
+  defaultValue,
   className,
   containerClassName,
   headerClassName,
@@ -589,24 +589,25 @@ function FeatureAccordionImage({
   patternOpacity,
   patternClassName
 }) {
-  const [activeItem, setActiveItem] = React__namespace.useState(defaultValue);
+  const [activeItem, setActiveItem] = React__namespace.useState(defaultValue || "item-0");
   const activeIndex = parseInt(activeItem.replace("item-", ""), 10) || 0;
   const currentImage = items?.[activeIndex] || items?.[0];
   const accordionItemsContent = React.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: `item-${index}`, className: item.className, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn("text-muted-foreground", item.contentClassName), children: item.content })
+      item.title && /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
+      item.content && /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn("text-muted-foreground", item.contentClassName), children: item.content })
     ] }, index));
   }, [itemsSlot, items]);
   const imageContent = React.useMemo(() => {
     if (currentImage?.imageSlot) return currentImage.imageSlot;
+    if (!currentImage?.imageSrc) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
       {
-        src: currentImage?.imageSrc || "",
-        alt: currentImage?.imageAlt || "",
+        src: currentImage.imageSrc,
+        alt: currentImage.imageAlt || "",
         className: cn("h-full w-full object-cover transition-opacity duration-300", imageClassName),
         loading: "lazy",
         optixFlowConfig
@@ -624,11 +625,11 @@ function FeatureAccordionImage({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
+        (itemsSlot || items && items.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Accordion,
             {

package/dist/feature-accordion-image.js

@@ -550,7 +550,7 @@ function FeatureAccordionImage({
   description,
   items,
   itemsSlot,
-  defaultValue = "item-0",
+  defaultValue,
   className,
   containerClassName,
   headerClassName,
@@ -567,24 +567,25 @@ function FeatureAccordionImage({
   patternOpacity,
   patternClassName
 }) {
-  const [activeItem, setActiveItem] = React.useState(defaultValue);
+  const [activeItem, setActiveItem] = React.useState(defaultValue || "item-0");
   const activeIndex = parseInt(activeItem.replace("item-", ""), 10) || 0;
   const currentImage = items?.[activeIndex] || items?.[0];
   const accordionItemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return items.map((item, index) => /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${index}`, className: item.className, children: [
-      /* @__PURE__ */ jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
-      /* @__PURE__ */ jsx(AccordionContent, { className: cn("text-muted-foreground", item.contentClassName), children: item.content })
+      item.title && /* @__PURE__ */ jsx(AccordionTrigger, { className: cn("text-left text-lg font-medium", item.triggerClassName), children: item.title }),
+      item.content && /* @__PURE__ */ jsx(AccordionContent, { className: cn("text-muted-foreground", item.contentClassName), children: item.content })
     ] }, index));
   }, [itemsSlot, items]);
   const imageContent = useMemo(() => {
     if (currentImage?.imageSlot) return currentImage.imageSlot;
+    if (!currentImage?.imageSrc) return null;
     return /* @__PURE__ */ jsx(
       Img,
       {
-        src: currentImage?.imageSrc || "",
-        alt: currentImage?.imageAlt || "",
+        src: currentImage.imageSrc,
+        alt: currentImage.imageAlt || "",
         className: cn("h-full w-full object-cover transition-opacity duration-300", imageClassName),
         loading: "lazy",
         optixFlowConfig
@@ -602,11 +603,11 @@ function FeatureAccordionImage({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
+        (title || description) && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-semibold md:text-4xl lg:text-5xl", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4 text-muted-foreground lg:text-lg", descriptionClassName), children: description }))
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
+        (itemsSlot || items && items.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-2 lg:gap-16", gridClassName), children: [
           /* @__PURE__ */ jsx(
             Accordion,
             {

package/dist/feature-animated-carousel.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
 var framerMotion = require('framer-motion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // components/blocks/features/feature-animated-carousel.tsx
 function cn(...inputs) {
@@ -40,10 +40,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React__namespace.useState(null);
-  const [isLoading, setIsLoading] = React__namespace.useState(true);
-  const [error, setError] = React__namespace.useState(null);
-  const { url, iconName } = React__namespace.useMemo(() => {
+  const [svgContent, setSvgContent] = React4__namespace.useState(null);
+  const [isLoading, setIsLoading] = React4__namespace.useState(true);
+  const [error, setError] = React4__namespace.useState(null);
+  const { url, iconName } = React4__namespace.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
@@ -52,7 +52,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -146,7 +146,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__namespace.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -451,7 +451,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__namespace.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -512,7 +512,7 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var Controls = ({
+var Controls = React4__namespace.memo(({
   handleNext,
   handlePrevious,
   isPreviousDisabled,
@@ -540,9 +540,9 @@ var Controls = ({
       }
     )
   ] });
-};
-var FeatureCard = ({ feature, isActive, onClick }) => {
-  const variants = {
+});
+var FeatureCard = React4__namespace.memo(({ feature, isActive, onClick }) => {
+  const variants = React4.useMemo(() => ({
     initial: {
       opacity: 0
     },
@@ -552,7 +552,7 @@ var FeatureCard = ({ feature, isActive, onClick }) => {
     exit: {
       opacity: 0
     }
-  };
+  }), []);
   return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
@@ -582,13 +582,13 @@ var FeatureCard = ({ feature, isActive, onClick }) => {
             ease: "easeOut"
           },
           className: "p-6 text-sm md:p-8 md:text-base",
-          children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+          children: (feature.title || feature.description) && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+            feature.title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
               feature.title,
               "."
             ] }),
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.description })
+            feature.title && feature.description && " ",
+            feature.description && /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.description })
           ] })
         },
         `feature-description-active-${feature.title}`
@@ -622,15 +622,15 @@ var FeatureCard = ({ feature, isActive, onClick }) => {
                 className: "shrink-0"
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 font-semibold", children: feature.title })
+            feature.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "shrink-0 font-semibold", children: feature.title })
           ]
         },
         `feature-description-inactive-${feature.title}`
       )
     }
   ) });
-};
-var FeaturesDesktop = ({
+});
+var FeaturesDesktop = React4__namespace.memo(({
   features,
   handleNext,
   handlePrevious,
@@ -661,8 +661,8 @@ var FeaturesDesktop = ({
       );
     }) })
   ] });
-};
-var FeaturesMobile = ({
+});
+var FeaturesMobile = React4__namespace.memo(({
   features,
   handleNext,
   handlePrevious,
@@ -671,7 +671,7 @@ var FeaturesMobile = ({
   isPreviousDisabled,
   isNextDisabled
 }) => {
-  const variants = {
+  const variants = React4.useMemo(() => ({
     enter: (direction2) => ({
       x: direction2 > 0 ? 100 : -100,
       opacity: 0
@@ -684,7 +684,8 @@ var FeaturesMobile = ({
       x: direction2 < 0 ? 100 : -100,
       opacity: 0
     })
-  };
+  }), []);
+  const currentFeature = features[activeIndex];
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex flex-col items-center gap-6 md:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -709,13 +710,13 @@ var FeaturesMobile = ({
           opacity: { duration: 0.2 }
         },
         className: "absolute inset-0 flex items-center justify-center rounded-3xl bg-background p-4",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
-            features[activeIndex].title,
+        children: (currentFeature?.title || currentFeature?.description) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-sm", children: [
+          currentFeature.title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+            currentFeature.title,
             "."
           ] }),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: features[activeIndex].description })
+          currentFeature.title && currentFeature.description && " ",
+          currentFeature.description && /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentFeature.description })
         ] })
       },
       activeIndex
@@ -731,9 +732,9 @@ var FeaturesMobile = ({
       }
     )
   ] }) });
-};
+});
 function FeatureAnimatedCarousel({
-  features = [],
+  features,
   className,
   optixFlowConfig,
   background,
@@ -742,27 +743,27 @@ function FeatureAnimatedCarousel({
   patternOpacity,
   patternClassName
 }) {
-  const [activeIndex, setActiveIndex] = React__namespace.useState(0);
-  const [direction, setDirection] = React__namespace.useState(1);
-  const handleNext = () => {
-    if (activeIndex < features.length - 1) {
+  const [activeIndex, setActiveIndex] = React4__namespace.useState(0);
+  const [direction, setDirection] = React4__namespace.useState(1);
+  const handleNext = React4.useCallback(() => {
+    if (features && activeIndex < features.length - 1) {
       setDirection(1);
       setActiveIndex(activeIndex + 1);
     }
-  };
-  const handlePrevious = () => {
+  }, [activeIndex, features]);
+  const handlePrevious = React4.useCallback(() => {
     if (activeIndex > 0) {
       setDirection(-1);
       setActiveIndex(activeIndex - 1);
     }
-  };
-  const handleFeatureClick = (index) => {
+  }, [activeIndex]);
+  const handleFeatureClick = React4.useCallback((index) => {
     setDirection(index > activeIndex ? 1 : -1);
     setActiveIndex(index);
-  };
+  }, [activeIndex]);
   const isPreviousDisabled = activeIndex === 0;
-  const isNextDisabled = activeIndex === features.length - 1;
-  const imageVariants = {
+  const isNextDisabled = !features || activeIndex === features.length - 1;
+  const imageVariants = React4.useMemo(() => ({
     enter: (direction2) => ({
       x: direction2 > 0 ? 300 : -300,
       opacity: 0
@@ -775,7 +776,22 @@ function FeatureAnimatedCarousel({
       x: direction2 < 0 ? 300 : -300,
       opacity: 0
     })
-  };
+  }), []);
+  if (!features || features.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Section,
+      {
+        background,
+        spacing,
+        pattern,
+        patternOpacity,
+        patternClassName,
+        className,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl bg-muted p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]" })
+      }
+    );
+  }
+  const currentFeature = features[activeIndex];
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -786,7 +802,7 @@ function FeatureAnimatedCarousel({
       patternClassName,
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl bg-muted p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]", children: [
-        features && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           FeaturesDesktop,
           {
             features,
@@ -798,7 +814,7 @@ function FeatureAnimatedCarousel({
             isNextDisabled
           }
         ),
-        features && /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           FeaturesMobile,
           {
             features,
@@ -810,7 +826,7 @@ function FeatureAnimatedCarousel({
             isNextDisabled
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 overflow-hidden rounded-2xl md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsxRuntime.jsx(
+        currentFeature?.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 overflow-hidden rounded-2xl md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: direction, children: /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
             custom: direction,
@@ -826,8 +842,8 @@ function FeatureAnimatedCarousel({
             children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
               {
-                src: features ? features[activeIndex].image : void 0,
-                alt: features ? features[activeIndex].imageAlt || (typeof features[activeIndex].title === "string" ? features[activeIndex].title : "Feature image") : void 0,
+                src: currentFeature.image,
+                alt: currentFeature.imageAlt || (typeof currentFeature.title === "string" ? currentFeature.title : "Feature image"),
                 className: "h-full w-full object-cover",
                 optixFlowConfig
               }