react-ui-animate 4.1.2 → 4.3.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 (37) hide show
  1. package/README.md +55 -43
  2. package/dist/animation/AnimationConfig.d.ts +63 -0
  3. package/dist/animation/controllers.d.ts +30 -0
  4. package/dist/animation/hooks/index.d.ts +0 -1
  5. package/dist/animation/hooks/useMount.d.ts +8 -13
  6. package/dist/animation/hooks/useValue.d.ts +6 -16
  7. package/dist/animation/index.d.ts +5 -5
  8. package/dist/animation/interpolation/index.d.ts +1 -1
  9. package/dist/animation/modules/MountedBlock.d.ts +5 -14
  10. package/dist/animation/modules/ScrollableBlock.d.ts +4 -15
  11. package/dist/animation/modules/index.d.ts +0 -1
  12. package/dist/animation/types.d.ts +25 -0
  13. package/dist/index.d.ts +6 -6
  14. package/dist/index.js +1 -1
  15. package/dist/index.js.map +1 -1
  16. package/package.json +6 -6
  17. package/dist/animation/controllers/index.d.ts +0 -8
  18. package/dist/animation/controllers/withConfig.d.ts +0 -5
  19. package/dist/animation/controllers/withDecay.d.ts +0 -7
  20. package/dist/animation/controllers/withDelay.d.ts +0 -6
  21. package/dist/animation/controllers/withEase.d.ts +0 -6
  22. package/dist/animation/controllers/withLoop.d.ts +0 -2
  23. package/dist/animation/controllers/withSequence.d.ts +0 -2
  24. package/dist/animation/controllers/withSpring.d.ts +0 -7
  25. package/dist/animation/controllers/withTiming.d.ts +0 -7
  26. package/dist/animation/core/FluidArrayController.d.ts +0 -7
  27. package/dist/animation/core/FluidController.d.ts +0 -34
  28. package/dist/animation/core/useFluidValue.d.ts +0 -3
  29. package/dist/animation/core/useFluidValues.d.ts +0 -3
  30. package/dist/animation/core/useMount.d.ts +0 -18
  31. package/dist/animation/helpers/animationType.d.ts +0 -59
  32. package/dist/animation/helpers/getToValue.d.ts +0 -2
  33. package/dist/animation/helpers/index.d.ts +0 -3
  34. package/dist/animation/helpers/isDefined.d.ts +0 -1
  35. package/dist/animation/hooks/useValues.d.ts +0 -8
  36. package/dist/animation/interpolation/interpolate.d.ts +0 -11
  37. package/dist/animation/modules/TransitionBlock.d.ts +0 -18
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  ### Install
8
8
 
9
- You can install react-ui-animate via npm or yarn:
9
+ You can install react-ui-animate via `npm` or `yarn`:
10
10
 
11
11
  ```sh
12
12
  npm i react-ui-animate
@@ -24,15 +24,13 @@ The `react-ui-animate` library provides a straightforward way to add animations
24
24
  import { animate, useValue } from 'react-ui-animate';
25
25
 
26
26
  export default function () {
27
- // Initialize an animated opacity value
28
- const opacity = useValue(0);
27
+ const opacity = useValue(0); // Initialize
29
28
 
30
29
  return (
31
- <div>
32
- {/* animate.div component uses the animated opacity value */}
30
+ <>
33
31
  <animate.div
34
32
  style={{
35
- opacity: opacity.value, // using opacity with value property
33
+ opacity: opacity.value, // Apply
36
34
  width: 100,
37
35
  padding: 20,
38
36
  background: '#39F',
@@ -40,39 +38,40 @@ export default function () {
40
38
  >
41
39
  ANIMATED
42
40
  </animate.div>
43
-
44
- {/* Clicking the button changes the opacity smoothly to 1 */}
45
- <button onClick={() => (opacity.value = 1)}>Animate Me</button>
46
- </div>
41
+
42
+ <button
43
+ onClick={() => {
44
+ opacity.value = 1 // Update
45
+ }}
46
+ >
47
+ Animate Me
48
+ </button>
49
+ </>
47
50
  );
48
51
  }
49
52
  ```
50
53
 
51
- In this example, clicking the "Animate Me" button smoothly changes the opacity of the animated block from 0 to 1.
54
+ In this example, clicking the `Animate Me` button changes the opacity from 0 to 1.
55
+
56
+ ---
52
57
 
53
- ### Key Features
58
+ ### Implementation Steps
54
59
 
55
- #### `useValue()`
60
+ #### 1. Initialize
56
61
 
57
62
  The `useValue()` hook is central to creating animations. It initializes an animated value and allows you to seamlessly update it to create dynamic effects.
58
63
 
59
64
  ```javascript
60
- const opacity = useValue(0); // Start with opacity set to 0
61
-
62
- // Use in style
63
- style={{
64
- opacity: opacity.value, // Access the animated opacity value
65
- }}
66
-
67
- // Update the value on user interaction
68
- onClick={() => (opacity.value = 1)} // Changes the opacity to 1
65
+ const opacity = useValue(0); // Initialize a animation value 0
69
66
  ```
70
67
 
71
- #### `animate.div`
68
+ #### 2. Apply
72
69
 
73
70
  `animate.div` is a special component designed to work with `useValue()`. It simplifies animating elements by directly using animated values.
74
71
 
75
- ```javascript
72
+ ```jsx
73
+ import { useValue, animate } from 'react-ui-animate'
74
+
76
75
  const width = useValue(100); // Start with a width of 100
77
76
 
78
77
  <animate.div
@@ -84,6 +83,29 @@ const width = useValue(100); // Start with a width of 100
84
83
  />;
85
84
  ```
86
85
 
86
+ #### 3. Update
87
+
88
+ To update the value simply assign the initialized animated node with a value.
89
+
90
+ ```jsx
91
+ import { useValue, withSpring } from 'react-ui-animate';
92
+
93
+ const width = useValue(100);
94
+
95
+ <button
96
+ onClick={() => {
97
+ // Update
98
+ width.value = withSpring(400);
99
+ }}
100
+ >
101
+ Update
102
+ </button>
103
+ ```
104
+
105
+ In this example, `withSpring` runs spring animation when updating the value.
106
+
107
+ ---
108
+
87
109
  #### `interpolate`
88
110
 
89
111
  The `interpolate()` function is useful for mapping values from one range to another, enabling more complex animations.
@@ -91,7 +113,7 @@ The `interpolate()` function is useful for mapping values from one range to anot
91
113
  ```javascript
92
114
  import { useValue, animate, interpolate } from 'react-ui-animate';
93
115
 
94
- const width = useValue(100); // Start with a width of 100
116
+ const width = useValue(100);
95
117
 
96
118
  <animate.div
97
119
  style={{
@@ -104,7 +126,7 @@ const width = useValue(100); // Start with a width of 100
104
126
 
105
127
  In this example, as the width changes from 100 to 200, the background color smoothly transitions from red to blue.
106
128
 
107
- #### Dynamic Animations and Sequence Transitions
129
+ #### Modifiers
108
130
 
109
131
  You can dynamically modify animation configurations by assigning values to an animated value using various animation functions.
110
132
 
@@ -123,17 +145,9 @@ x.value = withTiming(10, { duration: 5000 });
123
145
  To create sequential transitions using the `withSequence` function with dynamic modifiers like `withSpring` and `withTiming`:
124
146
 
125
147
  ```jsx
126
- x.value = withSequence([withSpring(50), withTiming(100), 200]);
148
+ x.value = withSequence([withSpring(50), withTiming(100), withEase(200)]);
127
149
  ```
128
150
 
129
- To delay an animation using the withDelay function:
130
-
131
- ```jsx
132
- x.value = withDelay(1000, withSpring(100));
133
- ```
134
-
135
- In this example, a spring animation to `100` will be applied after a 1-second delay.
136
-
137
151
  #### `useMount()`
138
152
 
139
153
  The `useMount()` hook facilitates managing the mounting and unmounting of a component with animations.
@@ -144,11 +158,7 @@ import { useMount } from 'react-ui-animate';
144
158
  export default function App() {
145
159
  const [visible, setVisible] = useState(false);
146
160
 
147
- const open = useMount(visible, {
148
- from: 0,
149
- enter: 1,
150
- exit: 0,
151
- });
161
+ const open = useMount(visible);
152
162
 
153
163
  return open((animation, mounted) => mounted && <animate.div />);
154
164
  }
@@ -160,6 +170,8 @@ In this example,
160
170
  2. The `useMount` hook takes `visible` as an argument and provides animation states for mounting and unmounting.
161
171
  3. The `open` function, returned by `useMount`, is used to conditionally render `animate.div` based on the `mounted` boolean and apply the transition animation.
162
172
 
173
+ ---
174
+
163
175
  ### Gestures
164
176
 
165
177
  The `react-ui-animate` library also provides several hooks for handling different types of gestures:
@@ -175,13 +187,13 @@ The `react-ui-animate` library also provides several hooks for handling differen
175
187
  Here’s an example of using the useDrag hook to enable drag gestures:
176
188
 
177
189
  ```jsx
178
- import { useValue, animate, useDrag } from 'react-ui-animate';
190
+ import { useValue, animate, useDrag, withSpring } from 'react-ui-animate';
179
191
 
180
192
  export const Draggable = () => {
181
193
  const translateX = useValue(0);
182
194
 
183
195
  const bind = useDrag(function ({ down, movementX }) {
184
- translateX.value = down ? movementX : 0;
196
+ translateX.value = down ? movementX : withSpring(0);
185
197
  });
186
198
 
187
199
  return (
@@ -191,7 +203,7 @@ export const Draggable = () => {
191
203
  width: 100,
192
204
  height: 100,
193
205
  backgroundColor: '#3399ff',
194
- translateX: translateX.value, // Use translateX with animated value
206
+ translateX: translateX.value,
195
207
  }}
196
208
  />
197
209
  );
@@ -0,0 +1,63 @@
1
+ import { Easing } from '@raidipesh78/re-motion';
2
+ export declare const AnimationConfig: {
3
+ Timing: {
4
+ BOUNCE: {
5
+ duration: number;
6
+ easing: typeof Easing.bounce;
7
+ };
8
+ EASE_IN: {
9
+ duration: number;
10
+ easing: (t: number) => number;
11
+ };
12
+ EASE_OUT: {
13
+ duration: number;
14
+ easing: (t: number) => number;
15
+ };
16
+ EASE_IN_OUT: {
17
+ duration: number;
18
+ easing: (t: number) => number;
19
+ };
20
+ POWER1: {
21
+ duration: number;
22
+ easing: (t: number) => number;
23
+ };
24
+ POWER2: {
25
+ duration: number;
26
+ easing: (t: number) => number;
27
+ };
28
+ POWER3: {
29
+ duration: number;
30
+ easing: (t: number) => number;
31
+ };
32
+ POWER4: {
33
+ duration: number;
34
+ easing: (t: number) => number;
35
+ };
36
+ LINEAR: {
37
+ duration: number;
38
+ easing: typeof Easing.linear;
39
+ };
40
+ };
41
+ Spring: {
42
+ ELASTIC: {
43
+ mass: number;
44
+ friction: number;
45
+ tension: number;
46
+ };
47
+ EASE: {
48
+ mass: number;
49
+ friction: number;
50
+ tension: number;
51
+ };
52
+ STIFF: {
53
+ mass: number;
54
+ friction: number;
55
+ tension: number;
56
+ };
57
+ WOBBLE: {
58
+ mass: number;
59
+ friction: number;
60
+ tension: number;
61
+ };
62
+ };
63
+ };
@@ -0,0 +1,30 @@
1
+ import { DriverConfig } from './types';
2
+ interface WithSpringOptions {
3
+ mass?: number;
4
+ tension?: number;
5
+ friction?: number;
6
+ onStart?: () => void;
7
+ onChange?: (v: number | string) => void;
8
+ onRest?: () => void;
9
+ }
10
+ export declare const withSpring: (to: number, options?: WithSpringOptions) => DriverConfig;
11
+ export declare const withEase: (to: number, options?: WithSpringOptions) => DriverConfig;
12
+ interface WithTimingOptions {
13
+ duration?: number;
14
+ easing?: (t: number) => number;
15
+ onStart?: () => void;
16
+ onChange?: (v: number | string) => void;
17
+ onRest?: () => void;
18
+ }
19
+ export declare const withTiming: (to: number, options?: WithTimingOptions) => DriverConfig;
20
+ interface WithDecayOptions {
21
+ velocity: number;
22
+ onStart?: () => void;
23
+ onChange?: (v: number | string) => void;
24
+ onRest?: () => void;
25
+ }
26
+ export declare const withDecay: (options: WithDecayOptions) => DriverConfig;
27
+ export declare const withSequence: (steps: DriverConfig[]) => DriverConfig;
28
+ export declare const withDelay: (delay: number) => DriverConfig;
29
+ export declare const withLoop: (controller: DriverConfig, iterations: number) => DriverConfig;
30
+ export {};
@@ -1,3 +1,2 @@
1
1
  export * from './useValue';
2
- export * from './useValues';
3
2
  export * from './useMount';
@@ -1,15 +1,10 @@
1
- import { FluidValue } from '@raidipesh78/re-motion';
2
- import { UseMountConfig as UseInternalMountConfig } from '../core/useMount';
3
- export interface UseMountConfig extends UseInternalMountConfig {
1
+ import { MotionValue } from '@raidipesh78/re-motion';
2
+ import { DriverConfig } from '../types';
3
+ export interface UseMountConfig {
4
+ from?: number;
5
+ enter?: DriverConfig;
6
+ exit?: DriverConfig;
4
7
  }
5
- /**
6
- * `useMount` handles mounting and unmounting of a component which captures current state
7
- * passed as an argument (`state`) and exposes the shadow state which handles the mount and unmount
8
- * of a component.
9
- *
10
- * @param { boolean } state - Boolean indicating the component should mount or unmount.
11
- * @param { UseMountConfig } config - Animation configuration.
12
- */
13
- export declare function useMount(state: boolean, config: UseMountConfig): (cb: (value: {
14
- value: FluidValue;
8
+ export declare const useMount: (state: boolean, config?: UseMountConfig) => (fn: (animation: {
9
+ value: MotionValue;
15
10
  }, mounted: boolean) => React.ReactNode) => import("react").ReactNode;
@@ -1,17 +1,7 @@
1
- import { FluidValue } from '@raidipesh78/re-motion';
2
- import type { UpdateValue, UseFluidValueConfig } from '../core/FluidController';
3
- export interface UseValueConfig extends UseFluidValueConfig {
4
- }
5
- /**
6
- * `useValue` returns an animation value with `.value` and `.currentValue` property which is
7
- * initialized when passed to argument (`initialValue`). The returned value persist until the lifetime of
8
- * a component. It doesn't cast any re-renders which can is very good for performance optimization.
9
- *
10
- * @param { number } initialValue - Initial value
11
- * @param { UseValueConfig } config - Animation configuration object.
12
- */
13
- export declare function useValue<T extends number | string>(initialValue: T, config?: UseValueConfig): {
14
- get value(): FluidValue;
15
- set value(to: number | string | UpdateValue | number[] | UpdateValue[]);
16
- readonly currentValue: string | number;
1
+ import { MotionValue } from '@raidipesh78/re-motion';
2
+ import { ToValue } from '../types';
3
+ export declare function useValue<V extends number | string>(initialValue: V): {
4
+ get value(): MotionValue<V>;
5
+ set value(u: MotionValue<V> | ToValue<V>);
6
+ readonly currentValue: V;
17
7
  };
@@ -1,5 +1,5 @@
1
- export { interpolate, bInterpolate } from './interpolation';
2
- export { MountedBlock, ScrollableBlock, TransitionBlock } from './modules';
3
- export { useValue, useValues, useMount, type UseValueConfig, type UseMountConfig, } from './hooks';
4
- export { withSpring, withTiming, withSequence, withDelay, withEase, withConfig, withDecay, withLoop, } from './controllers';
5
- export { AnimationConfig } from './helpers';
1
+ export { MountedBlock, ScrollableBlock } from './modules';
2
+ export { useValue, useMount, type UseMountConfig } from './hooks';
3
+ export { withSpring, withTiming, withSequence, withDelay, withDecay, withLoop, withEase, } from './controllers';
4
+ export { AnimationConfig } from './AnimationConfig';
5
+ export { interpolateNumbers } from './interpolation';
@@ -1 +1 @@
1
- export { interpolate, bInterpolate } from './interpolate';
1
+ export { interpolateNumbers } from './interpolateNumbers';
@@ -1,20 +1,11 @@
1
- import * as React from 'react';
1
+ import { ReactNode } from 'react';
2
+ import { MotionValue } from '@raidipesh78/re-motion';
2
3
  import { type UseMountConfig } from '../hooks';
3
- import { FluidValue } from '@raidipesh78/re-motion';
4
4
  interface MountedBlockProps extends Partial<UseMountConfig> {
5
5
  state: boolean;
6
6
  children: (animation: {
7
- value: FluidValue;
8
- }) => React.ReactNode;
7
+ value: MotionValue;
8
+ }) => ReactNode;
9
9
  }
10
- /**
11
- * MountedBlock - Higher order component which handles mounting and unmounting of a component.
12
- * @param { boolean } state - Boolean indicating the component should mount or unmount.
13
- * @param { function } children - Child as a function with `AnimatedValue` on `.value` property.
14
- * @param { number } } from - Number that dictates the beginning state for animation.
15
- * @param { number } enter - Number that dictates the entry state for animation.
16
- * @param { number } exit - Number that dictates the exit state for animation.
17
- * @param { UseValueConfig } config - Animation configuration for overall animation.
18
- */
19
- export declare const MountedBlock: ({ state, children, from, enter, exit, config, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
10
+ export declare const MountedBlock: ({ state, children, from, enter, exit, }: MountedBlockProps) => import("react/jsx-runtime").JSX.Element;
20
11
  export {};
@@ -1,22 +1,11 @@
1
- import * as React from 'react';
2
- import { FluidValue } from '@raidipesh78/re-motion';
3
- import { type UseValueConfig } from '../hooks';
1
+ import { ReactNode } from 'react';
2
+ import { MotionValue } from '@raidipesh78/re-motion';
4
3
  interface ScrollableBlockProps {
5
4
  children?: (animation: {
6
- value: FluidValue;
7
- }) => React.ReactNode;
5
+ value: MotionValue;
6
+ }) => ReactNode;
8
7
  direction?: 'single' | 'both';
9
8
  threshold?: number;
10
- animationConfig?: UseValueConfig;
11
9
  }
12
- /**
13
- * ScrollableBlock - Higher order component to handle the entrance or exit animation
14
- * of a component when it enters or exit the viewport. Accepts child as a function with
15
- * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
16
- * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
17
- * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
18
- * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
19
- * @prop { UseValueConfig } animationConfig - Animation config
20
- */
21
10
  export declare const ScrollableBlock: (props: ScrollableBlockProps) => import("react/jsx-runtime").JSX.Element;
22
11
  export {};
@@ -1,3 +1,2 @@
1
1
  export * from './MountedBlock';
2
2
  export * from './ScrollableBlock';
3
- export * from './TransitionBlock';
@@ -0,0 +1,25 @@
1
+ export interface WithCallbacks {
2
+ onStart?: (value: number | string) => void;
3
+ onChange?: (value: number | string) => void;
4
+ onRest?: (value: number | string) => void;
5
+ }
6
+ export type DriverConfig = {
7
+ type: 'spring' | 'timing' | 'decay' | 'sequence' | 'delay' | 'loop';
8
+ to?: number;
9
+ options?: {
10
+ controller?: DriverConfig;
11
+ iterations?: number;
12
+ delay?: number;
13
+ duration?: number;
14
+ easing?: (t: number) => number;
15
+ stiffness?: number;
16
+ damping?: number;
17
+ mass?: number;
18
+ velocity?: number;
19
+ steps?: DriverConfig[];
20
+ onStart?: () => void;
21
+ onChange?: (v: string | number) => void;
22
+ onComplete?: () => void;
23
+ };
24
+ };
25
+ export type ToValue<V> = DriverConfig | V;
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- export { Easing, makeFluid as makeAnimated, fluid as animate, } from '@raidipesh78/re-motion';
2
- export { AnimationConfig, MountedBlock, ScrollableBlock, TransitionBlock, } from './animation';
3
- export { interpolate, bInterpolate } from './animation';
4
- export { useValue, useMount, useValues } from './animation';
5
- export { withSpring, withTiming, withSequence, withDelay, withEase, withConfig, withDecay, withLoop, } from './animation';
1
+ export { Easing, makeMotion as makeAnimated, motion as animate, } from '@raidipesh78/re-motion';
2
+ export { AnimationConfig, MountedBlock, ScrollableBlock } from './animation';
3
+ export { useValue, useMount } from './animation';
4
+ export { withSpring, withTiming, withSequence, withDelay, withDecay, withLoop, withEase, } from './animation';
6
5
  export { useMeasure, useOutsideClick, useWindowDimension } from './hooks';
6
+ export { interpolateNumbers } from './animation';
7
7
  export { useDrag, useGesture, useMouseMove, useScroll, useWheel, } from './gestures/hooks';
8
8
  export { bin, clamp, mix, rubberClamp, move, snapTo } from './gestures/helpers';
9
- export type { UseValueConfig, UseMountConfig } from './animation';
9
+ export type { UseMountConfig } from './animation';
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- var e=require("@raidipesh78/re-motion"),t=require("react/jsx-runtime"),n=require("react");function i(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=i(n),o=function(e,t){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},o(e,t)};function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var a=function(){return a=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},a.apply(this,arguments)};function u(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function s(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,o=n.call(e),f=[];try{for(;(void 0===t||t-- >0)&&!(i=o.next()).done;)f.push(i.value)}catch(e){r={error:e}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return f}function l(e,t,n){if(n||2===arguments.length)for(var i,r=0,o=t.length;r<o;r++)!i&&r in t||(i||(i=Array.prototype.slice.call(t,0,r)),i[r]=t[r]);return e.concat(i||Array.prototype.slice.call(t))}"function"==typeof SuppressedError&&SuppressedError;var c=/[+-]?\d+(\.\d+)?|[\s]?\.\d+|#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/gi,h=/#[a-f\d]{3,}|transparent|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|burntsienna|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen/gi,d={transparent:"#00000000",aliceblue:"#f0f8ffff",antiquewhite:"#faebd7ff",aqua:"#00ffffff",aquamarine:"#7fffd4ff",azure:"#f0ffffff",beige:"#f5f5dcff",bisque:"#ffe4c4ff",black:"#000000ff",blanchedalmond:"#ffebcdff",blue:"#0000ffff",blueviolet:"#8a2be2ff",brown:"#a52a2aff",burlywood:"#deb887ff",burntsienna:"#ea7e5dff",cadetblue:"#5f9ea0ff",chartreuse:"#7fff00ff",chocolate:"#d2691eff",coral:"#ff7f50ff",cornflowerblue:"#6495edff",cornsilk:"#fff8dcff",crimson:"#dc143cff",cyan:"#00ffffff",darkblue:"#00008bff",darkcyan:"#008b8bff",darkgoldenrod:"#b8860bff",darkgray:"#a9a9a9ff",darkgreen:"#006400ff",darkgrey:"#a9a9a9ff",darkkhaki:"#bdb76bff",darkmagenta:"#8b008bff",darkolivegreen:"#556b2fff",darkorange:"#ff8c00ff",darkorchid:"#9932ccff",darkred:"#8b0000ff",darksalmon:"#e9967aff",darkseagreen:"#8fbc8fff",darkslateblue:"#483d8bff",darkslategray:"#2f4f4fff",darkslategrey:"#2f4f4fff",darkturquoise:"#00ced1ff",darkviolet:"#9400d3ff",deeppink:"#ff1493ff",deepskyblue:"#00bfffff",dimgray:"#696969ff",dimgrey:"#696969ff",dodgerblue:"#1e90ffff",firebrick:"#b22222ff",floralwhite:"#fffaf0ff",forestgreen:"#228b22ff",fuchsia:"#ff00ffff",gainsboro:"#dcdcdcff",ghostwhite:"#f8f8ffff",gold:"#ffd700ff",goldenrod:"#daa520ff",gray:"#808080ff",green:"#008000ff",greenyellow:"#adff2fff",grey:"#808080ff",honeydew:"#f0fff0ff",hotpink:"#ff69b4ff",indianred:"#cd5c5cff",indigo:"#4b0082ff",ivory:"#fffff0ff",khaki:"#f0e68cff",lavender:"#e6e6faff",lavenderblush:"#fff0f5ff",lawngreen:"#7cfc00ff",lemonchiffon:"#fffacdff",lightblue:"#add8e6ff",lightcoral:"#f08080ff",lightcyan:"#e0ffffff",lightgoldenrodyellow:"#fafad2ff",lightgray:"#d3d3d3ff",lightgreen:"#90ee90ff",lightgrey:"#d3d3d3ff",lightpink:"#ffb6c1ff",lightsalmon:"#ffa07aff",lightseagreen:"#20b2aaff",lightskyblue:"#87cefaff",lightslategray:"#778899ff",lightslategrey:"#778899ff",lightsteelblue:"#b0c4deff",lightyellow:"#ffffe0ff",lime:"#00ff00ff",limegreen:"#32cd32ff",linen:"#faf0e6ff",magenta:"#ff00ffff",maroon:"#800000ff",mediumaquamarine:"#66cdaaff",mediumblue:"#0000cdff",mediumorchid:"#ba55d3ff",mediumpurple:"#9370dbff",mediumseagreen:"#3cb371ff",mediumslateblue:"#7b68eeff",mediumspringgreen:"#00fa9aff",mediumturquoise:"#48d1ccff",mediumvioletred:"#c71585ff",midnightblue:"#191970ff",mintcream:"#f5fffaff",mistyrose:"#ffe4e1ff",moccasin:"#ffe4b5ff",navajowhite:"#ffdeadff",navy:"#000080ff",oldlace:"#fdf5e6ff",olive:"#808000ff",olivedrab:"#6b8e23ff",orange:"#ffa500ff",orangered:"#ff4500ff",orchid:"#da70d6ff",palegoldenrod:"#eee8aaff",palegreen:"#98fb98ff",paleturquoise:"#afeeeeff",palevioletred:"#db7093ff",papayawhip:"#ffefd5ff",peachpuff:"#ffdab9ff",peru:"#cd853fff",pink:"#ffc0cbff",plum:"#dda0ddff",powderblue:"#b0e0e6ff",purple:"#800080ff",rebeccapurple:"#663399ff",red:"#ff0000ff",rosybrown:"#bc8f8fff",royalblue:"#4169e1ff",saddlebrown:"#8b4513ff",salmon:"#fa8072ff",sandybrown:"#f4a460ff",seagreen:"#2e8b57ff",seashell:"#fff5eeff",sienna:"#a0522dff",silver:"#c0c0c0ff",skyblue:"#87ceebff",slateblue:"#6a5acdff",slategray:"#708090ff",slategrey:"#708090ff",snow:"#fffafaff",springgreen:"#00ff7fff",steelblue:"#4682b4ff",tan:"#d2b48cff",teal:"#008080ff",thistle:"#d8bfd8ff",tomato:"#ff6347ff",turquoise:"#40e0d0ff",violet:"#ee82eeff",wheat:"#f5deb3ff",white:"#ffffffff",whitesmoke:"#f5f5f5ff",yellow:"#ffff00ff",yellowgreen:"#9acd32ff"};function v(e){var t=function(e){return e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(e,t,n,i){return"#"+t+t+n+n+i+i}))}(e),n=function(e){return 7===e.length?e+"FF":e}(t),i=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);return{r:parseInt(i[1],16),g:parseInt(i[2],16),b:parseInt(i[3],16),a:parseInt(i[4],16)/255}}function m(e){var t=e.r,n=e.g,i=e.b,r=e.a;return"#"+(256|t).toString(16).slice(1)+(256|n).toString(16).slice(1)+(256|i).toString(16).slice(1)+(255*r|256).toString(16).slice(1)}var p=function(e,t,n,i){var r=s(t,4),o=r[0],f=r[1],a=r[2],u=r[3],l=e;if(l<o){if("identity"===n)return l;"clamp"===n&&(l=o)}if(l>f){if("identity"===i)return l;"clamp"===i&&(l=f)}return a===u?a:o===f?e<=o?a:u:(o===-1/0?l=-l:f===1/0?l-=o:l=(l-o)/(f-o),a===-1/0?l=-l:u===1/0?l+=a:l=l*(u-a)+a,l)},g=function(e,t,n,i){var r=s(t,4),o=r[0],f=r[1],a=r[2],u=r[3];if(a.length===u.length)return a.map((function(t,r){return"string"==typeof t?function(e,t){var n=s(t,4),i=n[0],r=n[1],o=n[2],f=n[3],a=v(o),u=v(f);return m({r:p(e,[i,r,a.r,u.r],"clamp","clamp"),g:p(e,[i,r,a.g,u.g],"clamp","clamp"),b:p(e,[i,r,a.b,u.b],"clamp","clamp"),a:p(e,[i,r,a.a,u.a],"clamp","clamp")})}(e,[o,f,t,u[r]]):p(e,[o,f,t,u[r]],n,i)}));throw new Error("Array length doesn't match")},y=function(e){return e.replace(c,"$")},b=function(e){return e.match(c).map((function(e){return-1!==e.indexOf("#")?e:Number(e)}))},x=function(e){return e.replace(h,(function(e){if(-1!==e.indexOf("#"))return m(v(e));if(Object.prototype.hasOwnProperty.call(d,e))return d[e];throw new Error("String cannot be parsed!")}))};function w(e,t,n,i){var r,o,f=null==i?void 0:i.extrapolate,a=null==i?void 0:i.extrapolateLeft,l=null==i?void 0:i.extrapolateRight,c=function(e,t,n){var i=t.length,r=[];e<t[0]?r=[t[0],t[1],n[0],n[1]]:e>t[i-1]&&(r=[t[i-2],t[i-1],n[i-2],n[i-1]]);for(var o=1;o<i;++o)if(e<=t[o]){r=[t[o-1],t[o],n[o-1],n[o]];break}return r}(e,t,n),h="extend";void 0!==a?h=a:void 0!==f&&(h=f);var d,v="extend";if(void 0!==l?v=l:void 0!==f&&(v=f),n.length){if("number"==typeof n[0])return p(e,c,h,v);if(Array.isArray(n[0]))return g(e,c,h,v);var m=s(c,4),w=m[0],E=m[1],k=m[2],M=m[3],_=x(k),I=x(M),A=y(_);if(d=I,y(_).trim().replace(/\s/g,"")===y(d).trim().replace(/\s/g,"")){var O=b(_),T=b(I),S=g(e,[w,E,O,T],h,v);try{for(var C=u(S),L=C.next();!L.done;L=C.next()){var Y=L.value;A=A.replace("$",Y)}}catch(e){r={error:e}}finally{try{L&&!L.done&&(o=C.return)&&o.call(C)}finally{if(r)throw r.error}}return A}throw new Error("Output range doesn't match string format!")}throw new Error("Output range cannot be Empty")}var E=function(t,n,i,r){return t instanceof e.FluidValue?t.interpolate(n,i,r):w(t,n,i,r)},k=function(e){return null!=e};function M(e,t){return"number"==typeof e||"string"==typeof e?{toValue:e,config:t}:e}var _={ELASTIC:{mass:1,friction:18,tension:250},BOUNCE:{duration:500,easing:e.Easing.bounce},EASE:{mass:1,friction:26,tension:170},STIFF:{mass:1,friction:18,tension:350},WOOBLE:{mass:1,friction:8,tension:250},EASE_IN:{duration:500,easing:e.Easing.in(e.Easing.ease)},EASE_OUT:{duration:500,easing:e.Easing.out(e.Easing.ease)},EASE_IN_OUT:{duration:500,easing:e.Easing.inOut(e.Easing.ease)},POWER1:{duration:500,easing:e.Easing.bezier(.17,.42,.51,.97)},POWER2:{duration:500,easing:e.Easing.bezier(.07,.11,.13,1)},POWER3:{duration:500,easing:e.Easing.bezier(.09,.7,.16,1.04)},POWER4:{duration:500,easing:e.Easing.bezier(.05,.54,0,1.03)},LINEAR:{duration:500,easing:e.Easing.linear}},I=function(){function t(t,n){this.iterationsSoFar=0,this.fluid=new e.FluidValue(t),this.defaultConfig=n}return t.prototype.getAnimation=function(t,n){if("string"==typeof t.toValue)return e.native(this.fluid,{toValue:t.toValue});if(k(null==n?void 0:n.duration)||(null==n?void 0:n.immediate)){if(!k(t.toValue))throw new Error("No `toValue` is defined");var i={toValue:t.toValue,duration:(null==n?void 0:n.immediate)?0:null==n?void 0:n.duration,easing:null==n?void 0:n.easing};return e.timing(this.fluid,i)}if(null==n?void 0:n.decay){var r={velocity:null==n?void 0:n.velocity,deceleration:null==n?void 0:n.deceleration};return e.decay(this.fluid,r)}if(!k(t.toValue))throw new Error("No `toValue` is defined");var o={toValue:t.toValue,mass:null==n?void 0:n.mass,tension:null==n?void 0:n.tension,friction:null==n?void 0:n.friction,restDistance:null==n?void 0:n.restDistance};return e.spring(this.fluid,o)},t.prototype.runAnimation=function(t,n){var i,r,o=this,f=a(a({},this.defaultConfig),t.config),u=null!==(i=null==f?void 0:f.loop)&&void 0!==i?i:0,s=null!==(r=null==f?void 0:f.delay)&&void 0!==r?r:0;this.fluid.removeAllListeners(),(null==f?void 0:f.onStart)&&f.onStart(this.fluid.get()),(null==f?void 0:f.onChange)&&this.fluid.addListener((function(e){var t;return null===(t=null==f?void 0:f.onChange)||void 0===t?void 0:t.call(f,e)}));var l=e.sequence([e.delay(s),this.getAnimation(t,f)]),c=function(e){var t;e.finished&&(null===(t=null==f?void 0:f.onRest)||void 0===t||t.call(f,e.value),null==n||n(e.value))},h=function(e){e.finished&&(o.iterationsSoFar++,-1===u||o.iterationsSoFar<u?(l.reset(),l.start(h)):c(e))};l.start(k(null==f?void 0:f.loop)?h:c)},t.prototype.setFluid=function(e,t){var n=this;if(e)if(Array.isArray(e)){var i=0,r=function(o){++i!==e.length?n.runAnimation(e[i],r):t&&t(o)};this.runAnimation(e[i],r)}else this.runAnimation(e,t)},t.prototype.getFluid=function(){return this.fluid},t}(),A=function(e,t){var i=n.useRef(new I(e,t)).current,r=n.useCallback((function(e,t){i.setFluid(e,t)}),[]);return[n.useMemo((function(){return i.getFluid()}),[]),r]};function O(e,t){var i=n.useRef(!0),r=s(A(e,a(a({},_.EASE),t)),2),o=r[0],f=r[1],u=n.useCallback((function(e){Array.isArray(e)?queueMicrotask((function(){return f(e.map((function(e){return M(e)})))})):queueMicrotask((function(){return f(M(e))}))}),[]);return n.useLayoutEffect((function(){i.current||u(e),i.current=!1}),[e,t]),{set value(e){u(e)},get value(){return o},get currentValue(){return o.get()}}}var T=function(){function e(e,t){this.fluidControllers=e.map((function(e){return new I(e,t)}))}return e.prototype.setFluid=function(e,t){this.fluidControllers.map((function(n,i){n.setFluid(e[i],t)}))},e.prototype.getFluid=function(){return this.fluidControllers.map((function(e){return e.getFluid()}))},e}();function S(e,t){var i=function(e,t){var i=s(n.useState(!1),2),r=i[0],o=i[1],f=n.useRef(t).current,a=f.from,u=f.enter,l=f.exit,c=f.config,h=s(A(a,c),2),d=h[0],v=h[1];return n.useLayoutEffect((function(){e?(o(!0),queueMicrotask((function(){return v(Array.isArray(u)?u.map((function(e){return M(e,c)})):M(u,c))}))):v(Array.isArray(l)?l.map((function(e){return M(e,c)})):M(l,c),(function(){o(!1),d.getSubscriptions().forEach((function(e){return d.removeSubscription(e)}))}))}),[e]),function(e){return e(d,r)}}(e,t);return function(e){return i((function(t,n){return e({value:t},n)}))}}function C(e){return e?1:0}function L(e,t,n){return Math.min(Math.max(e,t),n)}function Y(e,t,n){return 0===t||Math.abs(t)===1/0?function(e,t){return Math.pow(e,5*t)}(e,n):e*t*n/(t+n*e)}var V=function(e,t){return{toValue:e,config:t}},R=function(e){return e.reduce((function(e,t){return Array.isArray(t)?e.push.apply(e,l([],s(R(t)),!1)):e.push(M(t)),e}),[])};function q(e,t){var n=new Map;return t.forEach((function(t){var i=s(t,3),r=i[0],o=i[1],f=i[2],a=void 0!==f&&f;n.set(r,function(e,t,n,i){return void 0===i&&(i=!1),e.forEach((function(e){e.addEventListener(t,n,i)})),function(){e.forEach((function(e){e.removeEventListener(t,n,i)}))}}(e,r,o,a))})),function(e){var t,i;try{for(var r=u(n.entries()),o=r.next();!o.done;o=r.next()){var f=s(o.value,2),a=f[0],l=f[1];if(!e)return void l();-1!==e.indexOf(a)&&l()}}catch(e){t={error:e}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(t)throw t.error}}}}var D=function(e,t){return{x:e,y:t}},X=function(){function e(){this.lastTimeStamp=Date.now(),this.isActive=!1,this.targetElements=[]}return e.prototype._initEvents=function(){},e.prototype._cancelEvents=function(){this._subscribe&&this._subscribe()},e.prototype.applyCallback=function(e){this.callback=e},e.prototype.applyGesture=function(e){var t=this,n=e.targetElement,i=e.targetElements,r=e.callback,o=e.config;return this.targetElement=n,this.targetElements=i.map((function(e){return e.current})),this.callback=r,this.config=o,this._initEvents(),function(){return t._subscribe&&t._subscribe()}},e._VELOCITY_LIMIT=20,e}(),F=function(e){function t(){var t=e.apply(this,l([],s(arguments),!1))||this;return t.movementStart=D(0,0),t.initialMovement=D(0,0),t.movement=D(0,0),t.previousMovement=D(0,0),t.translation=D(0,0),t.offset=D(0,0),t.velocity=D(0,0),t}return f(t,e),t.prototype._initEvents=function(){(this.targetElement||this.targetElements.length>0)&&(this._subscribe=q([window],[["mousedown",this.pointerDown.bind(this)],["mousemove",this.pointerMove.bind(this)],["mouseup",this.pointerUp.bind(this)],["touchstart",this.pointerDown.bind(this),{passive:!1}],["touchmove",this.pointerMove.bind(this),{passive:!1}],["touchend",this.pointerUp.bind(this)]]))},t.prototype._cancelEvents=function(){this._subscribe&&this._subscribe(["mousedown","mousemove","touchstart","touchmove"])},t.prototype._handleCallback=function(){var e=this;this.callback&&this.callback({args:[this.currentIndex],down:this.isActive,movementX:this.movement.x,movementY:this.movement.y,offsetX:this.translation.x,offsetY:this.translation.y,velocityX:this.velocity.x,velocityY:this.velocity.y,distanceX:Math.abs(this.movement.x),distanceY:Math.abs(this.movement.y),directionX:Math.sign(this.movement.x),directionY:Math.sign(this.movement.y),cancel:function(){e._cancelEvents()}})},t.prototype.pointerDown=function(e){var t;"touchstart"===e.type?this.movementStart={x:e.touches[0].clientX,y:e.touches[0].clientY}:this.movementStart={x:e.clientX,y:e.clientY},this.movement={x:0,y:0},this.offset={x:this.translation.x,y:this.translation.y},this.previousMovement={x:0,y:0},this.velocity={x:0,y:0};var n=this.targetElements.find((function(t){return t===e.target}));if(e.target===this.targetElement||n){this.isActive=!0,e.preventDefault(),n&&(this.currentIndex=this.targetElements.indexOf(n));var i=(null===(t=this.config)||void 0===t?void 0:t.initial)&&this.config.initial(),r=null==i?void 0:i.movementX,o=null==i?void 0:i.movementY;this.initialMovement={x:null!=r?r:0,y:null!=o?o:0},this.movement={x:this.initialMovement.x,y:this.initialMovement.y},this.previousMovement={x:this.initialMovement.x,y:this.initialMovement.y},this._handleCallback()}},t.prototype.pointerMove=function(e){if(this.isActive){e.preventDefault();var t=Date.now(),n=L(t-this.lastTimeStamp,.1,64);this.lastTimeStamp=t;var i=n/1e3;"touchmove"===e.type?this.movement={x:this.initialMovement.x+(e.touches[0].clientX-this.movementStart.x),y:this.initialMovement.y+(e.touches[0].clientY-this.movementStart.y)}:this.movement={x:this.initialMovement.x+(e.clientX-this.movementStart.x),y:this.initialMovement.y+(e.clientY-this.movementStart.y)},this.translation={x:this.offset.x+this.movement.x,y:this.offset.y+this.movement.y},this.velocity={x:L((this.movement.x-this.previousMovement.x)/i/1e3,-1*X._VELOCITY_LIMIT,X._VELOCITY_LIMIT),y:L((this.movement.y-this.previousMovement.y)/i/1e3,-1*X._VELOCITY_LIMIT,X._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()}},t.prototype.pointerUp=function(){this.isActive&&(this.isActive=!1,this._handleCallback(),this._cancelEvents(),this._initEvents())},t}(X),j=function(e){function t(){var t=e.apply(this,l([],s(arguments),!1))||this;return t.movement=D(0,0),t.previousMovement=D(0,0),t.velocity=D(0,0),t.direction=D(0,0),t}return f(t,e),t.prototype._initEvents=function(){this.targetElement?this._subscribe=q([this.targetElement],[["mousemove",this.onMouseMove.bind(this)]]):this.targetElements.length>0?this._subscribe=q(this.targetElements,[["mousemove",this.onMouseMove.bind(this)]]):this._subscribe=q([window],[["mousemove",this.onMouseMove.bind(this)]])},t.prototype._handleCallback=function(){var e;this.callback&&this.callback({args:[this.currentIndex],event:this.event,isMoving:this.isActive,target:null===(e=this.event)||void 0===e?void 0:e.target,mouseX:this.movement.x,mouseY:this.movement.y,velocityX:this.velocity.x,velocityY:this.velocity.y,directionX:this.direction.x,directionY:this.direction.y})},t.prototype.onMouseMove=function(e){var t=this,n=this.targetElements.find((function(t){return t===e.target}));n&&(this.currentIndex=this.targetElements.indexOf(n)),this.event=e;var i=Date.now(),r=Math.min(i-this.lastTimeStamp,64);this.lastTimeStamp=i;var o=r/1e3,f=e.clientX,a=e.clientY;this.movement={x:f,y:a},-1!==this.isActiveID&&(this.isActive=!0,clearTimeout(this.isActiveID)),this.isActiveID=setTimeout((function(){t.isActive=!1,t.direction={x:0,y:0},t.velocity={x:0,y:0},t._handleCallback()}),250);var u=this.movement.x-this.previousMovement.x,s=this.movement.y-this.previousMovement.y;this.direction={x:Math.sign(u),y:Math.sign(s)},this.velocity={x:L(u/o/1e3,-1*X._VELOCITY_LIMIT,X._VELOCITY_LIMIT),y:L(s/o/1e3,-1*X._VELOCITY_LIMIT,X._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()},t}(X),W=function(e){function t(){var t=e.apply(this,l([],s(arguments),!1))||this;return t.movement=D(0,0),t.previousMovement=D(0,0),t.direction=D(0,0),t.velocity=D(0,0),t}return f(t,e),t.prototype._initEvents=function(){this.targetElement?this._subscribe=q([this.targetElement],[["scroll",this.scrollElementListener.bind(this)]]):this._subscribe=q([window],[["scroll",this.scrollListener.bind(this)]])},t.prototype._handleCallback=function(){this.callback&&this.callback({isScrolling:this.isActive,scrollX:this.movement.x,scrollY:this.movement.y,velocityX:this.velocity.x,velocityY:this.velocity.y,directionX:this.direction.x,directionY:this.direction.y})},t.prototype.onScroll=function(e){var t=this,n=e.x,i=e.y,r=Date.now(),o=Math.min(r-this.lastTimeStamp,64);this.lastTimeStamp=r;var f=o/1e3;this.movement={x:n,y:i},-1!==this.isActiveID&&(this.isActive=!0,clearTimeout(this.isActiveID)),this.isActiveID=setTimeout((function(){t.isActive=!1,t.direction={x:0,y:0},t.velocity={x:0,y:0},t._handleCallback()}),250);var a=this.movement.x-this.previousMovement.x,u=this.movement.y-this.previousMovement.y;this.direction={x:Math.sign(a),y:Math.sign(u)},this.velocity={x:L(a/f/1e3,-1*X._VELOCITY_LIMIT,X._VELOCITY_LIMIT),y:L(u/f/1e3,-1*X._VELOCITY_LIMIT,X._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()},t.prototype.scrollListener=function(){var e=window.pageYOffset,t=window.pageXOffset;this.onScroll({x:t,y:e})},t.prototype.scrollElementListener=function(){var e,t,n=(null===(e=this.targetElement)||void 0===e?void 0:e.scrollLeft)||0,i=(null===(t=this.targetElement)||void 0===t?void 0:t.scrollTop)||0;this.onScroll({x:n,y:i})},t}(X),P=function(e){function t(){var t=e.apply(this,l([],s(arguments),!1))||this;return t.movement=D(0,0),t.previousMovement=D(0,0),t.direction=D(0,0),t.velocity=D(0,0),t.delta=D(0,0),t.offset=D(0,0),t.translation=D(0,0),t}return f(t,e),t.prototype._initEvents=function(){this.targetElement&&(this._subscribe=q([this.targetElement],[["wheel",this.onWheel.bind(this)]]))},t.prototype._handleCallback=function(){this.callback&&this.callback({target:this.targetElement,isWheeling:this.isActive,deltaX:this.delta.x,deltaY:this.delta.y,directionX:this.direction.x,directionY:this.direction.y,movementX:this.movement.x,movementY:this.movement.y,offsetX:this.offset.x,offsetY:this.offset.y,velocityX:this.velocity.x,velocityY:this.velocity.y})},t.prototype.onWheel=function(e){var t=this,n=e.deltaX,i=e.deltaY,r=e.deltaMode,o=Date.now(),f=Math.min(o-this.lastTimeStamp,64);this.lastTimeStamp=o;var a=f/1e3;this.isActive=!0,-1!==this.isActiveID&&(this.isActive=!0,clearTimeout(this.isActiveID)),this.isActiveID=setTimeout((function(){t.isActive=!1,t.translation={x:t.offset.x,y:t.offset.y},t._handleCallback(),t.velocity={x:0,y:0},t.movement={x:0,y:0}}),200),1===r?(n*=40,i*=40):2===r&&(n*=800,i*=800),this.delta={x:n,y:i},this.movement={x:this.movement.x+n,y:this.movement.y+i},this.offset={x:this.translation.x+this.movement.x,y:this.translation.y+this.movement.y};var u=this.movement.x-this.previousMovement.x,s=this.movement.y-this.previousMovement.y;this.direction={x:Math.sign(u),y:Math.sign(s)},this.velocity={x:L(u/a/1e3,-1*X._VELOCITY_LIMIT,X._VELOCITY_LIMIT),y:L(s/a/1e3,-1*X._VELOCITY_LIMIT,X._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()},t}(X),z=function(e){var t=r.useRef(),n=r.useRef([]),i=r.useRef(new Map).current;return r.useEffect((function(){var t,n;try{for(var r=u(i.entries()),o=r.next();!o.done;o=r.next()){var f=s(o.value,2)[1],a=f.keyIndex,l=f.gesture,c=s(e[a],3)[2];l.applyCallback(c)}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}}),[e]),r.useEffect((function(){return e.forEach((function(e,r){var o=s(e,4),f=o[0],a=o[1],u=o[2],l=o[3];queueMicrotask((function(){return i.set(f,{keyIndex:r,gesture:a,unsubscribe:a.applyGesture({targetElement:t.current,targetElements:n.current,callback:u,config:l})})}))})),function(){var e,t;try{for(var n=u(i.entries()),r=n.next();!r.done;r=n.next()){var o=s(r.value,2)[1].unsubscribe;o&&o()}}catch(t){e={error:t}}finally{try{r&&!r.done&&(t=n.return)&&t.call(n)}finally{if(e)throw e.error}}}})),function(e){return null==e?{ref:t}:(n.current[e]=n.current[e]||r.createRef(),{ref:n.current[e]})}};Object.defineProperty(exports,"Easing",{enumerable:!0,get:function(){return e.Easing}}),Object.defineProperty(exports,"animate",{enumerable:!0,get:function(){return e.fluid}}),Object.defineProperty(exports,"makeAnimated",{enumerable:!0,get:function(){return e.makeFluid}}),exports.AnimationConfig=_,exports.MountedBlock=function(e){var n=e.state,i=e.children,r=e.from,o=void 0===r?0:r,f=e.enter,a=void 0===f?1:f,u=e.exit,s=S(n,{from:o,enter:a,exit:void 0===u?0:u,config:e.config});return t.jsx(t.Fragment,{children:s((function(e,t){return t&&i({value:e.value})}))})},exports.ScrollableBlock=function(e){var n=e.children,i=e.direction,o=void 0===i?"single":i,f=e.animationConfig,a=e.threshold,u=void 0===a?.2:a,l=r.useRef(null),c=O(0,f);return r.useEffect((function(){var e=l.current,t=new IntersectionObserver((function(e){s(e,1)[0].isIntersecting?c.value=1:"both"===o&&(c.value=0)}),{root:null,threshold:u});return e&&t.observe(e),function(){e&&t.unobserve(e)}}),[]),t.jsx("div",{ref:l,children:n&&n({value:c.value})})},exports.TransitionBlock=function(e){var n=e.state,i=e.children,r=e.config,o=O(C(n),r);return t.jsx(t.Fragment,{children:i({value:o.value})})},exports.bInterpolate=function(e,t,n,i){return E(e,[0,1],[t,n],i)},exports.bin=C,exports.clamp=L,exports.interpolate=E,exports.mix=function(e,t,n){return t*(1-e)+n*e},exports.move=function(e,t,n){var i=e[t],r=e.length,o=t-n;if(o>0)return l(l(l(l([],s(e.slice(0,n)),!1),[i],!1),s(e.slice(n,t)),!1),s(e.slice(t+1,r)),!1);if(o<0){var f=n+1;return l(l(l(l([],s(e.slice(0,t)),!1),s(e.slice(t+1,f)),!1),[i],!1),s(e.slice(f,r)),!1)}return e},exports.rubberClamp=function(e,t,n,i){return void 0===i&&(i=.15),0===i?L(e,t,n):e<t?-Y(t-e,n-t,i)+t:e>n?+Y(e-n,n-t,i)+n:e},exports.snapTo=function(e,t,n){var i=e+.2*t,r=function(e){return Math.abs(e-i)},o=n.map(r),f=Math.min.apply(Math,l([],s(o),!1));return n.reduce((function(e,t){return r(t)===f?t:e}))},exports.useDrag=function(e,t){var n=r.useRef(new F).current;return z([["drag",n,e,t]])},exports.useGesture=function(e){var t=e.onDrag,n=e.onWheel,i=e.onScroll,o=e.onMouseMove,f=r.useRef(new F).current,a=r.useRef(new P).current,u=r.useRef(new W).current,s=r.useRef(new j).current;return z([["drag",f,t],["wheel",a,n],["scroll",u,i],["move",s,o]])},exports.useMeasure=function(e,t){var i=n.useRef(null),r=n.useRef([]),o=n.useRef(e);return n.useEffect((function(){return o.current=e,function(){o.current=function(){return!1}}}),t),n.useEffect((function(){var e=i.current||document.documentElement,t=r.current,n=new ResizeObserver((function(t){var n=s(t,1)[0].target.getBoundingClientRect(),i=n.left,r=n.top,f=n.width,a=n.height,u=window.pageXOffset,l=window.pageYOffset;if(o){if(e===document.documentElement)return;o.current({left:i+u,top:r+l,width:f,height:a,vLeft:i,vTop:r})}})),f=new ResizeObserver((function(e){var t=[],n=[],i=[],r=[],f=[],a=[];e.forEach((function(e){var o=e.target.getBoundingClientRect(),u=o.left,s=o.top,l=o.width,c=o.height,h=u+window.pageXOffset,d=s+window.pageYOffset;t.push(h),n.push(d),i.push(l),r.push(c),f.push(u),a.push(s)})),o&&o.current({left:t,top:n,width:i,height:r,vLeft:f,vTop:a})}));return e&&(e===document.documentElement&&t.length>0?t.forEach((function(e){f.observe(e.current)})):n.observe(e)),function(){e&&(e===document.documentElement&&t.length>0?t.forEach((function(e){f.unobserve(e.current)})):n.unobserve(e))}}),[]),function(e){return null==e?{ref:i}:(r.current[e]=r.current[e]||n.createRef(),{ref:r.current[e]})}},exports.useMount=S,exports.useMouseMove=function(e){var t=r.useRef(new j).current;return z([["move",t,e]])},exports.useOutsideClick=function(e,t,i){var r=n.useRef();r.current||(r.current=t),n.useEffect((function(){return r.current=t,function(){r.current=function(){return!1}}}),i),n.useEffect((function(){var t=q([document],[["mousedown",function(t){var n=t.target;n&&n.isConnected&&(e.current&&!e.current.contains(n)&&r.current&&r.current(t))}]]);return function(){return t&&t()}}),[])},exports.useScroll=function(e){var t=r.useRef(new W).current;return z([["scroll",t,e]])},exports.useValue=O,exports.useValues=function(e,t){var i=n.useRef(!0),r=s(function(e,t){var i=n.useRef(new T(e,t)).current,r=n.useCallback((function(e,t){i.setFluid(e,t)}),[]);return[n.useMemo((function(){return i.getFluid()}),[]),r]}(e,a(a({},_.EASE),t)),2),o=r[0],f=r[1],u=n.useCallback((function(e){var t=e.map((function(e){return Array.isArray(e)?e.map((function(e){return M(e)})):M(e)}));queueMicrotask((function(){return f(t)}))}),[]);return n.useLayoutEffect((function(){i.current||u(e),i.current=!1}),[e,t]),{set value(e){u(e)},get value(){return o},get currentValue(){return o.map((function(e){return e.get()}))}}},exports.useWheel=function(e){var t=r.useRef(new P).current;return z([["wheel",t,e]])},exports.useWindowDimension=function(e,t){var i=n.useRef({width:0,height:0,innerWidth:0,innerHeight:0}),r=n.useRef(e);n.useEffect((function(){return r.current=e,function(){r.current=function(){return!1}}}),t),n.useEffect((function(){var e=new ResizeObserver((function(e){var t=s(e,1)[0].target,n=t.clientWidth,o=t.clientHeight,f=window.innerWidth,u=window.innerHeight;i.current={width:n,height:o,innerWidth:f,innerHeight:u},r&&r.current(a({},i.current))}));return e.observe(document.documentElement),function(){return e.unobserve(document.documentElement)}}),[])},exports.withConfig=V,exports.withDecay=function(e){return{config:a({decay:!0},e)}},exports.withDelay=function(e,t){return a(a({},t),{config:a(a({},t.config),{delay:e})})},exports.withEase=function(e,t){return V(e,a(a({},_.EASE),t))},exports.withLoop=function(e,t){if(Array.isArray(e)){for(var n=[],i=0;i<t;i++)n=n.concat(e);return n}return Array(t).fill({toValue:e.toValue,config:a(a({},e.config),{loop:t})})},exports.withSequence=function(e){return R(e)},exports.withSpring=function(e,t){return V(e,a(a({},_.ELASTIC),t))},exports.withTiming=function(e,t){return V(e,a({duration:250},t))};
1
+ var e=require("@raidipesh78/re-motion"),t=require("react/jsx-runtime"),n=require("react");function i(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var r=i(n);function o(t){var i=e.useMotionValue(t),r=n.useRef(),o=n.useCallback((function(t){var n,o;if(null===(n=r.current)||void 0===n||n.call(r),r.current=void 0,t&&"object"==typeof t){var f=t.type,a=t.to,s=t.options;if((null==s?void 0:s.onChange)&&(r.current=i.subscribe(s.onChange)),"sequence"===f){var l=(null!==(o=null==s?void 0:s.steps)&&void 0!==o?o:[]).map((function(t){var n,r;return"decay"===t.type?e.decay(i,null===(n=null==t?void 0:t.options)||void 0===n?void 0:n.velocity,t.options):"delay"===t.type?e.delay(null===(r=null==t?void 0:t.options)||void 0===r?void 0:r.delay):("spring"===t.type?e.spring:e.timing)(i,t.to,t.options)}));return void e.sequence(l).start()}if("loop"===f){var u=function(t){var n,r,o;if("decay"===t.type)return e.decay(i,null===(n=t.options)||void 0===n?void 0:n.velocity,t.options);if("spring"===t.type)return e.spring(i,null==t?void 0:t.to,t.options);if("timing"===t.type)return e.timing(i,null==t?void 0:t.to,t.options);if("sequence"===t.type)return e.sequence(null===(r=t.options)||void 0===r?void 0:r.steps.map(u));if("delay"===t.type)return e.delay(null===(o=t.options)||void 0===o?void 0:o.delay);throw new Error('Unsupported driver type "'.concat(t.type,'" in loop()'))},c=u(null==s?void 0:s.controller);return void e.loop(c,null==s?void 0:s.iterations).start()}"spring"===f?e.spring(i,a,s).start():"timing"===f?e.timing(i,a,s).start():"decay"===f&&e.decay(i,null==s?void 0:s.velocity,s).start()}else i.set(t)}),[]);return n.useEffect((function(){return function(){var e;null===(e=r.current)||void 0===e||e.call(r),r.current=void 0}}),[]),{get value(){return i},set value(t){t instanceof e.MotionValue||o(t)},get currentValue(){return i.current}}}var f=function(e,t){return f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},f(e,t)};function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}f(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var s=function(){return s=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},s.apply(this,arguments)};function l(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function u(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,o=n.call(e),f=[];try{for(;(void 0===t||t-- >0)&&!(i=o.next()).done;)f.push(i.value)}catch(e){r={error:e}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return f}function c(e,t,n){if(n||2===arguments.length)for(var i,r=0,o=t.length;r<o;r++)!i&&r in t||(i||(i=Array.prototype.slice.call(t,0,r)),i[r]=t[r]);return e.concat(i||Array.prototype.slice.call(t))}"function"==typeof SuppressedError&&SuppressedError;var h={Timing:{BOUNCE:{duration:500,easing:e.Easing.bounce},EASE_IN:{duration:500,easing:e.Easing.in(e.Easing.ease)},EASE_OUT:{duration:500,easing:e.Easing.out(e.Easing.ease)},EASE_IN_OUT:{duration:500,easing:e.Easing.inOut(e.Easing.ease)},POWER1:{duration:500,easing:e.Easing.bezier(.17,.42,.51,.97)},POWER2:{duration:500,easing:e.Easing.bezier(.07,.11,.13,1)},POWER3:{duration:500,easing:e.Easing.bezier(.09,.7,.16,1.04)},POWER4:{duration:500,easing:e.Easing.bezier(.05,.54,0,1.03)},LINEAR:{duration:500,easing:e.Easing.linear}},Spring:{ELASTIC:{mass:1,friction:18,tension:250},EASE:{mass:1,friction:26,tension:170},STIFF:{mass:1,friction:18,tension:350},WOBBLE:{mass:1,friction:8,tension:250}}},d=function(e,t){var n,i,r;return{type:"spring",to:e,options:{stiffness:null!==(n=null==t?void 0:t.tension)&&void 0!==n?n:100,damping:null!==(i=null==t?void 0:t.friction)&&void 0!==i?i:10,mass:null!==(r=null==t?void 0:t.mass)&&void 0!==r?r:1,onStart:null==t?void 0:t.onStart,onChange:null==t?void 0:t.onChange,onComplete:null==t?void 0:t.onRest}}},v=function(e,t){return d(e,s(s({},t),h.Spring.EASE))},m=function(e,t){var i,r,f,a=u(n.useState(e),2),l=a[0],c=a[1],h=n.useRef({from:null!==(i=null==t?void 0:t.from)&&void 0!==i?i:0,enter:null!==(r=null==t?void 0:t.enter)&&void 0!==r?r:d(1),exit:null!==(f=null==t?void 0:t.exit)&&void 0!==f?f:d(0)}).current,v=o(h.from),m=h.enter,p=h.exit;return n.useLayoutEffect((function(){e?(c(!0),queueMicrotask((function(){v.value=m}))):queueMicrotask((function(){v.value=s(s({},p),{options:s(s({},p.options),{onComplete:function(){var e,t;c(!1),null===(t=null===(e=null==p?void 0:p.options)||void 0===e?void 0:e.onComplete)||void 0===t||t.call(e),v.value.destroy()}})})}))}),[e,m,p]),function(e){return e({value:v.value},l)}},p=/[+-]?\d+(\.\d+)?|[\s]?\.\d+|#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/gi,y=/#[a-f\d]{3,}|transparent|aliceblue|antiquewhite|aqua|aquamarine|azure|beige|bisque|black|blanchedalmond|blue|blueviolet|brown|burlywood|burntsienna|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|fuchsia|gainsboro|ghostwhite|gold|goldenrod|gray|green|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|lime|limegreen|linen|magenta|maroon|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|navy|oldlace|olive|olivedrab|orange|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|purple|rebeccapurple|red|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|silver|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|teal|thistle|tomato|turquoise|violet|wheat|white|whitesmoke|yellow|yellowgreen/gi,g={transparent:"#00000000",aliceblue:"#f0f8ffff",antiquewhite:"#faebd7ff",aqua:"#00ffffff",aquamarine:"#7fffd4ff",azure:"#f0ffffff",beige:"#f5f5dcff",bisque:"#ffe4c4ff",black:"#000000ff",blanchedalmond:"#ffebcdff",blue:"#0000ffff",blueviolet:"#8a2be2ff",brown:"#a52a2aff",burlywood:"#deb887ff",burntsienna:"#ea7e5dff",cadetblue:"#5f9ea0ff",chartreuse:"#7fff00ff",chocolate:"#d2691eff",coral:"#ff7f50ff",cornflowerblue:"#6495edff",cornsilk:"#fff8dcff",crimson:"#dc143cff",cyan:"#00ffffff",darkblue:"#00008bff",darkcyan:"#008b8bff",darkgoldenrod:"#b8860bff",darkgray:"#a9a9a9ff",darkgreen:"#006400ff",darkgrey:"#a9a9a9ff",darkkhaki:"#bdb76bff",darkmagenta:"#8b008bff",darkolivegreen:"#556b2fff",darkorange:"#ff8c00ff",darkorchid:"#9932ccff",darkred:"#8b0000ff",darksalmon:"#e9967aff",darkseagreen:"#8fbc8fff",darkslateblue:"#483d8bff",darkslategray:"#2f4f4fff",darkslategrey:"#2f4f4fff",darkturquoise:"#00ced1ff",darkviolet:"#9400d3ff",deeppink:"#ff1493ff",deepskyblue:"#00bfffff",dimgray:"#696969ff",dimgrey:"#696969ff",dodgerblue:"#1e90ffff",firebrick:"#b22222ff",floralwhite:"#fffaf0ff",forestgreen:"#228b22ff",fuchsia:"#ff00ffff",gainsboro:"#dcdcdcff",ghostwhite:"#f8f8ffff",gold:"#ffd700ff",goldenrod:"#daa520ff",gray:"#808080ff",green:"#008000ff",greenyellow:"#adff2fff",grey:"#808080ff",honeydew:"#f0fff0ff",hotpink:"#ff69b4ff",indianred:"#cd5c5cff",indigo:"#4b0082ff",ivory:"#fffff0ff",khaki:"#f0e68cff",lavender:"#e6e6faff",lavenderblush:"#fff0f5ff",lawngreen:"#7cfc00ff",lemonchiffon:"#fffacdff",lightblue:"#add8e6ff",lightcoral:"#f08080ff",lightcyan:"#e0ffffff",lightgoldenrodyellow:"#fafad2ff",lightgray:"#d3d3d3ff",lightgreen:"#90ee90ff",lightgrey:"#d3d3d3ff",lightpink:"#ffb6c1ff",lightsalmon:"#ffa07aff",lightseagreen:"#20b2aaff",lightskyblue:"#87cefaff",lightslategray:"#778899ff",lightslategrey:"#778899ff",lightsteelblue:"#b0c4deff",lightyellow:"#ffffe0ff",lime:"#00ff00ff",limegreen:"#32cd32ff",linen:"#faf0e6ff",magenta:"#ff00ffff",maroon:"#800000ff",mediumaquamarine:"#66cdaaff",mediumblue:"#0000cdff",mediumorchid:"#ba55d3ff",mediumpurple:"#9370dbff",mediumseagreen:"#3cb371ff",mediumslateblue:"#7b68eeff",mediumspringgreen:"#00fa9aff",mediumturquoise:"#48d1ccff",mediumvioletred:"#c71585ff",midnightblue:"#191970ff",mintcream:"#f5fffaff",mistyrose:"#ffe4e1ff",moccasin:"#ffe4b5ff",navajowhite:"#ffdeadff",navy:"#000080ff",oldlace:"#fdf5e6ff",olive:"#808000ff",olivedrab:"#6b8e23ff",orange:"#ffa500ff",orangered:"#ff4500ff",orchid:"#da70d6ff",palegoldenrod:"#eee8aaff",palegreen:"#98fb98ff",paleturquoise:"#afeeeeff",palevioletred:"#db7093ff",papayawhip:"#ffefd5ff",peachpuff:"#ffdab9ff",peru:"#cd853fff",pink:"#ffc0cbff",plum:"#dda0ddff",powderblue:"#b0e0e6ff",purple:"#800080ff",rebeccapurple:"#663399ff",red:"#ff0000ff",rosybrown:"#bc8f8fff",royalblue:"#4169e1ff",saddlebrown:"#8b4513ff",salmon:"#fa8072ff",sandybrown:"#f4a460ff",seagreen:"#2e8b57ff",seashell:"#fff5eeff",sienna:"#a0522dff",silver:"#c0c0c0ff",skyblue:"#87ceebff",slateblue:"#6a5acdff",slategray:"#708090ff",slategrey:"#708090ff",snow:"#fffafaff",springgreen:"#00ff7fff",steelblue:"#4682b4ff",tan:"#d2b48cff",teal:"#008080ff",thistle:"#d8bfd8ff",tomato:"#ff6347ff",turquoise:"#40e0d0ff",violet:"#ee82eeff",wheat:"#f5deb3ff",white:"#ffffffff",whitesmoke:"#f5f5f5ff",yellow:"#ffff00ff",yellowgreen:"#9acd32ff"};function b(e){var t=function(e){return e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(e,t,n,i){return"#"+t+t+n+n+i+i}))}(e),n=function(e){return 7===e.length?e+"FF":e}(t),i=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);return{r:parseInt(i[1],16),g:parseInt(i[2],16),b:parseInt(i[3],16),a:parseInt(i[4],16)/255}}function x(e){var t=e.r,n=e.g,i=e.b,r=e.a;return"#"+(256|t).toString(16).slice(1)+(256|n).toString(16).slice(1)+(256|i).toString(16).slice(1)+(255*r|256).toString(16).slice(1)}var w=function(e,t,n,i){var r=u(t,4),o=r[0],f=r[1],a=r[2],s=r[3],l=e;if(l<o){if("identity"===n)return l;"clamp"===n&&(l=o)}if(l>f){if("identity"===i)return l;"clamp"===i&&(l=f)}return a===s?a:o===f?e<=o?a:s:(o===-1/0?l=-l:f===1/0?l-=o:l=(l-o)/(f-o),a===-1/0?l=-l:s===1/0?l+=a:l=l*(s-a)+a,l)},E=function(e,t,n,i){var r=u(t,4),o=r[0],f=r[1],a=r[2],s=r[3];if(a.length===s.length)return a.map((function(t,r){return"string"==typeof t?function(e,t){var n=u(t,4),i=n[0],r=n[1],o=n[2],f=n[3],a=b(o),s=b(f);return x({r:w(e,[i,r,a.r,s.r],"clamp","clamp"),g:w(e,[i,r,a.g,s.g],"clamp","clamp"),b:w(e,[i,r,a.b,s.b],"clamp","clamp"),a:w(e,[i,r,a.a,s.a],"clamp","clamp")})}(e,[o,f,t,s[r]]):w(e,[o,f,t,s[r]],n,i)}));throw new Error("Array length doesn't match")},k=function(e){return e.replace(p,"$")},M=function(e){return e.match(p).map((function(e){return-1!==e.indexOf("#")?e:Number(e)}))},_=function(e){return e.replace(y,(function(e){if(-1!==e.indexOf("#"))return x(b(e));if(Object.prototype.hasOwnProperty.call(g,e))return g[e];throw new Error("String cannot be parsed!")}))};function I(e,t){var n=new Map;return t.forEach((function(t){var i=u(t,3),r=i[0],o=i[1],f=i[2],a=void 0!==f&&f;n.set(r,function(e,t,n,i){return void 0===i&&(i=!1),e.forEach((function(e){e.addEventListener(t,n,i)})),function(){e.forEach((function(e){e.removeEventListener(t,n,i)}))}}(e,r,o,a))})),function(e){var t,i;try{for(var r=l(n.entries()),o=r.next();!o.done;o=r.next()){var f=u(o.value,2),a=f[0],s=f[1];if(!e)return void s();-1!==e.indexOf(a)&&s()}}catch(e){t={error:e}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(t)throw t.error}}}}function O(e,t,n){return Math.min(Math.max(e,t),n)}function T(e,t,n){return 0===t||Math.abs(t)===1/0?function(e,t){return Math.pow(e,5*t)}(e,n):e*t*n/(t+n*e)}var C=function(e,t){return{x:e,y:t}},S=function(){function e(){this.lastTimeStamp=Date.now(),this.isActive=!1,this.targetElements=[]}return e.prototype._initEvents=function(){},e.prototype._cancelEvents=function(){this._subscribe&&this._subscribe()},e.prototype.applyCallback=function(e){this.callback=e},e.prototype.applyGesture=function(e){var t=this,n=e.targetElement,i=e.targetElements,r=e.callback,o=e.config;return this.targetElement=n,this.targetElements=i.map((function(e){return e.current})),this.callback=r,this.config=o,this._initEvents(),function(){return t._subscribe&&t._subscribe()}},e._VELOCITY_LIMIT=20,e}(),L=function(e){function t(){var t=e.apply(this,c([],u(arguments),!1))||this;return t.movementStart=C(0,0),t.initialMovement=C(0,0),t.movement=C(0,0),t.previousMovement=C(0,0),t.translation=C(0,0),t.offset=C(0,0),t.velocity=C(0,0),t}return a(t,e),t.prototype._initEvents=function(){(this.targetElement||this.targetElements.length>0)&&(this._subscribe=I([window],[["mousedown",this.pointerDown.bind(this)],["mousemove",this.pointerMove.bind(this)],["mouseup",this.pointerUp.bind(this)],["touchstart",this.pointerDown.bind(this),{passive:!1}],["touchmove",this.pointerMove.bind(this),{passive:!1}],["touchend",this.pointerUp.bind(this)]]))},t.prototype._cancelEvents=function(){this._subscribe&&this._subscribe(["mousedown","mousemove","touchstart","touchmove"])},t.prototype._handleCallback=function(){var e=this;this.callback&&this.callback({args:[this.currentIndex],down:this.isActive,movementX:this.movement.x,movementY:this.movement.y,offsetX:this.translation.x,offsetY:this.translation.y,velocityX:this.velocity.x,velocityY:this.velocity.y,distanceX:Math.abs(this.movement.x),distanceY:Math.abs(this.movement.y),directionX:Math.sign(this.movement.x),directionY:Math.sign(this.movement.y),cancel:function(){e._cancelEvents()}})},t.prototype.pointerDown=function(e){var t;"touchstart"===e.type?this.movementStart={x:e.touches[0].clientX,y:e.touches[0].clientY}:this.movementStart={x:e.clientX,y:e.clientY},this.movement={x:0,y:0},this.offset={x:this.translation.x,y:this.translation.y},this.previousMovement={x:0,y:0},this.velocity={x:0,y:0};var n=this.targetElements.find((function(t){return t===e.target}));if(e.target===this.targetElement||n){this.isActive=!0,e.preventDefault(),n&&(this.currentIndex=this.targetElements.indexOf(n));var i=(null===(t=this.config)||void 0===t?void 0:t.initial)&&this.config.initial(),r=null==i?void 0:i.movementX,o=null==i?void 0:i.movementY;this.initialMovement={x:null!=r?r:0,y:null!=o?o:0},this.movement={x:this.initialMovement.x,y:this.initialMovement.y},this.previousMovement={x:this.initialMovement.x,y:this.initialMovement.y},this._handleCallback()}},t.prototype.pointerMove=function(e){if(this.isActive){e.preventDefault();var t=Date.now(),n=O(t-this.lastTimeStamp,.1,64);this.lastTimeStamp=t;var i=n/1e3;"touchmove"===e.type?this.movement={x:this.initialMovement.x+(e.touches[0].clientX-this.movementStart.x),y:this.initialMovement.y+(e.touches[0].clientY-this.movementStart.y)}:this.movement={x:this.initialMovement.x+(e.clientX-this.movementStart.x),y:this.initialMovement.y+(e.clientY-this.movementStart.y)},this.translation={x:this.offset.x+this.movement.x,y:this.offset.y+this.movement.y},this.velocity={x:O((this.movement.x-this.previousMovement.x)/i/1e3,-1*S._VELOCITY_LIMIT,S._VELOCITY_LIMIT),y:O((this.movement.y-this.previousMovement.y)/i/1e3,-1*S._VELOCITY_LIMIT,S._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()}},t.prototype.pointerUp=function(){this.isActive&&(this.isActive=!1,this._handleCallback(),this._cancelEvents(),this._initEvents())},t}(S),Y=function(e){function t(){var t=e.apply(this,c([],u(arguments),!1))||this;return t.movement=C(0,0),t.previousMovement=C(0,0),t.velocity=C(0,0),t.direction=C(0,0),t}return a(t,e),t.prototype._initEvents=function(){this.targetElement?this._subscribe=I([this.targetElement],[["mousemove",this.onMouseMove.bind(this)]]):this.targetElements.length>0?this._subscribe=I(this.targetElements,[["mousemove",this.onMouseMove.bind(this)]]):this._subscribe=I([window],[["mousemove",this.onMouseMove.bind(this)]])},t.prototype._handleCallback=function(){var e;this.callback&&this.callback({args:[this.currentIndex],event:this.event,isMoving:this.isActive,target:null===(e=this.event)||void 0===e?void 0:e.target,mouseX:this.movement.x,mouseY:this.movement.y,velocityX:this.velocity.x,velocityY:this.velocity.y,directionX:this.direction.x,directionY:this.direction.y})},t.prototype.onMouseMove=function(e){var t=this,n=this.targetElements.find((function(t){return t===e.target}));n&&(this.currentIndex=this.targetElements.indexOf(n)),this.event=e;var i=Date.now(),r=Math.min(i-this.lastTimeStamp,64);this.lastTimeStamp=i;var o=r/1e3,f=e.clientX,a=e.clientY;this.movement={x:f,y:a},-1!==this.isActiveID&&(this.isActive=!0,clearTimeout(this.isActiveID)),this.isActiveID=setTimeout((function(){t.isActive=!1,t.direction={x:0,y:0},t.velocity={x:0,y:0},t._handleCallback()}),250);var s=this.movement.x-this.previousMovement.x,l=this.movement.y-this.previousMovement.y;this.direction={x:Math.sign(s),y:Math.sign(l)},this.velocity={x:O(s/o/1e3,-1*S._VELOCITY_LIMIT,S._VELOCITY_LIMIT),y:O(l/o/1e3,-1*S._VELOCITY_LIMIT,S._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()},t}(S),A=function(e){function t(){var t=e.apply(this,c([],u(arguments),!1))||this;return t.movement=C(0,0),t.previousMovement=C(0,0),t.direction=C(0,0),t.velocity=C(0,0),t}return a(t,e),t.prototype._initEvents=function(){this.targetElement?this._subscribe=I([this.targetElement],[["scroll",this.scrollElementListener.bind(this)]]):this._subscribe=I([window],[["scroll",this.scrollListener.bind(this)]])},t.prototype._handleCallback=function(){this.callback&&this.callback({isScrolling:this.isActive,scrollX:this.movement.x,scrollY:this.movement.y,velocityX:this.velocity.x,velocityY:this.velocity.y,directionX:this.direction.x,directionY:this.direction.y})},t.prototype.onScroll=function(e){var t=this,n=e.x,i=e.y,r=Date.now(),o=Math.min(r-this.lastTimeStamp,64);this.lastTimeStamp=r;var f=o/1e3;this.movement={x:n,y:i},-1!==this.isActiveID&&(this.isActive=!0,clearTimeout(this.isActiveID)),this.isActiveID=setTimeout((function(){t.isActive=!1,t.direction={x:0,y:0},t.velocity={x:0,y:0},t._handleCallback()}),250);var a=this.movement.x-this.previousMovement.x,s=this.movement.y-this.previousMovement.y;this.direction={x:Math.sign(a),y:Math.sign(s)},this.velocity={x:O(a/f/1e3,-1*S._VELOCITY_LIMIT,S._VELOCITY_LIMIT),y:O(s/f/1e3,-1*S._VELOCITY_LIMIT,S._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()},t.prototype.scrollListener=function(){var e=window.pageYOffset,t=window.pageXOffset;this.onScroll({x:t,y:e})},t.prototype.scrollElementListener=function(){var e,t,n=(null===(e=this.targetElement)||void 0===e?void 0:e.scrollLeft)||0,i=(null===(t=this.targetElement)||void 0===t?void 0:t.scrollTop)||0;this.onScroll({x:n,y:i})},t}(S),R=function(e){function t(){var t=e.apply(this,c([],u(arguments),!1))||this;return t.movement=C(0,0),t.previousMovement=C(0,0),t.direction=C(0,0),t.velocity=C(0,0),t.delta=C(0,0),t.offset=C(0,0),t.translation=C(0,0),t}return a(t,e),t.prototype._initEvents=function(){this.targetElement&&(this._subscribe=I([this.targetElement],[["wheel",this.onWheel.bind(this)]]))},t.prototype._handleCallback=function(){this.callback&&this.callback({target:this.targetElement,isWheeling:this.isActive,deltaX:this.delta.x,deltaY:this.delta.y,directionX:this.direction.x,directionY:this.direction.y,movementX:this.movement.x,movementY:this.movement.y,offsetX:this.offset.x,offsetY:this.offset.y,velocityX:this.velocity.x,velocityY:this.velocity.y})},t.prototype.onWheel=function(e){var t=this,n=e.deltaX,i=e.deltaY,r=e.deltaMode,o=Date.now(),f=Math.min(o-this.lastTimeStamp,64);this.lastTimeStamp=o;var a=f/1e3;this.isActive=!0,-1!==this.isActiveID&&(this.isActive=!0,clearTimeout(this.isActiveID)),this.isActiveID=setTimeout((function(){t.isActive=!1,t.translation={x:t.offset.x,y:t.offset.y},t._handleCallback(),t.velocity={x:0,y:0},t.movement={x:0,y:0}}),200),1===r?(n*=40,i*=40):2===r&&(n*=800,i*=800),this.delta={x:n,y:i},this.movement={x:this.movement.x+n,y:this.movement.y+i},this.offset={x:this.translation.x+this.movement.x,y:this.translation.y+this.movement.y};var s=this.movement.x-this.previousMovement.x,l=this.movement.y-this.previousMovement.y;this.direction={x:Math.sign(s),y:Math.sign(l)},this.velocity={x:O(s/a/1e3,-1*S._VELOCITY_LIMIT,S._VELOCITY_LIMIT),y:O(l/a/1e3,-1*S._VELOCITY_LIMIT,S._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()},t}(S),q=function(e){var t=r.useRef(),n=r.useRef([]),i=r.useRef(new Map).current;return r.useEffect((function(){var t,n;try{for(var r=l(i.entries()),o=r.next();!o.done;o=r.next()){var f=u(o.value,2)[1],a=f.keyIndex,s=f.gesture,c=u(e[a],3)[2];s.applyCallback(c)}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}}),[e]),r.useEffect((function(){return e.forEach((function(e,r){var o=u(e,4),f=o[0],a=o[1],s=o[2],l=o[3];queueMicrotask((function(){return i.set(f,{keyIndex:r,gesture:a,unsubscribe:a.applyGesture({targetElement:t.current,targetElements:n.current,callback:s,config:l})})}))})),function(){var e,t;try{for(var n=l(i.entries()),r=n.next();!r.done;r=n.next()){var o=u(r.value,2)[1].unsubscribe;o&&o()}}catch(t){e={error:t}}finally{try{r&&!r.done&&(t=n.return)&&t.call(n)}finally{if(e)throw e.error}}}})),function(e){return null==e?{ref:t}:(n.current[e]=n.current[e]||r.createRef(),{ref:n.current[e]})}};Object.defineProperty(exports,"Easing",{enumerable:!0,get:function(){return e.Easing}}),Object.defineProperty(exports,"animate",{enumerable:!0,get:function(){return e.motion}}),Object.defineProperty(exports,"makeAnimated",{enumerable:!0,get:function(){return e.makeMotion}}),exports.AnimationConfig=h,exports.MountedBlock=function(e){var n=e.state,i=e.children,r=e.from,o=e.enter,f=e.exit,a=m(n,{from:r,enter:o,exit:f});return t.jsx(t.Fragment,{children:a((function(e,t){return t&&i({value:e.value})}))})},exports.ScrollableBlock=function(e){var i=e.children,r=e.direction,f=void 0===r?"single":r,a=e.threshold,s=void 0===a?.2:a,l=n.useRef(null),c=o(0);return n.useLayoutEffect((function(){var e=l.current,t=new IntersectionObserver((function(e){u(e,1)[0].isIntersecting?c.value=v(1):"both"===f&&(c.value=v(0))}),{root:null,threshold:s});return e&&t.observe(e),function(){e&&t.unobserve(e)}}),[]),t.jsx("div",{ref:l,children:i&&i({value:c.value})})},exports.bin=function(e){return e?1:0},exports.clamp=O,exports.interpolateNumbers=function(e,t,n,i){var r,o,f=null==i?void 0:i.extrapolate,a=null==i?void 0:i.extrapolateLeft,s=null==i?void 0:i.extrapolateRight,c=function(e,t,n){var i=t.length,r=[];e<t[0]?r=[t[0],t[1],n[0],n[1]]:e>t[i-1]&&(r=[t[i-2],t[i-1],n[i-2],n[i-1]]);for(var o=1;o<i;++o)if(e<=t[o]){r=[t[o-1],t[o],n[o-1],n[o]];break}return r}(e,t,n),h="extend";void 0!==a?h=a:void 0!==f&&(h=f);var d,v="extend";if(void 0!==s?v=s:void 0!==f&&(v=f),n.length){if("number"==typeof n[0])return w(e,c,h,v);if(Array.isArray(n[0]))return E(e,c,h,v);var m=u(c,4),p=m[0],y=m[1],g=m[2],b=m[3],x=_(g),I=_(b),O=k(x);if(d=I,k(x).trim().replace(/\s/g,"")===k(d).trim().replace(/\s/g,"")){var T=M(x),C=M(I),S=E(e,[p,y,T,C],h,v);try{for(var L=l(S),Y=L.next();!Y.done;Y=L.next()){var A=Y.value;O=O.replace("$",A)}}catch(e){r={error:e}}finally{try{Y&&!Y.done&&(o=L.return)&&o.call(L)}finally{if(r)throw r.error}}return O}throw new Error("Output range doesn't match string format!")}throw new Error("Output range cannot be Empty")},exports.mix=function(e,t,n){return t*(1-e)+n*e},exports.move=function(e,t,n){var i=e[t],r=e.length,o=t-n;if(o>0)return c(c(c(c([],u(e.slice(0,n)),!1),[i],!1),u(e.slice(n,t)),!1),u(e.slice(t+1,r)),!1);if(o<0){var f=n+1;return c(c(c(c([],u(e.slice(0,t)),!1),u(e.slice(t+1,f)),!1),[i],!1),u(e.slice(f,r)),!1)}return e},exports.rubberClamp=function(e,t,n,i){return void 0===i&&(i=.15),0===i?O(e,t,n):e<t?-T(t-e,n-t,i)+t:e>n?+T(e-n,n-t,i)+n:e},exports.snapTo=function(e,t,n){var i=e+.2*t,r=function(e){return Math.abs(e-i)},o=n.map(r),f=Math.min.apply(Math,c([],u(o),!1));return n.reduce((function(e,t){return r(t)===f?t:e}))},exports.useDrag=function(e,t){var n=r.useRef(new L).current;return q([["drag",n,e,t]])},exports.useGesture=function(e){var t=e.onDrag,n=e.onWheel,i=e.onScroll,o=e.onMouseMove,f=r.useRef(new L).current,a=r.useRef(new R).current,s=r.useRef(new A).current,l=r.useRef(new Y).current;return q([["drag",f,t],["wheel",a,n],["scroll",s,i],["move",l,o]])},exports.useMeasure=function(e,t){var i=n.useRef(null),r=n.useRef([]),o=n.useRef(e);return n.useEffect((function(){return o.current=e,function(){o.current=function(){return!1}}}),t),n.useEffect((function(){var e=i.current||document.documentElement,t=r.current,n=new ResizeObserver((function(t){var n=u(t,1)[0].target.getBoundingClientRect(),i=n.left,r=n.top,f=n.width,a=n.height,s=window.pageXOffset,l=window.pageYOffset;if(o){if(e===document.documentElement)return;o.current({left:i+s,top:r+l,width:f,height:a,vLeft:i,vTop:r})}})),f=new ResizeObserver((function(e){var t=[],n=[],i=[],r=[],f=[],a=[];e.forEach((function(e){var o=e.target.getBoundingClientRect(),s=o.left,l=o.top,u=o.width,c=o.height,h=s+window.pageXOffset,d=l+window.pageYOffset;t.push(h),n.push(d),i.push(u),r.push(c),f.push(s),a.push(l)})),o&&o.current({left:t,top:n,width:i,height:r,vLeft:f,vTop:a})}));return e&&(e===document.documentElement&&t.length>0?t.forEach((function(e){f.observe(e.current)})):n.observe(e)),function(){e&&(e===document.documentElement&&t.length>0?t.forEach((function(e){f.unobserve(e.current)})):n.unobserve(e))}}),[]),function(e){return null==e?{ref:i}:(r.current[e]=r.current[e]||n.createRef(),{ref:r.current[e]})}},exports.useMount=m,exports.useMouseMove=function(e){var t=r.useRef(new Y).current;return q([["move",t,e]])},exports.useOutsideClick=function(e,t,i){var r=n.useRef();r.current||(r.current=t),n.useEffect((function(){return r.current=t,function(){r.current=function(){return!1}}}),i),n.useEffect((function(){var t=I([document],[["mousedown",function(t){var n=t.target;n&&n.isConnected&&(e.current&&!e.current.contains(n)&&r.current&&r.current(t))}]]);return function(){return t&&t()}}),[])},exports.useScroll=function(e){var t=r.useRef(new A).current;return q([["scroll",t,e]])},exports.useValue=o,exports.useWheel=function(e){var t=r.useRef(new R).current;return q([["wheel",t,e]])},exports.useWindowDimension=function(e,t){var i=n.useRef({width:0,height:0,innerWidth:0,innerHeight:0}),r=n.useRef(e);n.useEffect((function(){return r.current=e,function(){r.current=function(){return!1}}}),t),n.useEffect((function(){var e=new ResizeObserver((function(e){var t=u(e,1)[0].target,n=t.clientWidth,o=t.clientHeight,f=window.innerWidth,a=window.innerHeight;i.current={width:n,height:o,innerWidth:f,innerHeight:a},r&&r.current(s({},i.current))}));return e.observe(document.documentElement),function(){return e.unobserve(document.documentElement)}}),[])},exports.withDecay=function(e){return{type:"decay",options:{velocity:e.velocity,onStart:null==e?void 0:e.onStart,onChange:null==e?void 0:e.onChange,onComplete:null==e?void 0:e.onRest}}},exports.withDelay=function(e){return{type:"delay",options:{delay:e}}},exports.withEase=v,exports.withLoop=function(e,t){return{type:"loop",options:{controller:e,iterations:t}}},exports.withSequence=function(e){return{type:"sequence",options:{steps:e}}},exports.withSpring=d,exports.withTiming=function(e,t){var n;return{type:"timing",to:e,options:{duration:null!==(n=null==t?void 0:t.duration)&&void 0!==n?n:300,easing:null==t?void 0:t.easing,onStart:null==t?void 0:t.onStart,onChange:null==t?void 0:t.onChange,onComplete:null==t?void 0:t.onRest}}};
2
2
  //# sourceMappingURL=index.js.map