@nationaldesignstudio/react 0.5.5 → 0.5.6

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Accordion as Accordion$1 } from '@base-ui-components/react/accordion';
-import * as React11 from 'react';
+import * as React14 from 'react';
 import { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
 import { tv, cnBase } from 'tailwind-variants';
 export { cnBase as twMerge } from 'tailwind-variants';
@@ -9,8 +9,10 @@ import { useRender } from '@base-ui-components/react/use-render';
 import { Button as Button$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 { ChevronDown, Check, ChevronUp } from 'lucide-react';
 import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
-import { Dialog } from '@base-ui-components/react/dialog';
+import { MediaController, MediaLoadingIndicator, MediaControlBar, MediaPlayButton, MediaMuteButton, MediaVolumeRange, MediaTimeDisplay, MediaTimeRange } from 'media-chrome/react';
+import { Dialog as Dialog$1 } from '@base-ui-components/react/dialog';
 import { Slot } from '@radix-ui/react-slot';
 
 // src/components/atoms/accordion/accordion.tsx
@@ -70,10 +72,10 @@ var accordionPanelVariants = tv({
     colorScheme: "light"
   }
 });
-var AccordionContext = React11.createContext({
+var AccordionContext = React14.createContext({
   colorScheme: "light"
 });
-var Accordion = React11.forwardRef(
+var Accordion = React14.forwardRef(
   ({
     className,
     allowMultiple = false,
@@ -81,7 +83,7 @@ var Accordion = React11.forwardRef(
     colorScheme = "light",
     children
   }, ref) => {
-    const defaultValue = React11.useMemo(() => {
+    const defaultValue = React14.useMemo(() => {
       if (!defaultExpanded) return void 0;
       if (Array.isArray(defaultExpanded)) return defaultExpanded;
       return [defaultExpanded];
@@ -99,9 +101,9 @@ var Accordion = React11.forwardRef(
   }
 );
 Accordion.displayName = "Accordion";
-var AccordionItem = React11.forwardRef(
+var AccordionItem = React14.forwardRef(
   ({ className, id, title, children }, ref) => {
-    const { colorScheme } = React11.useContext(AccordionContext);
+    const { colorScheme } = React14.useContext(AccordionContext);
     return /* @__PURE__ */ jsxs(
       Accordion$1.Item,
       {
@@ -148,7 +150,7 @@ AccordionItem.displayName = "AccordionItem";
 var backgroundVariants = tv({
   base: "absolute inset-0"
 });
-var Background = React11.forwardRef(
+var Background = React14.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -241,7 +243,7 @@ BackgroundVideo.displayName = "Background.Video";
 var backgroundStreamVariants = tv({
   base: "absolute inset-0 size-full border-0 scale-[1.5] object-cover"
 });
-var BackgroundStream = React11.forwardRef(
+var BackgroundStream = React14.forwardRef(
   ({
     className,
     videoId,
@@ -281,7 +283,7 @@ BackgroundStream.displayName = "Background.Stream";
 var backgroundOverlayVariants = tv({
   base: "absolute inset-0 bg-bg-overlay"
 });
-var BackgroundOverlay = React11.forwardRef(({ className, opacity = 0.4, style, ...props }, ref) => /* @__PURE__ */ jsx(
+var BackgroundOverlay = React14.forwardRef(({ className, opacity = 0.4, style, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -298,7 +300,7 @@ BackgroundOverlay.displayName = "Background.Overlay";
 var backgroundGradientVariants = tv({
   base: "absolute inset-0"
 });
-var BackgroundGradient = React11.forwardRef(
+var BackgroundGradient = React14.forwardRef(
   ({
     className,
     direction = "to-b",
@@ -334,6 +336,258 @@ var BackgroundCompound = Object.assign(Background, {
   Overlay: BackgroundOverlay,
   Gradient: BackgroundGradient
 });
+var blurredVideoBackdropVariants = tv({
+  base: [
+    "absolute",
+    "pointer-events-none",
+    "select-none",
+    "will-change-contents",
+    "transform-gpu"
+  ],
+  variants: {
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+      low: "",
+      medium: "",
+      high: "",
+      extreme: ""
+    },
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+      none: "",
+      vignette: "",
+      "top-bottom": ""
+    }
+  },
+  defaultVariants: {
+    blur: "high",
+    overlay: "none"
+  }
+});
+var canvasVariants = tv({
+  base: ["w-full", "h-full", "object-cover"]
+});
+var gradientOverlayVariants = tv({
+  base: ["absolute", "inset-0", "pointer-events-none"]
+});
+var OVERLAY_GRADIENTS = {
+  vignette: "radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%)",
+  "top-bottom": "linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%)"
+};
+var BLUR_AMOUNTS = {
+  low: 40,
+  medium: 80,
+  high: 100,
+  extreme: 120
+};
+function useCanvasBlur({
+  videoRef,
+  blurAmount,
+  enabled = true,
+  targetFps = 30,
+  scale = 0.5
+}) {
+  const canvasRef = React14.useRef(null);
+  const ctxRef = React14.useRef(null);
+  const [isRendering, setIsRendering] = React14.useState(false);
+  const [metrics, setMetrics] = React14.useState({ fps: 0, frameTime: 0 });
+  const [videoReady, setVideoReady] = React14.useState(false);
+  const lastFrameTimeRef = React14.useRef(0);
+  const frameCountRef = React14.useRef(0);
+  const fpsIntervalRef = React14.useRef(0);
+  const frameInterval = 1e3 / targetFps;
+  React14.useEffect(() => {
+    if (!enabled) return;
+    const checkRef = () => {
+      if (videoRef.current && canvasRef.current) {
+        setVideoReady(true);
+      }
+    };
+    checkRef();
+    const frameId = requestAnimationFrame(checkRef);
+    const timeoutId = setTimeout(checkRef, 100);
+    const timeoutId2 = setTimeout(checkRef, 500);
+    return () => {
+      cancelAnimationFrame(frameId);
+      clearTimeout(timeoutId);
+      clearTimeout(timeoutId2);
+    };
+  }, [enabled, videoRef]);
+  React14.useEffect(() => {
+    if (!enabled || !videoReady) return;
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas) return;
+    const ctx = canvas.getContext("2d", {
+      alpha: false,
+      desynchronized: true
+      // Reduces latency
+    });
+    if (!ctx) return;
+    ctxRef.current = ctx;
+    let animationFrameId;
+    let isActive = true;
+    const updateCanvasSize = () => {
+      if (video.videoWidth && video.videoHeight) {
+        canvas.width = Math.floor(video.videoWidth * scale);
+        canvas.height = Math.floor(video.videoHeight * scale);
+      }
+    };
+    const render = (timestamp) => {
+      if (!isActive || !video || !ctx) return;
+      const elapsed = timestamp - lastFrameTimeRef.current;
+      if (elapsed >= frameInterval) {
+        const frameStart = performance.now();
+        if (canvas.width === 0 || canvas.height === 0) {
+          updateCanvasSize();
+        }
+        if (video.readyState >= 2 && !video.paused) {
+          ctx.filter = `blur(${blurAmount * scale}px)`;
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          setIsRendering(true);
+        }
+        const frameTime = performance.now() - frameStart;
+        frameCountRef.current++;
+        if (timestamp - fpsIntervalRef.current >= 1e3) {
+          setMetrics({
+            fps: frameCountRef.current,
+            frameTime: Math.round(frameTime * 100) / 100
+          });
+          frameCountRef.current = 0;
+          fpsIntervalRef.current = timestamp;
+        }
+        lastFrameTimeRef.current = timestamp - elapsed % frameInterval;
+      }
+      animationFrameId = requestAnimationFrame(render);
+    };
+    const handleLoadedMetadata = () => {
+      updateCanvasSize();
+    };
+    const handlePlay = () => {
+      if (isActive) {
+        animationFrameId = requestAnimationFrame(render);
+      }
+    };
+    const handlePause = () => {
+      setIsRendering(false);
+    };
+    video.addEventListener("loadedmetadata", handleLoadedMetadata);
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    if (video.readyState >= 1) {
+      updateCanvasSize();
+    }
+    if (!video.paused) {
+      animationFrameId = requestAnimationFrame(render);
+    }
+    return () => {
+      isActive = false;
+      cancelAnimationFrame(animationFrameId);
+      video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      setIsRendering(false);
+    };
+  }, [enabled, videoReady, videoRef, blurAmount, frameInterval, scale]);
+  return {
+    canvasRef,
+    isRendering,
+    metrics
+  };
+}
+var BlurredVideoBackdrop = React14.forwardRef(
+  ({
+    className,
+    videoRef,
+    blur = "high",
+    overlay = "none",
+    opacity = 0.6,
+    extension = 120,
+    targetFps = 30,
+    scale = 0.5,
+    showMetrics = false,
+    style,
+    ...props
+  }, ref) => {
+    const blurAmount = BLUR_AMOUNTS[blur ?? "high"];
+    const { canvasRef, isRendering, metrics } = useCanvasBlur({
+      videoRef,
+      blurAmount,
+      enabled: true,
+      targetFps,
+      scale
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          blurredVideoBackdropVariants({ blur, overlay }),
+          className
+        ),
+        style: {
+          inset: `-${extension}px`,
+          opacity,
+          contain: "layout style paint",
+          ...style
+        },
+        "data-blur": blur ?? "high",
+        "data-overlay": overlay ?? "none",
+        "data-rendering": isRendering,
+        "aria-hidden": "true",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              className: cn(
+                canvasVariants(),
+                // Scale up the low-res canvas to fill container
+                "scale-[2]",
+                // Inverse of 0.5 scale factor
+                "origin-center"
+              ),
+              style: {
+                // Additional CSS blur for smoother appearance
+                filter: `blur(${blurAmount * 0.3}px)`
+              }
+            }
+          ),
+          overlay && overlay !== "none" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: gradientOverlayVariants(),
+              style: { background: OVERLAY_GRADIENTS[overlay] }
+            }
+          ),
+          showMetrics && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-8 left-8 z-10 bg-black/80 text-white typography-caption px-8 py-4 rounded-4 font-mono", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              "FPS: ",
+              metrics.fps
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              "Frame: ",
+              metrics.frameTime,
+              "ms"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              "Scale: ",
+              scale,
+              "x"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+BlurredVideoBackdrop.displayName = "BlurredVideoBackdrop";
 
 // src/lib/theme.ts
 var FONT_SIZES = [
@@ -553,7 +807,7 @@ function hasThemeValues(theme) {
   if (!theme) return false;
   return Object.values(theme).some((v) => v !== void 0 && v !== null);
 }
-var Button = React11.forwardRef(
+var Button = React14.forwardRef(
   ({ className, variant, size, render, nativeButton, theme, style, ...props }, ref) => {
     const isNativeButton = nativeButton ?? render === void 0;
     const hasTheme = hasThemeValues(theme);
@@ -583,7 +837,7 @@ var Button = React11.forwardRef(
 );
 Button.displayName = "Button";
 var iconButtonVariants = tv({
-  base: "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",
+  base: "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",
   variants: {
     variant: {
       // Primary - filled brand button
@@ -600,15 +854,21 @@ var iconButtonVariants = tv({
       "ghost-inverse": "bg-button-ghost-inverse-bg text-button-ghost-inverse-text hover:bg-button-ghost-inverse-bg-hover hover:text-button-ghost-inverse-text-hover border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000"
     },
     size: {
-      sm: "size-28 rounded-surface-button-small",
-      md: "size-40 rounded-surface-button-medium",
-      lg: "size-56 rounded-surface-button-large"
+      sm: "size-28",
+      md: "size-40",
+      lg: "size-56"
     },
     rounded: {
       default: "",
       full: "rounded-full"
     }
   },
+  compoundVariants: [
+    // Apply size-specific rounded only when rounded is "default"
+    { size: "sm", rounded: "default", class: "rounded-surface-button-small" },
+    { size: "md", rounded: "default", class: "rounded-surface-button-medium" },
+    { size: "lg", rounded: "default", class: "rounded-surface-button-large" }
+  ],
   defaultVariants: {
     variant: "primary",
     size: "md",
@@ -707,7 +967,7 @@ var inputVariants = tv({
     error: false
   }
 });
-var Input = React11.forwardRef(
+var Input = React14.forwardRef(
   ({ className, size, error, type = "text", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -937,7 +1197,7 @@ function InputGroupTextarea({ className, ...props }) {
     }
   );
 }
-var NdstudioFooter = React11.forwardRef(
+var NdstudioFooter = React14.forwardRef(
   ({ className, href = "https://ndstudio.gov", ...props }, ref) => {
     return /* @__PURE__ */ jsx("div", { ref, className: cn("text-center", className), ...props, children: /* @__PURE__ */ jsxs("p", { className: "typography-label-large uppercase text-ivory-alpha-75", children: [
       "Designed and Engineered in DC by",
@@ -992,7 +1252,7 @@ var dotBaseVariants = tv({
     variant: "charcoal"
   }
 });
-var PagerControl = React11.forwardRef(
+var PagerControl = React14.forwardRef(
   ({
     className,
     size,
@@ -1006,12 +1266,12 @@ var PagerControl = React11.forwardRef(
     loop = true,
     ...props
   }, ref) => {
-    const [internalIndex, setInternalIndex] = React11.useState(0);
-    const [isPaused, setIsPaused] = React11.useState(false);
-    const [progress, setProgress] = React11.useState(0);
+    const [internalIndex, setInternalIndex] = React14.useState(0);
+    const [isPaused, setIsPaused] = React14.useState(false);
+    const [progress, setProgress] = React14.useState(0);
     const activeIndex = controlledIndex !== void 0 ? controlledIndex : internalIndex;
     const isControlled = controlledIndex !== void 0;
-    React11.useEffect(() => {
+    React14.useEffect(() => {
       if (import.meta.env?.DEV) {
         if (count < 1) {
           console.warn("PagerControl: count must be at least 1");
@@ -1034,10 +1294,10 @@ var PagerControl = React11.forwardRef(
       }
     }, [count, controlledIndex, isControlled, onChange]);
     const safeActiveIndex = Math.max(0, Math.min(activeIndex, count - 1));
-    const animationFrameRef = React11.useRef(null);
-    const startTimeRef = React11.useRef(null);
-    const pausedProgressRef = React11.useRef(0);
-    const goToNext = React11.useCallback(() => {
+    const animationFrameRef = React14.useRef(null);
+    const startTimeRef = React14.useRef(null);
+    const pausedProgressRef = React14.useRef(0);
+    const goToNext = React14.useCallback(() => {
       const nextIndex = safeActiveIndex + 1;
       if (nextIndex >= count) {
         if (loop) {
@@ -1049,7 +1309,7 @@ var PagerControl = React11.forwardRef(
         onChange?.(nextIndex);
       }
     }, [safeActiveIndex, count, loop, isControlled, onChange]);
-    const goToIndex = React11.useCallback(
+    const goToIndex = React14.useCallback(
       (index) => {
         if (!isControlled) setInternalIndex(index);
         onChange?.(index);
@@ -1059,7 +1319,7 @@ var PagerControl = React11.forwardRef(
       },
       [isControlled, onChange]
     );
-    React11.useEffect(() => {
+    React14.useEffect(() => {
       if (!autoPlay || duration2 <= 0 || isPaused) {
         if (animationFrameRef.current) {
           cancelAnimationFrame(animationFrameRef.current);
@@ -1090,19 +1350,19 @@ var PagerControl = React11.forwardRef(
         }
       };
     }, [autoPlay, duration2, isPaused, goToNext]);
-    const handleMouseEnter = React11.useCallback(() => {
+    const handleMouseEnter = React14.useCallback(() => {
       if (pauseOnHover) {
         pausedProgressRef.current = progress;
         startTimeRef.current = null;
         setIsPaused(true);
       }
     }, [pauseOnHover, progress]);
-    const handleMouseLeave = React11.useCallback(() => {
+    const handleMouseLeave = React14.useCallback(() => {
       if (pauseOnHover) {
         setIsPaused(false);
       }
     }, [pauseOnHover]);
-    React11.useEffect(() => {
+    React14.useEffect(() => {
       if (isControlled) {
         setProgress(0);
         pausedProgressRef.current = 0;
@@ -1297,9 +1557,9 @@ var popoverArrowVariants = floatingArrowVariants;
 var PopoverRoot = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(Popover$1.Root, { ...props, children });
 };
-var PopoverTrigger = React11.forwardRef(
+var PopoverTrigger = React14.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const isSingleElement = React11.isValidElement(children);
+    const isSingleElement = React14.isValidElement(children);
     if (isSingleElement) {
       return /* @__PURE__ */ jsx(
         Popover$1.Trigger,
@@ -1318,7 +1578,7 @@ PopoverTrigger.displayName = "PopoverTrigger";
 var PopoverPortal = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(Popover$1.Portal, { ...props, children });
 };
-var PopoverBackdrop = React11.forwardRef(
+var PopoverBackdrop = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Popover$1.Backdrop,
@@ -1331,7 +1591,7 @@ var PopoverBackdrop = React11.forwardRef(
   }
 );
 PopoverBackdrop.displayName = "PopoverBackdrop";
-var PopoverPositioner = React11.forwardRef(({ className, side = "bottom", sideOffset = 8, ...props }, ref) => {
+var PopoverPositioner = React14.forwardRef(({ className, side = "bottom", sideOffset = 8, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Popover$1.Positioner,
     {
@@ -1344,7 +1604,7 @@ var PopoverPositioner = React11.forwardRef(({ className, side = "bottom", sideOf
   );
 });
 PopoverPositioner.displayName = "PopoverPositioner";
-var PopoverPopup = React11.forwardRef(
+var PopoverPopup = React14.forwardRef(
   ({ className, variant, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Popover$1.Popup,
@@ -1357,7 +1617,7 @@ var PopoverPopup = React11.forwardRef(
   }
 );
 PopoverPopup.displayName = "PopoverPopup";
-var PopoverArrow = React11.forwardRef(
+var PopoverArrow = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Popover$1.Arrow,
@@ -1377,7 +1637,7 @@ var PopoverArrow = React11.forwardRef(
   }
 );
 PopoverArrow.displayName = "PopoverArrow";
-var PopoverTitle = React11.forwardRef(
+var PopoverTitle = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Popover$1.Title,
@@ -1390,7 +1650,7 @@ var PopoverTitle = React11.forwardRef(
   }
 );
 PopoverTitle.displayName = "PopoverTitle";
-var PopoverDescription = React11.forwardRef(({ className, ...props }, ref) => {
+var PopoverDescription = React14.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Popover$1.Description,
     {
@@ -1404,7 +1664,7 @@ var PopoverDescription = React11.forwardRef(({ className, ...props }, ref) => {
   );
 });
 PopoverDescription.displayName = "PopoverDescription";
-var PopoverClose = React11.forwardRef(
+var PopoverClose = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Popover$1.Close,
@@ -1495,7 +1755,9 @@ var selectTriggerVariants = tv({
     // Override disabled to use data attribute (Base UI pattern)
     "data-[disabled]:bg-ui-control-background-disabled data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
     // Open state styling
-    "data-[popup-open]:border-ui-accent-base data-[popup-open]:ring-4 data-[popup-open]:ring-ui-color-focus data-[popup-open]:bg-ui-control-background"
+    "data-[popup-open]:border-ui-accent-base data-[popup-open]:ring-4 data-[popup-open]:ring-ui-color-focus data-[popup-open]:bg-ui-control-background",
+    // Invalid state (aria-invalid)
+    "aria-[invalid=true]:border-ui-error-color aria-[invalid=true]:ring-ui-error-color/20"
   ],
   variants: {
     size: formControlSizes,
@@ -1509,19 +1771,25 @@ var selectTriggerVariants = tv({
 var selectPopupVariants = tv({
   base: [
     // Layout - match trigger width using CSS custom property from Base UI
-    "flex flex-col gap-2 p-10",
+    "flex flex-col gap-2 p-8",
     "w-[var(--anchor-width)]",
-    // Background and border - uses surface ui radius for theming support
-    "bg-ui-control-background border border-solid border-ui-color-border-active rounded-surface-ui-medium",
-    // Focus ring shadow (ui-focus-state from Figma)
-    "ring-4 ring-ui-color-focus",
+    // Background - uses overlay token
+    "bg-overlay-background",
+    // Border - uses overlay token for subtle border
+    "border border-overlay-border",
+    // Border radius - uses overlay token for consistency with other overlays
+    "rounded-surface-overlay",
+    // Shadow for elevation
+    "shadow-lg",
     // Animation
     "origin-[var(--transform-origin)]",
     "transition-[transform,scale,opacity] duration-150",
     "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
     "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
     // Ensure it's above other content
-    "z-50"
+    "z-50",
+    // Scrollable support
+    "overflow-y-auto max-h-[var(--available-height,300px)]"
   ]
 });
 var selectOptionVariants = tv({
@@ -1546,84 +1814,86 @@ var selectOptionVariants = tv({
     "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"
   ]
 });
-var SelectChevronIcon = ({ className }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: cn("size-16 text-gray-500 shrink-0", className),
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M4 6L8 10L12 6",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  }
-);
-var CheckIcon = ({ className }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: cn("size-14 shrink-0", className),
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
-        stroke: "currentColor",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  }
-);
+var selectSeparatorVariants = tv({
+  base: ["h-px my-6 -mx-8", "bg-overlay-border"]
+});
+var selectScrollArrowVariants = tv({
+  base: [
+    "flex items-center justify-center",
+    "py-4",
+    "text-text-muted",
+    "cursor-default",
+    // Sticky positioning for scroll indicators
+    "data-[direction=up]:sticky data-[direction=up]:top-0",
+    "data-[direction=down]:sticky data-[direction=down]:bottom-0",
+    "bg-overlay-background"
+  ]
+});
 var SelectRoot = ({
   children,
   ...props
 }) => {
   return /* @__PURE__ */ jsx(Select$1.Root, { ...props, children });
 };
-var SelectTrigger = React11.forwardRef(
-  ({ className, size, error, placeholder = "Select option...", ...props }, ref) => {
+var SelectTrigger = React14.forwardRef(
+  ({
+    className,
+    size,
+    error,
+    placeholder = "Select option...",
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ jsxs(
       Select$1.Trigger,
       {
         ref,
+        "aria-label": ariaLabel ?? placeholder,
+        "aria-invalid": error || void 0,
         className: cn(selectTriggerVariants({ size, error }), className),
+        "data-size": size ?? "default",
+        "data-error": error ?? false,
         ...props,
         children: [
           /* @__PURE__ */ jsx(Select$1.Value, { children: (value) => value ? value : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder }) }),
-          /* @__PURE__ */ jsx(Select$1.Icon, { children: /* @__PURE__ */ jsx(SelectChevronIcon, {}) })
+          /* @__PURE__ */ jsx(Select$1.Icon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-16 text-gray-500 shrink-0" }) })
         ]
       }
     );
   }
 );
 SelectTrigger.displayName = "SelectTrigger";
-var SelectPopup = React11.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, { side: "bottom", sideOffset: 4, align: "start", children: /* @__PURE__ */ jsx(
-      Select$1.Popup,
+var SelectValue = React14.forwardRef(
+  ({ className, placeholder = "Select option...", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select$1.Value, { ref, className, ...props, children: (value) => value ? value : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder }) });
+  }
+);
+SelectValue.displayName = "SelectValue";
+var SelectPopup = React14.forwardRef(
+  ({ className, children, alignItemWithTrigger = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+      Select$1.Positioner,
       {
-        ref,
-        className: cn(selectPopupVariants(), className),
-        ...props,
-        children
+        side: "bottom",
+        sideOffset: 4,
+        align: "start",
+        alignItemWithTrigger,
+        children: /* @__PURE__ */ jsx(
+          Select$1.Popup,
+          {
+            ref,
+            className: cn(selectPopupVariants(), className),
+            ...props,
+            children
+          }
+        )
       }
-    ) }) });
+    ) });
   }
 );
 SelectPopup.displayName = "SelectPopup";
-var SelectOption = React11.forwardRef(
+var SelectContent = SelectPopup;
+var SelectOption = React14.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       Select$1.Item,
@@ -1633,20 +1903,21 @@ var SelectOption = React11.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
-          /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+          /* @__PURE__ */ jsx(Select$1.ItemIndicator, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Check, { className: "size-14 shrink-0" }) })
         ]
       }
     );
   }
 );
 SelectOption.displayName = "SelectOption";
-var SelectGroup = React11.forwardRef(
+var SelectItem = SelectOption;
+var SelectGroup = React14.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Select$1.Group, { ref, className, ...props, children });
   }
 );
 SelectGroup.displayName = "SelectGroup";
-var SelectGroupLabel = React11.forwardRef(({ className, children, ...props }, ref) => {
+var SelectGroupLabel = React14.forwardRef(({ className, children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Select$1.GroupLabel,
     {
@@ -1661,12 +1932,61 @@ var SelectGroupLabel = React11.forwardRef(({ className, children, ...props }, re
   );
 });
 SelectGroupLabel.displayName = "SelectGroupLabel";
+var SelectLabel = SelectGroupLabel;
+var SelectSeparator = React14.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Select$1.Separator,
+      {
+        ref,
+        className: cn(selectSeparatorVariants(), className),
+        ...props
+      }
+    );
+  }
+);
+SelectSeparator.displayName = "SelectSeparator";
+var SelectScrollUpArrow = React14.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpArrow,
+    {
+      ref,
+      "data-direction": "up",
+      "aria-label": "Scroll up",
+      className: cn(selectScrollArrowVariants(), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-12", "aria-hidden": "true" })
+    }
+  );
+});
+SelectScrollUpArrow.displayName = "SelectScrollUpArrow";
+var SelectScrollDownArrow = React14.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollDownArrow,
+    {
+      ref,
+      "data-direction": "down",
+      "aria-label": "Scroll down",
+      className: cn(selectScrollArrowVariants(), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-12", "aria-hidden": "true" })
+    }
+  );
+});
+SelectScrollDownArrow.displayName = "SelectScrollDownArrow";
 var Select = Object.assign(SelectRoot, {
   Trigger: SelectTrigger,
+  Value: SelectValue,
   Popup: SelectPopup,
+  Content: SelectContent,
   Option: SelectOption,
+  Item: SelectItem,
   Group: SelectGroup,
-  GroupLabel: SelectGroupLabel
+  GroupLabel: SelectGroupLabel,
+  Label: SelectLabel,
+  Separator: SelectSeparator,
+  ScrollUpArrow: SelectScrollUpArrow,
+  ScrollDownArrow: SelectScrollDownArrow
 });
 var tooltipPopupVariants = tv({
   base: [
@@ -1707,9 +2027,9 @@ var TooltipProvider = ({ children, ...props }) => {
 var TooltipRoot = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props, children });
 };
-var TooltipTrigger = React11.forwardRef(
+var TooltipTrigger = React14.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const isSingleElement = React11.isValidElement(children);
+    const isSingleElement = React14.isValidElement(children);
     if (isSingleElement) {
       return /* @__PURE__ */ jsx(
         Tooltip$1.Trigger,
@@ -1728,7 +2048,7 @@ TooltipTrigger.displayName = "TooltipTrigger";
 var TooltipPortal = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(Tooltip$1.Portal, { ...props, children });
 };
-var TooltipPositioner = React11.forwardRef(({ className, side = "top", sideOffset = 8, ...props }, ref) => {
+var TooltipPositioner = React14.forwardRef(({ className, side = "top", sideOffset = 8, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Tooltip$1.Positioner,
     {
@@ -1741,7 +2061,7 @@ var TooltipPositioner = React11.forwardRef(({ className, side = "top", sideOffse
   );
 });
 TooltipPositioner.displayName = "TooltipPositioner";
-var TooltipPopup = React11.forwardRef(
+var TooltipPopup = React14.forwardRef(
   ({ className, variant, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Tooltip$1.Popup,
@@ -1755,7 +2075,7 @@ var TooltipPopup = React11.forwardRef(
   }
 );
 TooltipPopup.displayName = "TooltipPopup";
-var TooltipArrow = React11.forwardRef(
+var TooltipArrow = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Tooltip$1.Arrow,
@@ -1808,6 +2128,870 @@ var TooltipParts = Object.assign(TooltipRoot, {
   Popup: TooltipPopup,
   Arrow: TooltipArrow
 });
+var captionOverlayVariants = tv({
+  base: [
+    // Positioning - absolute at bottom of video container
+    "pointer-events-none",
+    "absolute right-0 left-0",
+    "z-10",
+    "flex justify-center",
+    "px-4"
+  ],
+  variants: {
+    position: {
+      bottom: "bottom-64",
+      "bottom-sm": "bottom-24"
+    }
+  },
+  defaultVariants: {
+    position: "bottom-sm"
+  }
+});
+var captionTextVariants = tv({
+  base: [
+    "flex items-center justify-center",
+    "w-fit max-w-[80%]",
+    "gap-10",
+    "px-12 py-6",
+    "text-center",
+    "font-normal leading-[1.4]",
+    "rounded-6",
+    "bg-video-player-caption-bg text-video-player-caption-text"
+  ],
+  variants: {
+    size: {
+      sm: "text-14",
+      md: "[font-size:clamp(16px,2vw,24px)]",
+      lg: "text-24"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var CaptionOverlay = React14.forwardRef(
+  ({ className, cue, text, position, size, ...props }, ref) => {
+    const displayText = cue?.text ?? text;
+    if (!displayText) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "output",
+      {
+        ref,
+        className: cn(captionOverlayVariants({ position }), className),
+        "aria-live": "polite",
+        "aria-label": "Video caption",
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: captionTextVariants({ size }), children: displayText })
+      }
+    );
+  }
+);
+CaptionOverlay.displayName = "CaptionOverlay";
+function parseVttTimestamp(timestamp) {
+  const parts = timestamp.trim().split(":");
+  let hours = 0;
+  let minutes = 0;
+  let seconds = 0;
+  if (parts.length === 3) {
+    hours = Number.parseInt(parts[0], 10);
+    minutes = Number.parseInt(parts[1], 10);
+    seconds = Number.parseFloat(parts[2]);
+  } else if (parts.length === 2) {
+    minutes = Number.parseInt(parts[0], 10);
+    seconds = Number.parseFloat(parts[1]);
+  }
+  return hours * 3600 + minutes * 60 + seconds;
+}
+function parseVtt(vttContent) {
+  const cues = [];
+  const lines = vttContent.trim().split("\n");
+  let i = 0;
+  while (i < lines.length && !lines[i].includes("-->")) {
+    i++;
+  }
+  while (i < lines.length) {
+    const line = lines[i].trim();
+    if (line.includes("-->")) {
+      const [startStr, endStr] = line.split("-->").map((s) => s.trim());
+      const endParts = endStr.split(" ");
+      const endTime = parseVttTimestamp(endParts[0]);
+      const startTime = parseVttTimestamp(startStr);
+      const textLines = [];
+      i++;
+      while (i < lines.length && lines[i].trim() !== "" && !lines[i].includes("-->")) {
+        if (!/^\d+$/.test(lines[i].trim())) {
+          textLines.push(lines[i].trim());
+        }
+        i++;
+      }
+      if (textLines.length > 0) {
+        cues.push({
+          id: `cue-${cues.length}`,
+          startTime,
+          endTime,
+          text: textLines.join("\n")
+        });
+      }
+    } else {
+      i++;
+    }
+  }
+  return cues;
+}
+function stripVttTags(text) {
+  return text.replace(/<\/?[^>]+(>|$)/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
+}
+function useCaptions(options = {}) {
+  const { src, content, stripTags = true, currentTime: externalTime } = options;
+  const [cues, setCues] = React14.useState([]);
+  const [internalTime, setInternalTime] = React14.useState(0);
+  const [isLoading, setIsLoading] = React14.useState(false);
+  const [error, setError] = React14.useState(null);
+  const currentTime = externalTime ?? internalTime;
+  React14.useEffect(() => {
+    if (content) {
+      const parsed = parseVtt(content);
+      setCues(
+        stripTags ? parsed.map((cue) => ({ ...cue, text: stripVttTags(cue.text) })) : parsed
+      );
+      return;
+    }
+    if (!src) {
+      setCues([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    fetch(src).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch captions: ${response.status}`);
+      }
+      return response.text();
+    }).then((vttContent) => {
+      const parsed = parseVtt(vttContent);
+      setCues(
+        stripTags ? parsed.map((cue) => ({ ...cue, text: stripVttTags(cue.text) })) : parsed
+      );
+    }).catch((err) => {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, [src, content, stripTags]);
+  const activeCue = React14.useMemo(() => {
+    return cues.find(
+      (cue) => currentTime >= cue.startTime && currentTime <= cue.endTime
+    ) ?? null;
+  }, [cues, currentTime]);
+  const handleSetCurrentTime = React14.useCallback((time) => {
+    setInternalTime(time);
+  }, []);
+  return {
+    cues,
+    activeCue,
+    setCurrentTime: handleSetCurrentTime,
+    isLoading,
+    error
+  };
+}
+function useVideoKeyboard({
+  videoRef,
+  enabled = true,
+  seekAmount = 5,
+  volumeStep = 0.1,
+  onTogglePlay,
+  onToggleFullscreen,
+  onToggleCaptions,
+  onShowControls
+}) {
+  const handleKeyDown = React14.useCallback(
+    (e) => {
+      if (!enabled) return;
+      const video = videoRef.current;
+      if (!video) return;
+      const target = e.target;
+      if (target.tagName === "BUTTON" || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.closest("button") || target.closest("input") || target.closest("[role='slider']")) {
+        return;
+      }
+      let handled = false;
+      switch (e.key) {
+        // Play/Pause
+        case " ":
+        case "Spacebar":
+        case "k":
+          if (onTogglePlay) {
+            onTogglePlay();
+          } else {
+            if (video.paused) {
+              video.play().catch(() => {
+              });
+            } else {
+              video.pause();
+            }
+          }
+          handled = true;
+          break;
+        // Seek backward
+        case "ArrowLeft":
+        case "j":
+          video.currentTime = Math.max(0, video.currentTime - seekAmount);
+          handled = true;
+          break;
+        // Seek forward
+        case "ArrowRight":
+        case "l":
+          video.currentTime = Math.min(
+            video.duration || 0,
+            video.currentTime + seekAmount
+          );
+          handled = true;
+          break;
+        // Volume up
+        case "ArrowUp":
+          video.volume = Math.min(1, video.volume + volumeStep);
+          video.muted = false;
+          handled = true;
+          break;
+        // Volume down
+        case "ArrowDown":
+          video.volume = Math.max(0, video.volume - volumeStep);
+          handled = true;
+          break;
+        // Toggle mute
+        case "m":
+        case "M":
+          video.muted = !video.muted;
+          handled = true;
+          break;
+        // Toggle fullscreen
+        case "f":
+        case "F":
+          onToggleFullscreen?.();
+          handled = true;
+          break;
+        // Toggle captions
+        case "c":
+        case "C":
+          onToggleCaptions?.();
+          handled = true;
+          break;
+        // Jump to start
+        case "Home":
+          video.currentTime = 0;
+          handled = true;
+          break;
+        // Jump to end
+        case "End":
+          video.currentTime = video.duration || 0;
+          handled = true;
+          break;
+        // Number keys for percentage seeking (0-9)
+        case "0":
+        case "1":
+        case "2":
+        case "3":
+        case "4":
+        case "5":
+        case "6":
+        case "7":
+        case "8":
+        case "9":
+          if (video.duration) {
+            const percent = parseInt(e.key, 10) / 10;
+            video.currentTime = video.duration * percent;
+            handled = true;
+          }
+          break;
+      }
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+        onShowControls?.();
+      }
+    },
+    [
+      enabled,
+      videoRef,
+      seekAmount,
+      volumeStep,
+      onTogglePlay,
+      onToggleFullscreen,
+      onToggleCaptions,
+      onShowControls
+    ]
+  );
+  const containerProps = React14.useMemo(
+    () => ({
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      role: "application",
+      "aria-label": "Video player, press space to play or pause"
+    }),
+    [handleKeyDown]
+  );
+  return {
+    handleKeyDown,
+    containerProps
+  };
+}
+var videoPlayerVariants = tv({
+  base: [
+    "relative",
+    "bg-black",
+    "overflow-hidden",
+    // Focus styling for keyboard navigation
+    "focus:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-white/50"
+  ],
+  variants: {
+    aspectRatio: {
+      "16/9": "aspect-video",
+      "4/3": "aspect-[4/3]",
+      "1/1": "aspect-square",
+      "9/16": "aspect-[9/16]",
+      auto: ""
+    },
+    rounded: {
+      none: "",
+      sm: "rounded-4",
+      md: "rounded-8",
+      lg: "rounded-12"
+    }
+  },
+  defaultVariants: {
+    aspectRatio: "16/9",
+    rounded: "none"
+  }
+});
+var mediaControllerVariants = tv({
+  base: [
+    "absolute inset-0",
+    "w-full h-full",
+    // Button styling - transparent base, hover shows background
+    "[--media-control-background:transparent]",
+    "[--media-control-hover-background:var(--color-video-player-button-bg-hover)]",
+    "[--media-control-padding:8px]",
+    "[--media-control-height:36px]",
+    "[--media-button-icon-width:20px]",
+    "[--media-button-icon-height:20px]",
+    // Progress bar / range styling
+    "[--media-range-track-background:var(--color-video-player-progress-bg)]",
+    "[--media-range-bar-color:var(--color-video-player-progress-fill)]",
+    "[--media-range-track-height:4px]",
+    "[--media-range-track-border-radius:2px]",
+    "[--media-range-thumb-background:var(--color-video-player-progress-fill)]",
+    "[--media-range-thumb-height:12px]",
+    "[--media-range-thumb-width:12px]",
+    "[--media-range-thumb-border-radius:50%]",
+    // Text/icon colors
+    "[--media-icon-color:var(--color-video-player-controls-text)]",
+    "[--media-primary-color:var(--color-video-player-controls-text)]",
+    "[--media-secondary-color:transparent]",
+    "[--media-text-color:var(--color-video-player-controls-text)]",
+    "[--media-font-size:14px]",
+    // Time display styling
+    "[--media-time-display-background:transparent]"
+  ]
+});
+var mediaButtonStyles = {
+  padding: "8px",
+  borderRadius: "50%",
+  // Tooltip styling - consistent across all buttons
+  "--media-tooltip-background": "var(--color-video-player-tooltip-bg)",
+  "--media-tooltip-arrow-display": "none",
+  "--media-tooltip-distance": "8px"
+};
+var timeRangeStyles = {
+  flex: 1,
+  background: "transparent",
+  // Preview tooltip styling - consistent with button tooltips
+  "--media-box-arrow-display": "none",
+  "--media-preview-box-margin": "0 0 8px 0",
+  "--media-preview-time-margin": "0 0 8px 0",
+  "--media-preview-time-background": "var(--color-video-player-tooltip-bg)"
+};
+var volumeRangeStyles = {
+  width: "80px",
+  background: "transparent",
+  // Tooltip styling - consistent with button tooltips
+  "--media-tooltip-background": "var(--color-video-player-tooltip-bg)",
+  "--media-tooltip-arrow-display": "none",
+  "--media-tooltip-distance": "8px"
+};
+var timeDisplayStyles = {
+  background: "transparent",
+  fontFamily: "monospace",
+  fontSize: "14px",
+  color: "white",
+  whiteSpace: "nowrap"
+};
+var controlBarVariants = tv({
+  base: [
+    // Layout handled in inline styles, but we need flex
+    "flex items-center",
+    // Background using semantic token
+    "bg-video-player-controls-bg",
+    // Animation
+    "transition-all duration-300"
+  ],
+  variants: {
+    visible: {
+      true: "opacity-100 translate-y-0",
+      false: "opacity-0 translate-y-16 pointer-events-none"
+    }
+  },
+  defaultVariants: {
+    visible: true
+  }
+});
+var controlButtonVariants = tv({
+  base: [
+    "flex items-center justify-center",
+    "p-8 rounded-full",
+    // Transparent by default, background on hover
+    "bg-transparent",
+    "text-video-player-controls-text",
+    "hover:bg-video-player-button-bg-hover",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-video-player-progress-bg",
+    "transition-colors duration-150",
+    "cursor-pointer"
+  ]
+});
+var loadingOverlayVariants = tv({
+  base: [
+    "absolute inset-0",
+    "flex items-center justify-center",
+    "bg-black/50",
+    "pointer-events-none",
+    "z-10"
+  ]
+});
+function useHlsInternal(videoRef, src, enabled) {
+  const [isLoading, setIsLoading] = React14.useState(true);
+  const [error, setError] = React14.useState(null);
+  const hlsRef = React14.useRef(null);
+  React14.useEffect(() => {
+    if (!src || !videoRef.current) {
+      return;
+    }
+    const video = videoRef.current;
+    const isHlsSource = src.includes(".m3u8");
+    if (!isHlsSource) {
+      video.src = src;
+      setIsLoading(false);
+      return;
+    }
+    if (video.canPlayType("application/vnd.apple.mpegurl")) {
+      video.src = src;
+      setIsLoading(false);
+      return;
+    }
+    const loadHls = async () => {
+      try {
+        const HlsModule = await import('hls.js');
+        const Hls = HlsModule.default;
+        if (!Hls.isSupported()) {
+          video.src = src;
+          setIsLoading(false);
+          return;
+        }
+        const hls = new Hls({
+          enableWorker: true,
+          lowLatencyMode: false
+        });
+        hls.loadSource(src);
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          setIsLoading(false);
+        });
+        hls.on(
+          Hls.Events.ERROR,
+          (_event, data) => {
+            if (data.fatal) {
+              setError(new Error(`HLS error: ${data.details}`));
+              setIsLoading(false);
+            }
+          }
+        );
+        hlsRef.current = hls;
+      } catch {
+        video.src = src;
+        setIsLoading(false);
+      }
+    };
+    loadHls();
+    return () => {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
+  }, [enabled, src, videoRef]);
+  return { isLoading, error };
+}
+var VideoPlayer = React14.forwardRef(
+  ({
+    className,
+    src,
+    cloudflare,
+    poster,
+    captionsSrc,
+    autoPlay = false,
+    loop = false,
+    muted = false,
+    controls = true,
+    autoHideControls = true,
+    autoHideDelay = 3e3,
+    captionsEnabled: initialCaptionsEnabled = false,
+    aspectRatio,
+    rounded,
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onError,
+    videoRef: externalVideoRef,
+    ...props
+  }, ref) => {
+    const containerRef = React14.useRef(null);
+    const internalVideoRef = React14.useRef(null);
+    const controlsTimeoutRef = React14.useRef(null);
+    const [isPlaying, setIsPlaying] = React14.useState(false);
+    const [currentTime, setCurrentTime] = React14.useState(0);
+    const [controlsVisible, setControlsVisible] = React14.useState(true);
+    const [captionsEnabled, setCaptionsEnabled] = React14.useState(
+      initialCaptionsEnabled
+    );
+    const [isFullscreen, setIsFullscreen] = React14.useState(false);
+    const videoSrc = React14.useMemo(() => {
+      if (cloudflare) {
+        return `https://customer-${cloudflare.customerCode}.cloudflarestream.com/${cloudflare.videoId}/manifest/video.m3u8`;
+      }
+      return src;
+    }, [cloudflare, src]);
+    const { isLoading, error: hlsError } = useHlsInternal(
+      internalVideoRef,
+      videoSrc,
+      true
+    );
+    const { activeCue } = useCaptions({
+      src: captionsSrc,
+      currentTime
+    });
+    React14.useEffect(() => {
+      if (externalVideoRef) {
+        externalVideoRef.current = internalVideoRef.current;
+      }
+    }, [externalVideoRef]);
+    React14.useImperativeHandle(
+      ref,
+      () => containerRef.current
+    );
+    React14.useEffect(() => {
+      if (hlsError && onError) {
+        onError(hlsError);
+      }
+    }, [hlsError, onError]);
+    React14.useEffect(() => {
+      const video = internalVideoRef.current;
+      if (!video) return;
+      const handlePlay = () => {
+        setIsPlaying(true);
+        onPlay?.();
+      };
+      const handlePause = () => {
+        setIsPlaying(false);
+        onPause?.();
+      };
+      const handleEnded = () => {
+        setIsPlaying(false);
+        onEnded?.();
+      };
+      const handleTimeUpdate = () => {
+        setCurrentTime(video.currentTime);
+        onTimeUpdate?.(video.currentTime);
+      };
+      const handleCanPlay = () => {
+        if (autoPlay) {
+          video.play().catch(() => {
+          });
+        }
+      };
+      video.addEventListener("play", handlePlay);
+      video.addEventListener("pause", handlePause);
+      video.addEventListener("ended", handleEnded);
+      video.addEventListener("timeupdate", handleTimeUpdate);
+      video.addEventListener("canplay", handleCanPlay);
+      return () => {
+        video.removeEventListener("play", handlePlay);
+        video.removeEventListener("pause", handlePause);
+        video.removeEventListener("ended", handleEnded);
+        video.removeEventListener("timeupdate", handleTimeUpdate);
+        video.removeEventListener("canplay", handleCanPlay);
+      };
+    }, [autoPlay, onPlay, onPause, onEnded, onTimeUpdate]);
+    React14.useEffect(() => {
+      if (!autoHideControls || !isPlaying || !controlsVisible) return;
+      controlsTimeoutRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, autoHideDelay);
+      return () => {
+        if (controlsTimeoutRef.current) {
+          clearTimeout(controlsTimeoutRef.current);
+        }
+      };
+    }, [autoHideControls, isPlaying, controlsVisible, autoHideDelay]);
+    React14.useEffect(() => {
+      const handleFullscreenChange = () => {
+        setIsFullscreen(!!document.fullscreenElement);
+      };
+      document.addEventListener("fullscreenchange", handleFullscreenChange);
+      document.addEventListener(
+        "webkitfullscreenchange",
+        handleFullscreenChange
+      );
+      return () => {
+        document.removeEventListener(
+          "fullscreenchange",
+          handleFullscreenChange
+        );
+        document.removeEventListener(
+          "webkitfullscreenchange",
+          handleFullscreenChange
+        );
+      };
+    }, []);
+    const togglePlay = React14.useCallback(() => {
+      const video = internalVideoRef.current;
+      if (!video) return;
+      if (video.paused) {
+        video.play().catch(() => {
+        });
+      } else {
+        video.pause();
+      }
+    }, []);
+    const toggleCaptions = React14.useCallback(() => {
+      setCaptionsEnabled((prev) => !prev);
+    }, []);
+    const toggleFullscreen = React14.useCallback(() => {
+      if (!document.fullscreenElement) {
+        containerRef.current?.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }, []);
+    const showControls = React14.useCallback(() => {
+      setControlsVisible(true);
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    }, []);
+    const handleMouseLeave = React14.useCallback(() => {
+      if (autoHideControls && isPlaying) {
+        setControlsVisible(false);
+      }
+    }, [autoHideControls, isPlaying]);
+    const { containerProps: keyboardProps } = useVideoKeyboard({
+      videoRef: internalVideoRef,
+      onTogglePlay: togglePlay,
+      onToggleFullscreen: toggleFullscreen,
+      onToggleCaptions: captionsSrc ? toggleCaptions : void 0,
+      onShowControls: showControls
+    });
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: role is applied via keyboardProps spread
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(videoPlayerVariants({ aspectRatio, rounded }), className),
+          onMouseMove: showControls,
+          onMouseLeave: handleMouseLeave,
+          ...keyboardProps,
+          ...props,
+          children: [
+            controls ? /* @__PURE__ */ jsxs(
+              MediaController,
+              {
+                noAutohide: true,
+                className: mediaControllerVariants(),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      ref: internalVideoRef,
+                      slot: "media",
+                      poster,
+                      loop,
+                      muted,
+                      playsInline: true,
+                      crossOrigin: "anonymous",
+                      className: "w-full h-full object-contain"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(MediaLoadingIndicator, { slot: "centered-chrome", noAutohide: true }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      onClick: togglePlay,
+                      className: "absolute inset-0 cursor-pointer z-[1]",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    MediaControlBar,
+                    {
+                      className: controlBarVariants({ visible: controlsVisible }),
+                      onClick: (e) => e.stopPropagation(),
+                      style: {
+                        position: "absolute",
+                        left: "24px",
+                        right: "24px",
+                        bottom: "24px",
+                        gap: "12px",
+                        padding: "8px 16px",
+                        borderRadius: "9999px",
+                        backdropFilter: "blur(10px)",
+                        WebkitBackdropFilter: "blur(10px)",
+                        zIndex: 2
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(MediaPlayButton, { style: mediaButtonStyles }),
+                        /* @__PURE__ */ jsx(MediaMuteButton, { style: mediaButtonStyles }),
+                        /* @__PURE__ */ jsx(MediaVolumeRange, { style: volumeRangeStyles }),
+                        /* @__PURE__ */ jsx(
+                          MediaTimeDisplay,
+                          {
+                            style: timeDisplayStyles,
+                            showDuration: true,
+                            noToggle: true
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(MediaTimeRange, { style: timeRangeStyles }),
+                        captionsSrc && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: controlButtonVariants(),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              toggleCaptions();
+                            },
+                            "aria-label": captionsEnabled ? "Disable captions" : "Enable captions",
+                            "aria-pressed": captionsEnabled,
+                            children: /* @__PURE__ */ jsx(CaptionsIcon, { enabled: captionsEnabled })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: controlButtonVariants(),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              toggleFullscreen();
+                            },
+                            "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                            children: /* @__PURE__ */ jsx(FullscreenIcon, { isFullscreen })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) : (
+              /* Video without controls */
+              /* @__PURE__ */ jsx(
+                "video",
+                {
+                  ref: internalVideoRef,
+                  poster,
+                  loop,
+                  muted,
+                  playsInline: true,
+                  crossOrigin: "anonymous",
+                  className: "w-full h-full object-contain",
+                  onClick: togglePlay
+                }
+              )
+            ),
+            isLoading && /* @__PURE__ */ jsx("div", { className: loadingOverlayVariants(), children: /* @__PURE__ */ jsx("div", { className: "w-40 h-40 border-3 border-white/30 border-t-white rounded-full animate-spin" }) }),
+            hlsError && /* @__PURE__ */ jsx("div", { className: loadingOverlayVariants(), children: /* @__PURE__ */ jsxs("div", { className: "text-white text-center px-16", children: [
+              /* @__PURE__ */ jsx("p", { className: "typography-body-sm-sm", children: "Failed to load video" }),
+              /* @__PURE__ */ jsx("p", { className: "typography-caption text-white/60 mt-4", children: hlsError.message })
+            ] }) }),
+            captionsEnabled && activeCue && /* @__PURE__ */ jsx(CaptionOverlay, { cue: activeCue })
+          ]
+        }
+      )
+    );
+  }
+);
+VideoPlayer.displayName = "VideoPlayer";
+var CaptionsIcon = ({ enabled }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "w-20 h-20",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    children: enabled ? (
+      // Captions On
+      /* @__PURE__ */ jsx("path", { d: "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z" })
+    ) : (
+      // Captions Off (with strike-through)
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("path", { d: "M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z" }),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: "4",
+            y1: "20",
+            x2: "20",
+            y2: "4",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          }
+        )
+      ] })
+    )
+  }
+);
+var FullscreenIcon = ({ isFullscreen }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "w-20 h-20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: isFullscreen ? (
+      // Minimize (exit fullscreen)
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("polyline", { points: "4 14 10 14 10 20" }),
+        /* @__PURE__ */ jsx("polyline", { points: "20 10 14 10 14 4" }),
+        /* @__PURE__ */ jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ] })
+    ) : (
+      // Maximize (enter fullscreen)
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+        /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+      ] })
+    )
+  }
+);
 function GridOverlay({
   columnOpacity = 0.15,
   borderOpacity = 0.3,
@@ -1962,49 +3146,648 @@ function DevToolbar({ defaultExpanded = false }) {
             className: `bg-gray-1100 rounded-radius-16 shadow-lg flex flex-col items-center overflow-hidden px-12 py-8 ${isExpanded ? "gap-4" : ""}`,
             children: [
               /* @__PURE__ */ jsx(
-                "div",
+                "div",
+                {
+                  className: `
+							grid transition-all duration-300 ease-out
+							${isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}
+						`,
+                  children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: toggleGrid,
+                      className: `
+									size-40 rounded-full flex items-center justify-center transition-colors
+									${showGrid ? "text-gray-50" : "text-gray-400 hover:text-gray-50 hover:bg-alpha-white-10"}
+								`,
+                      title: "Toggle Grid (\u2318G)",
+                      "aria-label": "Toggle grid overlay",
+                      children: /* @__PURE__ */ jsx(GridIcon, { active: showGrid })
+                    }
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: handleBarMouseDown,
+                  onTouchStart: handleBarTouchStart,
+                  onClick: handleBarClick,
+                  className: `
+							w-32 h-4 bg-gray-50 rounded-full transition-opacity
+							${isDragging ? "opacity-100 cursor-grabbing" : "opacity-60 hover:opacity-100 cursor-grab"}
+						`,
+                  "aria-label": isExpanded ? "Close dev tools" : "Open dev tools"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+var dialogBackdropVariants = tv({
+  base: [
+    // Fixed positioning to cover viewport
+    "fixed inset-0",
+    // Semi-transparent black background using alpha token
+    "bg-alpha-black-50",
+    // Smooth opacity transition
+    "transition-opacity duration-200",
+    // Animation states
+    "data-[starting-style]:opacity-0",
+    "data-[ending-style]:opacity-0",
+    // Ensure backdrop covers full viewport on iOS
+    "min-h-dvh"
+  ]
+});
+var dialogPopupVariants = tv({
+  base: [
+    // Fixed positioning, centered
+    "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+    // Layout
+    "flex flex-col",
+    // Max dimensions with viewport margin (24px on each side = 48px total)
+    "max-h-[calc(100vh-48px)] max-w-[calc(100vw-48px)]",
+    // Ensure above backdrop
+    "z-50",
+    // Animation
+    "transition-all duration-200",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    // Focus outline
+    "outline-none"
+  ],
+  variants: {
+    size: {
+      sm: "w-full sm:max-w-[400px]",
+      md: "w-full sm:max-w-[560px]",
+      lg: "w-full sm:max-w-[720px]",
+      xl: "w-full sm:max-w-[960px]",
+      full: "w-[calc(100vw-48px)] h-[calc(100vh-48px)]"
+    },
+    variant: {
+      default: [
+        // Background - uses overlay background token
+        "bg-overlay-background",
+        // Border - uses overlay border token
+        "border border-overlay-border",
+        // Text - uses overlay text token
+        "text-overlay-text",
+        // Border radius - uses surface overlay token
+        "rounded-surface-overlay",
+        // Shadow for elevation
+        "shadow-xl"
+      ],
+      minimal: [
+        // Transparent background, no border/shadow
+        "bg-black",
+        "border-0",
+        "text-white",
+        "rounded-8",
+        "shadow-none",
+        "overflow-hidden"
+      ]
+    }
+  },
+  compoundVariants: [
+    // Default variant padding by size
+    { variant: "default", size: "sm", class: "p-24" },
+    { variant: "default", size: "md", class: "p-32" },
+    { variant: "default", size: "lg", class: "p-32" },
+    { variant: "default", size: "xl", class: "p-40" },
+    { variant: "default", size: "full", class: "p-40" },
+    // Minimal variant has no padding
+    { variant: "minimal", size: "sm", class: "p-0" },
+    { variant: "minimal", size: "md", class: "p-0" },
+    { variant: "minimal", size: "lg", class: "p-0" },
+    { variant: "minimal", size: "xl", class: "p-0" },
+    { variant: "minimal", size: "full", class: "p-0" }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+var DialogRoot = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props, children });
+};
+var DialogTrigger = React14.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const isSingleElement = React14.isValidElement(children);
+    if (isSingleElement) {
+      return /* @__PURE__ */ jsx(
+        Dialog$1.Trigger,
+        {
+          ref,
+          className,
+          render: children,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ref, className, ...props, children });
+  }
+);
+DialogTrigger.displayName = "DialogTrigger";
+var DialogPortal = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { ...props, children });
+};
+var DialogBackdrop = React14.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Backdrop,
+      {
+        ref,
+        className: cn(dialogBackdropVariants(), className),
+        ...props
+      }
+    );
+  }
+);
+DialogBackdrop.displayName = "DialogBackdrop";
+var DialogPopup = React14.forwardRef(
+  ({ className, size, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Popup,
+      {
+        ref,
+        className: cn(dialogPopupVariants({ size, variant }), className),
+        ...props
+      }
+    );
+  }
+);
+DialogPopup.displayName = "DialogPopup";
+var DialogTitle = React14.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Title,
+      {
+        ref,
+        className: cn("typography-h4-md font-semibold mb-8", className),
+        ...props
+      }
+    );
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React14.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      ref,
+      className: cn("typography-body-md-md text-overlay-text-muted", className),
+      ...props
+    }
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+var DialogClose = React14.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Close,
+      {
+        ref,
+        className: cn(
+          "absolute right-16 top-16 rounded-surface-ui-small p-8",
+          "text-overlay-text-muted hover:text-overlay-text",
+          "hover:bg-bg-section",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+          "transition-colors duration-150",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DialogClose.displayName = "DialogClose";
+var DialogBody = React14.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1 overflow-y-auto", className),
+        ...props
+      }
+    );
+  }
+);
+DialogBody.displayName = "DialogBody";
+var DialogFooter = React14.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-end gap-12 pt-24 mt-auto",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var Dialog = ({
+  children,
+  trigger,
+  title,
+  description,
+  size = "md",
+  variant = "default",
+  showClose = true,
+  open,
+  defaultOpen,
+  onOpenChange,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    DialogRoot,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        trigger && /* @__PURE__ */ jsx(DialogTrigger, { children: trigger }),
+        /* @__PURE__ */ jsxs(DialogPortal, { children: [
+          /* @__PURE__ */ jsx(DialogBackdrop, {}),
+          /* @__PURE__ */ jsxs(DialogPopup, { size, variant, className, children: [
+            showClose && /* @__PURE__ */ jsxs(DialogClose, { children: [
+              /* @__PURE__ */ jsx(
+                "svg",
                 {
-                  className: `
-							grid transition-all duration-300 ease-out
-							${isExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}
-						`,
-                  children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
-                    "button",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
                     {
-                      type: "button",
-                      onClick: toggleGrid,
-                      className: `
-									size-40 rounded-full flex items-center justify-center transition-colors
-									${showGrid ? "text-gray-50" : "text-gray-400 hover:text-gray-50 hover:bg-alpha-white-10"}
-								`,
-                      title: "Toggle Grid (\u2318G)",
-                      "aria-label": "Toggle grid overlay",
-                      children: /* @__PURE__ */ jsx(GridIcon, { active: showGrid })
+                      d: "M2 2L14 14M2 14L14 2",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round"
                     }
-                  ) })
+                  )
                 }
               ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onMouseDown: handleBarMouseDown,
-                  onTouchStart: handleBarTouchStart,
-                  onClick: handleBarClick,
-                  className: `
-							w-32 h-4 bg-gray-50 rounded-full transition-opacity
-							${isDragging ? "opacity-100 cursor-grabbing" : "opacity-60 hover:opacity-100 cursor-grab"}
-						`,
-                  "aria-label": isExpanded ? "Close dev tools" : "Open dev tools"
-                }
-              )
-            ]
-          }
-        )
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ] }),
+            title && /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+            description && /* @__PURE__ */ jsx(DialogDescription, { children: description }),
+            /* @__PURE__ */ jsx(DialogBody, { children })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var DialogParts = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Backdrop: DialogBackdrop,
+  Popup: DialogPopup,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+  Body: DialogBody,
+  Footer: DialogFooter
+});
+var videoDialogVariants = tv({
+  base: [
+    // Fixed positioning covering viewport
+    "fixed inset-0",
+    // Dark background base
+    "bg-black",
+    // Flex centering for the video
+    "flex items-center justify-center",
+    // Animation
+    "transition-opacity duration-300",
+    "data-[starting-style]:opacity-0",
+    "data-[ending-style]:opacity-0",
+    // Focus outline
+    "outline-none"
+  ]
+});
+var closeButtonVariants = tv({
+  base: [
+    // Positioning
+    "absolute z-50",
+    // Size and shape
+    "w-48 h-48 rounded-full",
+    // Colors
+    "bg-black/60 text-white",
+    "hover:bg-black/80",
+    // Transition
+    "transition-all duration-150",
+    // Focus
+    "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
+    // Flex centering for icon
+    "flex items-center justify-center",
+    // Cursor
+    "cursor-pointer"
+  ],
+  variants: {
+    position: {
+      "top-right": "top-24 right-24",
+      "top-left": "top-24 left-24"
+    }
+  },
+  defaultVariants: {
+    position: "top-right"
+  }
+});
+var videoContainerVariants = tv({
+  base: [
+    // Relative for z-index
+    "relative z-10",
+    // Fill available space
+    "w-full h-full",
+    // Flex to center the video
+    "flex items-center justify-center",
+    // Padding from viewport edges
+    "p-16 sm:p-24 lg:p-32"
+  ]
+});
+var VideoDialog = React14.forwardRef(
+  ({
+    trigger,
+    src,
+    cloudflare,
+    blur = "high",
+    overlay = "vignette",
+    backdropOpacity = 0.6,
+    showClose = true,
+    closePosition = "top-right",
+    rounded = "lg",
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    className,
+    autoPlay,
+    ...videoProps
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = React14.useState(
+      defaultOpen ?? false
+    );
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const handleOpenChange = React14.useCallback(
+      (newOpen) => {
+        if (!isControlled) {
+          setInternalOpen(newOpen);
+        }
+        onOpenChange?.(newOpen);
+      },
+      [isControlled, onOpenChange]
+    );
+    const primaryVideoRef = React14.useRef(null);
+    return /* @__PURE__ */ jsxs(
+      Dialog$1.Root,
+      {
+        open,
+        defaultOpen,
+        onOpenChange: handleOpenChange,
+        children: [
+          /* @__PURE__ */ jsx(
+            Dialog$1.Trigger,
+            {
+              render: React14.isValidElement(trigger) ? trigger : void 0,
+              children: !React14.isValidElement(trigger) ? trigger : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsxs(
+            Dialog$1.Popup,
+            {
+              ref,
+              className: cn(videoDialogVariants(), className),
+              "data-component": "video-dialog",
+              children: [
+                /* @__PURE__ */ jsx(
+                  BlurredVideoBackdrop,
+                  {
+                    videoRef: primaryVideoRef,
+                    blur,
+                    overlay,
+                    opacity: backdropOpacity,
+                    extension: 120
+                  }
+                ),
+                showClose && /* @__PURE__ */ jsxs(
+                  Dialog$1.Close,
+                  {
+                    className: closeButtonVariants({ position: closePosition }),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: "20",
+                          height: "20",
+                          viewBox: "0 0 20 20",
+                          fill: "none",
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx(
+                            "path",
+                            {
+                              d: "M4 4L16 16M4 16L16 4",
+                              stroke: "currentColor",
+                              strokeWidth: "2",
+                              strokeLinecap: "round"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: videoContainerVariants(), children: /* @__PURE__ */ jsx(
+                  VideoPlayer,
+                  {
+                    src,
+                    cloudflare,
+                    videoRef: primaryVideoRef,
+                    rounded,
+                    autoPlay: autoPlay ?? open,
+                    aspectRatio: "16/9",
+                    style: {
+                      width: "min(100%, calc((100vh - 64px) * 16 / 9))",
+                      maxHeight: "calc(100vh - 64px)"
+                    },
+                    ...videoProps
+                  }
+                ) })
+              ]
+            }
+          ) })
+        ]
       }
-    )
-  ] });
+    );
+  }
+);
+VideoDialog.displayName = "VideoDialog";
+var VideoWithBackdropContext = React14.createContext(null);
+function useVideoWithBackdropContext() {
+  const context = React14.useContext(VideoWithBackdropContext);
+  if (!context) {
+    throw new Error(
+      "VideoWithBackdrop compound components must be used within VideoWithBackdrop.Root"
+    );
+  }
+  return context;
 }
+var videoWithBackdropVariants = tv({
+  base: ["relative", "overflow-hidden", "bg-black"],
+  variants: {
+    /**
+     * Full-height mode for dialogs.
+     */
+    fullHeight: {
+      true: "h-full w-full",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    fullHeight: false
+  }
+});
+var contentVariants = tv({
+  base: ["relative", "z-10", "flex", "items-center", "justify-center"],
+  variants: {
+    fullHeight: {
+      true: "h-full w-full",
+      false: ""
+    },
+    padding: {
+      none: "",
+      sm: "p-16",
+      md: "p-24",
+      lg: "p-48"
+    }
+  },
+  defaultVariants: {
+    fullHeight: false,
+    padding: "md"
+  }
+});
+var VideoWithBackdropRoot = React14.forwardRef(({ className, src, cloudflare, fullHeight, children, ...props }, ref) => {
+  const videoRef = React14.useRef(null);
+  const contextValue = React14.useMemo(
+    () => ({ videoRef, src, cloudflare }),
+    [src, cloudflare]
+  );
+  return /* @__PURE__ */ jsx(VideoWithBackdropContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(videoWithBackdropVariants({ fullHeight }), className),
+      "data-full-height": fullHeight ?? false,
+      ...props,
+      children
+    }
+  ) });
+});
+VideoWithBackdropRoot.displayName = "VideoWithBackdropRoot";
+var VideoWithBackdropBackdrop = React14.forwardRef(({ ...props }, ref) => {
+  const { videoRef } = useVideoWithBackdropContext();
+  return /* @__PURE__ */ jsx(BlurredVideoBackdrop, { ref, videoRef, ...props });
+});
+VideoWithBackdropBackdrop.displayName = "VideoWithBackdropBackdrop";
+var VideoWithBackdropContent = React14.forwardRef(({ className, fullHeight, padding, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(contentVariants({ fullHeight, padding }), className),
+      ...props,
+      children
+    }
+  );
+});
+VideoWithBackdropContent.displayName = "VideoWithBackdropContent";
+var VideoWithBackdropVideo = React14.forwardRef(({ className, maxWidth = "960px", cloudflare, src, ...props }, ref) => {
+  const context = useVideoWithBackdropContext();
+  const videoCloudflare = cloudflare ?? context.cloudflare;
+  const videoSrc = src ?? context.src;
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: { maxWidth }, children: /* @__PURE__ */ jsx(
+    VideoPlayer,
+    {
+      cloudflare: videoCloudflare,
+      src: videoSrc,
+      videoRef: context.videoRef,
+      ...props
+    }
+  ) });
+});
+VideoWithBackdropVideo.displayName = "VideoWithBackdropVideo";
+var VideoWithBackdrop = React14.forwardRef(
+  ({
+    src,
+    cloudflare,
+    blur = "high",
+    overlay = "vignette",
+    backdropOpacity = 0.6,
+    maxWidth = "960px",
+    padding = "md",
+    rounded = "lg",
+    className,
+    targetFps = 30,
+    scale = 0.5,
+    ...videoProps
+  }, ref) => {
+    const videoRef = React14.useRef(null);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          videoWithBackdropVariants({ fullHeight: true }),
+          className
+        ),
+        "data-component": "video-with-backdrop",
+        children: [
+          /* @__PURE__ */ jsx(
+            BlurredVideoBackdrop,
+            {
+              videoRef,
+              blur,
+              overlay,
+              opacity: backdropOpacity,
+              targetFps,
+              scale
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: cn(contentVariants({ fullHeight: true, padding })), children: /* @__PURE__ */ jsx("div", { className: "w-full", style: { maxWidth }, children: /* @__PURE__ */ jsx(
+            VideoPlayer,
+            {
+              src,
+              cloudflare,
+              videoRef,
+              rounded,
+              ...videoProps
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+VideoWithBackdrop.displayName = "VideoWithBackdrop";
+var VideoWithBackdropParts = Object.assign(VideoWithBackdropRoot, {
+  Root: VideoWithBackdropRoot,
+  Backdrop: VideoWithBackdropBackdrop,
+  Content: VideoWithBackdropContent,
+  Video: VideoWithBackdropVideo
+});
 var cardVariants = tv({
   base: "relative flex overflow-hidden rounded-surface-card bg-card-background stroke-surface-card border-border-subtle border-solid",
   variants: {
@@ -2022,7 +3805,7 @@ var cardVariants = tv({
     layout: "vertical"
   }
 });
-var Card = React11.forwardRef(
+var Card = React14.forwardRef(
   ({ className, layout, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2044,7 +3827,7 @@ var cardImageVariants = tv({
     "[.flex-row>&]:aspect-auto [.flex-row>&]:w-2/5 [.flex-row>&]:self-stretch"
   ]
 });
-var CardImage = React11.forwardRef(
+var CardImage = React14.forwardRef(
   ({ className, src, alt = "", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2079,7 +3862,7 @@ var cardContentVariants = tv({
     }
   }
 });
-var CardContent = React11.forwardRef(
+var CardContent = React14.forwardRef(
   ({ className, justify, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2095,7 +3878,7 @@ CardContent.displayName = "CardContent";
 var cardEyebrowVariants = tv({
   base: "typography-overline text-text-muted uppercase tracking-wider"
 });
-var CardEyebrow = React11.forwardRef(
+var CardEyebrow = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "p",
@@ -2111,7 +3894,7 @@ CardEyebrow.displayName = "CardEyebrow";
 var cardTitleVariants = tv({
   base: "typography-h5 text-text-primary"
 });
-var CardTitle = React11.forwardRef(
+var CardTitle = React14.forwardRef(
   ({ className, as: Component = "h3", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Component,
@@ -2127,7 +3910,7 @@ CardTitle.displayName = "CardTitle";
 var cardDescriptionVariants = tv({
   base: "typography-body-small text-text-secondary"
 });
-var CardDescription = React11.forwardRef(({ className, ...props }, ref) => {
+var CardDescription = React14.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "p",
     {
@@ -2141,7 +3924,7 @@ CardDescription.displayName = "CardDescription";
 var cardBodyVariants = tv({
   base: "flex w-full flex-col gap-spatial-card-small-gap"
 });
-var CardBody = React11.forwardRef(
+var CardBody = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2157,7 +3940,7 @@ CardBody.displayName = "CardBody";
 var cardActionsVariants = tv({
   base: "flex gap-12"
 });
-var CardActions = React11.forwardRef(
+var CardActions = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2170,16 +3953,16 @@ var CardActions = React11.forwardRef(
   }
 );
 CardActions.displayName = "CardActions";
-var NavbarContext = React11.createContext({
+var NavbarContext = React14.createContext({
   isMobileMenuOpen: false,
   setIsMobileMenuOpen: () => {
   }
 });
-var Navbar = React11.forwardRef(
+var Navbar = React14.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = React11.useState(false);
-    const navRef = React11.useRef(null);
-    React11.useEffect(() => {
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = React14.useState(false);
+    const navRef = React14.useRef(null);
+    React14.useEffect(() => {
       const updateHeight = () => {
         if (navRef.current) {
           const height = navRef.current.offsetHeight;
@@ -2193,7 +3976,7 @@ var Navbar = React11.forwardRef(
       window.addEventListener("resize", updateHeight);
       return () => window.removeEventListener("resize", updateHeight);
     }, []);
-    const mergedRef = React11.useCallback(
+    const mergedRef = React14.useCallback(
       (node) => {
         navRef.current = node;
         if (typeof ref === "function") {
@@ -2230,14 +4013,14 @@ var Navbar = React11.forwardRef(
   }
 );
 Navbar.displayName = "Navbar";
-var NavbarBrand = React11.forwardRef(
+var NavbarBrand = React14.forwardRef(
   ({ className, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(Comp, { ref, className: cn("shrink-0", className), ...props });
   }
 );
 NavbarBrand.displayName = "NavbarBrand";
-var NavbarLinks = React11.forwardRef(
+var NavbarLinks = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2253,7 +4036,7 @@ var NavbarLinks = React11.forwardRef(
   }
 );
 NavbarLinks.displayName = "NavbarLinks";
-var NavbarLink = React11.forwardRef(
+var NavbarLink = React14.forwardRef(
   ({ className, asChild = false, active, ...props }, ref) => {
     const Comp = asChild ? Slot : "a";
     return /* @__PURE__ */ jsx(
@@ -2271,7 +4054,7 @@ var NavbarLink = React11.forwardRef(
   }
 );
 NavbarLink.displayName = "NavbarLink";
-var NavbarActions = React11.forwardRef(
+var NavbarActions = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2287,10 +4070,10 @@ var NavbarActions = React11.forwardRef(
   }
 );
 NavbarActions.displayName = "NavbarActions";
-var NavbarMobileMenu = React11.forwardRef(({ className, children, ...props }, ref) => {
-  const { isMobileMenuOpen, setIsMobileMenuOpen } = React11.useContext(NavbarContext);
-  return /* @__PURE__ */ jsx(Dialog.Root, { open: isMobileMenuOpen, onOpenChange: setIsMobileMenuOpen, children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(
-    Dialog.Popup,
+var NavbarMobileMenu = React14.forwardRef(({ className, children, ...props }, ref) => {
+  const { isMobileMenuOpen, setIsMobileMenuOpen } = React14.useContext(NavbarContext);
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { open: isMobileMenuOpen, onOpenChange: setIsMobileMenuOpen, children: /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Dialog$1.Popup,
     {
       ref,
       className: cn(
@@ -2303,7 +4086,7 @@ var NavbarMobileMenu = React11.forwardRef(({ className, children, ...props }, re
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: "Navigation menu" }),
+        /* @__PURE__ */ jsx(Dialog$1.Title, { className: "sr-only", children: "Navigation menu" }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -2322,8 +4105,8 @@ var NavbarMobileMenu = React11.forwardRef(({ className, children, ...props }, re
   ) }) });
 });
 NavbarMobileMenu.displayName = "NavbarMobileMenu";
-var NavbarMobileMenuButton = React11.forwardRef(({ className, asChild = false, children, ...props }, ref) => {
-  const { isMobileMenuOpen, setIsMobileMenuOpen } = React11.useContext(NavbarContext);
+var NavbarMobileMenuButton = React14.forwardRef(({ className, asChild = false, children, ...props }, ref) => {
+  const { isMobileMenuOpen, setIsMobileMenuOpen } = React14.useContext(NavbarContext);
   const handleClick = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
   };
@@ -2358,8 +4141,8 @@ var NavbarMobileMenuButton = React11.forwardRef(({ className, asChild = false, c
   );
 });
 NavbarMobileMenuButton.displayName = "NavbarMobileMenuButton";
-var NavbarMobileMenuLink = React11.forwardRef(({ className, asChild = false, active, onClick, ...props }, ref) => {
-  const { setIsMobileMenuOpen } = React11.useContext(NavbarContext);
+var NavbarMobileMenuLink = React14.forwardRef(({ className, asChild = false, active, onClick, ...props }, ref) => {
+  const { setIsMobileMenuOpen } = React14.useContext(NavbarContext);
   const Comp = asChild ? Slot : "a";
   const handleClick = (event) => {
     setIsMobileMenuOpen(false);
@@ -2405,7 +4188,7 @@ var usGovBannerVariants = tv({
     variant: "default"
   }
 });
-var USGovBanner = React11.forwardRef(
+var USGovBanner = React14.forwardRef(
   ({
     className,
     variant,
@@ -2492,7 +4275,7 @@ var bannerVariants = tv({
     colorScheme: "light"
   }
 });
-var Banner = React11.forwardRef(
+var Banner = React14.forwardRef(
   ({ className, colorScheme, heading, description, action, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "section",
@@ -2559,7 +4342,7 @@ var cardGridVariants = tv({
     variant: "A"
   }
 });
-var CardGrid = React11.forwardRef(
+var CardGrid = React14.forwardRef(
   ({ className, variant, title, cards, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "section",
@@ -2592,7 +4375,7 @@ var CardGrid = React11.forwardRef(
                 // Desktop: 3 columns for variant A, 2 columns for variant B
                 variant === "A" && "lg:grid-cols-3"
               ),
-              children: React11.Children.toArray(cards).map((card) => /* @__PURE__ */ jsx("div", { children: card }, card.key))
+              children: React14.Children.toArray(cards).map((card) => /* @__PURE__ */ jsx("div", { children: card }, card.key))
             }
           )
         ]
@@ -2627,7 +4410,7 @@ var twoColumnSectionVariants = tv({
     layout: "asymmetric"
   }
 });
-var TwoColumnSection = React11.forwardRef(
+var TwoColumnSection = React14.forwardRef(
   ({
     className,
     colorScheme = "dark",
@@ -2709,7 +4492,7 @@ var TwoColumnSection = React11.forwardRef(
   }
 );
 TwoColumnSection.displayName = "TwoColumnSection";
-var FaqSection = React11.forwardRef(
+var FaqSection = React14.forwardRef(
   ({
     className,
     colorScheme = "light",
@@ -2799,7 +4582,7 @@ var heroContentVariants = tv({
     "lg:p-72"
   ]
 });
-var HeroHeader = React11.forwardRef(
+var HeroHeader = React14.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -2810,7 +4593,7 @@ var HeroHeader = React11.forwardRef(
   )
 );
 HeroHeader.displayName = "Hero.Header";
-var HeroContent = React11.forwardRef(
+var HeroContent = React14.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -2824,7 +4607,7 @@ HeroContent.displayName = "Hero.Content";
 function isColorString(background) {
   return typeof background === "string" && (background.startsWith("#") || background.startsWith("rgb") || background.startsWith("hsl") || /^(var\(|[a-z]+$)/i.test(background));
 }
-var Hero = React11.forwardRef(
+var Hero = React14.forwardRef(
   ({
     className,
     children,
@@ -2885,7 +4668,7 @@ var Hero = React11.forwardRef(
 Hero.displayName = "Hero";
 Hero.Header = HeroHeader;
 Hero.Content = HeroContent;
-var Prose = React11.forwardRef(
+var Prose = React14.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2904,7 +4687,7 @@ var Prose = React11.forwardRef(
   }
 );
 Prose.displayName = "Prose";
-var ProseSection = React11.forwardRef(
+var ProseSection = React14.forwardRef(
   ({ className, heading, as = "h2", children, ...props }, ref) => {
     const Heading = as;
     const headingClass = as === "h2" ? "typography-h3" : "typography-h4";
@@ -2973,7 +4756,7 @@ var quoteBlockVariants = tv({
     size: "default"
   }
 });
-var QuoteBlock = React11.forwardRef(
+var QuoteBlock = React14.forwardRef(
   ({
     className,
     quote,
@@ -3071,7 +4854,7 @@ var riverVariants = tv({
     variant: "A"
   }
 });
-var River = React11.forwardRef(
+var River = React14.forwardRef(
   ({
     className,
     variant,
@@ -3168,7 +4951,7 @@ var toutVariants = tv({
     align: "left"
   }
 });
-var Tout = React11.forwardRef(
+var Tout = React14.forwardRef(
   ({
     className,
     colorScheme = "light",
@@ -3316,6 +5099,90 @@ var Tout = React11.forwardRef(
   }
 );
 Tout.displayName = "Tout";
+var BREAKPOINTS = {
+  sm: 320,
+  md: 768,
+  lg: 1440
+};
+function getCurrentBreakpoint(width) {
+  if (width >= BREAKPOINTS.lg) return "lg";
+  if (width >= BREAKPOINTS.md) return "md";
+  return "sm";
+}
+function useBreakpoint() {
+  const [breakpoint, setBreakpoint] = React14.useState(() => {
+    if (typeof window === "undefined") return "sm";
+    return getCurrentBreakpoint(window.innerWidth);
+  });
+  React14.useEffect(() => {
+    const handleResize = () => {
+      setBreakpoint(getCurrentBreakpoint(window.innerWidth));
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return breakpoint;
+}
+function useMinBreakpoint(breakpoint) {
+  const [matches, setMatches] = React14.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth >= BREAKPOINTS[breakpoint];
+  });
+  React14.useEffect(() => {
+    const mediaQuery = window.matchMedia(
+      `(min-width: ${BREAKPOINTS[breakpoint]}px)`
+    );
+    setMatches(mediaQuery.matches);
+    const handleChange = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [breakpoint]);
+  return matches;
+}
+function useMaxBreakpoint(breakpoint) {
+  const [matches, setMatches] = React14.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < BREAKPOINTS[breakpoint];
+  });
+  React14.useEffect(() => {
+    const mediaQuery = window.matchMedia(
+      `(max-width: ${BREAKPOINTS[breakpoint] - 1}px)`
+    );
+    setMatches(mediaQuery.matches);
+    const handleChange = (event) => {
+      setMatches(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [breakpoint]);
+  return matches;
+}
+function useEventListener(eventName, handler, element, options) {
+  const savedHandler = React14.useRef(handler);
+  React14.useLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  React14.useEffect(() => {
+    const targetElement = element ?? window;
+    if (!targetElement?.addEventListener) {
+      return;
+    }
+    const eventListener = (event) => {
+      savedHandler.current(event);
+    };
+    targetElement.addEventListener(eventName, eventListener, options);
+    return () => {
+      targetElement.removeEventListener(
+        eventName,
+        eventListener,
+        options
+      );
+    };
+  }, [eventName, element, options]);
+}
 
 // ../tokens/dist/collections/types.js
 function isColorValue(value) {
@@ -3592,6 +5459,70 @@ var baseColorTokens = {
           $type: "color",
           $value: "{primitive.color.blue.v250}"
         }
+      },
+      // Video Player tokens (color-video-player-*)
+      // Used for fullscreen video modal, controls, and captions
+      "video-player": {
+        "controls-bg": {
+          $type: "color",
+          $value: "{primitive.color.alpha-black.40}",
+          $description: "Video controls bar background (glassmorphic)"
+        },
+        "controls-text": {
+          $type: "color",
+          $value: "{primitive.color.white}",
+          $description: "Video controls text and icons"
+        },
+        "controls-hover": {
+          $type: "color",
+          $value: "{primitive.color.alpha-white.20}",
+          $description: "Video controls hover state"
+        },
+        "button-bg": {
+          $type: "color",
+          $value: "{primitive.color.alpha-white.10}",
+          $description: "Control button background (visible on dark video)"
+        },
+        "button-bg-hover": {
+          $type: "color",
+          $value: "{primitive.color.alpha-white.20}",
+          $description: "Control button hover background"
+        },
+        "button-bg-active": {
+          $type: "color",
+          $value: "{primitive.color.alpha-white.30}",
+          $description: "Control button active/pressed background"
+        },
+        "caption-bg": {
+          $type: "color",
+          $value: "{primitive.color.alpha-black.70}",
+          $description: "Caption background overlay"
+        },
+        "caption-text": {
+          $type: "color",
+          $value: "{primitive.color.white}",
+          $description: "Caption text color"
+        },
+        "backdrop-overlay": {
+          $type: "color",
+          $value: "{primitive.color.alpha-black.90}",
+          $description: "Modal backdrop overlay"
+        },
+        "progress-bg": {
+          $type: "color",
+          $value: "{primitive.color.alpha-white.30}",
+          $description: "Progress bar track background"
+        },
+        "progress-fill": {
+          $type: "color",
+          $value: "{primitive.color.white}",
+          $description: "Progress bar fill color"
+        },
+        "tooltip-bg": {
+          $type: "color",
+          $value: "{primitive.color.alpha-black.90}",
+          $description: "Video tooltip background"
+        }
       }
     }
   }
@@ -6123,6 +8054,59 @@ var baseSpatialTokens = {
               $description: "Gap in mobile menu items"
             }
           }
+        },
+        /**
+         * Video Player Spacing Tokens
+         *
+         * Spacing for video player controls, captions, and overlays.
+         */
+        "video-player": {
+          controls: {
+            height: {
+              $type: "dimension",
+              $value: "{primitive.spacing.48}",
+              $description: "Height of video player controls bar"
+            },
+            padding: {
+              $type: "dimension",
+              $value: "{primitive.spacing.16}",
+              $description: "Padding inside controls bar"
+            },
+            gap: {
+              $type: "dimension",
+              $value: "{primitive.spacing.12}",
+              $description: "Gap between control buttons"
+            }
+          },
+          caption: {
+            "padding-x": {
+              $type: "dimension",
+              $value: "{primitive.spacing.16}",
+              $description: "Horizontal padding for caption text"
+            },
+            "padding-y": {
+              $type: "dimension",
+              $value: "{primitive.spacing.8}",
+              $description: "Vertical padding for caption text"
+            },
+            "offset-bottom": {
+              $type: "dimension",
+              $value: "{primitive.spacing.64}",
+              $description: "Distance from bottom of video to caption"
+            }
+          },
+          "close-button": {
+            size: {
+              $type: "dimension",
+              $value: "{primitive.spacing.40}",
+              $description: "Size of close button"
+            },
+            offset: {
+              $type: "dimension",
+              $value: "{primitive.spacing.16}",
+              $description: "Offset from top-right corner"
+            }
+          }
         }
       },
       /**
@@ -7286,6 +9270,6 @@ function filterCSSVars(cssVars, prefix) {
   return result;
 }
 
-export { Accordion, AccordionItem, BackgroundCompound as Background, BackgroundGradient, BackgroundImage, BackgroundOverlay, BackgroundStream, BackgroundVideo, Banner, Button, Card, CardActions, CardBody, CardContent, CardDescription, CardEyebrow, CardGrid, CardImage, CardTitle, DEFAULT_TITLE_TYPOGRAPHY, DevToolbar, FONT_SIZES, FaqSection, GridOverlay, Hero, BackgroundCompound as HeroBackground, BackgroundImage as HeroBackgroundImage, BackgroundStream as HeroBackgroundStream, BackgroundVideo as HeroBackgroundVideo, HeroContent, BackgroundGradient as HeroGradient, HeroHeader, BackgroundOverlay as HeroOverlay, IconButton, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarMobileMenu, NavbarMobileMenuButton, NavbarMobileMenuLink, NdstudioFooter, PagerControl, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverParts, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Prose, ProseSection, QuoteBlock, River, Select, SelectGroup, SelectGroupLabel, SelectOption, SelectPopup, SelectRoot, SelectTrigger, ThemeProvider, Tooltip, TooltipArrow, TooltipParts, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, Tout, TwoColumnSection, USGovBanner, 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, BLUR_AMOUNTS, BREAKPOINTS, BackgroundCompound as Background, BackgroundGradient, BackgroundImage, BackgroundOverlay, BackgroundStream, BackgroundVideo, Banner, BlurredVideoBackdrop, Button, CaptionOverlay, Card, CardActions, CardBody, CardContent, CardDescription, CardEyebrow, CardGrid, CardImage, CardTitle, DEFAULT_TITLE_TYPOGRAPHY, DevToolbar, Dialog, DialogBackdrop, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogParts, DialogPopup, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, FONT_SIZES, FaqSection, GridOverlay, Hero, BackgroundCompound as HeroBackground, BackgroundImage as HeroBackgroundImage, BackgroundStream as HeroBackgroundStream, BackgroundVideo as HeroBackgroundVideo, HeroContent, BackgroundGradient as HeroGradient, HeroHeader, BackgroundOverlay as HeroOverlay, IconButton, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarMobileMenu, NavbarMobileMenuButton, NavbarMobileMenuLink, NdstudioFooter, PagerControl, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverParts, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Prose, ProseSection, QuoteBlock, River, Select, SelectGroup, SelectGroupLabel, SelectOption, SelectPopup, SelectRoot, SelectTrigger, ThemeProvider, Tooltip, TooltipArrow, TooltipParts, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, Tout, TwoColumnSection, USGovBanner, VideoDialog, VideoPlayer, VideoWithBackdrop, VideoWithBackdropBackdrop, VideoWithBackdropContent, VideoWithBackdropParts, VideoWithBackdropRoot, VideoWithBackdropVideo, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map