@brycks/core-front 0.11.0 → 0.12.1

package/dist/components/media/Video/Video.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Video.cjs","sources":["../../../../src/components/media/Video/Video.tsx"],"sourcesContent":["/**\r\n * Video Component\r\n *\r\n * Accessible video player with customizable controls, poster support,\r\n * and respect for user motion preferences.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useRef,\r\n  useState,\r\n  useCallback,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  type CSSProperties,\r\n  type VideoHTMLAttributes,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type VideoFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type VideoPreload = 'none' | 'metadata' | 'auto'\r\n\r\nexport interface VideoProps\r\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'autoPlay'> {\r\n  /** Video source URL */\r\n  src: string\r\n  /** Poster image URL shown before playback */\r\n  poster?: string\r\n  /** Aspect ratio (width/height) */\r\n  aspectRatio?: number | string\r\n  /** How the video should fit within its container */\r\n  fit?: VideoFit\r\n  /** Preload behavior */\r\n  preload?: VideoPreload\r\n  /**\r\n   * Autoplay behavior.\r\n   * - true: Autoplay (muted, respects reduced motion)\r\n   * - 'muted': Autoplay muted only\r\n   * - false: No autoplay\r\n   * @default false\r\n   */\r\n  autoPlay?: boolean | 'muted'\r\n  /** Loop video playback */\r\n  loop?: boolean\r\n  /** Show native controls */\r\n  controls?: boolean\r\n  /** Start muted */\r\n  muted?: boolean\r\n  /** Play inline on mobile (vs fullscreen) */\r\n  playsInline?: boolean\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Callback when video starts playing */\r\n  onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video pauses */\r\n  onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video ends */\r\n  onEnded?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video can play */\r\n  onCanPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback on error */\r\n  onError?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport interface VideoRef {\r\n  /** Play the video */\r\n  play: () => Promise<void>\r\n  /** Pause the video */\r\n  pause: () => void\r\n  /** Toggle play/pause */\r\n  toggle: () => void\r\n  /** Seek to time in seconds */\r\n  seek: (time: number) => void\r\n  /** Get current time in seconds */\r\n  getCurrentTime: () => number\r\n  /** Get duration in seconds */\r\n  getDuration: () => number\r\n  /** Check if video is playing */\r\n  isPlaying: () => boolean\r\n  /** Get the underlying video element */\r\n  getElement: () => HTMLVideoElement | null\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Video = forwardRef<VideoRef, VideoProps>(function Video(\r\n  {\r\n    src,\r\n    poster,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    preload = 'metadata',\r\n    autoPlay = false,\r\n    loop = false,\r\n    controls = true,\r\n    muted,\r\n    playsInline = true,\r\n    radius = 'none',\r\n    onPlay,\r\n    onPause,\r\n    onEnded,\r\n    onCanPlay,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const videoRef = useRef<HTMLVideoElement>(null)\r\n  const [isPlaying, setIsPlaying] = useState(false)\r\n  const [hasError, setHasError] = useState(false)\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  // Determine if autoplay should be enabled\r\n  const shouldAutoPlay = (() => {\r\n    // Never autoplay if user prefers reduced motion\r\n    if (prefersReducedMotion) return false\r\n    if (autoPlay === false) return false\r\n    return true\r\n  })()\r\n\r\n  // Autoplay must be muted to work in most browsers\r\n  const shouldMute = muted ?? (shouldAutoPlay || autoPlay === 'muted')\r\n\r\n  // Expose imperative handle\r\n  useImperativeHandle(\r\n    ref,\r\n    () => ({\r\n      play: async () => {\r\n        if (videoRef.current) {\r\n          await videoRef.current.play()\r\n        }\r\n      },\r\n      pause: () => {\r\n        videoRef.current?.pause()\r\n      },\r\n      toggle: () => {\r\n        if (videoRef.current) {\r\n          if (videoRef.current.paused) {\r\n            videoRef.current.play()\r\n          } else {\r\n            videoRef.current.pause()\r\n          }\r\n        }\r\n      },\r\n      seek: (time: number) => {\r\n        if (videoRef.current) {\r\n          videoRef.current.currentTime = time\r\n        }\r\n      },\r\n      getCurrentTime: () => videoRef.current?.currentTime ?? 0,\r\n      getDuration: () => videoRef.current?.duration ?? 0,\r\n      isPlaying: () => !videoRef.current?.paused,\r\n      getElement: () => videoRef.current,\r\n    }),\r\n    []\r\n  )\r\n\r\n  // Handle autoplay on mount\r\n  useEffect(() => {\r\n    if (shouldAutoPlay && videoRef.current) {\r\n      // Use a small delay to ensure video is ready\r\n      const attemptAutoplay = async () => {\r\n        try {\r\n          await videoRef.current?.play()\r\n        } catch {\r\n          // Autoplay was blocked - this is expected in many browsers\r\n          // The video will remain paused with poster visible\r\n        }\r\n      }\r\n      attemptAutoplay()\r\n    }\r\n  }, [shouldAutoPlay])\r\n\r\n  const handlePlay = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(true)\r\n      onPlay?.(event)\r\n    },\r\n    [onPlay]\r\n  )\r\n\r\n  const handlePause = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onPause?.(event)\r\n    },\r\n    [onPause]\r\n  )\r\n\r\n  const handleEnded = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onEnded?.(event)\r\n    },\r\n    [onEnded]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setHasError(true)\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n    ...style,\r\n  }\r\n\r\n  const videoStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: '100%',\r\n          height: 'auto',\r\n        }),\r\n  }\r\n\r\n  const errorOverlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    fontSize: 'var(--brycks-font-size-sm)',\r\n    borderRadius,\r\n  }\r\n\r\n  if (hasError) {\r\n    return (\r\n      <div\r\n        className={cx('brycks-video', 'brycks-video--error', className)}\r\n        style={containerStyle}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label=\"Video failed to load\"\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        <div style={errorOverlayStyle}>\r\n          <span>Unable to load video</span>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-video',\r\n        isPlaying && 'brycks-video--playing',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      <video\r\n        ref={videoRef}\r\n        src={src}\r\n        poster={poster}\r\n        preload={preload}\r\n        loop={loop}\r\n        controls={controls}\r\n        muted={shouldMute}\r\n        playsInline={playsInline}\r\n        onPlay={handlePlay}\r\n        onPause={handlePause}\r\n        onEnded={handleEnded}\r\n        onCanPlay={onCanPlay}\r\n        onError={handleError}\r\n        style={videoStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nVideo.displayName = 'Video'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Video","forwardRef","src","poster","aspectRatio","fit","preload","autoPlay","loop","controls","muted","playsInline","radius","onPlay","onPause","onEnded","onCanPlay","onError","className","style","testId","props","ref","videoRef","useRef","isPlaying","setIsPlaying","useState","hasError","setHasError","prefersReducedMotion","usePrefersReducedMotion","shouldAutoPlay","shouldMute","useImperativeHandle","time","useEffect","handlePlay","useCallback","event","handlePause","handleEnded","handleError","parsedRatio","borderRadius","containerStyle","videoStyle","errorOverlayStyle","jsxs","cx","jsx"],"mappings":"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"}
+{"version":3,"file":"Video.cjs","sources":["../../../../src/components/media/Video/Video.tsx"],"sourcesContent":["/**\r\n * Video Component\r\n *\r\n * Accessible video player with customizable controls, poster support,\r\n * and respect for user motion preferences.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useRef,\r\n  useState,\r\n  useCallback,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  type CSSProperties,\r\n  type VideoHTMLAttributes,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type VideoFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type VideoPreload = 'none' | 'metadata' | 'auto'\r\n\r\nexport interface VideoProps\r\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'autoPlay'> {\r\n  /** Video source URL */\r\n  src: string\r\n  /** Poster image URL shown before playback */\r\n  poster?: string\r\n  /** Aspect ratio (width/height) */\r\n  aspectRatio?: number | string\r\n  /** How the video should fit within its container */\r\n  fit?: VideoFit\r\n  /** Preload behavior */\r\n  preload?: VideoPreload\r\n  /**\r\n   * Autoplay behavior.\r\n   * - true: Autoplay (muted, respects reduced motion)\r\n   * - 'muted': Autoplay muted only\r\n   * - false: No autoplay\r\n   * @default false\r\n   */\r\n  autoPlay?: boolean | 'muted'\r\n  /** Loop video playback */\r\n  loop?: boolean\r\n  /** Show native controls */\r\n  controls?: boolean\r\n  /** Start muted */\r\n  muted?: boolean\r\n  /** Play inline on mobile (vs fullscreen) */\r\n  playsInline?: boolean\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Callback when video starts playing */\r\n  onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video pauses */\r\n  onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video ends */\r\n  onEnded?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video can play */\r\n  onCanPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback on error */\r\n  onError?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport interface VideoRef {\r\n  /** Play the video */\r\n  play: () => Promise<void>\r\n  /** Pause the video */\r\n  pause: () => void\r\n  /** Toggle play/pause */\r\n  toggle: () => void\r\n  /** Seek to time in seconds */\r\n  seek: (time: number) => void\r\n  /** Get current time in seconds */\r\n  getCurrentTime: () => number\r\n  /** Get duration in seconds */\r\n  getDuration: () => number\r\n  /** Check if video is playing */\r\n  isPlaying: () => boolean\r\n  /** Get the underlying video element */\r\n  getElement: () => HTMLVideoElement | null\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Video = forwardRef<VideoRef, VideoProps>(function Video(\r\n  {\r\n    src,\r\n    poster,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    preload = 'metadata',\r\n    autoPlay = false,\r\n    loop = false,\r\n    controls = true,\r\n    muted,\r\n    playsInline = true,\r\n    radius = 'none',\r\n    onPlay,\r\n    onPause,\r\n    onEnded,\r\n    onCanPlay,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const videoRef = useRef<HTMLVideoElement>(null)\r\n  const [isPlaying, setIsPlaying] = useState(false)\r\n  const [hasError, setHasError] = useState(false)\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  // Determine if autoplay should be enabled\r\n  const shouldAutoPlay = (() => {\r\n    // Never autoplay if user prefers reduced motion\r\n    if (prefersReducedMotion) return false\r\n    if (autoPlay === false) return false\r\n    return true\r\n  })()\r\n\r\n  // Autoplay must be muted to work in most browsers\r\n  const shouldMute = muted ?? (shouldAutoPlay || autoPlay === 'muted')\r\n\r\n  // Expose imperative handle\r\n  useImperativeHandle(\r\n    ref,\r\n    () => ({\r\n      play: async () => {\r\n        if (videoRef.current) {\r\n          await videoRef.current.play()\r\n        }\r\n      },\r\n      pause: () => {\r\n        videoRef.current?.pause()\r\n      },\r\n      toggle: () => {\r\n        if (videoRef.current) {\r\n          if (videoRef.current.paused) {\r\n            videoRef.current.play()\r\n          } else {\r\n            videoRef.current.pause()\r\n          }\r\n        }\r\n      },\r\n      seek: (time: number) => {\r\n        if (videoRef.current) {\r\n          videoRef.current.currentTime = time\r\n        }\r\n      },\r\n      getCurrentTime: () => videoRef.current?.currentTime ?? 0,\r\n      getDuration: () => videoRef.current?.duration ?? 0,\r\n      isPlaying: () => !videoRef.current?.paused,\r\n      getElement: () => videoRef.current,\r\n    }),\r\n    []\r\n  )\r\n\r\n  // Handle autoplay on mount\r\n  useEffect(() => {\r\n    if (shouldAutoPlay && videoRef.current) {\r\n      // Use a small delay to ensure video is ready\r\n      const attemptAutoplay = async () => {\r\n        try {\r\n          await videoRef.current?.play()\r\n        } catch {\r\n          // Autoplay was blocked - this is expected in many browsers\r\n          // The video will remain paused with poster visible\r\n        }\r\n      }\r\n      attemptAutoplay()\r\n    }\r\n  }, [shouldAutoPlay])\r\n\r\n  const handlePlay = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(true)\r\n      onPlay?.(event)\r\n    },\r\n    [onPlay]\r\n  )\r\n\r\n  const handlePause = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onPause?.(event)\r\n    },\r\n    [onPause]\r\n  )\r\n\r\n  const handleEnded = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onEnded?.(event)\r\n    },\r\n    [onEnded]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setHasError(true)\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n    ...style,\r\n  }\r\n\r\n  const videoStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: '100%',\r\n          height: 'auto',\r\n        }),\r\n  }\r\n\r\n  const errorOverlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    fontSize: 'var(--brycks-font-size-sm)',\r\n    borderRadius,\r\n  }\r\n\r\n  if (hasError) {\r\n    return (\r\n      <div\r\n        className={cx('brycks-video', 'brycks-video--error', className)}\r\n        style={containerStyle}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label=\"Video failed to load\"\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        <div style={errorOverlayStyle}>\r\n          <span>Unable to load video</span>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-video',\r\n        isPlaying && 'brycks-video--playing',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      <video\r\n        ref={videoRef}\r\n        src={src}\r\n        poster={poster}\r\n        preload={preload}\r\n        loop={loop}\r\n        controls={controls}\r\n        muted={shouldMute}\r\n        playsInline={playsInline}\r\n        onPlay={handlePlay}\r\n        onPause={handlePause}\r\n        onEnded={handleEnded}\r\n        onCanPlay={onCanPlay}\r\n        onError={handleError}\r\n        style={videoStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nVideo.displayName = 'Video'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Video","forwardRef","src","poster","aspectRatio","fit","preload","autoPlay","loop","controls","muted","playsInline","radius","onPlay","onPause","onEnded","onCanPlay","onError","className","style","testId","props","ref","videoRef","useRef","isPlaying","setIsPlaying","useState","hasError","setHasError","shouldAutoPlay","usePrefersReducedMotion","shouldMute","useImperativeHandle","time","useEffect","handlePlay","useCallback","event","handlePause","handleEnded","handleError","parsedRatio","borderRadius","containerStyle","videoStyle","errorOverlayStyle","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/media/Video/Video.js

@@ -1,8 +1,8 @@
-import { jsxs as J, jsx as n } from "react/jsx-runtime";
-import { forwardRef as K, useRef as L, useState as w, useImperativeHandle as Q, useEffect as W, useCallback as c } from "react";
-import { cx as N } from "../../../utils/styles.js";
-import { usePrefersReducedMotion as X } from "../../../hooks/useMediaQuery.js";
-const R = {
+import { jsxs as G, jsx as n } from "react/jsx-runtime";
+import { forwardRef as J, useRef as K, useState as R, useImperativeHandle as L, useEffect as Q, useCallback as c } from "react";
+import { cx as w } from "../../../utils/styles.js";
+import { usePrefersReducedMotion as W } from "../../../hooks/useMediaQuery.js";
+const N = {
   none: "0",
   sm: "var(--brycks-radius-sm)",
   md: "var(--brycks-radius-md)",
@@ -10,42 +10,42 @@ const R = {
   xl: "var(--brycks-radius-xl)",
   full: "var(--brycks-radius-full)"
 };
-function Y(r) {
+function X(r) {
   if (r === void 0) return;
   if (typeof r == "number") return r;
-  const o = r.split(/[:/]/);
-  if (o.length === 2) {
-    const l = parseFloat(o[0]), a = parseFloat(o[1]);
-    if (!isNaN(l) && !isNaN(a) && a !== 0)
-      return l / a;
+  const s = r.split(/[:/]/);
+  if (s.length === 2) {
+    const d = parseFloat(s[0]), a = parseFloat(s[1]);
+    if (!isNaN(d) && !isNaN(a) && a !== 0)
+      return d / a;
   }
   const i = parseFloat(r);
   return isNaN(i) ? void 0 : i;
 }
-const Z = K(function({
-  src: o,
+const Y = J(function({
+  src: s,
   poster: i,
-  aspectRatio: l,
+  aspectRatio: d,
   fit: a = "cover",
   preload: x = "metadata",
   autoPlay: p = !1,
   loop: E = !1,
   controls: P = !0,
   muted: C,
-  playsInline: S = !0,
-  radius: j = "none",
+  playsInline: M = !0,
+  radius: S = "none",
   onPlay: y,
   onPause: m,
   onEnded: v,
-  onCanPlay: A,
+  onCanPlay: j,
   onError: b,
   className: g,
-  style: F,
+  style: A,
   testId: h,
-  ...M
+  ...F
 }, V) {
-  const e = L(null), [T, u] = w(!1), [z, B] = w(!1), H = X(), f = !(H || p === !1), I = C ?? (f || p === "muted");
-  Q(
+  const e = K(null), [T, u] = R(!1), [z, B] = R(!1), f = !(W() || p === !1), H = C ?? (f || p === "muted");
+  L(
     V,
     () => ({
       play: async () => {
@@ -66,7 +66,7 @@ const Z = K(function({
       getElement: () => e.current
     }),
     []
-  ), W(() => {
+  ), Q(() => {
     f && e.current && (async () => {
       try {
         await e.current?.play();
@@ -74,41 +74,41 @@ const Z = K(function({
       }
     })();
   }, [f]);
-  const $ = c(
+  const I = c(
     (t) => {
       u(!0), y?.(t);
     },
     [y]
-  ), D = c(
+  ), $ = c(
     (t) => {
       u(!1), m?.(t);
     },
     [m]
-  ), O = c(
+  ), D = c(
     (t) => {
       u(!1), v?.(t);
     },
     [v]
-  ), U = c(
+  ), O = c(
     (t) => {
       B(!0), b?.(t);
     },
     [b]
-  ), s = Y(l), d = R[j] ?? R.none, k = {
+  ), o = X(d), l = N[S] ?? N.none, k = {
     position: "relative",
     overflow: "hidden",
-    borderRadius: d,
+    borderRadius: l,
     backgroundColor: "var(--brycks-background-muted)",
-    ...s ? {
+    ...o ? {
       width: "100%",
-      paddingBottom: `${1 / s * 100}%`
+      paddingBottom: `${1 / o * 100}%`
     } : {},
-    ...F
-  }, q = {
+    ...A
+  }, U = {
     display: "block",
     objectFit: a,
-    borderRadius: d,
-    ...s ? {
+    borderRadius: l,
+    ...o ? {
       position: "absolute",
       top: 0,
       left: 0,
@@ -118,7 +118,7 @@ const Z = K(function({
       width: "100%",
       height: "auto"
     }
-  }, G = {
+  }, q = {
     position: "absolute",
     top: 0,
     left: 0,
@@ -130,56 +130,56 @@ const Z = K(function({
     backgroundColor: "var(--brycks-background-muted)",
     color: "var(--brycks-foreground-muted)",
     fontSize: "var(--brycks-font-size-sm)",
-    borderRadius: d
+    borderRadius: l
   };
-  return z ? /* @__PURE__ */ J(
+  return z ? /* @__PURE__ */ G(
     "div",
     {
-      className: N("brycks-video", "brycks-video--error", g),
+      className: w("brycks-video", "brycks-video--error", g),
       style: k,
       "data-testid": h,
       role: "img",
       "aria-label": "Video failed to load",
       children: [
-        s && /* @__PURE__ */ n("div", { style: { paddingBottom: `${1 / s * 100}%` } }),
-        /* @__PURE__ */ n("div", { style: G, children: /* @__PURE__ */ n("span", { children: "Unable to load video" }) })
+        o && /* @__PURE__ */ n("div", { style: { paddingBottom: `${1 / o * 100}%` } }),
+        /* @__PURE__ */ n("div", { style: q, children: /* @__PURE__ */ n("span", { children: "Unable to load video" }) })
       ]
     }
   ) : /* @__PURE__ */ n(
     "div",
     {
-      className: N(
+      className: w(
         "brycks-video",
         T && "brycks-video--playing",
         g
       ),
-      style: s ? k : { position: "relative", borderRadius: d },
+      style: o ? k : { position: "relative", borderRadius: l },
       "data-testid": h,
       children: /* @__PURE__ */ n(
         "video",
         {
           ref: e,
-          src: o,
+          src: s,
           poster: i,
           preload: x,
           loop: E,
           controls: P,
-          muted: I,
-          playsInline: S,
-          onPlay: $,
-          onPause: D,
-          onEnded: O,
-          onCanPlay: A,
-          onError: U,
-          style: q,
-          ...M
+          muted: H,
+          playsInline: M,
+          onPlay: I,
+          onPause: $,
+          onEnded: D,
+          onCanPlay: j,
+          onError: O,
+          style: U,
+          ...F
         }
       )
     }
   );
 });
-Z.displayName = "Video";
+Y.displayName = "Video";
 export {
-  Z as Video
+  Y as Video
 };
 //# sourceMappingURL=Video.js.map

package/dist/components/media/Video/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sources":["../../../../src/components/media/Video/Video.tsx"],"sourcesContent":["/**\r\n * Video Component\r\n *\r\n * Accessible video player with customizable controls, poster support,\r\n * and respect for user motion preferences.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useRef,\r\n  useState,\r\n  useCallback,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  type CSSProperties,\r\n  type VideoHTMLAttributes,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type VideoFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type VideoPreload = 'none' | 'metadata' | 'auto'\r\n\r\nexport interface VideoProps\r\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'autoPlay'> {\r\n  /** Video source URL */\r\n  src: string\r\n  /** Poster image URL shown before playback */\r\n  poster?: string\r\n  /** Aspect ratio (width/height) */\r\n  aspectRatio?: number | string\r\n  /** How the video should fit within its container */\r\n  fit?: VideoFit\r\n  /** Preload behavior */\r\n  preload?: VideoPreload\r\n  /**\r\n   * Autoplay behavior.\r\n   * - true: Autoplay (muted, respects reduced motion)\r\n   * - 'muted': Autoplay muted only\r\n   * - false: No autoplay\r\n   * @default false\r\n   */\r\n  autoPlay?: boolean | 'muted'\r\n  /** Loop video playback */\r\n  loop?: boolean\r\n  /** Show native controls */\r\n  controls?: boolean\r\n  /** Start muted */\r\n  muted?: boolean\r\n  /** Play inline on mobile (vs fullscreen) */\r\n  playsInline?: boolean\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Callback when video starts playing */\r\n  onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video pauses */\r\n  onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video ends */\r\n  onEnded?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video can play */\r\n  onCanPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback on error */\r\n  onError?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport interface VideoRef {\r\n  /** Play the video */\r\n  play: () => Promise<void>\r\n  /** Pause the video */\r\n  pause: () => void\r\n  /** Toggle play/pause */\r\n  toggle: () => void\r\n  /** Seek to time in seconds */\r\n  seek: (time: number) => void\r\n  /** Get current time in seconds */\r\n  getCurrentTime: () => number\r\n  /** Get duration in seconds */\r\n  getDuration: () => number\r\n  /** Check if video is playing */\r\n  isPlaying: () => boolean\r\n  /** Get the underlying video element */\r\n  getElement: () => HTMLVideoElement | null\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Video = forwardRef<VideoRef, VideoProps>(function Video(\r\n  {\r\n    src,\r\n    poster,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    preload = 'metadata',\r\n    autoPlay = false,\r\n    loop = false,\r\n    controls = true,\r\n    muted,\r\n    playsInline = true,\r\n    radius = 'none',\r\n    onPlay,\r\n    onPause,\r\n    onEnded,\r\n    onCanPlay,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const videoRef = useRef<HTMLVideoElement>(null)\r\n  const [isPlaying, setIsPlaying] = useState(false)\r\n  const [hasError, setHasError] = useState(false)\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  // Determine if autoplay should be enabled\r\n  const shouldAutoPlay = (() => {\r\n    // Never autoplay if user prefers reduced motion\r\n    if (prefersReducedMotion) return false\r\n    if (autoPlay === false) return false\r\n    return true\r\n  })()\r\n\r\n  // Autoplay must be muted to work in most browsers\r\n  const shouldMute = muted ?? (shouldAutoPlay || autoPlay === 'muted')\r\n\r\n  // Expose imperative handle\r\n  useImperativeHandle(\r\n    ref,\r\n    () => ({\r\n      play: async () => {\r\n        if (videoRef.current) {\r\n          await videoRef.current.play()\r\n        }\r\n      },\r\n      pause: () => {\r\n        videoRef.current?.pause()\r\n      },\r\n      toggle: () => {\r\n        if (videoRef.current) {\r\n          if (videoRef.current.paused) {\r\n            videoRef.current.play()\r\n          } else {\r\n            videoRef.current.pause()\r\n          }\r\n        }\r\n      },\r\n      seek: (time: number) => {\r\n        if (videoRef.current) {\r\n          videoRef.current.currentTime = time\r\n        }\r\n      },\r\n      getCurrentTime: () => videoRef.current?.currentTime ?? 0,\r\n      getDuration: () => videoRef.current?.duration ?? 0,\r\n      isPlaying: () => !videoRef.current?.paused,\r\n      getElement: () => videoRef.current,\r\n    }),\r\n    []\r\n  )\r\n\r\n  // Handle autoplay on mount\r\n  useEffect(() => {\r\n    if (shouldAutoPlay && videoRef.current) {\r\n      // Use a small delay to ensure video is ready\r\n      const attemptAutoplay = async () => {\r\n        try {\r\n          await videoRef.current?.play()\r\n        } catch {\r\n          // Autoplay was blocked - this is expected in many browsers\r\n          // The video will remain paused with poster visible\r\n        }\r\n      }\r\n      attemptAutoplay()\r\n    }\r\n  }, [shouldAutoPlay])\r\n\r\n  const handlePlay = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(true)\r\n      onPlay?.(event)\r\n    },\r\n    [onPlay]\r\n  )\r\n\r\n  const handlePause = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onPause?.(event)\r\n    },\r\n    [onPause]\r\n  )\r\n\r\n  const handleEnded = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onEnded?.(event)\r\n    },\r\n    [onEnded]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setHasError(true)\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n    ...style,\r\n  }\r\n\r\n  const videoStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: '100%',\r\n          height: 'auto',\r\n        }),\r\n  }\r\n\r\n  const errorOverlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    fontSize: 'var(--brycks-font-size-sm)',\r\n    borderRadius,\r\n  }\r\n\r\n  if (hasError) {\r\n    return (\r\n      <div\r\n        className={cx('brycks-video', 'brycks-video--error', className)}\r\n        style={containerStyle}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label=\"Video failed to load\"\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        <div style={errorOverlayStyle}>\r\n          <span>Unable to load video</span>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-video',\r\n        isPlaying && 'brycks-video--playing',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      <video\r\n        ref={videoRef}\r\n        src={src}\r\n        poster={poster}\r\n        preload={preload}\r\n        loop={loop}\r\n        controls={controls}\r\n        muted={shouldMute}\r\n        playsInline={playsInline}\r\n        onPlay={handlePlay}\r\n        onPause={handlePause}\r\n        onEnded={handleEnded}\r\n        onCanPlay={onCanPlay}\r\n        onError={handleError}\r\n        style={videoStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nVideo.displayName = 'Video'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Video","forwardRef","src","poster","aspectRatio","fit","preload","autoPlay","loop","controls","muted","playsInline","radius","onPlay","onPause","onEnded","onCanPlay","onError","className","style","testId","props","ref","videoRef","useRef","isPlaying","setIsPlaying","useState","hasError","setHasError","prefersReducedMotion","usePrefersReducedMotion","shouldAutoPlay","shouldMute","useImperativeHandle","time","useEffect","handlePlay","useCallback","event","handlePause","handleEnded","handleError","parsedRatio","borderRadius","containerStyle","videoStyle","errorOverlayStyle","jsxs","cx","jsx"],"mappings":"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"}
+{"version":3,"file":"Video.js","sources":["../../../../src/components/media/Video/Video.tsx"],"sourcesContent":["/**\r\n * Video Component\r\n *\r\n * Accessible video player with customizable controls, poster support,\r\n * and respect for user motion preferences.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useRef,\r\n  useState,\r\n  useCallback,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  type CSSProperties,\r\n  type VideoHTMLAttributes,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type VideoFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type VideoPreload = 'none' | 'metadata' | 'auto'\r\n\r\nexport interface VideoProps\r\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'autoPlay'> {\r\n  /** Video source URL */\r\n  src: string\r\n  /** Poster image URL shown before playback */\r\n  poster?: string\r\n  /** Aspect ratio (width/height) */\r\n  aspectRatio?: number | string\r\n  /** How the video should fit within its container */\r\n  fit?: VideoFit\r\n  /** Preload behavior */\r\n  preload?: VideoPreload\r\n  /**\r\n   * Autoplay behavior.\r\n   * - true: Autoplay (muted, respects reduced motion)\r\n   * - 'muted': Autoplay muted only\r\n   * - false: No autoplay\r\n   * @default false\r\n   */\r\n  autoPlay?: boolean | 'muted'\r\n  /** Loop video playback */\r\n  loop?: boolean\r\n  /** Show native controls */\r\n  controls?: boolean\r\n  /** Start muted */\r\n  muted?: boolean\r\n  /** Play inline on mobile (vs fullscreen) */\r\n  playsInline?: boolean\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Callback when video starts playing */\r\n  onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video pauses */\r\n  onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video ends */\r\n  onEnded?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video can play */\r\n  onCanPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback on error */\r\n  onError?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport interface VideoRef {\r\n  /** Play the video */\r\n  play: () => Promise<void>\r\n  /** Pause the video */\r\n  pause: () => void\r\n  /** Toggle play/pause */\r\n  toggle: () => void\r\n  /** Seek to time in seconds */\r\n  seek: (time: number) => void\r\n  /** Get current time in seconds */\r\n  getCurrentTime: () => number\r\n  /** Get duration in seconds */\r\n  getDuration: () => number\r\n  /** Check if video is playing */\r\n  isPlaying: () => boolean\r\n  /** Get the underlying video element */\r\n  getElement: () => HTMLVideoElement | null\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Video = forwardRef<VideoRef, VideoProps>(function Video(\r\n  {\r\n    src,\r\n    poster,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    preload = 'metadata',\r\n    autoPlay = false,\r\n    loop = false,\r\n    controls = true,\r\n    muted,\r\n    playsInline = true,\r\n    radius = 'none',\r\n    onPlay,\r\n    onPause,\r\n    onEnded,\r\n    onCanPlay,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const videoRef = useRef<HTMLVideoElement>(null)\r\n  const [isPlaying, setIsPlaying] = useState(false)\r\n  const [hasError, setHasError] = useState(false)\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  // Determine if autoplay should be enabled\r\n  const shouldAutoPlay = (() => {\r\n    // Never autoplay if user prefers reduced motion\r\n    if (prefersReducedMotion) return false\r\n    if (autoPlay === false) return false\r\n    return true\r\n  })()\r\n\r\n  // Autoplay must be muted to work in most browsers\r\n  const shouldMute = muted ?? (shouldAutoPlay || autoPlay === 'muted')\r\n\r\n  // Expose imperative handle\r\n  useImperativeHandle(\r\n    ref,\r\n    () => ({\r\n      play: async () => {\r\n        if (videoRef.current) {\r\n          await videoRef.current.play()\r\n        }\r\n      },\r\n      pause: () => {\r\n        videoRef.current?.pause()\r\n      },\r\n      toggle: () => {\r\n        if (videoRef.current) {\r\n          if (videoRef.current.paused) {\r\n            videoRef.current.play()\r\n          } else {\r\n            videoRef.current.pause()\r\n          }\r\n        }\r\n      },\r\n      seek: (time: number) => {\r\n        if (videoRef.current) {\r\n          videoRef.current.currentTime = time\r\n        }\r\n      },\r\n      getCurrentTime: () => videoRef.current?.currentTime ?? 0,\r\n      getDuration: () => videoRef.current?.duration ?? 0,\r\n      isPlaying: () => !videoRef.current?.paused,\r\n      getElement: () => videoRef.current,\r\n    }),\r\n    []\r\n  )\r\n\r\n  // Handle autoplay on mount\r\n  useEffect(() => {\r\n    if (shouldAutoPlay && videoRef.current) {\r\n      // Use a small delay to ensure video is ready\r\n      const attemptAutoplay = async () => {\r\n        try {\r\n          await videoRef.current?.play()\r\n        } catch {\r\n          // Autoplay was blocked - this is expected in many browsers\r\n          // The video will remain paused with poster visible\r\n        }\r\n      }\r\n      attemptAutoplay()\r\n    }\r\n  }, [shouldAutoPlay])\r\n\r\n  const handlePlay = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(true)\r\n      onPlay?.(event)\r\n    },\r\n    [onPlay]\r\n  )\r\n\r\n  const handlePause = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onPause?.(event)\r\n    },\r\n    [onPause]\r\n  )\r\n\r\n  const handleEnded = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onEnded?.(event)\r\n    },\r\n    [onEnded]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setHasError(true)\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n    ...style,\r\n  }\r\n\r\n  const videoStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: '100%',\r\n          height: 'auto',\r\n        }),\r\n  }\r\n\r\n  const errorOverlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    fontSize: 'var(--brycks-font-size-sm)',\r\n    borderRadius,\r\n  }\r\n\r\n  if (hasError) {\r\n    return (\r\n      <div\r\n        className={cx('brycks-video', 'brycks-video--error', className)}\r\n        style={containerStyle}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label=\"Video failed to load\"\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        <div style={errorOverlayStyle}>\r\n          <span>Unable to load video</span>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-video',\r\n        isPlaying && 'brycks-video--playing',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      <video\r\n        ref={videoRef}\r\n        src={src}\r\n        poster={poster}\r\n        preload={preload}\r\n        loop={loop}\r\n        controls={controls}\r\n        muted={shouldMute}\r\n        playsInline={playsInline}\r\n        onPlay={handlePlay}\r\n        onPause={handlePause}\r\n        onEnded={handleEnded}\r\n        onCanPlay={onCanPlay}\r\n        onError={handleError}\r\n        style={videoStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nVideo.displayName = 'Video'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Video","forwardRef","src","poster","aspectRatio","fit","preload","autoPlay","loop","controls","muted","playsInline","radius","onPlay","onPause","onEnded","onCanPlay","onError","className","style","testId","props","ref","videoRef","useRef","isPlaying","setIsPlaying","useState","hasError","setHasError","shouldAutoPlay","usePrefersReducedMotion","shouldMute","useImperativeHandle","time","useEffect","handlePlay","useCallback","event","handlePause","handleEnded","handleError","parsedRatio","borderRadius","containerStyle","videoStyle","errorOverlayStyle","jsxs","cx","jsx"],"mappings":"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"}

package/dist/components/navigation/ContextMenu/ContextMenu.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),z=require("react-dom"),L=require("../../../utils/styles.cjs"),v=require("../../../design-system/primitives/sizing.cjs"),M=require("../../../design-system/tokens/spacing.cjs"),S=require("../../../design-system/tokens/motion.cjs"),j=require("../../../design-system/tokens/typography.cjs"),I=r.createContext(null);function R(){return o.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:o.jsx("path",{d:"M4.5 3l3 3-3 3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function P({items:i,position:h,onClose:u,level:p=0}){const[l,x]=r.useState(-1),[b,c]=r.useState(null),y=r.useRef(null),a=i.filter(e=>!e.separator&&!e.disabled),g=r.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),e.stopPropagation(),x(n=>{const s=n+1;return s>=a.length?0:s});break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),x(n=>{const s=n-1;return s<0?a.length-1:s});break;case"ArrowRight":{e.preventDefault(),e.stopPropagation();const n=a[l];if(n?.children){const s=i.indexOf(n);c(s)}break}case"ArrowLeft":p>0&&(e.preventDefault(),e.stopPropagation(),u());break;case"Enter":case" ":if(e.preventDefault(),e.stopPropagation(),l>=0){const n=a[l];if(n?.children){const s=i.indexOf(n);c(s)}else n?.onClick&&(n.onClick(),u())}break;case"Escape":e.preventDefault(),e.stopPropagation(),u();break}},[l,a,i,p,u]);r.useEffect(()=>{y.current?.focus()},[]);const w={position:"fixed",top:h.y,left:h.x,minWidth:180,maxWidth:280,backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",padding:M.spacing[1],zIndex:"var(--brycks-z-dropdown)",outline:"none"},C=(e,n)=>({display:"flex",alignItems:"center",gap:M.spacing[2],padding:`${v.componentPaddingY.sm}px ${v.componentPaddingX.sm}px`,fontSize:j.fontSizes.sm,fontWeight:400,color:n?"var(--brycks-foreground-disabled)":"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:n?"not-allowed":"pointer",transition:`background-color ${S.durations.fast}ms ${S.easings.easeOut}`}),k={display:"flex",alignItems:"center",justifyContent:"center",width:v.iconSizes.sm,height:v.iconSizes.sm,color:"inherit"},d={marginLeft:"auto",fontSize:j.fontSizes.xs,color:"var(--brycks-foreground-muted)"},m={height:1,margin:`${M.spacing[1]}px 0`,backgroundColor:"var(--brycks-border-default)"};let t=-1;return o.jsx("ul",{ref:y,role:"menu",tabIndex:0,style:w,onKeyDown:g,children:i.map((e,n)=>{if(e.separator)return o.jsx("li",{role:"separator",style:m},e.id);e.disabled||t++;const s=t,E=!e.disabled&&s===l,f=e.children&&e.children.length>0;return o.jsxs("li",{role:"menuitem","aria-disabled":e.disabled,"aria-haspopup":f?"menu":void 0,"aria-expanded":f&&b===n?"true":void 0,style:C(E,!!e.disabled),onMouseEnter:()=>{e.disabled||(x(s),c(f?n:null))},onMouseLeave:()=>{f||c(null)},onClick:()=>{e.disabled||(f?c(n):e.onClick&&(e.onClick(),u()))},children:[e.icon&&o.jsx("span",{style:k,children:e.icon}),o.jsx("span",{style:{flex:1},children:e.label}),e.shortcut&&o.jsx("span",{style:d,children:e.shortcut}),f&&o.jsx("span",{style:k,children:o.jsx(R,{})}),f&&b===n&&e.children&&o.jsx(P,{items:e.children,position:{x:176,y:0},onClose:()=>c(null),level:p+1})]},e.id)})})}const D=r.forwardRef(function({items:h,children:u,onOpen:p,onClose:l,disabled:x=!1,className:b,testId:c},y){const[a,g]=r.useState(!1),[w,C]=r.useState({x:0,y:0}),k=r.useCallback(t=>{if(x)return;t.preventDefault(),t.stopPropagation();const e=Math.min(t.clientX,window.innerWidth-200),n=Math.min(t.clientY,window.innerHeight-300);C({x:e,y:n}),g(!0),p?.()},[x,p]),d=r.useCallback(()=>{g(!1),l?.()},[l]);r.useEffect(()=>{if(!a)return;const t=()=>{d()};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[a,d]),r.useEffect(()=>{if(!a)return;const t=e=>{e.key==="Escape"&&d()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[a,d]);const m={display:"contents"};return o.jsx(I.Provider,{value:{closeMenu:d},children:o.jsxs("div",{ref:y,className:L.cx("brycks-contextmenu",b),style:m,"data-testid":c,onContextMenu:k,children:[u,a&&z.createPortal(o.jsx("div",{style:{position:"fixed",inset:0,zIndex:"var(--brycks-z-dropdown)"},onMouseDown:t=>t.stopPropagation(),children:o.jsx(P,{items:h,position:w,onClose:d})}),document.body)]})})});D.displayName="ContextMenu";function q(){const i=r.useContext(I);if(!i)throw new Error("useContextMenu must be used within a ContextMenu");return i}exports.ContextMenu=D;exports.useContextMenu=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),z=require("react-dom"),L=require("../../../utils/styles.cjs"),M=require("../../../design-system/tokens/spacing.cjs"),v=require("../../../design-system/primitives/sizing.cjs"),S=require("../../../design-system/tokens/typography.cjs"),j=require("../../../design-system/tokens/motion.cjs"),I=r.createContext(null);function R(){return o.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",children:o.jsx("path",{d:"M4.5 3l3 3-3 3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function P({items:i,position:h,onClose:u,level:p=0}){const[l,x]=r.useState(-1),[b,c]=r.useState(null),y=r.useRef(null),a=i.filter(e=>!e.separator&&!e.disabled),g=r.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),e.stopPropagation(),x(n=>{const s=n+1;return s>=a.length?0:s});break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),x(n=>{const s=n-1;return s<0?a.length-1:s});break;case"ArrowRight":{e.preventDefault(),e.stopPropagation();const n=a[l];if(n?.children){const s=i.indexOf(n);c(s)}break}case"ArrowLeft":p>0&&(e.preventDefault(),e.stopPropagation(),u());break;case"Enter":case" ":if(e.preventDefault(),e.stopPropagation(),l>=0){const n=a[l];if(n?.children){const s=i.indexOf(n);c(s)}else n?.onClick&&(n.onClick(),u())}break;case"Escape":e.preventDefault(),e.stopPropagation(),u();break}},[l,a,i,p,u]);r.useEffect(()=>{y.current?.focus()},[]);const w={position:"fixed",top:h.y,left:h.x,minWidth:180,maxWidth:280,backgroundColor:"var(--brycks-background-elevated)",border:"1px solid var(--brycks-border-default)",borderRadius:"var(--brycks-radius-lg)",boxShadow:"var(--brycks-shadow-lg)",padding:M.spacing[1],zIndex:"var(--brycks-z-dropdown)",outline:"none"},C=(e,n)=>({display:"flex",alignItems:"center",gap:M.spacing[2],padding:`${v.componentPaddingY.sm}px ${v.componentPaddingX.sm}px`,fontSize:S.fontSizes.sm,fontWeight:400,color:n?"var(--brycks-foreground-disabled)":"var(--brycks-foreground-default)",backgroundColor:e?"var(--brycks-background-muted)":"transparent",borderRadius:"var(--brycks-radius-md)",cursor:n?"not-allowed":"pointer",transition:`background-color ${j.durations.fast}ms ${j.easings.easeOut}`}),k={display:"flex",alignItems:"center",justifyContent:"center",width:v.iconSizes.sm,height:v.iconSizes.sm,color:"inherit"},d={marginLeft:"auto",fontSize:S.fontSizes.xs,color:"var(--brycks-foreground-muted)"},m={height:1,margin:`${M.spacing[1]}px 0`,backgroundColor:"var(--brycks-border-default)"};let t=-1;return o.jsx("ul",{ref:y,role:"menu",tabIndex:0,style:w,onKeyDown:g,children:i.map((e,n)=>{if(e.separator)return o.jsx("li",{role:"separator",style:m},e.id);e.disabled||t++;const s=t,E=!e.disabled&&s===l,f=e.children&&e.children.length>0;return o.jsxs("li",{role:"menuitem","aria-disabled":e.disabled,"aria-haspopup":f?"menu":void 0,"aria-expanded":f&&b===n?"true":void 0,style:C(E,!!e.disabled),onMouseEnter:()=>{e.disabled||(x(s),c(f?n:null))},onMouseLeave:()=>{f||c(null)},onClick:()=>{e.disabled||(f?c(n):e.onClick&&(e.onClick(),u()))},children:[e.icon&&o.jsx("span",{style:k,children:e.icon}),o.jsx("span",{style:{flex:1},children:e.label}),e.shortcut&&o.jsx("span",{style:d,children:e.shortcut}),f&&o.jsx("span",{style:k,children:o.jsx(R,{})}),f&&b===n&&e.children&&o.jsx(P,{items:e.children,position:{x:176,y:0},onClose:()=>c(null),level:p+1})]},e.id)})})}const D=r.forwardRef(function({items:h,children:u,onOpen:p,onClose:l,disabled:x=!1,className:b,testId:c},y){const[a,g]=r.useState(!1),[w,C]=r.useState({x:0,y:0}),k=r.useCallback(t=>{if(x)return;t.preventDefault(),t.stopPropagation();const e=Math.min(t.clientX,window.innerWidth-200),n=Math.min(t.clientY,window.innerHeight-300);C({x:e,y:n}),g(!0),p?.()},[x,p]),d=r.useCallback(()=>{g(!1),l?.()},[l]);r.useEffect(()=>{if(!a)return;const t=()=>{d()};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[a,d]),r.useEffect(()=>{if(!a)return;const t=e=>{e.key==="Escape"&&d()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[a,d]);const m={display:"contents"};return o.jsx(I.Provider,{value:{closeMenu:d},children:o.jsxs("div",{ref:y,className:L.cx("brycks-contextmenu",b),style:m,"data-testid":c,onContextMenu:k,children:[u,a&&z.createPortal(o.jsx("div",{style:{position:"fixed",inset:0,zIndex:"var(--brycks-z-dropdown)"},onMouseDown:t=>t.stopPropagation(),children:o.jsx(P,{items:h,position:w,onClose:d})}),document.body)]})})});D.displayName="ContextMenu";function q(){const i=r.useContext(I);if(!i)throw new Error("useContextMenu must be used within a ContextMenu");return i}exports.ContextMenu=D;exports.useContextMenu=q;
 //# sourceMappingURL=ContextMenu.cjs.map

package/dist/components/navigation/ContextMenu/ContextMenu.js

@@ -1,12 +1,12 @@
 import { jsx as o, jsxs as D } from "react/jsx-runtime";
-import { forwardRef as R, useState as k, useCallback as M, useEffect as I, createContext as A, useContext as W, useRef as $ } from "react";
+import { forwardRef as R, useState as k, useCallback as M, useEffect as I, useContext as A, createContext as W, useRef as $ } from "react";
 import { createPortal as j } from "react-dom";
 import { cx as O } from "../../../utils/styles.js";
-import { componentPaddingY as K, componentPaddingX as N, iconSizes as S } from "../../../design-system/primitives/sizing.js";
 import { spacing as C } from "../../../design-system/tokens/spacing.js";
-import { durations as X, easings as Y } from "../../../design-system/tokens/motion.js";
+import { iconSizes as S, componentPaddingY as K, componentPaddingX as N } from "../../../design-system/primitives/sizing.js";
 import { fontSizes as P } from "../../../design-system/tokens/typography.js";
-const E = A(null);
+import { durations as X, easings as Y } from "../../../design-system/tokens/motion.js";
+const E = W(null);
 function B() {
   return /* @__PURE__ */ o("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { d: "M4.5 3l3 3-3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
@@ -215,7 +215,7 @@ const H = R(function({
 });
 H.displayName = "ContextMenu";
 function Z() {
-  const a = W(E);
+  const a = A(E);
   if (!a)
     throw new Error("useContextMenu must be used within a ContextMenu");
   return a;

package/dist/components/navigation/Stepper/Stepper.js

@@ -1,12 +1,12 @@
-import { jsx as i, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as $, createContext as q, useContext as F } from "react";
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import { forwardRef as $, useContext as q, createContext as F } from "react";
 import { cx as I } from "../../../utils/styles.js";
 import { spacing as t } from "../../../design-system/tokens/spacing.js";
 import { fontSizes as s } from "../../../design-system/tokens/typography.js";
 import { durations as z, easings as C } from "../../../design-system/tokens/motion.js";
-const L = q(null);
+const L = F(null);
 function G() {
-  const u = F(L);
+  const u = q(L);
   if (!u)
     throw new Error("Step components must be used within a Stepper");
   return u;

package/dist/components/navigation/Tabs/Tabs.js

@@ -1,9 +1,9 @@
-import { jsx as u, jsxs as N } from "react/jsx-runtime";
-import { forwardRef as y, useState as C, useCallback as P, createContext as A, useContext as I } from "react";
+import { jsxs as N, jsx as u } from "react/jsx-runtime";
+import { forwardRef as y, useState as C, useCallback as P, useContext as A, createContext as I } from "react";
 import { cx as m } from "../../../utils/styles.js";
-const w = A(null);
+const w = I(null);
 function g() {
-  const i = I(w);
+  const i = A(w);
   if (!i)
     throw new Error("Tabs components must be used within a Tabs");
   return i;

package/dist/components/navigation.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./navigation/Tabs/Tabs.cjs"),n=require("./navigation/Accordion/Accordion.cjs"),o=require("./navigation/Dropdown/Dropdown.cjs"),r=require("./navigation/Menu/Menu.cjs"),c=require("./navigation/Pagination/Pagination.cjs"),t=require("./navigation/Breadcrumb/Breadcrumb.cjs"),i=require("./navigation/Stepper/Stepper.cjs"),u=require("./navigation/ContextMenu/ContextMenu.cjs"),d=require("./navigation/SegmentedControl/SegmentedControl.cjs");exports.Tab=e.Tab;exports.TabList=e.TabList;exports.TabPanel=e.TabPanel;exports.TabPanels=e.TabPanels;exports.Tabs=e.Tabs;exports.Accordion=n.Accordion;exports.AccordionContent=n.AccordionContent;exports.AccordionItem=n.AccordionItem;exports.AccordionTrigger=n.AccordionTrigger;exports.Dropdown=o.Dropdown;exports.DropdownDivider=o.DropdownDivider;exports.DropdownItem=o.DropdownItem;exports.DropdownLabel=o.DropdownLabel;exports.Menu=r.Menu;exports.MenuDivider=r.MenuDivider;exports.MenuGroup=r.MenuGroup;exports.MenuItem=r.MenuItem;exports.Pagination=c.Pagination;exports.Breadcrumb=t.Breadcrumb;exports.BreadcrumbItem=t.BreadcrumbItem;exports.Step=i.Step;exports.Stepper=i.Stepper;exports.ContextMenu=u.ContextMenu;exports.useContextMenu=u.useContextMenu;exports.SegmentedControl=d.SegmentedControl;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./navigation/Accordion/Accordion.cjs"),t=require("./navigation/Breadcrumb/Breadcrumb.cjs"),i=require("./navigation/ContextMenu/ContextMenu.cjs"),o=require("./navigation/Dropdown/Dropdown.cjs"),r=require("./navigation/Menu/Menu.cjs"),c=require("./navigation/Pagination/Pagination.cjs"),d=require("./navigation/SegmentedControl/SegmentedControl.cjs"),u=require("./navigation/Stepper/Stepper.cjs"),e=require("./navigation/Tabs/Tabs.cjs");exports.Accordion=n.Accordion;exports.AccordionContent=n.AccordionContent;exports.AccordionItem=n.AccordionItem;exports.AccordionTrigger=n.AccordionTrigger;exports.Breadcrumb=t.Breadcrumb;exports.BreadcrumbItem=t.BreadcrumbItem;exports.ContextMenu=i.ContextMenu;exports.useContextMenu=i.useContextMenu;exports.Dropdown=o.Dropdown;exports.DropdownDivider=o.DropdownDivider;exports.DropdownItem=o.DropdownItem;exports.DropdownLabel=o.DropdownLabel;exports.Menu=r.Menu;exports.MenuDivider=r.MenuDivider;exports.MenuGroup=r.MenuGroup;exports.MenuItem=r.MenuItem;exports.Pagination=c.Pagination;exports.SegmentedControl=d.SegmentedControl;exports.Step=u.Step;exports.Stepper=u.Stepper;exports.Tab=e.Tab;exports.TabList=e.TabList;exports.TabPanel=e.TabPanel;exports.TabPanels=e.TabPanels;exports.Tabs=e.Tabs;
 //# sourceMappingURL=navigation.cjs.map