@nationaldesignstudio/react 0.5.5 → 0.6.0

package/dist/index.d.ts

@@ -10,8 +10,9 @@ import { ButtonProps as ButtonProps$1 } from '@base-ui-components/react/button';
 import { Popover as Popover$1 } from '@base-ui-components/react/popover';
 import { Select as Select$1 } from '@base-ui-components/react/select';
 import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
+import { Dialog as Dialog$1 } from '@base-ui-components/react/dialog';
 import { ClassValue } from 'clsx';
-import { CSSVariableMap, NestedStringRecord, ColorThemeName, SurfaceThemeName } from '@nds-design-system/tokens';
+import { CSSVariableMap, NestedStringRecord, ColorThemeName, SurfaceThemeName, ResolvedProjectTheme } from '@nds-design-system/tokens';
 
 declare const accordionVariants: tailwind_variants.TVReturnType<{
     colorScheme: {
@@ -244,6 +245,233 @@ declare const BackgroundCompound: React$1.ForwardRefExoticComponent<BackgroundPr
     Gradient: React$1.ForwardRefExoticComponent<BackgroundGradientProps & React$1.RefAttributes<HTMLDivElement>>;
 };
 
+type BlurIntensity = "low" | "medium" | "high" | "extreme";
+type OverlayType = "none" | "vignette" | "top-bottom";
+/**
+ * Blurred video backdrop wrapper variants.
+ *
+ * The wrapper extends beyond its bounds (inset: -120px) to cover
+ * blur artifacts at the edges.
+ */
+declare const blurredVideoBackdropVariants: tailwind_variants.TVReturnType<{
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, {
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}>, {
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, {
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Canvas element styles.
+ */
+declare const canvasVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Gradient overlay base styles.
+ * Gradient backgrounds are applied via inline styles to avoid arbitrary values.
+ */
+declare const gradientOverlayVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+declare const BLUR_AMOUNTS: Record<BlurIntensity, number>;
+interface UseCanvasBlurOptions {
+    /** Ref to the source video element */
+    videoRef: React$1.RefObject<HTMLVideoElement | null>;
+    /** Blur amount in pixels */
+    blurAmount: number;
+    /** Whether rendering is enabled */
+    enabled?: boolean;
+    /** Target FPS (lower = better performance, default: 30) */
+    targetFps?: number;
+    /** Canvas scale factor (lower = better performance, default: 0.5) */
+    scale?: number;
+}
+interface UseCanvasBlurReturn {
+    /** Ref to attach to the canvas element */
+    canvasRef: React$1.RefObject<HTMLCanvasElement | null>;
+    /** Whether the canvas is currently rendering */
+    isRendering: boolean;
+    /** Performance metrics */
+    metrics: {
+        fps: number;
+        frameTime: number;
+    };
+}
+/**
+ * Hook for rendering a blurred video to canvas.
+ *
+ * Performance optimizations:
+ * - Renders at reduced resolution (scale factor)
+ * - Throttled to target FPS
+ * - Uses CSS scale to fill container
+ * - Single video decoder (no sync needed)
+ */
+declare function useCanvasBlur({ videoRef, blurAmount, enabled, targetFps, scale, }: UseCanvasBlurOptions): UseCanvasBlurReturn;
+interface BlurredVideoBackdropProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof blurredVideoBackdropVariants> {
+    /** Ref to the primary video element to create backdrop from (required) */
+    videoRef: React$1.RefObject<HTMLVideoElement | null>;
+    /** Opacity of the backdrop (0-1, default: 0.6) */
+    opacity?: number;
+    /** Extension amount in pixels to cover blur artifacts (default: 120) */
+    extension?: number;
+    /** Target FPS for canvas rendering (default: 30) */
+    targetFps?: number;
+    /** Canvas scale factor - lower = better performance (default: 0.5) */
+    scale?: number;
+    /** Whether to show debug metrics */
+    showMetrics?: boolean;
+}
+/**
+ * BlurredVideoBackdrop - A high-performance blurred video backdrop using canvas.
+ *
+ * Renders a blurred copy of a video element to create an ambient backdrop effect.
+ * Uses canvas rendering for optimal performance - no video sync needed.
+ *
+ * Performance features:
+ * - Single video decoder (draws from existing video element)
+ * - Reduced resolution rendering (configurable scale)
+ * - Throttled frame rate (configurable FPS)
+ * - GPU-accelerated canvas scaling
+ *
+ * @example
+ * ```tsx
+ * const videoRef = useRef<HTMLVideoElement>(null);
+ *
+ * <div className="relative">
+ *   <BlurredVideoBackdrop
+ *     videoRef={videoRef}
+ *     blur="high"
+ *     overlay="vignette"
+ *   />
+ *   <VideoPlayer videoRef={videoRef} src="/video.mp4" />
+ * </div>
+ * ```
+ */
+declare const BlurredVideoBackdrop: React$1.ForwardRefExoticComponent<BlurredVideoBackdropProps & React$1.RefAttributes<HTMLDivElement>>;
+
 /**
  * Component-level theming interface
  *
@@ -771,7 +999,7 @@ declare const iconButtonVariants: tailwind_variants.TVReturnType<{
         default: string;
         full: string;
     };
-}, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", tailwind_variants_dist_config_js.TVConfig<{
+}, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&>svg]:shrink-0", tailwind_variants_dist_config_js.TVConfig<{
     variant: {
         primary: string;
         "primary-outline": string;
@@ -843,7 +1071,7 @@ declare const iconButtonVariants: tailwind_variants.TVReturnType<{
         default: string;
         full: string;
     };
-}, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", tailwind_variants_dist_config_js.TVConfig<{
+}, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&>svg]:shrink-0", tailwind_variants_dist_config_js.TVConfig<{
     variant: {
         primary: string;
         "primary-outline": string;
@@ -1680,6 +1908,7 @@ declare const PopoverParts: (({ children, ...props }: PopoverRootProps) => react
  * - Focus/Open: Accent border with focus ring
  * - Selected: Has a value selected (darker text)
  * - Disabled: Reduced opacity, not interactive
+ * - Invalid: Error border and styling
  */
 declare const selectTriggerVariants: tailwind_variants.TVReturnType<{
     size: {
@@ -1754,6 +1983,11 @@ declare const selectTriggerVariants: tailwind_variants.TVReturnType<{
 }>, unknown, unknown, undefined>>;
 /**
  * Select popup/menu variants
+ *
+ * Uses overlay tokens for consistent floating panel styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - surface.overlay.radius - Rounded corners
  */
 declare const selectPopupVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 /**
@@ -1773,10 +2007,25 @@ declare const SelectRoot: <Value = string>({ children, ...props }: SelectProps<V
 interface SelectTriggerProps extends Omit<React$1.ComponentProps<typeof Select$1.Trigger>, "className">, VariantProps<typeof selectTriggerVariants> {
     className?: string;
     placeholder?: string;
+    /**
+     * Accessible label for the select trigger.
+     * Required for accessibility when no visible label is present.
+     */
+    "aria-label"?: string;
 }
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface SelectValueProps extends Omit<React$1.ComponentProps<typeof Select$1.Value>, "className"> {
+    className?: string;
+    placeholder?: string;
+}
 interface SelectPopupProps extends Omit<React$1.ComponentProps<typeof Select$1.Popup>, "className"> {
     className?: string;
+    /**
+     * Whether the selected item should align with the trigger.
+     * When true (default), the popup positions so the selected item appears over the trigger.
+     * When false, the popup aligns to the trigger edge.
+     */
+    alignItemWithTrigger?: boolean;
 }
 declare const SelectPopup: React$1.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 interface SelectOptionProps extends Omit<React$1.ComponentProps<typeof Select$1.Item>, "className"> {
@@ -1791,12 +2040,28 @@ interface SelectGroupLabelProps extends Omit<React$1.ComponentProps<typeof Selec
     className?: string;
 }
 declare const SelectGroupLabel: React$1.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface SelectSeparatorProps extends Omit<React$1.ComponentProps<typeof Select$1.Separator>, "className"> {
+    className?: string;
+}
+interface SelectScrollUpArrowProps extends Omit<React$1.ComponentProps<typeof Select$1.ScrollUpArrow>, "className"> {
+    className?: string;
+}
+interface SelectScrollDownArrowProps extends Omit<React$1.ComponentProps<typeof Select$1.ScrollDownArrow>, "className"> {
+    className?: string;
+}
 declare const Select: (<Value = string>({ children, ...props }: SelectProps<Value>) => react_jsx_runtime.JSX.Element) & {
     Trigger: React$1.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+    Value: React$1.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
     Popup: React$1.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Content: React$1.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
     Option: React$1.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Item: React$1.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
     Group: React$1.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
     GroupLabel: React$1.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Label: React$1.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Separator: React$1.ForwardRefExoticComponent<Omit<SelectSeparatorProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    ScrollUpArrow: React$1.ForwardRefExoticComponent<Omit<SelectScrollUpArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    ScrollDownArrow: React$1.ForwardRefExoticComponent<Omit<SelectScrollDownArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 };
 
 /**
@@ -1957,162 +2222,1331 @@ declare const TooltipParts: (({ children, ...props }: TooltipRootProps) => react
     Arrow: React$1.ForwardRefExoticComponent<Omit<TooltipArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 };
 
-interface DevToolbarProps {
-    defaultExpanded?: boolean;
+/**
+ * Represents a single caption cue parsed from VTT.
+ */
+interface CaptionCue {
+    /** Unique identifier for the cue */
+    id: string;
+    /** Start time in seconds */
+    startTime: number;
+    /** End time in seconds */
+    endTime: number;
+    /** Caption text content */
+    text: string;
 }
-declare function DevToolbar({ defaultExpanded }: DevToolbarProps): react_jsx_runtime.JSX.Element;
-
-interface GridOverlayProps {
-    columnOpacity?: number;
-    borderOpacity?: number;
-    visible?: boolean;
+interface UseCaptionsOptions {
+    /** VTT file URL to fetch */
+    src?: string;
+    /** Pre-loaded VTT content string */
+    content?: string;
+    /** Strip VTT formatting tags from caption text */
+    stripTags?: boolean;
+    /** Current playback time in seconds (alternative to setCurrentTime) */
+    currentTime?: number;
 }
-declare function GridOverlay({ columnOpacity, borderOpacity, visible, }: GridOverlayProps): react_jsx_runtime.JSX.Element;
+interface UseCaptionsReturn {
+    /** All parsed caption cues */
+    cues: CaptionCue[];
+    /** Currently active cue based on current time */
+    activeCue: CaptionCue | null;
+    /** Update the current playback time to get active cue */
+    setCurrentTime: (time: number) => void;
+    /** Loading state */
+    isLoading: boolean;
+    /** Error state */
+    error: Error | null;
+}
+/**
+ * Hook for parsing VTT captions and tracking the active cue.
+ *
+ * @param options - Caption source options
+ * @returns Parsed cues, active cue, and state
+ *
+ * @example
+ * ```tsx
+ * function VideoPlayer() {
+ *   const videoRef = React.useRef<HTMLVideoElement>(null);
+ *   const { activeCue, setCurrentTime } = useCaptions({
+ *     src: '/captions.vtt',
+ *   });
+ *
+ *   // Sync with video time
+ *   React.useEffect(() => {
+ *     const video = videoRef.current;
+ *     if (!video) return;
+ *
+ *     const handleTimeUpdate = () => setCurrentTime(video.currentTime);
+ *     video.addEventListener('timeupdate', handleTimeUpdate);
+ *     return () => video.removeEventListener('timeupdate', handleTimeUpdate);
+ *   }, [setCurrentTime]);
+ *
+ *   return (
+ *     <div>
+ *       <video ref={videoRef} src="/video.mp4" />
+ *       {activeCue && <div className="caption">{activeCue.text}</div>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useCaptions(options?: UseCaptionsOptions): UseCaptionsReturn;
 
-declare const cardVariants: tailwind_variants.TVReturnType<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
+/**
+ * Caption overlay variants using semantic tokens.
+ */
+declare const captionOverlayVariants: tailwind_variants.TVReturnType<{
+    position: {
+        bottom: string;
+        "bottom-sm": string;
     };
-}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", tailwind_variants_dist_config_js.TVConfig<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    position: {
+        bottom: string;
+        "bottom-sm": string;
     };
 }, {
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
+    position: {
+        bottom: string;
+        "bottom-sm": string;
     };
 }>, {
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
+    position: {
+        bottom: string;
+        "bottom-sm": string;
     };
 }, undefined, tailwind_variants.TVReturnType<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
+    position: {
+        bottom: string;
+        "bottom-sm": string;
     };
-}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", tailwind_variants_dist_config_js.TVConfig<{
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    position: {
+        bottom: string;
+        "bottom-sm": string;
     };
 }, {
-    layout: {
-        vertical: string;
-        horizontal: string;
-        /**
-         * Overlay layout - content sits on top of full-bleed background.
-         * Use with Background components for images/gradients.
-         */
-        overlay: string;
+    position: {
+        bottom: string;
+        "bottom-sm": string;
     };
 }>, unknown, unknown, undefined>>;
-interface CardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
-}
-/**
- * Card component for displaying content in a contained, scannable format.
- *
- * Layouts:
- * - vertical: Image on top, content below (default)
- * - horizontal: Image on left, content on right
- * - overlay: Full-bleed background with content on top
- *
- * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.
- * For overlay layout, use Background components for full-bleed backgrounds.
- */
-declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
-interface CardImageProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The image source URL
-     */
-    src?: string;
-    /**
-     * Alt text for the image
-     */
-    alt?: string;
-}
 /**
- * Card image area. For vertical layout, displays with 16:9 aspect ratio.
- * For horizontal layout, takes up ~40% width and stretches to content height.
+ * Caption text box variants.
  */
-declare const CardImage: React$1.ForwardRefExoticComponent<CardImageProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const cardContentVariants: tailwind_variants.TVReturnType<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
+declare const captionTextVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
     };
-}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", tailwind_variants_dist_config_js.TVConfig<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
     };
 }, {
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
     };
 }>, {
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
-     */
-    justify: {
-        start: string;
-        center: string;
-        end: string;
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
     };
 }, undefined, tailwind_variants.TVReturnType<{
-    /**
-     * Vertical alignment of content within the card.
-     * Useful for overlay layouts to position content at top/center/bottom.
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CaptionOverlayProps extends React$1.HTMLAttributes<HTMLOutputElement>, VariantProps<typeof captionOverlayVariants>, VariantProps<typeof captionTextVariants> {
+    /** Caption cue to display */
+    cue?: CaptionCue | null;
+    /** Caption text to display (alternative to cue) */
+    text?: string;
+}
+/**
+ * CaptionOverlay component.
+ *
+ * Displays caption text overlaid on video content.
+ * Styled to match the DGA video player implementation.
+ *
+ * @example
+ * ```tsx
+ * <CaptionOverlay cue={activeCue} />
+ *
+ * // Or with plain text
+ * <CaptionOverlay text="Hello, world!" />
+ * ```
+ */
+declare const CaptionOverlay: React$1.ForwardRefExoticComponent<CaptionOverlayProps & React$1.RefAttributes<HTMLOutputElement>>;
+
+/** Cloudflare Stream configuration */
+interface CloudflareConfig$1 {
+    /** Cloudflare Stream video ID */
+    videoId: string;
+    /** Cloudflare customer code/subdomain */
+    customerCode: string;
+}
+/**
+ * Video player container variants.
+ */
+declare const videoPlayerVariants: tailwind_variants.TVReturnType<{
+    aspectRatio: {
+        "16/9": string;
+        "4/3": string;
+        "1/1": string;
+        "9/16": string;
+        auto: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    aspectRatio: {
+        "16/9": string;
+        "4/3": string;
+        "1/1": string;
+        "9/16": string;
+        auto: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    aspectRatio: {
+        "16/9": string;
+        "4/3": string;
+        "1/1": string;
+        "9/16": string;
+        auto: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    aspectRatio: {
+        "16/9": string;
+        "4/3": string;
+        "1/1": string;
+        "9/16": string;
+        auto: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    aspectRatio: {
+        "16/9": string;
+        "4/3": string;
+        "1/1": string;
+        "9/16": string;
+        auto: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    aspectRatio: {
+        "16/9": string;
+        "4/3": string;
+        "1/1": string;
+        "9/16": string;
+        auto: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    aspectRatio: {
+        "16/9": string;
+        "4/3": string;
+        "1/1": string;
+        "9/16": string;
+        auto: string;
+    };
+    rounded: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Media controller container styles.
+ * Uses CSS custom properties to configure media-chrome components.
+ * Styled to match DGA video player design with ghost-style buttons.
+ */
+declare const mediaControllerVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Control bar variants.
+ * Note: Positioning is handled via inline styles to override web component defaults.
+ * Tailwind classes handle background color and visibility transitions.
+ */
+declare const controlBarVariants: tailwind_variants.TVReturnType<{
+    visible: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    visible: {
+        true: string;
+        false: string;
+    };
+}, {
+    visible: {
+        true: string;
+        false: string;
+    };
+}>, {
+    visible: {
+        true: string;
+        false: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    visible: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    visible: {
+        true: string;
+        false: string;
+    };
+}, {
+    visible: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Control button styles for custom buttons.
+ * Transparent by default, shows background on hover (ghost style).
+ */
+declare const controlButtonVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Loading overlay variants.
+ */
+declare const loadingOverlayVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface VideoPlayerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children" | "onError" | "onPlay" | "onPause" | "onEnded" | "onTimeUpdate">, VariantProps<typeof videoPlayerVariants> {
+    /** Video source URL (HLS .m3u8 or regular video file) */
+    src?: string;
+    /** Cloudflare Stream configuration (takes precedence over src) */
+    cloudflare?: CloudflareConfig$1;
+    /** Poster image URL */
+    poster?: string;
+    /** VTT captions URL */
+    captionsSrc?: string;
+    /** Whether to autoplay (default: false) */
+    autoPlay?: boolean;
+    /** Whether to loop the video (default: false) */
+    loop?: boolean;
+    /** Whether to mute initially (default: false) */
+    muted?: boolean;
+    /** Whether to show controls (default: true) */
+    controls?: boolean;
+    /** Whether to auto-hide controls when not interacting (default: true) */
+    autoHideControls?: boolean;
+    /** Control auto-hide delay in ms (default: 3000) */
+    autoHideDelay?: number;
+    /** Whether captions are enabled by default (default: false) */
+    captionsEnabled?: boolean;
+    /** Callback when video starts playing */
+    onPlay?: () => void;
+    /** Callback when video pauses */
+    onPause?: () => void;
+    /** Callback when video ends */
+    onEnded?: () => void;
+    /** Callback on time update */
+    onTimeUpdate?: (time: number) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Ref to the video element */
+    videoRef?: React$1.RefObject<HTMLVideoElement | null>;
+}
+/**
+ * VideoPlayer - Standalone video player component with media-chrome controls.
+ *
+ * Supports Cloudflare Stream (recommended) or direct video URLs with HLS support.
+ * Works standalone or can be composed with Modal for fullscreen playback.
+ *
+ * @example
+ * ```tsx
+ * // With Cloudflare Stream (recommended)
+ * <VideoPlayer
+ *   cloudflare={{ videoId: "abc123", customerCode: "xyz789" }}
+ *   poster="/thumbnail.jpg"
+ *   captionsSrc="/captions.vtt"
+ * />
+ *
+ * // With direct URL
+ * <VideoPlayer
+ *   src="https://example.com/video.mp4"
+ *   poster="/thumbnail.jpg"
+ * />
+ *
+ * // With Modal for fullscreen
+ * <Modal trigger={<Button>Watch Video</Button>}>
+ *   <VideoPlayer cloudflare={{ videoId: "...", customerCode: "..." }} />
+ * </Modal>
+ * ```
+ */
+declare const VideoPlayer: React$1.ForwardRefExoticComponent<VideoPlayerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface DevToolbarProps {
+    defaultExpanded?: boolean;
+}
+declare function DevToolbar({ defaultExpanded }: DevToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface GridOverlayProps {
+    columnOpacity?: number;
+    borderOpacity?: number;
+    visible?: boolean;
+}
+declare function GridOverlay({ columnOpacity, borderOpacity, visible, }: GridOverlayProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Dialog backdrop variants
+ *
+ * Semi-transparent overlay behind the dialog content.
+ */
+declare const dialogBackdropVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Dialog popup variants
+ *
+ * Uses semantic overlay tokens for themeable styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - color.overlay.text - Primary text
+ * - surface.overlay.radius - Rounded corners
+ */
+declare const dialogPopupVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}>, unknown, unknown, undefined>>;
+interface DialogRootProps extends Dialog$1.Root.Props {
+    children: React$1.ReactNode;
+}
+/**
+ * Dialog Root
+ *
+ * Groups all dialog parts and manages open/close state.
+ * Provides focus trap, scroll lock, and escape key handling automatically.
+ */
+declare const DialogRoot: ({ children, ...props }: DialogRootProps) => react_jsx_runtime.JSX.Element;
+interface DialogTriggerProps extends React$1.ComponentProps<typeof Dialog$1.Trigger> {
+    className?: string;
+}
+/**
+ * Dialog Trigger
+ *
+ * The element that triggers the dialog to open on click.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface DialogPortalProps extends Dialog$1.Portal.Props {
+    children: React$1.ReactNode;
+}
+/**
+ * Dialog Portal
+ *
+ * Renders the dialog in a portal outside the DOM hierarchy.
+ * This ensures proper stacking context and avoids z-index issues.
+ */
+declare const DialogPortal: ({ children, ...props }: DialogPortalProps) => react_jsx_runtime.JSX.Element;
+interface DialogBackdropProps extends Omit<React$1.ComponentProps<typeof Dialog$1.Backdrop>, "className"> {
+    className?: string;
+}
+/**
+ * Dialog Backdrop
+ *
+ * Semi-transparent overlay that covers the page behind the dialog.
+ * Clicking the backdrop closes the dialog by default.
+ */
+declare const DialogBackdrop: React$1.ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogPopupProps extends Omit<React$1.ComponentProps<typeof Dialog$1.Popup>, "className">, VariantProps<typeof dialogPopupVariants> {
+    className?: string;
+}
+/**
+ * Dialog Popup
+ *
+ * The dialog content container. Centered on screen with configurable size.
+ * Use `variant="minimal"` for borderless dialogs (video modals, etc.)
+ */
+declare const DialogPopup: React$1.ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogTitleProps extends Omit<React$1.ComponentProps<typeof Dialog$1.Title>, "className"> {
+    className?: string;
+}
+/**
+ * Dialog Title
+ *
+ * Accessible title for the dialog. Should be used for screen reader support.
+ */
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+interface DialogDescriptionProps extends Omit<React$1.ComponentProps<typeof Dialog$1.Description>, "className"> {
+    className?: string;
+}
+/**
+ * Dialog Description
+ *
+ * Accessible description for the dialog content.
+ */
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+interface DialogCloseProps extends Omit<React$1.ComponentProps<typeof Dialog$1.Close>, "className"> {
+    className?: string;
+}
+/**
+ * Dialog Close
+ *
+ * Close button for the dialog. Can be placed anywhere within the dialog.
+ */
+declare const DialogClose: React$1.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+interface DialogBodyProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * Dialog Body
+ *
+ * Container for the main dialog content. Handles overflow scrolling.
+ */
+declare const DialogBody: React$1.ForwardRefExoticComponent<DialogBodyProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * Dialog Footer
+ *
+ * Container for dialog actions (buttons, etc.). Typically placed at the bottom.
+ */
+declare const DialogFooter: React$1.ForwardRefExoticComponent<DialogFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DialogProps {
+    /** The content to show in the dialog */
+    children: React$1.ReactNode;
+    /** The element that triggers the dialog (optional for controlled mode) */
+    trigger?: React$1.ReactNode;
+    /** Title for the dialog */
+    title?: React$1.ReactNode;
+    /** Description for the dialog */
+    description?: React$1.ReactNode;
+    /** Size of the dialog */
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    /** Visual variant: "default" for card style, "minimal" for borderless (video modals) */
+    variant?: "default" | "minimal";
+    /** Whether to show a close button */
+    showClose?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the popup */
+    className?: string;
+}
+/**
+ * Dialog
+ *
+ * A simple, pre-composed dialog component for common use cases.
+ * For more complex needs, use the compound components directly.
+ *
+ * @example
+ * ```tsx
+ * // With trigger
+ * <Dialog
+ *   trigger={<Button>Open Dialog</Button>}
+ *   title="Dialog Title"
+ *   description="This is the dialog description."
+ * >
+ *   <p>Dialog content goes here.</p>
+ * </Dialog>
+ *
+ * // Controlled mode
+ * <Dialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Controlled Dialog"
+ * >
+ *   <p>Content here</p>
+ * </Dialog>
+ * ```
+ */
+declare const Dialog: ({ children, trigger, title, description, size, variant, showClose, open, defaultOpen, onOpenChange, className, }: DialogProps) => react_jsx_runtime.JSX.Element;
+declare const DialogParts: (({ children, ...props }: DialogRootProps) => react_jsx_runtime.JSX.Element) & {
+    Root: ({ children, ...props }: DialogRootProps) => react_jsx_runtime.JSX.Element;
+    Trigger: React$1.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: DialogPortalProps) => react_jsx_runtime.JSX.Element;
+    Backdrop: React$1.ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Popup: React$1.ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    Title: React$1.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+    Description: React$1.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+    Close: React$1.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+    Body: React$1.ForwardRefExoticComponent<DialogBodyProps & React$1.RefAttributes<HTMLDivElement>>;
+    Footer: React$1.ForwardRefExoticComponent<DialogFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Video dialog container variants.
+ * Uses fixed positioning to cover the viewport.
+ */
+declare const videoDialogVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Close button variants.
+ */
+declare const closeButtonVariants: tailwind_variants.TVReturnType<{
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, {
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}>, {
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}, {
+    position: {
+        "top-right": string;
+        "top-left": string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Video container variants.
+ * Expands to fill viewport, constrained by height (maintains aspect ratio).
+ */
+declare const videoContainerVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface VideoDialogProps extends Omit<VideoPlayerProps, "videoRef" | "className"> {
+    /** Trigger element that opens the dialog */
+    trigger: React$1.ReactNode;
+    /** Blur intensity for backdrop (default: high) */
+    blur?: BlurredVideoBackdropProps["blur"];
+    /** Gradient overlay for backdrop (default: vignette) */
+    overlay?: BlurredVideoBackdropProps["overlay"];
+    /** Backdrop opacity (default: 0.6) */
+    backdropOpacity?: number;
+    /** Whether to show close button (default: true) */
+    showClose?: boolean;
+    /** Close button position (default: top-right) */
+    closePosition?: "top-right" | "top-left";
+    /** Video player rounded corners (default: lg) */
+    rounded?: VideoPlayerProps["rounded"];
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the dialog container */
+    className?: string;
+}
+/**
+ * VideoDialog - Fullscreen video modal with blurred video backdrop.
+ *
+ * Creates an immersive video viewing experience where the blurred video
+ * serves as the modal backdrop, with the main video centered on top.
+ * Based on the DGA modal pattern.
+ *
+ * Features:
+ * - Blurred video backdrop that syncs with main video
+ * - Configurable blur intensity and gradient overlays
+ * - Automatic play/pause when dialog opens/closes
+ * - HLS streaming support via Cloudflare Stream
+ * - Accessible dialog with focus trap and escape key handling
+ *
+ * @example
+ * ```tsx
+ * <VideoDialog
+ *   trigger={<Button>Watch Video</Button>}
+ *   cloudflare={{ videoId: "abc123", customerCode: "xyz789" }}
+ *   blur="high"
+ *   overlay="vignette"
+ * />
+ * ```
+ */
+declare const VideoDialog: React$1.ForwardRefExoticComponent<VideoDialogProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/** Cloudflare Stream configuration */
+interface CloudflareConfig {
+    /** Cloudflare Stream video ID */
+    videoId: string;
+    /** Cloudflare customer code/subdomain */
+    customerCode: string;
+}
+/**
+ * Root container variants.
+ */
+declare const videoWithBackdropVariants: tailwind_variants.TVReturnType<{
+    /**
+     * Full-height mode for dialogs.
+     */
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Full-height mode for dialogs.
+     */
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+}, {
+    /**
+     * Full-height mode for dialogs.
+     */
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+}>, {
+    /**
+     * Full-height mode for dialogs.
+     */
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    /**
+     * Full-height mode for dialogs.
+     */
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Full-height mode for dialogs.
+     */
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+}, {
+    /**
+     * Full-height mode for dialogs.
+     */
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Content container variants.
+ */
+declare const contentVariants: tailwind_variants.TVReturnType<{
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    fullHeight: {
+        true: string;
+        false: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface VideoWithBackdropRootProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof videoWithBackdropVariants> {
+    /** Video source URL (HLS .m3u8 or regular video file) */
+    src?: string;
+    /** Cloudflare Stream configuration (takes precedence over src) */
+    cloudflare?: CloudflareConfig;
+    /** Children to render */
+    children: React$1.ReactNode;
+}
+/**
+ * VideoWithBackdrop Root
+ *
+ * Container that provides video context to child components.
+ * Use with VideoWithBackdrop.Backdrop and VideoWithBackdrop.Content.
+ *
+ * @example
+ * ```tsx
+ * <VideoWithBackdrop.Root cloudflare={config}>
+ *   <VideoWithBackdrop.Backdrop blur="high" overlay="vignette" />
+ *   <VideoWithBackdrop.Content>
+ *     <VideoWithBackdrop.Video />
+ *   </VideoWithBackdrop.Content>
+ * </VideoWithBackdrop.Root>
+ * ```
+ */
+declare const VideoWithBackdropRoot: React$1.ForwardRefExoticComponent<VideoWithBackdropRootProps & React$1.RefAttributes<HTMLDivElement>>;
+interface VideoWithBackdropBackdropProps extends Omit<BlurredVideoBackdropProps, "videoRef"> {
+}
+/**
+ * VideoWithBackdrop Backdrop
+ *
+ * Renders the blurred video backdrop layer using canvas.
+ * Automatically draws from the video element in context.
+ */
+declare const VideoWithBackdropBackdrop: React$1.ForwardRefExoticComponent<VideoWithBackdropBackdropProps & React$1.RefAttributes<HTMLDivElement>>;
+interface VideoWithBackdropContentProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof contentVariants> {
+}
+/**
+ * VideoWithBackdrop Content
+ *
+ * Container for the main video player and any additional content.
+ * Positioned above the backdrop with z-index.
+ */
+declare const VideoWithBackdropContent: React$1.ForwardRefExoticComponent<VideoWithBackdropContentProps & React$1.RefAttributes<HTMLDivElement>>;
+interface VideoWithBackdropVideoProps extends Omit<VideoPlayerProps, "videoRef"> {
+    /** Max width of the video player container */
+    maxWidth?: string;
+}
+/**
+ * VideoWithBackdrop Video
+ *
+ * Convenience wrapper for VideoPlayer that automatically connects
+ * to the backdrop via context.
+ */
+declare const VideoWithBackdropVideo: React$1.ForwardRefExoticComponent<VideoWithBackdropVideoProps & React$1.RefAttributes<HTMLDivElement>>;
+interface VideoWithBackdropProps extends Omit<VideoPlayerProps, "videoRef" | "className" | "aspectRatio"> {
+    /** Blur intensity (default: high) */
+    blur?: BlurredVideoBackdropProps["blur"];
+    /** Gradient overlay (default: vignette) */
+    overlay?: BlurredVideoBackdropProps["overlay"];
+    /** Backdrop opacity (default: 0.6) */
+    backdropOpacity?: number;
+    /** Max width of video player (default: 960px) */
+    maxWidth?: string;
+    /** Content padding (default: md) */
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Video player rounded corners */
+    rounded?: VideoPlayerProps["rounded"];
+    /** Additional className for root container */
+    className?: string;
+    /** Target FPS for backdrop canvas (default: 30) */
+    targetFps?: number;
+    /** Canvas scale factor for backdrop (default: 0.5) */
+    scale?: number;
+}
+/**
+ * VideoWithBackdrop - Pre-composed video player with blurred backdrop.
+ *
+ * A simple, ready-to-use component that combines VideoPlayer with
+ * BlurredVideoBackdrop for modal video experiences. Uses canvas rendering
+ * for optimal performance.
+ *
+ * For custom layouts, use the compound components:
+ * - VideoWithBackdrop.Root
+ * - VideoWithBackdrop.Backdrop
+ * - VideoWithBackdrop.Content
+ * - VideoWithBackdrop.Video
+ *
+ * @example
+ * ```tsx
+ * // Simple usage (in a full-height container like Dialog)
+ * <VideoWithBackdrop
+ *   cloudflare={{ videoId: "...", customerCode: "..." }}
+ *   autoPlay
+ *   blur="high"
+ *   overlay="vignette"
+ * />
+ *
+ * // With Dialog
+ * <Dialog size="full" variant="minimal">
+ *   <VideoWithBackdrop cloudflare={config} autoPlay />
+ * </Dialog>
+ * ```
+ */
+declare const VideoWithBackdrop: React$1.ForwardRefExoticComponent<VideoWithBackdropProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const VideoWithBackdropParts: React$1.ForwardRefExoticComponent<VideoWithBackdropRootProps & React$1.RefAttributes<HTMLDivElement>> & {
+    Root: React$1.ForwardRefExoticComponent<VideoWithBackdropRootProps & React$1.RefAttributes<HTMLDivElement>>;
+    Backdrop: React$1.ForwardRefExoticComponent<VideoWithBackdropBackdropProps & React$1.RefAttributes<HTMLDivElement>>;
+    Content: React$1.ForwardRefExoticComponent<VideoWithBackdropContentProps & React$1.RefAttributes<HTMLDivElement>>;
+    Video: React$1.ForwardRefExoticComponent<VideoWithBackdropVideoProps & React$1.RefAttributes<HTMLDivElement>>;
+};
+
+declare const cardVariants: tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}>, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, undefined, "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        /**
+         * Overlay layout - content sits on top of full-bleed background.
+         * Use with Background components for images/gradients.
+         */
+        overlay: string;
+        /**
+         * Profile layout - square image with stacked content below.
+         * Ideal for team member cards, user profiles, testimonials.
+         */
+        profile: string;
+        /**
+         * Compact layout - small thumbnail with condensed horizontal content.
+         * Ideal for news items, article previews, resource lists.
+         */
+        compact: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+/**
+ * Card component for displaying content in a contained, scannable format.
+ *
+ * Layouts:
+ * - vertical: Image on top, content below (default)
+ * - horizontal: Image on left, content on right
+ * - overlay: Full-bleed background with content on top
+ *
+ * Use with CardImage, CardContent, CardEyebrow, CardTitle, CardDescription, and CardActions.
+ * For overlay layout, use Background components for full-bleed backgrounds.
+ */
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const cardImageVariants: tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, undefined, "relative shrink-0 bg-bg-muted", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}>, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, undefined, "relative shrink-0 bg-bg-muted", tailwind_variants_dist_config_js.TVConfig<{
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}, {
+    layout: {
+        vertical: string;
+        horizontal: string;
+        overlay: string;
+        /** Profile: square aspect ratio for headshots/avatars */
+        profile: string;
+        /** Compact: fixed small size for thumbnails */
+        compact: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface CardImageProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardImageVariants> {
+    /**
+     * The image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+}
+/**
+ * Card image area with layout-specific styling.
+ * - vertical: 16:9 aspect ratio, full width
+ * - horizontal: ~40% width, stretches to content height
+ * - profile: square aspect ratio for headshots/avatars
+ * - compact: fixed small size for thumbnails
+ */
+declare const CardImage: React$1.ForwardRefExoticComponent<CardImageProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const cardContentVariants: tailwind_variants.TVReturnType<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, "flex w-full flex-1 flex-col gap-spatial-card-large-gap p-spatial-card-large-padding", tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}>, {
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
+     */
+    justify: {
+        start: string;
+        center: string;
+        end: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    /**
+     * Vertical alignment of content within the card.
+     * Useful for overlay layouts to position content at top/center/bottom.
      */
     justify: {
         start: string;
@@ -2748,6 +4182,21 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
             content: string[];
         };
     };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+    };
     colorScheme: {
         dark: {
             root: string;
@@ -2768,6 +4217,7 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
     top: string;
     content: string[];
     title: string;
+    indicator: string;
 }, undefined, tailwind_variants_dist_config_js.TVConfig<{
     variant: {
         A1: {
@@ -2783,6 +4233,21 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
             content: string[];
         };
     };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+    };
     colorScheme: {
         dark: {
             root: string;
@@ -2813,6 +4278,21 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
             content: string[];
         };
     };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+    };
     colorScheme: {
         dark: {
             root: string;
@@ -2843,6 +4323,21 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
             content: string[];
         };
     };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+    };
     colorScheme: {
         dark: {
             root: string;
@@ -2863,6 +4358,7 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
     top: string;
     content: string[];
     title: string;
+    indicator: string;
 }, tailwind_variants.TVReturnType<{
     variant: {
         A1: {
@@ -2878,6 +4374,21 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
             content: string[];
         };
     };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+    };
     colorScheme: {
         dark: {
             root: string;
@@ -2898,6 +4409,7 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
     top: string;
     content: string[];
     title: string;
+    indicator: string;
 }, undefined, tailwind_variants_dist_config_js.TVConfig<{
     variant: {
         A1: {
@@ -2913,6 +4425,21 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
             content: string[];
         };
     };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+    };
     colorScheme: {
         dark: {
             root: string;
@@ -2943,6 +4470,21 @@ declare const heroVariants: tailwind_variants.TVReturnType<{
             content: string[];
         };
     };
+    /**
+     * Vertical alignment of content within the hero.
+     * Provides a simpler API than variant for basic alignment needs.
+     */
+    contentAlign: {
+        top: {
+            content: string;
+        };
+        center: {
+            content: string;
+        };
+        bottom: {
+            content: string;
+        };
+    };
     colorScheme: {
         dark: {
             root: string;
@@ -2998,6 +4540,17 @@ interface HeroProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title">,
      * Use for USGovBanner, Navigation, etc.
      */
     top?: React$1.ReactNode;
+    /**
+     * Indicator slot for scroll hints, arrows, or other visual cues.
+     * Rendered at the bottom of the hero, below the main content.
+     * @example
+     * ```tsx
+     * <Hero indicator={<ChevronDown className="animate-bounce" />}>
+     *   <h1>Welcome</h1>
+     * </Hero>
+     * ```
+     */
+    indicator?: React$1.ReactNode;
     /**
      * Background for the hero. Can be:
      * - A color string (hex, rgb, etc.) for solid backgrounds
@@ -3495,6 +5048,152 @@ interface ToutProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<ty
  */
 declare const Tout: React$1.ForwardRefExoticComponent<ToutProps & React$1.RefAttributes<HTMLElement>>;
 
+/**
+ * Design system breakpoint values in pixels.
+ * These match the primitive breakpoint tokens from packages/tokens.
+ */
+declare const BREAKPOINTS: {
+    readonly sm: 320;
+    readonly md: 768;
+    readonly lg: 1440;
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * Hook to get the current responsive breakpoint.
+ * Returns the active breakpoint name based on viewport width.
+ *
+ * @returns The current breakpoint: 'sm' | 'md' | 'lg'
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const breakpoint = useBreakpoint();
+ *
+ *   return (
+ *     <div>
+ *       {breakpoint === 'sm' && <MobileLayout />}
+ *       {breakpoint === 'md' && <TabletLayout />}
+ *       {breakpoint === 'lg' && <DesktopLayout />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useBreakpoint(): Breakpoint;
+/**
+ * Hook to check if viewport is at or above a specific breakpoint.
+ *
+ * @param breakpoint - The minimum breakpoint to check against
+ * @returns boolean indicating if viewport is at or above the breakpoint
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const isDesktop = useMinBreakpoint('lg');
+ *   const isTabletUp = useMinBreakpoint('md');
+ *
+ *   return isDesktop ? <DesktopView /> : <MobileView />;
+ * }
+ * ```
+ */
+declare function useMinBreakpoint(breakpoint: Breakpoint): boolean;
+/**
+ * Hook to check if viewport is below a specific breakpoint.
+ *
+ * @param breakpoint - The breakpoint to check against
+ * @returns boolean indicating if viewport is below the breakpoint
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const isMobile = useMaxBreakpoint('md'); // Below tablet
+ *
+ *   return isMobile ? <MobileNav /> : <DesktopNav />;
+ * }
+ * ```
+ */
+declare function useMaxBreakpoint(breakpoint: Breakpoint): boolean;
+
+type EventMap<T> = T extends Window ? WindowEventMap : T extends Document ? DocumentEventMap : T extends HTMLElement ? HTMLElementEventMap : never;
+/**
+ * Custom hook that attaches an event listener to a specified element.
+ * Automatically handles cleanup on unmount and when dependencies change.
+ *
+ * @param eventName - The name of the event to listen for
+ * @param handler - The callback function to execute when the event fires
+ * @param element - The element to attach the listener to (defaults to window)
+ * @param options - Optional event listener options
+ *
+ * @example
+ * ```tsx
+ * // Listen to window resize
+ * useEventListener('resize', handleResize);
+ *
+ * // Listen to element scroll
+ * useEventListener('scroll', handleScroll, containerRef.current);
+ *
+ * // With options
+ * useEventListener('scroll', handleScroll, window, { passive: true });
+ * ```
+ */
+declare function useEventListener<T extends Window | Document | HTMLElement, K extends keyof EventMap<T>>(eventName: K, handler: (event: EventMap<T>[K]) => void, element?: T | null, options?: boolean | AddEventListenerOptions): void;
+
+interface UseVideoKeyboardOptions {
+    /** Ref to the video element */
+    videoRef: React$1.RefObject<HTMLVideoElement | null>;
+    /** Whether keyboard handling is enabled (default: true) */
+    enabled?: boolean;
+    /** Seek amount in seconds for arrow keys (default: 5) */
+    seekAmount?: number;
+    /** Volume change amount for arrow keys (default: 0.1) */
+    volumeStep?: number;
+    /** Callback when play/pause is toggled */
+    onTogglePlay?: () => void;
+    /** Callback when fullscreen is toggled */
+    onToggleFullscreen?: () => void;
+    /** Callback when captions are toggled */
+    onToggleCaptions?: () => void;
+    /** Callback when controls should be shown */
+    onShowControls?: () => void;
+}
+interface UseVideoKeyboardReturn {
+    /** Key down handler to attach to container element */
+    handleKeyDown: (e: React$1.KeyboardEvent) => void;
+    /** Props to spread on the container element */
+    containerProps: {
+        onKeyDown: (e: React$1.KeyboardEvent) => void;
+        tabIndex: number;
+        role: string;
+        "aria-label": string;
+    };
+}
+/**
+ * Hook for handling keyboard shortcuts in a video player.
+ *
+ * Supported shortcuts:
+ * - Space: Play/pause
+ * - Left Arrow: Seek backward
+ * - Right Arrow: Seek forward
+ * - Up Arrow: Volume up
+ * - Down Arrow: Volume down
+ * - M: Toggle mute
+ * - F: Toggle fullscreen
+ * - C: Toggle captions
+ *
+ * @example
+ * ```tsx
+ * const { containerProps } = useVideoKeyboard({
+ *   videoRef,
+ *   onTogglePlay: () => video.paused ? video.play() : video.pause(),
+ *   onToggleFullscreen: () => toggleFullscreen(),
+ *   onShowControls: () => setControlsVisible(true),
+ * });
+ *
+ * return <div {...containerProps}>...</div>;
+ * ```
+ */
+declare function useVideoKeyboard({ videoRef, enabled, seekAmount, volumeStep, onTogglePlay, onToggleFullscreen, onToggleCaptions, onShowControls, }: UseVideoKeyboardOptions): UseVideoKeyboardReturn;
+
 declare function cn(...inputs: ClassValue[]): tailwind_variants.CnReturn;
 
 /**
@@ -3518,6 +5217,11 @@ interface ThemeProviderProps {
     color?: ColorThemeName;
     /** Surface theme name (defaults to "base") */
     surface?: SurfaceThemeName;
+    /**
+     * Custom project theme created with defineTheme()
+     * When provided, overrides color/surface props with custom theme tokens
+     */
+    customTheme?: ResolvedProjectTheme;
     /** Children to render */
     children: ReactNode;
     /** Optional className for the wrapper div */
@@ -3542,13 +5246,28 @@ interface ThemeProviderProps {
  *   <App />
  * </ThemeProvider>
  *
- * // Mix and match
- * <ThemeProvider color="institution" surface="soft">
+ * // Use a custom project theme
+ * import { defineTheme, srgb } from "@nds-design-system/tokens";
+ *
+ * const myTheme = defineTheme({
+ *   name: "my-project",
+ *   extends: "base",
+ *   tokens: {
+ *     semantic: {
+ *       color: {
+ *         bg: { page: srgb("#FEFDF9") },
+ *         accent: { brand: srgb("#A68B5E") },
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * <ThemeProvider customTheme={myTheme}>
  *   <App />
  * </ThemeProvider>
  * ```
  */
-declare function ThemeProvider({ color, surface, children, className, applyStyles, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ThemeProvider({ color, surface, customTheme, children, className, applyStyles, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Theme Hooks
@@ -3618,4 +5337,4 @@ declare function mergeCSSVars(...maps: CSSVariableMap[]): CSSVariableMap;
  */
 declare function filterCSSVars(cssVars: CSSVariableMap, prefix: string): CSSVariableMap;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, BackgroundCompound as Background, BackgroundGradient, type BackgroundGradientProps, BackgroundImage, type BackgroundImageProps, BackgroundOverlay, type BackgroundOverlayProps, type BackgroundProps, BackgroundStream, type BackgroundStreamProps, BackgroundVideo, type BackgroundVideoProps, Banner, type BannerProps, Button, type ButtonProps, type ButtonTheme, Card, CardActions, type CardActionsProps, CardBody, type CardBodyProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardEyebrow, type CardEyebrowProps, CardGrid, type CardGridProps, CardImage, type CardImageProps, type CardProps, CardTitle, type CardTitleProps, type ColorToken, type ComponentTheme, type ComponentThemeColors, type ComponentThemeSpatial, type ComponentThemeSurface, DEFAULT_TITLE_TYPOGRAPHY, DevToolbar, type DevToolbarProps, FONT_SIZES, FaqSection, type FaqSectionProps, type FontSizeToken, GridOverlay, type GridOverlayProps, Hero, BackgroundCompound as HeroBackground, BackgroundImage as HeroBackgroundImage, type BackgroundImageProps as HeroBackgroundImageProps, BackgroundStream as HeroBackgroundStream, type BackgroundStreamProps as HeroBackgroundStreamProps, BackgroundVideo as HeroBackgroundVideo, type BackgroundVideoProps as HeroBackgroundVideoProps, HeroContent, type HeroContentProps, BackgroundGradient as HeroGradient, type BackgroundGradientProps as HeroGradientProps, HeroHeader, type HeroHeaderProps, BackgroundOverlay as HeroOverlay, type BackgroundOverlayProps as HeroOverlayProps, type HeroProps, IconButton, type IconButtonProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, type InputProps, Navbar, NavbarActions, type NavbarActionsProps, NavbarBrand, type NavbarBrandProps, NavbarLink, type NavbarLinkProps, NavbarLinks, type NavbarLinksProps, NavbarMobileMenu, NavbarMobileMenuButton, type NavbarMobileMenuButtonProps, NavbarMobileMenuLink, type NavbarMobileMenuLinkProps, type NavbarMobileMenuProps, type NavbarProps, NdstudioFooter, type NdstudioFooterProps, PagerControl, type PagerControlProps, Popover, PopoverArrow, type PopoverArrowProps, PopoverBackdrop, type PopoverBackdropProps, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, PopoverParts, PopoverPopup, type PopoverPopupProps, PopoverPortal, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerProps, type PopoverProps, PopoverRoot, type PopoverRootProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Prose, type ProseProps, ProseSection, type ProseSectionProps, QuoteBlock, type QuoteBlockProps, type RadiusToken, River, type RiverProps, Select, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectOption, type SelectOptionProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectRoot, SelectTrigger, type SelectTriggerProps, type SpacingToken, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipArrow, type TooltipArrowProps, TooltipParts, TooltipPopup, type TooltipPopupProps, TooltipPortal, type TooltipPortalProps, TooltipPositioner, type TooltipPositionerProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipRoot, type TooltipRootProps, TooltipTrigger, type TooltipTriggerProps, Tout, type ToutProps, TwoColumnSection, type TwoColumnSectionProps, USGovBanner, type USGovBannerProps, applyTheme, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants, bannerVariants, buttonThemeToStyleVars, buttonVariants, cardGridVariants, cardVariants, cn, createThemeStyle, filterCSSVars, fontSizeToClass, getToken, heroContentVariants, heroHeaderVariants, heroVariants, iconButtonVariants, inputGroupAddonVariants, inputGroupVariants, inputVariants, mergeCSSVars, pagerControlVariants, popoverArrowVariants, popoverPopupVariants, quoteBlockVariants, removeTheme, responsiveTypographyClass, riverVariants, selectOptionVariants, selectPopupVariants, selectTriggerVariants, themeToStyleVars, toCSSVars, tooltipArrowVariants, tooltipPopupVariants, twoColumnSectionVariants, useCSSVars, useTheme, useThemeTokens };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, BLUR_AMOUNTS, BREAKPOINTS, BackgroundCompound as Background, BackgroundGradient, type BackgroundGradientProps, BackgroundImage, type BackgroundImageProps, BackgroundOverlay, type BackgroundOverlayProps, type BackgroundProps, BackgroundStream, type BackgroundStreamProps, BackgroundVideo, type BackgroundVideoProps, Banner, type BannerProps, type BlurIntensity, BlurredVideoBackdrop, type BlurredVideoBackdropProps, type Breakpoint, Button, type ButtonProps, type ButtonTheme, type CaptionCue, CaptionOverlay, type CaptionOverlayProps, Card, CardActions, type CardActionsProps, CardBody, type CardBodyProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardEyebrow, type CardEyebrowProps, CardGrid, type CardGridProps, CardImage, type CardImageProps, type CardProps, CardTitle, type CardTitleProps, type ColorToken, type ComponentTheme, type ComponentThemeColors, type ComponentThemeSpatial, type ComponentThemeSurface, DEFAULT_TITLE_TYPOGRAPHY, DevToolbar, type DevToolbarProps, Dialog, DialogBackdrop, type DialogBackdropProps, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogParts, DialogPopup, type DialogPopupProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogRoot, type DialogRootProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, FONT_SIZES, FaqSection, type FaqSectionProps, type FontSizeToken, GridOverlay, type GridOverlayProps, Hero, BackgroundCompound as HeroBackground, BackgroundImage as HeroBackgroundImage, type BackgroundImageProps as HeroBackgroundImageProps, BackgroundStream as HeroBackgroundStream, type BackgroundStreamProps as HeroBackgroundStreamProps, BackgroundVideo as HeroBackgroundVideo, type BackgroundVideoProps as HeroBackgroundVideoProps, HeroContent, type HeroContentProps, BackgroundGradient as HeroGradient, type BackgroundGradientProps as HeroGradientProps, HeroHeader, type HeroHeaderProps, BackgroundOverlay as HeroOverlay, type BackgroundOverlayProps as HeroOverlayProps, type HeroProps, IconButton, type IconButtonProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, type InputProps, Navbar, NavbarActions, type NavbarActionsProps, NavbarBrand, type NavbarBrandProps, NavbarLink, type NavbarLinkProps, NavbarLinks, type NavbarLinksProps, NavbarMobileMenu, NavbarMobileMenuButton, type NavbarMobileMenuButtonProps, NavbarMobileMenuLink, type NavbarMobileMenuLinkProps, type NavbarMobileMenuProps, type NavbarProps, NdstudioFooter, type NdstudioFooterProps, type OverlayType, PagerControl, type PagerControlProps, Popover, PopoverArrow, type PopoverArrowProps, PopoverBackdrop, type PopoverBackdropProps, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, PopoverParts, PopoverPopup, type PopoverPopupProps, PopoverPortal, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerProps, type PopoverProps, PopoverRoot, type PopoverRootProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Prose, type ProseProps, ProseSection, type ProseSectionProps, QuoteBlock, type QuoteBlockProps, type RadiusToken, River, type RiverProps, Select, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectOption, type SelectOptionProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectRoot, SelectTrigger, type SelectTriggerProps, type SpacingToken, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipArrow, type TooltipArrowProps, TooltipParts, TooltipPopup, type TooltipPopupProps, TooltipPortal, type TooltipPortalProps, TooltipPositioner, type TooltipPositionerProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipRoot, type TooltipRootProps, TooltipTrigger, type TooltipTriggerProps, Tout, type ToutProps, TwoColumnSection, type TwoColumnSectionProps, USGovBanner, type USGovBannerProps, type UseCanvasBlurOptions, type UseCanvasBlurReturn, type UseVideoKeyboardOptions, type UseVideoKeyboardReturn, VideoDialog, type VideoDialogProps, VideoPlayer, type VideoPlayerProps, VideoWithBackdrop, VideoWithBackdropBackdrop, type VideoWithBackdropBackdropProps, VideoWithBackdropContent, type VideoWithBackdropContentProps, VideoWithBackdropParts, type VideoWithBackdropProps, VideoWithBackdropRoot, type VideoWithBackdropRootProps, VideoWithBackdropVideo, type VideoWithBackdropVideoProps, applyTheme, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants, bannerVariants, blurredVideoBackdropVariants, buttonThemeToStyleVars, buttonVariants, canvasVariants, captionOverlayVariants, cardGridVariants, cardVariants, closeButtonVariants, cn, controlBarVariants, controlButtonVariants, createThemeStyle, dialogBackdropVariants, dialogPopupVariants, filterCSSVars, fontSizeToClass, getToken, gradientOverlayVariants, heroContentVariants, heroHeaderVariants, heroVariants, iconButtonVariants, inputGroupAddonVariants, inputGroupVariants, inputVariants, loadingOverlayVariants, mediaControllerVariants, mergeCSSVars, pagerControlVariants, popoverArrowVariants, popoverPopupVariants, quoteBlockVariants, removeTheme, responsiveTypographyClass, riverVariants, selectOptionVariants, selectPopupVariants, selectTriggerVariants, themeToStyleVars, toCSSVars, tooltipArrowVariants, tooltipPopupVariants, twoColumnSectionVariants, useBreakpoint, useCSSVars, useCanvasBlur, useCaptions, useEventListener, useMaxBreakpoint, useMinBreakpoint, useTheme, useThemeTokens, useVideoKeyboard, videoContainerVariants, videoDialogVariants, videoPlayerVariants, videoWithBackdropVariants };