@opensite/ui 0.8.4 → 0.8.6

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

@@ -522,24 +522,56 @@ 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 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 ",
+                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 ", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-7", value.descriptionClassName), children: value.description }))
+        ]
+      },
+      index
+    ));
   }, [valuesSlot, values, cardClassName, renderValueIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -552,9 +584,30 @@ 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 lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-sm 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

@@ -501,24 +501,56 @@ 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 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 ",
+                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 ", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-7", value.descriptionClassName), children: value.description }))
+        ]
+      },
+      index
+    ));
   }, [valuesSlot, values, cardClassName, renderValueIcon]);
   return /* @__PURE__ */ jsxs(
     Section,
@@ -531,9 +563,30 @@ 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 lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-sm 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

@@ -985,14 +985,15 @@ function FeatureUtilityCardsGrid({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
   const renderLabelIcon = React.useMemo(() => {
     if (labelIcon) return labelIcon;
-    if (labelIconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
+    if (labelIconName)
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
     return null;
   }, [labelIcon, labelIconName]);
   const learnMoreContent = React.useMemo(() => {
@@ -1004,7 +1005,10 @@ function FeatureUtilityCardsGrid({
         {
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
-          className: cn("hover:text-primary hover:underline", learnMoreAction.className),
+          className: cn(
+            "hover:text-primary hover:underline",
+            learnMoreAction.className
+          ),
           "aria-label": learnMoreAction["aria-label"],
           children: learnMoreAction.children
         }
@@ -1015,7 +1019,7 @@ function FeatureUtilityCardsGrid({
       {
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
-        className: cn("hover:text-primary hover:underline", learnMoreAction.className),
+        className: cn(learnMoreAction.className),
         "aria-label": learnMoreAction["aria-label"],
         children: [
           learnMoreAction.icon,
@@ -1025,32 +1029,45 @@ function FeatureUtilityCardsGrid({
       }
     );
   }, [learnMoreSlot, learnMoreAction]);
-  const renderUtilityImage = React__namespace.useCallback((utility) => {
-    if (utility.imageSlot) return utility.imageSlot;
-    if (utility.image) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: utility.image,
-          alt: utility.imageAlt || (typeof utility.title === "string" ? utility.title : "Utility image"),
-          className: cn("aspect-video w-full object-cover", utility.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
+  const renderUtilityImage = React__namespace.useCallback(
+    (utility) => {
+      if (utility.imageSlot) return utility.imageSlot;
+      if (utility.image) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: utility.image,
+            alt: utility.imageAlt || (typeof utility.title === "string" ? utility.title : "Utility image"),
+            className: cn(
+              "aspect-video w-full object-cover",
+              utility.imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
+      }
+      return null;
+    },
+    [optixFlowConfig]
+  );
   const utilitiesContent = React.useMemo(() => {
     if (utilitiesSlot) return utilitiesSlot;
     if (!utilities || utilities.length === 0) return null;
-    return utilities.map((utility, index) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("overflow-hidden pt-0", cardClassName, utility.className), children: [
-      renderUtilityImage(utility),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
-        utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
-        utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }))
-      ] })
-    ] }, index));
+    return utilities.map((utility, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Card,
+      {
+        className: cn("overflow-hidden pt-0", cardClassName, utility.className),
+        children: [
+          renderUtilityImage(utility),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
+            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
+            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", utility.descriptionClassName), children: utility.description }))
+          ] })
+        ]
+      },
+      index
+    ));
   }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1064,20 +1081,50 @@ function FeatureUtilityCardsGrid({
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
         (label || labelIcon || labelIconName || learnMoreSlot || learnMoreAction) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between text-sm", headerClassName), children: [
-            (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 text-muted-foreground", labelClassName), children: [
-              renderLabelIcon,
-              label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
-            ] }),
-            learnMoreContent
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between text-sm",
+                headerClassName
+              ),
+              children: [
+                (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1 ", labelClassName), children: [
+                  renderLabelIcon,
+                  label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }))
+                ] }),
+                learnMoreContent
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" })
         ] }),
         (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title })),
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn("text-3xl font-medium md:w-1/2", titleClassName),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("text-3xl font-medium md:w-1/2", titleClassName),
+              children: title
+            }
+          )),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
         ] }),
-        (utilitiesSlot || utilities && utilities.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: utilitiesContent })
+        (utilitiesSlot || utilities && utilities.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: utilitiesContent
+          }
+        )
       ]
     }
   );

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

@@ -963,14 +963,15 @@ function FeatureUtilityCardsGrid({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
 }) {
   const renderLabelIcon = useMemo(() => {
     if (labelIcon) return labelIcon;
-    if (labelIconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
+    if (labelIconName)
+      return /* @__PURE__ */ jsx(DynamicIcon, { name: labelIconName, size: 20, className: "text-primary" });
     return null;
   }, [labelIcon, labelIconName]);
   const learnMoreContent = useMemo(() => {
@@ -982,7 +983,10 @@ function FeatureUtilityCardsGrid({
         {
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
-          className: cn("hover:text-primary hover:underline", learnMoreAction.className),
+          className: cn(
+            "hover:text-primary hover:underline",
+            learnMoreAction.className
+          ),
           "aria-label": learnMoreAction["aria-label"],
           children: learnMoreAction.children
         }
@@ -993,7 +997,7 @@ function FeatureUtilityCardsGrid({
       {
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
-        className: cn("hover:text-primary hover:underline", learnMoreAction.className),
+        className: cn(learnMoreAction.className),
         "aria-label": learnMoreAction["aria-label"],
         children: [
           learnMoreAction.icon,
@@ -1003,32 +1007,45 @@ function FeatureUtilityCardsGrid({
       }
     );
   }, [learnMoreSlot, learnMoreAction]);
-  const renderUtilityImage = React.useCallback((utility) => {
-    if (utility.imageSlot) return utility.imageSlot;
-    if (utility.image) {
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: utility.image,
-          alt: utility.imageAlt || (typeof utility.title === "string" ? utility.title : "Utility image"),
-          className: cn("aspect-video w-full object-cover", utility.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
+  const renderUtilityImage = React.useCallback(
+    (utility) => {
+      if (utility.imageSlot) return utility.imageSlot;
+      if (utility.image) {
+        return /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: utility.image,
+            alt: utility.imageAlt || (typeof utility.title === "string" ? utility.title : "Utility image"),
+            className: cn(
+              "aspect-video w-full object-cover",
+              utility.imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
+      }
+      return null;
+    },
+    [optixFlowConfig]
+  );
   const utilitiesContent = useMemo(() => {
     if (utilitiesSlot) return utilitiesSlot;
     if (!utilities || utilities.length === 0) return null;
-    return utilities.map((utility, index) => /* @__PURE__ */ jsxs(Card, { className: cn("overflow-hidden pt-0", cardClassName, utility.className), children: [
-      renderUtilityImage(utility),
-      /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
-        utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
-        utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", utility.descriptionClassName), children: utility.description }))
-      ] })
-    ] }, index));
+    return utilities.map((utility, index) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: cn("overflow-hidden pt-0", cardClassName, utility.className),
+        children: [
+          renderUtilityImage(utility),
+          /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
+            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
+            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsx("div", { className: cn("", utility.descriptionClassName), children: utility.description }))
+          ] })
+        ]
+      },
+      index
+    ));
   }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
   return /* @__PURE__ */ jsxs(
     Section,
@@ -1042,20 +1059,50 @@ function FeatureUtilityCardsGrid({
       containerClassName: cn("max-w-7xl", containerClassName),
       children: [
         (label || labelIcon || labelIconName || learnMoreSlot || learnMoreAction) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between text-sm", headerClassName), children: [
-            (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 text-muted-foreground", labelClassName), children: [
-              renderLabelIcon,
-              label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { children: label }) : /* @__PURE__ */ jsx("div", { children: label }))
-            ] }),
-            learnMoreContent
-          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between text-sm",
+                headerClassName
+              ),
+              children: [
+                (label || labelIcon || labelIconName) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1 ", labelClassName), children: [
+                  renderLabelIcon,
+                  label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { children: label }) : /* @__PURE__ */ jsx("div", { children: label }))
+                ] }),
+                learnMoreContent
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(Separator, { className: "mt-3 mb-8" })
         ] }),
         (title || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-6 md:flex-row", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title })),
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn("text-3xl font-medium md:w-1/2", titleClassName),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("text-3xl font-medium md:w-1/2", titleClassName),
+              children: title
+            }
+          )),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
         ] }),
-        (utilitiesSlot || utilities && utilities.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: utilitiesContent })
+        (utilitiesSlot || utilities && utilities.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
+              gridClassName
+            ),
+            children: utilitiesContent
+          }
+        )
       ]
     }
   );

package/dist/navbar-animated-preview.cjs

@@ -954,7 +954,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -975,7 +975,13 @@ function AccordionTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });

package/dist/navbar-animated-preview.js

@@ -928,7 +928,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -949,7 +949,13 @@ function AccordionTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });

package/dist/navbar-centered-menu.cjs

@@ -949,7 +949,7 @@ function AccordionItem({
     AccordionPrimitive__namespace.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -970,7 +970,13 @@ function AccordionTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });

package/dist/navbar-centered-menu.js

@@ -925,7 +925,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("border-b last:border-b-0", className),
+      className: cn("border-b ", className),
       ...props
     }
   );
@@ -946,7 +946,13 @@ function AccordionTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-down", className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
       ]
     }
   ) });