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

package/esm/VideoPlayer/components/ControlsBar/ControlsBar.js

@@ -0,0 +1,13 @@
+import e from "../../../node_modules/clsx/dist/clsx.js";
+import t from "../../VideoPlayer.module.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/ControlsBar/ControlsBar.tsx
+var r = ({ className: r, ...i }) => /* @__PURE__ */ n("div", {
+	className: e(t.VideoPlayer__controlsBar, r),
+	...i
+});
+//#endregion
+export { r as ControlsBar };
+
+//# sourceMappingURL=ControlsBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsBar.js","names":[],"sources":["../../../../src/VideoPlayer/components/ControlsBar/ControlsBar.tsx"],"sourcesContent":["import React, {type HTMLAttributes} from 'react'\nimport {clsx} from 'clsx'\n\nimport styles from '../../VideoPlayer.module.css'\n\nexport type ControlsBarProps = HTMLAttributes<HTMLDivElement>\n\nexport const ControlsBar = ({className, ...rest}: ControlsBarProps) => (\n  <div className={clsx(styles.VideoPlayer__controlsBar, className)} {...rest} />\n)\n"],"mappings":";;;;;AAOA,IAAa,KAAe,EAAC,cAAW,GAAG,QACzC,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,0BAA0B,EAAU;CAAE,GAAI;CAAQ,CAAA"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from 'react';
+export declare const FullScreenButton: (props: HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FullScreenButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenButton.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/FullScreenButton/FullScreenButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAMhD,eAAO,MAAM,gBAAgB,GAAI,OAAO,cAAc,CAAC,iBAAiB,CAAC,4CAOxE,CAAA"}

package/esm/VideoPlayer/components/FullScreenButton/FullScreenButton.js

@@ -0,0 +1,19 @@
+import { ScreenFullIcon as e, ScreenNormalIcon as t } from "../../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useVideo as n } from "../../hooks/useVideo.js";
+import { IconControl as r } from "../IconControl/IconControl.js";
+import "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/FullScreenButton/FullScreenButton.tsx
+var a = (a) => {
+	let { isFullScreen: o, toggleFullScreen: s } = n();
+	return /* @__PURE__ */ i(r, {
+		onClick: s,
+		tooltip: o ? "Exit full screen" : "Full screen",
+		...a,
+		children: i(o ? t : e, { size: 24 })
+	});
+};
+//#endregion
+export { a as FullScreenButton };
+
+//# sourceMappingURL=FullScreenButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenButton.js","names":[],"sources":["../../../../src/VideoPlayer/components/FullScreenButton/FullScreenButton.tsx"],"sourcesContent":["import React, {type HTMLAttributes} from 'react'\nimport {ScreenFullIcon, ScreenNormalIcon} from '@primer/octicons-react'\n\nimport {IconControl} from '../'\nimport {useVideo} from '../../hooks'\n\nexport const FullScreenButton = (props: HTMLAttributes<HTMLButtonElement>) => {\n  const {isFullScreen, toggleFullScreen} = useVideo()\n  return (\n    <IconControl onClick={toggleFullScreen} tooltip={isFullScreen ? 'Exit full screen' : 'Full screen'} {...props}>\n      {isFullScreen ? <ScreenNormalIcon size={24} /> : <ScreenFullIcon size={24} />}\n    </IconControl>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,KAAoB,MAA6C;CAC5E,IAAM,EAAC,iBAAc,wBAAoB,GAAU;AACnD,QACE,kBAAC,GAAD;EAAa,SAAS;EAAkB,SAAS,IAAe,qBAAqB;EAAe,GAAI;YACtF,EAAf,IAAgB,IAAiC,GAAlC,EAAkB,MAAM,IAAM,CAA+B;EACjE,CAAA"}

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { type HTMLAttributes } from 'react';
+type IconControlProps = {
+    tooltip: string;
+} & HTMLAttributes<HTMLButtonElement>;
+export declare const IconControl: ({ tooltip, children, className, ...rest }: IconControlProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=IconControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconControl.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/IconControl/IconControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAMhD,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAA;CAChB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAErC,eAAO,MAAM,WAAW,GAAI,2CAAyC,gBAAgB,4CAKpF,CAAA"}

package/esm/VideoPlayer/components/IconControl/IconControl.js

@@ -0,0 +1,15 @@
+import e from "../../../node_modules/clsx/dist/clsx.js";
+import t from "../../VideoPlayer.module.js";
+import { VideoTooltip as n } from "../VideoTooltip/VideoTooltip.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/IconControl/IconControl.tsx
+var a = ({ tooltip: a, children: o, className: s, ...c }) => /* @__PURE__ */ i("button", {
+	className: e(t.VideoPlayer__iconControl, s),
+	...c,
+	children: [o, /* @__PURE__ */ r(n, { children: a })]
+});
+//#endregion
+export { a as IconControl };
+
+//# sourceMappingURL=IconControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconControl.js","names":[],"sources":["../../../../src/VideoPlayer/components/IconControl/IconControl.tsx"],"sourcesContent":["import React, {type HTMLAttributes} from 'react'\nimport {clsx} from 'clsx'\n\nimport {VideoTooltip} from '../'\nimport styles from '../../VideoPlayer.module.css'\n\ntype IconControlProps = {\n  tooltip: string\n} & HTMLAttributes<HTMLButtonElement>\n\nexport const IconControl = ({tooltip, children, className, ...rest}: IconControlProps) => (\n  <button className={clsx(styles.VideoPlayer__iconControl, className)} {...rest}>\n    {children}\n    <VideoTooltip>{tooltip}</VideoTooltip>\n  </button>\n)\n"],"mappings":";;;;;;AAUA,IAAa,KAAe,EAAC,YAAS,aAAU,cAAW,GAAG,QAC5D,kBAAC,UAAD;CAAQ,WAAW,EAAK,EAAO,0BAA0B,EAAU;CAAE,GAAI;WAAzE,CACG,GACD,kBAAC,GAAD,EAAA,UAAe,GAAuB,CAAA,CAC/B"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from 'react';
+export declare const MuteButton: (props: HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MuteButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MuteButton.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/MuteButton/MuteButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAMhD,eAAO,MAAM,UAAU,GAAI,OAAO,cAAc,CAAC,iBAAiB,CAAC,4CAOlE,CAAA"}

package/esm/VideoPlayer/components/MuteButton/MuteButton.js

@@ -0,0 +1,19 @@
+import { MuteIcon as e, UnmuteIcon as t } from "../../../node_modules/@primer/octicons-react/dist/index.esm.js";
+import { useVideo as n } from "../../hooks/useVideo.js";
+import { IconControl as r } from "../IconControl/IconControl.js";
+import "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/MuteButton/MuteButton.tsx
+var a = (a) => {
+	let { isMuted: o, toggleMute: s } = n();
+	return /* @__PURE__ */ i(r, {
+		tooltip: o ? "Unmute" : "Mute",
+		onClick: s,
+		...a,
+		children: i(o ? e : t, { size: 24 })
+	});
+};
+//#endregion
+export { a as MuteButton };
+
+//# sourceMappingURL=MuteButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MuteButton.js","names":[],"sources":["../../../../src/VideoPlayer/components/MuteButton/MuteButton.tsx"],"sourcesContent":["import React, {type HTMLAttributes} from 'react'\nimport {MuteIcon, UnmuteIcon} from '@primer/octicons-react'\n\nimport {IconControl} from '../'\nimport {useVideo} from '../../hooks/useVideo'\n\nexport const MuteButton = (props: HTMLAttributes<HTMLButtonElement>) => {\n  const {isMuted, toggleMute} = useVideo()\n  return (\n    <IconControl tooltip={isMuted ? 'Unmute' : 'Mute'} onClick={toggleMute} {...props}>\n      {isMuted ? <MuteIcon size={24} /> : <UnmuteIcon size={24} />}\n    </IconControl>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,KAAc,MAA6C;CACtE,IAAM,EAAC,YAAS,kBAAc,GAAU;AACxC,QACE,kBAAC,GAAD;EAAa,SAAS,IAAU,WAAW;EAAQ,SAAS;EAAY,GAAI;YAC/D,EAAV,IAAW,IAAyB,GAA1B,EAAU,MAAM,IAAM,CAA2B;EAChD,CAAA"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { type SVGAttributes } from 'react';
+export declare const PauseIcon: (props: SVGAttributes<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PauseIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PauseIcon.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/PauseIcon/PauseIcon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAE/C,eAAO,MAAM,SAAS,GAAI,OAAO,aAAa,CAAC,aAAa,CAAC,4CAK5D,CAAA"}

package/esm/VideoPlayer/components/PauseIcon/PauseIcon.js

@@ -0,0 +1,27 @@
+import "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/PauseIcon/PauseIcon.tsx
+var n = (n) => /* @__PURE__ */ t("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	...n,
+	children: [/* @__PURE__ */ e("rect", {
+		width: "7.2",
+		height: "24",
+		rx: "1",
+		fill: "currentColor"
+	}), /* @__PURE__ */ e("rect", {
+		x: "12.5",
+		width: "7.2",
+		height: "24",
+		rx: "1",
+		fill: "currentColor"
+	})]
+});
+//#endregion
+export { n as PauseIcon };
+
+//# sourceMappingURL=PauseIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PauseIcon.js","names":[],"sources":["../../../../src/VideoPlayer/components/PauseIcon/PauseIcon.tsx"],"sourcesContent":["import React, {type SVGAttributes} from 'react'\n\nexport const PauseIcon = (props: SVGAttributes<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <rect width=\"7.2\" height=\"24\" rx=\"1\" fill=\"currentColor\" />\n    <rect x=\"12.5\" width=\"7.2\" height=\"24\" rx=\"1\" fill=\"currentColor\" />\n  </svg>\n)\n"],"mappings":";;;AAEA,IAAa,KAAa,MACxB,kBAAC,OAAD;CAAK,OAAM;CAA6B,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,GAAI;WAAnG,CACE,kBAAC,QAAD;EAAM,OAAM;EAAM,QAAO;EAAK,IAAG;EAAI,MAAK;EAAiB,CAAA,EAC3D,kBAAC,QAAD;EAAM,GAAE;EAAO,OAAM;EAAM,QAAO;EAAK,IAAG;EAAI,MAAK;EAAiB,CAAA,CAChE"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { type SVGAttributes } from 'react';
+export declare const PlayIcon: (props: SVGAttributes<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PlayIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlayIcon.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/PlayIcon/PlayIcon.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAE/C,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,CAAC,aAAa,CAAC,4CAO3D,CAAA"}

package/esm/VideoPlayer/components/PlayIcon/PlayIcon.js

@@ -0,0 +1,19 @@
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/PlayIcon/PlayIcon.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	...t,
+	children: /* @__PURE__ */ e("path", {
+		d: "M1.56489 23.8112C0.884817 24.2389 1.07491e-06 23.7501 1.0398e-06 22.9467L8.28679e-08 1.05473C4.73246e-08 0.241596 0.904067 -0.245404 1.58307 0.201969L18.5829 11.4026C19.2032 11.8113 19.1935 12.7244 18.5647 13.1198L1.56489 23.8112Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+export { t as PlayIcon };
+
+//# sourceMappingURL=PlayIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlayIcon.js","names":[],"sources":["../../../../src/VideoPlayer/components/PlayIcon/PlayIcon.tsx"],"sourcesContent":["import React, {type SVGAttributes} from 'react'\n\nexport const PlayIcon = (props: SVGAttributes<SVGSVGElement>) => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" {...props}>\n    <path\n      d=\"M1.56489 23.8112C0.884817 24.2389 1.07491e-06 23.7501 1.0398e-06 22.9467L8.28679e-08 1.05473C4.73246e-08 0.241596 0.904067 -0.245404 1.58307 0.201969L18.5829 11.4026C19.2032 11.8113 19.1935 12.7244 18.5647 13.1198L1.56489 23.8112Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n)\n"],"mappings":";;;AAEA,IAAa,KAAY,MACvB,kBAAC,OAAD;CAAK,OAAM;CAA6B,OAAM;CAAK,QAAO;CAAK,SAAQ;CAAY,MAAK;CAAO,GAAI;WACjG,kBAAC,QAAD;EACE,GAAE;EACF,MAAK;EACL,CAAA;CACE,CAAA"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { type HTMLAttributes } from 'react';
+export declare const PlayPauseButton: (props: HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PlayPauseButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlayPauseButton.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/PlayPauseButton/PlayPauseButton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAKhD,eAAO,MAAM,eAAe,GAAI,OAAO,cAAc,CAAC,iBAAiB,CAAC,4CAQvE,CAAA"}

package/esm/VideoPlayer/components/PlayPauseButton/PlayPauseButton.js

@@ -0,0 +1,20 @@
+import { PlayIcon as e } from "../PlayIcon/PlayIcon.js";
+import { useVideo as t } from "../../hooks/useVideo.js";
+import { IconControl as n } from "../IconControl/IconControl.js";
+import { PauseIcon as r } from "../PauseIcon/PauseIcon.js";
+import "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/PlayPauseButton/PlayPauseButton.tsx
+var a = (a) => {
+	let { isPlaying: o, togglePlaying: s } = t();
+	return /* @__PURE__ */ i(n, {
+		onClick: s,
+		tooltip: o ? "Pause video" : "Play video",
+		...a,
+		children: i(o ? r : e, {})
+	});
+};
+//#endregion
+export { a as PlayPauseButton };
+
+//# sourceMappingURL=PlayPauseButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlayPauseButton.js","names":[],"sources":["../../../../src/VideoPlayer/components/PlayPauseButton/PlayPauseButton.tsx"],"sourcesContent":["import React, {type HTMLAttributes} from 'react'\n\nimport {IconControl, PlayIcon, PauseIcon} from '../'\nimport {useVideo} from '../../hooks/useVideo'\n\nexport const PlayPauseButton = (props: HTMLAttributes<HTMLButtonElement>) => {\n  const {isPlaying, togglePlaying} = useVideo()\n\n  return (\n    <IconControl onClick={togglePlaying} tooltip={isPlaying ? 'Pause video' : 'Play video'} {...props}>\n      {isPlaying ? <PauseIcon /> : <PlayIcon />}\n    </IconControl>\n  )\n}\n"],"mappings":";;;;;;;AAKA,IAAa,KAAmB,MAA6C;CAC3E,IAAM,EAAC,cAAW,qBAAiB,GAAU;AAE7C,QACE,kBAAC,GAAD;EAAa,SAAS;EAAe,SAAS,IAAY,gBAAgB;EAAc,GAAI;YAC7E,EAAZ,IAAa,IAAgB,GAAjB,EAAa,CAAe;EAC7B,CAAA"}

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

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

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export type RangeProps = {
+    tooltip?: boolean;
+    tooltipFormatter?: (value: number) => string;
+    max?: number;
+    a11yStep?: number;
+    name?: string;
+} & React.HTMLProps<HTMLInputElement>;
+export declare const Range: ({ className, onChange, value: startValue, max, onKeyDown, a11yStep, tooltip, tooltipFormatter, name, id, ...props }: RangeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Range.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/Range/Range.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAOvE,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;AAErC,eAAO,MAAM,KAAK,GAAI,qHAYnB,UAAU,4CAiFZ,CAAA"}

package/esm/VideoPlayer/components/Range/Range.js

@@ -0,0 +1,75 @@
+import e from "../../../node_modules/clsx/dist/clsx.js";
+import { useId as t } from "../../../hooks/useId.js";
+import n from "../../VideoPlayer.module.js";
+import { VideoTooltip as r } from "../VideoTooltip/VideoTooltip.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/Range/Range.tsx
+var l = ({ className: l, onChange: u = (e) => e, value: d, max: f, onKeyDown: p = (e) => e, a11yStep: m = 1, tooltip: h, tooltipFormatter: g = (e) => e.toString(), name: _, id: v, ...y }) => {
+	let [b, x] = o(d), [S, C] = o(0), [w, T] = o(0), E = t(), D = v || E, O = a(null);
+	i(() => {
+		x(d);
+	}, [d]), i(() => {
+		let e = O.current;
+		if (!f || !h || !e) return;
+		let t = (t) => {
+			if (t.target !== e) {
+				T(0), C(0);
+				return;
+			}
+			C(t.offsetX), T(t.offsetX / t.target.clientWidth * f);
+		};
+		return e.addEventListener("mousemove", t), () => {
+			e.removeEventListener("mousemove", t);
+		};
+	}, [
+		f,
+		h,
+		O
+	]);
+	let k = (e) => {
+		typeof b == "number" && (e.key === "ArrowUp" ? (e.stopPropagation(), x(b + m)) : e.key === "ArrowDown" && (e.stopPropagation(), x(b - m)));
+	};
+	return /* @__PURE__ */ c("div", {
+		className: e(n.VideoPlayer__range, l),
+		children: [
+			/* @__PURE__ */ s("progress", {
+				"aria-hidden": "true",
+				className: n.VideoPlayer__rangeProgress,
+				value: b,
+				max: f
+			}),
+			/* @__PURE__ */ c("label", {
+				htmlFor: D,
+				children: [/* @__PURE__ */ s("span", {
+					className: "visually-hidden",
+					children: _
+				}), /* @__PURE__ */ s("input", {
+					tabIndex: 0,
+					type: "range",
+					className: e(n.VideoPlayer__rangeInput, n.VideoPlayer__progressBar),
+					value: b,
+					onChange: (e) => {
+						x(e.currentTarget.valueAsNumber), u(e);
+					},
+					max: f,
+					onKeyDown: (e) => {
+						k(e), p(e);
+					},
+					id: D,
+					name: _,
+					ref: O,
+					...y
+				})]
+			}),
+			h && w ? /* @__PURE__ */ s(r, {
+				style: { left: S },
+				children: g(w)
+			}) : null
+		]
+	});
+};
+//#endregion
+export { l as Range };
+
+//# sourceMappingURL=Range.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Range.js","names":[],"sources":["../../../../src/VideoPlayer/components/Range/Range.tsx"],"sourcesContent":["import React, {useState, useEffect, DOMAttributes, useRef} from 'react'\nimport {clsx} from 'clsx'\nimport {useId} from '../../../hooks/useId'\n\nimport {VideoTooltip} from '../'\nimport styles from '../../VideoPlayer.module.css'\n\nexport type RangeProps = {\n  tooltip?: boolean\n  tooltipFormatter?: (value: number) => string\n  max?: number\n  a11yStep?: number\n  name?: string\n} & React.HTMLProps<HTMLInputElement>\n\nexport const Range = ({\n  className,\n  onChange = x => x,\n  value: startValue,\n  max,\n  onKeyDown = x => x,\n  a11yStep = 1,\n  tooltip,\n  tooltipFormatter = value => value.toString(),\n  name,\n  id,\n  ...props\n}: RangeProps) => {\n  const [value, setValue] = useState(startValue)\n  const [mousePos, setMousePos] = useState(0)\n  const [hoverValue, setHoverValue] = useState(0)\n  const generatedId = useId()\n  const inputId = id || generatedId\n  const inputRef = useRef<HTMLInputElement | null>(null)\n\n  useEffect(() => {\n    setValue(startValue)\n  }, [startValue])\n\n  useEffect(() => {\n    const input = inputRef.current\n\n    if (!max || !tooltip || !input) {\n      return\n    }\n\n    const handleMouseMove = event => {\n      if (event.target !== input) {\n        setHoverValue(0)\n        setMousePos(0)\n        return\n      }\n\n      setMousePos(event.offsetX)\n\n      setHoverValue((event.offsetX / event.target.clientWidth) * max)\n    }\n\n    input.addEventListener('mousemove', handleMouseMove)\n\n    return () => {\n      input.removeEventListener('mousemove', handleMouseMove)\n    }\n  }, [max, tooltip, inputRef])\n\n  const handleKeyDown: DOMAttributes<HTMLInputElement>['onKeyDown'] = event => {\n    if (typeof value !== 'number') return\n\n    if (event.key === 'ArrowUp') {\n      event.stopPropagation()\n      setValue(value + a11yStep)\n    } else if (event.key === 'ArrowDown') {\n      event.stopPropagation()\n      setValue(value - a11yStep)\n    }\n  }\n\n  return (\n    <div className={clsx(styles.VideoPlayer__range, className)}>\n      <progress aria-hidden=\"true\" className={styles.VideoPlayer__rangeProgress} value={value} max={max} />\n      <label htmlFor={inputId}>\n        <span className=\"visually-hidden\">{name}</span>\n        <input\n          tabIndex={0}\n          type=\"range\"\n          className={clsx(styles.VideoPlayer__rangeInput, styles.VideoPlayer__progressBar)}\n          value={value}\n          onChange={e => {\n            setValue(e.currentTarget.valueAsNumber)\n            onChange(e)\n          }}\n          max={max}\n          onKeyDown={e => {\n            handleKeyDown(e)\n            onKeyDown(e)\n          }}\n          id={inputId}\n          name={name}\n          ref={inputRef}\n          {...props}\n        />\n      </label>\n\n      {tooltip && hoverValue ? (\n        <VideoTooltip style={{left: mousePos}}>{tooltipFormatter(hoverValue)}</VideoTooltip>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAeA,IAAa,KAAS,EACpB,cACA,eAAW,MAAK,GAChB,OAAO,GACP,QACA,gBAAY,MAAK,GACjB,cAAW,GACX,YACA,uBAAmB,MAAS,EAAM,UAAU,EAC5C,SACA,OACA,GAAG,QACa;CAChB,IAAM,CAAC,GAAO,KAAY,EAAS,EAAW,EACxC,CAAC,GAAU,KAAe,EAAS,EAAE,EACrC,CAAC,GAAY,KAAiB,EAAS,EAAE,EACzC,IAAc,GAAO,EACrB,IAAU,KAAM,GAChB,IAAW,EAAgC,KAAK;AAMtD,CAJA,QAAgB;AACd,IAAS,EAAW;IACnB,CAAC,EAAW,CAAC,EAEhB,QAAgB;EACd,IAAM,IAAQ,EAAS;AAEvB,MAAI,CAAC,KAAO,CAAC,KAAW,CAAC,EACvB;EAGF,IAAM,KAAkB,MAAS;AAC/B,OAAI,EAAM,WAAW,GAAO;AAE1B,IADA,EAAc,EAAE,EAChB,EAAY,EAAE;AACd;;AAKF,GAFA,EAAY,EAAM,QAAQ,EAE1B,EAAe,EAAM,UAAU,EAAM,OAAO,cAAe,EAAI;;AAKjE,SAFA,EAAM,iBAAiB,aAAa,EAAgB,QAEvC;AACX,KAAM,oBAAoB,aAAa,EAAgB;;IAExD;EAAC;EAAK;EAAS;EAAS,CAAC;CAE5B,IAAM,KAA8D,MAAS;AACvE,SAAO,KAAU,aAEjB,EAAM,QAAQ,aAChB,EAAM,iBAAiB,EACvB,EAAS,IAAQ,EAAS,IACjB,EAAM,QAAQ,gBACvB,EAAM,iBAAiB,EACvB,EAAS,IAAQ,EAAS;;AAI9B,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,oBAAoB,EAAU;YAA1D;GACE,kBAAC,YAAD;IAAU,eAAY;IAAO,WAAW,EAAO;IAAmC;IAAY;IAAO,CAAA;GACrG,kBAAC,SAAD;IAAO,SAAS;cAAhB,CACE,kBAAC,QAAD;KAAM,WAAU;eAAmB;KAAY,CAAA,EAC/C,kBAAC,SAAD;KACE,UAAU;KACV,MAAK;KACL,WAAW,EAAK,EAAO,yBAAyB,EAAO,yBAAyB;KACzE;KACP,WAAU,MAAK;AAEb,MADA,EAAS,EAAE,cAAc,cAAc,EACvC,EAAS,EAAE;;KAER;KACL,YAAW,MAAK;AAEd,MADA,EAAc,EAAE,EAChB,EAAU,EAAE;;KAEd,IAAI;KACE;KACN,KAAK;KACL,GAAI;KACJ,CAAA,CACI;;GAEP,KAAW,IACV,kBAAC,GAAD;IAAc,OAAO,EAAC,MAAM,GAAS;cAAG,EAAiB,EAAW;IAAgB,CAAA,GAClF;GACA"}

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { type HTMLAttributes } from 'react';
+type SeekControlProps = HTMLAttributes<HTMLDivElement>;
+export declare const SeekControl: ({ className, ...rest }: SeekControlProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SeekControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SeekControl.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/SeekControl/SeekControl.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAmC,KAAK,cAAc,EAAiB,MAAM,OAAO,CAAA;AA+BlG,KAAK,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAEtD,eAAO,MAAM,WAAW,GAAI,wBAAsB,gBAAgB,4CAsDjE,CAAA"}

package/esm/VideoPlayer/components/SeekControl/SeekControl.js

@@ -0,0 +1,59 @@
+import e from "../../../node_modules/clsx/dist/clsx.js";
+import { Text as t } from "../../../Text/Text.js";
+import n from "../../VideoPlayer.module.js";
+import { useVideo as r } from "../../hooks/useVideo.js";
+import { Range as i } from "../Range/Range.js";
+import { useCallback as a, useEffect as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/SeekControl/SeekControl.tsx
+var u = (e) => e.toString().padStart(2, "0"), d = (e, t) => {
+	if (isNaN(e) || e < 0) return "00:00";
+	t && e > t && (e = t);
+	let n = `${u(Math.floor(e % 3600 / 60))}:${u(Math.floor(e % 60))}`;
+	return e > 3600 && (n = `${u(Math.floor(e / 3600))}:${n}`), n;
+}, f = ({ className: u, ...f }) => {
+	let { ref: p, duration: m } = r(), [h, g] = s(0), _ = a((e) => {
+		let t = e.currentTarget.valueAsNumber;
+		p?.current && (p.current.currentTime = t);
+	}, [p]);
+	return o(() => {
+		let e = p?.current;
+		if (!e) return;
+		let t = () => {
+			g(e.currentTime);
+		};
+		return e.addEventListener("timeupdate", t), () => {
+			e.removeEventListener("timeupdate", t);
+		};
+	}, [p]), /* @__PURE__ */ l("div", {
+		className: e(n.VideoPlayer__seek, u),
+		...f,
+		children: [/* @__PURE__ */ c(i, {
+			type: "range",
+			min: "0",
+			max: m,
+			step: 1e-4,
+			onInput: _,
+			value: h,
+			className: n.VideoPlayer__progressBar,
+			tooltip: !0,
+			tooltipFormatter: (e) => d(e, m),
+			name: "Seek"
+		}), /* @__PURE__ */ c("div", {
+			className: n.VideoPlayer__progressTime,
+			children: /* @__PURE__ */ l(t, {
+				as: "p",
+				className: e(n.VideoPlayer__controlTextColor, n.VideoPlayer__seekTime),
+				font: "monospace",
+				children: [d(h, m), /* @__PURE__ */ l("span", {
+					className: n.VideoPlayer__totalTime,
+					children: [" / ", d(m)]
+				})]
+			})
+		})]
+	});
+};
+//#endregion
+export { f as SeekControl };
+
+//# sourceMappingURL=SeekControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SeekControl.js","names":[],"sources":["../../../../src/VideoPlayer/components/SeekControl/SeekControl.tsx"],"sourcesContent":["import React, {useState, useEffect, useCallback, type HTMLAttributes, type FormEvent} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Range} from '../'\nimport styles from '../../VideoPlayer.module.css'\nimport {Text} from '../../../Text'\nimport {useVideo} from '../../hooks/useVideo'\n\nconst padTime = (time: number) => time.toString().padStart(2, '0')\nconst formatTime = (time: number, duration?: number) => {\n  if (isNaN(time) || time < 0) {\n    return '00:00'\n  }\n\n  if (duration && time > duration) {\n    time = duration\n  }\n\n  const minutes = padTime(Math.floor((time % 3600) / 60))\n  const seconds = padTime(Math.floor(time % 60))\n\n  let formattedTime = `${minutes}:${seconds}`\n\n  if (time > 3600) {\n    const hours = padTime(Math.floor(time / 3600))\n    formattedTime = `${hours}:${formattedTime}`\n  }\n\n  return formattedTime\n}\n\ntype SeekControlProps = HTMLAttributes<HTMLDivElement>\n\nexport const SeekControl = ({className, ...rest}: SeekControlProps) => {\n  const {ref, duration} = useVideo()\n  const [currentTime, setCurrentTime] = useState(0)\n  const seek = useCallback(\n    (e: FormEvent<HTMLInputElement>) => {\n      const time = e.currentTarget.valueAsNumber\n      if (ref?.current) {\n        ref.current.currentTime = time\n      }\n    },\n    [ref],\n  )\n\n  useEffect(() => {\n    const videoRef = ref?.current\n    if (!videoRef) return\n\n    const onTimeUpdate = () => {\n      setCurrentTime(videoRef.currentTime)\n    }\n\n    videoRef.addEventListener('timeupdate', onTimeUpdate)\n\n    return () => {\n      videoRef.removeEventListener('timeupdate', onTimeUpdate)\n    }\n  }, [ref])\n\n  return (\n    <div className={clsx(styles.VideoPlayer__seek, className)} {...rest}>\n      <Range\n        type=\"range\"\n        min=\"0\"\n        max={duration}\n        step={0.0001}\n        onInput={seek}\n        value={currentTime}\n        className={styles.VideoPlayer__progressBar}\n        tooltip\n        tooltipFormatter={time => formatTime(time, duration)}\n        name=\"Seek\"\n      />\n      <div className={styles.VideoPlayer__progressTime}>\n        <Text\n          as=\"p\"\n          className={clsx(styles.VideoPlayer__controlTextColor, styles.VideoPlayer__seekTime)}\n          font=\"monospace\"\n        >\n          {formatTime(currentTime, duration)}\n          {<span className={styles.VideoPlayer__totalTime}> / {formatTime(duration)}</span>}\n        </Text>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,KAAW,MAAiB,EAAK,UAAU,CAAC,SAAS,GAAG,IAAI,EAC5D,KAAc,GAAc,MAAsB;AACtD,KAAI,MAAM,EAAK,IAAI,IAAO,EACxB,QAAO;AAGT,CAAI,KAAY,IAAO,MACrB,IAAO;CAMT,IAAI,IAAgB,GAHJ,EAAQ,KAAK,MAAO,IAAO,OAAQ,GAAG,CAG/B,CAAQ,GAFf,EAAQ,KAAK,MAAM,IAAO,GAAG,CAEX;AAOlC,QALI,IAAO,SAET,IAAgB,GADF,EAAQ,KAAK,MAAM,IAAO,KAAK,CAC1B,CAAM,GAAG,MAGvB;GAKI,KAAe,EAAC,cAAW,GAAG,QAA4B;CACrE,IAAM,EAAC,QAAK,gBAAY,GAAU,EAC5B,CAAC,GAAa,KAAkB,EAAS,EAAE,EAC3C,IAAO,GACV,MAAmC;EAClC,IAAM,IAAO,EAAE,cAAc;AAC7B,EAAI,GAAK,YACP,EAAI,QAAQ,cAAc;IAG9B,CAAC,EAAI,CACN;AAiBD,QAfA,QAAgB;EACd,IAAM,IAAW,GAAK;AACtB,MAAI,CAAC,EAAU;EAEf,IAAM,UAAqB;AACzB,KAAe,EAAS,YAAY;;AAKtC,SAFA,EAAS,iBAAiB,cAAc,EAAa,QAExC;AACX,KAAS,oBAAoB,cAAc,EAAa;;IAEzD,CAAC,EAAI,CAAC,EAGP,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,mBAAmB,EAAU;EAAE,GAAI;YAA/D,CACE,kBAAC,GAAD;GACE,MAAK;GACL,KAAI;GACJ,KAAK;GACL,MAAM;GACN,SAAS;GACT,OAAO;GACP,WAAW,EAAO;GAClB,SAAA;GACA,mBAAkB,MAAQ,EAAW,GAAM,EAAS;GACpD,MAAK;GACL,CAAA,EACF,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,GAAD;IACE,IAAG;IACH,WAAW,EAAK,EAAO,+BAA+B,EAAO,sBAAsB;IACnF,MAAK;cAHP,CAKG,EAAW,GAAa,EAAS,EACjC,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CAAgD,OAAI,EAAW,EAAS,CAAQ;OAC5E;;GACH,CAAA,CACF"}

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { type HTMLAttributes } from 'react';
+type VideoTooltipProps = HTMLAttributes<HTMLDivElement>;
+export declare const VideoTooltip: ({ children, className, ...rest }: VideoTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=VideoTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoTooltip.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/VideoTooltip/VideoTooltip.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA8B,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAM7E,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAEvD,eAAO,MAAM,YAAY,GAAI,kCAAgC,iBAAiB,4CAyF7E,CAAA"}

package/esm/VideoPlayer/components/VideoTooltip/VideoTooltip.js

@@ -0,0 +1,50 @@
+import e from "../../../node_modules/clsx/dist/clsx.js";
+import { Text as t } from "../../../Text/Text.js";
+import n from "../../VideoPlayer.module.js";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/VideoTooltip/VideoTooltip.tsx
+var s = ({ children: s, className: c, ...l }) => {
+	let u = i(null), [d, f] = a(!1), p = i(null);
+	return r(() => {
+		let e = u.current, t = e?.parentElement;
+		if (!e || !t) return;
+		let n = () => {
+			p.current &&= (clearTimeout(p.current), null);
+		}, r = (e) => {
+			e.key === "Escape" && f(!1);
+		}, i = () => {
+			f(t === document.activeElement || t.contains(document.activeElement));
+		}, a = () => {
+			f(!1);
+		}, o = () => {
+			n(), f(!0);
+		}, s = () => {
+			n(), p.current = setTimeout(() => {
+				f(!1);
+			}, 100);
+		};
+		return t.addEventListener("focus", i), t.addEventListener("blur", i), t.addEventListener("focusin", i), t.addEventListener("focusout", i), t.addEventListener("click", a), t.addEventListener("mouseenter", o), t.addEventListener("mouseleave", s), window.addEventListener("keydown", r), () => {
+			n(), t.removeEventListener("focus", i), t.removeEventListener("blur", i), t.removeEventListener("focusin", i), t.removeEventListener("focusout", i), t.removeEventListener("click", a), t.removeEventListener("mouseenter", o), t.removeEventListener("mouseleave", s), window.removeEventListener("keydown", r);
+		};
+	}, [u]), /* @__PURE__ */ o("div", {
+		className: e(n.VideoPlayer__tooltip, d && n["VideoPlayer__tooltip-visible"], c),
+		ref: u,
+		...l,
+		children: d ? /* @__PURE__ */ o("span", {
+			className: n.VideoPlayer__tooltipContent,
+			children: /* @__PURE__ */ o(t, {
+				className: n.VideoPlayer__tooltipText,
+				weight: "medium",
+				children: s
+			})
+		}) : /* @__PURE__ */ o("span", {
+			className: "visually-hidden",
+			children: s
+		})
+	});
+};
+//#endregion
+export { s as VideoTooltip };
+
+//# sourceMappingURL=VideoTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoTooltip.js","names":[],"sources":["../../../../src/VideoPlayer/components/VideoTooltip/VideoTooltip.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState, type HTMLAttributes} from 'react'\nimport {clsx} from 'clsx'\n\nimport {Text} from '../../../Text'\nimport styles from '../../VideoPlayer.module.css'\n\ntype VideoTooltipProps = HTMLAttributes<HTMLDivElement>\n\nexport const VideoTooltip = ({children, className, ...rest}: VideoTooltipProps) => {\n  const tooltipRef = useRef<HTMLDivElement>(null)\n  const [hasFocus, setHasFocus] = useState(false)\n  const mouseenterTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  useEffect(() => {\n    const tooltip = tooltipRef.current\n    const parent = tooltip?.parentElement\n\n    if (!tooltip || !parent) {\n      return\n    }\n\n    const clearTimeoutAndRef = () => {\n      if (mouseenterTimeoutRef.current) {\n        clearTimeout(mouseenterTimeoutRef.current)\n        mouseenterTimeoutRef.current = null\n      }\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setHasFocus(false)\n      }\n    }\n\n    const checkFocus = () => {\n      const isFocused = parent === document.activeElement || parent.contains(document.activeElement)\n      setHasFocus(isFocused)\n    }\n\n    const onClick = () => {\n      // Close tooltip when element is clicked\n      setHasFocus(false)\n    }\n\n    const onMouseEnterTooltip = () => {\n      clearTimeoutAndRef()\n      setHasFocus(true)\n    }\n\n    const onMouseLeaveTooltip = () => {\n      clearTimeoutAndRef()\n\n      mouseenterTimeoutRef.current = setTimeout(() => {\n        setHasFocus(false)\n      }, 100)\n    }\n\n    parent.addEventListener('focus', checkFocus)\n    parent.addEventListener('blur', checkFocus)\n    parent.addEventListener('focusin', checkFocus)\n    parent.addEventListener('focusout', checkFocus)\n    parent.addEventListener('click', onClick)\n    parent.addEventListener('mouseenter', onMouseEnterTooltip)\n    parent.addEventListener('mouseleave', onMouseLeaveTooltip)\n    window.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      clearTimeoutAndRef()\n\n      parent.removeEventListener('focus', checkFocus)\n      parent.removeEventListener('blur', checkFocus)\n      parent.removeEventListener('focusin', checkFocus)\n      parent.removeEventListener('focusout', checkFocus)\n      parent.removeEventListener('click', onClick)\n      parent.removeEventListener('mouseenter', onMouseEnterTooltip)\n      parent.removeEventListener('mouseleave', onMouseLeaveTooltip)\n      window.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [tooltipRef])\n\n  return (\n    <div\n      className={clsx(styles.VideoPlayer__tooltip, hasFocus && styles['VideoPlayer__tooltip-visible'], className)}\n      ref={tooltipRef}\n      {...rest}\n    >\n      {hasFocus ? (\n        <span className={styles.VideoPlayer__tooltipContent}>\n          <Text className={styles.VideoPlayer__tooltipText} weight=\"medium\">\n            {children}\n          </Text>\n        </span>\n      ) : (\n        <span className=\"visually-hidden\">{children}</span>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAQA,IAAa,KAAgB,EAAC,aAAU,cAAW,GAAG,QAA6B;CACjF,IAAM,IAAa,EAAuB,KAAK,EACzC,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,IAAuB,EAA6C,KAAK;AAqE/E,QAnEA,QAAgB;EACd,IAAM,IAAU,EAAW,SACrB,IAAS,GAAS;AAExB,MAAI,CAAC,KAAW,CAAC,EACf;EAGF,IAAM,UAA2B;AAC/B,GAEE,EAAqB,aADrB,aAAa,EAAqB,QAAQ,EACX;KAI7B,KAAiB,MAAqB;AAC1C,GAAI,EAAE,QAAQ,YACZ,EAAY,GAAM;KAIhB,UAAmB;AAEvB,KADkB,MAAW,SAAS,iBAAiB,EAAO,SAAS,SAAS,cAAc,CACxE;KAGlB,UAAgB;AAEpB,KAAY,GAAM;KAGd,UAA4B;AAEhC,GADA,GAAoB,EACpB,EAAY,GAAK;KAGb,UAA4B;AAGhC,GAFA,GAAoB,EAEpB,EAAqB,UAAU,iBAAiB;AAC9C,MAAY,GAAM;MACjB,IAAI;;AAYT,SATA,EAAO,iBAAiB,SAAS,EAAW,EAC5C,EAAO,iBAAiB,QAAQ,EAAW,EAC3C,EAAO,iBAAiB,WAAW,EAAW,EAC9C,EAAO,iBAAiB,YAAY,EAAW,EAC/C,EAAO,iBAAiB,SAAS,EAAQ,EACzC,EAAO,iBAAiB,cAAc,EAAoB,EAC1D,EAAO,iBAAiB,cAAc,EAAoB,EAC1D,OAAO,iBAAiB,WAAW,EAAc,QAEpC;AAUX,GATA,GAAoB,EAEpB,EAAO,oBAAoB,SAAS,EAAW,EAC/C,EAAO,oBAAoB,QAAQ,EAAW,EAC9C,EAAO,oBAAoB,WAAW,EAAW,EACjD,EAAO,oBAAoB,YAAY,EAAW,EAClD,EAAO,oBAAoB,SAAS,EAAQ,EAC5C,EAAO,oBAAoB,cAAc,EAAoB,EAC7D,EAAO,oBAAoB,cAAc,EAAoB,EAC7D,OAAO,oBAAoB,WAAW,EAAc;;IAErD,CAAC,EAAW,CAAC,EAGd,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,sBAAsB,KAAY,EAAO,iCAAiC,EAAU;EAC3G,KAAK;EACL,GAAI;YAEH,IACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAM,WAAW,EAAO;IAA0B,QAAO;IACtD;IACI,CAAA;GACF,CAAA,GAEP,kBAAC,QAAD;GAAM,WAAU;GAAmB;GAAgB,CAAA;EAEjD,CAAA"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { type RangeProps } from '../';
+export declare const VolumeControl: ({ name, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=VolumeControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeControl.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/VolumeControl/VolumeControl.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,KAAK,CAAA;AAI1C,eAAO,MAAM,aAAa,GAAI,mBAA4B,UAAU,4CAiBnE,CAAA"}

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

@@ -0,0 +1,25 @@
+import { useVideo as e } from "../../hooks/useVideo.js";
+import { Range as t } from "../Range/Range.js";
+import n from "./VolumeControl.module.js";
+import "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/VideoPlayer/components/VolumeControl/VolumeControl.tsx
+var i = ({ name: i = "Volume", ...a }) => {
+	let { volume: o, setVolume: s } = e();
+	return /* @__PURE__ */ r(t, {
+		className: n.VolumeControl,
+		type: "range",
+		min: "0",
+		max: 1,
+		step: .001,
+		onInput: (e) => s(e.currentTarget.valueAsNumber),
+		value: o,
+		a11yStep: .1,
+		name: i,
+		...a
+	});
+};
+//#endregion
+export { i as VolumeControl };
+
+//# sourceMappingURL=VolumeControl.js.map