@primer/react-brand 0.68.0-rc.59bbed40 → 0.68.0-rc.5bd56cbb

package/esm/VideoPlayer/components/VolumeControl/VolumeControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeControl.js","names":[],"sources":["../../../../src/VideoPlayer/components/VolumeControl/VolumeControl.tsx"],"sourcesContent":["import React from 'react'\n\nimport {Range, type RangeProps} from '../'\nimport styles from './VolumeControl.module.css'\nimport {useVideo} from '../../hooks/useVideo'\n\nexport const VolumeControl = ({name = 'Volume', ...rest}: RangeProps) => {\n  const {volume, setVolume} = useVideo()\n\n  return (\n    <Range\n      className={styles.VolumeControl}\n      type=\"range\"\n      min=\"0\"\n      max={1}\n      step={0.001}\n      onInput={e => setVolume(e.currentTarget.valueAsNumber)}\n      value={volume}\n      a11yStep={0.1}\n      name={name}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,KAAiB,EAAC,UAAO,UAAU,GAAG,QAAsB;CACvE,IAAM,EAAC,WAAQ,iBAAa,GAAU;AAEtC,QACE,kBAAC,GAAD;EACE,WAAW,EAAO;EAClB,MAAK;EACL,KAAI;EACJ,KAAK;EACL,MAAM;EACN,UAAS,MAAK,EAAU,EAAE,cAAc,cAAc;EACtD,OAAO;EACP,UAAU;EACJ;EACN,GAAI;EACJ,CAAA"}

package/esm/VideoPlayer/components/VolumeControl/VolumeControl.module-DRSCPBbP.css

@@ -0,0 +1 @@
+.Primer_Brand__VolumeControl-module__VolumeControl___UcqPG{max-width:100px}

package/esm/VideoPlayer/components/VolumeControl/VolumeControl.module.js

@@ -0,0 +1,5 @@
+import './VolumeControl.module-DRSCPBbP.css';var e = { VolumeControl: "Primer_Brand__VolumeControl-module__VolumeControl___UcqPG" };
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=VolumeControl.module.js.map

package/esm/VideoPlayer/components/VolumeControl/VolumeControl.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeControl.module.js","names":[],"sources":["../../../../src/VideoPlayer/components/VolumeControl/VolumeControl.module.css"],"sourcesContent":[".VolumeControl {\n  max-width: 100px;\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export * from './VolumeControl';
+//# sourceMappingURL=index.d.ts.map

package/esm/VideoPlayer/components/VolumeControl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/VolumeControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

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

@@ -0,0 +1,14 @@
+export * from './Captions';
+export * from './CCButton';
+export * from './ControlsBar';
+export * from './FullScreenButton';
+export * from './IconControl';
+export * from './MuteButton';
+export * from './PauseIcon';
+export * from './PlayIcon';
+export * from './PlayPauseButton';
+export * from './Range';
+export * from './SeekControl';
+export * from './VideoTooltip';
+export * from './VolumeControl';
+//# sourceMappingURL=index.d.ts.map

package/esm/VideoPlayer/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VideoPlayer/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}

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

@@ -0,0 +1,5 @@
+export * from './useIsElementFullScreen';
+export * from './useVideo';
+export * from './useVideoKeypressHandlers';
+export * from './useVideoResizeObserver';
+//# sourceMappingURL=index.d.ts.map

package/esm/VideoPlayer/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VideoPlayer/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAA;AACxC,cAAc,YAAY,CAAA;AAC1B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,0BAA0B,CAAA"}

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

@@ -0,0 +1,3 @@
+import { type Dispatch, type SetStateAction } from 'react';
+export declare const useIsElementFullScreen: (element?: HTMLElement | null) => [boolean, Dispatch<SetStateAction<boolean>>];
+//# sourceMappingURL=useIsElementFullScreen.d.ts.map

package/esm/VideoPlayer/hooks/useIsElementFullScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsElementFullScreen.d.ts","sourceRoot":"","sources":["../../../src/VideoPlayer/hooks/useIsElementFullScreen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmC,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAG1F,eAAO,MAAM,sBAAsB,GAAI,UAAU,WAAW,GAAG,IAAI,KAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CA4ChH,CAAA"}

package/esm/VideoPlayer/hooks/useIsElementFullScreen.js

@@ -0,0 +1,23 @@
+import e from "../VideoPlayer.module.js";
+import { useCallback as t, useEffect as n, useState as r } from "react";
+//#region src/VideoPlayer/hooks/useIsElementFullScreen.ts
+var i = (i) => {
+	let [a, o] = r(!1);
+	return n(() => {
+		if (!i) return;
+		let t = () => {
+			let t = document.fullscreenElement === i, n = e["VideoPlayer__container--fullscreen"];
+			t ? i.classList.add(n) : i.classList.remove(n), o(t);
+		};
+		return document.addEventListener("fullscreenchange", t), () => {
+			document.removeEventListener("fullscreenchange", t);
+		};
+	}, [i]), [a, t((e) => {
+		let t = typeof e == "function" ? e(a) : e;
+		!i || a === t || (t ? i.requestFullscreen() : document.exitFullscreen());
+	}, [i, a])];
+};
+//#endregion
+export { i as useIsElementFullScreen };
+
+//# sourceMappingURL=useIsElementFullScreen.js.map

package/esm/VideoPlayer/hooks/useIsElementFullScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsElementFullScreen.js","names":[],"sources":["../../../src/VideoPlayer/hooks/useIsElementFullScreen.ts"],"sourcesContent":["import {useCallback, useEffect, useState, type Dispatch, type SetStateAction} from 'react'\nimport styles from '../VideoPlayer.module.css'\n\nexport const useIsElementFullScreen = (element?: HTMLElement | null): [boolean, Dispatch<SetStateAction<boolean>>] => {\n  const [isFullScreen, _setIsFullScreen] = useState(false)\n\n  useEffect(() => {\n    if (!element) return\n\n    const handleFullScreenChange = () => {\n      const isCurrentlyFullScreen = document.fullscreenElement === element\n\n      const fullscreenClass = styles['VideoPlayer__container--fullscreen']\n\n      if (isCurrentlyFullScreen) {\n        element.classList.add(fullscreenClass)\n      } else {\n        element.classList.remove(fullscreenClass)\n      }\n\n      _setIsFullScreen(isCurrentlyFullScreen)\n    }\n\n    document.addEventListener('fullscreenchange', handleFullScreenChange)\n\n    return () => {\n      document.removeEventListener('fullscreenchange', handleFullScreenChange)\n    }\n  }, [element])\n\n  const setIsFullScreen = useCallback(\n    (shouldFullScreenValOrFn: SetStateAction<boolean>) => {\n      const shouldFullScreen =\n        typeof shouldFullScreenValOrFn === 'function' ? shouldFullScreenValOrFn(isFullScreen) : shouldFullScreenValOrFn\n\n      if (!element || isFullScreen === shouldFullScreen) return\n\n      if (shouldFullScreen) {\n        element.requestFullscreen()\n      } else {\n        document.exitFullscreen()\n      }\n    },\n    [element, isFullScreen],\n  )\n\n  return [isFullScreen, setIsFullScreen]\n}\n"],"mappings":";;;AAGA,IAAa,KAA0B,MAA+E;CACpH,IAAM,CAAC,GAAc,KAAoB,EAAS,GAAM;AA0CxD,QAxCA,QAAgB;AACd,MAAI,CAAC,EAAS;EAEd,IAAM,UAA+B;GACnC,IAAM,IAAwB,SAAS,sBAAsB,GAEvD,IAAkB,EAAO;AAQ/B,GANI,IACF,EAAQ,UAAU,IAAI,EAAgB,GAEtC,EAAQ,UAAU,OAAO,EAAgB,EAG3C,EAAiB,EAAsB;;AAKzC,SAFA,SAAS,iBAAiB,oBAAoB,EAAuB,QAExD;AACX,YAAS,oBAAoB,oBAAoB,EAAuB;;IAEzE,CAAC,EAAQ,CAAC,EAkBN,CAAC,GAhBgB,GACrB,MAAqD;EACpD,IAAM,IACJ,OAAO,KAA4B,aAAa,EAAwB,EAAa,GAAG;AAEtF,GAAC,KAAW,MAAiB,MAE7B,IACF,EAAQ,mBAAmB,GAE3B,SAAS,gBAAgB;IAG7B,CAAC,GAAS,EAAa,CAGH,CAAgB"}

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

@@ -0,0 +1,37 @@
+import React, { type SetStateAction, type RefObject } from 'react';
+type VideoState = {
+    ref?: RefObject<HTMLVideoElement>;
+    isPlaying: boolean;
+    isMuted: boolean;
+    volume: number;
+    volumeBeforeMute: number | null;
+    ccEnabled: boolean;
+    duration: number;
+};
+export type UseVideoContext = VideoState & {
+    play: () => void;
+    pause: () => void;
+    togglePlaying: () => void;
+    mute: () => void;
+    unmute: () => void;
+    toggleMute: () => void;
+    setVolume: (volumeValOrFn: SetStateAction<number>) => void;
+    seekToPercent: (percent: number) => void;
+    seek: (secondsValOrFn: SetStateAction<number>) => void;
+    enableCC: () => void;
+    disableCC: () => void;
+    toggleCC: () => void;
+    enterFullScreen: () => void;
+    exitFullScreen: () => void;
+    toggleFullScreen: () => void;
+    setDuration: (duration: number) => void;
+    isFullScreen: boolean;
+    fullscreenRef: RefObject<HTMLDivElement | null>;
+};
+export declare const VideoContext: React.Context<UseVideoContext | null>;
+export declare const useVideo: () => UseVideoContext;
+export declare const VideoProvider: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLVideoElement>>;
+export {};
+//# sourceMappingURL=useVideo.d.ts.map

package/esm/VideoPlayer/hooks/useVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideo.d.ts","sourceRoot":"","sources":["../../../src/VideoPlayer/hooks/useVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAId,KAAK,UAAU,GAAG;IAChB,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACjC,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG;IACzC,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAC1D,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,IAAI,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACtD,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,EAAE,OAAO,CAAA;IACrB,aAAa,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAChD,CAAA;AAYD,eAAO,MAAM,YAAY,uCAA8C,CAAA;AA+CvE,eAAO,MAAM,QAAQ,uBAUpB,CAAA;AAID,eAAO,MAAM,aAAa;;0CAqGxB,CAAA"}

package/esm/VideoPlayer/hooks/useVideo.js

@@ -0,0 +1,147 @@
+import { useProvidedRefOrCreate as e } from "../../hooks/useRef.js";
+import { useIsElementFullScreen as t } from "./useIsElementFullScreen.js";
+import { createContext as n, forwardRef as r, useContext as i, useEffect as a, useReducer as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/VideoPlayer/hooks/useVideo.tsx
+var l = n(null), u = (e, t) => {
+	let n = e.ref?.current;
+	if (!n) return console.error("Video element is not available, ignoring action", t), e;
+	switch (t.type) {
+		case "play": return n.play(), {
+			...e,
+			isPlaying: !0
+		};
+		case "pause": return n.pause(), {
+			...e,
+			isPlaying: !1
+		};
+		case "mute": return n.volume = 0, {
+			...e,
+			isMuted: !0,
+			volumeBeforeMute: e.volume
+		};
+		case "unmute": {
+			let t = e.volumeBeforeMute ?? 1;
+			return n.volume = t, {
+				...e,
+				isMuted: !1,
+				volume: t
+			};
+		}
+		case "setVolume": return n.volume = t.payload, {
+			...e,
+			volume: t.payload
+		};
+		case "enableCC": return {
+			...e,
+			ccEnabled: !0
+		};
+		case "disableCC": return {
+			...e,
+			ccEnabled: !1
+		};
+		case "setDuration": return {
+			...e,
+			duration: t.payload
+		};
+		default: return e;
+	}
+}, d = () => {
+	let e = i(l);
+	if (!e) throw Error("useVideo must be used within a VideoProvider. Did you forget to wrap your component in a <VideoProvider>?");
+	return e;
+}, f = r(({ children: n }, r) => {
+	let i = e(r), d = s(null), [f, p] = o(u, {
+		isPlaying: !1,
+		isMuted: !1,
+		volume: 1,
+		volumeBeforeMute: null,
+		ccEnabled: !1,
+		ref: i,
+		duration: 0
+	}), [m, h] = t(d.current), g = {
+		...f,
+		isFullScreen: m,
+		fullscreenRef: d,
+		play: () => p({ type: "play" }),
+		pause: () => p({ type: "pause" }),
+		togglePlaying: () => p({ type: f.isPlaying ? "pause" : "play" }),
+		mute: () => p({ type: "mute" }),
+		unmute: () => p({ type: "unmute" }),
+		toggleMute: () => p({ type: f.isMuted ? "unmute" : "mute" }),
+		setVolume: (e) => {
+			let t = typeof e == "function" ? e(f.volume) : e;
+			p({
+				type: "setVolume",
+				payload: Math.max(0, Math.min(1, t))
+			});
+		},
+		enableCC: () => {
+			p({ type: "enableCC" });
+		},
+		disableCC: () => p({ type: "disableCC" }),
+		toggleCC: () => p({ type: f.ccEnabled ? "disableCC" : "enableCC" }),
+		enterFullScreen: () => h(!0),
+		exitFullScreen: () => h(!1),
+		toggleFullScreen: () => h((e) => !e),
+		setDuration: (e) => p({
+			type: "setDuration",
+			payload: e
+		}),
+		seekToPercent: (e) => {
+			let t = f.ref?.current;
+			t && (t.currentTime = e / 100 * t.duration);
+		},
+		seek: (e) => {
+			let t = f.ref?.current;
+			t && (t.currentTime = typeof e == "function" ? e(t.currentTime) : e);
+		}
+	};
+	return a(() => {
+		let e = f.ref?.current;
+		if (!e) return;
+		let t = {
+			play: () => {
+				p({ type: "play" });
+			},
+			playing: () => {
+				e.textTracks[0].mode = "hidden";
+			},
+			pause: () => {
+				p({ type: "pause" });
+			},
+			ended: () => {
+				e.currentTime = 0;
+			},
+			mute: () => {
+				p({ type: "mute" });
+			},
+			unmute: () => {
+				p({ type: "unmute" });
+			},
+			volumechange: () => {
+				p({
+					type: "setVolume",
+					payload: e.volume
+				});
+			},
+			loadedmetadata: () => {
+				p({
+					type: "setDuration",
+					payload: e.duration
+				});
+			}
+		};
+		for (let [n, r] of Object.entries(t)) e.addEventListener(n, r);
+		return () => {
+			for (let [n, r] of Object.entries(t)) e.removeEventListener(n, r);
+		};
+	}, [f.ref]), /* @__PURE__ */ c(l.Provider, {
+		value: g,
+		children: n
+	});
+});
+//#endregion
+export { l as VideoContext, f as VideoProvider, d as useVideo };
+
+//# sourceMappingURL=useVideo.js.map

package/esm/VideoPlayer/hooks/useVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideo.js","names":[],"sources":["../../../src/VideoPlayer/hooks/useVideo.tsx"],"sourcesContent":["import React, {\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n  type PropsWithChildren,\n  type SetStateAction,\n  type RefObject,\n} from 'react'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\nimport {useIsElementFullScreen} from './useIsElementFullScreen'\n\ntype VideoState = {\n  ref?: RefObject<HTMLVideoElement>\n  isPlaying: boolean\n  isMuted: boolean\n  volume: number\n  volumeBeforeMute: number | null\n  ccEnabled: boolean\n  duration: number\n}\n\nexport type UseVideoContext = VideoState & {\n  play: () => void\n  pause: () => void\n  togglePlaying: () => void\n  mute: () => void\n  unmute: () => void\n  toggleMute: () => void\n  setVolume: (volumeValOrFn: SetStateAction<number>) => void\n  seekToPercent: (percent: number) => void\n  seek: (secondsValOrFn: SetStateAction<number>) => void\n  enableCC: () => void\n  disableCC: () => void\n  toggleCC: () => void\n  enterFullScreen: () => void\n  exitFullScreen: () => void\n  toggleFullScreen: () => void\n  setDuration: (duration: number) => void\n  isFullScreen: boolean\n  fullscreenRef: RefObject<HTMLDivElement | null>\n}\n\ntype Action =\n  | {type: 'play'}\n  | {type: 'pause'}\n  | {type: 'mute'}\n  | {type: 'unmute'}\n  | {type: 'setVolume'; payload: number}\n  | {type: 'enableCC'}\n  | {type: 'disableCC'}\n  | {type: 'setDuration'; payload: number}\n\nexport const VideoContext = createContext<UseVideoContext | null>(null)\n\nconst videoReducer = (state: VideoState, action: Action): VideoState => {\n  const video = state.ref?.current\n\n  if (!video) {\n    // eslint-disable-next-line no-console\n    console.error('Video element is not available, ignoring action', action)\n    return state\n  }\n\n  switch (action.type) {\n    case 'play': {\n      video.play()\n      return {...state, isPlaying: true}\n    }\n    case 'pause': {\n      video.pause()\n      return {...state, isPlaying: false}\n    }\n    case 'mute': {\n      video.volume = 0\n      return {...state, isMuted: true, volumeBeforeMute: state.volume}\n    }\n    case 'unmute': {\n      const nextVolume = state.volumeBeforeMute ?? 1\n      video.volume = nextVolume\n      return {...state, isMuted: false, volume: nextVolume}\n    }\n    case 'setVolume': {\n      video.volume = action.payload\n      return {...state, volume: action.payload}\n    }\n    case 'enableCC': {\n      return {...state, ccEnabled: true}\n    }\n    case 'disableCC': {\n      return {...state, ccEnabled: false}\n    }\n    case 'setDuration': {\n      return {...state, duration: action.payload}\n    }\n    default:\n      return state\n  }\n}\n\nexport const useVideo = () => {\n  const context = useContext(VideoContext)\n\n  if (!context) {\n    throw new Error(\n      'useVideo must be used within a VideoProvider. Did you forget to wrap your component in a <VideoProvider>?',\n    )\n  }\n\n  return context\n}\n\ntype VideoProviderProps = PropsWithChildren\n\nexport const VideoProvider = forwardRef<HTMLVideoElement, VideoProviderProps>(({children}, forwardedRef) => {\n  const ref = useProvidedRefOrCreate(forwardedRef as RefObject<HTMLVideoElement>)\n  const fullscreenRef = useRef<HTMLDivElement>(null)\n\n  const [state, dispatch] = useReducer(videoReducer, {\n    isPlaying: false,\n    isMuted: false,\n    volume: 1,\n    volumeBeforeMute: null,\n    ccEnabled: false,\n    ref,\n    duration: 0,\n  })\n\n  const [isFullScreen, setIsFullScreen] = useIsElementFullScreen(fullscreenRef.current)\n\n  const value: UseVideoContext = {\n    ...state,\n    isFullScreen,\n    fullscreenRef,\n    play: () => dispatch({type: 'play'}),\n    pause: () => dispatch({type: 'pause'}),\n    togglePlaying: () => dispatch({type: state.isPlaying ? 'pause' : 'play'}),\n    mute: () => dispatch({type: 'mute'}),\n    unmute: () => dispatch({type: 'unmute'}),\n    toggleMute: () => dispatch({type: state.isMuted ? 'unmute' : 'mute'}),\n    setVolume: volumeValOrFn => {\n      const nextVolume = typeof volumeValOrFn === 'function' ? volumeValOrFn(state.volume) : volumeValOrFn\n      const clampedVolume = Math.max(0, Math.min(1, nextVolume))\n\n      dispatch({type: 'setVolume', payload: clampedVolume})\n    },\n    enableCC: () => {\n      dispatch({type: 'enableCC'})\n    },\n    disableCC: () => dispatch({type: 'disableCC'}),\n    toggleCC: () => dispatch({type: state.ccEnabled ? 'disableCC' : 'enableCC'}),\n    enterFullScreen: () => setIsFullScreen(true),\n    exitFullScreen: () => setIsFullScreen(false),\n    toggleFullScreen: () => setIsFullScreen(prev => !prev),\n    setDuration: (duration: number) => dispatch({type: 'setDuration', payload: duration}),\n\n    seekToPercent: percent => {\n      const videoRef = state.ref?.current\n      if (!videoRef) return\n\n      videoRef.currentTime = (percent / 100) * videoRef.duration\n    },\n    seek: secondsValOrFn => {\n      const videoRef = state.ref?.current\n      if (!videoRef) return\n\n      videoRef.currentTime =\n        typeof secondsValOrFn === 'function' ? secondsValOrFn(videoRef.currentTime) : secondsValOrFn\n    },\n  }\n\n  useEffect(() => {\n    const videoRef = state.ref?.current\n\n    if (!videoRef) return\n\n    const eventHandlers: Record<string, (event: Event) => void> = {\n      play: () => {\n        dispatch({type: 'play'})\n      },\n      playing: () => {\n        videoRef.textTracks[0].mode = 'hidden'\n      },\n      pause: () => {\n        dispatch({type: 'pause'})\n      },\n      ended: () => {\n        videoRef.currentTime = 0\n      },\n      mute: () => {\n        dispatch({type: 'mute'})\n      },\n      unmute: () => {\n        dispatch({type: 'unmute'})\n      },\n      volumechange: () => {\n        dispatch({type: 'setVolume', payload: videoRef.volume})\n      },\n      loadedmetadata: () => {\n        dispatch({type: 'setDuration', payload: videoRef.duration})\n      },\n    }\n\n    for (const [event, handler] of Object.entries(eventHandlers)) {\n      videoRef.addEventListener(event, handler)\n    }\n\n    return () => {\n      for (const [event, handler] of Object.entries(eventHandlers)) {\n        videoRef.removeEventListener(event, handler)\n      }\n    }\n  }, [state.ref])\n\n  return <VideoContext.Provider value={value}>{children}</VideoContext.Provider>\n})\n"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+import { type RefObject } from 'react';
+export type KeypressHandler = [KeyboardEvent['key'], (e: KeyboardEvent) => void];
+export declare const useVideoKeypressHandlers: (videoWrapperRef: RefObject<HTMLElement | null>) => void;
+//# sourceMappingURL=useVideoKeypressHandlers.d.ts.map

package/esm/VideoPlayer/hooks/useVideoKeypressHandlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideoKeypressHandlers.d.ts","sourceRoot":"","sources":["../../../src/VideoPlayer/hooks/useVideoKeypressHandlers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAA;AAGxD,MAAM,MAAM,eAAe,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC,CAAA;AAEhF,eAAO,MAAM,wBAAwB,GAAI,iBAAiB,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,SAqDtF,CAAA"}

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

@@ -0,0 +1,6 @@
+import { type RefObject } from 'react';
+export declare const useVideoResizeObserver: ({ videoWrapperRef, className, }: {
+    videoWrapperRef: RefObject<HTMLElement | null>;
+    className: string;
+}) => boolean;
+//# sourceMappingURL=useVideoResizeObserver.d.ts.map

package/esm/VideoPlayer/hooks/useVideoResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideoResizeObserver.d.ts","sourceRoot":"","sources":["../../../src/VideoPlayer/hooks/useVideoResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAA;AAGzD,eAAO,MAAM,sBAAsB,GAAI,iCAGpC;IACD,eAAe,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC9C,SAAS,EAAE,MAAM,CAAA;CAClB,YA0CA,CAAA"}

package/esm/VideoPlayer/hooks/useVideoResizeObserver.js

@@ -0,0 +1,25 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/VideoPlayer/hooks/useVideoResizeObserver.ts
+var n = ({ videoWrapperRef: n, className: r }) => {
+	let [i, a] = t(!1);
+	return e(() => {
+		let e = () => {
+			if (!n.current) return;
+			let e = n.current.getBoundingClientRect().width, t = !!(e && e < 544);
+			a(t), t ? n.current.classList.add(r) : n.current.classList.remove(r);
+		}, t = new ResizeObserver((t) => {
+			n.current && e();
+		});
+		e();
+		let i = n.current;
+		return i ? (t.observe(i), () => {
+			t.unobserve(i);
+		}) : () => {
+			t.disconnect();
+		};
+	}, [r, n]), i;
+};
+//#endregion
+export { n as useVideoResizeObserver };
+
+//# sourceMappingURL=useVideoResizeObserver.js.map

package/esm/VideoPlayer/hooks/useVideoResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideoResizeObserver.js","names":[],"sources":["../../../src/VideoPlayer/hooks/useVideoResizeObserver.ts"],"sourcesContent":["import {type RefObject, useEffect, useState} from 'react'\n\n// TODO Once Safari 18 is released we can drop this in favour of container queries\nexport const useVideoResizeObserver = ({\n  videoWrapperRef,\n  className,\n}: {\n  videoWrapperRef: RefObject<HTMLElement | null>\n  className: string\n}) => {\n  const [isSmall, setIsSmall] = useState(false)\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!videoWrapperRef.current) return\n\n      const breakpoint = videoWrapperRef.current.getBoundingClientRect().width\n\n      const isSmallVideo = Boolean(breakpoint && breakpoint < 544)\n      setIsSmall(isSmallVideo)\n\n      if (isSmallVideo) {\n        videoWrapperRef.current.classList.add(className)\n      } else {\n        videoWrapperRef.current.classList.remove(className)\n      }\n    }\n\n    const resizeObserver = new ResizeObserver(_ => {\n      if (videoWrapperRef.current) {\n        handleResize()\n      }\n    })\n\n    handleResize()\n\n    const currentRef = videoWrapperRef.current\n\n    if (!currentRef) {\n      return () => {\n        resizeObserver.disconnect()\n      }\n    }\n\n    resizeObserver.observe(currentRef)\n    return () => {\n      resizeObserver.unobserve(currentRef)\n    }\n  }, [className, videoWrapperRef])\n\n  return isSmall\n}\n"],"mappings":";;AAGA,IAAa,KAA0B,EACrC,oBACA,mBAII;CACJ,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM;AAwC7C,QAtCA,QAAgB;EACd,IAAM,UAAqB;AACzB,OAAI,CAAC,EAAgB,QAAS;GAE9B,IAAM,IAAa,EAAgB,QAAQ,uBAAuB,CAAC,OAE7D,IAAe,GAAQ,KAAc,IAAa;AAGxD,GAFA,EAAW,EAAa,EAEpB,IACF,EAAgB,QAAQ,UAAU,IAAI,EAAU,GAEhD,EAAgB,QAAQ,UAAU,OAAO,EAAU;KAIjD,IAAiB,IAAI,gBAAe,MAAK;AAC7C,GAAI,EAAgB,WAClB,GAAc;IAEhB;AAEF,KAAc;EAEd,IAAM,IAAa,EAAgB;AASnC,SAPK,KAML,EAAe,QAAQ,EAAW,QACrB;AACX,KAAe,UAAU,EAAW;aAPvB;AACX,KAAe,YAAY;;IAQ9B,CAAC,GAAW,EAAgB,CAAC,EAEzB"}

package/esm/VideoPlayer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './VideoPlayer';
+export { useVideo } from './hooks/useVideo';
+//# sourceMappingURL=index.d.ts.map

package/esm/VideoPlayer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/VideoPlayer/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAC,QAAQ,EAAC,MAAM,kBAAkB,CAAA"}

package/esm/animation/Animate/Animate.d.ts

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren, type JSX } from 'react';
+import type { BaseProps } from '../../component-helpers';
+export type BoxProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<T> & {
+    as?: T | 'div' | 'span' | 'section';
+} & (T extends 'span' ? BaseProps<HTMLSpanElement> : T extends 'section' ? BaseProps<HTMLElement> : T extends 'section' ? BaseProps<HTMLDivElement> : BaseProps<HTMLElement>);
+/**
+ * An animation-helper component that can be rendered as any HTML element.
+ * Use Animate to wrap any element and apply an animation to it.
+ */
+export declare function Animate({ animate, as, children, className, style, ...rest }: PropsWithChildren<BoxProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Animate.d.ts.map

package/esm/animation/Animate/Animate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Animate.d.ts","sourceRoot":"","sources":["../../../src/animation/Animate/Animate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;AAExE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAA;AAGtD,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,KAAK,IAAI,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG;IAC9F,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;CACpC,GAAG,CAAC,CAAC,SAAS,MAAM,GACf,SAAS,CAAC,eAAe,CAAC,GAC1B,CAAC,SAAS,SAAS,GACnB,SAAS,CAAC,WAAW,CAAC,GACtB,CAAC,SAAS,SAAS,GACnB,SAAS,CAAC,cAAc,CAAC,GACzB,SAAS,CAAC,WAAW,CAAC,CAAC,CAAA;AAE7B;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EAAC,OAAO,EAAE,EAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CAiB9G"}

package/esm/animation/Animate/Animate.js

@@ -0,0 +1,25 @@
+import e from "../../node_modules/clsx/dist/clsx.js";
+import { useAnimation as t } from "../useAnimation.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/animation/Animate/Animate.tsx
+function r({ animate: r, as: i = "div", children: a, className: o, style: s, ...c }) {
+	let { classes: l, styles: u } = t(r);
+	return /* @__PURE__ */ n([
+		"div",
+		"span",
+		"section"
+	].includes(i) ? i : "div", {
+		className: e(l, o),
+		style: {
+			...u,
+			...s
+		},
+		...c,
+		children: a
+	});
+}
+//#endregion
+export { r as Animate };
+
+//# sourceMappingURL=Animate.js.map

package/esm/animation/Animate/Animate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Animate.js","names":[],"sources":["../../../src/animation/Animate/Animate.tsx"],"sourcesContent":["import React, {HTMLAttributes, PropsWithChildren, type JSX} from 'react'\nimport {useAnimation} from '..'\nimport type {BaseProps} from '../../component-helpers'\nimport {clsx} from 'clsx'\n\nexport type BoxProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTMLAttributes<T> & {\n  as?: T | 'div' | 'span' | 'section'\n} & (T extends 'span'\n    ? BaseProps<HTMLSpanElement>\n    : T extends 'section'\n    ? BaseProps<HTMLElement>\n    : T extends 'section'\n    ? BaseProps<HTMLDivElement>\n    : BaseProps<HTMLElement>)\n\n/**\n * An animation-helper component that can be rendered as any HTML element.\n * Use Animate to wrap any element and apply an animation to it.\n */\nexport function Animate({animate, as = 'div', children, className, style, ...rest}: PropsWithChildren<BoxProps>) {\n  const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n  const validElements = ['div', 'span', 'section']\n  const Component = validElements.includes(as) ? as : 'div'\n\n  return (\n    <Component\n      className={clsx(animationClasses, className)}\n      style={{\n        ...animationInlineStyles,\n        ...style,\n      }}\n      {...(rest as HTMLAttributes<HTMLElement>)}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAQ,EAAC,YAAS,QAAK,OAAO,aAAU,cAAW,UAAO,GAAG,KAAoC;CAC/G,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ;AAIxF,QACE,kBAHgB;EADK;EAAO;EAAQ;EACpB,CAAc,SAAS,EAAG,GAAG,IAAK,OAGlD;EACE,WAAW,EAAK,GAAkB,EAAU;EAC5C,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAK;EAEJ;EACS,CAAA"}

package/esm/animation/Animate/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Animate';
+//# sourceMappingURL=index.d.ts.map

package/esm/animation/Animate/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/animation/Animate/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/esm/animation/Animation.module-Bz_IX_fh.css

@@ -0,0 +1 @@
+.Primer_Brand__Animation-module__Animation___cS_aI{transition:var(--brand-animation-transition-default)}.Primer_Brand__Animation-module__Animation--fade-in___BXhl8{opacity:0;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--fade-in___BXhl8.Primer_Brand__Animation-module__Animation--active___F4mYy,.Primer_Brand__Animation-module__Animation--fade-out___G3tT5{opacity:1}.Primer_Brand__Animation-module__Animation--fade-out___G3tT5.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:0;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--slide-in-up___P92b_{opacity:0;transform:translateY(var(--brand-animation-variant-slideInUp-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--slide-in-up___P92b_.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:1;transform:translateY(0)}.Primer_Brand__Animation-module__Animation--slide-in-down___aa_gj{opacity:0;transform:translateY(var(--brand-animation-variant-slideInDown-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--slide-in-down___aa_gj.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:1;transform:translateY(0)}.Primer_Brand__Animation-module__Animation--slide-in-left___1Duw1{opacity:0;transform:translateX(var(--brand-animation-variant-slideInLeft-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--slide-in-left___1Duw1.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:1;transform:translate(0)}.Primer_Brand__Animation-module__Animation--slide-in-right___APtUl{opacity:0;transform:translateX(var(--brand-animation-variant-slideInRight-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--slide-in-right___APtUl.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:1;transform:translate(0)}.Primer_Brand__Animation-module__Animation--scale-in___aqR9a{opacity:0;transform:scale(var(--brand-animation-variant-scaleIn-start));transition:opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default), transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--scale-in___aqR9a.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:1;transform:scale(--brand-animation-variant-scaleIn-end)}.Primer_Brand__Animation-module__Animation--scale-in-up___eHZu0{opacity:0;transform:scale(var(--brand-animation-variant-scaleInUp-start)) translateY(var(--brand-animation-variant-scaleInUp-distance));transition:opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default), transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--scale-in-up___eHZu0.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:1;transform:scale(var(--brand-animation-variant-scaleInUp-end)) translateY(0)}.Primer_Brand__Animation-module__Animation--scale-in-down___db1sm{opacity:0;transform:translateY(var(--brand-animation-variant-scaleInDown-distance)) scale(var(--brand-animation-variant-scaleInDown-start));transition:opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default), transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--scale-in-down___db1sm.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:1;transform:translateY(0) scale(var(--brand-animation-variant-scaleInDown-end))}.Primer_Brand__Animation-module__Animation--scale-in-right___x8n68{opacity:0;transform:scale(var(--brand-animation-variant-scaleInRight-start)) translateX(var(--brand-animation-variant-scaleInRight-distance));transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), transform var(--brand-animation-duration-default) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--scale-in-right___x8n68.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:1;transform:translateX(0) scale(var(--brand-animation-variant-scaleInRight-end))}.Primer_Brand__Animation-module__Animation--scale-in-left___DA3Xl{opacity:0;transform:scale(var(--brand-animation-variant-scaleInLeft-start)) translateX(var(--brand-animation-variant-scaleInLeft-distance));transition:opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default), transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default)}.Primer_Brand__Animation-module__Animation--scale-in-left___DA3Xl.Primer_Brand__Animation-module__Animation--active___F4mYy{opacity:1;transform:translateX(0) scale(var(--brand-animation-variant-scaleInLeft-end))}.Primer_Brand__Animation-module__Animation--fill-in-right___SunOM{transform-origin:0;transition:transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);transform:scaleX(0)}.Primer_Brand__Animation-module__Animation--fill-in-right___SunOM.Primer_Brand__Animation-module__Animation--active___F4mYy{transform:scaleX(1)}.Primer_Brand__Animation-module__Animation--fill-in-top___imtmv{transform-origin:top;transition:transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);transform:scaleY(0)}.Primer_Brand__Animation-module__Animation--fill-in-top___imtmv.Primer_Brand__Animation-module__Animation--active___F4mYy{transform:scaleY(1)}.Primer_Brand__Animation-module__Animation--reveal-in-up___8fCQo{clip-path:inset(-100% 0 100%);transition:transform var(--brand-animation-duration-default) var(--brand-animation-easing-default), clip-path var(--brand-animation-duration-default) var(--brand-animation-easing-default);transform:translateY(100%)}.Primer_Brand__Animation-module__Animation--reveal-in-up___8fCQo.Primer_Brand__Animation-module__Animation--active___F4mYy{clip-path:inset(0 0 -.2em);transform:translateY(0)}@media (prefers-reduced-motion:reduce){.Primer_Brand__Animation-module__Animation___cS_aI,.Primer_Brand__Animation-module__Animation___cS_aI:before,.Primer_Brand__Animation-module__Animation___cS_aI:after,.Primer_Brand__Animation-module__Animation___cS_aI *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/animation/Animation.module.js

@@ -0,0 +1,22 @@
+import './Animation.module-Bz_IX_fh.css';var e = {
+	Animation: "Primer_Brand__Animation-module__Animation___cS_aI",
+	"Animation--fade-in": "Primer_Brand__Animation-module__Animation--fade-in___BXhl8",
+	"Animation--active": "Primer_Brand__Animation-module__Animation--active___F4mYy",
+	"Animation--fade-out": "Primer_Brand__Animation-module__Animation--fade-out___G3tT5",
+	"Animation--slide-in-up": "Primer_Brand__Animation-module__Animation--slide-in-up___P92b_",
+	"Animation--slide-in-down": "Primer_Brand__Animation-module__Animation--slide-in-down___aa_gj",
+	"Animation--slide-in-left": "Primer_Brand__Animation-module__Animation--slide-in-left___1Duw1",
+	"Animation--slide-in-right": "Primer_Brand__Animation-module__Animation--slide-in-right___APtUl",
+	"Animation--scale-in": "Primer_Brand__Animation-module__Animation--scale-in___aqR9a",
+	"Animation--scale-in-up": "Primer_Brand__Animation-module__Animation--scale-in-up___eHZu0",
+	"Animation--scale-in-down": "Primer_Brand__Animation-module__Animation--scale-in-down___db1sm",
+	"Animation--scale-in-right": "Primer_Brand__Animation-module__Animation--scale-in-right___x8n68",
+	"Animation--scale-in-left": "Primer_Brand__Animation-module__Animation--scale-in-left___DA3Xl",
+	"Animation--fill-in-right": "Primer_Brand__Animation-module__Animation--fill-in-right___SunOM",
+	"Animation--fill-in-top": "Primer_Brand__Animation-module__Animation--fill-in-top___imtmv",
+	"Animation--reveal-in-up": "Primer_Brand__Animation-module__Animation--reveal-in-up___8fCQo"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Animation.module.js.map

package/esm/animation/Animation.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Animation.module.js","names":[],"sources":["../../src/animation/Animation.module.css"],"sourcesContent":[".Animation {\n  transition: var(--brand-animation-transition-default);\n}\n\n/**\n * Fade in\n */\n.Animation--fade-in {\n  opacity: 0;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Animation--fade-in.Animation--active {\n  opacity: 1;\n}\n\n/**\n * Fade out\n */\n.Animation--fade-out {\n  opacity: 1;\n}\n\n.Animation--fade-out.Animation--active {\n  opacity: 0;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n/**\n * Slide in up\n */\n.Animation--slide-in-up {\n  opacity: 0;\n  transform: translateY(var(--brand-animation-variant-slideInUp-distance));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Animation--slide-in-up.Animation--active {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n/**\n * Slide in down\n */\n.Animation--slide-in-down {\n  opacity: 0;\n  transform: translateY(var(--brand-animation-variant-slideInDown-distance));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Animation--slide-in-down.Animation--active {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n/**\n * Slide in left\n */\n.Animation--slide-in-left {\n  opacity: 0;\n  transform: translateX(var(--brand-animation-variant-slideInLeft-distance));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Animation--slide-in-left.Animation--active {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n/**\n * Slide in right\n */\n.Animation--slide-in-right {\n  opacity: 0;\n  transform: translateX(var(--brand-animation-variant-slideInRight-distance));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Animation--slide-in-right.Animation--active {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n/**\n * Scale in\n */\n.Animation--scale-in {\n  opacity: 0;\n  transform: scale(var(--brand-animation-variant-scaleIn-start));\n  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n}\n\n.Animation--scale-in.Animation--active {\n  opacity: 1;\n  transform: scale(--brand-animation-variant-scaleIn-end);\n}\n\n/**\n * Scale in up\n */\n.Animation--scale-in-up {\n  opacity: 0;\n  transform: scale(var(--brand-animation-variant-scaleInUp-start))\n    translateY(var(--brand-animation-variant-scaleInUp-distance));\n  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n}\n\n.Animation--scale-in-up.Animation--active {\n  opacity: 1;\n  transform: scale(var(--brand-animation-variant-scaleInUp-end)) translateY(0);\n}\n\n/**\n * Scale in down\n */\n.Animation--scale-in-down {\n  opacity: 0;\n  transform: translateY(var(--brand-animation-variant-scaleInDown-distance))\n    scale(var(--brand-animation-variant-scaleInDown-start));\n  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n}\n\n.Animation--scale-in-down.Animation--active {\n  opacity: 1;\n  transform: translateY(0) scale(var(--brand-animation-variant-scaleInDown-end));\n}\n\n/**\n * Scale in right\n */\n.Animation--scale-in-right {\n  opacity: 0;\n  transform: scale(var(--brand-animation-variant-scaleInRight-start))\n    translateX(var(--brand-animation-variant-scaleInRight-distance));\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Animation--scale-in-right.Animation--active {\n  opacity: 1;\n  transform: translateX(0) scale(var(--brand-animation-variant-scaleInRight-end));\n}\n\n/**\n * Scale in left\n */\n.Animation--scale-in-left {\n  opacity: 0;\n  transform: scale(var(--brand-animation-variant-scaleInLeft-start))\n    translateX(var(--brand-animation-variant-scaleInLeft-distance));\n  transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),\n    transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n}\n\n.Animation--scale-in-left.Animation--active {\n  opacity: 1;\n  transform: translateX(0) scale(var(--brand-animation-variant-scaleInLeft-end));\n}\n\n/**\n * Fill in right\n */\n.Animation--fill-in-right {\n  transform-origin: left;\n  transform: scaleX(0);\n  transition: transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Animation--fill-in-right.Animation--active {\n  transform: scaleX(1);\n}\n\n/**\n * Scale in top\n */\n.Animation--fill-in-top {\n  transform-origin: top;\n  transform: scaleY(0);\n  transition: transform var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n}\n\n.Animation--fill-in-top.Animation--active {\n  transform: scaleY(1);\n}\n\n/**\n * Wipe in up\n */\n.Animation--reveal-in-up {\n  transform: translateY(100%);\n  clip-path: inset(-100% 0 100% 0);\n  transition: transform var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    clip-path var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.Animation--reveal-in-up.Animation--active {\n  transform: translateY(0);\n  clip-path: inset(0 0 -0.2em 0); /* includs some offset to account for descenders  */\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .Animation,\n  .Animation::before,\n  .Animation::after,\n  .Animation * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/animation/AnimationProvider/AnimationProvider.d.ts

@@ -0,0 +1,47 @@
+import React, { PropsWithChildren } from 'react';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css';
+export declare const AnimationVariants: readonly ["fade-in", "fade-out", "slide-in-up", "slide-in-down", "slide-in-left", "slide-in-right", "scale-in-up", "scale-in-down", "scale-in", "fill-in-top", "scale-in-right", "scale-in-left", "fill-in-right", "reveal-in-up"];
+type Variant = (typeof AnimationVariants)[number];
+type VariantAdvanced = {
+    variant: Variant;
+    delay?: number;
+    duration?: number;
+    ease?: string;
+};
+export type AnimateProps = Variant | VariantAdvanced;
+type AnimationTrigger = 'click' | 'on-visible' | 'immediate';
+type IntersectionVisibilityeOptions = 'bottom-of-screen' | 'middle-of-screen' | 'about-to-leave' | number;
+type AnimationProviderProps = {
+    /**
+     * Prevents animations from running inside the provider
+     */
+    disableAnimations?: boolean;
+    /**
+     * Controls the trigger method for the animation. One of `click`, `on-visible`, or `immediate`.
+     */
+    animationTrigger?: AnimationTrigger;
+    /**
+     * Controls the intersection observer options for the animation.
+     * One of `bottom-of-screen`, `middle-of-screen`, `about-to-leave`, or a number between 0 and 1.
+     */
+    visibilityOptions?: IntersectionVisibilityeOptions;
+    /**
+     * Will persist the animation end-state after the animation has completed
+     */
+    runOnce?: boolean;
+    /**
+     * Will stagger the animations of the children using an incrementing delay
+     */
+    autoStaggerChildren?: boolean;
+    /**
+     * Stagger delay increment. Should be used alongside `autoStaggerChildren`.
+     */
+    staggerDelayIncrement?: number;
+};
+export declare const AnimationContext: React.Context<AnimationProviderProps>;
+export declare function AnimationProvider({ children, disableAnimations, animationTrigger, visibilityOptions, runOnce, autoStaggerChildren, staggerDelayIncrement, }: PropsWithChildren<AnimationProviderProps>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnimationProvider.d.ts.map

package/esm/animation/AnimationProvider/AnimationProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationProvider.d.ts","sourceRoot":"","sources":["../../../src/animation/AnimationProvider/AnimationProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,iBAAiB,EAAsB,MAAM,OAAO,CAAA;AAElF;;GAEG;AACH,OAAO,qFAAqF,CAAA;AAM5F,eAAO,MAAM,iBAAiB,oOAepB,CAAA;AAEV,KAAK,OAAO,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEjD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AACD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,KAAK,gBAAgB,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAAA;AAC5D,KAAK,8BAA8B,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,MAAM,CAAA;AAEzG,KAAK,sBAAsB,GAAG;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,8BAA8B,CAAA;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B,CAAA;AAED,eAAO,MAAM,gBAAgB,uCAA4C,CAAA;AAkCzE,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,iBAAyB,EACzB,gBAA+B,EAC/B,iBAAsC,EACtC,OAAe,EACf,mBAA0B,EAC1B,qBAA2B,GAC5B,EAAE,iBAAiB,CAAC,sBAAsB,CAAC,2CA2G3C"}