@opensite/ui 3.7.5 → 3.7.7

package/dist/carousel-icon-tabs.d.ts

@@ -104,6 +104,10 @@ interface CarouselIconTabsProps {
      * Background style for the section
      */
     background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Vertical spacing for the section
      */
@@ -152,6 +156,6 @@ interface CarouselIconTabsProps {
  * />
  * ```
  */
-declare function CarouselIconTabs({ sectionId, heading, badge, sections, sectionsSlot, headerSlot, className, headerClassName, headingClassName, badgeClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, tabsClassName, tabClassName, controlsClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselIconTabsProps): React.JSX.Element;
+declare function CarouselIconTabs({ sectionId, heading, badge, sections, sectionsSlot, headerSlot, className, headerClassName, headingClassName, badgeClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, tabsClassName, tabClassName, controlsClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselIconTabsProps): React.JSX.Element;
 
 export { type CarouselIconTabItem, CarouselIconTabs, type CarouselIconTabsProps };

package/dist/carousel-icon-tabs.js

@@ -645,7 +645,8 @@ function CarouselIconTabs({
   tabClassName,
   controlsClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity,
   patternClassName,
@@ -751,7 +752,7 @@ function CarouselIconTabs({
           /* @__PURE__ */ jsxs("div", { className: "mt-8 flex cursor-pointer flex-col gap-2 md:hidden", children: [
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
             /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: item.title }),
-            /* @__PURE__ */ jsx("div", { className: "text-lg text-muted-foreground", children: item.text })
+            /* @__PURE__ */ jsx("div", { className: "text-base", children: item.text })
           ] })
         ]
       },
@@ -786,8 +787,8 @@ function CarouselIconTabs({
                 "div",
                 {
                   className: cn(
-                    "text-lg hover:text-muted-foreground",
-                    index + 1 === current ? "text-muted-foreground" : "text-muted-foreground/50"
+                    "text-lg hover:opacity-100",
+                    index + 1 === current ? "opacity-100" : "opacity-70"
                   ),
                   children: section.text
                 }
@@ -809,6 +810,7 @@ function CarouselIconTabs({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: [
         headerContent,
         /* @__PURE__ */ jsxs(

package/dist/carousel-progress-slider.cjs

@@ -608,7 +608,7 @@ function CarouselProgressSlider({
                     {
                       value: slide.id,
                       className: cn("absolute inset-0", slide.className),
-                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square md:aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
                         img.Img,
                         {
                           src: slide.image,
@@ -617,7 +617,8 @@ function CarouselProgressSlider({
                             "h-full w-full object-cover",
                             slide.imageClassName
                           ),
-                          optixFlowConfig
+                          optixFlowConfig,
+                          loading: "eager"
                         }
                       ) })
                     },

package/dist/carousel-progress-slider.js

@@ -587,7 +587,7 @@ function CarouselProgressSlider({
                     {
                       value: slide.id,
                       className: cn("absolute inset-0", slide.className),
-                      children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+                      children: /* @__PURE__ */ jsx("div", { className: "aspect-square md:aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
                         Img,
                         {
                           src: slide.image,
@@ -596,7 +596,8 @@ function CarouselProgressSlider({
                             "h-full w-full object-cover",
                             slide.imageClassName
                           ),
-                          optixFlowConfig
+                          optixFlowConfig,
+                          loading: "eager"
                         }
                       ) })
                     },

package/dist/carousel-scale-focus.cjs

@@ -719,7 +719,7 @@ function CarouselScaleFocus({
             ),
             src: img$1.src,
             alt: img$1.alt,
-            loading: "lazy",
+            loading: "eager",
             optixFlowConfig
           }
         )

package/dist/carousel-scale-focus.js

@@ -695,7 +695,7 @@ function CarouselScaleFocus({
             ),
             src: img.src,
             alt: img.alt,
-            loading: "lazy",
+            loading: "eager",
             optixFlowConfig
           }
         )

package/dist/carousel-scrolling-feature-showcase.cjs

@@ -529,7 +529,8 @@ function CarouselScrollingFeatureShowcase({
                             "h-full w-full object-cover",
                             activeFeatureData.imageClassName
                           ),
-                          optixFlowConfig
+                          optixFlowConfig,
+                          loading: "eager"
                         }
                       )
                     },
@@ -564,7 +565,8 @@ function CarouselScrollingFeatureShowcase({
                               "h-full w-full object-cover",
                               feature.imageClassName
                             ),
-                            optixFlowConfig
+                            optixFlowConfig,
+                            loading: "eager"
                           }
                         ) }) }),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [

package/dist/carousel-scrolling-feature-showcase.js

@@ -508,7 +508,8 @@ function CarouselScrollingFeatureShowcase({
                             "h-full w-full object-cover",
                             activeFeatureData.imageClassName
                           ),
-                          optixFlowConfig
+                          optixFlowConfig,
+                          loading: "eager"
                         }
                       )
                     },
@@ -543,7 +544,8 @@ function CarouselScrollingFeatureShowcase({
                               "h-full w-full object-cover",
                               feature.imageClassName
                             ),
-                            optixFlowConfig
+                            optixFlowConfig,
+                            loading: "eager"
                           }
                         ) }) }),
                         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [

package/dist/carousel-sidebar-resources.cjs

@@ -623,7 +623,7 @@ function CarouselSidebarResources({
   resourcesSlot,
   sidebarSlot,
   viewAllText,
-  viewAllHref = "#",
+  viewAllHref,
   className,
   headingClassName,
   sidebarClassName,
@@ -633,11 +633,12 @@ function CarouselSidebarResources({
   imageClassName,
   controlsClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg"
 }) {
   const [lightboxOpen, setLightboxOpen] = React2.useState(false);
   const [lightboxIndex, setLightboxIndex] = React2.useState(0);
@@ -671,7 +672,7 @@ function CarouselSidebarResources({
         children: [
           resources?.slice(0, 3).map((resource, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React2.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-sm text-muted-foreground uppercase", children: resource.category }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-sm opacity-70 uppercase", children: resource.category }),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 pressable.Pressable,
                 {
@@ -747,15 +748,15 @@ function CarouselSidebarResources({
                   src: item.image,
                   alt: typeof item.title === "string" ? item.title : item.imageAlt || "Resource image",
                   className: cn("aspect-video object-cover", imageClassName),
-                  loading: "lazy",
+                  loading: "eager",
                   optixFlowConfig
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: item.link, className: "block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-8", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground uppercase", children: item.category }),
-            typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-2 text-xl font-semibold lg:text-2xl", children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-xl font-semibold lg:text-2xl", children: item.title })
+          /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: item.link, className: "block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-6 md:py-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm opacity-70 uppercase", children: item.category }),
+            typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-2 text-xl font-semibold lg:text-2xl", children: item.title }) : item.title
           ] }) })
         ] })
       },
@@ -779,6 +780,7 @@ function CarouselSidebarResources({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName,
       children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
           "h2",
@@ -786,13 +788,7 @@ function CarouselSidebarResources({
             className: cn("text-2xl font-bold text-pretty", headingClassName),
             children: heading
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn("text-2xl font-bold text-pretty", headingClassName),
-            children: heading
-          }
-        )),
+        ) : heading),
         /* @__PURE__ */ jsxRuntime.jsx(Carousel, { className: carouselClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 grid gap-x-14 gap-y-10 lg:mt-16 lg:grid-cols-3", children: [
           sidebarContent,
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-1 lg:order-0 lg:col-span-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_-100vw_-100vw_0)]", children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/carousel-sidebar-resources.d.cts

@@ -100,6 +100,10 @@ interface CarouselSidebarResourcesProps {
      * Vertical spacing for the section
      */
     spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Optional background pattern name or URL
      */
@@ -145,6 +149,6 @@ interface CarouselSidebarResourcesProps {
  * />
  * ```
  */
-declare function CarouselSidebarResources({ sectionId, heading, resources, resourcesSlot, sidebarSlot, viewAllText, viewAllHref, className, headingClassName, sidebarClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselSidebarResourcesProps): React.JSX.Element;
+declare function CarouselSidebarResources({ sectionId, heading, resources, resourcesSlot, sidebarSlot, viewAllText, viewAllHref, className, headingClassName, sidebarClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, background, pattern, patternOpacity, patternClassName, optixFlowConfig, containerClassName, spacing, }: CarouselSidebarResourcesProps): React.JSX.Element;
 
 export { type CarouselSidebarResource, CarouselSidebarResources, type CarouselSidebarResourcesProps };

package/dist/carousel-sidebar-resources.d.ts

@@ -100,6 +100,10 @@ interface CarouselSidebarResourcesProps {
      * Vertical spacing for the section
      */
     spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Optional background pattern name or URL
      */
@@ -145,6 +149,6 @@ interface CarouselSidebarResourcesProps {
  * />
  * ```
  */
-declare function CarouselSidebarResources({ sectionId, heading, resources, resourcesSlot, sidebarSlot, viewAllText, viewAllHref, className, headingClassName, sidebarClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselSidebarResourcesProps): React.JSX.Element;
+declare function CarouselSidebarResources({ sectionId, heading, resources, resourcesSlot, sidebarSlot, viewAllText, viewAllHref, className, headingClassName, sidebarClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, background, pattern, patternOpacity, patternClassName, optixFlowConfig, containerClassName, spacing, }: CarouselSidebarResourcesProps): React.JSX.Element;
 
 export { type CarouselSidebarResource, CarouselSidebarResources, type CarouselSidebarResourcesProps };

package/dist/carousel-sidebar-resources.js

@@ -599,7 +599,7 @@ function CarouselSidebarResources({
   resourcesSlot,
   sidebarSlot,
   viewAllText,
-  viewAllHref = "#",
+  viewAllHref,
   className,
   headingClassName,
   sidebarClassName,
@@ -609,11 +609,12 @@ function CarouselSidebarResources({
   imageClassName,
   controlsClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg"
 }) {
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
@@ -647,7 +648,7 @@ function CarouselSidebarResources({
         children: [
           resources?.slice(0, 3).map((resource, idx) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "font-mono text-sm text-muted-foreground uppercase", children: resource.category }),
+              /* @__PURE__ */ jsx("div", { className: "font-mono text-sm opacity-70 uppercase", children: resource.category }),
               /* @__PURE__ */ jsxs(
                 Pressable,
                 {
@@ -723,15 +724,15 @@ function CarouselSidebarResources({
                   src: item.image,
                   alt: typeof item.title === "string" ? item.title : item.imageAlt || "Resource image",
                   className: cn("aspect-video object-cover", imageClassName),
-                  loading: "lazy",
+                  loading: "eager",
                   optixFlowConfig
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx(Pressable, { href: item.link, className: "block", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-8", children: [
-            /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground uppercase", children: item.category }),
-            typeof item.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-2 text-xl font-semibold lg:text-2xl", children: item.title }) : /* @__PURE__ */ jsx("div", { className: "mt-2 text-xl font-semibold lg:text-2xl", children: item.title })
+          /* @__PURE__ */ jsx(Pressable, { href: item.link, className: "block", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-6 md:py-8", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm opacity-70 uppercase", children: item.category }),
+            typeof item.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mt-2 text-xl font-semibold lg:text-2xl", children: item.title }) : item.title
           ] }) })
         ] })
       },
@@ -755,6 +756,7 @@ function CarouselSidebarResources({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName,
       children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
           "h2",
@@ -762,13 +764,7 @@ function CarouselSidebarResources({
             className: cn("text-2xl font-bold text-pretty", headingClassName),
             children: heading
           }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("text-2xl font-bold text-pretty", headingClassName),
-            children: heading
-          }
-        )),
+        ) : heading),
         /* @__PURE__ */ jsx(Carousel, { className: carouselClassName, children: /* @__PURE__ */ jsxs("div", { className: "mt-6 grid gap-x-14 gap-y-10 lg:mt-16 lg:grid-cols-3", children: [
           sidebarContent,
           /* @__PURE__ */ jsx("div", { className: "order-1 lg:order-0 lg:col-span-2 [&>div[data-slot=carousel-content]]:overflow-visible [&>div[data-slot=carousel-content]]:[clip-path:inset(-100vw_-100vw_-100vw_0)]", children: /* @__PURE__ */ jsx(

package/dist/carousel-tabs-content.cjs

@@ -790,7 +790,7 @@ function CarouselTabsContent({
                         "h-full w-full rounded-xl object-cover",
                         imageClassName
                       ),
-                      loading: "lazy",
+                      loading: "eager",
                       optixFlowConfig
                     }
                   )

package/dist/carousel-tabs-content.js

@@ -766,7 +766,7 @@ function CarouselTabsContent({
                         "h-full w-full rounded-xl object-cover",
                         imageClassName
                       ),
-                      loading: "lazy",
+                      loading: "eager",
                       optixFlowConfig
                     }
                   )

package/dist/expandable-case-study-cards.cjs

@@ -531,14 +531,14 @@ function ExpandableCaseStudyCards({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between gap-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
-                    item.logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+                    item.logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                       img.Img,
                       {
                         src: item.logo,
                         alt: item.logoAlt || item.company || "Logo",
                         className: cn(
-                          "h-6 max-w-[120px] object-contain object-left invert lg:h-8 lg:max-w-[150px]",
+                          "block h-6 max-h-6 w-auto max-w-none object-contain invert lg:h-8 lg:max-h-8",
                           logoClassName
                         ),
                         loading: "lazy",

package/dist/expandable-case-study-cards.js

@@ -510,14 +510,14 @@ function ExpandableCaseStudyCards({
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-                    item.logo && /* @__PURE__ */ jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+                    item.logo && /* @__PURE__ */ jsx("div", { className: "mb-1 flex items-center", children: /* @__PURE__ */ jsx(
                       Img,
                       {
                         src: item.logo,
                         alt: item.logoAlt || item.company || "Logo",
                         className: cn(
-                          "h-6 max-w-[120px] object-contain object-left invert lg:h-8 lg:max-w-[150px]",
+                          "block h-6 max-h-6 w-auto max-w-none object-contain invert lg:h-8 lg:max-h-8",
                           logoClassName
                         ),
                         loading: "lazy",

package/dist/feature-animated-carousel.cjs

@@ -902,7 +902,8 @@ function FeatureAnimatedCarousel({
                         src: currentFeature.image,
                         alt: currentFeature.imageAlt || (typeof currentFeature.title === "string" ? currentFeature.title : "Feature image"),
                         className: "h-full w-full object-cover",
-                        optixFlowConfig
+                        optixFlowConfig,
+                        loading: "eager"
                       }
                     )
                   ]

package/dist/feature-animated-carousel.js

@@ -881,7 +881,8 @@ function FeatureAnimatedCarousel({
                         src: currentFeature.image,
                         alt: currentFeature.imageAlt || (typeof currentFeature.title === "string" ? currentFeature.title : "Feature image"),
                         className: "h-full w-full object-cover",
-                        optixFlowConfig
+                        optixFlowConfig,
+                        loading: "eager"
                       }
                     )
                   ]

package/dist/feature-bento-image-grid.cjs

@@ -494,7 +494,7 @@ function FeatureBentoImageGrid({
             src: item.imageSrc,
             alt: item.imageAlt || (typeof item.title === "string" ? item.title : "Feature image"),
             className: cn(imageClassName, item.imageClassName),
-            loading: "lazy",
+            loading: "eager",
             optixFlowConfig
           }
         );
@@ -510,7 +510,7 @@ function FeatureBentoImageGrid({
       const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         renderItemImage(
           item,
-          "h-full max-h-[580px] w-full rounded-xl object-cover object-center shadow-lg"
+          "h-full w-full rounded-xl object-cover object-center shadow-lg"
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between px-5 md:px-8 py-6 md:py-6", children: [
@@ -560,7 +560,7 @@ function FeatureBentoImageGrid({
           {
             href: item.link,
             className: cn(
-              "group relative col-span-2 row-span-3 overflow-hidden rounded-xl",
+              "group relative h-[22rem] overflow-hidden rounded-xl xl:col-span-2 xl:h-[580px]",
               largeCardClassName,
               item.className
             ),
@@ -572,7 +572,7 @@ function FeatureBentoImageGrid({
         "div",
         {
           className: cn(
-            "group relative col-span-2 row-span-3 overflow-hidden rounded-xl",
+            "group relative h-[22rem] overflow-hidden rounded-xl xl:col-span-2 xl:h-[580px]",
             largeCardClassName,
             item.className
           ),
@@ -589,10 +589,7 @@ function FeatureBentoImageGrid({
       const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         renderItemImage(
           item,
-          cn(
-            "h-full w-full rounded-xl object-cover object-center shadow-lg",
-            index === 0 ? "max-h-44" : "max-h-96"
-          )
+          cn("h-full w-full rounded-xl object-cover object-center shadow-lg")
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
@@ -634,7 +631,7 @@ function FeatureBentoImageGrid({
             href: item.link,
             className: cn(
               "group relative overflow-hidden rounded-xl",
-              index === 1 && "row-span-2",
+              index === 0 ? "h-56 xl:h-44" : "h-72 xl:h-96",
               smallCardClassName,
               item.className
             ),
@@ -648,7 +645,7 @@ function FeatureBentoImageGrid({
         {
           className: cn(
             "group relative overflow-hidden rounded-xl",
-            index === 1 && "row-span-2",
+            index === 0 ? "h-56 xl:h-44" : "h-72 xl:h-96",
             smallCardClassName,
             item.className
           ),
@@ -666,7 +663,7 @@ function FeatureBentoImageGrid({
     const smallItems = items.filter((item) => item.size !== "large").slice(0, 2);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       renderLargeCard(largeItem),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-y-5 xl:row-span-2", children: smallItems.map((item, index) => renderSmallCard(item, index)) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-y-5", children: smallItems.map((item, index) => renderSmallCard(item, index)) })
     ] });
   }, [itemsSlot, items, renderLargeCard, renderSmallCard]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -696,7 +693,7 @@ function FeatureBentoImageGrid({
           "div",
           {
             className: cn(
-              "grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0",
+              "grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:gap-x-5 xl:gap-y-0",
               gridClassName
             ),
             children: itemsContent

package/dist/feature-bento-image-grid.js

@@ -473,7 +473,7 @@ function FeatureBentoImageGrid({
             src: item.imageSrc,
             alt: item.imageAlt || (typeof item.title === "string" ? item.title : "Feature image"),
             className: cn(imageClassName, item.imageClassName),
-            loading: "lazy",
+            loading: "eager",
             optixFlowConfig
           }
         );
@@ -489,7 +489,7 @@ function FeatureBentoImageGrid({
       const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
         renderItemImage(
           item,
-          "h-full max-h-[580px] w-full rounded-xl object-cover object-center shadow-lg"
+          "h-full w-full rounded-xl object-cover object-center shadow-lg"
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
         /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between px-5 md:px-8 py-6 md:py-6", children: [
@@ -539,7 +539,7 @@ function FeatureBentoImageGrid({
           {
             href: item.link,
             className: cn(
-              "group relative col-span-2 row-span-3 overflow-hidden rounded-xl",
+              "group relative h-[22rem] overflow-hidden rounded-xl xl:col-span-2 xl:h-[580px]",
               largeCardClassName,
               item.className
             ),
@@ -551,7 +551,7 @@ function FeatureBentoImageGrid({
         "div",
         {
           className: cn(
-            "group relative col-span-2 row-span-3 overflow-hidden rounded-xl",
+            "group relative h-[22rem] overflow-hidden rounded-xl xl:col-span-2 xl:h-[580px]",
             largeCardClassName,
             item.className
           ),
@@ -568,10 +568,7 @@ function FeatureBentoImageGrid({
       const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
         renderItemImage(
           item,
-          cn(
-            "h-full w-full rounded-xl object-cover object-center shadow-lg",
-            index === 0 ? "max-h-44" : "max-h-96"
-          )
+          cn("h-full w-full rounded-xl object-cover object-center shadow-lg")
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
         /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
@@ -613,7 +610,7 @@ function FeatureBentoImageGrid({
             href: item.link,
             className: cn(
               "group relative overflow-hidden rounded-xl",
-              index === 1 && "row-span-2",
+              index === 0 ? "h-56 xl:h-44" : "h-72 xl:h-96",
               smallCardClassName,
               item.className
             ),
@@ -627,7 +624,7 @@ function FeatureBentoImageGrid({
         {
           className: cn(
             "group relative overflow-hidden rounded-xl",
-            index === 1 && "row-span-2",
+            index === 0 ? "h-56 xl:h-44" : "h-72 xl:h-96",
             smallCardClassName,
             item.className
           ),
@@ -645,7 +642,7 @@ function FeatureBentoImageGrid({
     const smallItems = items.filter((item) => item.size !== "large").slice(0, 2);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       renderLargeCard(largeItem),
-      /* @__PURE__ */ jsx("div", { className: "grid gap-y-5 xl:row-span-2", children: smallItems.map((item, index) => renderSmallCard(item, index)) })
+      /* @__PURE__ */ jsx("div", { className: "grid gap-y-5", children: smallItems.map((item, index) => renderSmallCard(item, index)) })
     ] });
   }, [itemsSlot, items, renderLargeCard, renderSmallCard]);
   return /* @__PURE__ */ jsxs(
@@ -675,7 +672,7 @@ function FeatureBentoImageGrid({
           "div",
           {
             className: cn(
-              "grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0",
+              "grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:gap-x-5 xl:gap-y-0",
               gridClassName
             ),
             children: itemsContent