@opensite/ui 0.8.3 → 0.8.5

package/dist/feature-checklist-image.cjs

@@ -916,7 +916,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -951,7 +951,7 @@ function FeatureChecklistImage({
   checklistClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1004,7 +1004,10 @@ function FeatureChecklistImage({
       {
         src: imageSrc,
         alt: imageAlt || "Feature illustration",
-        className: cn("max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2", imageClassName),
+        className: cn(
+          "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
@@ -1018,10 +1021,17 @@ function FeatureChecklistImage({
       const content = isString ? item : item.content;
       const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
       const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-3", itemClassName), children: [
-        iconElement,
-        content
-      ] }, index);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: cn("flex items-center gap-3", itemClassName),
+          children: [
+            iconElement,
+            content
+          ]
+        },
+        index
+      );
     });
   }, [checklistSlot, checklistItems]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1034,15 +1044,78 @@ function FeatureChecklistImage({
       patternClassName,
       className,
       containerClassName: cn("max-w-6xl", containerClassName),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-12 md:flex-row", contentWrapperClassName), children: [
-        imageContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:p-10", contentClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description })),
-          actionsContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent }),
-          checklistContent && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0", checklistClassName), children: checklistContent })
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-12 md:flex-row",
+            contentWrapperClassName
+          ),
+          children: [
+            imageContent,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:p-10", contentClassName), children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-medium text-balance md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-medium text-balance md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-1 text-muted-foreground md:mt-6",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "mt-1 text-muted-foreground md:mt-6",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              )),
+              actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-wrap items-center gap-2",
+                    actionsClassName
+                  ),
+                  children: actionsContent
+                }
+              ),
+              checklistContent && /* @__PURE__ */ jsxRuntime.jsx(
+                "ul",
+                {
+                  className: cn(
+                    "mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0",
+                    checklistClassName
+                  ),
+                  children: checklistContent
+                }
+              )
+            ] })
+          ]
+        }
+      )
     }
   );
 }

package/dist/feature-checklist-image.js

@@ -895,7 +895,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -930,7 +930,7 @@ function FeatureChecklistImage({
   checklistClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -983,7 +983,10 @@ function FeatureChecklistImage({
       {
         src: imageSrc,
         alt: imageAlt || "Feature illustration",
-        className: cn("max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2", imageClassName),
+        className: cn(
+          "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2",
+          imageClassName
+        ),
         loading: "lazy",
         optixFlowConfig
       }
@@ -997,10 +1000,17 @@ function FeatureChecklistImage({
       const content = isString ? item : item.content;
       const iconElement = isString ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
       const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center gap-3", itemClassName), children: [
-        iconElement,
-        content
-      ] }, index);
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: cn("flex items-center gap-3", itemClassName),
+          children: [
+            iconElement,
+            content
+          ]
+        },
+        index
+      );
     });
   }, [checklistSlot, checklistItems]);
   return /* @__PURE__ */ jsx(
@@ -1013,15 +1023,78 @@ function FeatureChecklistImage({
       patternClassName,
       className,
       containerClassName: cn("max-w-6xl", containerClassName),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-12 md:flex-row", contentWrapperClassName), children: [
-        imageContent,
-        /* @__PURE__ */ jsxs("div", { className: cn("lg:p-10", contentClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium text-balance md:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-1 text-muted-foreground md:mt-6", descriptionClassName), children: description })),
-          actionsContent && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent }),
-          checklistContent && /* @__PURE__ */ jsx("ul", { className: cn("mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0", checklistClassName), children: checklistContent })
-        ] })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-12 md:flex-row",
+            contentWrapperClassName
+          ),
+          children: [
+            imageContent,
+            /* @__PURE__ */ jsxs("div", { className: cn("lg:p-10", contentClassName), children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-medium text-balance md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-medium text-balance md:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-1 text-muted-foreground md:mt-6",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mt-1 text-muted-foreground md:mt-6",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              )),
+              actionsContent && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-wrap items-center gap-2",
+                    actionsClassName
+                  ),
+                  children: actionsContent
+                }
+              ),
+              checklistContent && /* @__PURE__ */ jsx(
+                "ul",
+                {
+                  className: cn(
+                    "mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0",
+                    checklistClassName
+                  ),
+                  children: checklistContent
+                }
+              )
+            ] })
+          ]
+        }
+      )
     }
   );
 }

package/dist/feature-checklist-three-column.cjs

@@ -949,7 +949,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -1042,7 +1042,7 @@ function FeatureChecklistThreeColumn({
           Badge,
           {
             variant: "outline",
-            className: cn("absolute top-5 left-5 bg-primary-foreground", card.badgeClassName),
+            className: cn("absolute top-5 left-5 bg-background", card.badgeClassName),
             children: card.badge
           }
         )

package/dist/feature-checklist-three-column.js

@@ -928,7 +928,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -1021,7 +1021,7 @@ function FeatureChecklistThreeColumn({
           Badge,
           {
             variant: "outline",
-            className: cn("absolute top-5 left-5 bg-primary-foreground", card.badgeClassName),
+            className: cn("absolute top-5 left-5 bg-background", card.badgeClassName),
             children: card.badge
           }
         )

package/dist/feature-icon-grid-accent.cjs

@@ -496,7 +496,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -539,12 +539,21 @@ function FeatureIconGridAccent({
         "div",
         {
           className: cn(
-            "flex flex-col justify-between rounded-lg bg-accent p-6 md:min-h-[300px] md:p-8",
+            "flex flex-col justify-between rounded-lg p-6 md:min-h-[300px] md:p-8",
             cardClassName,
             feature.className
           ),
           children: [
-            iconElement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-6 flex size-11 items-center justify-center rounded-full bg-background", feature.iconClassName), children: iconElement }),
+            iconElement && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "mb-6 flex size-11 items-center justify-center rounded-full",
+                  feature.iconClassName
+                ),
+                children: iconElement
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium md:text-2xl", children: feature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium md:text-2xl", children: feature.title })),
               feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-muted-foreground", children: feature.description }))
@@ -566,12 +575,45 @@ function FeatureIconGridAccent({
       className,
       containerClassName,
       children: [
-        (label || title || description) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
-          label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelClassName, children: label })),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground md:max-w-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }) }),
-        featuresContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
+        (label || title || description) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("flex w-full flex-col items-center", headerClassName),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
+              label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelClassName, children: label })),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-medium md:text-5xl text-balance",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "md:max-w-2xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ] })
+          }
+        ),
+        featuresContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );

package/dist/feature-icon-grid-accent.js

@@ -475,7 +475,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -518,12 +518,21 @@ function FeatureIconGridAccent({
         "div",
         {
           className: cn(
-            "flex flex-col justify-between rounded-lg bg-accent p-6 md:min-h-[300px] md:p-8",
+            "flex flex-col justify-between rounded-lg p-6 md:min-h-[300px] md:p-8",
             cardClassName,
             feature.className
           ),
           children: [
-            iconElement && /* @__PURE__ */ jsx("span", { className: cn("mb-6 flex size-11 items-center justify-center rounded-full bg-background", feature.iconClassName), children: iconElement }),
+            iconElement && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "mb-6 flex size-11 items-center justify-center rounded-full",
+                  feature.iconClassName
+                ),
+                children: iconElement
+              }
+            ),
             /* @__PURE__ */ jsxs("div", { children: [
               feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium md:text-2xl", children: feature.title }) : /* @__PURE__ */ jsx("div", { className: "text-lg font-medium md:text-2xl", children: feature.title })),
               feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: feature.description }) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-muted-foreground", children: feature.description }))
@@ -545,12 +554,45 @@ function FeatureIconGridAccent({
       className,
       containerClassName,
       children: [
-        (label || title || description) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col items-center", headerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
-          label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: labelClassName, children: label })),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground md:max-w-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-        ] }) }),
-        featuresContent && /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2", gridClassName), children: featuresContent })
+        (label || title || description) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("flex w-full flex-col items-center", headerClassName),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4 text-center sm:space-y-6 md:max-w-3xl md:text-center", children: [
+              label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: labelClassName, children: label })),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-medium md:text-5xl text-balance",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "md:max-w-2xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            ] })
+          }
+        ),
+        featuresContent && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );

package/dist/feature-icon-grid-bordered.cjs

@@ -496,7 +496,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -522,7 +522,7 @@ function FeatureIconGridBordered({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -540,18 +540,67 @@ function FeatureIconGridBordered({
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5", cardClassName, feature.className),
+        className: cn(
+          "relative flex gap-3 rounded-lg border-dashed md:block md:border-l md:p-5",
+          cardClassName,
+          feature.className
+        ),
         children: [
-          (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-accent md:size-12", feature.iconClassName), children: renderIcon(feature) }),
+          (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "mb-8 flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12",
+                feature.iconClassName
+              ),
+              children: renderIcon(feature)
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-              feature.title,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.titleClassName), children: [
-              feature.title,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
-            ] })),
-            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm text-muted-foreground md:text-base", feature.descriptionClassName), children: feature.description }))
+            feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "h3",
+              {
+                className: cn(
+                  "font-medium md:mb-2 md:text-xl",
+                  feature.titleClassName
+                ),
+                children: [
+                  feature.title,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "font-medium md:mb-2 md:text-xl",
+                  feature.titleClassName
+                ),
+                children: [
+                  feature.title,
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-px hidden h-6 w-px bg-primary md:inline-block" })
+                ]
+              }
+            )),
+            feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm md:text-base",
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-sm md:text-base",
+                  feature.descriptionClassName
+                ),
+                children: feature.description
+              }
+            ))
           ] })
         ]
       },
@@ -569,9 +618,30 @@ function FeatureIconGridBordered({
       className,
       containerClassName,
       children: [
-        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-xs text-muted-foreground", labelClassName), children: label })),
-        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4", gridClassName), children: featuresContent })
+        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-xs ", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-xs ", labelClassName), children: label })),
+        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h2",
+          {
+            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
+            children: title
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
+            children: title
+          }
+        )),
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-14 grid gap-6 md:grid-cols-2 lg:mt-20 lg:grid-cols-4",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        )
       ]
     }
   );