@opensite/ui 1.8.6 → 1.8.8

package/dist/hero-architecture-fullscreen.cjs

@@ -899,7 +899,7 @@ function HeroArchitectureFullscreen({
               react.motion.h1,
               {
                 className: cn(
-                  "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-xl tracking-tight leading-0",
+                  "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-xl tracking-tight leading-[1.1]",
                   headingClassName
                 ),
                 initial: "hidden",

package/dist/hero-architecture-fullscreen.js

@@ -878,7 +878,7 @@ function HeroArchitectureFullscreen({
               motion.h1,
               {
                 className: cn(
-                  "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-xl tracking-tight leading-0",
+                  "text-6xl font-bold md:text-7xl lg:text-8xl text-white text-balance text-shadow-xl tracking-tight leading-[1.1]",
                   headingClassName
                 ),
                 initial: "hidden",

package/dist/hero-community-survey-cta.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:")) {
@@ -956,11 +930,79 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const renderAction = React__namespace.useCallback(
+    (action, idx) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        href,
+        onClick,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          href,
+          onClick,
+          asButton: action.asButton || true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        idx
+      );
+    },
+    []
+  );
+  const width = mobileConfig?.width ?? "fit";
+  const position = mobileConfig?.position ?? "left";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => renderAction(action, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
 function HeroCommunitySurveyCta({
-  announcementPrimary = "Join our Community Collaboration Survey!",
-  announcementSecondary = "We'll donate $20 for each response.",
-  announcementLinkText = "Take a tour",
-  announcementHref = "#",
+  announcementPrimary,
+  announcementSecondary,
+  announcementLinkText,
+  announcementHref,
   announcementSlot,
   heading,
   description,
@@ -989,37 +1031,33 @@ function HeroCommunitySurveyCta({
       Pressable,
       {
         href: announcementHref,
-        className: cn("group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm", announcementClassName),
+        className: cn(
+          "group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm",
+          announcementClassName
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1 font-medium", children: announcementPrimary }),
           announcementSecondary,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/minus", size: 16, className: "mx-1 inline-block" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
+            {
+              name: "lucide/minus",
+              size: 16,
+              className: "mx-1 inline-block"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold group-hover:underline", children: announcementLinkText })
         ]
       }
     );
-  }, [announcementSlot, announcementHref, announcementClassName, announcementPrimary, announcementSecondary, announcementLinkText]);
-  const renderActions = React.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      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,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
+  }, [
+    announcementSlot,
+    announcementHref,
+    announcementClassName,
+    announcementPrimary,
+    announcementSecondary,
+    announcementLinkText
+  ]);
   const renderImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-5xl", imagesClassName), children: [
@@ -1051,7 +1089,14 @@ function HeroCommunitySurveyCta({
         }
       )
     ] });
-  }, [imagesSlot, imagesClassName, mainImage, leftOverlayImage, rightOverlayImage, optixFlowConfig]);
+  }, [
+    imagesSlot,
+    imagesClassName,
+    mainImage,
+    leftOverlayImage,
+    rightOverlayImage,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1059,13 +1104,39 @@ function HeroCommunitySurveyCta({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col gap-7 text-center", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           renderAnnouncement,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-4xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions })
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-4xl lg:text-xl",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BlockActions,
+            {
+              actions,
+              actionsClassName,
+              actionsSlot
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative px-8", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%" }),

package/dist/hero-community-survey-cta.js

@@ -11,32 +11,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(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:")) {
@@ -935,11 +909,79 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const renderAction = React.useCallback(
+    (action, idx) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        href,
+        onClick,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          href,
+          onClick,
+          asButton: action.asButton || true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        idx
+      );
+    },
+    []
+  );
+  const width = mobileConfig?.width ?? "fit";
+  const position = mobileConfig?.position ?? "left";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => renderAction(action, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
 function HeroCommunitySurveyCta({
-  announcementPrimary = "Join our Community Collaboration Survey!",
-  announcementSecondary = "We'll donate $20 for each response.",
-  announcementLinkText = "Take a tour",
-  announcementHref = "#",
+  announcementPrimary,
+  announcementSecondary,
+  announcementLinkText,
+  announcementHref,
   announcementSlot,
   heading,
   description,
@@ -968,37 +1010,33 @@ function HeroCommunitySurveyCta({
       Pressable,
       {
         href: announcementHref,
-        className: cn("group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm", announcementClassName),
+        className: cn(
+          "group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm",
+          announcementClassName
+        ),
         children: [
           /* @__PURE__ */ jsx("span", { className: "mr-1 font-medium", children: announcementPrimary }),
           announcementSecondary,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/minus", size: 16, className: "mx-1 inline-block" }),
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: "lucide/minus",
+              size: 16,
+              className: "mx-1 inline-block"
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: "font-semibold group-hover:underline", children: announcementLinkText })
         ]
       }
     );
-  }, [announcementSlot, announcementHref, announcementClassName, announcementPrimary, announcementSecondary, announcementLinkText]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
+  }, [
+    announcementSlot,
+    announcementHref,
+    announcementClassName,
+    announcementPrimary,
+    announcementSecondary,
+    announcementLinkText
+  ]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     return /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-5xl", imagesClassName), children: [
@@ -1030,7 +1068,14 @@ function HeroCommunitySurveyCta({
         }
       )
     ] });
-  }, [imagesSlot, imagesClassName, mainImage, leftOverlayImage, rightOverlayImage, optixFlowConfig]);
+  }, [
+    imagesSlot,
+    imagesClassName,
+    mainImage,
+    leftOverlayImage,
+    rightOverlayImage,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1038,13 +1083,39 @@ function HeroCommunitySurveyCta({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col gap-7 text-center", containerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           renderAnnouncement,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-4xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions })
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto max-w-4xl lg:text-xl",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsClassName,
+              actionsSlot
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative px-8", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%" }),

package/dist/hero-software-growth-video-dialog.cjs

@@ -36,54 +36,6 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 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 getBorderColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "border-foreground/20";
-      case "muted":
-        return "border-foreground/10";
-      case "accent":
-        return "border-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "border-border";
-      case "muted":
-        return "border-muted";
-      case "accent":
-        return "border-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1119,7 +1071,15 @@ function HeroSoftwareGrowthVideoDialog({
     if (actionsSlot) return actionsSlot;
     const actionsToRender = actions || defaultActions;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center gap-3 md:flex-row", children: actionsToRender.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, onClick, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        onClick,
+        ...pressableProps
+      } = action;
       const isVideoButton = index === 0 && !actions;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
@@ -1149,17 +1109,36 @@ function HeroSoftwareGrowthVideoDialog({
     if (showcaseImagesSlot) return showcaseImagesSlot;
     if (!showcaseImages || showcaseImages.length < 4) return null;
     const imageConfigs = [
-      { index: 0, className: "absolute -top-[28%] left-[18%] w-[28.47%] max-w-102.5", ratio: 1.11372549 / 1 },
-      { index: 1, className: "absolute -top-[28%] left-[51%] w-[18.75%] max-w-67.5", ratio: 0.845559846 / 1 },
-      { index: 2, className: "absolute -bottom-[14%] left-[51%] w-[38.19%] max-w-137.5", ratio: 1.686153846 / 1 },
-      { index: 3, className: "absolute -bottom-[30%] left-[10.7%] w-[38.19%] max-w-137.5", ratio: 1.415041783 / 1 }
+      {
+        index: 0,
+        className: "absolute -top-[28%] left-[18%] w-[28.47%] max-w-102.5",
+        ratio: 1.11372549 / 1
+      },
+      {
+        index: 1,
+        className: "absolute -top-[28%] left-[51%] w-[18.75%] max-w-67.5",
+        ratio: 0.845559846 / 1
+      },
+      {
+        index: 2,
+        className: "absolute -bottom-[14%] left-[51%] w-[38.19%] max-w-137.5",
+        ratio: 1.686153846 / 1
+      },
+      {
+        index: 3,
+        className: "absolute -bottom-[30%] left-[10.7%] w-[38.19%] max-w-137.5",
+        ratio: 1.415041783 / 1
+      }
     ];
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full py-[16%]", showcaseClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-[2.716981132/1] w-full border", getBorderColor(background, "muted")), children: imageConfigs.map(({ index, className: posClassName, ratio }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: posClassName, children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full py-[16%]", showcaseClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-[2.716981132/1] w-full border"), children: imageConfigs.map(({ index, className: posClassName, ratio }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: posClassName, children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio, children: /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
       {
         src: showcaseImages[index].src,
         alt: showcaseImages[index].alt,
-        className: cn("size-full object-cover object-center", showcaseImages[index].className),
+        className: cn(
+          "size-full object-cover object-center",
+          showcaseImages[index].className
+        ),
         optixFlowConfig
       }
     ) }) }, index)) }) });
@@ -1171,8 +1150,35 @@ function HeroSoftwareGrowthVideoDialog({
         className: cn("font-dm_sans bg-background py-12 md:py-24", className),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-[1440px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-8", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-212.5 text-center text-lg leading-snug md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "max-w-212.5 text-center text-lg leading-snug md:text-xl",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             renderActions
           ] }),
           renderShowcaseImages