react-animated-numbers - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

dist/index.js

@@ -1,1 +0,1 @@
-(()=>{"use strict";var t={n:e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},d:(e,n)=>{for(var s in n)t.o(n,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:n[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{default:()=>Nn});const n=require("react");var s=t.n(n);let r=b();const i=t=>m(t,r);let o=b();i.write=t=>m(t,o);let a=b();i.onStart=t=>m(t,a);let u=b();i.onFrame=t=>m(t,u);let l=b();i.onFinish=t=>m(t,l);let c=[];i.setTimeout=(t,e)=>{let n=i.now()+e,s=()=>{let t=c.findIndex((t=>t.cancel==s));~t&&c.splice(t,1),w.count-=~t?1:0},r={time:n,handler:t,cancel:s};return c.splice(d(n),0,r),w.count+=1,g(),r};let d=t=>~(~c.findIndex((e=>e.time>t))||~c.length);i.cancel=t=>{r.delete(t),o.delete(t)},i.sync=t=>{f=!0,i.batchedUpdates(t),f=!1},i.throttle=t=>{let e;function n(){try{t(...e)}finally{e=null}}function s(...t){e=t,i.onStart(n)}return s.handler=t,s.cancel=()=>{a.delete(n),e=null},s};let h="undefined"!=typeof window?window.requestAnimationFrame:()=>{};i.use=t=>h=t,i.now="undefined"!=typeof performance?()=>performance.now():Date.now,i.batchedUpdates=t=>t(),i.catch=console.error,i.frameLoop="always",i.advance=()=>{"demand"!==i.frameLoop?console.warn("Cannot call the manual advancement of rafz whilst frameLoop is not set as demand"):v()};let p=-1,f=!1;function m(t,e){f?(e.delete(t),t(0)):(e.add(t),g())}function g(){p<0&&(p=0,"demand"!==i.frameLoop&&h(y))}function y(){~p&&(h(y),i.batchedUpdates(v))}function v(){let t=p;p=i.now();let e=d(p);e&&(_(c.splice(0,e),(t=>t.handler())),w.count-=e),a.flush(),r.flush(t?Math.min(64,p-t):16.667),u.flush(),o.flush(),l.flush()}function b(){let t=new Set,e=t;return{add(n){w.count+=e!=t||t.has(n)?0:1,t.add(n)},delete:n=>(w.count-=e==t&&t.has(n)?1:0,t.delete(n)),flush(n){e.size&&(t=new Set,w.count-=e.size,_(e,(e=>e(n)&&t.add(e))),w.count+=t.size,e=t)}}}function _(t,e){t.forEach((t=>{try{e(t)}catch(t){i.catch(t)}}))}const w={count:0,clear(){p=-1,c=[],a=b(),r=b(),u=b(),o=b(),l=b(),w.count=0}};function k(){}const P={arr:Array.isArray,obj:t=>!!t&&"Object"===t.constructor.name,fun:t=>"function"==typeof t,str:t=>"string"==typeof t,num:t=>"number"==typeof t,und:t=>void 0===t};function S(t,e){if(P.arr(t)){if(!P.arr(e)||t.length!==e.length)return!1;for(let n=0;n<t.length;n++)if(t[n]!==e[n])return!1;return!0}return t===e}const x=(t,e)=>t.forEach(e);function A(t,e,n){for(const s in t)e.call(n,t[s],s)}const O=t=>P.und(t)?[]:P.arr(t)?t:[t];function C(t,e){if(t.size){const n=Array.from(t);t.clear(),x(n,e)}}const j=(t,...e)=>C(t,(t=>t(...e)));let E,I,R=null,V=!1,M=k;var q=Object.freeze({__proto__:null,get createStringInterpolator(){return E},get to(){return I},get colors(){return R},get skipAnimation(){return V},get willAdvance(){return M},assign:t=>{t.to&&(I=t.to),t.now&&(i.now=t.now),void 0!==t.colors&&(R=t.colors),null!=t.skipAnimation&&(V=t.skipAnimation),t.createStringInterpolator&&(E=t.createStringInterpolator),t.requestAnimationFrame&&i.use(t.requestAnimationFrame),t.batchedUpdates&&(i.batchedUpdates=t.batchedUpdates),t.willAdvance&&(M=t.willAdvance),t.frameLoop&&(i.frameLoop=t.frameLoop)}});const T=new Set;let F=[],z=[],$=0;const N={get idle(){return!T.size&&!F.length},start(t){$>t.priority?(T.add(t),i.onStart(U)):(Q(t),i(D))},advance:D,sort(t){if($)i.onFrame((()=>N.sort(t)));else{const e=F.indexOf(t);~e&&(F.splice(e,1),L(t))}},clear(){F=[],T.clear()}};function U(){T.forEach(Q),T.clear(),i(D)}function Q(t){F.includes(t)||L(t)}function L(t){F.splice(function(e,n){const s=e.findIndex((e=>e.priority>t.priority));return s<0?e.length:s}(F),0,t)}function D(t){const e=z;for(let n=0;n<F.length;n++){const s=F[n];$=s.priority,s.idle||(M(s),s.advance(t),s.idle||e.push(s))}return $=0,z=F,z.length=0,F=e,F.length>0}const G="[-+]?\\d*\\.?\\d+",W=G+"%";function B(...t){return"\\(\\s*("+t.join(")\\s*,\\s*(")+")\\s*\\)"}const Y=new RegExp("rgb"+B(G,G,G)),H=new RegExp("rgba"+B(G,G,G,G)),J=new RegExp("hsl"+B(G,W,W)),X=new RegExp("hsla"+B(G,W,W,G)),Z=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,K=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,tt=/^#([0-9a-fA-F]{6})$/,et=/^#([0-9a-fA-F]{8})$/;function nt(t,e,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*(e-t)*n:n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function st(t,e,n){const s=n<.5?n*(1+e):n+e-n*e,r=2*n-s,i=nt(r,s,t+1/3),o=nt(r,s,t),a=nt(r,s,t-1/3);return Math.round(255*i)<<24|Math.round(255*o)<<16|Math.round(255*a)<<8}function rt(t){const e=parseInt(t,10);return e<0?0:e>255?255:e}function it(t){return(parseFloat(t)%360+360)%360/360}function ot(t){const e=parseFloat(t);return e<0?0:e>1?255:Math.round(255*e)}function at(t){const e=parseFloat(t);return e<0?0:e>100?1:e/100}function ut(t){let e=function(t){let e;return"number"==typeof t?t>>>0===t&&t>=0&&t<=4294967295?t:null:(e=tt.exec(t))?parseInt(e[1]+"ff",16)>>>0:R&&void 0!==R[t]?R[t]:(e=Y.exec(t))?(rt(e[1])<<24|rt(e[2])<<16|rt(e[3])<<8|255)>>>0:(e=H.exec(t))?(rt(e[1])<<24|rt(e[2])<<16|rt(e[3])<<8|ot(e[4]))>>>0:(e=Z.exec(t))?parseInt(e[1]+e[1]+e[2]+e[2]+e[3]+e[3]+"ff",16)>>>0:(e=et.exec(t))?parseInt(e[1],16)>>>0:(e=K.exec(t))?parseInt(e[1]+e[1]+e[2]+e[2]+e[3]+e[3]+e[4]+e[4],16)>>>0:(e=J.exec(t))?(255|st(it(e[1]),at(e[2]),at(e[3])))>>>0:(e=X.exec(t))?(st(it(e[1]),at(e[2]),at(e[3]))|ot(e[4]))>>>0:null}(t);return null===e?t:(e=e||0,`rgba(${(4278190080&e)>>>24}, ${(16711680&e)>>>16}, ${(65280&e)>>>8}, ${(255&e)/255})`)}const lt=(t,e,n)=>{if(P.fun(t))return t;if(P.arr(t))return lt({range:t,output:e,extrapolate:n});if(P.str(t.output[0]))return E(t);const s=t,r=s.output,i=s.range||[0,1],o=s.extrapolateLeft||s.extrapolate||"extend",a=s.extrapolateRight||s.extrapolate||"extend",u=s.easing||(t=>t);return t=>{const e=function(t,e){for(var n=1;n<e.length-1&&!(e[n]>=t);++n);return n-1}(t,i);return function(t,e,n,s,r,i,o,a,u){let l=u?u(t):t;if(l<e){if("identity"===o)return l;"clamp"===o&&(l=e)}if(l>n){if("identity"===a)return l;"clamp"===a&&(l=n)}return s===r?s:e===n?t<=e?s:r:(e===-1/0?l=-l:n===1/0?l-=e:l=(l-e)/(n-e),l=i(l),s===-1/0?l=-l:r===1/0?l+=s:l=l*(r-s)+s,l)}(t,i[e],i[e+1],r[e],r[e+1],u,o,a,s.map)}};function ct(){return(ct=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t[s]=n[s])}return t}).apply(this,arguments)}const dt=Symbol.for("FluidValue.get"),ht=Symbol.for("FluidValue.observers"),pt=t=>Boolean(t&&t[dt]),ft=t=>t&&t[dt]?t[dt]():t,mt=t=>t[ht]||null;function gt(t,e){let n=t[ht];n&&n.forEach((t=>{!function(t,e){t.eventObserved?t.eventObserved(e):t(e)}(t,e)}))}class yt{constructor(t){if(this[dt]=void 0,this[ht]=void 0,!t&&!(t=this.get))throw Error("Unknown getter");vt(this,t)}}const vt=(t,e)=>wt(t,dt,e);function bt(t,e){if(t[dt]){let n=t[ht];n||wt(t,ht,n=new Set),n.has(e)||(n.add(e),t.observerAdded&&t.observerAdded(n.size,e))}return e}function _t(t,e){let n=t[ht];if(n&&n.has(e)){const s=n.size-1;s?n.delete(e):t[ht]=null,t.observerRemoved&&t.observerRemoved(s,e)}}const wt=(t,e,n)=>Object.defineProperty(t,e,{value:n,writable:!0,configurable:!0}),kt=/[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,Pt=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;let St;const xt=/rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi,At=(t,e,n,s,r)=>`rgba(${Math.round(e)}, ${Math.round(n)}, ${Math.round(s)}, ${r})`,Ot=t=>{St||(St=R?new RegExp(`(${Object.keys(R).join("|")})(?!\\w)`,"g"):/^\b$/);const e=t.output.map((t=>ft(t).replace(Pt,ut).replace(St,ut))),n=e.map((t=>t.match(kt).map(Number))),s=n[0].map(((t,e)=>n.map((t=>{if(!(e in t))throw Error('The arity of each "output" value must be equal');return t[e]})))).map((e=>lt(ct({},t,{output:e}))));return t=>{let n=0;return e[0].replace(kt,(()=>String(s[n++](t)))).replace(xt,At)}},Ct="react-spring: ",jt=t=>{const e=t;let n=!1;if("function"!=typeof e)throw new TypeError(`${Ct}once requires a function parameter`);return(...t)=>{n||(e(...t),n=!0)}},Et=jt(console.warn),It=jt(console.warn);function Rt(t){return P.str(t)&&("#"==t[0]||/\d/.test(t)||t in(R||{}))}const Vt=t=>(0,n.useEffect)(t,Mt),Mt=[];function qt(){const t=(0,n.useState)()[1],e=(0,n.useState)(Tt)[0];return Vt(e.unmount),()=>{e.current&&t({})}}function Tt(){const t={current:!0,unmount:()=>()=>{t.current=!1}};return t}function Ft(t){const e=(0,n.useRef)();return(0,n.useEffect)((()=>{e.current=t})),e.current}const zt="undefined"!=typeof window&&window.document&&window.document.createElement?n.useLayoutEffect:n.useEffect,$t=Symbol.for("Animated:node"),Nt=t=>t&&t[$t],Ut=(t,e)=>{return n=t,s=$t,r=e,Object.defineProperty(n,s,{value:r,writable:!0,configurable:!0});var n,s,r},Qt=t=>t&&t[$t]&&t[$t].getPayload();class Lt{constructor(){this.payload=void 0,Ut(this,this)}getPayload(){return this.payload||[]}}class Dt extends Lt{constructor(t){super(),this.done=!0,this.elapsedTime=void 0,this.lastPosition=void 0,this.lastVelocity=void 0,this.v0=void 0,this.durationProgress=0,this._value=t,P.num(this._value)&&(this.lastPosition=this._value)}static create(t){return new Dt(t)}getPayload(){return[this]}getValue(){return this._value}setValue(t,e){return P.num(t)&&(this.lastPosition=t,e&&(t=Math.round(t/e)*e,this.done&&(this.lastPosition=t))),this._value!==t&&(this._value=t,!0)}reset(){const{done:t}=this;this.done=!1,P.num(this._value)&&(this.elapsedTime=0,this.durationProgress=0,this.lastPosition=this._value,t&&(this.lastVelocity=null),this.v0=null)}}class Gt extends Dt{constructor(t){super(0),this._string=null,this._toString=void 0,this._toString=lt({output:[t,t]})}static create(t){return new Gt(t)}getValue(){let t=this._string;return null==t?this._string=this._toString(this._value):t}setValue(t){if(P.str(t)){if(t==this._string)return!1;this._string=t,this._value=1}else{if(!super.setValue(t))return!1;this._string=null}return!0}reset(t){t&&(this._toString=lt({output:[this.getValue(),t]})),this._value=0,super.reset()}}const Wt={dependencies:null};class Bt extends Lt{constructor(t){super(),this.source=t,this.setValue(t)}getValue(t){const e={};return A(this.source,((n,s)=>{var r;(r=n)&&r[$t]===r?e[s]=n.getValue(t):pt(n)?e[s]=ft(n):t||(e[s]=n)})),e}setValue(t){this.source=t,this.payload=this._makePayload(t)}reset(){this.payload&&x(this.payload,(t=>t.reset()))}_makePayload(t){if(t){const e=new Set;return A(t,this._addToPayload,e),Array.from(e)}}_addToPayload(t){Wt.dependencies&&pt(t)&&Wt.dependencies.add(t);const e=Qt(t);e&&x(e,(t=>this.add(t)))}}class Yt extends Bt{constructor(t){super(t)}static create(t){return new Yt(t)}getValue(){return this.source.map((t=>t.getValue()))}setValue(t){const e=this.getPayload();return t.length==e.length?e.map(((e,n)=>e.setValue(t[n]))).some(Boolean):(super.setValue(t.map(Ht)),!0)}}function Ht(t){return(Rt(t)?Gt:Dt).create(t)}function Jt(t){const e=Nt(t);return e?e.constructor:P.arr(t)?Yt:Rt(t)?Gt:Dt}function Xt(){return(Xt=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t[s]=n[s])}return t}).apply(this,arguments)}const Zt=(t,e)=>{const s=!P.fun(t)||t.prototype&&t.prototype.isReactComponent;return(0,n.forwardRef)(((r,o)=>{const a=(0,n.useRef)(null),u=s&&(0,n.useCallback)((t=>{a.current=function(t,e){return t&&(P.fun(t)?t(e):t.current=e),e}(o,t)}),[o]),[l,c]=function(t,e){const n=new Set;return Wt.dependencies=n,t.style&&(t=Xt({},t,{style:e.createAnimatedStyle(t.style)})),t=new Bt(t),Wt.dependencies=null,[t,n]}(r,e),d=qt(),h=()=>{const t=a.current;s&&!t||!1===(!!t&&e.applyAnimatedValues(t,l.getValue(!0)))&&d()},p=new Kt(h,c),f=(0,n.useRef)();zt((()=>{const t=f.current;f.current=p,x(c,(t=>bt(t,p))),t&&(x(t.deps,(e=>_t(e,t))),i.cancel(t.update))})),(0,n.useEffect)(h,[]),Vt((()=>()=>{const t=f.current;x(t.deps,(e=>_t(e,t)))}));const m=e.getComponentProps(l.getValue());return n.createElement(t,Xt({},m,{ref:u}))}))};class Kt{constructor(t,e){this.update=t,this.deps=e}eventObserved(t){"change"==t.type&&i.write(this.update)}}const te=Symbol.for("AnimatedComponent"),ee=t=>P.str(t)?t:t&&P.str(t.displayName)?t.displayName:P.fun(t)&&t.name||null;function ne(){return(ne=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t[s]=n[s])}return t}).apply(this,arguments)}function se(t,...e){return P.fun(t)?t(...e):t}const re=(t,e)=>!0===t||!!(e&&t&&(P.fun(t)?t(e):O(t).includes(e))),ie=(t,e)=>P.obj(t)?e&&t[e]:t,oe=(t,e)=>!0===t.default?t[e]:t.default?t.default[e]:void 0,ae=t=>t,ue=(t,e=ae)=>{let n=le;t.default&&!0!==t.default&&(t=t.default,n=Object.keys(t));const s={};for(const r of n){const n=e(t[r],r);P.und(n)||(s[r]=n)}return s},le=["config","onProps","onStart","onChange","onPause","onResume","onRest"],ce={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 de(t){const e=function(t){const e={};let n=0;if(A(t,((t,s)=>{ce[s]||(e[s]=t,n++)})),n)return e}(t);if(e){const n={to:e};return A(t,((t,s)=>s in e||(n[s]=t))),n}return ne({},t)}function he(t){return t=ft(t),P.arr(t)?t.map(he):Rt(t)?q.createStringInterpolator({range:[0,1],output:[t,t]})(1):t}function pe(t){for(const e in t)return!0;return!1}function fe(t){return P.fun(t)||P.arr(t)&&P.obj(t[0])}function me(t,e){var n;null==(n=t.ref)||n.delete(t),null==e||e.delete(t)}function ge(t,e){var n;e&&t.ref!==e&&(null==(n=t.ref)||n.delete(t),e.add(t),t.ref=e)}const ye=ne({},{tension:170,friction:26},{mass:1,damping:1,easing:t=>t,clamp:!1});class ve{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,ye)}}function be(t,e){if(P.und(e.decay)){const n=!P.und(e.tension)||!P.und(e.friction);!n&&P.und(e.frequency)&&P.und(e.damping)&&P.und(e.mass)||(t.duration=void 0,t.decay=void 0),n&&(t.frequency=void 0)}else t.duration=void 0}const _e=[];class we{constructor(){this.changed=!1,this.values=_e,this.toValues=null,this.fromValues=_e,this.to=void 0,this.from=void 0,this.config=new ve,this.immediate=!1}}function ke(t,{key:e,props:n,defaultProps:s,state:r,actions:o}){return new Promise(((a,u)=>{var l;let c,d,h=re(null!=(l=n.cancel)?l:null==s?void 0:s.cancel,e);if(h)m();else{P.und(n.pause)||(r.paused=re(n.pause,e));let t=null==s?void 0:s.pause;!0!==t&&(t=r.paused||re(t,e)),c=se(n.delay||0,e),t?(r.resumeQueue.add(f),o.pause()):(o.resume(),f())}function p(){r.resumeQueue.add(f),r.timeouts.delete(d),d.cancel(),c=d.time-i.now()}function f(){c>0?(d=i.setTimeout(m,c),r.pauseQueue.add(p),r.timeouts.add(d)):m()}function m(){r.pauseQueue.delete(p),r.timeouts.delete(d),t<=(r.cancelId||0)&&(h=!0);try{o.start(ne({},n,{callId:t,cancel:h}),a)}catch(t){u(t)}}}))}const Pe=(t,e)=>1==e.length?e[0]:e.some((t=>t.cancelled))?Ae(t.get()):e.every((t=>t.noop))?Se(t.get()):xe(t.get(),e.every((t=>t.finished))),Se=t=>({value:t,noop:!0,finished:!0,cancelled:!1}),xe=(t,e,n=!1)=>({value:t,finished:e,cancelled:n}),Ae=t=>({value:t,cancelled:!0,finished:!1});function Oe(t,e,n,s){const{callId:r,parentId:o,onRest:a}=e,{asyncTo:u,promise:l}=n;return o||t!==u||e.reset?n.promise=(async()=>{n.asyncId=r,n.asyncTo=t;const c=ue(e,((t,e)=>"onRest"===e?void 0:t));let d,h;const p=new Promise(((t,e)=>(d=t,h=e))),f=t=>{const e=r<=(n.cancelId||0)&&Ae(s)||r!==n.asyncId&&xe(s,!1);if(e)throw t.result=e,h(t),t},m=(t,e)=>{const i=new je,o=new Ee;return(async()=>{if(q.skipAnimation)throw Ce(n),o.result=xe(s,!1),h(o),o;f(i);const a=P.obj(t)?ne({},t):ne({},e,{to:t});a.parentId=r,A(c,((t,e)=>{P.und(a[e])&&(a[e]=t)}));const u=await s.start(a);return f(i),n.paused&&await new Promise((t=>{n.resumeQueue.add(t)})),u})()};let g;if(q.skipAnimation)return Ce(n),xe(s,!1);try{let e;e=P.arr(t)?(async t=>{for(const e of t)await m(e)})(t):Promise.resolve(t(m,s.stop.bind(s))),await Promise.all([e.then(d),p]),g=xe(s.get(),!0,!1)}catch(t){if(t instanceof je)g=t.result;else{if(!(t instanceof Ee))throw t;g=t.result}}finally{r==n.asyncId&&(n.asyncId=o,n.asyncTo=o?u:void 0,n.promise=o?l:void 0)}return P.fun(a)&&i.batchedUpdates((()=>{a(g,s,s.item)})),g})():l}function Ce(t,e){C(t.timeouts,(t=>t.cancel())),t.pauseQueue.clear(),t.resumeQueue.clear(),t.asyncId=t.asyncTo=t.promise=void 0,e&&(t.cancelId=e)}class je 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 Ee extends Error{constructor(){super("SkipAnimationSignal"),this.result=void 0}}const Ie=t=>t instanceof Ve;let Re=1;class Ve extends yt{constructor(...t){super(...t),this.id=Re++,this.key=void 0,this._priority=0}get priority(){return this._priority}set priority(t){this._priority!=t&&(this._priority=t,this._onPriorityChange(t))}get(){const t=Nt(this);return t&&t.getValue()}to(...t){return q.to(this,t)}interpolate(...t){return Et(`${Ct}The "interpolate" function is deprecated in v9 (use "to" instead)`),q.to(this,t)}toJSON(){return this.get()}observerAdded(t){1==t&&this._attach()}observerRemoved(t){0==t&&this._detach()}_attach(){}_detach(){}_onChange(t,e=!1){gt(this,{type:"change",parent:this,value:t,idle:e})}_onPriorityChange(t){this.idle||N.sort(this),gt(this,{type:"priority",parent:this,priority:t})}}const Me=Symbol.for("SpringPhase"),qe=t=>(1&t[Me])>0,Te=t=>(2&t[Me])>0,Fe=t=>(4&t[Me])>0,ze=(t,e)=>e?t[Me]|=3:t[Me]&=-3,$e=(t,e)=>e?t[Me]|=4:t[Me]&=-5;class Ne extends Ve{constructor(t,e){if(super(),this.key=void 0,this.animation=new we,this.queue=void 0,this.defaultProps={},this._state={paused:!1,pauseQueue:new Set,resumeQueue:new Set,timeouts:new Set},this._pendingCalls=new Set,this._lastCallId=0,this._lastToId=0,this._memoizedDuration=0,!P.und(t)||!P.und(e)){const n=P.obj(t)?ne({},t):ne({},e,{from:t});P.und(n.default)&&(n.default=!0),this.start(n)}}get idle(){return!(Te(this)||this._state.asyncTo)||Fe(this)}get goal(){return ft(this.animation.to)}get velocity(){const t=Nt(this);return t instanceof Dt?t.lastVelocity||0:t.getPayload().map((t=>t.lastVelocity||0))}get hasAnimated(){return qe(this)}get isAnimating(){return Te(this)}get isPaused(){return Fe(this)}advance(t){let e=!0,n=!1;const s=this.animation;let{config:r,toValues:i}=s;const o=Qt(s.to);!o&&pt(s.to)&&(i=O(ft(s.to))),s.values.forEach(((a,u)=>{if(a.done)return;const l=a.constructor==Gt?1:o?o[u].lastPosition:i[u];let c=s.immediate,d=l;if(!c){if(d=a.lastPosition,r.tension<=0)return void(a.done=!0);let e=a.elapsedTime+=t;const n=s.fromValues[u],i=null!=a.v0?a.v0:a.v0=P.arr(r.velocity)?r.velocity[u]:r.velocity;let o;if(P.und(r.duration))if(r.decay){const t=!0===r.decay?.998:r.decay,s=Math.exp(-(1-t)*e);d=n+i/(1-t)*(1-s),c=Math.abs(a.lastPosition-d)<.1,o=i*s}else{o=null==a.lastVelocity?i:a.lastVelocity;const e=r.precision||(n==l?.005:Math.min(1,.001*Math.abs(l-n))),s=r.restVelocity||e/10,u=r.clamp?0:r.bounce,h=!P.und(u),p=n==l?a.v0>0:n<l;let f,m=!1;const g=1,y=Math.ceil(t/g);for(let t=0;t<y&&(f=Math.abs(o)>s,f||(c=Math.abs(l-d)<=e,!c));++t)h&&(m=d==l||d>l==p,m&&(o=-o*u,d=l)),o+=(1e-6*-r.tension*(d-l)+.001*-r.friction*o)/r.mass*g,d+=o*g}else{let s=1;r.duration>0&&(this._memoizedDuration!==r.duration&&(this._memoizedDuration=r.duration,a.durationProgress>0&&(a.elapsedTime=r.duration*a.durationProgress,e=a.elapsedTime+=t)),s=(r.progress||0)+e/this._memoizedDuration,s=s>1?1:s<0?0:s,a.durationProgress=s),d=n+r.easing(s)*(l-n),o=(d-a.lastPosition)/t,c=1==s}a.lastVelocity=o,Number.isNaN(d)&&(console.warn("Got NaN while animating:",this),c=!0)}o&&!o[u].done&&(c=!1),c?a.done=!0:e=!1,a.setValue(d,r.round)&&(n=!0)}));const a=Nt(this),u=a.getValue();if(e){const t=ft(s.to);u===t&&!n||r.decay?n&&r.decay&&this._onChange(u):(a.setValue(t),this._onChange(t)),this._stop()}else n&&this._onChange(u)}set(t){return i.batchedUpdates((()=>{this._stop(),this._focus(t),this._set(t)})),this}pause(){this._update({pause:!0})}resume(){this._update({pause:!1})}finish(){if(Te(this)){const{to:t,config:e}=this.animation;i.batchedUpdates((()=>{this._onStart(),e.decay||this._set(t,!1),this._stop()}))}return this}update(t){return(this.queue||(this.queue=[])).push(t),this}start(t,e){let n;return P.und(t)?(n=this.queue||[],this.queue=[]):n=[P.obj(t)?t:ne({},e,{to:t})],Promise.all(n.map((t=>this._update(t)))).then((t=>Pe(this,t)))}stop(t){const{to:e}=this.animation;return this._focus(this.get()),Ce(this._state,t&&this._lastCallId),i.batchedUpdates((()=>this._stop(e,t))),this}reset(){this._update({reset:!0})}eventObserved(t){"change"==t.type?this._start():"priority"==t.type&&(this.priority=t.priority+1)}_prepareNode(t){const e=this.key||"";let{to:n,from:s}=t;n=P.obj(n)?n[e]:n,(null==n||fe(n))&&(n=void 0),s=P.obj(s)?s[e]:s,null==s&&(s=void 0);const r={to:n,from:s};return qe(this)||(t.reverse&&([n,s]=[s,n]),s=ft(s),P.und(s)?Nt(this)||this._set(n):this._set(s)),r}_update(t,e){let n=ne({},t);const{key:s,defaultProps:r}=this;n.default&&Object.assign(r,ue(n,((t,e)=>/^on/.test(e)?ie(t,s):t))),Be(this,n,"onProps"),Ye(this,"onProps",n,this);const i=this._prepareNode(n);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 o=this._state;return ke(++this._lastCallId,{key:s,props:n,defaultProps:r,state:o,actions:{pause:()=>{Fe(this)||($e(this,!0),j(o.pauseQueue),Ye(this,"onPause",xe(this,Ue(this,this.animation.to)),this))},resume:()=>{Fe(this)&&($e(this,!1),Te(this)&&this._resume(),j(o.resumeQueue),Ye(this,"onResume",xe(this,Ue(this,this.animation.to)),this))},start:this._merge.bind(this,i)}}).then((t=>{if(n.loop&&t.finished&&(!e||!t.noop)){const t=Qe(n);if(t)return this._update(t,!0)}return t}))}_merge(t,e,n){if(e.cancel)return this.stop(!0),n(Ae(this));const s=!P.und(t.to),r=!P.und(t.from);if(s||r){if(!(e.callId>this._lastToId))return n(Ae(this));this._lastToId=e.callId}const{key:o,defaultProps:a,animation:u}=this,{to:l,from:c}=u;let{to:d=l,from:h=c}=t;!r||s||e.default&&!P.und(d)||(d=h),e.reverse&&([d,h]=[h,d]);const p=!S(h,c);p&&(u.from=h),h=ft(h);const f=!S(d,l);f&&this._focus(d);const m=fe(e.to),{config:g}=u,{decay:y,velocity:v}=g;(s||r)&&(g.velocity=0),e.config&&!m&&function(t,e,n){n&&(be(n=ne({},n),e),e=ne({},n,e)),be(t,e),Object.assign(t,e);for(const e in ye)null==t[e]&&(t[e]=ye[e]);let{mass:s,frequency:r,damping:i}=t;P.und(r)||(r<.01&&(r=.01),i<0&&(i=0),t.tension=Math.pow(2*Math.PI/r,2)*s,t.friction=4*Math.PI*i*s/r)}(g,se(e.config,o),e.config!==a.config?se(a.config,o):void 0);let b=Nt(this);if(!b||P.und(d))return n(xe(this,!0));const _=P.und(e.reset)?r&&!e.default:!P.und(h)&&re(e.reset,o),w=_?h:this.get(),k=he(d),A=P.num(k)||P.arr(k)||Rt(k),C=!m&&(!A||re(a.immediate||e.immediate,o));if(f){const t=Jt(d);if(t!==b.constructor){if(!C)throw Error(`Cannot animate between ${b.constructor.name} and ${t.name}, as the "to" prop suggests`);b=this._set(k)}}const E=b.constructor;let I=pt(d),R=!1;if(!I){const t=_||!qe(this)&&p;(f||t)&&(R=S(he(w),k),I=!R),(S(u.immediate,C)||C)&&S(g.decay,y)&&S(g.velocity,v)||(I=!0)}if(R&&Te(this)&&(u.changed&&!_?I=!0:I||this._stop(l)),!m&&((I||pt(l))&&(u.values=b.getPayload(),u.toValues=pt(d)?null:E==Gt?[1]:O(k)),u.immediate!=C&&(u.immediate=C,C||_||this._set(l)),I)){const{onRest:t}=u;x(We,(t=>Be(this,e,t)));const s=xe(this,Ue(this,l));j(this._pendingCalls,s),this._pendingCalls.add(n),u.changed&&i.batchedUpdates((()=>{u.changed=!_,null==t||t(s,this),_?se(a.onRest,s):null==u.onStart||u.onStart(s,this)}))}_&&this._set(w),m?n(Oe(e.to,e,this._state,this)):I?this._start():Te(this)&&!f?this._pendingCalls.add(n):n(Se(w))}_focus(t){const e=this.animation;t!==e.to&&(mt(this)&&this._detach(),e.to=t,mt(this)&&this._attach())}_attach(){let t=0;const{to:e}=this.animation;pt(e)&&(bt(e,this),Ie(e)&&(t=e.priority+1)),this.priority=t}_detach(){const{to:t}=this.animation;pt(t)&&_t(t,this)}_set(t,e=!0){const n=ft(t);if(!P.und(n)){const t=Nt(this);if(!t||!S(n,t.getValue())){const s=Jt(n);t&&t.constructor==s?t.setValue(n):Ut(this,s.create(n)),t&&i.batchedUpdates((()=>{this._onChange(n,e)}))}}return Nt(this)}_onStart(){const t=this.animation;t.changed||(t.changed=!0,Ye(this,"onStart",xe(this,Ue(this,t.to)),this))}_onChange(t,e){e||(this._onStart(),se(this.animation.onChange,t,this)),se(this.defaultProps.onChange,t,this),super._onChange(t,e)}_start(){const t=this.animation;Nt(this).reset(ft(t.to)),t.immediate||(t.fromValues=t.values.map((t=>t.lastPosition))),Te(this)||(ze(this,!0),Fe(this)||this._resume())}_resume(){q.skipAnimation?this.finish():N.start(this)}_stop(t,e){if(Te(this)){ze(this,!1);const n=this.animation;x(n.values,(t=>{t.done=!0})),n.toValues&&(n.onChange=n.onPause=n.onResume=void 0),gt(this,{type:"idle",parent:this});const s=e?Ae(this.get()):xe(this.get(),Ue(this,null!=t?t:n.to));j(this._pendingCalls,s),n.changed&&(n.changed=!1,Ye(this,"onRest",s,this))}}}function Ue(t,e){const n=he(e);return S(he(t.get()),n)}function Qe(t,e=t.loop,n=t.to){let s=se(e);if(s){const r=!0!==s&&de(s),i=(r||t).reverse,o=!r||r.reset;return Le(ne({},t,{loop:e,default:!1,pause:void 0,to:!i||fe(n)?n:void 0,from:o?t.from:void 0,reset:o},r))}}function Le(t){const{to:e,from:n}=t=de(t),s=new Set;return P.obj(e)&&Ge(e,s),P.obj(n)&&Ge(n,s),t.keys=s.size?Array.from(s):null,t}function De(t){const e=Le(t);return P.und(e.default)&&(e.default=ue(e)),e}function Ge(t,e){A(t,((t,n)=>null!=t&&e.add(n)))}const We=["onStart","onRest","onChange","onPause","onResume"];function Be(t,e,n){t.animation[n]=e[n]!==oe(e,n)?ie(e[n],t.key):void 0}function Ye(t,e,...n){var s,r,i,o;null==(s=(r=t.animation)[e])||s.call(r,...n),null==(i=(o=t.defaultProps)[e])||i.call(o,...n)}const He=["onStart","onChange","onRest"];let Je=1;class Xe{constructor(t,e){this.id=Je++,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=!1,this._item=void 0,this._state={paused:!1,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),e&&(this._flush=e),t&&this.start(ne({default:!0},t))}get idle(){return!this._state.asyncTo&&Object.values(this.springs).every((t=>t.idle))}get item(){return this._item}set item(t){this._item=t}get(){const t={};return this.each(((e,n)=>t[n]=e.get())),t}set(t){for(const e in t){const n=t[e];P.und(n)||this.springs[e].set(n)}}update(t){return t&&this.queue.push(Le(t)),this}start(t){let{queue:e}=this;return t?e=O(t).map(Le):this.queue=[],this._flush?this._flush(this,e):(rn(this,e),Ze(this,e))}stop(t,e){if(t!==!!t&&(e=t),e){const n=this.springs;x(O(e),(e=>n[e].stop(!!t)))}else Ce(this._state,this._lastAsyncId),this.each((e=>e.stop(!!t)));return this}pause(t){if(P.und(t))this.start({pause:!0});else{const e=this.springs;x(O(t),(t=>e[t].pause()))}return this}resume(t){if(P.und(t))this.start({pause:!1});else{const e=this.springs;x(O(t),(t=>e[t].resume()))}return this}each(t){A(this.springs,t)}_onFrame(){const{onStart:t,onChange:e,onRest:n}=this._events,s=this._active.size>0,r=this._changed.size>0;(s&&!this._started||r&&!this._started)&&(this._started=!0,C(t,(([t,e])=>{e.value=this.get(),t(e,this,this._item)})));const i=!s&&this._started,o=r||i&&n.size?this.get():null;r&&e.size&&C(e,(([t,e])=>{e.value=o,t(e,this,this._item)})),i&&(this._started=!1,C(n,(([t,e])=>{e.value=o,t(e,this,this._item)})))}eventObserved(t){if("change"==t.type)this._changed.add(t.parent),t.idle||this._active.add(t.parent);else{if("idle"!=t.type)return;this._active.delete(t.parent)}i.onFrame(this._onFrame)}}function Ze(t,e){return Promise.all(e.map((e=>Ke(t,e)))).then((e=>Pe(t,e)))}async function Ke(t,e,n){const{keys:s,to:r,from:o,loop:a,onRest:u,onResolve:l}=e,c=P.obj(e.default)&&e.default;a&&(e.loop=!1),!1===r&&(e.to=null),!1===o&&(e.from=null);const d=P.arr(r)||P.fun(r)?r:void 0;d?(e.to=void 0,e.onRest=void 0,c&&(c.onRest=void 0)):x(He,(n=>{const s=e[n];if(P.fun(s)){const r=t._events[n];e[n]=({finished:t,cancelled:e})=>{const n=r.get(s);n?(t||(n.finished=!1),e&&(n.cancelled=!0)):r.set(s,{value:null,finished:t||!1,cancelled:e||!1})},c&&(c[n]=e[n])}}));const h=t._state;e.pause===!h.paused?(h.paused=e.pause,j(e.pause?h.pauseQueue:h.resumeQueue)):h.paused&&(e.pause=!0);const p=(s||Object.keys(t.springs)).map((n=>t.springs[n].start(e))),f=!0===e.cancel||!0===oe(e,"cancel");(d||f&&h.asyncId)&&p.push(ke(++t._lastAsyncId,{props:e,state:h,actions:{pause:k,resume:k,start(e,n){f?(Ce(h,t._lastAsyncId),n(Ae(t))):(e.onRest=u,n(Oe(d,e,h,t)))}}})),h.paused&&await new Promise((t=>{h.resumeQueue.add(t)}));const m=Pe(t,await Promise.all(p));if(a&&m.finished&&(!n||!m.noop)){const n=Qe(e,a,r);if(n)return rn(t,[n]),Ke(t,n,!0)}return l&&i.batchedUpdates((()=>l(m,t,t.item))),m}function tn(t,e){const n=ne({},t.springs);return e&&x(O(e),(t=>{P.und(t.keys)&&(t=Le(t)),P.obj(t.to)||(t=ne({},t,{to:void 0})),sn(n,t,(t=>nn(t)))})),en(t,n),n}function en(t,e){A(e,((e,n)=>{t.springs[n]||(t.springs[n]=e,bt(e,t))}))}function nn(t,e){const n=new Ne;return n.key=t,e&&bt(n,e),n}function sn(t,e,n){e.keys&&x(e.keys,(s=>{(t[s]||(t[s]=n(s)))._prepareNode(e)}))}function rn(t,e){x(e,(e=>{sn(t.springs,e,(e=>nn(e,t)))}))}function on(t,e){if(null==t)return{};var n,s,r={},i=Object.keys(t);for(s=0;s<i.length;s++)n=i[s],e.indexOf(n)>=0||(r[n]=t[n]);return r}const an=["children"],un=t=>{let{children:e}=t,s=on(t,an);const r=(0,n.useContext)(ln),i=s.pause||!!r.pause,o=s.immediate||!!r.immediate;s=function(t,e){const[s]=(0,n.useState)((()=>({inputs:e,result:t()}))),r=(0,n.useRef)(),i=r.current;let o=i;return o?Boolean(e&&o.inputs&&function(t,e){if(t.length!==e.length)return!1;for(let n=0;n<t.length;n++)if(t[n]!==e[n])return!1;return!0}(e,o.inputs))||(o={inputs:e,result:t()}):o=s,(0,n.useEffect)((()=>{r.current=o,i==s&&(s.inputs=s.result=void 0)}),[o]),o.result}((()=>({pause:i,immediate:o})),[i,o]);const{Provider:a}=ln;return n.createElement(a,{value:s},e)},ln=(cn=un,dn={},Object.assign(cn,n.createContext(dn)),cn.Provider._context=cn,cn.Consumer._context=cn,cn);var cn,dn;un.Provider=ln.Provider,un.Consumer=ln.Consumer;const hn=()=>{const t=[],e=function(e){It(`${Ct}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`);const s=[];return x(t,((t,r)=>{if(P.und(e))s.push(t.start());else{const i=n(e,t,r);i&&s.push(t.start(i))}})),s};e.current=t,e.add=function(e){t.includes(e)||t.push(e)},e.delete=function(e){const n=t.indexOf(e);~n&&t.splice(n,1)},e.pause=function(){return x(t,(t=>t.pause(...arguments))),this},e.resume=function(){return x(t,(t=>t.resume(...arguments))),this},e.set=function(e){x(t,(t=>t.set(e)))},e.start=function(e){const n=[];return x(t,((t,s)=>{if(P.und(e))n.push(t.start());else{const r=this._getProps(e,t,s);r&&n.push(t.start(r))}})),n},e.stop=function(){return x(t,(t=>t.stop(...arguments))),this},e.update=function(e){return x(t,((t,n)=>t.update(this._getProps(e,t,n)))),this};const n=function(t,e,n){return P.fun(t)?t(n,e):t};return e._getProps=n,e};function pn(t,e,s){const r=P.fun(e)&&e;r&&!s&&(s=[]);const i=(0,n.useMemo)((()=>r||3==arguments.length?hn():void 0),[]),o=(0,n.useRef)(0),a=qt(),u=(0,n.useMemo)((()=>({ctrls:[],queue:[],flush(t,e){const n=tn(t,e);return o.current>0&&!u.queue.length&&!Object.keys(n).some((e=>!t.springs[e]))?Ze(t,e):new Promise((s=>{en(t,n),u.queue.push((()=>{s(Ze(t,e))})),a()}))}})),[]),l=(0,n.useRef)([...u.ctrls]),c=[],d=Ft(t)||0,h=l.current.slice(t,d);function p(t,n){for(let s=t;s<n;s++){const t=l.current[s]||(l.current[s]=new Xe(null,u.flush)),n=r?r(s,t):e[s];n&&(c[s]=De(n))}}(0,n.useMemo)((()=>{l.current.length=t,p(d,t)}),[t]),(0,n.useMemo)((()=>{p(0,Math.min(d,t))}),s);const f=l.current.map(((t,e)=>tn(t,c[e]))),m=(0,n.useContext)(un),g=Ft(m),y=m!==g&&pe(m);zt((()=>{o.current++,u.ctrls=l.current;const{queue:t}=u;t.length&&(u.queue=[],x(t,(t=>t()))),x(h,(t=>{me(t,i),t.stop(!0)})),x(l.current,((t,e)=>{null==i||i.add(t),y&&t.start({default:m});const n=c[e];n&&(ge(t,n.ref),t.ref?t.queue.push(n):t.start(n))}))})),Vt((()=>()=>{x(u.ctrls,(t=>t.stop(!0)))}));const v=f.map((t=>ne({},t)));return i?[v,i]:v}let fn;!function(t){t.MOUNT="mount",t.ENTER="enter",t.UPDATE="update",t.LEAVE="leave"}(fn||(fn={}));const mn=["children"];function gn(t){let{children:e}=t;return e(function(t,e){const n=P.fun(t),[[s],r]=pn(1,n?t:[t],n?e||[]:e);return n||2==arguments.length?[s,r]:s}(on(t,mn)))}class yn extends Ve{constructor(t,e){super(),this.key=void 0,this.idle=!0,this.calc=void 0,this._active=new Set,this.source=t,this.calc=lt(...e);const n=this._get(),s=Jt(n);Ut(this,s.create(n))}advance(t){const e=this._get();S(e,this.get())||(Nt(this).setValue(e),this._onChange(e,this.idle)),!this.idle&&bn(this._active)&&_n(this)}_get(){const t=P.arr(this.source)?this.source.map(ft):O(ft(this.source));return this.calc(...t)}_start(){this.idle&&!bn(this._active)&&(this.idle=!1,x(Qt(this),(t=>{t.done=!1})),q.skipAnimation?(i.batchedUpdates((()=>this.advance())),_n(this)):N.start(this))}_attach(){let t=1;x(O(this.source),(e=>{pt(e)&&bt(e,this),Ie(e)&&(e.idle||this._active.add(e),t=Math.max(t,e.priority+1))})),this.priority=t,this._start()}_detach(){x(O(this.source),(t=>{pt(t)&&_t(t,this)})),this._active.clear(),_n(this)}eventObserved(t){"change"==t.type?t.idle?this.advance():(this._active.add(t.parent),this._start()):"idle"==t.type?this._active.delete(t.parent):"priority"==t.type&&(this.priority=O(this.source).reduce(((t,e)=>Math.max(t,(Ie(e)?e.priority:0)+1)),0))}}function vn(t){return!1!==t.idle}function bn(t){return!t.size||Array.from(t).every(vn)}function _n(t){t.idle||(t.idle=!0,x(Qt(t),(t=>{t.done=!0})),gt(t,{type:"idle",parent:t}))}q.assign({createStringInterpolator:Ot,to:(t,e)=>new yn(t,e)}),N.advance;const wn=require("react-dom");function kn(t,e){if(null==t)return{};var n,s,r={},i=Object.keys(t);for(s=0;s<i.length;s++)n=i[s],e.indexOf(n)>=0||(r[n]=t[n]);return r}const Pn=["style","children","scrollTop","scrollLeft"],Sn=/^--/;function xn(t,e){return null==e||"boolean"==typeof e||""===e?"":"number"!=typeof e||0===e||Sn.test(t)||On.hasOwnProperty(t)&&On[t]?(""+e).trim():e+"px"}const An={};let On={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0};const Cn=["Webkit","Ms","Moz","O"];On=Object.keys(On).reduce(((t,e)=>(Cn.forEach((n=>t[((t,e)=>t+e.charAt(0).toUpperCase()+e.substring(1))(n,e)]=t[e])),t)),On);const jn=["x","y","z"],En=/^(matrix|translate|scale|rotate|skew)/,In=/^(translate)/,Rn=/^(rotate|skew)/,Vn=(t,e)=>P.num(t)&&0!==t?t+e:t,Mn=(t,e)=>P.arr(t)?t.every((t=>Mn(t,e))):P.num(t)?t===e:parseFloat(t)===e;class qn extends Bt{constructor(t){let{x:e,y:n,z:s}=t,r=kn(t,jn);const i=[],o=[];(e||n||s)&&(i.push([e||0,n||0,s||0]),o.push((t=>[`translate3d(${t.map((t=>Vn(t,"px"))).join(",")})`,Mn(t,0)]))),A(r,((t,e)=>{if("transform"===e)i.push([t||""]),o.push((t=>[t,""===t]));else if(En.test(e)){if(delete r[e],P.und(t))return;const n=In.test(e)?"px":Rn.test(e)?"deg":"";i.push(O(t)),o.push("rotate3d"===e?([t,e,s,r])=>[`rotate3d(${t},${e},${s},${Vn(r,n)})`,Mn(r,0)]:t=>[`${e}(${t.map((t=>Vn(t,n))).join(",")})`,Mn(t,e.startsWith("scale")?1:0)])}})),i.length&&(r.transform=new Tn(i,o)),super(r)}}class Tn extends yt{constructor(t,e){super(),this._value=null,this.inputs=t,this.transforms=e}get(){return this._value||(this._value=this._get())}_get(){let t="",e=!0;return x(this.inputs,((n,s)=>{const r=ft(n[0]),[i,o]=this.transforms[s](P.arr(r)?r:n.map(ft));t+=" "+i,e=e&&o})),e?"none":t}observerAdded(t){1==t&&x(this.inputs,(t=>x(t,(t=>pt(t)&&bt(t,this)))))}observerRemoved(t){0==t&&x(this.inputs,(t=>x(t,(t=>pt(t)&&_t(t,this)))))}eventObserved(t){"change"==t.type&&(this._value=null),gt(this,t)}}const Fn=["scrollTop","scrollLeft"];q.assign({batchedUpdates:wn.unstable_batchedUpdates,createStringInterpolator:Ot,colors:{transparent:0,aliceblue:4042850303,antiquewhite:4209760255,aqua:16777215,aquamarine:2147472639,azure:4043309055,beige:4126530815,bisque:4293182719,black:255,blanchedalmond:4293643775,blue:65535,blueviolet:2318131967,brown:2771004159,burlywood:3736635391,burntsienna:3934150143,cadetblue:1604231423,chartreuse:2147418367,chocolate:3530104575,coral:4286533887,cornflowerblue:1687547391,cornsilk:4294499583,crimson:3692313855,cyan:16777215,darkblue:35839,darkcyan:9145343,darkgoldenrod:3095792639,darkgray:2846468607,darkgreen:6553855,darkgrey:2846468607,darkkhaki:3182914559,darkmagenta:2332068863,darkolivegreen:1433087999,darkorange:4287365375,darkorchid:2570243327,darkred:2332033279,darksalmon:3918953215,darkseagreen:2411499519,darkslateblue:1211993087,darkslategray:793726975,darkslategrey:793726975,darkturquoise:13554175,darkviolet:2483082239,deeppink:4279538687,deepskyblue:12582911,dimgray:1768516095,dimgrey:1768516095,dodgerblue:512819199,firebrick:2988581631,floralwhite:4294635775,forestgreen:579543807,fuchsia:4278255615,gainsboro:3705462015,ghostwhite:4177068031,gold:4292280575,goldenrod:3668254975,gray:2155905279,green:8388863,greenyellow:2919182335,grey:2155905279,honeydew:4043305215,hotpink:4285117695,indianred:3445382399,indigo:1258324735,ivory:4294963455,khaki:4041641215,lavender:3873897215,lavenderblush:4293981695,lawngreen:2096890111,lemonchiffon:4294626815,lightblue:2916673279,lightcoral:4034953471,lightcyan:3774873599,lightgoldenrodyellow:4210742015,lightgray:3553874943,lightgreen:2431553791,lightgrey:3553874943,lightpink:4290167295,lightsalmon:4288707327,lightseagreen:548580095,lightskyblue:2278488831,lightslategray:2005441023,lightslategrey:2005441023,lightsteelblue:2965692159,lightyellow:4294959359,lime:16711935,limegreen:852308735,linen:4210091775,magenta:4278255615,maroon:2147483903,mediumaquamarine:1724754687,mediumblue:52735,mediumorchid:3126187007,mediumpurple:2473647103,mediumseagreen:1018393087,mediumslateblue:2070474495,mediumspringgreen:16423679,mediumturquoise:1221709055,mediumvioletred:3340076543,midnightblue:421097727,mintcream:4127193855,mistyrose:4293190143,moccasin:4293178879,navajowhite:4292783615,navy:33023,oldlace:4260751103,olive:2155872511,olivedrab:1804477439,orange:4289003775,orangered:4282712319,orchid:3664828159,palegoldenrod:4008225535,palegreen:2566625535,paleturquoise:2951671551,palevioletred:3681588223,papayawhip:4293907967,peachpuff:4292524543,peru:3448061951,pink:4290825215,plum:3718307327,powderblue:2967529215,purple:2147516671,rebeccapurple:1714657791,red:4278190335,rosybrown:3163525119,royalblue:1097458175,saddlebrown:2336560127,salmon:4202722047,sandybrown:4104413439,seagreen:780883967,seashell:4294307583,sienna:2689740287,silver:3233857791,skyblue:2278484991,slateblue:1784335871,slategray:1887473919,slategrey:1887473919,snow:4294638335,springgreen:16744447,steelblue:1182971135,tan:3535047935,teal:8421631,thistle:3636451583,tomato:4284696575,turquoise:1088475391,violet:4001558271,wheat:4125012991,white:4294967295,whitesmoke:4126537215,yellow:4294902015,yellowgreen:2597139199}});const zn=((t,{applyAnimatedValues:e=(()=>!1),createAnimatedStyle:n=(t=>new Bt(t)),getComponentProps:s=(t=>t)}={})=>{const r={applyAnimatedValues:e,createAnimatedStyle:n,getComponentProps:s},i=t=>{const e=ee(t)||"Anonymous";return(t=P.str(t)?i[t]||(i[t]=Zt(t,r)):t[te]||(t[te]=Zt(t,r))).displayName=`Animated(${e})`,t};return A(t,((e,n)=>{P.arr(t)&&(n=ee(e)),i[n]=i(e)})),{animated:i}})(["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"],{applyAnimatedValues:function(t,e){if(!t.nodeType||!t.setAttribute)return!1;const n="filter"===t.nodeName||t.parentNode&&"filter"===t.parentNode.nodeName,s=e,{style:r,children:i,scrollTop:o,scrollLeft:a}=s,u=kn(s,Pn),l=Object.values(u),c=Object.keys(u).map((e=>n||t.hasAttribute(e)?e:An[e]||(An[e]=e.replace(/([A-Z])/g,(t=>"-"+t.toLowerCase())))));void 0!==i&&(t.textContent=i);for(let e in r)if(r.hasOwnProperty(e)){const n=xn(e,r[e]);"float"===e?e="cssFloat":Sn.test(e)?t.style.setProperty(e,n):t.style[e]=n}c.forEach(((e,n)=>{t.setAttribute(e,l[n])})),void 0!==o&&(t.scrollTop=o),void 0!==a&&(t.scrollLeft=a)},createAnimatedStyle:t=>new qn(t),getComponentProps:t=>kn(t,Fn)}).animated,$n=[0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9],Nn=({animateToNumber:t,fontStyle:e,config:r,includeComma:i,delay:o,onFinish:a,onStart:u,animationType:l="random"})=>{const c=(t=>{const e=s().useRef();return s().useEffect((()=>{e.current=t})),void 0===e.current?0:e.current})(t),d=String(Math.abs(t)),h=String(Math.abs(c)),p=Array.from(d,Number),f=Array.from(h,Number),[m,g]=s().useState(!1),[y,v]=s().useState(!1);if(s().useEffect((()=>{if(m&&u&&(setTimeout((()=>{u(),g(!1)}),void 0===o?0:o),a&&"random"===l)){const t=void 0===(null==r?void 0:r.duration)?500:r.duration;setTimeout((()=>{a()}),t)}}),[m]),i){const t=new Array(Math.ceil(d.length/3)).fill(0),e=new Array(Math.ceil(h.length/3)).fill(0);t.forEach(((t,e)=>{0!==e&&p.splice(d.length-3*e,0,",")})),e.forEach(((t,e)=>{0!==e&&f.splice(h.length-3*e,0,",")}))}const[b,_]=s().useState(0),w=s().useRef(null),k=(0,n.useCallback)((t=>{const e=p.slice(t).filter((t=>"string"==typeof t)).length;return o?o+200*(p.length-1-t-e):r&&r.duration?(p.length-1-t-e)*Math.max(100,r.duration-300):200*(p.length-1-t-e)}),[p,y]);return s().useEffect((()=>{_(w.current.clientHeight)}),[t]),s().createElement(s().Fragment,null,0!==b&&s().createElement("div",{style:{display:"flex",flexDirection:"row"}},t<0&&s().createElement("div",{style:e},"-"),p.map(((t,n)=>"string"==typeof t?s().createElement("div",{key:n,style:{...e}},t):s().createElement("div",{key:n,style:{height:b,overflow:"hidden"}},s().createElement(gn,{key:p[n],from:{transform:"translateY(0px)"},to:{transform:`translateY(${b*p[n]*-1-20*b})`},delay:"calm"===l?k(n):null,onRest:()=>v(!0),onStart:()=>g(!0),config:r},(t=>$n.map(((n,r)=>s().createElement(zn.div,{key:r,style:{...t,...e}},n))))))))),s().createElement("div",{ref:w,style:{position:"absolute",top:-9999,...e}},0))};module.exports=e})();
+(()=>{"use strict";var t={n:e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},d:(e,n)=>{for(var s in n)t.o(n,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:n[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{default:()=>Nn});const n=require("react");var s=t.n(n);let r=b();const i=t=>m(t,r);let o=b();i.write=t=>m(t,o);let a=b();i.onStart=t=>m(t,a);let u=b();i.onFrame=t=>m(t,u);let l=b();i.onFinish=t=>m(t,l);let c=[];i.setTimeout=(t,e)=>{let n=i.now()+e,s=()=>{let t=c.findIndex((t=>t.cancel==s));~t&&c.splice(t,1),w.count-=~t?1:0},r={time:n,handler:t,cancel:s};return c.splice(d(n),0,r),w.count+=1,g(),r};let d=t=>~(~c.findIndex((e=>e.time>t))||~c.length);i.cancel=t=>{r.delete(t),o.delete(t)},i.sync=t=>{f=!0,i.batchedUpdates(t),f=!1},i.throttle=t=>{let e;function n(){try{t(...e)}finally{e=null}}function s(...t){e=t,i.onStart(n)}return s.handler=t,s.cancel=()=>{a.delete(n),e=null},s};let h="undefined"!=typeof window?window.requestAnimationFrame:()=>{};i.use=t=>h=t,i.now="undefined"!=typeof performance?()=>performance.now():Date.now,i.batchedUpdates=t=>t(),i.catch=console.error,i.frameLoop="always",i.advance=()=>{"demand"!==i.frameLoop?console.warn("Cannot call the manual advancement of rafz whilst frameLoop is not set as demand"):v()};let p=-1,f=!1;function m(t,e){f?(e.delete(t),t(0)):(e.add(t),g())}function g(){p<0&&(p=0,"demand"!==i.frameLoop&&h(y))}function y(){~p&&(h(y),i.batchedUpdates(v))}function v(){let t=p;p=i.now();let e=d(p);e&&(_(c.splice(0,e),(t=>t.handler())),w.count-=e),a.flush(),r.flush(t?Math.min(64,p-t):16.667),u.flush(),o.flush(),l.flush()}function b(){let t=new Set,e=t;return{add(n){w.count+=e!=t||t.has(n)?0:1,t.add(n)},delete:n=>(w.count-=e==t&&t.has(n)?1:0,t.delete(n)),flush(n){e.size&&(t=new Set,w.count-=e.size,_(e,(e=>e(n)&&t.add(e))),w.count+=t.size,e=t)}}}function _(t,e){t.forEach((t=>{try{e(t)}catch(t){i.catch(t)}}))}const w={count:0,clear(){p=-1,c=[],a=b(),r=b(),u=b(),o=b(),l=b(),w.count=0}};function k(){}const P={arr:Array.isArray,obj:t=>!!t&&"Object"===t.constructor.name,fun:t=>"function"==typeof t,str:t=>"string"==typeof t,num:t=>"number"==typeof t,und:t=>void 0===t};function S(t,e){if(P.arr(t)){if(!P.arr(e)||t.length!==e.length)return!1;for(let n=0;n<t.length;n++)if(t[n]!==e[n])return!1;return!0}return t===e}const x=(t,e)=>t.forEach(e);function A(t,e,n){for(const s in t)e.call(n,t[s],s)}const O=t=>P.und(t)?[]:P.arr(t)?t:[t];function C(t,e){if(t.size){const n=Array.from(t);t.clear(),x(n,e)}}const j=(t,...e)=>C(t,(t=>t(...e)));let I,V,E=null,R=!1,M=k;var q=Object.freeze({__proto__:null,get createStringInterpolator(){return I},get to(){return V},get colors(){return E},get skipAnimation(){return R},get willAdvance(){return M},assign:t=>{t.to&&(V=t.to),t.now&&(i.now=t.now),void 0!==t.colors&&(E=t.colors),null!=t.skipAnimation&&(R=t.skipAnimation),t.createStringInterpolator&&(I=t.createStringInterpolator),t.requestAnimationFrame&&i.use(t.requestAnimationFrame),t.batchedUpdates&&(i.batchedUpdates=t.batchedUpdates),t.willAdvance&&(M=t.willAdvance),t.frameLoop&&(i.frameLoop=t.frameLoop)}});const F=new Set;let T=[],z=[],$=0;const N={get idle(){return!F.size&&!T.length},start(t){$>t.priority?(F.add(t),i.onStart(U)):(Q(t),i(D))},advance:D,sort(t){if($)i.onFrame((()=>N.sort(t)));else{const e=T.indexOf(t);~e&&(T.splice(e,1),L(t))}},clear(){T=[],F.clear()}};function U(){F.forEach(Q),F.clear(),i(D)}function Q(t){T.includes(t)||L(t)}function L(t){T.splice(function(e,n){const s=e.findIndex((e=>e.priority>t.priority));return s<0?e.length:s}(T),0,t)}function D(t){const e=z;for(let n=0;n<T.length;n++){const s=T[n];$=s.priority,s.idle||(M(s),s.advance(t),s.idle||e.push(s))}return $=0,z=T,z.length=0,T=e,T.length>0}const G="[-+]?\\d*\\.?\\d+",W=G+"%";function B(...t){return"\\(\\s*("+t.join(")\\s*,\\s*(")+")\\s*\\)"}const Y=new RegExp("rgb"+B(G,G,G)),H=new RegExp("rgba"+B(G,G,G,G)),J=new RegExp("hsl"+B(G,W,W)),X=new RegExp("hsla"+B(G,W,W,G)),Z=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,K=/^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,tt=/^#([0-9a-fA-F]{6})$/,et=/^#([0-9a-fA-F]{8})$/;function nt(t,e,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?t+6*(e-t)*n:n<.5?e:n<2/3?t+(e-t)*(2/3-n)*6:t}function st(t,e,n){const s=n<.5?n*(1+e):n+e-n*e,r=2*n-s,i=nt(r,s,t+1/3),o=nt(r,s,t),a=nt(r,s,t-1/3);return Math.round(255*i)<<24|Math.round(255*o)<<16|Math.round(255*a)<<8}function rt(t){const e=parseInt(t,10);return e<0?0:e>255?255:e}function it(t){return(parseFloat(t)%360+360)%360/360}function ot(t){const e=parseFloat(t);return e<0?0:e>1?255:Math.round(255*e)}function at(t){const e=parseFloat(t);return e<0?0:e>100?1:e/100}function ut(t){let e=function(t){let e;return"number"==typeof t?t>>>0===t&&t>=0&&t<=4294967295?t:null:(e=tt.exec(t))?parseInt(e[1]+"ff",16)>>>0:E&&void 0!==E[t]?E[t]:(e=Y.exec(t))?(rt(e[1])<<24|rt(e[2])<<16|rt(e[3])<<8|255)>>>0:(e=H.exec(t))?(rt(e[1])<<24|rt(e[2])<<16|rt(e[3])<<8|ot(e[4]))>>>0:(e=Z.exec(t))?parseInt(e[1]+e[1]+e[2]+e[2]+e[3]+e[3]+"ff",16)>>>0:(e=et.exec(t))?parseInt(e[1],16)>>>0:(e=K.exec(t))?parseInt(e[1]+e[1]+e[2]+e[2]+e[3]+e[3]+e[4]+e[4],16)>>>0:(e=J.exec(t))?(255|st(it(e[1]),at(e[2]),at(e[3])))>>>0:(e=X.exec(t))?(st(it(e[1]),at(e[2]),at(e[3]))|ot(e[4]))>>>0:null}(t);return null===e?t:(e=e||0,`rgba(${(4278190080&e)>>>24}, ${(16711680&e)>>>16}, ${(65280&e)>>>8}, ${(255&e)/255})`)}const lt=(t,e,n)=>{if(P.fun(t))return t;if(P.arr(t))return lt({range:t,output:e,extrapolate:n});if(P.str(t.output[0]))return I(t);const s=t,r=s.output,i=s.range||[0,1],o=s.extrapolateLeft||s.extrapolate||"extend",a=s.extrapolateRight||s.extrapolate||"extend",u=s.easing||(t=>t);return t=>{const e=function(t,e){for(var n=1;n<e.length-1&&!(e[n]>=t);++n);return n-1}(t,i);return function(t,e,n,s,r,i,o,a,u){let l=u?u(t):t;if(l<e){if("identity"===o)return l;"clamp"===o&&(l=e)}if(l>n){if("identity"===a)return l;"clamp"===a&&(l=n)}return s===r?s:e===n?t<=e?s:r:(e===-1/0?l=-l:n===1/0?l-=e:l=(l-e)/(n-e),l=i(l),s===-1/0?l=-l:r===1/0?l+=s:l=l*(r-s)+s,l)}(t,i[e],i[e+1],r[e],r[e+1],u,o,a,s.map)}};function ct(){return(ct=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t[s]=n[s])}return t}).apply(this,arguments)}const dt=Symbol.for("FluidValue.get"),ht=Symbol.for("FluidValue.observers"),pt=t=>Boolean(t&&t[dt]),ft=t=>t&&t[dt]?t[dt]():t,mt=t=>t[ht]||null;function gt(t,e){let n=t[ht];n&&n.forEach((t=>{!function(t,e){t.eventObserved?t.eventObserved(e):t(e)}(t,e)}))}class yt{constructor(t){if(this[dt]=void 0,this[ht]=void 0,!t&&!(t=this.get))throw Error("Unknown getter");vt(this,t)}}const vt=(t,e)=>wt(t,dt,e);function bt(t,e){if(t[dt]){let n=t[ht];n||wt(t,ht,n=new Set),n.has(e)||(n.add(e),t.observerAdded&&t.observerAdded(n.size,e))}return e}function _t(t,e){let n=t[ht];if(n&&n.has(e)){const s=n.size-1;s?n.delete(e):t[ht]=null,t.observerRemoved&&t.observerRemoved(s,e)}}const wt=(t,e,n)=>Object.defineProperty(t,e,{value:n,writable:!0,configurable:!0}),kt=/[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,Pt=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;let St;const xt=/rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi,At=(t,e,n,s,r)=>`rgba(${Math.round(e)}, ${Math.round(n)}, ${Math.round(s)}, ${r})`,Ot=t=>{St||(St=E?new RegExp(`(${Object.keys(E).join("|")})(?!\\w)`,"g"):/^\b$/);const e=t.output.map((t=>ft(t).replace(Pt,ut).replace(St,ut))),n=e.map((t=>t.match(kt).map(Number))),s=n[0].map(((t,e)=>n.map((t=>{if(!(e in t))throw Error('The arity of each "output" value must be equal');return t[e]})))).map((e=>lt(ct({},t,{output:e}))));return t=>{let n=0;return e[0].replace(kt,(()=>String(s[n++](t)))).replace(xt,At)}},Ct="react-spring: ",jt=t=>{const e=t;let n=!1;if("function"!=typeof e)throw new TypeError(`${Ct}once requires a function parameter`);return(...t)=>{n||(e(...t),n=!0)}},It=jt(console.warn),Vt=jt(console.warn);function Et(t){return P.str(t)&&("#"==t[0]||/\d/.test(t)||t in(E||{}))}const Rt=t=>(0,n.useEffect)(t,Mt),Mt=[];function qt(){const t=(0,n.useState)()[1],e=(0,n.useState)(Ft)[0];return Rt(e.unmount),()=>{e.current&&t({})}}function Ft(){const t={current:!0,unmount:()=>()=>{t.current=!1}};return t}function Tt(t){const e=(0,n.useRef)();return(0,n.useEffect)((()=>{e.current=t})),e.current}const zt="undefined"!=typeof window&&window.document&&window.document.createElement?n.useLayoutEffect:n.useEffect,$t=Symbol.for("Animated:node"),Nt=t=>t&&t[$t],Ut=(t,e)=>{return n=t,s=$t,r=e,Object.defineProperty(n,s,{value:r,writable:!0,configurable:!0});var n,s,r},Qt=t=>t&&t[$t]&&t[$t].getPayload();class Lt{constructor(){this.payload=void 0,Ut(this,this)}getPayload(){return this.payload||[]}}class Dt extends Lt{constructor(t){super(),this.done=!0,this.elapsedTime=void 0,this.lastPosition=void 0,this.lastVelocity=void 0,this.v0=void 0,this.durationProgress=0,this._value=t,P.num(this._value)&&(this.lastPosition=this._value)}static create(t){return new Dt(t)}getPayload(){return[this]}getValue(){return this._value}setValue(t,e){return P.num(t)&&(this.lastPosition=t,e&&(t=Math.round(t/e)*e,this.done&&(this.lastPosition=t))),this._value!==t&&(this._value=t,!0)}reset(){const{done:t}=this;this.done=!1,P.num(this._value)&&(this.elapsedTime=0,this.durationProgress=0,this.lastPosition=this._value,t&&(this.lastVelocity=null),this.v0=null)}}class Gt extends Dt{constructor(t){super(0),this._string=null,this._toString=void 0,this._toString=lt({output:[t,t]})}static create(t){return new Gt(t)}getValue(){let t=this._string;return null==t?this._string=this._toString(this._value):t}setValue(t){if(P.str(t)){if(t==this._string)return!1;this._string=t,this._value=1}else{if(!super.setValue(t))return!1;this._string=null}return!0}reset(t){t&&(this._toString=lt({output:[this.getValue(),t]})),this._value=0,super.reset()}}const Wt={dependencies:null};class Bt extends Lt{constructor(t){super(),this.source=t,this.setValue(t)}getValue(t){const e={};return A(this.source,((n,s)=>{var r;(r=n)&&r[$t]===r?e[s]=n.getValue(t):pt(n)?e[s]=ft(n):t||(e[s]=n)})),e}setValue(t){this.source=t,this.payload=this._makePayload(t)}reset(){this.payload&&x(this.payload,(t=>t.reset()))}_makePayload(t){if(t){const e=new Set;return A(t,this._addToPayload,e),Array.from(e)}}_addToPayload(t){Wt.dependencies&&pt(t)&&Wt.dependencies.add(t);const e=Qt(t);e&&x(e,(t=>this.add(t)))}}class Yt extends Bt{constructor(t){super(t)}static create(t){return new Yt(t)}getValue(){return this.source.map((t=>t.getValue()))}setValue(t){const e=this.getPayload();return t.length==e.length?e.map(((e,n)=>e.setValue(t[n]))).some(Boolean):(super.setValue(t.map(Ht)),!0)}}function Ht(t){return(Et(t)?Gt:Dt).create(t)}function Jt(t){const e=Nt(t);return e?e.constructor:P.arr(t)?Yt:Et(t)?Gt:Dt}function Xt(){return(Xt=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t[s]=n[s])}return t}).apply(this,arguments)}const Zt=(t,e)=>{const s=!P.fun(t)||t.prototype&&t.prototype.isReactComponent;return(0,n.forwardRef)(((r,o)=>{const a=(0,n.useRef)(null),u=s&&(0,n.useCallback)((t=>{a.current=function(t,e){return t&&(P.fun(t)?t(e):t.current=e),e}(o,t)}),[o]),[l,c]=function(t,e){const n=new Set;return Wt.dependencies=n,t.style&&(t=Xt({},t,{style:e.createAnimatedStyle(t.style)})),t=new Bt(t),Wt.dependencies=null,[t,n]}(r,e),d=qt(),h=()=>{const t=a.current;s&&!t||!1===(!!t&&e.applyAnimatedValues(t,l.getValue(!0)))&&d()},p=new Kt(h,c),f=(0,n.useRef)();zt((()=>{const t=f.current;f.current=p,x(c,(t=>bt(t,p))),t&&(x(t.deps,(e=>_t(e,t))),i.cancel(t.update))})),(0,n.useEffect)(h,[]),Rt((()=>()=>{const t=f.current;x(t.deps,(e=>_t(e,t)))}));const m=e.getComponentProps(l.getValue());return n.createElement(t,Xt({},m,{ref:u}))}))};class Kt{constructor(t,e){this.update=t,this.deps=e}eventObserved(t){"change"==t.type&&i.write(this.update)}}const te=Symbol.for("AnimatedComponent"),ee=t=>P.str(t)?t:t&&P.str(t.displayName)?t.displayName:P.fun(t)&&t.name||null;function ne(){return(ne=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t[s]=n[s])}return t}).apply(this,arguments)}function se(t,...e){return P.fun(t)?t(...e):t}const re=(t,e)=>!0===t||!!(e&&t&&(P.fun(t)?t(e):O(t).includes(e))),ie=(t,e)=>P.obj(t)?e&&t[e]:t,oe=(t,e)=>!0===t.default?t[e]:t.default?t.default[e]:void 0,ae=t=>t,ue=(t,e=ae)=>{let n=le;t.default&&!0!==t.default&&(t=t.default,n=Object.keys(t));const s={};for(const r of n){const n=e(t[r],r);P.und(n)||(s[r]=n)}return s},le=["config","onProps","onStart","onChange","onPause","onResume","onRest"],ce={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 de(t){const e=function(t){const e={};let n=0;if(A(t,((t,s)=>{ce[s]||(e[s]=t,n++)})),n)return e}(t);if(e){const n={to:e};return A(t,((t,s)=>s in e||(n[s]=t))),n}return ne({},t)}function he(t){return t=ft(t),P.arr(t)?t.map(he):Et(t)?q.createStringInterpolator({range:[0,1],output:[t,t]})(1):t}function pe(t){for(const e in t)return!0;return!1}function fe(t){return P.fun(t)||P.arr(t)&&P.obj(t[0])}function me(t,e){var n;null==(n=t.ref)||n.delete(t),null==e||e.delete(t)}function ge(t,e){var n;e&&t.ref!==e&&(null==(n=t.ref)||n.delete(t),e.add(t),t.ref=e)}const ye=ne({},{tension:170,friction:26},{mass:1,damping:1,easing:t=>t,clamp:!1});class ve{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,ye)}}function be(t,e){if(P.und(e.decay)){const n=!P.und(e.tension)||!P.und(e.friction);!n&&P.und(e.frequency)&&P.und(e.damping)&&P.und(e.mass)||(t.duration=void 0,t.decay=void 0),n&&(t.frequency=void 0)}else t.duration=void 0}const _e=[];class we{constructor(){this.changed=!1,this.values=_e,this.toValues=null,this.fromValues=_e,this.to=void 0,this.from=void 0,this.config=new ve,this.immediate=!1}}function ke(t,{key:e,props:n,defaultProps:s,state:r,actions:o}){return new Promise(((a,u)=>{var l;let c,d,h=re(null!=(l=n.cancel)?l:null==s?void 0:s.cancel,e);if(h)m();else{P.und(n.pause)||(r.paused=re(n.pause,e));let t=null==s?void 0:s.pause;!0!==t&&(t=r.paused||re(t,e)),c=se(n.delay||0,e),t?(r.resumeQueue.add(f),o.pause()):(o.resume(),f())}function p(){r.resumeQueue.add(f),r.timeouts.delete(d),d.cancel(),c=d.time-i.now()}function f(){c>0?(d=i.setTimeout(m,c),r.pauseQueue.add(p),r.timeouts.add(d)):m()}function m(){r.pauseQueue.delete(p),r.timeouts.delete(d),t<=(r.cancelId||0)&&(h=!0);try{o.start(ne({},n,{callId:t,cancel:h}),a)}catch(t){u(t)}}}))}const Pe=(t,e)=>1==e.length?e[0]:e.some((t=>t.cancelled))?Ae(t.get()):e.every((t=>t.noop))?Se(t.get()):xe(t.get(),e.every((t=>t.finished))),Se=t=>({value:t,noop:!0,finished:!0,cancelled:!1}),xe=(t,e,n=!1)=>({value:t,finished:e,cancelled:n}),Ae=t=>({value:t,cancelled:!0,finished:!1});function Oe(t,e,n,s){const{callId:r,parentId:o,onRest:a}=e,{asyncTo:u,promise:l}=n;return o||t!==u||e.reset?n.promise=(async()=>{n.asyncId=r,n.asyncTo=t;const c=ue(e,((t,e)=>"onRest"===e?void 0:t));let d,h;const p=new Promise(((t,e)=>(d=t,h=e))),f=t=>{const e=r<=(n.cancelId||0)&&Ae(s)||r!==n.asyncId&&xe(s,!1);if(e)throw t.result=e,h(t),t},m=(t,e)=>{const i=new je,o=new Ie;return(async()=>{if(q.skipAnimation)throw Ce(n),o.result=xe(s,!1),h(o),o;f(i);const a=P.obj(t)?ne({},t):ne({},e,{to:t});a.parentId=r,A(c,((t,e)=>{P.und(a[e])&&(a[e]=t)}));const u=await s.start(a);return f(i),n.paused&&await new Promise((t=>{n.resumeQueue.add(t)})),u})()};let g;if(q.skipAnimation)return Ce(n),xe(s,!1);try{let e;e=P.arr(t)?(async t=>{for(const e of t)await m(e)})(t):Promise.resolve(t(m,s.stop.bind(s))),await Promise.all([e.then(d),p]),g=xe(s.get(),!0,!1)}catch(t){if(t instanceof je)g=t.result;else{if(!(t instanceof Ie))throw t;g=t.result}}finally{r==n.asyncId&&(n.asyncId=o,n.asyncTo=o?u:void 0,n.promise=o?l:void 0)}return P.fun(a)&&i.batchedUpdates((()=>{a(g,s,s.item)})),g})():l}function Ce(t,e){C(t.timeouts,(t=>t.cancel())),t.pauseQueue.clear(),t.resumeQueue.clear(),t.asyncId=t.asyncTo=t.promise=void 0,e&&(t.cancelId=e)}class je 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 Ie extends Error{constructor(){super("SkipAnimationSignal"),this.result=void 0}}const Ve=t=>t instanceof Re;let Ee=1;class Re extends yt{constructor(...t){super(...t),this.id=Ee++,this.key=void 0,this._priority=0}get priority(){return this._priority}set priority(t){this._priority!=t&&(this._priority=t,this._onPriorityChange(t))}get(){const t=Nt(this);return t&&t.getValue()}to(...t){return q.to(this,t)}interpolate(...t){return It(`${Ct}The "interpolate" function is deprecated in v9 (use "to" instead)`),q.to(this,t)}toJSON(){return this.get()}observerAdded(t){1==t&&this._attach()}observerRemoved(t){0==t&&this._detach()}_attach(){}_detach(){}_onChange(t,e=!1){gt(this,{type:"change",parent:this,value:t,idle:e})}_onPriorityChange(t){this.idle||N.sort(this),gt(this,{type:"priority",parent:this,priority:t})}}const Me=Symbol.for("SpringPhase"),qe=t=>(1&t[Me])>0,Fe=t=>(2&t[Me])>0,Te=t=>(4&t[Me])>0,ze=(t,e)=>e?t[Me]|=3:t[Me]&=-3,$e=(t,e)=>e?t[Me]|=4:t[Me]&=-5;class Ne extends Re{constructor(t,e){if(super(),this.key=void 0,this.animation=new we,this.queue=void 0,this.defaultProps={},this._state={paused:!1,pauseQueue:new Set,resumeQueue:new Set,timeouts:new Set},this._pendingCalls=new Set,this._lastCallId=0,this._lastToId=0,this._memoizedDuration=0,!P.und(t)||!P.und(e)){const n=P.obj(t)?ne({},t):ne({},e,{from:t});P.und(n.default)&&(n.default=!0),this.start(n)}}get idle(){return!(Fe(this)||this._state.asyncTo)||Te(this)}get goal(){return ft(this.animation.to)}get velocity(){const t=Nt(this);return t instanceof Dt?t.lastVelocity||0:t.getPayload().map((t=>t.lastVelocity||0))}get hasAnimated(){return qe(this)}get isAnimating(){return Fe(this)}get isPaused(){return Te(this)}advance(t){let e=!0,n=!1;const s=this.animation;let{config:r,toValues:i}=s;const o=Qt(s.to);!o&&pt(s.to)&&(i=O(ft(s.to))),s.values.forEach(((a,u)=>{if(a.done)return;const l=a.constructor==Gt?1:o?o[u].lastPosition:i[u];let c=s.immediate,d=l;if(!c){if(d=a.lastPosition,r.tension<=0)return void(a.done=!0);let e=a.elapsedTime+=t;const n=s.fromValues[u],i=null!=a.v0?a.v0:a.v0=P.arr(r.velocity)?r.velocity[u]:r.velocity;let o;if(P.und(r.duration))if(r.decay){const t=!0===r.decay?.998:r.decay,s=Math.exp(-(1-t)*e);d=n+i/(1-t)*(1-s),c=Math.abs(a.lastPosition-d)<.1,o=i*s}else{o=null==a.lastVelocity?i:a.lastVelocity;const e=r.precision||(n==l?.005:Math.min(1,.001*Math.abs(l-n))),s=r.restVelocity||e/10,u=r.clamp?0:r.bounce,h=!P.und(u),p=n==l?a.v0>0:n<l;let f,m=!1;const g=1,y=Math.ceil(t/g);for(let t=0;t<y&&(f=Math.abs(o)>s,f||(c=Math.abs(l-d)<=e,!c));++t)h&&(m=d==l||d>l==p,m&&(o=-o*u,d=l)),o+=(1e-6*-r.tension*(d-l)+.001*-r.friction*o)/r.mass*g,d+=o*g}else{let s=1;r.duration>0&&(this._memoizedDuration!==r.duration&&(this._memoizedDuration=r.duration,a.durationProgress>0&&(a.elapsedTime=r.duration*a.durationProgress,e=a.elapsedTime+=t)),s=(r.progress||0)+e/this._memoizedDuration,s=s>1?1:s<0?0:s,a.durationProgress=s),d=n+r.easing(s)*(l-n),o=(d-a.lastPosition)/t,c=1==s}a.lastVelocity=o,Number.isNaN(d)&&(console.warn("Got NaN while animating:",this),c=!0)}o&&!o[u].done&&(c=!1),c?a.done=!0:e=!1,a.setValue(d,r.round)&&(n=!0)}));const a=Nt(this),u=a.getValue();if(e){const t=ft(s.to);u===t&&!n||r.decay?n&&r.decay&&this._onChange(u):(a.setValue(t),this._onChange(t)),this._stop()}else n&&this._onChange(u)}set(t){return i.batchedUpdates((()=>{this._stop(),this._focus(t),this._set(t)})),this}pause(){this._update({pause:!0})}resume(){this._update({pause:!1})}finish(){if(Fe(this)){const{to:t,config:e}=this.animation;i.batchedUpdates((()=>{this._onStart(),e.decay||this._set(t,!1),this._stop()}))}return this}update(t){return(this.queue||(this.queue=[])).push(t),this}start(t,e){let n;return P.und(t)?(n=this.queue||[],this.queue=[]):n=[P.obj(t)?t:ne({},e,{to:t})],Promise.all(n.map((t=>this._update(t)))).then((t=>Pe(this,t)))}stop(t){const{to:e}=this.animation;return this._focus(this.get()),Ce(this._state,t&&this._lastCallId),i.batchedUpdates((()=>this._stop(e,t))),this}reset(){this._update({reset:!0})}eventObserved(t){"change"==t.type?this._start():"priority"==t.type&&(this.priority=t.priority+1)}_prepareNode(t){const e=this.key||"";let{to:n,from:s}=t;n=P.obj(n)?n[e]:n,(null==n||fe(n))&&(n=void 0),s=P.obj(s)?s[e]:s,null==s&&(s=void 0);const r={to:n,from:s};return qe(this)||(t.reverse&&([n,s]=[s,n]),s=ft(s),P.und(s)?Nt(this)||this._set(n):this._set(s)),r}_update(t,e){let n=ne({},t);const{key:s,defaultProps:r}=this;n.default&&Object.assign(r,ue(n,((t,e)=>/^on/.test(e)?ie(t,s):t))),Be(this,n,"onProps"),Ye(this,"onProps",n,this);const i=this._prepareNode(n);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 o=this._state;return ke(++this._lastCallId,{key:s,props:n,defaultProps:r,state:o,actions:{pause:()=>{Te(this)||($e(this,!0),j(o.pauseQueue),Ye(this,"onPause",xe(this,Ue(this,this.animation.to)),this))},resume:()=>{Te(this)&&($e(this,!1),Fe(this)&&this._resume(),j(o.resumeQueue),Ye(this,"onResume",xe(this,Ue(this,this.animation.to)),this))},start:this._merge.bind(this,i)}}).then((t=>{if(n.loop&&t.finished&&(!e||!t.noop)){const t=Qe(n);if(t)return this._update(t,!0)}return t}))}_merge(t,e,n){if(e.cancel)return this.stop(!0),n(Ae(this));const s=!P.und(t.to),r=!P.und(t.from);if(s||r){if(!(e.callId>this._lastToId))return n(Ae(this));this._lastToId=e.callId}const{key:o,defaultProps:a,animation:u}=this,{to:l,from:c}=u;let{to:d=l,from:h=c}=t;!r||s||e.default&&!P.und(d)||(d=h),e.reverse&&([d,h]=[h,d]);const p=!S(h,c);p&&(u.from=h),h=ft(h);const f=!S(d,l);f&&this._focus(d);const m=fe(e.to),{config:g}=u,{decay:y,velocity:v}=g;(s||r)&&(g.velocity=0),e.config&&!m&&function(t,e,n){n&&(be(n=ne({},n),e),e=ne({},n,e)),be(t,e),Object.assign(t,e);for(const e in ye)null==t[e]&&(t[e]=ye[e]);let{mass:s,frequency:r,damping:i}=t;P.und(r)||(r<.01&&(r=.01),i<0&&(i=0),t.tension=Math.pow(2*Math.PI/r,2)*s,t.friction=4*Math.PI*i*s/r)}(g,se(e.config,o),e.config!==a.config?se(a.config,o):void 0);let b=Nt(this);if(!b||P.und(d))return n(xe(this,!0));const _=P.und(e.reset)?r&&!e.default:!P.und(h)&&re(e.reset,o),w=_?h:this.get(),k=he(d),A=P.num(k)||P.arr(k)||Et(k),C=!m&&(!A||re(a.immediate||e.immediate,o));if(f){const t=Jt(d);if(t!==b.constructor){if(!C)throw Error(`Cannot animate between ${b.constructor.name} and ${t.name}, as the "to" prop suggests`);b=this._set(k)}}const I=b.constructor;let V=pt(d),E=!1;if(!V){const t=_||!qe(this)&&p;(f||t)&&(E=S(he(w),k),V=!E),(S(u.immediate,C)||C)&&S(g.decay,y)&&S(g.velocity,v)||(V=!0)}if(E&&Fe(this)&&(u.changed&&!_?V=!0:V||this._stop(l)),!m&&((V||pt(l))&&(u.values=b.getPayload(),u.toValues=pt(d)?null:I==Gt?[1]:O(k)),u.immediate!=C&&(u.immediate=C,C||_||this._set(l)),V)){const{onRest:t}=u;x(We,(t=>Be(this,e,t)));const s=xe(this,Ue(this,l));j(this._pendingCalls,s),this._pendingCalls.add(n),u.changed&&i.batchedUpdates((()=>{u.changed=!_,null==t||t(s,this),_?se(a.onRest,s):null==u.onStart||u.onStart(s,this)}))}_&&this._set(w),m?n(Oe(e.to,e,this._state,this)):V?this._start():Fe(this)&&!f?this._pendingCalls.add(n):n(Se(w))}_focus(t){const e=this.animation;t!==e.to&&(mt(this)&&this._detach(),e.to=t,mt(this)&&this._attach())}_attach(){let t=0;const{to:e}=this.animation;pt(e)&&(bt(e,this),Ve(e)&&(t=e.priority+1)),this.priority=t}_detach(){const{to:t}=this.animation;pt(t)&&_t(t,this)}_set(t,e=!0){const n=ft(t);if(!P.und(n)){const t=Nt(this);if(!t||!S(n,t.getValue())){const s=Jt(n);t&&t.constructor==s?t.setValue(n):Ut(this,s.create(n)),t&&i.batchedUpdates((()=>{this._onChange(n,e)}))}}return Nt(this)}_onStart(){const t=this.animation;t.changed||(t.changed=!0,Ye(this,"onStart",xe(this,Ue(this,t.to)),this))}_onChange(t,e){e||(this._onStart(),se(this.animation.onChange,t,this)),se(this.defaultProps.onChange,t,this),super._onChange(t,e)}_start(){const t=this.animation;Nt(this).reset(ft(t.to)),t.immediate||(t.fromValues=t.values.map((t=>t.lastPosition))),Fe(this)||(ze(this,!0),Te(this)||this._resume())}_resume(){q.skipAnimation?this.finish():N.start(this)}_stop(t,e){if(Fe(this)){ze(this,!1);const n=this.animation;x(n.values,(t=>{t.done=!0})),n.toValues&&(n.onChange=n.onPause=n.onResume=void 0),gt(this,{type:"idle",parent:this});const s=e?Ae(this.get()):xe(this.get(),Ue(this,null!=t?t:n.to));j(this._pendingCalls,s),n.changed&&(n.changed=!1,Ye(this,"onRest",s,this))}}}function Ue(t,e){const n=he(e);return S(he(t.get()),n)}function Qe(t,e=t.loop,n=t.to){let s=se(e);if(s){const r=!0!==s&&de(s),i=(r||t).reverse,o=!r||r.reset;return Le(ne({},t,{loop:e,default:!1,pause:void 0,to:!i||fe(n)?n:void 0,from:o?t.from:void 0,reset:o},r))}}function Le(t){const{to:e,from:n}=t=de(t),s=new Set;return P.obj(e)&&Ge(e,s),P.obj(n)&&Ge(n,s),t.keys=s.size?Array.from(s):null,t}function De(t){const e=Le(t);return P.und(e.default)&&(e.default=ue(e)),e}function Ge(t,e){A(t,((t,n)=>null!=t&&e.add(n)))}const We=["onStart","onRest","onChange","onPause","onResume"];function Be(t,e,n){t.animation[n]=e[n]!==oe(e,n)?ie(e[n],t.key):void 0}function Ye(t,e,...n){var s,r,i,o;null==(s=(r=t.animation)[e])||s.call(r,...n),null==(i=(o=t.defaultProps)[e])||i.call(o,...n)}const He=["onStart","onChange","onRest"];let Je=1;class Xe{constructor(t,e){this.id=Je++,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=!1,this._item=void 0,this._state={paused:!1,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),e&&(this._flush=e),t&&this.start(ne({default:!0},t))}get idle(){return!this._state.asyncTo&&Object.values(this.springs).every((t=>t.idle))}get item(){return this._item}set item(t){this._item=t}get(){const t={};return this.each(((e,n)=>t[n]=e.get())),t}set(t){for(const e in t){const n=t[e];P.und(n)||this.springs[e].set(n)}}update(t){return t&&this.queue.push(Le(t)),this}start(t){let{queue:e}=this;return t?e=O(t).map(Le):this.queue=[],this._flush?this._flush(this,e):(rn(this,e),Ze(this,e))}stop(t,e){if(t!==!!t&&(e=t),e){const n=this.springs;x(O(e),(e=>n[e].stop(!!t)))}else Ce(this._state,this._lastAsyncId),this.each((e=>e.stop(!!t)));return this}pause(t){if(P.und(t))this.start({pause:!0});else{const e=this.springs;x(O(t),(t=>e[t].pause()))}return this}resume(t){if(P.und(t))this.start({pause:!1});else{const e=this.springs;x(O(t),(t=>e[t].resume()))}return this}each(t){A(this.springs,t)}_onFrame(){const{onStart:t,onChange:e,onRest:n}=this._events,s=this._active.size>0,r=this._changed.size>0;(s&&!this._started||r&&!this._started)&&(this._started=!0,C(t,(([t,e])=>{e.value=this.get(),t(e,this,this._item)})));const i=!s&&this._started,o=r||i&&n.size?this.get():null;r&&e.size&&C(e,(([t,e])=>{e.value=o,t(e,this,this._item)})),i&&(this._started=!1,C(n,(([t,e])=>{e.value=o,t(e,this,this._item)})))}eventObserved(t){if("change"==t.type)this._changed.add(t.parent),t.idle||this._active.add(t.parent);else{if("idle"!=t.type)return;this._active.delete(t.parent)}i.onFrame(this._onFrame)}}function Ze(t,e){return Promise.all(e.map((e=>Ke(t,e)))).then((e=>Pe(t,e)))}async function Ke(t,e,n){const{keys:s,to:r,from:o,loop:a,onRest:u,onResolve:l}=e,c=P.obj(e.default)&&e.default;a&&(e.loop=!1),!1===r&&(e.to=null),!1===o&&(e.from=null);const d=P.arr(r)||P.fun(r)?r:void 0;d?(e.to=void 0,e.onRest=void 0,c&&(c.onRest=void 0)):x(He,(n=>{const s=e[n];if(P.fun(s)){const r=t._events[n];e[n]=({finished:t,cancelled:e})=>{const n=r.get(s);n?(t||(n.finished=!1),e&&(n.cancelled=!0)):r.set(s,{value:null,finished:t||!1,cancelled:e||!1})},c&&(c[n]=e[n])}}));const h=t._state;e.pause===!h.paused?(h.paused=e.pause,j(e.pause?h.pauseQueue:h.resumeQueue)):h.paused&&(e.pause=!0);const p=(s||Object.keys(t.springs)).map((n=>t.springs[n].start(e))),f=!0===e.cancel||!0===oe(e,"cancel");(d||f&&h.asyncId)&&p.push(ke(++t._lastAsyncId,{props:e,state:h,actions:{pause:k,resume:k,start(e,n){f?(Ce(h,t._lastAsyncId),n(Ae(t))):(e.onRest=u,n(Oe(d,e,h,t)))}}})),h.paused&&await new Promise((t=>{h.resumeQueue.add(t)}));const m=Pe(t,await Promise.all(p));if(a&&m.finished&&(!n||!m.noop)){const n=Qe(e,a,r);if(n)return rn(t,[n]),Ke(t,n,!0)}return l&&i.batchedUpdates((()=>l(m,t,t.item))),m}function tn(t,e){const n=ne({},t.springs);return e&&x(O(e),(t=>{P.und(t.keys)&&(t=Le(t)),P.obj(t.to)||(t=ne({},t,{to:void 0})),sn(n,t,(t=>nn(t)))})),en(t,n),n}function en(t,e){A(e,((e,n)=>{t.springs[n]||(t.springs[n]=e,bt(e,t))}))}function nn(t,e){const n=new Ne;return n.key=t,e&&bt(n,e),n}function sn(t,e,n){e.keys&&x(e.keys,(s=>{(t[s]||(t[s]=n(s)))._prepareNode(e)}))}function rn(t,e){x(e,(e=>{sn(t.springs,e,(e=>nn(e,t)))}))}function on(t,e){if(null==t)return{};var n,s,r={},i=Object.keys(t);for(s=0;s<i.length;s++)n=i[s],e.indexOf(n)>=0||(r[n]=t[n]);return r}const an=["children"],un=t=>{let{children:e}=t,s=on(t,an);const r=(0,n.useContext)(ln),i=s.pause||!!r.pause,o=s.immediate||!!r.immediate;s=function(t,e){const[s]=(0,n.useState)((()=>({inputs:e,result:t()}))),r=(0,n.useRef)(),i=r.current;let o=i;return o?Boolean(e&&o.inputs&&function(t,e){if(t.length!==e.length)return!1;for(let n=0;n<t.length;n++)if(t[n]!==e[n])return!1;return!0}(e,o.inputs))||(o={inputs:e,result:t()}):o=s,(0,n.useEffect)((()=>{r.current=o,i==s&&(s.inputs=s.result=void 0)}),[o]),o.result}((()=>({pause:i,immediate:o})),[i,o]);const{Provider:a}=ln;return n.createElement(a,{value:s},e)},ln=(cn=un,dn={},Object.assign(cn,n.createContext(dn)),cn.Provider._context=cn,cn.Consumer._context=cn,cn);var cn,dn;un.Provider=ln.Provider,un.Consumer=ln.Consumer;const hn=()=>{const t=[],e=function(e){Vt(`${Ct}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`);const s=[];return x(t,((t,r)=>{if(P.und(e))s.push(t.start());else{const i=n(e,t,r);i&&s.push(t.start(i))}})),s};e.current=t,e.add=function(e){t.includes(e)||t.push(e)},e.delete=function(e){const n=t.indexOf(e);~n&&t.splice(n,1)},e.pause=function(){return x(t,(t=>t.pause(...arguments))),this},e.resume=function(){return x(t,(t=>t.resume(...arguments))),this},e.set=function(e){x(t,(t=>t.set(e)))},e.start=function(e){const n=[];return x(t,((t,s)=>{if(P.und(e))n.push(t.start());else{const r=this._getProps(e,t,s);r&&n.push(t.start(r))}})),n},e.stop=function(){return x(t,(t=>t.stop(...arguments))),this},e.update=function(e){return x(t,((t,n)=>t.update(this._getProps(e,t,n)))),this};const n=function(t,e,n){return P.fun(t)?t(n,e):t};return e._getProps=n,e};function pn(t,e,s){const r=P.fun(e)&&e;r&&!s&&(s=[]);const i=(0,n.useMemo)((()=>r||3==arguments.length?hn():void 0),[]),o=(0,n.useRef)(0),a=qt(),u=(0,n.useMemo)((()=>({ctrls:[],queue:[],flush(t,e){const n=tn(t,e);return o.current>0&&!u.queue.length&&!Object.keys(n).some((e=>!t.springs[e]))?Ze(t,e):new Promise((s=>{en(t,n),u.queue.push((()=>{s(Ze(t,e))})),a()}))}})),[]),l=(0,n.useRef)([...u.ctrls]),c=[],d=Tt(t)||0,h=l.current.slice(t,d);function p(t,n){for(let s=t;s<n;s++){const t=l.current[s]||(l.current[s]=new Xe(null,u.flush)),n=r?r(s,t):e[s];n&&(c[s]=De(n))}}(0,n.useMemo)((()=>{l.current.length=t,p(d,t)}),[t]),(0,n.useMemo)((()=>{p(0,Math.min(d,t))}),s);const f=l.current.map(((t,e)=>tn(t,c[e]))),m=(0,n.useContext)(un),g=Tt(m),y=m!==g&&pe(m);zt((()=>{o.current++,u.ctrls=l.current;const{queue:t}=u;t.length&&(u.queue=[],x(t,(t=>t()))),x(h,(t=>{me(t,i),t.stop(!0)})),x(l.current,((t,e)=>{null==i||i.add(t),y&&t.start({default:m});const n=c[e];n&&(ge(t,n.ref),t.ref?t.queue.push(n):t.start(n))}))})),Rt((()=>()=>{x(u.ctrls,(t=>t.stop(!0)))}));const v=f.map((t=>ne({},t)));return i?[v,i]:v}let fn;!function(t){t.MOUNT="mount",t.ENTER="enter",t.UPDATE="update",t.LEAVE="leave"}(fn||(fn={}));const mn=["children"];function gn(t){let{children:e}=t;return e(function(t,e){const n=P.fun(t),[[s],r]=pn(1,n?t:[t],n?e||[]:e);return n||2==arguments.length?[s,r]:s}(on(t,mn)))}class yn extends Re{constructor(t,e){super(),this.key=void 0,this.idle=!0,this.calc=void 0,this._active=new Set,this.source=t,this.calc=lt(...e);const n=this._get(),s=Jt(n);Ut(this,s.create(n))}advance(t){const e=this._get();S(e,this.get())||(Nt(this).setValue(e),this._onChange(e,this.idle)),!this.idle&&bn(this._active)&&_n(this)}_get(){const t=P.arr(this.source)?this.source.map(ft):O(ft(this.source));return this.calc(...t)}_start(){this.idle&&!bn(this._active)&&(this.idle=!1,x(Qt(this),(t=>{t.done=!1})),q.skipAnimation?(i.batchedUpdates((()=>this.advance())),_n(this)):N.start(this))}_attach(){let t=1;x(O(this.source),(e=>{pt(e)&&bt(e,this),Ve(e)&&(e.idle||this._active.add(e),t=Math.max(t,e.priority+1))})),this.priority=t,this._start()}_detach(){x(O(this.source),(t=>{pt(t)&&_t(t,this)})),this._active.clear(),_n(this)}eventObserved(t){"change"==t.type?t.idle?this.advance():(this._active.add(t.parent),this._start()):"idle"==t.type?this._active.delete(t.parent):"priority"==t.type&&(this.priority=O(this.source).reduce(((t,e)=>Math.max(t,(Ve(e)?e.priority:0)+1)),0))}}function vn(t){return!1!==t.idle}function bn(t){return!t.size||Array.from(t).every(vn)}function _n(t){t.idle||(t.idle=!0,x(Qt(t),(t=>{t.done=!0})),gt(t,{type:"idle",parent:t}))}q.assign({createStringInterpolator:Ot,to:(t,e)=>new yn(t,e)}),N.advance;const wn=require("react-dom");function kn(t,e){if(null==t)return{};var n,s,r={},i=Object.keys(t);for(s=0;s<i.length;s++)n=i[s],e.indexOf(n)>=0||(r[n]=t[n]);return r}const Pn=["style","children","scrollTop","scrollLeft"],Sn=/^--/;function xn(t,e){return null==e||"boolean"==typeof e||""===e?"":"number"!=typeof e||0===e||Sn.test(t)||On.hasOwnProperty(t)&&On[t]?(""+e).trim():e+"px"}const An={};let On={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0};const Cn=["Webkit","Ms","Moz","O"];On=Object.keys(On).reduce(((t,e)=>(Cn.forEach((n=>t[((t,e)=>t+e.charAt(0).toUpperCase()+e.substring(1))(n,e)]=t[e])),t)),On);const jn=["x","y","z"],In=/^(matrix|translate|scale|rotate|skew)/,Vn=/^(translate)/,En=/^(rotate|skew)/,Rn=(t,e)=>P.num(t)&&0!==t?t+e:t,Mn=(t,e)=>P.arr(t)?t.every((t=>Mn(t,e))):P.num(t)?t===e:parseFloat(t)===e;class qn extends Bt{constructor(t){let{x:e,y:n,z:s}=t,r=kn(t,jn);const i=[],o=[];(e||n||s)&&(i.push([e||0,n||0,s||0]),o.push((t=>[`translate3d(${t.map((t=>Rn(t,"px"))).join(",")})`,Mn(t,0)]))),A(r,((t,e)=>{if("transform"===e)i.push([t||""]),o.push((t=>[t,""===t]));else if(In.test(e)){if(delete r[e],P.und(t))return;const n=Vn.test(e)?"px":En.test(e)?"deg":"";i.push(O(t)),o.push("rotate3d"===e?([t,e,s,r])=>[`rotate3d(${t},${e},${s},${Rn(r,n)})`,Mn(r,0)]:t=>[`${e}(${t.map((t=>Rn(t,n))).join(",")})`,Mn(t,e.startsWith("scale")?1:0)])}})),i.length&&(r.transform=new Fn(i,o)),super(r)}}class Fn extends yt{constructor(t,e){super(),this._value=null,this.inputs=t,this.transforms=e}get(){return this._value||(this._value=this._get())}_get(){let t="",e=!0;return x(this.inputs,((n,s)=>{const r=ft(n[0]),[i,o]=this.transforms[s](P.arr(r)?r:n.map(ft));t+=" "+i,e=e&&o})),e?"none":t}observerAdded(t){1==t&&x(this.inputs,(t=>x(t,(t=>pt(t)&&bt(t,this)))))}observerRemoved(t){0==t&&x(this.inputs,(t=>x(t,(t=>pt(t)&&_t(t,this)))))}eventObserved(t){"change"==t.type&&(this._value=null),gt(this,t)}}const Tn=["scrollTop","scrollLeft"];q.assign({batchedUpdates:wn.unstable_batchedUpdates,createStringInterpolator:Ot,colors:{transparent:0,aliceblue:4042850303,antiquewhite:4209760255,aqua:16777215,aquamarine:2147472639,azure:4043309055,beige:4126530815,bisque:4293182719,black:255,blanchedalmond:4293643775,blue:65535,blueviolet:2318131967,brown:2771004159,burlywood:3736635391,burntsienna:3934150143,cadetblue:1604231423,chartreuse:2147418367,chocolate:3530104575,coral:4286533887,cornflowerblue:1687547391,cornsilk:4294499583,crimson:3692313855,cyan:16777215,darkblue:35839,darkcyan:9145343,darkgoldenrod:3095792639,darkgray:2846468607,darkgreen:6553855,darkgrey:2846468607,darkkhaki:3182914559,darkmagenta:2332068863,darkolivegreen:1433087999,darkorange:4287365375,darkorchid:2570243327,darkred:2332033279,darksalmon:3918953215,darkseagreen:2411499519,darkslateblue:1211993087,darkslategray:793726975,darkslategrey:793726975,darkturquoise:13554175,darkviolet:2483082239,deeppink:4279538687,deepskyblue:12582911,dimgray:1768516095,dimgrey:1768516095,dodgerblue:512819199,firebrick:2988581631,floralwhite:4294635775,forestgreen:579543807,fuchsia:4278255615,gainsboro:3705462015,ghostwhite:4177068031,gold:4292280575,goldenrod:3668254975,gray:2155905279,green:8388863,greenyellow:2919182335,grey:2155905279,honeydew:4043305215,hotpink:4285117695,indianred:3445382399,indigo:1258324735,ivory:4294963455,khaki:4041641215,lavender:3873897215,lavenderblush:4293981695,lawngreen:2096890111,lemonchiffon:4294626815,lightblue:2916673279,lightcoral:4034953471,lightcyan:3774873599,lightgoldenrodyellow:4210742015,lightgray:3553874943,lightgreen:2431553791,lightgrey:3553874943,lightpink:4290167295,lightsalmon:4288707327,lightseagreen:548580095,lightskyblue:2278488831,lightslategray:2005441023,lightslategrey:2005441023,lightsteelblue:2965692159,lightyellow:4294959359,lime:16711935,limegreen:852308735,linen:4210091775,magenta:4278255615,maroon:2147483903,mediumaquamarine:1724754687,mediumblue:52735,mediumorchid:3126187007,mediumpurple:2473647103,mediumseagreen:1018393087,mediumslateblue:2070474495,mediumspringgreen:16423679,mediumturquoise:1221709055,mediumvioletred:3340076543,midnightblue:421097727,mintcream:4127193855,mistyrose:4293190143,moccasin:4293178879,navajowhite:4292783615,navy:33023,oldlace:4260751103,olive:2155872511,olivedrab:1804477439,orange:4289003775,orangered:4282712319,orchid:3664828159,palegoldenrod:4008225535,palegreen:2566625535,paleturquoise:2951671551,palevioletred:3681588223,papayawhip:4293907967,peachpuff:4292524543,peru:3448061951,pink:4290825215,plum:3718307327,powderblue:2967529215,purple:2147516671,rebeccapurple:1714657791,red:4278190335,rosybrown:3163525119,royalblue:1097458175,saddlebrown:2336560127,salmon:4202722047,sandybrown:4104413439,seagreen:780883967,seashell:4294307583,sienna:2689740287,silver:3233857791,skyblue:2278484991,slateblue:1784335871,slategray:1887473919,slategrey:1887473919,snow:4294638335,springgreen:16744447,steelblue:1182971135,tan:3535047935,teal:8421631,thistle:3636451583,tomato:4284696575,turquoise:1088475391,violet:4001558271,wheat:4125012991,white:4294967295,whitesmoke:4126537215,yellow:4294902015,yellowgreen:2597139199}});const zn=((t,{applyAnimatedValues:e=(()=>!1),createAnimatedStyle:n=(t=>new Bt(t)),getComponentProps:s=(t=>t)}={})=>{const r={applyAnimatedValues:e,createAnimatedStyle:n,getComponentProps:s},i=t=>{const e=ee(t)||"Anonymous";return(t=P.str(t)?i[t]||(i[t]=Zt(t,r)):t[te]||(t[te]=Zt(t,r))).displayName=`Animated(${e})`,t};return A(t,((e,n)=>{P.arr(t)&&(n=ee(e)),i[n]=i(e)})),{animated:i}})(["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"],{applyAnimatedValues:function(t,e){if(!t.nodeType||!t.setAttribute)return!1;const n="filter"===t.nodeName||t.parentNode&&"filter"===t.parentNode.nodeName,s=e,{style:r,children:i,scrollTop:o,scrollLeft:a}=s,u=kn(s,Pn),l=Object.values(u),c=Object.keys(u).map((e=>n||t.hasAttribute(e)?e:An[e]||(An[e]=e.replace(/([A-Z])/g,(t=>"-"+t.toLowerCase())))));void 0!==i&&(t.textContent=i);for(let e in r)if(r.hasOwnProperty(e)){const n=xn(e,r[e]);"float"===e?e="cssFloat":Sn.test(e)?t.style.setProperty(e,n):t.style[e]=n}c.forEach(((e,n)=>{t.setAttribute(e,l[n])})),void 0!==o&&(t.scrollTop=o),void 0!==a&&(t.scrollLeft=a)},createAnimatedStyle:t=>new qn(t),getComponentProps:t=>kn(t,Tn)}).animated,$n=[0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9],Nn=({animateToNumber:t,fontStyle:e,configs:n,includeComma:r,onFinish:i,onStart:o})=>{const a=String(Math.abs(t)),u=Array.from(a,Number),[l,c]=s().useState(!1),[d,h]=s().useState(!1);s().useEffect((()=>{l&&o&&(o(),c(!1)),d&&i&&(i(),h(!1))}),[l,d,i,o]),r&&new Array(Math.ceil(a.length/3)).fill(0).forEach(((t,e)=>{0!==e&&u.splice(a.length-3*e,0,",")}));const[p,f]=s().useState(0),m=s().useRef(null);return s().useEffect((()=>{f(m.current.clientHeight)}),[t]),s().createElement(s().Fragment,null,0!==p&&s().createElement("div",{style:{display:"flex",flexDirection:"row"},className:"animated-container"},t<0&&s().createElement("div",{style:e},"-"),u.map(((t,r)=>{return"string"==typeof t?s().createElement("div",{key:r,style:{...e}},t):s().createElement("div",{key:r,style:{height:p,overflow:"hidden"}},s().createElement(gn,{key:u[r],from:{transform:"translateY(0px)"},to:{transform:`translateY(${p*u[r]*-1-20*p})`},onRest:()=>h(!0),onStart:()=>c(!0),config:n?n[(i=0,o=n.length-1,i=Math.ceil(i),o=Math.floor(o),Math.floor(Math.random()*(o-i+1))+i)]:void 0},(t=>$n.map(((n,r)=>s().createElement(zn.div,{key:r,style:{...t,...e}},n))))));var i,o}))),s().createElement("div",{ref:m,style:{position:"absolute",top:-9999,...e}},0))};module.exports=e})();

package.json

 {
   "name": "react-animated-numbers",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Library showing animation of number changes in react.js",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -8,4 +8,2 @@ <a href="https://www.npmjs.com/package/react-animated-numbers">
 
-
-
 # react-animated-numbers
@@ -19,86 +17,56 @@
 
+### Props
 
-### Props 
+|      name       |         type         |    default     | description                                                                                                                                                                                                                                                                                               |
+| :-------------: | :------------------: | :------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| animateToNumber |        number        |      none      | Number to be animated                                                                                                                                                                                                                                                                                     |
+|    fontStyle    | React.CSSProperties? |      none      | Style of number text                                                                                                                                                                                                                                                                                      |
+|  includeComma   |       boolean?       |     false      | Whether the number contains commas                                                                                                                                                                                                                                                                        |
+|     onStart     |      (): void?       |   undefined    | Function executed when animation is started                                                                                                                                                                                                                                                               |
+|    onFinish     |      (): void?       |   undefined    | Function executed when animation is finished (not support `calm` animation type)                                                                                                                                                                                                                          |
+|     configs     |   SpringConfig[]?    | config.default | This module is using [react-spring](https://www.react-spring.io) and you can refer to this [config option](https://react-spring.io/common/configs). If you pass multiple settings, an animation is randomly assigned to each number. _ DO NOT USE `duration` because of a bug that hasn't been fixed yet_ |
 
-|      name         |    type    |  default | description                            |
-|:-----------------:|:----------:|:--------:|----------------------------------------|
-|  animateToNumber  |   number   |   none   | Number to be animated                  |
-|  animationType    |   "calm" or "random"`   |  "random"| Decide whether to increase sequentially, starting with the smallest number|
-|     fontStyle     | React.CSSProperties?  |   none   | Style of number text        |
-|    includeComma   |  boolean?  |   false  | Whether the number contains commas     |
-|    delay          |  number(ms)?   |   undefined  | Milliseconds to decide how late to start animation |
-|    includeComma   |  boolean?  |   false  | Whether the number contains commas     |
-|    onStart   |  (): void?  |   undefined  | Function executed when animation is started     |
-|    onFinish   |  (): void?  |   undefined  | Function executed when animation is finished (not support `calm` animation type)    |
-|       config      |   SpringConfig?  |   config.default   | This module is using [react-spring](https://www.react-spring.io) and you can refer to this [config option](https://react-spring.io/common/configs)   |
+### Custom Style
+ - you can use className `animated-container` to style container ([example](https://github.com/heyman333/react-animated-numbers/blob/master/example/src/App.css))
+ - if you want to customize font style. Just ues `fontStyle` prop
 
-
 ### Example
 
 ```js
-import React from 'react';
-import AnimatedNumber from "react-animated-numbers"
+import React from "react";
+import AnimatedNumbers from "./module";
+import "./App.css";
 
 function App() {
-  const [number, setNumber] = React.useState(0)
-  const [diff, setDiff] = React.useState(0)
-
-  const increaseNumber = () => {
-    setNumber(number + diff)
-  }
-
-  const decreaseNumber = () => {
-    setNumber(number - diff)
-  }
-
-  const onChangeValue = (e) => {
-    const number = Number(e.target.value)
-    setDiff(number)
-  }
-
+  const [num, setNum] = React.useState(331231);
   return (
-    <div className="App">
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          height: "100vh",
-          flexDirection: "column",
+    <div className="container">
+      <AnimatedNumbers
+        includeComma
+        animateToNumber={num}
+        fontStyle={{ fontSize: 40 }}
+        onStart={() => console.log("onStart")}
+        onFinish={() => {
+          console.log("onFinish!");
         }}
-      >
-        <label htmlFor="value">Number Difference</label>
-        <input
-          id="value"
-          title="value"
-          placeholder="Difference"
-          type="number"
-          style={{ marginBottom: 30 }}
-          onChange={onChangeValue}
-        />
-        <AnimatedNumber
-          fontStyle={{ fontFamily: "Nunito", fontSize: 40 }}
-          animateToNumber={number}
-          includeComma
-          config={{ tension: 89, friction: 40 }}
-          onStart={() => console.log("onStart")}
-          onFinish={() => console.log("onFinish")}
-          animationType={"calm"}
-        />
-        <div
-          style={{
-            height: 60,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-between",
-            marginTop: 40,
-          }}
-        >
-          <button onClick={increaseNumber}>increase Number</button>
-          <button onClick={decreaseNumber}>decrease Number</button>
-        </div>
+        configs={[
+          { mass: 1, tension: 220, friction: 100 },
+          { mass: 1, tension: 180, friction: 130 },
+          { mass: 1, tension: 280, friction: 90 },
+          { mass: 1, tension: 180, friction: 135 },
+          { mass: 1, tension: 260, friction: 100 },
+          { mass: 1, tension: 210, friction: 180 },
+        ]}
+      ></AnimatedNumbers>
+      <div>
+        <button onClick={() => setNum((state) => state + 31234)}>+</button>
+        <button onClick={() => setNum((state) => state - 31234)}>-</button>
       </div>
     </div>
-  )
+  );
 }
+
+export default App;
+
+}
 ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50654

1.53%

Worsened metrics

Number of lines in readme file

71

-31.07%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes