react-spring-carousel 3.0.0-beta002 → 3.0.0-beta005

package/dist/umd/index.js

@@ -1,2 +1,4491 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("@react-spring/web"),require("react"),require("@use-gesture/react"),require("screenfull")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","@react-spring/web","react","@use-gesture/react","screenfull"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactSpringCarousel={},e.ReactJSXRuntime,e.web,e.React,e.UseGestureReact,e.Screenfull)}(this,(function(e,t,r,n,i,c){"use strict";const u="RSC::Event";function o({thumbsSlideAxis:e="x",withThumbs:i=!1,prepareThumbsData:c,items:u}){const o=n.useRef(null),[s,l]=r.useSpring((()=>({val:0})));function a(){var t;return Math.round(Number(null===(t=o.current)||void 0===t?void 0:t["x"===e?"scrollWidth":"scrollHeight"])-o.current.getBoundingClientRect()["x"===e?"width":"height"])}return{thumbsFragment:i?t.jsx("div",Object.assign({className:"use-spring-carousel-thumbs-wrapper",ref:o,onWheel:()=>s.val.stop(),style:Object.assign({display:"flex",flex:"1",position:"relative",width:"100%",height:"100%",flexDirection:"x"===e?"row":"column"},"x"===e?{overflowX:"auto"}:{overflowY:"auto",maxHeight:"100%"})},{children:function(){function e(e){return e.map((e=>({id:e.id,renderThumb:e.renderThumb})))}return c?c(e(u)):e(u)}().map((({id:e,renderThumb:r})=>{const n=`thumb-item-${e}`;return t.jsx("div",Object.assign({id:n,className:"thumb-item"},{children:r}),n)}))})):null,handleScroll:function(t){var r,n;const i=o.current?o.current.querySelector(`#thumb-item-${u[t].id}`):null;if(i&&o.current&&!function(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}(i)){const t=i.offsetLeft,c=t>a()?a():t;l.start({from:{val:null!==(n=null===(r=o.current)||void 0===r?void 0:r["x"===e?"scrollLeft":"scrollTop"])&&void 0!==n?n:0},to:{val:c},onChange:({value:t})=>{o.current&&(o.current["x"===e?"scrollLeft":"scrollTop"]=Math.abs(t.val))}})}}}}const s=n.createContext(void 0);e.useSpringCarousel=function({items:e,init:s=!0,withThumbs:l,thumbsSlideAxis:a="x",itemsPerSlide:d=1,slideType:f="fixed",gutter:m=0,withLoop:g=!1,startEndGutter:h=0,carouselSlideAxis:v="x",disableGestures:x=!1,draggingSlideTreshold:p,slideWhenThresholdIsReached:b=!1,freeScroll:w,enableFreeScrollDrag:y,initialStartingPosition:E,prepareThumbsData:R,initialActiveItem:T=0}){const j=n.useRef(0),C=n.useRef(null!=p?p:0),I=n.useRef("initial"),S=n.useRef("initial"),O=n.useRef(0),[L,M]=r.useSpring((()=>({val:0,pause:!s,onChange({value:e}){w&&$.current?(te(),"x"===v?$.current.scrollLeft=Math.abs(e.val):$.current.scrollTop=Math.abs(e.val)):W.current&&(W.current.style.transform="x"===v?`translate3d(${e.val}px, 0px,0px)`:`translate3d(0px,${e.val}px,0px)`)}}))),F=n.useRef(T),A=n.useRef(0===T),N=n.useRef(!1),$=n.useRef(null),W=n.useRef(null),q=n.useCallback((()=>g?[...e.map((e=>Object.assign(Object.assign({},e),{id:`prev-repeated-item-${e.id}`}))),...e,...e.map((e=>Object.assign(Object.assign({},e),{id:`next-repeated-item-${e.id}`})))]:[...e]),[e,g])(),{emitEvent:D,useListenToCustomEvent:k}=function(){const e=n.useRef(null);return n.useEffect((()=>{e.current=document.createElement("div")}),[]),{useListenToCustomEvent:function(t){n.useEffect((()=>{function r(e){t(e.detail)}if(e.current)return e.current.addEventListener(u,r,!1),()=>{var t;null===(t=e.current)||void 0===t||t.removeEventListener(u,r,!1)}}),[])},emitEvent:function(t){if(e.current){const r=new CustomEvent(u,{detail:t});e.current.dispatchEvent(r)}}}}(),{thumbsFragment:B,handleScroll:H}=o({withThumbs:!!l,thumbsSlideAxis:a,prepareThumbsData:R,items:e}),{enterFullscreen:z,exitFullscreen:P,getIsFullscreen:G}=function({mainCarouselWrapperRef:e,emitEvent:t,handleResize:r}){const i=n.useRef(!1);function u(e){i.current=e}return n.useEffect((()=>{function e(){document.fullscreenElement&&(u(!0),t({eventName:"onFullscreenChange",isFullscreen:!0}),r&&r()),document.fullscreenElement||(u(!1),t({eventName:"onFullscreenChange",isFullscreen:!1}),r&&r())}if(c.isEnabled)return c.on("change",e),()=>{c.isEnabled&&c.off("change",e)}}),[]),{enterFullscreen:function(t){c.isEnabled&&c.request(t||e.current)},exitFullscreen:function(){c.isEnabled&&c.exit()},getIsFullscreen:function(){return i.current}}}({mainCarouselWrapperRef:$,emitEvent:D,handleResize:()=>K()});function X(){var e;const t=null===(e=$.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===v?"width":"height"]+m}function Y({from:t,to:n,nextActiveItem:i,immediate:c=!1,slideMode:u}){S.current=u,"number"==typeof i&&(w||(F.current=i),D({eventName:"onSlideStartChange",slideActionType:I.current,slideMode:S.current,nextItem:{startReached:A.current,endReached:N.current,index:w?-1:F.current,id:w?"":e[F.current].id}})),O.current=n,M.start({immediate:c,from:{val:t},to:{val:n},config:Object.assign(Object.assign({},r.config.default),{velocity:L.val.velocity}),onRest(t){!c&&t.finished&&D({eventName:"onSlideChange",slideActionType:I.current,slideMode:S.current,currentItem:{startReached:A.current,endReached:N.current,index:w?-1:F.current,id:w?"":e[F.current].id}})}}),l&&!c&&H(F.current)}function J(){var t;return g?X()*e.length:Math.round(Number(null===(t=W.current)||void 0===t?void 0:t["x"===v?"scrollWidth":"scrollHeight"])-W.current.getBoundingClientRect()["x"===v?"width":"height"])}function U(){var e;const t=null===(e=W.current)||void 0===e?void 0:e.querySelector(".use-spring-carousel-item");if(!t)throw Error("No carousel items available!");return t.getBoundingClientRect()["x"===v?"width":"height"]+m}function K(){const t="x"===v?"left":"top";function r(e){const r=W.current;r&&(g?(r.style.top="0px",r.style.left="0px",r.style[t]=`-${e-h}px`):(r.style.left="0px",r.style.top="0px"))}const n=Math.abs(Q());if(n<J()&&N.current&&(N.current=!1),n>J()){const e=-J();return N.current=!0,O.current=e,void M.start({immediate:!0,val:e})}if(r("center"===E?U()*e.length-X()*Math.round((d-1)/2):"end"===E?U()*e.length-X()*Math.round(d-1):U()*e.length),!w&&"fixed"===f){const e=-X()*F.current;O.current=e,M.start({immediate:!0,val:e})}}function Q(){return w&&$.current?$.current["x"===v?"scrollLeft":"scrollTop"]:L.val.get()}function V(e,t){if(w&&"next"===e){const e=O.current+X();return e>J()?J():e}if(w&&"prev"===e){const e=O.current-X();return e<0?0:e}return"next"===e?t?-t*X():O.current-X():t?-t*X():O.current+X()}function Z(t="click",r){if(!s||A.current&&!g)return;I.current="prev",N.current=!1;const n=r||F.current-1;if(!g){const e=V("prev",r)+X()/3>0;if(A.current)return;if(e)return A.current=!0,N.current=!1,void Y({slideMode:t,from:Q(),to:0,nextActiveItem:0})}if(g&&A.current)return A.current=!1,N.current=!0,void Y({slideMode:t,from:Q()-X()*e.length,to:-X()*e.length+X(),nextActiveItem:e.length-1});0===n&&(A.current=!0),n!==e.length-1&&-1!==n||(N.current=!0),Y({slideMode:t,from:Q(),to:V("prev",r),nextActiveItem:n})}function _(t="click",r){if(!s||N.current&&!g)return;I.current="next",A.current=!1;const n=r||F.current+1;if(!g){const e=Math.abs(V("next",r))>J()-X()/3;if(N.current)return;if(e)return A.current=!1,N.current=!0,void Y({slideMode:t,from:Q(),to:-J(),nextActiveItem:n})}if(g&&N.current)return N.current=!1,A.current=!0,void Y({slideMode:t,from:Q()+X()*e.length,to:0,nextActiveItem:0});0===n&&(A.current=!0),n===e.length-1&&(N.current=!0),Y({slideMode:t,from:Q(),to:V("next",r),nextActiveItem:n})}n.useEffect((()=>{j.current=window.innerWidth}),[]),n.useEffect((()=>{K()}),[E,d,g,h,m,w,f,s]),n.useLayoutEffect((()=>{W.current&&K()}),[]),n.useEffect((()=>{C.current=p||Math.floor(X()/2/2)}),[p]),n.useEffect((()=>{function e(){window.innerWidth!==j.current&&(j.current=window.innerWidth,K())}return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const ee=i.useDrag((e=>{const t=e.dragging,n=e.offset["x"===v?0:1],i=e.movement["x"===v?0:1],c=e.direction["x"===v?0:1],u=i>C.current,o=i<-C.current;if(t)return I.current=c>0?"prev":"next",D(Object.assign(Object.assign({},e),{eventName:"onDrag",slideActionType:I.current})),w?"prev"===I.current&&n>0?(e.cancel(),void M.start({from:{val:Q()},to:{val:0},config:{velocity:e.velocity,friction:50,tension:1e3}})):void M.start({from:{val:Q()},to:{val:-n},config:{velocity:e.velocity,friction:50,tension:1e3}}):(M.start({val:n,config:{velocity:e.velocity,friction:50,tension:1e3}}),void(b&&o?(_("drag"),e.cancel()):b&&u&&(Z("drag"),e.cancel())));e.last&&!e.canceled&&w&&("prev"===I.current&&Z("drag"),"next"===I.current&&_("drag")),!e.last||e.canceled||w||(o?!g&&N.current?M.start({val:-J(),config:Object.assign(Object.assign({},r.config.default),{velocity:e.velocity})}):_("drag"):u?!g&&A.current?M.start({val:0,config:Object.assign(Object.assign({},r.config.default),{velocity:e.velocity})}):Z("drag"):M.start({val:O.current,config:Object.assign(Object.assign({},r.config.default),{velocity:e.velocity})}))}),{enabled:s&&!x&&!w||!!w&&!!y,axis:v,from:()=>w&&$.current?[-$.current.scrollLeft,-$.current.scrollTop]:[L.val.get(),L.val.get()]});function te(){$.current&&(O.current=$.current["x"===v?"scrollLeft":"scrollTop"],0===$.current["x"===v?"scrollLeft":"scrollTop"]&&(A.current=!0,N.current=!1),$.current["x"===v?"scrollLeft":"scrollTop"]>0&&$.current["x"===v?"scrollLeft":"scrollTop"]<J()&&(A.current=!1,N.current=!1),$.current["x"===v?"scrollLeft":"scrollTop"]===J()&&(A.current=!1,N.current=!0))}function re(t){return e.findIndex((e=>e.id===t))}function ne(t,r){let n=0;if(n="string"==typeof t?e.findIndex((e=>e.id===t)):t,n<0||n>=e.length)throw new Error(r);return n}return{useListenToCustomEvent:k,carouselFragment:t.jsx("div",Object.assign({ref:$},w?{onWheel(){L.val.stop(),te()}}:{},{style:Object.assign({display:"flex",position:"relative",width:"100%",height:"100%"},w?"x"===v?{overflowX:"auto"}:{overflowY:"auto"}:{})},{children:t.jsx("div",Object.assign({ref:W},ee(),{style:Object.assign({position:"relative",display:"flex",flexDirection:"x"===v?"row":"column",touchAction:"none"},function(){const e=`calc(100% - ${2*h}px)`;return{width:"x"===v?e:"100%",height:"y"===v?e:"100%"}}())},{children:q.map(((e,r)=>t.jsx("div",Object.assign({className:"use-spring-carousel-item","data-testid":"use-spring-carousel-item-wrapper",style:Object.assign({display:"flex",position:"relative",flex:"1"},"fixed"!==f||w?Object.assign({marginRight:`${m}px`}):{marginRight:`${m}px`,flex:`1 0 calc(100% / ${d} - ${m*(d-1)/d}px)`})},{children:e.renderItem}),`${e.id}-${r}`)))}))})),enterFullscreen:z,exitFullscreen:P,getIsFullscreen:G,thumbsFragment:B,slideToItem:function(t){if(!s)return;A.current=!1,N.current=!1;const r=ne(t,"The item you want to slide to doesn't exist; please check che item id or the index you're passing to.");if(r===F.current)return;const n=re(e[F.current].id),i=re(e[r].id);i>n?_("click",i):Z("click",i)},getIsNextItem:function(t){const r=re(t),n=F.current;return g&&n===e.length-1?0===r:r===n+1},getIsPrevItem:function(t){const r=re(t),n=F.current;return g&&0===n?r===e.length-1:r===n-1},slideToPrevItem:()=>Z(),slideToNextItem:()=>_(),getIsActiveItem:e=>ne(e,"The item you want to check doesn't exist")===F.current}},e.useSpringCarouselContext=function(){const e=n.useContext(s);if(!e)throw new Error("useSpringCarouselContext must be used within the carousel.");return e}}));
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('react-dom'), require('@use-gesture/react'), require('screenfull')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'react-dom', '@use-gesture/react', 'screenfull'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactSpringCarousel = {}, global.ReactJSXRuntime, global.React, global.ReactDOM, global.UseGestureReact, global.Screenfull));
+})(this, (function (exports, jsxRuntime, React, reactDom, react, screenfull) { 'use strict';
+
+  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);
+
+  let updateQueue = makeQueue();
+  const raf = fn => schedule(fn, updateQueue);
+  let writeQueue = makeQueue();
+
+  raf.write = fn => schedule(fn, writeQueue);
+
+  let onStartQueue = makeQueue();
+
+  raf.onStart = fn => schedule(fn, onStartQueue);
+
+  let onFrameQueue = makeQueue();
+
+  raf.onFrame = fn => schedule(fn, onFrameQueue);
+
+  let onFinishQueue = makeQueue();
+
+  raf.onFinish = fn => schedule(fn, onFinishQueue);
+
+  let timeouts = [];
+
+  raf.setTimeout = (handler, ms) => {
+    let time = raf.now() + ms;
+
+    let cancel = () => {
+      let i = timeouts.findIndex(t => t.cancel == cancel);
+      if (~i) timeouts.splice(i, 1);
+      pendingCount -= ~i ? 1 : 0;
+    };
+
+    let timeout = {
+      time,
+      handler,
+      cancel
+    };
+    timeouts.splice(findTimeout(time), 0, timeout);
+    pendingCount += 1;
+    start();
+    return timeout;
+  };
+
+  let findTimeout = time => ~(~timeouts.findIndex(t => t.time > time) || ~timeouts.length);
+
+  raf.cancel = fn => {
+    onStartQueue.delete(fn);
+    onFrameQueue.delete(fn);
+    onFinishQueue.delete(fn);
+    updateQueue.delete(fn);
+    writeQueue.delete(fn);
+  };
+
+  raf.sync = fn => {
+    sync = true;
+    raf.batchedUpdates(fn);
+    sync = false;
+  };
+
+  raf.throttle = fn => {
+    let lastArgs;
+
+    function queuedFn() {
+      try {
+        fn(...lastArgs);
+      } finally {
+        lastArgs = null;
+      }
+    }
+
+    function throttled(...args) {
+      lastArgs = args;
+      raf.onStart(queuedFn);
+    }
+
+    throttled.handler = fn;
+
+    throttled.cancel = () => {
+      onStartQueue.delete(queuedFn);
+      lastArgs = null;
+    };
+
+    return throttled;
+  };
+
+  let nativeRaf = typeof window != 'undefined' ? window.requestAnimationFrame : () => {};
+
+  raf.use = impl => nativeRaf = impl;
+
+  raf.now = typeof performance != 'undefined' ? () => performance.now() : Date.now;
+
+  raf.batchedUpdates = fn => fn();
+
+  raf.catch = console.error;
+  raf.frameLoop = 'always';
+
+  raf.advance = () => {
+    if (raf.frameLoop !== 'demand') {
+      console.warn('Cannot call the manual advancement of rafz whilst frameLoop is not set as demand');
+    } else {
+      update();
+    }
+  };
+
+  let ts = -1;
+  let pendingCount = 0;
+  let sync = false;
+
+  function schedule(fn, queue) {
+    if (sync) {
+      queue.delete(fn);
+      fn(0);
+    } else {
+      queue.add(fn);
+      start();
+    }
+  }
+
+  function start() {
+    if (ts < 0) {
+      ts = 0;
+
+      if (raf.frameLoop !== 'demand') {
+        nativeRaf(loop);
+      }
+    }
+  }
+
+  function stop() {
+    ts = -1;
+  }
+
+  function loop() {
+    if (~ts) {
+      nativeRaf(loop);
+      raf.batchedUpdates(update);
+    }
+  }
+
+  function update() {
+    let prevTs = ts;
+    ts = raf.now();
+    let count = findTimeout(ts);
+
+    if (count) {
+      eachSafely(timeouts.splice(0, count), t => t.handler());
+      pendingCount -= count;
+    }
+
+    if (!pendingCount) {
+      stop();
+      return;
+    }
+
+    onStartQueue.flush();
+    updateQueue.flush(prevTs ? Math.min(64, ts - prevTs) : 16.667);
+    onFrameQueue.flush();
+    writeQueue.flush();
+    onFinishQueue.flush();
+  }
+
+  function makeQueue() {
+    let next = new Set();
+    let current = next;
+    return {
+      add(fn) {
+        pendingCount += current == next && !next.has(fn) ? 1 : 0;
+        next.add(fn);
+      },
+
+      delete(fn) {
+        pendingCount -= current == next && next.has(fn) ? 1 : 0;
+        return next.delete(fn);
+      },
+
+      flush(arg) {
+        if (current.size) {
+          next = new Set();
+          pendingCount -= current.size;
+          eachSafely(current, fn => fn(arg) && next.add(fn));
+          pendingCount += next.size;
+          current = next;
+        }
+      }
+
+    };
+  }
+
+  function eachSafely(values, each) {
+    values.forEach(value => {
+      try {
+        each(value);
+      } catch (e) {
+        raf.catch(e);
+      }
+    });
+  }
+
+  function noop() {}
+  const defineHidden = (obj, key, value) => Object.defineProperty(obj, key, {
+    value,
+    writable: true,
+    configurable: true
+  });
+  const is = {
+    arr: Array.isArray,
+    obj: a => !!a && a.constructor.name === 'Object',
+    fun: a => typeof a === 'function',
+    str: a => typeof a === 'string',
+    num: a => typeof a === 'number',
+    und: a => a === undefined
+  };
+  function isEqual(a, b) {
+    if (is.arr(a)) {
+      if (!is.arr(b) || a.length !== b.length) return false;
+
+      for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) return false;
+      }
+
+      return true;
+    }
+
+    return a === b;
+  }
+  const each = (obj, fn) => obj.forEach(fn);
+  function eachProp(obj, fn, ctx) {
+    if (is.arr(obj)) {
+      for (let i = 0; i < obj.length; i++) {
+        fn.call(ctx, obj[i], `${i}`);
+      }
+
+      return;
+    }
+
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        fn.call(ctx, obj[key], key);
+      }
+    }
+  }
+  const toArray = a => is.und(a) ? [] : is.arr(a) ? a : [a];
+  function flush(queue, iterator) {
+    if (queue.size) {
+      const items = Array.from(queue);
+      queue.clear();
+      each(items, iterator);
+    }
+  }
+  const flushCalls = (queue, ...args) => flush(queue, fn => fn(...args));
+  const isSSR = () => typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
+
+  let createStringInterpolator$1;
+  let to;
+  let colors$1 = null;
+  let skipAnimation = false;
+  let willAdvance = noop;
+  const assign = globals => {
+    if (globals.to) to = globals.to;
+    if (globals.now) raf.now = globals.now;
+    if (globals.colors !== undefined) colors$1 = globals.colors;
+    if (globals.skipAnimation != null) skipAnimation = globals.skipAnimation;
+    if (globals.createStringInterpolator) createStringInterpolator$1 = globals.createStringInterpolator;
+    if (globals.requestAnimationFrame) raf.use(globals.requestAnimationFrame);
+    if (globals.batchedUpdates) raf.batchedUpdates = globals.batchedUpdates;
+    if (globals.willAdvance) willAdvance = globals.willAdvance;
+    if (globals.frameLoop) raf.frameLoop = globals.frameLoop;
+  };
+
+  var globals = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get createStringInterpolator () { return createStringInterpolator$1; },
+    get to () { return to; },
+    get colors () { return colors$1; },
+    get skipAnimation () { return skipAnimation; },
+    get willAdvance () { return willAdvance; },
+    assign: assign
+  });
+
+  const startQueue = new Set();
+  let currentFrame = [];
+  let prevFrame = [];
+  let priority = 0;
+  const frameLoop = {
+    get idle() {
+      return !startQueue.size && !currentFrame.length;
+    },
+
+    start(animation) {
+      if (priority > animation.priority) {
+        startQueue.add(animation);
+        raf.onStart(flushStartQueue);
+      } else {
+        startSafely(animation);
+        raf(advance);
+      }
+    },
+
+    advance,
+
+    sort(animation) {
+      if (priority) {
+        raf.onFrame(() => frameLoop.sort(animation));
+      } else {
+        const prevIndex = currentFrame.indexOf(animation);
+
+        if (~prevIndex) {
+          currentFrame.splice(prevIndex, 1);
+          startUnsafely(animation);
+        }
+      }
+    },
+
+    clear() {
+      currentFrame = [];
+      startQueue.clear();
+    }
+
+  };
+
+  function flushStartQueue() {
+    startQueue.forEach(startSafely);
+    startQueue.clear();
+    raf(advance);
+  }
+
+  function startSafely(animation) {
+    if (!currentFrame.includes(animation)) startUnsafely(animation);
+  }
+
+  function startUnsafely(animation) {
+    currentFrame.splice(findIndex(currentFrame, other => other.priority > animation.priority), 0, animation);
+  }
+
+  function advance(dt) {
+    const nextFrame = prevFrame;
+
+    for (let i = 0; i < currentFrame.length; i++) {
+      const animation = currentFrame[i];
+      priority = animation.priority;
+
+      if (!animation.idle) {
+        willAdvance(animation);
+        animation.advance(dt);
+
+        if (!animation.idle) {
+          nextFrame.push(animation);
+        }
+      }
+    }
+
+    priority = 0;
+    prevFrame = currentFrame;
+    prevFrame.length = 0;
+    currentFrame = nextFrame;
+    return currentFrame.length > 0;
+  }
+
+  function findIndex(arr, test) {
+    const index = arr.findIndex(test);
+    return index < 0 ? arr.length : index;
+  }
+
+  const colors = {
+    transparent: 0x00000000,
+    aliceblue: 0xf0f8ffff,
+    antiquewhite: 0xfaebd7ff,
+    aqua: 0x00ffffff,
+    aquamarine: 0x7fffd4ff,
+    azure: 0xf0ffffff,
+    beige: 0xf5f5dcff,
+    bisque: 0xffe4c4ff,
+    black: 0x000000ff,
+    blanchedalmond: 0xffebcdff,
+    blue: 0x0000ffff,
+    blueviolet: 0x8a2be2ff,
+    brown: 0xa52a2aff,
+    burlywood: 0xdeb887ff,
+    burntsienna: 0xea7e5dff,
+    cadetblue: 0x5f9ea0ff,
+    chartreuse: 0x7fff00ff,
+    chocolate: 0xd2691eff,
+    coral: 0xff7f50ff,
+    cornflowerblue: 0x6495edff,
+    cornsilk: 0xfff8dcff,
+    crimson: 0xdc143cff,
+    cyan: 0x00ffffff,
+    darkblue: 0x00008bff,
+    darkcyan: 0x008b8bff,
+    darkgoldenrod: 0xb8860bff,
+    darkgray: 0xa9a9a9ff,
+    darkgreen: 0x006400ff,
+    darkgrey: 0xa9a9a9ff,
+    darkkhaki: 0xbdb76bff,
+    darkmagenta: 0x8b008bff,
+    darkolivegreen: 0x556b2fff,
+    darkorange: 0xff8c00ff,
+    darkorchid: 0x9932ccff,
+    darkred: 0x8b0000ff,
+    darksalmon: 0xe9967aff,
+    darkseagreen: 0x8fbc8fff,
+    darkslateblue: 0x483d8bff,
+    darkslategray: 0x2f4f4fff,
+    darkslategrey: 0x2f4f4fff,
+    darkturquoise: 0x00ced1ff,
+    darkviolet: 0x9400d3ff,
+    deeppink: 0xff1493ff,
+    deepskyblue: 0x00bfffff,
+    dimgray: 0x696969ff,
+    dimgrey: 0x696969ff,
+    dodgerblue: 0x1e90ffff,
+    firebrick: 0xb22222ff,
+    floralwhite: 0xfffaf0ff,
+    forestgreen: 0x228b22ff,
+    fuchsia: 0xff00ffff,
+    gainsboro: 0xdcdcdcff,
+    ghostwhite: 0xf8f8ffff,
+    gold: 0xffd700ff,
+    goldenrod: 0xdaa520ff,
+    gray: 0x808080ff,
+    green: 0x008000ff,
+    greenyellow: 0xadff2fff,
+    grey: 0x808080ff,
+    honeydew: 0xf0fff0ff,
+    hotpink: 0xff69b4ff,
+    indianred: 0xcd5c5cff,
+    indigo: 0x4b0082ff,
+    ivory: 0xfffff0ff,
+    khaki: 0xf0e68cff,
+    lavender: 0xe6e6faff,
+    lavenderblush: 0xfff0f5ff,
+    lawngreen: 0x7cfc00ff,
+    lemonchiffon: 0xfffacdff,
+    lightblue: 0xadd8e6ff,
+    lightcoral: 0xf08080ff,
+    lightcyan: 0xe0ffffff,
+    lightgoldenrodyellow: 0xfafad2ff,
+    lightgray: 0xd3d3d3ff,
+    lightgreen: 0x90ee90ff,
+    lightgrey: 0xd3d3d3ff,
+    lightpink: 0xffb6c1ff,
+    lightsalmon: 0xffa07aff,
+    lightseagreen: 0x20b2aaff,
+    lightskyblue: 0x87cefaff,
+    lightslategray: 0x778899ff,
+    lightslategrey: 0x778899ff,
+    lightsteelblue: 0xb0c4deff,
+    lightyellow: 0xffffe0ff,
+    lime: 0x00ff00ff,
+    limegreen: 0x32cd32ff,
+    linen: 0xfaf0e6ff,
+    magenta: 0xff00ffff,
+    maroon: 0x800000ff,
+    mediumaquamarine: 0x66cdaaff,
+    mediumblue: 0x0000cdff,
+    mediumorchid: 0xba55d3ff,
+    mediumpurple: 0x9370dbff,
+    mediumseagreen: 0x3cb371ff,
+    mediumslateblue: 0x7b68eeff,
+    mediumspringgreen: 0x00fa9aff,
+    mediumturquoise: 0x48d1ccff,
+    mediumvioletred: 0xc71585ff,
+    midnightblue: 0x191970ff,
+    mintcream: 0xf5fffaff,
+    mistyrose: 0xffe4e1ff,
+    moccasin: 0xffe4b5ff,
+    navajowhite: 0xffdeadff,
+    navy: 0x000080ff,
+    oldlace: 0xfdf5e6ff,
+    olive: 0x808000ff,
+    olivedrab: 0x6b8e23ff,
+    orange: 0xffa500ff,
+    orangered: 0xff4500ff,
+    orchid: 0xda70d6ff,
+    palegoldenrod: 0xeee8aaff,
+    palegreen: 0x98fb98ff,
+    paleturquoise: 0xafeeeeff,
+    palevioletred: 0xdb7093ff,
+    papayawhip: 0xffefd5ff,
+    peachpuff: 0xffdab9ff,
+    peru: 0xcd853fff,
+    pink: 0xffc0cbff,
+    plum: 0xdda0ddff,
+    powderblue: 0xb0e0e6ff,
+    purple: 0x800080ff,
+    rebeccapurple: 0x663399ff,
+    red: 0xff0000ff,
+    rosybrown: 0xbc8f8fff,
+    royalblue: 0x4169e1ff,
+    saddlebrown: 0x8b4513ff,
+    salmon: 0xfa8072ff,
+    sandybrown: 0xf4a460ff,
+    seagreen: 0x2e8b57ff,
+    seashell: 0xfff5eeff,
+    sienna: 0xa0522dff,
+    silver: 0xc0c0c0ff,
+    skyblue: 0x87ceebff,
+    slateblue: 0x6a5acdff,
+    slategray: 0x708090ff,
+    slategrey: 0x708090ff,
+    snow: 0xfffafaff,
+    springgreen: 0x00ff7fff,
+    steelblue: 0x4682b4ff,
+    tan: 0xd2b48cff,
+    teal: 0x008080ff,
+    thistle: 0xd8bfd8ff,
+    tomato: 0xff6347ff,
+    turquoise: 0x40e0d0ff,
+    violet: 0xee82eeff,
+    wheat: 0xf5deb3ff,
+    white: 0xffffffff,
+    whitesmoke: 0xf5f5f5ff,
+    yellow: 0xffff00ff,
+    yellowgreen: 0x9acd32ff
+  };
+
+  const NUMBER = '[-+]?\\d*\\.?\\d+';
+  const PERCENTAGE = NUMBER + '%';
+
+  function call(...parts) {
+    return '\\(\\s*(' + parts.join(')\\s*,\\s*(') + ')\\s*\\)';
+  }
+
+  const rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
+  const rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));
+  const hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));
+  const hsla = new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
+  const hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+  const hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+  const hex6 = /^#([0-9a-fA-F]{6})$/;
+  const hex8 = /^#([0-9a-fA-F]{8})$/;
+
+  function normalizeColor(color) {
+    let match;
+
+    if (typeof color === 'number') {
+      return color >>> 0 === color && color >= 0 && color <= 0xffffffff ? color : null;
+    }
+
+    if (match = hex6.exec(color)) return parseInt(match[1] + 'ff', 16) >>> 0;
+
+    if (colors$1 && colors$1[color] !== undefined) {
+      return colors$1[color];
+    }
+
+    if (match = rgb.exec(color)) {
+      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 0x000000ff) >>> 0;
+    }
+
+    if (match = rgba.exec(color)) {
+      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;
+    }
+
+    if (match = hex3.exec(color)) {
+      return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + 'ff', 16) >>> 0;
+    }
+
+    if (match = hex8.exec(color)) return parseInt(match[1], 16) >>> 0;
+
+    if (match = hex4.exec(color)) {
+      return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;
+    }
+
+    if (match = hsl.exec(color)) {
+      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 0x000000ff) >>> 0;
+    }
+
+    if (match = hsla.exec(color)) {
+      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
+    }
+
+    return null;
+  }
+
+  function hue2rgb(p, q, t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  }
+
+  function hslToRgb(h, s, l) {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const r = hue2rgb(p, q, h + 1 / 3);
+    const g = hue2rgb(p, q, h);
+    const b = hue2rgb(p, q, h - 1 / 3);
+    return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
+  }
+
+  function parse255(str) {
+    const int = parseInt(str, 10);
+    if (int < 0) return 0;
+    if (int > 255) return 255;
+    return int;
+  }
+
+  function parse360(str) {
+    const int = parseFloat(str);
+    return (int % 360 + 360) % 360 / 360;
+  }
+
+  function parse1(str) {
+    const num = parseFloat(str);
+    if (num < 0) return 0;
+    if (num > 1) return 255;
+    return Math.round(num * 255);
+  }
+
+  function parsePercentage(str) {
+    const int = parseFloat(str);
+    if (int < 0) return 0;
+    if (int > 100) return 1;
+    return int / 100;
+  }
+
+  function colorToRgba(input) {
+    let int32Color = normalizeColor(input);
+    if (int32Color === null) return input;
+    int32Color = int32Color || 0;
+    let r = (int32Color & 0xff000000) >>> 24;
+    let g = (int32Color & 0x00ff0000) >>> 16;
+    let b = (int32Color & 0x0000ff00) >>> 8;
+    let a = (int32Color & 0x000000ff) / 255;
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+  }
+
+  const createInterpolator = (range, output, extrapolate) => {
+    if (is.fun(range)) {
+      return range;
+    }
+
+    if (is.arr(range)) {
+      return createInterpolator({
+        range,
+        output: output,
+        extrapolate
+      });
+    }
+
+    if (is.str(range.output[0])) {
+      return createStringInterpolator$1(range);
+    }
+
+    const config = range;
+    const outputRange = config.output;
+    const inputRange = config.range || [0, 1];
+    const extrapolateLeft = config.extrapolateLeft || config.extrapolate || 'extend';
+    const extrapolateRight = config.extrapolateRight || config.extrapolate || 'extend';
+
+    const easing = config.easing || (t => t);
+
+    return input => {
+      const range = findRange(input, inputRange);
+      return interpolate(input, inputRange[range], inputRange[range + 1], outputRange[range], outputRange[range + 1], easing, extrapolateLeft, extrapolateRight, config.map);
+    };
+  };
+
+  function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {
+    let result = map ? map(input) : input;
+
+    if (result < inputMin) {
+      if (extrapolateLeft === 'identity') return result;else if (extrapolateLeft === 'clamp') result = inputMin;
+    }
+
+    if (result > inputMax) {
+      if (extrapolateRight === 'identity') return result;else if (extrapolateRight === 'clamp') result = inputMax;
+    }
+
+    if (outputMin === outputMax) return outputMin;
+    if (inputMin === inputMax) return input <= inputMin ? outputMin : outputMax;
+    if (inputMin === -Infinity) result = -result;else if (inputMax === Infinity) result = result - inputMin;else result = (result - inputMin) / (inputMax - inputMin);
+    result = easing(result);
+    if (outputMin === -Infinity) result = -result;else if (outputMax === Infinity) result = result + outputMin;else result = result * (outputMax - outputMin) + outputMin;
+    return result;
+  }
+
+  function findRange(input, inputRange) {
+    for (var i = 1; i < inputRange.length - 1; ++i) if (inputRange[i] >= input) break;
+
+    return i - 1;
+  }
+
+  function _extends$2() {
+    _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends$2.apply(this, arguments);
+  }
+
+  const $get = Symbol.for('FluidValue.get');
+  const $observers = Symbol.for('FluidValue.observers');
+
+  const hasFluidValue = arg => Boolean(arg && arg[$get]);
+
+  const getFluidValue = arg => arg && arg[$get] ? arg[$get]() : arg;
+
+  const getFluidObservers = target => target[$observers] || null;
+
+  function callFluidObserver(observer, event) {
+    if (observer.eventObserved) {
+      observer.eventObserved(event);
+    } else {
+      observer(event);
+    }
+  }
+
+  function callFluidObservers(target, event) {
+    let observers = target[$observers];
+
+    if (observers) {
+      observers.forEach(observer => {
+        callFluidObserver(observer, event);
+      });
+    }
+  }
+
+  class FluidValue {
+    constructor(get) {
+      this[$get] = void 0;
+      this[$observers] = void 0;
+
+      if (!get && !(get = this.get)) {
+        throw Error('Unknown getter');
+      }
+
+      setFluidGetter(this, get);
+    }
+
+  }
+
+  const setFluidGetter = (target, get) => setHidden(target, $get, get);
+
+  function addFluidObserver(target, observer) {
+    if (target[$get]) {
+      let observers = target[$observers];
+
+      if (!observers) {
+        setHidden(target, $observers, observers = new Set());
+      }
+
+      if (!observers.has(observer)) {
+        observers.add(observer);
+
+        if (target.observerAdded) {
+          target.observerAdded(observers.size, observer);
+        }
+      }
+    }
+
+    return observer;
+  }
+
+  function removeFluidObserver(target, observer) {
+    let observers = target[$observers];
+
+    if (observers && observers.has(observer)) {
+      const count = observers.size - 1;
+
+      if (count) {
+        observers.delete(observer);
+      } else {
+        target[$observers] = null;
+      }
+
+      if (target.observerRemoved) {
+        target.observerRemoved(count, observer);
+      }
+    }
+  }
+
+  const setHidden = (target, key, value) => Object.defineProperty(target, key, {
+    value,
+    writable: true,
+    configurable: true
+  });
+
+  const numberRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
+  const colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
+  const unitRegex = new RegExp(`(${numberRegex.source})(%|[a-z]+)`, 'i');
+  const rgbaRegex = /rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi;
+  const cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
+
+  const variableToRgba = input => {
+    const [token, fallback] = parseCSSVariable(input);
+
+    if (!token || isSSR()) {
+      return input;
+    }
+
+    const value = window.getComputedStyle(document.documentElement).getPropertyValue(token);
+
+    if (value) {
+      return value.trim();
+    } else if (fallback && fallback.startsWith('--')) {
+      const _value = window.getComputedStyle(document.documentElement).getPropertyValue(fallback);
+
+      if (_value) {
+        return _value;
+      } else {
+        return input;
+      }
+    } else if (fallback && cssVariableRegex.test(fallback)) {
+      return variableToRgba(fallback);
+    } else if (fallback) {
+      return fallback;
+    }
+
+    return input;
+  };
+
+  const parseCSSVariable = current => {
+    const match = cssVariableRegex.exec(current);
+    if (!match) return [,];
+    const [, token, fallback] = match;
+    return [token, fallback];
+  };
+
+  let namedColorRegex;
+
+  const rgbaRound = (_, p1, p2, p3, p4) => `rgba(${Math.round(p1)}, ${Math.round(p2)}, ${Math.round(p3)}, ${p4})`;
+
+  const createStringInterpolator = config => {
+    if (!namedColorRegex) namedColorRegex = colors$1 ? new RegExp(`(${Object.keys(colors$1).join('|')})(?!\\w)`, 'g') : /^\b$/;
+    const output = config.output.map(value => {
+      return getFluidValue(value).replace(cssVariableRegex, variableToRgba).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba);
+    });
+    const keyframes = output.map(value => value.match(numberRegex).map(Number));
+    const outputRanges = keyframes[0].map((_, i) => keyframes.map(values => {
+      if (!(i in values)) {
+        throw Error('The arity of each "output" value must be equal');
+      }
+
+      return values[i];
+    }));
+    const interpolators = outputRanges.map(output => createInterpolator(_extends$2({}, config, {
+      output
+    })));
+    return input => {
+      var _output$find;
+
+      const missingUnit = !unitRegex.test(output[0]) && ((_output$find = output.find(value => unitRegex.test(value))) == null ? void 0 : _output$find.replace(numberRegex, ''));
+      let i = 0;
+      return output[0].replace(numberRegex, () => `${interpolators[i++](input)}${missingUnit || ''}`).replace(rgbaRegex, rgbaRound);
+    };
+  };
+
+  const prefix = 'react-spring: ';
+
+  const once = fn => {
+    const func = fn;
+    let called = false;
+
+    if (typeof func != 'function') {
+      throw new TypeError(`${prefix}once requires a function parameter`);
+    }
+
+    return (...args) => {
+      if (!called) {
+        func(...args);
+        called = true;
+      }
+    };
+  };
+
+  const warnInterpolate = once(console.warn);
+  function deprecateInterpolate() {
+    warnInterpolate(`${prefix}The "interpolate" function is deprecated in v9 (use "to" instead)`);
+  }
+  const warnDirectCall = once(console.warn);
+  function deprecateDirectCall() {
+    warnDirectCall(`${prefix}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`);
+  }
+
+  function isAnimatedString(value) {
+    return is.str(value) && (value[0] == '#' || /\d/.test(value) || !isSSR() && cssVariableRegex.test(value) || value in (colors$1 || {}));
+  }
+
+  const useIsomorphicLayoutEffect = isSSR() ? React.useEffect : React.useLayoutEffect;
+
+  const useIsMounted = () => {
+    const isMounted = React.useRef(false);
+    useIsomorphicLayoutEffect(() => {
+      isMounted.current = true;
+      return () => {
+        isMounted.current = false;
+      };
+    }, []);
+    return isMounted;
+  };
+
+  function useForceUpdate() {
+    const update = React.useState()[1];
+    const isMounted = useIsMounted();
+    return () => {
+      if (isMounted.current) {
+        update(Math.random());
+      }
+    };
+  }
+
+  function useMemoOne(getResult, inputs) {
+    const [initial] = React.useState(() => ({
+      inputs,
+      result: getResult()
+    }));
+    const committed = React.useRef();
+    const prevCache = committed.current;
+    let cache = prevCache;
+
+    if (cache) {
+      const useCache = Boolean(inputs && cache.inputs && areInputsEqual(inputs, cache.inputs));
+
+      if (!useCache) {
+        cache = {
+          inputs,
+          result: getResult()
+        };
+      }
+    } else {
+      cache = initial;
+    }
+
+    React.useEffect(() => {
+      committed.current = cache;
+
+      if (prevCache == initial) {
+        initial.inputs = initial.result = undefined;
+      }
+    }, [cache]);
+    return cache.result;
+  }
+
+  function areInputsEqual(next, prev) {
+    if (next.length !== prev.length) {
+      return false;
+    }
+
+    for (let i = 0; i < next.length; i++) {
+      if (next[i] !== prev[i]) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  const useOnce = effect => React.useEffect(effect, emptyDeps);
+  const emptyDeps = [];
+
+  function usePrev(value) {
+    const prevRef = React.useRef();
+    React.useEffect(() => {
+      prevRef.current = value;
+    });
+    return prevRef.current;
+  }
+
+  const $node = Symbol.for('Animated:node');
+  const isAnimated = value => !!value && value[$node] === value;
+  const getAnimated = owner => owner && owner[$node];
+  const setAnimated = (owner, node) => defineHidden(owner, $node, node);
+  const getPayload = owner => owner && owner[$node] && owner[$node].getPayload();
+  class Animated {
+    constructor() {
+      this.payload = void 0;
+      setAnimated(this, this);
+    }
+
+    getPayload() {
+      return this.payload || [];
+    }
+
+  }
+
+  class AnimatedValue extends Animated {
+    constructor(_value) {
+      super();
+      this.done = true;
+      this.elapsedTime = void 0;
+      this.lastPosition = void 0;
+      this.lastVelocity = void 0;
+      this.v0 = void 0;
+      this.durationProgress = 0;
+      this._value = _value;
+
+      if (is.num(this._value)) {
+        this.lastPosition = this._value;
+      }
+    }
+
+    static create(value) {
+      return new AnimatedValue(value);
+    }
+
+    getPayload() {
+      return [this];
+    }
+
+    getValue() {
+      return this._value;
+    }
+
+    setValue(value, step) {
+      if (is.num(value)) {
+        this.lastPosition = value;
+
+        if (step) {
+          value = Math.round(value / step) * step;
+
+          if (this.done) {
+            this.lastPosition = value;
+          }
+        }
+      }
+
+      if (this._value === value) {
+        return false;
+      }
+
+      this._value = value;
+      return true;
+    }
+
+    reset() {
+      const {
+        done
+      } = this;
+      this.done = false;
+
+      if (is.num(this._value)) {
+        this.elapsedTime = 0;
+        this.durationProgress = 0;
+        this.lastPosition = this._value;
+        if (done) this.lastVelocity = null;
+        this.v0 = null;
+      }
+    }
+
+  }
+
+  class AnimatedString extends AnimatedValue {
+    constructor(value) {
+      super(0);
+      this._string = null;
+      this._toString = void 0;
+      this._toString = createInterpolator({
+        output: [value, value]
+      });
+    }
+
+    static create(value) {
+      return new AnimatedString(value);
+    }
+
+    getValue() {
+      let value = this._string;
+      return value == null ? this._string = this._toString(this._value) : value;
+    }
+
+    setValue(value) {
+      if (is.str(value)) {
+        if (value == this._string) {
+          return false;
+        }
+
+        this._string = value;
+        this._value = 1;
+      } else if (super.setValue(value)) {
+        this._string = null;
+      } else {
+        return false;
+      }
+
+      return true;
+    }
+
+    reset(goal) {
+      if (goal) {
+        this._toString = createInterpolator({
+          output: [this.getValue(), goal]
+        });
+      }
+
+      this._value = 0;
+      super.reset();
+    }
+
+  }
+
+  const TreeContext = {
+    dependencies: null
+  };
+
+  class AnimatedObject extends Animated {
+    constructor(source) {
+      super();
+      this.source = source;
+      this.setValue(source);
+    }
+
+    getValue(animated) {
+      const values = {};
+      eachProp(this.source, (source, key) => {
+        if (isAnimated(source)) {
+          values[key] = source.getValue(animated);
+        } else if (hasFluidValue(source)) {
+          values[key] = getFluidValue(source);
+        } else if (!animated) {
+          values[key] = source;
+        }
+      });
+      return values;
+    }
+
+    setValue(source) {
+      this.source = source;
+      this.payload = this._makePayload(source);
+    }
+
+    reset() {
+      if (this.payload) {
+        each(this.payload, node => node.reset());
+      }
+    }
+
+    _makePayload(source) {
+      if (source) {
+        const payload = new Set();
+        eachProp(source, this._addToPayload, payload);
+        return Array.from(payload);
+      }
+    }
+
+    _addToPayload(source) {
+      if (TreeContext.dependencies && hasFluidValue(source)) {
+        TreeContext.dependencies.add(source);
+      }
+
+      const payload = getPayload(source);
+
+      if (payload) {
+        each(payload, node => this.add(node));
+      }
+    }
+
+  }
+
+  class AnimatedArray extends AnimatedObject {
+    constructor(source) {
+      super(source);
+    }
+
+    static create(source) {
+      return new AnimatedArray(source);
+    }
+
+    getValue() {
+      return this.source.map(node => node.getValue());
+    }
+
+    setValue(source) {
+      const payload = this.getPayload();
+
+      if (source.length == payload.length) {
+        return payload.map((node, i) => node.setValue(source[i])).some(Boolean);
+      }
+
+      super.setValue(source.map(makeAnimated));
+      return true;
+    }
+
+  }
+
+  function makeAnimated(value) {
+    const nodeType = isAnimatedString(value) ? AnimatedString : AnimatedValue;
+    return nodeType.create(value);
+  }
+
+  function getAnimatedType(value) {
+    const parentNode = getAnimated(value);
+    return parentNode ? parentNode.constructor : is.arr(value) ? AnimatedArray : isAnimatedString(value) ? AnimatedString : AnimatedValue;
+  }
+
+  function _extends$1() {
+    _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends$1.apply(this, arguments);
+  }
+
+  const withAnimated = (Component, host) => {
+    const hasInstance = !is.fun(Component) || Component.prototype && Component.prototype.isReactComponent;
+    return React.forwardRef((givenProps, givenRef) => {
+      const instanceRef = React.useRef(null);
+      const ref = hasInstance && React.useCallback(value => {
+        instanceRef.current = updateRef(givenRef, value);
+      }, [givenRef]);
+      const [props, deps] = getAnimatedState(givenProps, host);
+      const forceUpdate = useForceUpdate();
+
+      const callback = () => {
+        const instance = instanceRef.current;
+
+        if (hasInstance && !instance) {
+          return;
+        }
+
+        const didUpdate = instance ? host.applyAnimatedValues(instance, props.getValue(true)) : false;
+
+        if (didUpdate === false) {
+          forceUpdate();
+        }
+      };
+
+      const observer = new PropsObserver(callback, deps);
+      const observerRef = React.useRef();
+      useIsomorphicLayoutEffect(() => {
+        observerRef.current = observer;
+        each(deps, dep => addFluidObserver(dep, observer));
+        return () => {
+          if (observerRef.current) {
+            each(observerRef.current.deps, dep => removeFluidObserver(dep, observerRef.current));
+            raf.cancel(observerRef.current.update);
+          }
+        };
+      });
+      React.useEffect(callback, []);
+      useOnce(() => () => {
+        const observer = observerRef.current;
+        each(observer.deps, dep => removeFluidObserver(dep, observer));
+      });
+      const usedProps = host.getComponentProps(props.getValue());
+      return React__namespace.createElement(Component, _extends$1({}, usedProps, {
+        ref: ref
+      }));
+    });
+  };
+
+  class PropsObserver {
+    constructor(update, deps) {
+      this.update = update;
+      this.deps = deps;
+    }
+
+    eventObserved(event) {
+      if (event.type == 'change') {
+        raf.write(this.update);
+      }
+    }
+
+  }
+
+  function getAnimatedState(props, host) {
+    const dependencies = new Set();
+    TreeContext.dependencies = dependencies;
+    if (props.style) props = _extends$1({}, props, {
+      style: host.createAnimatedStyle(props.style)
+    });
+    props = new AnimatedObject(props);
+    TreeContext.dependencies = null;
+    return [props, dependencies];
+  }
+
+  function updateRef(ref, value) {
+    if (ref) {
+      if (is.fun(ref)) ref(value);else ref.current = value;
+    }
+
+    return value;
+  }
+
+  const cacheKey = Symbol.for('AnimatedComponent');
+  const createHost = (components, {
+    applyAnimatedValues: _applyAnimatedValues = () => false,
+    createAnimatedStyle: _createAnimatedStyle = style => new AnimatedObject(style),
+    getComponentProps: _getComponentProps = props => props
+  } = {}) => {
+    const hostConfig = {
+      applyAnimatedValues: _applyAnimatedValues,
+      createAnimatedStyle: _createAnimatedStyle,
+      getComponentProps: _getComponentProps
+    };
+
+    const animated = Component => {
+      const displayName = getDisplayName(Component) || 'Anonymous';
+
+      if (is.str(Component)) {
+        Component = animated[Component] || (animated[Component] = withAnimated(Component, hostConfig));
+      } else {
+        Component = Component[cacheKey] || (Component[cacheKey] = withAnimated(Component, hostConfig));
+      }
+
+      Component.displayName = `Animated(${displayName})`;
+      return Component;
+    };
+
+    eachProp(components, (Component, key) => {
+      if (is.arr(components)) {
+        key = getDisplayName(Component);
+      }
+
+      animated[key] = animated(Component);
+    });
+    return {
+      animated
+    };
+  };
+
+  const getDisplayName = arg => is.str(arg) ? arg : arg && is.str(arg.displayName) ? arg.displayName : is.fun(arg) && arg.name || null;
+
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+
+  function callProp(value, ...args) {
+    return is.fun(value) ? value(...args) : value;
+  }
+  const matchProp = (value, key) => value === true || !!(key && value && (is.fun(value) ? value(key) : toArray(value).includes(key)));
+  const resolveProp = (prop, key) => is.obj(prop) ? key && prop[key] : prop;
+  const getDefaultProp = (props, key) => props.default === true ? props[key] : props.default ? props.default[key] : undefined;
+
+  const noopTransform = value => value;
+
+  const getDefaultProps = (props, transform = noopTransform) => {
+    let keys = DEFAULT_PROPS;
+
+    if (props.default && props.default !== true) {
+      props = props.default;
+      keys = Object.keys(props);
+    }
+
+    const defaults = {};
+
+    for (const key of keys) {
+      const value = transform(props[key], key);
+
+      if (!is.und(value)) {
+        defaults[key] = value;
+      }
+    }
+
+    return defaults;
+  };
+  const DEFAULT_PROPS = ['config', 'onProps', 'onStart', 'onChange', 'onPause', 'onResume', 'onRest'];
+  const RESERVED_PROPS = {
+    config: 1,
+    from: 1,
+    to: 1,
+    ref: 1,
+    loop: 1,
+    reset: 1,
+    pause: 1,
+    cancel: 1,
+    reverse: 1,
+    immediate: 1,
+    default: 1,
+    delay: 1,
+    onProps: 1,
+    onStart: 1,
+    onChange: 1,
+    onPause: 1,
+    onResume: 1,
+    onRest: 1,
+    onResolve: 1,
+    items: 1,
+    trail: 1,
+    sort: 1,
+    expires: 1,
+    initial: 1,
+    enter: 1,
+    update: 1,
+    leave: 1,
+    children: 1,
+    onDestroyed: 1,
+    keys: 1,
+    callId: 1,
+    parentId: 1
+  };
+
+  function getForwardProps(props) {
+    const forward = {};
+    let count = 0;
+    eachProp(props, (value, prop) => {
+      if (!RESERVED_PROPS[prop]) {
+        forward[prop] = value;
+        count++;
+      }
+    });
+
+    if (count) {
+      return forward;
+    }
+  }
+
+  function inferTo(props) {
+    const to = getForwardProps(props);
+
+    if (to) {
+      const out = {
+        to
+      };
+      eachProp(props, (val, key) => key in to || (out[key] = val));
+      return out;
+    }
+
+    return _extends({}, props);
+  }
+  function computeGoal(value) {
+    value = getFluidValue(value);
+    return is.arr(value) ? value.map(computeGoal) : isAnimatedString(value) ? globals.createStringInterpolator({
+      range: [0, 1],
+      output: [value, value]
+    })(1) : value;
+  }
+  function hasProps(props) {
+    for (const _ in props) return true;
+
+    return false;
+  }
+  function isAsyncTo(to) {
+    return is.fun(to) || is.arr(to) && is.obj(to[0]);
+  }
+  function detachRefs(ctrl, ref) {
+    var _ctrl$ref;
+
+    (_ctrl$ref = ctrl.ref) == null ? void 0 : _ctrl$ref.delete(ctrl);
+    ref == null ? void 0 : ref.delete(ctrl);
+  }
+  function replaceRef(ctrl, ref) {
+    if (ref && ctrl.ref !== ref) {
+      var _ctrl$ref2;
+
+      (_ctrl$ref2 = ctrl.ref) == null ? void 0 : _ctrl$ref2.delete(ctrl);
+      ref.add(ctrl);
+      ctrl.ref = ref;
+    }
+  }
+
+  const config = {
+    default: {
+      tension: 170,
+      friction: 26
+    },
+    gentle: {
+      tension: 120,
+      friction: 14
+    },
+    wobbly: {
+      tension: 180,
+      friction: 12
+    },
+    stiff: {
+      tension: 210,
+      friction: 20
+    },
+    slow: {
+      tension: 280,
+      friction: 60
+    },
+    molasses: {
+      tension: 280,
+      friction: 120
+    }
+  };
+  const c1 = 1.70158;
+  const c2 = c1 * 1.525;
+  const c3 = c1 + 1;
+  const c4 = 2 * Math.PI / 3;
+  const c5 = 2 * Math.PI / 4.5;
+
+  const bounceOut = x => {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+
+    if (x < 1 / d1) {
+      return n1 * x * x;
+    } else if (x < 2 / d1) {
+      return n1 * (x -= 1.5 / d1) * x + 0.75;
+    } else if (x < 2.5 / d1) {
+      return n1 * (x -= 2.25 / d1) * x + 0.9375;
+    } else {
+      return n1 * (x -= 2.625 / d1) * x + 0.984375;
+    }
+  };
+
+  const easings = {
+    linear: x => x,
+    easeInQuad: x => x * x,
+    easeOutQuad: x => 1 - (1 - x) * (1 - x),
+    easeInOutQuad: x => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2,
+    easeInCubic: x => x * x * x,
+    easeOutCubic: x => 1 - Math.pow(1 - x, 3),
+    easeInOutCubic: x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2,
+    easeInQuart: x => x * x * x * x,
+    easeOutQuart: x => 1 - Math.pow(1 - x, 4),
+    easeInOutQuart: x => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2,
+    easeInQuint: x => x * x * x * x * x,
+    easeOutQuint: x => 1 - Math.pow(1 - x, 5),
+    easeInOutQuint: x => x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2,
+    easeInSine: x => 1 - Math.cos(x * Math.PI / 2),
+    easeOutSine: x => Math.sin(x * Math.PI / 2),
+    easeInOutSine: x => -(Math.cos(Math.PI * x) - 1) / 2,
+    easeInExpo: x => x === 0 ? 0 : Math.pow(2, 10 * x - 10),
+    easeOutExpo: x => x === 1 ? 1 : 1 - Math.pow(2, -10 * x),
+    easeInOutExpo: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2,
+    easeInCirc: x => 1 - Math.sqrt(1 - Math.pow(x, 2)),
+    easeOutCirc: x => Math.sqrt(1 - Math.pow(x - 1, 2)),
+    easeInOutCirc: x => x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2,
+    easeInBack: x => c3 * x * x * x - c1 * x * x,
+    easeOutBack: x => 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2),
+    easeInOutBack: x => x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
+    easeInElastic: x => x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4),
+    easeOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1,
+    easeInOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1,
+    easeInBounce: x => 1 - bounceOut(1 - x),
+    easeOutBounce: bounceOut,
+    easeInOutBounce: x => x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2
+  };
+
+  const defaults = _extends({}, config.default, {
+    mass: 1,
+    damping: 1,
+    easing: easings.linear,
+    clamp: false
+  });
+
+  class AnimationConfig {
+    constructor() {
+      this.tension = void 0;
+      this.friction = void 0;
+      this.frequency = void 0;
+      this.damping = void 0;
+      this.mass = void 0;
+      this.velocity = 0;
+      this.restVelocity = void 0;
+      this.precision = void 0;
+      this.progress = void 0;
+      this.duration = void 0;
+      this.easing = void 0;
+      this.clamp = void 0;
+      this.bounce = void 0;
+      this.decay = void 0;
+      this.round = void 0;
+      Object.assign(this, defaults);
+    }
+
+  }
+  function mergeConfig(config, newConfig, defaultConfig) {
+    if (defaultConfig) {
+      defaultConfig = _extends({}, defaultConfig);
+      sanitizeConfig(defaultConfig, newConfig);
+      newConfig = _extends({}, defaultConfig, newConfig);
+    }
+
+    sanitizeConfig(config, newConfig);
+    Object.assign(config, newConfig);
+
+    for (const key in defaults) {
+      if (config[key] == null) {
+        config[key] = defaults[key];
+      }
+    }
+
+    let {
+      mass,
+      frequency,
+      damping
+    } = config;
+
+    if (!is.und(frequency)) {
+      if (frequency < 0.01) frequency = 0.01;
+      if (damping < 0) damping = 0;
+      config.tension = Math.pow(2 * Math.PI / frequency, 2) * mass;
+      config.friction = 4 * Math.PI * damping * mass / frequency;
+    }
+
+    return config;
+  }
+
+  function sanitizeConfig(config, props) {
+    if (!is.und(props.decay)) {
+      config.duration = undefined;
+    } else {
+      const isTensionConfig = !is.und(props.tension) || !is.und(props.friction);
+
+      if (isTensionConfig || !is.und(props.frequency) || !is.und(props.damping) || !is.und(props.mass)) {
+        config.duration = undefined;
+        config.decay = undefined;
+      }
+
+      if (isTensionConfig) {
+        config.frequency = undefined;
+      }
+    }
+  }
+
+  const emptyArray = [];
+  class Animation {
+    constructor() {
+      this.changed = false;
+      this.values = emptyArray;
+      this.toValues = null;
+      this.fromValues = emptyArray;
+      this.to = void 0;
+      this.from = void 0;
+      this.config = new AnimationConfig();
+      this.immediate = false;
+    }
+
+  }
+
+  function scheduleProps(callId, {
+    key,
+    props,
+    defaultProps,
+    state,
+    actions
+  }) {
+    return new Promise((resolve, reject) => {
+      var _props$cancel;
+
+      let delay;
+      let timeout;
+      let cancel = matchProp((_props$cancel = props.cancel) != null ? _props$cancel : defaultProps == null ? void 0 : defaultProps.cancel, key);
+
+      if (cancel) {
+        onStart();
+      } else {
+        if (!is.und(props.pause)) {
+          state.paused = matchProp(props.pause, key);
+        }
+
+        let pause = defaultProps == null ? void 0 : defaultProps.pause;
+
+        if (pause !== true) {
+          pause = state.paused || matchProp(pause, key);
+        }
+
+        delay = callProp(props.delay || 0, key);
+
+        if (pause) {
+          state.resumeQueue.add(onResume);
+          actions.pause();
+        } else {
+          actions.resume();
+          onResume();
+        }
+      }
+
+      function onPause() {
+        state.resumeQueue.add(onResume);
+        state.timeouts.delete(timeout);
+        timeout.cancel();
+        delay = timeout.time - raf.now();
+      }
+
+      function onResume() {
+        if (delay > 0 && !globals.skipAnimation) {
+          state.delayed = true;
+          timeout = raf.setTimeout(onStart, delay);
+          state.pauseQueue.add(onPause);
+          state.timeouts.add(timeout);
+        } else {
+          onStart();
+        }
+      }
+
+      function onStart() {
+        if (state.delayed) {
+          state.delayed = false;
+        }
+
+        state.pauseQueue.delete(onPause);
+        state.timeouts.delete(timeout);
+
+        if (callId <= (state.cancelId || 0)) {
+          cancel = true;
+        }
+
+        try {
+          actions.start(_extends({}, props, {
+            callId,
+            cancel
+          }), resolve);
+        } catch (err) {
+          reject(err);
+        }
+      }
+    });
+  }
+
+  const getCombinedResult = (target, results) => results.length == 1 ? results[0] : results.some(result => result.cancelled) ? getCancelledResult(target.get()) : results.every(result => result.noop) ? getNoopResult(target.get()) : getFinishedResult(target.get(), results.every(result => result.finished));
+  const getNoopResult = value => ({
+    value,
+    noop: true,
+    finished: true,
+    cancelled: false
+  });
+  const getFinishedResult = (value, finished, cancelled = false) => ({
+    value,
+    finished,
+    cancelled
+  });
+  const getCancelledResult = value => ({
+    value,
+    cancelled: true,
+    finished: false
+  });
+
+  function runAsync(to, props, state, target) {
+    const {
+      callId,
+      parentId,
+      onRest
+    } = props;
+    const {
+      asyncTo: prevTo,
+      promise: prevPromise
+    } = state;
+
+    if (!parentId && to === prevTo && !props.reset) {
+      return prevPromise;
+    }
+
+    return state.promise = (async () => {
+      state.asyncId = callId;
+      state.asyncTo = to;
+      const defaultProps = getDefaultProps(props, (value, key) => key === 'onRest' ? undefined : value);
+      let preventBail;
+      let bail;
+      const bailPromise = new Promise((resolve, reject) => (preventBail = resolve, bail = reject));
+
+      const bailIfEnded = bailSignal => {
+        const bailResult = callId <= (state.cancelId || 0) && getCancelledResult(target) || callId !== state.asyncId && getFinishedResult(target, false);
+
+        if (bailResult) {
+          bailSignal.result = bailResult;
+          bail(bailSignal);
+          throw bailSignal;
+        }
+      };
+
+      const animate = (arg1, arg2) => {
+        const bailSignal = new BailSignal();
+        const skipAnimationSignal = new SkipAniamtionSignal();
+        return (async () => {
+          if (globals.skipAnimation) {
+            stopAsync(state);
+            skipAnimationSignal.result = getFinishedResult(target, false);
+            bail(skipAnimationSignal);
+            throw skipAnimationSignal;
+          }
+
+          bailIfEnded(bailSignal);
+          const props = is.obj(arg1) ? _extends({}, arg1) : _extends({}, arg2, {
+            to: arg1
+          });
+          props.parentId = callId;
+          eachProp(defaultProps, (value, key) => {
+            if (is.und(props[key])) {
+              props[key] = value;
+            }
+          });
+          const result = await target.start(props);
+          bailIfEnded(bailSignal);
+
+          if (state.paused) {
+            await new Promise(resume => {
+              state.resumeQueue.add(resume);
+            });
+          }
+
+          return result;
+        })();
+      };
+
+      let result;
+
+      if (globals.skipAnimation) {
+        stopAsync(state);
+        return getFinishedResult(target, false);
+      }
+
+      try {
+        let animating;
+
+        if (is.arr(to)) {
+          animating = (async queue => {
+            for (const props of queue) {
+              await animate(props);
+            }
+          })(to);
+        } else {
+          animating = Promise.resolve(to(animate, target.stop.bind(target)));
+        }
+
+        await Promise.all([animating.then(preventBail), bailPromise]);
+        result = getFinishedResult(target.get(), true, false);
+      } catch (err) {
+        if (err instanceof BailSignal) {
+          result = err.result;
+        } else if (err instanceof SkipAniamtionSignal) {
+          result = err.result;
+        } else {
+          throw err;
+        }
+      } finally {
+        if (callId == state.asyncId) {
+          state.asyncId = parentId;
+          state.asyncTo = parentId ? prevTo : undefined;
+          state.promise = parentId ? prevPromise : undefined;
+        }
+      }
+
+      if (is.fun(onRest)) {
+        raf.batchedUpdates(() => {
+          onRest(result, target, target.item);
+        });
+      }
+
+      return result;
+    })();
+  }
+  function stopAsync(state, cancelId) {
+    flush(state.timeouts, t => t.cancel());
+    state.pauseQueue.clear();
+    state.resumeQueue.clear();
+    state.asyncId = state.asyncTo = state.promise = undefined;
+    if (cancelId) state.cancelId = cancelId;
+  }
+  class BailSignal extends Error {
+    constructor() {
+      super('An async animation has been interrupted. You see this error because you ' + 'forgot to use `await` or `.catch(...)` on its returned promise.');
+      this.result = void 0;
+    }
+
+  }
+  class SkipAniamtionSignal extends Error {
+    constructor() {
+      super('SkipAnimationSignal');
+      this.result = void 0;
+    }
+
+  }
+
+  const isFrameValue = value => value instanceof FrameValue;
+  let nextId$1 = 1;
+  class FrameValue extends FluidValue {
+    constructor(...args) {
+      super(...args);
+      this.id = nextId$1++;
+      this.key = void 0;
+      this._priority = 0;
+    }
+
+    get priority() {
+      return this._priority;
+    }
+
+    set priority(priority) {
+      if (this._priority != priority) {
+        this._priority = priority;
+
+        this._onPriorityChange(priority);
+      }
+    }
+
+    get() {
+      const node = getAnimated(this);
+      return node && node.getValue();
+    }
+
+    to(...args) {
+      return globals.to(this, args);
+    }
+
+    interpolate(...args) {
+      deprecateInterpolate();
+      return globals.to(this, args);
+    }
+
+    toJSON() {
+      return this.get();
+    }
+
+    observerAdded(count) {
+      if (count == 1) this._attach();
+    }
+
+    observerRemoved(count) {
+      if (count == 0) this._detach();
+    }
+
+    _attach() {}
+
+    _detach() {}
+
+    _onChange(value, idle = false) {
+      callFluidObservers(this, {
+        type: 'change',
+        parent: this,
+        value,
+        idle
+      });
+    }
+
+    _onPriorityChange(priority) {
+      if (!this.idle) {
+        frameLoop.sort(this);
+      }
+
+      callFluidObservers(this, {
+        type: 'priority',
+        parent: this,
+        priority
+      });
+    }
+
+  }
+
+  const $P = Symbol.for('SpringPhase');
+  const HAS_ANIMATED = 1;
+  const IS_ANIMATING = 2;
+  const IS_PAUSED = 4;
+  const hasAnimated = target => (target[$P] & HAS_ANIMATED) > 0;
+  const isAnimating = target => (target[$P] & IS_ANIMATING) > 0;
+  const isPaused = target => (target[$P] & IS_PAUSED) > 0;
+  const setActiveBit = (target, active) => active ? target[$P] |= IS_ANIMATING | HAS_ANIMATED : target[$P] &= ~IS_ANIMATING;
+  const setPausedBit = (target, paused) => paused ? target[$P] |= IS_PAUSED : target[$P] &= ~IS_PAUSED;
+
+  class SpringValue extends FrameValue {
+    constructor(arg1, arg2) {
+      super();
+      this.key = void 0;
+      this.animation = new Animation();
+      this.queue = void 0;
+      this.defaultProps = {};
+      this._state = {
+        paused: false,
+        delayed: false,
+        pauseQueue: new Set(),
+        resumeQueue: new Set(),
+        timeouts: new Set()
+      };
+      this._pendingCalls = new Set();
+      this._lastCallId = 0;
+      this._lastToId = 0;
+      this._memoizedDuration = 0;
+
+      if (!is.und(arg1) || !is.und(arg2)) {
+        const props = is.obj(arg1) ? _extends({}, arg1) : _extends({}, arg2, {
+          from: arg1
+        });
+
+        if (is.und(props.default)) {
+          props.default = true;
+        }
+
+        this.start(props);
+      }
+    }
+
+    get idle() {
+      return !(isAnimating(this) || this._state.asyncTo) || isPaused(this);
+    }
+
+    get goal() {
+      return getFluidValue(this.animation.to);
+    }
+
+    get velocity() {
+      const node = getAnimated(this);
+      return node instanceof AnimatedValue ? node.lastVelocity || 0 : node.getPayload().map(node => node.lastVelocity || 0);
+    }
+
+    get hasAnimated() {
+      return hasAnimated(this);
+    }
+
+    get isAnimating() {
+      return isAnimating(this);
+    }
+
+    get isPaused() {
+      return isPaused(this);
+    }
+
+    get isDelayed() {
+      return this._state.delayed;
+    }
+
+    advance(dt) {
+      let idle = true;
+      let changed = false;
+      const anim = this.animation;
+      let {
+        config,
+        toValues
+      } = anim;
+      const payload = getPayload(anim.to);
+
+      if (!payload && hasFluidValue(anim.to)) {
+        toValues = toArray(getFluidValue(anim.to));
+      }
+
+      anim.values.forEach((node, i) => {
+        if (node.done) return;
+        const to = node.constructor == AnimatedString ? 1 : payload ? payload[i].lastPosition : toValues[i];
+        let finished = anim.immediate;
+        let position = to;
+
+        if (!finished) {
+          position = node.lastPosition;
+
+          if (config.tension <= 0) {
+            node.done = true;
+            return;
+          }
+
+          let elapsed = node.elapsedTime += dt;
+          const from = anim.fromValues[i];
+          const v0 = node.v0 != null ? node.v0 : node.v0 = is.arr(config.velocity) ? config.velocity[i] : config.velocity;
+          let velocity;
+          const precision = config.precision || (from == to ? 0.005 : Math.min(1, Math.abs(to - from) * 0.001));
+
+          if (!is.und(config.duration)) {
+            let p = 1;
+
+            if (config.duration > 0) {
+              if (this._memoizedDuration !== config.duration) {
+                this._memoizedDuration = config.duration;
+
+                if (node.durationProgress > 0) {
+                  node.elapsedTime = config.duration * node.durationProgress;
+                  elapsed = node.elapsedTime += dt;
+                }
+              }
+
+              p = (config.progress || 0) + elapsed / this._memoizedDuration;
+              p = p > 1 ? 1 : p < 0 ? 0 : p;
+              node.durationProgress = p;
+            }
+
+            position = from + config.easing(p) * (to - from);
+            velocity = (position - node.lastPosition) / dt;
+            finished = p == 1;
+          } else if (config.decay) {
+            const decay = config.decay === true ? 0.998 : config.decay;
+            const e = Math.exp(-(1 - decay) * elapsed);
+            position = from + v0 / (1 - decay) * (1 - e);
+            finished = Math.abs(node.lastPosition - position) <= precision;
+            velocity = v0 * e;
+          } else {
+            velocity = node.lastVelocity == null ? v0 : node.lastVelocity;
+            const restVelocity = config.restVelocity || precision / 10;
+            const bounceFactor = config.clamp ? 0 : config.bounce;
+            const canBounce = !is.und(bounceFactor);
+            const isGrowing = from == to ? node.v0 > 0 : from < to;
+            let isMoving;
+            let isBouncing = false;
+            const step = 1;
+            const numSteps = Math.ceil(dt / step);
+
+            for (let n = 0; n < numSteps; ++n) {
+              isMoving = Math.abs(velocity) > restVelocity;
+
+              if (!isMoving) {
+                finished = Math.abs(to - position) <= precision;
+
+                if (finished) {
+                  break;
+                }
+              }
+
+              if (canBounce) {
+                isBouncing = position == to || position > to == isGrowing;
+
+                if (isBouncing) {
+                  velocity = -velocity * bounceFactor;
+                  position = to;
+                }
+              }
+
+              const springForce = -config.tension * 0.000001 * (position - to);
+              const dampingForce = -config.friction * 0.001 * velocity;
+              const acceleration = (springForce + dampingForce) / config.mass;
+              velocity = velocity + acceleration * step;
+              position = position + velocity * step;
+            }
+          }
+
+          node.lastVelocity = velocity;
+
+          if (Number.isNaN(position)) {
+            console.warn(`Got NaN while animating:`, this);
+            finished = true;
+          }
+        }
+
+        if (payload && !payload[i].done) {
+          finished = false;
+        }
+
+        if (finished) {
+          node.done = true;
+        } else {
+          idle = false;
+        }
+
+        if (node.setValue(position, config.round)) {
+          changed = true;
+        }
+      });
+      const node = getAnimated(this);
+      const currVal = node.getValue();
+
+      if (idle) {
+        const finalVal = getFluidValue(anim.to);
+
+        if ((currVal !== finalVal || changed) && !config.decay) {
+          node.setValue(finalVal);
+
+          this._onChange(finalVal);
+        } else if (changed && config.decay) {
+          this._onChange(currVal);
+        }
+
+        this._stop();
+      } else if (changed) {
+        this._onChange(currVal);
+      }
+    }
+
+    set(value) {
+      raf.batchedUpdates(() => {
+        this._stop();
+
+        this._focus(value);
+
+        this._set(value);
+      });
+      return this;
+    }
+
+    pause() {
+      this._update({
+        pause: true
+      });
+    }
+
+    resume() {
+      this._update({
+        pause: false
+      });
+    }
+
+    finish() {
+      if (isAnimating(this)) {
+        const {
+          to,
+          config
+        } = this.animation;
+        raf.batchedUpdates(() => {
+          this._onStart();
+
+          if (!config.decay) {
+            this._set(to, false);
+          }
+
+          this._stop();
+        });
+      }
+
+      return this;
+    }
+
+    update(props) {
+      const queue = this.queue || (this.queue = []);
+      queue.push(props);
+      return this;
+    }
+
+    start(to, arg2) {
+      let queue;
+
+      if (!is.und(to)) {
+        queue = [is.obj(to) ? to : _extends({}, arg2, {
+          to
+        })];
+      } else {
+        queue = this.queue || [];
+        this.queue = [];
+      }
+
+      return Promise.all(queue.map(props => {
+        const up = this._update(props);
+
+        return up;
+      })).then(results => getCombinedResult(this, results));
+    }
+
+    stop(cancel) {
+      const {
+        to
+      } = this.animation;
+
+      this._focus(this.get());
+
+      stopAsync(this._state, cancel && this._lastCallId);
+      raf.batchedUpdates(() => this._stop(to, cancel));
+      return this;
+    }
+
+    reset() {
+      this._update({
+        reset: true
+      });
+    }
+
+    eventObserved(event) {
+      if (event.type == 'change') {
+        this._start();
+      } else if (event.type == 'priority') {
+        this.priority = event.priority + 1;
+      }
+    }
+
+    _prepareNode(props) {
+      const key = this.key || '';
+      let {
+        to,
+        from
+      } = props;
+      to = is.obj(to) ? to[key] : to;
+
+      if (to == null || isAsyncTo(to)) {
+        to = undefined;
+      }
+
+      from = is.obj(from) ? from[key] : from;
+
+      if (from == null) {
+        from = undefined;
+      }
+
+      const range = {
+        to,
+        from
+      };
+
+      if (!hasAnimated(this)) {
+        if (props.reverse) [to, from] = [from, to];
+        from = getFluidValue(from);
+
+        if (!is.und(from)) {
+          this._set(from);
+        } else if (!getAnimated(this)) {
+          this._set(to);
+        }
+      }
+
+      return range;
+    }
+
+    _update(_ref, isLoop) {
+      let props = _extends({}, _ref);
+
+      const {
+        key,
+        defaultProps
+      } = this;
+      if (props.default) Object.assign(defaultProps, getDefaultProps(props, (value, prop) => /^on/.test(prop) ? resolveProp(value, key) : value));
+      mergeActiveFn(this, props, 'onProps');
+      sendEvent(this, 'onProps', props, this);
+
+      const range = this._prepareNode(props);
+
+      if (Object.isFrozen(this)) {
+        throw Error('Cannot animate a `SpringValue` object that is frozen. ' + 'Did you forget to pass your component to `animated(...)` before animating its props?');
+      }
+
+      const state = this._state;
+      return scheduleProps(++this._lastCallId, {
+        key,
+        props,
+        defaultProps,
+        state,
+        actions: {
+          pause: () => {
+            if (!isPaused(this)) {
+              setPausedBit(this, true);
+              flushCalls(state.pauseQueue);
+              sendEvent(this, 'onPause', getFinishedResult(this, checkFinished(this, this.animation.to)), this);
+            }
+          },
+          resume: () => {
+            if (isPaused(this)) {
+              setPausedBit(this, false);
+
+              if (isAnimating(this)) {
+                this._resume();
+              }
+
+              flushCalls(state.resumeQueue);
+              sendEvent(this, 'onResume', getFinishedResult(this, checkFinished(this, this.animation.to)), this);
+            }
+          },
+          start: this._merge.bind(this, range)
+        }
+      }).then(result => {
+        if (props.loop && result.finished && !(isLoop && result.noop)) {
+          const nextProps = createLoopUpdate(props);
+
+          if (nextProps) {
+            return this._update(nextProps, true);
+          }
+        }
+
+        return result;
+      });
+    }
+
+    _merge(range, props, resolve) {
+      if (props.cancel) {
+        this.stop(true);
+        return resolve(getCancelledResult(this));
+      }
+
+      const hasToProp = !is.und(range.to);
+      const hasFromProp = !is.und(range.from);
+
+      if (hasToProp || hasFromProp) {
+        if (props.callId > this._lastToId) {
+          this._lastToId = props.callId;
+        } else {
+          return resolve(getCancelledResult(this));
+        }
+      }
+
+      const {
+        key,
+        defaultProps,
+        animation: anim
+      } = this;
+      const {
+        to: prevTo,
+        from: prevFrom
+      } = anim;
+      let {
+        to = prevTo,
+        from = prevFrom
+      } = range;
+
+      if (hasFromProp && !hasToProp && (!props.default || is.und(to))) {
+        to = from;
+      }
+
+      if (props.reverse) [to, from] = [from, to];
+      const hasFromChanged = !isEqual(from, prevFrom);
+
+      if (hasFromChanged) {
+        anim.from = from;
+      }
+
+      from = getFluidValue(from);
+      const hasToChanged = !isEqual(to, prevTo);
+
+      if (hasToChanged) {
+        this._focus(to);
+      }
+
+      const hasAsyncTo = isAsyncTo(props.to);
+      const {
+        config
+      } = anim;
+      const {
+        decay,
+        velocity
+      } = config;
+
+      if (hasToProp || hasFromProp) {
+        config.velocity = 0;
+      }
+
+      if (props.config && !hasAsyncTo) {
+        mergeConfig(config, callProp(props.config, key), props.config !== defaultProps.config ? callProp(defaultProps.config, key) : void 0);
+      }
+
+      let node = getAnimated(this);
+
+      if (!node || is.und(to)) {
+        return resolve(getFinishedResult(this, true));
+      }
+
+      const reset = is.und(props.reset) ? hasFromProp && !props.default : !is.und(from) && matchProp(props.reset, key);
+      const value = reset ? from : this.get();
+      const goal = computeGoal(to);
+      const isAnimatable = is.num(goal) || is.arr(goal) || isAnimatedString(goal);
+      const immediate = !hasAsyncTo && (!isAnimatable || matchProp(defaultProps.immediate || props.immediate, key));
+
+      if (hasToChanged) {
+        const nodeType = getAnimatedType(to);
+
+        if (nodeType !== node.constructor) {
+          if (immediate) {
+            node = this._set(goal);
+          } else throw Error(`Cannot animate between ${node.constructor.name} and ${nodeType.name}, as the "to" prop suggests`);
+        }
+      }
+
+      const goalType = node.constructor;
+      let started = hasFluidValue(to);
+      let finished = false;
+
+      if (!started) {
+        const hasValueChanged = reset || !hasAnimated(this) && hasFromChanged;
+
+        if (hasToChanged || hasValueChanged) {
+          finished = isEqual(computeGoal(value), goal);
+          started = !finished;
+        }
+
+        if (!isEqual(anim.immediate, immediate) && !immediate || !isEqual(config.decay, decay) || !isEqual(config.velocity, velocity)) {
+          started = true;
+        }
+      }
+
+      if (finished && isAnimating(this)) {
+        if (anim.changed && !reset) {
+          started = true;
+        } else if (!started) {
+          this._stop(prevTo);
+        }
+      }
+
+      if (!hasAsyncTo) {
+        if (started || hasFluidValue(prevTo)) {
+          anim.values = node.getPayload();
+          anim.toValues = hasFluidValue(to) ? null : goalType == AnimatedString ? [1] : toArray(goal);
+        }
+
+        if (anim.immediate != immediate) {
+          anim.immediate = immediate;
+
+          if (!immediate && !reset) {
+            this._set(prevTo);
+          }
+        }
+
+        if (started) {
+          const {
+            onRest
+          } = anim;
+          each(ACTIVE_EVENTS, type => mergeActiveFn(this, props, type));
+          const result = getFinishedResult(this, checkFinished(this, prevTo));
+          flushCalls(this._pendingCalls, result);
+
+          this._pendingCalls.add(resolve);
+
+          if (anim.changed) raf.batchedUpdates(() => {
+            anim.changed = !reset;
+            onRest == null ? void 0 : onRest(result, this);
+
+            if (reset) {
+              callProp(defaultProps.onRest, result);
+            } else {
+              anim.onStart == null ? void 0 : anim.onStart(result, this);
+            }
+          });
+        }
+      }
+
+      if (reset) {
+        this._set(value);
+      }
+
+      if (hasAsyncTo) {
+        resolve(runAsync(props.to, props, this._state, this));
+      } else if (started) {
+        this._start();
+      } else if (isAnimating(this) && !hasToChanged) {
+        this._pendingCalls.add(resolve);
+      } else {
+        resolve(getNoopResult(value));
+      }
+    }
+
+    _focus(value) {
+      const anim = this.animation;
+
+      if (value !== anim.to) {
+        if (getFluidObservers(this)) {
+          this._detach();
+        }
+
+        anim.to = value;
+
+        if (getFluidObservers(this)) {
+          this._attach();
+        }
+      }
+    }
+
+    _attach() {
+      let priority = 0;
+      const {
+        to
+      } = this.animation;
+
+      if (hasFluidValue(to)) {
+        addFluidObserver(to, this);
+
+        if (isFrameValue(to)) {
+          priority = to.priority + 1;
+        }
+      }
+
+      this.priority = priority;
+    }
+
+    _detach() {
+      const {
+        to
+      } = this.animation;
+
+      if (hasFluidValue(to)) {
+        removeFluidObserver(to, this);
+      }
+    }
+
+    _set(arg, idle = true) {
+      const value = getFluidValue(arg);
+
+      if (!is.und(value)) {
+        const oldNode = getAnimated(this);
+
+        if (!oldNode || !isEqual(value, oldNode.getValue())) {
+          const nodeType = getAnimatedType(value);
+
+          if (!oldNode || oldNode.constructor != nodeType) {
+            setAnimated(this, nodeType.create(value));
+          } else {
+            oldNode.setValue(value);
+          }
+
+          if (oldNode) {
+            raf.batchedUpdates(() => {
+              this._onChange(value, idle);
+            });
+          }
+        }
+      }
+
+      return getAnimated(this);
+    }
+
+    _onStart() {
+      const anim = this.animation;
+
+      if (!anim.changed) {
+        anim.changed = true;
+        sendEvent(this, 'onStart', getFinishedResult(this, checkFinished(this, anim.to)), this);
+      }
+    }
+
+    _onChange(value, idle) {
+      if (!idle) {
+        this._onStart();
+
+        callProp(this.animation.onChange, value, this);
+      }
+
+      callProp(this.defaultProps.onChange, value, this);
+
+      super._onChange(value, idle);
+    }
+
+    _start() {
+      const anim = this.animation;
+      getAnimated(this).reset(getFluidValue(anim.to));
+
+      if (!anim.immediate) {
+        anim.fromValues = anim.values.map(node => node.lastPosition);
+      }
+
+      if (!isAnimating(this)) {
+        setActiveBit(this, true);
+
+        if (!isPaused(this)) {
+          this._resume();
+        }
+      }
+    }
+
+    _resume() {
+      if (globals.skipAnimation) {
+        this.finish();
+      } else {
+        frameLoop.start(this);
+      }
+    }
+
+    _stop(goal, cancel) {
+      if (isAnimating(this)) {
+        setActiveBit(this, false);
+        const anim = this.animation;
+        each(anim.values, node => {
+          node.done = true;
+        });
+
+        if (anim.toValues) {
+          anim.onChange = anim.onPause = anim.onResume = undefined;
+        }
+
+        callFluidObservers(this, {
+          type: 'idle',
+          parent: this
+        });
+        const result = cancel ? getCancelledResult(this.get()) : getFinishedResult(this.get(), checkFinished(this, goal != null ? goal : anim.to));
+        flushCalls(this._pendingCalls, result);
+
+        if (anim.changed) {
+          anim.changed = false;
+          sendEvent(this, 'onRest', result, this);
+        }
+      }
+    }
+
+  }
+
+  function checkFinished(target, to) {
+    const goal = computeGoal(to);
+    const value = computeGoal(target.get());
+    return isEqual(value, goal);
+  }
+
+  function createLoopUpdate(props, loop = props.loop, to = props.to) {
+    let loopRet = callProp(loop);
+
+    if (loopRet) {
+      const overrides = loopRet !== true && inferTo(loopRet);
+      const reverse = (overrides || props).reverse;
+      const reset = !overrides || overrides.reset;
+      return createUpdate(_extends({}, props, {
+        loop,
+        default: false,
+        pause: undefined,
+        to: !reverse || isAsyncTo(to) ? to : undefined,
+        from: reset ? props.from : undefined,
+        reset
+      }, overrides));
+    }
+  }
+  function createUpdate(props) {
+    const {
+      to,
+      from
+    } = props = inferTo(props);
+    const keys = new Set();
+    if (is.obj(to)) findDefined(to, keys);
+    if (is.obj(from)) findDefined(from, keys);
+    props.keys = keys.size ? Array.from(keys) : null;
+    return props;
+  }
+  function declareUpdate(props) {
+    const update = createUpdate(props);
+
+    if (is.und(update.default)) {
+      update.default = getDefaultProps(update);
+    }
+
+    return update;
+  }
+
+  function findDefined(values, keys) {
+    eachProp(values, (value, key) => value != null && keys.add(key));
+  }
+
+  const ACTIVE_EVENTS = ['onStart', 'onRest', 'onChange', 'onPause', 'onResume'];
+
+  function mergeActiveFn(target, props, type) {
+    target.animation[type] = props[type] !== getDefaultProp(props, type) ? resolveProp(props[type], target.key) : undefined;
+  }
+
+  function sendEvent(target, type, ...args) {
+    var _target$animation$typ, _target$animation, _target$defaultProps$, _target$defaultProps;
+
+    (_target$animation$typ = (_target$animation = target.animation)[type]) == null ? void 0 : _target$animation$typ.call(_target$animation, ...args);
+    (_target$defaultProps$ = (_target$defaultProps = target.defaultProps)[type]) == null ? void 0 : _target$defaultProps$.call(_target$defaultProps, ...args);
+  }
+
+  const BATCHED_EVENTS = ['onStart', 'onChange', 'onRest'];
+  let nextId = 1;
+  class Controller {
+    constructor(props, flush) {
+      this.id = nextId++;
+      this.springs = {};
+      this.queue = [];
+      this.ref = void 0;
+      this._flush = void 0;
+      this._initialProps = void 0;
+      this._lastAsyncId = 0;
+      this._active = new Set();
+      this._changed = new Set();
+      this._started = false;
+      this._item = void 0;
+      this._state = {
+        paused: false,
+        pauseQueue: new Set(),
+        resumeQueue: new Set(),
+        timeouts: new Set()
+      };
+      this._events = {
+        onStart: new Map(),
+        onChange: new Map(),
+        onRest: new Map()
+      };
+      this._onFrame = this._onFrame.bind(this);
+
+      if (flush) {
+        this._flush = flush;
+      }
+
+      if (props) {
+        this.start(_extends({
+          default: true
+        }, props));
+      }
+    }
+
+    get idle() {
+      return !this._state.asyncTo && Object.values(this.springs).every(spring => {
+        return spring.idle && !spring.isDelayed && !spring.isPaused;
+      });
+    }
+
+    get item() {
+      return this._item;
+    }
+
+    set item(item) {
+      this._item = item;
+    }
+
+    get() {
+      const values = {};
+      this.each((spring, key) => values[key] = spring.get());
+      return values;
+    }
+
+    set(values) {
+      for (const key in values) {
+        const value = values[key];
+
+        if (!is.und(value)) {
+          this.springs[key].set(value);
+        }
+      }
+    }
+
+    update(props) {
+      if (props) {
+        this.queue.push(createUpdate(props));
+      }
+
+      return this;
+    }
+
+    start(props) {
+      let {
+        queue
+      } = this;
+
+      if (props) {
+        queue = toArray(props).map(createUpdate);
+      } else {
+        this.queue = [];
+      }
+
+      if (this._flush) {
+        return this._flush(this, queue);
+      }
+
+      prepareKeys(this, queue);
+      return flushUpdateQueue(this, queue);
+    }
+
+    stop(arg, keys) {
+      if (arg !== !!arg) {
+        keys = arg;
+      }
+
+      if (keys) {
+        const springs = this.springs;
+        each(toArray(keys), key => springs[key].stop(!!arg));
+      } else {
+        stopAsync(this._state, this._lastAsyncId);
+        this.each(spring => spring.stop(!!arg));
+      }
+
+      return this;
+    }
+
+    pause(keys) {
+      if (is.und(keys)) {
+        this.start({
+          pause: true
+        });
+      } else {
+        const springs = this.springs;
+        each(toArray(keys), key => springs[key].pause());
+      }
+
+      return this;
+    }
+
+    resume(keys) {
+      if (is.und(keys)) {
+        this.start({
+          pause: false
+        });
+      } else {
+        const springs = this.springs;
+        each(toArray(keys), key => springs[key].resume());
+      }
+
+      return this;
+    }
+
+    each(iterator) {
+      eachProp(this.springs, iterator);
+    }
+
+    _onFrame() {
+      const {
+        onStart,
+        onChange,
+        onRest
+      } = this._events;
+      const active = this._active.size > 0;
+      const changed = this._changed.size > 0;
+
+      if (active && !this._started || changed && !this._started) {
+        this._started = true;
+        flush(onStart, ([onStart, result]) => {
+          result.value = this.get();
+          onStart(result, this, this._item);
+        });
+      }
+
+      const idle = !active && this._started;
+      const values = changed || idle && onRest.size ? this.get() : null;
+
+      if (changed && onChange.size) {
+        flush(onChange, ([onChange, result]) => {
+          result.value = values;
+          onChange(result, this, this._item);
+        });
+      }
+
+      if (idle) {
+        this._started = false;
+        flush(onRest, ([onRest, result]) => {
+          result.value = values;
+          onRest(result, this, this._item);
+        });
+      }
+    }
+
+    eventObserved(event) {
+      if (event.type == 'change') {
+        this._changed.add(event.parent);
+
+        if (!event.idle) {
+          this._active.add(event.parent);
+        }
+      } else if (event.type == 'idle') {
+        this._active.delete(event.parent);
+      } else return;
+
+      raf.onFrame(this._onFrame);
+    }
+
+  }
+  function flushUpdateQueue(ctrl, queue) {
+    return Promise.all(queue.map(props => flushUpdate(ctrl, props))).then(results => getCombinedResult(ctrl, results));
+  }
+  async function flushUpdate(ctrl, props, isLoop) {
+    const {
+      keys,
+      to,
+      from,
+      loop,
+      onRest,
+      onResolve
+    } = props;
+    const defaults = is.obj(props.default) && props.default;
+
+    if (loop) {
+      props.loop = false;
+    }
+
+    if (to === false) props.to = null;
+    if (from === false) props.from = null;
+    const asyncTo = is.arr(to) || is.fun(to) ? to : undefined;
+
+    if (asyncTo) {
+      props.to = undefined;
+      props.onRest = undefined;
+
+      if (defaults) {
+        defaults.onRest = undefined;
+      }
+    } else {
+      each(BATCHED_EVENTS, key => {
+        const handler = props[key];
+
+        if (is.fun(handler)) {
+          const queue = ctrl['_events'][key];
+
+          props[key] = ({
+            finished,
+            cancelled
+          }) => {
+            const result = queue.get(handler);
+
+            if (result) {
+              if (!finished) result.finished = false;
+              if (cancelled) result.cancelled = true;
+            } else {
+              queue.set(handler, {
+                value: null,
+                finished: finished || false,
+                cancelled: cancelled || false
+              });
+            }
+          };
+
+          if (defaults) {
+            defaults[key] = props[key];
+          }
+        }
+      });
+    }
+
+    const state = ctrl['_state'];
+
+    if (props.pause === !state.paused) {
+      state.paused = props.pause;
+      flushCalls(props.pause ? state.pauseQueue : state.resumeQueue);
+    } else if (state.paused) {
+      props.pause = true;
+    }
+
+    const promises = (keys || Object.keys(ctrl.springs)).map(key => ctrl.springs[key].start(props));
+    const cancel = props.cancel === true || getDefaultProp(props, 'cancel') === true;
+
+    if (asyncTo || cancel && state.asyncId) {
+      promises.push(scheduleProps(++ctrl['_lastAsyncId'], {
+        props,
+        state,
+        actions: {
+          pause: noop,
+          resume: noop,
+
+          start(props, resolve) {
+            if (cancel) {
+              stopAsync(state, ctrl['_lastAsyncId']);
+              resolve(getCancelledResult(ctrl));
+            } else {
+              props.onRest = onRest;
+              resolve(runAsync(asyncTo, props, state, ctrl));
+            }
+          }
+
+        }
+      }));
+    }
+
+    if (state.paused) {
+      await new Promise(resume => {
+        state.resumeQueue.add(resume);
+      });
+    }
+
+    const result = getCombinedResult(ctrl, await Promise.all(promises));
+
+    if (loop && result.finished && !(isLoop && result.noop)) {
+      const nextProps = createLoopUpdate(props, loop, to);
+
+      if (nextProps) {
+        prepareKeys(ctrl, [nextProps]);
+        return flushUpdate(ctrl, nextProps, true);
+      }
+    }
+
+    if (onResolve) {
+      raf.batchedUpdates(() => onResolve(result, ctrl, ctrl.item));
+    }
+
+    return result;
+  }
+  function getSprings(ctrl, props) {
+    const springs = _extends({}, ctrl.springs);
+
+    if (props) {
+      each(toArray(props), props => {
+        if (is.und(props.keys)) {
+          props = createUpdate(props);
+        }
+
+        if (!is.obj(props.to)) {
+          props = _extends({}, props, {
+            to: undefined
+          });
+        }
+
+        prepareSprings(springs, props, key => {
+          return createSpring(key);
+        });
+      });
+    }
+
+    setSprings(ctrl, springs);
+    return springs;
+  }
+  function setSprings(ctrl, springs) {
+    eachProp(springs, (spring, key) => {
+      if (!ctrl.springs[key]) {
+        ctrl.springs[key] = spring;
+        addFluidObserver(spring, ctrl);
+      }
+    });
+  }
+
+  function createSpring(key, observer) {
+    const spring = new SpringValue();
+    spring.key = key;
+
+    if (observer) {
+      addFluidObserver(spring, observer);
+    }
+
+    return spring;
+  }
+
+  function prepareSprings(springs, props, create) {
+    if (props.keys) {
+      each(props.keys, key => {
+        const spring = springs[key] || (springs[key] = create(key));
+        spring['_prepareNode'](props);
+      });
+    }
+  }
+
+  function prepareKeys(ctrl, queue) {
+    each(queue, props => {
+      prepareSprings(ctrl.springs, props, key => {
+        return createSpring(key, ctrl);
+      });
+    });
+  }
+
+  function _objectWithoutPropertiesLoose$1(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
+  const _excluded$3 = ["children"];
+  const SpringContext = _ref => {
+    let {
+      children
+    } = _ref,
+        props = _objectWithoutPropertiesLoose$1(_ref, _excluded$3);
+
+    const inherited = React.useContext(ctx);
+    const pause = props.pause || !!inherited.pause,
+          immediate = props.immediate || !!inherited.immediate;
+    props = useMemoOne(() => ({
+      pause,
+      immediate
+    }), [pause, immediate]);
+    const {
+      Provider
+    } = ctx;
+    return React__namespace.createElement(Provider, {
+      value: props
+    }, children);
+  };
+  const ctx = makeContext(SpringContext, {});
+  SpringContext.Provider = ctx.Provider;
+  SpringContext.Consumer = ctx.Consumer;
+
+  function makeContext(target, init) {
+    Object.assign(target, React__namespace.createContext(init));
+    target.Provider._context = target;
+    target.Consumer._context = target;
+    return target;
+  }
+
+  const SpringRef = () => {
+    const current = [];
+
+    const SpringRef = function SpringRef(props) {
+      deprecateDirectCall();
+      const results = [];
+      each(current, (ctrl, i) => {
+        if (is.und(props)) {
+          results.push(ctrl.start());
+        } else {
+          const update = _getProps(props, ctrl, i);
+
+          if (update) {
+            results.push(ctrl.start(update));
+          }
+        }
+      });
+      return results;
+    };
+
+    SpringRef.current = current;
+
+    SpringRef.add = function (ctrl) {
+      if (!current.includes(ctrl)) {
+        current.push(ctrl);
+      }
+    };
+
+    SpringRef.delete = function (ctrl) {
+      const i = current.indexOf(ctrl);
+      if (~i) current.splice(i, 1);
+    };
+
+    SpringRef.pause = function () {
+      each(current, ctrl => ctrl.pause(...arguments));
+      return this;
+    };
+
+    SpringRef.resume = function () {
+      each(current, ctrl => ctrl.resume(...arguments));
+      return this;
+    };
+
+    SpringRef.set = function (values) {
+      each(current, ctrl => ctrl.set(values));
+    };
+
+    SpringRef.start = function (props) {
+      const results = [];
+      each(current, (ctrl, i) => {
+        if (is.und(props)) {
+          results.push(ctrl.start());
+        } else {
+          const update = this._getProps(props, ctrl, i);
+
+          if (update) {
+            results.push(ctrl.start(update));
+          }
+        }
+      });
+      return results;
+    };
+
+    SpringRef.stop = function () {
+      each(current, ctrl => ctrl.stop(...arguments));
+      return this;
+    };
+
+    SpringRef.update = function (props) {
+      each(current, (ctrl, i) => ctrl.update(this._getProps(props, ctrl, i)));
+      return this;
+    };
+
+    const _getProps = function _getProps(arg, ctrl, index) {
+      return is.fun(arg) ? arg(index, ctrl) : arg;
+    };
+
+    SpringRef._getProps = _getProps;
+    return SpringRef;
+  };
+
+  function useSprings(length, props, deps) {
+    const propsFn = is.fun(props) && props;
+    if (propsFn && !deps) deps = [];
+    const ref = React.useMemo(() => propsFn || arguments.length == 3 ? SpringRef() : void 0, []);
+    const layoutId = React.useRef(0);
+    const forceUpdate = useForceUpdate();
+    const state = React.useMemo(() => ({
+      ctrls: [],
+      queue: [],
+
+      flush(ctrl, updates) {
+        const springs = getSprings(ctrl, updates);
+        const canFlushSync = layoutId.current > 0 && !state.queue.length && !Object.keys(springs).some(key => !ctrl.springs[key]);
+        return canFlushSync ? flushUpdateQueue(ctrl, updates) : new Promise(resolve => {
+          setSprings(ctrl, springs);
+          state.queue.push(() => {
+            resolve(flushUpdateQueue(ctrl, updates));
+          });
+          forceUpdate();
+        });
+      }
+
+    }), []);
+    const ctrls = React.useRef([...state.ctrls]);
+    const updates = [];
+    const prevLength = usePrev(length) || 0;
+    React.useMemo(() => {
+      each(ctrls.current.slice(length, prevLength), ctrl => {
+        detachRefs(ctrl, ref);
+        ctrl.stop(true);
+      });
+      ctrls.current.length = length;
+      declareUpdates(prevLength, length);
+    }, [length]);
+    React.useMemo(() => {
+      declareUpdates(0, Math.min(prevLength, length));
+    }, deps);
+
+    function declareUpdates(startIndex, endIndex) {
+      for (let i = startIndex; i < endIndex; i++) {
+        const ctrl = ctrls.current[i] || (ctrls.current[i] = new Controller(null, state.flush));
+        const update = propsFn ? propsFn(i, ctrl) : props[i];
+
+        if (update) {
+          updates[i] = declareUpdate(update);
+        }
+      }
+    }
+
+    const springs = ctrls.current.map((ctrl, i) => getSprings(ctrl, updates[i]));
+    const context = React.useContext(SpringContext);
+    const prevContext = usePrev(context);
+    const hasContext = context !== prevContext && hasProps(context);
+    useIsomorphicLayoutEffect(() => {
+      layoutId.current++;
+      state.ctrls = ctrls.current;
+      const {
+        queue
+      } = state;
+
+      if (queue.length) {
+        state.queue = [];
+        each(queue, cb => cb());
+      }
+
+      each(ctrls.current, (ctrl, i) => {
+        ref == null ? void 0 : ref.add(ctrl);
+
+        if (hasContext) {
+          ctrl.start({
+            default: context
+          });
+        }
+
+        const update = updates[i];
+
+        if (update) {
+          replaceRef(ctrl, update.ref);
+
+          if (ctrl.ref) {
+            ctrl.queue.push(update);
+          } else {
+            ctrl.start(update);
+          }
+        }
+      });
+    });
+    useOnce(() => () => {
+      each(state.ctrls, ctrl => ctrl.stop(true));
+    });
+    const values = springs.map(x => _extends({}, x));
+    return ref ? [values, ref] : values;
+  }
+
+  function useSpring(props, deps) {
+    const isFn = is.fun(props);
+    const [[values], ref] = useSprings(1, isFn ? props : [props], isFn ? deps || [] : deps);
+    return isFn || arguments.length == 2 ? [values, ref] : values;
+  }
+
+  let TransitionPhase;
+
+  (function (TransitionPhase) {
+    TransitionPhase["MOUNT"] = "mount";
+    TransitionPhase["ENTER"] = "enter";
+    TransitionPhase["UPDATE"] = "update";
+    TransitionPhase["LEAVE"] = "leave";
+  })(TransitionPhase || (TransitionPhase = {}));
+
+  class Interpolation extends FrameValue {
+    constructor(source, args) {
+      super();
+      this.key = void 0;
+      this.idle = true;
+      this.calc = void 0;
+      this._active = new Set();
+      this.source = source;
+      this.calc = createInterpolator(...args);
+
+      const value = this._get();
+
+      const nodeType = getAnimatedType(value);
+      setAnimated(this, nodeType.create(value));
+    }
+
+    advance(_dt) {
+      const value = this._get();
+
+      const oldValue = this.get();
+
+      if (!isEqual(value, oldValue)) {
+        getAnimated(this).setValue(value);
+
+        this._onChange(value, this.idle);
+      }
+
+      if (!this.idle && checkIdle(this._active)) {
+        becomeIdle(this);
+      }
+    }
+
+    _get() {
+      const inputs = is.arr(this.source) ? this.source.map(getFluidValue) : toArray(getFluidValue(this.source));
+      return this.calc(...inputs);
+    }
+
+    _start() {
+      if (this.idle && !checkIdle(this._active)) {
+        this.idle = false;
+        each(getPayload(this), node => {
+          node.done = false;
+        });
+
+        if (globals.skipAnimation) {
+          raf.batchedUpdates(() => this.advance());
+          becomeIdle(this);
+        } else {
+          frameLoop.start(this);
+        }
+      }
+    }
+
+    _attach() {
+      let priority = 1;
+      each(toArray(this.source), source => {
+        if (hasFluidValue(source)) {
+          addFluidObserver(source, this);
+        }
+
+        if (isFrameValue(source)) {
+          if (!source.idle) {
+            this._active.add(source);
+          }
+
+          priority = Math.max(priority, source.priority + 1);
+        }
+      });
+      this.priority = priority;
+
+      this._start();
+    }
+
+    _detach() {
+      each(toArray(this.source), source => {
+        if (hasFluidValue(source)) {
+          removeFluidObserver(source, this);
+        }
+      });
+
+      this._active.clear();
+
+      becomeIdle(this);
+    }
+
+    eventObserved(event) {
+      if (event.type == 'change') {
+        if (event.idle) {
+          this.advance();
+        } else {
+          this._active.add(event.parent);
+
+          this._start();
+        }
+      } else if (event.type == 'idle') {
+        this._active.delete(event.parent);
+      } else if (event.type == 'priority') {
+        this.priority = toArray(this.source).reduce((highest, parent) => Math.max(highest, (isFrameValue(parent) ? parent.priority : 0) + 1), 0);
+      }
+    }
+
+  }
+
+  function isIdle(source) {
+    return source.idle !== false;
+  }
+
+  function checkIdle(active) {
+    return !active.size || Array.from(active).every(isIdle);
+  }
+
+  function becomeIdle(self) {
+    if (!self.idle) {
+      self.idle = true;
+      each(getPayload(self), node => {
+        node.done = true;
+      });
+      callFluidObservers(self, {
+        type: 'idle',
+        parent: self
+      });
+    }
+  }
+
+  globals.assign({
+    createStringInterpolator,
+    to: (source, args) => new Interpolation(source, args)
+  });
+
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+
+    return target;
+  }
+
+  const _excluded$2 = ["style", "children", "scrollTop", "scrollLeft"];
+  const isCustomPropRE = /^--/;
+
+  function dangerousStyleValue(name, value) {
+    if (value == null || typeof value === 'boolean' || value === '') return '';
+    if (typeof value === 'number' && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) return value + 'px';
+    return ('' + value).trim();
+  }
+
+  const attributeCache = {};
+  function applyAnimatedValues(instance, props) {
+    if (!instance.nodeType || !instance.setAttribute) {
+      return false;
+    }
+
+    const isFilterElement = instance.nodeName === 'filter' || instance.parentNode && instance.parentNode.nodeName === 'filter';
+
+    const _ref = props,
+          {
+      style,
+      children,
+      scrollTop,
+      scrollLeft
+    } = _ref,
+          attributes = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+    const values = Object.values(attributes);
+    const names = Object.keys(attributes).map(name => isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, n => '-' + n.toLowerCase())));
+
+    if (children !== void 0) {
+      instance.textContent = children;
+    }
+
+    for (let name in style) {
+      if (style.hasOwnProperty(name)) {
+        const value = dangerousStyleValue(name, style[name]);
+
+        if (isCustomPropRE.test(name)) {
+          instance.style.setProperty(name, value);
+        } else {
+          instance.style[name] = value;
+        }
+      }
+    }
+
+    names.forEach((name, i) => {
+      instance.setAttribute(name, values[i]);
+    });
+
+    if (scrollTop !== void 0) {
+      instance.scrollTop = scrollTop;
+    }
+
+    if (scrollLeft !== void 0) {
+      instance.scrollLeft = scrollLeft;
+    }
+  }
+  let isUnitlessNumber = {
+    animationIterationCount: true,
+    borderImageOutset: true,
+    borderImageSlice: true,
+    borderImageWidth: true,
+    boxFlex: true,
+    boxFlexGroup: true,
+    boxOrdinalGroup: true,
+    columnCount: true,
+    columns: true,
+    flex: true,
+    flexGrow: true,
+    flexPositive: true,
+    flexShrink: true,
+    flexNegative: true,
+    flexOrder: true,
+    gridRow: true,
+    gridRowEnd: true,
+    gridRowSpan: true,
+    gridRowStart: true,
+    gridColumn: true,
+    gridColumnEnd: true,
+    gridColumnSpan: true,
+    gridColumnStart: true,
+    fontWeight: true,
+    lineClamp: true,
+    lineHeight: true,
+    opacity: true,
+    order: true,
+    orphans: true,
+    tabSize: true,
+    widows: true,
+    zIndex: true,
+    zoom: true,
+    fillOpacity: true,
+    floodOpacity: true,
+    stopOpacity: true,
+    strokeDasharray: true,
+    strokeDashoffset: true,
+    strokeMiterlimit: true,
+    strokeOpacity: true,
+    strokeWidth: true
+  };
+
+  const prefixKey = (prefix, key) => prefix + key.charAt(0).toUpperCase() + key.substring(1);
+
+  const prefixes = ['Webkit', 'Ms', 'Moz', 'O'];
+  isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
+    prefixes.forEach(prefix => acc[prefixKey(prefix, prop)] = acc[prop]);
+    return acc;
+  }, isUnitlessNumber);
+
+  const _excluded$1 = ["x", "y", "z"];
+  const domTransforms = /^(matrix|translate|scale|rotate|skew)/;
+  const pxTransforms = /^(translate)/;
+  const degTransforms = /^(rotate|skew)/;
+
+  const addUnit = (value, unit) => is.num(value) && value !== 0 ? value + unit : value;
+
+  const isValueIdentity = (value, id) => is.arr(value) ? value.every(v => isValueIdentity(v, id)) : is.num(value) ? value === id : parseFloat(value) === id;
+
+  class AnimatedStyle extends AnimatedObject {
+    constructor(_ref) {
+      let {
+        x,
+        y,
+        z
+      } = _ref,
+          style = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+      const inputs = [];
+      const transforms = [];
+
+      if (x || y || z) {
+        inputs.push([x || 0, y || 0, z || 0]);
+        transforms.push(xyz => [`translate3d(${xyz.map(v => addUnit(v, 'px')).join(',')})`, isValueIdentity(xyz, 0)]);
+      }
+
+      eachProp(style, (value, key) => {
+        if (key === 'transform') {
+          inputs.push([value || '']);
+          transforms.push(transform => [transform, transform === '']);
+        } else if (domTransforms.test(key)) {
+          delete style[key];
+          if (is.und(value)) return;
+          const unit = pxTransforms.test(key) ? 'px' : degTransforms.test(key) ? 'deg' : '';
+          inputs.push(toArray(value));
+          transforms.push(key === 'rotate3d' ? ([x, y, z, deg]) => [`rotate3d(${x},${y},${z},${addUnit(deg, unit)})`, isValueIdentity(deg, 0)] : input => [`${key}(${input.map(v => addUnit(v, unit)).join(',')})`, isValueIdentity(input, key.startsWith('scale') ? 1 : 0)]);
+        }
+      });
+
+      if (inputs.length) {
+        style.transform = new FluidTransform(inputs, transforms);
+      }
+
+      super(style);
+    }
+
+  }
+
+  class FluidTransform extends FluidValue {
+    constructor(inputs, transforms) {
+      super();
+      this._value = null;
+      this.inputs = inputs;
+      this.transforms = transforms;
+    }
+
+    get() {
+      return this._value || (this._value = this._get());
+    }
+
+    _get() {
+      let transform = '';
+      let identity = true;
+      each(this.inputs, (input, i) => {
+        const arg1 = getFluidValue(input[0]);
+        const [t, id] = this.transforms[i](is.arr(arg1) ? arg1 : input.map(getFluidValue));
+        transform += ' ' + t;
+        identity = identity && id;
+      });
+      return identity ? 'none' : transform;
+    }
+
+    observerAdded(count) {
+      if (count == 1) each(this.inputs, input => each(input, value => hasFluidValue(value) && addFluidObserver(value, this)));
+    }
+
+    observerRemoved(count) {
+      if (count == 0) each(this.inputs, input => each(input, value => hasFluidValue(value) && removeFluidObserver(value, this)));
+    }
+
+    eventObserved(event) {
+      if (event.type == 'change') {
+        this._value = null;
+      }
+
+      callFluidObservers(this, event);
+    }
+
+  }
+
+  const primitives = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', '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', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', 'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
+
+  const _excluded = ["scrollTop", "scrollLeft"];
+  globals.assign({
+    batchedUpdates: reactDom.unstable_batchedUpdates,
+    createStringInterpolator,
+    colors
+  });
+  createHost(primitives, {
+    applyAnimatedValues,
+    createAnimatedStyle: style => new AnimatedStyle(style),
+    getComponentProps: _ref => {
+      let props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+      return props;
+    }
+  });
+
+  const eventLabel = 'RSC::Event';
+  function useEventsModule() {
+      const targetEvent = React.useRef(null);
+      React.useEffect(() => {
+          targetEvent.current = document.createElement('div');
+      }, []);
+      function useListenToCustomEvent(eventHandler) {
+          React.useEffect(() => {
+              function handleEvent(event) {
+                  eventHandler(event.detail);
+              }
+              if (targetEvent.current) {
+                  // @ts-ignore
+                  targetEvent.current.addEventListener(eventLabel, handleEvent, false);
+                  return () => {
+                      var _a;
+                      // @ts-ignore
+                      (_a = targetEvent.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(eventLabel, handleEvent, false);
+                  };
+              }
+          }, []);
+      }
+      function emitEvent(event) {
+          if (targetEvent.current) {
+              const newEvent = new CustomEvent(eventLabel, {
+                  detail: event,
+              });
+              targetEvent.current.dispatchEvent(newEvent);
+          }
+      }
+      return {
+          useListenToCustomEvent,
+          emitEvent,
+      };
+  }
+
+  function useFullscreenModule({ mainCarouselWrapperRef, emitEvent, handleResize, }) {
+      const isFullscreen = React.useRef(false);
+      React.useEffect(() => {
+          function handleFullscreenChange() {
+              if (document.fullscreenElement) {
+                  setIsFullscreen(true);
+                  emitEvent({
+                      eventName: 'onFullscreenChange',
+                      isFullscreen: true,
+                  });
+                  handleResize && handleResize();
+              }
+              if (!document.fullscreenElement) {
+                  setIsFullscreen(false);
+                  emitEvent({
+                      eventName: 'onFullscreenChange',
+                      isFullscreen: false,
+                  });
+                  handleResize && handleResize();
+              }
+          }
+          if (screenfull.isEnabled) {
+              screenfull.on('change', handleFullscreenChange);
+              return () => {
+                  if (screenfull.isEnabled) {
+                      screenfull.off('change', handleFullscreenChange);
+                  }
+              };
+          }
+      }, []);
+      function setIsFullscreen(_isFullscreen) {
+          isFullscreen.current = _isFullscreen;
+      }
+      function getIsFullscreen() {
+          return isFullscreen.current;
+      }
+      function enterFullscreen(elementRef) {
+          if (screenfull.isEnabled) {
+              screenfull.request((elementRef || mainCarouselWrapperRef.current));
+          }
+      }
+      function exitFullscreen() {
+          screenfull.isEnabled && screenfull.exit();
+      }
+      return {
+          enterFullscreen,
+          exitFullscreen,
+          getIsFullscreen,
+      };
+  }
+
+  function isInViewport(el) {
+      const rect = el.getBoundingClientRect();
+      return (rect.top >= 0 &&
+          rect.left >= 0 &&
+          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+          rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+  }
+  function useThumbsModule({ thumbsSlideAxis = 'x', withThumbs = false, prepareThumbsData, items, }) {
+      const wrapperRef = React.useRef(null);
+      const [spring, setSpring] = useSpring(() => ({
+          val: 0,
+      }));
+      function getTotalScrollValue() {
+          var _a;
+          return Math.round(Number((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+              wrapperRef.current.getBoundingClientRect()[thumbsSlideAxis === 'x' ? 'width' : 'height']);
+      }
+      function handleScroll(activeItem) {
+          var _a, _b;
+          function getThumbNode() {
+              if (wrapperRef.current) {
+                  return wrapperRef.current.querySelector(`#thumb-item-${items[activeItem].id}`);
+              }
+              return null;
+          }
+          const thumbNode = getThumbNode();
+          if (thumbNode && wrapperRef.current) {
+              if (!isInViewport(thumbNode)) {
+                  const offset = thumbNode.offsetLeft;
+                  const val = offset > getTotalScrollValue() ? getTotalScrollValue() : offset;
+                  setSpring.start({
+                      from: {
+                          val: (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop']) !== null && _b !== void 0 ? _b : 0,
+                      },
+                      to: {
+                          val,
+                      },
+                      onChange: ({ value }) => {
+                          if (wrapperRef.current) {
+                              wrapperRef.current[thumbsSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] =
+                                  Math.abs(value.val);
+                          }
+                      },
+                  });
+              }
+          }
+      }
+      function handlePrepareThumbsData() {
+          function getPreparedItems(_items) {
+              return _items.map(i => ({
+                  id: i.id,
+                  renderThumb: i.renderThumb,
+              }));
+          }
+          if (prepareThumbsData) {
+              return prepareThumbsData(getPreparedItems(items));
+          }
+          return getPreparedItems(items);
+      }
+      const thumbsFragment = withThumbs ? (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-thumbs-wrapper", ref: wrapperRef, onWheel: () => spring.val.stop(), style: Object.assign({ display: 'flex', flex: '1', position: 'relative', width: '100%', height: '100%', flexDirection: thumbsSlideAxis === 'x' ? 'row' : 'column' }, (thumbsSlideAxis === 'x'
+              ? { overflowX: 'auto' }
+              : {
+                  overflowY: 'auto',
+                  maxHeight: '100%',
+              })) }, { children: handlePrepareThumbsData().map(({ id, renderThumb }) => {
+              const thumbId = `thumb-item-${id}`;
+              return (jsxRuntime.jsx("div", Object.assign({ id: thumbId, className: "thumb-item" }, { children: renderThumb }), thumbId));
+          }) }))) : null;
+      return {
+          thumbsFragment,
+          handleScroll,
+      };
+  }
+
+  function useSpringCarousel({ items, init = true, withThumbs, thumbsSlideAxis = 'x', itemsPerSlide = 1, slideType = 'fixed', gutter = 0, withLoop = false, startEndGutter = 0, carouselSlideAxis = 'x', disableGestures = false, draggingSlideTreshold: _draggingSlideTreshold, slideWhenThresholdIsReached = false, freeScroll, enableFreeScrollDrag, initialStartingPosition, prepareThumbsData, initialActiveItem = 0, }) {
+      const prevWindowWidth = React.useRef(0);
+      const draggingSlideTreshold = React.useRef(_draggingSlideTreshold !== null && _draggingSlideTreshold !== void 0 ? _draggingSlideTreshold : 0);
+      const slideActionType = React.useRef('initial');
+      const slideModeType = React.useRef('initial');
+      const prevSlidedValue = React.useRef(0);
+      const [spring, setSpring] = useSpring(() => ({
+          val: 0,
+          pause: !init,
+          onChange({ value }) {
+              if (freeScroll && mainCarouselWrapperRef.current) {
+                  setStartEndItemReachedOnFreeScroll();
+                  if (carouselSlideAxis === 'x') {
+                      mainCarouselWrapperRef.current.scrollLeft = Math.abs(value.val);
+                  }
+                  else {
+                      mainCarouselWrapperRef.current.scrollTop = Math.abs(value.val);
+                  }
+              }
+              else if (carouselTrackWrapperRef.current) {
+                  if (carouselSlideAxis === 'x') {
+                      carouselTrackWrapperRef.current.style.transform = `translate3d(${value.val}px, 0px,0px)`;
+                  }
+                  else {
+                      carouselTrackWrapperRef.current.style.transform = `translate3d(0px,${value.val}px,0px)`;
+                  }
+              }
+          },
+      }));
+      const activeItem = React.useRef(initialActiveItem);
+      const firstItemReached = React.useRef(initialActiveItem === 0);
+      const lastItemReached = React.useRef(false);
+      const mainCarouselWrapperRef = React.useRef(null);
+      const carouselTrackWrapperRef = React.useRef(null);
+      const getItems = React.useCallback(() => {
+          if (withLoop) {
+              return [
+                  ...items.map(i => (Object.assign(Object.assign({}, i), { id: `prev-repeated-item-${i.id}` }))),
+                  ...items,
+                  ...items.map(i => (Object.assign(Object.assign({}, i), { id: `next-repeated-item-${i.id}` }))),
+              ];
+          }
+          return [...items];
+      }, [items, withLoop]);
+      const internalItems = getItems();
+      const { emitEvent, useListenToCustomEvent } = useEventsModule();
+      const { thumbsFragment, handleScroll } = useThumbsModule({
+          withThumbs: !!withThumbs,
+          thumbsSlideAxis,
+          prepareThumbsData,
+          items: items,
+      });
+      const { enterFullscreen, exitFullscreen, getIsFullscreen } = useFullscreenModule({
+          mainCarouselWrapperRef,
+          emitEvent,
+          handleResize: () => adjustCarouselWrapperPosition(),
+      });
+      function getItemStyles() {
+          if (slideType === 'fixed' && !freeScroll) {
+              return {
+                  marginRight: `${gutter}px`,
+                  flex: `1 0 calc(100% / ${itemsPerSlide} - ${(gutter * (itemsPerSlide - 1)) / itemsPerSlide}px)`,
+              };
+          }
+          return Object.assign({ marginRight: `${gutter}px` });
+      }
+      function getSlideValue() {
+          var _a;
+          const carouselItem = (_a = mainCarouselWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.use-spring-carousel-item');
+          if (!carouselItem) {
+              throw Error('No carousel items available!');
+          }
+          return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
+      }
+      function slideToItem({ from, to, nextActiveItem, immediate = false, slideMode, }) {
+          slideModeType.current = slideMode;
+          if (typeof nextActiveItem === 'number') {
+              if (!freeScroll) {
+                  activeItem.current = nextActiveItem;
+              }
+              emitEvent({
+                  eventName: 'onSlideStartChange',
+                  slideActionType: slideActionType.current,
+                  slideMode: slideModeType.current,
+                  nextItem: {
+                      startReached: firstItemReached.current,
+                      endReached: lastItemReached.current,
+                      index: freeScroll ? -1 : activeItem.current,
+                      id: freeScroll ? '' : items[activeItem.current].id,
+                  },
+              });
+          }
+          prevSlidedValue.current = to;
+          setSpring.start({
+              immediate,
+              from: {
+                  val: from,
+              },
+              to: {
+                  val: to,
+              },
+              config: Object.assign(Object.assign({}, config.default), { velocity: spring.val.velocity }),
+              onRest(value) {
+                  if (!immediate && value.finished) {
+                      emitEvent({
+                          eventName: 'onSlideChange',
+                          slideActionType: slideActionType.current,
+                          slideMode: slideModeType.current,
+                          currentItem: {
+                              startReached: firstItemReached.current,
+                              endReached: lastItemReached.current,
+                              index: freeScroll ? -1 : activeItem.current,
+                              id: freeScroll ? '' : items[activeItem.current].id,
+                          },
+                      });
+                  }
+              },
+          });
+          if (withThumbs && !immediate) {
+              handleScroll(activeItem.current);
+          }
+      }
+      function getTotalScrollValue() {
+          var _a;
+          if (withLoop) {
+              return getSlideValue() * items.length;
+          }
+          return Math.round(Number((_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a[carouselSlideAxis === 'x' ? 'scrollWidth' : 'scrollHeight']) -
+              carouselTrackWrapperRef.current.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height']);
+      }
+      function getAnimatedWrapperStyles() {
+          const percentValue = `calc(100% - ${startEndGutter * 2}px)`;
+          return {
+              width: carouselSlideAxis === 'x' ? percentValue : '100%',
+              height: carouselSlideAxis === 'y' ? percentValue : '100%',
+          };
+      }
+      function getCarouselItemWidth() {
+          var _a;
+          const carouselItem = (_a = carouselTrackWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.use-spring-carousel-item');
+          if (!carouselItem) {
+              throw Error('No carousel items available!');
+          }
+          return (carouselItem.getBoundingClientRect()[carouselSlideAxis === 'x' ? 'width' : 'height'] + gutter);
+      }
+      function adjustCarouselWrapperPosition() {
+          const positionProperty = carouselSlideAxis === 'x' ? 'left' : 'top';
+          function setPosition(v) {
+              const ref = carouselTrackWrapperRef.current;
+              if (!ref)
+                  return;
+              if (withLoop) {
+                  ref.style.top = '0px';
+                  ref.style.left = '0px';
+                  ref.style[positionProperty] = `-${v - startEndGutter}px`;
+              }
+              else {
+                  ref.style.left = '0px';
+                  ref.style.top = '0px';
+              }
+          }
+          const currentFromValue = Math.abs(getFromValue());
+          if (currentFromValue < getTotalScrollValue() && lastItemReached.current) {
+              lastItemReached.current = false;
+          }
+          if (currentFromValue > getTotalScrollValue()) {
+              const val = -getTotalScrollValue();
+              lastItemReached.current = true;
+              prevSlidedValue.current = val;
+              setSpring.start({
+                  immediate: true,
+                  val,
+              });
+              return;
+          }
+          if (initialStartingPosition === 'center') {
+              setPosition(getCarouselItemWidth() * items.length -
+                  getSlideValue() * Math.round((itemsPerSlide - 1) / 2));
+          }
+          else if (initialStartingPosition === 'end') {
+              setPosition(getCarouselItemWidth() * items.length -
+                  getSlideValue() * Math.round(itemsPerSlide - 1));
+          }
+          else {
+              setPosition(getCarouselItemWidth() * items.length);
+          }
+          if (!freeScroll && slideType === 'fixed') {
+              const val = -(getSlideValue() * activeItem.current);
+              prevSlidedValue.current = val;
+              setSpring.start({
+                  immediate: true,
+                  val,
+              });
+          }
+      }
+      function getFromValue() {
+          if (freeScroll && mainCarouselWrapperRef.current) {
+              return mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
+          }
+          return spring.val.get();
+      }
+      function getToValue(type, index) {
+          if (freeScroll && type === 'next') {
+              const next = prevSlidedValue.current + getSlideValue();
+              if (next > getTotalScrollValue()) {
+                  return getTotalScrollValue();
+              }
+              return next;
+          }
+          if (freeScroll && type === 'prev') {
+              const next = prevSlidedValue.current - getSlideValue();
+              if (next < 0) {
+                  return 0;
+              }
+              return next;
+          }
+          if (type === 'next') {
+              if (index) {
+                  return -(index * getSlideValue());
+              }
+              return prevSlidedValue.current - getSlideValue();
+          }
+          if (index) {
+              return -(index * getSlideValue());
+          }
+          return prevSlidedValue.current + getSlideValue();
+      }
+      function slideToPrevItem(type = 'click', index) {
+          if (!init || (firstItemReached.current && !withLoop))
+              return;
+          slideActionType.current = 'prev';
+          lastItemReached.current = false;
+          const nextItem = index || activeItem.current - 1;
+          if (!withLoop) {
+              const nextItemWillExceed = getToValue('prev', index) + getSlideValue() / 3 > 0;
+              if (firstItemReached.current)
+                  return;
+              if (nextItemWillExceed) {
+                  firstItemReached.current = true;
+                  lastItemReached.current = false;
+                  slideToItem({
+                      slideMode: type,
+                      from: getFromValue(),
+                      to: 0,
+                      nextActiveItem: 0,
+                  });
+                  return;
+              }
+          }
+          if (withLoop && firstItemReached.current) {
+              firstItemReached.current = false;
+              lastItemReached.current = true;
+              slideToItem({
+                  slideMode: type,
+                  from: getFromValue() - getSlideValue() * items.length,
+                  to: -(getSlideValue() * items.length) + getSlideValue(),
+                  nextActiveItem: items.length - 1,
+              });
+              return;
+          }
+          if (nextItem === 0) {
+              firstItemReached.current = true;
+          }
+          if (nextItem === items.length - 1 || nextItem === -1) {
+              lastItemReached.current = true;
+          }
+          slideToItem({
+              slideMode: type,
+              from: getFromValue(),
+              to: getToValue('prev', index),
+              nextActiveItem: nextItem,
+          });
+      }
+      function slideToNextItem(type = 'click', index) {
+          if (!init || (lastItemReached.current && !withLoop))
+              return;
+          slideActionType.current = 'next';
+          firstItemReached.current = false;
+          const nextItem = index || activeItem.current + 1;
+          if (!withLoop) {
+              const nextItemWillExceed = Math.abs(getToValue('next', index)) > getTotalScrollValue() - getSlideValue() / 3;
+              if (lastItemReached.current)
+                  return;
+              if (nextItemWillExceed) {
+                  firstItemReached.current = false;
+                  lastItemReached.current = true;
+                  slideToItem({
+                      slideMode: type,
+                      from: getFromValue(),
+                      to: -getTotalScrollValue(),
+                      nextActiveItem: nextItem,
+                  });
+                  return;
+              }
+          }
+          if (withLoop && lastItemReached.current) {
+              lastItemReached.current = false;
+              firstItemReached.current = true;
+              slideToItem({
+                  slideMode: type,
+                  from: getFromValue() + getSlideValue() * items.length,
+                  to: 0,
+                  nextActiveItem: 0,
+              });
+              return;
+          }
+          if (nextItem === 0) {
+              firstItemReached.current = true;
+          }
+          if (nextItem === items.length - 1) {
+              lastItemReached.current = true;
+          }
+          slideToItem({
+              slideMode: type,
+              from: getFromValue(),
+              to: getToValue('next', index),
+              nextActiveItem: nextItem,
+          });
+      }
+      React.useEffect(() => {
+          prevWindowWidth.current = window.innerWidth;
+      }, []);
+      React.useEffect(() => {
+          adjustCarouselWrapperPosition();
+      }, [
+          initialStartingPosition,
+          itemsPerSlide,
+          withLoop,
+          startEndGutter,
+          gutter,
+          freeScroll,
+          slideType,
+          init,
+      ]);
+      React.useLayoutEffect(() => {
+          /**
+           * Set initial track position
+           */
+          if (carouselTrackWrapperRef.current) {
+              adjustCarouselWrapperPosition();
+          }
+      }, []);
+      React.useEffect(() => {
+          if (_draggingSlideTreshold) {
+              draggingSlideTreshold.current = _draggingSlideTreshold;
+          }
+          else {
+              draggingSlideTreshold.current = Math.floor(getSlideValue() / 2 / 2);
+          }
+      }, [_draggingSlideTreshold]);
+      React.useEffect(() => {
+          function handleResize() {
+              if (window.innerWidth === prevWindowWidth.current)
+                  return;
+              prevWindowWidth.current = window.innerWidth;
+              adjustCarouselWrapperPosition();
+          }
+          window.addEventListener('resize', handleResize);
+          return () => {
+              window.removeEventListener('resize', handleResize);
+          };
+      }, []);
+      const bindDrag = react.useDrag(state => {
+          const isDragging = state.dragging;
+          const movement = state.offset[carouselSlideAxis === 'x' ? 0 : 1];
+          const currentMovement = state.movement[carouselSlideAxis === 'x' ? 0 : 1];
+          const direction = state.direction[carouselSlideAxis === 'x' ? 0 : 1];
+          const prevItemTreshold = currentMovement > draggingSlideTreshold.current;
+          const nextItemTreshold = currentMovement < -draggingSlideTreshold.current;
+          if (isDragging) {
+              if (direction > 0) {
+                  slideActionType.current = 'prev';
+              }
+              else {
+                  slideActionType.current = 'next';
+              }
+              emitEvent(Object.assign(Object.assign({}, state), { eventName: 'onDrag', slideActionType: slideActionType.current }));
+              if (freeScroll) {
+                  if (slideActionType.current === 'prev' && movement > 0) {
+                      state.cancel();
+                      setSpring.start({
+                          from: {
+                              val: getFromValue(),
+                          },
+                          to: {
+                              val: 0,
+                          },
+                          config: {
+                              velocity: state.velocity,
+                              friction: 50,
+                              tension: 1000,
+                          },
+                      });
+                      return;
+                  }
+                  setSpring.start({
+                      from: {
+                          val: getFromValue(),
+                      },
+                      to: {
+                          val: -movement,
+                      },
+                      config: {
+                          velocity: state.velocity,
+                          friction: 50,
+                          tension: 1000,
+                      },
+                  });
+                  return;
+              }
+              setSpring.start({
+                  val: movement,
+                  config: {
+                      velocity: state.velocity,
+                      friction: 50,
+                      tension: 1000,
+                  },
+              });
+              if (slideWhenThresholdIsReached && nextItemTreshold) {
+                  slideToNextItem('drag');
+                  state.cancel();
+              }
+              else if (slideWhenThresholdIsReached && prevItemTreshold) {
+                  slideToPrevItem('drag');
+                  state.cancel();
+              }
+              return;
+          }
+          if (state.last && !state.canceled && freeScroll) {
+              if (slideActionType.current === 'prev') {
+                  slideToPrevItem('drag');
+              }
+              if (slideActionType.current === 'next') {
+                  slideToNextItem('drag');
+              }
+          }
+          if (state.last && !state.canceled && !freeScroll) {
+              if (nextItemTreshold) {
+                  if (!withLoop && lastItemReached.current) {
+                      setSpring.start({
+                          val: -getTotalScrollValue(),
+                          config: Object.assign(Object.assign({}, config.default), { velocity: state.velocity }),
+                      });
+                  }
+                  else {
+                      slideToNextItem('drag');
+                  }
+              }
+              else if (prevItemTreshold) {
+                  if (!withLoop && firstItemReached.current) {
+                      setSpring.start({
+                          val: 0,
+                          config: Object.assign(Object.assign({}, config.default), { velocity: state.velocity }),
+                      });
+                  }
+                  else {
+                      slideToPrevItem('drag');
+                  }
+              }
+              else {
+                  setSpring.start({
+                      val: prevSlidedValue.current,
+                      config: Object.assign(Object.assign({}, config.default), { velocity: state.velocity }),
+                  });
+              }
+          }
+      }, {
+          enabled: (init && !disableGestures && !freeScroll) ||
+              (!!freeScroll && !!enableFreeScrollDrag),
+          axis: carouselSlideAxis,
+          from: () => {
+              if (freeScroll && mainCarouselWrapperRef.current) {
+                  return [
+                      -mainCarouselWrapperRef.current.scrollLeft,
+                      -mainCarouselWrapperRef.current.scrollTop,
+                  ];
+              }
+              if (carouselSlideAxis === 'x') {
+                  return [spring.val.get(), spring.val.get()];
+              }
+              return [spring.val.get(), spring.val.get()];
+          },
+      });
+      function getWrapperOverflowStyles() {
+          if (freeScroll) {
+              if (carouselSlideAxis === 'x') {
+                  return {
+                      overflowX: 'auto',
+                  };
+              }
+              return {
+                  overflowY: 'auto',
+              };
+          }
+          return {};
+      }
+      function setStartEndItemReachedOnFreeScroll() {
+          if (mainCarouselWrapperRef.current) {
+              prevSlidedValue.current =
+                  mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'];
+              if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] === 0) {
+                  firstItemReached.current = true;
+                  lastItemReached.current = false;
+              }
+              if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] > 0 &&
+                  mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] < getTotalScrollValue()) {
+                  firstItemReached.current = false;
+                  lastItemReached.current = false;
+              }
+              if (mainCarouselWrapperRef.current[carouselSlideAxis === 'x' ? 'scrollLeft' : 'scrollTop'] === getTotalScrollValue()) {
+                  firstItemReached.current = false;
+                  lastItemReached.current = true;
+              }
+          }
+      }
+      function getScrollHandlers() {
+          if (freeScroll) {
+              return {
+                  onWheel() {
+                      spring.val.stop();
+                      setStartEndItemReachedOnFreeScroll();
+                  },
+              };
+          }
+          return {};
+      }
+      function findItemIndex(id) {
+          return items.findIndex(item => item.id === id);
+      }
+      function findItemIndexById(id, error) {
+          let itemIndex = 0;
+          if (typeof id === 'string') {
+              itemIndex = items.findIndex(_item => _item.id === id);
+          }
+          else {
+              itemIndex = id;
+          }
+          if (itemIndex < 0 || itemIndex >= items.length) {
+              throw new Error(error);
+          }
+          return itemIndex;
+      }
+      function internalSlideToItem(id) {
+          if (!init)
+              return;
+          firstItemReached.current = false;
+          lastItemReached.current = false;
+          const itemIndex = findItemIndexById(id, "The item you want to slide to doesn't exist; please check che item id or the index you're passing to.");
+          if (itemIndex === activeItem.current) {
+              return;
+          }
+          const currentItem = findItemIndex(items[activeItem.current].id);
+          const newActiveItem = findItemIndex(items[itemIndex].id);
+          if (newActiveItem > currentItem) {
+              slideToNextItem('click', newActiveItem);
+          }
+          else {
+              slideToPrevItem('click', newActiveItem);
+          }
+      }
+      function getIsNextItem(id) {
+          const itemIndex = findItemIndex(id);
+          const _activeItem = activeItem.current;
+          if (withLoop && _activeItem === items.length - 1) {
+              return itemIndex === 0;
+          }
+          return itemIndex === _activeItem + 1;
+      }
+      function getIsPrevItem(id) {
+          const itemIndex = findItemIndex(id);
+          const _activeItem = activeItem.current;
+          if (withLoop && _activeItem === 0) {
+              return itemIndex === items.length - 1;
+          }
+          return itemIndex === _activeItem - 1;
+      }
+      const carouselFragment = (jsxRuntime.jsx("div", Object.assign({ ref: mainCarouselWrapperRef }, getScrollHandlers(), { style: Object.assign({ display: 'flex', position: 'relative', width: '100%', height: '100%' }, getWrapperOverflowStyles()) }, { children: jsxRuntime.jsx("div", Object.assign({ ref: carouselTrackWrapperRef }, bindDrag(), { style: Object.assign({ position: 'relative', display: 'flex', flexDirection: carouselSlideAxis === 'x' ? 'row' : 'column', touchAction: 'none' }, getAnimatedWrapperStyles()) }, { children: internalItems.map((item, index) => {
+                  return (jsxRuntime.jsx("div", Object.assign({ className: "use-spring-carousel-item", "data-testid": "use-spring-carousel-item-wrapper", style: Object.assign({ display: 'flex', position: 'relative', flex: '1' }, getItemStyles()) }, { children: item.renderItem }), `${item.id}-${index}`));
+              }) })) })));
+      return {
+          useListenToCustomEvent,
+          carouselFragment,
+          enterFullscreen,
+          exitFullscreen,
+          getIsFullscreen,
+          thumbsFragment,
+          slideToItem: internalSlideToItem,
+          getIsNextItem,
+          getIsPrevItem,
+          slideToPrevItem: () => slideToPrevItem(),
+          slideToNextItem: () => slideToNextItem(),
+          getIsActiveItem: (id) => {
+              return (findItemIndexById(id, "The item you want to check doesn't exist") ===
+                  activeItem.current);
+          },
+      };
+  }
+  const Context = React.createContext(undefined);
+  function useSpringCarouselContext() {
+      const context = React.useContext(Context);
+      if (!context) {
+          throw new Error('useSpringCarouselContext must be used within the carousel.');
+      }
+      return context;
+  }
+
+  exports.useSpringCarousel = useSpringCarousel;
+  exports.useSpringCarouselContext = useSpringCarouselContext;
+
+}));
 //# sourceMappingURL=index.js.map