@opensite/ui 3.7.6 → 3.7.8

package/dist/blog-horizontal-cards.cjs

@@ -534,8 +534,9 @@ function BlogHorizontalCards({
                   {
                     src: post.image,
                     alt: postTitle,
-                    className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
-                    optixFlowConfig
+                    className: "aspect-video md:aspect-square w-full rounded-lg object-cover object-center sm:w-[260px]",
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 )
               }
@@ -547,15 +548,15 @@ function BlogHorizontalCards({
                 postDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: postDate })
               ] }),
               post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
-              postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70", children: postSummary }),
-              readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, variant: "link", children: [
+              postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
+              readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, variant: "outline", children: [
                 readMoreText,
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
                     name: "lucide/arrow-right",
                     size: 16,
-                    className: "ml-2 size-4"
+                    className: "size-4"
                   }
                 )
               ] })
@@ -593,7 +594,7 @@ function BlogHorizontalCards({
             "p",
             {
               className: cn(
-                "mb-12 opacity-70 md:text-base lg:text-lg",
+                "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
                 descriptionClassName
               ),
               children: description

package/dist/blog-horizontal-cards.js

@@ -513,8 +513,9 @@ function BlogHorizontalCards({
                   {
                     src: post.image,
                     alt: postTitle,
-                    className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
-                    optixFlowConfig
+                    className: "aspect-video md:aspect-square w-full rounded-lg object-cover object-center sm:w-[260px]",
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 )
               }
@@ -526,15 +527,15 @@ function BlogHorizontalCards({
                 postDate && /* @__PURE__ */ jsx("span", { children: postDate })
               ] }),
               post.title && /* @__PURE__ */ jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
-              postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70", children: postSummary }),
-              readMoreText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, variant: "link", children: [
+              postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
+              readMoreText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, variant: "outline", children: [
                 readMoreText,
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
                     name: "lucide/arrow-right",
                     size: 16,
-                    className: "ml-2 size-4"
+                    className: "size-4"
                   }
                 )
               ] })
@@ -572,7 +573,7 @@ function BlogHorizontalCards({
             "p",
             {
               className: cn(
-                "mb-12 opacity-70 md:text-base lg:text-lg",
+                "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
                 descriptionClassName
               ),
               children: description

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

@@ -532,13 +532,13 @@ function ExpandableCaseStudyCards({
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between gap-3", children: [
                   /* @__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 max-w-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    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 w-auto max-w-full object-contain object-left invert lg:h-8",
+                          "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

@@ -511,13 +511,13 @@ function ExpandableCaseStudyCards({
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3", children: [
                   /* @__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 max-w-full items-center", children: /* @__PURE__ */ jsx(
+                    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 w-auto max-w-full object-contain object-left invert lg:h-8",
+                          "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-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
           }
         );
@@ -589,9 +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"
-          )
+          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: [

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
           }
         );
@@ -568,9 +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"
-          )
+          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: [

package/dist/feature-integration-cards.cjs

@@ -416,17 +416,22 @@ function FeatureIntegrationCards({
     (integration) => {
       if (integration.iconSlot) return integration.iconSlot;
       if (!integration.icon) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 max-w-full items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: integration.icon,
           alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
           className: cn(
-            "h-12 w-auto object-contain",
+            "h-12 w-auto max-w-[min(100%,9rem)] object-contain sm:max-w-[min(100%,10rem)] md:max-w-[min(100%,11rem)] lg:max-w-[min(100%,12rem)] xl:max-w-[min(100%,13rem)]",
             integration.iconClassName
           ),
           loading: "eager",
-          optixFlowConfig
+          optixFlowConfig: optixFlowConfig ? {
+            ...optixFlowConfig,
+            objectFit: "contain"
+          } : {
+            objectFit: "contain"
+          }
         }
       ) });
     },

package/dist/feature-integration-cards.js

@@ -410,17 +410,22 @@ function FeatureIntegrationCards({
     (integration) => {
       if (integration.iconSlot) return integration.iconSlot;
       if (!integration.icon) return null;
-      return /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-start", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 max-w-full items-center justify-start", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: integration.icon,
           alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
           className: cn(
-            "h-12 w-auto object-contain",
+            "h-12 w-auto max-w-[min(100%,9rem)] object-contain sm:max-w-[min(100%,10rem)] md:max-w-[min(100%,11rem)] lg:max-w-[min(100%,12rem)] xl:max-w-[min(100%,13rem)]",
             integration.iconClassName
           ),
           loading: "eager",
-          optixFlowConfig
+          optixFlowConfig: optixFlowConfig ? {
+            ...optixFlowConfig,
+            objectFit: "contain"
+          } : {
+            objectFit: "contain"
+          }
         }
       ) });
     },

package/dist/hero-task-timer-animated.cjs

@@ -601,7 +601,7 @@ function HeroTaskTimerAnimated({
                 "p",
                 {
                   className: cn(
-                    "max-w-xl text-lg text-muted-foreground text-balance",
+                    "max-w-full md:max-w-xl text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -620,7 +620,7 @@ function HeroTaskTimerAnimated({
                       "div",
                       {
                         className: cn(
-                          "size-2.5 shrink-0 rounded-full transition-colors duration-700",
+                          "size-2.5 shrink-0 rounded-xl transition-colors duration-700",
                           index === activeTaskIndex ? "bg-primary" : "bg-muted-foreground/30"
                         )
                       }
@@ -629,8 +629,8 @@ function HeroTaskTimerAnimated({
                       "span",
                       {
                         className: cn(
-                          "text-sm font-medium transition-colors duration-700",
-                          index === activeTaskIndex ? "text-foreground" : "text-muted-foreground/50"
+                          "text-sm font-medium transition-all duration-700",
+                          index === activeTaskIndex ? "opacity-100" : "opacity-50"
                         ),
                         children: task
                       }
@@ -708,16 +708,6 @@ function HeroTaskTimerAnimated({
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary", children: task })
             },
             index
-          )) }),
-          taskItems && taskItems.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: taskItems.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "size-2 rounded-full transition-all duration-500",
-                index === activeTaskIndex ? "scale-125 bg-primary" : "bg-muted-foreground/25"
-              )
-            },
-            index
           )) })
         ] }) })
       ] })

package/dist/hero-task-timer-animated.js

@@ -595,7 +595,7 @@ function HeroTaskTimerAnimated({
                 "p",
                 {
                   className: cn(
-                    "max-w-xl text-lg text-muted-foreground text-balance",
+                    "max-w-full md:max-w-xl text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -614,7 +614,7 @@ function HeroTaskTimerAnimated({
                       "div",
                       {
                         className: cn(
-                          "size-2.5 shrink-0 rounded-full transition-colors duration-700",
+                          "size-2.5 shrink-0 rounded-xl transition-colors duration-700",
                           index === activeTaskIndex ? "bg-primary" : "bg-muted-foreground/30"
                         )
                       }
@@ -623,8 +623,8 @@ function HeroTaskTimerAnimated({
                       "span",
                       {
                         className: cn(
-                          "text-sm font-medium transition-colors duration-700",
-                          index === activeTaskIndex ? "text-foreground" : "text-muted-foreground/50"
+                          "text-sm font-medium transition-all duration-700",
+                          index === activeTaskIndex ? "opacity-100" : "opacity-50"
                         ),
                         children: task
                       }
@@ -702,16 +702,6 @@ function HeroTaskTimerAnimated({
               children: /* @__PURE__ */ jsx("span", { className: "truncate rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary", children: task })
             },
             index
-          )) }),
-          taskItems && taskItems.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: taskItems.map((_, index) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "size-2 rounded-full transition-all duration-500",
-                index === activeTaskIndex ? "scale-125 bg-primary" : "bg-muted-foreground/25"
-              )
-            },
-            index
           )) })
         ] }) })
       ] })

package/dist/navbar-enterprise-mega.cjs

@@ -802,7 +802,8 @@ var SolutionsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ]
@@ -961,7 +962,8 @@ var ProductsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -995,7 +997,8 @@ var ProductsMenu = ({
               src: product.image,
               alt: product.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -1028,7 +1031,8 @@ var ResourcesMenu = ({
           {
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
-            className: "h-full w-full object-cover invert"
+            className: "h-full w-full object-cover invert",
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1081,7 +1085,14 @@ var ResourcesMenu = ({
         href: topic.href,
         className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: topic.icon, size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
+            {
+              name: topic.icon,
+              size: 14,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: topic.title })
         ]
       },
@@ -1112,7 +1123,8 @@ var GlobalMenu = ({
               src: featuredHeroCard.image,
               alt: featuredHeroCard.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1207,7 +1219,8 @@ var PartnersMenu = ({
               "h-full w-full object-cover",
               featuredHeroCard.imagePosition === "background" && "invert"
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [

package/dist/navbar-enterprise-mega.js

@@ -779,7 +779,8 @@ var SolutionsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ]
@@ -938,7 +939,8 @@ var ProductsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -972,7 +974,8 @@ var ProductsMenu = ({
               src: product.image,
               alt: product.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -1005,7 +1008,8 @@ var ResourcesMenu = ({
           {
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
-            className: "h-full w-full object-cover invert"
+            className: "h-full w-full object-cover invert",
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1058,7 +1062,14 @@ var ResourcesMenu = ({
         href: topic.href,
         className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
         children: [
-          /* @__PURE__ */ jsx(DynamicIcon, { name: topic.icon, size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: topic.icon,
+              size: 14,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: topic.title })
         ]
       },
@@ -1089,7 +1100,8 @@ var GlobalMenu = ({
               src: featuredHeroCard.image,
               alt: featuredHeroCard.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -1184,7 +1196,8 @@ var PartnersMenu = ({
               "h-full w-full object-cover",
               featuredHeroCard.imagePosition === "background" && "invert"
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [

package/dist/registry.cjs

@@ -25534,17 +25534,22 @@ function FeatureIntegrationCards({
     (integration) => {
       if (integration.iconSlot) return integration.iconSlot;
       if (!integration.icon) return null;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 max-w-full items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
         img$1.Img,
         {
           src: integration.icon,
           alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
           className: cn(
-            "h-12 w-auto object-contain",
+            "h-12 w-auto max-w-[min(100%,9rem)] object-contain sm:max-w-[min(100%,10rem)] md:max-w-[min(100%,11rem)] lg:max-w-[min(100%,12rem)] xl:max-w-[min(100%,13rem)]",
             integration.iconClassName
           ),
           loading: "eager",
-          optixFlowConfig
+          optixFlowConfig: optixFlowConfig ? {
+            ...optixFlowConfig,
+            objectFit: "contain"
+          } : {
+            objectFit: "contain"
+          }
         }
       ) });
     },
@@ -26410,7 +26415,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
           }
         );
@@ -26505,9 +26510,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"
-          )
+          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: [
@@ -31754,13 +31757,13 @@ function ExpandableCaseStudyCards({
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between gap-3", children: [
                   /* @__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 max-w-full items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    item.logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                       img$1.Img,
                       {
                         src: item.logo,
                         alt: item.logoAlt || item.company || "Logo",
                         className: cn(
-                          "h-6 w-auto max-w-full object-contain object-left invert lg:h-8",
+                          "block h-6 max-h-6 w-auto max-w-none object-contain invert lg:h-8 lg:max-h-8",
                           logoClassName
                         ),
                         loading: "lazy",
@@ -36900,8 +36903,9 @@ function BlogHorizontalCards({
                   {
                     src: post.image,
                     alt: postTitle,
-                    className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
-                    optixFlowConfig
+                    className: "aspect-video md:aspect-square w-full rounded-lg object-cover object-center sm:w-[260px]",
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 )
               }
@@ -36913,15 +36917,15 @@ function BlogHorizontalCards({
                 postDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: postDate })
               ] }),
               post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
-              postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70", children: postSummary }),
-              readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, variant: "link", children: [
+              postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
+              readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, variant: "outline", children: [
                 readMoreText,
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
                     name: "lucide/arrow-right",
                     size: 16,
-                    className: "ml-2 size-4"
+                    className: "size-4"
                   }
                 )
               ] })
@@ -36959,7 +36963,7 @@ function BlogHorizontalCards({
             "p",
             {
               className: cn(
-                "mb-12 opacity-70 md:text-base lg:text-lg",
+                "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
                 descriptionClassName
               ),
               children: description
@@ -54297,7 +54301,7 @@ function HeroTaskTimerAnimated({
                 "p",
                 {
                   className: cn(
-                    "max-w-xl text-lg text-muted-foreground text-balance",
+                    "max-w-full md:max-w-xl text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -54316,7 +54320,7 @@ function HeroTaskTimerAnimated({
                       "div",
                       {
                         className: cn(
-                          "size-2.5 shrink-0 rounded-full transition-colors duration-700",
+                          "size-2.5 shrink-0 rounded-xl transition-colors duration-700",
                           index === activeTaskIndex ? "bg-primary" : "bg-muted-foreground/30"
                         )
                       }
@@ -54325,8 +54329,8 @@ function HeroTaskTimerAnimated({
                       "span",
                       {
                         className: cn(
-                          "text-sm font-medium transition-colors duration-700",
-                          index === activeTaskIndex ? "text-foreground" : "text-muted-foreground/50"
+                          "text-sm font-medium transition-all duration-700",
+                          index === activeTaskIndex ? "opacity-100" : "opacity-50"
                         ),
                         children: task
                       }
@@ -54404,16 +54408,6 @@ function HeroTaskTimerAnimated({
               children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary", children: task })
             },
             index
-          )) }),
-          taskItems && taskItems.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: taskItems.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "size-2 rounded-full transition-all duration-500",
-                index === activeTaskIndex ? "scale-125 bg-primary" : "bg-muted-foreground/25"
-              )
-            },
-            index
           )) })
         ] }) })
       ] })
@@ -64572,7 +64566,8 @@ var SolutionsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ]
@@ -64731,7 +64726,8 @@ var ProductsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -64765,7 +64761,8 @@ var ProductsMenu = ({
               src: product.image,
               alt: product.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -64798,7 +64795,8 @@ var ResourcesMenu = ({
           {
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
-            className: "h-full w-full object-cover invert"
+            className: "h-full w-full object-cover invert",
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -64851,7 +64849,14 @@ var ResourcesMenu = ({
         href: topic.href,
         className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: topic.icon, size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
+            {
+              name: topic.icon,
+              size: 14,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: topic.title })
         ]
       },
@@ -64882,7 +64887,8 @@ var GlobalMenu = ({
               src: featuredHeroCard.image,
               alt: featuredHeroCard.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -64977,7 +64983,8 @@ var PartnersMenu = ({
               "h-full w-full object-cover",
               featuredHeroCard.imagePosition === "background" && "invert"
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col p-5", children: [
@@ -110347,50 +110354,53 @@ var carouselSidebarResources = {
 };
 var carouselIconTabs = {
   exampleUsage: "Showcase product features or workflow steps with a centered heading and badge, a full-width image carousel, and clickable icon-tab sections below that sync to carousel slides. Each tab shows an icon, title, and description.",
-  importantUsageNotes: `${GALLERY_MEDIA_NOTE} title text The 'badge' prop appears below the heading as a secondary badge \u2013 keep it short (2\u20134 words). Tabs are only visible on 'md' and above; on mobile the description appears inline below each slide image. Clicking a slide image opens a built-in lightbox \u2013 no extra configuration needed. Provide 3\u20136 sections; more than 6 makes the tab row too crowded on desktop.`,
+  importantUsageNotes: `${GALLERY_MEDIA_NOTE} title text The 'badge' prop appears below the heading as a secondary badge \u2013 keep it short (2\u20134 words). Tabs are only visible on 'md' and above; on mobile the description appears inline below each slide image. Clicking a slide image opens a built-in lightbox \u2013 no extra configuration needed. Provide exactly 3 sections for ideal layout balance; fewer looks sparse, more crowds the tab row on desktop.`,
   usageRequirements: {
-    requiredProps: [],
+    requiredProps: ["sections"],
     requiresSiteCapabilities: galleryCapabilities("media_library"),
     propConstraints: {
       sections: {
+        required: true,
+        count: 3,
         minItems: 3,
-        maxItems: 6
+        maxItems: 3
       }
     },
     mediaSlots: {
       "sections[].img": {
         path: "sections[].img",
         roles: ["gallery", "feature"],
-        required: false
+        required: true
       }
     }
   },
   exampleProps: {
-    heading: "Cut the time it takes to close your books",
-    badge: "Streamline your workflow",
+    heading: "Platform Features",
+    badge: "Enterprise Ready",
     background: "white",
-    spacing: "lg",
+    pattern: "gridFadeTop",
+    patternOpacity: 0.9,
     sections: [
       {
         img: GALLERY_EXAMPLE_IMAGE_URL,
-        alt: "Advanced Analytics",
+        alt: "Analytics Dashboard",
         title: "Advanced Analytics",
-        text: "Comprehensive analytics dashboard with real-time data visualization and predictive insights.",
+        text: "Comprehensive analytics dashboard with real-time data visualization, custom reports, and predictive insights. Track KPIs, user behavior, and business metrics in one unified platform.",
         icon: "lucide/bar-chart-3"
       },
       {
         img: GALLERY_EXAMPLE_IMAGE_URL,
         alt: "Team Collaboration",
         title: "Team Collaboration",
-        text: "Built-in tools including real-time messaging, file sharing, and project management.",
+        text: "Built-in collaboration tools including real-time messaging, file sharing, and project management. Keep your team aligned and productive with seamless communication.",
         icon: "lucide/users"
       },
       {
         img: GALLERY_EXAMPLE_IMAGE_URL,
-        alt: "Automation Engine",
-        title: "Automation Engine",
-        text: "Powerful workflow automation with a visual builder and pre-built templates.",
-        icon: "lucide/workflow"
+        alt: "API Integration",
+        title: "API Integration",
+        text: "Extensive REST API with comprehensive documentation and SDKs for all major languages. Connect with your existing tools and build custom integrations effortlessly.",
+        icon: "lucide/plug"
       }
     ]
   }

package/dist/registry.js

@@ -25494,17 +25494,22 @@ function FeatureIntegrationCards({
     (integration) => {
       if (integration.iconSlot) return integration.iconSlot;
       if (!integration.icon) return null;
-      return /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-start", children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 max-w-full items-center justify-start", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: integration.icon,
           alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
           className: cn(
-            "h-12 w-auto object-contain",
+            "h-12 w-auto max-w-[min(100%,9rem)] object-contain sm:max-w-[min(100%,10rem)] md:max-w-[min(100%,11rem)] lg:max-w-[min(100%,12rem)] xl:max-w-[min(100%,13rem)]",
             integration.iconClassName
           ),
           loading: "eager",
-          optixFlowConfig
+          optixFlowConfig: optixFlowConfig ? {
+            ...optixFlowConfig,
+            objectFit: "contain"
+          } : {
+            objectFit: "contain"
+          }
         }
       ) });
     },
@@ -26370,7 +26375,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
           }
         );
@@ -26465,9 +26470,7 @@ function FeatureBentoImageGrid({
       const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
         renderItemImage(
           item,
-          cn(
-            "h-full w-full rounded-xl object-cover object-center shadow-lg"
-          )
+          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: [
@@ -31714,13 +31717,13 @@ function ExpandableCaseStudyCards({
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3", children: [
                   /* @__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 max-w-full items-center", children: /* @__PURE__ */ jsx(
+                    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 w-auto max-w-full object-contain object-left invert lg:h-8",
+                          "block h-6 max-h-6 w-auto max-w-none object-contain invert lg:h-8 lg:max-h-8",
                           logoClassName
                         ),
                         loading: "lazy",
@@ -36860,8 +36863,9 @@ function BlogHorizontalCards({
                   {
                     src: post.image,
                     alt: postTitle,
-                    className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
-                    optixFlowConfig
+                    className: "aspect-video md:aspect-square w-full rounded-lg object-cover object-center sm:w-[260px]",
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 )
               }
@@ -36873,15 +36877,15 @@ function BlogHorizontalCards({
                 postDate && /* @__PURE__ */ jsx("span", { children: postDate })
               ] }),
               post.title && /* @__PURE__ */ jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
-              postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70", children: postSummary }),
-              readMoreText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, variant: "link", children: [
+              postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
+              readMoreText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, variant: "outline", children: [
                 readMoreText,
                 /* @__PURE__ */ jsx(
                   DynamicIcon,
                   {
                     name: "lucide/arrow-right",
                     size: 16,
-                    className: "ml-2 size-4"
+                    className: "size-4"
                   }
                 )
               ] })
@@ -36919,7 +36923,7 @@ function BlogHorizontalCards({
             "p",
             {
               className: cn(
-                "mb-12 opacity-70 md:text-base lg:text-lg",
+                "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
                 descriptionClassName
               ),
               children: description
@@ -54257,7 +54261,7 @@ function HeroTaskTimerAnimated({
                 "p",
                 {
                   className: cn(
-                    "max-w-xl text-lg text-muted-foreground text-balance",
+                    "max-w-full md:max-w-xl text-lg text-balance",
                     descriptionClassName
                   ),
                   children: description
@@ -54276,7 +54280,7 @@ function HeroTaskTimerAnimated({
                       "div",
                       {
                         className: cn(
-                          "size-2.5 shrink-0 rounded-full transition-colors duration-700",
+                          "size-2.5 shrink-0 rounded-xl transition-colors duration-700",
                           index === activeTaskIndex ? "bg-primary" : "bg-muted-foreground/30"
                         )
                       }
@@ -54285,8 +54289,8 @@ function HeroTaskTimerAnimated({
                       "span",
                       {
                         className: cn(
-                          "text-sm font-medium transition-colors duration-700",
-                          index === activeTaskIndex ? "text-foreground" : "text-muted-foreground/50"
+                          "text-sm font-medium transition-all duration-700",
+                          index === activeTaskIndex ? "opacity-100" : "opacity-50"
                         ),
                         children: task
                       }
@@ -54364,16 +54368,6 @@ function HeroTaskTimerAnimated({
               children: /* @__PURE__ */ jsx("span", { className: "truncate rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary", children: task })
             },
             index
-          )) }),
-          taskItems && taskItems.length > 1 && /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: taskItems.map((_, index) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "size-2 rounded-full transition-all duration-500",
-                index === activeTaskIndex ? "scale-125 bg-primary" : "bg-muted-foreground/25"
-              )
-            },
-            index
           )) })
         ] }) })
       ] })
@@ -64532,7 +64526,8 @@ var SolutionsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) })
       ]
@@ -64691,7 +64686,8 @@ var ProductsMenu = ({
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
             className: "h-full w-full object-cover",
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -64725,7 +64721,8 @@ var ProductsMenu = ({
               src: product.image,
               alt: product.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -64758,7 +64755,8 @@ var ResourcesMenu = ({
           {
             src: featuredHeroCard.image,
             alt: featuredHeroCard.title,
-            className: "h-full w-full object-cover invert"
+            className: "h-full w-full object-cover invert",
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -64811,7 +64809,14 @@ var ResourcesMenu = ({
         href: topic.href,
         className: "group !flex !w-full items-center gap-2 rounded-lg p-2 hover:bg-muted",
         children: [
-          /* @__PURE__ */ jsx(DynamicIcon, { name: topic.icon, size: 14, className: "shrink-0" }),
+          /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: topic.icon,
+              size: 14,
+              className: "shrink-0"
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-sm font-medium", children: topic.title })
         ]
       },
@@ -64842,7 +64847,8 @@ var GlobalMenu = ({
               src: featuredHeroCard.image,
               alt: featuredHeroCard.title,
               className: "h-full w-full object-cover",
-              optixFlowConfig
+              optixFlowConfig,
+              loading: "eager"
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -64937,7 +64943,8 @@ var PartnersMenu = ({
               "h-full w-full object-cover",
               featuredHeroCard.imagePosition === "background" && "invert"
             ),
-            optixFlowConfig
+            optixFlowConfig,
+            loading: "eager"
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-5", children: [
@@ -110307,50 +110314,53 @@ var carouselSidebarResources = {
 };
 var carouselIconTabs = {
   exampleUsage: "Showcase product features or workflow steps with a centered heading and badge, a full-width image carousel, and clickable icon-tab sections below that sync to carousel slides. Each tab shows an icon, title, and description.",
-  importantUsageNotes: `${GALLERY_MEDIA_NOTE} title text The 'badge' prop appears below the heading as a secondary badge \u2013 keep it short (2\u20134 words). Tabs are only visible on 'md' and above; on mobile the description appears inline below each slide image. Clicking a slide image opens a built-in lightbox \u2013 no extra configuration needed. Provide 3\u20136 sections; more than 6 makes the tab row too crowded on desktop.`,
+  importantUsageNotes: `${GALLERY_MEDIA_NOTE} title text The 'badge' prop appears below the heading as a secondary badge \u2013 keep it short (2\u20134 words). Tabs are only visible on 'md' and above; on mobile the description appears inline below each slide image. Clicking a slide image opens a built-in lightbox \u2013 no extra configuration needed. Provide exactly 3 sections for ideal layout balance; fewer looks sparse, more crowds the tab row on desktop.`,
   usageRequirements: {
-    requiredProps: [],
+    requiredProps: ["sections"],
     requiresSiteCapabilities: galleryCapabilities("media_library"),
     propConstraints: {
       sections: {
+        required: true,
+        count: 3,
         minItems: 3,
-        maxItems: 6
+        maxItems: 3
       }
     },
     mediaSlots: {
       "sections[].img": {
         path: "sections[].img",
         roles: ["gallery", "feature"],
-        required: false
+        required: true
       }
     }
   },
   exampleProps: {
-    heading: "Cut the time it takes to close your books",
-    badge: "Streamline your workflow",
+    heading: "Platform Features",
+    badge: "Enterprise Ready",
     background: "white",
-    spacing: "lg",
+    pattern: "gridFadeTop",
+    patternOpacity: 0.9,
     sections: [
       {
         img: GALLERY_EXAMPLE_IMAGE_URL,
-        alt: "Advanced Analytics",
+        alt: "Analytics Dashboard",
         title: "Advanced Analytics",
-        text: "Comprehensive analytics dashboard with real-time data visualization and predictive insights.",
+        text: "Comprehensive analytics dashboard with real-time data visualization, custom reports, and predictive insights. Track KPIs, user behavior, and business metrics in one unified platform.",
         icon: "lucide/bar-chart-3"
       },
       {
         img: GALLERY_EXAMPLE_IMAGE_URL,
         alt: "Team Collaboration",
         title: "Team Collaboration",
-        text: "Built-in tools including real-time messaging, file sharing, and project management.",
+        text: "Built-in collaboration tools including real-time messaging, file sharing, and project management. Keep your team aligned and productive with seamless communication.",
         icon: "lucide/users"
       },
       {
         img: GALLERY_EXAMPLE_IMAGE_URL,
-        alt: "Automation Engine",
-        title: "Automation Engine",
-        text: "Powerful workflow automation with a visual builder and pre-built templates.",
-        icon: "lucide/workflow"
+        alt: "API Integration",
+        title: "API Integration",
+        text: "Extensive REST API with comprehensive documentation and SDKs for all major languages. Connect with your existing tools and build custom integrations effortlessly.",
+        icon: "lucide/plug"
       }
     ]
   }

package/package.json

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