@opensite/ui 1.6.3 → 1.6.5

package/dist/components.cjs

@@ -4407,7 +4407,8 @@ function FooterCtaBanner({
   legalLinksClassName,
   legalLinkClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -4419,89 +4420,168 @@ function FooterCtaBanner({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("dark", className),
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 rounded-lg border p-8 text-center md:p-12", ctaBannerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", ctaHeadingClassName), children: ctaHeading }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-6 max-w-2xl opacity-80", ctaDescriptionClassName), children: ctaDescription }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              href: ctaButtonUrl,
-              className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md border text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:opacity-80 h-11 px-8", ctaButtonClassName),
-              children: ctaButtonText
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-10 lg:grid-cols-5", gridClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("lg:col-span-2", brandClassName), children: [
-            logo && /* @__PURE__ */ jsxRuntime.jsx(
-              FooterLogo,
-              {
-                logo,
-                logoClassName: cn("mb-6", logoWrapperClassName),
-                logoImageClassName: logoClassName,
-                optixFlowConfig
-              }
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-16 rounded-lg border p-8 text-center md:p-12",
+              ctaBannerClassName
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-6", newsletterClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-medium", children: newsletterLabel }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-sm gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-4 text-3xl font-bold md:text-4xl text-balance",
+                    ctaHeadingClassName
+                  ),
+                  children: ctaHeading
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto mb-6 max-w-2xl opacity-80 text-balance",
+                    ctaDescriptionClassName
+                  ),
+                  children: ctaDescription
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: ctaButtonUrl, asButton: true, variant: "default", children: ctaButtonText })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-10 grid-cols-2 md:grid-cols-5",
+              gridClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("col-span-2", brandClassName), children: [
+                logo && /* @__PURE__ */ jsxRuntime.jsx(
+                  FooterLogo,
                   {
-                    type: "email",
-                    placeholder: newsletterPlaceholder,
-                    className: cn("flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", newsletterInputClassName)
+                    logo,
+                    logoClassName: cn("mb-6", logoWrapperClassName),
+                    logoImageClassName: logoClassName,
+                    optixFlowConfig
                   }
                 ),
+                newsletterClassName && newsletterLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-6", newsletterClassName), children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-medium", children: newsletterLabel }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-sm gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "email",
+                        placeholder: newsletterPlaceholder,
+                        className: cn(
+                          "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                          newsletterInputClassName
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        className: cn(
+                          "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2",
+                          newsletterButtonClassName
+                        ),
+                        children: newsletterButtonText
+                      }
+                    )
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
+                  "ul",
+                  {
+                    className: cn("flex items-center gap-4", socialLinksClassName),
+                    children: socialLinks?.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      SocialLinkIcon,
+                      {
+                        href: social.href,
+                        label: social.label,
+                        iconNameOverride: social.iconNameOverride,
+                        className: cn(
+                          "opacity-80 transition-colors hover:opacity-100",
+                          socialLinkClassName
+                        )
+                      }
+                    ) }, idx))
+                  }
+                )
+              ] }),
+              sections?.map((section, sectionIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-semibold", navTitleClassName), children: section.title }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "ul",
                   {
-                    type: "submit",
-                    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2", newsletterButtonClassName),
-                    children: newsletterButtonText
+                    className: cn(
+                      "space-y-3 text-sm opacity-80",
+                      navLinksClassName
+                    ),
+                    children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Pressable,
+                      {
+                        href: link.href,
+                        className: cn("hover:opacity-100", navLinkClassName),
+                        children: link.name
+                      }
+                    ) }, linkIdx))
                   }
                 )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex items-center gap-4", socialLinksClassName), children: socialLinks?.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-              SocialLinkIcon,
-              {
-                href: social.href,
-                label: social.label,
-                iconNameOverride: social.iconNameOverride,
-                className: cn("opacity-80 transition-colors hover:opacity-100", socialLinkClassName)
-              }
-            ) }, idx)) })
-          ] }),
-          sections?.map((section, sectionIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 font-semibold", navTitleClassName), children: section.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-3 text-sm opacity-80", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-              Pressable,
-              {
-                href: link.href,
-                className: cn("hover:opacity-100", navLinkClassName),
-                children: link.name
-              }
-            ) }, linkIdx)) })
-          ] }, sectionIdx))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center", bottomClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              BrandAttribution,
-              {
-                internalBrandSlug: "open_site_ai",
-                optionIndex: 8,
-                variant: "span",
-                linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, className: cn("hover:opacity-100", legalLinkClassName), children: link.name }) }, idx)) })
-        ] })
+              ] }, sectionIdx))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center",
+              bottomClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
+                    copyrightClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      BrandAttribution,
+                      {
+                        internalBrandSlug: "open_site_ai",
+                        optionIndex: 8,
+                        variant: "span",
+                        linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
+                {
+                  href: link.href,
+                  className: cn("hover:opacity-100", legalLinkClassName),
+                  children: link.name
+                }
+              ) }, idx)) })
+            ]
+          }
+        )
       ] }) })
     }
   );

package/dist/components.js

@@ -4384,7 +4384,8 @@ function FooterCtaBanner({
   legalLinksClassName,
   legalLinkClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -4396,89 +4397,168 @@ function FooterCtaBanner({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("dark", className),
+      className,
+      containerClassName,
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-16 rounded-lg border p-8 text-center md:p-12", ctaBannerClassName), children: [
-          /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", ctaHeadingClassName), children: ctaHeading }),
-          /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-6 max-w-2xl opacity-80", ctaDescriptionClassName), children: ctaDescription }),
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              href: ctaButtonUrl,
-              className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md border text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:opacity-80 h-11 px-8", ctaButtonClassName),
-              children: ctaButtonText
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-10 lg:grid-cols-5", gridClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("lg:col-span-2", brandClassName), children: [
-            logo && /* @__PURE__ */ jsx(
-              FooterLogo,
-              {
-                logo,
-                logoClassName: cn("mb-6", logoWrapperClassName),
-                logoImageClassName: logoClassName,
-                optixFlowConfig
-              }
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-16 rounded-lg border p-8 text-center md:p-12",
+              ctaBannerClassName
             ),
-            /* @__PURE__ */ jsxs("div", { className: cn("mb-6", newsletterClassName), children: [
-              /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium", children: newsletterLabel }),
-              /* @__PURE__ */ jsxs("div", { className: "flex max-w-sm gap-2", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
+            children: [
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "mb-4 text-3xl font-bold md:text-4xl text-balance",
+                    ctaHeadingClassName
+                  ),
+                  children: ctaHeading
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto mb-6 max-w-2xl opacity-80 text-balance",
+                    ctaDescriptionClassName
+                  ),
+                  children: ctaDescription
+                }
+              ),
+              /* @__PURE__ */ jsx(Pressable, { href: ctaButtonUrl, asButton: true, variant: "default", children: ctaButtonText })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-10 grid-cols-2 md:grid-cols-5",
+              gridClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("col-span-2", brandClassName), children: [
+                logo && /* @__PURE__ */ jsx(
+                  FooterLogo,
                   {
-                    type: "email",
-                    placeholder: newsletterPlaceholder,
-                    className: cn("flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", newsletterInputClassName)
+                    logo,
+                    logoClassName: cn("mb-6", logoWrapperClassName),
+                    logoImageClassName: logoClassName,
+                    optixFlowConfig
                   }
                 ),
+                newsletterClassName && newsletterLabel && /* @__PURE__ */ jsxs("div", { className: cn("mb-6", newsletterClassName), children: [
+                  /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-medium", children: newsletterLabel }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex max-w-sm gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "email",
+                        placeholder: newsletterPlaceholder,
+                        className: cn(
+                          "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                          newsletterInputClassName
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        className: cn(
+                          "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2",
+                          newsletterButtonClassName
+                        ),
+                        children: newsletterButtonText
+                      }
+                    )
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsx(
-                  "button",
+                  "ul",
+                  {
+                    className: cn("flex items-center gap-4", socialLinksClassName),
+                    children: socialLinks?.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                      SocialLinkIcon,
+                      {
+                        href: social.href,
+                        label: social.label,
+                        iconNameOverride: social.iconNameOverride,
+                        className: cn(
+                          "opacity-80 transition-colors hover:opacity-100",
+                          socialLinkClassName
+                        )
+                      }
+                    ) }, idx))
+                  }
+                )
+              ] }),
+              sections?.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
+                /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-semibold", navTitleClassName), children: section.title }),
+                /* @__PURE__ */ jsx(
+                  "ul",
                   {
-                    type: "submit",
-                    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2", newsletterButtonClassName),
-                    children: newsletterButtonText
+                    className: cn(
+                      "space-y-3 text-sm opacity-80",
+                      navLinksClassName
+                    ),
+                    children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        href: link.href,
+                        className: cn("hover:opacity-100", navLinkClassName),
+                        children: link.name
+                      }
+                    ) }, linkIdx))
                   }
                 )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("ul", { className: cn("flex items-center gap-4", socialLinksClassName), children: socialLinks?.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              SocialLinkIcon,
-              {
-                href: social.href,
-                label: social.label,
-                iconNameOverride: social.iconNameOverride,
-                className: cn("opacity-80 transition-colors hover:opacity-100", socialLinkClassName)
-              }
-            ) }, idx)) })
-          ] }),
-          sections?.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
-            /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-semibold", navTitleClassName), children: section.title }),
-            /* @__PURE__ */ jsx("ul", { className: cn("space-y-3 text-sm opacity-80", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                href: link.href,
-                className: cn("hover:opacity-100", navLinkClassName),
-                children: link.name
-              }
-            ) }, linkIdx)) })
-          ] }, sectionIdx))
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center", bottomClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
-            /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
-            /* @__PURE__ */ jsx(
-              BrandAttribution,
-              {
-                internalBrandSlug: "open_site_ai",
-                optionIndex: 8,
-                variant: "span",
-                linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Pressable, { href: link.href, className: cn("hover:opacity-100", legalLinkClassName), children: link.name }) }, idx)) })
-        ] })
+              ] }, sectionIdx))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center",
+              bottomClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
+                    copyrightClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
+                    /* @__PURE__ */ jsx(
+                      BrandAttribution,
+                      {
+                        internalBrandSlug: "open_site_ai",
+                        optionIndex: 8,
+                        variant: "span",
+                        linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  href: link.href,
+                  className: cn("hover:opacity-100", legalLinkClassName),
+                  children: link.name
+                }
+              ) }, idx)) })
+            ]
+          }
+        )
       ] }) })
     }
   );

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

@@ -1057,7 +1057,7 @@ function FeatureUtilityCardsGrid({
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
         className: cn(
-          "flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
+          "flex items-center gap-1 font-medium transition-opacity hover:opacity-80 text-right",
           learnMoreAction.className
         ),
         "aria-label": learnMoreAction["aria-label"],

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

@@ -1035,7 +1035,7 @@ function FeatureUtilityCardsGrid({
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
         className: cn(
-          "flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
+          "flex items-center gap-1 font-medium transition-opacity hover:opacity-80 text-right",
           learnMoreAction.className
         ),
         "aria-label": learnMoreAction["aria-label"],