@opensite/ui 0.8.1 → 0.8.3

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

@@ -422,8 +422,8 @@ function CarouselScrollingFeatureShowcase({
   featuresClassName,
   numberBadgeClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "md",
   pattern,
   patternOpacity
 }) {
@@ -473,62 +473,113 @@ function CarouselScrollingFeatureShowcase({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-video overflow-hidden rounded-xl bg-muted", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
             {
-              initial: { opacity: 0 },
-              animate: { opacity: 1 },
-              exit: { opacity: 0 },
-              transition: { duration: 0.3 },
-              className: "h-full w-full",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.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__ */ jsxRuntime.jsx("div", { className: cn("space-y-24 lg:space-y-32", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
+              className: cn(
+                "text-3xl font-bold tracking-tight md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-                    feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: feature.title })),
-                    feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: feature.description }))
-                  ] })
-                ] })
-              ]
-            },
-            feature.id
-          )) })
-        ] })
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subheadingClassName), children: subheading }))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 lg:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-24", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "aspect-video overflow-hidden rounded-xl bg-muted",
+                    imageClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: activeFeatureData && /* @__PURE__ */ jsxRuntime.jsx(
+                    framerMotion.motion.div,
+                    {
+                      initial: { opacity: 0 },
+                      animate: { opacity: 1 },
+                      exit: { opacity: 0 },
+                      transition: { duration: 0.3 },
+                      className: "h-full w-full",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        img.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__ */ jsxRuntime.jsx("div", { className: cn("space-y-24 lg:space-y-32", featuresClassName), children: featuresSlot ? featuresSlot : features?.map((feature, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mb-6 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      img.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
+                        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: feature.title })),
+                        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: feature.description }))
+                      ] })
+                    ] })
+                  ]
+                },
+                feature.id
+              )) })
+            ]
+          }
+        )
       ] })
     }
   );

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,
             {