@opensite/ui 3.0.8 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/README.md +80 -0
  2. package/dist/components.cjs +1 -1
  3. package/dist/components.js +1 -1
  4. package/dist/cta-video-background-hero.cjs +13 -4
  5. package/dist/cta-video-background-hero.js +13 -4
  6. package/dist/faq-split-hero.cjs +5 -4
  7. package/dist/faq-split-hero.js +2 -1
  8. package/dist/hero-conversion-video-play.cjs +10 -1
  9. package/dist/hero-conversion-video-play.js +10 -1
  10. package/dist/hero-creative-studio-stacked.cjs +10 -1
  11. package/dist/hero-creative-studio-stacked.js +10 -1
  12. package/dist/hero-digital-agency-fullscreen.cjs +1 -1
  13. package/dist/hero-digital-agency-fullscreen.js +1 -1
  14. package/dist/hero-image-slider.cjs +1 -1
  15. package/dist/hero-image-slider.js +1 -1
  16. package/dist/hero-mentorship-video-split.cjs +10 -1
  17. package/dist/hero-mentorship-video-split.js +10 -1
  18. package/dist/hero-presentation-platform-video.cjs +4 -3
  19. package/dist/hero-presentation-platform-video.js +4 -3
  20. package/dist/hero-productivity-launcher-video.cjs +2 -1
  21. package/dist/hero-productivity-launcher-video.js +2 -1
  22. package/dist/hero-software-growth-video-dialog.cjs +10 -1
  23. package/dist/hero-software-growth-video-dialog.js +10 -1
  24. package/dist/hero-video-background-dark.cjs +5 -4
  25. package/dist/hero-video-background-dark.js +5 -4
  26. package/dist/hero-video-dialog-gradient.cjs +10 -1
  27. package/dist/hero-video-dialog-gradient.js +10 -1
  28. package/dist/hero-video-overlay-stars.cjs +2 -1
  29. package/dist/hero-video-overlay-stars.js +2 -1
  30. package/dist/image-slider.cjs +1 -1
  31. package/dist/image-slider.js +1 -1
  32. package/dist/index.cjs +1 -1
  33. package/dist/index.js +1 -1
  34. package/dist/link-tree-block.cjs +2 -1
  35. package/dist/link-tree-block.js +2 -1
  36. package/dist/project-detail-architecture-carousel.cjs +2 -1
  37. package/dist/project-detail-architecture-carousel.js +2 -1
  38. package/dist/project-video-carousel.cjs +5 -7
  39. package/dist/project-video-carousel.js +5 -7
  40. package/dist/project-video-hover-bento.cjs +5 -7
  41. package/dist/project-video-hover-bento.js +5 -7
  42. package/dist/project-video-hover-grid.cjs +5 -7
  43. package/dist/project-video-hover-grid.js +5 -7
  44. package/dist/project-video-hover-rounded.cjs +5 -7
  45. package/dist/project-video-hover-rounded.js +5 -7
  46. package/dist/project-video-hover-stack.cjs +5 -7
  47. package/dist/project-video-hover-stack.js +5 -7
  48. package/dist/project-video-hover-two-by-two.cjs +5 -7
  49. package/dist/project-video-hover-two-by-two.js +5 -7
  50. package/dist/registry.cjs +100 -69
  51. package/dist/registry.js +97 -66
  52. package/dist/services-list-video-showcase.cjs +2 -1
  53. package/dist/services-list-video-showcase.js +2 -1
  54. package/dist/social-link-icon.d.cts +1 -1
  55. package/dist/social-link-icon.d.ts +1 -1
  56. package/package.json +5 -3
package/README.md CHANGED
@@ -53,6 +53,86 @@ This library requires React 16.8.0 or higher:
53
53
  pnpm add react react-dom
54
54
  ```
55
55
 
56
+ ## Setup Requirements
57
+
58
+ ### 1. Tailwind CSS Configuration
59
+
60
+ **CRITICAL**: Add both `@opensite/ui` and `@page-speed/pressable` to your Tailwind content paths:
61
+
62
+ ```ts
63
+ // tailwind.config.ts
64
+ import type { Config } from "tailwindcss";
65
+
66
+ const config: Config = {
67
+ content: [
68
+ "./app/**/*.{js,ts,jsx,tsx,mdx}",
69
+ "./components/**/*.{js,ts,jsx,tsx,mdx}",
70
+ // Add these lines to scan component classes:
71
+ "./node_modules/@opensite/ui/dist/**/*.{js,mjs}",
72
+ "./node_modules/@page-speed/pressable/dist/**/*.{js,mjs}",
73
+ ],
74
+ // ...rest of config
75
+ };
76
+ ```
77
+
78
+ Without this, button styles from Pressable and other components won't be applied.
79
+
80
+ ### 2. Router Setup (For Pressable Navigation)
81
+
82
+ The `Pressable` component (used for links/buttons) requires `RouterProvider` from `@page-speed/router`.
83
+
84
+ **For Next.js App Router** (requires client component wrapper):
85
+
86
+ ```tsx
87
+ // components/providers/RouterWrapper.tsx
88
+ "use client";
89
+
90
+ import { RouterProvider } from "@page-speed/router";
91
+ import { ReactNode } from "react";
92
+
93
+ export function RouterWrapper({ children }: { children: ReactNode }) {
94
+ return <RouterProvider>{children}</RouterProvider>;
95
+ }
96
+ ```
97
+
98
+ ```tsx
99
+ // app/layout.tsx
100
+ import { RouterWrapper } from "@/components/providers/RouterWrapper";
101
+
102
+ export default function RootLayout({ children }) {
103
+ return (
104
+ <html>
105
+ <body>
106
+ <RouterWrapper>
107
+ {children}
108
+ </RouterWrapper>
109
+ </body>
110
+ </html>
111
+ );
112
+ }
113
+ ```
114
+
115
+ **For standard React apps** (Create React App, Vite, etc.):
116
+
117
+ ```tsx
118
+ // App.tsx
119
+ import { RouterProvider } from "@page-speed/router";
120
+
121
+ function App() {
122
+ return (
123
+ <RouterProvider>
124
+ {/* your app */}
125
+ </RouterProvider>
126
+ );
127
+ }
128
+ ```
129
+
130
+ Install the router package:
131
+
132
+ ```bash
133
+ pnpm add @page-speed/router
134
+ ```
135
+
56
136
  ## Usage
57
137
 
58
138
  ### Tree-Shakable Imports (Recommended)
package/dist/components.cjs CHANGED
@@ -896,7 +896,7 @@ var ImageSlider = ({
896
896
  activeImage.className
897
897
  ),
898
898
  optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
899
- eager: true
899
+ loading: "eager"
900
900
  }
901
901
  )
902
902
  },
package/dist/components.js CHANGED
@@ -873,7 +873,7 @@ var ImageSlider = ({
873
873
  activeImage.className
874
874
  ),
875
875
  optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
876
- eager: true
876
+ loading: "eager"
877
877
  }
878
878
  )
879
879
  },
package/dist/cta-video-background-hero.cjs CHANGED
@@ -2,6 +2,7 @@
2
2
  'use strict';
3
3
 
4
4
  var React = require('react');
5
+ var video = require('@page-speed/video');
5
6
  var clsx = require('clsx');
6
7
  var tailwindMerge = require('tailwind-merge');
7
8
  var pressable = require('@page-speed/pressable');
@@ -520,7 +521,15 @@ function CtaVideoBackgroundHero({
520
521
  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 20 })
521
522
  }
522
523
  ),
523
- modalVideoUrl && /* @__PURE__ */ jsxRuntime.jsx("video", { controls: true, autoPlay: true, className: "w-full rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: modalVideoUrl, type: "video/mp4" }) })
524
+ modalVideoUrl && /* @__PURE__ */ jsxRuntime.jsx(
525
+ video.Video,
526
+ {
527
+ src: modalVideoUrl,
528
+ controls: true,
529
+ autoPlay: true,
530
+ className: "w-full rounded-lg"
531
+ }
532
+ )
524
533
  ]
525
534
  }
526
535
  )
@@ -546,14 +555,14 @@ function CtaVideoBackgroundHero({
546
555
  ),
547
556
  children: [
548
557
  backgroundVideoUrl && /* @__PURE__ */ jsxRuntime.jsx(
549
- "video",
558
+ video.Video,
550
559
  {
560
+ src: backgroundVideoUrl,
551
561
  autoPlay: true,
552
562
  loop: true,
553
563
  muted: true,
554
564
  playsInline: true,
555
- className: "absolute inset-0 h-full w-full object-cover",
556
- children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: backgroundVideoUrl, type: "video/mp4" })
565
+ className: "absolute inset-0 h-full w-full object-cover"
557
566
  }
558
567
  ),
559
568
  /* @__PURE__ */ jsxRuntime.jsx(
package/dist/cta-video-background-hero.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use client";
2
2
  import * as React from 'react';
3
3
  import React__default, { useMemo } from 'react';
4
+ import { Video } from '@page-speed/video';
4
5
  import { clsx } from 'clsx';
5
6
  import { twMerge } from 'tailwind-merge';
6
7
  import { Pressable } from '@page-speed/pressable';
@@ -499,7 +500,15 @@ function CtaVideoBackgroundHero({
499
500
  children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
500
501
  }
501
502
  ),
502
- modalVideoUrl && /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: modalVideoUrl, type: "video/mp4" }) })
503
+ modalVideoUrl && /* @__PURE__ */ jsx(
504
+ Video,
505
+ {
506
+ src: modalVideoUrl,
507
+ controls: true,
508
+ autoPlay: true,
509
+ className: "w-full rounded-lg"
510
+ }
511
+ )
503
512
  ]
504
513
  }
505
514
  )
@@ -525,14 +534,14 @@ function CtaVideoBackgroundHero({
525
534
  ),
526
535
  children: [
527
536
  backgroundVideoUrl && /* @__PURE__ */ jsx(
528
- "video",
537
+ Video,
529
538
  {
539
+ src: backgroundVideoUrl,
530
540
  autoPlay: true,
531
541
  loop: true,
532
542
  muted: true,
533
543
  playsInline: true,
534
- className: "absolute inset-0 h-full w-full object-cover",
535
- children: /* @__PURE__ */ jsx("source", { src: backgroundVideoUrl, type: "video/mp4" })
544
+ className: "absolute inset-0 h-full w-full object-cover"
536
545
  }
537
546
  ),
538
547
  /* @__PURE__ */ jsx(
package/dist/faq-split-hero.cjs CHANGED
@@ -5,6 +5,7 @@ var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var tailwindMerge = require('tailwind-merge');
7
7
  var img = require('@page-speed/img');
8
+ var video = require('@page-speed/video');
8
9
  var AccordionPrimitive = require('@radix-ui/react-accordion');
9
10
  var icon = require('@page-speed/icon');
10
11
  var jsxRuntime = require('react/jsx-runtime');
@@ -564,11 +565,11 @@ function FaqSplitHero({
564
565
  ]);
565
566
  const renderMedia = React.useMemo(() => {
566
567
  if (!mediaItem) return null;
567
- const { image, video } = mediaItem;
568
- if (video) {
569
- const { src, className: videoClassName, ...videoRest } = video;
568
+ const { image, video: video$1 } = mediaItem;
569
+ if (video$1) {
570
+ const { src, className: videoClassName, ...videoRest } = video$1;
570
571
  return /* @__PURE__ */ jsxRuntime.jsx(
571
- "video",
572
+ video.Video,
572
573
  {
573
574
  src,
574
575
  className: cn("h-full w-full object-cover", videoClassName),
package/dist/faq-split-hero.js CHANGED
@@ -4,6 +4,7 @@ import React__default, { useMemo } from 'react';
4
4
  import { clsx } from 'clsx';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import { Img } from '@page-speed/img';
7
+ import { Video } from '@page-speed/video';
7
8
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
8
9
  import { Icon } from '@page-speed/icon';
9
10
  import { jsx, jsxs } from 'react/jsx-runtime';
@@ -546,7 +547,7 @@ function FaqSplitHero({
546
547
  if (video) {
547
548
  const { src, className: videoClassName, ...videoRest } = video;
548
549
  return /* @__PURE__ */ jsx(
549
- "video",
550
+ Video,
550
551
  {
551
552
  src,
552
553
  className: cn("h-full w-full object-cover", videoClassName),
package/dist/hero-conversion-video-play.cjs CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  var React2 = require('react');
5
5
  var AutoScroll = require('embla-carousel-auto-scroll');
6
+ var video = require('@page-speed/video');
6
7
  var clsx = require('clsx');
7
8
  var tailwindMerge = require('tailwind-merge');
8
9
  var pressable = require('@page-speed/pressable');
@@ -809,7 +810,15 @@ function HeroConversionVideoPlay({
809
810
  ),
810
811
  /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-200", children: [
811
812
  /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: videoDialogTitle }) }),
812
- /* @__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" }) }) })
813
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx(
814
+ video.Video,
815
+ {
816
+ src: videoUrl,
817
+ controls: true,
818
+ autoPlay: true,
819
+ className: "h-full w-full rounded-lg"
820
+ }
821
+ ) })
813
822
  ] }) })
814
823
  ] });
815
824
  }
package/dist/hero-conversion-video-play.js CHANGED
@@ -2,6 +2,7 @@
2
2
  import * as React2 from 'react';
3
3
  import React2__default, { useState, useMemo, Fragment as Fragment$1 } from 'react';
4
4
  import AutoScroll from 'embla-carousel-auto-scroll';
5
+ import { Video } from '@page-speed/video';
5
6
  import { clsx } from 'clsx';
6
7
  import { twMerge } from 'tailwind-merge';
7
8
  import { Pressable } from '@page-speed/pressable';
@@ -782,7 +783,15 @@ function HeroConversionVideoPlay({
782
783
  ),
783
784
  /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-200", children: [
784
785
  /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: videoDialogTitle }) }),
785
- /* @__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" }) }) })
786
+ /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
787
+ Video,
788
+ {
789
+ src: videoUrl,
790
+ controls: true,
791
+ autoPlay: true,
792
+ className: "h-full w-full rounded-lg"
793
+ }
794
+ ) })
786
795
  ] }) })
787
796
  ] });
788
797
  }
package/dist/hero-creative-studio-stacked.cjs CHANGED
@@ -5,6 +5,7 @@ var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var tailwindMerge = require('tailwind-merge');
7
7
  var img = require('@page-speed/img');
8
+ var video = require('@page-speed/video');
8
9
  var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
9
10
  var jsxRuntime = require('react/jsx-runtime');
10
11
  var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -727,7 +728,15 @@ function HeroCreativeStudioStacked({
727
728
  "div",
728
729
  {
729
730
  className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
730
- 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" }) })
731
+ children: /* @__PURE__ */ jsxRuntime.jsx(
732
+ video.Video,
733
+ {
734
+ src: videoDialog?.videoUrl,
735
+ controls: true,
736
+ autoPlay: true,
737
+ className: "h-full w-full rounded-lg"
738
+ }
739
+ )
731
740
  }
732
741
  )
733
742
  ]
package/dist/hero-creative-studio-stacked.js CHANGED
@@ -4,6 +4,7 @@ import React__default, { useState, useMemo, Fragment } from 'react';
4
4
  import { clsx } from 'clsx';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import { Img } from '@page-speed/img';
7
+ import { Video } from '@page-speed/video';
7
8
  import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
8
9
  import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
9
10
  import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -704,7 +705,15 @@ function HeroCreativeStudioStacked({
704
705
  "div",
705
706
  {
706
707
  className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
707
- 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" }) })
708
+ children: /* @__PURE__ */ jsx(
709
+ Video,
710
+ {
711
+ src: videoDialog?.videoUrl,
712
+ controls: true,
713
+ autoPlay: true,
714
+ className: "h-full w-full rounded-lg"
715
+ }
716
+ )
708
717
  }
709
718
  )
710
719
  ]
package/dist/hero-digital-agency-fullscreen.cjs CHANGED
@@ -517,7 +517,7 @@ function HeroDigitalAgencyFullscreen({
517
517
  src: backgroundImage,
518
518
  alt: "Hero Background Image",
519
519
  className: "h-full w-full brightness-50 object-cover object-center",
520
- eager: true,
520
+ loading: "eager",
521
521
  optixFlowConfig
522
522
  }
523
523
  )
package/dist/hero-digital-agency-fullscreen.js CHANGED
@@ -511,7 +511,7 @@ function HeroDigitalAgencyFullscreen({
511
511
  src: backgroundImage,
512
512
  alt: "Hero Background Image",
513
513
  className: "h-full w-full brightness-50 object-cover object-center",
514
- eager: true,
514
+ loading: "eager",
515
515
  optixFlowConfig
516
516
  }
517
517
  )
package/dist/hero-image-slider.cjs CHANGED
@@ -570,7 +570,7 @@ var ImageSlider = ({
570
570
  activeImage.className
571
571
  ),
572
572
  optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
573
- eager: true
573
+ loading: "eager"
574
574
  }
575
575
  )
576
576
  },
package/dist/hero-image-slider.js CHANGED
@@ -549,7 +549,7 @@ var ImageSlider = ({
549
549
  activeImage.className
550
550
  ),
551
551
  optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
552
- eager: true
552
+ loading: "eager"
553
553
  }
554
554
  )
555
555
  },
package/dist/hero-mentorship-video-split.cjs CHANGED
@@ -2,6 +2,7 @@
2
2
  'use strict';
3
3
 
4
4
  var React = require('react');
5
+ var video = require('@page-speed/video');
5
6
  var clsx = require('clsx');
6
7
  var tailwindMerge = require('tailwind-merge');
7
8
  var pressable = require('@page-speed/pressable');
@@ -690,7 +691,15 @@ function HeroMentorshipVideoSplit({
690
691
  "div",
691
692
  {
692
693
  className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
693
- 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" }) })
694
+ children: /* @__PURE__ */ jsxRuntime.jsx(
695
+ video.Video,
696
+ {
697
+ src: videoUrl,
698
+ controls: true,
699
+ autoPlay: true,
700
+ className: "h-full w-full rounded-lg"
701
+ }
702
+ )
694
703
  }
695
704
  )
696
705
  ]
package/dist/hero-mentorship-video-split.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use client";
2
2
  import * as React from 'react';
3
3
  import React__default, { useState, useMemo, Fragment as Fragment$1 } from 'react';
4
+ import { Video } from '@page-speed/video';
4
5
  import { clsx } from 'clsx';
5
6
  import { twMerge } from 'tailwind-merge';
6
7
  import { Pressable } from '@page-speed/pressable';
@@ -667,7 +668,15 @@ function HeroMentorshipVideoSplit({
667
668
  "div",
668
669
  {
669
670
  className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
670
- children: /* @__PURE__ */ jsx("video", { controls: true, autoPlay: true, className: "h-full w-full rounded-lg", children: /* @__PURE__ */ jsx("source", { src: videoUrl, type: "video/mp4" }) })
671
+ children: /* @__PURE__ */ jsx(
672
+ Video,
673
+ {
674
+ src: videoUrl,
675
+ controls: true,
676
+ autoPlay: true,
677
+ className: "h-full w-full rounded-lg"
678
+ }
679
+ )
671
680
  }
672
681
  )
673
682
  ]
package/dist/hero-presentation-platform-video.cjs CHANGED
@@ -2,6 +2,7 @@
2
2
  'use strict';
3
3
 
4
4
  var React4 = require('react');
5
+ var video = require('@page-speed/video');
5
6
  var clsx = require('clsx');
6
7
  var tailwindMerge = require('tailwind-merge');
7
8
  var jsxRuntime = require('react/jsx-runtime');
@@ -577,16 +578,16 @@ function HeroPresentationPlatformVideo({
577
578
  videoClassName
578
579
  ),
579
580
  children: /* @__PURE__ */ jsxRuntime.jsx(
580
- "video",
581
+ video.Video,
581
582
  {
583
+ src: videoSrc,
582
584
  autoPlay: true,
583
585
  loop: true,
584
586
  muted: true,
585
587
  playsInline: true,
586
588
  "data-wf-ignore": "true",
587
589
  "data-object-fit": "cover",
588
- className: "h-full w-full rounded-tl-xl object-cover",
589
- children: /* @__PURE__ */ jsxRuntime.jsx("source", { src: videoSrc, type: "video/mp4" })
590
+ className: "h-full w-full rounded-tl-xl object-cover"
590
591
  }
591
592
  )
592
593
  }
package/dist/hero-presentation-platform-video.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use client";
2
2
  import * as React4 from 'react';
3
3
  import React4__default, { useMemo } from 'react';
4
+ import { Video } from '@page-speed/video';
4
5
  import { clsx } from 'clsx';
5
6
  import { twMerge } from 'tailwind-merge';
6
7
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -556,16 +557,16 @@ function HeroPresentationPlatformVideo({
556
557
  videoClassName
557
558
  ),
558
559
  children: /* @__PURE__ */ jsx(
559
- "video",
560
+ Video,
560
561
  {
562
+ src: videoSrc,
561
563
  autoPlay: true,
562
564
  loop: true,
563
565
  muted: true,
564
566
  playsInline: true,
565
567
  "data-wf-ignore": "true",
566
568
  "data-object-fit": "cover",
567
- className: "h-full w-full rounded-tl-xl object-cover",
568
- children: /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" })
569
+ className: "h-full w-full rounded-tl-xl object-cover"
569
570
  }
570
571
  )
571
572
  }
package/dist/hero-productivity-launcher-video.cjs CHANGED
@@ -5,6 +5,7 @@ var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var tailwindMerge = require('tailwind-merge');
7
7
  var pressable = require('@page-speed/pressable');
8
+ var video = require('@page-speed/video');
8
9
  var jsxRuntime = require('react/jsx-runtime');
9
10
 
10
11
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -451,7 +452,7 @@ function HeroProductivityLauncherVideo({
451
452
  const renderVideo = React.useMemo(() => {
452
453
  if (videoSlot) return videoSlot;
453
454
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
454
- "video",
455
+ video.Video,
455
456
  {
456
457
  src: videoSrc,
457
458
  loop: true,
package/dist/hero-productivity-launcher-video.js CHANGED
@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
3
3
  import { clsx } from 'clsx';
4
4
  import { twMerge } from 'tailwind-merge';
5
5
  import { Pressable } from '@page-speed/pressable';
6
+ import { Video } from '@page-speed/video';
6
7
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
7
8
 
8
9
  // components/blocks/hero/hero-productivity-launcher-video.tsx
@@ -445,7 +446,7 @@ function HeroProductivityLauncherVideo({
445
446
  const renderVideo = useMemo(() => {
446
447
  if (videoSlot) return videoSlot;
447
448
  return /* @__PURE__ */ jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsx(
448
- "video",
449
+ Video,
449
450
  {
450
451
  src: videoSrc,
451
452
  loop: true,
package/dist/hero-software-growth-video-dialog.cjs CHANGED
@@ -5,6 +5,7 @@ var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var tailwindMerge = require('tailwind-merge');
7
7
  var img = require('@page-speed/img');
8
+ var video = require('@page-speed/video');
8
9
  var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
9
10
  var jsxRuntime = require('react/jsx-runtime');
10
11
  var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -682,7 +683,15 @@ function HeroSoftwareGrowthVideoDialog({
682
683
  "div",
683
684
  {
684
685
  className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
685
- 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" }) })
686
+ children: /* @__PURE__ */ jsxRuntime.jsx(
687
+ video.Video,
688
+ {
689
+ src: videoDialog?.videoUrl,
690
+ controls: true,
691
+ autoPlay: true,
692
+ className: "h-full w-full rounded-lg"
693
+ }
694
+ )
686
695
  }
687
696
  )
688
697
  ]
package/dist/hero-software-growth-video-dialog.js CHANGED
@@ -4,6 +4,7 @@ import React__default, { useState, useMemo, Fragment } from 'react';
4
4
  import { clsx } from 'clsx';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import { Img } from '@page-speed/img';
7
+ import { Video } from '@page-speed/video';
7
8
  import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
8
9
  import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
9
10
  import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -659,7 +660,15 @@ function HeroSoftwareGrowthVideoDialog({
659
660
  "div",
660
661
  {
661
662
  className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
662
- 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" }) })
663
+ children: /* @__PURE__ */ jsx(
664
+ Video,
665
+ {
666
+ src: videoDialog?.videoUrl,
667
+ controls: true,
668
+ autoPlay: true,
669
+ className: "h-full w-full rounded-lg"
670
+ }
671
+ )
663
672
  }
664
673
  )
665
674
  ]
package/dist/hero-video-background-dark.cjs CHANGED
@@ -2,6 +2,7 @@
2
2
  'use strict';
3
3
 
4
4
  var React = require('react');
5
+ var video = require('@page-speed/video');
5
6
  var clsx = require('clsx');
6
7
  var tailwindMerge = require('tailwind-merge');
7
8
  var jsxRuntime = require('react/jsx-runtime');
@@ -576,14 +577,14 @@ function HeroVideoBackgroundDark({
576
577
  if (videoSlot) return videoSlot;
577
578
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
578
579
  /* @__PURE__ */ jsxRuntime.jsx(
579
- "video",
580
+ video.Video,
580
581
  {
582
+ src: videoSrc,
581
583
  loop: true,
582
584
  playsInline: true,
583
- src: videoSrc,
584
- className: "absolute top-0 left-0 size-full object-cover",
585
585
  autoPlay: true,
586
- muted: true
586
+ muted: true,
587
+ className: "absolute top-0 left-0 size-full object-cover"
587
588
  }
588
589
  ),
589
590
  /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, { intensity: videoOverlayIntensity })
package/dist/hero-video-background-dark.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use client";
2
2
  import React, { useMemo } from 'react';
3
+ import { Video } from '@page-speed/video';
3
4
  import { clsx } from 'clsx';
4
5
  import { twMerge } from 'tailwind-merge';
5
6
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -570,14 +571,14 @@ function HeroVideoBackgroundDark({
570
571
  if (videoSlot) return videoSlot;
571
572
  return /* @__PURE__ */ jsxs(Fragment, { children: [
572
573
  /* @__PURE__ */ jsx(
573
- "video",
574
+ Video,
574
575
  {
576
+ src: videoSrc,
575
577
  loop: true,
576
578
  playsInline: true,
577
- src: videoSrc,
578
- className: "absolute top-0 left-0 size-full object-cover",
579
579
  autoPlay: true,
580
- muted: true
580
+ muted: true,
581
+ className: "absolute top-0 left-0 size-full object-cover"
581
582
  }
582
583
  ),
583
584
  /* @__PURE__ */ jsx(GradientOverlay, { intensity: videoOverlayIntensity })
package/dist/hero-video-dialog-gradient.cjs CHANGED
@@ -5,6 +5,7 @@ var React = require('react');
5
5
  var clsx = require('clsx');
6
6
  var tailwindMerge = require('tailwind-merge');
7
7
  var img = require('@page-speed/img');
8
+ var video = require('@page-speed/video');
8
9
  var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
9
10
  var jsxRuntime = require('react/jsx-runtime');
10
11
  var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -656,7 +657,15 @@ function HeroVideoDialogGradient({
656
657
  "div",
657
658
  {
658
659
  className: videoAspectRatio === "vertical" ? "aspect-9/16" : "aspect-video",
659
- 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" }) })
660
+ children: /* @__PURE__ */ jsxRuntime.jsx(
661
+ video.Video,
662
+ {
663
+ src: videoDialog?.videoUrl,
664
+ controls: true,
665
+ autoPlay: true,
666
+ className: "h-full w-full rounded-lg"
667
+ }
668
+ )
660
669
  }
661
670
  )
662
671
  ]