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

package/dist/index.js

@@ -1,2898 +1,2 @@
-var React = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-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);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-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, SuppressedError, Symbol */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(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 __());
-}
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    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);
-    if (o && typeof o.length === "number") return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-}
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
-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;
-};
-
-/**
- * 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;
-    },
-};
-
-/**
- * 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);
-    };
-}
-
-/**
- * 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;
-}
-
-/**
- * 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;
-}
-
-/**
- * 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;
-};
-
-/**
- * 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 _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 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;
-}());
-
-/**
- * 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];
-};
-
-/**
- * `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); };
-};
-
-/**
- * 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);
-}
-
-/**
- * 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');
-
-/**
- * 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); }) }));
-};
-
-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.');
-        },
-    });
-}
-
-/**
- * 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 }) });
-};
-
-/**
- * @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);
-    });
-}
-
-/**
- * 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 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 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],
-    ]);
-}
-
-exports.AnimatedBlock = AnimatedBlock;
-exports.AnimatedImage = AnimatedImage;
-exports.AnimatedInline = AnimatedInline;
-exports.AnimationConfigUtils = AnimationConfigUtils;
-exports.Easing = Easing;
-exports.MountedBlock = MountedBlock;
-exports.ScrollableBlock = ScrollableBlock;
-exports.TransitionBlock = TransitionBlock;
-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;
-exports.snapTo = snapTo;
-exports.useAnimatedValue = useAnimatedValue;
-exports.useDrag = useDrag;
-exports.useGesture = useGesture;
-exports.useMeasure = useMeasure;
-exports.useMountedValue = useMountedValue;
-exports.useMouseMove = useMouseMove;
-exports.useOutsideClick = useOutsideClick;
-exports.useScroll = useScroll;
-exports.useWheel = useWheel;
-exports.useWindowDimension = useWindowDimension;
+var e=require("react"),t=require("react/jsx-runtime");function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=n(e),r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},r(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var a=function(){return a=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},a.apply(this,arguments)};function s(e,t){var n={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(n[i[r]]=e[i[r]])}return n}function f(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],i=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function u(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var i,r,o=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(i=o.next()).done;)a.push(i.value)}catch(e){r={error:e}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return a}function l(e,t,n){if(n||2===arguments.length)for(var i,r=0,o=t.length;r<o;r++)!i&&r in t||(i||(i=Array.prototype.slice.call(t,0,r)),i[r]=t[r]);return e.concat(i||Array.prototype.slice.call(t))}"function"==typeof SuppressedError&&SuppressedError;var c=function(){function e(){}return e.prototype._debounceOnEnd=function(e){var t=this._onEnd,n=this._onRest;this._onEnd=null,this._onRest=null,n&&n(e),t&&t(e)},e.prototype.stop=function(){},e}(),h={current:function(e){return window.requestAnimationFrame(e)},inject:function(e){h.current=e}},d={current:function(e){return window.cancelAnimationFrame(e)},inject:function(e){d.current=e}},p=function(e){function t(t){var n,i,r,o,a,s,f=t.initialPosition,u=t.config,l=e.call(this)||this;return l._overshootClamping=!1,l._initialVelocity=0,l._lastVelocity=0,l._startPosition=f,l._position=l._startPosition,l._restDisplacementThreshold=null!==(n=null==u?void 0:u.restDistance)&&void 0!==n?n:.001,l._restSpeedThreshold=null!==(i=null==u?void 0:u.restDistance)&&void 0!==i?i:.001,l._mass=null!==(r=null==u?void 0:u.mass)&&void 0!==r?r:1,l._tension=null!==(o=null==u?void 0:u.tension)&&void 0!==o?o:170,l._friction=null!==(a=null==u?void 0:u.friction)&&void 0!==a?a:26,l._delay=null!==(s=null==u?void 0:u.delay)&&void 0!==s?s:0,l._onRest=null==u?void 0:u.onRest,l._onChange=null==u?void 0:u.onChange,l}return o(t,e),t.prototype.onChange=function(e){this._onFrame(e),this._lastPosition!==e&&this._onChange&&this._onChange(e),this._lastPosition=e},t.prototype.onUpdate=function(){var e=this,t=Date.now(),n=Math.min(t-this._lastTime,64);this._lastTime=t;var i=this._friction,r=this._mass,o=this._tension,a=-this._lastVelocity,s=this._toValue-this._position,f=i/(2*Math.sqrt(o*r)),u=Math.sqrt(o/r),l=u*Math.sqrt(1-Math.pow(f,2)),c=n/1e3,d=Math.sin(l*c),p=Math.cos(l*c),m=Math.exp(-f*u*c),v=m*(d*((a+f*u*s)/l)+s*p),y=this._toValue-v,g=f*u*v-m*(p*(a+f*u*s)-l*s*d),b=Math.exp(-u*c),_=this._toValue-b*(s+(a+u*s)*c),w=b*(a*(c*u-1)+c*s*u*u);this.onChange(this._position);var x=Math.abs(this._lastVelocity)<this._restSpeedThreshold,E=0===this._tension||Math.abs(this._toValue-this._position)<this._restDisplacementThreshold;if(f<1?(this._position=y,this._lastVelocity=g):(this._position=_,this._lastVelocity=w),e._overshootClamping&&0!==e._tension&&(e._position<e._toValue?e._position>e._toValue:e._position<e._toValue)||x&&E)return 0!==this._tension&&(this._lastVelocity=0,this._position=this._toValue,this.onChange(this._position)),this._lastTime=0,void this._debounceOnEnd({finished:!0,value:this._toValue});this._animationFrame=h.current(this.onUpdate.bind(this))},t.prototype.stop=function(){this._active=!1,clearTimeout(this._timeout),d.current(this._animationFrame),this._debounceOnEnd({finished:!1,value:this._position})},t.prototype.set=function(e){this.stop(),this._position=e,this._lastTime=0,this._lastVelocity=0,this.onChange(e)},t.prototype.start=function(e){var n=this,i=e.toValue,r=e.onFrame,o=e.previousAnimation,a=e.onEnd,s=function(){n._onFrame=r,n._active=!0,n._toValue=i,n._onEnd=a;var e=Date.now();o instanceof t?(n._lastVelocity=o._lastVelocity||n._lastVelocity||0,n._lastTime=o._lastTime||e):n._lastTime=e,n._animationFrame=h.current(n.onUpdate.bind(n))};0!==this._delay?this._timeout=setTimeout((function(){return s()}),this._delay):s()},t}(c),m=4,v=1e-7,y=10,g=.1,b="function"==typeof Float32Array;function _(e,t){return 1-3*t+3*e}function w(e,t){return 3*t-6*e}function x(e){return 3*e}function E(e,t,n){return((_(t,n)*e+w(t,n))*e+x(t))*e}function k(e,t,n){return 3*_(t,n)*e*e+2*w(t,n)*e+x(t)}function M(e){return e}function T(e,t,n,i){if(!(0<=e&&e<=1&&0<=n&&n<=1))throw new Error("bezier x values must be in [0, 1] range");if(e===t&&n===i)return M;for(var r=b?new Float32Array(11):new Array(11),o=0;o<11;++o)r[o]=E(o*g,e,n);function a(t){for(var i=0,o=1;10!==o&&r[o]<=t;++o)i+=g;--o;var a=i+(t-r[o])/(r[o+1]-r[o])*g,s=k(a,e,n);return s>=.001?function(e,t,n,i){for(var r=0;r<m;++r){var o=k(t,n,i);if(0===o)return t;t-=(E(t,n,i)-e)/o}return t}(t,a,e,n):0===s?a:function(e,t,n,i,r){var o,a,s=0;do{(o=E(a=t+(n-t)/2,i,r)-e)>0?n=a:t=a}while(Math.abs(o)>v&&++s<y);return a}(t,i,i+g,e,n)}return function(e){return 0===e||1===e?e:E(a(e),t,i)}}var I=function(){function e(){}return e.step0=function(e){return e>0?1:0},e.step1=function(e){return e>=1?1:0},e.linear=function(e){return e},e.ease=function(e){return O(e)},e.quad=function(e){return e*e},e.cubic=function(e){return e*e*e},e.poly=function(e){return function(t){return Math.pow(t,e)}},e.sin=function(e){return 1-Math.cos(e*Math.PI/2)},e.circle=function(e){return 1-Math.sqrt(1-e*e)},e.exp=function(e){return Math.pow(2,10*(e-1))},e.elastic=function(e){void 0===e&&(e=1);var t=e*Math.PI;return function(e){return 1-Math.pow(Math.cos(e*Math.PI/2),3)*Math.cos(e*t)}},e.back=function(e){return void 0===e&&(e=1.70158),function(t){return t*t*((e+1)*t-e)}},e.bounce=function(e){return e<1/2.75?7.5625*e*e:e<2/2.75?7.5625*(e-=1.5/2.75)*e+.75:e<2.5/2.75?7.5625*(e-=2.25/2.75)*e+.9375:7.5625*(e-=2.625/2.75)*e+.984375},e.bezier=function(e,t,n,i){return T(e,t,n,i)},e.in=function(e){return e},e.out=function(e){return function(t){return 1-e(1-t)}},e.inOut=function(e){return function(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2}},e}(),O=I.bezier(.42,0,1,1),C=function(e){function t(t){var n,i,r,o=t.initialPosition,a=t.config,s=e.call(this)||this;return s._fromValue=o,s._position=s._fromValue,s._easing=null!==(n=null==a?void 0:a.easing)&&void 0!==n?n:I.linear,s._duration=null!==(i=null==a?void 0:a.duration)&&void 0!==i?i:500,s._tempDuration=s._duration,(null==a?void 0:a.immediate)&&(s._duration=0),s._delay=null!==(r=null==a?void 0:a.delay)&&void 0!==r?r:0,s._onRest=null==a?void 0:a.onRest,s._onChange=null==a?void 0:a.onChange,s}return o(t,e),t.prototype.onChange=function(e){this._onFrame(e),this._lastPosition!==e&&this._onChange&&this._onChange(e),this._lastPosition=e},t.prototype.onUpdate=function(){var e=Date.now()-this._startTime;if(e>=this._duration)return this._startTime=0,this._position=this._toValue,this.onChange(this._position),void this._debounceOnEnd({finished:!0,value:this._position});var t=this._easing(e/this._duration);this._position=this._fromValue+(this._toValue-this._fromValue)*t,this.onChange(this._position),this._animationFrame=h.current(this.onUpdate.bind(this))},t.prototype.stop=function(){this._active=!1,clearTimeout(this._timeout),d.current(this._animationFrame),this._debounceOnEnd({finished:!1,value:this._position})},t.prototype.set=function(e){this.stop(),this._position=e,this.onChange(e)},t.prototype.start=function(e){var n=this,i=e.toValue,r=e.onFrame,o=e.previousAnimation,a=e.onEnd,s=function(){if(n._onFrame=r,n._active=!0,n._onEnd=a,n._toValue=i,o&&o instanceof t&&o._toValue===i&&o._startTime)n._startTime=o._startTime,n._fromValue=o._fromValue;else{var e=Date.now();n._startTime=e,n._fromValue=n._position}n._animationFrame=h.current(n.onUpdate.bind(n))};0!==this._delay?this._timeout=setTimeout((function(){return s()}),this._delay):s()},t}(c),V=/[+-]?\d+(\.\d+)?|[\s]?\.\d+|#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/gi,S=/#[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,L={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 A(e){var t=function(e){return e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(e,t,n,i){return"#"+t+t+n+n+i+i}))}(e),n=function(e){return 7===e.length?e+"FF":e}(t),i=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(n);return{r:parseInt(i[1],16),g:parseInt(i[2],16),b:parseInt(i[3],16),a:parseInt(i[4],16)/255}}function Y(e){var t=e.r,n=e.g,i=e.b,r=e.a;return"#"+(256|t).toString(16).slice(1)+(256|n).toString(16).slice(1)+(256|i).toString(16).slice(1)+(255*r|256).toString(16).slice(1)}var R=function(e){return null!=e},D=function(e){return R(e)&&"object"==typeof e&&"_subscribe"in e},F=["borderImageOutset","borderImageSlice","borderImageWidth","fontWeight","lineHeight","opacity","orphans","tabSize","widows","zIndex","zoom","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth","animationIterationCount","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridRow","gridColumn","order","lineClamp"];var P=function(e,t,n,i){var r=u(t,4),o=r[0],a=r[1],s=r[2],f=r[3],l=e;if(l<o){if("identity"===n)return l;"clamp"===n&&(l=o)}if(l>a){if("identity"===i)return l;"clamp"===i&&(l=a)}return s===f?s:o===a?e<=o?s:f:(o===-1/0?l=-l:a===1/0?l-=o:l=(l-o)/(a-o),s===-1/0?l=-l:f===1/0?l+=s:l=l*(f-s)+s,l)},j=function(e,t,n){var i=t.length,r=[];e<t[0]?r=[t[0],t[1],n[0],n[1]]:e>t[i-1]&&(r=[t[i-2],t[i-1],n[i-2],n[i-1]]);for(var o=1;o<i;++o)if(e<=t[o]){r=[t[o-1],t[o],n[o-1],n[o]];break}return r},X=function(e,t,n,i){var r=u(t,4),o=r[0],a=r[1],s=r[2],f=r[3];if(s.length===f.length)return s.map((function(t,r){return"string"==typeof t?function(e,t){var n=u(t,4),i=n[0],r=n[1],o=n[2],a=n[3],s=A(o),f=A(a);return Y({r:P(e,[i,r,s.r,f.r],"clamp","clamp"),g:P(e,[i,r,s.g,f.g],"clamp","clamp"),b:P(e,[i,r,s.b,f.b],"clamp","clamp"),a:P(e,[i,r,s.a,f.a],"clamp","clamp")})}(e,[o,a,t,f[r]]):P(e,[o,a,t,f[r]],n,i)}));throw new Error("Array length doesn't match")},q=function(e){return e.replace(V,"$")},W=function(e){return e.match(V).map((function(e){return-1!==e.indexOf("#")?e:Number(e)}))},z=function(e,t){return q(e).trim().replace(/\s/g,"")===q(t).trim().replace(/\s/g,"")},U=function(e){return e.replace(S,(function(e){if(-1!==e.indexOf("#"))return Y(A(e));if(Object.prototype.hasOwnProperty.call(L,e))return L[e];throw new Error("String cannot be parsed!")}))};function B(e,t,n,i){var r,o,a=null==i?void 0:i.extrapolate,s=null==i?void 0:i.extrapolateLeft,l=null==i?void 0:i.extrapolateRight,c=j(e,t,n),h="extend";void 0!==s?h=s:void 0!==a&&(h=a);var d="extend";if(void 0!==l?d=l:void 0!==a&&(d=a),n.length){if("number"==typeof n[0])return P(e,c,h,d);if(Array.isArray(n[0]))return X(e,c,h,d);var p=u(c,4),m=p[0],v=p[1],y=p[2],g=p[3],b=U(y),_=U(g),w=q(b);if(z(b,_)){var x=W(b),E=W(_),k=X(e,[m,v,x,E],h,d);try{for(var M=f(k),T=M.next();!T.done;T=M.next()){var I=T.value;w=w.replace("$",I)}}catch(e){r={error:e}}finally{try{T&&!T.done&&(o=M.return)&&o.call(M)}finally{if(r)throw r.error}}return w}throw new Error("Output range doesn't match string format!")}throw new Error("Output range cannot be Empty")}var G=function(e,t,n,i){if(D(e))return function(e,t,n,i){return a(a({},e),{isInterpolation:!0,interpolationConfig:{inputRange:t,outputRange:n,extrapolateConfig:i}})}(e,t,n,i);if("number"==typeof e)return B(e,t,n,i);throw new Error("'".concat(typeof e,"' cannot be interpolated!"))};var N=["translate","translateX","translateY","translateZ","scale","scaleX","scaleY","scaleZ","rotate","rotateX","rotateY","rotateZ","skew","skewX","skewY"];function H(e){var t=e.match(/(-)?(\d+.)?\d+/g),n=e.match(/px|rem|em|ex|%|cm|mm|in|pt|pc|ch|vh|vw|vmin|vmax/);return{value:Number(t),unit:n&&n[0]}}function Z(e,t){var n=function(e,t){var n,i=H(String(t)).value,r=H(String(t)).unit;return r?{value:i,unit:r}:(e.includes("translate")||e.includes("perspective")?n="px":e.includes("scale")?n="":(e.includes("rotate")||e.includes("skew"))&&(n="deg"),{value:t,unit:n})}(e,t);if(e.includes("X")||e.includes("Y")||e.includes("Z")||e.includes("perspective")||e.includes("rotate")||e.includes("skew"))return"".concat(e,"(").concat(n.value).concat(n.unit,")");if(e.includes("translate")||e.indexOf("scale"))return"".concat(e,"(").concat(n.value).concat(n.unit,", ").concat(n.value).concat(n.unit,")");throw new Error("Error! Property '".concat(e,"' cannot be transformed"))}function $(t){return e.forwardRef((function(n,i){var r=e.useRef(null),o=e.useRef({}),f=e.useMemo((function(){var e=n.style,t=s(n,["style"]),i=K("style",e),r=K("props",t);return{fluids:l(l([],u(i.fluids),!1),u(r.fluids),!1),nonFluids:l(l([],u(i.nonFluids),!1),u(r.nonFluids),!1)}}),[n]),c=f.fluids,h=f.nonFluids,d=function(e){var t,n=e.isTransform,i=e.propertyType,a=e.property,s=e.value;r.current&&("style"===i?n?(o.current[a]=s,r.current.style.transform=(t=o.current,Object.entries(t).map((function(e){var t=u(e,2);return Z(t[0],t[1])})).reduce((function(e,t){return e+" ".concat(t)}),"").trim())):r.current.style[a]=function(e,t){return"number"==typeof t?F.includes(e)?t:t+"px":t}(a,s):"props"===i&&r.current.setAttribute(a.replace(/([A-Z])/g,(function(e){return"-"+e.toLowerCase()})),s))};return e.useLayoutEffect((function(){h.forEach((function(e){var t=e.isTransform,n=e.property,i=e.propertyType,r=e.value;return d({isTransform:t,property:n,propertyType:i,value:r})}))}),[h]),e.useLayoutEffect((function(){var e=[];return c.forEach((function(t){var n,i=t.value,r=t.propertyType,o=t.property,s=t.isTransform,f=i._subscribe,u=i._value,l=i._currentValue,c=i._config,h=[],m=(n=c,function(e,t){var i=a(a({},n),t);return new(R(null==i?void 0:i.duration)||(null==i?void 0:i.immediate)?C:p)({initialPosition:e,config:i})}),v=null,y=function(e){l.current=e;var t=i.isInterpolation&&i.interpolationConfig?B(e,i.interpolationConfig.inputRange,i.interpolationConfig.outputRange,i.interpolationConfig.extrapolateConfig):e;d({isTransform:s,propertyType:r,property:o,value:t})};v=m("string"==typeof u?0:u),d({isTransform:s,propertyType:r,property:o,value:u});var g=f((function(e,t,n){if(function(e,t){if(typeof e!=typeof t)return!1;if("number"==typeof t)return!0;if("string"==typeof e){var n=U(e),i=U(t);return n!==i&&q(n)===q(i)}return!1}(u,e)){var a=v;a._value!==e&&(v.stop(),v=m(a._position,t),(null==t?void 0:t.onStart)&&t.onStart(a._position),"string"==typeof e&&(h.includes(u)||h.push(u),h.includes(e)||h.push(e),i.isInterpolation=!0,i.interpolationConfig={inputRange:h.map((function(e,t){return t})),outputRange:h}),v.start({toValue:"string"==typeof e?h.indexOf(e):e,onFrame:y,previousAnimation:a,onEnd:n}))}else{if(typeof e!=typeof u)throw new Error("Cannot assign ".concat(typeof e," to animated ").concat(typeof u));d({isTransform:s,propertyType:r,property:o,value:e})}}),o,Date.now());e.push(g)})),function(){e.forEach((function(e){return e()}))}}),[]),e.createElement(t,a(a({},function(e){e.style;var t=s(e,["style"]);return Object.fromEntries(Object.entries(t).filter((function(e){var t=u(e,2);t[0];var n=t[1];return!D(n)})))}(n)),{ref:J(r,i)}))}))}function J(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return function(t){e.forEach((function(e){e&&("function"!=typeof e?"current"in e&&(e.current=t):e(t))}))}}function K(e,t){return void 0===t&&(t={}),Object.entries(t).reduce((function(t,n){var i,r=u(n,2),o=r[0],a=r[1],s="style"===e&&(i=o,N.includes(i));return D(a)?t.fluids.push({isTransform:s,property:o,propertyType:e,value:a}):t.nonFluids.push({isTransform:s,property:o,propertyType:e,value:a}),t}),{fluids:[],nonFluids:[]})}var Q={};["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","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"].forEach((function(e){Q[e]=$(e)}));var ee=function(){function e(e,t){var n=this;this._subscriptions=new Map,this._subscribe=function(e,t,i){var r,o,a=function(i){if(i.property===t)return n._subscriptions.set(i,e),{value:function(){return n._subscriptions.delete(i)}}};try{for(var s=f(n._subscriptions.keys()),u=s.next();!u.done;u=s.next()){var l=a(u.value);if("object"==typeof l)return l.value}}catch(e){r={error:e}}finally{try{u&&!u.done&&(o=s.return)&&o.call(s)}finally{if(r)throw r.error}}return n._subscriptions.set({uuid:i,property:t},e),function(){return n._subscriptions.delete({uuid:i,property:t})}},this._value=e,this._currentValue={current:e},this._config=t,this.get=function(){return n._currentValue.current}}return e.prototype.setValue=function(e,t,n){var i,r,o=this;if("function"!=typeof e)try{for(var a=f(this._subscriptions.keys()),s=a.next();!s.done;s=a.next()){var u=s.value,l=this._subscriptions.get(u);l&&l(e,t,n)}}catch(e){i={error:e}}finally{try{s&&!s.done&&(r=a.return)&&r.call(a)}finally{if(i)throw i.error}}else e((function(e,i){var r=new Promise((function(r){var a,s;try{for(var u=f(o._subscriptions.keys()),l=u.next();!l.done;l=u.next()){var c=l.value,h=o._subscriptions.get(c);h&&h(e,null!=i?i:t,(function(t){t.finished&&r(e),n&&n(t)}))}}catch(e){a={error:e}}finally{try{l&&!l.done&&(s=u.return)&&s.call(u)}finally{if(a)throw a.error}}}));return r}))},e}(),te=function(t,n){var i=e.useMemo((function(){return new ee(t,n)}),[]),r=e.useCallback((function(e,t,n){i.setValue(e,t,n)}),[]);return[i,r]};var ne=$("div"),ie=$("span"),re=$("img");function oe(t,n){var i=function(t,n){var i=u(e.useState(!1),2),r=i[0],o=i[1],a=e.useRef(n).current,s=a.from,f=a.enter,l=a.exit,c=a.config,h=a.enterConfig,d=a.exitConfig,p=u(te(s,c),2),m=p[0],v=p[1];return e.useLayoutEffect((function(){t?(o(!0),queueMicrotask((function(){return v(f,h)}))):v(l,d,(function(e){e.finished&&o(!1)}))}),[t]),function(e){return e(m,r)}}(t,n);return function(e){return i((function(t,n){return e({value:t},n)}))}}var ae=function(e){switch(e){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:I.bounce};case"power1":return{duration:500,easing:I.bezier(.17,.42,.51,.97)};case"power2":return{duration:500,easing:I.bezier(.07,.11,.13,1)};case"power3":return{duration:500,easing:I.bezier(.09,.7,.16,1.04)};case"power4":return{duration:500,easing:I.bezier(.05,.54,0,1.03)};case"linear":return{duration:500,easing:I.linear};case"easein":return{duration:500,easing:I.in(I.ease)};case"easeout":return{duration:500,easing:I.out(I.ease)};case"easeinout":return{duration:500,easing:I.inOut(I.ease)};default:return{mass:1,friction:34,tension:290}}},se={ELASTIC:ae("elastic"),BOUNCE:ae("bounce"),EASE:ae("ease"),STIFF:ae("stiff"),WOOBLE:ae("wooble"),EASE_IN:ae("easein"),EASE_OUT:ae("easeout"),EASE_IN_OUT:ae("easeinout"),POWER1:ae("power1"),POWER2:ae("power2"),POWER3:ae("power3"),POWER4:ae("power4"),LINEAR:ae("linear")};function fe(e,t){var n=u(te(e,a(a({},se.EASE),t)),2),i=n[0],r=n[1],o={value:i,currentValue:i.get()};return new Proxy(o,{set:function(e,t,n){if("value"===t)return"number"!=typeof n&&"string"!=typeof n||r(n),!0;throw new Error("You cannot set any other property to animation node.")},get:function(e,t){if("value"===t)return i;if("currentValue"===t)return i.get();throw new Error("You cannot access any other property from animation node.")}})}function ue(e){return e?1:0}function le(e,t,n){return Math.min(Math.max(e,t),n)}function ce(e,t,n){return 0===t||Math.abs(t)===1/0?function(e,t){return Math.pow(e,5*t)}(e,n):e*t*n/(t+n*e)}function he(e,t){var n=new Map;return t.forEach((function(t){var i=u(t,3),r=i[0],o=i[1],a=i[2],s=void 0!==a&&a;n.set(r,function(e,t,n,i){return void 0===i&&(i=!1),e.forEach((function(e){e.addEventListener(t,n,i)})),function(){e.forEach((function(e){e.removeEventListener(t,n,i)}))}}(e,r,o,s))})),function(e){var t,i;try{for(var r=f(n.entries()),o=r.next();!o.done;o=r.next()){var a=u(o.value,2),s=a[0],l=a[1];if(!e)return void l();-1!==e.indexOf(s)&&l()}}catch(e){t={error:e}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(t)throw t.error}}}}var de=function(e,t){return{x:e,y:t}},pe=function(){function e(){this.lastTimeStamp=Date.now(),this.isActive=!1,this.targetElements=[]}return e.prototype._initEvents=function(){},e.prototype._cancelEvents=function(){this._subscribe&&this._subscribe()},e.prototype.applyCallback=function(e){this.callback=e},e.prototype.applyGesture=function(e){var t=this,n=e.targetElement,i=e.targetElements,r=e.callback,o=e.config;return this.targetElement=n,this.targetElements=i.map((function(e){return e.current})),this.callback=r,this.config=o,this._initEvents(),function(){return t._subscribe&&t._subscribe()}},e._VELOCITY_LIMIT=20,e}(),me=function(e){function t(){var t=e.apply(this,l([],u(arguments),!1))||this;return t.movementStart=de(0,0),t.initialMovement=de(0,0),t.movement=de(0,0),t.previousMovement=de(0,0),t.translation=de(0,0),t.offset=de(0,0),t.velocity=de(0,0),t}return o(t,e),t.prototype._initEvents=function(){(this.targetElement||this.targetElements.length>0)&&(this._subscribe=he([window],[["mousedown",this.pointerDown.bind(this)],["mousemove",this.pointerMove.bind(this)],["mouseup",this.pointerUp.bind(this)],["touchstart",this.pointerDown.bind(this),{passive:!1}],["touchmove",this.pointerMove.bind(this),{passive:!1}],["touchend",this.pointerUp.bind(this)]]))},t.prototype._cancelEvents=function(){this._subscribe&&this._subscribe(["mousedown","mousemove","touchstart","touchmove"])},t.prototype._handleCallback=function(){var e=this;this.callback&&this.callback({args:[this.currentIndex],down:this.isActive,movementX:this.movement.x,movementY:this.movement.y,offsetX:this.translation.x,offsetY:this.translation.y,velocityX:this.velocity.x,velocityY:this.velocity.y,distanceX:Math.abs(this.movement.x),distanceY:Math.abs(this.movement.y),directionX:Math.sign(this.movement.x),directionY:Math.sign(this.movement.y),cancel:function(){e._cancelEvents()}})},t.prototype.pointerDown=function(e){var t;"touchstart"===e.type?this.movementStart={x:e.touches[0].clientX,y:e.touches[0].clientY}:this.movementStart={x:e.clientX,y:e.clientY},this.movement={x:0,y:0},this.offset={x:this.translation.x,y:this.translation.y},this.previousMovement={x:0,y:0},this.velocity={x:0,y:0};var n=this.targetElements.find((function(t){return t===e.target}));if(e.target===this.targetElement||n){this.isActive=!0,e.preventDefault(),n&&(this.currentIndex=this.targetElements.indexOf(n));var i=(null===(t=this.config)||void 0===t?void 0:t.initial)&&this.config.initial(),r=null==i?void 0:i.movementX,o=null==i?void 0:i.movementY;this.initialMovement={x:null!=r?r:0,y:null!=o?o:0},this.movement={x:this.initialMovement.x,y:this.initialMovement.y},this.previousMovement={x:this.initialMovement.x,y:this.initialMovement.y},this._handleCallback()}},t.prototype.pointerMove=function(e){if(this.isActive){e.preventDefault();var t=Date.now(),n=le(t-this.lastTimeStamp,.1,64);this.lastTimeStamp=t;var i=n/1e3;"touchmove"===e.type?this.movement={x:this.initialMovement.x+(e.touches[0].clientX-this.movementStart.x),y:this.initialMovement.y+(e.touches[0].clientY-this.movementStart.y)}:this.movement={x:this.initialMovement.x+(e.clientX-this.movementStart.x),y:this.initialMovement.y+(e.clientY-this.movementStart.y)},this.translation={x:this.offset.x+this.movement.x,y:this.offset.y+this.movement.y},this.velocity={x:le((this.movement.x-this.previousMovement.x)/i/1e3,-1*pe._VELOCITY_LIMIT,pe._VELOCITY_LIMIT),y:le((this.movement.y-this.previousMovement.y)/i/1e3,-1*pe._VELOCITY_LIMIT,pe._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()}},t.prototype.pointerUp=function(){this.isActive&&(this.isActive=!1,this._handleCallback(),this._cancelEvents(),this._initEvents())},t}(pe),ve=function(e){function t(){var t=e.apply(this,l([],u(arguments),!1))||this;return t.movement=de(0,0),t.previousMovement=de(0,0),t.velocity=de(0,0),t.direction=de(0,0),t}return o(t,e),t.prototype._initEvents=function(){this.targetElement?this._subscribe=he([this.targetElement],[["mousemove",this.onMouseMove.bind(this)]]):this.targetElements.length>0?this._subscribe=he(this.targetElements,[["mousemove",this.onMouseMove.bind(this)]]):this._subscribe=he([window],[["mousemove",this.onMouseMove.bind(this)]])},t.prototype._handleCallback=function(){var e;this.callback&&this.callback({args:[this.currentIndex],event:this.event,isMoving:this.isActive,target:null===(e=this.event)||void 0===e?void 0:e.target,mouseX:this.movement.x,mouseY:this.movement.y,velocityX:this.velocity.x,velocityY:this.velocity.y,directionX:this.direction.x,directionY:this.direction.y})},t.prototype.onMouseMove=function(e){var t=this,n=this.targetElements.find((function(t){return t===e.target}));n&&(this.currentIndex=this.targetElements.indexOf(n)),this.event=e;var i=Date.now(),r=Math.min(i-this.lastTimeStamp,64);this.lastTimeStamp=i;var o=r/1e3,a=e.clientX,s=e.clientY;this.movement={x:a,y:s},-1!==this.isActiveID&&(this.isActive=!0,clearTimeout(this.isActiveID)),this.isActiveID=setTimeout((function(){t.isActive=!1,t.direction={x:0,y:0},t.velocity={x:0,y:0},t._handleCallback()}),250);var f=this.movement.x-this.previousMovement.x,u=this.movement.y-this.previousMovement.y;this.direction={x:Math.sign(f),y:Math.sign(u)},this.velocity={x:le(f/o/1e3,-1*pe._VELOCITY_LIMIT,pe._VELOCITY_LIMIT),y:le(u/o/1e3,-1*pe._VELOCITY_LIMIT,pe._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()},t}(pe),ye=function(e){function t(){var t=e.apply(this,l([],u(arguments),!1))||this;return t.movement=de(0,0),t.previousMovement=de(0,0),t.direction=de(0,0),t.velocity=de(0,0),t}return o(t,e),t.prototype._initEvents=function(){this.targetElement?this._subscribe=he([this.targetElement],[["scroll",this.scrollElementListener.bind(this)]]):this._subscribe=he([window],[["scroll",this.scrollListener.bind(this)]])},t.prototype._handleCallback=function(){this.callback&&this.callback({isScrolling:this.isActive,scrollX:this.movement.x,scrollY:this.movement.y,velocityX:this.velocity.x,velocityY:this.velocity.y,directionX:this.direction.x,directionY:this.direction.y})},t.prototype.onScroll=function(e){var t=this,n=e.x,i=e.y,r=Date.now(),o=Math.min(r-this.lastTimeStamp,64);this.lastTimeStamp=r;var a=o/1e3;this.movement={x:n,y:i},-1!==this.isActiveID&&(this.isActive=!0,clearTimeout(this.isActiveID)),this.isActiveID=setTimeout((function(){t.isActive=!1,t.direction={x:0,y:0},t.velocity={x:0,y:0},t._handleCallback()}),250);var s=this.movement.x-this.previousMovement.x,f=this.movement.y-this.previousMovement.y;this.direction={x:Math.sign(s),y:Math.sign(f)},this.velocity={x:le(s/a/1e3,-1*pe._VELOCITY_LIMIT,pe._VELOCITY_LIMIT),y:le(f/a/1e3,-1*pe._VELOCITY_LIMIT,pe._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()},t.prototype.scrollListener=function(){var e=window.pageYOffset,t=window.pageXOffset;this.onScroll({x:t,y:e})},t.prototype.scrollElementListener=function(){var e,t,n=(null===(e=this.targetElement)||void 0===e?void 0:e.scrollLeft)||0,i=(null===(t=this.targetElement)||void 0===t?void 0:t.scrollTop)||0;this.onScroll({x:n,y:i})},t}(pe),ge=function(e){function t(){var t=e.apply(this,l([],u(arguments),!1))||this;return t.movement=de(0,0),t.previousMovement=de(0,0),t.direction=de(0,0),t.velocity=de(0,0),t.delta=de(0,0),t.offset=de(0,0),t.translation=de(0,0),t}return o(t,e),t.prototype._initEvents=function(){this.targetElement&&(this._subscribe=he([this.targetElement],[["wheel",this.onWheel.bind(this)]]))},t.prototype._handleCallback=function(){this.callback&&this.callback({target:this.targetElement,isWheeling:this.isActive,deltaX:this.delta.x,deltaY:this.delta.y,directionX:this.direction.x,directionY:this.direction.y,movementX:this.movement.x,movementY:this.movement.y,offsetX:this.offset.x,offsetY:this.offset.y,velocityX:this.velocity.x,velocityY:this.velocity.y})},t.prototype.onWheel=function(e){var t=this,n=e.deltaX,i=e.deltaY,r=e.deltaMode,o=Date.now(),a=Math.min(o-this.lastTimeStamp,64);this.lastTimeStamp=o;var s=a/1e3;this.isActive=!0,-1!==this.isActiveID&&(this.isActive=!0,clearTimeout(this.isActiveID)),this.isActiveID=setTimeout((function(){t.isActive=!1,t.translation={x:t.offset.x,y:t.offset.y},t._handleCallback(),t.velocity={x:0,y:0},t.movement={x:0,y:0}}),200),1===r?(n*=40,i*=40):2===r&&(n*=800,i*=800),this.delta={x:n,y:i},this.movement={x:this.movement.x+n,y:this.movement.y+i},this.offset={x:this.translation.x+this.movement.x,y:this.translation.y+this.movement.y};var f=this.movement.x-this.previousMovement.x,u=this.movement.y-this.previousMovement.y;this.direction={x:Math.sign(f),y:Math.sign(u)},this.velocity={x:le(f/s/1e3,-1*pe._VELOCITY_LIMIT,pe._VELOCITY_LIMIT),y:le(u/s/1e3,-1*pe._VELOCITY_LIMIT,pe._VELOCITY_LIMIT)},this.previousMovement={x:this.movement.x,y:this.movement.y},this._handleCallback()},t}(pe),be=function(e){var t=i.useRef(),n=i.useRef([]),r=i.useRef(new Map).current;return i.useEffect((function(){var t,n;try{for(var i=f(r.entries()),o=i.next();!o.done;o=i.next()){var a=u(o.value,2)[1],s=a.keyIndex,l=a.gesture,c=u(e[s],3)[2];l.applyCallback(c)}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(t)throw t.error}}}),[e]),i.useEffect((function(){return e.forEach((function(e,i){var o=u(e,4),a=o[0],s=o[1],f=o[2],l=o[3];r.set(a,{keyIndex:i,gesture:s,unsubscribe:s.applyGesture({targetElement:t.current,targetElements:n.current,callback:f,config:l})})})),function(){var e,t;try{for(var n=f(r.entries()),i=n.next();!i.done;i=n.next()){var o=u(i.value,2)[1].unsubscribe;o&&o()}}catch(t){e={error:t}}finally{try{i&&!i.done&&(t=n.return)&&t.call(n)}finally{if(e)throw e.error}}}}),[]),function(e){return null==e?{ref:t}:(n.current[e]=n.current[e]||i.createRef(),{ref:n.current[e]})}};exports.AnimatedBlock=ne,exports.AnimatedImage=re,exports.AnimatedInline=ie,exports.AnimationConfigUtils=se,exports.Easing=I,exports.MountedBlock=function(e){var n=e.state,i=e.children,r=e.from,o=void 0===r?0:r,a=e.enter,s=void 0===a?1:a,f=e.exit,u=oe(n,{from:o,enter:s,exit:void 0===f?0:f,config:e.config,enterConfig:e.enterConfig,exitConfig:e.exitConfig});return t.jsx(t.Fragment,{children:u((function(e,t){return t&&i(e)}))})},exports.ScrollableBlock=function(e){var n=e.children,r=e.direction,o=void 0===r?"single":r,a=e.animationConfig,s=e.threshold,f=void 0===s?.2:s,l=i.useRef(null),c=fe(0,a);return i.useEffect((function(){var e=l.current,t=new IntersectionObserver((function(e){u(e,1)[0].isIntersecting?c.value=1:"both"===o&&(c.value=0)}),{root:null,threshold:f});return e&&t.observe(e),function(){e&&t.unobserve(e)}}),[]),t.jsx("div",{ref:l,children:n&&n({value:c.value})})},exports.TransitionBlock=function(e){var n=e.state,i=e.children,r=e.config,o=fe(ue(n),r);return t.jsx(t.Fragment,{children:i({value:o.value})})},exports.bInterpolate=function(e,t,n,i){if(!R(e)||"number"!=typeof e||!D(e))throw new Error("Invalid ".concat(e," type for interpolate function. Expected number or FluidValue."));return G(e,[0,1],[t,n],i)},exports.bin=ue,exports.clamp=le,exports.delay=function(e){return new Promise((function(t){setTimeout((function(){return t(null)}),e)}))},exports.fluid=Q,exports.interpolate=function(e,t,n,i){if(!R(e)||"number"!=typeof e||!D(e))throw new Error("Invalid ".concat(e," type for interpolate function. Expected number or FluidValue."));return G(e,t,n,i)},exports.makeFluid=$,exports.mix=function(e,t,n){return t*(1-e)+n*e},exports.move=function(e,t,n){var i=e[t],r=e.length,o=t-n;if(o>0)return l(l(l(l([],u(e.slice(0,n)),!1),[i],!1),u(e.slice(n,t)),!1),u(e.slice(t+1,r)),!1);if(o<0){var a=n+1;return l(l(l(l([],u(e.slice(0,t)),!1),u(e.slice(t+1,a)),!1),[i],!1),u(e.slice(a,r)),!1)}return e},exports.rubberClamp=function(e,t,n,i){return void 0===i&&(i=.15),0===i?le(e,t,n):e<t?-ce(t-e,n-t,i)+t:e>n?+ce(e-n,n-t,i)+n:e},exports.snapTo=function(e,t,n){var i=e+.2*t,r=function(e){return Math.abs(e-i)},o=n.map(r),a=Math.min.apply(Math,l([],u(o),!1));return n.reduce((function(e,t){return r(t)===a?t:e}))},exports.useAnimatedValue=fe,exports.useDrag=function(e,t){var n=i.useRef(new me).current;return be([["drag",n,e,t]])},exports.useGesture=function(e){var t=e.onDrag,n=e.onWheel,r=e.onScroll,o=e.onMouseMove,a=i.useRef(new me).current,s=i.useRef(new ge).current,f=i.useRef(new ye).current,u=i.useRef(new ve).current;return be([["drag",a,t],["wheel",s,n],["scroll",f,r],["move",u,o]])},exports.useMeasure=function(t,n){var i=e.useRef(null),r=e.useRef([]),o=e.useRef(t);return e.useEffect((function(){return o.current=t,function(){o.current=function(){return!1}}}),n),e.useEffect((function(){var e=i.current||document.documentElement,t=r.current,n=new ResizeObserver((function(t){var n=u(t,1)[0].target.getBoundingClientRect(),i=n.left,r=n.top,a=n.width,s=n.height,f=window.pageXOffset,l=window.pageYOffset;if(o){if(e===document.documentElement)return;o.current({left:i+f,top:r+l,width:a,height:s,vLeft:i,vTop:r})}})),a=new ResizeObserver((function(e){var t=[],n=[],i=[],r=[],a=[],s=[];e.forEach((function(e){var o=e.target.getBoundingClientRect(),f=o.left,u=o.top,l=o.width,c=o.height,h=f+window.pageXOffset,d=u+window.pageYOffset;t.push(h),n.push(d),i.push(l),r.push(c),a.push(f),s.push(u)})),o&&o.current({left:t,top:n,width:i,height:r,vLeft:a,vTop:s})}));return e&&(e===document.documentElement&&t.length>0?t.forEach((function(e){a.observe(e.current)})):n.observe(e)),function(){e&&(e===document.documentElement&&t.length>0?t.forEach((function(e){a.unobserve(e.current)})):n.unobserve(e))}}),[]),function(t){return null==t?{ref:i}:(r.current[t]=r.current[t]||e.createRef(),{ref:r.current[t]})}},exports.useMountedValue=oe,exports.useMouseMove=function(e){var t=i.useRef(new ve).current;return be([["move",t,e]])},exports.useOutsideClick=function(t,n,i){var r=e.useRef();r.current||(r.current=n),e.useEffect((function(){return r.current=n,function(){r.current=function(){return!1}}}),i),e.useEffect((function(){var e=he([document],[["click",function(e){var n;(null===(n=null==t?void 0:t.current)||void 0===n?void 0:n.contains(e.target))||r.current&&r.current(e)}]]);return function(){return e&&e()}}),[])},exports.useScroll=function(e){var t=i.useRef(new ye).current;return be([["scroll",t,e]])},exports.useWheel=function(e){var t=i.useRef(new ge).current;return be([["wheel",t,e]])},exports.useWindowDimension=function(t,n){var i=e.useRef({width:0,height:0,innerWidth:0,innerHeight:0}),r=e.useRef(t);e.useEffect((function(){return r.current=t,function(){r.current=function(){return!1}}}),n),e.useEffect((function(){var e=new ResizeObserver((function(e){var t=u(e,1)[0].target,n=t.clientWidth,o=t.clientHeight,s=window.innerWidth,f=window.innerHeight;i.current={width:n,height:o,innerWidth:s,innerHeight:f},r&&r.current(a({},i.current))}));return e.observe(document.documentElement),function(){return e.unobserve(document.documentElement)}}),[])};
 //# sourceMappingURL=index.js.map