@opensite/ui 0.8.3 → 0.8.5

package/dist/feature-tabbed-content-image.js

@@ -954,7 +954,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 })
                 ] }),
@@ -987,31 +987,57 @@ function FeatureTabbedContentImage({
   contentGridClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatures = React.useCallback((slide) => {
-    if (slide.featuresSlot) return slide.featuresSlot;
-    if (!slide.features || slide.features.length === 0) return null;
-    return slide.features.map((feature, index) => {
-      const isString = typeof feature === "string";
-      const content = isString ? feature : feature.content;
-      const iconElement = isString ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }) : feature.icon ?? (feature.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }));
-      const itemClassName = isString ? void 0 : feature.className;
-      return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center gap-2", itemClassName), children: [
-        iconElement,
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: content })
-      ] }, index);
-    });
-  }, []);
-  const renderActions = React.useCallback((slide) => {
-    if (slide.actionsSlot) return slide.actionsSlot;
-    if (!slide.actions || slide.actions.length === 0) return null;
-    return slide.actions.map((action, index) => {
-      if (action.children) {
-        return /* @__PURE__ */ jsx(
+  const renderFeatures = React.useCallback(
+    (slide) => {
+      if (slide.featuresSlot) return slide.featuresSlot;
+      if (!slide.features || slide.features.length === 0) return null;
+      return slide.features.map((feature, index) => {
+        const isString = typeof feature === "string";
+        const content = isString ? feature : feature.content;
+        const iconElement = isString ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }) : feature.icon ?? (feature.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check-circle-2", size: 16 }));
+        const itemClassName = isString ? void 0 : feature.className;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: cn("flex items-center gap-2", itemClassName),
+            children: [
+              iconElement,
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: content })
+            ]
+          },
+          index
+        );
+      });
+    },
+    []
+  );
+  const renderActions = React.useCallback(
+    (slide) => {
+      if (slide.actionsSlot) return slide.actionsSlot;
+      if (!slide.actions || slide.actions.length === 0) return null;
+      return slide.actions.map((action, index) => {
+        if (action.children) {
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: action.href,
+              onClick: action.onClick,
+              variant: action.variant,
+              size: action.size,
+              className: cn("mt-8", action.className),
+              "aria-label": action["aria-label"],
+              asButton: true,
+              children: action.children
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ jsxs(
           Pressable,
           {
             href: action.href,
@@ -1021,46 +1047,39 @@ function FeatureTabbedContentImage({
             className: cn("mt-8", action.className),
             "aria-label": action["aria-label"],
             asButton: true,
-            children: action.children
+            children: [
+              action.icon,
+              action.label,
+              action.iconAfter
+            ]
           },
           index
         );
-      }
-      return /* @__PURE__ */ jsxs(
-        Pressable,
+      });
+    },
+    []
+  );
+  const renderImage = React.useCallback(
+    (slide) => {
+      if (slide.imageSlot) return slide.imageSlot;
+      if (!slide.image) return null;
+      const imageAlt = slide.imageAlt || (typeof slide.title === "string" ? slide.title : "Tab content image");
+      return /* @__PURE__ */ jsx(
+        Img,
         {
-          href: action.href,
-          onClick: action.onClick,
-          variant: action.variant,
-          size: action.size,
-          className: cn("mt-8", action.className),
-          "aria-label": action["aria-label"],
-          asButton: true,
-          children: [
-            action.icon,
-            action.label,
-            action.iconAfter
-          ]
-        },
-        index
+          src: slide.image,
+          alt: imageAlt,
+          className: cn(
+            "order-first max-h-[400px] w-full rounded-lg object-cover md:order-last",
+            slide.imageClassName
+          ),
+          loading: "lazy",
+          optixFlowConfig
+        }
       );
-    });
-  }, []);
-  const renderImage = React.useCallback((slide) => {
-    if (slide.imageSlot) return slide.imageSlot;
-    if (!slide.image) return null;
-    const imageAlt = slide.imageAlt || (typeof slide.title === "string" ? slide.title : "Tab content image");
-    return /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: slide.image,
-        alt: imageAlt,
-        className: cn("order-first max-h-[400px] w-full rounded-lg object-cover md:order-last", slide.imageClassName),
-        loading: "lazy",
-        optixFlowConfig
-      }
-    );
-  }, [optixFlowConfig]);
+    },
+    [optixFlowConfig]
+  );
   const slidesContent = useMemo(() => {
     if (slidesSlot) return slidesSlot;
     if (!slides || slides.length === 0) return null;
@@ -1069,7 +1088,10 @@ function FeatureTabbedContentImage({
         TabsTrigger,
         {
           value: slide.id.toString(),
-          className: cn("text-sm hover:bg-background md:text-base", tabTriggerClassName),
+          className: cn(
+            "text-sm hover:bg-background md:text-base",
+            tabTriggerClassName
+          ),
           children: slide.tabName
         },
         slide.id
@@ -1079,20 +1101,85 @@ function FeatureTabbedContentImage({
         {
           value: slide.id.toString(),
           className: cn("max-w-5xl", tabContentClassName),
-          children: /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 items-center gap-10 md:grid-cols-2", contentGridClassName, slide.className), children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-2xl font-semibold lg:text-4xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-2xl font-semibold lg:text-4xl", slide.titleClassName), children: slide.title })),
-              slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground lg:text-xl", slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground lg:text-xl", slide.descriptionClassName), children: slide.description })),
-              slide.features && slide.features.length > 0 || slide.featuresSlot ? /* @__PURE__ */ jsx("ul", { className: cn("mt-8 grid grid-cols-1 gap-2 lg:grid-cols-2", slide.featuresClassName), children: renderFeatures(slide) }) : null,
-              renderActions(slide)
-            ] }),
-            renderImage(slide)
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "grid grid-cols-1 items-center gap-10 md:grid-cols-2",
+                contentGridClassName,
+                slide.className
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        slide.titleClassName
+                      ),
+                      children: slide.title
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mb-4 text-2xl font-semibold lg:text-4xl",
+                        slide.titleClassName
+                      ),
+                      children: slide.title
+                    }
+                  )),
+                  slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-muted-foreground lg:text-xl",
+                        slide.descriptionClassName
+                      ),
+                      children: slide.description
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "text-muted-foreground lg:text-xl",
+                        slide.descriptionClassName
+                      ),
+                      children: slide.description
+                    }
+                  )),
+                  slide.features && slide.features.length > 0 || slide.featuresSlot ? /* @__PURE__ */ jsx(
+                    "ul",
+                    {
+                      className: cn(
+                        "mt-8 grid grid-cols-1 gap-2 lg:grid-cols-2",
+                        slide.featuresClassName
+                      ),
+                      children: renderFeatures(slide)
+                    }
+                  ) : null,
+                  renderActions(slide)
+                ] }),
+                renderImage(slide)
+              ]
+            }
+          )
         },
         slide.id
       ))
     ] });
-  }, [slidesSlot, slides, tabsListClassName, tabTriggerClassName, tabContentClassName, contentGridClassName, renderFeatures, renderActions, renderImage]);
+  }, [
+    slidesSlot,
+    slides,
+    tabsListClassName,
+    tabTriggerClassName,
+    tabContentClassName,
+    contentGridClassName,
+    renderFeatures,
+    renderActions,
+    renderImage
+  ]);
   const effectiveDefaultTab = useMemo(() => {
     if (defaultTab) return defaultTab;
     if (slides && slides.length > 0) return slides[0].id.toString();
@@ -1109,15 +1196,63 @@ function FeatureTabbedContentImage({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-6", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-balance text-muted-foreground lg:text-xl", descriptionClassName), children: description }))
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-3xl flex-col items-center gap-6",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-center text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-center text-3xl font-semibold lg:text-5xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-center text-balance text-muted-foreground lg:text-xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ),
         (slidesSlot || slides && slides.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12", tabsWrapperClassName), children: /* @__PURE__ */ jsx(
           Tabs,
           {
             defaultValue: effectiveDefaultTab,
-            className: cn("mx-auto flex w-fit flex-col items-center gap-8 md:gap-12", tabsClassName),
+            className: cn(
+              "mx-auto flex w-fit flex-col items-center gap-8 md:gap-12",
+              tabsClassName
+            ),
             children: slidesContent
           }
         ) })

package/dist/feature-three-column-values.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,24 +522,78 @@ function FeatureThreeColumnValues({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderValueIcon = React__namespace.useCallback((value) => {
-    if (value.icon) return value.icon;
-    if (value.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: value.iconName, size: 24 });
-    return null;
-  }, []);
+  const renderValueIcon = React__namespace.useCallback(
+    (value) => {
+      if (value.icon) return value.icon;
+      if (value.iconName)
+        return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: value.iconName, size: 24 });
+      return null;
+    },
+    []
+  );
   const valuesContent = React.useMemo(() => {
     if (valuesSlot) return valuesSlot;
     if (!values || values.length === 0) return null;
-    return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg bg-accent p-5", cardClassName, value.className), children: [
-      (value.icon || value.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
-      value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title })),
-      value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }))
-    ] }, index));
+    return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-lg bg-accent p-5",
+          cardClassName,
+          value.className
+        ),
+        children: [
+          (value.icon || value.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "mb-8 flex size-12 items-center justify-center rounded-full bg-background",
+                value.iconClassName
+              ),
+              children: renderValueIcon(value)
+            }
+          ),
+          value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: cn("mb-2 text-xl font-medium", value.titleClassName),
+              children: value.title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("mb-2 text-xl font-medium", value.titleClassName),
+              children: value.title
+            }
+          )),
+          value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "leading-7 text-muted-foreground",
+                value.descriptionClassName
+              ),
+              children: value.description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "leading-7 text-muted-foreground",
+                value.descriptionClassName
+              ),
+              children: value.description
+            }
+          ))
+        ]
+      },
+      index
+    ));
   }, [valuesSlot, values, cardClassName, renderValueIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -552,9 +606,48 @@ function FeatureThreeColumnValues({
       className,
       containerClassName,
       children: [
-        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", 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 })),
-        (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
+        label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "mb-4 text-sm text-muted-foreground lg:text-base",
+              labelClassName
+            ),
+            children: label
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mb-4 text-sm text-muted-foreground lg:text-base",
+              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
+          }
+        )),
+        (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: valuesContent
+          }
+        )
       ]
     }
   );

package/dist/feature-three-column-values.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 })
                 ] }),
@@ -501,24 +501,78 @@ function FeatureThreeColumnValues({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
-  const renderValueIcon = React.useCallback((value) => {
-    if (value.icon) return value.icon;
-    if (value.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: value.iconName, size: 24 });
-    return null;
-  }, []);
+  const renderValueIcon = React.useCallback(
+    (value) => {
+      if (value.icon) return value.icon;
+      if (value.iconName)
+        return /* @__PURE__ */ jsx(DynamicIcon, { name: value.iconName, size: 24 });
+      return null;
+    },
+    []
+  );
   const valuesContent = useMemo(() => {
     if (valuesSlot) return valuesSlot;
     if (!values || values.length === 0) return null;
-    return values.map((value, index) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg bg-accent p-5", cardClassName, value.className), children: [
-      (value.icon || value.iconName) && /* @__PURE__ */ jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
-      value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title })),
-      value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }))
-    ] }, index));
+    return values.map((value, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-lg bg-accent p-5",
+          cardClassName,
+          value.className
+        ),
+        children: [
+          (value.icon || value.iconName) && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "mb-8 flex size-12 items-center justify-center rounded-full bg-background",
+                value.iconClassName
+              ),
+              children: renderValueIcon(value)
+            }
+          ),
+          value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: cn("mb-2 text-xl font-medium", value.titleClassName),
+              children: value.title
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("mb-2 text-xl font-medium", value.titleClassName),
+              children: value.title
+            }
+          )),
+          value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "leading-7 text-muted-foreground",
+                value.descriptionClassName
+              ),
+              children: value.description
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "leading-7 text-muted-foreground",
+                value.descriptionClassName
+              ),
+              children: value.description
+            }
+          ))
+        ]
+      },
+      index
+    ));
   }, [valuesSlot, values, cardClassName, renderValueIcon]);
   return /* @__PURE__ */ jsxs(
     Section,
@@ -531,9 +585,48 @@ function FeatureThreeColumnValues({
       className,
       containerClassName,
       children: [
-        label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label })),
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
-        (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
+        label && (typeof label === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mb-4 text-sm text-muted-foreground lg:text-base",
+              labelClassName
+            ),
+            children: label
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mb-4 text-sm text-muted-foreground lg:text-base",
+              labelClassName
+            ),
+            children: label
+          }
+        )),
+        title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
+            children: title
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
+            children: title
+          }
+        )),
+        (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: valuesContent
+          }
+        )
       ]
     }
   );

package/dist/feature-utility-cards-grid.cjs

@@ -951,7 +951,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 })
                 ] }),

package/dist/feature-utility-cards-grid.js

@@ -929,7 +929,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 })
                 ] }),