@opensite/ui 3.1.1 → 3.1.3

package/dist/hero-mentorship-video-split.js

@@ -496,6 +496,7 @@ function HeroMentorshipVideoSplit({
   action,
   actionSlot,
   videoLabel,
+  modalVideo,
   videoThumbnail,
   videoUrl,
   videoTitle,
@@ -542,7 +543,8 @@ function HeroMentorshipVideoSplit({
   }, [actionSlot, action]);
   const renderVideoSection = useMemo(() => {
     if (videoSlot) return videoSlot;
-    if (!videoThumbnail) return null;
+    const thumbnail = modalVideo?.image || videoThumbnail;
+    if (!thumbnail) return null;
     const aspectRatio = videoAspectRatio === "vertical" ? 9 / 16 : 16 / 9;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
       videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase opacity-75", children: videoLabel }) : videoLabel),
@@ -560,11 +562,11 @@ function HeroMentorshipVideoSplit({
             /* @__PURE__ */ jsx(
               Img,
               {
-                src: videoThumbnail.src,
-                alt: videoThumbnail.alt,
+                src: thumbnail.src,
+                alt: thumbnail.alt,
                 className: cn(
                   "absolute inset-0 h-full w-full object-cover",
-                  videoThumbnail.className
+                  thumbnail.className
                 ),
                 optixFlowConfig
               }
@@ -583,6 +585,7 @@ function HeroMentorshipVideoSplit({
     ] });
   }, [
     videoSlot,
+    modalVideo,
     videoThumbnail,
     videoLabel,
     videoAspectRatio,
@@ -680,12 +683,16 @@ function HeroMentorshipVideoSplit({
               children: /* @__PURE__ */ jsx(
                 Video,
                 {
-                  src: videoUrl,
+                  src: modalVideo?.video?.src || videoUrl,
+                  masterPlaylistUrl: modalVideo?.video?.masterPlaylistUrl,
+                  fallbackSrc: modalVideo?.video?.fallbackSrc,
+                  poster: modalVideo?.video?.poster || modalVideo?.image?.src,
                   controls: true,
                   autoPlay: true,
                   skinClasses: skinClasses || void 0,
                   skinStyle: skinStyle || void 0,
-                  className: "h-full w-full rounded-lg"
+                  className: "h-full w-full rounded-lg",
+                  ...modalVideo?.video
                 }
               )
             }

package/dist/hero-presentation-platform-video.cjs

@@ -512,6 +512,7 @@ function HeroPresentationPlatformVideo({
   actions,
   actionsSlot,
   actionsClassName,
+  backgroundVideo,
   videoSrc,
   videoSlot,
   background,
@@ -580,7 +581,10 @@ function HeroPresentationPlatformVideo({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           video.Video,
           {
-            src: videoSrc,
+            src: backgroundVideo?.video?.src || videoSrc,
+            masterPlaylistUrl: backgroundVideo?.video?.masterPlaylistUrl,
+            fallbackSrc: backgroundVideo?.video?.fallbackSrc,
+            poster: backgroundVideo?.video?.poster || backgroundVideo?.image?.src,
             autoPlay: true,
             loop: true,
             muted: true,
@@ -588,12 +592,13 @@ function HeroPresentationPlatformVideo({
             controls: false,
             "data-wf-ignore": "true",
             "data-object-fit": "cover",
-            className: "h-full w-full rounded-tl-xl object-cover"
+            className: "h-full w-full rounded-tl-xl object-cover",
+            ...backgroundVideo?.video
           }
         )
       }
     );
-  }, [videoSlot, videoSrc, videoClassName]);
+  }, [videoSlot, backgroundVideo, videoSrc, videoClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/hero-presentation-platform-video.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
-import { A as ActionConfig } from './blocks-DCvdF54D.cjs';
+import { A as ActionConfig, M as MediaItem } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -28,13 +28,18 @@ interface HeroPresentationPlatformVideoProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Video source URL
+     * Background video configuration
      */
-    videoSrc?: string;
+    backgroundVideo?: MediaItem;
+    /**
+     * Custom slot for video (overrides backgroundVideo prop)
+     */
+    videoSlot?: React.ReactNode;
     /**
-     * Custom slot for video (overrides videoSrc prop)
+     * @deprecated Use backgroundVideo instead
      */
-    videoSlot?: React.ReactNode; /**
+    videoSrc?: string;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -81,6 +86,6 @@ interface HeroPresentationPlatformVideoProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroPresentationPlatformVideo({ sectionId, subtitle, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, videoClassName, }: HeroPresentationPlatformVideoProps): React.JSX.Element;
+declare function HeroPresentationPlatformVideo({ sectionId, subtitle, heading, description, actions, actionsSlot, actionsClassName, backgroundVideo, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, videoClassName, }: HeroPresentationPlatformVideoProps): React.JSX.Element;
 
 export { HeroPresentationPlatformVideo, type HeroPresentationPlatformVideoProps };

package/dist/hero-presentation-platform-video.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
-import { A as ActionConfig } from './blocks-DCvdF54D.js';
+import { A as ActionConfig, M as MediaItem } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -28,13 +28,18 @@ interface HeroPresentationPlatformVideoProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Video source URL
+     * Background video configuration
      */
-    videoSrc?: string;
+    backgroundVideo?: MediaItem;
+    /**
+     * Custom slot for video (overrides backgroundVideo prop)
+     */
+    videoSlot?: React.ReactNode;
     /**
-     * Custom slot for video (overrides videoSrc prop)
+     * @deprecated Use backgroundVideo instead
      */
-    videoSlot?: React.ReactNode; /**
+    videoSrc?: string;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -81,6 +86,6 @@ interface HeroPresentationPlatformVideoProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroPresentationPlatformVideo({ sectionId, subtitle, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, videoClassName, }: HeroPresentationPlatformVideoProps): React.JSX.Element;
+declare function HeroPresentationPlatformVideo({ sectionId, subtitle, heading, description, actions, actionsSlot, actionsClassName, backgroundVideo, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, videoClassName, }: HeroPresentationPlatformVideoProps): React.JSX.Element;
 
 export { HeroPresentationPlatformVideo, type HeroPresentationPlatformVideoProps };

package/dist/hero-presentation-platform-video.js

@@ -491,6 +491,7 @@ function HeroPresentationPlatformVideo({
   actions,
   actionsSlot,
   actionsClassName,
+  backgroundVideo,
   videoSrc,
   videoSlot,
   background,
@@ -559,7 +560,10 @@ function HeroPresentationPlatformVideo({
         children: /* @__PURE__ */ jsx(
           Video,
           {
-            src: videoSrc,
+            src: backgroundVideo?.video?.src || videoSrc,
+            masterPlaylistUrl: backgroundVideo?.video?.masterPlaylistUrl,
+            fallbackSrc: backgroundVideo?.video?.fallbackSrc,
+            poster: backgroundVideo?.video?.poster || backgroundVideo?.image?.src,
             autoPlay: true,
             loop: true,
             muted: true,
@@ -567,12 +571,13 @@ function HeroPresentationPlatformVideo({
             controls: false,
             "data-wf-ignore": "true",
             "data-object-fit": "cover",
-            className: "h-full w-full rounded-tl-xl object-cover"
+            className: "h-full w-full rounded-tl-xl object-cover",
+            ...backgroundVideo?.video
           }
         )
       }
     );
-  }, [videoSlot, videoSrc, videoClassName]);
+  }, [videoSlot, backgroundVideo, videoSrc, videoClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/hero-productivity-launcher-video.cjs

@@ -400,6 +400,7 @@ function HeroProductivityLauncherVideo({
   actionsSlot,
   versionInfo,
   versionInfoSlot,
+  backgroundVideo,
   videoSrc,
   videoSlot,
   background,
@@ -454,16 +455,20 @@ function HeroProductivityLauncherVideo({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       video.Video,
       {
-        src: videoSrc,
+        src: backgroundVideo?.video?.src || videoSrc,
+        masterPlaylistUrl: backgroundVideo?.video?.masterPlaylistUrl,
+        fallbackSrc: backgroundVideo?.video?.fallbackSrc,
+        poster: backgroundVideo?.video?.poster || backgroundVideo?.image?.src,
         loop: true,
         muted: true,
         autoPlay: true,
         playsInline: true,
         controls: false,
-        className: "block size-full object-cover object-center brightness-50"
+        className: "block size-full object-cover object-center brightness-50",
+        ...backgroundVideo?.video
       }
     ) });
-  }, [videoSlot, videoSrc]);
+  }, [videoSlot, backgroundVideo, videoSrc]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/hero-productivity-launcher-video.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
-import { A as ActionConfig } from './blocks-DCvdF54D.cjs';
+import { A as ActionConfig, M as MediaItem } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -50,13 +50,18 @@ interface HeroProductivityLauncherVideoProps {
      */
     versionInfoSlot?: React.ReactNode;
     /**
-     * Video source URL
+     * Background video configuration
      */
-    videoSrc?: string;
+    backgroundVideo?: MediaItem;
+    /**
+     * Custom slot for video (overrides backgroundVideo prop)
+     */
+    videoSlot?: React.ReactNode;
     /**
-     * Custom slot for video (overrides videoSrc prop)
+     * @deprecated Use backgroundVideo instead
      */
-    videoSlot?: React.ReactNode; /**
+    videoSrc?: string;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -95,6 +100,6 @@ interface HeroProductivityLauncherVideoProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroProductivityLauncherVideo({ sectionId, heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, videoSrc, videoSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
+declare function HeroProductivityLauncherVideo({ sectionId, heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, backgroundVideo, videoSrc, videoSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
 
 export { HeroProductivityLauncherVideo, type HeroProductivityLauncherVideoProps };

package/dist/hero-productivity-launcher-video.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
-import { A as ActionConfig } from './blocks-DCvdF54D.js';
+import { A as ActionConfig, M as MediaItem } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -50,13 +50,18 @@ interface HeroProductivityLauncherVideoProps {
      */
     versionInfoSlot?: React.ReactNode;
     /**
-     * Video source URL
+     * Background video configuration
      */
-    videoSrc?: string;
+    backgroundVideo?: MediaItem;
+    /**
+     * Custom slot for video (overrides backgroundVideo prop)
+     */
+    videoSlot?: React.ReactNode;
     /**
-     * Custom slot for video (overrides videoSrc prop)
+     * @deprecated Use backgroundVideo instead
      */
-    videoSlot?: React.ReactNode; /**
+    videoSrc?: string;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -95,6 +100,6 @@ interface HeroProductivityLauncherVideoProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroProductivityLauncherVideo({ sectionId, heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, videoSrc, videoSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
+declare function HeroProductivityLauncherVideo({ sectionId, heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, backgroundVideo, videoSrc, videoSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
 
 export { HeroProductivityLauncherVideo, type HeroProductivityLauncherVideoProps };

package/dist/hero-productivity-launcher-video.js

@@ -394,6 +394,7 @@ function HeroProductivityLauncherVideo({
   actionsSlot,
   versionInfo,
   versionInfoSlot,
+  backgroundVideo,
   videoSrc,
   videoSlot,
   background,
@@ -448,16 +449,20 @@ function HeroProductivityLauncherVideo({
     return /* @__PURE__ */ jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsx(
       Video,
       {
-        src: videoSrc,
+        src: backgroundVideo?.video?.src || videoSrc,
+        masterPlaylistUrl: backgroundVideo?.video?.masterPlaylistUrl,
+        fallbackSrc: backgroundVideo?.video?.fallbackSrc,
+        poster: backgroundVideo?.video?.poster || backgroundVideo?.image?.src,
         loop: true,
         muted: true,
         autoPlay: true,
         playsInline: true,
         controls: false,
-        className: "block size-full object-cover object-center brightness-50"
+        className: "block size-full object-cover object-center brightness-50",
+        ...backgroundVideo?.video
       }
     ) });
-  }, [videoSlot, videoSrc]);
+  }, [videoSlot, backgroundVideo, videoSrc]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/hero-software-growth-video-dialog.cjs

@@ -547,6 +547,8 @@ function HeroSoftwareGrowthVideoDialog({
   actions,
   showcaseImages,
   showcaseImagesSlot,
+  modalVideo,
+  videoDialogTitle,
   videoDialog,
   onVideoClick,
   background,
@@ -664,7 +666,7 @@ function HeroSoftwareGrowthVideoDialog({
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row flex-wrap gap-4", children: [
-              videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+              videoAction && (modalVideo || videoDialog?.videoUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
                 ActionComponent,
                 {
                   action: {
@@ -687,7 +689,7 @@ function HeroSoftwareGrowthVideoDialog({
           videoAspectRatio === "vertical" ? "sm:max-w-100" : "sm:max-w-200"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoDialog?.title }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoDialogTitle || videoDialog?.title }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -695,12 +697,16 @@ function HeroSoftwareGrowthVideoDialog({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 video.Video,
                 {
-                  src: videoDialog?.videoUrl,
+                  src: modalVideo?.video?.src || videoDialog?.videoUrl,
+                  masterPlaylistUrl: modalVideo?.video?.masterPlaylistUrl,
+                  fallbackSrc: modalVideo?.video?.fallbackSrc,
+                  poster: modalVideo?.video?.poster || modalVideo?.image?.src,
                   controls: true,
                   autoPlay: true,
                   skinClasses: skinClasses || void 0,
                   skinStyle: skinStyle || void 0,
-                  className: "h-full w-full rounded-lg"
+                  className: "h-full w-full rounded-lg",
+                  ...modalVideo?.video
                 }
               )
             }

package/dist/hero-software-growth-video-dialog.d.cts

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
+import { A as ActionConfig, I as ImageItem, M as MediaItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
 
+/**
+ * @deprecated Use modalVideo prop with MediaItem type instead
+ */
 interface VideoDialogConfig {
     /**
      * Dialog title
@@ -42,7 +45,15 @@ interface HeroSoftwareGrowthVideoDialogProps {
      */
     showcaseImagesSlot?: React.ReactNode;
     /**
-     * Video dialog configuration
+     * Video configuration for modal/dialog
+     */
+    modalVideo?: MediaItem;
+    /**
+     * Video dialog title
+     */
+    videoDialogTitle?: string;
+    /**
+     * @deprecated Use modalVideo instead
      */
     videoDialog?: VideoDialogConfig;
     /**
@@ -94,6 +105,6 @@ interface HeroSoftwareGrowthVideoDialogProps {
      */
     videoAspectRatio?: "horizontal" | "vertical";
 }
-declare function HeroSoftwareGrowthVideoDialog({ videoAspectRatio, heading, description, videoAction, actions, showcaseImages, showcaseImagesSlot, videoDialog, onVideoClick, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, showcaseClassName, optixFlowConfig, }: HeroSoftwareGrowthVideoDialogProps): React.JSX.Element;
+declare function HeroSoftwareGrowthVideoDialog({ videoAspectRatio, heading, description, videoAction, actions, showcaseImages, showcaseImagesSlot, modalVideo, videoDialogTitle, videoDialog, onVideoClick, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, showcaseClassName, optixFlowConfig, }: HeroSoftwareGrowthVideoDialogProps): React.JSX.Element;
 
 export { HeroSoftwareGrowthVideoDialog, type HeroSoftwareGrowthVideoDialogProps };

package/dist/hero-software-growth-video-dialog.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
+import { A as ActionConfig, I as ImageItem, M as MediaItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
 
+/**
+ * @deprecated Use modalVideo prop with MediaItem type instead
+ */
 interface VideoDialogConfig {
     /**
      * Dialog title
@@ -42,7 +45,15 @@ interface HeroSoftwareGrowthVideoDialogProps {
      */
     showcaseImagesSlot?: React.ReactNode;
     /**
-     * Video dialog configuration
+     * Video configuration for modal/dialog
+     */
+    modalVideo?: MediaItem;
+    /**
+     * Video dialog title
+     */
+    videoDialogTitle?: string;
+    /**
+     * @deprecated Use modalVideo instead
      */
     videoDialog?: VideoDialogConfig;
     /**
@@ -94,6 +105,6 @@ interface HeroSoftwareGrowthVideoDialogProps {
      */
     videoAspectRatio?: "horizontal" | "vertical";
 }
-declare function HeroSoftwareGrowthVideoDialog({ videoAspectRatio, heading, description, videoAction, actions, showcaseImages, showcaseImagesSlot, videoDialog, onVideoClick, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, showcaseClassName, optixFlowConfig, }: HeroSoftwareGrowthVideoDialogProps): React.JSX.Element;
+declare function HeroSoftwareGrowthVideoDialog({ videoAspectRatio, heading, description, videoAction, actions, showcaseImages, showcaseImagesSlot, modalVideo, videoDialogTitle, videoDialog, onVideoClick, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, showcaseClassName, optixFlowConfig, }: HeroSoftwareGrowthVideoDialogProps): React.JSX.Element;
 
 export { HeroSoftwareGrowthVideoDialog, type HeroSoftwareGrowthVideoDialogProps };

package/dist/hero-software-growth-video-dialog.js

@@ -524,6 +524,8 @@ function HeroSoftwareGrowthVideoDialog({
   actions,
   showcaseImages,
   showcaseImagesSlot,
+  modalVideo,
+  videoDialogTitle,
   videoDialog,
   onVideoClick,
   background,
@@ -641,7 +643,7 @@ function HeroSoftwareGrowthVideoDialog({
               }
             ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row flex-wrap gap-4", children: [
-              videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsx(
+              videoAction && (modalVideo || videoDialog?.videoUrl) ? /* @__PURE__ */ jsx(
                 ActionComponent,
                 {
                   action: {
@@ -664,7 +666,7 @@ function HeroSoftwareGrowthVideoDialog({
           videoAspectRatio === "vertical" ? "sm:max-w-100" : "sm:max-w-200"
         ),
         children: [
-          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoDialog?.title }) }),
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoDialogTitle || videoDialog?.title }) }),
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -672,12 +674,16 @@ function HeroSoftwareGrowthVideoDialog({
               children: /* @__PURE__ */ jsx(
                 Video,
                 {
-                  src: videoDialog?.videoUrl,
+                  src: modalVideo?.video?.src || videoDialog?.videoUrl,
+                  masterPlaylistUrl: modalVideo?.video?.masterPlaylistUrl,
+                  fallbackSrc: modalVideo?.video?.fallbackSrc,
+                  poster: modalVideo?.video?.poster || modalVideo?.image?.src,
                   controls: true,
                   autoPlay: true,
                   skinClasses: skinClasses || void 0,
                   skinStyle: skinStyle || void 0,
-                  className: "h-full w-full rounded-lg"
+                  className: "h-full w-full rounded-lg",
+                  ...modalVideo?.video
                 }
               )
             }

package/dist/hero-video-background-dark.cjs

@@ -559,6 +559,7 @@ function HeroVideoBackgroundDark({
   actions,
   actionsSlot,
   actionsClassName,
+  backgroundVideo,
   videoSrc,
   videoSlot,
   background,
@@ -579,18 +580,22 @@ function HeroVideoBackgroundDark({
       /* @__PURE__ */ jsxRuntime.jsx(
         video.Video,
         {
-          src: videoSrc,
+          src: backgroundVideo?.video?.src || videoSrc,
+          masterPlaylistUrl: backgroundVideo?.video?.masterPlaylistUrl,
+          fallbackSrc: backgroundVideo?.video?.fallbackSrc,
+          poster: backgroundVideo?.video?.poster || backgroundVideo?.image?.src,
           loop: true,
           playsInline: true,
           autoPlay: true,
           muted: true,
           controls: false,
-          className: "absolute top-0 left-0 size-full object-cover"
+          className: "absolute top-0 left-0 size-full object-cover",
+          ...backgroundVideo?.video
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, { intensity: videoOverlayIntensity })
     ] });
-  }, [videoSlot, videoSrc, videoOverlayIntensity]);
+  }, [videoSlot, backgroundVideo, videoSrc, videoOverlayIntensity]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/hero-video-background-dark.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
-import { A as ActionConfig } from './blocks-DCvdF54D.cjs';
+import { A as ActionConfig, M as MediaItem } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -32,13 +32,17 @@ interface HeroVideoBackgroundDarkProps {
      */
     actionsClassName?: string;
     /**
-     * Video source URL
+     * Background video configuration
      */
-    videoSrc?: string;
+    backgroundVideo?: MediaItem;
     /**
-     * Custom slot for video (overrides videoSrc prop)
+     * Custom slot for video (overrides backgroundVideo prop)
      */
     videoSlot?: React.ReactNode;
+    /**
+     * @deprecated Use backgroundVideo instead
+     */
+    videoSrc?: string;
     /**
      * Intensity of the gradient overlay on the video
      * @default "high"
@@ -88,6 +92,6 @@ interface HeroVideoBackgroundDarkProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroVideoBackgroundDark({ sectionId, badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, videoOverlayIntensity, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
+declare function HeroVideoBackgroundDark({ sectionId, badgeText, heading, description, actions, actionsSlot, actionsClassName, backgroundVideo, videoSrc, videoSlot, background, videoBrightness, videoOverlayIntensity, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
 
 export { HeroVideoBackgroundDark, type HeroVideoBackgroundDarkProps };

package/dist/hero-video-background-dark.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
-import { A as ActionConfig } from './blocks-DCvdF54D.js';
+import { A as ActionConfig, M as MediaItem } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -32,13 +32,17 @@ interface HeroVideoBackgroundDarkProps {
      */
     actionsClassName?: string;
     /**
-     * Video source URL
+     * Background video configuration
      */
-    videoSrc?: string;
+    backgroundVideo?: MediaItem;
     /**
-     * Custom slot for video (overrides videoSrc prop)
+     * Custom slot for video (overrides backgroundVideo prop)
      */
     videoSlot?: React.ReactNode;
+    /**
+     * @deprecated Use backgroundVideo instead
+     */
+    videoSrc?: string;
     /**
      * Intensity of the gradient overlay on the video
      * @default "high"
@@ -88,6 +92,6 @@ interface HeroVideoBackgroundDarkProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroVideoBackgroundDark({ sectionId, badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, videoOverlayIntensity, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
+declare function HeroVideoBackgroundDark({ sectionId, badgeText, heading, description, actions, actionsSlot, actionsClassName, backgroundVideo, videoSrc, videoSlot, background, videoBrightness, videoOverlayIntensity, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
 
 export { HeroVideoBackgroundDark, type HeroVideoBackgroundDarkProps };