npm - @primer/react-brand - Versions diffs - 0.75.0-rc.a3f7dbd6 → 0.75.0 - Mend

@primer/react-brand 0.75.0-rc.a3f7dbd6 → 0.75.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (940) hide show

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

	@@ -1 +1 @@
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"}
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,EAAS;CACvC,OACE,kBAAC,GAAD;EAAa,SAAS,IAAU,WAAW;EAAQ,SAAS;EAAY,GAAI;YAC/D,EAAV,IAAW,IAAyB,GAA1B,EAAU,MAAM,GAAK,CAA2B;CAChD,CAAA;AAEjB"}

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

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

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"PauseIcon.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/PauseIcon/PauseIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAE/C,eAAO,MAAM,SAAS,GAAI,OAAO,aAAa,CAAC,aAAa,CAAC,sBAK5D,CAAA"}

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

	@@ -1 +1 @@
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"}
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;CAAgB,CAAA,GAC1D,kBAAC,QAAD;EAAM,GAAE;EAAO,OAAM;EAAM,QAAO;EAAK,IAAG;EAAI,MAAK;CAAgB,CAAA,CAChE"}

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

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

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"PlayIcon.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/PlayIcon/PlayIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAE/C,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,CAAC,aAAa,CAAC,sBAO3D,CAAA"}

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

	@@ -1 +1 @@
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"}
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;CACN,CAAA;AACE,CAAA"}

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

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

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"PlayPauseButton.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/PlayPauseButton/PlayPauseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAKhD,eAAO,MAAM,eAAe,GAAI,OAAO,cAAc,CAAC,iBAAiB,CAAC,sBAQvE,CAAA"}

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

	@@ -1 +1 @@
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"}
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,EAAS;CAE5C,OACE,kBAAC,GAAD;EAAa,SAAS;EAAe,SAAS,IAAY,gBAAgB;EAAc,GAAI;YAC7E,EAAZ,IAAa,IAAgB,GAAjB,CAAY,CAAe;CAC7B,CAAA;AAEjB"}

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

@@ -6,5 +6,5 @@ export type RangeProps = {
     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;
+export declare const Range: ({ className, onChange, value: startValue, max, onKeyDown, a11yStep, tooltip, tooltipFormatter, name, id, ...props }: RangeProps) => React.JSX.Element;
 //# sourceMappingURL=Range.d.ts.map

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

	@@ -1 +1 @@
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"}
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,sBAiFZ,CAAA"}

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

@@ -1,4 +1,4 @@
-import e from "../../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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";

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

	@@ -1 +1 @@
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~~"}
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,SAAS,GAC3C,SACA,OACA,GAAG,QACa;CAChB,IAAM,CAAC,GAAO,KAAY,EAAS,CAAU,GACvC,CAAC,GAAU,KAAe,EAAS,CAAC,GACpC,CAAC,GAAY,KAAiB,EAAS,CAAC,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAChB,IAAW,EAAgC,IAAI;CAMrD,AAJA,QAAgB;EACd,EAAS,CAAU;CACrB,GAAG,CAAC,CAAU,CAAC,GAEf,QAAgB;EACd,IAAM,IAAQ,EAAS;EAEvB,IAAI,CAAC,KAAO,CAAC,KAAW,CAAC,GACvB;EAGF,IAAM,KAAkB,MAAS;GAC/B,IAAI,EAAM,WAAW,GAAO;IAE1B,AADA,EAAc,CAAC,GACf,EAAY,CAAC;IACb;GACF;GAIA,AAFA,EAAY,EAAM,OAAO,GAEzB,EAAe,EAAM,UAAU,EAAM,OAAO,cAAe,CAAG;EAChE;EAIA,OAFA,EAAM,iBAAiB,aAAa,CAAe,SAEtC;GACX,EAAM,oBAAoB,aAAa,CAAe;EACxD;CACF,GAAG;EAAC;EAAK;EAAS;CAAQ,CAAC;CAE3B,IAAM,KAA8D,MAAS;EACvE,OAAO,KAAU,aAEjB,EAAM,QAAQ,aAChB,EAAM,gBAAgB,GACtB,EAAS,IAAQ,CAAQ,KAChB,EAAM,QAAQ,gBACvB,EAAM,gBAAgB,GACtB,EAAS,IAAQ,CAAQ;CAE7B;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,oBAAoB,CAAS;YAAzD;GACE,kBAAC,YAAD;IAAU,eAAY;IAAO,WAAW,EAAO;IAAmC;IAAY;GAAM,CAAA;GACpG,kBAAC,SAAD;IAAO,SAAS;cAAhB,CACE,kBAAC,QAAD;KAAM,WAAU;eAAmB;IAAW,CAAA,GAC9C,kBAAC,SAAD;KACE,UAAU;KACV,MAAK;KACL,WAAW,EAAK,EAAO,yBAAyB,EAAO,wBAAwB;KACxE;KACP,WAAU,MAAK;MAEb,AADA,EAAS,EAAE,cAAc,aAAa,GACtC,EAAS,CAAC;KACZ;KACK;KACL,YAAW,MAAK;MAEd,AADA,EAAc,CAAC,GACf,EAAU,CAAC;KACb;KACA,IAAI;KACE;KACN,KAAK;KACL,GAAI;IACL,CAAA,CACI;;GAEN,KAAW,IACV,kBAAC,GAAD;IAAc,OAAO,EAAC,MAAM,EAAQ;cAAI,EAAiB,CAAU;GAAgB,CAAA,IACjF;EACD;;AAET"}

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

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

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"SeekControl.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/SeekControl/SeekControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmC,KAAK,cAAc,EAAiB,MAAM,OAAO,CAAA;AA+BlG,KAAK,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAEtD,eAAO,MAAM,WAAW,GAAI,wBAAsB,gBAAgB,sBAsDjE,CAAA"}

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

@@ -1,4 +1,4 @@
-import e from "../../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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";

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

	@@ -1 +1 @@
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"}
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,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,GAC3D,KAAc,GAAc,MAAsB;CACtD,IAAI,MAAM,CAAI,KAAK,IAAO,GACxB,OAAO;CAGT,AAAI,KAAY,IAAO,MACrB,IAAO;CAMT,IAAI,IAAgB,GAHJ,EAAQ,KAAK,MAAO,IAAO,OAAQ,EAAE,CAG9B,EAAQ,GAFf,EAAQ,KAAK,MAAM,IAAO,EAAE,CAEV;CAOlC,OALI,IAAO,SAET,IAAgB,GADF,EAAQ,KAAK,MAAM,IAAO,IAAI,CACzB,EAAM,GAAG,MAGvB;AACT,GAIa,KAAe,EAAC,cAAW,GAAG,QAA4B;CACrE,IAAM,EAAC,QAAK,gBAAY,EAAS,GAC3B,CAAC,GAAa,KAAkB,EAAS,CAAC,GAC1C,IAAO,GACV,MAAmC;EAClC,IAAM,IAAO,EAAE,cAAc;EAC7B,AAAI,GAAK,YACP,EAAI,QAAQ,cAAc;CAE9B,GACA,CAAC,CAAG,CACN;CAiBA,OAfA,QAAgB;EACd,IAAM,IAAW,GAAK;EACtB,IAAI,CAAC,GAAU;EAEf,IAAM,UAAqB;GACzB,EAAe,EAAS,WAAW;EACrC;EAIA,OAFA,EAAS,iBAAiB,cAAc,CAAY,SAEvC;GACX,EAAS,oBAAoB,cAAc,CAAY;EACzD;CACF,GAAG,CAAC,CAAG,CAAC,GAGN,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,mBAAmB,CAAS;EAAG,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,CAAQ;GACnD,MAAK;EACN,CAAA,GACD,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,GAAD;IACE,IAAG;IACH,WAAW,EAAK,EAAO,+BAA+B,EAAO,qBAAqB;IAClF,MAAK;cAHP,CAKG,EAAW,GAAa,CAAQ,GAChC,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CAAgD,OAAI,EAAW,CAAQ,CAAQ;MAC5E;;EACH,CAAA,CACF;;AAET"}

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

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

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"VideoTooltip.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/VideoTooltip/VideoTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8B,KAAK,cAAc,EAAC,MAAM,OAAO,CAAA;AAM7E,KAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAEvD,eAAO,MAAM,YAAY,GAAI,kCAAgC,iBAAiB,sBAyF7E,CAAA"}

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

@@ -1,4 +1,4 @@
-import e from "../../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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";
@@ -14,7 +14,8 @@ var s = ({ children: s, className: c, ...l }) => {
 		}, r = (e) => {
 			e.key === "Escape" && f(!1);
 		}, i = () => {
-			f(t === document.activeElement || t.contains(document.activeElement));
+			let e = t === document.activeElement || t.contains(document.activeElement);
+			f(e);
 		}, a = () => {
 			f(!1);
 		}, o = () => {

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

	@@ -1 +1 @@
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"}
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,IAAI,GACxC,CAAC,GAAU,KAAe,EAAS,EAAK,GACxC,IAAuB,EAA6C,IAAI;CAqE9E,OAnEA,QAAgB;EACd,IAAM,IAAU,EAAW,SACrB,IAAS,GAAS;EAExB,IAAI,CAAC,KAAW,CAAC,GACf;EAGF,IAAM,UAA2B;GAC/B,AAEE,EAAqB,aADrB,aAAa,EAAqB,OAAO,GACV;EAEnC,GAEM,KAAiB,MAAqB;GAC1C,AAAI,EAAE,QAAQ,YACZ,EAAY,EAAK;EAErB,GAEM,UAAmB;GACvB,IAAM,IAAY,MAAW,SAAS,iBAAiB,EAAO,SAAS,SAAS,aAAa;GAC7F,EAAY,CAAS;EACvB,GAEM,UAAgB;GAEpB,EAAY,EAAK;EACnB,GAEM,UAA4B;GAEhC,AADA,EAAmB,GACnB,EAAY,EAAI;EAClB,GAEM,UAA4B;GAGhC,AAFA,EAAmB,GAEnB,EAAqB,UAAU,iBAAiB;IAC9C,EAAY,EAAK;GACnB,GAAG,GAAG;EACR;EAWA,OATA,EAAO,iBAAiB,SAAS,CAAU,GAC3C,EAAO,iBAAiB,QAAQ,CAAU,GAC1C,EAAO,iBAAiB,WAAW,CAAU,GAC7C,EAAO,iBAAiB,YAAY,CAAU,GAC9C,EAAO,iBAAiB,SAAS,CAAO,GACxC,EAAO,iBAAiB,cAAc,CAAmB,GACzD,EAAO,iBAAiB,cAAc,CAAmB,GACzD,OAAO,iBAAiB,WAAW,CAAa,SAEnC;GAUX,AATA,EAAmB,GAEnB,EAAO,oBAAoB,SAAS,CAAU,GAC9C,EAAO,oBAAoB,QAAQ,CAAU,GAC7C,EAAO,oBAAoB,WAAW,CAAU,GAChD,EAAO,oBAAoB,YAAY,CAAU,GACjD,EAAO,oBAAoB,SAAS,CAAO,GAC3C,EAAO,oBAAoB,cAAc,CAAmB,GAC5D,EAAO,oBAAoB,cAAc,CAAmB,GAC5D,OAAO,oBAAoB,WAAW,CAAa;EACrD;CACF,GAAG,CAAC,CAAU,CAAC,GAGb,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,sBAAsB,KAAY,EAAO,iCAAiC,CAAS;EAC1G,KAAK;EACL,GAAI;YAEH,IACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAM,WAAW,EAAO;IAA0B,QAAO;IACtD;GACG,CAAA;EACF,CAAA,IAEN,kBAAC,QAAD;GAAM,WAAU;GAAmB;EAAe,CAAA;CAEjD,CAAA;AAET"}

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

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

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"VolumeControl.d.ts","sourceRoot":"","sources":["../../../../src/VideoPlayer/components/VolumeControl/VolumeControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAQ,KAAK,UAAU,EAAC,MAAM,KAAK,CAAA;AAI1C,eAAO,MAAM,aAAa,GAAI,mBAA4B,UAAU,sBAiBnE,CAAA"}

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

	@@ -1 +1 @@
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"}
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,EAAS;CAErC,OACE,kBAAC,GAAD;EACE,WAAW,EAAO;EAClB,MAAK;EACL,KAAI;EACJ,KAAK;EACL,MAAM;EACN,UAAS,MAAK,EAAU,EAAE,cAAc,aAAa;EACrD,OAAO;EACP,UAAU;EACJ;EACN,GAAI;CACL,CAAA;AAEL"}

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

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

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

	@@ -1 +1 @@
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~~"}
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,EAAK;CA0CvD,OAxCA,QAAgB;EACd,IAAI,CAAC,GAAS;EAEd,IAAM,UAA+B;GACnC,IAAM,IAAwB,SAAS,sBAAsB,GAEvD,IAAkB,EAAO;GAQ/B,AANI,IACF,EAAQ,UAAU,IAAI,CAAe,IAErC,EAAQ,UAAU,OAAO,CAAe,GAG1C,EAAiB,CAAqB;EACxC;EAIA,OAFA,SAAS,iBAAiB,oBAAoB,CAAsB,SAEvD;GACX,SAAS,oBAAoB,oBAAoB,CAAsB;EACzE;CACF,GAAG,CAAC,CAAO,CAAC,GAkBL,CAAC,GAhBgB,GACrB,MAAqD;EACpD,IAAM,IACJ,OAAO,KAA4B,aAAa,EAAwB,CAAY,IAAI;EAEtF,CAAC,KAAW,MAAiB,MAE7B,IACF,EAAQ,kBAAkB,IAE1B,SAAS,eAAe;CAE5B,GACA,CAAC,GAAS,CAAY,CAGF,CAAe;AACvC"}

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

	@@ -1 +1 @@
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":";;;;;AAuDA,IAAa,IAAe,EAAsC,~~KAAK~~,~~EAEjE~~,KAAgB,GAAmB,MAA+B;CACtE,IAAM,IAAQ,EAAM,KAAK;~~AAEzB~~,~~KAAI~~,CAAC,~~EAGH~~,~~QADA~~,QAAQ,MAAM,mDAAmD,~~EAAO~~,~~EACjE~~;~~AAGT~~,~~SAAQ~~,EAAO,MAAf;EACE,KAAK,~~OAEH~~,~~QADA~~,EAAM,~~MAAM~~,~~EACL~~;GAAC,GAAG;GAAO,WAAW;~~GAAK~~;~~EAEpC~~,KAAK,~~QAEH~~,~~QADA~~,EAAM,~~OAAO~~,~~EACN~~;GAAC,GAAG;GAAO,WAAW;~~GAAM~~;~~EAErC~~,KAAK,~~OAEH~~,~~QADA~~,EAAM,SAAS,GACR;GAAC,GAAG;GAAO,SAAS;GAAM,kBAAkB,EAAM;~~GAAO~~;~~EAElE~~,KAAK,UAAU;GACb,IAAM,IAAa,EAAM,oBAAoB;~~AAE7C~~,~~UADA~~,EAAM,SAAS,GACR;IAAC,GAAG;IAAO,SAAS;IAAO,QAAQ;~~IAAW;;EAEvD~~,KAAK,~~YAEH~~,~~QADA~~,EAAM,SAAS,EAAO,SACf;GAAC,GAAG;GAAO,QAAQ,EAAO;~~GAAQ~~;~~EAE3C~~,KAAK,~~WACH~~,~~QAAO~~;GAAC,GAAG;GAAO,WAAW;~~GAAK~~;~~EAEpC~~,KAAK,~~YACH~~,~~QAAO~~;GAAC,GAAG;GAAO,WAAW;~~GAAM~~;~~EAErC~~,KAAK,~~cACH~~,~~QAAO~~;GAAC,GAAG;GAAO,UAAU,EAAO;~~GAAQ~~;~~EAE7C~~,~~QACE~~,~~QAAO;;GAIA~~,UAAiB;CAC5B,IAAM,IAAU,EAAW,~~EAAa~~;~~AAExC~~,~~KAAI~~,CAAC,~~EACH~~,~~OAAU~~,MACR,~~4GACD~~;~~AAGH~~,~~QAAO~~;~~GAKI~~,IAAgB,GAAkD,EAAC,eAAW,MAAiB;CAC1G,IAAM,IAAM,EAAuB,~~EAA4C~~,~~EACzE~~,IAAgB,EAAuB,~~KAAK~~,~~EAE5C~~,CAAC,GAAO,KAAY,EAAW,GAAc;EACjD,WAAW;EACX,SAAS;EACT,QAAQ;EACR,kBAAkB;EAClB,WAAW;EACX;EACA,UAAU;~~EACX~~,CAAC,~~EAEI~~,CAAC,GAAc,KAAmB,EAAuB,EAAc,~~QAAQ~~,~~EAE/E~~,IAAyB;EAC7B,GAAG;EACH;EACA;EACA,YAAY,EAAS,EAAC,MAAM,~~QAAO~~,CAAC;~~EACpC~~,aAAa,EAAS,EAAC,MAAM,~~SAAQ~~,CAAC;~~EACtC~~,qBAAqB,EAAS,EAAC,MAAM,EAAM,YAAY,UAAU,~~QAAO~~,CAAC;~~EACzE~~,YAAY,EAAS,EAAC,MAAM,~~QAAO~~,CAAC;~~EACpC~~,cAAc,EAAS,EAAC,MAAM,~~UAAS~~,CAAC;~~EACxC~~,kBAAkB,EAAS,EAAC,MAAM,EAAM,UAAU,WAAW,~~QAAO~~,CAAC;~~EACrE~~,YAAW,MAAiB;GAC1B,IAAM,IAAa,OAAO,KAAkB,aAAa,EAAc,EAAM,~~OAAO~~,~~GAAG~~;~~AAGvF~~,~~KAAS~~;IAAC,MAAM;IAAa,SAFP,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,~~EAAW~~,~~CAEnB~~;~~IAAc~~,CAAC~~;;EAEvD~~,gBAAgB;~~AACd~~,~~KAAS~~,EAAC,MAAM,~~YAAW~~,CAAC~~;;EAE9B~~,iBAAiB,EAAS,EAAC,MAAM,~~aAAY~~,CAAC;~~EAC9C~~,gBAAgB,EAAS,EAAC,MAAM,EAAM,YAAY,cAAc,~~YAAW~~,CAAC;~~EAC5E~~,uBAAuB,EAAgB,~~GAAK~~;~~EAC5C~~,sBAAsB,EAAgB,~~GAAM~~;~~EAC5C~~,wBAAwB,GAAgB,MAAQ,CAAC,~~EAAK~~;~~EACtD~~,cAAc,MAAqB,EAAS;GAAC,MAAM;GAAe,SAAS;~~GAAS~~,CAAC;~~EAErF~~,gBAAe,MAAW;GACxB,IAAM,IAAW,EAAM,KAAK;~~AACvB~~,~~SAEL~~,EAAS,cAAe,IAAU,MAAO,EAAS~~;;EAEpD~~,OAAM,MAAkB;GACtB,IAAM,IAAW,EAAM,KAAK;~~AACvB~~,~~SAEL~~,EAAS,cACP,OAAO,KAAmB,aAAa,EAAe,EAAS,~~YAAY~~,~~GAAG;;EAEnF~~;~~AA6CD~~,~~QA3CA~~,QAAgB;EACd,IAAM,IAAW,EAAM,KAAK;~~AAE5B~~,~~MAAI~~,CAAC,~~EAAU~~;EAEf,IAAM,IAAwD;GAC5D,YAAY;~~AACV~~,~~MAAS~~,EAAC,MAAM,~~QAAO~~,CAAC~~;;GAE1B~~,eAAe;~~AACb~~,~~MAAS~~,WAAW,~~GAAG~~,OAAO~~;;GAEhC~~,aAAa;~~AACX~~,~~MAAS~~,EAAC,MAAM,~~SAAQ~~,CAAC~~;;GAE3B~~,aAAa;~~AACX~~,~~MAAS~~,cAAc~~;;GAEzB~~,YAAY;~~AACV~~,~~MAAS~~,EAAC,MAAM,~~QAAO~~,CAAC~~;;GAE1B~~,cAAc;~~AACZ~~,~~MAAS~~,EAAC,MAAM,~~UAAS~~,CAAC~~;;GAE5B~~,oBAAoB;~~AAClB~~,~~MAAS~~;KAAC,MAAM;KAAa,SAAS,EAAS;~~KAAO~~,CAAC~~;;GAEzD~~,sBAAsB;~~AACpB~~,~~MAAS~~;KAAC,MAAM;KAAe,SAAS,EAAS;~~KAAS~~,CAAC~~;;GAE9D~~;~~AAED~~,~~OAAK~~,IAAM,CAAC,GAAO,MAAY,OAAO,QAAQ,~~EAAc~~,~~CAC1D~~,~~GAAS~~,iBAAiB,GAAO,~~EAAQ~~;~~AAG3C~~,~~eAAa~~;~~AACX~~,~~QAAK~~,IAAM,CAAC,GAAO,MAAY,OAAO,QAAQ,~~EAAc~~,~~CAC1D~~,~~GAAS~~,oBAAoB,GAAO,~~EAAQ;;IAG~~/C,CAAC,EAAM,~~IAAI~~,CAAC,~~EAER~~,kBAAC,EAAa,UAAd;EAA8B;EAAQ;~~EAAiC~~,CAAA;~~EAC9E~~"}
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/useVideoResizeObserver.js.map CHANGED Viewed

	@@ -1 +1 @@
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~~"}
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,EAAK;CAwC5C,OAtCA,QAAgB;EACd,IAAM,UAAqB;GACzB,IAAI,CAAC,EAAgB,SAAS;GAE9B,IAAM,IAAa,EAAgB,QAAQ,sBAAsB,CAAC,CAAC,OAE7D,IAAe,GAAQ,KAAc,IAAa;GAGxD,AAFA,EAAW,CAAY,GAEnB,IACF,EAAgB,QAAQ,UAAU,IAAI,CAAS,IAE/C,EAAgB,QAAQ,UAAU,OAAO,CAAS;EAEtD,GAEM,IAAiB,IAAI,gBAAe,MAAK;GAC7C,AAAI,EAAgB,WAClB,EAAa;EAEjB,CAAC;EAED,EAAa;EAEb,IAAM,IAAa,EAAgB;EASnC,OAPK,KAML,EAAe,QAAQ,CAAU,SACpB;GACX,EAAe,UAAU,CAAU;EACrC,WARe;GACX,EAAe,WAAW;EAC5B;CAOJ,GAAG,CAAC,GAAW,CAAe,CAAC,GAExB;AACT"}

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

@@ -7,5 +7,5 @@ export type BoxProps<T extends keyof JSX.IntrinsicElements = 'div'> = React.HTML
  * 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;
+export declare function Animate({ animate, as, children, className, style, ...rest }: PropsWithChildren<BoxProps>): JSX.Element;
 //# sourceMappingURL=Animate.d.ts.map

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

	@@ -1 +1 @@
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~~"}
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,eAiB9G"}

package/esm/animation/Animate/Animate.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as 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";

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

	@@ -1 +1 @@
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"}
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,CAAO;CAIvF,OACE,kBAHgB;EADK;EAAO;EAAQ;CACpB,CAAA,CAAc,SAAS,CAAE,IAAI,IAAK,OAGlD;EACE,WAAW,EAAK,GAAkB,CAAS;EAC3C,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAK;EAEJ;CACQ,CAAA;AAEf"}

package/esm/animation/Animation.module.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import './Animation.module-Bz_IX_fh.css';var e = {
-	Animation: "Primer_Brand__Animation-module__Animation___cS_aI",
+import './Animation.module-Bz_IX_fh.css';//#region src/animation/Animation.module.css
+var e = "Primer_Brand__Animation-module__Animation___cS_aI", t = {
+	Animation: e,
 	"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",
@@ -17,6 +18,6 @@ import './Animation.module-Bz_IX_fh.css';var e = {
 	"Animation--reveal-in-up": "Primer_Brand__Animation-module__Animation--reveal-in-up___8fCQo"
 };
 //#endregion
-export { e as default };
+export { e as Animation, t as default };
 //# sourceMappingURL=Animation.module.js.map

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

@@ -42,6 +42,6 @@ type AnimationProviderProps = {
     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 declare function AnimationProvider({ children, disableAnimations, animationTrigger, visibilityOptions, runOnce, autoStaggerChildren, staggerDelayIncrement, }: PropsWithChildren<AnimationProviderProps>): React.JSX.Element;
 export {};
 //# sourceMappingURL=AnimationProvider.d.ts.map

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

	@@ -1 +1 @@
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~~"}
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,qBA2G3C"}

package/esm/animation/AnimationProvider/AnimationProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnimationProvider.js","names":[],"sources":["../../../src/animation/AnimationProvider/AnimationProvider.tsx"],"sourcesContent":["import React, {createContext, PropsWithChildren, useEffect, useState} from 'react'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from '../Animation.module.css'\nimport {useId} from '../../hooks/useId'\n\nexport const AnimationVariants = [\n 'fade-in',\n 'fade-out',\n 'slide-in-up',\n 'slide-in-down',\n 'slide-in-left',\n 'slide-in-right',\n 'scale-in-up',\n 'scale-in-down',\n 'scale-in',\n 'fill-in-top',\n 'scale-in-right',\n 'scale-in-left',\n 'fill-in-right',\n 'reveal-in-up',\n] as const\n\ntype Variant = (typeof AnimationVariants)[number]\n\ntype VariantAdvanced = {\n variant: Variant\n delay?: number\n duration?: number\n ease?: string\n}\nexport type AnimateProps = Variant \| VariantAdvanced\n\ntype AnimationTrigger = 'click' \| 'on-visible' \| 'immediate'\ntype IntersectionVisibilityeOptions = 'bottom-of-screen' \| 'middle-of-screen' \| 'about-to-leave' \| number\n\ntype AnimationProviderProps = {\n /\n Prevents animations from running inside the provider\n /\n disableAnimations?: boolean\n /\n Controls the trigger method for the animation. One of `click`, `on-visible`, or `immediate`.\n /\n animationTrigger?: AnimationTrigger\n /\n Controls the intersection observer options for the animation.\n * One of `bottom-of-screen`, `middle-of-screen`, `about-to-leave`, or a number between 0 and 1.\n /\n visibilityOptions?: IntersectionVisibilityeOptions\n /\n Will persist the animation end-state after the animation has completed\n /\n runOnce?: boolean\n\n /\n Will stagger the animations of the children using an incrementing delay\n /\n autoStaggerChildren?: boolean\n\n /\n Stagger delay increment. Should be used alongside `autoStaggerChildren`.\n /\n staggerDelayIncrement?: number\n}\n\nexport const AnimationContext = createContext<AnimationProviderProps>({})\n\nfunction getIntersectionObserverOptions(animationOptions: AnimationProviderProps): IntersectionObserverInit {\n const {visibilityOptions} = animationOptions\n\n switch (visibilityOptions) {\n case 'bottom-of-screen':\n return {\n rootMargin: '0px 0px -10% 0px',\n threshold: 0.4,\n }\n case 'middle-of-screen':\n return {\n rootMargin: '0px 0px -30% 0px',\n threshold: 0.4,\n }\n case 'about-to-leave':\n return {\n rootMargin: '0px 0px -100% 0px',\n threshold: 0.4,\n }\n default:\n return typeof visibilityOptions === 'number'\n ? {\n rootMargin: '0px',\n threshold: visibilityOptions / 100,\n }\n : {\n rootMargin: '0px',\n threshold: 0.4,\n }\n }\n}\n\nexport function AnimationProvider({\n children,\n disableAnimations = false,\n animationTrigger = 'on-visible',\n visibilityOptions = 'bottom-of-screen',\n runOnce = false,\n autoStaggerChildren = true,\n staggerDelayIncrement = 100,\n}: PropsWithChildren<AnimationProviderProps>) {\n const uniqueId = useId()\n const [animationContext, setAnimationContext] = useState<AnimationProviderProps>({\n disableAnimations,\n animationTrigger,\n visibilityOptions,\n runOnce,\n })\n\n useEffect(() => {\n const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\n if (prefersReducedMotion) {\n setAnimationContext({\n disableAnimations: true,\n animationTrigger,\n visibilityOptions,\n })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n // add useEffect to add transition-delay to children that contain the Animation class\n useEffect(() => {\n if (!disableAnimations && autoStaggerChildren && uniqueId) {\n const stagger = staggerDelayIncrement\n const animationProvider = document.getElementById(uniqueId)\n\n if (!animationProvider) return\n\n const items = Array.from(animationProvider.querySelectorAll<HTMLElement>(`.${styles.Animation}`))\n\n if (items.length === 0) return\n\n for (let i = 0; i < items.length; i++) {\n items[i].style.transitionDelay = `${i stagger}ms`\n }\n }\n }, [disableAnimations, autoStaggerChildren, staggerDelayIncrement, uniqueId])\n\n // Immediately run animations and bypass intersection observer\n useEffect(() => {\n if (!disableAnimations && animationTrigger === 'immediate' && uniqueId) {\n const animationProvider = document.getElementById(uniqueId)\n if (!animationProvider) return\n\n requestAnimationFrame(() => {\n const elements = Array.from(animationProvider.querySelectorAll(`.${styles.Animation}`))\n for (const element of elements) {\n element.classList.add(styles['Animation--active'])\n }\n })\n }\n }, [disableAnimations, animationTrigger, uniqueId])\n\n useEffect(() => {\n if (!disableAnimations && animationTrigger === 'on-visible') {\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n if (entry.isIntersecting && entry.target.classList.contains(styles.Animation)) {\n entry.target.classList.add(styles['Animation--active'])\n } else {\n if (!runOnce) {\n entry.target.classList.remove(styles['Animation--active'])\n }\n }\n }\n },\n getIntersectionObserverOptions({\n disableAnimations,\n animationTrigger,\n visibilityOptions,\n }),\n )\n\n const elements = Array.from(document.querySelectorAll(`.${styles.Animation}`))\n\n for (const element of elements) {\n observer.observe(element)\n }\n\n return () => {\n observer.disconnect()\n }\n }\n\n if (!disableAnimations && animationTrigger === 'click') {\n const handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement\n if (target.classList.contains(styles.Animation)) {\n target.classList.add(styles['Animation--active'])\n }\n }\n\n document.addEventListener('click', handleClick)\n\n return () => {\n document.removeEventListener('click', handleClick)\n }\n }\n }, [disableAnimations, animationTrigger, visibilityOptions, runOnce])\n return (\n <AnimationContext.Provider value={animationContext}>\n <div id={uniqueId}>{children}</div>\n </AnimationContext.Provider>\n )\n}\n"],"mappings":";;;;;;AAWA,IAAa,IAAoB;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;~~CACD~~,~~EA6CY~~,IAAmB,EAAsC,~~EAAE~~,CAAC;~~AAEzE~~,SAAS,EAA+B,GAAoE;CAC1G,IAAM,EAAC,yBAAqB;~~AAE5B~~,~~SAAQ~~,GAAR;EACE,KAAK,~~mBACH~~,~~QAAO~~;GACL,YAAY;GACZ,WAAW;~~GACZ~~;~~EACH~~,KAAK,~~mBACH~~,~~QAAO~~;GACL,YAAY;GACZ,WAAW;~~GACZ~~;~~EACH~~,KAAK,~~iBACH~~,~~QAAO~~;GACL,YAAY;GACZ,WAAW;~~GACZ~~;~~EACH~~,~~QACE~~,~~QAAO~~,OAAO,KAAsB,WAChC;GACE,YAAY;GACZ,WAAW,IAAoB;~~GAChC~~,~~GACD~~;GACE,YAAY;GACZ,WAAW;~~GACZ;;;AAIX~~,SAAgB,EAAkB,EAChC,aACA,uBAAoB,IACpB,sBAAmB,cACnB,uBAAoB,oBACpB,aAAU,IACV,yBAAsB,IACtB,2BAAwB,OACoB;CAC5C,IAAM,IAAW,~~GAAO~~,~~EAClB~~,CAAC,GAAkB,KAAuB,EAAiC;EAC/E;EACA;EACA;EACA;~~EACD~~,CAAC;AA+FF,~~QA7FA~~,QAAgB;~~AAGd~~,~~EAF6B~~,OAAO,WAAW,~~mCAAmC~~,CAAC,WAGjF,EAAoB;GAClB,mBAAmB;GACnB;GACA;~~GACD~~,CAAC;~~IAGH~~,~~EAAE~~,CAAC,~~EAGN~~,QAAgB;~~AACd~~,~~MAAI~~,CAAC,KAAqB,KAAuB,GAAU;GACzD,IAAM,IAAU,GACV,IAAoB,SAAS,eAAe,~~EAAS~~;~~AAE3D~~,~~OAAI~~,CAAC,~~EAAmB~~;GAExB,IAAM,IAAQ,MAAM,KAAK,EAAkB,iBAA8B,IAAI,EAAO,~~YAAY~~,CAAC;~~AAEjG~~,~~OAAI~~,EAAM,WAAW,~~EAAG~~;~~AAExB~~,~~QAAK~~,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,~~IAChC~~,~~GAAM~~,~~GAAG~~,MAAM,kBAAkB,GAAG,IAAI,EAAQ~~;;IAGnD~~;EAAC;EAAmB;EAAqB;EAAuB;~~EAAS~~,CAAC,~~EAG7E~~,QAAgB;~~AACd~~,~~MAAI~~,CAAC,KAAqB,MAAqB,eAAe,GAAU;GACtE,IAAM,IAAoB,SAAS,eAAe,~~EAAS~~;~~AAC3D~~,~~OAAI~~,CAAC,~~EAAmB~~;~~AAExB,+BAA4B~~;IAC1B,IAAM,IAAW,MAAM,KAAK,EAAkB,iBAAiB,IAAI,EAAO,~~YAAY~~,CAAC;~~AACvF~~,~~SAAK~~,IAAM,KAAW,~~EACpB~~,~~GAAQ~~,UAAU,IAAI,EAAO,~~qBAAqB~~;~~KAEpD;;IAEH~~;EAAC;EAAmB;EAAkB;~~EAAS~~,CAAC,~~EAEnD~~,QAAgB;~~AACd~~,~~MAAI~~,CAAC,KAAqB,MAAqB,cAAc;GAC3D,IAAM,IAAW,IAAI,sBACnB,MAAW;~~AACT~~,~~SAAK~~,IAAM,KAAS,~~EAClB~~,~~CAAI~~,EAAM,kBAAkB,EAAM,OAAO,UAAU,SAAS,EAAO,~~UAAU~~,~~GAC3E~~,EAAM,OAAO,UAAU,IAAI,EAAO,~~qBAAqB~~,~~GAElD~~,KACH,EAAM,OAAO,UAAU,OAAO,EAAO,~~qBAAqB~~;~~MAKlE~~,EAA+B;IAC7B;IACA;IACA;~~IACD~~,CAAC,CACH,~~EAEK~~,IAAW,MAAM,KAAK,SAAS,iBAAiB,IAAI,EAAO,~~YAAY~~,CAAC;~~AAE9E~~,~~QAAK~~,IAAM,KAAW,~~EACpB~~,~~GAAS~~,QAAQ,~~EAAQ~~;~~AAG3B~~,~~gBAAa~~;~~AACX~~,~~MAAS~~,~~YAAY;;;AAIzB~~,~~MAAI~~,CAAC,KAAqB,MAAqB,SAAS;GACtD,IAAM,KAAe,MAAsB;IACzC,IAAM,IAAS,EAAM;~~AACrB~~,~~IAAI~~,EAAO,UAAU,SAAS,EAAO,~~UAAU~~,~~IAC7C~~,EAAO,UAAU,IAAI,EAAO,~~qBAAqB;;AAMrD~~,~~UAFA~~,SAAS,iBAAiB,SAAS,~~EAAY~~,~~QAElC~~;~~AACX~~,~~aAAS~~,oBAAoB,SAAS,~~EAAY;;;IAGrD~~;EAAC;EAAmB;EAAkB;EAAmB;~~EAAQ~~,CAAC,~~EAEnE~~,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,OAAD;GAAK,IAAI;GAAW;~~GAAe~~,CAAA;~~EACT~~,CAAA"}
1	+ {"version":3,"file":"AnimationProvider.js","names":[],"sources":["../../../src/animation/AnimationProvider/AnimationProvider.tsx"],"sourcesContent":["import React, {createContext, PropsWithChildren, useEffect, useState} from 'react'\n\n/*\n Design tokens\n /\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css'\n\n/* * Main Stylesheet (as a CSS Module) /\nimport styles from '../Animation.module.css'\nimport {useId} from '../../hooks/useId'\n\nexport const AnimationVariants = [\n 'fade-in',\n 'fade-out',\n 'slide-in-up',\n 'slide-in-down',\n 'slide-in-left',\n 'slide-in-right',\n 'scale-in-up',\n 'scale-in-down',\n 'scale-in',\n 'fill-in-top',\n 'scale-in-right',\n 'scale-in-left',\n 'fill-in-right',\n 'reveal-in-up',\n] as const\n\ntype Variant = (typeof AnimationVariants)[number]\n\ntype VariantAdvanced = {\n variant: Variant\n delay?: number\n duration?: number\n ease?: string\n}\nexport type AnimateProps = Variant \| VariantAdvanced\n\ntype AnimationTrigger = 'click' \| 'on-visible' \| 'immediate'\ntype IntersectionVisibilityeOptions = 'bottom-of-screen' \| 'middle-of-screen' \| 'about-to-leave' \| number\n\ntype AnimationProviderProps = {\n /\n Prevents animations from running inside the provider\n /\n disableAnimations?: boolean\n /\n Controls the trigger method for the animation. One of `click`, `on-visible`, or `immediate`.\n /\n animationTrigger?: AnimationTrigger\n /\n Controls the intersection observer options for the animation.\n * One of `bottom-of-screen`, `middle-of-screen`, `about-to-leave`, or a number between 0 and 1.\n /\n visibilityOptions?: IntersectionVisibilityeOptions\n /\n Will persist the animation end-state after the animation has completed\n /\n runOnce?: boolean\n\n /\n Will stagger the animations of the children using an incrementing delay\n /\n autoStaggerChildren?: boolean\n\n /\n Stagger delay increment. Should be used alongside `autoStaggerChildren`.\n /\n staggerDelayIncrement?: number\n}\n\nexport const AnimationContext = createContext<AnimationProviderProps>({})\n\nfunction getIntersectionObserverOptions(animationOptions: AnimationProviderProps): IntersectionObserverInit {\n const {visibilityOptions} = animationOptions\n\n switch (visibilityOptions) {\n case 'bottom-of-screen':\n return {\n rootMargin: '0px 0px -10% 0px',\n threshold: 0.4,\n }\n case 'middle-of-screen':\n return {\n rootMargin: '0px 0px -30% 0px',\n threshold: 0.4,\n }\n case 'about-to-leave':\n return {\n rootMargin: '0px 0px -100% 0px',\n threshold: 0.4,\n }\n default:\n return typeof visibilityOptions === 'number'\n ? {\n rootMargin: '0px',\n threshold: visibilityOptions / 100,\n }\n : {\n rootMargin: '0px',\n threshold: 0.4,\n }\n }\n}\n\nexport function AnimationProvider({\n children,\n disableAnimations = false,\n animationTrigger = 'on-visible',\n visibilityOptions = 'bottom-of-screen',\n runOnce = false,\n autoStaggerChildren = true,\n staggerDelayIncrement = 100,\n}: PropsWithChildren<AnimationProviderProps>) {\n const uniqueId = useId()\n const [animationContext, setAnimationContext] = useState<AnimationProviderProps>({\n disableAnimations,\n animationTrigger,\n visibilityOptions,\n runOnce,\n })\n\n useEffect(() => {\n const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\n if (prefersReducedMotion) {\n setAnimationContext({\n disableAnimations: true,\n animationTrigger,\n visibilityOptions,\n })\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n // add useEffect to add transition-delay to children that contain the Animation class\n useEffect(() => {\n if (!disableAnimations && autoStaggerChildren && uniqueId) {\n const stagger = staggerDelayIncrement\n const animationProvider = document.getElementById(uniqueId)\n\n if (!animationProvider) return\n\n const items = Array.from(animationProvider.querySelectorAll<HTMLElement>(`.${styles.Animation}`))\n\n if (items.length === 0) return\n\n for (let i = 0; i < items.length; i++) {\n items[i].style.transitionDelay = `${i stagger}ms`\n }\n }\n }, [disableAnimations, autoStaggerChildren, staggerDelayIncrement, uniqueId])\n\n // Immediately run animations and bypass intersection observer\n useEffect(() => {\n if (!disableAnimations && animationTrigger === 'immediate' && uniqueId) {\n const animationProvider = document.getElementById(uniqueId)\n if (!animationProvider) return\n\n requestAnimationFrame(() => {\n const elements = Array.from(animationProvider.querySelectorAll(`.${styles.Animation}`))\n for (const element of elements) {\n element.classList.add(styles['Animation--active'])\n }\n })\n }\n }, [disableAnimations, animationTrigger, uniqueId])\n\n useEffect(() => {\n if (!disableAnimations && animationTrigger === 'on-visible') {\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n if (entry.isIntersecting && entry.target.classList.contains(styles.Animation)) {\n entry.target.classList.add(styles['Animation--active'])\n } else {\n if (!runOnce) {\n entry.target.classList.remove(styles['Animation--active'])\n }\n }\n }\n },\n getIntersectionObserverOptions({\n disableAnimations,\n animationTrigger,\n visibilityOptions,\n }),\n )\n\n const elements = Array.from(document.querySelectorAll(`.${styles.Animation}`))\n\n for (const element of elements) {\n observer.observe(element)\n }\n\n return () => {\n observer.disconnect()\n }\n }\n\n if (!disableAnimations && animationTrigger === 'click') {\n const handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement\n if (target.classList.contains(styles.Animation)) {\n target.classList.add(styles['Animation--active'])\n }\n }\n\n document.addEventListener('click', handleClick)\n\n return () => {\n document.removeEventListener('click', handleClick)\n }\n }\n }, [disableAnimations, animationTrigger, visibilityOptions, runOnce])\n return (\n <AnimationContext.Provider value={animationContext}>\n <div id={uniqueId}>{children}</div>\n </AnimationContext.Provider>\n )\n}\n"],"mappings":"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"}

package/esm/animation/TextRevealAnimation/TextRevealAnimation.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import e from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as e } from "../../node_modules/clsx/dist/clsx.js";
 import { useTextRevealAnimationLines as t } from "./useTextRevealAnimationLines.js";
 import n from "./TextRevealAnimation.module.js";
 import { useProvidedRefOrCreate as r } from "../../hooks/useRef.js";

package/esm/animation/TextRevealAnimation/TextRevealAnimation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextRevealAnimation.js","names":[],"sources":["../../../src/animation/TextRevealAnimation/TextRevealAnimation.tsx"],"sourcesContent":["import React, {useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {useTextRevealAnimationLines} from './useTextRevealAnimationLines'\n\nimport styles from './TextRevealAnimation.module.css'\nimport {BaseProps} from '../../component-helpers'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type TextRevealAnimationProps = BaseProps<HTMLSpanElement> &\n Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n children: string\n }\n\nexport const TextRevealAnimation = React.forwardRef<HTMLSpanElement, TextRevealAnimationProps>(\n function ~~TextRevealAnimation~~({children, ...rest}, forwardedRef) {\n const spanRef = useProvidedRefOrCreate<HTMLSpanElement \| null>(\n forwardedRef as React.RefObject<HTMLSpanElement> \| React.RefCallback<HTMLSpanElement> \| null,\n )\n const {lines} = useTextRevealAnimationLines(children \|\| '', spanRef)\n const [animationStarted, setAnimationStarted] = React.useState(false)\n const [hasAnimationCompleted, setHasAnimationCompleted] = React.useState(false)\n\n const onLineAnimationEnd = (i: number) => {\n if (lines && i === lines.length - 1) {\n setHasAnimationCompleted(true)\n }\n }\n\n useEffect(() => {\n const el = spanRef.current\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n setAnimationStarted(true)\n if (el) {\n observer.unobserve(el)\n }\n }\n }\n },\n {\n threshold: 1,\n rootMargin: '0px 0px -10% 0px',\n },\n )\n\n if (el) {\n observer.observe(el)\n }\n\n return () => {\n if (el) {\n observer.unobserve(el)\n }\n }\n }, [spanRef])\n\n if (typeof children !== 'string' && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('Children passed to TextRevealAnimation must be a string')\n return null\n }\n\n return (\n <span ref={spanRef} {...rest}>\n {lines?.map((line, i) => (\n <React.Fragment key={line}>\n <span\n className={clsx(\n styles.TextRevealAnimation,\n animationStarted && styles['TextRevealAnimation--visible'],\n animationStarted &&\n (hasAnimationCompleted ? styles['TextRevealAnimation'] : styles['TextRevealAnimation--animated']),\n )}\n style={{'--animation-delay': `${220 + i * 200}ms`} as React.CSSProperties}\n onAnimationEnd={() => onLineAnimationEnd(i)}\n >\n {line}\n </span>{' '}\n {/* The trailing space above is intentional. It prevents adjacent words at the start/end of lines from being rendered as a single word */}\n </React.Fragment>\n ))}\n </span>\n )\n },\n)\n"],"mappings":";;;;;;;AAaA,IAAa,IAAsB,EAAM,WACvC,~~SAA6B~~,EAAC,aAAU,GAAG,KAAO,GAAc;~~CAC9D~~,IAAM,IAAU,EACd,~~EACD~~,~~EACK~~,EAAC,aAAS,EAA4B,KAAY,IAAI,~~EAAQ~~,~~EAC9D~~,CAAC,GAAkB,KAAuB,EAAM,SAAS,~~GAAM~~,~~EAC/D~~,CAAC,GAAuB,KAA4B,EAAM,SAAS,~~GAAM~~,~~EAEzE~~,KAAsB,MAAc;~~AACxC~~,~~EAAI~~,KAAS,MAAM,EAAM,SAAS,KAChC,EAAyB,~~GAAK;;AAwClC~~,~~QApCA~~,QAAgB;EACd,IAAM,IAAK,EAAQ,SACb,IAAW,IAAI,sBACnB,MAAW;~~AACT~~,~~QAAK~~,IAAM,KAAS,~~EAClB~~,~~CAAI~~,EAAM,mBACR,EAAoB,~~GAAK~~,~~EACrB~~,KACF,EAAS,UAAU,~~EAAG~~;~~KAK9B~~;GACE,WAAW;GACX,YAAY;~~GACb~~,CACF;~~AAMD~~,~~SAJI~~,KACF,EAAS,QAAQ,~~EAAG~~,~~QAGT~~;~~AACX~~,~~GAAI~~,KACF,EAAS,UAAU,~~EAAG;;IAGzB~~,CAAC,~~EAAQ~~,CAAC,~~EAET~~,OAAO,KAAa,aAAA,QAAA,IAAA,aAAsC,iBAAA,QAAA,IAAA,aAA0C,WAEtG,QAAQ,KAAK,~~0DAA0D~~,~~EAChE~~,QAIP,kBAAC,QAAD;EAAM,KAAK;EAAS,GAAI;YACrB,GAAO,KAAK,GAAM,MACjB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,QAAD;GACE,WAAW,EACT,EAAO,qBACP,KAAoB,EAAO,iCAC3B,MACG,IAAwB,EAAO,sBAAyB,EAAO,~~kCACnE~~;~~GACD~~,OAAO,EAAC,qBAAqB,GAAG,MAAM,IAAI,IAAI,~~KAAI~~;~~GAClD~~,sBAAsB,EAAmB,~~EAAE~~;~~aAE1C~~;~~GACI~~,CAAA,~~EAAC~~,~~IAEO~~,EAAA,~~EAdI~~,~~EAcJ~~,CACjB;~~EACG~~,CAAA;~~EAGZ~~"}
1	+ {"version":3,"file":"TextRevealAnimation.js","names":[],"sources":["../../../src/animation/TextRevealAnimation/TextRevealAnimation.tsx"],"sourcesContent":["import React, {useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {useTextRevealAnimationLines} from './useTextRevealAnimationLines'\n\nimport styles from './TextRevealAnimation.module.css'\nimport {BaseProps} from '../../component-helpers'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\n\nexport type TextRevealAnimationProps = BaseProps<HTMLSpanElement> &\n Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n children: string\n }\n\nexport const TextRevealAnimation = React.forwardRef<HTMLSpanElement, TextRevealAnimationProps>(\n function TextRevealAnimationWithRef({children, ...rest}, forwardedRef) {\n const spanRef = useProvidedRefOrCreate<HTMLSpanElement \| null>(\n forwardedRef as React.RefObject<HTMLSpanElement> \| React.RefCallback<HTMLSpanElement> \| null,\n )\n const {lines} = useTextRevealAnimationLines(children \|\| '', spanRef)\n const [animationStarted, setAnimationStarted] = React.useState(false)\n const [hasAnimationCompleted, setHasAnimationCompleted] = React.useState(false)\n\n const onLineAnimationEnd = (i: number) => {\n if (lines && i === lines.length - 1) {\n setHasAnimationCompleted(true)\n }\n }\n\n useEffect(() => {\n const el = spanRef.current\n const observer = new IntersectionObserver(\n entries => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n setAnimationStarted(true)\n if (el) {\n observer.unobserve(el)\n }\n }\n }\n },\n {\n threshold: 1,\n rootMargin: '0px 0px -10% 0px',\n },\n )\n\n if (el) {\n observer.observe(el)\n }\n\n return () => {\n if (el) {\n observer.unobserve(el)\n }\n }\n }, [spanRef])\n\n if (typeof children !== 'string' && (process.env.NODE_ENV === 'development' \|\| process.env.NODE_ENV === 'test')) {\n // eslint-disable-next-line no-console\n console.warn('Children passed to TextRevealAnimation must be a string')\n return null\n }\n\n return (\n <span ref={spanRef} {...rest}>\n {lines?.map((line, i) => (\n <React.Fragment key={line}>\n <span\n className={clsx(\n styles.TextRevealAnimation,\n animationStarted && styles['TextRevealAnimation--visible'],\n animationStarted &&\n (hasAnimationCompleted ? styles['TextRevealAnimation'] : styles['TextRevealAnimation--animated']),\n )}\n style={{'--animation-delay': `${220 + i * 200}ms`} as React.CSSProperties}\n onAnimationEnd={() => onLineAnimationEnd(i)}\n >\n {line}\n </span>{' '}\n {/* The trailing space above is intentional. It prevents adjacent words at the start/end of lines from being rendered as a single word */}\n </React.Fragment>\n ))}\n </span>\n )\n },\n)\n"],"mappings":";;;;;;;AAaA,IAAa,IAAsB,EAAM,WACvC,SAAoC,EAAC,aAAU,GAAG,KAAO,GAAc;CACrE,IAAM,IAAU,EACd,CACF,GACM,EAAC,aAAS,EAA4B,KAAY,IAAI,CAAO,GAC7D,CAAC,GAAkB,KAAuB,EAAM,SAAS,EAAK,GAC9D,CAAC,GAAuB,KAA4B,EAAM,SAAS,EAAK,GAExE,KAAsB,MAAc;EACxC,AAAI,KAAS,MAAM,EAAM,SAAS,KAChC,EAAyB,EAAI;CAEjC;CAsCA,OApCA,QAAgB;EACd,IAAM,IAAK,EAAQ,SACb,IAAW,IAAI,sBACnB,MAAW;GACT,KAAK,IAAM,KAAS,GAClB,AAAI,EAAM,mBACR,EAAoB,EAAI,GACpB,KACF,EAAS,UAAU,CAAE;EAI7B,GACA;GACE,WAAW;GACX,YAAY;EACd,CACF;EAMA,OAJI,KACF,EAAS,QAAQ,CAAE,SAGR;GACX,AAAI,KACF,EAAS,UAAU,CAAE;EAEzB;CACF,GAAG,CAAC,CAAO,CAAC,GAER,OAAO,KAAa,aAAA,QAAA,IAAA,aAAsC,iBAAA,QAAA,IAAA,aAA0C,WAEtG,QAAQ,KAAK,yDAAyD,GAC/D,QAIP,kBAAC,QAAD;EAAM,KAAK;EAAS,GAAI;YACrB,GAAO,KAAK,GAAM,MACjB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACE,kBAAC,QAAD;GACE,WAAW,EACT,EAAO,qBACP,KAAoB,EAAO,iCAC3B,MACG,IAAwB,EAAO,sBAAyB,EAAO,iCACpE;GACA,OAAO,EAAC,qBAAqB,GAAG,MAAM,IAAI,IAAI,IAAG;GACjD,sBAAsB,EAAmB,CAAC;aAEzC;EACG,CAAA,GAAE,GAEM,EAAA,GAdK,CAcL,CACjB;CACG,CAAA;AAEV,CACF"}

package/esm/animation/TextRevealAnimation/TextRevealAnimation.module.js CHANGED Viewed

@@ -1,10 +1,11 @@
-import './TextRevealAnimation.module-BzK16DXS.css';var e = {
-	TextRevealAnimation: "Primer_Brand__TextRevealAnimation-module__TextRevealAnimation___W6_ey",
+import './TextRevealAnimation.module-BzK16DXS.css';//#region src/animation/TextRevealAnimation/TextRevealAnimation.module.css
+var e = "Primer_Brand__TextRevealAnimation-module__TextRevealAnimation___W6_ey", t = "Primer_Brand__TextRevealAnimation-module__wipe___IwKBR", n = {
+	TextRevealAnimation: e,
 	"TextRevealAnimation--visible": "Primer_Brand__TextRevealAnimation-module__TextRevealAnimation--visible___VS7mJ",
 	"TextRevealAnimation--animated": "Primer_Brand__TextRevealAnimation-module__TextRevealAnimation--animated___wKBYl",
-	wipe: "Primer_Brand__TextRevealAnimation-module__wipe___IwKBR"
+	wipe: t
 };
 //#endregion
-export { e as default };
+export { e as TextRevealAnimation, n as default, t as wipe };
 //# sourceMappingURL=TextRevealAnimation.module.js.map

package/esm/animation/TextRevealAnimation/useTextRevealAnimationLines.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTextRevealAnimationLines.js","names":[],"sources":["../../../src/animation/TextRevealAnimation/useTextRevealAnimationLines.ts"],"sourcesContent":["import {useRef, useEffect, useState, RefObject} from 'react'\n\nexport const useTextRevealAnimationLines = (text?: string, providedRef?: RefObject<HTMLElement \| null>) => {\n const internalRef = useRef<HTMLElement>(null)\n const ref = providedRef ?? internalRef\n const [lines, setLines] = useState<string[]>()\n\n useEffect(() => {\n if (!ref.current \|\| !text) return\n\n const wrapLines = () => {\n const element = ref.current\n\n if (!element \|\| !text) return\n\n const originalColor = window.getComputedStyle(element).color\n\n element.style.color = 'transparent'\n element.textContent = ''\n\n const words = text.split(' ')\n\n const lineBreakPositions: number[] = []\n let prevHeight = 0\n const linesArr: string[][] = []\n\n for (const word of words) {\n element.textContent += `${word} `\n const height = element.offsetHeight\n\n if (linesArr.length === 0) {\n prevHeight = height\n linesArr.push([word])\n continue\n }\n\n if (height > prevHeight) {\n lineBreakPositions.push(linesArr.length)\n linesArr.push([word])\n } else {\n linesArr.at(-1)?.push(word)\n }\n\n prevHeight = height\n }\n\n element.style.color = originalColor\n element.textContent = ''\n\n setLines(linesArr.map(line => line.join(' ')))\n }\n\n wrapLines()\n }, [text, ref])\n\n return {ref, lines}\n}\n"],"mappings":";;AAEA,IAAa,KAA+B,GAAe,MAAgD;CACzG,IAAM,IAAc,EAAoB,~~KAAK~~,~~EACvC~~,IAAM,KAAe,GACrB,CAAC,GAAO,KAAY,~~GAAoB~~;~~AAkD9C~~,~~QAhDA~~,QAAgB;~~AACV~~,~~GAAC~~,EAAI,WAAW,CAAC,YAEG;GACtB,IAAM,IAAU,EAAI;~~AAEpB~~,~~OAAI~~,CAAC,KAAW,CAAC,~~EAAM~~;GAEvB,IAAM,IAAgB,OAAO,iBAAiB,~~EAAQ~~,CAAC;~~AAGvD~~,~~GADA~~,EAAQ,MAAM,QAAQ,eACtB,EAAQ,cAAc;GAEtB,IAAM,IAAQ,EAAK,MAAM,~~IAAI~~,~~EAEvB~~,IAA+B,~~EAAE~~,~~EACnC~~,IAAa,GACX,IAAuB,~~EAAE~~;~~AAE/B~~,~~QAAK~~,IAAM,KAAQ,GAAO;~~AACxB~~,~~MAAQ~~,eAAe,GAAG,EAAK;IAC/B,IAAM,IAAS,EAAQ;~~AAEvB~~,~~QAAI~~,EAAS,WAAW,GAAG;~~AAEzB~~,~~KADA~~,IAAa,GACb,EAAS,KAAK,CAAC,~~EAAK~~,CAAC;~~AACrB;;AAUF~~,~~IAPI~~,IAAS,KACX,EAAmB,KAAK,EAAS,~~OAAO~~,~~EACxC~~,EAAS,KAAK,CAAC,~~EAAK~~,CAAC,~~IAErB~~,EAAS,GAAG,~~GAAG~~,EAAE,KAAK,~~EAAK~~,~~EAG7B~~,IAAa~~;;AAMf~~,~~GAHA~~,EAAQ,MAAM,QAAQ,GACtB,EAAQ,cAAc,IAEtB,EAAS,EAAS,KAAI,MAAQ,EAAK,KAAK,~~IAAI~~,CAAC,CAAC;~~MAGrC~~;~~IACV~~,CAAC,GAAM,~~EAAI~~,CAAC,~~EAER~~;EAAC;EAAK;~~EAAM~~"}
1	+ {"version":3,"file":"useTextRevealAnimationLines.js","names":[],"sources":["../../../src/animation/TextRevealAnimation/useTextRevealAnimationLines.ts"],"sourcesContent":["import {useRef, useEffect, useState, RefObject} from 'react'\n\nexport const useTextRevealAnimationLines = (text?: string, providedRef?: RefObject<HTMLElement \| null>) => {\n const internalRef = useRef<HTMLElement>(null)\n const ref = providedRef ?? internalRef\n const [lines, setLines] = useState<string[]>()\n\n useEffect(() => {\n if (!ref.current \|\| !text) return\n\n const wrapLines = () => {\n const element = ref.current\n\n if (!element \|\| !text) return\n\n const originalColor = window.getComputedStyle(element).color\n\n element.style.color = 'transparent'\n element.textContent = ''\n\n const words = text.split(' ')\n\n const lineBreakPositions: number[] = []\n let prevHeight = 0\n const linesArr: string[][] = []\n\n for (const word of words) {\n element.textContent += `${word} `\n const height = element.offsetHeight\n\n if (linesArr.length === 0) {\n prevHeight = height\n linesArr.push([word])\n continue\n }\n\n if (height > prevHeight) {\n lineBreakPositions.push(linesArr.length)\n linesArr.push([word])\n } else {\n linesArr.at(-1)?.push(word)\n }\n\n prevHeight = height\n }\n\n element.style.color = originalColor\n element.textContent = ''\n\n setLines(linesArr.map(line => line.join(' ')))\n }\n\n wrapLines()\n }, [text, ref])\n\n return {ref, lines}\n}\n"],"mappings":";;AAEA,IAAa,KAA+B,GAAe,MAAgD;CACzG,IAAM,IAAc,EAAoB,IAAI,GACtC,IAAM,KAAe,GACrB,CAAC,GAAO,KAAY,EAAmB;CAkD7C,OAhDA,QAAgB;EACV,CAAC,EAAI,WAAW,CAAC,YAEG;GACtB,IAAM,IAAU,EAAI;GAEpB,IAAI,CAAC,KAAW,CAAC,GAAM;GAEvB,IAAM,IAAgB,OAAO,iBAAiB,CAAO,CAAC,CAAC;GAGvD,AADA,EAAQ,MAAM,QAAQ,eACtB,EAAQ,cAAc;GAEtB,IAAM,IAAQ,EAAK,MAAM,GAAG,GAEtB,IAA+B,CAAC,GAClC,IAAa,GACX,IAAuB,CAAC;GAE9B,KAAK,IAAM,KAAQ,GAAO;IACxB,EAAQ,eAAe,GAAG,EAAK;IAC/B,IAAM,IAAS,EAAQ;IAEvB,IAAI,EAAS,WAAW,GAAG;KAEzB,AADA,IAAa,GACb,EAAS,KAAK,CAAC,CAAI,CAAC;KACpB;IACF;IASA,AAPI,IAAS,KACX,EAAmB,KAAK,EAAS,MAAM,GACvC,EAAS,KAAK,CAAC,CAAI,CAAC,KAEpB,EAAS,GAAG,EAAE,CAAC,EAAE,KAAK,CAAI,GAG5B,IAAa;GACf;GAKA,AAHA,EAAQ,MAAM,QAAQ,GACtB,EAAQ,cAAc,IAEtB,EAAS,EAAS,KAAI,MAAQ,EAAK,KAAK,GAAG,CAAC,CAAC;EAC/C,EAEA,CAAU;CACZ,GAAG,CAAC,GAAM,CAAG,CAAC,GAEP;EAAC;EAAK;CAAK;AACpB"}

package/esm/animation/useAnimation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAnimation.js","names":[],"sources":["../../src/animation/useAnimation.ts"],"sourcesContent":["import {CSSProperties, useContext, useMemo} from 'react'\nimport {AnimateProps, AnimationContext, AnimationVariants} from './AnimationProvider'\n\nimport styles from './Animation.module.css'\n\nconst animationTypeToClass = AnimationVariants.reduce((acc, key) => {\n acc[key] = styles[`Animation--${key}`]\n return acc\n}, {})\n\n/*\n A hook that returns CSS classes and styles for animating an element.\n * @param {AnimateProps} [animateProps] - An object containing animation properties.\n * @returns {{classes: string; styles: CSSProperties}} - An object containing CSS classes and styles for animating an element.\n */\nexport const useAnimation = (animateProps?: AnimateProps): {classes: string; styles: CSSProperties} => {\n const {disableAnimations} = useContext(AnimationContext)\n\n const animationClasses = useMemo(() => {\n if (!animateProps \|\| disableAnimations) {\n return ''\n }\n\n const defaultClasses = styles.Animation\n const dynamicClasses: string[] = []\n\n const animationType = typeof animateProps === 'string' ? animateProps : animateProps.variant\n const animationClass = animationTypeToClass[animationType]\n if (animationClass) {\n dynamicClasses.push(animationClass)\n }\n\n return `${defaultClasses} ${dynamicClasses.join(' ')}`\n }, [animateProps, disableAnimations])\n\n const animationStyles = useMemo(() => {\n if (!animateProps) {\n return {}\n }\n\n const newStyles: CSSProperties = {}\n\n if (typeof animateProps === 'object') {\n const {delay, duration, ease} = animateProps\n if (typeof delay === 'number') {\n newStyles.transitionDelay = `${delay}ms`\n }\n if (typeof duration === 'number') {\n newStyles.transitionDuration = `${duration}ms`\n }\n\n if (ease) {\n newStyles.transitionTimingFunction = ease\n }\n }\n\n return newStyles\n }, [animateProps])\n\n return {\n classes: animationClasses,\n styles: animationStyles,\n }\n}\n"],"mappings":";;;;AAKA,IAAM,IAAuB,EAAkB,QAAQ,GAAK,OAC1D,EAAI,KAAO,EAAO,cAAc,MACzB,IACN,~~EAAE~~,CAAC,~~EAOO~~,KAAgB,MAA0E;CACrG,IAAM,EAAC,yBAAqB,EAAW,~~EAAiB~~;~~AA2CxD~~,~~QAAO~~;EACL,SA1CuB,QAAc;~~AACrC~~,~~OAAI~~,CAAC,KAAgB,~~EACnB~~,~~QAAO~~;GAGT,IAAM,IAAiB,EAAO,WACxB,IAA2B,~~EAAE~~,~~EAG7B~~,IAAiB,EADD,OAAO,KAAiB,WAAW,IAAe,EAAa;~~AAMrF~~,~~UAJI~~,KACF,EAAe,KAAK,~~EAAe~~,~~EAG9B~~,GAAG,EAAe,GAAG,EAAe,KAAK,~~IAAI~~;~~KACnD~~,CAAC,GAAc,~~EAAkB~~,~~CA2BzB~~;EACT,QA1BsB,QAAc;~~AACpC~~,~~OAAI~~,CAAC,~~EACH~~,~~QAAO~~,~~EAAE~~;~~GAGX~~,IAAM,IAA2B,~~EAAE~~;~~AAEnC~~,~~OAAI~~,OAAO,KAAiB,UAAU;IACpC,IAAM,EAAC,UAAO,aAAU,YAAQ;~~AAQhC~~,~~IAPI~~,OAAO,KAAU,aACnB,EAAU,kBAAkB,GAAG,EAAM,MAEnC,OAAO,KAAa,aACtB,EAAU,qBAAqB,GAAG,EAAS,MAGzC,MACF,EAAU,2BAA2B~~;;AAIzC~~,~~UAAO~~;~~KACN~~,CAAC,~~EAAa~~,~~CAIP~~;~~EACT~~"}
1	+ {"version":3,"file":"useAnimation.js","names":[],"sources":["../../src/animation/useAnimation.ts"],"sourcesContent":["import {CSSProperties, useContext, useMemo} from 'react'\nimport {AnimateProps, AnimationContext, AnimationVariants} from './AnimationProvider'\n\nimport styles from './Animation.module.css'\n\nconst animationTypeToClass = AnimationVariants.reduce((acc, key) => {\n acc[key] = styles[`Animation--${key}`]\n return acc\n}, {})\n\n/*\n A hook that returns CSS classes and styles for animating an element.\n * @param {AnimateProps} [animateProps] - An object containing animation properties.\n * @returns {{classes: string; styles: CSSProperties}} - An object containing CSS classes and styles for animating an element.\n */\nexport const useAnimation = (animateProps?: AnimateProps): {classes: string; styles: CSSProperties} => {\n const {disableAnimations} = useContext(AnimationContext)\n\n const animationClasses = useMemo(() => {\n if (!animateProps \|\| disableAnimations) {\n return ''\n }\n\n const defaultClasses = styles.Animation\n const dynamicClasses: string[] = []\n\n const animationType = typeof animateProps === 'string' ? animateProps : animateProps.variant\n const animationClass = animationTypeToClass[animationType]\n if (animationClass) {\n dynamicClasses.push(animationClass)\n }\n\n return `${defaultClasses} ${dynamicClasses.join(' ')}`\n }, [animateProps, disableAnimations])\n\n const animationStyles = useMemo(() => {\n if (!animateProps) {\n return {}\n }\n\n const newStyles: CSSProperties = {}\n\n if (typeof animateProps === 'object') {\n const {delay, duration, ease} = animateProps\n if (typeof delay === 'number') {\n newStyles.transitionDelay = `${delay}ms`\n }\n if (typeof duration === 'number') {\n newStyles.transitionDuration = `${duration}ms`\n }\n\n if (ease) {\n newStyles.transitionTimingFunction = ease\n }\n }\n\n return newStyles\n }, [animateProps])\n\n return {\n classes: animationClasses,\n styles: animationStyles,\n }\n}\n"],"mappings":";;;;AAKA,IAAM,IAAuB,EAAkB,QAAQ,GAAK,OAC1D,EAAI,KAAO,EAAO,cAAc,MACzB,IACN,CAAC,CAAC,GAOQ,KAAgB,MAA0E;CACrG,IAAM,EAAC,yBAAqB,EAAW,CAAgB;CA2CvD,OAAO;EACL,SA1CuB,QAAc;GACrC,IAAI,CAAC,KAAgB,GACnB,OAAO;GAGT,IAAM,IAAiB,EAAO,WACxB,IAA2B,CAAC,GAG5B,IAAiB,EADD,OAAO,KAAiB,WAAW,IAAe,EAAa;GAMrF,OAJI,KACF,EAAe,KAAK,CAAc,GAG7B,GAAG,EAAe,GAAG,EAAe,KAAK,GAAG;EACrD,GAAG,CAAC,GAAc,CAAiB,CA2BxB;EACT,QA1BsB,QAAc;GACpC,IAAI,CAAC,GACH,OAAO,CAAC;GAGV,IAAM,IAA2B,CAAC;GAElC,IAAI,OAAO,KAAiB,UAAU;IACpC,IAAM,EAAC,UAAO,aAAU,YAAQ;IAQhC,AAPI,OAAO,KAAU,aACnB,EAAU,kBAAkB,GAAG,EAAM,MAEnC,OAAO,KAAa,aACtB,EAAU,qBAAqB,GAAG,EAAS,MAGzC,MACF,EAAU,2BAA2B;GAEzC;GAEA,OAAO;EACT,GAAG,CAAC,CAAY,CAIN;CACV;AACF"}