@opensite/ui 3.0.9 → 3.1.0

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

@@ -2,6 +2,7 @@
 'use strict';
 
 var React = require('react');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var pressable = require('@page-speed/pressable');
@@ -520,7 +521,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"
+                }
+              )
             ]
           }
         )
@@ -546,14 +555,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(

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

@@ -1,6 +1,7 @@
 "use client";
 import * as React from 'react';
 import React__default, { useMemo } from 'react';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
@@ -499,7 +500,15 @@ function CtaVideoBackgroundHero({
                   children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
                 }
               ),
-              modalVideoUrl && /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: modalVideoUrl, type: "video/mp4" }) })
+              modalVideoUrl && /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: modalVideoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "w-full rounded-lg"
+                }
+              )
             ]
           }
         )
@@ -525,14 +534,14 @@ function CtaVideoBackgroundHero({
             ),
             children: [
               backgroundVideoUrl && /* @__PURE__ */ jsx(
-                "video",
+                Video,
                 {
+                  src: backgroundVideoUrl,
                   autoPlay: true,
                   loop: true,
                   muted: true,
                   playsInline: true,
-                  className: "absolute inset-0 h-full w-full object-cover",
-                  children: /* @__PURE__ */ jsx("source", { src: backgroundVideoUrl, type: "video/mp4" })
+                  className: "absolute inset-0 h-full w-full object-cover"
                 }
               ),
               /* @__PURE__ */ jsx(

package/dist/faq-split-hero.cjs

@@ -5,6 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
@@ -564,11 +565,11 @@ function FaqSplitHero({
   ]);
   const renderMedia = React.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),

package/dist/faq-split-hero.js

@@ -4,6 +4,7 @@ import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { Icon } from '@page-speed/icon';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -546,7 +547,7 @@ function FaqSplitHero({
     if (video) {
       const { src, className: videoClassName, ...videoRest } = video;
       return /* @__PURE__ */ jsx(
-        "video",
+        Video,
         {
           src,
           className: cn("h-full w-full object-cover", videoClassName),

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

@@ -3,6 +3,7 @@
 
 var React2 = require('react');
 var AutoScroll = require('embla-carousel-auto-scroll');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var pressable = require('@page-speed/pressable');
@@ -809,7 +810,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"
+        }
+      ) })
     ] }) })
   ] });
 }

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

@@ -2,6 +2,7 @@
 import * as React2 from 'react';
 import React2__default, { useState, useMemo, Fragment as Fragment$1 } from 'react';
 import AutoScroll from 'embla-carousel-auto-scroll';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
@@ -782,7 +783,15 @@ function HeroConversionVideoPlay({
     ),
     /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-200", children: [
       /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoDialogTitle }) }),
-      /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
+        Video,
+        {
+          src: videoUrl,
+          controls: true,
+          autoPlay: true,
+          className: "h-full w-full rounded-lg"
+        }
+      ) })
     ] }) })
   ] });
 }

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

@@ -5,6 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var jsxRuntime = require('react/jsx-runtime');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -727,7 +728,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"
+                }
+              )
             }
           )
         ]

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

@@ -4,6 +4,7 @@ import React__default, { useState, 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 * 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';
@@ -704,7 +705,15 @@ function HeroCreativeStudioStacked({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]

package/dist/hero-mentorship-video-split.cjs

@@ -2,6 +2,7 @@
 'use strict';
 
 var React = require('react');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var pressable = require('@page-speed/pressable');
@@ -690,7 +691,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"
+                }
+              )
             }
           )
         ]

package/dist/hero-mentorship-video-split.js

@@ -1,6 +1,7 @@
 "use client";
 import * as React from 'react';
 import React__default, { useState, useMemo, Fragment as Fragment$1 } from 'react';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
@@ -667,7 +668,15 @@ function HeroMentorshipVideoSplit({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]

package/dist/hero-presentation-platform-video.cjs

@@ -2,6 +2,7 @@
 'use strict';
 
 var React4 = require('react');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -577,16 +578,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"
           }
         )
       }

package/dist/hero-presentation-platform-video.js

@@ -1,6 +1,7 @@
 "use client";
 import * as React4 from 'react';
 import React4__default, { useMemo } from 'react';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -556,16 +557,16 @@ function HeroPresentationPlatformVideo({
           videoClassName
         ),
         children: /* @__PURE__ */ jsx(
-          "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__ */ jsx("source", { src: videoSrc, type: "video/mp4" })
+            className: "h-full w-full rounded-tl-xl object-cover"
           }
         )
       }

package/dist/hero-productivity-launcher-video.cjs

@@ -5,6 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var pressable = require('@page-speed/pressable');
+var video = require('@page-speed/video');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -451,7 +452,7 @@ function HeroProductivityLauncherVideo({
   const renderVideo = React.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,

package/dist/hero-productivity-launcher-video.js

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Pressable } from '@page-speed/pressable';
+import { Video } from '@page-speed/video';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // components/blocks/hero/hero-productivity-launcher-video.tsx
@@ -445,7 +446,7 @@ function HeroProductivityLauncherVideo({
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsx(
-      "video",
+      Video,
       {
         src: videoSrc,
         loop: true,

package/dist/hero-software-growth-video-dialog.cjs

@@ -5,6 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var jsxRuntime = require('react/jsx-runtime');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -682,7 +683,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"
+                }
+              )
             }
           )
         ]

package/dist/hero-software-growth-video-dialog.js

@@ -4,6 +4,7 @@ import React__default, { useState, 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 * 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';
@@ -659,7 +660,15 @@ function HeroSoftwareGrowthVideoDialog({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]

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

@@ -2,6 +2,7 @@
 'use strict';
 
 var React = require('react');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -576,14 +577,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 })

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

@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo } from 'react';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -570,14 +571,14 @@ function HeroVideoBackgroundDark({
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        "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__ */ jsx(GradientOverlay, { intensity: videoOverlayIntensity })

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

@@ -5,6 +5,7 @@ var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var jsxRuntime = require('react/jsx-runtime');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -656,7 +657,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"
+                }
+              )
             }
           )
         ]

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

@@ -4,6 +4,7 @@ import React__default, { useState, 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 * 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';
@@ -633,7 +634,15 @@ function HeroVideoDialogGradient({
             "div",
             {
               className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
-              children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoDialog?.videoUrl, type: "video/mp4" }) })
+              children: /* @__PURE__ */ jsx(
+                Video,
+                {
+                  src: videoDialog?.videoUrl,
+                  controls: true,
+                  autoPlay: true,
+                  className: "h-full w-full rounded-lg"
+                }
+              )
             }
           )
         ]

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

@@ -4,6 +4,7 @@
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var video = require('@page-speed/video');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
 var pressable = require('@page-speed/pressable');
@@ -513,7 +514,7 @@ function HeroVideoOverlayStars({
   const renderVideo = React.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,

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Video } from '@page-speed/video';
 import { Icon } from '@page-speed/icon';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Pressable } from '@page-speed/pressable';
@@ -492,7 +493,7 @@ function HeroVideoOverlayStars({
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 size-full before:absolute brightness-50", children: /* @__PURE__ */ jsx(
-      "video",
+      Video,
       {
         src: videoSrc,
         muted: true,

package/dist/link-tree-block.cjs

@@ -10,6 +10,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 var lightbox = require('@page-speed/lightbox');
 
@@ -871,7 +872,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,

package/dist/link-tree-block.js

@@ -9,6 +9,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import { Lightbox } from '@page-speed/lightbox';
 
@@ -850,7 +851,7 @@ function LinkTreeBlock({
               "aria-label": `View ${item.alt || item.type} in lightbox`,
               children: [
                 item.type === "video" ? /* @__PURE__ */ jsx(
-                  "video",
+                  Video,
                   {
                     src: item.src,
                     poster: item.poster,

package/dist/project-detail-architecture-carousel.cjs

@@ -4,6 +4,7 @@
 var React = require('react');
 var framerMotion = require('framer-motion');
 var img = require('@page-speed/img');
+var video = require('@page-speed/video');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -923,7 +924,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,

package/dist/project-detail-architecture-carousel.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import React__default, { useState, useMemo, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { Img } from '@page-speed/img';
+import { Video } from '@page-speed/video';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -902,7 +903,7 @@ function ProjectDetailArchitectureCarousel(props) {
               transition: { duration: 0.6, delay: 0.2 },
               className: "mb-16",
               children: /* @__PURE__ */ jsx("div", { className: "relative aspect-video overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsx(
-                "video",
+                Video,
                 {
                   src: videoUrl,
                   poster: videoPoster,