@opensite/ui 3.1.1 → 3.1.3

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

@@ -424,6 +424,8 @@ function CtaVideoBackgroundHero({
   description,
   actions,
   actionsSlot,
+  modalVideo,
+  backgroundVideo,
   modalVideoUrl,
   backgroundVideoUrl,
   modalSlot,
@@ -530,15 +532,19 @@ function CtaVideoBackgroundHero({
                   children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
                 }
               ),
-              modalVideoUrl && /* @__PURE__ */ jsxRuntime.jsx(
+              (modalVideo || modalVideoUrl) && /* @__PURE__ */ jsxRuntime.jsx(
                 video.Video,
                 {
-                  src: modalVideoUrl,
+                  src: modalVideo?.video?.src || modalVideoUrl,
+                  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
                 }
               )
             ]
@@ -565,16 +571,20 @@ function CtaVideoBackgroundHero({
               videoWrapperClassName
             ),
             children: [
-              backgroundVideoUrl && /* @__PURE__ */ jsxRuntime.jsx(
+              (backgroundVideo || backgroundVideoUrl) && /* @__PURE__ */ jsxRuntime.jsx(
                 video.Video,
                 {
-                  src: backgroundVideoUrl,
+                  src: backgroundVideo?.video?.src || backgroundVideoUrl,
+                  masterPlaylistUrl: backgroundVideo?.video?.masterPlaylistUrl,
+                  fallbackSrc: backgroundVideo?.video?.fallbackSrc,
+                  poster: backgroundVideo?.video?.poster || backgroundVideo?.image?.src,
                   autoPlay: true,
                   loop: true,
                   muted: true,
                   playsInline: true,
                   controls: false,
-                  className: "absolute inset-0 h-full w-full object-cover"
+                  className: "absolute inset-0 h-full w-full object-cover",
+                  ...backgroundVideo?.video
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cta-video-background-hero.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';
@@ -24,11 +24,19 @@ interface CtaVideoBackgroundHeroProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Video URL for the modal
+     * Video configuration for modal/dialog
+     */
+    modalVideo?: MediaItem;
+    /**
+     * Background video configuration
+     */
+    backgroundVideo?: MediaItem;
+    /**
+     * @deprecated Use modalVideo instead
      */
     modalVideoUrl?: string;
     /**
-     * Background video URL
+     * @deprecated Use backgroundVideo instead
      */
     backgroundVideoUrl?: string;
     /**
@@ -112,6 +120,6 @@ interface CtaVideoBackgroundHeroProps {
  * />
  * ```
  */
-declare function CtaVideoBackgroundHero({ sectionId, heading, description, actions, actionsSlot, modalVideoUrl, backgroundVideoUrl, modalSlot, onModalOpen, onModalClose, className, containerClassName, videoWrapperClassName, overlayClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, background, spacing, pattern, patternOpacity, }: CtaVideoBackgroundHeroProps): React.JSX.Element;
+declare function CtaVideoBackgroundHero({ sectionId, heading, description, actions, actionsSlot, modalVideo, backgroundVideo, modalVideoUrl, backgroundVideoUrl, modalSlot, onModalOpen, onModalClose, className, containerClassName, videoWrapperClassName, overlayClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, background, spacing, pattern, patternOpacity, }: CtaVideoBackgroundHeroProps): React.JSX.Element;
 
 export { CtaVideoBackgroundHero, type CtaVideoBackgroundHeroProps };

package/dist/cta-video-background-hero.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';
@@ -24,11 +24,19 @@ interface CtaVideoBackgroundHeroProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Video URL for the modal
+     * Video configuration for modal/dialog
+     */
+    modalVideo?: MediaItem;
+    /**
+     * Background video configuration
+     */
+    backgroundVideo?: MediaItem;
+    /**
+     * @deprecated Use modalVideo instead
      */
     modalVideoUrl?: string;
     /**
-     * Background video URL
+     * @deprecated Use backgroundVideo instead
      */
     backgroundVideoUrl?: string;
     /**
@@ -112,6 +120,6 @@ interface CtaVideoBackgroundHeroProps {
  * />
  * ```
  */
-declare function CtaVideoBackgroundHero({ sectionId, heading, description, actions, actionsSlot, modalVideoUrl, backgroundVideoUrl, modalSlot, onModalOpen, onModalClose, className, containerClassName, videoWrapperClassName, overlayClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, background, spacing, pattern, patternOpacity, }: CtaVideoBackgroundHeroProps): React.JSX.Element;
+declare function CtaVideoBackgroundHero({ sectionId, heading, description, actions, actionsSlot, modalVideo, backgroundVideo, modalVideoUrl, backgroundVideoUrl, modalSlot, onModalOpen, onModalClose, className, containerClassName, videoWrapperClassName, overlayClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, background, spacing, pattern, patternOpacity, }: CtaVideoBackgroundHeroProps): React.JSX.Element;
 
 export { CtaVideoBackgroundHero, type CtaVideoBackgroundHeroProps };

package/dist/cta-video-background-hero.js

@@ -403,6 +403,8 @@ function CtaVideoBackgroundHero({
   description,
   actions,
   actionsSlot,
+  modalVideo,
+  backgroundVideo,
   modalVideoUrl,
   backgroundVideoUrl,
   modalSlot,
@@ -509,15 +511,19 @@ function CtaVideoBackgroundHero({
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
                 }
               ),
-              modalVideoUrl && /* @__PURE__ */ jsx(
+              (modalVideo || modalVideoUrl) && /* @__PURE__ */ jsx(
                 Video,
                 {
-                  src: modalVideoUrl,
+                  src: modalVideo?.video?.src || modalVideoUrl,
+                  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
                 }
               )
             ]
@@ -544,16 +550,20 @@ function CtaVideoBackgroundHero({
               videoWrapperClassName
             ),
             children: [
-              backgroundVideoUrl && /* @__PURE__ */ jsx(
+              (backgroundVideo || backgroundVideoUrl) && /* @__PURE__ */ jsx(
                 Video,
                 {
-                  src: backgroundVideoUrl,
+                  src: backgroundVideo?.video?.src || backgroundVideoUrl,
+                  masterPlaylistUrl: backgroundVideo?.video?.masterPlaylistUrl,
+                  fallbackSrc: backgroundVideo?.video?.fallbackSrc,
+                  poster: backgroundVideo?.video?.poster || backgroundVideo?.image?.src,
                   autoPlay: true,
                   loop: true,
                   muted: true,
                   playsInline: true,
                   controls: false,
-                  className: "absolute inset-0 h-full w-full object-cover"
+                  className: "absolute inset-0 h-full w-full object-cover",
+                  ...backgroundVideo?.video
                 }
               ),
               /* @__PURE__ */ jsx(

package/dist/hero-conversion-video-play.cjs

@@ -652,6 +652,7 @@ function HeroConversionVideoPlay({
   description,
   primaryAction,
   videoButtonLabel = "Play Video",
+  modalVideo,
   videoUrl,
   videoDialogTitle,
   actionsSlot,
@@ -709,7 +710,7 @@ function HeroConversionVideoPlay({
           }
         );
       })(),
-      videoUrl && /* @__PURE__ */ jsxRuntime.jsxs(
+      (modalVideo || videoUrl) && /* @__PURE__ */ jsxRuntime.jsxs(
         pressable.Pressable,
         {
           onClick: () => setIsVideoOpen(true),
@@ -822,12 +823,16 @@ function HeroConversionVideoPlay({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx(
         video.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-conversion-video-play.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, I as ImageItem, L as LogoItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
+import { A as ActionConfig, M as MediaItem, I as ImageItem, L as LogoItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -24,13 +24,17 @@ interface HeroConversionVideoPlayProps {
      */
     videoButtonLabel?: React.ReactNode;
     /**
-     * Video URL for the dialog
+     * Video configuration for modal/dialog
      */
-    videoUrl?: string;
+    modalVideo?: MediaItem;
     /**
      * Video dialog title
      */
     videoDialogTitle?: string;
+    /**
+     * @deprecated Use modalVideo instead
+     */
+    videoUrl?: string;
     /**
      * Custom slot for actions (overrides primaryAction and video button)
      */
@@ -108,6 +112,6 @@ interface HeroConversionVideoPlayProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroConversionVideoPlay({ heading, description, primaryAction, videoButtonLabel, videoUrl, videoDialogTitle, actionsSlot, image, imageSlot, logosTagline, logos, logosSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, logosClassName, optixFlowConfig, }: HeroConversionVideoPlayProps): React.JSX.Element;
+declare function HeroConversionVideoPlay({ heading, description, primaryAction, videoButtonLabel, modalVideo, videoUrl, videoDialogTitle, actionsSlot, image, imageSlot, logosTagline, logos, logosSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, logosClassName, optixFlowConfig, }: HeroConversionVideoPlayProps): React.JSX.Element;
 
 export { HeroConversionVideoPlay, type HeroConversionVideoPlayProps };

package/dist/hero-conversion-video-play.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, I as ImageItem, L as LogoItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
+import { A as ActionConfig, M as MediaItem, I as ImageItem, L as LogoItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -24,13 +24,17 @@ interface HeroConversionVideoPlayProps {
      */
     videoButtonLabel?: React.ReactNode;
     /**
-     * Video URL for the dialog
+     * Video configuration for modal/dialog
      */
-    videoUrl?: string;
+    modalVideo?: MediaItem;
     /**
      * Video dialog title
      */
     videoDialogTitle?: string;
+    /**
+     * @deprecated Use modalVideo instead
+     */
+    videoUrl?: string;
     /**
      * Custom slot for actions (overrides primaryAction and video button)
      */
@@ -108,6 +112,6 @@ interface HeroConversionVideoPlayProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroConversionVideoPlay({ heading, description, primaryAction, videoButtonLabel, videoUrl, videoDialogTitle, actionsSlot, image, imageSlot, logosTagline, logos, logosSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, logosClassName, optixFlowConfig, }: HeroConversionVideoPlayProps): React.JSX.Element;
+declare function HeroConversionVideoPlay({ heading, description, primaryAction, videoButtonLabel, modalVideo, videoUrl, videoDialogTitle, actionsSlot, image, imageSlot, logosTagline, logos, logosSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imageClassName, logosClassName, optixFlowConfig, }: HeroConversionVideoPlayProps): React.JSX.Element;
 
 export { HeroConversionVideoPlay, type HeroConversionVideoPlayProps };

package/dist/hero-conversion-video-play.js

@@ -625,6 +625,7 @@ function HeroConversionVideoPlay({
   description,
   primaryAction,
   videoButtonLabel = "Play Video",
+  modalVideo,
   videoUrl,
   videoDialogTitle,
   actionsSlot,
@@ -682,7 +683,7 @@ function HeroConversionVideoPlay({
           }
         );
       })(),
-      videoUrl && /* @__PURE__ */ jsxs(
+      (modalVideo || videoUrl) && /* @__PURE__ */ jsxs(
         Pressable,
         {
           onClick: () => setIsVideoOpen(true),
@@ -795,12 +796,16 @@ function HeroConversionVideoPlay({
       /* @__PURE__ */ jsx("div", { className: "aspect-video", 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-creative-studio-stacked.cjs

@@ -548,6 +548,8 @@ function HeroCreativeStudioStacked({
   patternClassName,
   actions,
   onVideoClick,
+  modalVideo,
+  videoDialogTitle,
   videoDialog,
   images,
   imagesSlot,
@@ -707,7 +709,7 @@ function HeroCreativeStudioStacked({
                   actionsClassName
                 ),
                 children: [
-                  videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  videoAction && (modalVideo || videoDialog?.videoUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
                     ActionComponent,
                     {
                       action: {
@@ -732,7 +734,7 @@ function HeroCreativeStudioStacked({
           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",
             {
@@ -740,12 +742,16 @@ function HeroCreativeStudioStacked({
               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-creative-studio-stacked.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
-import { V as VideoDialogConfig } from './hero-video-dialog-gradient-DOlgSdif.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
+import { V as VideoDialogConfig } from './hero-video-dialog-gradient-z-muf_Dc.cjs';
+import { A as ActionConfig, M as MediaItem, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -29,7 +29,15 @@ interface HeroCreativeStudioStackedProps {
      */
     videoAction?: ActionConfig;
     /**
-     * Video dialog configuration
+     * Video configuration for modal/dialog
+     */
+    modalVideo?: MediaItem;
+    /**
+     * Video dialog title
+     */
+    videoDialogTitle?: string;
+    /**
+     * @deprecated Use modalVideo instead
      */
     videoDialog?: VideoDialogConfig;
     /**
@@ -105,6 +113,6 @@ interface HeroCreativeStudioStackedProps {
      */
     patternClassName?: string;
 }
-declare function HeroCreativeStudioStacked({ videoAspectRatio, tagline, heading, description, videoAction, patternClassName, actions, onVideoClick, videoDialog, images, imagesSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, taglineClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroCreativeStudioStackedProps): React.JSX.Element;
+declare function HeroCreativeStudioStacked({ videoAspectRatio, tagline, heading, description, videoAction, patternClassName, actions, onVideoClick, modalVideo, videoDialogTitle, videoDialog, images, imagesSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, taglineClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroCreativeStudioStackedProps): React.JSX.Element;
 
 export { HeroCreativeStudioStacked, type HeroCreativeStudioStackedProps };

package/dist/hero-creative-studio-stacked.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
-import { V as VideoDialogConfig } from './hero-video-dialog-gradient-CLamMYZP.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
+import { V as VideoDialogConfig } from './hero-video-dialog-gradient-DBQ2Iqe3.js';
+import { A as ActionConfig, M as MediaItem, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -29,7 +29,15 @@ interface HeroCreativeStudioStackedProps {
      */
     videoAction?: ActionConfig;
     /**
-     * Video dialog configuration
+     * Video configuration for modal/dialog
+     */
+    modalVideo?: MediaItem;
+    /**
+     * Video dialog title
+     */
+    videoDialogTitle?: string;
+    /**
+     * @deprecated Use modalVideo instead
      */
     videoDialog?: VideoDialogConfig;
     /**
@@ -105,6 +113,6 @@ interface HeroCreativeStudioStackedProps {
      */
     patternClassName?: string;
 }
-declare function HeroCreativeStudioStacked({ videoAspectRatio, tagline, heading, description, videoAction, patternClassName, actions, onVideoClick, videoDialog, images, imagesSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, taglineClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroCreativeStudioStackedProps): React.JSX.Element;
+declare function HeroCreativeStudioStacked({ videoAspectRatio, tagline, heading, description, videoAction, patternClassName, actions, onVideoClick, modalVideo, videoDialogTitle, videoDialog, images, imagesSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, taglineClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroCreativeStudioStackedProps): React.JSX.Element;
 
 export { HeroCreativeStudioStacked, type HeroCreativeStudioStackedProps };

package/dist/hero-creative-studio-stacked.js

@@ -525,6 +525,8 @@ function HeroCreativeStudioStacked({
   patternClassName,
   actions,
   onVideoClick,
+  modalVideo,
+  videoDialogTitle,
   videoDialog,
   images,
   imagesSlot,
@@ -684,7 +686,7 @@ function HeroCreativeStudioStacked({
                   actionsClassName
                 ),
                 children: [
-                  videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsx(
+                  videoAction && (modalVideo || videoDialog?.videoUrl) ? /* @__PURE__ */ jsx(
                     ActionComponent,
                     {
                       action: {
@@ -709,7 +711,7 @@ function HeroCreativeStudioStacked({
           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",
             {
@@ -717,12 +719,16 @@ function HeroCreativeStudioStacked({
               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-mentorship-video-split.cjs

@@ -519,6 +519,7 @@ function HeroMentorshipVideoSplit({
   action,
   actionSlot,
   videoLabel,
+  modalVideo,
   videoThumbnail,
   videoUrl,
   videoTitle,
@@ -565,7 +566,8 @@ function HeroMentorshipVideoSplit({
   }, [actionSlot, action]);
   const renderVideoSection = React.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
       videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase opacity-75", children: videoLabel }) : videoLabel),
@@ -583,11 +585,11 @@ function HeroMentorshipVideoSplit({
             /* @__PURE__ */ jsxRuntime.jsx(
               img.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
               }
@@ -606,6 +608,7 @@ function HeroMentorshipVideoSplit({
     ] });
   }, [
     videoSlot,
+    modalVideo,
     videoThumbnail,
     videoLabel,
     videoAspectRatio,
@@ -703,12 +706,16 @@ function HeroMentorshipVideoSplit({
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 video.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-mentorship-video-split.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, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
+import { A as ActionConfig, M as MediaItem, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -28,17 +28,21 @@ interface HeroMentorshipVideoSplitProps {
      */
     videoLabel?: React.ReactNode;
     /**
-     * Video thumbnail image
+     * Video configuration for modal/dialog
      */
-    videoThumbnail?: ImageItem;
-    /**
-     * Video embed URL
-     */
-    videoUrl?: string;
+    modalVideo?: MediaItem;
     /**
      * Video dialog title
      */
     videoTitle?: string;
+    /**
+     * @deprecated Use modalVideo instead
+     */
+    videoThumbnail?: ImageItem;
+    /**
+     * @deprecated Use modalVideo instead
+     */
+    videoUrl?: string;
     /**
      * Custom slot for video section (overrides video props)
      */
@@ -99,6 +103,6 @@ interface HeroMentorshipVideoSplitProps {
      */
     videoAspectRatio?: "horizontal" | "vertical";
 }
-declare function HeroMentorshipVideoSplit({ videoAspectRatio, heading, description, action, actionSlot, videoLabel, videoThumbnail, videoUrl, videoTitle, videoSlot, image, imageSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroMentorshipVideoSplitProps): React.JSX.Element;
+declare function HeroMentorshipVideoSplit({ videoAspectRatio, heading, description, action, actionSlot, videoLabel, modalVideo, videoThumbnail, videoUrl, videoTitle, videoSlot, image, imageSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroMentorshipVideoSplitProps): React.JSX.Element;
 
 export { HeroMentorshipVideoSplit, type HeroMentorshipVideoSplitProps };

package/dist/hero-mentorship-video-split.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, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
+import { A as ActionConfig, M as MediaItem, I as ImageItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -28,17 +28,21 @@ interface HeroMentorshipVideoSplitProps {
      */
     videoLabel?: React.ReactNode;
     /**
-     * Video thumbnail image
+     * Video configuration for modal/dialog
      */
-    videoThumbnail?: ImageItem;
-    /**
-     * Video embed URL
-     */
-    videoUrl?: string;
+    modalVideo?: MediaItem;
     /**
      * Video dialog title
      */
     videoTitle?: string;
+    /**
+     * @deprecated Use modalVideo instead
+     */
+    videoThumbnail?: ImageItem;
+    /**
+     * @deprecated Use modalVideo instead
+     */
+    videoUrl?: string;
     /**
      * Custom slot for video section (overrides video props)
      */
@@ -99,6 +103,6 @@ interface HeroMentorshipVideoSplitProps {
      */
     videoAspectRatio?: "horizontal" | "vertical";
 }
-declare function HeroMentorshipVideoSplit({ videoAspectRatio, heading, description, action, actionSlot, videoLabel, videoThumbnail, videoUrl, videoTitle, videoSlot, image, imageSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroMentorshipVideoSplitProps): React.JSX.Element;
+declare function HeroMentorshipVideoSplit({ videoAspectRatio, heading, description, action, actionSlot, videoLabel, modalVideo, videoThumbnail, videoUrl, videoTitle, videoSlot, image, imageSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroMentorshipVideoSplitProps): React.JSX.Element;
 
 export { HeroMentorshipVideoSplit, type HeroMentorshipVideoSplitProps };