@opensite/ui 3.1.0 → 3.1.2

package/dist/hero-agency-animated-images.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-agency-animated-images.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-ai-powered-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 { 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-ai-powered-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 { 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-announcement-badge.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-announcement-badge.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-architecture-fullscreen.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-architecture-fullscreen.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-badge-image-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-D8cbIf_y.cjs';
-import { 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 { 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-badge-image-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-qC2HCInM.js';
-import { 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 { 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-badge-shadow-overlay.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, 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, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-badge-shadow-overlay.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, 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, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-billing-platform-logos.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, L as LogoItem, 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, L as LogoItem, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-billing-platform-logos.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, L as LogoItem, 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, L as LogoItem, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-business-carousel-dots.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-business-carousel-dots.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-business-operations-mosaic.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-business-operations-mosaic.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-centered-gradient-cta.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, F as FeatureItem } from './blocks-DL92rOxr.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B4p2JldF.cjs';
+import { A as ActionConfig, F as FeatureItem } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-centered-gradient-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, F as FeatureItem } from './blocks-DL92rOxr.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives--8cXayNa.js';
+import { A as ActionConfig, F as FeatureItem } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-centered-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, 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-centered-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, 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-centered-screenshot.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, 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, O as OptixFlowConfig } from './blocks-DCvdF54D.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-centered-screenshot.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, 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, O as OptixFlowConfig } from './blocks-DCvdF54D.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import '@page-speed/pressable';

package/dist/hero-coming-soon-countdown.d.cts

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

package/dist/hero-coming-soon-countdown.d.ts

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

package/dist/hero-community-survey-cta.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-community-survey-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-conversation-intelligence.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-conversation-intelligence.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-conversion-video-play.cjs

@@ -4,6 +4,7 @@
 var React2 = require('react');
 var AutoScroll = require('embla-carousel-auto-scroll');
 var video = require('@page-speed/video');
+var skins = require('@page-speed/skins');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var pressable = require('@page-speed/pressable');
@@ -651,6 +652,7 @@ function HeroConversionVideoPlay({
   description,
   primaryAction,
   videoButtonLabel = "Play Video",
+  modalVideo,
   videoUrl,
   videoDialogTitle,
   actionsSlot,
@@ -674,6 +676,14 @@ function HeroConversionVideoPlay({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = React2.useState(false);
+  const [skinClasses, setSkinClasses] = React2.useState(null);
+  const [skinStyle, setSkinStyle] = React2.useState(null);
+  React2.useEffect(() => {
+    skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      setSkinClasses(skins.resolveVideoClasses(skin));
+      setSkinStyle(skins.getSkinStyleObject(skin));
+    });
+  }, []);
   const renderActions = React2.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -700,7 +710,7 @@ function HeroConversionVideoPlay({
           }
         );
       })(),
-      videoUrl && /* @__PURE__ */ jsxRuntime.jsxs(
+      (modalVideo || videoUrl) && /* @__PURE__ */ jsxRuntime.jsxs(
         pressable.Pressable,
         {
           onClick: () => setIsVideoOpen(true),
@@ -813,10 +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,
-          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-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-D8cbIf_y.cjs';
-import { A as ActionConfig, I as ImageItem, L as LogoItem, 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, 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-qC2HCInM.js';
-import { A as ActionConfig, I as ImageItem, L as LogoItem, 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, 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

@@ -1,8 +1,9 @@
 "use client";
 import * as React2 from 'react';
-import React2__default, { useState, useMemo, Fragment as Fragment$1 } from 'react';
+import React2__default, { useState, useEffect, useMemo, Fragment as Fragment$1 } from 'react';
 import AutoScroll from 'embla-carousel-auto-scroll';
 import { Video } from '@page-speed/video';
+import { loadSkinFromJsDelivr, resolveVideoClasses, getSkinStyleObject } from '@page-speed/skins';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
@@ -624,6 +625,7 @@ function HeroConversionVideoPlay({
   description,
   primaryAction,
   videoButtonLabel = "Play Video",
+  modalVideo,
   videoUrl,
   videoDialogTitle,
   actionsSlot,
@@ -647,6 +649,14 @@ function HeroConversionVideoPlay({
   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 renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -673,7 +683,7 @@ function HeroConversionVideoPlay({
           }
         );
       })(),
-      videoUrl && /* @__PURE__ */ jsxs(
+      (modalVideo || videoUrl) && /* @__PURE__ */ jsxs(
         Pressable,
         {
           onClick: () => setIsVideoOpen(true),
@@ -786,10 +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,
-          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-creative-studio-stacked.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');
@@ -547,6 +548,8 @@ function HeroCreativeStudioStacked({
   patternClassName,
   actions,
   onVideoClick,
+  modalVideo,
+  videoDialogTitle,
   videoDialog,
   images,
   imagesSlot,
@@ -565,6 +568,14 @@ function HeroCreativeStudioStacked({
   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();
@@ -698,7 +709,7 @@ function HeroCreativeStudioStacked({
                   actionsClassName
                 ),
                 children: [
-                  videoAction && videoDialog?.videoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  videoAction && (modalVideo || videoDialog?.videoUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
                     ActionComponent,
                     {
                       action: {
@@ -723,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",
             {
@@ -731,10 +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,
-                  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-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-D8cbIf_y.cjs';
-import { V as VideoDialogConfig } from './hero-video-dialog-gradient-B1ZLSgK6.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 { 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 };