@opensite/ui 3.1.0 → 3.1.2

package/dist/hero-startup-launch-cta.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
+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 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-stats-social-proof.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
-import { A as ActionConfig, k as StatItem, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
+import { A as ActionConfig, k as StatItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-stats-social-proof.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { A as ActionConfig, k as StatItem, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
+import { A as ActionConfig, k as StatItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-task-timer-animated.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
+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 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-task-timer-animated.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
+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 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-tech-carousel.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
-import { O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
+import { O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-tech-carousel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { O as OptixFlowConfig } from './blocks-DL92rOxr.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
+import { O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-testimonial-image-grid.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
-import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
+import { A as ActionConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-testimonial-image-grid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { A as ActionConfig } from './blocks-DL92rOxr.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
+import { A as ActionConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-therapy-testimonial-grid.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
+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 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-therapy-testimonial-grid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
+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 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-ui-library-showcase.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
-import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
+import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-ui-library-showcase.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
+import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

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

@@ -559,6 +559,7 @@ function HeroVideoBackgroundDark({
   actions,
   actionsSlot,
   actionsClassName,
+  backgroundVideo,
   videoSrc,
   videoSlot,
   background,
@@ -579,17 +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,
-          className: "absolute top-0 left-0 size-full object-cover"
+          controls: false,
+          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-D8cbIf_y.cjs';
-import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.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-qC2HCInM.js';
-import { A as ActionConfig } from './blocks-DL92rOxr.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.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 };

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

@@ -553,6 +553,7 @@ function HeroVideoBackgroundDark({
   actions,
   actionsSlot,
   actionsClassName,
+  backgroundVideo,
   videoSrc,
   videoSlot,
   background,
@@ -573,17 +574,22 @@ function HeroVideoBackgroundDark({
       /* @__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,
           playsInline: true,
           autoPlay: true,
           muted: true,
-          className: "absolute top-0 left-0 size-full object-cover"
+          controls: false,
+          className: "absolute top-0 left-0 size-full object-cover",
+          ...backgroundVideo?.video
         }
       ),
       /* @__PURE__ */ jsx(GradientOverlay, { intensity: videoOverlayIntensity })
     ] });
-  }, [videoSlot, videoSrc, videoOverlayIntensity]);
+  }, [videoSlot, backgroundVideo, videoSrc, videoOverlayIntensity]);
   return /* @__PURE__ */ jsx(
     Section,
     {

package/dist/{hero-video-dialog-gradient-B1ZLSgK6.d.cts → hero-video-dialog-gradient-DBQ2Iqe3.d.ts}

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
+import { A as ActionConfig, I as ImageItem, M as MediaItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 
+/**
+ * @deprecated Use modalVideo prop with MediaItem type instead
+ */
 interface VideoDialogConfig {
     /**
      * Dialog title
@@ -38,7 +41,15 @@ interface HeroVideoDialogGradientProps {
      */
     imageSlot?: 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 HeroVideoDialogGradientProps {
      */
     actionsClassName?: string;
 }
-declare function HeroVideoDialogGradient({ videoAspectRatio, heading, description, actions, videoAction, image, imageSlot, videoDialog, background, containerClassName, spacing, pattern, onVideoClick, patternOpacity, actionsClassName, className, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroVideoDialogGradientProps): React.JSX.Element;
+declare function HeroVideoDialogGradient({ videoAspectRatio, heading, description, actions, videoAction, image, imageSlot, modalVideo, videoDialogTitle, videoDialog, background, containerClassName, spacing, pattern, onVideoClick, patternOpacity, actionsClassName, className, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroVideoDialogGradientProps): React.JSX.Element;
 
 export { HeroVideoDialogGradient as H, type VideoDialogConfig as V, type HeroVideoDialogGradientProps as a };

package/dist/{hero-video-dialog-gradient-D5SMQTSB.d.ts → hero-video-dialog-gradient-z-muf_Dc.d.cts}

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
+import { A as ActionConfig, I as ImageItem, M as MediaItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 
+/**
+ * @deprecated Use modalVideo prop with MediaItem type instead
+ */
 interface VideoDialogConfig {
     /**
      * Dialog title
@@ -38,7 +41,15 @@ interface HeroVideoDialogGradientProps {
      */
     imageSlot?: 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 HeroVideoDialogGradientProps {
      */
     actionsClassName?: string;
 }
-declare function HeroVideoDialogGradient({ videoAspectRatio, heading, description, actions, videoAction, image, imageSlot, videoDialog, background, containerClassName, spacing, pattern, onVideoClick, patternOpacity, actionsClassName, className, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroVideoDialogGradientProps): React.JSX.Element;
+declare function HeroVideoDialogGradient({ videoAspectRatio, heading, description, actions, videoAction, image, imageSlot, modalVideo, videoDialogTitle, videoDialog, background, containerClassName, spacing, pattern, onVideoClick, patternOpacity, actionsClassName, className, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroVideoDialogGradientProps): React.JSX.Element;
 
 export { HeroVideoDialogGradient as H, type VideoDialogConfig as V, type HeroVideoDialogGradientProps as a };

package/dist/hero-video-dialog-gradient.cjs

@@ -6,6 +6,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
 var video = require('@page-speed/video');
+var skins = require('@page-speed/skins');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var jsxRuntime = require('react/jsx-runtime');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -546,6 +547,8 @@ function HeroVideoDialogGradient({
   videoAction,
   image,
   imageSlot,
+  modalVideo,
+  videoDialogTitle,
   videoDialog,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
@@ -561,6 +564,14 @@ function HeroVideoDialogGradient({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = React.useState(false);
+  const [skinClasses, setSkinClasses] = React.useState(null);
+  const [skinStyle, setSkinStyle] = React.useState(null);
+  React.useEffect(() => {
+    skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      setSkinClasses(skins.resolveVideoClasses(skin));
+      setSkinStyle(skins.getSkinStyleObject(skin));
+    });
+  }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
       onVideoClick();
@@ -627,7 +638,7 @@ function HeroVideoDialogGradient({
                   actionsClassName
                 ),
                 children: [
-                  videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  videoAction && (modalVideo || videoDialog?.videoUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
                     ActionComponent,
                     {
                       action: {
@@ -652,7 +663,7 @@ function HeroVideoDialogGradient({
           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",
             {
@@ -660,10 +671,16 @@ function HeroVideoDialogGradient({
               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,
-                  className: "h-full w-full rounded-lg"
+                  skinClasses: skinClasses || void 0,
+                  skinStyle: skinStyle || void 0,
+                  className: "h-full w-full rounded-lg",
+                  ...modalVideo?.video
                 }
               )
             }

package/dist/hero-video-dialog-gradient.d.cts

@@ -1,7 +1,7 @@
-export { H as HeroVideoDialogGradient, a as HeroVideoDialogGradientProps } from './hero-video-dialog-gradient-B1ZLSgK6.cjs';
+export { H as HeroVideoDialogGradient, a as HeroVideoDialogGradientProps } from './hero-video-dialog-gradient-z-muf_Dc.cjs';
 import 'react';
-import './community-initiatives-D8cbIf_y.cjs';
-import './blocks-DL92rOxr.cjs';
+import './community-initiatives-B4p2JldF.cjs';
+import './blocks-DCvdF54D.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';

package/dist/hero-video-dialog-gradient.d.ts

@@ -1,7 +1,7 @@
-export { H as HeroVideoDialogGradient, a as HeroVideoDialogGradientProps } from './hero-video-dialog-gradient-D5SMQTSB.js';
+export { H as HeroVideoDialogGradient, a as HeroVideoDialogGradientProps } from './hero-video-dialog-gradient-DBQ2Iqe3.js';
 import 'react';
-import './community-initiatives-qC2HCInM.js';
-import './blocks-DL92rOxr.js';
+import './community-initiatives--8cXayNa.js';
+import './blocks-DCvdF54D.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';

package/dist/hero-video-dialog-gradient.js

@@ -1,10 +1,11 @@
 "use client";
 import * as React from 'react';
-import React__default, { useState, useMemo, Fragment } from 'react';
+import React__default, { useState, useEffect, useMemo, Fragment } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { Video } from '@page-speed/video';
+import { loadSkinFromJsDelivr, resolveVideoClasses, getSkinStyleObject } from '@page-speed/skins';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -523,6 +524,8 @@ function HeroVideoDialogGradient({
   videoAction,
   image,
   imageSlot,
+  modalVideo,
+  videoDialogTitle,
   videoDialog,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
@@ -538,6 +541,14 @@ function HeroVideoDialogGradient({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = useState(false);
+  const [skinClasses, setSkinClasses] = useState(null);
+  const [skinStyle, setSkinStyle] = useState(null);
+  useEffect(() => {
+    loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      setSkinClasses(resolveVideoClasses(skin));
+      setSkinStyle(getSkinStyleObject(skin));
+    });
+  }, []);
   const handleVideoClick = () => {
     if (onVideoClick) {
       onVideoClick();
@@ -604,7 +615,7 @@ function HeroVideoDialogGradient({
                   actionsClassName
                 ),
                 children: [
-                  videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsx(
+                  videoAction && (modalVideo || videoDialog?.videoUrl) ? /* @__PURE__ */ jsx(
                     ActionComponent,
                     {
                       action: {
@@ -629,7 +640,7 @@ function HeroVideoDialogGradient({
           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",
             {
@@ -637,10 +648,16 @@ function HeroVideoDialogGradient({
               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,
-                  className: "h-full w-full rounded-lg"
+                  skinClasses: skinClasses || void 0,
+                  skinStyle: skinStyle || void 0,
+                  className: "h-full w-full rounded-lg",
+                  ...modalVideo?.video
                 }
               )
             }

package/dist/hero-video-overlay-stars.cjs

@@ -499,6 +499,7 @@ function HeroVideoOverlayStars({
   contentClassName,
   className,
   headingClassName,
+  backgroundVideo,
   videoSrc,
   videoSlot
 }) {
@@ -516,15 +517,20 @@ function HeroVideoOverlayStars({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 size-full before:absolute brightness-50", 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,
         muted: true,
         autoPlay: true,
         loop: true,
+        playsInline: true,
         controls: false,
-        className: "size-full object-cover object-center"
+        className: "size-full object-cover object-center",
+        ...backgroundVideo?.video
       }
     ) });
-  }, [videoSlot, videoSrc]);
+  }, [videoSlot, backgroundVideo, videoSrc]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/hero-video-overlay-stars.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
-import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
+import { A as ActionConfig, M as MediaItem } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -73,13 +73,17 @@ interface HeroVideoOverlayStarsProps {
      */
     headingClassName?: string;
     /**
-     * Video source URL
+     * Background video configuration
      */
-    videoSrc?: string;
+    backgroundVideo?: MediaItem;
     /**
-     * Custom slot for video background (overrides videoSrc)
+     * Custom slot for video background (overrides backgroundVideo)
      */
     videoSlot?: React.ReactNode;
+    /**
+     * @deprecated Use backgroundVideo instead
+     */
+    videoSrc?: string;
     /**
      * Additional CSS classes for the actions container
      */
@@ -99,6 +103,6 @@ interface HeroVideoOverlayStarsProps {
  * HeroVideoOverlayStars - A full-screen hero with video background, gradient text heading,
  * prominent CTA button, and star rating trust indicator. Ideal for product launches.
  */
-declare function HeroVideoOverlayStars({ sectionId, heading, actions, actionsSlot, actionsClassName, description, descriptionClassName, trust, trustSlot, background, spacing, pattern, patternOpacity, containerClassName, contentClassName, className, headingClassName, videoSrc, videoSlot, }: HeroVideoOverlayStarsProps): React.JSX.Element;
+declare function HeroVideoOverlayStars({ sectionId, heading, actions, actionsSlot, actionsClassName, description, descriptionClassName, trust, trustSlot, background, spacing, pattern, patternOpacity, containerClassName, contentClassName, className, headingClassName, backgroundVideo, videoSrc, videoSlot, }: HeroVideoOverlayStarsProps): React.JSX.Element;
 
 export { HeroVideoOverlayStars, type HeroVideoOverlayStarsProps };

package/dist/hero-video-overlay-stars.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
-import { A as ActionConfig } from './blocks-DL92rOxr.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
+import { A as ActionConfig, M as MediaItem } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -73,13 +73,17 @@ interface HeroVideoOverlayStarsProps {
      */
     headingClassName?: string;
     /**
-     * Video source URL
+     * Background video configuration
      */
-    videoSrc?: string;
+    backgroundVideo?: MediaItem;
     /**
-     * Custom slot for video background (overrides videoSrc)
+     * Custom slot for video background (overrides backgroundVideo)
      */
     videoSlot?: React.ReactNode;
+    /**
+     * @deprecated Use backgroundVideo instead
+     */
+    videoSrc?: string;
     /**
      * Additional CSS classes for the actions container
      */
@@ -99,6 +103,6 @@ interface HeroVideoOverlayStarsProps {
  * HeroVideoOverlayStars - A full-screen hero with video background, gradient text heading,
  * prominent CTA button, and star rating trust indicator. Ideal for product launches.
  */
-declare function HeroVideoOverlayStars({ sectionId, heading, actions, actionsSlot, actionsClassName, description, descriptionClassName, trust, trustSlot, background, spacing, pattern, patternOpacity, containerClassName, contentClassName, className, headingClassName, videoSrc, videoSlot, }: HeroVideoOverlayStarsProps): React.JSX.Element;
+declare function HeroVideoOverlayStars({ sectionId, heading, actions, actionsSlot, actionsClassName, description, descriptionClassName, trust, trustSlot, background, spacing, pattern, patternOpacity, containerClassName, contentClassName, className, headingClassName, backgroundVideo, videoSrc, videoSlot, }: HeroVideoOverlayStarsProps): React.JSX.Element;
 
 export { HeroVideoOverlayStars, type HeroVideoOverlayStarsProps };