@fluentui/react-motion 9.6.5 → 9.6.6
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.
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-motion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 08 Jan 2025 18:29:14 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.6)
|
|
8
|
+
|
|
9
|
+
Wed, 08 Jan 2025 18:29:14 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.5..@fluentui/react-motion_v9.6.6)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: handle case when Animation.persist() does not exist ([PR #33282](https://github.com/microsoft/fluentui/pull/33282) by seanmonahan@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [9.6.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.5)
|
|
8
17
|
|
|
9
|
-
Mon, 16 Dec 2024 16:
|
|
18
|
+
Mon, 16 Dec 2024 16:26:49 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.4..@fluentui/react-motion_v9.6.5)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
function useAnimateAtomsInSupportedEnvironment() {
|
|
3
|
+
var _window_Animation;
|
|
4
|
+
// eslint-disable-next-line @nx/workspace-no-restricted-globals
|
|
5
|
+
const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof ((_window_Animation = window.Animation) === null || _window_Animation === void 0 ? void 0 : _window_Animation.prototype.persist) === 'function';
|
|
3
6
|
return React.useCallback((element, value, options)=>{
|
|
4
7
|
const atoms = Array.isArray(value) ? value : [
|
|
5
8
|
value
|
|
@@ -14,7 +17,13 @@ function useAnimateAtomsInSupportedEnvironment() {
|
|
|
14
17
|
duration: 1
|
|
15
18
|
}
|
|
16
19
|
});
|
|
17
|
-
|
|
20
|
+
if (SUPPORTS_PERSIST) {
|
|
21
|
+
animation.persist();
|
|
22
|
+
} else {
|
|
23
|
+
const resultKeyframe = keyframes[keyframes.length - 1];
|
|
24
|
+
var _element_style;
|
|
25
|
+
Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
|
|
26
|
+
}
|
|
18
27
|
return animation;
|
|
19
28
|
});
|
|
20
29
|
return {
|
|
@@ -60,7 +69,9 @@ function useAnimateAtomsInSupportedEnvironment() {
|
|
|
60
69
|
});
|
|
61
70
|
}
|
|
62
71
|
};
|
|
63
|
-
}, [
|
|
72
|
+
}, [
|
|
73
|
+
SUPPORTS_PERSIST
|
|
74
|
+
]);
|
|
64
75
|
}
|
|
65
76
|
/**
|
|
66
77
|
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n const { keyframes, ...params } = motion;\n const animation = element.animate(keyframes, {\n fill: 'forwards',\n\n ...params,\n ...(isReducedMotion && { duration: 1 }),\n });\n\n animation.persist();\n\n return animation;\n });\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n };\n },\n [],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["React","useAnimateAtomsInSupportedEnvironment","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n // eslint-disable-next-line @nx/workspace-no-restricted-globals\n const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n const { keyframes, ...params } = motion;\n const animation = element.animate(keyframes, {\n fill: 'forwards',\n\n ...params,\n ...(isReducedMotion && { duration: 1 }),\n });\n\n if (SUPPORTS_PERSIST) {\n animation.persist();\n } else {\n const resultKeyframe = keyframes[keyframes.length - 1];\n Object.assign(element.style ?? {}, resultKeyframe);\n }\n\n return animation;\n });\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n };\n },\n [SUPPORTS_PERSIST],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["React","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","resultKeyframe","length","Object","assign","style","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -11,6 +11,9 @@ Object.defineProperty(exports, "useAnimateAtoms", {
|
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
function useAnimateAtomsInSupportedEnvironment() {
|
|
14
|
+
var _window_Animation;
|
|
15
|
+
// eslint-disable-next-line @nx/workspace-no-restricted-globals
|
|
16
|
+
const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof ((_window_Animation = window.Animation) === null || _window_Animation === void 0 ? void 0 : _window_Animation.prototype.persist) === 'function';
|
|
14
17
|
return _react.useCallback((element, value, options)=>{
|
|
15
18
|
const atoms = Array.isArray(value) ? value : [
|
|
16
19
|
value
|
|
@@ -25,7 +28,13 @@ function useAnimateAtomsInSupportedEnvironment() {
|
|
|
25
28
|
duration: 1
|
|
26
29
|
}
|
|
27
30
|
});
|
|
28
|
-
|
|
31
|
+
if (SUPPORTS_PERSIST) {
|
|
32
|
+
animation.persist();
|
|
33
|
+
} else {
|
|
34
|
+
const resultKeyframe = keyframes[keyframes.length - 1];
|
|
35
|
+
var _element_style;
|
|
36
|
+
Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
|
|
37
|
+
}
|
|
29
38
|
return animation;
|
|
30
39
|
});
|
|
31
40
|
return {
|
|
@@ -71,7 +80,9 @@ function useAnimateAtomsInSupportedEnvironment() {
|
|
|
71
80
|
});
|
|
72
81
|
}
|
|
73
82
|
};
|
|
74
|
-
}, [
|
|
83
|
+
}, [
|
|
84
|
+
SUPPORTS_PERSIST
|
|
85
|
+
]);
|
|
75
86
|
}
|
|
76
87
|
/**
|
|
77
88
|
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n const { keyframes, ...params } = motion;\n const animation = element.animate(keyframes, {\n fill: 'forwards',\n\n ...params,\n ...(isReducedMotion && { duration: 1 }),\n });\n\n animation.persist();\n\n return animation;\n });\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n };\n },\n [],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["useAnimateAtoms","useAnimateAtomsInSupportedEnvironment","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n // eslint-disable-next-line @nx/workspace-no-restricted-globals\n const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n const { keyframes, ...params } = motion;\n const animation = element.animate(keyframes, {\n fill: 'forwards',\n\n ...params,\n ...(isReducedMotion && { duration: 1 }),\n });\n\n if (SUPPORTS_PERSIST) {\n animation.persist();\n } else {\n const resultKeyframe = keyframes[keyframes.length - 1];\n Object.assign(element.style ?? {}, resultKeyframe);\n }\n\n return animation;\n });\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n };\n },\n [SUPPORTS_PERSIST],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["useAnimateAtoms","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","resultKeyframe","length","Object","assign","style","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|