@opensite/ui 3.0.9 → 3.1.0

package/dist/registry.cjs

@@ -18,6 +18,7 @@ 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 AccordionPrimitive = require('@radix-ui/react-accordion');
 var maps = require('@page-speed/maps');
 var useEmblaCarousel = require('embla-carousel-react');
@@ -12636,7 +12637,15 @@ 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,
+                  className: "w-full rounded-lg"
+                }
+              )
             ]
           }
         )
@@ -12662,14 +12671,14 @@ 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" })
+                  className: "absolute inset-0 h-full w-full object-cover"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -42104,11 +42113,11 @@ 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,
           className: cn("h-full w-full object-cover", videoClassName),
@@ -52567,14 +52576,14 @@ 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,
+          className: "absolute top-0 left-0 size-full object-cover"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, { intensity: videoOverlayIntensity })
@@ -54437,16 +54446,16 @@ function HeroPresentationPlatformVideo({
           videoClassName
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "video",
+          video.Video,
           {
+            src: videoSrc,
             autoPlay: true,
             loop: true,
             muted: true,
             playsInline: true,
             "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"
           }
         )
       }
@@ -55203,7 +55212,15 @@ 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,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -55375,7 +55392,15 @@ 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,
+          className: "h-full w-full rounded-lg"
+        }
+      ) })
     ] }) })
   ] });
 }
@@ -55552,7 +55577,7 @@ 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,
@@ -55684,7 +55709,7 @@ 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,
@@ -57106,7 +57131,15 @@ 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,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -58144,7 +58177,15 @@ 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,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -59028,7 +59069,15 @@ 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,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]
@@ -82338,19 +82387,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 +82552,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 +82698,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 +82854,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 +82995,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 +83136,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 +88022,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 +94577,7 @@ function ServicesListVideoShowcase({
                   }
                 ),
                 service.videoUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                  "video",
+                  video.Video,
                   {
                     ref: (el) => {
                       videoRefs.current[index] = el;
@@ -101457,7 +101488,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,