@opensite/ui 3.3.5 → 3.3.7

package/dist/project-video-hover-two-by-two.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
-import './blocks-DCvdF54D.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
+import './blocks-DyouPohq.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';

package/dist/project-video-hover-two-by-two.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
-import './blocks-DCvdF54D.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
+import './blocks-DyouPohq.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';

package/dist/project-work-showcase.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
-import './blocks-DCvdF54D.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
+import './blocks-DyouPohq.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';

package/dist/project-work-showcase.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
-import './blocks-DCvdF54D.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
+import './blocks-DyouPohq.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';

package/dist/project-zigzag-layout.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground } from './community-initiatives-B4p2JldF.cjs';
-import './blocks-DCvdF54D.cjs';
+import { S as SectionBackground } from './community-initiatives-Cgd-IXlI.cjs';
+import './blocks-DyouPohq.cjs';
 import 'react';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/project-zigzag-layout.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground } from './community-initiatives--8cXayNa.js';
-import './blocks-DCvdF54D.js';
+import { S as SectionBackground } from './community-initiatives-Dud0DKXB.js';
+import './blocks-DyouPohq.js';
 import 'react';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/registry.cjs

@@ -6614,7 +6614,7 @@ function AboutMissionFeatures({
                 "bg-primary text-primary-foreground",
                 feature.iconBgClass
               ),
-              children: feature.icon
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.icon })
             }
           ) : null,
           feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: feature.title }) : feature.title),
@@ -6668,7 +6668,7 @@ function AboutMissionFeatures({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-ceenter gap-6 lg:gap-20", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-stretch gap-6 lg:gap-20", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           ContentGroup,
           {
@@ -6677,22 +6677,23 @@ function AboutMissionFeatures({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 md:gap-6 grid-cols-1 md:grid-cols-2", children: [
-          mainImage && /* @__PURE__ */ jsxRuntime.jsx(
+          mainImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video w-full overflow-hidden rounded-md shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: mainImage.src,
               alt: mainImage.alt,
               className: cn(
-                "size-full max-h-96 rounded-md object-cover shadow-lg",
+                "block h-full w-full object-cover object-center",
                 mainImageClassName
               ),
               optixFlowConfig
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: cn(
+                "min-h-72 md:min-h-0",
                 "relative flex flex-col justify-between gap-10",
                 "overflow-hidden p-4 md:p-6 lg:p-10",
                 "text-white text-shadow-lg",
@@ -6705,7 +6706,7 @@ function AboutMissionFeatures({
                   {
                     src: missionBackgroundImage.src,
                     alt: missionBackgroundImage.alt,
-                    className: "absolute inset-0 size-full object-cover brightness-50",
+                    className: "absolute inset-0 h-full w-full object-cover brightness-50",
                     optixFlowConfig
                   }
                 ) }),
@@ -6794,19 +6795,32 @@ function AboutStatsShowcase({
   const imagesContent = React30.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-12", imagesClassName), children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
         className: cn(
-          "size-full max-h-96 rounded-xl object-cover",
-          image.colSpan ? `md:col-span-${image.colSpan}` : "md:col-span-4"
+          "grid w-full grid-cols-1 gap-6",
+          images.length > 1 ? "md:grid-cols-2" : "md:grid-cols-1",
+          imagesClassName
         ),
-        optixFlowConfig
-      },
-      idx
-    )) });
+        children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "aspect-video w-full overflow-hidden rounded-xl shadow-lg",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: "block h-full w-full object-cover object-center",
+                optixFlowConfig
+              }
+            )
+          },
+          idx
+        ))
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   const statsContent = React30.useMemo(() => {
     if (statsSlot) return statsSlot;
@@ -7052,7 +7066,7 @@ function AboutCompanyProfile({
       "div",
       {
         className: cn(
-          "flex bg-muted text-muted-foreground flex-col justify-between gap-6 rounded-xl p-7 md:w-1/2 lg:w-auto",
+          "flex bg-muted text-muted-foreground flex-col justify-between gap-6 rounded-xl p-7",
           breakoutClassName
         ),
         children: [
@@ -7142,6 +7156,7 @@ function AboutCompanyProfile({
       typeof item.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-base", children: item.label }) : item.label
     ] }, idx));
   }, [achievementsSlot, achievements]);
+  const hasMediaSidebar = Boolean(breakoutSlot || breakout || secondaryImage);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -7175,35 +7190,53 @@ function AboutCompanyProfile({
             }
           ) : description)
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-7 lg:grid-cols-3", children: [
-          mainImage && /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: mainImage.src,
-              alt: mainImage.alt,
-              className: cn(
-                "size-full max-h-[620px] rounded-xl object-cover lg:col-span-2",
-                mainImageClassName
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-7",
+              mainImage && hasMediaSidebar ? "lg:grid-cols-3" : "lg:grid-cols-1"
+            ),
+            children: [
+              mainImage && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "aspect-[3/2] w-full overflow-hidden rounded-xl shadow-lg",
+                    hasMediaSidebar && "lg:col-span-2"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: mainImage.src,
+                      alt: mainImage.alt,
+                      className: cn(
+                        "block h-full w-full object-cover object-center",
+                        mainImageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  )
+                }
               ),
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-7 md:flex-row lg:flex-col", children: [
-            (breakoutSlot || breakout) && breakoutContent,
-            secondaryImage && /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: secondaryImage.src,
-                alt: secondaryImage.alt,
-                className: cn(
-                  "grow basis-0 rounded-xl object-cover w-full h-auto md:w-1/2 lg:min-h-0 lg:w-auto",
-                  secondaryImageClassName
-                ),
-                optixFlowConfig
-              }
-            )
-          ] })
-        ] }),
+              hasMediaSidebar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-7 md:grid-cols-2 lg:grid-cols-1 lg:grid-rows-[auto_minmax(0,1fr)]", children: [
+                (breakoutSlot || breakout) && breakoutContent,
+                secondaryImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[7/6] w-full overflow-hidden rounded-xl shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: secondaryImage.src,
+                    alt: secondaryImage.alt,
+                    className: cn(
+                      "block h-full w-full object-cover object-center",
+                      secondaryImageClassName
+                    ),
+                    optixFlowConfig
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
         companiesContent,
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -7782,7 +7815,7 @@ function AboutStreamlineTeam({
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      feature.icon ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
@@ -7791,9 +7824,9 @@ function AboutStreamlineTeam({
             "bg-primary text-primary-foreground",
             feature.iconBgClass
           ),
-          children: feature.icon
+          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.icon })
         }
-      ),
+      ) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
         feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: feature.description }) : feature.description)
@@ -8538,7 +8571,7 @@ function AboutStatsSidebar({
               "rounded-xl ring-2"
             ),
             children: [
-              stat.icon,
+              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: stat.icon }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-0", children: [
                 typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 text-3xl md:text-4xl font-bold", children: stat.value }) : stat.value,
                 typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: stat.label }) : stat.label,
@@ -8564,7 +8597,7 @@ function AboutStatsSidebar({
           featuresClassName
         ),
         children: features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          feature.icon ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
@@ -8573,9 +8606,9 @@ function AboutStatsSidebar({
                 "shadow-lg rounded-lg",
                 feature.iconBgClass
               ),
-              children: feature.icon
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.icon })
             }
-          ),
+          ) : null,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
             feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-75", children: feature.description }) : feature.description)
@@ -8959,7 +8992,7 @@ function AboutStoryExpertise({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-3 md:gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shrink-0", children: highlight.icon }),
+            highlight.icon ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: highlight.icon }) }) : null,
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
@@ -8997,15 +9030,15 @@ function AboutStoryExpertise({
             transition: { duration: 0.3, delay: idx * 0.05 },
             className: "flex items-start gap-4 rounded-2xl bg-card text-card-foreground p-6 shadow-md transition-all duration-300 hover:shadow-xl",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+              area.icon ? /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn(
                     "flex h-12 w-12 items-center justify-center rounded-xl"
                   ),
-                  children: area.icon
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: area.icon })
                 }
-              ),
+              ) : null,
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold", children: area.title }) : area.title),
                 area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm"), children: area.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: area.description }))
@@ -49564,7 +49597,12 @@ function HeroSplitIconCards({
 }
 function HeroFloatingImages({
   sectionId = "hero-floating-images",
-  children,
+  badge,
+  badgeIcon,
+  heading,
+  description,
+  actions,
+  actionsSlot,
   images,
   imagesSlot,
   zoomIconName = "lucide/zoom-in",
@@ -49575,6 +49613,10 @@ function HeroFloatingImages({
   className,
   gridClassName,
   contentClassName,
+  badgeClassName,
+  headingClassName,
+  descriptionClassName,
+  actionsClassName,
   galleryClassName,
   featuredImageClassName,
   secondaryImageClassName,
@@ -49750,8 +49792,10 @@ function HeroFloatingImages({
     secondaryImagesContent
   ]);
   const hasContent = React30.useMemo(() => {
-    return children !== void 0 && children !== null;
-  }, [children]);
+    return Boolean(
+      badge || badgeIcon || heading || description || actionsSlot || actions && actions.length > 0
+    );
+  }, [actions, actionsSlot, badge, badgeIcon, description, heading]);
   const hasGallery = React30.useMemo(() => {
     return imagesSlot || images && images.length > 0;
   }, [imagesSlot, images]);
@@ -49774,7 +49818,48 @@ function HeroFloatingImages({
               gridClassName
             ),
             children: [
-              hasContent ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center", contentClassName), children }) : null,
+              hasContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-center", contentClassName), children: [
+                (badge || badgeIcon) && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Badge,
+                  {
+                    variant: "secondary",
+                    className: cn("mb-6 w-fit", badgeClassName),
+                    children: [
+                      badge,
+                      badgeIcon
+                    ]
+                  }
+                ),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mb-8 max-w-lg text-lg text-muted-foreground",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsSlot,
+                    actionsClassName,
+                    verticalSpacing: description ? "mt-0" : void 0
+                  }
+                )
+              ] }) : null,
               hasGallery ? galleryContent : null
             ]
           }