@opensite/ui 2.7.2 → 2.7.4

package/dist/project-table-list.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-Cz9FycbA.js';
-import './blocks-BJ3CyHu6.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
+import './blocks-CsMdf2Jh.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';

package/dist/project-video-carousel.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-CEwp5AFN.cjs';
-import './blocks-BlLF8sLO.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2FsyKLdT.cjs';
+import './blocks-gR13ES5A.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';

package/dist/project-video-carousel.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-Cz9FycbA.js';
-import './blocks-BJ3CyHu6.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
+import './blocks-CsMdf2Jh.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';

package/dist/project-video-hover-bento.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-CEwp5AFN.cjs';
-import './blocks-BlLF8sLO.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2FsyKLdT.cjs';
+import './blocks-gR13ES5A.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';

package/dist/project-video-hover-bento.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-Cz9FycbA.js';
-import './blocks-BJ3CyHu6.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
+import './blocks-CsMdf2Jh.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';

package/dist/project-video-hover-grid.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-CEwp5AFN.cjs';
-import './blocks-BlLF8sLO.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2FsyKLdT.cjs';
+import './blocks-gR13ES5A.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';

package/dist/project-video-hover-grid.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-Cz9FycbA.js';
-import './blocks-BJ3CyHu6.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
+import './blocks-CsMdf2Jh.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';

package/dist/project-video-hover-rounded.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-CEwp5AFN.cjs';
-import './blocks-BlLF8sLO.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2FsyKLdT.cjs';
+import './blocks-gR13ES5A.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';

package/dist/project-video-hover-rounded.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-Cz9FycbA.js';
-import './blocks-BJ3CyHu6.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
+import './blocks-CsMdf2Jh.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';

package/dist/project-video-hover-stack.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-CEwp5AFN.cjs';
-import './blocks-BlLF8sLO.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2FsyKLdT.cjs';
+import './blocks-gR13ES5A.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';

package/dist/project-video-hover-stack.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-Cz9FycbA.js';
-import './blocks-BJ3CyHu6.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
+import './blocks-CsMdf2Jh.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';

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-CEwp5AFN.cjs';
-import './blocks-BlLF8sLO.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2FsyKLdT.cjs';
+import './blocks-gR13ES5A.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';

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-Cz9FycbA.js';
-import './blocks-BJ3CyHu6.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
+import './blocks-CsMdf2Jh.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';

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-CEwp5AFN.cjs';
-import './blocks-BlLF8sLO.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2FsyKLdT.cjs';
+import './blocks-gR13ES5A.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';

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-Cz9FycbA.js';
-import './blocks-BJ3CyHu6.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
+import './blocks-CsMdf2Jh.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';

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

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground } from './community-initiatives-CEwp5AFN.cjs';
+import { S as SectionBackground } from './community-initiatives-2FsyKLdT.cjs';
 import 'react';
-import './blocks-BlLF8sLO.cjs';
+import './blocks-gR13ES5A.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';

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

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground } from './community-initiatives-Cz9FycbA.js';
+import { S as SectionBackground } from './community-initiatives-CtLnPq2v.js';
 import 'react';
-import './blocks-BJ3CyHu6.js';
+import './blocks-CsMdf2Jh.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';

package/dist/registry.cjs

@@ -9279,7 +9279,7 @@ function AboutNetworkSpotlight({
       {
         className: cn(
           "bg-card text-card-foreground",
-          "rounded-2xl border p-5 backdrop-blur-sm",
+          "rounded-2xl border p-5 shadow-xl",
           spotlightCardClassName
         ),
         children: [
@@ -9297,10 +9297,10 @@ function AboutNetworkSpotlight({
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               typeof spotlightCard.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs font-bold uppercase tracking-[0.2em]"), children: spotlightCard.label }) : spotlightCard.label,
-              typeof spotlightCard.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold text-background", children: spotlightCard.title }) : spotlightCard.title
+              typeof spotlightCard.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-bold", children: spotlightCard.title }) : spotlightCard.title
             ] })
           ] }),
-          typeof spotlightCard.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-background/80", children: spotlightCard.description }) : spotlightCard.description
+          typeof spotlightCard.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: spotlightCard.description }) : spotlightCard.description
         ]
       }
     );
@@ -52104,43 +52104,119 @@ function HeroAiPoweredCarousel({
     }
   );
 }
+var ASPECT_RATIOS = {
+  square: 1,
+  horizontal: 16 / 9,
+  vertical: 355 / 520
+};
 function HeroAdCampaignExpert({
   heading,
   description,
-  action,
-  actionSlot,
-  imageSrc,
-  imageAlt,
+  actions,
+  actionsSlot,
+  actionsClassName,
+  mediaItem,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
+  mediaAspectRatios = { desktop: "vertical", mobile: "vertical" },
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" },
   pattern,
   patternOpacity,
   className,
   contentClassName,
   headingClassName,
   descriptionClassName,
-  imageContainerClassName,
-  imageClassName,
   optixFlowConfig
 }) {
-  const renderAction = React30.useMemo(() => {
-    if (actionSlot) return actionSlot;
-    if (!action) return null;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = action;
-    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      icon,
-      label,
-      iconAfter
-    ] }) });
-  }, [actionSlot, action]);
+  const renderActions = React30.useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BlockActions,
+      {
+        actions,
+        actionsSlot,
+        actionsClassName
+      }
+    );
+  }, [actionsSlot, actions, actionsClassName]);
+  const headerItems = React30.useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h1",
+          className: cn(
+            "text-3xl leading-tight font-bold tracking-tighter lg:text-5xl text-balance",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg text-balance", descriptionClassName),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    if (renderActions) {
+      items.push({
+        _type: "text",
+        as: "div",
+        children: renderActions
+      });
+    }
+    return items;
+  }, [
+    heading,
+    headingClassName,
+    description,
+    descriptionClassName,
+    renderActions
+  ]);
+  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
+  const hasMedia = mediaItem?.image || mediaItem?.video;
+  const renderMedia = React30.useMemo(() => {
+    if (!mediaItem) return null;
+    const { image, video } = mediaItem;
+    if (video) {
+      const { src, className: videoClassName, ...videoRest } = video;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          src,
+          className: cn("size-full object-cover", videoClassName),
+          ...videoRest
+        }
+      );
+    }
+    if (image) {
+      const { src, alt, className: imgClassName, ...imgRest } = image;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src,
+          alt,
+          className: cn("size-full object-cover", imgClassName),
+          optixFlowConfig,
+          ...imgRest
+        }
+      );
+    }
+    return null;
+  }, [mediaItem, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -52150,64 +52226,41 @@ function HeroAdCampaignExpert({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center lg:flex-row lg:items-start", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center", mobileOrder, desktopOrder), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
           {
+            items: headerItems,
             className: cn(
               "relative flex flex-col items-start gap-8 pb-20 lg:w-1/2",
               contentClassName
-            ),
-            children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-3xl leading-tight font-bold tracking-tighter lg:text-5xl text-balance",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : null),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-              renderAction
-            ]
+            )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              "relative flex w-full justify-center lg:w-1/2",
-              imageContainerClassName
-            ),
-            children: [
-              imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]", children: /* @__PURE__ */ jsxRuntime.jsx(
-                AspectRatio,
-                {
-                  ratio: 355 / 520,
-                  className: "border-muted border rounded-xl shadow-xl overflow-hidden",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: imageSrc,
-                      alt: imageAlt,
-                      className: cn("size-full object-cover", imageClassName),
-                      optixFlowConfig
-                    }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 w-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 2, className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
-                AspectRatio,
-                {
-                  ratio: 1,
-                  className: cn("absolute w-full rounded-full bg-muted")
-                }
-              ) }) })
-            ]
-          }
-        )
+        hasMedia && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative flex w-full justify-center lg:w-1/2"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            AspectRatio,
+            {
+              ratio: ASPECT_RATIOS[mediaAspectRatios.mobile],
+              className: cn(
+                "border-muted border rounded-xl shadow-xl overflow-hidden",
+                mediaItem?.containerClassName
+              ),
+              children: renderMedia
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(
+            AspectRatio,
+            {
+              ratio: ASPECT_RATIOS[mediaAspectRatios.desktop],
+              className: cn(
+                "border-muted border rounded-xl shadow-xl overflow-hidden",
+                mediaItem?.containerClassName
+              ),
+              children: renderMedia
+            }
+          ) })
+        ] }) })
       ] }) })
     }
   );