@opensite/ui 1.6.2 → 1.6.3

package/dist/feature-category-image-cards.cjs

@@ -953,7 +953,11 @@ function FeatureCategoryImageCards({
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       Card,
       {
-        className: cn("border-none", cardClassName, feature.className),
+        className: cn(
+          "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border pt-6 shadow-sm border-none",
+          cardClassName,
+          feature.className
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "text-center", children: [
             feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -985,7 +989,7 @@ function FeatureCategoryImageCards({
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:text-lg", feature.categoryClassName), children: feature.category }))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
+          /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "px-7 pb-0", children: renderFeatureImage(feature) })
         ]
       },
       index
@@ -1015,7 +1019,7 @@ function FeatureCategoryImageCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold md:text-5xl",
+                    "text-3xl font-semibold md:text-5xl text-balance",
                     titleClassName
                   ),
                   children: title
@@ -1024,13 +1028,31 @@ function FeatureCategoryImageCards({
                 "div",
                 {
                   className: cn(
-                    "text-3xl font-semibold md:text-5xl",
+                    "text-3xl font-semibold md:text-5xl text-balance",
                     titleClassName
                   ),
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-2xl md:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "max-w-2xl md:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ))
             ]
           }
         ),

package/dist/feature-category-image-cards.js

@@ -932,7 +932,11 @@ function FeatureCategoryImageCards({
     return features.map((feature, index) => /* @__PURE__ */ jsxs(
       Card,
       {
-        className: cn("border-none", cardClassName, feature.className),
+        className: cn(
+          "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border pt-6 shadow-sm border-none",
+          cardClassName,
+          feature.className
+        ),
         children: [
           /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
             feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx(
@@ -964,7 +968,7 @@ function FeatureCategoryImageCards({
               }
             ) : /* @__PURE__ */ jsx("div", { className: cn("md:text-lg", feature.categoryClassName), children: feature.category }))
           ] }),
-          /* @__PURE__ */ jsx(CardContent, { className: "px-7 pb-7", children: renderFeatureImage(feature) })
+          /* @__PURE__ */ jsx(CardContent, { className: "px-7 pb-0", children: renderFeatureImage(feature) })
         ]
       },
       index
@@ -994,7 +998,7 @@ function FeatureCategoryImageCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-semibold md:text-5xl",
+                    "text-3xl font-semibold md:text-5xl text-balance",
                     titleClassName
                   ),
                   children: title
@@ -1003,13 +1007,31 @@ function FeatureCategoryImageCards({
                 "div",
                 {
                   className: cn(
-                    "text-3xl font-semibold md:text-5xl",
+                    "text-3xl font-semibold md:text-5xl text-balance",
                     titleClassName
                   ),
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg", descriptionClassName), children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-2xl md:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "max-w-2xl md:text-lg text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ))
             ]
           }
         ),

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

@@ -1098,7 +1098,7 @@ function FeatureUtilityCardsGrid({
       Card,
       {
         className: cn(
-          "py-0 shadow-sm overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          "gap-0! py-0 shadow-sm overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
           cardClassName,
           utility.className
         ),

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

@@ -1076,7 +1076,7 @@ function FeatureUtilityCardsGrid({
       Card,
       {
         className: cn(
-          "py-0 shadow-sm overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          "gap-0! py-0 shadow-sm overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
           cardClassName,
           utility.className
         ),

package/dist/footer-accordion-social.cjs

@@ -1755,7 +1755,8 @@ function FooterAccordionSocial({
   onSuccess,
   onError,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1809,6 +1810,7 @@ function FooterAccordionSocial({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-2 lg:gap-20", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [

package/dist/footer-accordion-social.d.cts

@@ -95,6 +95,10 @@ interface FooterAccordionSocialProps {
      * Background style for the section
      */
     background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Vertical spacing for the section
      */
@@ -131,6 +135,6 @@ interface FooterAccordionSocialProps {
  * />
  * ```
  */
-declare function FooterAccordionSocial({ newsletterTitle, newsletterDescription, footerLinks, socialLinks, logo, copyright, className, optixFlowConfig, formConfig, onSubmit, onSuccess, onError, background, spacing, pattern, patternOpacity, patternClassName, }: FooterAccordionSocialProps): react_jsx_runtime.JSX.Element;
+declare function FooterAccordionSocial({ newsletterTitle, newsletterDescription, footerLinks, socialLinks, logo, copyright, className, optixFlowConfig, formConfig, onSubmit, onSuccess, onError, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: FooterAccordionSocialProps): react_jsx_runtime.JSX.Element;
 
 export { FooterAccordionSocial, type FooterAccordionSocialNavLink, type FooterAccordionSocialProps, type FooterAccordionSocialSection };

package/dist/footer-accordion-social.d.ts

@@ -95,6 +95,10 @@ interface FooterAccordionSocialProps {
      * Background style for the section
      */
     background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Vertical spacing for the section
      */
@@ -131,6 +135,6 @@ interface FooterAccordionSocialProps {
  * />
  * ```
  */
-declare function FooterAccordionSocial({ newsletterTitle, newsletterDescription, footerLinks, socialLinks, logo, copyright, className, optixFlowConfig, formConfig, onSubmit, onSuccess, onError, background, spacing, pattern, patternOpacity, patternClassName, }: FooterAccordionSocialProps): react_jsx_runtime.JSX.Element;
+declare function FooterAccordionSocial({ newsletterTitle, newsletterDescription, footerLinks, socialLinks, logo, copyright, className, optixFlowConfig, formConfig, onSubmit, onSuccess, onError, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: FooterAccordionSocialProps): react_jsx_runtime.JSX.Element;
 
 export { FooterAccordionSocial, type FooterAccordionSocialNavLink, type FooterAccordionSocialProps, type FooterAccordionSocialSection };

package/dist/footer-accordion-social.js

@@ -1734,7 +1734,8 @@ function FooterAccordionSocial({
   onSuccess,
   onError,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1788,6 +1789,7 @@ function FooterAccordionSocial({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-2 lg:gap-20", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [

package/dist/footer-info-cards-accordion.cjs

@@ -1741,7 +1741,8 @@ function FooterInfoCardsAccordion({
   copyrightClassName,
   submenuLinksClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -1761,6 +1762,7 @@ function FooterInfoCardsAccordion({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-12 lg:space-y-14", contentClassName), children: [
         footerDetails?.image?.src && (newsletterTitle || newsletterDescription || subscribeText) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -1913,61 +1915,43 @@ function FooterInfoCardsAccordion({
               brandGridClassName
             ),
             children: [
-              (footerDetails?.logo || footerDetails?.description) && /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: cn(
-                    "space-y-5",
-                    brandColumnClassName
-                  ),
-                  children: [
-                    footerDetails?.logo && /* @__PURE__ */ jsxRuntime.jsx(
-                      FooterLogo,
-                      {
-                        logo: {
-                          ...footerDetails.logo,
-                          url: footerDetails.logoUrl || "/"
-                        },
-                        logoClassName: cn(
-                          "inline-block w-full max-w-64",
-                          logoClassName
-                        ),
-                        optixFlowConfig
-                      }
+              (footerDetails?.logo || footerDetails?.description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-5", brandColumnClassName), children: [
+                footerDetails?.logo && /* @__PURE__ */ jsxRuntime.jsx(
+                  FooterLogo,
+                  {
+                    logo: {
+                      ...footerDetails.logo,
+                      url: footerDetails.logoUrl || "/"
+                    },
+                    logoClassName: cn(
+                      "inline-block w-full max-w-64",
+                      logoClassName
                     ),
-                    footerDetails?.description && /* @__PURE__ */ jsxRuntime.jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "max-w-md text-sm leading-relaxed text-muted-foreground",
-                          brandDescriptionClassName
-                        ),
-                        children: footerDetails.description
-                      }
-                    )
-                  ]
-                }
-              ),
-              footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "space-y-6",
-                    accordionColumnClassName
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-sm font-semibold tracking-wide", children: section.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2.5 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-                      Pressable,
-                      {
-                        href: item.link,
-                        className: "transition-colors hover:text-foreground",
-                        children: item.text
-                      }
-                    ) }, idx)) })
-                  ] }, section.id)) })
-                }
-              )
+                    optixFlowConfig
+                  }
+                ),
+                footerDetails?.description && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-md text-sm leading-relaxed text-muted-foreground",
+                      brandDescriptionClassName
+                    ),
+                    children: footerDetails.description
+                  }
+                )
+              ] }),
+              footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6", accordionColumnClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-8 grid-cols-2 md:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-sm font-semibold tracking-wide", children: section.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2.5 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Pressable,
+                  {
+                    href: item.link,
+                    className: "transition-colors hover:text-foreground",
+                    children: item.text
+                  }
+                ) }, idx)) })
+              ] }, section.id)) }) })
             ]
           }
         ),

package/dist/footer-info-cards-accordion.d.cts

@@ -222,6 +222,10 @@ interface FooterInfoCardsAccordionProps {
      * Section background variant
      */
     background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Section spacing variant
      */
@@ -261,6 +265,6 @@ interface FooterInfoCardsAccordionProps {
  * />
  * ```
  */
-declare function FooterInfoCardsAccordion({ newsletterTitle, newsletterDescription, emailPlaceholder, subscribeText, termsText, termsLinkText, termsLinkUrl, privacyLinkText, privacyLinkUrl, infoItems, footerLinks, socialLinks, paymentPlatforms, submenuLinks, footerDetails, copyright, className, contentClassName, newsletterGridClassName, newsletterImageClassName, newsletterContentClassName, newsletterTitleClassName, newsletterDescriptionClassName, newsletterFormClassName, infoCardsGridClassName, infoCardClassName, brandGridClassName, brandColumnClassName, logoClassName, brandDescriptionClassName, accordionColumnClassName, paymentSocialRowClassName, paymentMethodsClassName, socialLinksClassName, bottomClassName, copyrightClassName, submenuLinksClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterInfoCardsAccordionProps): react_jsx_runtime.JSX.Element;
+declare function FooterInfoCardsAccordion({ newsletterTitle, newsletterDescription, emailPlaceholder, subscribeText, termsText, termsLinkText, termsLinkUrl, privacyLinkText, privacyLinkUrl, infoItems, footerLinks, socialLinks, paymentPlatforms, submenuLinks, footerDetails, copyright, className, contentClassName, newsletterGridClassName, newsletterImageClassName, newsletterContentClassName, newsletterTitleClassName, newsletterDescriptionClassName, newsletterFormClassName, infoCardsGridClassName, infoCardClassName, brandGridClassName, brandColumnClassName, logoClassName, brandDescriptionClassName, accordionColumnClassName, paymentSocialRowClassName, paymentMethodsClassName, socialLinksClassName, bottomClassName, copyrightClassName, submenuLinksClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterInfoCardsAccordionProps): react_jsx_runtime.JSX.Element;
 
 export { FooterInfoCardsAccordion, type FooterInfoCardsAccordionInfoItem, type FooterInfoCardsAccordionLink, type FooterInfoCardsAccordionProps, type FooterInfoCardsAccordionSection, FooterSocialLink, PaymentPlatformName };

package/dist/footer-info-cards-accordion.d.ts

@@ -222,6 +222,10 @@ interface FooterInfoCardsAccordionProps {
      * Section background variant
      */
     background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Section spacing variant
      */
@@ -261,6 +265,6 @@ interface FooterInfoCardsAccordionProps {
  * />
  * ```
  */
-declare function FooterInfoCardsAccordion({ newsletterTitle, newsletterDescription, emailPlaceholder, subscribeText, termsText, termsLinkText, termsLinkUrl, privacyLinkText, privacyLinkUrl, infoItems, footerLinks, socialLinks, paymentPlatforms, submenuLinks, footerDetails, copyright, className, contentClassName, newsletterGridClassName, newsletterImageClassName, newsletterContentClassName, newsletterTitleClassName, newsletterDescriptionClassName, newsletterFormClassName, infoCardsGridClassName, infoCardClassName, brandGridClassName, brandColumnClassName, logoClassName, brandDescriptionClassName, accordionColumnClassName, paymentSocialRowClassName, paymentMethodsClassName, socialLinksClassName, bottomClassName, copyrightClassName, submenuLinksClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterInfoCardsAccordionProps): react_jsx_runtime.JSX.Element;
+declare function FooterInfoCardsAccordion({ newsletterTitle, newsletterDescription, emailPlaceholder, subscribeText, termsText, termsLinkText, termsLinkUrl, privacyLinkText, privacyLinkUrl, infoItems, footerLinks, socialLinks, paymentPlatforms, submenuLinks, footerDetails, copyright, className, contentClassName, newsletterGridClassName, newsletterImageClassName, newsletterContentClassName, newsletterTitleClassName, newsletterDescriptionClassName, newsletterFormClassName, infoCardsGridClassName, infoCardClassName, brandGridClassName, brandColumnClassName, logoClassName, brandDescriptionClassName, accordionColumnClassName, paymentSocialRowClassName, paymentMethodsClassName, socialLinksClassName, bottomClassName, copyrightClassName, submenuLinksClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterInfoCardsAccordionProps): react_jsx_runtime.JSX.Element;
 
 export { FooterInfoCardsAccordion, type FooterInfoCardsAccordionInfoItem, type FooterInfoCardsAccordionLink, type FooterInfoCardsAccordionProps, type FooterInfoCardsAccordionSection, FooterSocialLink, PaymentPlatformName };

package/dist/footer-info-cards-accordion.js

@@ -1719,7 +1719,8 @@ function FooterInfoCardsAccordion({
   copyrightClassName,
   submenuLinksClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -1739,6 +1740,7 @@ function FooterInfoCardsAccordion({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn("space-y-12 lg:space-y-14", contentClassName), children: [
         footerDetails?.image?.src && (newsletterTitle || newsletterDescription || subscribeText) && /* @__PURE__ */ jsxs(
           "div",
@@ -1891,61 +1893,43 @@ function FooterInfoCardsAccordion({
               brandGridClassName
             ),
             children: [
-              (footerDetails?.logo || footerDetails?.description) && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "space-y-5",
-                    brandColumnClassName
-                  ),
-                  children: [
-                    footerDetails?.logo && /* @__PURE__ */ jsx(
-                      FooterLogo,
-                      {
-                        logo: {
-                          ...footerDetails.logo,
-                          url: footerDetails.logoUrl || "/"
-                        },
-                        logoClassName: cn(
-                          "inline-block w-full max-w-64",
-                          logoClassName
-                        ),
-                        optixFlowConfig
-                      }
+              (footerDetails?.logo || footerDetails?.description) && /* @__PURE__ */ jsxs("div", { className: cn("space-y-5", brandColumnClassName), children: [
+                footerDetails?.logo && /* @__PURE__ */ jsx(
+                  FooterLogo,
+                  {
+                    logo: {
+                      ...footerDetails.logo,
+                      url: footerDetails.logoUrl || "/"
+                    },
+                    logoClassName: cn(
+                      "inline-block w-full max-w-64",
+                      logoClassName
                     ),
-                    footerDetails?.description && /* @__PURE__ */ jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "max-w-md text-sm leading-relaxed text-muted-foreground",
-                          brandDescriptionClassName
-                        ),
-                        children: footerDetails.description
-                      }
-                    )
-                  ]
-                }
-              ),
-              footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "space-y-6",
-                    accordionColumnClassName
-                  ),
-                  children: /* @__PURE__ */ jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("h3", { className: "mb-4 text-sm font-semibold tracking-wide", children: section.title }),
-                    /* @__PURE__ */ jsx("ul", { className: "space-y-2.5 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-                      Pressable,
-                      {
-                        href: item.link,
-                        className: "transition-colors hover:text-foreground",
-                        children: item.text
-                      }
-                    ) }, idx)) })
-                  ] }, section.id)) })
-                }
-              )
+                    optixFlowConfig
+                  }
+                ),
+                footerDetails?.description && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-md text-sm leading-relaxed text-muted-foreground",
+                      brandDescriptionClassName
+                    ),
+                    children: footerDetails.description
+                  }
+                )
+              ] }),
+              footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("space-y-6", accordionColumnClassName), children: /* @__PURE__ */ jsx("div", { className: "grid gap-8 grid-cols-2 md:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h3", { className: "mb-4 text-sm font-semibold tracking-wide", children: section.title }),
+                /* @__PURE__ */ jsx("ul", { className: "space-y-2.5 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    href: item.link,
+                    className: "transition-colors hover:text-foreground",
+                    children: item.text
+                  }
+                ) }, idx)) })
+              ] }, section.id)) }) })
             ]
           }
         ),

package/dist/hero-logo-centered-screenshot.cjs

@@ -32,32 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -861,11 +835,11 @@ function HeroLogoCenteredScreenshot({
   image,
   imageSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -881,7 +855,7 @@ function HeroLogoCenteredScreenshot({
       {
         src: logoSrc,
         alt: logo.alt,
-        className: cn("h-10 md:h-16", logo.className),
+        className: cn("h-10 md:h-16 object-contain", logo.className),
         optixFlowConfig
       }
     );
@@ -889,7 +863,14 @@ function HeroLogoCenteredScreenshot({
   const renderAction = React.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       icon,
       label,
@@ -904,7 +885,11 @@ function HeroLogoCenteredScreenshot({
       {
         src: image.src,
         alt: image.alt,
-        className: cn("mt-20 aspect-video w-full rounded-t-lg object-cover", imageClassName, image.className),
+        className: cn(
+          "mt-20 w-full rounded-xl object-cover h-auto shadow-xl",
+          imageClassName,
+          image.className
+        ),
         optixFlowConfig
       }
     );
@@ -917,15 +902,51 @@ function HeroLogoCenteredScreenshot({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 flex flex-col items-center gap-6 text-center", contentClassName), children: [
-          renderLogo,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-3xl font-medium text-pretty lg:text-5xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          renderAction
-        ] }) }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "z-10 flex flex-col items-center gap-6 text-center",
+              contentClassName
+            ),
+            children: [
+              renderLogo,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center w-full text-balance", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-4 text-3xl font-medium lg:text-5xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-4 text-3xl font-medium lg:text-5xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-3xl lg:text-xl",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              renderAction
+            ]
+          }
+        ) }),
         renderImage
       ] }) })
     }