react-ui-animate 2.0.0 → 3.0.0-rc.0

package/dist/index.js

@@ -1,89 +1,26 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reMotion = require('@raidipesh78/re-motion');
 var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
-/**
- * @param { number } ms - number of milliseconds to delay code execution
- * @returns Promise
- */
-function delay(ms) {
-    return new Promise(function (resolve) {
-        setTimeout(function () { return resolve(null); }, ms);
-    });
-}
-
-/**
- * interpolate functions maps input range to given output range
- * @param value - number | TransitionValue
- * @param inputRange - Array<number>
- * @param outputRange - Array<number | string>
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-function interpolate(value, inputRange, outputRange, extrapolateConfig) {
-    return reMotion.interpolate(value, inputRange, outputRange, extrapolateConfig);
-}
-/**
- * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
- * sorthand function to interpolate input range [0, 1]
- * @param value - number | TransitionValue
- * @param minOutput - number | string
- * @param maxOutput - number | string
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-function bInterpolate(value, minOutput, maxOutput, extrapolateConfig) {
-    return reMotion.interpolate(value, [0, 1], [minOutput, maxOutput], extrapolateConfig);
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
 }
 
-/**
- * AnimatedBlock - A higher order component built upon `div` element
- * which can accept `AnimatedValue`. It also exposes some extra style properties like
- * translateX, translateY, rotateX, rotateY, scaleX, etc.
- */
-var AnimatedBlock = reMotion.makeAnimatedComponent('div');
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-/**
- * AnimatedInline - A higher order component built upon `span` element
- * which can accept `AnimatedValue`. It also exposes some extra style properties like
- * translateX, translateY, rotateX, rotateY, scaleX, etc.
- */
-var AnimatedInline = reMotion.makeAnimatedComponent('span');
-
-/**
- * AnimatedImage - A higher order component built upon `img` element
- * which can accept `AnimatedValue`. It also exposes some extra style properties like
- * translateX, translateY, rotateX, rotateY, scaleX, etc.
- */
-var AnimatedImage = reMotion.makeAnimatedComponent('img');
-
-/**
- * `useMountedValue` handles mounting and unmounting of a component which captures current state
- * passed as an arugment (`state`) and exposes the shadow state which handles the mount and unmount
- * of a component.
- *
- * @param { boolean } state - Boolean indicating the component should mount or unmount.
- * @param { UseMountedValueConfig } config - Animation configuration.
- */
-function useMountedValue(state, config) {
-    var mv = reMotion.useMount(state, config);
-    return function (cb) { return mv(function (a, m) { return cb({ value: a }, m); }); };
-}
-
-/**
- * MountedBlock - Higher order component which handles mounting and unmounting of a component.
- * @prop { boolean } state - Boolean indicating the component should mount or unmount.
- * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
- * @prop { UseMountedValueConfig } config - Animation configuration.
- */
-var MountedBlock = function (_a) {
-    var state = _a.state, children = _a.children, config = _a.config;
-    var open = useMountedValue(state, config);
-    return React.createElement(React.Fragment, null, open(function (animation, mounted) { return mounted && children(animation); }));
-};
-
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -97,7 +34,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 var extendStatics = function(d, b) {
     extendStatics = Object.setPrototypeOf ||
@@ -107,6 +44,8 @@ var extendStatics = function(d, b) {
 };
 
 function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
     extendStatics(d, b);
     function __() { this.constructor = d; }
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -123,6 +62,18 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __values(o) {
     var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
     if (m) return m.call(o);
@@ -152,1021 +103,2774 @@ function __read(o, n) {
     return ar;
 }
 
-function __spread() {
-    for (var ar = [], i = 0; i < arguments.length; i++)
-        ar = ar.concat(__read(arguments[i]));
-    return ar;
-}
-
-var getInitialConfig = function (animationType) {
-    switch (animationType) {
-        case 'elastic':
-            return { mass: 1, friction: 18, tension: 250 };
-        case 'stiff':
-            return { mass: 1, friction: 18, tension: 350 };
-        case 'wooble':
-            return { mass: 1, friction: 8, tension: 250 };
-        case 'bounce':
-            return { duration: 500, easing: reMotion.Easing.bounce };
-        case 'power1':
-            return { duration: 500, easing: reMotion.Easing.bezier(0.17, 0.42, 0.51, 0.97) };
-        case 'power2':
-            return { duration: 500, easing: reMotion.Easing.bezier(0.07, 0.11, 0.13, 1) };
-        case 'power3':
-            return { duration: 500, easing: reMotion.Easing.bezier(0.09, 0.7, 0.16, 1.04) };
-        case 'power4':
-            return { duration: 500, easing: reMotion.Easing.bezier(0.05, 0.54, 0, 1.03) };
-        case 'linear':
-            return { duration: 500, easing: reMotion.Easing.linear };
-        case 'easein':
-            return { duration: 500, easing: reMotion.Easing.in(reMotion.Easing.ease) };
-        case 'easeout':
-            return { duration: 500, easing: reMotion.Easing.out(reMotion.Easing.ease) };
-        case 'easeinout':
-            return { duration: 500, easing: reMotion.Easing.inOut(reMotion.Easing.ease) };
-        case 'ease':
-        default:
-            return { mass: 1, friction: 34, tension: 290 };
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
     }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var AnimationConfigUtils = {
-    ELASTIC: getInitialConfig('elastic'),
-    BOUNCE: getInitialConfig('bounce'),
-    EASE: getInitialConfig('ease'),
-    STIFF: getInitialConfig('stiff'),
-    WOOBLE: getInitialConfig('wooble'),
-    EASE_IN: getInitialConfig('easein'),
-    EASE_OUT: getInitialConfig('easeout'),
-    EASE_IN_OUT: getInitialConfig('easeinout'),
-    POWER1: getInitialConfig('power1'),
-    POWER2: getInitialConfig('power2'),
-    POWER3: getInitialConfig('power3'),
-    POWER4: getInitialConfig('power4'),
-    LINEAR: getInitialConfig('linear'),
+/**
+ * Base Animation class
+ */
+var Animation = /** @class */ (function () {
+    function Animation() {
+    }
+    Animation.prototype._debounceOnEnd = function (result) {
+        var onEnd = this._onEnd;
+        var onRest = this._onRest;
+        this._onEnd = null;
+        this._onRest = null;
+        onRest && onRest(result);
+        onEnd && onEnd(result);
+    };
+    Animation.prototype.stop = function () { };
+    return Animation;
+}());
+
+var RequestAnimationFrame = {
+    current: function (cb) { return window.requestAnimationFrame(cb); },
+    inject: function (injected) {
+        RequestAnimationFrame.current = injected;
+    },
+};
+var CancelAnimationFrame = {
+    current: function (id) { return window.cancelAnimationFrame(id); },
+    inject: function (injected) {
+        CancelAnimationFrame.current = injected;
+    },
 };
 
-/**
- * `useAnimatedValue` returns an animation value with `.value` and `.currentValue` property which is
- * initialized when passed to argument (`initialValue`). The retured value persist until the lifetime of
- * a component. It doesnot cast any re-renders which can is very good for performance optimization.
- *
- * @param { string | number } initialValue - Initial value
- * @param { UseAnimatedValueConfig } config - Animation configuration object.
- */
-function useAnimatedValue(initialValue, config) {
-    var _a = __read(reMotion.useTransition(initialValue, __assign(__assign({}, AnimationConfigUtils.EASE), config)), 2), animation = _a[0], setAnimation = _a[1];
-    var targetObject = {
-        value: animation,
-        currentValue: animation.get(),
-    };
-    return new Proxy(targetObject, {
-        set: function (_, key, value) {
-            if (key === 'value') {
-                if (typeof value === 'number' || typeof value === 'string') {
-                    setAnimation({ toValue: value });
-                }
-                else if (typeof value === 'object' || typeof value === 'function') {
-                    setAnimation(value);
-                }
-                return true;
-            }
-            throw new Error('You cannot set any other property to animation node.');
-        },
-        get: function (_, key) {
-            if (key === 'value') {
-                return animation;
-            }
-            if (key === 'currentValue') {
-                return animation.get();
-            }
-            throw new Error('You cannot access any other property from animation node.');
-        },
-    });
+/**
+ * Class implementing spring based animation
+ */
+var SpringAnimation = /** @class */ (function (_super) {
+    __extends(SpringAnimation, _super);
+    function SpringAnimation(_a) {
+        var initialPosition = _a.initialPosition, config = _a.config;
+        var _b, _c, _d, _e, _f, _g;
+        var _this = _super.call(this) || this;
+        _this._overshootClamping = false;
+        _this._initialVelocity = 0;
+        _this._lastVelocity = 0;
+        _this._startPosition = initialPosition;
+        _this._position = _this._startPosition;
+        _this._restDisplacementThreshold = (_b = config === null || config === void 0 ? void 0 : config.restDistance) !== null && _b !== void 0 ? _b : 0.001;
+        _this._restSpeedThreshold = (_c = config === null || config === void 0 ? void 0 : config.restDistance) !== null && _c !== void 0 ? _c : 0.001;
+        _this._mass = (_d = config === null || config === void 0 ? void 0 : config.mass) !== null && _d !== void 0 ? _d : 1;
+        _this._tension = (_e = config === null || config === void 0 ? void 0 : config.tension) !== null && _e !== void 0 ? _e : 170;
+        _this._friction = (_f = config === null || config === void 0 ? void 0 : config.friction) !== null && _f !== void 0 ? _f : 26;
+        _this._delay = (_g = config === null || config === void 0 ? void 0 : config.delay) !== null && _g !== void 0 ? _g : 0;
+        _this._onRest = config === null || config === void 0 ? void 0 : config.onRest;
+        _this._onChange = config === null || config === void 0 ? void 0 : config.onChange;
+        return _this;
+    }
+    SpringAnimation.prototype.onChange = function (value) {
+        this._onFrame(value);
+        if (this._lastPosition !== value) {
+            if (this._onChange) {
+                this._onChange(value);
+            }
+        }
+        this._lastPosition = value;
+    };
+    SpringAnimation.prototype.onUpdate = function () {
+        var _this = this;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this._lastTime, 64);
+        this._lastTime = now;
+        var c = this._friction;
+        var m = this._mass;
+        var k = this._tension;
+        var v0 = -this._lastVelocity;
+        var x0 = this._toValue - this._position;
+        var zeta = c / (2 * Math.sqrt(k * m)); // damping ratio
+        var omega0 = Math.sqrt(k / m); // undamped angular frequency of the oscillator (rad/ms)
+        var omega1 = omega0 * Math.sqrt(1 - Math.pow(zeta, 2)); // exponential decay
+        var t = deltaTime / 1000;
+        var sin1 = Math.sin(omega1 * t);
+        var cos1 = Math.cos(omega1 * t);
+        // under damped
+        var underDampedEnvelope = Math.exp(-zeta * omega0 * t);
+        var underDampedFrag1 = underDampedEnvelope *
+            (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
+        var underDampedPosition = this._toValue - underDampedFrag1;
+        // This looks crazy -- it's actually just the derivative of the oscillation function
+        var underDampedVelocity = zeta * omega0 * underDampedFrag1 -
+            underDampedEnvelope *
+                (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
+        // critically damped
+        var criticallyDampedEnvelope = Math.exp(-omega0 * t);
+        var criticallyDampedPosition = this._toValue - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
+        var criticallyDampedVelocity = criticallyDampedEnvelope *
+            (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
+        this.onChange(this._position);
+        var isOvershooting = function () {
+            if (_this._overshootClamping && _this._tension !== 0) {
+                return _this._position < _this._toValue
+                    ? _this._position > _this._toValue
+                    : _this._position < _this._toValue;
+            }
+            else {
+                return false;
+            }
+        };
+        var isVelocity = Math.abs(this._lastVelocity) < this._restSpeedThreshold;
+        var isDisplacement = this._tension === 0 ||
+            Math.abs(this._toValue - this._position) <
+                this._restDisplacementThreshold;
+        if (zeta < 1) {
+            this._position = underDampedPosition;
+            this._lastVelocity = underDampedVelocity;
+        }
+        else {
+            this._position = criticallyDampedPosition;
+            this._lastVelocity = criticallyDampedVelocity;
+        }
+        if (isOvershooting() || (isVelocity && isDisplacement)) {
+            if (this._tension !== 0) {
+                this._lastVelocity = 0;
+                this._position = this._toValue;
+                this.onChange(this._position);
+            }
+            // clear lastTimestamp to avoid using stale value by the next spring animation that starts after this one
+            this._lastTime = 0;
+            this._debounceOnEnd({ finished: true, value: this._toValue });
+            return;
+        }
+        this._animationFrame = RequestAnimationFrame.current(this.onUpdate.bind(this));
+    };
+    SpringAnimation.prototype.stop = function () {
+        this._active = false;
+        clearTimeout(this._timeout);
+        CancelAnimationFrame.current(this._animationFrame);
+        this._debounceOnEnd({ finished: false, value: this._position });
+    };
+    // Set value
+    SpringAnimation.prototype.set = function (toValue) {
+        this.stop();
+        this._position = toValue;
+        this._lastTime = 0;
+        this._lastVelocity = 0;
+        this.onChange(toValue);
+    };
+    SpringAnimation.prototype.start = function (_a) {
+        var _this = this;
+        var toValue = _a.toValue, onFrame = _a.onFrame, previousAnimation = _a.previousAnimation, onEnd = _a.onEnd;
+        var onStart = function () {
+            _this._onFrame = onFrame;
+            _this._active = true;
+            _this._toValue = toValue;
+            _this._onEnd = onEnd;
+            var now = Date.now();
+            if (previousAnimation instanceof SpringAnimation) {
+                _this._lastVelocity =
+                    previousAnimation._lastVelocity || _this._lastVelocity || 0;
+                _this._lastTime = previousAnimation._lastTime || now;
+            }
+            else {
+                _this._lastTime = now;
+            }
+            _this._animationFrame = RequestAnimationFrame.current(_this.onUpdate.bind(_this));
+        };
+        if (this._delay !== 0) {
+            this._timeout = setTimeout(function () { return onStart(); }, this._delay);
+        }
+        else {
+            onStart();
+        }
+    };
+    return SpringAnimation;
+}(Animation));
+
+/**
+ * https://github.com/gre/bezier-easing
+ * BezierEasing - use bezier curve for transition easing function
+ * by Gaëtan Renaudeau 2014 - 2015 – MIT License
+ */
+// These values are established by empiricism with tests (tradeoff: performance VS precision)
+var NEWTON_ITERATIONS = 4;
+var NEWTON_MIN_SLOPE = 0.001;
+var SUBDIVISION_PRECISION = 0.0000001;
+var SUBDIVISION_MAX_ITERATIONS = 10;
+var kSplineTableSize = 11;
+var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+var float32ArraySupported = typeof Float32Array === "function";
+function A(aA1, aA2) {
+    return 1.0 - 3.0 * aA2 + 3.0 * aA1;
+}
+function B(aA1, aA2) {
+    return 3.0 * aA2 - 6.0 * aA1;
+}
+function C(aA1) {
+    return 3.0 * aA1;
+}
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+function calcBezier(aT, aA1, aA2) {
+    return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+}
+// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
+function getSlope(aT, aA1, aA2) {
+    return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+}
+function binarySubdivide(aX, aA, aB, mX1, mX2) {
+    var currentX, currentT, i = 0;
+    do {
+        currentT = aA + (aB - aA) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - aX;
+        if (currentX > 0.0) {
+            aB = currentT;
+        }
+        else {
+            aA = currentT;
+        }
+    } while (Math.abs(currentX) > SUBDIVISION_PRECISION &&
+        ++i < SUBDIVISION_MAX_ITERATIONS);
+    return currentT;
+}
+function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
+    for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
+        var currentSlope = getSlope(aGuessT, mX1, mX2);
+        if (currentSlope === 0.0) {
+            return aGuessT;
+        }
+        var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+        aGuessT -= currentX / currentSlope;
+    }
+    return aGuessT;
+}
+function LinearEasing(x) {
+    return x;
+}
+function bezier(mX1, mY1, mX2, mY2) {
+    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+        throw new Error("bezier x values must be in [0, 1] range");
+    }
+    if (mX1 === mY1 && mX2 === mY2) {
+        return LinearEasing;
+    }
+    // Precompute samples table
+    var sampleValues = float32ArraySupported
+        ? new Float32Array(kSplineTableSize)
+        : new Array(kSplineTableSize);
+    for (var i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+    }
+    function getTForX(aX) {
+        var intervalStart = 0.0;
+        var currentSample = 1;
+        var lastSample = kSplineTableSize - 1;
+        for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+            intervalStart += kSampleStepSize;
+        }
+        --currentSample;
+        // Interpolate to provide an initial guess for t
+        var dist = (aX - sampleValues[currentSample]) /
+            (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+        var guessForT = intervalStart + dist * kSampleStepSize;
+        var initialSlope = getSlope(guessForT, mX1, mX2);
+        if (initialSlope >= NEWTON_MIN_SLOPE) {
+            return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+        }
+        else if (initialSlope === 0.0) {
+            return guessForT;
+        }
+        else {
+            return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+        }
+    }
+    return function BezierEasing(x) {
+        // Because JavaScript number are imprecise, we should guarantee the extremes are right.
+        if (x === 0 || x === 1) {
+            return x;
+        }
+        return calcBezier(getTForX(x), mY1, mY2);
+    };
 }
 
-/**
- * ScrollableBlock - Higher order component to handle the entrance or exit animation
- * of a component when it enters or exit the viewport. Accepts child as a function with
- * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
- * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
- * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
- * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
- * @prop { UseAnimatedValueConfig } animationConfig - Animation config
- */
-var ScrollableBlock = function (props) {
-    var children = props.children, _a = props.direction, direction = _a === void 0 ? 'single' : _a, animationConfig = props.animationConfig, _b = props.threshold, threshold = _b === void 0 ? 0.2 : _b;
-    var scrollableBlockRef = React.useRef(null);
-    var animation = useAnimatedValue(0, animationConfig); // 0: not intersecting | 1: intersecting
-    React.useEffect(function () {
-        var _scrollableBlock = scrollableBlockRef.current;
-        var observer = new IntersectionObserver(function (_a) {
-            var _b = __read(_a, 1), entry = _b[0];
-            var isIntersecting = entry.isIntersecting;
-            if (isIntersecting) {
-                animation.value = 1;
-            }
-            else {
-                if (direction === 'both')
-                    animation.value = 0;
-            }
-        }, {
-            root: null,
-            threshold: threshold,
-        });
-        if (_scrollableBlock) {
-            observer.observe(_scrollableBlock);
-        }
-        return function () {
-            if (_scrollableBlock) {
-                observer.unobserve(_scrollableBlock);
-            }
-        };
-    }, []);
-    return (React.createElement("div", { ref: scrollableBlockRef }, children && children({ value: animation.value })));
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * This class implements common easing functions. The math is pretty obscure,
+ * but this cool website has nice visual illustrations of what they represent:
+ * http://xaedes.de/dev/transitions/
+ */
+var Easing = /** @class */ (function () {
+    function Easing() {
+    }
+    Easing.step0 = function (n) {
+        return n > 0 ? 1 : 0;
+    };
+    Easing.step1 = function (n) {
+        return n >= 1 ? 1 : 0;
+    };
+    Easing.linear = function (t) {
+        return t;
+    };
+    Easing.ease = function (t) {
+        return ease(t);
+    };
+    Easing.quad = function (t) {
+        return t * t;
+    };
+    Easing.cubic = function (t) {
+        return t * t * t;
+    };
+    Easing.poly = function (n) {
+        return function (t) { return Math.pow(t, n); };
+    };
+    Easing.sin = function (t) {
+        return 1 - Math.cos((t * Math.PI) / 2);
+    };
+    Easing.circle = function (t) {
+        return 1 - Math.sqrt(1 - t * t);
+    };
+    Easing.exp = function (t) {
+        return Math.pow(2, 10 * (t - 1));
+    };
+    /**
+     * A simple elastic interaction, similar to a spring.  Default bounciness
+     * is 1, which overshoots a little bit once.  0 bounciness doesn't overshoot
+     * at all, and bounciness of N > 1 will overshoot about N times.
+     *
+     * Wolfram Plots:
+     *
+     *   http://tiny.cc/elastic_b_1 (default bounciness = 1)
+     *   http://tiny.cc/elastic_b_3 (bounciness = 3)
+     */
+    Easing.elastic = function (bounciness) {
+        if (bounciness === void 0) { bounciness = 1; }
+        var p = bounciness * Math.PI;
+        return function (t) {
+            return 1 - Math.pow(Math.cos((t * Math.PI) / 2), 3) * Math.cos(t * p);
+        };
+    };
+    Easing.back = function (s) {
+        if (s === undefined) {
+            s = 1.70158;
+        }
+        return function (t) { return t * t * ((s + 1) * t - s); };
+    };
+    Easing.bounce = function (t) {
+        if (t < 1 / 2.75) {
+            return 7.5625 * t * t;
+        }
+        if (t < 2 / 2.75) {
+            t -= 1.5 / 2.75;
+            return 7.5625 * t * t + 0.75;
+        }
+        if (t < 2.5 / 2.75) {
+            t -= 2.25 / 2.75;
+            return 7.5625 * t * t + 0.9375;
+        }
+        t -= 2.625 / 2.75;
+        return 7.5625 * t * t + 0.984375;
+    };
+    Easing.bezier = function (x1, y1, x2, y2) {
+        return bezier(x1, y1, x2, y2);
+    };
+    Easing.in = function (easing) {
+        return easing;
+    };
+    /**
+     * Runs an easing function backwards.
+     */
+    Easing.out = function (easing) {
+        return function (t) { return 1 - easing(1 - t); };
+    };
+    /**
+     * Makes any easing function symmetrical.
+     */
+    Easing.inOut = function (easing) {
+        return function (t) {
+            if (t < 0.5) {
+                return easing(t * 2) / 2;
+            }
+            return 1 - easing((1 - t) * 2) / 2;
+        };
+    };
+    return Easing;
+}());
+var ease = Easing.bezier(0.42, 0, 1, 1);
+
+/**
+ * Class implementing timing based animation
+ */
+var TimingAnimation = /** @class */ (function (_super) {
+    __extends(TimingAnimation, _super);
+    function TimingAnimation(_a) {
+        var initialPosition = _a.initialPosition, config = _a.config;
+        var _b, _c, _d;
+        var _this = _super.call(this) || this;
+        _this._fromValue = initialPosition;
+        _this._position = _this._fromValue;
+        _this._easing = (_b = config === null || config === void 0 ? void 0 : config.easing) !== null && _b !== void 0 ? _b : Easing.linear;
+        _this._duration = (_c = config === null || config === void 0 ? void 0 : config.duration) !== null && _c !== void 0 ? _c : 500;
+        _this._tempDuration = _this._duration;
+        // Modifiers
+        // here immediate acts like duration: 0
+        if (config === null || config === void 0 ? void 0 : config.immediate) {
+            _this._duration = 0;
+        }
+        _this._delay = (_d = config === null || config === void 0 ? void 0 : config.delay) !== null && _d !== void 0 ? _d : 0;
+        _this._onRest = config === null || config === void 0 ? void 0 : config.onRest;
+        _this._onChange = config === null || config === void 0 ? void 0 : config.onChange;
+        return _this;
+    }
+    TimingAnimation.prototype.onChange = function (value) {
+        this._onFrame(value);
+        if (this._lastPosition !== value) {
+            if (this._onChange) {
+                this._onChange(value);
+            }
+        }
+        this._lastPosition = value;
+    };
+    TimingAnimation.prototype.onUpdate = function () {
+        var now = Date.now();
+        var runTime = now - this._startTime;
+        if (runTime >= this._duration) {
+            this._startTime = 0;
+            this._position = this._toValue;
+            this.onChange(this._position);
+            this._debounceOnEnd({ finished: true, value: this._position });
+            return;
+        }
+        var progress = this._easing(runTime / this._duration);
+        this._position =
+            this._fromValue + (this._toValue - this._fromValue) * progress;
+        this.onChange(this._position);
+        this._animationFrame = RequestAnimationFrame.current(this.onUpdate.bind(this));
+    };
+    TimingAnimation.prototype.stop = function () {
+        this._active = false;
+        clearTimeout(this._timeout);
+        CancelAnimationFrame.current(this._animationFrame);
+        this._debounceOnEnd({ finished: false, value: this._position });
+    };
+    // Set value
+    TimingAnimation.prototype.set = function (toValue) {
+        this.stop();
+        this._position = toValue;
+        this.onChange(toValue);
+    };
+    TimingAnimation.prototype.start = function (_a) {
+        var _this = this;
+        var toValue = _a.toValue, onFrame = _a.onFrame, previousAnimation = _a.previousAnimation, onEnd = _a.onEnd;
+        var onStart = function () {
+            _this._onFrame = onFrame;
+            _this._active = true;
+            _this._onEnd = onEnd;
+            _this._toValue = toValue;
+            if (previousAnimation &&
+                previousAnimation instanceof TimingAnimation &&
+                previousAnimation._toValue === toValue &&
+                previousAnimation._startTime) {
+                _this._startTime = previousAnimation._startTime;
+                _this._fromValue = previousAnimation._fromValue;
+            }
+            else {
+                var now = Date.now();
+                _this._startTime = now;
+                _this._fromValue = _this._position;
+            }
+            _this._animationFrame = RequestAnimationFrame.current(_this.onUpdate.bind(_this));
+        };
+        if (this._delay !== 0) {
+            this._timeout = setTimeout(function () { return onStart(); }, this._delay);
+        }
+        else {
+            onStart();
+        }
+    };
+    return TimingAnimation;
+}(Animation));
+
+var COLOR_NUMBER_REGEX = /[+-]?\d+(\.\d+)?|[\s]?\.\d+|#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/gi;
+var HEX_NAME_COLOR = /#[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;
+// Named colors
+var colorNames = {
+    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 conv3to6(hex) {
+    var regex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    return hex.replace(regex, function (_, r, g, b) {
+        return "#" + r + r + g + g + b + b;
+    });
+}
+function conv6to8(hex) {
+    if (hex.length === 7) {
+        return hex + "FF";
+    }
+    return hex;
+}
+function hexToRgba(hex) {
+    var hex6 = conv3to6(hex);
+    var hex8 = conv6to8(hex6);
+    var hexRgba = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex8);
+    return {
+        r: parseInt(hexRgba[1], 16),
+        g: parseInt(hexRgba[2], 16),
+        b: parseInt(hexRgba[3], 16),
+        a: parseInt(hexRgba[4], 16) / 255,
+    };
+}
+function rgbaToHex(rgba) {
+    var r = rgba.r, g = rgba.g, b = rgba.b, a = rgba.a;
+    var hexR = (r | (1 << 8)).toString(16).slice(1);
+    var hexG = (g | (1 << 8)).toString(16).slice(1);
+    var hexB = (b | (1 << 8)).toString(16).slice(1);
+    var hexA = ((a * 255) | (1 << 8)).toString(16).slice(1);
+    return "#" + hexR + hexG + hexB + hexA;
+}
 
-/**
- * bin(booleanValue)
- * returns 1 if booleanValue == true and 0 if booleanValue == false
- */
-function bin(bool) {
-    return bool ? 1 : 0;
-}
-/**
- * mix(progress, a, b)
- * linear interpolation between a and b
- */
-function mix(perc, val1, val2) {
-    return val1 * (1 - perc) + val2 * perc;
-}
-/**
- * clamp(value, min, max)
- * clamps value for min and max bounds
- */
-function clamp(value, lowerbound, upperbound) {
-    return Math.min(Math.max(value, lowerbound), upperbound);
-}
-function rubber2(distanceFromEdge, constant) {
-    return Math.pow(distanceFromEdge, constant * 5);
-}
-function rubber(distanceFromEdge, dimension, constant) {
-    if (dimension === 0 || Math.abs(dimension) === Infinity)
-        return rubber2(distanceFromEdge, constant);
-    return ((distanceFromEdge * dimension * constant) /
-        (dimension + constant * distanceFromEdge));
-}
-/**
- * rubberClamp(value, min, max, constant?)
- * constant is optional : default 0.15
- * clamps the value for min and max value and
- * extends beyond min and max values with constant
- * factor to create elastic rubber band effect
- */
-function rubberClamp(value, lowerbound, upperbound, constant) {
-    if (constant === void 0) { constant = 0.15; }
-    if (constant === 0)
-        return clamp(value, lowerbound, upperbound);
-    if (value < lowerbound) {
-        return (-rubber(lowerbound - value, upperbound - lowerbound, constant) +
-            lowerbound);
-    }
-    if (value > upperbound) {
-        return (+rubber(value - upperbound, upperbound - lowerbound, constant) +
-            upperbound);
-    }
-    return value;
-}
-/**
- * snapTo(value, velocity, snapPoints[])
- * Calculates the final snapPoint according to given current value,
- * velocity and snapPoints array
- */
-function snapTo(value, velocity, snapPoints) {
-    var finalValue = value + velocity * 0.2;
-    var getDiff = function (point) { return Math.abs(point - finalValue); };
-    var deltas = snapPoints.map(getDiff);
-    var minDelta = Math.min.apply(Math, __spread(deltas));
-    return snapPoints.reduce(function (acc, point) {
-        if (getDiff(point) === minDelta) {
-            return point;
-        }
-        else {
-            return acc;
-        }
-    });
-}
-/**
- * move(array, moveIndex, toIndex)
- * move array item from moveIndex to toIndex without array modification
- */
-function move(array, moveIndex, toIndex) {
-    var item = array[moveIndex];
-    var length = array.length;
-    var diff = moveIndex - toIndex;
-    if (diff > 0) {
-        return __spread(array.slice(0, toIndex), [
-            item
-        ], array.slice(toIndex, moveIndex), array.slice(moveIndex + 1, length));
-    }
-    else if (diff < 0) {
-        var targetIndex = toIndex + 1;
-        return __spread(array.slice(0, moveIndex), array.slice(moveIndex + 1, targetIndex), [
-            item
-        ], array.slice(targetIndex, length));
-    }
-    return array;
+/**
+ * isFluidValue to check the value is FluidValue or not
+ * @param value - any
+ * @returns - boolean
+ */
+var isFluidValue = function (value) {
+    return (typeof value === 'object' &&
+        Object.prototype.hasOwnProperty.call(value, '_subscribe'));
+};
+
+/**
+ * Filters out properties with fluid values from a given props object.
+ * This function removes any properties that are considered fluid values,
+ * typically those that subscribe to updates and therefore should not be
+ * included in a static props object.
+ *
+ * @param props - The original props object, which may include fluid values.
+ * @returns A new props object with fluid values removed.
+ */
+var getCleanProps = function (_a) {
+    _a.style; var props = __rest(_a, ["style"]);
+    return Object.fromEntries(Object.entries(props).filter(function (_a) {
+        var _b = __read(_a, 2); _b[0]; var value = _b[1];
+        return !isFluidValue(value);
+    }));
+};
+
+var unitlessStyleProps = [
+    'borderImageOutset',
+    'borderImageSlice',
+    'borderImageWidth',
+    'fontWeight',
+    'lineHeight',
+    'opacity',
+    'orphans',
+    'tabSize',
+    'widows',
+    'zIndex',
+    'zoom',
+    // SVG-related properties
+    'fillOpacity',
+    'floodOpacity',
+    'stopOpacity',
+    'strokeDasharray',
+    'strokeDashoffset',
+    'strokeMiterlimit',
+    'strokeOpacity',
+    'strokeWidth',
+    // prefixed
+    'animationIterationCount',
+    'boxFlex',
+    'boxFlexGroup',
+    'boxOrdinalGroup',
+    'columnCount',
+    'flex',
+    'flexGrow',
+    'flexPositive',
+    'flexShrink',
+    'flexNegative',
+    'flexOrder',
+    'gridRow',
+    'gridColumn',
+    'order',
+    'lineClamp',
+];
+/**
+ * getCssValue() function to get css value with unit or without unit
+ * it is only for style property - it cannot be used with transform keys
+ * @param property - style property
+ * @param value - style value
+ * @returns - value with unit or without unit
+ */
+function getCssValue(property, value) {
+    var cssValue;
+    if (typeof value === 'number') {
+        if (unitlessStyleProps.includes(property)) {
+            cssValue = value;
+        }
+        else {
+            cssValue = value + 'px';
+        }
+    }
+    else {
+        cssValue = value;
+    }
+    return cssValue;
 }
 
-/**
- * TransitionBlock - Higher order component which animates on state change.
- * @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
- * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
- * @prop { UseAnimatedValueConfig } config - Animation configuration.
- */
-var TransitionBlock = function (_a) {
-    var state = _a.state, children = _a.children, config = _a.config;
-    var amv = useAnimatedValue(bin(state), config);
-    return React.createElement(React.Fragment, null, children({ value: amv.value }));
+/**
+ * Checks if a value is defined (not null or undefined).
+ *
+ * This utility function helps in determining whether a given value is neither `null` nor `undefined`.
+ * It can be useful for validation checks to ensure that a value is properly defined before proceeding
+ * with further operations.
+ *
+ * @param {T} value - The value to check.
+ * @returns {boolean} - Returns `true` if the value is neither `null` nor `undefined`, otherwise returns `false`.
+ *
+ */
+var isDefined = function (value) {
+    return value !== null && value !== undefined;
 };
 
-/**
- * Attach single document / window event / HTMLElement
- */
-function attachEvent(domTargets, event, callback, capture) {
-    if (capture === void 0) { capture = false; }
-    domTargets.forEach(function (target) {
-        target.addEventListener(event, callback, capture);
-    });
-    return function () {
-        domTargets.forEach(function (target) {
-            target.removeEventListener(event, callback, capture);
-        });
-    };
-}
-/**
- * Attach multiple document / window event / HTMLElement
- */
-function attachEvents(domTargets, events) {
-    var subscribers = new Map();
-    events.forEach(function (_a) {
-        var _b = __read(_a, 3), event = _b[0], callback = _b[1], _c = _b[2], capture = _c === void 0 ? false : _c;
-        subscribers.set(event, attachEvent(domTargets, event, callback, capture));
-    });
-    return function (eventKeys) {
-        var e_1, _a;
-        try {
-            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), eventKey = _d[0], subscriber = _d[1];
-                if (!eventKeys) {
-                    subscriber();
-                    return;
-                }
-                if (eventKeys.indexOf(eventKey) !== -1) {
-                    subscriber();
-                }
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-    };
+/**
+ * Converts a camelCase string to kebab-case.
+ * e.g. backgroundColor -> background-color
+ *
+ * @param str - The camelCase string to convert.
+ * @returns The converted kebab-case string.
+ */
+function camelCaseToKebabCase(str) {
+    return str.replace(/([A-Z])/g, function (match) { return '-' + match.toLowerCase(); });
 }
 
-var withDefault = function (x, y) {
-    return { x: x, y: y };
+var _internalInterpolate = function (val, arr, extrapolateLeft, extrapolateRight) {
+    var _a = __read(arr, 4), inputMin = _a[0], inputMax = _a[1], outputMin = _a[2], outputMax = _a[3];
+    var result = val;
+    // EXTRAPOLATE
+    if (result < inputMin) {
+        if (extrapolateLeft === 'identity') {
+            return result;
+        }
+        else if (extrapolateLeft === 'clamp') {
+            result = inputMin;
+        }
+        else ;
+    }
+    if (result > inputMax) {
+        if (extrapolateRight === 'identity') {
+            return result;
+        }
+        else if (extrapolateRight === 'clamp') {
+            result = inputMax;
+        }
+        else ;
+    }
+    if (outputMin === outputMax) {
+        return outputMin;
+    }
+    if (inputMin === inputMax) {
+        if (val <= inputMin) {
+            return outputMin;
+        }
+        return outputMax;
+    }
+    // Input Range
+    if (inputMin === -Infinity) {
+        result = -result;
+    }
+    else if (inputMax === Infinity) {
+        result = result - inputMin;
+    }
+    else {
+        result = (result - inputMin) / (inputMax - inputMin);
+    }
+    // Output Range
+    if (outputMin === -Infinity) {
+        result = -result;
+    }
+    else if (outputMax === Infinity) {
+        result = result + outputMin;
+    }
+    else {
+        result = result * (outputMax - outputMin) + outputMin;
+    }
+    return result;
 };
+var _getNarrowedInputArray = function (x, input, output) {
+    var length = input.length;
+    var narrowedInput = [];
+    // Boundaries
+    if (x < input[0]) {
+        narrowedInput = [input[0], input[1], output[0], output[1]];
+    }
+    else if (x > input[length - 1]) {
+        narrowedInput = [
+            input[length - 2],
+            input[length - 1],
+            output[length - 2],
+            output[length - 1],
+        ];
+    }
+    // Narrow the input and output ranges
+    for (var i = 1; i < length; ++i) {
+        if (x <= input[i]) {
+            narrowedInput = [input[i - 1], input[i], output[i - 1], output[i]];
+            break;
+        }
+    }
+    return narrowedInput;
+};
+var _getColorInterpolate = function (value, narrowedInput) {
+    var _a = __read(narrowedInput, 4), inputMin = _a[0], inputMax = _a[1], outputMin = _a[2], outputMax = _a[3];
+    var outputMinProcessed = hexToRgba(outputMin);
+    var outputMaxProcessed = hexToRgba(outputMax);
+    var red = _internalInterpolate(value, [inputMin, inputMax, outputMinProcessed.r, outputMaxProcessed.r], 'clamp', 'clamp');
+    var green = _internalInterpolate(value, [inputMin, inputMax, outputMinProcessed.g, outputMaxProcessed.g], 'clamp', 'clamp');
+    var blue = _internalInterpolate(value, [inputMin, inputMax, outputMinProcessed.b, outputMaxProcessed.b], 'clamp', 'clamp');
+    var alpha = _internalInterpolate(value, [inputMin, inputMax, outputMinProcessed.a, outputMaxProcessed.a], 'clamp', 'clamp');
+    return rgbaToHex({ r: red, g: green, b: blue, a: alpha });
+};
+var _getArrayInterpolate = function (value, narrowedInput, _extrapolateLeft, _extrapolateRight) {
+    var _a = __read(narrowedInput, 4), inputMin = _a[0], inputMax = _a[1], outputMin = _a[2], outputMax = _a[3];
+    if (outputMin.length === outputMax.length) {
+        return outputMin.map(function (val, index) {
+            if (typeof val === 'string') {
+                // IF IT IS STRING THEN IT MUST BE HEX COLOR
+                return _getColorInterpolate(value, [
+                    inputMin,
+                    inputMax,
+                    val,
+                    outputMax[index],
+                ]);
+            }
+            else {
+                return _internalInterpolate(value, [inputMin, inputMax, val, outputMax[index]], _extrapolateLeft, _extrapolateRight);
+            }
+        });
+    }
+    else {
+        throw new Error("Array length doesn't match");
+    }
+};
+var _getTemplateString = function (str) {
+    return str.replace(COLOR_NUMBER_REGEX, '$');
+};
+var _getParsedStringArray = function (str) {
+    return str.match(COLOR_NUMBER_REGEX).map(function (v) {
+        if (v.indexOf('#') !== -1) {
+            return v;
+        }
+        else {
+            return Number(v);
+        }
+    });
+};
+/**
+ * Function returns if the template of two strings are matched
+ * i.e. they can be interpolated
+ * @param str1 - first string
+ * @param str2 - second string
+ * @returns boolean indicating two strings matched or not
+ */
+var stringMatched = function (str1, str2) {
+    return _getTemplateString(str1).trim().replace(/\s/g, '') ===
+        _getTemplateString(str2).trim().replace(/\s/g, '');
+};
+/**
+ * Function which proccess the
+ * hexadecimal colors to its proper formats
+ * @param str - string
+ * @returns hex color string
+ */
+var getProcessedColor = function (str) {
+    return str.replace(HEX_NAME_COLOR, function (match) {
+        if (match.indexOf('#') !== -1) {
+            return rgbaToHex(hexToRgba(match));
+        }
+        else if (Object.prototype.hasOwnProperty.call(colorNames, match)) {
+            return colorNames[match];
+        }
+        else {
+            throw new Error('String cannot be parsed!');
+        }
+    });
+};
+/**
+ * interpolateNumbers to interpolate the numeric value
+ * @param value - number
+ * @param inputRange
+ * @param outputRange
+ * @param extrapolateConfig
+ * @returns - number | string
+ */
+function interpolateNumbers(value, inputRange, outputRange, extrapolateConfig) {
+    var e_1, _a;
+    var extrapolate = extrapolateConfig === null || extrapolateConfig === void 0 ? void 0 : extrapolateConfig.extrapolate;
+    var extrapolateLeft = extrapolateConfig === null || extrapolateConfig === void 0 ? void 0 : extrapolateConfig.extrapolateLeft;
+    var extrapolateRight = extrapolateConfig === null || extrapolateConfig === void 0 ? void 0 : extrapolateConfig.extrapolateRight;
+    var narrowedInput = _getNarrowedInputArray(value, inputRange, outputRange);
+    var _extrapolateLeft = 'extend';
+    if (extrapolateLeft !== undefined) {
+        _extrapolateLeft = extrapolateLeft;
+    }
+    else if (extrapolate !== undefined) {
+        _extrapolateLeft = extrapolate;
+    }
+    var _extrapolateRight = 'extend';
+    if (extrapolateRight !== undefined) {
+        _extrapolateRight = extrapolateRight;
+    }
+    else if (extrapolate !== undefined) {
+        _extrapolateRight = extrapolate;
+    }
+    if (outputRange.length) {
+        if (typeof outputRange[0] === 'number') {
+            return _internalInterpolate(value, narrowedInput, _extrapolateLeft, _extrapolateRight);
+        }
+        else if (Array.isArray(outputRange[0])) {
+            return _getArrayInterpolate(value, narrowedInput, _extrapolateLeft, _extrapolateRight);
+        }
+        else {
+            var _b = __read(narrowedInput, 4), inputMin = _b[0], inputMax = _b[1], outputMin = _b[2], outputMax = _b[3];
+            var processedOutputMin = getProcessedColor(outputMin);
+            var processedOutputMax = getProcessedColor(outputMax);
+            var templateString = _getTemplateString(processedOutputMin);
+            if (stringMatched(processedOutputMin, processedOutputMax)) {
+                var outputMinParsed = _getParsedStringArray(processedOutputMin);
+                var outputMaxParsed = _getParsedStringArray(processedOutputMax);
+                var result = _getArrayInterpolate(value, [inputMin, inputMax, outputMinParsed, outputMaxParsed], _extrapolateLeft, _extrapolateRight);
+                try {
+                    for (var result_1 = __values(result), result_1_1 = result_1.next(); !result_1_1.done; result_1_1 = result_1.next()) {
+                        var v = result_1_1.value;
+                        templateString = templateString.replace('$', v);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (result_1_1 && !result_1_1.done && (_a = result_1.return)) _a.call(result_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                return templateString;
+            }
+            else {
+                throw new Error("Output range doesn't match string format!");
+            }
+        }
+    }
+    else {
+        throw new Error('Output range cannot be Empty');
+    }
+}
+/**
+ * interpolateTransitionValue to interpolating TransitionValue type value
+ * @param value
+ * @param inputRange
+ * @param outputRange
+ * @param extrapolateConfig
+ * @returns TransitionValue
+ */
+var interpolateTransitionValue = function (value, inputRange, outputRange, extrapolateConfig) {
+    return __assign(__assign({}, value), { isInterpolation: true, interpolationConfig: {
+            inputRange: inputRange,
+            outputRange: outputRange,
+            extrapolateConfig: extrapolateConfig,
+        } });
+};
+/**
+ * interpolate function to interpolate both transition
+ * as well as numerical value
+ * @param value
+ * @param inputRange
+ * @param outputRange
+ * @param extrapolateConfig
+ */
+var interpolate$1 = function (value, inputRange, outputRange, extrapolateConfig) {
+    if (isFluidValue(value)) {
+        return interpolateTransitionValue(value, inputRange, outputRange, extrapolateConfig);
+    }
+    else if (typeof value === 'number') {
+        return interpolateNumbers(value, inputRange, outputRange, extrapolateConfig);
+    }
+    else {
+        throw new Error("'".concat(typeof value, "' cannot be interpolated!"));
+    }
+};
+/**
+ * Determines if two values can be interpolated.
+ * This function checks if two values, either numbers or strings,
+ * can be interpolated by ensuring they are of the same type and, in the case of strings,
+ * that they are compatible for interpolation based on processed color values.
+ *
+ * @param previousValue - The previous value to compare. Can be a number or a string.
+ * @param newValue - The new value to compare. Can be a number or a string.
+ * @returns True if interpolation is possible, false otherwise.
+ */
+function canInterpolate(previousValue, newValue) {
+    if (typeof previousValue !== typeof newValue) {
+        return false;
+    }
+    if (typeof newValue === 'number') {
+        return true;
+    }
+    if (typeof previousValue === 'string') {
+        var processedPreviousValue = getProcessedColor(previousValue);
+        var processedNewValue = getProcessedColor(newValue);
+        return (processedPreviousValue !== processedNewValue &&
+            _getTemplateString(processedPreviousValue) ===
+                _getTemplateString(processedNewValue));
+    }
+    return false;
+}
 
-var Gesture = /** @class */ (function () {
-    function Gesture() {
-        this.lastTimeStamp = Date.now();
-        this.isActive = false;
-        this.targetElements = []; // represents the bounded elements
-    }
-    // it must be overridden by other child classes
-    Gesture.prototype._initEvents = function () { };
-    // cancel events
-    // we only canceled down and move events because mouse up
-    // will not be triggered
-    Gesture.prototype._cancelEvents = function () {
-        if (this._subscribe) {
-            this._subscribe();
-        }
-    };
-    // re-apply new callback
-    Gesture.prototype.applyCallback = function (callback) {
-        this.callback = callback;
-    };
-    // apply gesture
-    Gesture.prototype.applyGesture = function (_a) {
-        var _this = this;
-        var targetElement = _a.targetElement, targetElements = _a.targetElements, callback = _a.callback, config = _a.config;
-        this.targetElement = targetElement;
-        this.targetElements = targetElements.map(function (element) { return element.current; });
-        this.callback = callback;
-        this.config = config;
-        // initialize events
-        this._initEvents();
-        // unbind
-        return function () { return _this._subscribe && _this._subscribe(); };
-    };
-    Gesture._VELOCITY_LIMIT = 20;
-    return Gesture;
+var styleTrasformKeys = [
+    'translate',
+    'translateX',
+    'translateY',
+    'translateZ',
+    'scale',
+    'scaleX',
+    'scaleY',
+    'scaleZ',
+    'rotate',
+    'rotateX',
+    'rotateY',
+    'rotateZ',
+    'skew',
+    'skewX',
+    'skewY',
+];
+function splitCSSValueAndUnit(value) {
+    var valueMatch = value.match(/(-)?(\d+.)?\d+/g);
+    var unitMatch = value.match(/px|rem|em|ex|%|cm|mm|in|pt|pc|ch|vh|vw|vmin|vmax/);
+    return {
+        value: Number(valueMatch),
+        unit: unitMatch && unitMatch[0],
+    };
+}
+// get unit of transform style property
+function getValueUnit(property, value) {
+    var unit;
+    var splitValue = splitCSSValueAndUnit(String(value)).value;
+    var splitUnit = splitCSSValueAndUnit(String(value)).unit;
+    // if string value is passed with unit then split it
+    if (splitUnit) {
+        return { value: splitValue, unit: splitUnit };
+    }
+    if (property.includes('translate') || property.includes('perspective')) {
+        unit = 'px';
+    }
+    else if (property.includes('scale')) {
+        unit = '';
+    }
+    else if (property.includes('rotate') || property.includes('skew')) {
+        unit = 'deg';
+    }
+    return { value: value, unit: unit };
+}
+function getTransformValueWithUnits(property, value) {
+    var valueUnit = getValueUnit(property, value);
+    if (property.includes('X') ||
+        property.includes('Y') ||
+        property.includes('Z') ||
+        property.includes('perspective') ||
+        property.includes('rotate') ||
+        property.includes('skew')) {
+        // axis value
+        return "".concat(property, "(").concat(valueUnit.value).concat(valueUnit.unit, ")");
+    }
+    else if (property.includes('translate') || property.indexOf('scale')) {
+        // two parameter value
+        return "".concat(property, "(").concat(valueUnit.value).concat(valueUnit.unit, ", ").concat(valueUnit.value).concat(valueUnit.unit, ")");
+    }
+    else {
+        throw new Error("Error! Property '".concat(property, "' cannot be transformed"));
+    }
+}
+/**
+ * getTransform function returns transform string from style object
+ */
+function getTransform(style) {
+    return Object.entries(style)
+        .map(function (_a) {
+        var _b = __read(_a, 2), prop = _b[0], value = _b[1];
+        return getTransformValueWithUnits(prop, value);
+    })
+        .reduce(function (transform, value) { return (transform += " ".concat(value)); }, '')
+        .trim();
+}
+function isTransformKey(key) {
+    return styleTrasformKeys.includes(key);
+}
+
+/**
+ * Higher-order component to make any component animatable.
+ *
+ * This function takes a React component or an HTML tag and returns a new component
+ * that can smoothly transition between states using fluid animations. It enhances
+ * the user experience by adding dynamic and engaging animations to the wrapped component.
+ *
+ * @param WrapperComponent - The React component or HTML tag to be wrapped with animation functionality.
+ * @returns - A new component with added animation capabilities.
+ *
+ * The returned component uses fluid animations to smoothly transition between different
+ * states. It supports both style and prop animations, handling transforms and other
+ * properties seamlessly. The component ensures that animations are efficiently applied
+ * and updated based on the current state and configuration of fluid values.
+ *
+ * @example
+ * const AnimatedDiv = makeFluid('div');
+ *
+ * const MyComponent = () => {
+ *  const opacity = useAnimatedValue(1)
+ *  return (
+ *   <AnimatedDiv style={{ opacity: opacity.value }}>
+ *     Hello, world!
+ *   </AnimatedDiv>
+ * )};
+ */
+function makeFluid(WrapperComponent) {
+    return React.forwardRef(function (givenProps, givenRef) {
+        var instanceRef = React.useRef(null);
+        var transformStyleRef = React.useRef({});
+        var _a = React.useMemo(function () {
+            var style = givenProps.style, props = __rest(givenProps, ["style"]);
+            var fluidStyle = getFluids('style', style);
+            var fluidProps = getFluids('props', props);
+            return {
+                fluids: __spreadArray(__spreadArray([], __read(fluidStyle.fluids), false), __read(fluidProps.fluids), false),
+                nonFluids: __spreadArray(__spreadArray([], __read(fluidStyle.nonFluids), false), __read(fluidProps.nonFluids), false),
+            };
+        }, [givenProps]), fluids = _a.fluids, nonFluids = _a.nonFluids;
+        var applyAnimationValues = function (_a) {
+            var isTransform = _a.isTransform, propertyType = _a.propertyType, property = _a.property, value = _a.value;
+            if (!instanceRef.current)
+                return;
+            if (propertyType === 'style') {
+                if (isTransform) {
+                    transformStyleRef.current[property] = value;
+                    instanceRef.current.style.transform = getTransform(transformStyleRef.current);
+                }
+                else {
+                    instanceRef.current.style[property] = getCssValue(property, value);
+                }
+            }
+            else if (propertyType === 'props') {
+                instanceRef.current.setAttribute(camelCaseToKebabCase(property), value);
+            }
+        };
+        React.useLayoutEffect(function () {
+            nonFluids.forEach(function (_a) {
+                var isTransform = _a.isTransform, property = _a.property, propertyType = _a.propertyType, value = _a.value;
+                return applyAnimationValues({
+                    isTransform: isTransform,
+                    property: property,
+                    propertyType: propertyType,
+                    value: value,
+                });
+            });
+        }, [nonFluids]);
+        React.useLayoutEffect(function () {
+            var subscribers = [];
+            fluids.forEach(function (f) {
+                var fluidValue = f.value, propertyType = f.propertyType, property = f.property, isTransform = f.isTransform;
+                var _subscribe = fluidValue._subscribe, _value = fluidValue._value, _currentValue = fluidValue._currentValue, _config = fluidValue._config;
+                var interpolationOutputRange = [];
+                var generateAnimation = animationObjectGenerator(_config);
+                var animation = null;
+                var onFrame = function (value) {
+                    _currentValue.current = value;
+                    var updatedValue = fluidValue.isInterpolation
+                        ? interpolateNumbers(value, fluidValue.interpolationConfig.inputRange, fluidValue.interpolationConfig.outputRange, fluidValue.interpolationConfig.extrapolateConfig)
+                        : value;
+                    applyAnimationValues({
+                        isTransform: isTransform,
+                        propertyType: propertyType,
+                        property: property,
+                        value: updatedValue,
+                    });
+                };
+                var onUpdate = function (value, config, callback) {
+                    if (canInterpolate(_value, value)) {
+                        var previousAnimation = animation;
+                        if (previousAnimation._value !== value) {
+                            animation.stop();
+                            animation = generateAnimation(previousAnimation._position, config);
+                            (config === null || config === void 0 ? void 0 : config.onStart) && config.onStart(previousAnimation._position);
+                            if (typeof value === 'string') {
+                                if (!interpolationOutputRange.includes(_value)) {
+                                    interpolationOutputRange.push(_value);
+                                }
+                                if (!interpolationOutputRange.includes(value)) {
+                                    interpolationOutputRange.push(value);
+                                }
+                                fluidValue.isInterpolation = true;
+                                fluidValue.interpolationConfig = {
+                                    inputRange: interpolationOutputRange.map(function (_, i) { return i; }),
+                                    outputRange: interpolationOutputRange,
+                                };
+                            }
+                            animation.start({
+                                toValue: typeof value === 'string'
+                                    ? interpolationOutputRange.indexOf(value)
+                                    : value,
+                                onFrame: onFrame,
+                                previousAnimation: previousAnimation,
+                                onEnd: callback,
+                            });
+                        }
+                    }
+                    else {
+                        if (typeof value !== typeof _value) {
+                            throw new Error("Cannot assign ".concat(typeof value, " to animated ").concat(typeof _value));
+                        }
+                        applyAnimationValues({
+                            isTransform: isTransform,
+                            propertyType: propertyType,
+                            property: property,
+                            value: value,
+                        });
+                    }
+                };
+                animation = generateAnimation(typeof _value === 'string' ? 0 : _value);
+                applyAnimationValues({
+                    isTransform: isTransform,
+                    propertyType: propertyType,
+                    property: property,
+                    value: _value,
+                });
+                var subscribe = _subscribe(onUpdate, property, Date.now());
+                subscribers.push(subscribe);
+            });
+            return function () {
+                subscribers.forEach(function (subscriber) { return subscriber(); });
+            };
+        }, []);
+        return React.createElement(WrapperComponent, __assign(__assign({}, getCleanProps(givenProps)), { ref: combineRefs(instanceRef, givenRef) }));
+    });
+}
+function combineRefs() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function applyRef(element) {
+        refs.forEach(function (ref) {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(element);
+                return;
+            }
+            if ('current' in ref)
+                ref.current = element;
+        });
+    };
+}
+function animationObjectGenerator(defaultConfig) {
+    return function (value, config) {
+        var animationConfig = __assign(__assign({}, defaultConfig), config);
+        var Animation = isDefined(animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.duration) || (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.immediate)
+            ? TimingAnimation
+            : SpringAnimation;
+        return new Animation({
+            initialPosition: value,
+            config: animationConfig,
+        });
+    };
+}
+function getFluids(propertyType, props) {
+    if (props === void 0) { props = {}; }
+    return Object.entries(props).reduce(function (res, _a) {
+        var _b = __read(_a, 2), property = _b[0], value = _b[1];
+        var isTransform = propertyType === 'style' && isTransformKey(property);
+        if (isFluidValue(value)) {
+            res.fluids.push({ isTransform: isTransform, property: property, propertyType: propertyType, value: value });
+        }
+        else {
+            res.nonFluids.push({ isTransform: isTransform, property: property, propertyType: propertyType, value: value });
+        }
+        return res;
+    }, { fluids: [], nonFluids: [] });
+}
+
+var tags = [
+    'a',
+    'abbr',
+    'address',
+    'area',
+    'article',
+    'aside',
+    'audio',
+    'b',
+    'base',
+    'bdi',
+    'bdo',
+    'big',
+    'blockquote',
+    'body',
+    'br',
+    'button',
+    'canvas',
+    'caption',
+    'center',
+    'cite',
+    'code',
+    'col',
+    'colgroup',
+    'data',
+    'datalist',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'dialog',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'head',
+    'header',
+    'hgroup',
+    'hr',
+    'html',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'keygen',
+    'label',
+    'legend',
+    'li',
+    'link',
+    'main',
+    'map',
+    'mark',
+    'menu',
+    'menuitem',
+    'meta',
+    'meter',
+    'nav',
+    'noindex',
+    'noscript',
+    'object',
+    'ol',
+    'optgroup',
+    'option',
+    'output',
+    'p',
+    'param',
+    'picture',
+    'pre',
+    'progress',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'search',
+    'section',
+    'select',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'style',
+    'sub',
+    'summary',
+    'sup',
+    'table',
+    'template',
+    'tbody',
+    'td',
+    'textarea',
+    'tfoot',
+    'th',
+    'thead',
+    'time',
+    'title',
+    'tr',
+    'track',
+    'u',
+    'ul',
+    'var',
+    'video',
+    'wbr',
+    // SVG Tags
+    'svg',
+    'animate',
+    'animateMotion',
+    'animateTransform',
+    'circle',
+    'clipPath',
+    'defs',
+    'desc',
+    'ellipse',
+    'feBlend',
+    'feColorMatrix',
+    'feComponentTransfer',
+    'feComposite',
+    'feConvolveMatrix',
+    'feDiffuseLighting',
+    'feDisplacementMap',
+    'feDistantLight',
+    'feDropShadow',
+    'feFlood',
+    'feFuncA',
+    'feFuncB',
+    'feFuncG',
+    'feFuncR',
+    'feGaussianBlur',
+    'feImage',
+    'feMerge',
+    'feMergeNode',
+    'feMorphology',
+    'feOffset',
+    'fePointLight',
+    'feSpecularLighting',
+    'feSpotLight',
+    'feTile',
+    'feTurbulence',
+    'filter',
+    'foreignObject',
+    'g',
+    'image',
+    'line',
+    'linearGradient',
+    'marker',
+    'mask',
+    'metadata',
+    'mpath',
+    'path',
+    'pattern',
+    'polygon',
+    'polyline',
+    'radialGradient',
+    'rect',
+    'set',
+    'stop',
+    'switch',
+    'symbol',
+    'text',
+    'textPath',
+    'tspan',
+    'use',
+    'view',
+];
+var fluid = {};
+tags.forEach(function (tag) {
+    fluid[tag] = makeFluid(tag);
+});
+
+/**
+ * Represents a fluid value that can animate between states.
+ */
+var FluidValue = /** @class */ (function () {
+    /**
+     * Creates a new FluidValue instance.
+     * @param initialValue - The initial value of the fluid value.
+     * @param config - Optional configuration for the fluid value.
+     */
+    function FluidValue(initialValue, config) {
+        var _this = this;
+        this._subscriptions = new Map();
+        this._subscribe = function (onUpdate, property, uuid) {
+            var e_1, _a;
+            var _loop_1 = function (key) {
+                if (key.property === property) {
+                    _this._subscriptions.set(key, onUpdate);
+                    return { value: function () { return _this._subscriptions.delete(key); } };
+                }
+            };
+            try {
+                for (var _b = __values(_this._subscriptions.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var key = _c.value;
+                    var state_1 = _loop_1(key);
+                    if (typeof state_1 === "object")
+                        return state_1.value;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            _this._subscriptions.set({ uuid: uuid, property: property }, onUpdate);
+            return function () { return _this._subscriptions.delete({ uuid: uuid, property: property }); };
+        };
+        this._value = initialValue;
+        this._currentValue = { current: initialValue };
+        this._config = config;
+        this.get = function () { return _this._currentValue.current; };
+    }
+    /**
+     * Animates from the current value to the updated value.
+     * Determines whether to perform a multi-stage or single-stage transition.
+     * @param updatedValue - The value to animate to, or a function that defines a multi-stage transition.
+     * @param config - Optional configuration for the animation.
+     * @param callback - Optional callback to be called after the animation ends.
+     */
+    FluidValue.prototype.setValue = function (updatedValue, config, callback) {
+        var e_2, _a;
+        var _this = this;
+        /** Multistage transition */
+        if (typeof updatedValue === 'function') {
+            updatedValue(function (nextValue, nextConfig) {
+                var multiStagePromise = new Promise(function (resolve) {
+                    var e_3, _a;
+                    try {
+                        for (var _b = __values(_this._subscriptions.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                            var subscriptionKey = _c.value;
+                            var updater = _this._subscriptions.get(subscriptionKey);
+                            if (updater) {
+                                updater(nextValue, nextConfig !== null && nextConfig !== void 0 ? nextConfig : config, function (result) {
+                                    if (result.finished) {
+                                        resolve(nextValue);
+                                    }
+                                    if (callback) {
+                                        callback(result);
+                                    }
+                                });
+                            }
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                });
+                return multiStagePromise;
+            });
+            return;
+        }
+        try {
+            /** Singlestage transition */
+            for (var _b = __values(this._subscriptions.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var subscriptionKey = _c.value;
+                var updater = this._subscriptions.get(subscriptionKey);
+                updater && updater(updatedValue, config, callback);
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    };
+    return FluidValue;
 }());
 
-var DragGesture = /** @class */ (function (_super) {
-    __extends(DragGesture, _super);
-    function DragGesture() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.movementStart = withDefault(0, 0);
-        _this.initialMovement = withDefault(0, 0);
-        _this.movement = withDefault(0, 0);
-        _this.previousMovement = withDefault(0, 0);
-        _this.translation = withDefault(0, 0);
-        _this.offset = withDefault(0, 0);
-        _this.velocity = withDefault(0, 0);
-        return _this;
-    }
-    // @override
-    // initialize the events
-    DragGesture.prototype._initEvents = function () {
-        if (this.targetElement || this.targetElements.length > 0) {
-            this._subscribe = attachEvents([window], [
-                ['mousedown', this.pointerDown.bind(this)],
-                ['mousemove', this.pointerMove.bind(this)],
-                ['mouseup', this.pointerUp.bind(this)],
-                ['touchstart', this.pointerDown.bind(this), { passive: false }],
-                ['touchmove', this.pointerMove.bind(this), { passive: false }],
-                ['touchend', this.pointerUp.bind(this)],
-            ]);
-        }
-    };
-    // @override - cancel events
-    // we only canceled down and move events because mouse up
-    // will not be triggered
-    DragGesture.prototype._cancelEvents = function () {
-        if (this._subscribe) {
-            this._subscribe(['mousedown', 'mousemove', 'touchstart', 'touchmove']);
-        }
-    };
-    DragGesture.prototype._handleCallback = function () {
-        var _this = this;
-        if (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 () {
-                    _this._cancelEvents();
-                },
-            });
-        }
-    };
-    DragGesture.prototype.pointerDown = function (e) {
-        var _a;
-        if (e.type === 'touchstart') {
-            this.movementStart = {
-                x: e.touches[0].clientX,
-                y: e.touches[0].clientY,
-            };
-        }
-        else {
-            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 };
-        // find current selected element
-        var currElem = this.targetElements.find(function (elem) { return elem === e.target; });
-        if (e.target === this.targetElement || currElem) {
-            this.isActive = true;
-            e.preventDefault();
-            // set args
-            if (currElem) {
-                this.currentIndex = this.targetElements.indexOf(currElem);
-            }
-            // if initial function is defined then call it to get initial movementX and movementY
-            // if only select to bounded draggable element
-            var initial = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.initial) && this.config.initial();
-            var initialMovementX = initial === null || initial === void 0 ? void 0 : initial.movementX;
-            var initialMovementY = initial === null || initial === void 0 ? void 0 : initial.movementY;
-            this.initialMovement = {
-                x: initialMovementX !== null && initialMovementX !== void 0 ? initialMovementX : 0,
-                y: initialMovementY !== null && initialMovementY !== void 0 ? initialMovementY : 0,
-            };
-            this.movement = {
-                x: this.initialMovement.x,
-                y: this.initialMovement.y,
-            };
-            this.previousMovement = {
-                x: this.initialMovement.x,
-                y: this.initialMovement.y,
-            };
-            this._handleCallback();
-        }
-    };
-    DragGesture.prototype.pointerMove = function (e) {
-        if (this.isActive) {
-            e.preventDefault();
-            var now = Date.now();
-            var deltaTime = clamp(now - this.lastTimeStamp, 0.1, 64);
-            this.lastTimeStamp = now;
-            var t = deltaTime / 1000;
-            if (e.type === 'touchmove') {
-                this.movement = {
-                    x: this.initialMovement.x +
-                        (e.touches[0].clientX - this.movementStart.x),
-                    y: this.initialMovement.y +
-                        (e.touches[0].clientY - this.movementStart.y),
-                };
-            }
-            else {
-                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: clamp((this.movement.x - this.previousMovement.x) / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
-                y: clamp((this.movement.y - this.previousMovement.y) / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
-            };
-            this.previousMovement = {
-                x: this.movement.x,
-                y: this.movement.y,
-            };
-            this._handleCallback();
-        }
-    };
-    DragGesture.prototype.pointerUp = function () {
-        if (this.isActive) {
-            this.isActive = false;
-            this._handleCallback();
-            this._cancelEvents();
-            this._initEvents();
-        }
-    };
-    return DragGesture;
-}(Gesture));
+/**
+ * useFluidValue
+ *
+ * @param value - initial value
+ * @param config - the config object for `FluidValue`
+ */
+var useFluidValue = function (value, config) {
+    var fluid = React.useMemo(function () { return new FluidValue(value, config); }, []);
+    var setFluid = React.useCallback(function (updateValue, config, callback) {
+        fluid.setValue(updateValue, config, callback);
+    }, []);
+    return [fluid, setFluid];
+};
 
-var MouseMoveGesture = /** @class */ (function (_super) {
-    __extends(MouseMoveGesture, _super);
-    function MouseMoveGesture() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.movement = withDefault(0, 0);
-        _this.previousMovement = withDefault(0, 0);
-        _this.velocity = withDefault(0, 0);
-        _this.direction = withDefault(0, 0);
-        return _this;
-    }
-    // @override
-    // initialize the events
-    MouseMoveGesture.prototype._initEvents = function () {
-        if (this.targetElement) {
-            this._subscribe = attachEvents([this.targetElement], [['mousemove', this.onMouseMove.bind(this)]]);
-        }
-        else if (this.targetElements.length > 0) {
-            this._subscribe = attachEvents(this.targetElements, [
-                ['mousemove', this.onMouseMove.bind(this)],
-            ]);
-        }
-        else {
-            this._subscribe = attachEvents([window], [['mousemove', this.onMouseMove.bind(this)]]);
-        }
-    };
-    MouseMoveGesture.prototype._handleCallback = function () {
-        var _a;
-        if (this.callback) {
-            this.callback({
-                args: [this.currentIndex],
-                event: this.event,
-                isMoving: this.isActive,
-                target: (_a = this.event) === null || _a === void 0 ? void 0 : _a.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,
-            });
-        }
-    };
-    MouseMoveGesture.prototype.onMouseMove = function (e) {
-        var _this = this;
-        // find current selected element
-        var currElem = this.targetElements.find(function (elem) { return elem === e.target; });
-        // set args
-        if (currElem) {
-            this.currentIndex = this.targetElements.indexOf(currElem);
-        }
-        this.event = e;
-        var now = Date.now();
-        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
-        this.lastTimeStamp = now;
-        var t = deltaTime / 1000; // seconds
-        var x = e.clientX;
-        var y = e.clientY;
-        this.movement = { x: x, y: y };
-        if (this.isActiveID !== -1) {
-            this.isActive = true;
-            clearTimeout(this.isActiveID);
-        }
-        this.isActiveID = setTimeout(function () {
-            _this.isActive = false;
-            _this.direction = { x: 0, y: 0 };
-            _this.velocity = { x: 0, y: 0 };
-            _this._handleCallback();
-        }, 250); // Debounce 250 milliseconds
-        var diffX = this.movement.x - this.previousMovement.x;
-        var diffY = this.movement.y - this.previousMovement.y;
-        this.direction = {
-            x: Math.sign(diffX),
-            y: Math.sign(diffY),
-        };
-        this.velocity = {
-            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
-            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
-        };
-        this.previousMovement = { x: this.movement.x, y: this.movement.y };
-        this._handleCallback();
-    };
-    return MouseMoveGesture;
-}(Gesture));
+/**
+ * `useMount`
+ *
+ * applies mounting and unmounting of a component according to state change
+ * applying transitions
+ *
+ * @param state - boolean indicating mount state of a component
+ * @param config - the config object `UseMountConfig`
+ */
+var useMount = function (state, config) {
+    var _a = __read(React.useState(false), 2), mounted = _a[0], setMounted = _a[1];
+    var _b = React.useRef(config).current, from = _b.from, enter = _b.enter, exit = _b.exit, innerConfig = _b.config, enterConfig = _b.enterConfig, exitConfig = _b.exitConfig;
+    var _c = __read(useFluidValue(from, innerConfig), 2), animation = _c[0], setAnimation = _c[1];
+    React.useLayoutEffect(function () {
+        if (state) {
+            setMounted(true);
+            queueMicrotask(function () { return setAnimation(enter, enterConfig); });
+        }
+        else {
+            setAnimation(exit, exitConfig, function (_a) {
+                var finished = _a.finished;
+                if (finished) {
+                    setMounted(false);
+                }
+            });
+        }
+    }, [state]);
+    return function (callback) { return callback(animation, mounted); };
+};
 
-var ScrollGesture = /** @class */ (function (_super) {
-    __extends(ScrollGesture, _super);
-    function ScrollGesture() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.movement = withDefault(0, 0);
-        _this.previousMovement = withDefault(0, 0);
-        _this.direction = withDefault(0, 0);
-        _this.velocity = withDefault(0, 0);
-        return _this;
-    }
-    // @override
-    // initialize the events
-    ScrollGesture.prototype._initEvents = function () {
-        if (this.targetElement) {
-            this._subscribe = attachEvents([this.targetElement], [['scroll', this.scrollElementListener.bind(this)]]);
-        }
-        else {
-            this._subscribe = attachEvents([window], [['scroll', this.scrollListener.bind(this)]]);
-        }
-    };
-    ScrollGesture.prototype._handleCallback = function () {
-        if (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,
-            });
-        }
-    };
-    ScrollGesture.prototype.onScroll = function (_a) {
-        var _this = this;
-        var x = _a.x, y = _a.y;
-        var now = Date.now();
-        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
-        this.lastTimeStamp = now;
-        var t = deltaTime / 1000; // seconds
-        this.movement = { x: x, y: y };
-        // Clear if scrolling
-        if (this.isActiveID !== -1) {
-            this.isActive = true;
-            clearTimeout(this.isActiveID);
-        }
-        this.isActiveID = setTimeout(function () {
-            _this.isActive = false;
-            _this.direction = { x: 0, y: 0 };
-            // Reset Velocity
-            _this.velocity = { x: 0, y: 0 };
-            _this._handleCallback(); // Debounce 250milliseconds
-        }, 250);
-        var diffX = this.movement.x - this.previousMovement.x;
-        var diffY = this.movement.y - this.previousMovement.y;
-        this.direction = {
-            x: Math.sign(diffX),
-            y: Math.sign(diffY),
-        };
-        this.velocity = {
-            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
-            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
-        };
-        this.previousMovement = {
-            x: this.movement.x,
-            y: this.movement.y,
-        };
-        this._handleCallback();
-    };
-    ScrollGesture.prototype.scrollListener = function () {
-        var y = window.pageYOffset, x = window.pageXOffset;
-        this.onScroll({ x: x, y: y });
-    };
-    ScrollGesture.prototype.scrollElementListener = function () {
-        var _a, _b;
-        var x = ((_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.scrollLeft) || 0;
-        var y = ((_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0;
-        this.onScroll({ x: x, y: y });
-    };
-    return ScrollGesture;
-}(Gesture));
+/**
+ * interpolate functions maps input range to given output range
+ * @param value - number | TransitionValue
+ * @param inputRange - Array<number>
+ * @param outputRange - Array<number | string>
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
+ * @returns - number | TransitionValue
+ */
+function interpolate(value, inputRange, outputRange, extrapolateConfig) {
+    return interpolate$1(value, inputRange, outputRange, extrapolateConfig);
+}
+/**
+ * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
+ * sorthand function to interpolate input range [0, 1]
+ * @param value - number | TransitionValue
+ * @param minOutput - number | string
+ * @param maxOutput - number | string
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
+ * @returns - number | TransitionValue
+ */
+function bInterpolate(value, minOutput, maxOutput, extrapolateConfig) {
+    return interpolate$1(value, [0, 1], [minOutput, maxOutput], extrapolateConfig);
+}
 
-var LINE_HEIGHT = 40;
-var PAGE_HEIGHT = 800;
-var WheelGesture = /** @class */ (function (_super) {
-    __extends(WheelGesture, _super);
-    function WheelGesture() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.movement = withDefault(0, 0);
-        _this.previousMovement = withDefault(0, 0);
-        _this.direction = withDefault(0, 0);
-        _this.velocity = withDefault(0, 0);
-        _this.delta = withDefault(0, 0);
-        // Holds offsets
-        _this.offset = withDefault(0, 0);
-        _this.translation = withDefault(0, 0);
-        return _this;
-    }
-    // @override
-    // initialize the events
-    WheelGesture.prototype._initEvents = function () {
-        if (this.targetElement) {
-            this._subscribe = attachEvents([this.targetElement], [['wheel', this.onWheel.bind(this)]]);
-        }
-    };
-    WheelGesture.prototype._handleCallback = function () {
-        if (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,
-            });
-        }
-    };
-    WheelGesture.prototype.onWheel = function (event) {
-        var _this = this;
-        var deltaX = event.deltaX, deltaY = event.deltaY, deltaMode = event.deltaMode;
-        var now = Date.now();
-        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
-        this.lastTimeStamp = now;
-        var t = deltaTime / 1000; // seconds
-        this.isActive = true;
-        if (this.isActiveID !== -1) {
-            this.isActive = true;
-            clearTimeout(this.isActiveID);
-        }
-        this.isActiveID = setTimeout(function () {
-            _this.isActive = false;
-            _this.translation = { x: _this.offset.x, y: _this.offset.y };
-            _this._handleCallback();
-            _this.velocity = { x: 0, y: 0 }; // Reset Velocity
-            _this.movement = { x: 0, y: 0 };
-        }, 200);
-        // normalize wheel values, especially for Firefox
-        if (deltaMode === 1) {
-            deltaX *= LINE_HEIGHT;
-            deltaY *= LINE_HEIGHT;
-        }
-        else if (deltaMode === 2) {
-            deltaX *= PAGE_HEIGHT;
-            deltaY *= PAGE_HEIGHT;
-        }
-        this.delta = { x: deltaX, y: deltaY };
-        this.movement = {
-            x: this.movement.x + deltaX,
-            y: this.movement.y + deltaY,
-        };
-        this.offset = {
-            x: this.translation.x + this.movement.x,
-            y: this.translation.y + this.movement.y,
-        };
-        var diffX = this.movement.x - this.previousMovement.x;
-        var diffY = this.movement.y - this.previousMovement.y;
-        this.direction = {
-            x: Math.sign(diffX),
-            y: Math.sign(diffY),
-        };
-        this.velocity = {
-            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
-            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
-        };
-        this.previousMovement = {
-            x: this.movement.x,
-            y: this.movement.y,
-        };
-        this._handleCallback();
-    };
-    return WheelGesture;
-}(Gesture));
+/**
+ * AnimatedBlock - A higher order component built upon `div` element
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
+ */
+var AnimatedBlock = makeFluid('div');
 
-var useRecognizer = function (handlers) {
-    var ref = React.useRef();
-    var elementRefs = React.useRef([]);
-    var subscribers = React.useRef(new Map()).current;
-    // re-initiate callback on change
-    React.useEffect(function () {
-        var e_1, _a;
-        try {
-            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = __read(_c.value, 2), _e = _d[1], keyIndex = _e.keyIndex, gesture = _e.gesture;
-                var _f = __read(handlers[keyIndex], 3), callback = _f[2];
-                gesture.applyCallback(callback);
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-    }, [handlers]);
-    React.useEffect(function () {
-        handlers.forEach(function (_a, keyIndex) {
-            var _b = __read(_a, 4), key = _b[0], gesture = _b[1], callback = _b[2], config = _b[3];
-            subscribers.set(key, {
-                keyIndex: keyIndex,
-                gesture: gesture,
-                unsubscribe: gesture.applyGesture({
-                    targetElement: ref.current,
-                    targetElements: elementRefs.current,
-                    callback: callback,
-                    config: config,
-                }),
-            });
-        });
-        return function () {
-            var e_2, _a;
-            try {
-                for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var _d = __read(_c.value, 2), unsubscribe = _d[1].unsubscribe;
-                    unsubscribe && unsubscribe();
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-        };
-    }, []);
-    return function (index) {
-        if (index === null || index === undefined) {
-            return { ref: ref };
-        }
-        else {
-            elementRefs.current[index] =
-                elementRefs.current[index] || React.createRef();
-            return { ref: elementRefs.current[index] };
-        }
-    };
+/**
+ * AnimatedInline - A higher order component built upon `span` element
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
+ */
+var AnimatedInline = makeFluid('span');
+
+/**
+ * AnimatedImage - A higher order component built upon `img` element
+ * which can accept `AnimatedValue`. It also exposes some extra style properties like
+ * translateX, translateY, rotateX, rotateY, scaleX, etc.
+ */
+var AnimatedImage = makeFluid('img');
+
+/**
+ * `useMountedValue` handles mounting and unmounting of a component which captures current state
+ * passed as an arugment (`state`) and exposes the shadow state which handles the mount and unmount
+ * of a component.
+ *
+ * @param { boolean } state - Boolean indicating the component should mount or unmount.
+ * @param { UseMountedValueConfig } config - Animation configuration.
+ */
+function useMountedValue(state, config) {
+    var mv = useMount(state, config);
+    return function (cb) { return mv(function (a, m) { return cb({ value: a }, m); }); };
+}
+
+/**
+ * MountedBlock - Higher order component which handles mounting and unmounting of a component.
+ * @prop { boolean } state - Boolean indicating the component should mount or unmount.
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
+ * @prop { number } from - Number that dictates the beginning state for animation.
+ * @prop { number } enter - Number that dictates the entry state for animation.
+ * @prop { number } exit - Number that dictates the exit state for animation.
+ * @prop { MountedValueConfig } config - Animation configuration for overall animation.
+ * @prop { MountedValueConfig } enterConfig - Animation configuration for the entering state of animation.
+ * @prop { MountedValueConfig } exitConfig - Animation configuration for the entering state of animation.
+ */
+var MountedBlock = function (_a) {
+    var state = _a.state, children = _a.children, _b = _a.from, from = _b === void 0 ? 0 : _b, _c = _a.enter, enter = _c === void 0 ? 1 : _c, _d = _a.exit, exit = _d === void 0 ? 0 : _d, config = _a.config, enterConfig = _a.enterConfig, exitConfig = _a.exitConfig;
+    var open = useMountedValue(state, {
+        from: from,
+        enter: enter,
+        exit: exit,
+        config: config,
+        enterConfig: enterConfig,
+        exitConfig: exitConfig,
+    });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: open(function (animation, mounted) { return mounted && children(animation); }) }));
 };
 
-function useDrag(callback, config) {
-    var gesture = React.useRef(new DragGesture()).current;
-    return useRecognizer([['drag', gesture, callback, config]]);
+var getInitialConfig = function (animationType) {
+    switch (animationType) {
+        case 'elastic':
+            return { mass: 1, friction: 18, tension: 250 };
+        case 'stiff':
+            return { mass: 1, friction: 18, tension: 350 };
+        case 'wooble':
+            return { mass: 1, friction: 8, tension: 250 };
+        case 'bounce':
+            return { duration: 500, easing: Easing.bounce };
+        case 'power1':
+            return { duration: 500, easing: Easing.bezier(0.17, 0.42, 0.51, 0.97) };
+        case 'power2':
+            return { duration: 500, easing: Easing.bezier(0.07, 0.11, 0.13, 1) };
+        case 'power3':
+            return { duration: 500, easing: Easing.bezier(0.09, 0.7, 0.16, 1.04) };
+        case 'power4':
+            return { duration: 500, easing: Easing.bezier(0.05, 0.54, 0, 1.03) };
+        case 'linear':
+            return { duration: 500, easing: Easing.linear };
+        case 'easein':
+            return { duration: 500, easing: Easing.in(Easing.ease) };
+        case 'easeout':
+            return { duration: 500, easing: Easing.out(Easing.ease) };
+        case 'easeinout':
+            return { duration: 500, easing: Easing.inOut(Easing.ease) };
+        case 'ease':
+        default:
+            return { mass: 1, friction: 34, tension: 290 };
+    }
+};
+
+var AnimationConfigUtils = {
+    ELASTIC: getInitialConfig('elastic'),
+    BOUNCE: getInitialConfig('bounce'),
+    EASE: getInitialConfig('ease'),
+    STIFF: getInitialConfig('stiff'),
+    WOOBLE: getInitialConfig('wooble'),
+    EASE_IN: getInitialConfig('easein'),
+    EASE_OUT: getInitialConfig('easeout'),
+    EASE_IN_OUT: getInitialConfig('easeinout'),
+    POWER1: getInitialConfig('power1'),
+    POWER2: getInitialConfig('power2'),
+    POWER3: getInitialConfig('power3'),
+    POWER4: getInitialConfig('power4'),
+    LINEAR: getInitialConfig('linear'),
+};
+
+/**
+ * `useAnimatedValue` returns an animation value with `.value` and `.currentValue` property which is
+ * initialized when passed to argument (`initialValue`). The retured value persist until the lifetime of
+ * a component. It doesnot cast any re-renders which can is very good for performance optimization.
+ *
+ * @param { string | number } initialValue - Initial value
+ * @param { UseAnimatedValueConfig } config - Animation configuration object.
+ */
+function useAnimatedValue(initialValue, config) {
+    var _a = __read(useFluidValue(initialValue, __assign(__assign({}, AnimationConfigUtils.EASE), config)), 2), animation = _a[0], setAnimation = _a[1];
+    var targetObject = {
+        value: animation,
+        currentValue: animation.get(),
+    };
+    return new Proxy(targetObject, {
+        set: function (_, key, value) {
+            if (key === 'value') {
+                if (typeof value === 'number' || typeof value === 'string') {
+                    setAnimation(value);
+                }
+                return true;
+            }
+            throw new Error('You cannot set any other property to animation node.');
+        },
+        get: function (_, key) {
+            if (key === 'value') {
+                return animation;
+            }
+            if (key === 'currentValue') {
+                return animation.get();
+            }
+            throw new Error('You cannot access any other property from animation node.');
+        },
+    });
 }
 
-function useMouseMove(callback) {
-    var gesture = React.useRef(new MouseMoveGesture()).current;
-    return useRecognizer([['move', gesture, callback]]);
+/**
+ * ScrollableBlock - Higher order component to handle the entrance or exit animation
+ * of a component when it enters or exit the viewport. Accepts child as a function with
+ * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
+ * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
+ * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
+ * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
+ * @prop { UseAnimatedValueConfig } animationConfig - Animation config
+ */
+var ScrollableBlock = function (props) {
+    var children = props.children, _a = props.direction, direction = _a === void 0 ? 'single' : _a, animationConfig = props.animationConfig, _b = props.threshold, threshold = _b === void 0 ? 0.2 : _b;
+    var scrollableBlockRef = React__namespace.useRef(null);
+    var animation = useAnimatedValue(0, animationConfig); // 0: not intersecting | 1: intersecting
+    React__namespace.useEffect(function () {
+        var _scrollableBlock = scrollableBlockRef.current;
+        var observer = new IntersectionObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            var isIntersecting = entry.isIntersecting;
+            if (isIntersecting) {
+                animation.value = 1;
+            }
+            else {
+                if (direction === 'both')
+                    animation.value = 0;
+            }
+        }, {
+            root: null, // FOR VIEWPORT ONLY
+            threshold: threshold,
+        });
+        if (_scrollableBlock) {
+            observer.observe(_scrollableBlock);
+        }
+        return function () {
+            if (_scrollableBlock) {
+                observer.unobserve(_scrollableBlock);
+            }
+        };
+    }, []);
+    return (jsxRuntime.jsx("div", { ref: scrollableBlockRef, children: children && children({ value: animation.value }) }));
+};
+
+/**
+ * bin(booleanValue)
+ * returns 1 if booleanValue == true and 0 if booleanValue == false
+ */
+function bin(bool) {
+    return bool ? 1 : 0;
+}
+/**
+ * mix(progress, a, b)
+ * linear interpolation between a and b
+ */
+function mix(perc, val1, val2) {
+    return val1 * (1 - perc) + val2 * perc;
+}
+/**
+ * clamp(value, min, max)
+ * clamps value for min and max bounds
+ */
+function clamp(value, lowerbound, upperbound) {
+    return Math.min(Math.max(value, lowerbound), upperbound);
+}
+function rubber2(distanceFromEdge, constant) {
+    return Math.pow(distanceFromEdge, constant * 5);
 }
+function rubber(distanceFromEdge, dimension, constant) {
+    if (dimension === 0 || Math.abs(dimension) === Infinity)
+        return rubber2(distanceFromEdge, constant);
+    return ((distanceFromEdge * dimension * constant) /
+        (dimension + constant * distanceFromEdge));
+}
+/**
+ * rubberClamp(value, min, max, constant?)
+ * constant is optional : default 0.15
+ * clamps the value for min and max value and
+ * extends beyond min and max values with constant
+ * factor to create elastic rubber band effect
+ */
+function rubberClamp(value, lowerbound, upperbound, constant) {
+    if (constant === void 0) { constant = 0.15; }
+    if (constant === 0)
+        return clamp(value, lowerbound, upperbound);
+    if (value < lowerbound) {
+        return (-rubber(lowerbound - value, upperbound - lowerbound, constant) +
+            lowerbound);
+    }
+    if (value > upperbound) {
+        return (+rubber(value - upperbound, upperbound - lowerbound, constant) +
+            upperbound);
+    }
+    return value;
+}
+/**
+ * snapTo(value, velocity, snapPoints[])
+ * Calculates the final snapPoint according to given current value,
+ * velocity and snapPoints array
+ */
+function snapTo(value, velocity, snapPoints) {
+    var finalValue = value + velocity * 0.2;
+    var getDiff = function (point) { return Math.abs(point - finalValue); };
+    var deltas = snapPoints.map(getDiff);
+    var minDelta = Math.min.apply(Math, __spreadArray([], __read(deltas), false));
+    return snapPoints.reduce(function (acc, point) {
+        if (getDiff(point) === minDelta) {
+            return point;
+        }
+        else {
+            return acc;
+        }
+    });
+}
+/**
+ * move(array, moveIndex, toIndex)
+ * move array item from moveIndex to toIndex without array modification
+ */
+function move(array, moveIndex, toIndex) {
+    var item = array[moveIndex];
+    var length = array.length;
+    var diff = moveIndex - toIndex;
+    if (diff > 0) {
+        return __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(array.slice(0, toIndex)), false), [
+            item
+        ], false), __read(array.slice(toIndex, moveIndex)), false), __read(array.slice(moveIndex + 1, length)), false);
+    }
+    else if (diff < 0) {
+        var targetIndex = toIndex + 1;
+        return __spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(array.slice(0, moveIndex)), false), __read(array.slice(moveIndex + 1, targetIndex)), false), [
+            item
+        ], false), __read(array.slice(targetIndex, length)), false);
+    }
+    return array;
+}
+
+/**
+ * TransitionBlock - Higher order component which animates on state change.
+ * @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
+ * @prop { UseAnimatedValueConfig } config - Animation configuration.
+ */
+var TransitionBlock = function (_a) {
+    var state = _a.state, children = _a.children, config = _a.config;
+    var amv = useAnimatedValue(bin(state), config);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ value: amv.value }) });
+};
 
-function useScroll(callback) {
-    var gesture = React.useRef(new ScrollGesture()).current;
-    return useRecognizer([['scroll', gesture, callback]]);
+/**
+ * @param { number } ms - number of milliseconds to delay code execution
+ * @returns Promise
+ */
+function delay(ms) {
+    return new Promise(function (resolve) {
+        setTimeout(function () { return resolve(null); }, ms);
+    });
 }
 
-function useWheel(callback) {
-    var gesture = React.useRef(new WheelGesture()).current;
-    return useRecognizer([['wheel', gesture, callback]]);
+/**
+ * Attach single document / window event / HTMLElement
+ */
+function attachEvent(domTargets, event, callback, capture) {
+    if (capture === void 0) { capture = false; }
+    domTargets.forEach(function (target) {
+        target.addEventListener(event, callback, capture);
+    });
+    return function () {
+        domTargets.forEach(function (target) {
+            target.removeEventListener(event, callback, capture);
+        });
+    };
+}
+/**
+ * Attach multiple document / window event / HTMLElement
+ */
+function attachEvents(domTargets, events) {
+    var subscribers = new Map();
+    events.forEach(function (_a) {
+        var _b = __read(_a, 3), event = _b[0], callback = _b[1], _c = _b[2], capture = _c === void 0 ? false : _c;
+        subscribers.set(event, attachEvent(domTargets, event, callback, capture));
+    });
+    return function (eventKeys) {
+        var e_1, _a;
+        try {
+            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), eventKey = _d[0], subscriber = _d[1];
+                if (!eventKeys) {
+                    subscriber();
+                    return;
+                }
+                if (eventKeys.indexOf(eventKey) !== -1) {
+                    subscriber();
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
 }
 
-function useGesture(_a) {
-    var onDrag = _a.onDrag, onWheel = _a.onWheel, onScroll = _a.onScroll, onMouseMove = _a.onMouseMove;
-    var dragGesture = React.useRef(new DragGesture()).current;
-    var wheelGesture = React.useRef(new WheelGesture()).current;
-    var scrollGesture = React.useRef(new ScrollGesture()).current;
-    var mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
-    return useRecognizer([
-        ['drag', dragGesture, onDrag],
-        ['wheel', wheelGesture, onWheel],
-        ['scroll', scrollGesture, onScroll],
-        ['move', mouseMoveGesture, onMouseMove],
-    ]);
+function useOutsideClick(elementRef, callback, deps) {
+    var callbackRef = React.useRef();
+    if (!callbackRef.current) {
+        callbackRef.current = callback;
+    }
+    // Reinitiate callback when dependency change
+    React.useEffect(function () {
+        callbackRef.current = callback;
+        return function () {
+            callbackRef.current = function () { return false; };
+        };
+    }, deps);
+    React.useEffect(function () {
+        var handleOutsideClick = function (e) {
+            var _a;
+            if (!((_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                callbackRef.current && callbackRef.current(e);
+            }
+        };
+        var subscribe = attachEvents([document], [['click', handleOutsideClick]]);
+        return function () { return subscribe && subscribe(); };
+    }, []);
 }
 
-function useOutsideClick(elementRef, callback, deps) {
-    var callbackRef = React.useRef();
-    if (!callbackRef.current) {
-        callbackRef.current = callback;
-    }
-    // Reinitiate callback when dependency change
-    React.useEffect(function () {
-        callbackRef.current = callback;
-        return function () {
-            callbackRef.current = function () { return false; };
-        };
-    }, deps);
-    React.useEffect(function () {
-        var handleOutsideClick = function (e) {
-            var _a;
-            if (!((_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                callbackRef.current && callbackRef.current(e);
-            }
-        };
-        var subscribe = attachEvents([document], [["click", handleOutsideClick]]);
-        return function () { return subscribe && subscribe(); };
-    }, []);
+function useMeasure(callback, deps) {
+    var ref = React.useRef(null);
+    var elementRefs = React.useRef([]);
+    var callbackRef = React.useRef(callback);
+    // Reinitiate callback when dependency change
+    React.useEffect(function () {
+        callbackRef.current = callback;
+        return function () {
+            callbackRef.current = function () { return false; };
+        };
+    }, deps);
+    React.useEffect(function () {
+        var _refElement = ref.current || document.documentElement;
+        var _refElementsMultiple = elementRefs.current;
+        var resizeObserver = new ResizeObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            var _c = entry.target.getBoundingClientRect(), left = _c.left, top = _c.top, width = _c.width, height = _c.height;
+            var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
+            if (callbackRef) {
+                if (_refElement === document.documentElement) {
+                    return; // no-op for document
+                }
+                else {
+                    callbackRef.current({
+                        left: left + pageXOffset,
+                        top: top + pageYOffset,
+                        width: width,
+                        height: height,
+                        vLeft: left,
+                        vTop: top,
+                    });
+                }
+            }
+        });
+        var resizeObserverMultiple = new ResizeObserver(function (entries) {
+            var left = [];
+            var top = [];
+            var width = [];
+            var height = [];
+            var vLeft = [];
+            var vTop = [];
+            entries.forEach(function (entry) {
+                var _a = entry.target.getBoundingClientRect(), _left = _a.left, _top = _a.top, _width = _a.width, _height = _a.height;
+                var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
+                var _pageLeft = _left + pageXOffset;
+                var _pageTop = _top + pageYOffset;
+                left.push(_pageLeft);
+                top.push(_pageTop);
+                width.push(_width);
+                height.push(_height);
+                vLeft.push(_left);
+                vTop.push(_top);
+            });
+            if (callbackRef) {
+                callbackRef.current({
+                    left: left,
+                    top: top,
+                    width: width,
+                    height: height,
+                    vLeft: vLeft,
+                    vTop: vTop,
+                });
+            }
+        });
+        if (_refElement) {
+            if (_refElement === document.documentElement &&
+                _refElementsMultiple.length > 0) {
+                _refElementsMultiple.forEach(function (element) {
+                    resizeObserverMultiple.observe(element.current);
+                });
+            }
+            else {
+                resizeObserver.observe(_refElement);
+            }
+        }
+        return function () {
+            if (_refElement) {
+                if (_refElement === document.documentElement &&
+                    _refElementsMultiple.length > 0) {
+                    _refElementsMultiple.forEach(function (element) {
+                        resizeObserverMultiple.unobserve(element.current);
+                    });
+                }
+                else {
+                    resizeObserver.unobserve(_refElement);
+                }
+            }
+        };
+    }, []);
+    return function (index) {
+        if (index === null || index === undefined) {
+            return { ref: ref };
+        }
+        else {
+            elementRefs.current[index] = elementRefs.current[index] || React.createRef();
+            return { ref: elementRefs.current[index] };
+        }
+    }; // ...bind() or ...bind(index) for multiple
 }
 
-function useMeasure(callback, deps) {
-    var ref = React.useRef(null);
-    var elementRefs = React.useRef([]);
-    var callbackRef = React.useRef(callback);
-    // Reinitiate callback when dependency change
-    React.useEffect(function () {
-        callbackRef.current = callback;
-        return function () {
-            callbackRef.current = function () { return false; };
-        };
-    }, deps);
-    React.useEffect(function () {
-        var _refElement = ref.current || document.documentElement;
-        var _refElementsMultiple = elementRefs.current;
-        var resizeObserver = new ResizeObserver(function (_a) {
-            var _b = __read(_a, 1), entry = _b[0];
-            var _c = entry.target.getBoundingClientRect(), left = _c.left, top = _c.top, width = _c.width, height = _c.height;
-            var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
-            if (callbackRef) {
-                if (_refElement === document.documentElement) {
-                    return; // no-op for document
-                }
-                else {
-                    callbackRef.current({
-                        left: left + pageXOffset,
-                        top: top + pageYOffset,
-                        width: width,
-                        height: height,
-                        vLeft: left,
-                        vTop: top,
-                    });
-                }
-            }
-        });
-        var resizeObserverMultiple = new ResizeObserver(function (entries) {
-            var left = [];
-            var top = [];
-            var width = [];
-            var height = [];
-            var vLeft = [];
-            var vTop = [];
-            entries.forEach(function (entry) {
-                var _a = entry.target.getBoundingClientRect(), _left = _a.left, _top = _a.top, _width = _a.width, _height = _a.height;
-                var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
-                var _pageLeft = _left + pageXOffset;
-                var _pageTop = _top + pageYOffset;
-                left.push(_pageLeft);
-                top.push(_pageTop);
-                width.push(_width);
-                height.push(_height);
-                vLeft.push(_left);
-                vTop.push(_top);
-            });
-            if (callbackRef) {
-                callbackRef.current({
-                    left: left,
-                    top: top,
-                    width: width,
-                    height: height,
-                    vLeft: vLeft,
-                    vTop: vTop,
-                });
-            }
-        });
-        if (_refElement) {
-            if (_refElement === document.documentElement &&
-                _refElementsMultiple.length > 0) {
-                _refElementsMultiple.forEach(function (element) {
-                    resizeObserverMultiple.observe(element.current);
-                });
-            }
-            else {
-                resizeObserver.observe(_refElement);
-            }
-        }
-        return function () {
-            if (_refElement) {
-                if (_refElement === document.documentElement &&
-                    _refElementsMultiple.length > 0) {
-                    _refElementsMultiple.forEach(function (element) {
-                        resizeObserverMultiple.unobserve(element.current);
-                    });
-                }
-                else {
-                    resizeObserver.unobserve(_refElement);
-                }
-            }
-        };
-    }, []);
-    return function (index) {
-        if (index === null || index === undefined) {
-            return { ref: ref };
-        }
-        else {
-            elementRefs.current[index] =
-                elementRefs.current[index] || React.createRef();
-            return { ref: elementRefs.current[index] };
-        }
-    }; // ...bind() or ...bind(index) for multiple
+function useWindowDimension(callback, deps) {
+    var windowDimensionsRef = React.useRef({
+        width: 0,
+        height: 0,
+        innerWidth: 0,
+        innerHeight: 0,
+    });
+    var callbackRef = React.useRef(callback);
+    var handleCallback = function () {
+        if (callbackRef) {
+            callbackRef.current(__assign({}, windowDimensionsRef.current));
+        }
+    };
+    // Reinitiate callback when dependency change
+    React.useEffect(function () {
+        callbackRef.current = callback;
+        return function () {
+            callbackRef.current = function () { return false; };
+        };
+    }, deps);
+    React.useEffect(function () {
+        var resizeObserver = new ResizeObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            var _c = entry.target, clientWidth = _c.clientWidth, clientHeight = _c.clientHeight;
+            var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+            windowDimensionsRef.current = {
+                width: clientWidth,
+                height: clientHeight,
+                innerWidth: innerWidth,
+                innerHeight: innerHeight,
+            };
+            handleCallback();
+        });
+        resizeObserver.observe(document.documentElement);
+        return function () { return resizeObserver.unobserve(document.documentElement); };
+    }, []);
 }
 
-function useWindowDimension(callback, deps) {
-    var windowDimensionsRef = React.useRef({
-        width: 0,
-        height: 0,
-        innerWidth: 0,
-        innerHeight: 0,
-    });
-    var callbackRef = React.useRef(callback);
-    var handleCallback = function () {
-        if (callbackRef) {
-            callbackRef.current(__assign({}, windowDimensionsRef.current));
-        }
-    };
-    // Reinitiate callback when dependency change
-    React.useEffect(function () {
-        callbackRef.current = callback;
-        return function () {
-            callbackRef.current = function () { return false; };
-        };
-    }, deps);
-    React.useEffect(function () {
-        var resizeObserver = new ResizeObserver(function (_a) {
-            var _b = __read(_a, 1), entry = _b[0];
-            var _c = entry.target, clientWidth = _c.clientWidth, clientHeight = _c.clientHeight;
-            var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
-            windowDimensionsRef.current = {
-                width: clientWidth,
-                height: clientHeight,
-                innerWidth: innerWidth,
-                innerHeight: innerHeight,
-            };
-            handleCallback();
-        });
-        resizeObserver.observe(document.documentElement);
-        return function () { return resizeObserver.unobserve(document.documentElement); };
-    }, []);
+var withDefault = function (x, y) {
+    return { x: x, y: y };
+};
+
+var Gesture = /** @class */ (function () {
+    function Gesture() {
+        this.lastTimeStamp = Date.now();
+        this.isActive = false;
+        this.targetElements = []; // represents the bounded elements
+    }
+    // it must be overridden by other child classes
+    Gesture.prototype._initEvents = function () { };
+    // cancel events
+    // we only canceled down and move events because mouse up
+    // will not be triggered
+    Gesture.prototype._cancelEvents = function () {
+        if (this._subscribe) {
+            this._subscribe();
+        }
+    };
+    // re-apply new callback
+    Gesture.prototype.applyCallback = function (callback) {
+        this.callback = callback;
+    };
+    // apply gesture
+    Gesture.prototype.applyGesture = function (_a) {
+        var _this = this;
+        var targetElement = _a.targetElement, targetElements = _a.targetElements, callback = _a.callback, config = _a.config;
+        this.targetElement = targetElement;
+        this.targetElements = targetElements.map(function (element) { return element.current; });
+        this.callback = callback;
+        this.config = config;
+        // initialize events
+        this._initEvents();
+        // unbind
+        return function () { return _this._subscribe && _this._subscribe(); };
+    };
+    Gesture._VELOCITY_LIMIT = 20;
+    return Gesture;
+}());
+
+var DragGesture = /** @class */ (function (_super) {
+    __extends(DragGesture, _super);
+    function DragGesture() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.movementStart = withDefault(0, 0);
+        _this.initialMovement = withDefault(0, 0);
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.translation = withDefault(0, 0);
+        _this.offset = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    DragGesture.prototype._initEvents = function () {
+        if (this.targetElement || this.targetElements.length > 0) {
+            this._subscribe = attachEvents([window], [
+                ['mousedown', this.pointerDown.bind(this)],
+                ['mousemove', this.pointerMove.bind(this)],
+                ['mouseup', this.pointerUp.bind(this)],
+                ['touchstart', this.pointerDown.bind(this), { passive: false }],
+                ['touchmove', this.pointerMove.bind(this), { passive: false }],
+                ['touchend', this.pointerUp.bind(this)],
+            ]);
+        }
+    };
+    // @override - cancel events
+    // we only canceled down and move events because mouse up
+    // will not be triggered
+    DragGesture.prototype._cancelEvents = function () {
+        if (this._subscribe) {
+            this._subscribe(['mousedown', 'mousemove', 'touchstart', 'touchmove']);
+        }
+    };
+    DragGesture.prototype._handleCallback = function () {
+        var _this = this;
+        if (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 () {
+                    _this._cancelEvents();
+                },
+            });
+        }
+    };
+    DragGesture.prototype.pointerDown = function (e) {
+        var _a;
+        if (e.type === 'touchstart') {
+            this.movementStart = {
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+            };
+        }
+        else {
+            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 };
+        // find current selected element
+        var currElem = this.targetElements.find(function (elem) { return elem === e.target; });
+        if (e.target === this.targetElement || currElem) {
+            this.isActive = true;
+            e.preventDefault();
+            // set args
+            if (currElem) {
+                this.currentIndex = this.targetElements.indexOf(currElem);
+            }
+            // if initial function is defined then call it to get initial movementX and movementY
+            // if only select to bounded draggable element
+            var initial = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.initial) && this.config.initial();
+            var initialMovementX = initial === null || initial === void 0 ? void 0 : initial.movementX;
+            var initialMovementY = initial === null || initial === void 0 ? void 0 : initial.movementY;
+            this.initialMovement = {
+                x: initialMovementX !== null && initialMovementX !== void 0 ? initialMovementX : 0,
+                y: initialMovementY !== null && initialMovementY !== void 0 ? initialMovementY : 0,
+            };
+            this.movement = {
+                x: this.initialMovement.x,
+                y: this.initialMovement.y,
+            };
+            this.previousMovement = {
+                x: this.initialMovement.x,
+                y: this.initialMovement.y,
+            };
+            this._handleCallback();
+        }
+    };
+    DragGesture.prototype.pointerMove = function (e) {
+        if (this.isActive) {
+            e.preventDefault();
+            var now = Date.now();
+            var deltaTime = clamp(now - this.lastTimeStamp, 0.1, 64);
+            this.lastTimeStamp = now;
+            var t = deltaTime / 1000;
+            if (e.type === 'touchmove') {
+                this.movement = {
+                    x: this.initialMovement.x +
+                        (e.touches[0].clientX - this.movementStart.x),
+                    y: this.initialMovement.y +
+                        (e.touches[0].clientY - this.movementStart.y),
+                };
+            }
+            else {
+                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: clamp((this.movement.x - this.previousMovement.x) / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+                y: clamp((this.movement.y - this.previousMovement.y) / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            };
+            this.previousMovement = {
+                x: this.movement.x,
+                y: this.movement.y,
+            };
+            this._handleCallback();
+        }
+    };
+    DragGesture.prototype.pointerUp = function () {
+        if (this.isActive) {
+            this.isActive = false;
+            this._handleCallback();
+            this._cancelEvents();
+            this._initEvents();
+        }
+    };
+    return DragGesture;
+}(Gesture));
+
+var MouseMoveGesture = /** @class */ (function (_super) {
+    __extends(MouseMoveGesture, _super);
+    function MouseMoveGesture() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        _this.direction = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    MouseMoveGesture.prototype._initEvents = function () {
+        if (this.targetElement) {
+            this._subscribe = attachEvents([this.targetElement], [['mousemove', this.onMouseMove.bind(this)]]);
+        }
+        else if (this.targetElements.length > 0) {
+            this._subscribe = attachEvents(this.targetElements, [
+                ['mousemove', this.onMouseMove.bind(this)],
+            ]);
+        }
+        else {
+            this._subscribe = attachEvents([window], [['mousemove', this.onMouseMove.bind(this)]]);
+        }
+    };
+    MouseMoveGesture.prototype._handleCallback = function () {
+        var _a;
+        if (this.callback) {
+            this.callback({
+                args: [this.currentIndex],
+                event: this.event,
+                isMoving: this.isActive,
+                target: (_a = this.event) === null || _a === void 0 ? void 0 : _a.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,
+            });
+        }
+    };
+    MouseMoveGesture.prototype.onMouseMove = function (e) {
+        var _this = this;
+        // find current selected element
+        var currElem = this.targetElements.find(function (elem) { return elem === e.target; });
+        // set args
+        if (currElem) {
+            this.currentIndex = this.targetElements.indexOf(currElem);
+        }
+        this.event = e;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+        this.lastTimeStamp = now;
+        var t = deltaTime / 1000; // seconds
+        var x = e.clientX;
+        var y = e.clientY;
+        this.movement = { x: x, y: y };
+        if (this.isActiveID !== -1) {
+            this.isActive = true;
+            clearTimeout(this.isActiveID);
+        }
+        this.isActiveID = setTimeout(function () {
+            _this.isActive = false;
+            _this.direction = { x: 0, y: 0 };
+            _this.velocity = { x: 0, y: 0 };
+            _this._handleCallback();
+        }, 250); // Debounce 250 milliseconds
+        var diffX = this.movement.x - this.previousMovement.x;
+        var diffY = this.movement.y - this.previousMovement.y;
+        this.direction = {
+            x: Math.sign(diffX),
+            y: Math.sign(diffY),
+        };
+        this.velocity = {
+            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+        };
+        this.previousMovement = { x: this.movement.x, y: this.movement.y };
+        this._handleCallback();
+    };
+    return MouseMoveGesture;
+}(Gesture));
+
+var ScrollGesture = /** @class */ (function (_super) {
+    __extends(ScrollGesture, _super);
+    function ScrollGesture() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.direction = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    ScrollGesture.prototype._initEvents = function () {
+        if (this.targetElement) {
+            this._subscribe = attachEvents([this.targetElement], [['scroll', this.scrollElementListener.bind(this)]]);
+        }
+        else {
+            this._subscribe = attachEvents([window], [['scroll', this.scrollListener.bind(this)]]);
+        }
+    };
+    ScrollGesture.prototype._handleCallback = function () {
+        if (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,
+            });
+        }
+    };
+    ScrollGesture.prototype.onScroll = function (_a) {
+        var _this = this;
+        var x = _a.x, y = _a.y;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+        this.lastTimeStamp = now;
+        var t = deltaTime / 1000; // seconds
+        this.movement = { x: x, y: y };
+        // Clear if scrolling
+        if (this.isActiveID !== -1) {
+            this.isActive = true;
+            clearTimeout(this.isActiveID);
+        }
+        this.isActiveID = setTimeout(function () {
+            _this.isActive = false;
+            _this.direction = { x: 0, y: 0 };
+            // Reset Velocity
+            _this.velocity = { x: 0, y: 0 };
+            _this._handleCallback(); // Debounce 250milliseconds
+        }, 250);
+        var diffX = this.movement.x - this.previousMovement.x;
+        var diffY = this.movement.y - this.previousMovement.y;
+        this.direction = {
+            x: Math.sign(diffX),
+            y: Math.sign(diffY),
+        };
+        this.velocity = {
+            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+        };
+        this.previousMovement = {
+            x: this.movement.x,
+            y: this.movement.y,
+        };
+        this._handleCallback();
+    };
+    ScrollGesture.prototype.scrollListener = function () {
+        var y = window.pageYOffset, x = window.pageXOffset;
+        this.onScroll({ x: x, y: y });
+    };
+    ScrollGesture.prototype.scrollElementListener = function () {
+        var _a, _b;
+        var x = ((_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.scrollLeft) || 0;
+        var y = ((_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0;
+        this.onScroll({ x: x, y: y });
+    };
+    return ScrollGesture;
+}(Gesture));
+
+var LINE_HEIGHT = 40;
+var PAGE_HEIGHT = 800;
+var WheelGesture = /** @class */ (function (_super) {
+    __extends(WheelGesture, _super);
+    function WheelGesture() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.direction = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        _this.delta = withDefault(0, 0);
+        // Holds offsets
+        _this.offset = withDefault(0, 0);
+        _this.translation = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    WheelGesture.prototype._initEvents = function () {
+        if (this.targetElement) {
+            this._subscribe = attachEvents([this.targetElement], [['wheel', this.onWheel.bind(this)]]);
+        }
+    };
+    WheelGesture.prototype._handleCallback = function () {
+        if (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,
+            });
+        }
+    };
+    WheelGesture.prototype.onWheel = function (event) {
+        var _this = this;
+        var deltaX = event.deltaX, deltaY = event.deltaY, deltaMode = event.deltaMode;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+        this.lastTimeStamp = now;
+        var t = deltaTime / 1000; // seconds
+        this.isActive = true;
+        if (this.isActiveID !== -1) {
+            this.isActive = true;
+            clearTimeout(this.isActiveID);
+        }
+        this.isActiveID = setTimeout(function () {
+            _this.isActive = false;
+            _this.translation = { x: _this.offset.x, y: _this.offset.y };
+            _this._handleCallback();
+            _this.velocity = { x: 0, y: 0 }; // Reset Velocity
+            _this.movement = { x: 0, y: 0 };
+        }, 200);
+        // normalize wheel values, especially for Firefox
+        if (deltaMode === 1) {
+            deltaX *= LINE_HEIGHT;
+            deltaY *= LINE_HEIGHT;
+        }
+        else if (deltaMode === 2) {
+            deltaX *= PAGE_HEIGHT;
+            deltaY *= PAGE_HEIGHT;
+        }
+        this.delta = { x: deltaX, y: deltaY };
+        this.movement = {
+            x: this.movement.x + deltaX,
+            y: this.movement.y + deltaY,
+        };
+        this.offset = {
+            x: this.translation.x + this.movement.x,
+            y: this.translation.y + this.movement.y,
+        };
+        var diffX = this.movement.x - this.previousMovement.x;
+        var diffY = this.movement.y - this.previousMovement.y;
+        this.direction = {
+            x: Math.sign(diffX),
+            y: Math.sign(diffY),
+        };
+        this.velocity = {
+            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+        };
+        this.previousMovement = {
+            x: this.movement.x,
+            y: this.movement.y,
+        };
+        this._handleCallback();
+    };
+    return WheelGesture;
+}(Gesture));
+
+var useRecognizer = function (handlers) {
+    var ref = React__namespace.useRef();
+    var elementRefs = React__namespace.useRef([]);
+    var subscribers = React__namespace.useRef(new Map()).current;
+    // re-initiate callback on change
+    React__namespace.useEffect(function () {
+        var e_1, _a;
+        try {
+            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), _e = _d[1], keyIndex = _e.keyIndex, gesture = _e.gesture;
+                var _f = __read(handlers[keyIndex], 3), callback = _f[2];
+                gesture.applyCallback(callback);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }, [handlers]);
+    React__namespace.useEffect(function () {
+        handlers.forEach(function (_a, keyIndex) {
+            var _b = __read(_a, 4), key = _b[0], gesture = _b[1], callback = _b[2], config = _b[3];
+            subscribers.set(key, {
+                keyIndex: keyIndex,
+                gesture: gesture,
+                unsubscribe: gesture.applyGesture({
+                    targetElement: ref.current,
+                    targetElements: elementRefs.current,
+                    callback: callback,
+                    config: config,
+                }),
+            });
+        });
+        return function () {
+            var e_2, _a;
+            try {
+                for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var _d = __read(_c.value, 2), unsubscribe = _d[1].unsubscribe;
+                    unsubscribe && unsubscribe();
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        };
+    }, []);
+    return function (index) {
+        if (index === null || index === undefined) {
+            return { ref: ref };
+        }
+        else {
+            elementRefs.current[index] =
+                elementRefs.current[index] || React__namespace.createRef();
+            return { ref: elementRefs.current[index] };
+        }
+    };
+};
+
+function useDrag(callback, config) {
+    var gesture = React__namespace.useRef(new DragGesture()).current;
+    return useRecognizer([['drag', gesture, callback, config]]);
+}
+
+function useMouseMove(callback) {
+    var gesture = React__namespace.useRef(new MouseMoveGesture()).current;
+    return useRecognizer([['move', gesture, callback]]);
+}
+
+function useScroll(callback) {
+    var gesture = React__namespace.useRef(new ScrollGesture()).current;
+    return useRecognizer([['scroll', gesture, callback]]);
+}
+
+function useWheel(callback) {
+    var gesture = React__namespace.useRef(new WheelGesture()).current;
+    return useRecognizer([['wheel', gesture, callback]]);
+}
+
+function useGesture(_a) {
+    var onDrag = _a.onDrag, onWheel = _a.onWheel, onScroll = _a.onScroll, onMouseMove = _a.onMouseMove;
+    var dragGesture = React__namespace.useRef(new DragGesture()).current;
+    var wheelGesture = React__namespace.useRef(new WheelGesture()).current;
+    var scrollGesture = React__namespace.useRef(new ScrollGesture()).current;
+    var mouseMoveGesture = React__namespace.useRef(new MouseMoveGesture()).current;
+    return useRecognizer([
+        ['drag', dragGesture, onDrag],
+        ['wheel', wheelGesture, onWheel],
+        ['scroll', scrollGesture, onScroll],
+        ['move', mouseMoveGesture, onMouseMove],
+    ]);
 }
 
-Object.defineProperty(exports, 'Easing', {
-  enumerable: true,
-  get: function () {
-    return reMotion.Easing;
-  }
-});
-Object.defineProperty(exports, 'makeAnimatedComponent', {
-  enumerable: true,
-  get: function () {
-    return reMotion.makeAnimatedComponent;
-  }
-});
 exports.AnimatedBlock = AnimatedBlock;
 exports.AnimatedImage = AnimatedImage;
 exports.AnimatedInline = AnimatedInline;
 exports.AnimationConfigUtils = AnimationConfigUtils;
+exports.Easing = Easing;
 exports.MountedBlock = MountedBlock;
 exports.ScrollableBlock = ScrollableBlock;
 exports.TransitionBlock = TransitionBlock;
@@ -1174,7 +2878,9 @@ exports.bInterpolate = bInterpolate;
 exports.bin = bin;
 exports.clamp = clamp;
 exports.delay = delay;
+exports.fluid = fluid;
 exports.interpolate = interpolate;
+exports.makeFluid = makeFluid;
 exports.mix = mix;
 exports.move = move;
 exports.rubberClamp = rubberClamp;