@opensite/ui 3.7.4 → 3.7.5

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-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,

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,

package/package.json

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