@opensite/ui 2.0.2 → 2.0.3

package/dist/registry.js

@@ -50423,27 +50423,31 @@ function HeroCenteredImageGrid({
   gridImages,
   gridImagesSlot,
   imageOverlayAction,
-  logos,
-  logosSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   contentClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   imageGridClassName,
-  logosClassName,
   optixFlowConfig
 }) {
   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;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -50462,38 +50466,20 @@ function HeroCenteredImageGrid({
   }, [actionsSlot, actions]);
   const renderImageOverlayAction = useMemo(() => {
     if (!imageOverlayAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = imageOverlayAction;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          icon,
-          label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = imageOverlayAction;
+    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [imageOverlayAction]);
-  const renderLogos = useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return logos.map((logo, index) => {
-      const src = typeof logo.src === "string" ? logo.src : logo.src.light;
-      typeof logo.src === "string" ? logo.src : logo.src.dark;
-      return /* @__PURE__ */ jsx(React23.Fragment, { children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src,
-          alt: logo.alt,
-          className: cn(logo.className, "dark:invert"),
-          optixFlowConfig
-        }
-      ) }, index);
-    });
-  }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -50501,39 +50487,90 @@ function HeroCenteredImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("z-10 flex flex-col items-center gap-8 text-center", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-4xl font-semibold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("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 w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
-        ] }) }),
-        gridImagesSlot ? gridImagesSlot : /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mt-20 grid max-w-7xl gap-px bg-border p-px md:grid-cols-5", imageGridClassName), children: [
-          gridImages?.[0] && /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: gridImages[0].src,
-              alt: gridImages[0].alt,
-              className: cn("h-full max-h-[500px] w-full object-cover md:col-span-3 dark:invert", gridImages[0].className),
-              optixFlowConfig
-            }
-          ),
-          gridImages?.[1] && /* @__PURE__ */ jsxs("div", { className: "relative md:col-span-2", children: [
-            /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: gridImages[1].src,
-                alt: gridImages[1].alt,
-                className: cn("h-full max-h-[500px] w-full object-cover dark:invert", gridImages[1].className),
-                optixFlowConfig
-              }
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "z-10 flex flex-col items-center gap-8 text-center",
+              contentClassName
             ),
-            renderImageOverlayAction
-          ] })
-        ] }),
-        (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-12 grid max-w-7xl grid-cols-2 place-items-center gap-6 md:grid-cols-4", logosClassName), children: renderLogos })
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-4 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(
+                      "lg:text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex w-full flex-col justify-center gap-2 sm:flex-row",
+                    actionsClassName
+                  ),
+                  children: renderActions
+                }
+              )
+            ]
+          }
+        ) }),
+        gridImagesSlot ? gridImagesSlot : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-7xl gap-px bg-border p-px md:grid-cols-5",
+              imageGridClassName
+            ),
+            children: [
+              gridImages?.[0] && /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: gridImages[0].src,
+                  alt: gridImages[0].alt,
+                  className: cn(
+                    "h-full max-h-[500px] w-full object-cover md:col-span-3 dark:invert",
+                    gridImages[0].className
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              gridImages?.[1] && /* @__PURE__ */ jsxs("div", { className: "relative md:col-span-2", children: [
+                /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: gridImages[1].src,
+                    alt: gridImages[1].alt,
+                    className: cn(
+                      "h-full max-h-[500px] w-full object-cover dark:invert",
+                      gridImages[1].className
+                    ),
+                    optixFlowConfig
+                  }
+                ),
+                renderImageOverlayAction
+              ] })
+            ]
+          }
+        )
       ] })
     }
   );
@@ -50837,7 +50874,7 @@ function HeroLogoCenteredScreenshot({
   imageSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -50966,7 +51003,7 @@ function HeroPatternLogoTechStack({
   techLogosSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -51145,37 +51182,16 @@ function HeroAnnouncementBadge({
   actions,
   actionsSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   badgeClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName
 }) {
-  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$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -51184,25 +51200,48 @@ function HeroAnnouncementBadge({
       pattern,
       patternOpacity,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        badge && /* @__PURE__ */ jsxs(
-          Badge,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4 md:gap-6 lg:gap-8", children: [
+        badge && /* @__PURE__ */ jsxs(Badge, { className: cn("gap-2", badgeClassName), children: [
+          badgeIcon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex size-8 shrink-0 items-center justify-center rounded-full"
+              ),
+              children: badgeIcon
+            }
+          ),
+          typeof badge === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap", children: badge }) : badge
+        ] }),
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
           {
-            variant: "outline",
-            className: cn("mb-4 max-w-full text-sm font-normal lg:mb-10 lg:py-2 lg:pr-5 lg:pl-2", badgeClassName),
-            children: [
-              badgeIcon && /* @__PURE__ */ jsx("span", { className: cn(
-                "mr-2 flex size-8 shrink-0 items-center justify-center rounded-full",
-                getNestedCardBg(background, "accent"),
-                getNestedCardTextColor(background)
-              ), children: badgeIcon }),
-              typeof badge === "string" ? /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap", children: badge }) : badge
-            ]
+            className: cn(
+              "text-4xl leading-none font-bold tracking-tighter md:text-[7vw] lg:text-8xl",
+              headingClassName
+            ),
+            children: heading
           }
-        ),
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl leading-none font-bold tracking-tighter md:text-[7vw] lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-[2vw] 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("mt-6 flex flex-col gap-4 sm:flex-row lg:mt-10", actionsClassName), children: renderActions })
+        ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "max-w-2xl md:text-[2vw] lg:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+        /* @__PURE__ */ jsx(
+          BlockActions,
+          {
+            actions,
+            actionsSlot,
+            actionsClassName
+          }
+        )
       ] })
     }
   );
@@ -51395,13 +51434,13 @@ function HeroSimpleCenteredImage({
   actions,
   actionsSlot,
   imageSrc,
-  imageAlt = "placeholder hero",
+  imageAlt,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -51410,11 +51449,18 @@ function HeroSimpleCenteredImage({
   imageClassName,
   optixFlowConfig
 }) {
-  const renderActions = useMemo(() => {
+  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;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -51438,22 +51484,69 @@ function HeroSimpleCenteredImage({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName, contentClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-3 text-3xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-xl lg:mb-12 lg:text-2xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mb-6 flex gap-2 lg:mb-12", actionsClassName), children: renderActions })
-        ] }),
-        imageSrc && /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: cn("aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]", imageWrapperClassName), children: /* @__PURE__ */ jsx(
-          Img,
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            src: imageSrc,
-            alt: imageAlt,
-            className: cn("h-full w-full rounded-md object-cover", imageClassName),
-            optixFlowConfig
+            className: cn(
+              "flex flex-col items-center text-center",
+              contentClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "my-3 text-3xl font-bold text-balance sm:text-4xl md:my-6 lg:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-6 max-w-xl lg:mb-12 lg:text-2xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
           }
-        ) }) })
+        ),
+        imageSrc && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]",
+              imageWrapperClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: imageSrc,
+                alt: imageAlt,
+                className: cn(
+                  "h-full w-full rounded-t-2xl object-cover",
+                  imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
+          }
+        )
       ]
     }
   );
@@ -51470,7 +51563,7 @@ function HeroPlatformFeaturesGrid({
   featuresSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -51489,7 +51582,7 @@ function HeroPlatformFeaturesGrid({
         src: logoSrc,
         alt: logo.alt,
         className: cn(
-          "mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28",
+          "mx-auto mb-5 w-24 md:mb-6 md:w-28 lg:mb-7 lg:w-32",
           logo.imgClassName
         ),
         optixFlowConfig
@@ -51580,7 +51673,7 @@ function HeroPlatformFeaturesGrid({
                   children: heading
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
               renderAction
             ]
           }
@@ -51644,7 +51737,7 @@ function HeroSpiralPatternCards({
       "div",
       {
         className: cn(
-          "mt-16 flex flex-col items-center justify-center lg:mt-32",
+          "mt-16 flex flex-col items-center justify-center lg:mt-20",
           imagesClassName
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
@@ -51901,11 +51994,12 @@ function HeroSplitGeometricShapes({
   images,
   imagesSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
+  actionsClassName,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -51935,34 +52029,6 @@ function HeroSplitGeometricShapes({
   const handleLightboxClose = useCallback(() => {
     setLightboxOpen(false);
   }, []);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", children: 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$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -52038,54 +52104,69 @@ function HeroSplitGeometricShapes({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center"), children: /* @__PURE__ */ jsx("div", { className: cn("2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg", getNestedCardBg(background)), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-0 md:gap-8 lg:grid-cols-2", children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "container flex flex-col items-center px-10 py-8 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left",
-                contentClassName
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center"), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-muted"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-0 md:gap-8 lg:grid-cols-2", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "container flex flex-col items-center px-10 py-8 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left",
+                    contentClassName
+                  ),
+                  children: [
+                    badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { children: badgeText }) : badgeText),
+                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                      "h1",
+                      {
+                        className: cn(
+                          "my-6 text-4xl font-bold text-balance lg:text-6xl",
+                          headingClassName
+                        ),
+                        children: heading
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "h1",
+                      {
+                        className: cn(
+                          "my-6 text-4xl font-bold text-balance lg:text-6xl",
+                          headingClassName
+                        ),
+                        children: heading
+                      }
+                    )),
+                    description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mb-8 max-w-xl lg:text-xl text-balance",
+                          descriptionClassName
+                        ),
+                        children: description
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+                    /* @__PURE__ */ jsx(
+                      BlockActions,
+                      {
+                        actions,
+                        actionsSlot,
+                        actionsClassName
+                      }
+                    )
+                  ]
+                }
               ),
-              children: [
-                badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { children: badgeText }) : badgeText),
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                  "h1",
-                  {
-                    className: cn(
-                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "h1",
-                  {
-                    className: cn(
-                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                )),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "mb-8 max-w-xl lg:text-xl",
-                      descriptionClassName
-                    ),
-                    children: description
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-                renderActions
-              ]
-            }
-          ),
-          renderImages
-        ] }) }) }),
+              renderImages
+            ] })
+          }
+        ) }),
         lightboxOpen && /* @__PURE__ */ jsx(
           Lightbox,
           {
@@ -52126,11 +52207,11 @@ function HeroCommunitySurveyCta({
   rightOverlayImage,
   imagesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   announcementClassName,
   headingClassName,
   descriptionClassName,
@@ -52140,29 +52221,22 @@ function HeroCommunitySurveyCta({
 }) {
   const renderAnnouncement = useMemo(() => {
     if (announcementSlot) return announcementSlot;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsx(Pressable, { href: announcementHref, children: /* @__PURE__ */ jsxs(
+      Badge,
       {
-        href: announcementHref,
         className: cn(
-          "group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm",
+          "group mx-auto w-fit gap-3 px-5 py-2 text-sm h-fit",
           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("span", { className: "font-semibold group-hover:underline", children: announcementLinkText })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium", children: announcementPrimary }),
+            announcementSecondary
+          ] }),
+          announcementLinkText ? /* @__PURE__ */ jsx("span", { className: "font-semibold pl-4 ml-4 border-l", children: announcementLinkText }) : null
         ]
       }
-    );
+    ) });
   }, [
     announcementSlot,
     announcementHref,
@@ -52210,7 +52284,7 @@ function HeroCommunitySurveyCta({
     rightOverlayImage,
     optixFlowConfig
   ]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -52219,14 +52293,14 @@ function HeroCommunitySurveyCta({
       patternOpacity,
       className,
       containerClassName,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-12", children: [
+        /* @__PURE__ */ jsxs("div", { 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",
+                "max-w-4xl text-4xl font-semibold text-balance lg:text-6xl",
                 headingClassName
               ),
               children: heading
@@ -52236,7 +52310,7 @@ function HeroCommunitySurveyCta({
             "p",
             {
               className: cn(
-                "mx-auto max-w-4xl lg:text-xl",
+                "max-w-4xl lg:text-xl text-balance",
                 descriptionClassName
               ),
               children: description
@@ -52251,11 +52325,8 @@ function HeroCommunitySurveyCta({
             }
           )
         ] }),
-        /* @__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%" }),
-          renderImages
-        ] })
-      ]
+        /* @__PURE__ */ jsx("div", { className: "relative", children: renderImages })
+      ] })
     }
   );
 }
@@ -52269,7 +52340,6 @@ function HeroMarketplaceScatteredImages({
   taglineSlot,
   images,
   imagesSlot,
-  showGridPattern = true,
   background,
   spacing = "py-32 md:py-32",
   pattern,
@@ -52336,10 +52406,7 @@ function HeroMarketplaceScatteredImages({
         children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3", children: columns.map((colImages, colIndex) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "grid gap-3",
-              colIndex === 2 && "hidden md:grid"
-            ),
+            className: cn("grid gap-3", colIndex === 2 && "hidden md:grid"),
             children: colImages.map((image, imgIndex) => {
               const height = heightPatterns[colIndex][imgIndex % heightPatterns[colIndex].length];
               const direction = colIndex % 2 === 0 ? "up" : "down";
@@ -52408,7 +52475,7 @@ function HeroMarketplaceScatteredImages({
           "div",
           {
             className: cn(
-              "relative mx-auto max-w-xl py-10 text-center flex flex-col gap-6 items-center",
+              "relative mx-auto max-w-xl py-0 md:py-10 text-center flex flex-col gap-6 items-center",
               contentClassName
             ),
             children: [
@@ -52472,34 +52539,6 @@ function HeroBadgeShadowOverlay({
   headingClassName,
   actionsClassName
 }) {
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: 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$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -52510,7 +52549,7 @@ function HeroBadgeShadowOverlay({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-screen h-full justify-center items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-10 text-center px-6 max-full md:max-w-lg", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-screen h-full justify-center items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 text-center px-6 max-full md:max-w-lg", children: [
           (announcementBadge || announcementText) && /* @__PURE__ */ jsxs(
             Pressable,
             {
@@ -52530,7 +52569,7 @@ function HeroBadgeShadowOverlay({
             "h1",
             {
               className: cn(
-                "text-4xl font-semibold lg:text-8xl text-white text-balance text-shadow-xl text-center",
+                "text-4xl font-semibold lg:text-8xl text-white text-balance text-shadow-2xl text-center",
                 headingClassName
               ),
               children: heading
@@ -52546,7 +52585,14 @@ function HeroBadgeShadowOverlay({
               children: description
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
         ] }) }),
         backgroundImageUrl && /* @__PURE__ */ jsx(
           Img,
@@ -52680,18 +52726,17 @@ function HeroVideoBackgroundDark({
 }
 function HeroGridPatternEfficiency({
   heading,
-  highlightedWord = "efficiency.",
   description,
   action,
   actionSlot,
-  actionSubtext = "No credit card required.",
+  actionSubtext,
   showGridPattern = true,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -52700,7 +52745,14 @@ function HeroGridPatternEfficiency({
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: btnClassName, ...pressableProps } = action;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: btnClassName,
+      ...pressableProps
+    } = action;
     return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: btnClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       icon,
       label,
@@ -52709,14 +52761,29 @@ function HeroGridPatternEfficiency({
   }, [actionSlot, action]);
   const renderHeading = useMemo(() => {
     if (heading) {
-      return typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: heading });
+      return typeof heading === "string" ? /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: cn(
+            "text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug text-balance",
+            headingClassName
+          ),
+          children: heading
+        }
+      ) : /* @__PURE__ */ jsx(
+        "h1",
+        {
+          className: cn(
+            "text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug text-balance",
+            headingClassName
+          ),
+          children: heading
+        }
+      );
+    } else {
+      return null;
     }
-    return /* @__PURE__ */ jsxs("h1", { className: cn("text-5xl leading-tight font-extrabold lg:text-8xl lg:leading-snug", headingClassName), children: [
-      "Less complexity. ",
-      /* @__PURE__ */ jsx("span", { className: "mr-6", children: "More" }),
-      /* @__PURE__ */ jsx("span", { className: cn("relative inline-block before:absolute before:top-0 before:-right-2 before:-bottom-2 before:-left-4 before:-z-10 before:rounded-lg", `before:${getTextColor(background, "muted")}/15`), children: highlightedWord })
-    ] });
-  }, [heading, highlightedWord, headingClassName]);
+  }, [heading, headingClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -52724,15 +52791,34 @@ function HeroGridPatternEfficiency({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("relative max-w-5xl", contentClassName), children: [
         showGridPattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
         renderHeading,
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-7 text-xl font-light lg:text-3xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex w-fit flex-col gap-2.5 text-center", actionClassName), children: [
-          renderAction,
-          actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: actionSubtext }) : actionSubtext)
-        ] })
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-7 text-xl font-light lg:text-3xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-12 flex w-fit flex-col gap-2.5 text-center",
+              actionClassName
+            ),
+            children: [
+              renderAction,
+              actionSubtext && (typeof actionSubtext === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: actionSubtext }) : actionSubtext)
+            ]
+          }
+        )
       ] }) })
     }
   );
@@ -59646,7 +59732,7 @@ function HeroEventRegistration({
   locationSlot,
   background,
   containerClassName = "px-6  sm:px-0 md:px-0 lg:px-0",
-  spacing = "py-20 md:py-32",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -59665,34 +59751,6 @@ function HeroEventRegistration({
       badgeText
     ] });
   }, [badgeSlot, badgeIcon, badgeText]);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), children: 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$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions, actionsClassName]);
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
@@ -59768,7 +59826,14 @@ function HeroEventRegistration({
             }
           )),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions,
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          ),
           renderStats
         ] }),
         renderImage
@@ -83215,7 +83280,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo438 } = React23;
+var { useMemo: useMemo436 } = React23;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -83283,7 +83348,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo438(() => {
+  const renderCloseButton = useMemo436(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -83297,12 +83362,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo438(() => {
+  const renderHeader = useMemo436(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo438(() => {
+  const renderForm = useMemo436(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -83364,7 +83429,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo439 } = React23;
+var { useMemo: useMemo437 } = React23;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -83441,7 +83506,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo439(() => {
+  const renderImage = useMemo437(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsx(
@@ -83454,7 +83519,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo439(() => {
+  const renderCloseButton = useMemo437(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
       Pressable,
@@ -83470,7 +83535,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo439(() => {
+  const renderForm = useMemo437(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -83533,7 +83598,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo439(() => {
+  const renderFooter = useMemo437(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
     return /* @__PURE__ */ jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -83653,7 +83718,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo440 } = React23;
+var { useMemo: useMemo438 } = React23;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -83736,7 +83801,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo440(() => {
+  const renderLogo = useMemo438(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -83750,7 +83815,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo440(() => {
+  const renderHeader = useMemo438(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -83760,7 +83825,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo440(() => {
+  const renderForm = useMemo438(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -83808,7 +83873,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo440(() => {
+  const renderLegal = useMemo438(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -83822,7 +83887,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo440(() => {
+  const renderImage = useMemo438(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsx(