@opensite/ui 2.7.3 → 2.7.5

package/dist/project-zigzag-layout.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground } from './community-initiatives-2FsyKLdT.cjs';
+import { S as SectionBackground } from './community-initiatives-D4FcWuFs.cjs';
 import 'react';
-import './blocks-gR13ES5A.cjs';
+import './blocks-C2WQp3iG.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-BmOlmOJa.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-zigzag-layout.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground } from './community-initiatives-CtLnPq2v.js';
+import { S as SectionBackground } from './community-initiatives-B9HX8_aL.js';
 import 'react';
-import './blocks-CsMdf2Jh.js';
+import './blocks-5dIbQuM8.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-BmOlmOJa.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/registry.cjs

@@ -9037,12 +9037,12 @@ function AboutStoryExpertise({
       {
         className: cn(
           "bg-card text-card-foreground",
-          "rounded-2xl border border-border/60 p-6 shadow-xl",
+          "rounded-2xl border p-5 shadow-xl",
           highlightClassName
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: highlight.icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-3 md:gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shrink-0", children: highlight.icon }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
@@ -9053,7 +9053,7 @@ function AboutStoryExpertise({
                   children: highlight.label
                 }
               ) : highlight.label),
-              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
+              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold leading-tight", children: highlight.title }) : highlight.title)
             ] })
           ] }),
           highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm"), children: highlight.description }) : highlight.description)
@@ -9118,9 +9118,9 @@ function AboutStoryExpertise({
               whileInView: { opacity: 1, x: 0 },
               viewport: { once: true, margin: "-50px" },
               transition: { duration: 0.5 },
-              className: "order-2 space-y-6 lg:order-1",
+              className: "order-2 space-y-8 lg:order-1",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
                   eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
                     {
@@ -9167,7 +9167,7 @@ function AboutStoryExpertise({
                 {
                   className: cn(
                     "relative overflow-hidden rounded-3xl",
-                    "border border-border shadow-2xl aspect-square",
+                    "shadow-2xl aspect-square",
                     imageClassName
                   ),
                   children: [
@@ -9180,48 +9180,38 @@ function AboutStoryExpertise({
                         optixFlowConfig
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-foreground/60 via-transparent to-transparent" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-6 left-6 right-6", children: highlightContent })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 md:bottom-6 left-4 md:left-6 right-4 md:right-6", children: highlightContent })
                   ]
                 }
               )
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "mt-20 rounded-3xl p-8 md:p-12",
-              expertiseSectionClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "h3",
-                  {
-                    className: cn(
-                      "mt-2 text-2xl font-bold md:text-3xl",
-                      expertiseHeadingClassName
-                    ),
-                    children: expertiseHeading
-                  }
-                ) : expertiseHeading),
-                expertiseDescription && (typeof expertiseDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "mx-auto mt-3 max-w-2xl",
-                      expertiseDescriptionClassName
-                    ),
-                    children: expertiseDescription
-                  }
-                ) : expertiseDescription)
-              ] }),
-              expertiseAreasContent
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 rounded-3xl", expertiseSectionClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: cn(
+                  "mt-2 text-2xl font-bold md:text-3xl",
+                  expertiseHeadingClassName
+                ),
+                children: expertiseHeading
+              }
+            ) : expertiseHeading),
+            expertiseDescription && (typeof expertiseDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "mx-auto mt-3 max-w-2xl",
+                  expertiseDescriptionClassName
+                ),
+                children: expertiseDescription
+              }
+            ) : expertiseDescription)
+          ] }),
+          expertiseAreasContent
+        ] })
       ]
     }
   );
@@ -9339,8 +9329,7 @@ function AboutNetworkSpotlight({
                       optixFlowConfig
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-black/70 via-transparent to-transparent" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 md:bottom-6 left-2 md:left-6 right-2 md:right-6", children: spotlightCardContent })
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 md:bottom-6 left-4 md:left-6 right-4 md:right-6", children: spotlightCardContent })
                 ] })
               }
             ),
@@ -9733,7 +9722,6 @@ function CtaDocumentationLinks({
   links,
   linksSlot,
   className,
-  containerClassName,
   cardClassName,
   contentClassName,
   headingClassName,
@@ -9742,7 +9730,8 @@ function CtaDocumentationLinks({
   linksClassName,
   linkCardClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -9810,7 +9799,7 @@ function CtaDocumentationLinks({
             )),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               link.title && /* @__PURE__ */ jsxRuntime.jsx("h5", { className: "mb-2 leading-4 font-medium", children: link.title }),
-              link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: link.description })
+              link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm"), children: link.description })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
@@ -9826,7 +9815,8 @@ function CtaDocumentationLinks({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
@@ -9845,7 +9835,7 @@ function CtaDocumentationLinks({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
               actionsContent
             ] }),
             linksContent
@@ -9863,7 +9853,6 @@ function CtaFeatureChecklist({
   items,
   itemsSlot,
   className,
-  containerClassName,
   cardClassName,
   contentClassName,
   headingClassName,
@@ -9872,39 +9861,11 @@ function CtaFeatureChecklist({
   checklistClassName,
   checklistItemClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
-  const actionsContent = React30.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", actionsClassName), children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        variant: action.variant,
-        size: action.size,
-        className: action.className,
-        "aria-label": action["aria-label"],
-        asButton: true,
-        children: [
-          action.icon,
-          action.children ?? action.label,
-          action.iconAfter ?? /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicIcon,
-            {
-              name: "lucide/arrow-right",
-              size: 16,
-              className: "ml-2"
-            }
-          )
-        ]
-      },
-      index
-    )) });
-  }, [actionsSlot, actions, actionsClassName]);
   const checklistContent = React30.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -9950,13 +9911,12 @@ function CtaFeatureChecklist({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-5xl", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-5xl", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
             "flex flex-col items-start justify-between gap-8 rounded-lg px-6 py-10 md:flex-row lg:px-20 lg:py-16",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background),
             cardClassName
           ),
           children: [
@@ -9970,15 +9930,16 @@ function CtaFeatureChecklist({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(descriptionClassName), children: description }) : description),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                BlockActions,
                 {
-                  className: cn(getTextColor(background, "muted"), descriptionClassName),
-                  children: description
+                  actions,
+                  actionsClassName,
+                  actionsSlot
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-              actionsContent
+              )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:w-1/3", children: checklistContent })
           ]
@@ -10627,7 +10588,6 @@ function CtaFeatureCardsGrid({
   features,
   featuresSlot,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -10635,7 +10595,8 @@ function CtaFeatureCardsGrid({
   featuresClassName,
   featureCardClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -10685,16 +10646,9 @@ function CtaFeatureCardsGrid({
           {
             className: cn("p-6 text-center", featureCardClassName),
             children: [
-              (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10", children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
-                {
-                  name: feature.iconName || "",
-                  size: 24,
-                  className: getAccentColor(background)
-                }
-              ) }),
+              (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10", children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "", size: 24 }) }),
               feature.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 font-semibold", children: feature.title }),
-              feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description })
+              feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: feature.description })
             ]
           },
           index
@@ -10707,10 +10661,11 @@ function CtaFeatureCardsGrid({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
@@ -10721,18 +10676,17 @@ function CtaFeatureCardsGrid({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
               className: cn(
                 "mx-auto mb-8 max-w-2xl text-lg",
-                getTextColor(background, "muted"),
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mb-8 max-w-2xl", descriptionClassName), children: description })),
+          ) : description),
           actionsContent
         ] }),
         featuresContent
@@ -11290,7 +11244,6 @@ function CtaEnterpriseSplit({
   links,
   linksSlot,
   className,
-  containerClassName,
   gridClassName,
   contentClassName,
   headingClassName,
@@ -11299,7 +11252,8 @@ function CtaEnterpriseSplit({
   linksClassName,
   linkCardClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -11379,7 +11333,8 @@ function CtaEnterpriseSplit({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn("grid gap-8 lg:grid-cols-2 lg:gap-16", gridClassName),
@@ -12954,7 +12909,6 @@ function CtaWorkflowTabs({
 }
 function CtaCaseStudyTestimonial({
   badge,
-  badgeText,
   heading,
   description,
   sections,
@@ -12971,7 +12925,6 @@ function CtaCaseStudyTestimonial({
   industryBadge,
   companyDetails,
   className,
-  containerClassName,
   gridClassName,
   contentClassName,
   badgeClassName,
@@ -12982,7 +12935,8 @@ function CtaCaseStudyTestimonial({
   actionsClassName,
   sidebarClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -13072,7 +13026,7 @@ function CtaCaseStudyTestimonial({
       index
     )) });
   }, [statsSlot, stats]);
-  const badgeContent = badge ?? badgeText;
+  const badgeContent = badge;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -13109,7 +13063,7 @@ function CtaCaseStudyTestimonial({
             "div",
             {
               className: cn(
-                "relative mt-8 border-l-4 border-primary/20 pl-6 italic text-muted-foreground",
+                "relative mt-8 border-l-4 border-primary/20 pl-6 italic",
                 testimonialClassName
               ),
               children: [
@@ -13118,7 +13072,7 @@ function CtaCaseStudyTestimonial({
                   {
                     name: "lucide/quote",
                     size: 24,
-                    className: "absolute -left-3 -top-2 rounded-full bg-background text-primary"
+                    className: "absolute -left-3 -top-2 rounded-full"
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "md:text-lg", children: [
@@ -13152,11 +13106,7 @@ function CtaCaseStudyTestimonial({
             ) }) })
           ] }),
           statsContent,
-          (companyLogo || companyName || industryBadge || companyDetails) && /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn(
-            "mt-6 rounded-lg border p-4",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: [
+          (companyLogo || companyName || industryBadge || companyDetails) && /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("mt-6 rounded-lg border p-4"), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                 companyLogo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -36194,7 +36144,7 @@ function BlogTechInsights({
     {
       background,
       spacing,
-      className: cn("dark relative", className),
+      className,
       pattern,
       patternOpacity,
       containerClassName,
@@ -36204,7 +36154,7 @@ function BlogTechInsights({
             "h1",
             {
               className: cn(
-                "text-3xl font-bold md:text-4xl lg:text-5xl",
+                "text-2xl font-bold lg:text-3xl",
                 headingClassName
               ),
               children: heading
@@ -41429,7 +41379,7 @@ var FeatureCard = React30__namespace.memo(
                 delay: 0.3,
                 ease: "easeOut"
               },
-              className: "p-6 text-sm md:p-8 md:text-base text-balance",
+              className: "p-6 text-sm md:p-8 md:text-base text-pretty",
               children: (feature.title || feature.description) && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
                 feature.title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
                   feature.title,
@@ -52241,15 +52191,17 @@ function HeroAdCampaignExpert({
           "div",
           {
             className: cn(
-              "relative flex w-full justify-center lg:w-1/2",
-              mediaItem?.containerClassName
+              "relative flex w-full justify-center overflow-hidden lg:w-1/2"
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-auto w-[80%] max-w-[355px] lg:w-full lg:max-w-[520px]", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
                 AspectRatio,
                 {
                   ratio: ASPECT_RATIOS[mediaAspectRatios.mobile],
-                  className: "border-muted border rounded-xl shadow-xl overflow-hidden",
+                  className: cn(
+                    "border-muted border rounded-xl shadow-xl overflow-hidden",
+                    mediaItem?.containerClassName
+                  ),
                   children: renderMedia
                 }
               ) }),
@@ -52257,7 +52209,10 @@ function HeroAdCampaignExpert({
                 AspectRatio,
                 {
                   ratio: ASPECT_RATIOS[mediaAspectRatios.desktop],
-                  className: "border-muted border rounded-xl shadow-xl overflow-hidden",
+                  className: cn(
+                    "border-muted border rounded-xl shadow-xl overflow-hidden",
+                    mediaItem?.containerClassName
+                  ),
                   children: renderMedia
                 }
               ) })
@@ -95140,45 +95095,54 @@ function StatsImpactGrid({
     if (comparisonSlot) return comparisonSlot;
     if (!hasComparisonContent) return null;
     const hasProgressBars = baselineLabel && targetLabel && baselinePercent !== void 0 && targetPercent !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-16 rounded-xl p-8", comparisonClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : comparisonHeading),
-        comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6 text-muted-foreground", children: comparisonDescription }) : comparisonDescription),
-        hasProgressBars && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "h-full bg-muted-foreground",
-                style: { width: `${baselinePercent}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mb-16 rounded-xl p-8 bg-card text-card-foreground",
+          comparisonClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,240px)] md:items-start md:gap-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            comparisonHeading && (typeof comparisonHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-2xl font-bold", children: comparisonHeading }) : comparisonHeading),
+            comparisonDescription && (typeof comparisonDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-6", children: comparisonDescription }) : comparisonDescription),
+            hasProgressBars && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-card/20 invert", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "h-full bg-card",
+                    style: { width: `${baselinePercent}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: baselineLabel })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "h-full bg-primary",
+                    style: { width: `${targetPercent}%` }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-full overflow-hidden rounded-full bg-primary/20", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "h-full bg-primary",
-                style: { width: `${targetPercent}%` }
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-[60px] text-sm font-medium", children: targetLabel })
-          ] })
-        ] })
-      ] }),
-      (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border bg-background/70 p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: baselineLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
-        ] }),
-        baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border" }),
-        targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
+          (baselineValue || targetValue) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border p-6 text-center shadow-sm md:text-left", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+            baselineValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              baselineLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide", children: baselineLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold", children: baselineValue })
+            ] }),
+            baselineValue && targetValue && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border" }),
+            targetValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-primary", children: targetLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold text-primary", children: targetValue })
+            ] })
+          ] }) })
         ] })
-      ] }) })
-    ] }) });
+      }
+    );
   }, [
     comparisonSlot,
     hasComparisonContent,
@@ -95227,8 +95191,8 @@ function StatsImpactGrid({
   const ctaContent = React30.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaHeading && (!actions || actions.length === 0)) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", ctaClassName), children: [
-      ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-2xl font-bold", children: ctaHeading }) : ctaHeading),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center mb-12", ctaClassName), children: [
+      ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6 text-2xl font-semibold", children: ctaHeading }) : ctaHeading),
       actionsContent
     ] });
   }, [ctaSlot, ctaHeading, actions, ctaClassName, actionsContent]);