@primer/react-brand 0.34.4-rc.a85d3e0d → 0.35.0-rc.02f8890c

package/lib/CTABanner/CTABanner.d.ts

@@ -25,20 +25,20 @@ export declare const CTABanner: React.ForwardRefExoticComponent<Omit<BaseProps<H
     } & {
         as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
         size?: "display" | "1" | "2" | "3" | "4" | "5" | "6" | "subhead-large" | "subhead-medium" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | {
-            narrow?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | undefined;
-            regular?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | undefined;
-            wide?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | {
+            narrow?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
+            regular?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
+            wide?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | undefined;
         } | undefined;
         stretch?: "normal" | "condensed" | "expanded" | {
             narrow?: "normal" | "condensed" | "expanded" | undefined;
             regular?: "normal" | "condensed" | "expanded" | undefined;
             wide?: "normal" | "condensed" | "expanded" | undefined;
         } | undefined;
-        letterSpacing?: "normal" | "condensed" | "none" | {
-            narrow?: "normal" | "condensed" | "none" | undefined;
-            regular?: "normal" | "condensed" | "none" | undefined;
-            wide?: "normal" | "condensed" | "none" | undefined;
+        letterSpacing?: "normal" | "none" | "condensed" | {
+            narrow?: "normal" | "none" | "condensed" | undefined;
+            regular?: "normal" | "none" | "condensed" | undefined;
+            wide?: "normal" | "none" | "condensed" | undefined;
         } | undefined;
         font?: "mona-sans" | "hubot-sans" | "monospace" | undefined;
     } & React.HTMLAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;

package/lib/Hero/Hero.d.ts

@@ -17,7 +17,9 @@ export type HeroProps = BaseProps<HTMLElement> & {
      */
     trailingComponent?: React.FunctionComponent;
 };
-type HeroHeadingProps = Omit<HeadingProps, 'as'>;
+type HeroHeadingProps = Omit<HeadingProps, 'as'> & {
+    fullWidth?: boolean;
+};
 type HeroDescriptionProps = {
     size?: (typeof TextSizes)[number];
     weight?: TextWeightVariants | ResponsiveWeightMap;
@@ -58,7 +60,7 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         children?: React.ReactNode;
     }, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     Image: React.ForwardRefExoticComponent<(Omit<{
-        position?: "inline-end" | "block-end" | undefined;
+        position?: "block-end" | "inline-end" | undefined;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;
@@ -70,7 +72,7 @@ export declare const Hero: React.ForwardRefExoticComponent<Omit<React.PropsWithC
         as?: "img" | undefined;
         srcSet?: Pick<React.ImgHTMLAttributes<HTMLImageElement>, "srcSet"> | undefined;
     }, "ref"> | Omit<{
-        position?: "inline-end" | "block-end" | undefined;
+        position?: "block-end" | "inline-end" | undefined;
     } & React.ImgHTMLAttributes<HTMLImageElement> & BaseProps<HTMLImageElement> & {
         src: string;
         alt: string;

package/lib/LogoSuite/LogoSuite.d.ts

@@ -36,10 +36,10 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | "monospace" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLParagraphElement> & {
         as?: "p" | undefined;
     } & {
@@ -48,10 +48,10 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | "monospace" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLSpanElement> & BaseProps<HTMLSpanElement> & {
         as?: "span" | undefined;
     } & {
@@ -60,10 +60,10 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | "monospace" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLDivElement> & BaseProps<HTMLDivElement> & {
         as?: "div" | undefined;
     } & {
@@ -72,10 +72,10 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | "monospace" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
         as?: "strong" | undefined;
     } & {
@@ -84,10 +84,10 @@ export declare const LogoSuite: (({ align, children, className, hasDivider, "dat
         font?: "mona-sans" | "hubot-sans" | "monospace" | undefined;
         size?: "700" | "600" | "500" | "400" | "300" | "200" | "100" | undefined;
         variant?: "default" | "muted" | undefined;
-        weight?: "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "light" | "extralight" | import("../").ResponsiveWeightMap | undefined;
+        weight?: "light" | "heavy" | "extrabold" | "bold" | "semibold" | "medium" | "normal" | "extralight" | import("../").ResponsiveWeightMap | undefined;
         align?: "start" | "center" | "end" | undefined;
     } & {
-        as?: "span" | "div" | "em" | "p" | "strong" | undefined;
+        as?: "p" | "span" | "div" | "strong" | "em" | undefined;
     } & React.HTMLAttributes<HTMLElement> & BaseProps<HTMLElement> & {
         as?: "em" | undefined;
     } & {

package/lib/Stack/Stack.d.ts

@@ -96,7 +96,7 @@ export declare const Stack: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLE
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    gap?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    gap?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
     /**
      * Applies vertical alignment to child elements relative to the Stack, using the align-items CSS property.
      * A string value will be applied to all viewports.
@@ -108,7 +108,7 @@ export declare const Stack: React.ForwardRefExoticComponent<Omit<BaseProps<HTMLE
      * A string value will be applied to all viewports.
      * An object can be used to define different values for different viewports.
      */
-    padding?: "normal" | 8 | 4 | "condensed" | "none" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
+    padding?: "normal" | 8 | 4 | "none" | "condensed" | 12 | "spacious" | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 64 | 80 | 96 | 112 | 128 | ResponsiveSpacingMap | undefined;
     /**
      * Applies horizontal alignment to child elements relative to the Stack, using the justify-content CSS property.
      * A string value will be applied to all viewports.

package/lib/SubdomainNavBar/SubdomainNavBar.d.ts

@@ -37,8 +37,9 @@ export type SubdomainNavBarProps = {
 declare function Root({ children, className, fixed, fullWidth, logoHref, title, titleHref, ...rest }: SubdomainNavBarProps): JSX.Element;
 type LinkProps = {
     href: string;
+    isExternal?: boolean;
 } & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-declare function Link({ href, className, children, ...rest }: PropsWithChildren<LinkProps>): JSX.Element;
+declare function Link({ href, className, children, isExternal, ...rest }: PropsWithChildren<LinkProps>): JSX.Element;
 export type SubdomainNavBarSearchResultProps = {
     title: string;
     description: string;

package/lib/VideoPlayer/VideoPlayer.d.ts

@@ -1,19 +1,40 @@
-import React from 'react';
-import type { BaseProps } from '../component-helpers';
+import React, { type HTMLProps } from 'react';
+import { type AnimateProps } from '../animation';
 /**
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/video-player/colors-with-modes.css';
 type VideoPlayerProps = {
-    poster?: string;
     title: string;
-    branding?: boolean;
-    children: React.ReactElement | React.ReactElement[];
-    ref?: React.RefObject<HTMLVideoElement>;
-} & React.HTMLProps<HTMLVideoElement> & BaseProps<HTMLVideoElement>;
-export declare const VideoPlayer: (({ poster, title, branding, children, className, onPlay, onPause, onLoadedMetadata, onPlaying, onTimeUpdate, ref, ...rest }: VideoPlayerProps) => JSX.Element) & {
+    visuallyHiddenTitle?: boolean;
+    showBranding?: boolean;
+    animate?: AnimateProps;
+    showControlsWhenPaused?: boolean;
+    showPlayPauseButton?: boolean;
+    showSeekControl?: boolean;
+    showCCButton?: boolean;
+    showMuteButton?: boolean;
+    showVolumeControl?: boolean;
+    showFullScreenButton?: boolean;
+} & HTMLProps<HTMLVideoElement>;
+export declare const VideoPlayer: React.ForwardRefExoticComponent<Omit<VideoPlayerProps, "ref"> & React.RefAttributes<HTMLVideoElement>> & {
     Source: (props: React.HTMLProps<HTMLSourceElement>) => JSX.Element;
     Track: ({ kind, ...rest }: React.HTMLProps<HTMLTrackElement>) => JSX.Element;
+    Captions: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element | null;
+    CCButton: ({ className, ...props }: React.HTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    Controls: ({ isSmall, ...rest }: import("./components").ControlsProps) => JSX.Element;
+    ControlsBar: ({ className, ...rest }: import("./components").ControlsBarProps) => JSX.Element;
+    FullScreenButton: (props: React.HTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    IconControl: ({ tooltip, children, className, ...rest }: {
+        tooltip: string;
+    } & React.HTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    MuteButton: (props: React.HTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    PauseIcon: (props: React.SVGAttributes<SVGSVGElement>) => JSX.Element;
+    PlayIcon: (props: React.SVGAttributes<SVGSVGElement>) => JSX.Element;
+    PlayPauseButton: (props: React.HTMLAttributes<HTMLButtonElement>) => JSX.Element;
+    Range: ({ className, onChange, value: startValue, max, onKeyDown, a11yStep, tooltip, tooltipFormatter, name, id, ...props }: import("./components").RangeProps) => JSX.Element;
+    SeekControl: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
+    VolumeControl: (props: import("./components").RangeProps) => JSX.Element;
 };
 export {};

package/lib/VideoPlayer/components/CCButton/CCButton.d.ts

@@ -0,0 +1,2 @@
+import { type HTMLAttributes } from 'react';
+export declare const CCButton: ({ className, ...props }: HTMLAttributes<HTMLButtonElement>) => JSX.Element;

package/lib/VideoPlayer/components/CCButton/index.d.ts

@@ -0,0 +1 @@
+export * from './CCButton';

package/lib/VideoPlayer/components/Captions/Captions.d.ts

@@ -0,0 +1,2 @@
+import { type HTMLAttributes } from 'react';
+export declare const Captions: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element | null;

package/lib/VideoPlayer/components/Controls/Controls.d.ts

@@ -0,0 +1,6 @@
+import { type HTMLAttributes } from 'react';
+export type ControlsProps = {
+    isSmall?: boolean;
+    showControlsWhenPaused?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Controls: ({ isSmall, ...rest }: ControlsProps) => JSX.Element;

package/lib/VideoPlayer/components/ControlsBar/ControlsBar.d.ts

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from 'react';
+export type ControlsBarProps = HTMLAttributes<HTMLDivElement>;
+export declare const ControlsBar: ({ className, ...rest }: ControlsBarProps) => JSX.Element;

package/lib/VideoPlayer/components/ControlsBar/index.d.ts

@@ -0,0 +1 @@
+export * from './ControlsBar';

package/lib/VideoPlayer/components/FullScreenButton/FullScreenButton.d.ts

@@ -0,0 +1,2 @@
+import { type HTMLAttributes } from 'react';
+export declare const FullScreenButton: (props: HTMLAttributes<HTMLButtonElement>) => JSX.Element;

package/lib/VideoPlayer/components/FullScreenButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FullScreenButton';

package/lib/VideoPlayer/components/{icon-control → IconControl}/IconControl.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import { type HTMLAttributes } from 'react';
 type IconControlProps = {
     tooltip: string;
-} & React.HTMLAttributes<HTMLButtonElement>;
+} & HTMLAttributes<HTMLButtonElement>;
 export declare const IconControl: ({ tooltip, children, className, ...rest }: IconControlProps) => JSX.Element;
 export {};

package/lib/VideoPlayer/components/MuteButton/MuteButton.d.ts

@@ -0,0 +1,2 @@
+import { type HTMLAttributes } from 'react';
+export declare const MuteButton: (props: HTMLAttributes<HTMLButtonElement>) => JSX.Element;

package/lib/VideoPlayer/components/MuteButton/index.d.ts

@@ -0,0 +1 @@
+export * from './MuteButton';

package/lib/VideoPlayer/components/PauseIcon/PauseIcon.d.ts

@@ -0,0 +1,2 @@
+import { type SVGAttributes } from 'react';
+export declare const PauseIcon: (props: SVGAttributes<SVGSVGElement>) => JSX.Element;

package/lib/VideoPlayer/components/PauseIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './PauseIcon';

package/lib/VideoPlayer/components/PlayIcon/PlayIcon.d.ts

@@ -0,0 +1,2 @@
+import { type SVGAttributes } from 'react';
+export declare const PlayIcon: (props: SVGAttributes<SVGSVGElement>) => JSX.Element;

package/lib/VideoPlayer/components/PlayIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './PlayIcon';

package/lib/VideoPlayer/components/PlayPauseButton/PlayPauseButton.d.ts

@@ -0,0 +1,2 @@
+import { type HTMLAttributes } from 'react';
+export declare const PlayPauseButton: (props: HTMLAttributes<HTMLButtonElement>) => JSX.Element;

package/lib/VideoPlayer/components/PlayPauseButton/index.d.ts

@@ -0,0 +1 @@
+export * from './PlayPauseButton';

package/lib/VideoPlayer/components/{range → Range}/Range.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-type RangeProps = {
+export type RangeProps = {
     tooltip?: boolean;
-    tooltipFormatter?: (value: number | string | readonly string[]) => string;
+    tooltipFormatter?: (value: number) => string;
     max?: number;
     a11yStep?: number;
 } & React.HTMLProps<HTMLInputElement>;
 export declare const Range: ({ className, onChange, value: startValue, max, onKeyDown, a11yStep, tooltip, tooltipFormatter, name, id, ...props }: RangeProps) => JSX.Element;
-export {};

package/lib/VideoPlayer/components/SeekControl/SeekControl.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+type SeekControlProps = HTMLAttributes<HTMLDivElement>;
+export declare const SeekControl: ({ className, ...rest }: SeekControlProps) => JSX.Element;
+export {};

package/lib/VideoPlayer/components/SeekControl/index.d.ts

@@ -0,0 +1 @@
+export * from './SeekControl';

package/lib/VideoPlayer/components/VideoTooltip/VideoTooltip.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+type VideoTooltipProps = HTMLAttributes<HTMLDivElement>;
+export declare const VideoTooltip: ({ children, className, ...rest }: VideoTooltipProps) => JSX.Element;
+export {};

package/lib/VideoPlayer/components/VideoTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './VideoTooltip';

package/lib/VideoPlayer/components/VolumeControl/VolumeControl.d.ts

@@ -0,0 +1,2 @@
+import { type RangeProps } from '../';
+export declare const VolumeControl: (props: RangeProps) => JSX.Element;

package/lib/VideoPlayer/components/VolumeControl/index.d.ts

@@ -0,0 +1 @@
+export * from './VolumeControl';

package/lib/VideoPlayer/components/index.d.ts

@@ -1,5 +1,14 @@
-export * from './captions';
-export * from './controls';
-export * from './range';
-export * from './tooltip';
-export * from './icon-control';
+export * from './Captions';
+export * from './CCButton';
+export * from './Controls';
+export * from './ControlsBar';
+export * from './FullScreenButton';
+export * from './IconControl';
+export * from './MuteButton';
+export * from './PauseIcon';
+export * from './PlayIcon';
+export * from './PlayPauseButton';
+export * from './Range';
+export * from './SeekControl';
+export * from './VideoTooltip';
+export * from './VolumeControl';

package/lib/VideoPlayer/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useIsElementFullScreen';
+export * from './useVideo';
+export * from './useVideoKeypressHandlers';
+export * from './useVideoResizeObserver';

package/lib/VideoPlayer/hooks/useIsElementFullScreen.d.ts

@@ -0,0 +1,2 @@
+import { type Dispatch, type SetStateAction } from 'react';
+export declare const useIsElementFullScreen: (element?: HTMLElement | null) => [boolean, Dispatch<SetStateAction<boolean>>];

package/lib/VideoPlayer/hooks/useVideo.d.ts

@@ -0,0 +1,34 @@
+import React, { type PropsWithChildren, type SetStateAction, type RefObject } from 'react';
+type VideoState = {
+    ref: RefObject<HTMLVideoElement>;
+    isPlaying: boolean;
+    isMuted: boolean;
+    volume: number;
+    volumeBeforeMute: number | null;
+    ccEnabled: boolean;
+    duration: number;
+};
+export type UseVideoContext = VideoState & {
+    play: () => void;
+    pause: () => void;
+    togglePlaying: () => void;
+    mute: () => void;
+    unmute: () => void;
+    toggleMute: () => void;
+    setVolume: (volumeValOrFn: SetStateAction<number>) => void;
+    seek: (time: number) => void;
+    seekToPercent: (percent: number) => void;
+    seekRelative: (secondsValOrFn: SetStateAction<number>) => void;
+    enableCC: () => void;
+    disableCC: () => void;
+    toggleCC: () => void;
+    enterFullScreen: () => void;
+    exitFullScreen: () => void;
+    toggleFullScreen: () => void;
+    setDuration: (duration: number) => void;
+    isFullScreen: boolean;
+};
+export declare const useVideo: () => UseVideoContext;
+type VideoProviderProps = PropsWithChildren<Record<string, unknown>>;
+export declare const VideoProvider: React.ForwardRefExoticComponent<Omit<VideoProviderProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;
+export {};

package/lib/VideoPlayer/hooks/useVideoKeypressHandlers.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from 'react';
+export type KeypressHandler = [KeyboardEvent['key'], (e: KeyboardEvent) => void];
+export declare const useVideoKeypressHandlers: (videoWrapperRef: RefObject<HTMLElement>) => void;

package/lib/VideoPlayer/hooks/useVideoResizeObserver.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from 'react';
+export declare const useVideoResizeObserver: ({ videoWrapperRef, className, }: {
+    videoWrapperRef: RefObject<HTMLElement>;
+    className: string;
+}) => boolean;