@opensite/ui 3.0.9 → 3.1.1

package/dist/registry.cjs

@@ -18,6 +18,8 @@ var integration = require('@page-speed/forms/integration');
 var framerMotion = require('framer-motion');
 var lightbox = require('@page-speed/lightbox');
 var SeparatorPrimitive = require('@radix-ui/react-separator');
+var video = require('@page-speed/video');
+var skins = require('@page-speed/skins');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var maps = require('@page-speed/maps');
 var useEmblaCarousel = require('embla-carousel-react');
@@ -12557,6 +12559,14 @@ function CtaVideoBackgroundHero({
   patternOpacity
 }) {
   const [isModalOpen, setIsModalOpen] = React30__namespace.useState(false);
+  const [skinClasses, setSkinClasses] = React30.useState(null);
+  const [skinStyle, setSkinStyle] = React30.useState(null);
+  React30.useEffect(() => {
+    skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      setSkinClasses(skins.resolveVideoClasses(skin));
+      setSkinStyle(skins.getSkinStyleObject(skin));
+    });
+  }, []);
   const handleOpenModal = () => {
     setIsModalOpen(true);
     onModalOpen?.();
@@ -12636,7 +12646,17 @@ function CtaVideoBackgroundHero({
                   children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
                 }
               ),
-              modalVideoUrl && /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: modalVideoUrl, type: "video/mp4" }) })
+              modalVideoUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                video.Video,
+                {
+                  src: modalVideoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  skinClasses: skinClasses || void 0,
+                  skinStyle: skinStyle || void 0,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             ]
           }
         )
@@ -12662,14 +12682,15 @@ function CtaVideoBackgroundHero({
             ),
             children: [
               backgroundVideoUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                "video",
+                video.Video,
                 {
+                  src: backgroundVideoUrl,
                   autoPlay: true,
                   loop: true,
                   muted: true,
                   playsInline: true,
-                  className: "absolute inset-0 h-full w-full object-cover",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: backgroundVideoUrl, type: "video/mp4" })
+                  controls: false,
+                  className: "absolute inset-0 h-full w-full object-cover"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -42104,13 +42125,18 @@ function FaqSplitHero({
   ]);
   const renderMedia = React30.useMemo(() => {
     if (!mediaItem) return null;
-    const { image, video } = mediaItem;
-    if (video) {
-      const { src, className: videoClassName, ...videoRest } = video;
+    const { image, video: video$1 } = mediaItem;
+    if (video$1) {
+      const { src, className: videoClassName, ...videoRest } = video$1;
       return /* @__PURE__ */ jsxRuntime.jsx(
-        "video",
+        video.Video,
         {
           src,
+          autoPlay: true,
+          loop: true,
+          muted: true,
+          playsInline: true,
+          controls: false,
           className: cn("h-full w-full object-cover", videoClassName),
           ...videoRest
         }
@@ -52567,14 +52593,15 @@ function HeroVideoBackgroundDark({
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "video",
+        video.Video,
         {
+          src: videoSrc,
           loop: true,
           playsInline: true,
-          src: videoSrc,
-          className: "absolute top-0 left-0 size-full object-cover",
           autoPlay: true,
-          muted: true
+          muted: true,
+          controls: false,
+          className: "absolute top-0 left-0 size-full object-cover"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, { intensity: videoOverlayIntensity })
@@ -54437,16 +54464,17 @@ function HeroPresentationPlatformVideo({
           videoClassName
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "video",
+          video.Video,
           {
+            src: videoSrc,
             autoPlay: true,
             loop: true,
             muted: true,
             playsInline: true,
+            controls: false,
             "data-wf-ignore": "true",
             "data-object-fit": "cover",
-            className: "h-full w-full rounded-tl-xl object-cover",
-            children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" })
+            className: "h-full w-full rounded-tl-xl object-cover"
           }
         )
       }
@@ -55080,6 +55108,14 @@ function HeroSoftwareGrowthVideoDialog({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = React30.useState(false);
+  const [skinClasses, setSkinClasses] = React30.useState(null);
+  const [skinStyle, setSkinStyle] = React30.useState(null);
+  React30.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();
@@ -55203,7 +55239,17 @@ function HeroSoftwareGrowthVideoDialog({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                video.Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  skinClasses: skinClasses || void 0,
+                  skinStyle: skinStyle || void 0,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -55239,6 +55285,14 @@ function HeroConversionVideoPlay({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = React30.useState(false);
+  const [skinClasses, setSkinClasses] = React30.useState(null);
+  const [skinStyle, setSkinStyle] = React30.useState(null);
+  React30.useEffect(() => {
+    skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      setSkinClasses(skins.resolveVideoClasses(skin));
+      setSkinStyle(skins.getSkinStyleObject(skin));
+    });
+  }, []);
   const renderActions = React30.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -55375,7 +55429,17 @@ function HeroConversionVideoPlay({
     ),
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-200", children: [
       /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoDialogTitle }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoUrl, type: "video/mp4" }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx(
+        video.Video,
+        {
+          src: videoUrl,
+          controls: true,
+          autoPlay: true,
+          skinClasses: skinClasses || void 0,
+          skinStyle: skinStyle || void 0,
+          className: "h-full w-full rounded-lg"
+        }
+      ) })
     ] }) })
   ] });
 }
@@ -55552,12 +55616,13 @@ function HeroVideoOverlayStars({
   const renderVideo = React30.useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 size-full before:absolute brightness-50", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
+      video.Video,
       {
         src: videoSrc,
         muted: true,
         autoPlay: true,
         loop: true,
+        playsInline: true,
         controls: false,
         className: "size-full object-cover object-center"
       }
@@ -55684,12 +55749,13 @@ function HeroProductivityLauncherVideo({
   const renderVideo = React30.useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
+      video.Video,
       {
         src: videoSrc,
         loop: true,
         muted: true,
         autoPlay: true,
+        playsInline: true,
         controls: false,
         className: "block size-full object-cover object-center brightness-50"
       }
@@ -57010,6 +57076,14 @@ function HeroVideoDialogGradient({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = React30.useState(false);
+  const [skinClasses, setSkinClasses] = React30.useState(null);
+  const [skinStyle, setSkinStyle] = React30.useState(null);
+  React30.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();
@@ -57106,7 +57180,17 @@ function HeroVideoDialogGradient({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                video.Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  skinClasses: skinClasses || void 0,
+                  skinStyle: skinStyle || void 0,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -57990,6 +58074,14 @@ function HeroMentorshipVideoSplit({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = React30.useState(false);
+  const [skinClasses, setSkinClasses] = React30.useState(null);
+  const [skinStyle, setSkinStyle] = React30.useState(null);
+  React30.useEffect(() => {
+    skins.loadSkinFromJsDelivr("0.1.2", "skins/video/base.json").then((skin) => {
+      setSkinClasses(skins.resolveVideoClasses(skin));
+      setSkinStyle(skins.getSkinStyleObject(skin));
+    });
+  }, []);
   const renderAction = React30.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
@@ -58144,7 +58236,17 @@ function HeroMentorshipVideoSplit({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                video.Video,
+                {
+                  src: videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  skinClasses: skinClasses || void 0,
+                  skinStyle: skinStyle || void 0,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -58865,6 +58967,14 @@ function HeroCreativeStudioStacked({
   optixFlowConfig
 }) {
   const [isVideoOpen, setIsVideoOpen] = React30.useState(false);
+  const [skinClasses, setSkinClasses] = React30.useState(null);
+  const [skinStyle, setSkinStyle] = React30.useState(null);
+  React30.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();
@@ -59028,7 +59138,17 @@ function HeroCreativeStudioStacked({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                video.Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  skinClasses: skinClasses || void 0,
+                  skinStyle: skinStyle || void 0,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -82338,19 +82458,16 @@ var VideoSection = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -82506,19 +82623,16 @@ var VideoSection2 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -82655,19 +82769,16 @@ var VideoSection3 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -82814,19 +82925,16 @@ var VideoSection4 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -82958,19 +83066,16 @@ var VideoSection5 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -83102,19 +83207,16 @@ var VideoSection6 = ({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "video",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          video.Video,
           {
             ref: videoRef,
+            src: videoSrc,
             className: `absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out ${isHovered ? "opacity-100" : "opacity-0"}`,
             muted: true,
             loop: true,
             playsInline: true,
-            preload: "metadata",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" }),
-              "Your browser does not support the video tag."
-            ]
+            preload: "metadata"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-foreground/30 transition-all duration-500 group-hover:bg-foreground/20" }),
@@ -87991,7 +88093,7 @@ function ProjectDetailArchitectureCarousel(props) {
               transition: { duration: 0.6, delay: 0.2 },
               className: "mb-16",
               children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "video",
+                video.Video,
                 {
                   src: videoUrl,
                   poster: videoPoster,
@@ -94546,7 +94648,7 @@ function ServicesListVideoShowcase({
                   }
                 ),
                 service.videoUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                  "video",
+                  video.Video,
                   {
                     ref: (el) => {
                       videoRefs.current[index] = el;
@@ -101457,7 +101559,7 @@ function LinkTreeBlock({
               "aria-label": `View ${item.alt || item.type} in lightbox`,
               children: [
                 item.type === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "video",
+                  video.Video,
                   {
                     src: item.src,
                     poster: item.poster,