@nationaldesignstudio/react 0.5.4 → 0.5.6

package/dist/index.js

@@ -1,18 +1,24 @@
 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 cn } from 'tailwind-variants';
+export { cnBase as twMerge } from 'tailwind-variants';
+import { clsx } from 'clsx';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
 var accordionVariants = tv({
   base: "flex flex-col",
   variants: {
@@ -66,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,
@@ -77,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];
@@ -95,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,
       {
@@ -114,7 +120,7 @@ var AccordionItem = React11.forwardRef(
                 /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: cnBase(
+                    className: cn(
                       "text-base transition-transform duration-200",
                       "[[data-open]_&]:rotate-45"
                     ),
@@ -127,7 +133,7 @@ var AccordionItem = React11.forwardRef(
           /* @__PURE__ */ jsx(
             Accordion$1.Panel,
             {
-              className: cnBase(
+              className: cn(
                 "h-[var(--accordion-panel-height)] overflow-hidden",
                 "transition-[height] duration-300 ease-out",
                 "[&[data-starting-style]]:h-0 [&[data-ending-style]]:h-0"
@@ -144,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",
     {
@@ -237,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,
@@ -277,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,
@@ -294,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",
@@ -330,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 = [
@@ -549,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);
@@ -579,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
@@ -596,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",
@@ -703,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",
@@ -711,7 +975,7 @@ var Input = React11.forwardRef(
         ref,
         type,
         "aria-invalid": error || void 0,
-        className: cnBase(inputVariants({ size, error, class: className })),
+        className: cn(inputVariants({ size, error, class: className })),
         "data-size": size ?? "default",
         "data-error": error ?? false,
         ...props
@@ -803,7 +1067,7 @@ function InputGroup({ className, size, disabled, ...props }) {
       "data-slot": "input-group",
       "data-disabled": disabled || void 0,
       disabled,
-      className: cnBase(
+      className: cn(
         "p-0 m-0 min-w-0",
         inputGroupVariants({ size, class: className })
       ),
@@ -842,7 +1106,7 @@ function InputGroupAddon({
       {
         "data-slot": "input-group-addon",
         "data-align": align,
-        className: cnBase(inputGroupAddonVariants({ align, class: className })),
+        className: cn(inputGroupAddonVariants({ align, class: className })),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         ...props
@@ -881,7 +1145,7 @@ function InputGroupButton({
       type,
       "data-size": size,
       variant,
-      className: cnBase(inputGroupButtonVariants({ size, class: className })),
+      className: cn(inputGroupButtonVariants({ size, class: className })),
       ...props
     }
   );
@@ -890,7 +1154,7 @@ function InputGroupText({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: cnBase(
+      className: cn(
         "flex items-center gap-6 typography-ui-text-sm text-text-muted",
         "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-16",
         className
@@ -904,7 +1168,7 @@ function InputGroupInput({ className, ...props }) {
     "input",
     {
       "data-slot": "input-group-control",
-      className: cnBase(
+      className: cn(
         "flex-1 min-w-0 h-full w-full",
         "border-0 bg-transparent shadow-none outline-none",
         "typography-ui-text-sm text-left placeholder:text-text-muted",
@@ -921,7 +1185,7 @@ function InputGroupTextarea({ className, ...props }) {
     "textarea",
     {
       "data-slot": "input-group-control",
-      className: cnBase(
+      className: cn(
         "flex-1 min-w-0 w-full resize-none",
         "border-0 bg-transparent shadow-none outline-none",
         "typography-ui-text-sm text-left placeholder:text-text-muted",
@@ -933,9 +1197,9 @@ 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: cnBase("text-center", className), ...props, children: /* @__PURE__ */ jsxs("p", { className: "typography-label-large uppercase text-ivory-alpha-75", children: [
+    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",
       " ",
       /* @__PURE__ */ jsxs(
@@ -988,7 +1252,7 @@ var dotBaseVariants = tv({
     variant: "charcoal"
   }
 });
-var PagerControl = React11.forwardRef(
+var PagerControl = React14.forwardRef(
   ({
     className,
     size,
@@ -1002,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");
@@ -1030,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) {
@@ -1045,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);
@@ -1055,7 +1319,7 @@ var PagerControl = React11.forwardRef(
       },
       [isControlled, onChange]
     );
-    React11.useEffect(() => {
+    React14.useEffect(() => {
       if (!autoPlay || duration2 <= 0 || isPaused) {
         if (animationFrameRef.current) {
           cancelAnimationFrame(animationFrameRef.current);
@@ -1086,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;
@@ -1163,7 +1427,7 @@ var PagerControl = React11.forwardRef(
                 role: "tab",
                 "aria-selected": true,
                 "aria-label": `Page ${index + 1} of ${count}, current`,
-                className: cnBase(
+                className: cn(
                   "relative cursor-pointer overflow-hidden rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]",
                   dotBaseVariants({ size, variant }),
                   getDotWidth(true),
@@ -1173,7 +1437,7 @@ var PagerControl = React11.forwardRef(
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: cnBase(
+                    className: cn(
                       "absolute top-0 bottom-0 left-0 h-full rounded-full",
                       getProgressFillClass()
                     ),
@@ -1193,7 +1457,7 @@ var PagerControl = React11.forwardRef(
               role: "tab",
               "aria-selected": false,
               "aria-label": `Go to page ${index + 1} of ${count}`,
-              className: cnBase(
+              className: cn(
                 dotBaseVariants({ size, variant }),
                 getDotWidth(false),
                 getInactiveClasses()
@@ -1233,7 +1497,7 @@ var FloatingArrowSvg = ({
     height: "10",
     viewBox: "0 0 20 10",
     fill: "none",
-    className: cnBase("block", className),
+    className: cn("block", className),
     "aria-hidden": "true",
     children: [
       /* @__PURE__ */ jsx(
@@ -1293,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,
@@ -1314,52 +1578,52 @@ 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,
       {
         ref,
-        className: cnBase("fixed inset-0 z-40", className),
+        className: cn("fixed inset-0 z-40", className),
         ...props
       }
     );
   }
 );
 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,
     {
       ref,
       side,
       sideOffset,
-      className: cnBase("z-50", className),
+      className: cn("z-50", className),
       ...props
     }
   );
 });
 PopoverPositioner.displayName = "PopoverPositioner";
-var PopoverPopup = React11.forwardRef(
+var PopoverPopup = React14.forwardRef(
   ({ className, variant, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Popover$1.Popup,
       {
         ref,
-        className: cnBase(popoverPopupVariants({ variant }), className),
+        className: cn(popoverPopupVariants({ variant }), className),
         ...props
       }
     );
   }
 );
 PopoverPopup.displayName = "PopoverPopup";
-var PopoverArrow = React11.forwardRef(
+var PopoverArrow = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Popover$1.Arrow,
       {
         ref,
-        className: cnBase(popoverArrowVariants(), className),
+        className: cn(popoverArrowVariants(), className),
         ...props,
         children: /* @__PURE__ */ jsx(
           FloatingArrowSvg,
@@ -1373,25 +1637,25 @@ var PopoverArrow = React11.forwardRef(
   }
 );
 PopoverArrow.displayName = "PopoverArrow";
-var PopoverTitle = React11.forwardRef(
+var PopoverTitle = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Popover$1.Title,
       {
         ref,
-        className: cnBase("typography-body-md-md font-semibold", className),
+        className: cn("typography-body-md-md font-semibold", className),
         ...props
       }
     );
   }
 );
 PopoverTitle.displayName = "PopoverTitle";
-var PopoverDescription = React11.forwardRef(({ className, ...props }, ref) => {
+var PopoverDescription = React14.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Popover$1.Description,
     {
       ref,
-      className: cnBase(
+      className: cn(
         "typography-body-sm-md text-overlay-text-muted mt-8",
         className
       ),
@@ -1400,13 +1664,13 @@ 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,
       {
         ref,
-        className: cnBase(
+        className: cn(
           "absolute right-8 top-8 rounded-surface-ui-small p-4",
           "text-overlay-text-muted hover:text-overlay-text",
           "hover:bg-bg-section focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
@@ -1491,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,
@@ -1505,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({
@@ -1542,112 +1814,115 @@ var selectOptionVariants = tv({
     "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"
   ]
 });
-var SelectChevronIcon = ({ className }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: cnBase("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: cnBase("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,
-        className: cnBase(selectTriggerVariants({ size, error }), className),
+        "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: cnBase(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,
       {
         ref,
-        className: cnBase(selectOptionVariants(), className),
+        className: cn(selectOptionVariants(), className),
         ...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,
     {
       ref,
-      className: cnBase(
+      className: cn(
         "px-12 py-6 typography-body-sm-sm font-medium text-text-muted uppercase tracking-wide",
         className
       ),
@@ -1657,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: [
@@ -1703,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,
@@ -1724,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,
     {
@@ -1737,27 +2061,27 @@ 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,
       {
         ref,
         role: "tooltip",
-        className: cnBase(tooltipPopupVariants({ variant }), className),
+        className: cn(tooltipPopupVariants({ variant }), className),
         ...props
       }
     );
   }
 );
 TooltipPopup.displayName = "TooltipPopup";
-var TooltipArrow = React11.forwardRef(
+var TooltipArrow = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Tooltip$1.Arrow,
       {
         ref,
-        className: cnBase(tooltipArrowVariants(), className),
+        className: cn(tooltipArrowVariants(), className),
         ...props,
         children: /* @__PURE__ */ jsx(FloatingArrowSvg, { fillClassName: "fill-tooltip-bg" })
       }
@@ -1804,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,
@@ -1958,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: {
@@ -2018,7 +3805,7 @@ var cardVariants = tv({
     layout: "vertical"
   }
 });
-var Card = React11.forwardRef(
+var Card = React14.forwardRef(
   ({ className, layout, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2040,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",
@@ -2075,7 +3862,7 @@ var cardContentVariants = tv({
     }
   }
 });
-var CardContent = React11.forwardRef(
+var CardContent = React14.forwardRef(
   ({ className, justify, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2091,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",
@@ -2107,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,
@@ -2123,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",
     {
@@ -2137,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",
@@ -2153,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",
@@ -2166,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;
@@ -2189,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") {
@@ -2204,19 +3991,19 @@ var Navbar = React11.forwardRef(
       "nav",
       {
         ref: mergedRef,
-        className: cnBase("relative z-50 w-full bg-gray-50", className),
+        className: cn("relative z-50 w-full bg-gray-50", className),
         ...props,
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: cnBase(
+            className: cn(
               "flex w-full items-center justify-between",
               // Mobile
-              "px-spacing-component-navbar-padding-x-mobile py-spacing-component-navbar-padding-y-mobile",
+              "px-spatial-component-navbar-padding-x-mobile py-spatial-component-navbar-padding-y-mobile",
               // Tablet
-              "md:px-spacing-component-navbar-padding-x-tablet md:py-spacing-component-navbar-padding-y-tablet",
+              "md:px-spatial-component-navbar-padding-x-tablet md:py-spatial-component-navbar-padding-y-tablet",
               // Desktop
-              "xl:px-spacing-component-navbar-padding-x-desktop xl:py-spacing-component-navbar-padding-y-desktop"
+              "xl:px-spatial-component-navbar-padding-x-desktop xl:py-spatial-component-navbar-padding-y-desktop"
             ),
             children
           }
@@ -2226,21 +4013,21 @@ 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: cnBase("shrink-0", className), ...props });
+    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",
       {
         ref,
-        className: cnBase(
-          "hidden items-center gap-spacing-component-navbar-gap-links md:flex",
+        className: cn(
+          "hidden items-center gap-spatial-component-navbar-gap-links md:flex",
           className
         ),
         ...props
@@ -2249,14 +4036,14 @@ 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(
       Comp,
       {
         ref,
-        className: cnBase(
+        className: cn(
           "typography-body-small font-medium text-gray-900 transition-colors hover:text-gray-700",
           active && "text-gray-1100",
           className
@@ -2267,14 +4054,14 @@ var NavbarLink = React11.forwardRef(
   }
 );
 NavbarLink.displayName = "NavbarLink";
-var NavbarActions = React11.forwardRef(
+var NavbarActions = React14.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cnBase(
-          "flex items-center gap-spacing-component-navbar-gap-actions",
+        className: cn(
+          "flex items-center gap-spatial-component-navbar-gap-actions",
           className
         ),
         ...props
@@ -2283,13 +4070,13 @@ 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: cnBase(
+      className: cn(
         "fixed inset-0 z-50 bg-gray-50 md:hidden",
         // Position below navbar
         "pt-[calc(var(--navbar-height,60px)+1px)]",
@@ -2299,16 +4086,16 @@ 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",
           {
-            className: cnBase(
+            className: cn(
               "flex flex-col",
               // Padding matching navbar
-              "px-spacing-component-navbar-padding-x-mobile py-spacing-component-navbar-padding-y-tablet",
+              "px-spatial-component-navbar-padding-x-mobile py-spatial-component-navbar-padding-y-tablet",
               // Gap between links
-              "gap-spacing-component-navbar-gap-mobile-menu"
+              "gap-spatial-component-navbar-gap-mobile-menu"
             ),
             children
           }
@@ -2318,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);
   };
@@ -2347,15 +4134,15 @@ var NavbarMobileMenuButton = React11.forwardRef(({ className, asChild = false, c
       "aria-expanded": isMobileMenuOpen,
       "aria-controls": "navbar-mobile-menu",
       onClick: handleClick,
-      className: cnBase("transition-colors", className),
+      className: cn("transition-colors", className),
       ...props,
       children
     }
   );
 });
 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);
@@ -2365,9 +4152,9 @@ var NavbarMobileMenuLink = React11.forwardRef(({ className, asChild = false, act
     Comp,
     {
       ref,
-      className: cnBase(
+      className: cn(
         "typography-body-medium font-medium text-gray-900 transition-colors hover:text-gray-700",
-        "py-spacing-component-navbar-padding-y-mobile",
+        "py-spatial-component-navbar-padding-y-mobile",
         active && "text-gray-1100",
         className
       ),
@@ -2401,7 +4188,7 @@ var usGovBannerVariants = tv({
     variant: "default"
   }
 });
-var USGovBanner = React11.forwardRef(
+var USGovBanner = React14.forwardRef(
   ({
     className,
     variant,
@@ -2488,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",
@@ -2499,7 +4286,7 @@ var Banner = React11.forwardRef(
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cnBase(
+            className: cn(
               // Uses primitive spacing tokens
               "flex flex-col md:flex-row gap-20 items-start md:items-center md:justify-between",
               colorScheme === "dark" && "border-t border-gray-700 py-36"
@@ -2509,7 +4296,7 @@ var Banner = React11.forwardRef(
                 /* @__PURE__ */ jsx(
                   "h2",
                   {
-                    className: cnBase(
+                    className: cn(
                       "typography-subheading-small",
                       colorScheme === "dark" ? "text-gray-100" : "text-gray-900"
                     ),
@@ -2519,7 +4306,7 @@ var Banner = React11.forwardRef(
                 /* @__PURE__ */ jsx(
                   "p",
                   {
-                    className: cnBase(
+                    className: cn(
                       "typography-body-small",
                       colorScheme === "dark" ? "text-gray-500" : "text-gray-800"
                     ),
@@ -2555,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",
@@ -2567,7 +4354,7 @@ var CardGrid = React11.forwardRef(
           /* @__PURE__ */ jsx(
             "h2",
             {
-              className: cnBase(
+              className: cn(
                 "col-full",
                 "typography-h4 text-gray-900",
                 // Gap after title: mobile default, md: 56px, lg: 64px
@@ -2579,7 +4366,7 @@ var CardGrid = React11.forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cnBase(
+              className: cn(
                 "col-full",
                 // Mobile: single column
                 "grid grid-cols-1 gap-20",
@@ -2588,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))
             }
           )
         ]
@@ -2623,7 +4410,7 @@ var twoColumnSectionVariants = tv({
     layout: "asymmetric"
   }
 });
-var TwoColumnSection = React11.forwardRef(
+var TwoColumnSection = React14.forwardRef(
   ({
     className,
     colorScheme = "dark",
@@ -2646,7 +4433,7 @@ var TwoColumnSection = React11.forwardRef(
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cnBase(
+            className: cn(
               "border-t pt-36",
               colorScheme === "dark" ? "border-gray-700" : "border-gray-300",
               // Grid layout - uses primitive spacing tokens
@@ -2657,7 +4444,7 @@ var TwoColumnSection = React11.forwardRef(
               /* @__PURE__ */ jsx(
                 "h2",
                 {
-                  className: cnBase(
+                  className: cn(
                     "typography-subheading-medium",
                     colorScheme === "dark" ? "text-gray-100" : "text-gray-900",
                     // Column span based on layout
@@ -2669,7 +4456,7 @@ var TwoColumnSection = React11.forwardRef(
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cnBase(
+                  className: cn(
                     "flex flex-col gap-56",
                     layout !== "equal" && "lg:col-span-15"
                   ),
@@ -2677,7 +4464,7 @@ var TwoColumnSection = React11.forwardRef(
                     lead && /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: cnBase(
+                        className: cn(
                           "typography-body-large",
                           colorScheme === "dark" ? "text-gray-100" : "text-gray-900"
                         ),
@@ -2687,7 +4474,7 @@ var TwoColumnSection = React11.forwardRef(
                     /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: cnBase(
+                        className: cn(
                           "typography-body-medium flex flex-col gap-[1em]",
                           colorScheme === "dark" ? "text-gray-400" : "text-gray-600"
                         ),
@@ -2705,7 +4492,7 @@ var TwoColumnSection = React11.forwardRef(
   }
 );
 TwoColumnSection.displayName = "TwoColumnSection";
-var FaqSection = React11.forwardRef(
+var FaqSection = React14.forwardRef(
   ({
     className,
     colorScheme = "light",
@@ -2721,7 +4508,7 @@ var FaqSection = React11.forwardRef(
         colorScheme,
         layout: layout ?? void 0,
         title,
-        className: cnBase(
+        className: cn(
           // Override title typography to be larger
           "[&_h2]:typography-h4",
           // Accordion typography overrides
@@ -2795,7 +4582,7 @@ var heroContentVariants = tv({
     "lg:p-72"
   ]
 });
-var HeroHeader = React11.forwardRef(
+var HeroHeader = React14.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -2806,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",
     {
@@ -2820,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,
@@ -2881,13 +4668,13 @@ 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",
       {
         ref,
-        className: cnBase(
+        className: cn(
           "flex w-full max-w-[700px] flex-col overflow-hidden",
           // Responsive gap between sections
           "gap-56 md:gap-72 xl:gap-96",
@@ -2900,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";
@@ -2908,7 +4695,7 @@ var ProseSection = React11.forwardRef(
       "section",
       {
         ref,
-        className: cnBase(
+        className: cn(
           "flex w-full flex-col",
           // Responsive gap between heading and body
           "gap-24 md:gap-40",
@@ -2916,7 +4703,7 @@ var ProseSection = React11.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Heading, { className: cnBase(headingClass, "text-gray-900"), children: heading }),
+          /* @__PURE__ */ jsx(Heading, { className: cn(headingClass, "text-gray-900"), children: heading }),
           /* @__PURE__ */ jsx("div", { className: "typography-body-medium flex flex-col gap-[1em] text-gray-800 break-words", children })
         ]
       }
@@ -2969,7 +4756,7 @@ var quoteBlockVariants = tv({
     size: "default"
   }
 });
-var QuoteBlock = React11.forwardRef(
+var QuoteBlock = React14.forwardRef(
   ({
     className,
     quote,
@@ -3067,7 +4854,7 @@ var riverVariants = tv({
     variant: "A"
   }
 });
-var River = React11.forwardRef(
+var River = React14.forwardRef(
   ({
     className,
     variant,
@@ -3081,7 +4868,7 @@ var River = React11.forwardRef(
     const contentColumn = /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cnBase(
+        className: cn(
           "flex flex-col",
           // Full width on mobile/tablet, 9 cols on desktop
           "lg:col-span-9"
@@ -3094,7 +4881,7 @@ var River = React11.forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: cnBase("flex flex-row gap-16 mt-36", "[&>*]:flex-shrink-0"),
+              className: cn("flex flex-row gap-16 mt-36", "[&>*]:flex-shrink-0"),
               children: [
                 primaryAction,
                 secondaryAction
@@ -3107,7 +4894,7 @@ var River = React11.forwardRef(
     const mediaColumn = /* @__PURE__ */ jsx(
       "div",
       {
-        className: cnBase(
+        className: cn(
           // Full width on mobile/tablet, 15 cols on desktop
           "lg:col-span-15",
           // Ensure media fills the container
@@ -3125,7 +4912,7 @@ var River = React11.forwardRef(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: cnBase("grid grid-cols-1 gap-36", "lg:grid-cols-24 lg:gap-36"),
+            className: cn("grid grid-cols-1 gap-36", "lg:grid-cols-24 lg:gap-36"),
             children: variant === "B" ? /* @__PURE__ */ jsxs(Fragment, { children: [
               mediaColumn,
               contentColumn
@@ -3164,7 +4951,7 @@ var toutVariants = tv({
     align: "left"
   }
 });
-var Tout = React11.forwardRef(
+var Tout = React14.forwardRef(
   ({
     className,
     colorScheme = "light",
@@ -3204,7 +4991,7 @@ var Tout = React11.forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cnBase(
+              className: cn(
                 // Position above background
                 "relative z-10",
                 // Grid setup with responsive columns
@@ -3235,7 +5022,7 @@ var Tout = React11.forwardRef(
               children: /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cnBase(
+                  className: cn(
                     // Flex container for content
                     "flex flex-col",
                     isCentered ? "justify-start items-center" : "justify-end",
@@ -3250,7 +5037,7 @@ var Tout = React11.forwardRef(
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
-                        className: cnBase(
+                        className: cn(
                           "flex flex-col gap-16",
                           isCentered && "items-center text-center"
                         ),
@@ -3258,7 +5045,7 @@ var Tout = React11.forwardRef(
                           /* @__PURE__ */ jsx(
                             "h2",
                             {
-                              className: cnBase(
+                              className: cn(
                                 "typography-h4",
                                 isDark ? "text-gray-100" : "text-gray-900"
                               ),
@@ -3271,7 +5058,7 @@ var Tout = React11.forwardRef(
                           body && /* @__PURE__ */ jsx(
                             "p",
                             {
-                              className: cnBase(
+                              className: cn(
                                 "typography-body-small",
                                 isDark ? "text-gray-400" : "text-gray-800"
                               ),
@@ -3287,7 +5074,7 @@ var Tout = React11.forwardRef(
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
-                        className: cnBase(
+                        className: cn(
                           "flex flex-row",
                           isCentered ? "justify-center" : "items-start",
                           // Responsive gap between buttons
@@ -3312,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) {
@@ -3588,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"
+        }
       }
     }
   }
@@ -6119,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"
+            }
+          }
         }
       },
       /**
@@ -7282,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, 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