@opensite/ui 3.7.3 → 3.7.5

package/dist/hero-ai-powered-carousel.cjs

@@ -755,27 +755,27 @@ function HeroAiPoweredCarousel({
                   ]
                 }
               ),
-              (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
+              (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex justify-start", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "md" }) }),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h1",
                 {
                   className: cn(
-                    "mt-4 md:mt-10 mb-4 text-3xl font-semibold lg:text-5xl text-balance",
+                    "text-3xl font-semibold lg:text-5xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
                   className: cn(
-                    "mx-auto lg:text-lg text-balance",
+                    "mx-auto text-base lg:text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {
@@ -837,7 +837,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -865,7 +866,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -892,7 +894,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }

package/dist/hero-ai-powered-carousel.js

@@ -730,27 +730,27 @@ function HeroAiPoweredCarousel({
                   ]
                 }
               ),
-              (logo || logoSlot) && /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
+              (logo || logoSlot) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex justify-start", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "md" }) }),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h1",
                 {
                   className: cn(
-                    "mt-4 md:mt-10 mb-4 text-3xl font-semibold lg:text-5xl text-balance",
+                    "text-3xl font-semibold lg:text-5xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
                   className: cn(
-                    "mx-auto lg:text-lg text-balance",
+                    "mx-auto text-base lg:text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {
@@ -812,7 +812,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -840,7 +841,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -867,7 +869,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }

package/dist/hero-badge-shadow-overlay.cjs

@@ -627,7 +627,13 @@ function HeroBadgeShadowOverlay({
               ]
             }
           ),
-          (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "xl" }) }),
+          (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("mt-6 md:mt-12 flex justify-center", logoClassName),
+              children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "lg" })
+            }
+          ),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
@@ -637,7 +643,7 @@ function HeroBadgeShadowOverlay({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -647,7 +653,7 @@ function HeroBadgeShadowOverlay({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          ) : description),
           /* @__PURE__ */ jsxRuntime.jsx(
             BlockActions,
             {

package/dist/hero-badge-shadow-overlay.js

@@ -606,7 +606,13 @@ function HeroBadgeShadowOverlay({
               ]
             }
           ),
-          (logo || logoSlot) && /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "xl" }) }),
+          (logo || logoSlot) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("mt-6 md:mt-12 flex justify-center", logoClassName),
+              children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "lg" })
+            }
+          ),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {
@@ -616,7 +622,7 @@ function HeroBadgeShadowOverlay({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
@@ -626,7 +632,7 @@ function HeroBadgeShadowOverlay({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          ) : description),
           /* @__PURE__ */ jsx(
             BlockActions,
             {

package/dist/hero-centered-image-grid.cjs

@@ -565,18 +565,18 @@ function HeroCenteredImageGrid({
               imageGridClassName
             ),
             children: [
-              gridImages?.[0] && /* @__PURE__ */ jsxRuntime.jsx(
+              gridImages?.[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
                 img.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",
+                    "block h-full max-h-[500px] w-full object-cover dark:invert",
                     gridImages[0].className
                   ),
                   optixFlowConfig
                 }
-              ),
+              ) }),
               gridImages?.[1] && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative md:col-span-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   img.Img,
@@ -584,7 +584,7 @@ function HeroCenteredImageGrid({
                     src: gridImages[1].src,
                     alt: gridImages[1].alt,
                     className: cn(
-                      "h-full max-h-[500px] w-full object-cover dark:invert",
+                      "block h-full max-h-[500px] w-full object-cover dark:invert",
                       gridImages[1].className
                     ),
                     optixFlowConfig

package/dist/hero-centered-image-grid.js

@@ -559,18 +559,18 @@ function HeroCenteredImageGrid({
               imageGridClassName
             ),
             children: [
-              gridImages?.[0] && /* @__PURE__ */ jsx(
+              gridImages?.[0] && /* @__PURE__ */ jsx("div", { className: "relative md:col-span-3", children: /* @__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",
+                    "block h-full max-h-[500px] w-full object-cover dark:invert",
                     gridImages[0].className
                   ),
                   optixFlowConfig
                 }
-              ),
+              ) }),
               gridImages?.[1] && /* @__PURE__ */ jsxs("div", { className: "relative md:col-span-2", children: [
                 /* @__PURE__ */ jsx(
                   Img,
@@ -578,7 +578,7 @@ function HeroCenteredImageGrid({
                     src: gridImages[1].src,
                     alt: gridImages[1].alt,
                     className: cn(
-                      "h-full max-h-[500px] w-full object-cover dark:invert",
+                      "block h-full max-h-[500px] w-full object-cover dark:invert",
                       gridImages[1].className
                     ),
                     optixFlowConfig

package/dist/hero-crm-streamlined.cjs

@@ -526,7 +526,7 @@ function HeroCrmStreamlined({
   patternOpacity,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
+  spacing = "hero",
   contentClassName,
   taglineClassName,
   headingClassName,
@@ -552,21 +552,24 @@ function HeroCrmStreamlined({
           tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
-              className: cn("text-base font-semibold", taglineClassName),
+              className: cn(
+                "text-base font-medium tracking-wider opacity-70 pb-6 uppercase",
+                taglineClassName
+              ),
               children: tagline
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
-          (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
+          (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 mt-4", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
               className: cn(
-                "mb-2 text-4xl leading-snug! font-semibold text-balance lg:text-5xl",
+                "mb-2 text-4xl font-semibold text-pretty lg:text-5xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -576,7 +579,7 @@ function HeroCrmStreamlined({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          ) : description),
           /* @__PURE__ */ jsxRuntime.jsx(
             BlockActions,
             {
@@ -589,7 +592,7 @@ function HeroCrmStreamlined({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn("relative basis-[42%] py-9 md:py-16", imageClassName),
+            className: cn("relative basis-[42%] py-2 md:py-16", imageClassName),
             children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 img.Img,
@@ -600,14 +603,15 @@ function HeroCrmStreamlined({
                     "relative z-20 h-full w-full object-cover object-center",
                     image.className
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn(
-                    "absolute top-0 left-25 z-10 bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl"
+                    "absolute top-0 left-25 z-10 hidden bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl md:block"
                   )
                 }
               )

package/dist/hero-crm-streamlined.js

@@ -520,7 +520,7 @@ function HeroCrmStreamlined({
   patternOpacity,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
+  spacing = "hero",
   contentClassName,
   taglineClassName,
   headingClassName,
@@ -546,21 +546,24 @@ function HeroCrmStreamlined({
           tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
-              className: cn("text-base font-semibold", taglineClassName),
+              className: cn(
+                "text-base font-medium tracking-wider opacity-70 pb-6 uppercase",
+                taglineClassName
+              ),
               children: tagline
             }
           ) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
-          (logo || logoSlot) && /* @__PURE__ */ jsx("div", { className: cn("mb-4", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
+          (logo || logoSlot) && /* @__PURE__ */ jsx("div", { className: cn("mb-2 mt-4", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {
               className: cn(
-                "mb-2 text-4xl leading-snug! font-semibold text-balance lg:text-5xl",
+                "mb-2 text-4xl font-semibold text-pretty lg:text-5xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
@@ -570,7 +573,7 @@ function HeroCrmStreamlined({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          ) : description),
           /* @__PURE__ */ jsx(
             BlockActions,
             {
@@ -583,7 +586,7 @@ function HeroCrmStreamlined({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn("relative basis-[42%] py-9 md:py-16", imageClassName),
+            className: cn("relative basis-[42%] py-2 md:py-16", imageClassName),
             children: imageSlot ? imageSlot : image ? /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: [
               /* @__PURE__ */ jsx(
                 Img,
@@ -594,14 +597,15 @@ function HeroCrmStreamlined({
                     "relative z-20 h-full w-full object-cover object-center",
                     image.className
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               ),
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: cn(
-                    "absolute top-0 left-25 z-10 bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl"
+                    "absolute top-0 left-25 z-10 hidden bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl md:block"
                   )
                 }
               )

package/dist/hero-pattern-logo-tech-stack.cjs

@@ -417,6 +417,10 @@ function HeroPatternLogoTechStack({
   techLogosClassName,
   optixFlowConfig
 }) {
+  const logoOptixFlowConfig = React.useMemo(
+    () => optixFlowConfig ? { ...optixFlowConfig, objectFit: "contain" } : optixFlowConfig,
+    [optixFlowConfig]
+  );
   const renderLogo = React.useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
@@ -427,10 +431,10 @@ function HeroPatternLogoTechStack({
         src: logoSrc,
         alt: logo.alt,
         className: cn("h-16 w-auto object-contain", logo.imgClassName),
-        optixFlowConfig
+        optixFlowConfig: logoOptixFlowConfig
       }
     ) });
-  }, [logoSlot, logo, optixFlowConfig]);
+  }, [logoSlot, logo, logoOptixFlowConfig]);
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -487,7 +491,7 @@ function HeroPatternLogoTechStack({
               {
                 href: techLogo.href,
                 className: cn(
-                  "group flex w-auto h-12 md:h-10 items-center justify-center max-w-full md:max-w-30 max-h-12 md:max-h-10 min-h-12 md:min-h-10 p-2 md:p-1",
+                  "group flex shrink-0 items-center justify-center overflow-visible",
                   techLogo.className
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -496,10 +500,10 @@ function HeroPatternLogoTechStack({
                     src: techLogoSrc,
                     alt: techLogo.alt,
                     className: cn(
-                      "h-full w-auto object-contain",
+                      "block h-6 max-h-6 w-auto max-w-none object-contain",
                       techLogo.imgClassName
                     ),
-                    optixFlowConfig
+                    optixFlowConfig: logoOptixFlowConfig
                   }
                 )
               },
@@ -514,7 +518,7 @@ function HeroPatternLogoTechStack({
     techLogos,
     techStackLabel,
     techLogosClassName,
-    optixFlowConfig
+    logoOptixFlowConfig
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,

package/dist/hero-pattern-logo-tech-stack.js

@@ -411,6 +411,10 @@ function HeroPatternLogoTechStack({
   techLogosClassName,
   optixFlowConfig
 }) {
+  const logoOptixFlowConfig = useMemo(
+    () => optixFlowConfig ? { ...optixFlowConfig, objectFit: "contain" } : optixFlowConfig,
+    [optixFlowConfig]
+  );
   const renderLogo = useMemo(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
@@ -421,10 +425,10 @@ function HeroPatternLogoTechStack({
         src: logoSrc,
         alt: logo.alt,
         className: cn("h-16 w-auto object-contain", logo.imgClassName),
-        optixFlowConfig
+        optixFlowConfig: logoOptixFlowConfig
       }
     ) });
-  }, [logoSlot, logo, optixFlowConfig]);
+  }, [logoSlot, logo, logoOptixFlowConfig]);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -481,7 +485,7 @@ function HeroPatternLogoTechStack({
               {
                 href: techLogo.href,
                 className: cn(
-                  "group flex w-auto h-12 md:h-10 items-center justify-center max-w-full md:max-w-30 max-h-12 md:max-h-10 min-h-12 md:min-h-10 p-2 md:p-1",
+                  "group flex shrink-0 items-center justify-center overflow-visible",
                   techLogo.className
                 ),
                 children: /* @__PURE__ */ jsx(
@@ -490,10 +494,10 @@ function HeroPatternLogoTechStack({
                     src: techLogoSrc,
                     alt: techLogo.alt,
                     className: cn(
-                      "h-full w-auto object-contain",
+                      "block h-6 max-h-6 w-auto max-w-none object-contain",
                       techLogo.imgClassName
                     ),
-                    optixFlowConfig
+                    optixFlowConfig: logoOptixFlowConfig
                   }
                 )
               },
@@ -508,7 +512,7 @@ function HeroPatternLogoTechStack({
     techLogos,
     techStackLabel,
     techLogosClassName,
-    optixFlowConfig
+    logoOptixFlowConfig
   ]);
   return /* @__PURE__ */ jsx(
     Section,

package/dist/registry.cjs

@@ -50680,18 +50680,18 @@ function HeroCenteredImageGrid({
               imageGridClassName
             ),
             children: [
-              gridImages?.[0] && /* @__PURE__ */ jsxRuntime.jsx(
+              gridImages?.[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
                 img$1.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",
+                    "block h-full max-h-[500px] w-full object-cover dark:invert",
                     gridImages[0].className
                   ),
                   optixFlowConfig
                 }
-              ),
+              ) }),
               gridImages?.[1] && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative md:col-span-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   img$1.Img,
@@ -50699,7 +50699,7 @@ function HeroCenteredImageGrid({
                     src: gridImages[1].src,
                     alt: gridImages[1].alt,
                     className: cn(
-                      "h-full max-h-[500px] w-full object-cover dark:invert",
+                      "block h-full max-h-[500px] w-full object-cover dark:invert",
                       gridImages[1].className
                     ),
                     optixFlowConfig
@@ -51143,6 +51143,10 @@ function HeroPatternLogoTechStack({
   techLogosClassName,
   optixFlowConfig
 }) {
+  const logoOptixFlowConfig = React30.useMemo(
+    () => optixFlowConfig ? { ...optixFlowConfig, objectFit: "contain" } : optixFlowConfig,
+    [optixFlowConfig]
+  );
   const renderLogo = React30.useMemo(() => {
     if (logoSlot2) return logoSlot2;
     if (!logo) return null;
@@ -51153,10 +51157,10 @@ function HeroPatternLogoTechStack({
         src: logoSrc,
         alt: logo.alt,
         className: cn("h-16 w-auto object-contain", logo.imgClassName),
-        optixFlowConfig
+        optixFlowConfig: logoOptixFlowConfig
       }
     ) });
-  }, [logoSlot2, logo, optixFlowConfig]);
+  }, [logoSlot2, logo, logoOptixFlowConfig]);
   const renderActions = React30.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -51213,7 +51217,7 @@ function HeroPatternLogoTechStack({
               {
                 href: techLogo.href,
                 className: cn(
-                  "group flex w-auto h-12 md:h-10 items-center justify-center max-w-full md:max-w-30 max-h-12 md:max-h-10 min-h-12 md:min-h-10 p-2 md:p-1",
+                  "group flex shrink-0 items-center justify-center overflow-visible",
                   techLogo.className
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -51222,10 +51226,10 @@ function HeroPatternLogoTechStack({
                     src: techLogoSrc,
                     alt: techLogo.alt,
                     className: cn(
-                      "h-full w-auto object-contain",
+                      "block h-6 max-h-6 w-auto max-w-none object-contain",
                       techLogo.imgClassName
                     ),
-                    optixFlowConfig
+                    optixFlowConfig: logoOptixFlowConfig
                   }
                 )
               },
@@ -51240,7 +51244,7 @@ function HeroPatternLogoTechStack({
     techLogos,
     techStackLabel,
     techLogosClassName,
-    optixFlowConfig
+    logoOptixFlowConfig
   ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -52851,7 +52855,13 @@ function HeroBadgeShadowOverlay({
               ]
             }
           ),
-          (logo || logoSlot2) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "xl" }) }),
+          (logo || logoSlot2) && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("mt-6 md:mt-12 flex justify-center", logoClassName),
+              children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "lg" })
+            }
+          ),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
@@ -52861,7 +52871,7 @@ function HeroBadgeShadowOverlay({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -52871,7 +52881,7 @@ function HeroBadgeShadowOverlay({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          ) : description),
           /* @__PURE__ */ jsxRuntime.jsx(
             BlockActions,
             {
@@ -54408,27 +54418,27 @@ function HeroAiPoweredCarousel({
                   ]
                 }
               ),
-              (logo || logoSlot2) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "lg" }) }),
+              (logo || logoSlot2) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex justify-start", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "md" }) }),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "h1",
                 {
                   className: cn(
-                    "mt-4 md:mt-10 mb-4 text-3xl font-semibold lg:text-5xl text-balance",
+                    "text-3xl font-semibold lg:text-5xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
                   className: cn(
-                    "mx-auto lg:text-lg text-balance",
+                    "mx-auto text-base lg:text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {
@@ -54490,7 +54500,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -54518,7 +54529,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -54545,7 +54557,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -55114,7 +55127,7 @@ function HeroCrmStreamlined({
   patternOpacity,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
+  spacing = "hero",
   contentClassName,
   taglineClassName,
   headingClassName,
@@ -55140,21 +55153,24 @@ function HeroCrmStreamlined({
           tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
-              className: cn("text-base font-semibold", taglineClassName),
+              className: cn(
+                "text-base font-medium tracking-wider opacity-70 pb-6 uppercase",
+                taglineClassName
+              ),
               children: tagline
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
-          (logo || logoSlot2) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "lg" }) }),
+          (logo || logoSlot2) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 mt-4", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "lg" }) }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
               className: cn(
-                "mb-2 text-4xl leading-snug! font-semibold text-balance lg:text-5xl",
+                "mb-2 text-4xl font-semibold text-pretty lg:text-5xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
@@ -55164,7 +55180,7 @@ function HeroCrmStreamlined({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          ) : description),
           /* @__PURE__ */ jsxRuntime.jsx(
             BlockActions,
             {
@@ -55177,7 +55193,7 @@ function HeroCrmStreamlined({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn("relative basis-[42%] py-9 md:py-16", imageClassName),
+            className: cn("relative basis-[42%] py-2 md:py-16", imageClassName),
             children: imageSlot2 ? imageSlot2 : image ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 img$1.Img,
@@ -55188,14 +55204,15 @@ function HeroCrmStreamlined({
                     "relative z-20 h-full w-full object-cover object-center",
                     image.className
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn(
-                    "absolute top-0 left-25 z-10 bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl"
+                    "absolute top-0 left-25 z-10 hidden bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl md:block"
                   )
                 }
               )

package/dist/registry.js

@@ -50640,18 +50640,18 @@ function HeroCenteredImageGrid({
               imageGridClassName
             ),
             children: [
-              gridImages?.[0] && /* @__PURE__ */ jsx(
+              gridImages?.[0] && /* @__PURE__ */ jsx("div", { className: "relative md:col-span-3", children: /* @__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",
+                    "block h-full max-h-[500px] w-full object-cover dark:invert",
                     gridImages[0].className
                   ),
                   optixFlowConfig
                 }
-              ),
+              ) }),
               gridImages?.[1] && /* @__PURE__ */ jsxs("div", { className: "relative md:col-span-2", children: [
                 /* @__PURE__ */ jsx(
                   Img,
@@ -50659,7 +50659,7 @@ function HeroCenteredImageGrid({
                     src: gridImages[1].src,
                     alt: gridImages[1].alt,
                     className: cn(
-                      "h-full max-h-[500px] w-full object-cover dark:invert",
+                      "block h-full max-h-[500px] w-full object-cover dark:invert",
                       gridImages[1].className
                     ),
                     optixFlowConfig
@@ -51103,6 +51103,10 @@ function HeroPatternLogoTechStack({
   techLogosClassName,
   optixFlowConfig
 }) {
+  const logoOptixFlowConfig = useMemo(
+    () => optixFlowConfig ? { ...optixFlowConfig, objectFit: "contain" } : optixFlowConfig,
+    [optixFlowConfig]
+  );
   const renderLogo = useMemo(() => {
     if (logoSlot2) return logoSlot2;
     if (!logo) return null;
@@ -51113,10 +51117,10 @@ function HeroPatternLogoTechStack({
         src: logoSrc,
         alt: logo.alt,
         className: cn("h-16 w-auto object-contain", logo.imgClassName),
-        optixFlowConfig
+        optixFlowConfig: logoOptixFlowConfig
       }
     ) });
-  }, [logoSlot2, logo, optixFlowConfig]);
+  }, [logoSlot2, logo, logoOptixFlowConfig]);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -51173,7 +51177,7 @@ function HeroPatternLogoTechStack({
               {
                 href: techLogo.href,
                 className: cn(
-                  "group flex w-auto h-12 md:h-10 items-center justify-center max-w-full md:max-w-30 max-h-12 md:max-h-10 min-h-12 md:min-h-10 p-2 md:p-1",
+                  "group flex shrink-0 items-center justify-center overflow-visible",
                   techLogo.className
                 ),
                 children: /* @__PURE__ */ jsx(
@@ -51182,10 +51186,10 @@ function HeroPatternLogoTechStack({
                     src: techLogoSrc,
                     alt: techLogo.alt,
                     className: cn(
-                      "h-full w-auto object-contain",
+                      "block h-6 max-h-6 w-auto max-w-none object-contain",
                       techLogo.imgClassName
                     ),
-                    optixFlowConfig
+                    optixFlowConfig: logoOptixFlowConfig
                   }
                 )
               },
@@ -51200,7 +51204,7 @@ function HeroPatternLogoTechStack({
     techLogos,
     techStackLabel,
     techLogosClassName,
-    optixFlowConfig
+    logoOptixFlowConfig
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -52811,7 +52815,13 @@ function HeroBadgeShadowOverlay({
               ]
             }
           ),
-          (logo || logoSlot2) && /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "xl" }) }),
+          (logo || logoSlot2) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("mt-6 md:mt-12 flex justify-center", logoClassName),
+              children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "lg" })
+            }
+          ),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {
@@ -52821,7 +52831,7 @@ function HeroBadgeShadowOverlay({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
@@ -52831,7 +52841,7 @@ function HeroBadgeShadowOverlay({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          ) : description),
           /* @__PURE__ */ jsx(
             BlockActions,
             {
@@ -54368,27 +54378,27 @@ function HeroAiPoweredCarousel({
                   ]
                 }
               ),
-              (logo || logoSlot2) && /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex justify-center", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "lg" }) }),
+              (logo || logoSlot2) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex justify-start", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "md" }) }),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h1",
                 {
                   className: cn(
-                    "mt-4 md:mt-10 mb-4 text-3xl font-semibold lg:text-5xl text-balance",
+                    "text-3xl font-semibold lg:text-5xl text-balance",
                     headingClassName
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
                   className: cn(
-                    "mx-auto lg:text-lg text-balance",
+                    "mx-auto text-base lg:text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              ) : description),
               /* @__PURE__ */ jsx(
                 BlockActions,
                 {
@@ -54450,7 +54460,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -54478,7 +54489,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -54505,7 +54517,8 @@ function HeroAiPoweredCarousel({
                       "rounded-lg shadow-lg",
                       image.className
                     ),
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 ) }, index)) })
               }
@@ -55074,7 +55087,7 @@ function HeroCrmStreamlined({
   patternOpacity,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
+  spacing = "hero",
   contentClassName,
   taglineClassName,
   headingClassName,
@@ -55100,21 +55113,24 @@ function HeroCrmStreamlined({
           tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
-              className: cn("text-base font-semibold", taglineClassName),
+              className: cn(
+                "text-base font-medium tracking-wider opacity-70 pb-6 uppercase",
+                taglineClassName
+              ),
               children: tagline
             }
           ) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
-          (logo || logoSlot2) && /* @__PURE__ */ jsx("div", { className: cn("mb-4", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "lg" }) }),
+          (logo || logoSlot2) && /* @__PURE__ */ jsx("div", { className: cn("mb-2 mt-4", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot: logoSlot2, size: "lg" }) }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {
               className: cn(
-                "mb-2 text-4xl leading-snug! font-semibold text-balance lg:text-5xl",
+                "mb-2 text-4xl font-semibold text-pretty lg:text-5xl",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
@@ -55124,7 +55140,7 @@ function HeroCrmStreamlined({
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          ) : description),
           /* @__PURE__ */ jsx(
             BlockActions,
             {
@@ -55137,7 +55153,7 @@ function HeroCrmStreamlined({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn("relative basis-[42%] py-9 md:py-16", imageClassName),
+            className: cn("relative basis-[42%] py-2 md:py-16", imageClassName),
             children: imageSlot2 ? imageSlot2 : image ? /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: [
               /* @__PURE__ */ jsx(
                 Img,
@@ -55148,14 +55164,15 @@ function HeroCrmStreamlined({
                     "relative z-20 h-full w-full object-cover object-center",
                     image.className
                   ),
-                  optixFlowConfig
+                  optixFlowConfig,
+                  loading: "eager"
                 }
               ),
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: cn(
-                    "absolute top-0 left-25 z-10 bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl"
+                    "absolute top-0 left-25 z-10 hidden bg-muted aspect-[1.378254211/1] h-full w-225 rounded-xl md:block"
                   )
                 }
               )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.7.3",
+  "version": "3.7.5",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",