\n \n {headerTitle}\n \n {children}\n \n \n )\n}\n\nLayout.propTypes = {\n children: PropTypes.node.isRequired,\n}\n\nexport default Layout\n","// https://tc39.github.io/ecma262/#sec-toindex\nvar toInteger = require('./_to-integer');\nvar toLength = require('./_to-length');\nmodule.exports = function (it) {\n if (it === undefined) return 0;\n var number = toInteger(it);\n var length = toLength(number);\n if (number !== length) throw RangeError('Wrong length!');\n return length;\n};\n","var global = require('./_global');\nvar hide = require('./_hide');\nvar uid = require('./_uid');\nvar TYPED = uid('typed_array');\nvar VIEW = uid('view');\nvar ABV = !!(global.ArrayBuffer && global.DataView);\nvar CONSTR = ABV;\nvar i = 0;\nvar l = 9;\nvar Typed;\n\nvar TypedArrayConstructors = (\n 'Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array'\n).split(',');\n\nwhile (i < l) {\n if (Typed = global[TypedArrayConstructors[i++]]) {\n hide(Typed.prototype, TYPED, true);\n hide(Typed.prototype, VIEW, true);\n } else CONSTR = false;\n}\n\nmodule.exports = {\n ABV: ABV,\n CONSTR: CONSTR,\n TYPED: TYPED,\n VIEW: VIEW\n};\n","require(\"core-js/modules/es6.function.bind\");\n\nrequire(\"core-js/modules/web.dom.iterable\");\n\nrequire(\"core-js/modules/es6.array.iterator\");\n\nrequire(\"core-js/modules/es6.object.to-string\");\n\nrequire(\"core-js/modules/es6.object.keys\");\n\n//\nmodule.exports = function shallowEqual(objA, objB, compare, compareContext) {\n var ret = compare ? compare.call(compareContext, objA, objB) : void 0;\n\n if (ret !== void 0) {\n return !!ret;\n }\n\n if (objA === objB) {\n return true;\n }\n\n if (typeof objA !== \"object\" || !objA || typeof objB !== \"object\" || !objB) {\n return false;\n }\n\n var keysA = Object.keys(objA);\n var keysB = Object.keys(objB);\n\n if (keysA.length !== keysB.length) {\n return false;\n }\n\n var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB); // Test for A's keys different from B.\n\n for (var idx = 0; idx < keysA.length; idx++) {\n var key = keysA[idx];\n\n if (!bHasOwnProperty(key)) {\n return false;\n }\n\n var valueA = objA[key];\n var valueB = objB[key];\n ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;\n\n if (ret === false || ret === void 0 && valueA !== valueB) {\n return false;\n }\n }\n\n return true;\n};","require(\"core-js/modules/es6.typed.uint8-array\");\n\nrequire(\"core-js/modules/es6.array.is-array\");\n\nrequire(\"core-js/modules/web.dom.iterable\");\n\nrequire(\"core-js/modules/es6.array.iterator\");\n\nrequire(\"core-js/modules/es6.object.keys\");\n\nrequire(\"core-js/modules/es6.date.now\");\n\nrequire(\"core-js/modules/es6.array.index-of\");\n\nrequire(\"core-js/modules/es6.function.bind\");\n\nrequire(\"core-js/modules/es6.promise\");\n\nrequire(\"core-js/modules/es6.object.to-string\");\n\nrequire(\"core-js/modules/es6.regexp.split\");\n\nrequire(\"core-js/modules/es6.regexp.match\");\n\nrequire(\"core-js/modules/es6.regexp.replace\");\n\n/*!\n * howler.js v2.1.3\n * howlerjs.com\n *\n * (c) 2013-2019, James Simpson of GoldFire Studios\n * goldfirestudios.com\n *\n * MIT License\n */\n(function () {\n 'use strict';\n /** Global Methods **/\n\n /***************************************************************************/\n\n /**\n * Create the global controller. All contained methods and properties apply\n * to all sounds that are currently playing or will be in the future.\n */\n\n var HowlerGlobal = function HowlerGlobal() {\n this.init();\n };\n\n HowlerGlobal.prototype = {\n /**\n * Initialize the global Howler object.\n * @return {Howler}\n */\n init: function init() {\n var self = this || Howler; // Create a global ID counter.\n\n self._counter = 1000; // Pool of unlocked HTML5 Audio objects.\n\n self._html5AudioPool = [];\n self.html5PoolSize = 10; // Internal properties.\n\n self._codecs = {};\n self._howls = [];\n self._muted = false;\n self._volume = 1;\n self._canPlayEvent = 'canplaythrough';\n self._navigator = typeof window !== 'undefined' && window.navigator ? window.navigator : null; // Public properties.\n\n self.masterGain = null;\n self.noAudio = false;\n self.usingWebAudio = true;\n self.autoSuspend = true;\n self.ctx = null; // Set to false to disable the auto audio unlocker.\n\n self.autoUnlock = true; // Setup the various state values for global tracking.\n\n self._setup();\n\n return self;\n },\n\n /**\n * Get/set the global volume for all sounds.\n * @param {Float} vol Volume from 0.0 to 1.0.\n * @return {Howler/Float} Returns self or current volume.\n */\n volume: function volume(vol) {\n var self = this || Howler;\n vol = parseFloat(vol); // If we don't have an AudioContext created yet, run the setup.\n\n if (!self.ctx) {\n setupAudioContext();\n }\n\n if (typeof vol !== 'undefined' && vol >= 0 && vol <= 1) {\n self._volume = vol; // Don't update any of the nodes if we are muted.\n\n if (self._muted) {\n return self;\n } // When using Web Audio, we just need to adjust the master gain.\n\n\n if (self.usingWebAudio) {\n self.masterGain.gain.setValueAtTime(vol, Howler.ctx.currentTime);\n } // Loop through and change volume for all HTML5 audio nodes.\n\n\n for (var i = 0; i < self._howls.length; i++) {\n if (!self._howls[i]._webAudio) {\n // Get all of the sounds in this Howl group.\n var ids = self._howls[i]._getSoundIds(); // Loop through all sounds and change the volumes.\n\n\n for (var j = 0; j < ids.length; j++) {\n var sound = self._howls[i]._soundById(ids[j]);\n\n if (sound && sound._node) {\n sound._node.volume = sound._volume * vol;\n }\n }\n }\n }\n\n return self;\n }\n\n return self._volume;\n },\n\n /**\n * Handle muting and unmuting globally.\n * @param {Boolean} muted Is muted or not.\n */\n mute: function mute(muted) {\n var self = this || Howler; // If we don't have an AudioContext created yet, run the setup.\n\n if (!self.ctx) {\n setupAudioContext();\n }\n\n self._muted = muted; // With Web Audio, we just need to mute the master gain.\n\n if (self.usingWebAudio) {\n self.masterGain.gain.setValueAtTime(muted ? 0 : self._volume, Howler.ctx.currentTime);\n } // Loop through and mute all HTML5 Audio nodes.\n\n\n for (var i = 0; i < self._howls.length; i++) {\n if (!self._howls[i]._webAudio) {\n // Get all of the sounds in this Howl group.\n var ids = self._howls[i]._getSoundIds(); // Loop through all sounds and mark the audio node as muted.\n\n\n for (var j = 0; j < ids.length; j++) {\n var sound = self._howls[i]._soundById(ids[j]);\n\n if (sound && sound._node) {\n sound._node.muted = muted ? true : sound._muted;\n }\n }\n }\n }\n\n return self;\n },\n\n /**\n * Unload and destroy all currently loaded Howl objects.\n * @return {Howler}\n */\n unload: function unload() {\n var self = this || Howler;\n\n for (var i = self._howls.length - 1; i >= 0; i--) {\n self._howls[i].unload();\n } // Create a new AudioContext to make sure it is fully reset.\n\n\n if (self.usingWebAudio && self.ctx && typeof self.ctx.close !== 'undefined') {\n self.ctx.close();\n self.ctx = null;\n setupAudioContext();\n }\n\n return self;\n },\n\n /**\n * Check for codec support of specific extension.\n * @param {String} ext Audio file extention.\n * @return {Boolean}\n */\n codecs: function codecs(ext) {\n return (this || Howler)._codecs[ext.replace(/^x-/, '')];\n },\n\n /**\n * Setup various state values for global tracking.\n * @return {Howler}\n */\n _setup: function _setup() {\n var self = this || Howler; // Keeps track of the suspend/resume state of the AudioContext.\n\n self.state = self.ctx ? self.ctx.state || 'suspended' : 'suspended'; // Automatically begin the 30-second suspend process\n\n self._autoSuspend(); // Check if audio is available.\n\n\n if (!self.usingWebAudio) {\n // No audio is available on this system if noAudio is set to true.\n if (typeof Audio !== 'undefined') {\n try {\n var test = new Audio(); // Check if the canplaythrough event is available.\n\n if (typeof test.oncanplaythrough === 'undefined') {\n self._canPlayEvent = 'canplay';\n }\n } catch (e) {\n self.noAudio = true;\n }\n } else {\n self.noAudio = true;\n }\n } // Test to make sure audio isn't disabled in Internet Explorer.\n\n\n try {\n var test = new Audio();\n\n if (test.muted) {\n self.noAudio = true;\n }\n } catch (e) {} // Check for supported codecs.\n\n\n if (!self.noAudio) {\n self._setupCodecs();\n }\n\n return self;\n },\n\n /**\n * Check for browser support for various codecs and cache the results.\n * @return {Howler}\n */\n _setupCodecs: function _setupCodecs() {\n var self = this || Howler;\n var audioTest = null; // Must wrap in a try/catch because IE11 in server mode throws an error.\n\n try {\n audioTest = typeof Audio !== 'undefined' ? new Audio() : null;\n } catch (err) {\n return self;\n }\n\n if (!audioTest || typeof audioTest.canPlayType !== 'function') {\n return self;\n }\n\n var mpegTest = audioTest.canPlayType('audio/mpeg;').replace(/^no$/, ''); // Opera version <33 has mixed MP3 support, so we need to check for and block it.\n\n var checkOpera = self._navigator && self._navigator.userAgent.match(/OPR\\/([0-6].)/g);\n\n var isOldOpera = checkOpera && parseInt(checkOpera[0].split('/')[1], 10) < 33;\n self._codecs = {\n mp3: !!(!isOldOpera && (mpegTest || audioTest.canPlayType('audio/mp3;').replace(/^no$/, ''))),\n mpeg: !!mpegTest,\n opus: !!audioTest.canPlayType('audio/ogg; codecs=\"opus\"').replace(/^no$/, ''),\n ogg: !!audioTest.canPlayType('audio/ogg; codecs=\"vorbis\"').replace(/^no$/, ''),\n oga: !!audioTest.canPlayType('audio/ogg; codecs=\"vorbis\"').replace(/^no$/, ''),\n wav: !!audioTest.canPlayType('audio/wav; codecs=\"1\"').replace(/^no$/, ''),\n aac: !!audioTest.canPlayType('audio/aac;').replace(/^no$/, ''),\n caf: !!audioTest.canPlayType('audio/x-caf;').replace(/^no$/, ''),\n m4a: !!(audioTest.canPlayType('audio/x-m4a;') || audioTest.canPlayType('audio/m4a;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\n mp4: !!(audioTest.canPlayType('audio/x-mp4;') || audioTest.canPlayType('audio/mp4;') || audioTest.canPlayType('audio/aac;')).replace(/^no$/, ''),\n weba: !!audioTest.canPlayType('audio/webm; codecs=\"vorbis\"').replace(/^no$/, ''),\n webm: !!audioTest.canPlayType('audio/webm; codecs=\"vorbis\"').replace(/^no$/, ''),\n dolby: !!audioTest.canPlayType('audio/mp4; codecs=\"ec-3\"').replace(/^no$/, ''),\n flac: !!(audioTest.canPlayType('audio/x-flac;') || audioTest.canPlayType('audio/flac;')).replace(/^no$/, '')\n };\n return self;\n },\n\n /**\n * Some browsers/devices will only allow audio to be played after a user interaction.\n * Attempt to automatically unlock audio on the first user interaction.\n * Concept from: http://paulbakaus.com/tutorials/html5/web-audio-on-ios/\n * @return {Howler}\n */\n _unlockAudio: function _unlockAudio() {\n var self = this || Howler; // Only run this if Web Audio is supported and it hasn't already been unlocked.\n\n if (self._audioUnlocked || !self.ctx) {\n return;\n }\n\n self._audioUnlocked = false;\n self.autoUnlock = false; // Some mobile devices/platforms have distortion issues when opening/closing tabs and/or web views.\n // Bugs in the browser (especially Mobile Safari) can cause the sampleRate to change from 44100 to 48000.\n // By calling Howler.unload(), we create a new AudioContext with the correct sampleRate.\n\n if (!self._mobileUnloaded && self.ctx.sampleRate !== 44100) {\n self._mobileUnloaded = true;\n self.unload();\n } // Scratch buffer for enabling iOS to dispose of web audio buffers correctly, as per:\n // http://stackoverflow.com/questions/24119684\n\n\n self._scratchBuffer = self.ctx.createBuffer(1, 1, 22050); // Call this method on touch start to create and play a buffer,\n // then check if the audio actually played to determine if\n // audio has now been unlocked on iOS, Android, etc.\n\n var unlock = function unlock(e) {\n // Create a pool of unlocked HTML5 Audio objects that can\n // be used for playing sounds without user interaction. HTML5\n // Audio objects must be individually unlocked, as opposed\n // to the WebAudio API which only needs a single activation.\n // This must occur before WebAudio setup or the source.onended\n // event will not fire.\n for (var i = 0; i < self.html5PoolSize; i++) {\n try {\n var audioNode = new Audio(); // Mark this Audio object as unlocked to ensure it can get returned\n // to the unlocked pool when released.\n\n audioNode._unlocked = true; // Add the audio node to the pool.\n\n self._releaseHtml5Audio(audioNode);\n } catch (e) {\n self.noAudio = true;\n }\n } // Loop through any assigned audio nodes and unlock them.\n\n\n for (var i = 0; i < self._howls.length; i++) {\n if (!self._howls[i]._webAudio) {\n // Get all of the sounds in this Howl group.\n var ids = self._howls[i]._getSoundIds(); // Loop through all sounds and unlock the audio nodes.\n\n\n for (var j = 0; j < ids.length; j++) {\n var sound = self._howls[i]._soundById(ids[j]);\n\n if (sound && sound._node && !sound._node._unlocked) {\n sound._node._unlocked = true;\n\n sound._node.load();\n }\n }\n }\n } // Fix Android can not play in suspend state.\n\n\n self._autoResume(); // Create an empty buffer.\n\n\n var source = self.ctx.createBufferSource();\n source.buffer = self._scratchBuffer;\n source.connect(self.ctx.destination); // Play the empty buffer.\n\n if (typeof source.start === 'undefined') {\n source.noteOn(0);\n } else {\n source.start(0);\n } // Calling resume() on a stack initiated by user gesture is what actually unlocks the audio on Android Chrome >= 55.\n\n\n if (typeof self.ctx.resume === 'function') {\n self.ctx.resume();\n } // Setup a timeout to check that we are unlocked on the next event loop.\n\n\n source.onended = function () {\n source.disconnect(0); // Update the unlocked state and prevent this check from happening again.\n\n self._audioUnlocked = true; // Remove the touch start listener.\n\n document.removeEventListener('touchstart', unlock, true);\n document.removeEventListener('touchend', unlock, true);\n document.removeEventListener('click', unlock, true); // Let all sounds know that audio has been unlocked.\n\n for (var i = 0; i < self._howls.length; i++) {\n self._howls[i]._emit('unlock');\n }\n };\n }; // Setup a touch start listener to attempt an unlock in.\n\n\n document.addEventListener('touchstart', unlock, true);\n document.addEventListener('touchend', unlock, true);\n document.addEventListener('click', unlock, true);\n return self;\n },\n\n /**\n * Get an unlocked HTML5 Audio object from the pool. If none are left,\n * return a new Audio object and throw a warning.\n * @return {Audio} HTML5 Audio object.\n */\n _obtainHtml5Audio: function _obtainHtml5Audio() {\n var self = this || Howler; // Return the next object from the pool if one exists.\n\n if (self._html5AudioPool.length) {\n return self._html5AudioPool.pop();\n } //.Check if the audio is locked and throw a warning.\n\n\n var testPlay = new Audio().play();\n\n if (testPlay && typeof Promise !== 'undefined' && (testPlay instanceof Promise || typeof testPlay.then === 'function')) {\n testPlay[\"catch\"](function () {\n console.warn('HTML5 Audio pool exhausted, returning potentially locked audio object.');\n });\n }\n\n return new Audio();\n },\n\n /**\n * Return an activated HTML5 Audio object to the pool.\n * @return {Howler}\n */\n _releaseHtml5Audio: function _releaseHtml5Audio(audio) {\n var self = this || Howler; // Don't add audio to the pool if we don't know if it has been unlocked.\n\n if (audio._unlocked) {\n self._html5AudioPool.push(audio);\n }\n\n return self;\n },\n\n /**\n * Automatically suspend the Web Audio AudioContext after no sound has played for 30 seconds.\n * This saves processing/energy and fixes various browser-specific bugs with audio getting stuck.\n * @return {Howler}\n */\n _autoSuspend: function _autoSuspend() {\n var self = this;\n\n if (!self.autoSuspend || !self.ctx || typeof self.ctx.suspend === 'undefined' || !Howler.usingWebAudio) {\n return;\n } // Check if any sounds are playing.\n\n\n for (var i = 0; i < self._howls.length; i++) {\n if (self._howls[i]._webAudio) {\n for (var j = 0; j < self._howls[i]._sounds.length; j++) {\n if (!self._howls[i]._sounds[j]._paused) {\n return self;\n }\n }\n }\n }\n\n if (self._suspendTimer) {\n clearTimeout(self._suspendTimer);\n } // If no sound has played after 30 seconds, suspend the context.\n\n\n self._suspendTimer = setTimeout(function () {\n if (!self.autoSuspend) {\n return;\n }\n\n self._suspendTimer = null;\n self.state = 'suspending';\n self.ctx.suspend().then(function () {\n self.state = 'suspended';\n\n if (self._resumeAfterSuspend) {\n delete self._resumeAfterSuspend;\n\n self._autoResume();\n }\n });\n }, 30000);\n return self;\n },\n\n /**\n * Automatically resume the Web Audio AudioContext when a new sound is played.\n * @return {Howler}\n */\n _autoResume: function _autoResume() {\n var self = this;\n\n if (!self.ctx || typeof self.ctx.resume === 'undefined' || !Howler.usingWebAudio) {\n return;\n }\n\n if (self.state === 'running' && self._suspendTimer) {\n clearTimeout(self._suspendTimer);\n self._suspendTimer = null;\n } else if (self.state === 'suspended') {\n self.ctx.resume().then(function () {\n self.state = 'running'; // Emit to all Howls that the audio has resumed.\n\n for (var i = 0; i < self._howls.length; i++) {\n self._howls[i]._emit('resume');\n }\n });\n\n if (self._suspendTimer) {\n clearTimeout(self._suspendTimer);\n self._suspendTimer = null;\n }\n } else if (self.state === 'suspending') {\n self._resumeAfterSuspend = true;\n }\n\n return self;\n }\n }; // Setup the global audio controller.\n\n var Howler = new HowlerGlobal();\n /** Group Methods **/\n\n /***************************************************************************/\n\n /**\n * Create an audio group controller.\n * @param {Object} o Passed in properties for this group.\n */\n\n var Howl = function Howl(o) {\n var self = this; // Throw an error if no source is provided.\n\n if (!o.src || o.src.length === 0) {\n console.error('An array of source files must be passed with any new Howl.');\n return;\n }\n\n self.init(o);\n };\n\n Howl.prototype = {\n /**\n * Initialize a new Howl group object.\n * @param {Object} o Passed in properties for this group.\n * @return {Howl}\n */\n init: function init(o) {\n var self = this; // If we don't have an AudioContext created yet, run the setup.\n\n if (!Howler.ctx) {\n setupAudioContext();\n } // Setup user-defined default properties.\n\n\n self._autoplay = o.autoplay || false;\n self._format = typeof o.format !== 'string' ? o.format : [o.format];\n self._html5 = o.html5 || false;\n self._muted = o.mute || false;\n self._loop = o.loop || false;\n self._pool = o.pool || 5;\n self._preload = typeof o.preload === 'boolean' ? o.preload : true;\n self._rate = o.rate || 1;\n self._sprite = o.sprite || {};\n self._src = typeof o.src !== 'string' ? o.src : [o.src];\n self._volume = o.volume !== undefined ? o.volume : 1;\n self._xhrWithCredentials = o.xhrWithCredentials || false; // Setup all other default properties.\n\n self._duration = 0;\n self._state = 'unloaded';\n self._sounds = [];\n self._endTimers = {};\n self._queue = [];\n self._playLock = false; // Setup event listeners.\n\n self._onend = o.onend ? [{\n fn: o.onend\n }] : [];\n self._onfade = o.onfade ? [{\n fn: o.onfade\n }] : [];\n self._onload = o.onload ? [{\n fn: o.onload\n }] : [];\n self._onloaderror = o.onloaderror ? [{\n fn: o.onloaderror\n }] : [];\n self._onplayerror = o.onplayerror ? [{\n fn: o.onplayerror\n }] : [];\n self._onpause = o.onpause ? [{\n fn: o.onpause\n }] : [];\n self._onplay = o.onplay ? [{\n fn: o.onplay\n }] : [];\n self._onstop = o.onstop ? [{\n fn: o.onstop\n }] : [];\n self._onmute = o.onmute ? [{\n fn: o.onmute\n }] : [];\n self._onvolume = o.onvolume ? [{\n fn: o.onvolume\n }] : [];\n self._onrate = o.onrate ? [{\n fn: o.onrate\n }] : [];\n self._onseek = o.onseek ? [{\n fn: o.onseek\n }] : [];\n self._onunlock = o.onunlock ? [{\n fn: o.onunlock\n }] : [];\n self._onresume = []; // Web Audio or HTML5 Audio?\n\n self._webAudio = Howler.usingWebAudio && !self._html5; // Automatically try to enable audio.\n\n if (typeof Howler.ctx !== 'undefined' && Howler.ctx && Howler.autoUnlock) {\n Howler._unlockAudio();\n } // Keep track of this Howl group in the global controller.\n\n\n Howler._howls.push(self); // If they selected autoplay, add a play event to the load queue.\n\n\n if (self._autoplay) {\n self._queue.push({\n event: 'play',\n action: function action() {\n self.play();\n }\n });\n } // Load the source file unless otherwise specified.\n\n\n if (self._preload) {\n self.load();\n }\n\n return self;\n },\n\n /**\n * Load the audio file.\n * @return {Howler}\n */\n load: function load() {\n var self = this;\n var url = null; // If no audio is available, quit immediately.\n\n if (Howler.noAudio) {\n self._emit('loaderror', null, 'No audio support.');\n\n return;\n } // Make sure our source is in an array.\n\n\n if (typeof self._src === 'string') {\n self._src = [self._src];\n } // Loop through the sources and pick the first one that is compatible.\n\n\n for (var i = 0; i < self._src.length; i++) {\n var ext, str;\n\n if (self._format && self._format[i]) {\n // If an extension was specified, use that instead.\n ext = self._format[i];\n } else {\n // Make sure the source is a string.\n str = self._src[i];\n\n if (typeof str !== 'string') {\n self._emit('loaderror', null, 'Non-string found in selected audio sources - ignoring.');\n\n continue;\n } // Extract the file extension from the URL or base64 data URI.\n\n\n ext = /^data:audio\\/([^;,]+);/i.exec(str);\n\n if (!ext) {\n ext = /\\.([^.]+)$/.exec(str.split('?', 1)[0]);\n }\n\n if (ext) {\n ext = ext[1].toLowerCase();\n }\n } // Log a warning if no extension was found.\n\n\n if (!ext) {\n console.warn('No file extension was found. Consider using the \"format\" property or specify an extension.');\n } // Check if this extension is available.\n\n\n if (ext && Howler.codecs(ext)) {\n url = self._src[i];\n break;\n }\n }\n\n if (!url) {\n self._emit('loaderror', null, 'No codec support for selected audio sources.');\n\n return;\n }\n\n self._src = url;\n self._state = 'loading'; // If the hosting page is HTTPS and the source isn't,\n // drop down to HTML5 Audio to avoid Mixed Content errors.\n\n if (window.location.protocol === 'https:' && url.slice(0, 5) === 'http:') {\n self._html5 = true;\n self._webAudio = false;\n } // Create a new sound object and add it to the pool.\n\n\n new Sound(self); // Load and decode the audio data for playback.\n\n if (self._webAudio) {\n loadBuffer(self);\n }\n\n return self;\n },\n\n /**\n * Play a sound or resume previous playback.\n * @param {String/Number} sprite Sprite name for sprite playback or sound id to continue previous.\n * @param {Boolean} internal Internal Use: true prevents event firing.\n * @return {Number} Sound ID.\n */\n play: function play(sprite, internal) {\n var self = this;\n var id = null; // Determine if a sprite, sound id or nothing was passed\n\n if (typeof sprite === 'number') {\n id = sprite;\n sprite = null;\n } else if (typeof sprite === 'string' && self._state === 'loaded' && !self._sprite[sprite]) {\n // If the passed sprite doesn't exist, do nothing.\n return null;\n } else if (typeof sprite === 'undefined') {\n // Use the default sound sprite (plays the full audio length).\n sprite = '__default'; // Check if there is a single paused sound that isn't ended. \n // If there is, play that sound. If not, continue as usual. \n\n if (!self._playLock) {\n var num = 0;\n\n for (var i = 0; i < self._sounds.length; i++) {\n if (self._sounds[i]._paused && !self._sounds[i]._ended) {\n num++;\n id = self._sounds[i]._id;\n }\n }\n\n if (num === 1) {\n sprite = null;\n } else {\n id = null;\n }\n }\n } // Get the selected node, or get one from the pool.\n\n\n var sound = id ? self._soundById(id) : self._inactiveSound(); // If the sound doesn't exist, do nothing.\n\n if (!sound) {\n return null;\n } // Select the sprite definition.\n\n\n if (id && !sprite) {\n sprite = sound._sprite || '__default';\n } // If the sound hasn't loaded, we must wait to get the audio's duration.\n // We also need to wait to make sure we don't run into race conditions with\n // the order of function calls.\n\n\n if (self._state !== 'loaded') {\n // Set the sprite value on this sound.\n sound._sprite = sprite; // Mark this sound as not ended in case another sound is played before this one loads.\n\n sound._ended = false; // Add the sound to the queue to be played on load.\n\n var soundId = sound._id;\n\n self._queue.push({\n event: 'play',\n action: function action() {\n self.play(soundId);\n }\n });\n\n return soundId;\n } // Don't play the sound if an id was passed and it is already playing.\n\n\n if (id && !sound._paused) {\n // Trigger the play event, in order to keep iterating through queue.\n if (!internal) {\n self._loadQueue('play');\n }\n\n return sound._id;\n } // Make sure the AudioContext isn't suspended, and resume it if it is.\n\n\n if (self._webAudio) {\n Howler._autoResume();\n } // Determine how long to play for and where to start playing.\n\n\n var seek = Math.max(0, sound._seek > 0 ? sound._seek : self._sprite[sprite][0] / 1000);\n var duration = Math.max(0, (self._sprite[sprite][0] + self._sprite[sprite][1]) / 1000 - seek);\n var timeout = duration * 1000 / Math.abs(sound._rate);\n var start = self._sprite[sprite][0] / 1000;\n var stop = (self._sprite[sprite][0] + self._sprite[sprite][1]) / 1000;\n sound._sprite = sprite; // Mark the sound as ended instantly so that this async playback\n // doesn't get grabbed by another call to play while this one waits to start.\n\n sound._ended = false; // Update the parameters of the sound.\n\n var setParams = function setParams() {\n sound._paused = false;\n sound._seek = seek;\n sound._start = start;\n sound._stop = stop;\n sound._loop = !!(sound._loop || self._sprite[sprite][2]);\n }; // End the sound instantly if seek is at the end.\n\n\n if (seek >= stop) {\n self._ended(sound);\n\n return;\n } // Begin the actual playback.\n\n\n var node = sound._node;\n\n if (self._webAudio) {\n // Fire this when the sound is ready to play to begin Web Audio playback.\n var playWebAudio = function playWebAudio() {\n self._playLock = false;\n setParams();\n\n self._refreshBuffer(sound); // Setup the playback params.\n\n\n var vol = sound._muted || self._muted ? 0 : sound._volume;\n node.gain.setValueAtTime(vol, Howler.ctx.currentTime);\n sound._playStart = Howler.ctx.currentTime; // Play the sound using the supported method.\n\n if (typeof node.bufferSource.start === 'undefined') {\n sound._loop ? node.bufferSource.noteGrainOn(0, seek, 86400) : node.bufferSource.noteGrainOn(0, seek, duration);\n } else {\n sound._loop ? node.bufferSource.start(0, seek, 86400) : node.bufferSource.start(0, seek, duration);\n } // Start a new timer if none is present.\n\n\n if (timeout !== Infinity) {\n self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout);\n }\n\n if (!internal) {\n setTimeout(function () {\n self._emit('play', sound._id);\n\n self._loadQueue();\n }, 0);\n }\n };\n\n if (Howler.state === 'running') {\n playWebAudio();\n } else {\n self._playLock = true; // Wait for the audio context to resume before playing.\n\n self.once('resume', playWebAudio); // Cancel the end timer.\n\n self._clearTimer(sound._id);\n }\n } else {\n // Fire this when the sound is ready to play to begin HTML5 Audio playback.\n var playHtml5 = function playHtml5() {\n node.currentTime = seek;\n node.muted = sound._muted || self._muted || Howler._muted || node.muted;\n node.volume = sound._volume * Howler.volume();\n node.playbackRate = sound._rate; // Some browsers will throw an error if this is called without user interaction.\n\n try {\n var play = node.play(); // Support older browsers that don't support promises, and thus don't have this issue.\n\n if (play && typeof Promise !== 'undefined' && (play instanceof Promise || typeof play.then === 'function')) {\n // Implements a lock to prevent DOMException: The play() request was interrupted by a call to pause().\n self._playLock = true; // Set param values immediately.\n\n setParams(); // Releases the lock and executes queued actions.\n\n play.then(function () {\n self._playLock = false;\n node._unlocked = true;\n\n if (!internal) {\n self._emit('play', sound._id);\n\n self._loadQueue();\n }\n })[\"catch\"](function () {\n self._playLock = false;\n\n self._emit('playerror', sound._id, 'Playback was unable to start. This is most commonly an issue ' + 'on mobile devices and Chrome where playback was not within a user interaction.'); // Reset the ended and paused values.\n\n\n sound._ended = true;\n sound._paused = true;\n });\n } else if (!internal) {\n self._playLock = false;\n setParams();\n\n self._emit('play', sound._id);\n\n self._loadQueue();\n } // Setting rate before playing won't work in IE, so we set it again here.\n\n\n node.playbackRate = sound._rate; // If the node is still paused, then we can assume there was a playback issue.\n\n if (node.paused) {\n self._emit('playerror', sound._id, 'Playback was unable to start. This is most commonly an issue ' + 'on mobile devices and Chrome where playback was not within a user interaction.');\n\n return;\n } // Setup the end timer on sprites or listen for the ended event.\n\n\n if (sprite !== '__default' || sound._loop) {\n self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout);\n } else {\n self._endTimers[sound._id] = function () {\n // Fire ended on this audio node.\n self._ended(sound); // Clear this listener.\n\n\n node.removeEventListener('ended', self._endTimers[sound._id], false);\n };\n\n node.addEventListener('ended', self._endTimers[sound._id], false);\n }\n } catch (err) {\n self._emit('playerror', sound._id, err);\n }\n }; // If this is streaming audio, make sure the src is set and load again.\n\n\n if (node.src === 'data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA') {\n node.src = self._src;\n node.load();\n } // Play immediately if ready, or wait for the 'canplaythrough'e vent.\n\n\n var loadedNoReadyState = window && window.ejecta || !node.readyState && Howler._navigator.isCocoonJS;\n\n if (node.readyState >= 3 || loadedNoReadyState) {\n playHtml5();\n } else {\n self._playLock = true;\n\n var listener = function listener() {\n // Begin playback.\n playHtml5(); // Clear this listener.\n\n node.removeEventListener(Howler._canPlayEvent, listener, false);\n };\n\n node.addEventListener(Howler._canPlayEvent, listener, false); // Cancel the end timer.\n\n self._clearTimer(sound._id);\n }\n }\n\n return sound._id;\n },\n\n /**\n * Pause playback and save current position.\n * @param {Number} id The sound ID (empty to pause all in group).\n * @return {Howl}\n */\n pause: function pause(id) {\n var self = this; // If the sound hasn't loaded or a play() promise is pending, add it to the load queue to pause when capable.\n\n if (self._state !== 'loaded' || self._playLock) {\n self._queue.push({\n event: 'pause',\n action: function action() {\n self.pause(id);\n }\n });\n\n return self;\n } // If no id is passed, get all ID's to be paused.\n\n\n var ids = self._getSoundIds(id);\n\n for (var i = 0; i < ids.length; i++) {\n // Clear the end timer.\n self._clearTimer(ids[i]); // Get the sound.\n\n\n var sound = self._soundById(ids[i]);\n\n if (sound && !sound._paused) {\n // Reset the seek position.\n sound._seek = self.seek(ids[i]);\n sound._rateSeek = 0;\n sound._paused = true; // Stop currently running fades.\n\n self._stopFade(ids[i]);\n\n if (sound._node) {\n if (self._webAudio) {\n // Make sure the sound has been created.\n if (!sound._node.bufferSource) {\n continue;\n }\n\n if (typeof sound._node.bufferSource.stop === 'undefined') {\n sound._node.bufferSource.noteOff(0);\n } else {\n sound._node.bufferSource.stop(0);\n } // Clean up the buffer source.\n\n\n self._cleanBuffer(sound._node);\n } else if (!isNaN(sound._node.duration) || sound._node.duration === Infinity) {\n sound._node.pause();\n }\n }\n } // Fire the pause event, unless `true` is passed as the 2nd argument.\n\n\n if (!arguments[1]) {\n self._emit('pause', sound ? sound._id : null);\n }\n }\n\n return self;\n },\n\n /**\n * Stop playback and reset to start.\n * @param {Number} id The sound ID (empty to stop all in group).\n * @param {Boolean} internal Internal Use: true prevents event firing.\n * @return {Howl}\n */\n stop: function stop(id, internal) {\n var self = this; // If the sound hasn't loaded, add it to the load queue to stop when capable.\n\n if (self._state !== 'loaded' || self._playLock) {\n self._queue.push({\n event: 'stop',\n action: function action() {\n self.stop(id);\n }\n });\n\n return self;\n } // If no id is passed, get all ID's to be stopped.\n\n\n var ids = self._getSoundIds(id);\n\n for (var i = 0; i < ids.length; i++) {\n // Clear the end timer.\n self._clearTimer(ids[i]); // Get the sound.\n\n\n var sound = self._soundById(ids[i]);\n\n if (sound) {\n // Reset the seek position.\n sound._seek = sound._start || 0;\n sound._rateSeek = 0;\n sound._paused = true;\n sound._ended = true; // Stop currently running fades.\n\n self._stopFade(ids[i]);\n\n if (sound._node) {\n if (self._webAudio) {\n // Make sure the sound's AudioBufferSourceNode has been created.\n if (sound._node.bufferSource) {\n if (typeof sound._node.bufferSource.stop === 'undefined') {\n sound._node.bufferSource.noteOff(0);\n } else {\n sound._node.bufferSource.stop(0);\n } // Clean up the buffer source.\n\n\n self._cleanBuffer(sound._node);\n }\n } else if (!isNaN(sound._node.duration) || sound._node.duration === Infinity) {\n sound._node.currentTime = sound._start || 0;\n\n sound._node.pause(); // If this is a live stream, stop download once the audio is stopped.\n\n\n if (sound._node.duration === Infinity) {\n self._clearSound(sound._node);\n }\n }\n }\n\n if (!internal) {\n self._emit('stop', sound._id);\n }\n }\n }\n\n return self;\n },\n\n /**\n * Mute/unmute a single sound or all sounds in this Howl group.\n * @param {Boolean} muted Set to true to mute and false to unmute.\n * @param {Number} id The sound ID to update (omit to mute/unmute all).\n * @return {Howl}\n */\n mute: function mute(muted, id) {\n var self = this; // If the sound hasn't loaded, add it to the load queue to mute when capable.\n\n if (self._state !== 'loaded' || self._playLock) {\n self._queue.push({\n event: 'mute',\n action: function action() {\n self.mute(muted, id);\n }\n });\n\n return self;\n } // If applying mute/unmute to all sounds, update the group's value.\n\n\n if (typeof id === 'undefined') {\n if (typeof muted === 'boolean') {\n self._muted = muted;\n } else {\n return self._muted;\n }\n } // If no id is passed, get all ID's to be muted.\n\n\n var ids = self._getSoundIds(id);\n\n for (var i = 0; i < ids.length; i++) {\n // Get the sound.\n var sound = self._soundById(ids[i]);\n\n if (sound) {\n sound._muted = muted; // Cancel active fade and set the volume to the end value.\n\n if (sound._interval) {\n self._stopFade(sound._id);\n }\n\n if (self._webAudio && sound._node) {\n sound._node.gain.setValueAtTime(muted ? 0 : sound._volume, Howler.ctx.currentTime);\n } else if (sound._node) {\n sound._node.muted = Howler._muted ? true : muted;\n }\n\n self._emit('mute', sound._id);\n }\n }\n\n return self;\n },\n\n /**\n * Get/set the volume of this sound or of the Howl group. This method can optionally take 0, 1 or 2 arguments.\n * volume() -> Returns the group's volume value.\n * volume(id) -> Returns the sound id's current volume.\n * volume(vol) -> Sets the volume of all sounds in this Howl group.\n * volume(vol, id) -> Sets the volume of passed sound id.\n * @return {Howl/Number} Returns self or current volume.\n */\n volume: function volume() {\n var self = this;\n var args = arguments;\n var vol, id; // Determine the values based on arguments.\n\n if (args.length === 0) {\n // Return the value of the groups' volume.\n return self._volume;\n } else if (args.length === 1 || args.length === 2 && typeof args[1] === 'undefined') {\n // First check if this is an ID, and if not, assume it is a new volume.\n var ids = self._getSoundIds();\n\n var index = ids.indexOf(args[0]);\n\n if (index >= 0) {\n id = parseInt(args[0], 10);\n } else {\n vol = parseFloat(args[0]);\n }\n } else if (args.length >= 2) {\n vol = parseFloat(args[0]);\n id = parseInt(args[1], 10);\n } // Update the volume or return the current volume.\n\n\n var sound;\n\n if (typeof vol !== 'undefined' && vol >= 0 && vol <= 1) {\n // If the sound hasn't loaded, add it to the load queue to change volume when capable.\n if (self._state !== 'loaded' || self._playLock) {\n self._queue.push({\n event: 'volume',\n action: function action() {\n self.volume.apply(self, args);\n }\n });\n\n return self;\n } // Set the group volume.\n\n\n if (typeof id === 'undefined') {\n self._volume = vol;\n } // Update one or all volumes.\n\n\n id = self._getSoundIds(id);\n\n for (var i = 0; i < id.length; i++) {\n // Get the sound.\n sound = self._soundById(id[i]);\n\n if (sound) {\n sound._volume = vol; // Stop currently running fades.\n\n if (!args[2]) {\n self._stopFade(id[i]);\n }\n\n if (self._webAudio && sound._node && !sound._muted) {\n sound._node.gain.setValueAtTime(vol, Howler.ctx.currentTime);\n } else if (sound._node && !sound._muted) {\n sound._node.volume = vol * Howler.volume();\n }\n\n self._emit('volume', sound._id);\n }\n }\n } else {\n sound = id ? self._soundById(id) : self._sounds[0];\n return sound ? sound._volume : 0;\n }\n\n return self;\n },\n\n /**\n * Fade a currently playing sound between two volumes (if no id is passed, all sounds will fade).\n * @param {Number} from The value to fade from (0.0 to 1.0).\n * @param {Number} to The volume to fade to (0.0 to 1.0).\n * @param {Number} len Time in milliseconds to fade.\n * @param {Number} id The sound id (omit to fade all sounds).\n * @return {Howl}\n */\n fade: function fade(from, to, len, id) {\n var self = this; // If the sound hasn't loaded, add it to the load queue to fade when capable.\n\n if (self._state !== 'loaded' || self._playLock) {\n self._queue.push({\n event: 'fade',\n action: function action() {\n self.fade(from, to, len, id);\n }\n });\n\n return self;\n } // Make sure the to/from/len values are numbers.\n\n\n from = parseFloat(from);\n to = parseFloat(to);\n len = parseFloat(len); // Set the volume to the start position.\n\n self.volume(from, id); // Fade the volume of one or all sounds.\n\n var ids = self._getSoundIds(id);\n\n for (var i = 0; i < ids.length; i++) {\n // Get the sound.\n var sound = self._soundById(ids[i]); // Create a linear fade or fall back to timeouts with HTML5 Audio.\n\n\n if (sound) {\n // Stop the previous fade if no sprite is being used (otherwise, volume handles this).\n if (!id) {\n self._stopFade(ids[i]);\n } // If we are using Web Audio, let the native methods do the actual fade.\n\n\n if (self._webAudio && !sound._muted) {\n var currentTime = Howler.ctx.currentTime;\n var end = currentTime + len / 1000;\n sound._volume = from;\n\n sound._node.gain.setValueAtTime(from, currentTime);\n\n sound._node.gain.linearRampToValueAtTime(to, end);\n }\n\n self._startFadeInterval(sound, from, to, len, ids[i], typeof id === 'undefined');\n }\n }\n\n return self;\n },\n\n /**\n * Starts the internal interval to fade a sound.\n * @param {Object} sound Reference to sound to fade.\n * @param {Number} from The value to fade from (0.0 to 1.0).\n * @param {Number} to The volume to fade to (0.0 to 1.0).\n * @param {Number} len Time in milliseconds to fade.\n * @param {Number} id The sound id to fade.\n * @param {Boolean} isGroup If true, set the volume on the group.\n */\n _startFadeInterval: function _startFadeInterval(sound, from, to, len, id, isGroup) {\n var self = this;\n var vol = from;\n var diff = to - from;\n var steps = Math.abs(diff / 0.01);\n var stepLen = Math.max(4, steps > 0 ? len / steps : len);\n var lastTick = Date.now(); // Store the value being faded to.\n\n sound._fadeTo = to; // Update the volume value on each interval tick.\n\n sound._interval = setInterval(function () {\n // Update the volume based on the time since the last tick.\n var tick = (Date.now() - lastTick) / len;\n lastTick = Date.now();\n vol += diff * tick; // Make sure the volume is in the right bounds.\n\n vol = Math.max(0, vol);\n vol = Math.min(1, vol); // Round to within 2 decimal points.\n\n vol = Math.round(vol * 100) / 100; // Change the volume.\n\n if (self._webAudio) {\n sound._volume = vol;\n } else {\n self.volume(vol, sound._id, true);\n } // Set the group's volume.\n\n\n if (isGroup) {\n self._volume = vol;\n } // When the fade is complete, stop it and fire event.\n\n\n if (to < from && vol <= to || to > from && vol >= to) {\n clearInterval(sound._interval);\n sound._interval = null;\n sound._fadeTo = null;\n self.volume(to, sound._id);\n\n self._emit('fade', sound._id);\n }\n }, stepLen);\n },\n\n /**\n * Internal method that stops the currently playing fade when\n * a new fade starts, volume is changed or the sound is stopped.\n * @param {Number} id The sound id.\n * @return {Howl}\n */\n _stopFade: function _stopFade(id) {\n var self = this;\n\n var sound = self._soundById(id);\n\n if (sound && sound._interval) {\n if (self._webAudio) {\n sound._node.gain.cancelScheduledValues(Howler.ctx.currentTime);\n }\n\n clearInterval(sound._interval);\n sound._interval = null;\n self.volume(sound._fadeTo, id);\n sound._fadeTo = null;\n\n self._emit('fade', id);\n }\n\n return self;\n },\n\n /**\n * Get/set the loop parameter on a sound. This method can optionally take 0, 1 or 2 arguments.\n * loop() -> Returns the group's loop value.\n * loop(id) -> Returns the sound id's loop value.\n * loop(loop) -> Sets the loop value for all sounds in this Howl group.\n * loop(loop, id) -> Sets the loop value of passed sound id.\n * @return {Howl/Boolean} Returns self or current loop value.\n */\n loop: function loop() {\n var self = this;\n var args = arguments;\n var loop, id, sound; // Determine the values for loop and id.\n\n if (args.length === 0) {\n // Return the grou's loop value.\n return self._loop;\n } else if (args.length === 1) {\n if (typeof args[0] === 'boolean') {\n loop = args[0];\n self._loop = loop;\n } else {\n // Return this sound's loop value.\n sound = self._soundById(parseInt(args[0], 10));\n return sound ? sound._loop : false;\n }\n } else if (args.length === 2) {\n loop = args[0];\n id = parseInt(args[1], 10);\n } // If no id is passed, get all ID's to be looped.\n\n\n var ids = self._getSoundIds(id);\n\n for (var i = 0; i < ids.length; i++) {\n sound = self._soundById(ids[i]);\n\n if (sound) {\n sound._loop = loop;\n\n if (self._webAudio && sound._node && sound._node.bufferSource) {\n sound._node.bufferSource.loop = loop;\n\n if (loop) {\n sound._node.bufferSource.loopStart = sound._start || 0;\n sound._node.bufferSource.loopEnd = sound._stop;\n }\n }\n }\n }\n\n return self;\n },\n\n /**\n * Get/set the playback rate of a sound. This method can optionally take 0, 1 or 2 arguments.\n * rate() -> Returns the first sound node's current playback rate.\n * rate(id) -> Returns the sound id's current playback rate.\n * rate(rate) -> Sets the playback rate of all sounds in this Howl group.\n * rate(rate, id) -> Sets the playback rate of passed sound id.\n * @return {Howl/Number} Returns self or the current playback rate.\n */\n rate: function rate() {\n var self = this;\n var args = arguments;\n var rate, id; // Determine the values based on arguments.\n\n if (args.length === 0) {\n // We will simply return the current rate of the first node.\n id = self._sounds[0]._id;\n } else if (args.length === 1) {\n // First check if this is an ID, and if not, assume it is a new rate value.\n var ids = self._getSoundIds();\n\n var index = ids.indexOf(args[0]);\n\n if (index >= 0) {\n id = parseInt(args[0], 10);\n } else {\n rate = parseFloat(args[0]);\n }\n } else if (args.length === 2) {\n rate = parseFloat(args[0]);\n id = parseInt(args[1], 10);\n } // Update the playback rate or return the current value.\n\n\n var sound;\n\n if (typeof rate === 'number') {\n // If the sound hasn't loaded, add it to the load queue to change playback rate when capable.\n if (self._state !== 'loaded' || self._playLock) {\n self._queue.push({\n event: 'rate',\n action: function action() {\n self.rate.apply(self, args);\n }\n });\n\n return self;\n } // Set the group rate.\n\n\n if (typeof id === 'undefined') {\n self._rate = rate;\n } // Update one or all volumes.\n\n\n id = self._getSoundIds(id);\n\n for (var i = 0; i < id.length; i++) {\n // Get the sound.\n sound = self._soundById(id[i]);\n\n if (sound) {\n // Keep track of our position when the rate changed and update the playback\n // start position so we can properly adjust the seek position for time elapsed.\n if (self.playing(id[i])) {\n sound._rateSeek = self.seek(id[i]);\n sound._playStart = self._webAudio ? Howler.ctx.currentTime : sound._playStart;\n }\n\n sound._rate = rate; // Change the playback rate.\n\n if (self._webAudio && sound._node && sound._node.bufferSource) {\n sound._node.bufferSource.playbackRate.setValueAtTime(rate, Howler.ctx.currentTime);\n } else if (sound._node) {\n sound._node.playbackRate = rate;\n } // Reset the timers.\n\n\n var seek = self.seek(id[i]);\n var duration = (self._sprite[sound._sprite][0] + self._sprite[sound._sprite][1]) / 1000 - seek;\n var timeout = duration * 1000 / Math.abs(sound._rate); // Start a new end timer if sound is already playing.\n\n if (self._endTimers[id[i]] || !sound._paused) {\n self._clearTimer(id[i]);\n\n self._endTimers[id[i]] = setTimeout(self._ended.bind(self, sound), timeout);\n }\n\n self._emit('rate', sound._id);\n }\n }\n } else {\n sound = self._soundById(id);\n return sound ? sound._rate : self._rate;\n }\n\n return self;\n },\n\n /**\n * Get/set the seek position of a sound. This method can optionally take 0, 1 or 2 arguments.\n * seek() -> Returns the first sound node's current seek position.\n * seek(id) -> Returns the sound id's current seek position.\n * seek(seek) -> Sets the seek position of the first sound node.\n * seek(seek, id) -> Sets the seek position of passed sound id.\n * @return {Howl/Number} Returns self or the current seek position.\n */\n seek: function seek() {\n var self = this;\n var args = arguments;\n var seek, id; // Determine the values based on arguments.\n\n if (args.length === 0) {\n // We will simply return the current position of the first node.\n id = self._sounds[0]._id;\n } else if (args.length === 1) {\n // First check if this is an ID, and if not, assume it is a new seek position.\n var ids = self._getSoundIds();\n\n var index = ids.indexOf(args[0]);\n\n if (index >= 0) {\n id = parseInt(args[0], 10);\n } else if (self._sounds.length) {\n id = self._sounds[0]._id;\n seek = parseFloat(args[0]);\n }\n } else if (args.length === 2) {\n seek = parseFloat(args[0]);\n id = parseInt(args[1], 10);\n } // If there is no ID, bail out.\n\n\n if (typeof id === 'undefined') {\n return self;\n } // If the sound hasn't loaded, add it to the load queue to seek when capable.\n\n\n if (self._state !== 'loaded' || self._playLock) {\n self._queue.push({\n event: 'seek',\n action: function action() {\n self.seek.apply(self, args);\n }\n });\n\n return self;\n } // Get the sound.\n\n\n var sound = self._soundById(id);\n\n if (sound) {\n if (typeof seek === 'number' && seek >= 0) {\n // Pause the sound and update position for restarting playback.\n var playing = self.playing(id);\n\n if (playing) {\n self.pause(id, true);\n } // Move the position of the track and cancel timer.\n\n\n sound._seek = seek;\n sound._ended = false;\n\n self._clearTimer(id); // Update the seek position for HTML5 Audio.\n\n\n if (!self._webAudio && sound._node && !isNaN(sound._node.duration)) {\n sound._node.currentTime = seek;\n } // Seek and emit when ready.\n\n\n var seekAndEmit = function seekAndEmit() {\n self._emit('seek', id); // Restart the playback if the sound was playing.\n\n\n if (playing) {\n self.play(id, true);\n }\n }; // Wait for the play lock to be unset before emitting (HTML5 Audio).\n\n\n if (playing && !self._webAudio) {\n var emitSeek = function emitSeek() {\n if (!self._playLock) {\n seekAndEmit();\n } else {\n setTimeout(emitSeek, 0);\n }\n };\n\n setTimeout(emitSeek, 0);\n } else {\n seekAndEmit();\n }\n } else {\n if (self._webAudio) {\n var realTime = self.playing(id) ? Howler.ctx.currentTime - sound._playStart : 0;\n var rateSeek = sound._rateSeek ? sound._rateSeek - sound._seek : 0;\n return sound._seek + (rateSeek + realTime * Math.abs(sound._rate));\n } else {\n return sound._node.currentTime;\n }\n }\n }\n\n return self;\n },\n\n /**\n * Check if a specific sound is currently playing or not (if id is provided), or check if at least one of the sounds in the group is playing or not.\n * @param {Number} id The sound id to check. If none is passed, the whole sound group is checked.\n * @return {Boolean} True if playing and false if not.\n */\n playing: function playing(id) {\n var self = this; // Check the passed sound ID (if any).\n\n if (typeof id === 'number') {\n var sound = self._soundById(id);\n\n return sound ? !sound._paused : false;\n } // Otherwise, loop through all sounds and check if any are playing.\n\n\n for (var i = 0; i < self._sounds.length; i++) {\n if (!self._sounds[i]._paused) {\n return true;\n }\n }\n\n return false;\n },\n\n /**\n * Get the duration of this sound. Passing a sound id will return the sprite duration.\n * @param {Number} id The sound id to check. If none is passed, return full source duration.\n * @return {Number} Audio duration in seconds.\n */\n duration: function duration(id) {\n var self = this;\n var duration = self._duration; // If we pass an ID, get the sound and return the sprite length.\n\n var sound = self._soundById(id);\n\n if (sound) {\n duration = self._sprite[sound._sprite][1] / 1000;\n }\n\n return duration;\n },\n\n /**\n * Returns the current loaded state of this Howl.\n * @return {String} 'unloaded', 'loading', 'loaded'\n */\n state: function state() {\n return this._state;\n },\n\n /**\n * Unload and destroy the current Howl object.\n * This will immediately stop all sound instances attached to this group.\n */\n unload: function unload() {\n var self = this; // Stop playing any active sounds.\n\n var sounds = self._sounds;\n\n for (var i = 0; i < sounds.length; i++) {\n // Stop the sound if it is currently playing.\n if (!sounds[i]._paused) {\n self.stop(sounds[i]._id);\n } // Remove the source or disconnect.\n\n\n if (!self._webAudio) {\n // Set the source to 0-second silence to stop any downloading (except in IE).\n self._clearSound(sounds[i]._node); // Remove any event listeners.\n\n\n sounds[i]._node.removeEventListener('error', sounds[i]._errorFn, false);\n\n sounds[i]._node.removeEventListener(Howler._canPlayEvent, sounds[i]._loadFn, false); // Release the Audio object back to the pool.\n\n\n Howler._releaseHtml5Audio(sounds[i]._node);\n } // Empty out all of the nodes.\n\n\n delete sounds[i]._node; // Make sure all timers are cleared out.\n\n self._clearTimer(sounds[i]._id);\n } // Remove the references in the global Howler object.\n\n\n var index = Howler._howls.indexOf(self);\n\n if (index >= 0) {\n Howler._howls.splice(index, 1);\n } // Delete this sound from the cache (if no other Howl is using it).\n\n\n var remCache = true;\n\n for (i = 0; i < Howler._howls.length; i++) {\n if (Howler._howls[i]._src === self._src || self._src.indexOf(Howler._howls[i]._src) >= 0) {\n remCache = false;\n break;\n }\n }\n\n if (cache && remCache) {\n delete cache[self._src];\n } // Clear global errors.\n\n\n Howler.noAudio = false; // Clear out `self`.\n\n self._state = 'unloaded';\n self._sounds = [];\n self = null;\n return null;\n },\n\n /**\n * Listen to a custom event.\n * @param {String} event Event name.\n * @param {Function} fn Listener to call.\n * @param {Number} id (optional) Only listen to events for this sound.\n * @param {Number} once (INTERNAL) Marks event to fire only once.\n * @return {Howl}\n */\n on: function on(event, fn, id, once) {\n var self = this;\n var events = self['_on' + event];\n\n if (typeof fn === 'function') {\n events.push(once ? {\n id: id,\n fn: fn,\n once: once\n } : {\n id: id,\n fn: fn\n });\n }\n\n return self;\n },\n\n /**\n * Remove a custom event. Call without parameters to remove all events.\n * @param {String} event Event name.\n * @param {Function} fn Listener to remove. Leave empty to remove all.\n * @param {Number} id (optional) Only remove events for this sound.\n * @return {Howl}\n */\n off: function off(event, fn, id) {\n var self = this;\n var events = self['_on' + event];\n var i = 0; // Allow passing just an event and ID.\n\n if (typeof fn === 'number') {\n id = fn;\n fn = null;\n }\n\n if (fn || id) {\n // Loop through event store and remove the passed function.\n for (i = 0; i < events.length; i++) {\n var isId = id === events[i].id;\n\n if (fn === events[i].fn && isId || !fn && isId) {\n events.splice(i, 1);\n break;\n }\n }\n } else if (event) {\n // Clear out all events of this type.\n self['_on' + event] = [];\n } else {\n // Clear out all events of every type.\n var keys = Object.keys(self);\n\n for (i = 0; i < keys.length; i++) {\n if (keys[i].indexOf('_on') === 0 && Array.isArray(self[keys[i]])) {\n self[keys[i]] = [];\n }\n }\n }\n\n return self;\n },\n\n /**\n * Listen to a custom event and remove it once fired.\n * @param {String} event Event name.\n * @param {Function} fn Listener to call.\n * @param {Number} id (optional) Only listen to events for this sound.\n * @return {Howl}\n */\n once: function once(event, fn, id) {\n var self = this; // Setup the event listener.\n\n self.on(event, fn, id, 1);\n return self;\n },\n\n /**\n * Emit all events of a specific type and pass the sound id.\n * @param {String} event Event name.\n * @param {Number} id Sound ID.\n * @param {Number} msg Message to go with event.\n * @return {Howl}\n */\n _emit: function _emit(event, id, msg) {\n var self = this;\n var events = self['_on' + event]; // Loop through event store and fire all functions.\n\n for (var i = events.length - 1; i >= 0; i--) {\n // Only fire the listener if the correct ID is used.\n if (!events[i].id || events[i].id === id || event === 'load') {\n setTimeout(function (fn) {\n fn.call(this, id, msg);\n }.bind(self, events[i].fn), 0); // If this event was setup with `once`, remove it.\n\n if (events[i].once) {\n self.off(event, events[i].fn, events[i].id);\n }\n }\n } // Pass the event type into load queue so that it can continue stepping.\n\n\n self._loadQueue(event);\n\n return self;\n },\n\n /**\n * Queue of actions initiated before the sound has loaded.\n * These will be called in sequence, with the next only firing\n * after the previous has finished executing (even if async like play).\n * @return {Howl}\n */\n _loadQueue: function _loadQueue(event) {\n var self = this;\n\n if (self._queue.length > 0) {\n var task = self._queue[0]; // Remove this task if a matching event was passed.\n\n if (task.event === event) {\n self._queue.shift();\n\n self._loadQueue();\n } // Run the task if no event type is passed.\n\n\n if (!event) {\n task.action();\n }\n }\n\n return self;\n },\n\n /**\n * Fired when playback ends at the end of the duration.\n * @param {Sound} sound The sound object to work with.\n * @return {Howl}\n */\n _ended: function _ended(sound) {\n var self = this;\n var sprite = sound._sprite; // If we are using IE and there was network latency we may be clipping\n // audio before it completes playing. Lets check the node to make sure it\n // believes it has completed, before ending the playback.\n\n if (!self._webAudio && sound._node && !sound._node.paused && !sound._node.ended && sound._node.currentTime < sound._stop) {\n setTimeout(self._ended.bind(self, sound), 100);\n return self;\n } // Should this sound loop?\n\n\n var loop = !!(sound._loop || self._sprite[sprite][2]); // Fire the ended event.\n\n self._emit('end', sound._id); // Restart the playback for HTML5 Audio loop.\n\n\n if (!self._webAudio && loop) {\n self.stop(sound._id, true).play(sound._id);\n } // Restart this timer if on a Web Audio loop.\n\n\n if (self._webAudio && loop) {\n self._emit('play', sound._id);\n\n sound._seek = sound._start || 0;\n sound._rateSeek = 0;\n sound._playStart = Howler.ctx.currentTime;\n var timeout = (sound._stop - sound._start) * 1000 / Math.abs(sound._rate);\n self._endTimers[sound._id] = setTimeout(self._ended.bind(self, sound), timeout);\n } // Mark the node as paused.\n\n\n if (self._webAudio && !loop) {\n sound._paused = true;\n sound._ended = true;\n sound._seek = sound._start || 0;\n sound._rateSeek = 0;\n\n self._clearTimer(sound._id); // Clean up the buffer source.\n\n\n self._cleanBuffer(sound._node); // Attempt to auto-suspend AudioContext if no sounds are still playing.\n\n\n Howler._autoSuspend();\n } // When using a sprite, end the track.\n\n\n if (!self._webAudio && !loop) {\n self.stop(sound._id, true);\n }\n\n return self;\n },\n\n /**\n * Clear the end timer for a sound playback.\n * @param {Number} id The sound ID.\n * @return {Howl}\n */\n _clearTimer: function _clearTimer(id) {\n var self = this;\n\n if (self._endTimers[id]) {\n // Clear the timeout or remove the ended listener.\n if (typeof self._endTimers[id] !== 'function') {\n clearTimeout(self._endTimers[id]);\n } else {\n var sound = self._soundById(id);\n\n if (sound && sound._node) {\n sound._node.removeEventListener('ended', self._endTimers[id], false);\n }\n }\n\n delete self._endTimers[id];\n }\n\n return self;\n },\n\n /**\n * Return the sound identified by this ID, or return null.\n * @param {Number} id Sound ID\n * @return {Object} Sound object or null.\n */\n _soundById: function _soundById(id) {\n var self = this; // Loop through all sounds and find the one with this ID.\n\n for (var i = 0; i < self._sounds.length; i++) {\n if (id === self._sounds[i]._id) {\n return self._sounds[i];\n }\n }\n\n return null;\n },\n\n /**\n * Return an inactive sound from the pool or create a new one.\n * @return {Sound} Sound playback object.\n */\n _inactiveSound: function _inactiveSound() {\n var self = this;\n\n self._drain(); // Find the first inactive node to recycle.\n\n\n for (var i = 0; i < self._sounds.length; i++) {\n if (self._sounds[i]._ended) {\n return self._sounds[i].reset();\n }\n } // If no inactive node was found, create a new one.\n\n\n return new Sound(self);\n },\n\n /**\n * Drain excess inactive sounds from the pool.\n */\n _drain: function _drain() {\n var self = this;\n var limit = self._pool;\n var cnt = 0;\n var i = 0; // If there are less sounds than the max pool size, we are done.\n\n if (self._sounds.length < limit) {\n return;\n } // Count the number of inactive sounds.\n\n\n for (i = 0; i < self._sounds.length; i++) {\n if (self._sounds[i]._ended) {\n cnt++;\n }\n } // Remove excess inactive sounds, going in reverse order.\n\n\n for (i = self._sounds.length - 1; i >= 0; i--) {\n if (cnt <= limit) {\n return;\n }\n\n if (self._sounds[i]._ended) {\n // Disconnect the audio source when using Web Audio.\n if (self._webAudio && self._sounds[i]._node) {\n self._sounds[i]._node.disconnect(0);\n } // Remove sounds until we have the pool size.\n\n\n self._sounds.splice(i, 1);\n\n cnt--;\n }\n }\n },\n\n /**\n * Get all ID's from the sounds pool.\n * @param {Number} id Only return one ID if one is passed.\n * @return {Array} Array of IDs.\n */\n _getSoundIds: function _getSoundIds(id) {\n var self = this;\n\n if (typeof id === 'undefined') {\n var ids = [];\n\n for (var i = 0; i < self._sounds.length; i++) {\n ids.push(self._sounds[i]._id);\n }\n\n return ids;\n } else {\n return [id];\n }\n },\n\n /**\n * Load the sound back into the buffer source.\n * @param {Sound} sound The sound object to work with.\n * @return {Howl}\n */\n _refreshBuffer: function _refreshBuffer(sound) {\n var self = this; // Setup the buffer source for playback.\n\n sound._node.bufferSource = Howler.ctx.createBufferSource();\n sound._node.bufferSource.buffer = cache[self._src]; // Connect to the correct node.\n\n if (sound._panner) {\n sound._node.bufferSource.connect(sound._panner);\n } else {\n sound._node.bufferSource.connect(sound._node);\n } // Setup looping and playback rate.\n\n\n sound._node.bufferSource.loop = sound._loop;\n\n if (sound._loop) {\n sound._node.bufferSource.loopStart = sound._start || 0;\n sound._node.bufferSource.loopEnd = sound._stop || 0;\n }\n\n sound._node.bufferSource.playbackRate.setValueAtTime(sound._rate, Howler.ctx.currentTime);\n\n return self;\n },\n\n /**\n * Prevent memory leaks by cleaning up the buffer source after playback.\n * @param {Object} node Sound's audio node containing the buffer source.\n * @return {Howl}\n */\n _cleanBuffer: function _cleanBuffer(node) {\n var self = this;\n var isIOS = Howler._navigator && Howler._navigator.vendor.indexOf('Apple') >= 0;\n\n if (Howler._scratchBuffer && node.bufferSource) {\n node.bufferSource.onended = null;\n node.bufferSource.disconnect(0);\n\n if (isIOS) {\n try {\n node.bufferSource.buffer = Howler._scratchBuffer;\n } catch (e) {}\n }\n }\n\n node.bufferSource = null;\n return self;\n },\n\n /**\n * Set the source to a 0-second silence to stop any downloading (except in IE).\n * @param {Object} node Audio node to clear.\n */\n _clearSound: function _clearSound(node) {\n var checkIE = /MSIE |Trident\\//.test(Howler._navigator && Howler._navigator.userAgent);\n\n if (!checkIE) {\n node.src = 'data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA';\n }\n }\n };\n /** Single Sound Methods **/\n\n /***************************************************************************/\n\n /**\n * Setup the sound object, which each node attached to a Howl group is contained in.\n * @param {Object} howl The Howl parent group.\n */\n\n var Sound = function Sound(howl) {\n this._parent = howl;\n this.init();\n };\n\n Sound.prototype = {\n /**\n * Initialize a new Sound object.\n * @return {Sound}\n */\n init: function init() {\n var self = this;\n var parent = self._parent; // Setup the default parameters.\n\n self._muted = parent._muted;\n self._loop = parent._loop;\n self._volume = parent._volume;\n self._rate = parent._rate;\n self._seek = 0;\n self._paused = true;\n self._ended = true;\n self._sprite = '__default'; // Generate a unique ID for this sound.\n\n self._id = ++Howler._counter; // Add itself to the parent's pool.\n\n parent._sounds.push(self); // Create the new node.\n\n\n self.create();\n return self;\n },\n\n /**\n * Create and setup a new sound object, whether HTML5 Audio or Web Audio.\n * @return {Sound}\n */\n create: function create() {\n var self = this;\n var parent = self._parent;\n var volume = Howler._muted || self._muted || self._parent._muted ? 0 : self._volume;\n\n if (parent._webAudio) {\n // Create the gain node for controlling volume (the source will connect to this).\n self._node = typeof Howler.ctx.createGain === 'undefined' ? Howler.ctx.createGainNode() : Howler.ctx.createGain();\n\n self._node.gain.setValueAtTime(volume, Howler.ctx.currentTime);\n\n self._node.paused = true;\n\n self._node.connect(Howler.masterGain);\n } else if (!Howler.noAudio) {\n // Get an unlocked Audio object from the pool.\n self._node = Howler._obtainHtml5Audio(); // Listen for errors (http://dev.w3.org/html5/spec-author-view/spec.html#mediaerror).\n\n self._errorFn = self._errorListener.bind(self);\n\n self._node.addEventListener('error', self._errorFn, false); // Listen for 'canplaythrough' event to let us know the sound is ready.\n\n\n self._loadFn = self._loadListener.bind(self);\n\n self._node.addEventListener(Howler._canPlayEvent, self._loadFn, false); // Setup the new audio node.\n\n\n self._node.src = parent._src;\n self._node.preload = 'auto';\n self._node.volume = volume * Howler.volume(); // Begin loading the source.\n\n self._node.load();\n }\n\n return self;\n },\n\n /**\n * Reset the parameters of this sound to the original state (for recycle).\n * @return {Sound}\n */\n reset: function reset() {\n var self = this;\n var parent = self._parent; // Reset all of the parameters of this sound.\n\n self._muted = parent._muted;\n self._loop = parent._loop;\n self._volume = parent._volume;\n self._rate = parent._rate;\n self._seek = 0;\n self._rateSeek = 0;\n self._paused = true;\n self._ended = true;\n self._sprite = '__default'; // Generate a new ID so that it isn't confused with the previous sound.\n\n self._id = ++Howler._counter;\n return self;\n },\n\n /**\n * HTML5 Audio error listener callback.\n */\n _errorListener: function _errorListener() {\n var self = this; // Fire an error event and pass back the code.\n\n self._parent._emit('loaderror', self._id, self._node.error ? self._node.error.code : 0); // Clear the event listener.\n\n\n self._node.removeEventListener('error', self._errorFn, false);\n },\n\n /**\n * HTML5 Audio canplaythrough listener callback.\n */\n _loadListener: function _loadListener() {\n var self = this;\n var parent = self._parent; // Round up the duration to account for the lower precision in HTML5 Audio.\n\n parent._duration = Math.ceil(self._node.duration * 10) / 10; // Setup a sprite if none is defined.\n\n if (Object.keys(parent._sprite).length === 0) {\n parent._sprite = {\n __default: [0, parent._duration * 1000]\n };\n }\n\n if (parent._state !== 'loaded') {\n parent._state = 'loaded';\n\n parent._emit('load');\n\n parent._loadQueue();\n } // Clear the event listener.\n\n\n self._node.removeEventListener(Howler._canPlayEvent, self._loadFn, false);\n }\n };\n /** Helper Methods **/\n\n /***************************************************************************/\n\n var cache = {};\n /**\n * Buffer a sound from URL, Data URI or cache and decode to audio source (Web Audio API).\n * @param {Howl} self\n */\n\n var loadBuffer = function loadBuffer(self) {\n var url = self._src; // Check if the buffer has already been cached and use it instead.\n\n if (cache[url]) {\n // Set the duration from the cache.\n self._duration = cache[url].duration; // Load the sound into this Howl.\n\n loadSound(self);\n return;\n }\n\n if (/^data:[^;]+;base64,/.test(url)) {\n // Decode the base64 data URI without XHR, since some browsers don't support it.\n var data = atob(url.split(',')[1]);\n var dataView = new Uint8Array(data.length);\n\n for (var i = 0; i < data.length; ++i) {\n dataView[i] = data.charCodeAt(i);\n }\n\n decodeAudioData(dataView.buffer, self);\n } else {\n // Load the buffer from the URL.\n var xhr = new XMLHttpRequest();\n xhr.open('GET', url, true);\n xhr.withCredentials = self._xhrWithCredentials;\n xhr.responseType = 'arraybuffer';\n\n xhr.onload = function () {\n // Make sure we get a successful response back.\n var code = (xhr.status + '')[0];\n\n if (code !== '0' && code !== '2' && code !== '3') {\n self._emit('loaderror', null, 'Failed loading audio file with status: ' + xhr.status + '.');\n\n return;\n }\n\n decodeAudioData(xhr.response, self);\n };\n\n xhr.onerror = function () {\n // If there is an error, switch to HTML5 Audio.\n if (self._webAudio) {\n self._html5 = true;\n self._webAudio = false;\n self._sounds = [];\n delete cache[url];\n self.load();\n }\n };\n\n safeXhrSend(xhr);\n }\n };\n /**\n * Send the XHR request wrapped in a try/catch.\n * @param {Object} xhr XHR to send.\n */\n\n\n var safeXhrSend = function safeXhrSend(xhr) {\n try {\n xhr.send();\n } catch (e) {\n xhr.onerror();\n }\n };\n /**\n * Decode audio data from an array buffer.\n * @param {ArrayBuffer} arraybuffer The audio data.\n * @param {Howl} self\n */\n\n\n var decodeAudioData = function decodeAudioData(arraybuffer, self) {\n // Fire a load error if something broke.\n var error = function error() {\n self._emit('loaderror', null, 'Decoding audio data failed.');\n }; // Load the sound on success.\n\n\n var success = function success(buffer) {\n if (buffer && self._sounds.length > 0) {\n cache[self._src] = buffer;\n loadSound(self, buffer);\n } else {\n error();\n }\n }; // Decode the buffer into an audio source.\n\n\n if (typeof Promise !== 'undefined' && Howler.ctx.decodeAudioData.length === 1) {\n Howler.ctx.decodeAudioData(arraybuffer).then(success)[\"catch\"](error);\n } else {\n Howler.ctx.decodeAudioData(arraybuffer, success, error);\n }\n };\n /**\n * Sound is now loaded, so finish setting everything up and fire the loaded event.\n * @param {Howl} self\n * @param {Object} buffer The decoded buffer sound source.\n */\n\n\n var loadSound = function loadSound(self, buffer) {\n // Set the duration.\n if (buffer && !self._duration) {\n self._duration = buffer.duration;\n } // Setup a sprite if none is defined.\n\n\n if (Object.keys(self._sprite).length === 0) {\n self._sprite = {\n __default: [0, self._duration * 1000]\n };\n } // Fire the loaded event.\n\n\n if (self._state !== 'loaded') {\n self._state = 'loaded';\n\n self._emit('load');\n\n self._loadQueue();\n }\n };\n /**\n * Setup the audio context when available, or switch to HTML5 Audio mode.\n */\n\n\n var setupAudioContext = function setupAudioContext() {\n // If we have already detected that Web Audio isn't supported, don't run this step again.\n if (!Howler.usingWebAudio) {\n return;\n } // Check if we are using Web Audio and setup the AudioContext if we are.\n\n\n try {\n if (typeof AudioContext !== 'undefined') {\n Howler.ctx = new AudioContext();\n } else if (typeof webkitAudioContext !== 'undefined') {\n Howler.ctx = new webkitAudioContext();\n } else {\n Howler.usingWebAudio = false;\n }\n } catch (e) {\n Howler.usingWebAudio = false;\n } // If the audio context creation still failed, set using web audio to false.\n\n\n if (!Howler.ctx) {\n Howler.usingWebAudio = false;\n } // Check if a webview is being used on iOS8 or earlier (rather than the browser).\n // If it is, disable Web Audio as it causes crashing.\n\n\n var iOS = /iP(hone|od|ad)/.test(Howler._navigator && Howler._navigator.platform);\n\n var appVersion = Howler._navigator && Howler._navigator.appVersion.match(/OS (\\d+)_(\\d+)_?(\\d+)?/);\n\n var version = appVersion ? parseInt(appVersion[1], 10) : null;\n\n if (iOS && version && version < 9) {\n var safari = /safari/.test(Howler._navigator && Howler._navigator.userAgent.toLowerCase());\n\n if (Howler._navigator && Howler._navigator.standalone && !safari || Howler._navigator && !Howler._navigator.standalone && !safari) {\n Howler.usingWebAudio = false;\n }\n } // Create and expose the master GainNode when using Web Audio (useful for plugins or advanced usage).\n\n\n if (Howler.usingWebAudio) {\n Howler.masterGain = typeof Howler.ctx.createGain === 'undefined' ? Howler.ctx.createGainNode() : Howler.ctx.createGain();\n Howler.masterGain.gain.setValueAtTime(Howler._muted ? 0 : Howler._volume, Howler.ctx.currentTime);\n Howler.masterGain.connect(Howler.ctx.destination);\n } // Re-run the setup on Howler.\n\n\n Howler._setup();\n }; // Add support for AMD (Asynchronous Module Definition) libraries such as require.js.\n\n\n if (typeof define === 'function' && define.amd) {\n define([], function () {\n return {\n Howler: Howler,\n Howl: Howl\n };\n });\n } // Add support for CommonJS libraries such as browserify.\n\n\n if (typeof exports !== 'undefined') {\n exports.Howler = Howler;\n exports.Howl = Howl;\n } // Define globally in case AMD is not available or unused.\n\n\n if (typeof window !== 'undefined') {\n window.HowlerGlobal = HowlerGlobal;\n window.Howler = Howler;\n window.Howl = Howl;\n window.Sound = Sound;\n } else if (typeof global !== 'undefined') {\n // Add to global in Node.js (for testing, etc).\n global.HowlerGlobal = HowlerGlobal;\n global.Howler = Howler;\n global.Howl = Howl;\n global.Sound = Sound;\n }\n})();\n/*!\n * Spatial Plugin - Adds support for stereo and 3D audio where Web Audio is supported.\n * \n * howler.js v2.1.3\n * howlerjs.com\n *\n * (c) 2013-2019, James Simpson of GoldFire Studios\n * goldfirestudios.com\n *\n * MIT License\n */\n\n\n(function () {\n 'use strict'; // Setup default properties.\n\n HowlerGlobal.prototype._pos = [0, 0, 0];\n HowlerGlobal.prototype._orientation = [0, 0, -1, 0, 1, 0];\n /** Global Methods **/\n\n /***************************************************************************/\n\n /**\n * Helper method to update the stereo panning position of all current Howls.\n * Future Howls will not use this value unless explicitly set.\n * @param {Number} pan A value of -1.0 is all the way left and 1.0 is all the way right.\n * @return {Howler/Number} Self or current stereo panning value.\n */\n\n HowlerGlobal.prototype.stereo = function (pan) {\n var self = this; // Stop right here if not using Web Audio.\n\n if (!self.ctx || !self.ctx.listener) {\n return self;\n } // Loop through all Howls and update their stereo panning.\n\n\n for (var i = self._howls.length - 1; i >= 0; i--) {\n self._howls[i].stereo(pan);\n }\n\n return self;\n };\n /**\n * Get/set the position of the listener in 3D cartesian space. Sounds using\n * 3D position will be relative to the listener's position.\n * @param {Number} x The x-position of the listener.\n * @param {Number} y The y-position of the listener.\n * @param {Number} z The z-position of the listener.\n * @return {Howler/Array} Self or current listener position.\n */\n\n\n HowlerGlobal.prototype.pos = function (x, y, z) {\n var self = this; // Stop right here if not using Web Audio.\n\n if (!self.ctx || !self.ctx.listener) {\n return self;\n } // Set the defaults for optional 'y' & 'z'.\n\n\n y = typeof y !== 'number' ? self._pos[1] : y;\n z = typeof z !== 'number' ? self._pos[2] : z;\n\n if (typeof x === 'number') {\n self._pos = [x, y, z];\n\n if (typeof self.ctx.listener.positionX !== 'undefined') {\n self.ctx.listener.positionX.setTargetAtTime(self._pos[0], Howler.ctx.currentTime, 0.1);\n self.ctx.listener.positionY.setTargetAtTime(self._pos[1], Howler.ctx.currentTime, 0.1);\n self.ctx.listener.positionZ.setTargetAtTime(self._pos[2], Howler.ctx.currentTime, 0.1);\n } else {\n self.ctx.listener.setPosition(self._pos[0], self._pos[1], self._pos[2]);\n }\n } else {\n return self._pos;\n }\n\n return self;\n };\n /**\n * Get/set the direction the listener is pointing in the 3D cartesian space.\n * A front and up vector must be provided. The front is the direction the\n * face of the listener is pointing, and up is the direction the top of the\n * listener is pointing. Thus, these values are expected to be at right angles\n * from each other.\n * @param {Number} x The x-orientation of the listener.\n * @param {Number} y The y-orientation of the listener.\n * @param {Number} z The z-orientation of the listener.\n * @param {Number} xUp The x-orientation of the top of the listener.\n * @param {Number} yUp The y-orientation of the top of the listener.\n * @param {Number} zUp The z-orientation of the top of the listener.\n * @return {Howler/Array} Returns self or the current orientation vectors.\n */\n\n\n HowlerGlobal.prototype.orientation = function (x, y, z, xUp, yUp, zUp) {\n var self = this; // Stop right here if not using Web Audio.\n\n if (!self.ctx || !self.ctx.listener) {\n return self;\n } // Set the defaults for optional 'y' & 'z'.\n\n\n var or = self._orientation;\n y = typeof y !== 'number' ? or[1] : y;\n z = typeof z !== 'number' ? or[2] : z;\n xUp = typeof xUp !== 'number' ? or[3] : xUp;\n yUp = typeof yUp !== 'number' ? or[4] : yUp;\n zUp = typeof zUp !== 'number' ? or[5] : zUp;\n\n if (typeof x === 'number') {\n self._orientation = [x, y, z, xUp, yUp, zUp];\n\n if (typeof self.ctx.listener.forwardX !== 'undefined') {\n self.ctx.listener.forwardX.setTargetAtTime(x, Howler.ctx.currentTime, 0.1);\n self.ctx.listener.forwardY.setTargetAtTime(y, Howler.ctx.currentTime, 0.1);\n self.ctx.listener.forwardZ.setTargetAtTime(z, Howler.ctx.currentTime, 0.1);\n self.ctx.listener.upX.setTargetAtTime(xUp, Howler.ctx.currentTime, 0.1);\n self.ctx.listener.upY.setTargetAtTime(yUp, Howler.ctx.currentTime, 0.1);\n self.ctx.listener.upZ.setTargetAtTime(zUp, Howler.ctx.currentTime, 0.1);\n } else {\n self.ctx.listener.setOrientation(x, y, z, xUp, yUp, zUp);\n }\n } else {\n return or;\n }\n\n return self;\n };\n /** Group Methods **/\n\n /***************************************************************************/\n\n /**\n * Add new properties to the core init.\n * @param {Function} _super Core init method.\n * @return {Howl}\n */\n\n\n Howl.prototype.init = function (_super) {\n return function (o) {\n var self = this; // Setup user-defined default properties.\n\n self._orientation = o.orientation || [1, 0, 0];\n self._stereo = o.stereo || null;\n self._pos = o.pos || null;\n self._pannerAttr = {\n coneInnerAngle: typeof o.coneInnerAngle !== 'undefined' ? o.coneInnerAngle : 360,\n coneOuterAngle: typeof o.coneOuterAngle !== 'undefined' ? o.coneOuterAngle : 360,\n coneOuterGain: typeof o.coneOuterGain !== 'undefined' ? o.coneOuterGain : 0,\n distanceModel: typeof o.distanceModel !== 'undefined' ? o.distanceModel : 'inverse',\n maxDistance: typeof o.maxDistance !== 'undefined' ? o.maxDistance : 10000,\n panningModel: typeof o.panningModel !== 'undefined' ? o.panningModel : 'HRTF',\n refDistance: typeof o.refDistance !== 'undefined' ? o.refDistance : 1,\n rolloffFactor: typeof o.rolloffFactor !== 'undefined' ? o.rolloffFactor : 1\n }; // Setup event listeners.\n\n self._onstereo = o.onstereo ? [{\n fn: o.onstereo\n }] : [];\n self._onpos = o.onpos ? [{\n fn: o.onpos\n }] : [];\n self._onorientation = o.onorientation ? [{\n fn: o.onorientation\n }] : []; // Complete initilization with howler.js core's init function.\n\n return _super.call(this, o);\n };\n }(Howl.prototype.init);\n /**\n * Get/set the stereo panning of the audio source for this sound or all in the group.\n * @param {Number} pan A value of -1.0 is all the way left and 1.0 is all the way right.\n * @param {Number} id (optional) The sound ID. If none is passed, all in group will be updated.\n * @return {Howl/Number} Returns self or the current stereo panning value.\n */\n\n\n Howl.prototype.stereo = function (pan, id) {\n var self = this; // Stop right here if not using Web Audio.\n\n if (!self._webAudio) {\n return self;\n } // If the sound hasn't loaded, add it to the load queue to change stereo pan when capable.\n\n\n if (self._state !== 'loaded') {\n self._queue.push({\n event: 'stereo',\n action: function action() {\n self.stereo(pan, id);\n }\n });\n\n return self;\n } // Check for PannerStereoNode support and fallback to PannerNode if it doesn't exist.\n\n\n var pannerType = typeof Howler.ctx.createStereoPanner === 'undefined' ? 'spatial' : 'stereo'; // Setup the group's stereo panning if no ID is passed.\n\n if (typeof id === 'undefined') {\n // Return the group's stereo panning if no parameters are passed.\n if (typeof pan === 'number') {\n self._stereo = pan;\n self._pos = [pan, 0, 0];\n } else {\n return self._stereo;\n }\n } // Change the streo panning of one or all sounds in group.\n\n\n var ids = self._getSoundIds(id);\n\n for (var i = 0; i < ids.length; i++) {\n // Get the sound.\n var sound = self._soundById(ids[i]);\n\n if (sound) {\n if (typeof pan === 'number') {\n sound._stereo = pan;\n sound._pos = [pan, 0, 0];\n\n if (sound._node) {\n // If we are falling back, make sure the panningModel is equalpower.\n sound._pannerAttr.panningModel = 'equalpower'; // Check if there is a panner setup and create a new one if not.\n\n if (!sound._panner || !sound._panner.pan) {\n setupPanner(sound, pannerType);\n }\n\n if (pannerType === 'spatial') {\n if (typeof sound._panner.positionX !== 'undefined') {\n sound._panner.positionX.setValueAtTime(pan, Howler.ctx.currentTime);\n\n sound._panner.positionY.setValueAtTime(0, Howler.ctx.currentTime);\n\n sound._panner.positionZ.setValueAtTime(0, Howler.ctx.currentTime);\n } else {\n sound._panner.setPosition(pan, 0, 0);\n }\n } else {\n sound._panner.pan.setValueAtTime(pan, Howler.ctx.currentTime);\n }\n }\n\n self._emit('stereo', sound._id);\n } else {\n return sound._stereo;\n }\n }\n }\n\n return self;\n };\n /**\n * Get/set the 3D spatial position of the audio source for this sound or group relative to the global listener.\n * @param {Number} x The x-position of the audio source.\n * @param {Number} y The y-position of the audio source.\n * @param {Number} z The z-position of the audio source.\n * @param {Number} id (optional) The sound ID. If none is passed, all in group will be updated.\n * @return {Howl/Array} Returns self or the current 3D spatial position: [x, y, z].\n */\n\n\n Howl.prototype.pos = function (x, y, z, id) {\n var self = this; // Stop right here if not using Web Audio.\n\n if (!self._webAudio) {\n return self;\n } // If the sound hasn't loaded, add it to the load queue to change position when capable.\n\n\n if (self._state !== 'loaded') {\n self._queue.push({\n event: 'pos',\n action: function action() {\n self.pos(x, y, z, id);\n }\n });\n\n return self;\n } // Set the defaults for optional 'y' & 'z'.\n\n\n y = typeof y !== 'number' ? 0 : y;\n z = typeof z !== 'number' ? -0.5 : z; // Setup the group's spatial position if no ID is passed.\n\n if (typeof id === 'undefined') {\n // Return the group's spatial position if no parameters are passed.\n if (typeof x === 'number') {\n self._pos = [x, y, z];\n } else {\n return self._pos;\n }\n } // Change the spatial position of one or all sounds in group.\n\n\n var ids = self._getSoundIds(id);\n\n for (var i = 0; i < ids.length; i++) {\n // Get the sound.\n var sound = self._soundById(ids[i]);\n\n if (sound) {\n if (typeof x === 'number') {\n sound._pos = [x, y, z];\n\n if (sound._node) {\n // Check if there is a panner setup and create a new one if not.\n if (!sound._panner || sound._panner.pan) {\n setupPanner(sound, 'spatial');\n }\n\n if (typeof sound._panner.positionX !== 'undefined') {\n sound._panner.positionX.setValueAtTime(x, Howler.ctx.currentTime);\n\n sound._panner.positionY.setValueAtTime(y, Howler.ctx.currentTime);\n\n sound._panner.positionZ.setValueAtTime(z, Howler.ctx.currentTime);\n } else {\n sound._panner.setPosition(x, y, z);\n }\n }\n\n self._emit('pos', sound._id);\n } else {\n return sound._pos;\n }\n }\n }\n\n return self;\n };\n /**\n * Get/set the direction the audio source is pointing in the 3D cartesian coordinate\n * space. Depending on how direction the sound is, based on the `cone` attributes,\n * a sound pointing away from the listener can be quiet or silent.\n * @param {Number} x The x-orientation of the source.\n * @param {Number} y The y-orientation of the source.\n * @param {Number} z The z-orientation of the source.\n * @param {Number} id (optional) The sound ID. If none is passed, all in group will be updated.\n * @return {Howl/Array} Returns self or the current 3D spatial orientation: [x, y, z].\n */\n\n\n Howl.prototype.orientation = function (x, y, z, id) {\n var self = this; // Stop right here if not using Web Audio.\n\n if (!self._webAudio) {\n return self;\n } // If the sound hasn't loaded, add it to the load queue to change orientation when capable.\n\n\n if (self._state !== 'loaded') {\n self._queue.push({\n event: 'orientation',\n action: function action() {\n self.orientation(x, y, z, id);\n }\n });\n\n return self;\n } // Set the defaults for optional 'y' & 'z'.\n\n\n y = typeof y !== 'number' ? self._orientation[1] : y;\n z = typeof z !== 'number' ? self._orientation[2] : z; // Setup the group's spatial orientation if no ID is passed.\n\n if (typeof id === 'undefined') {\n // Return the group's spatial orientation if no parameters are passed.\n if (typeof x === 'number') {\n self._orientation = [x, y, z];\n } else {\n return self._orientation;\n }\n } // Change the spatial orientation of one or all sounds in group.\n\n\n var ids = self._getSoundIds(id);\n\n for (var i = 0; i < ids.length; i++) {\n // Get the sound.\n var sound = self._soundById(ids[i]);\n\n if (sound) {\n if (typeof x === 'number') {\n sound._orientation = [x, y, z];\n\n if (sound._node) {\n // Check if there is a panner setup and create a new one if not.\n if (!sound._panner) {\n // Make sure we have a position to setup the node with.\n if (!sound._pos) {\n sound._pos = self._pos || [0, 0, -0.5];\n }\n\n setupPanner(sound, 'spatial');\n }\n\n if (typeof sound._panner.orientationX !== 'undefined') {\n sound._panner.orientationX.setValueAtTime(x, Howler.ctx.currentTime);\n\n sound._panner.orientationY.setValueAtTime(y, Howler.ctx.currentTime);\n\n sound._panner.orientationZ.setValueAtTime(z, Howler.ctx.currentTime);\n } else {\n sound._panner.setOrientation(x, y, z);\n }\n }\n\n self._emit('orientation', sound._id);\n } else {\n return sound._orientation;\n }\n }\n }\n\n return self;\n };\n /**\n * Get/set the panner node's attributes for a sound or group of sounds.\n * This method can optionall take 0, 1 or 2 arguments.\n * pannerAttr() -> Returns the group's values.\n * pannerAttr(id) -> Returns the sound id's values.\n * pannerAttr(o) -> Set's the values of all sounds in this Howl group.\n * pannerAttr(o, id) -> Set's the values of passed sound id.\n *\n * Attributes:\n * coneInnerAngle - (360 by default) A parameter for directional audio sources, this is an angle, in degrees,\n * inside of which there will be no volume reduction.\n * coneOuterAngle - (360 by default) A parameter for directional audio sources, this is an angle, in degrees,\n * outside of which the volume will be reduced to a constant value of `coneOuterGain`.\n * coneOuterGain - (0 by default) A parameter for directional audio sources, this is the gain outside of the\n * `coneOuterAngle`. It is a linear value in the range `[0, 1]`.\n * distanceModel - ('inverse' by default) Determines algorithm used to reduce volume as audio moves away from\n * listener. Can be `linear`, `inverse` or `exponential.\n * maxDistance - (10000 by default) The maximum distance between source and listener, after which the volume\n * will not be reduced any further.\n * refDistance - (1 by default) A reference distance for reducing volume as source moves further from the listener.\n * This is simply a variable of the distance model and has a different effect depending on which model\n * is used and the scale of your coordinates. Generally, volume will be equal to 1 at this distance.\n * rolloffFactor - (1 by default) How quickly the volume reduces as source moves from listener. This is simply a\n * variable of the distance model and can be in the range of `[0, 1]` with `linear` and `[0, ∞]`\n * with `inverse` and `exponential`.\n * panningModel - ('HRTF' by default) Determines which spatialization algorithm is used to position audio.\n * Can be `HRTF` or `equalpower`.\n *\n * @return {Howl/Object} Returns self or current panner attributes.\n */\n\n\n Howl.prototype.pannerAttr = function () {\n var self = this;\n var args = arguments;\n var o, id, sound; // Stop right here if not using Web Audio.\n\n if (!self._webAudio) {\n return self;\n } // Determine the values based on arguments.\n\n\n if (args.length === 0) {\n // Return the group's panner attribute values.\n return self._pannerAttr;\n } else if (args.length === 1) {\n if (typeof args[0] === 'object') {\n o = args[0]; // Set the grou's panner attribute values.\n\n if (typeof id === 'undefined') {\n if (!o.pannerAttr) {\n o.pannerAttr = {\n coneInnerAngle: o.coneInnerAngle,\n coneOuterAngle: o.coneOuterAngle,\n coneOuterGain: o.coneOuterGain,\n distanceModel: o.distanceModel,\n maxDistance: o.maxDistance,\n refDistance: o.refDistance,\n rolloffFactor: o.rolloffFactor,\n panningModel: o.panningModel\n };\n }\n\n self._pannerAttr = {\n coneInnerAngle: typeof o.pannerAttr.coneInnerAngle !== 'undefined' ? o.pannerAttr.coneInnerAngle : self._coneInnerAngle,\n coneOuterAngle: typeof o.pannerAttr.coneOuterAngle !== 'undefined' ? o.pannerAttr.coneOuterAngle : self._coneOuterAngle,\n coneOuterGain: typeof o.pannerAttr.coneOuterGain !== 'undefined' ? o.pannerAttr.coneOuterGain : self._coneOuterGain,\n distanceModel: typeof o.pannerAttr.distanceModel !== 'undefined' ? o.pannerAttr.distanceModel : self._distanceModel,\n maxDistance: typeof o.pannerAttr.maxDistance !== 'undefined' ? o.pannerAttr.maxDistance : self._maxDistance,\n refDistance: typeof o.pannerAttr.refDistance !== 'undefined' ? o.pannerAttr.refDistance : self._refDistance,\n rolloffFactor: typeof o.pannerAttr.rolloffFactor !== 'undefined' ? o.pannerAttr.rolloffFactor : self._rolloffFactor,\n panningModel: typeof o.pannerAttr.panningModel !== 'undefined' ? o.pannerAttr.panningModel : self._panningModel\n };\n }\n } else {\n // Return this sound's panner attribute values.\n sound = self._soundById(parseInt(args[0], 10));\n return sound ? sound._pannerAttr : self._pannerAttr;\n }\n } else if (args.length === 2) {\n o = args[0];\n id = parseInt(args[1], 10);\n } // Update the values of the specified sounds.\n\n\n var ids = self._getSoundIds(id);\n\n for (var i = 0; i < ids.length; i++) {\n sound = self._soundById(ids[i]);\n\n if (sound) {\n // Merge the new values into the sound.\n var pa = sound._pannerAttr;\n pa = {\n coneInnerAngle: typeof o.coneInnerAngle !== 'undefined' ? o.coneInnerAngle : pa.coneInnerAngle,\n coneOuterAngle: typeof o.coneOuterAngle !== 'undefined' ? o.coneOuterAngle : pa.coneOuterAngle,\n coneOuterGain: typeof o.coneOuterGain !== 'undefined' ? o.coneOuterGain : pa.coneOuterGain,\n distanceModel: typeof o.distanceModel !== 'undefined' ? o.distanceModel : pa.distanceModel,\n maxDistance: typeof o.maxDistance !== 'undefined' ? o.maxDistance : pa.maxDistance,\n refDistance: typeof o.refDistance !== 'undefined' ? o.refDistance : pa.refDistance,\n rolloffFactor: typeof o.rolloffFactor !== 'undefined' ? o.rolloffFactor : pa.rolloffFactor,\n panningModel: typeof o.panningModel !== 'undefined' ? o.panningModel : pa.panningModel\n }; // Update the panner values or create a new panner if none exists.\n\n var panner = sound._panner;\n\n if (panner) {\n panner.coneInnerAngle = pa.coneInnerAngle;\n panner.coneOuterAngle = pa.coneOuterAngle;\n panner.coneOuterGain = pa.coneOuterGain;\n panner.distanceModel = pa.distanceModel;\n panner.maxDistance = pa.maxDistance;\n panner.refDistance = pa.refDistance;\n panner.rolloffFactor = pa.rolloffFactor;\n panner.panningModel = pa.panningModel;\n } else {\n // Make sure we have a position to setup the node with.\n if (!sound._pos) {\n sound._pos = self._pos || [0, 0, -0.5];\n } // Create a new panner node.\n\n\n setupPanner(sound, 'spatial');\n }\n }\n }\n\n return self;\n };\n /** Single Sound Methods **/\n\n /***************************************************************************/\n\n /**\n * Add new properties to the core Sound init.\n * @param {Function} _super Core Sound init method.\n * @return {Sound}\n */\n\n\n Sound.prototype.init = function (_super) {\n return function () {\n var self = this;\n var parent = self._parent; // Setup user-defined default properties.\n\n self._orientation = parent._orientation;\n self._stereo = parent._stereo;\n self._pos = parent._pos;\n self._pannerAttr = parent._pannerAttr; // Complete initilization with howler.js core Sound's init function.\n\n _super.call(this); // If a stereo or position was specified, set it up.\n\n\n if (self._stereo) {\n parent.stereo(self._stereo);\n } else if (self._pos) {\n parent.pos(self._pos[0], self._pos[1], self._pos[2], self._id);\n }\n };\n }(Sound.prototype.init);\n /**\n * Override the Sound.reset method to clean up properties from the spatial plugin.\n * @param {Function} _super Sound reset method.\n * @return {Sound}\n */\n\n\n Sound.prototype.reset = function (_super) {\n return function () {\n var self = this;\n var parent = self._parent; // Reset all spatial plugin properties on this sound.\n\n self._orientation = parent._orientation;\n self._stereo = parent._stereo;\n self._pos = parent._pos;\n self._pannerAttr = parent._pannerAttr; // If a stereo or position was specified, set it up.\n\n if (self._stereo) {\n parent.stereo(self._stereo);\n } else if (self._pos) {\n parent.pos(self._pos[0], self._pos[1], self._pos[2], self._id);\n } else if (self._panner) {\n // Disconnect the panner.\n self._panner.disconnect(0);\n\n self._panner = undefined;\n\n parent._refreshBuffer(self);\n } // Complete resetting of the sound.\n\n\n return _super.call(this);\n };\n }(Sound.prototype.reset);\n /** Helper Methods **/\n\n /***************************************************************************/\n\n /**\n * Create a new panner node and save it on the sound.\n * @param {Sound} sound Specific sound to setup panning on.\n * @param {String} type Type of panner to create: 'stereo' or 'spatial'.\n */\n\n\n var setupPanner = function setupPanner(sound, type) {\n type = type || 'spatial'; // Create the new panner node.\n\n if (type === 'spatial') {\n sound._panner = Howler.ctx.createPanner();\n sound._panner.coneInnerAngle = sound._pannerAttr.coneInnerAngle;\n sound._panner.coneOuterAngle = sound._pannerAttr.coneOuterAngle;\n sound._panner.coneOuterGain = sound._pannerAttr.coneOuterGain;\n sound._panner.distanceModel = sound._pannerAttr.distanceModel;\n sound._panner.maxDistance = sound._pannerAttr.maxDistance;\n sound._panner.refDistance = sound._pannerAttr.refDistance;\n sound._panner.rolloffFactor = sound._pannerAttr.rolloffFactor;\n sound._panner.panningModel = sound._pannerAttr.panningModel;\n\n if (typeof sound._panner.positionX !== 'undefined') {\n sound._panner.positionX.setValueAtTime(sound._pos[0], Howler.ctx.currentTime);\n\n sound._panner.positionY.setValueAtTime(sound._pos[1], Howler.ctx.currentTime);\n\n sound._panner.positionZ.setValueAtTime(sound._pos[2], Howler.ctx.currentTime);\n } else {\n sound._panner.setPosition(sound._pos[0], sound._pos[1], sound._pos[2]);\n }\n\n if (typeof sound._panner.orientationX !== 'undefined') {\n sound._panner.orientationX.setValueAtTime(sound._orientation[0], Howler.ctx.currentTime);\n\n sound._panner.orientationY.setValueAtTime(sound._orientation[1], Howler.ctx.currentTime);\n\n sound._panner.orientationZ.setValueAtTime(sound._orientation[2], Howler.ctx.currentTime);\n } else {\n sound._panner.setOrientation(sound._orientation[0], sound._orientation[1], sound._orientation[2]);\n }\n } else {\n sound._panner = Howler.ctx.createStereoPanner();\n\n sound._panner.pan.setValueAtTime(sound._stereo, Howler.ctx.currentTime);\n }\n\n sound._panner.connect(sound._node); // Update the connections.\n\n\n if (!sound._paused) {\n sound._parent.pause(sound._id, true).play(sound._id, true);\n }\n };\n})();","'use strict';\n// 22.1.3.9 Array.prototype.findIndex(predicate, thisArg = undefined)\nvar $export = require('./_export');\nvar $find = require('./_array-methods')(6);\nvar KEY = 'findIndex';\nvar forced = true;\n// Shouldn't skip holes\nif (KEY in []) Array(1)[KEY](function () { forced = false; });\n$export($export.P + $export.F * forced, 'Array', {\n findIndex: function findIndex(callbackfn /* , that = undefined */) {\n return $find(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined);\n }\n});\nrequire('./_add-to-unscopables')(KEY);\n","require('./_typed-array')('Uint8', 1, function (init) {\n return function Uint8Array(data, byteOffset, length) {\n return init(this, data, byteOffset, length);\n };\n});\n","// 22.1.3.6 Array.prototype.fill(value, start = 0, end = this.length)\n'use strict';\nvar toObject = require('./_to-object');\nvar toAbsoluteIndex = require('./_to-absolute-index');\nvar toLength = require('./_to-length');\nmodule.exports = function fill(value /* , start = 0, end = @length */) {\n var O = toObject(this);\n var length = toLength(O.length);\n var aLen = arguments.length;\n var index = toAbsoluteIndex(aLen > 1 ? arguments[1] : undefined, length);\n var end = aLen > 2 ? arguments[2] : undefined;\n var endPos = end === undefined ? length : toAbsoluteIndex(end, length);\n while (endPos > index) O[index++] = value;\n return O;\n};\n","var global = require('./_global');\nvar inheritIfRequired = require('./_inherit-if-required');\nvar dP = require('./_object-dp').f;\nvar gOPN = require('./_object-gopn').f;\nvar isRegExp = require('./_is-regexp');\nvar $flags = require('./_flags');\nvar $RegExp = global.RegExp;\nvar Base = $RegExp;\nvar proto = $RegExp.prototype;\nvar re1 = /a/g;\nvar re2 = /a/g;\n// \"new\" creates a new object, old webkit buggy here\nvar CORRECT_NEW = new $RegExp(re1) !== re1;\n\nif (require('./_descriptors') && (!CORRECT_NEW || require('./_fails')(function () {\n re2[require('./_wks')('match')] = false;\n // RegExp constructor can alter flags and IsRegExp works correct with @@match\n return $RegExp(re1) != re1 || $RegExp(re2) == re2 || $RegExp(re1, 'i') != '/a/i';\n}))) {\n $RegExp = function RegExp(p, f) {\n var tiRE = this instanceof $RegExp;\n var piRE = isRegExp(p);\n var fiU = f === undefined;\n return !tiRE && piRE && p.constructor === $RegExp && fiU ? p\n : inheritIfRequired(CORRECT_NEW\n ? new Base(piRE && !fiU ? p.source : p, f)\n : Base((piRE = p instanceof $RegExp) ? p.source : p, piRE && fiU ? $flags.call(p) : f)\n , tiRE ? this : proto, $RegExp);\n };\n var proxy = function (key) {\n key in $RegExp || dP($RegExp, key, {\n configurable: true,\n get: function () { return Base[key]; },\n set: function (it) { Base[key] = it; }\n });\n };\n for (var keys = gOPN(Base), i = 0; keys.length > i;) proxy(keys[i++]);\n proto.constructor = $RegExp;\n $RegExp.prototype = proto;\n require('./_redefine')(global, 'RegExp', $RegExp);\n}\n\nrequire('./_set-species')('RegExp');\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/scheduler.production.min.js');\n} else {\n module.exports = require('./cjs/scheduler.development.js');\n}","require(\"core-js/modules/es6.array.is-array\");\n\nrequire(\"core-js/modules/es6.array.some\");\n\nrequire(\"core-js/modules/web.dom.iterable\");\n\nrequire(\"core-js/modules/es6.array.iterator\");\n\nrequire(\"core-js/modules/es6.object.to-string\");\n\nrequire(\"core-js/modules/es6.object.keys\");\n\nrequire(\"core-js/modules/es6.array.for-each\");\n\nrequire(\"core-js/modules/es6.object.set-prototype-of\");\n\nrequire(\"core-js/modules/es6.object.create\");\n\nrequire(\"core-js/modules/es6.array.index-of\");\n\nrequire(\"core-js/modules/es6.object.define-property\");\n\nrequire(\"core-js/modules/es6.object.assign\");\n\nexports.__esModule = true;\nexports.Helmet = undefined;\n\nvar _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n};\n\nvar _createClass = function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n}();\n\nvar _react = require(\"react\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = require(\"prop-types\");\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _reactSideEffect = require(\"react-side-effect\");\n\nvar _reactSideEffect2 = _interopRequireDefault(_reactSideEffect);\n\nvar _reactFastCompare = require(\"react-fast-compare\");\n\nvar _reactFastCompare2 = _interopRequireDefault(_reactFastCompare);\n\nvar _HelmetUtils = require(\"./HelmetUtils.js\");\n\nvar _HelmetConstants = require(\"./HelmetConstants.js\");\n\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n \"default\": obj\n };\n}\n\nfunction _objectWithoutProperties(obj, keys) {\n var target = {};\n\n for (var i in obj) {\n if (keys.indexOf(i) >= 0) continue;\n if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;\n target[i] = obj[i];\n }\n\n return target;\n}\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nfunction _possibleConstructorReturn(self, call) {\n if (!self) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self;\n}\n\nfunction _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass);\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n}\n\nvar Helmet = function Helmet(Component) {\n var _class, _temp;\n\n return _temp = _class = function (_React$Component) {\n _inherits(HelmetWrapper, _React$Component);\n\n function HelmetWrapper() {\n _classCallCheck(this, HelmetWrapper);\n\n return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));\n }\n\n HelmetWrapper.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {\n return !(0, _reactFastCompare2[\"default\"])(this.props, nextProps);\n };\n\n HelmetWrapper.prototype.mapNestedChildrenToProps = function mapNestedChildrenToProps(child, nestedChildren) {\n if (!nestedChildren) {\n return null;\n }\n\n switch (child.type) {\n case _HelmetConstants.TAG_NAMES.SCRIPT:\n case _HelmetConstants.TAG_NAMES.NOSCRIPT:\n return {\n innerHTML: nestedChildren\n };\n\n case _HelmetConstants.TAG_NAMES.STYLE:\n return {\n cssText: nestedChildren\n };\n }\n\n throw new Error(\"<\" + child.type + \" /> elements are self-closing and can not contain children. Refer to our API for more information.\");\n };\n\n HelmetWrapper.prototype.flattenArrayTypeChildren = function flattenArrayTypeChildren(_ref) {\n var _extends2;\n\n var child = _ref.child,\n arrayTypeChildren = _ref.arrayTypeChildren,\n newChildProps = _ref.newChildProps,\n nestedChildren = _ref.nestedChildren;\n return _extends({}, arrayTypeChildren, (_extends2 = {}, _extends2[child.type] = [].concat(arrayTypeChildren[child.type] || [], [_extends({}, newChildProps, this.mapNestedChildrenToProps(child, nestedChildren))]), _extends2));\n };\n\n HelmetWrapper.prototype.mapObjectTypeChildren = function mapObjectTypeChildren(_ref2) {\n var _extends3, _extends4;\n\n var child = _ref2.child,\n newProps = _ref2.newProps,\n newChildProps = _ref2.newChildProps,\n nestedChildren = _ref2.nestedChildren;\n\n switch (child.type) {\n case _HelmetConstants.TAG_NAMES.TITLE:\n return _extends({}, newProps, (_extends3 = {}, _extends3[child.type] = nestedChildren, _extends3.titleAttributes = _extends({}, newChildProps), _extends3));\n\n case _HelmetConstants.TAG_NAMES.BODY:\n return _extends({}, newProps, {\n bodyAttributes: _extends({}, newChildProps)\n });\n\n case _HelmetConstants.TAG_NAMES.HTML:\n return _extends({}, newProps, {\n htmlAttributes: _extends({}, newChildProps)\n });\n }\n\n return _extends({}, newProps, (_extends4 = {}, _extends4[child.type] = _extends({}, newChildProps), _extends4));\n };\n\n HelmetWrapper.prototype.mapArrayTypeChildrenToProps = function mapArrayTypeChildrenToProps(arrayTypeChildren, newProps) {\n var newFlattenedProps = _extends({}, newProps);\n\n Object.keys(arrayTypeChildren).forEach(function (arrayChildName) {\n var _extends5;\n\n newFlattenedProps = _extends({}, newFlattenedProps, (_extends5 = {}, _extends5[arrayChildName] = arrayTypeChildren[arrayChildName], _extends5));\n });\n return newFlattenedProps;\n };\n\n HelmetWrapper.prototype.warnOnInvalidChildren = function warnOnInvalidChildren(child, nestedChildren) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!_HelmetConstants.VALID_TAG_NAMES.some(function (name) {\n return child.type === name;\n })) {\n if (typeof child.type === \"function\") {\n return (0, _HelmetUtils.warn)(\"You may be attempting to nest components within each other, which is not allowed. Refer to our API for more information.\");\n }\n\n return (0, _HelmetUtils.warn)(\"Only elements types \" + _HelmetConstants.VALID_TAG_NAMES.join(\", \") + \" are allowed. Helmet does not support rendering <\" + child.type + \"> elements. Refer to our API for more information.\");\n }\n\n if (nestedChildren && typeof nestedChildren !== \"string\" && (!Array.isArray(nestedChildren) || nestedChildren.some(function (nestedChild) {\n return typeof nestedChild !== \"string\";\n }))) {\n throw new Error(\"Helmet expects a string as a child of <\" + child.type + \">. Did you forget to wrap your children in braces? ( <\" + child.type + \">{``}\" + child.type + \"> ) Refer to our API for more information.\");\n }\n }\n\n return true;\n };\n\n HelmetWrapper.prototype.mapChildrenToProps = function mapChildrenToProps(children, newProps) {\n var _this2 = this;\n\n var arrayTypeChildren = {};\n\n _react2[\"default\"].Children.forEach(children, function (child) {\n if (!child || !child.props) {\n return;\n }\n\n var _child$props = child.props,\n nestedChildren = _child$props.children,\n childProps = _objectWithoutProperties(_child$props, [\"children\"]);\n\n var newChildProps = (0, _HelmetUtils.convertReactPropstoHtmlAttributes)(childProps);\n\n _this2.warnOnInvalidChildren(child, nestedChildren);\n\n switch (child.type) {\n case _HelmetConstants.TAG_NAMES.LINK:\n case _HelmetConstants.TAG_NAMES.META:\n case _HelmetConstants.TAG_NAMES.NOSCRIPT:\n case _HelmetConstants.TAG_NAMES.SCRIPT:\n case _HelmetConstants.TAG_NAMES.STYLE:\n arrayTypeChildren = _this2.flattenArrayTypeChildren({\n child: child,\n arrayTypeChildren: arrayTypeChildren,\n newChildProps: newChildProps,\n nestedChildren: nestedChildren\n });\n break;\n\n default:\n newProps = _this2.mapObjectTypeChildren({\n child: child,\n newProps: newProps,\n newChildProps: newChildProps,\n nestedChildren: nestedChildren\n });\n break;\n }\n });\n\n newProps = this.mapArrayTypeChildrenToProps(arrayTypeChildren, newProps);\n return newProps;\n };\n\n HelmetWrapper.prototype.render = function render() {\n var _props = this.props,\n children = _props.children,\n props = _objectWithoutProperties(_props, [\"children\"]);\n\n var newProps = _extends({}, props);\n\n if (children) {\n newProps = this.mapChildrenToProps(children, newProps);\n }\n\n return _react2[\"default\"].createElement(Component, newProps);\n };\n\n _createClass(HelmetWrapper, null, [{\n key: \"canUseDOM\",\n // Component.peek comes from react-side-effect:\n // For testing, you may use a static peek() method available on the returned component.\n // It lets you get the current state without resetting the mounted instance stack.\n // Don’t use it for anything other than testing.\n\n /**\n * @param {Object} base: {\"target\": \"_blank\", \"href\": \"http://mysite.com/\"}\n * @param {Object} bodyAttributes: {\"className\": \"root\"}\n * @param {String} defaultTitle: \"Default Title\"\n * @param {Boolean} defer: true\n * @param {Boolean} encodeSpecialCharacters: true\n * @param {Object} htmlAttributes: {\"lang\": \"en\", \"amp\": undefined}\n * @param {Array} link: [{\"rel\": \"canonical\", \"href\": \"http://mysite.com/example\"}]\n * @param {Array} meta: [{\"name\": \"description\", \"content\": \"Test description\"}]\n * @param {Array} noscript: [{\"innerHTML\": \" console.log(newState)\"\n * @param {Array} script: [{\"type\": \"text/javascript\", \"src\": \"http://mysite.com/js/test.js\"}]\n * @param {Array} style: [{\"type\": \"text/css\", \"cssText\": \"div { display: block; color: blue; }\"}]\n * @param {String} title: \"Title\"\n * @param {Object} titleAttributes: {\"itemprop\": \"name\"}\n * @param {String} titleTemplate: \"MySite.com - %s\"\n */\n set: function set(canUseDOM) {\n Component.canUseDOM = canUseDOM;\n }\n }]);\n\n return HelmetWrapper;\n }(_react2[\"default\"].Component), _class.propTypes = {\n base: _propTypes2[\"default\"].object,\n bodyAttributes: _propTypes2[\"default\"].object,\n children: _propTypes2[\"default\"].oneOfType([_propTypes2[\"default\"].arrayOf(_propTypes2[\"default\"].node), _propTypes2[\"default\"].node]),\n defaultTitle: _propTypes2[\"default\"].string,\n defer: _propTypes2[\"default\"].bool,\n encodeSpecialCharacters: _propTypes2[\"default\"].bool,\n htmlAttributes: _propTypes2[\"default\"].object,\n link: _propTypes2[\"default\"].arrayOf(_propTypes2[\"default\"].object),\n meta: _propTypes2[\"default\"].arrayOf(_propTypes2[\"default\"].object),\n noscript: _propTypes2[\"default\"].arrayOf(_propTypes2[\"default\"].object),\n onChangeClientState: _propTypes2[\"default\"].func,\n script: _propTypes2[\"default\"].arrayOf(_propTypes2[\"default\"].object),\n style: _propTypes2[\"default\"].arrayOf(_propTypes2[\"default\"].object),\n title: _propTypes2[\"default\"].string,\n titleAttributes: _propTypes2[\"default\"].object,\n titleTemplate: _propTypes2[\"default\"].string\n }, _class.defaultProps = {\n defer: true,\n encodeSpecialCharacters: true\n }, _class.peek = Component.peek, _class.rewind = function () {\n var mappedState = Component.rewind();\n\n if (!mappedState) {\n // provide fallback if mappedState is undefined\n mappedState = (0, _HelmetUtils.mapStateOnServer)({\n baseTag: [],\n bodyAttributes: {},\n encodeSpecialCharacters: true,\n htmlAttributes: {},\n linkTags: [],\n metaTags: [],\n noscriptTags: [],\n scriptTags: [],\n styleTags: [],\n title: \"\",\n titleAttributes: {}\n });\n }\n\n return mappedState;\n }, _temp;\n};\n\nvar NullComponent = function NullComponent() {\n return null;\n};\n\nvar HelmetSideEffects = (0, _reactSideEffect2[\"default\"])(_HelmetUtils.reducePropsToState, _HelmetUtils.handleClientStateChange, _HelmetUtils.mapStateOnServer)(NullComponent);\nvar HelmetExport = Helmet(HelmetSideEffects);\nHelmetExport.renderStatic = HelmetExport.rewind;\nexports.Helmet = HelmetExport;\nexports[\"default\"] = HelmetExport;","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-is.production.min.js');\n} else {\n module.exports = require('./cjs/react-is.development.js');\n}","var DESCRIPTORS = require('./_descriptors');\nvar getKeys = require('./_object-keys');\nvar toIObject = require('./_to-iobject');\nvar isEnum = require('./_object-pie').f;\nmodule.exports = function (isEntries) {\n return function (it) {\n var O = toIObject(it);\n var keys = getKeys(O);\n var length = keys.length;\n var i = 0;\n var result = [];\n var key;\n while (length > i) {\n key = keys[i++];\n if (!DESCRIPTORS || isEnum.call(O, key)) {\n result.push(isEntries ? [key, O[key]] : O[key]);\n }\n }\n return result;\n };\n};\n","var $export = require('./_export');\n// 19.1.2.3 / 15.2.3.7 Object.defineProperties(O, Properties)\n$export($export.S + $export.F * !require('./_descriptors'), 'Object', { defineProperties: require('./_object-dps') });\n","require('./_typed-array')('Float32', 4, function (init) {\n return function Float32Array(data, byteOffset, length) {\n return init(this, data, byteOffset, length);\n };\n});\n","import \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es7.symbol.async-iterator\";\nimport \"core-js/modules/es6.promise\";\nimport \"core-js/modules/es6.object.to-string\";\nimport \"core-js/modules/es6.object.define-property\";\nimport \"core-js/modules/es6.symbol\";\nimport \"core-js/modules/es6.array.index-of\";\nimport \"core-js/modules/es6.object.assign\";\nimport \"core-js/modules/es6.object.create\";\nimport \"core-js/modules/es6.object.set-prototype-of\";\n\n/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\n\n/* global Reflect, Promise */\nvar _extendStatics = function extendStatics(d, b) {\n _extendStatics = Object.setPrototypeOf || {\n __proto__: []\n } instanceof Array && function (d, b) {\n d.__proto__ = b;\n } || function (d, b) {\n for (var p in b) {\n if (b.hasOwnProperty(p)) d[p] = b[p];\n }\n };\n\n return _extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n _extendStatics(d, b);\n\n function __() {\n this.constructor = d;\n }\n\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nvar _assign = function __assign() {\n _assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return _assign.apply(this, arguments);\n};\n\nexport { _assign as __assign };\nexport function __rest(s, e) {\n var t = {};\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n }\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n}\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length,\n r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,\n d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {\n if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n }\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\nexport function __param(paramIndex, decorator) {\n return function (target, key) {\n decorator(target, key, paramIndex);\n };\n}\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\nexport function __awaiter(thisArg, _arguments, P, generator) {\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) {\n try {\n step(generator.next(value));\n } catch (e) {\n reject(e);\n }\n }\n\n function rejected(value) {\n try {\n step(generator[\"throw\"](value));\n } catch (e) {\n reject(e);\n }\n }\n\n function step(result) {\n result.done ? resolve(result.value) : new P(function (resolve) {\n resolve(result.value);\n }).then(fulfilled, rejected);\n }\n\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\nexport function __generator(thisArg, body) {\n var _ = {\n label: 0,\n sent: function sent() {\n if (t[0] & 1) throw t[1];\n return t[1];\n },\n trys: [],\n ops: []\n },\n f,\n y,\n t,\n g;\n return g = {\n next: verb(0),\n \"throw\": verb(1),\n \"return\": verb(2)\n }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function () {\n return this;\n }), g;\n\n function verb(n) {\n return function (v) {\n return step([n, v]);\n };\n }\n\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n\n while (_) {\n try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n\n switch (op[0]) {\n case 0:\n case 1:\n t = op;\n break;\n\n case 4:\n _.label++;\n return {\n value: op[1],\n done: false\n };\n\n case 5:\n _.label++;\n y = op[1];\n op = [0];\n continue;\n\n case 7:\n op = _.ops.pop();\n\n _.trys.pop();\n\n continue;\n\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n _ = 0;\n continue;\n }\n\n if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {\n _.label = op[1];\n break;\n }\n\n if (op[0] === 6 && _.label < t[1]) {\n _.label = t[1];\n t = op;\n break;\n }\n\n if (t && _.label < t[2]) {\n _.label = t[2];\n\n _.ops.push(op);\n\n break;\n }\n\n if (t[2]) _.ops.pop();\n\n _.trys.pop();\n\n continue;\n }\n\n op = body.call(thisArg, _);\n } catch (e) {\n op = [6, e];\n y = 0;\n } finally {\n f = t = 0;\n }\n }\n\n if (op[0] & 5) throw op[1];\n return {\n value: op[0] ? op[1] : void 0,\n done: true\n };\n }\n}\nexport function __exportStar(m, exports) {\n for (var p in m) {\n if (!exports.hasOwnProperty(p)) exports[p] = m[p];\n }\n}\nexport function __values(o) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator],\n i = 0;\n if (m) return m.call(o);\n return {\n next: function next() {\n if (o && i >= o.length) o = void 0;\n return {\n value: o && o[i++],\n done: !o\n };\n }\n };\n}\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o),\n r,\n ar = [],\n e;\n\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {\n ar.push(r.value);\n }\n } catch (error) {\n e = {\n error: error\n };\n } finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n } finally {\n if (e) throw e.error;\n }\n }\n\n return ar;\n}\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++) {\n ar = ar.concat(__read(arguments[i]));\n }\n\n return ar;\n}\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) {\n s += arguments[i].length;\n }\n\n for (var r = Array(s), k = 0, i = 0; i < il; i++) {\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {\n r[k] = a[j];\n }\n }\n\n return r;\n}\n;\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []),\n i,\n q = [];\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () {\n return this;\n }, i;\n\n function verb(n) {\n if (g[n]) i[n] = function (v) {\n return new Promise(function (a, b) {\n q.push([n, v, a, b]) > 1 || resume(n, v);\n });\n };\n }\n\n function resume(n, v) {\n try {\n step(g[n](v));\n } catch (e) {\n settle(q[0][3], e);\n }\n }\n\n function step(r) {\n r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r);\n }\n\n function fulfill(value) {\n resume(\"next\", value);\n }\n\n function reject(value) {\n resume(\"throw\", value);\n }\n\n function settle(f, v) {\n if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]);\n }\n}\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) {\n throw e;\n }), verb(\"return\"), i[Symbol.iterator] = function () {\n return this;\n }, i;\n\n function verb(n, f) {\n i[n] = o[n] ? function (v) {\n return (p = !p) ? {\n value: __await(o[n](v)),\n done: n === \"return\"\n } : f ? f(v) : v;\n } : f;\n }\n}\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator],\n i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () {\n return this;\n }, i);\n\n function verb(n) {\n i[n] = o[n] && function (v) {\n return new Promise(function (resolve, reject) {\n v = o[n](v), settle(resolve, reject, v.done, v.value);\n });\n };\n }\n\n function settle(resolve, reject, d, v) {\n Promise.resolve(v).then(function (v) {\n resolve({\n value: v,\n done: d\n });\n }, reject);\n }\n}\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) {\n Object.defineProperty(cooked, \"raw\", {\n value: raw\n });\n } else {\n cooked.raw = raw;\n }\n\n return cooked;\n}\n;\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) {\n if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\n }\n result[\"default\"] = mod;\n return result;\n}\nexport function __importDefault(mod) {\n return mod && mod.__esModule ? mod : {\n \"default\": mod\n };\n}","import \"core-js/modules/es6.array.for-each\";\nimport \"core-js/modules/es6.array.reduce\";\nimport \"core-js/modules/es6.array.index-of\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.array.iterator\";\nimport \"core-js/modules/es6.object.to-string\";\nimport \"core-js/modules/es6.string.iterator\";\nimport \"core-js/modules/es6.weak-set\";\nimport \"core-js/modules/es6.date.now\";\nimport { invariant } from 'hey-listen';\nvar prevTime = 0;\nvar onNextFrame = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined ? function (callback) {\n return window.requestAnimationFrame(callback);\n} : function (callback) {\n var timestamp = Date.now();\n var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));\n prevTime = timestamp + timeToCall;\n setTimeout(function () {\n return callback(prevTime);\n }, timeToCall);\n};\n\nvar createStep = function createStep(setRunNextFrame) {\n var processToRun = [];\n var processToRunNextFrame = [];\n var numThisFrame = 0;\n var isProcessing = false;\n var i = 0;\n var cancelled = new WeakSet();\n var toKeepAlive = new WeakSet();\n var renderStep = {\n cancel: function cancel(process) {\n var indexOfCallback = processToRunNextFrame.indexOf(process);\n cancelled.add(process);\n\n if (indexOfCallback !== -1) {\n processToRunNextFrame.splice(indexOfCallback, 1);\n }\n },\n process: function process(frame) {\n var _a;\n\n isProcessing = true;\n _a = [processToRunNextFrame, processToRun], processToRun = _a[0], processToRunNextFrame = _a[1];\n processToRunNextFrame.length = 0;\n numThisFrame = processToRun.length;\n\n if (numThisFrame) {\n var process_1;\n\n for (i = 0; i < numThisFrame; i++) {\n process_1 = processToRun[i];\n process_1(frame);\n\n if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {\n renderStep.schedule(process_1);\n setRunNextFrame(true);\n }\n }\n }\n\n isProcessing = false;\n },\n schedule: function schedule(process, keepAlive, immediate) {\n if (keepAlive === void 0) {\n keepAlive = false;\n }\n\n if (immediate === void 0) {\n immediate = false;\n }\n\n invariant(typeof process === 'function', 'Argument must be a function');\n var addToCurrentBuffer = immediate && isProcessing;\n var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;\n cancelled[\"delete\"](process);\n if (keepAlive) toKeepAlive.add(process);\n\n if (buffer.indexOf(process) === -1) {\n buffer.push(process);\n if (addToCurrentBuffer) numThisFrame = processToRun.length;\n }\n }\n };\n return renderStep;\n};\n\nvar StepId;\n\n(function (StepId) {\n StepId[\"Read\"] = \"read\";\n StepId[\"Update\"] = \"update\";\n StepId[\"Render\"] = \"render\";\n StepId[\"PostRender\"] = \"postRender\";\n StepId[\"FixedUpdate\"] = \"fixedUpdate\";\n})(StepId || (StepId = {}));\n\nvar maxElapsed = 40;\nvar defaultElapsed = 1 / 60 * 1000;\nvar useDefaultElapsed = true;\nvar willRunNextFrame = false;\nvar isProcessing = false;\nvar frame = {\n delta: 0,\n timestamp: 0\n};\nvar stepsOrder = [StepId.Read, StepId.Update, StepId.Render, StepId.PostRender];\n\nvar setWillRunNextFrame = function setWillRunNextFrame(willRun) {\n return willRunNextFrame = willRun;\n};\n\nvar _a = stepsOrder.reduce(function (acc, key) {\n var step = createStep(setWillRunNextFrame);\n\n acc.sync[key] = function (process, keepAlive, immediate) {\n if (keepAlive === void 0) {\n keepAlive = false;\n }\n\n if (immediate === void 0) {\n immediate = false;\n }\n\n if (!willRunNextFrame) startLoop();\n step.schedule(process, keepAlive, immediate);\n return process;\n };\n\n acc.cancelSync[key] = function (process) {\n return step.cancel(process);\n };\n\n acc.steps[key] = step;\n return acc;\n}, {\n steps: {},\n sync: {},\n cancelSync: {}\n}),\n steps = _a.steps,\n sync = _a.sync,\n cancelSync = _a.cancelSync;\n\nvar processStep = function processStep(stepId) {\n return steps[stepId].process(frame);\n};\n\nvar processFrame = function processFrame(timestamp) {\n willRunNextFrame = false;\n frame.delta = useDefaultElapsed ? defaultElapsed : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);\n if (!useDefaultElapsed) defaultElapsed = frame.delta;\n frame.timestamp = timestamp;\n isProcessing = true;\n stepsOrder.forEach(processStep);\n isProcessing = false;\n\n if (willRunNextFrame) {\n useDefaultElapsed = false;\n onNextFrame(processFrame);\n }\n};\n\nvar startLoop = function startLoop() {\n willRunNextFrame = true;\n useDefaultElapsed = true;\n if (!isProcessing) onNextFrame(processFrame);\n};\n\nvar getFrameData = function getFrameData() {\n return frame;\n};\n\nexport default sync;\nexport { cancelSync, getFrameData };","import \"core-js/modules/es6.array.map\";\nimport \"core-js/modules/es6.regexp.replace\";\nimport \"core-js/modules/es6.regexp.match\";\nimport \"core-js/modules/es6.string.starts-with\";\nimport \"core-js/modules/es6.array.last-index-of\";\nimport \"core-js/modules/es6.array.index-of\";\nimport \"core-js/modules/es6.regexp.split\";\nimport \"core-js/modules/es6.string.ends-with\";\nimport \"core-js/modules/es6.number.constructor\";\nimport \"core-js/modules/es6.object.assign\";\n\n/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\nvar _assign = function __assign() {\n _assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return _assign.apply(this, arguments);\n};\n\nvar clamp = function clamp(min, max) {\n return function (v) {\n return Math.max(Math.min(v, max), min);\n };\n};\n\nvar sanitize = function sanitize(v) {\n return v % 1 ? Number(v.toFixed(5)) : v;\n};\n\nvar floatRegex = /(-)?(\\d[\\d\\.]*)/g;\nvar colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\))/gi;\nvar singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\))$/i;\nvar number = {\n test: function test(v) {\n return typeof v === 'number';\n },\n parse: parseFloat,\n transform: function transform(v) {\n return v;\n }\n};\n\nvar alpha = _assign(_assign({}, number), {\n transform: clamp(0, 1)\n});\n\nvar scale = _assign(_assign({}, number), {\n \"default\": 1\n});\n\nvar createUnitType = function createUnitType(unit) {\n return {\n test: function test(v) {\n return typeof v === 'string' && v.endsWith(unit) && v.split(' ').length === 1;\n },\n parse: parseFloat,\n transform: function transform(v) {\n return \"\" + v + unit;\n }\n };\n};\n\nvar degrees = createUnitType('deg');\nvar percent = createUnitType('%');\nvar px = createUnitType('px');\nvar vh = createUnitType('vh');\nvar vw = createUnitType('vw');\n\nvar progressPercentage = _assign(_assign({}, percent), {\n parse: function parse(v) {\n return percent.parse(v) / 100;\n },\n transform: function transform(v) {\n return percent.transform(v * 100);\n }\n});\n\nvar getValueFromFunctionString = function getValueFromFunctionString(value) {\n return value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));\n};\n\nvar clampRgbUnit = clamp(0, 255);\n\nvar isRgba = function isRgba(v) {\n return v.red !== undefined;\n};\n\nvar isHsla = function isHsla(v) {\n return v.hue !== undefined;\n};\n\nvar splitColorValues = function splitColorValues(terms) {\n return function (v) {\n if (typeof v !== 'string') return v;\n var values = {};\n var valuesArray = getValueFromFunctionString(v).split(/,\\s*/);\n\n for (var i = 0; i < 4; i++) {\n values[terms[i]] = valuesArray[i] !== undefined ? parseFloat(valuesArray[i]) : 1;\n }\n\n return values;\n };\n};\n\nvar rgbaTemplate = function rgbaTemplate(_a) {\n var red = _a.red,\n green = _a.green,\n blue = _a.blue,\n _b = _a.alpha,\n alpha$$1 = _b === void 0 ? 1 : _b;\n return \"rgba(\" + red + \", \" + green + \", \" + blue + \", \" + alpha$$1 + \")\";\n};\n\nvar hslaTemplate = function hslaTemplate(_a) {\n var hue = _a.hue,\n saturation = _a.saturation,\n lightness = _a.lightness,\n _b = _a.alpha,\n alpha$$1 = _b === void 0 ? 1 : _b;\n return \"hsla(\" + hue + \", \" + saturation + \", \" + lightness + \", \" + alpha$$1 + \")\";\n};\n\nvar rgbUnit = _assign(_assign({}, number), {\n transform: function transform(v) {\n return Math.round(clampRgbUnit(v));\n }\n});\n\nfunction isColorString(color, colorType) {\n return color.startsWith(colorType) && singleColorRegex.test(color);\n}\n\nvar rgba = {\n test: function test(v) {\n return typeof v === 'string' ? isColorString(v, 'rgb') : isRgba(v);\n },\n parse: splitColorValues(['red', 'green', 'blue', 'alpha']),\n transform: function transform(_a) {\n var red = _a.red,\n green = _a.green,\n blue = _a.blue,\n _b = _a.alpha,\n alpha$$1 = _b === void 0 ? 1 : _b;\n return rgbaTemplate({\n red: rgbUnit.transform(red),\n green: rgbUnit.transform(green),\n blue: rgbUnit.transform(blue),\n alpha: sanitize(alpha.transform(alpha$$1))\n });\n }\n};\nvar hsla = {\n test: function test(v) {\n return typeof v === 'string' ? isColorString(v, 'hsl') : isHsla(v);\n },\n parse: splitColorValues(['hue', 'saturation', 'lightness', 'alpha']),\n transform: function transform(_a) {\n var hue = _a.hue,\n saturation = _a.saturation,\n lightness = _a.lightness,\n _b = _a.alpha,\n alpha$$1 = _b === void 0 ? 1 : _b;\n return hslaTemplate({\n hue: Math.round(hue),\n saturation: percent.transform(sanitize(saturation)),\n lightness: percent.transform(sanitize(lightness)),\n alpha: sanitize(alpha.transform(alpha$$1))\n });\n }\n};\n\nvar hex = _assign(_assign({}, rgba), {\n test: function test(v) {\n return typeof v === 'string' && isColorString(v, '#');\n },\n parse: function parse(v) {\n var r = '';\n var g = '';\n var b = '';\n\n if (v.length > 4) {\n r = v.substr(1, 2);\n g = v.substr(3, 2);\n b = v.substr(5, 2);\n } else {\n r = v.substr(1, 1);\n g = v.substr(2, 1);\n b = v.substr(3, 1);\n r += r;\n g += g;\n b += b;\n }\n\n return {\n red: parseInt(r, 16),\n green: parseInt(g, 16),\n blue: parseInt(b, 16),\n alpha: 1\n };\n }\n});\n\nvar color = {\n test: function test(v) {\n return typeof v === 'string' && singleColorRegex.test(v) || isRgba(v) || isHsla(v);\n },\n parse: function parse(v) {\n if (rgba.test(v)) {\n return rgba.parse(v);\n } else if (hsla.test(v)) {\n return hsla.parse(v);\n } else if (hex.test(v)) {\n return hex.parse(v);\n }\n\n return v;\n },\n transform: function transform(v) {\n if (isRgba(v)) {\n return rgba.transform(v);\n } else if (isHsla(v)) {\n return hsla.transform(v);\n }\n\n return v;\n }\n};\nvar COLOR_TOKEN = '${c}';\nvar NUMBER_TOKEN = '${n}';\n\nvar convertNumbersToZero = function convertNumbersToZero(v) {\n return typeof v === 'number' ? 0 : v;\n};\n\nvar complex = {\n test: function test(v) {\n if (typeof v !== 'string' || !isNaN(v)) return false;\n var numValues = 0;\n var foundNumbers = v.match(floatRegex);\n var foundColors = v.match(colorRegex);\n if (foundNumbers) numValues += foundNumbers.length;\n if (foundColors) numValues += foundColors.length;\n return numValues > 0;\n },\n parse: function parse(v) {\n var input = v;\n var parsed = [];\n var foundColors = input.match(colorRegex);\n\n if (foundColors) {\n input = input.replace(colorRegex, COLOR_TOKEN);\n parsed.push.apply(parsed, foundColors.map(color.parse));\n }\n\n var foundNumbers = input.match(floatRegex);\n\n if (foundNumbers) {\n parsed.push.apply(parsed, foundNumbers.map(number.parse));\n }\n\n return parsed;\n },\n createTransformer: function createTransformer(prop) {\n var template = prop;\n var token = 0;\n var foundColors = prop.match(colorRegex);\n var numColors = foundColors ? foundColors.length : 0;\n\n if (foundColors) {\n for (var i = 0; i < numColors; i++) {\n template = template.replace(foundColors[i], COLOR_TOKEN);\n token++;\n }\n }\n\n var foundNumbers = template.match(floatRegex);\n var numNumbers = foundNumbers ? foundNumbers.length : 0;\n\n if (foundNumbers) {\n for (var i = 0; i < numNumbers; i++) {\n template = template.replace(foundNumbers[i], NUMBER_TOKEN);\n token++;\n }\n }\n\n return function (v) {\n var output = template;\n\n for (var i = 0; i < token; i++) {\n output = output.replace(i < numColors ? COLOR_TOKEN : NUMBER_TOKEN, i < numColors ? color.transform(v[i]) : sanitize(v[i]));\n }\n\n return output;\n };\n },\n getAnimatableNone: function getAnimatableNone(target) {\n var parsedTarget = complex.parse(target);\n var targetTransformer = complex.createTransformer(target);\n return targetTransformer(parsedTarget.map(convertNumbersToZero));\n }\n};\nexport { number, scale, alpha, degrees, percent, progressPercentage, px, vw, vh, rgba, rgbUnit, hsla, hex, color, complex };","import \"core-js/modules/es6.typed.float32-array\";\nvar DEFAULT_OVERSHOOT_STRENGTH = 1.525;\n\nvar reversed = function reversed(easing) {\n return function (p) {\n return 1 - easing(1 - p);\n };\n};\n\nvar mirrored = function mirrored(easing) {\n return function (p) {\n return p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;\n };\n};\n\nvar createReversedEasing = reversed;\nvar createMirroredEasing = mirrored;\n\nvar createExpoIn = function createExpoIn(power) {\n return function (p) {\n return Math.pow(p, power);\n };\n};\n\nvar createBackIn = function createBackIn(power) {\n return function (p) {\n return p * p * ((power + 1) * p - power);\n };\n};\n\nvar createAnticipateEasing = function createAnticipateEasing(power) {\n var backEasing = createBackIn(power);\n return function (p) {\n return (p *= 2) < 1 ? 0.5 * backEasing(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));\n };\n};\n\nvar linear = function linear(p) {\n return p;\n};\n\nvar easeIn =\n/*#__PURE__*/\ncreateExpoIn(2);\nvar easeOut =\n/*#__PURE__*/\nreversed(easeIn);\nvar easeInOut =\n/*#__PURE__*/\nmirrored(easeIn);\n\nvar circIn = function circIn(p) {\n return 1 - Math.sin(Math.acos(p));\n};\n\nvar circOut =\n/*#__PURE__*/\nreversed(circIn);\nvar circInOut =\n/*#__PURE__*/\nmirrored(circOut);\nvar backIn =\n/*#__PURE__*/\ncreateBackIn(DEFAULT_OVERSHOOT_STRENGTH);\nvar backOut =\n/*#__PURE__*/\nreversed(backIn);\nvar backInOut =\n/*#__PURE__*/\nmirrored(backIn);\nvar anticipate =\n/*#__PURE__*/\ncreateAnticipateEasing(DEFAULT_OVERSHOOT_STRENGTH);\nvar BOUNCE_FIRST_THRESHOLD = 4.0 / 11.0;\nvar BOUNCE_SECOND_THRESHOLD = 8.0 / 11.0;\nvar BOUNCE_THIRD_THRESHOLD = 9.0 / 10.0;\nvar ca = 4356.0 / 361.0;\nvar cb = 35442.0 / 1805.0;\nvar cc = 16061.0 / 1805.0;\n\nvar bounceOut = function bounceOut(p) {\n var p2 = p * p;\n return p < BOUNCE_FIRST_THRESHOLD ? 7.5625 * p2 : p < BOUNCE_SECOND_THRESHOLD ? 9.075 * p2 - 9.9 * p + 3.4 : p < BOUNCE_THIRD_THRESHOLD ? ca * p2 - cb * p + cc : 10.8 * p * p - 20.52 * p + 10.72;\n};\n\nvar bounceIn = function bounceIn(p) {\n return 1.0 - bounceOut(1.0 - p);\n};\n\nvar bounceInOut = function bounceInOut(p) {\n return p < 0.5 ? 0.5 * (1.0 - bounceOut(1.0 - p * 2.0)) : 0.5 * bounceOut(p * 2.0 - 1.0) + 0.5;\n};\n\nvar NEWTON_ITERATIONS = 8;\nvar NEWTON_MIN_SLOPE = 0.001;\nvar SUBDIVISION_PRECISION = 0.0000001;\nvar SUBDIVISION_MAX_ITERATIONS = 10;\nvar K_SPLINE_TABLE_SIZE = 11;\nvar K_SAMPLE_STEP_SIZE = 1.0 / (K_SPLINE_TABLE_SIZE - 1.0);\nvar FLOAT_32_SUPPORTED = typeof Float32Array !== 'undefined';\n\nvar a = function a(a1, a2) {\n return 1.0 - 3.0 * a2 + 3.0 * a1;\n};\n\nvar b = function b(a1, a2) {\n return 3.0 * a2 - 6.0 * a1;\n};\n\nvar c = function c(a1) {\n return 3.0 * a1;\n};\n\nvar getSlope = function getSlope(t, a1, a2) {\n return 3.0 * a(a1, a2) * t * t + 2.0 * b(a1, a2) * t + c(a1);\n};\n\nvar calcBezier = function calcBezier(t, a1, a2) {\n return ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;\n};\n\nfunction cubicBezier(mX1, mY1, mX2, mY2) {\n var sampleValues = FLOAT_32_SUPPORTED ? new Float32Array(K_SPLINE_TABLE_SIZE) : new Array(K_SPLINE_TABLE_SIZE);\n\n var binarySubdivide = function binarySubdivide(aX, aA, aB) {\n var i = 0;\n var currentX;\n var currentT;\n\n do {\n currentT = aA + (aB - aA) / 2.0;\n currentX = calcBezier(currentT, mX1, mX2) - aX;\n\n if (currentX > 0.0) {\n aB = currentT;\n } else {\n aA = currentT;\n }\n } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);\n\n return currentT;\n };\n\n var newtonRaphsonIterate = function newtonRaphsonIterate(aX, aGuessT) {\n var i = 0;\n var currentSlope = 0;\n var currentX;\n\n for (; i < NEWTON_ITERATIONS; ++i) {\n currentSlope = getSlope(aGuessT, mX1, mX2);\n\n if (currentSlope === 0.0) {\n return aGuessT;\n }\n\n currentX = calcBezier(aGuessT, mX1, mX2) - aX;\n aGuessT -= currentX / currentSlope;\n }\n\n return aGuessT;\n };\n\n var calcSampleValues = function calcSampleValues() {\n for (var i = 0; i < K_SPLINE_TABLE_SIZE; ++i) {\n sampleValues[i] = calcBezier(i * K_SAMPLE_STEP_SIZE, mX1, mX2);\n }\n };\n\n var getTForX = function getTForX(aX) {\n var intervalStart = 0.0;\n var currentSample = 1;\n var lastSample = K_SPLINE_TABLE_SIZE - 1;\n var dist = 0.0;\n var guessForT = 0.0;\n var initialSlope = 0.0;\n\n for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {\n intervalStart += K_SAMPLE_STEP_SIZE;\n }\n\n --currentSample;\n dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);\n guessForT = intervalStart + dist * K_SAMPLE_STEP_SIZE;\n initialSlope = getSlope(guessForT, mX1, mX2);\n\n if (initialSlope >= NEWTON_MIN_SLOPE) {\n return newtonRaphsonIterate(aX, guessForT);\n } else if (initialSlope === 0.0) {\n return guessForT;\n } else {\n return binarySubdivide(aX, intervalStart, intervalStart + K_SAMPLE_STEP_SIZE);\n }\n };\n\n calcSampleValues();\n\n var resolver = function resolver(aX) {\n var returnValue;\n\n if (mX1 === mY1 && mX2 === mY2) {\n returnValue = aX;\n } else if (aX === 0) {\n returnValue = 0;\n } else if (aX === 1) {\n returnValue = 1;\n } else {\n returnValue = calcBezier(getTForX(aX), mY1, mY2);\n }\n\n return returnValue;\n };\n\n return resolver;\n}\n\nexport { reversed, mirrored, createReversedEasing, createMirroredEasing, createExpoIn, createBackIn, createAnticipateEasing, linear, easeIn, easeOut, easeInOut, circIn, circOut, circInOut, backIn, backOut, backInOut, anticipate, bounceOut, bounceIn, bounceInOut, cubicBezier };","import \"core-js/modules/es6.array.is-array\";\nimport \"core-js/modules/es6.array.map\";\nimport \"core-js/modules/es6.array.reduce\";\nimport \"core-js/modules/es6.array.find\";\nimport \"core-js/modules/es6.object.assign\";\nimport { hsla, rgba, hex, color, complex } from 'style-value-types';\nimport { invariant } from 'hey-listen';\nimport { getFrameData } from 'framesync';\nimport { createAnticipateEasing, createBackIn, createExpoIn, cubicBezier, linear, easeIn, easeOut, easeInOut, circIn, circOut, circInOut, backIn, backOut, backInOut, anticipate, reversed, mirrored } from '@popmotion/easing';\nexport { createAnticipateEasing, createBackIn, createExpoIn, cubicBezier, linear, easeIn, easeOut, easeInOut, circIn, circOut, circInOut, backIn, backOut, backInOut, anticipate, reversed, mirrored } from '@popmotion/easing';\nvar zeroPoint = {\n x: 0,\n y: 0,\n z: 0\n};\n\nvar isNum = function isNum(v) {\n return typeof v === 'number';\n};\n\nvar radiansToDegrees = function radiansToDegrees(radians) {\n return radians * 180 / Math.PI;\n};\n\nvar angle = function angle(a, b) {\n if (b === void 0) {\n b = zeroPoint;\n }\n\n return radiansToDegrees(Math.atan2(b.y - a.y, b.x - a.x));\n};\n\nvar applyOffset = function applyOffset(from, to) {\n var hasReceivedFrom = true;\n\n if (to === undefined) {\n to = from;\n hasReceivedFrom = false;\n }\n\n return function (v) {\n if (hasReceivedFrom) {\n return v - from + to;\n } else {\n from = v;\n hasReceivedFrom = true;\n return to;\n }\n };\n};\n\nvar curryRange = function curryRange(func) {\n return function (min, max, v) {\n return v !== undefined ? func(min, max, v) : function (cv) {\n return func(min, max, cv);\n };\n };\n};\n\nvar clamp = function clamp(min, max, v) {\n return Math.min(Math.max(v, min), max);\n};\n\nvar clamp$1 = curryRange(clamp);\n\nvar conditional = function conditional(check, apply) {\n return function (v) {\n return check(v) ? apply(v) : v;\n };\n};\n\nvar degreesToRadians = function degreesToRadians(degrees) {\n return degrees * Math.PI / 180;\n};\n\nvar isPoint = function isPoint(point) {\n return point.hasOwnProperty('x') && point.hasOwnProperty('y');\n};\n\nvar isPoint3D = function isPoint3D(point) {\n return isPoint(point) && point.hasOwnProperty('z');\n};\n\nvar distance1D = function distance1D(a, b) {\n return Math.abs(a - b);\n};\n\nvar distance = function distance(a, b) {\n if (b === void 0) {\n b = zeroPoint;\n }\n\n if (isNum(a) && isNum(b)) {\n return distance1D(a, b);\n } else if (isPoint(a) && isPoint(b)) {\n var xDelta = distance1D(a.x, b.x);\n var yDelta = distance1D(a.y, b.y);\n var zDelta = isPoint3D(a) && isPoint3D(b) ? distance1D(a.z, b.z) : 0;\n return Math.sqrt(Math.pow(xDelta, 2) + Math.pow(yDelta, 2) + Math.pow(zDelta, 2));\n }\n\n return 0;\n};\n\nvar progress = function progress(from, to, value) {\n var toFromDifference = to - from;\n return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;\n};\n\nvar mix = function mix(from, to, progress) {\n return -progress * from + progress * to + from;\n};\n/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\n\n\nvar _assign = function __assign() {\n _assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return _assign.apply(this, arguments);\n};\n\nvar mixLinearColor = function mixLinearColor(from, to, v) {\n var fromExpo = from * from;\n var toExpo = to * to;\n return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));\n};\n\nvar colorTypes = [hex, rgba, hsla];\n\nvar getColorType = function getColorType(v) {\n return colorTypes.find(function (type) {\n return type.test(v);\n });\n};\n\nvar notAnimatable = function notAnimatable(color$$1) {\n return \"'\" + color$$1 + \"' is not an animatable color. Use the equivalent color code instead.\";\n};\n\nvar mixColor = function mixColor(from, to) {\n var fromColorType = getColorType(from);\n var toColorType = getColorType(to);\n invariant(!!fromColorType, notAnimatable(from));\n invariant(!!toColorType, notAnimatable(to));\n invariant(fromColorType.transform === toColorType.transform, 'Both colors must be hex/RGBA, OR both must be HSLA.');\n var fromColor = fromColorType.parse(from);\n var toColor = toColorType.parse(to);\n\n var blended = _assign({}, fromColor);\n\n var mixFunc = fromColorType === hsla ? mix : mixLinearColor;\n return function (v) {\n for (var key in blended) {\n if (key !== 'alpha') {\n blended[key] = mixFunc(fromColor[key], toColor[key], v);\n }\n }\n\n blended.alpha = mix(fromColor.alpha, toColor.alpha, v);\n return fromColorType.transform(blended);\n };\n};\n\nvar combineFunctions = function combineFunctions(a, b) {\n return function (v) {\n return b(a(v));\n };\n};\n\nvar pipe = function pipe() {\n var transformers = [];\n\n for (var _i = 0; _i < arguments.length; _i++) {\n transformers[_i] = arguments[_i];\n }\n\n return transformers.reduce(combineFunctions);\n};\n\nfunction getMixer(origin, target) {\n if (isNum(origin)) {\n return function (v) {\n return mix(origin, target, v);\n };\n } else if (color.test(origin)) {\n return mixColor(origin, target);\n } else {\n return mixComplex(origin, target);\n }\n}\n\nvar mixArray = function mixArray(from, to) {\n var output = from.slice();\n var numValues = output.length;\n var blendValue = from.map(function (fromThis, i) {\n return getMixer(fromThis, to[i]);\n });\n return function (v) {\n for (var i = 0; i < numValues; i++) {\n output[i] = blendValue[i](v);\n }\n\n return output;\n };\n};\n\nvar mixObject = function mixObject(origin, target) {\n var output = _assign({}, origin, target);\n\n var blendValue = {};\n\n for (var key in output) {\n if (origin[key] !== undefined && target[key] !== undefined) {\n blendValue[key] = getMixer(origin[key], target[key]);\n }\n }\n\n return function (v) {\n for (var key in blendValue) {\n output[key] = blendValue[key](v);\n }\n\n return output;\n };\n};\n\nfunction analyse(value) {\n var parsed = complex.parse(value);\n var numValues = parsed.length;\n var numNumbers = 0;\n var numRGB = 0;\n var numHSL = 0;\n\n for (var i = 0; i < numValues; i++) {\n if (numNumbers || typeof parsed[i] === 'number') {\n numNumbers++;\n } else {\n if (parsed[i].hue !== undefined) {\n numHSL++;\n } else {\n numRGB++;\n }\n }\n }\n\n return {\n parsed: parsed,\n numNumbers: numNumbers,\n numRGB: numRGB,\n numHSL: numHSL\n };\n}\n\nvar mixComplex = function mixComplex(origin, target) {\n var template = complex.createTransformer(target);\n var originStats = analyse(origin);\n var targetStats = analyse(target);\n invariant(originStats.numHSL === targetStats.numHSL && originStats.numRGB === targetStats.numRGB && originStats.numNumbers >= targetStats.numNumbers, \"Complex values '\" + origin + \"' and '\" + target + \"' too different to mix. Ensure all colors are of the same type.\");\n return pipe(mixArray(originStats.parsed, targetStats.parsed), template);\n};\n\nvar mixNumber = function mixNumber(from, to) {\n return function (p) {\n return mix(from, to, p);\n };\n};\n\nfunction detectMixerFactory(v) {\n if (typeof v === 'number') {\n return mixNumber;\n } else if (typeof v === 'string') {\n if (color.test(v)) {\n return mixColor;\n } else {\n return mixComplex;\n }\n } else if (Array.isArray(v)) {\n return mixArray;\n } else if (typeof v === 'object') {\n return mixObject;\n }\n}\n\nfunction createMixers(output, ease, customMixer) {\n var mixers = [];\n var mixerFactory = customMixer || detectMixerFactory(output[0]);\n var numMixers = output.length - 1;\n\n for (var i = 0; i < numMixers; i++) {\n var mixer = mixerFactory(output[i], output[i + 1]);\n\n if (ease) {\n var easingFunction = Array.isArray(ease) ? ease[i] : ease;\n mixer = pipe(easingFunction, mixer);\n }\n\n mixers.push(mixer);\n }\n\n return mixers;\n}\n\nfunction fastInterpolate(_a, _b) {\n var from = _a[0],\n to = _a[1];\n var mixer = _b[0];\n return function (v) {\n return mixer(progress(from, to, v));\n };\n}\n\nfunction slowInterpolate(input, mixers) {\n var inputLength = input.length;\n var lastInputIndex = inputLength - 1;\n return function (v) {\n var mixerIndex = 0;\n var foundMixerIndex = false;\n\n if (v <= input[0]) {\n foundMixerIndex = true;\n } else if (v >= input[lastInputIndex]) {\n mixerIndex = lastInputIndex - 1;\n foundMixerIndex = true;\n }\n\n if (!foundMixerIndex) {\n var i = 1;\n\n for (; i < inputLength; i++) {\n if (input[i] > v || i === lastInputIndex) {\n break;\n }\n }\n\n mixerIndex = i - 1;\n }\n\n var progressInRange = progress(input[mixerIndex], input[mixerIndex + 1], v);\n return mixers[mixerIndex](progressInRange);\n };\n}\n\nfunction interpolate(input, output, _a) {\n var _b = _a === void 0 ? {} : _a,\n _c = _b.clamp,\n clamp = _c === void 0 ? true : _c,\n ease = _b.ease,\n mixer = _b.mixer;\n\n var inputLength = input.length;\n invariant(inputLength === output.length, 'Both input and output ranges must be the same length');\n invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, 'Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.');\n\n if (input[0] > input[inputLength - 1]) {\n input = [].concat(input);\n output = [].concat(output);\n input.reverse();\n output.reverse();\n }\n\n var mixers = createMixers(output, ease, mixer);\n var interpolator = inputLength === 2 ? fastInterpolate(input, mixers) : slowInterpolate(input, mixers);\n return clamp ? pipe(clamp$1(input[0], input[inputLength - 1]), interpolator) : interpolator;\n}\n\nvar pointFromVector = function pointFromVector(origin, angle, distance) {\n angle = degreesToRadians(angle);\n return {\n x: distance * Math.cos(angle) + origin.x,\n y: distance * Math.sin(angle) + origin.y\n };\n};\n\nvar toDecimal = function toDecimal(num, precision) {\n if (precision === void 0) {\n precision = 2;\n }\n\n precision = Math.pow(10, precision);\n return Math.round(num * precision) / precision;\n};\n\nvar smoothFrame = function smoothFrame(prevValue, nextValue, duration, smoothing) {\n if (smoothing === void 0) {\n smoothing = 0;\n }\n\n return toDecimal(prevValue + duration * (nextValue - prevValue) / Math.max(smoothing, duration));\n};\n\nvar smooth = function smooth(strength) {\n if (strength === void 0) {\n strength = 50;\n }\n\n var previousValue = 0;\n var lastUpdated = 0;\n return function (v) {\n var currentFramestamp = getFrameData().timestamp;\n var timeDelta = currentFramestamp !== lastUpdated ? currentFramestamp - lastUpdated : 0;\n var newValue = timeDelta ? smoothFrame(previousValue, v, timeDelta, strength) : previousValue;\n lastUpdated = currentFramestamp;\n previousValue = newValue;\n return newValue;\n };\n};\n\nvar snap = function snap(points) {\n if (typeof points === 'number') {\n return function (v) {\n return Math.round(v / points) * points;\n };\n } else {\n var i_1 = 0;\n var numPoints_1 = points.length;\n return function (v) {\n var lastDistance = Math.abs(points[0] - v);\n\n for (i_1 = 1; i_1 < numPoints_1; i_1++) {\n var point = points[i_1];\n var distance = Math.abs(point - v);\n if (distance === 0) return point;\n if (distance > lastDistance) return points[i_1 - 1];\n if (i_1 === numPoints_1 - 1) return point;\n lastDistance = distance;\n }\n };\n }\n};\n\nvar identity = function identity(v) {\n return v;\n};\n\nvar springForce = function springForce(alterDisplacement) {\n if (alterDisplacement === void 0) {\n alterDisplacement = identity;\n }\n\n return curryRange(function (constant, origin, v) {\n var displacement = origin - v;\n var springModifiedDisplacement = -(0 - constant + 1) * (0 - alterDisplacement(Math.abs(displacement)));\n return displacement <= 0 ? origin + springModifiedDisplacement : origin - springModifiedDisplacement;\n });\n};\n\nvar springForceLinear = springForce();\nvar springForceExpo = springForce(Math.sqrt);\n\nvar velocityPerFrame = function velocityPerFrame(xps, frameDuration) {\n return isNum(xps) ? xps / (1000 / frameDuration) : 0;\n};\n\nvar velocityPerSecond = function velocityPerSecond(velocity, frameDuration) {\n return frameDuration ? velocity * (1000 / frameDuration) : 0;\n};\n\nvar wrap = function wrap(min, max, v) {\n var rangeSize = max - min;\n return ((v - min) % rangeSize + rangeSize) % rangeSize + min;\n};\n\nvar wrap$1 = curryRange(wrap);\nvar clampProgress = clamp$1(0, 1);\n\nvar steps = function steps(_steps, direction) {\n if (direction === void 0) {\n direction = 'end';\n }\n\n return function (progress) {\n progress = direction === 'end' ? Math.min(progress, 0.999) : Math.max(progress, 0.001);\n var expanded = progress * _steps;\n var rounded = direction === 'end' ? Math.floor(expanded) : Math.ceil(expanded);\n return clampProgress(rounded / _steps);\n };\n};\n\nexport { angle, applyOffset, clamp$1 as clamp, conditional, degreesToRadians, distance, interpolate, isPoint, isPoint3D, mix, mixArray, mixColor, mixComplex, mixObject, pipe, pointFromVector, progress, radiansToDegrees, smooth, smoothFrame, snap, springForce, springForceExpo, springForceLinear, steps, toDecimal, velocityPerFrame, velocityPerSecond, wrap$1 as wrap };","import \"core-js/modules/es6.weak-map\";\nimport \"core-js/modules/es6.object.assign\";\nimport \"core-js/modules/es6.string.trim\";\nimport \"core-js/modules/es6.array.sort\";\nimport \"core-js/modules/es6.array.reduce\";\nimport \"core-js/modules/es6.map\";\nimport \"core-js/modules/es6.regexp.replace\";\nimport \"core-js/modules/es6.array.index-of\";\nimport \"core-js/modules/es6.string.starts-with\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.array.iterator\";\nimport \"core-js/modules/es6.object.to-string\";\nimport \"core-js/modules/es6.string.iterator\";\nimport \"core-js/modules/es6.set\";\nimport { __rest, __assign } from 'tslib';\nimport sync from 'framesync';\nimport { alpha, color, degrees, scale, px, progressPercentage, number } from 'style-value-types';\nimport { invariant } from 'hey-listen';\n\nvar createStyler = function createStyler(_a) {\n var onRead = _a.onRead,\n onRender = _a.onRender,\n _b = _a.uncachedValues,\n uncachedValues = _b === void 0 ? new Set() : _b,\n _c = _a.useCache,\n useCache = _c === void 0 ? true : _c;\n return function (_a) {\n if (_a === void 0) {\n _a = {};\n }\n\n var props = __rest(_a, []);\n\n var state = {};\n var changedValues = [];\n var hasChanged = false;\n\n function setValue(key, value) {\n if (key.startsWith('--')) {\n props.hasCSSVariable = true;\n }\n\n var currentValue = state[key];\n state[key] = value;\n if (state[key] === currentValue) return;\n\n if (changedValues.indexOf(key) === -1) {\n changedValues.push(key);\n }\n\n if (!hasChanged) {\n hasChanged = true;\n sync.render(styler.render);\n }\n }\n\n var styler = {\n get: function get(key, forceRead) {\n if (forceRead === void 0) {\n forceRead = false;\n }\n\n var useCached = !forceRead && useCache && !uncachedValues.has(key) && state[key] !== undefined;\n return useCached ? state[key] : onRead(key, props);\n },\n set: function set(values, value) {\n if (typeof values === 'string') {\n setValue(values, value);\n } else {\n for (var key in values) {\n setValue(key, values[key]);\n }\n }\n\n return this;\n },\n render: function render(forceRender) {\n if (forceRender === void 0) {\n forceRender = false;\n }\n\n if (hasChanged || forceRender === true) {\n onRender(state, props, changedValues);\n hasChanged = false;\n changedValues.length = 0;\n }\n\n return this;\n }\n };\n return styler;\n };\n};\n\nvar CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;\nvar REPLACE_TEMPLATE = '$1-$2';\n\nvar camelToDash = function camelToDash(str) {\n return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();\n};\n\nvar camelCache =\n/*#__PURE__*/\nnew Map();\nvar dashCache =\n/*#__PURE__*/\nnew Map();\nvar prefixes = ['Webkit', 'Moz', 'O', 'ms', ''];\nvar numPrefixes = prefixes.length;\nvar isBrowser = typeof document !== 'undefined';\nvar testElement;\n\nvar setDashPrefix = function setDashPrefix(key, prefixed) {\n return dashCache.set(key, camelToDash(prefixed));\n};\n\nvar testPrefix = function testPrefix(key) {\n testElement = testElement || document.createElement('div');\n\n for (var i = 0; i < numPrefixes; i++) {\n var prefix = prefixes[i];\n var noPrefix = prefix === '';\n var prefixedPropertyName = noPrefix ? key : prefix + key.charAt(0).toUpperCase() + key.slice(1);\n\n if (prefixedPropertyName in testElement.style || noPrefix) {\n if (noPrefix && key === 'clipPath' && dashCache.has(key)) {\n return;\n }\n\n camelCache.set(key, prefixedPropertyName);\n setDashPrefix(key, \"\" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));\n }\n }\n};\n\nvar setServerProperty = function setServerProperty(key) {\n return setDashPrefix(key, key);\n};\n\nvar prefixer = function prefixer(key, asDashCase) {\n if (asDashCase === void 0) {\n asDashCase = false;\n }\n\n var cache = asDashCase ? dashCache : camelCache;\n\n if (!cache.has(key)) {\n isBrowser ? testPrefix(key) : setServerProperty(key);\n }\n\n return cache.get(key) || key;\n};\n\nvar axes = ['', 'X', 'Y', 'Z'];\nvar order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective'];\nvar transformProps =\n/*#__PURE__*/\norder.reduce(function (acc, key) {\n return axes.reduce(function (axesAcc, axesKey) {\n axesAcc.push(key + axesKey);\n return axesAcc;\n }, acc);\n}, ['x', 'y', 'z']);\nvar transformPropDictionary =\n/*#__PURE__*/\ntransformProps.reduce(function (dict, key) {\n dict[key] = true;\n return dict;\n}, {});\n\nfunction isTransformProp(key) {\n return transformPropDictionary[key] === true;\n}\n\nfunction sortTransformProps(a, b) {\n return transformProps.indexOf(a) - transformProps.indexOf(b);\n}\n\nvar transformOriginProps =\n/*#__PURE__*/\nnew Set(['originX', 'originY', 'originZ']);\n\nfunction isTransformOriginProp(key) {\n return transformOriginProps.has(key);\n}\n\nvar _int =\n/*#__PURE__*/\n__assign(\n/*#__PURE__*/\n__assign({}, number), {\n transform: Math.round\n});\n\nvar valueTypes = {\n color: color,\n backgroundColor: color,\n outlineColor: color,\n fill: color,\n stroke: color,\n borderColor: color,\n borderTopColor: color,\n borderRightColor: color,\n borderBottomColor: color,\n borderLeftColor: color,\n borderWidth: px,\n borderTopWidth: px,\n borderRightWidth: px,\n borderBottomWidth: px,\n borderLeftWidth: px,\n borderRadius: px,\n radius: px,\n borderTopLeftRadius: px,\n borderTopRightRadius: px,\n borderBottomRightRadius: px,\n borderBottomLeftRadius: px,\n width: px,\n maxWidth: px,\n height: px,\n maxHeight: px,\n size: px,\n top: px,\n right: px,\n bottom: px,\n left: px,\n padding: px,\n paddingTop: px,\n paddingRight: px,\n paddingBottom: px,\n paddingLeft: px,\n margin: px,\n marginTop: px,\n marginRight: px,\n marginBottom: px,\n marginLeft: px,\n rotate: degrees,\n rotateX: degrees,\n rotateY: degrees,\n rotateZ: degrees,\n scale: scale,\n scaleX: scale,\n scaleY: scale,\n scaleZ: scale,\n skew: degrees,\n skewX: degrees,\n skewY: degrees,\n distance: px,\n translateX: px,\n translateY: px,\n translateZ: px,\n x: px,\n y: px,\n z: px,\n perspective: px,\n opacity: alpha,\n originX: progressPercentage,\n originY: progressPercentage,\n originZ: px,\n zIndex: _int,\n fillOpacity: alpha,\n strokeOpacity: alpha,\n numOctaves: _int\n};\n\nvar getValueType = function getValueType(key) {\n return valueTypes[key];\n};\n\nvar getValueAsType = function getValueAsType(value, type) {\n return type && typeof value === 'number' ? type.transform(value) : value;\n};\n\nvar SCROLL_LEFT = 'scrollLeft';\nvar SCROLL_TOP = 'scrollTop';\nvar scrollKeys =\n/*#__PURE__*/\nnew Set([SCROLL_LEFT, SCROLL_TOP]);\nvar blacklist =\n/*#__PURE__*/\nnew Set([SCROLL_LEFT, SCROLL_TOP, 'transform']);\nvar translateAlias = {\n x: 'translateX',\n y: 'translateY',\n z: 'translateZ'\n};\n\nfunction isCustomTemplate(v) {\n return typeof v === 'function';\n}\n\nfunction buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration) {\n var transformString = '';\n var transformHasZ = false;\n transformKeys.sort(sortTransformProps);\n var numTransformKeys = transformKeys.length;\n\n for (var i = 0; i < numTransformKeys; i++) {\n var key = transformKeys[i];\n transformString += (translateAlias[key] || key) + \"(\" + transform[key] + \") \";\n transformHasZ = key === 'z' ? true : transformHasZ;\n }\n\n if (!transformHasZ && enableHardwareAcceleration) {\n transformString += 'translateZ(0)';\n } else {\n transformString = transformString.trim();\n }\n\n if (isCustomTemplate(state.transform)) {\n transformString = state.transform(transform, transformString);\n } else if (transformIsDefault) {\n transformString = 'none';\n }\n\n return transformString;\n}\n\nfunction buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {\n if (enableHardwareAcceleration === void 0) {\n enableHardwareAcceleration = true;\n }\n\n if (styles === void 0) {\n styles = {};\n }\n\n if (transform === void 0) {\n transform = {};\n }\n\n if (transformOrigin === void 0) {\n transformOrigin = {};\n }\n\n if (transformKeys === void 0) {\n transformKeys = [];\n }\n\n if (isDashCase === void 0) {\n isDashCase = false;\n }\n\n var transformIsDefault = true;\n var hasTransform = false;\n var hasTransformOrigin = false;\n\n for (var key in state) {\n var value = state[key];\n var valueType = getValueType(key);\n var valueAsType = getValueAsType(value, valueType);\n\n if (isTransformProp(key)) {\n hasTransform = true;\n transform[key] = valueAsType;\n transformKeys.push(key);\n\n if (transformIsDefault) {\n if (valueType[\"default\"] && value !== valueType[\"default\"] || !valueType[\"default\"] && value !== 0) {\n transformIsDefault = false;\n }\n }\n } else if (isTransformOriginProp(key)) {\n transformOrigin[key] = valueAsType;\n hasTransformOrigin = true;\n } else if (!blacklist.has(key) || !isCustomTemplate(valueAsType)) {\n styles[prefixer(key, isDashCase)] = valueAsType;\n }\n }\n\n if (hasTransform || typeof state.transform === 'function') {\n styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration);\n }\n\n if (hasTransformOrigin) {\n styles.transformOrigin = (transformOrigin.originX || '50%') + \" \" + (transformOrigin.originY || '50%') + \" \" + (transformOrigin.originZ || 0);\n }\n\n return styles;\n}\n\nfunction createStyleBuilder(enableHardwareAcceleration, isDashCase) {\n if (enableHardwareAcceleration === void 0) {\n enableHardwareAcceleration = true;\n }\n\n if (isDashCase === void 0) {\n isDashCase = true;\n }\n\n var styles = {};\n var transform = {};\n var transformOrigin = {};\n var transformKeys = [];\n return function (state) {\n transformKeys.length = 0;\n buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase);\n return styles;\n };\n}\n\nfunction onRead(key, options) {\n var element = options.element,\n preparseOutput = options.preparseOutput;\n var defaultValueType = getValueType(key);\n\n if (isTransformProp(key)) {\n return defaultValueType ? defaultValueType[\"default\"] || 0 : 0;\n } else if (scrollKeys.has(key)) {\n return element[key];\n } else {\n var domValue = window.getComputedStyle(element, null).getPropertyValue(prefixer(key, true)) || 0;\n return preparseOutput && defaultValueType && defaultValueType.test(domValue) && defaultValueType.parse ? defaultValueType.parse(domValue) : domValue;\n }\n}\n\nfunction onRender(state, _a, changedValues) {\n var element = _a.element,\n buildStyles = _a.buildStyles,\n hasCSSVariable = _a.hasCSSVariable;\n Object.assign(element.style, buildStyles(state));\n\n if (hasCSSVariable) {\n var numChangedValues = changedValues.length;\n\n for (var i = 0; i < numChangedValues; i++) {\n var key = changedValues[i];\n\n if (key.startsWith('--')) {\n element.style.setProperty(key, state[key]);\n }\n }\n }\n\n if (changedValues.indexOf(SCROLL_LEFT) !== -1) {\n element[SCROLL_LEFT] = state[SCROLL_LEFT];\n }\n\n if (changedValues.indexOf(SCROLL_TOP) !== -1) {\n element[SCROLL_TOP] = state[SCROLL_TOP];\n }\n}\n\nvar cssStyler =\n/*#__PURE__*/\ncreateStyler({\n onRead: onRead,\n onRender: onRender,\n uncachedValues: scrollKeys\n});\n\nfunction createCssStyler(element, _a) {\n if (_a === void 0) {\n _a = {};\n }\n\n var enableHardwareAcceleration = _a.enableHardwareAcceleration,\n props = __rest(_a, [\"enableHardwareAcceleration\"]);\n\n return cssStyler(__assign({\n element: element,\n buildStyles: createStyleBuilder(enableHardwareAcceleration),\n preparseOutput: true\n }, props));\n}\n\nvar camelCaseAttributes =\n/*#__PURE__*/\nnew Set(['baseFrequency', 'diffuseConstant', 'kernelMatrix', 'kernelUnitLength', 'keySplines', 'keyTimes', 'limitingConeAngle', 'markerHeight', 'markerWidth', 'numOctaves', 'targetX', 'targetY', 'surfaceScale', 'specularConstant', 'specularExponent', 'stdDeviation', 'tableValues']);\nvar defaultOrigin = 0.5;\n\nvar svgAttrsTemplate = function svgAttrsTemplate() {\n return {\n style: {}\n };\n};\n\nvar progressToPixels = function progressToPixels(progress, length) {\n return px.transform(progress * length);\n};\n\nvar unmeasured = {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n};\n\nfunction calcOrigin(origin, offset, size) {\n return typeof origin === 'string' ? origin : px.transform(offset + size * origin);\n}\n\nfunction calculateSVGTransformOrigin(dimensions, originX, originY) {\n return calcOrigin(originX, dimensions.x, dimensions.width) + \" \" + calcOrigin(originY, dimensions.y, dimensions.height);\n}\n\nfunction buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs, isDashCase) {\n if (dimensions === void 0) {\n dimensions = unmeasured;\n }\n\n if (cssBuilder === void 0) {\n cssBuilder = createStyleBuilder(false, false);\n }\n\n if (attrs === void 0) {\n attrs = svgAttrsTemplate();\n }\n\n if (isDashCase === void 0) {\n isDashCase = true;\n }\n\n var attrX = _a.attrX,\n attrY = _a.attrY,\n originX = _a.originX,\n originY = _a.originY,\n pathLength = _a.pathLength,\n _b = _a.pathSpacing,\n pathSpacing = _b === void 0 ? 1 : _b,\n _c = _a.pathOffset,\n pathOffset = _c === void 0 ? 0 : _c,\n state = __rest(_a, [\"attrX\", \"attrY\", \"originX\", \"originY\", \"pathLength\", \"pathSpacing\", \"pathOffset\"]);\n\n var style = cssBuilder(state);\n\n for (var key in style) {\n if (key === 'transform') {\n attrs.style.transform = style[key];\n } else {\n var attrKey = isDashCase && !camelCaseAttributes.has(key) ? camelToDash(key) : key;\n attrs[attrKey] = style[key];\n }\n }\n\n if (originX !== undefined || originY !== undefined || style.transform) {\n attrs.style.transformOrigin = calculateSVGTransformOrigin(dimensions, originX !== undefined ? originX : defaultOrigin, originY !== undefined ? originY : defaultOrigin);\n }\n\n if (attrX !== undefined) attrs.x = attrX;\n if (attrY !== undefined) attrs.y = attrY;\n\n if (totalPathLength !== undefined && pathLength !== undefined) {\n attrs[isDashCase ? 'stroke-dashoffset' : 'strokeDashoffset'] = progressToPixels(-pathOffset, totalPathLength);\n attrs[isDashCase ? 'stroke-dasharray' : 'strokeDasharray'] = progressToPixels(pathLength, totalPathLength) + \" \" + progressToPixels(pathSpacing, totalPathLength);\n }\n\n return attrs;\n}\n\nfunction createAttrBuilder(dimensions, totalPathLength, isDashCase) {\n if (isDashCase === void 0) {\n isDashCase = true;\n }\n\n var attrs = svgAttrsTemplate();\n var cssBuilder = createStyleBuilder(false, false);\n return function (state) {\n return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs, isDashCase);\n };\n}\n\nvar getDimensions = function getDimensions(element) {\n return typeof element.getBBox === 'function' ? element.getBBox() : element.getBoundingClientRect();\n};\n\nvar getSVGElementDimensions = function getSVGElementDimensions(element) {\n try {\n return getDimensions(element);\n } catch (e) {\n return {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n }\n};\n\nvar isPath = function isPath(element) {\n return element.tagName === 'path';\n};\n\nvar svgStyler =\n/*#__PURE__*/\ncreateStyler({\n onRead: function onRead(key, _a) {\n var element = _a.element;\n key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;\n\n if (!isTransformProp(key)) {\n return element.getAttribute(key);\n } else {\n var valueType = getValueType(key);\n return valueType ? valueType[\"default\"] || 0 : 0;\n }\n },\n onRender: function onRender(state, _a) {\n var element = _a.element,\n buildAttrs = _a.buildAttrs;\n var attrs = buildAttrs(state);\n\n for (var key in attrs) {\n if (key === 'style') {\n Object.assign(element.style, attrs.style);\n } else {\n element.setAttribute(key, attrs[key]);\n }\n }\n }\n});\n\nvar svg = function svg(element) {\n var dimensions = getSVGElementDimensions(element);\n var pathLength = isPath(element) && element.getTotalLength ? element.getTotalLength() : undefined;\n return svgStyler({\n element: element,\n buildAttrs: createAttrBuilder(dimensions, pathLength)\n });\n};\n\nvar viewport =\n/*#__PURE__*/\ncreateStyler({\n useCache: false,\n onRead: function onRead(key) {\n return key === 'scrollTop' ? window.pageYOffset : window.pageXOffset;\n },\n onRender: function onRender(_a) {\n var _b = _a.scrollTop,\n scrollTop = _b === void 0 ? 0 : _b,\n _c = _a.scrollLeft,\n scrollLeft = _c === void 0 ? 0 : _c;\n return window.scrollTo(scrollLeft, scrollTop);\n }\n});\nvar cache =\n/*#__PURE__*/\nnew WeakMap();\n\nvar createDOMStyler = function createDOMStyler(node, props) {\n var styler;\n\n if (node instanceof HTMLElement) {\n styler = createCssStyler(node, props);\n } else if (node instanceof SVGElement) {\n styler = svg(node);\n } else if (node === window) {\n styler = viewport(node);\n }\n\n invariant(styler !== undefined, 'No valid node provided. Node must be HTMLElement, SVGElement or window.');\n cache.set(node, styler);\n return styler;\n};\n\nvar getStyler = function getStyler(node, props) {\n return cache.has(node) ? cache.get(node) : createDOMStyler(node, props);\n};\n\nfunction index(nodeOrSelector, props) {\n var node = typeof nodeOrSelector === 'string' ? document.querySelector(nodeOrSelector) : nodeOrSelector;\n return getStyler(node, props);\n}\n\nexport default index;\nexport { createStyler as createStylerFactory, buildStyleProperty, buildSVGAttrs, transformProps, isTransformProp };","import \"core-js/modules/es6.regexp.split\";\nimport \"core-js/modules/es6.array.is-array\";\nimport \"core-js/modules/es6.array.map\";\nimport \"core-js/modules/es6.array.find\";\nimport \"core-js/modules/es6.array.some\";\nimport \"core-js/modules/es6.array.reduce\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.array.iterator\";\nimport \"core-js/modules/es6.object.to-string\";\nimport \"core-js/modules/es6.object.keys\";\nimport \"core-js/modules/es6.array.index-of\";\nimport \"core-js/modules/es6.array.filter\";\nimport \"core-js/modules/es6.array.for-each\";\nimport { __rest, __assign, __extends } from 'tslib';\nimport { pipe, velocityPerSecond, mixComplex, mixColor, mix, clamp, progress, velocityPerFrame, distance, angle, applyOffset } from '@popmotion/popcorn';\nimport sync, { getFrameData, cancelSync } from 'framesync';\nimport { color, complex, px, percent, degrees, vh, vw, number } from 'style-value-types';\nimport { createReversedEasing, linear, easeOut, easeInOut } from '@popmotion/easing';\nimport { invariant } from 'hey-listen';\n\nvar Observer =\n/*#__PURE__*/\nfunction () {\n function Observer(_a, observer) {\n var _this = this;\n\n var middleware = _a.middleware,\n onComplete = _a.onComplete;\n this.isActive = true;\n\n this.update = function (v) {\n if (_this.observer.update) _this.updateObserver(v);\n };\n\n this.complete = function () {\n if (_this.observer.complete && _this.isActive) _this.observer.complete();\n if (_this.onComplete) _this.onComplete();\n _this.isActive = false;\n };\n\n this.error = function (err) {\n if (_this.observer.error && _this.isActive) _this.observer.error(err);\n _this.isActive = false;\n };\n\n this.observer = observer;\n\n this.updateObserver = function (v) {\n return observer.update(v);\n };\n\n this.onComplete = onComplete;\n\n if (observer.update && middleware && middleware.length) {\n middleware.forEach(function (m) {\n return _this.updateObserver = m(_this.updateObserver, _this.complete);\n });\n }\n }\n\n return Observer;\n}();\n\nvar createObserver = function createObserver(observerCandidate, _a, onComplete) {\n var middleware = _a.middleware;\n\n if (typeof observerCandidate === 'function') {\n return new Observer({\n middleware: middleware,\n onComplete: onComplete\n }, {\n update: observerCandidate\n });\n } else {\n return new Observer({\n middleware: middleware,\n onComplete: onComplete\n }, observerCandidate);\n }\n};\n\nvar Action =\n/*#__PURE__*/\nfunction () {\n function Action(props) {\n if (props === void 0) {\n props = {};\n }\n\n this.props = props;\n }\n\n Action.prototype.create = function (props) {\n return new Action(props);\n };\n\n Action.prototype.start = function (observerCandidate) {\n if (observerCandidate === void 0) {\n observerCandidate = {};\n }\n\n var isComplete = false;\n var subscription = {\n stop: function stop() {\n return undefined;\n }\n };\n\n var _a = this.props,\n init = _a.init,\n observerProps = __rest(_a, [\"init\"]);\n\n var observer = createObserver(observerCandidate, observerProps, function () {\n isComplete = true;\n subscription.stop();\n });\n var api = init(observer);\n subscription = api ? __assign({}, subscription, api) : subscription;\n if (isComplete) subscription.stop();\n return subscription;\n };\n\n Action.prototype.applyMiddleware = function (middleware) {\n return this.create(__assign({}, this.props, {\n middleware: this.props.middleware ? [middleware].concat(this.props.middleware) : [middleware]\n }));\n };\n\n Action.prototype.pipe = function () {\n var funcs = [];\n\n for (var _i = 0; _i < arguments.length; _i++) {\n funcs[_i] = arguments[_i];\n }\n\n var pipedUpdate = funcs.length === 1 ? funcs[0] : pipe.apply(void 0, funcs);\n return this.applyMiddleware(function (update) {\n return function (v) {\n return update(pipedUpdate(v));\n };\n });\n };\n\n return Action;\n}();\n\nvar action = function action(init) {\n return new Action({\n init: init\n });\n};\n\nvar Chainable =\n/*#__PURE__*/\nfunction () {\n function Chainable(props) {\n if (props === void 0) {\n props = {};\n }\n\n this.props = props;\n }\n\n Chainable.prototype.applyMiddleware = function (middleware) {\n return this.create(__assign({}, this.props, {\n middleware: this.props.middleware ? [middleware].concat(this.props.middleware) : [middleware]\n }));\n };\n\n Chainable.prototype.pipe = function () {\n var funcs = [];\n\n for (var _i = 0; _i < arguments.length; _i++) {\n funcs[_i] = arguments[_i];\n }\n\n var pipedUpdate = funcs.length === 1 ? funcs[0] : pipe.apply(void 0, funcs);\n return this.applyMiddleware(function (update) {\n return function (v) {\n return update(pipedUpdate(v));\n };\n });\n };\n\n Chainable.prototype[\"while\"] = function (predicate) {\n return this.applyMiddleware(function (update, complete) {\n return function (v) {\n return predicate(v) ? update(v) : complete();\n };\n });\n };\n\n Chainable.prototype.filter = function (predicate) {\n return this.applyMiddleware(function (update) {\n return function (v) {\n return predicate(v) && update(v);\n };\n });\n };\n\n return Chainable;\n}();\n\nvar BaseMulticast =\n/*#__PURE__*/\nfunction (_super) {\n __extends(BaseMulticast, _super);\n\n function BaseMulticast() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n\n _this.subscribers = [];\n return _this;\n }\n\n BaseMulticast.prototype.complete = function () {\n this.subscribers.forEach(function (subscriber) {\n return subscriber.complete();\n });\n };\n\n BaseMulticast.prototype.error = function (err) {\n this.subscribers.forEach(function (subscriber) {\n return subscriber.error(err);\n });\n };\n\n BaseMulticast.prototype.update = function (v) {\n for (var i = 0; i < this.subscribers.length; i++) {\n this.subscribers[i].update(v);\n }\n };\n\n BaseMulticast.prototype.subscribe = function (observerCandidate) {\n var _this = this;\n\n var observer = createObserver(observerCandidate, this.props);\n this.subscribers.push(observer);\n var subscription = {\n unsubscribe: function unsubscribe() {\n var index = _this.subscribers.indexOf(observer);\n\n if (index !== -1) _this.subscribers.splice(index, 1);\n }\n };\n return subscription;\n };\n\n BaseMulticast.prototype.stop = function () {\n if (this.parent) this.parent.stop();\n };\n\n return BaseMulticast;\n}(Chainable);\n\nvar Multicast =\n/*#__PURE__*/\nfunction (_super) {\n __extends(Multicast, _super);\n\n function Multicast() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n\n Multicast.prototype.create = function (props) {\n return new Multicast(props);\n };\n\n return Multicast;\n}(BaseMulticast);\n\nvar multicast = function multicast() {\n return new Multicast();\n};\n\nvar ValueReaction =\n/*#__PURE__*/\nfunction (_super) {\n __extends(ValueReaction, _super);\n\n function ValueReaction(props) {\n var _this = _super.call(this, props) || this;\n\n _this.scheduleVelocityCheck = function () {\n return sync.postRender(_this.velocityCheck);\n };\n\n _this.velocityCheck = function (_a) {\n var timestamp = _a.timestamp;\n\n if (timestamp !== _this.lastUpdated) {\n _this.prev = _this.current;\n }\n };\n\n _this.prev = _this.current = props.value || 0;\n\n _this.updateCurrent = function (v) {\n return _this.current = v;\n };\n\n _this.getVelocityOfCurrent = function () {\n return _this.getSingleVelocity(_this.current, _this.prev);\n };\n\n if (props.initialSubscription) _this.subscribe(props.initialSubscription);\n return _this;\n }\n\n ValueReaction.prototype.create = function (props) {\n return new ValueReaction(props);\n };\n\n ValueReaction.prototype.get = function () {\n return this.current;\n };\n\n ValueReaction.prototype.getVelocity = function () {\n return this.getVelocityOfCurrent();\n };\n\n ValueReaction.prototype.update = function (v) {\n _super.prototype.update.call(this, v);\n\n this.prev = this.current;\n this.updateCurrent(v);\n\n var _a = getFrameData(),\n delta = _a.delta,\n timestamp = _a.timestamp;\n\n this.timeDelta = delta;\n this.lastUpdated = timestamp;\n sync.postRender(this.scheduleVelocityCheck);\n };\n\n ValueReaction.prototype.subscribe = function (observerCandidate) {\n var sub = _super.prototype.subscribe.call(this, observerCandidate);\n\n this.subscribers[this.subscribers.length - 1].update(this.current);\n return sub;\n };\n\n ValueReaction.prototype.getSingleVelocity = function (current, prev) {\n return typeof current === 'number' && typeof prev === 'number' ? velocityPerSecond(current - prev, this.timeDelta) : velocityPerSecond(parseFloat(current) - parseFloat(prev), this.timeDelta) || 0;\n };\n\n return ValueReaction;\n}(BaseMulticast);\n\nvar value = function value(_value, initialSubscription) {\n return new ValueReaction({\n value: _value,\n initialSubscription: initialSubscription\n });\n};\n\nvar createVectorTests = function createVectorTests(typeTests) {\n var testNames = Object.keys(typeTests);\n\n var isVectorProp = function isVectorProp(prop, key) {\n return prop !== undefined && !typeTests[key](prop);\n };\n\n var getVectorKeys = function getVectorKeys(props) {\n return testNames.reduce(function (vectorKeys, key) {\n if (isVectorProp(props[key], key)) vectorKeys.push(key);\n return vectorKeys;\n }, []);\n };\n\n var testVectorProps = function testVectorProps(props) {\n return props && testNames.some(function (key) {\n return isVectorProp(props[key], key);\n });\n };\n\n return {\n getVectorKeys: getVectorKeys,\n testVectorProps: testVectorProps\n };\n};\n\nvar unitTypes = [px, percent, degrees, vh, vw];\n\nvar findUnitType = function findUnitType(prop) {\n return unitTypes.find(function (type) {\n return type.test(prop);\n });\n};\n\nvar isUnitProp = function isUnitProp(prop) {\n return Boolean(findUnitType(prop));\n};\n\nvar createAction = function createAction(action, props) {\n return action(props);\n};\n\nvar createUnitAction = function createUnitAction(action, _a) {\n var from = _a.from,\n to = _a.to,\n props = __rest(_a, [\"from\", \"to\"]);\n\n var unitType = findUnitType(from) || findUnitType(to);\n var transform = unitType.transform,\n parse = unitType.parse;\n return action(__assign({}, props, {\n from: typeof from === 'string' ? parse(from) : from,\n to: typeof to === 'string' ? parse(to) : to\n })).pipe(transform);\n};\n\nvar createMixerAction = function createMixerAction(mixer) {\n return function (action, _a) {\n var from = _a.from,\n to = _a.to,\n props = __rest(_a, [\"from\", \"to\"]);\n\n return action(__assign({}, props, {\n from: 0,\n to: 1\n })).pipe(mixer(from, to));\n };\n};\n\nvar createColorAction =\n/*#__PURE__*/\ncreateMixerAction(mixColor);\nvar createComplexAction =\n/*#__PURE__*/\ncreateMixerAction(mixComplex);\n\nvar createVectorAction = function createVectorAction(action, typeTests) {\n var _a = createVectorTests(typeTests),\n testVectorProps = _a.testVectorProps,\n getVectorKeys = _a.getVectorKeys;\n\n var vectorAction = function vectorAction(props) {\n var isVector = testVectorProps(props);\n if (!isVector) return action(props);\n var vectorKeys = getVectorKeys(props);\n var testKey = vectorKeys[0];\n var testProp = props[testKey];\n return getActionCreator(testProp)(action, props, vectorKeys);\n };\n\n return vectorAction;\n};\n\nvar getActionCreator = function getActionCreator(prop) {\n if (typeof prop === 'number') {\n return createAction;\n } else if (isUnitProp(prop)) {\n return createUnitAction;\n } else if (color.test(prop)) {\n return createColorAction;\n } else if (complex.test(prop)) {\n return createComplexAction;\n } else {\n return createAction;\n }\n};\n\nvar decay = function decay(props) {\n if (props === void 0) {\n props = {};\n }\n\n return action(function (_a) {\n var complete = _a.complete,\n update = _a.update;\n var _b = props.velocity,\n velocity = _b === void 0 ? 0 : _b,\n _c = props.from,\n from = _c === void 0 ? 0 : _c,\n _d = props.power,\n power = _d === void 0 ? 0.8 : _d,\n _e = props.timeConstant,\n timeConstant = _e === void 0 ? 350 : _e,\n _f = props.restDelta,\n restDelta = _f === void 0 ? 0.5 : _f,\n modifyTarget = props.modifyTarget;\n var elapsed = 0;\n var amplitude = power * velocity;\n var idealTarget = Math.round(from + amplitude);\n var target = typeof modifyTarget === 'undefined' ? idealTarget : modifyTarget(idealTarget);\n var process = sync.update(function (_a) {\n var frameDelta = _a.delta;\n elapsed += frameDelta;\n var delta = -amplitude * Math.exp(-elapsed / timeConstant);\n var isMoving = delta > restDelta || delta < -restDelta;\n var current = isMoving ? target + delta : target;\n update(current);\n\n if (!isMoving) {\n cancelSync.update(process);\n complete();\n }\n }, true);\n return {\n stop: function stop() {\n return cancelSync.update(process);\n }\n };\n });\n};\n\nvar vectorDecay =\n/*#__PURE__*/\ncreateVectorAction(decay, {\n from: number.test,\n modifyTarget: function modifyTarget(func) {\n return typeof func === 'function';\n },\n velocity: number.test\n});\n\nvar spring = function spring(props) {\n if (props === void 0) {\n props = {};\n }\n\n return action(function (_a) {\n var update = _a.update,\n complete = _a.complete;\n var _b = props.velocity,\n velocity = _b === void 0 ? 0.0 : _b;\n var _c = props.from,\n from = _c === void 0 ? 0.0 : _c,\n _d = props.to,\n to = _d === void 0 ? 0.0 : _d,\n _e = props.stiffness,\n stiffness = _e === void 0 ? 100 : _e,\n _f = props.damping,\n damping = _f === void 0 ? 10 : _f,\n _g = props.mass,\n mass = _g === void 0 ? 1.0 : _g,\n _h = props.restSpeed,\n restSpeed = _h === void 0 ? 0.01 : _h,\n _j = props.restDelta,\n restDelta = _j === void 0 ? 0.01 : _j;\n var initialVelocity = velocity ? -(velocity / 1000) : 0.0;\n var t = 0;\n var delta = to - from;\n var position = from;\n var prevPosition = position;\n var process = sync.update(function (_a) {\n var timeDelta = _a.delta;\n t += timeDelta;\n var dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));\n var angularFreq = Math.sqrt(stiffness / mass) / 1000;\n prevPosition = position;\n\n if (dampingRatio < 1) {\n var envelope = Math.exp(-dampingRatio * angularFreq * t);\n var expoDecay = angularFreq * Math.sqrt(1.0 - dampingRatio * dampingRatio);\n position = to - envelope * ((initialVelocity + dampingRatio * angularFreq * delta) / expoDecay * Math.sin(expoDecay * t) + delta * Math.cos(expoDecay * t));\n } else {\n var envelope = Math.exp(-angularFreq * t);\n position = to - envelope * (delta + (initialVelocity + angularFreq * delta) * t);\n }\n\n velocity = velocityPerSecond(position - prevPosition, timeDelta);\n var isBelowVelocityThreshold = Math.abs(velocity) <= restSpeed;\n var isBelowDisplacementThreshold = Math.abs(to - position) <= restDelta;\n\n if (isBelowVelocityThreshold && isBelowDisplacementThreshold) {\n position = to;\n update(position);\n cancelSync.update(process);\n complete();\n } else {\n update(position);\n }\n }, true);\n return {\n stop: function stop() {\n return cancelSync.update(process);\n }\n };\n });\n};\n\nvar vectorSpring =\n/*#__PURE__*/\ncreateVectorAction(spring, {\n from: number.test,\n to: number.test,\n stiffness: number.test,\n damping: number.test,\n mass: number.test,\n velocity: number.test\n});\n\nvar inertia = function inertia(_a) {\n var _b = _a.from,\n from = _b === void 0 ? 0 : _b,\n _c = _a.velocity,\n velocity = _c === void 0 ? 0 : _c,\n min = _a.min,\n max = _a.max,\n _d = _a.power,\n power = _d === void 0 ? 0.8 : _d,\n _e = _a.timeConstant,\n timeConstant = _e === void 0 ? 700 : _e,\n _f = _a.bounceStiffness,\n bounceStiffness = _f === void 0 ? 500 : _f,\n _g = _a.bounceDamping,\n bounceDamping = _g === void 0 ? 10 : _g,\n _h = _a.restDelta,\n restDelta = _h === void 0 ? 1 : _h,\n modifyTarget = _a.modifyTarget;\n return action(function (_a) {\n var update = _a.update,\n _complete = _a.complete;\n var prev = from;\n var current = from;\n var activeAnimation;\n var isSpring = false;\n\n var isLessThanMin = function isLessThanMin(v) {\n return min !== undefined && v <= min;\n };\n\n var isMoreThanMax = function isMoreThanMax(v) {\n return max !== undefined && v >= max;\n };\n\n var isOutOfBounds = function isOutOfBounds(v) {\n return isLessThanMin(v) || isMoreThanMax(v);\n };\n\n var isTravellingAwayFromBounds = function isTravellingAwayFromBounds(v, currentVelocity) {\n return isLessThanMin(v) && currentVelocity < 0 || isMoreThanMax(v) && currentVelocity > 0;\n };\n\n var onUpdate = function onUpdate(v) {\n update(v);\n prev = current;\n current = v;\n velocity = velocityPerSecond(current - prev, getFrameData().delta);\n\n if (activeAnimation && !isSpring && isTravellingAwayFromBounds(v, velocity)) {\n startSpring({\n from: v,\n velocity: velocity\n });\n }\n };\n\n var startAnimation = function startAnimation(animation, next) {\n activeAnimation && activeAnimation.stop();\n activeAnimation = animation.start({\n update: onUpdate,\n complete: function complete() {\n if (next) {\n next();\n return;\n }\n\n _complete();\n }\n });\n };\n\n var startSpring = function startSpring(props) {\n isSpring = true;\n startAnimation(vectorSpring(__assign({}, props, {\n to: isLessThanMin(props.from) ? min : max,\n stiffness: bounceStiffness,\n damping: bounceDamping,\n restDelta: restDelta\n })));\n };\n\n if (isOutOfBounds(from)) {\n startSpring({\n from: from,\n velocity: velocity\n });\n } else if (velocity !== 0) {\n var animation = vectorDecay({\n from: from,\n velocity: velocity,\n timeConstant: timeConstant,\n power: power,\n restDelta: isOutOfBounds(from) ? 20 : restDelta,\n modifyTarget: modifyTarget\n });\n startAnimation(animation, function () {\n if (isOutOfBounds(current)) {\n startSpring({\n from: current,\n velocity: velocity\n });\n } else {\n _complete();\n }\n });\n } else {\n _complete();\n }\n\n return {\n stop: function stop() {\n return activeAnimation && activeAnimation.stop();\n }\n };\n });\n};\n\nvar index =\n/*#__PURE__*/\ncreateVectorAction(inertia, {\n from: number.test,\n velocity: number.test,\n min: number.test,\n max: number.test,\n damping: number.test,\n stiffness: number.test,\n modifyTarget: function modifyTarget(func) {\n return typeof func === 'function';\n }\n});\n\nvar frame = function frame() {\n return action(function (_a) {\n var update = _a.update;\n var initialTime = 0;\n var process = sync.update(function (_a) {\n var timestamp = _a.timestamp;\n if (!initialTime) initialTime = timestamp;\n update(timestamp - initialTime);\n }, true, true);\n return {\n stop: function stop() {\n return cancelSync.update(process);\n }\n };\n });\n};\n\nvar scrubber = function scrubber(_a) {\n var _b = _a.from,\n from = _b === void 0 ? 0 : _b,\n _c = _a.to,\n to = _c === void 0 ? 1 : _c,\n _d = _a.ease,\n ease = _d === void 0 ? linear : _d,\n _e = _a.reverseEase,\n reverseEase = _e === void 0 ? false : _e;\n\n if (reverseEase) {\n ease = createReversedEasing(ease);\n }\n\n return action(function (_a) {\n var update = _a.update;\n return {\n seek: function seek(progress) {\n return update(progress);\n }\n };\n }).pipe(ease, function (v) {\n return mix(from, to, v);\n });\n};\n\nvar vectorScrubber =\n/*#__PURE__*/\ncreateVectorAction(scrubber, {\n ease: function ease(func) {\n return typeof func === 'function';\n },\n from: number.test,\n to: number.test\n});\nvar clampProgress =\n/*#__PURE__*/\nclamp(0, 1);\n\nvar tween = function tween(props) {\n if (props === void 0) {\n props = {};\n }\n\n return action(function (_a) {\n var update = _a.update,\n complete = _a.complete;\n var _b = props.duration,\n duration = _b === void 0 ? 300 : _b,\n _c = props.ease,\n ease = _c === void 0 ? easeOut : _c,\n _d = props.flip,\n flip = _d === void 0 ? 0 : _d,\n _e = props.loop,\n loop = _e === void 0 ? 0 : _e,\n _f = props.yoyo,\n yoyo = _f === void 0 ? 0 : _f,\n _g = props.repeatDelay,\n repeatDelay = _g === void 0 ? 0 : _g;\n var _h = props.from,\n from = _h === void 0 ? 0 : _h,\n _j = props.to,\n to = _j === void 0 ? 1 : _j,\n _k = props.elapsed,\n elapsed = _k === void 0 ? 0 : _k,\n _l = props.flipCount,\n flipCount = _l === void 0 ? 0 : _l,\n _m = props.yoyoCount,\n yoyoCount = _m === void 0 ? 0 : _m,\n _o = props.loopCount,\n loopCount = _o === void 0 ? 0 : _o;\n var playhead = vectorScrubber({\n from: from,\n to: to,\n ease: ease\n }).start(update);\n var currentProgress = 0;\n var process;\n var _isActive = false;\n\n var reverseAnimation = function reverseAnimation(reverseEase) {\n var _a;\n\n if (reverseEase === void 0) {\n reverseEase = false;\n }\n\n _a = [to, from], from = _a[0], to = _a[1];\n playhead = vectorScrubber({\n from: from,\n to: to,\n ease: ease,\n reverseEase: reverseEase\n }).start(update);\n };\n\n var isTweenComplete = function isTweenComplete() {\n var isComplete = _isActive && elapsed > duration + repeatDelay;\n if (!isComplete) return false;\n if (isComplete && !loop && !flip && !yoyo) return true;\n var overtime = elapsed - duration;\n elapsed = overtime - repeatDelay;\n\n if (loop && loopCount < loop) {\n loopCount++;\n return false;\n } else if (flip && flipCount < flip) {\n flipCount++;\n reverseAnimation();\n return false;\n } else if (yoyo && yoyoCount < yoyo) {\n yoyoCount++;\n reverseAnimation(yoyoCount % 2 !== 0);\n return false;\n }\n\n return true;\n };\n\n var updateTween = function updateTween() {\n currentProgress = clampProgress(progress(0, duration, elapsed));\n playhead.seek(currentProgress);\n };\n\n var startTimer = function startTimer() {\n _isActive = true;\n process = sync.update(function (_a) {\n var delta = _a.delta;\n elapsed += delta;\n updateTween();\n\n if (isTweenComplete()) {\n cancelSync.update(process);\n complete && sync.update(complete, false, true);\n }\n }, true);\n };\n\n var stopTimer = function stopTimer() {\n _isActive = false;\n if (process) cancelSync.update(process);\n };\n\n startTimer();\n return {\n isActive: function isActive() {\n return _isActive;\n },\n getElapsed: function getElapsed() {\n return clamp(0, duration, elapsed);\n },\n getProgress: function getProgress() {\n return currentProgress;\n },\n stop: function stop() {\n stopTimer();\n },\n pause: function pause() {\n stopTimer();\n return this;\n },\n resume: function resume() {\n if (!_isActive) startTimer();\n return this;\n },\n seek: function seek(newProgress) {\n elapsed = mix(0, duration, newProgress);\n sync.update(updateTween, false, true);\n return this;\n },\n reverse: function reverse() {\n reverseAnimation();\n return this;\n }\n };\n });\n};\n\nvar clampProgress$1 =\n/*#__PURE__*/\nclamp(0, 1);\n\nvar defaultEasings = function defaultEasings(values, easing) {\n return values.map(function () {\n return easing || easeOut;\n }).splice(0, values.length - 1);\n};\n\nvar defaultTimings = function defaultTimings(values) {\n var numValues = values.length;\n return values.map(function (value, i) {\n return i !== 0 ? i / (numValues - 1) : 0;\n });\n};\n\nvar interpolateScrubbers = function interpolateScrubbers(input, scrubbers, update) {\n var rangeLength = input.length;\n var finalInputIndex = rangeLength - 1;\n var finalScrubberIndex = finalInputIndex - 1;\n var subs = scrubbers.map(function (scrub) {\n return scrub.start(update);\n });\n return function (v) {\n if (v <= input[0]) {\n subs[0].seek(0);\n }\n\n if (v >= input[finalInputIndex]) {\n subs[finalScrubberIndex].seek(1);\n }\n\n var i = 1;\n\n for (; i < rangeLength; i++) {\n if (input[i] > v || i === finalInputIndex) break;\n }\n\n var progressInRange = progress(input[i - 1], input[i], v);\n subs[i - 1].seek(clampProgress$1(progressInRange));\n };\n};\n\nvar keyframes = function keyframes(_a) {\n var easings = _a.easings,\n _b = _a.ease,\n ease = _b === void 0 ? linear : _b,\n times = _a.times,\n values = _a.values,\n tweenProps = __rest(_a, [\"easings\", \"ease\", \"times\", \"values\"]);\n\n easings = Array.isArray(easings) ? easings : defaultEasings(values, easings);\n times = times || defaultTimings(values);\n var scrubbers = easings.map(function (easing, i) {\n return vectorScrubber({\n from: values[i],\n to: values[i + 1],\n ease: easing\n });\n });\n return tween(__assign({}, tweenProps, {\n ease: ease\n })).applyMiddleware(function (update) {\n return interpolateScrubbers(times, scrubbers, update);\n });\n};\n\nvar physics = function physics(props) {\n if (props === void 0) {\n props = {};\n }\n\n return action(function (_a) {\n var complete = _a.complete,\n update = _a.update;\n var _b = props.acceleration,\n acceleration = _b === void 0 ? 0 : _b,\n _c = props.friction,\n friction = _c === void 0 ? 0 : _c,\n _d = props.velocity,\n velocity = _d === void 0 ? 0 : _d,\n springStrength = props.springStrength,\n to = props.to;\n var _e = props.restSpeed,\n restSpeed = _e === void 0 ? 0.001 : _e,\n _f = props.from,\n from = _f === void 0 ? 0 : _f;\n var current = from;\n var process = sync.update(function (_a) {\n var delta = _a.delta;\n var elapsed = Math.max(delta, 16);\n if (acceleration) velocity += velocityPerFrame(acceleration, elapsed);\n if (friction) velocity *= Math.pow(1 - friction, elapsed / 100);\n\n if (springStrength !== undefined && to !== undefined) {\n var distanceToTarget = to - current;\n velocity += distanceToTarget * velocityPerFrame(springStrength, elapsed);\n }\n\n current += velocityPerFrame(velocity, elapsed);\n update(current);\n var isComplete = restSpeed !== false && (!velocity || Math.abs(velocity) <= restSpeed);\n\n if (isComplete) {\n cancelSync.update(process);\n complete();\n }\n }, true);\n return {\n set: function set(v) {\n current = v;\n return this;\n },\n setAcceleration: function setAcceleration(v) {\n acceleration = v;\n return this;\n },\n setFriction: function setFriction(v) {\n friction = v;\n return this;\n },\n setSpringStrength: function setSpringStrength(v) {\n springStrength = v;\n return this;\n },\n setSpringTarget: function setSpringTarget(v) {\n to = v;\n return this;\n },\n setVelocity: function setVelocity(v) {\n velocity = v;\n return this;\n },\n stop: function stop() {\n return cancelSync.update(process);\n }\n };\n });\n};\n\nvar vectorPhysics =\n/*#__PURE__*/\ncreateVectorAction(physics, {\n acceleration: number.test,\n friction: number.test,\n velocity: number.test,\n from: number.test,\n to: number.test,\n springStrength: number.test\n});\n\nvar multi = function multi(_a) {\n var getCount = _a.getCount,\n getFirst = _a.getFirst,\n getOutput = _a.getOutput,\n mapApi = _a.mapApi,\n setProp = _a.setProp,\n startActions = _a.startActions;\n return function (actions) {\n return action(function (_a) {\n var update = _a.update,\n _complete2 = _a.complete,\n error = _a.error;\n var numActions = getCount(actions);\n var output = getOutput();\n\n var updateOutput = function updateOutput() {\n return update(output);\n };\n\n var numCompletedActions = 0;\n var subs = startActions(actions, function (a, name) {\n var hasCompleted = false;\n return a.start({\n complete: function complete() {\n if (!hasCompleted) {\n hasCompleted = true;\n numCompletedActions++;\n if (numCompletedActions === numActions) sync.update(_complete2);\n }\n },\n error: error,\n update: function update(v) {\n setProp(output, name, v);\n sync.update(updateOutput, false, true);\n }\n });\n });\n return Object.keys(getFirst(subs)).reduce(function (api, methodName) {\n api[methodName] = mapApi(subs, methodName);\n return api;\n }, {});\n });\n };\n};\n\nvar composite =\n/*#__PURE__*/\nmulti({\n getOutput: function getOutput() {\n return {};\n },\n getCount: function getCount(subs) {\n return Object.keys(subs).length;\n },\n getFirst: function getFirst(subs) {\n return subs[Object.keys(subs)[0]];\n },\n mapApi: function mapApi(subs, methodName) {\n return function () {\n var args = [];\n\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n\n return Object.keys(subs).reduce(function (output, propKey) {\n var _a;\n\n if (subs[propKey][methodName]) {\n args[0] && args[0][propKey] !== undefined ? output[propKey] = subs[propKey][methodName](args[0][propKey]) : output[propKey] = (_a = subs[propKey])[methodName].apply(_a, args);\n }\n\n return output;\n }, {});\n };\n },\n setProp: function setProp(output, name, v) {\n return output[name] = v;\n },\n startActions: function startActions(actions, starter) {\n return Object.keys(actions).reduce(function (subs, key) {\n subs[key] = starter(actions[key], key);\n return subs;\n }, {});\n }\n});\nvar DEFAULT_DURATION = 300;\n\nvar flattenTimings = function flattenTimings(instructions) {\n var flatInstructions = [];\n var lastArg = instructions[instructions.length - 1];\n var isStaggered = typeof lastArg === 'number';\n var staggerDelay = isStaggered ? lastArg : 0;\n var segments = isStaggered ? instructions.slice(0, -1) : instructions;\n var numSegments = segments.length;\n var offset = 0;\n segments.forEach(function (item, i) {\n flatInstructions.push(item);\n\n if (i !== numSegments - 1) {\n var duration = item.duration || DEFAULT_DURATION;\n offset += staggerDelay;\n flatInstructions.push(\"-\" + (duration - offset));\n }\n });\n return flatInstructions;\n};\n\nvar flattenArrayInstructions = function flattenArrayInstructions(instructions, instruction) {\n Array.isArray(instruction) ? instructions.push.apply(instructions, flattenTimings(instruction)) : instructions.push(instruction);\n return instructions;\n};\n\nvar convertDefToProps = function convertDefToProps(props, def, i) {\n var duration = props.duration,\n easings = props.easings,\n times = props.times,\n values = props.values;\n var numValues = values.length;\n var prevTimeTo = times[numValues - 1];\n var timeFrom = def.at === 0 ? 0 : def.at / duration;\n var timeTo = (def.at + def.duration) / duration;\n\n if (i === 0) {\n values.push(def.from);\n times.push(timeFrom);\n } else {\n if (prevTimeTo !== timeFrom) {\n if (def.from !== undefined) {\n values.push(values[numValues - 1]);\n times.push(timeFrom);\n easings.push(linear);\n }\n\n var from = def.from !== undefined ? def.from : values[numValues - 1];\n values.push(from);\n times.push(timeFrom);\n easings.push(linear);\n } else if (def.from !== undefined) {\n values.push(def.from);\n times.push(timeFrom);\n easings.push(linear);\n }\n }\n\n values.push(def.to);\n times.push(timeTo);\n easings.push(def.ease || easeInOut);\n return props;\n};\n\nvar timeline = function timeline(instructions, _a) {\n var _b = _a === void 0 ? {} : _a,\n duration = _b.duration,\n elapsed = _b.elapsed,\n ease = _b.ease,\n loop = _b.loop,\n flip = _b.flip,\n yoyo = _b.yoyo;\n\n var playhead = 0;\n var calculatedDuration = 0;\n var flatInstructions = instructions.reduce(flattenArrayInstructions, []);\n var animationDefs = [];\n flatInstructions.forEach(function (instruction) {\n if (typeof instruction === 'string') {\n playhead += parseFloat(instruction);\n } else if (typeof instruction === 'number') {\n playhead = instruction;\n } else {\n var def = __assign({}, instruction, {\n at: playhead\n });\n\n def.duration = def.duration === undefined ? DEFAULT_DURATION : def.duration;\n animationDefs.push(def);\n playhead += def.duration;\n calculatedDuration = Math.max(calculatedDuration, def.at + def.duration);\n }\n });\n var tracks = {};\n var numDefs = animationDefs.length;\n\n for (var i = 0; i < numDefs; i++) {\n var def = animationDefs[i];\n var track = def.track;\n\n if (track === undefined) {\n throw new Error('No track defined');\n }\n\n if (!tracks.hasOwnProperty(track)) tracks[track] = [];\n tracks[track].push(def);\n }\n\n var trackKeyframes = {};\n\n for (var key in tracks) {\n if (tracks.hasOwnProperty(key)) {\n var keyframeProps = tracks[key].reduce(convertDefToProps, {\n duration: calculatedDuration,\n easings: [],\n times: [],\n values: []\n });\n trackKeyframes[key] = keyframes(__assign({}, keyframeProps, {\n duration: duration || calculatedDuration,\n ease: ease,\n elapsed: elapsed,\n loop: loop,\n yoyo: yoyo,\n flip: flip\n }));\n }\n }\n\n return composite(trackKeyframes);\n};\n\nvar listen = function listen(element, events, options) {\n return action(function (_a) {\n var update = _a.update;\n var eventNames = events.split(' ').map(function (eventName) {\n element.addEventListener(eventName, update, options);\n return eventName;\n });\n return {\n stop: function stop() {\n return eventNames.forEach(function (eventName) {\n return element.removeEventListener(eventName, update, options);\n });\n }\n };\n });\n};\n\nvar defaultPointerPos = function defaultPointerPos() {\n return {\n clientX: 0,\n clientY: 0,\n pageX: 0,\n pageY: 0,\n x: 0,\n y: 0\n };\n};\n\nvar eventToPoint = function eventToPoint(e, point) {\n if (point === void 0) {\n point = defaultPointerPos();\n }\n\n point.clientX = point.x = e.clientX;\n point.clientY = point.y = e.clientY;\n point.pageX = e.pageX;\n point.pageY = e.pageY;\n return point;\n};\n\nvar points = [\n/*#__PURE__*/\ndefaultPointerPos()];\nvar isTouchDevice = false;\n\nif (typeof document !== 'undefined') {\n var updatePointsLocation = function updatePointsLocation(_a) {\n var touches = _a.touches;\n isTouchDevice = true;\n var numTouches = touches.length;\n points.length = 0;\n\n for (var i = 0; i < numTouches; i++) {\n var thisTouch = touches[i];\n points.push(eventToPoint(thisTouch));\n }\n };\n\n listen(document, 'touchstart touchmove', {\n passive: true,\n capture: true\n }).start(updatePointsLocation);\n}\n\nvar multitouch = function multitouch(_a) {\n var _b = _a === void 0 ? {} : _a,\n _c = _b.preventDefault,\n preventDefault = _c === void 0 ? true : _c,\n _d = _b.scale,\n scale = _d === void 0 ? 1.0 : _d,\n _e = _b.rotate,\n rotate = _e === void 0 ? 0.0 : _e;\n\n return action(function (_a) {\n var update = _a.update;\n var output = {\n touches: points,\n scale: scale,\n rotate: rotate\n };\n var initialDistance = 0.0;\n var initialRotation = 0.0;\n var isGesture = points.length > 1;\n\n if (isGesture) {\n var firstTouch = points[0],\n secondTouch = points[1];\n initialDistance = distance(firstTouch, secondTouch);\n initialRotation = angle(firstTouch, secondTouch);\n }\n\n var updatePoint = function updatePoint() {\n if (isGesture) {\n var firstTouch = points[0],\n secondTouch = points[1];\n var newDistance = distance(firstTouch, secondTouch);\n var newRotation = angle(firstTouch, secondTouch);\n output.scale = scale * (newDistance / initialDistance);\n output.rotate = rotate + (newRotation - initialRotation);\n }\n\n update(output);\n };\n\n var onMove = function onMove(e) {\n if (preventDefault || e.touches.length > 1) e.preventDefault();\n sync.update(updatePoint);\n };\n\n var updateOnMove = listen(document, 'touchmove', {\n passive: !preventDefault\n }).start(onMove);\n if (isTouchDevice) sync.update(updatePoint);\n return {\n stop: function stop() {\n cancelSync.update(updatePoint);\n updateOnMove.stop();\n }\n };\n });\n};\n\nvar getIsTouchDevice = function getIsTouchDevice() {\n return isTouchDevice;\n};\n\nvar point =\n/*#__PURE__*/\ndefaultPointerPos();\nvar isMouseDevice = false;\n\nif (typeof document !== 'undefined') {\n var updatePointLocation = function updatePointLocation(e) {\n isMouseDevice = true;\n eventToPoint(e, point);\n };\n\n listen(document, 'mousedown mousemove', true).start(updatePointLocation);\n}\n\nvar mouse = function mouse(_a) {\n var _b = (_a === void 0 ? {} : _a).preventDefault,\n preventDefault = _b === void 0 ? true : _b;\n return action(function (_a) {\n var update = _a.update;\n\n var updatePoint = function updatePoint() {\n return update(point);\n };\n\n var onMove = function onMove(e) {\n if (preventDefault) e.preventDefault();\n sync.update(updatePoint);\n };\n\n var updateOnMove = listen(document, 'mousemove').start(onMove);\n if (isMouseDevice) sync.update(updatePoint);\n return {\n stop: function stop() {\n cancelSync.update(updatePoint);\n updateOnMove.stop();\n }\n };\n });\n};\n\nvar getFirstTouch = function getFirstTouch(_a) {\n var firstTouch = _a[0];\n return firstTouch;\n};\n\nvar pointer = function pointer(props) {\n if (props === void 0) {\n props = {};\n }\n\n return getIsTouchDevice() ? multitouch(props).pipe(function (_a) {\n var touches = _a.touches;\n return touches;\n }, getFirstTouch) : mouse(props);\n};\n\nvar index$1 = function index$1(_a) {\n if (_a === void 0) {\n _a = {};\n }\n\n var x = _a.x,\n y = _a.y,\n props = __rest(_a, [\"x\", \"y\"]);\n\n if (x !== undefined || y !== undefined) {\n var applyXOffset_1 = applyOffset(x || 0);\n var applyYOffset_1 = applyOffset(y || 0);\n var delta_1 = {\n x: 0,\n y: 0\n };\n return pointer(props).pipe(function (point) {\n delta_1.x = applyXOffset_1(point.x);\n delta_1.y = applyYOffset_1(point.y);\n return delta_1;\n });\n } else {\n return pointer(props);\n }\n};\n\nvar chain = function chain() {\n var actions = [];\n\n for (var _i = 0; _i < arguments.length; _i++) {\n actions[_i] = arguments[_i];\n }\n\n return action(function (_a) {\n var update = _a.update,\n _complete3 = _a.complete;\n var i = 0;\n var current;\n\n var playCurrent = function playCurrent() {\n current = actions[i].start({\n complete: function complete() {\n i++;\n i >= actions.length ? _complete3() : playCurrent();\n },\n update: update\n });\n };\n\n playCurrent();\n return {\n stop: function stop() {\n return current && current.stop();\n }\n };\n });\n};\n\nvar parallel =\n/*#__PURE__*/\nmulti({\n getOutput: function getOutput() {\n return [];\n },\n getCount: function getCount(subs) {\n return subs.length;\n },\n getFirst: function getFirst(subs) {\n return subs[0];\n },\n mapApi: function mapApi(subs, methodName) {\n return function () {\n var args = [];\n\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n\n return subs.map(function (sub, i) {\n if (sub[methodName]) {\n return Array.isArray(args[0]) ? sub[methodName](args[0][i]) : sub[methodName].apply(sub, args);\n }\n });\n };\n },\n setProp: function setProp(output, name, v) {\n return output[name] = v;\n },\n startActions: function startActions(actions, starter) {\n return actions.map(function (action, i) {\n return starter(action, i);\n });\n }\n});\n\nvar parallel$1 = function parallel$1() {\n var actions = [];\n\n for (var _i = 0; _i < arguments.length; _i++) {\n actions[_i] = arguments[_i];\n }\n\n return parallel(actions);\n};\n\nvar crossfade = function crossfade(a, b) {\n return action(function (observer) {\n var balance = 0;\n var fadable = parallel$1(a, b).start(__assign({}, observer, {\n update: function update(_a) {\n var va = _a[0],\n vb = _a[1];\n observer.update(mix(va, vb, balance));\n }\n }));\n return {\n setBalance: function setBalance(v) {\n return balance = v;\n },\n stop: function stop() {\n return fadable.stop();\n }\n };\n });\n};\n\nvar delay = function delay(timeToDelay) {\n return action(function (_a) {\n var complete = _a.complete;\n var timeout = setTimeout(complete, timeToDelay);\n return {\n stop: function stop() {\n return clearTimeout(timeout);\n }\n };\n });\n};\n\nvar merge = function merge() {\n var actions = [];\n\n for (var _i = 0; _i < arguments.length; _i++) {\n actions[_i] = arguments[_i];\n }\n\n return action(function (observer) {\n var subs = actions.map(function (thisAction) {\n return thisAction.start(observer);\n });\n return {\n stop: function stop() {\n return subs.forEach(function (sub) {\n return sub.stop();\n });\n }\n };\n });\n};\n\nvar schedule = function schedule(scheduler, schedulee) {\n return action(function (_a) {\n var _update = _a.update,\n complete = _a.complete;\n var latest;\n var schedulerSub = scheduler.start({\n update: function update() {\n return latest !== undefined && _update(latest);\n },\n complete: complete\n });\n var scheduleeSub = schedulee.start({\n update: function update(v) {\n return latest = v;\n },\n complete: complete\n });\n return {\n stop: function stop() {\n schedulerSub.stop();\n scheduleeSub.stop();\n }\n };\n });\n};\n\nvar stagger = function stagger(actions, interval) {\n var intervalIsNumber = typeof interval === 'number';\n var actionsWithDelay = actions.map(function (a, i) {\n var timeToDelay = intervalIsNumber ? interval * i : interval(i);\n return chain(delay(timeToDelay), a);\n });\n return parallel$1.apply(void 0, actionsWithDelay);\n};\n\nvar styler = function styler() {\n return invariant(false, 'styler has been removed from Popmotion in 9.0. Downgrade to 8.x or npm install stylefire');\n};\n\nexport { Action, ValueReaction, action, chain, composite, crossfade, vectorDecay as decay, delay, frame as everyFrame, index as inertia, keyframes, listen, merge, mouse, multicast, multitouch, parallel$1 as parallel, vectorPhysics as physics, index$1 as pointer, schedule, vectorSpring as spring, stagger, styler, timeline, tween, value };","import \"core-js/modules/es6.array.find-index\";\nimport \"core-js/modules/es7.object.values\";\nimport \"core-js/modules/es6.array.reduce\";\nimport \"core-js/modules/es6.regexp.match\";\nimport \"core-js/modules/es6.regexp.split\";\nimport \"core-js/modules/es6.array.some\";\nimport \"core-js/modules/es6.array.index-of\";\nimport \"core-js/modules/es6.array.from\";\nimport \"core-js/modules/es6.array.filter\";\nimport \"core-js/modules/es6.object.keys\";\nimport \"core-js/modules/es6.array.map\";\nimport \"core-js/modules/es6.string.starts-with\";\nimport \"core-js/modules/es6.array.find\";\nimport \"core-js/modules/es6.array.is-array\";\nimport \"core-js/modules/es6.map\";\nimport \"core-js/modules/es6.promise\";\nimport \"core-js/modules/web.dom.iterable\";\nimport \"core-js/modules/es6.array.iterator\";\nimport \"core-js/modules/es6.object.to-string\";\nimport \"core-js/modules/es6.string.iterator\";\nimport \"core-js/modules/es6.set\";\nimport \"core-js/modules/es6.array.for-each\";\nimport { __assign, __rest, __extends } from 'tslib';\nimport React__default, { useRef, memo, useEffect, createContext, useMemo, useContext, forwardRef, createElement, Fragment, useCallback, useState, cloneElement, Children, isValidElement } from 'react';\nimport sync, { getFrameData, cancelSync } from 'framesync';\nimport { velocityPerSecond, distance, mix, interpolate, wrap } from '@popmotion/popcorn';\nimport styler, { createStylerFactory, buildStyleProperty, isTransformProp, transformProps, buildSVGAttrs } from 'stylefire';\nimport { invariant, warning } from 'hey-listen';\nimport { number, px, percent, degrees, vw, vh, color, complex } from 'style-value-types';\nimport { action, delay, tween, spring, keyframes as keyframes$1, inertia } from 'popmotion';\nimport * as easingLookup from '@popmotion/easing';\nimport { cubicBezier, linear } from '@popmotion/easing';\n\nvar isFloat = function isFloat(value) {\n return !isNaN(parseFloat(value));\n};\n/**\r\n * `MotionValue` is used to track the state and velocity of motion values.\r\n *\r\n * @public\r\n */\n\n\nvar MotionValue =\n/** @class */\nfunction () {\n /**\r\n * @param init - The initiating value\r\n * @param config - Optional configuration options\r\n *\r\n * - `transformer`: A function to transform incoming values with.\r\n *\r\n * @internal\r\n */\n function MotionValue(init, _a) {\n var _this = this;\n\n var _b = _a === void 0 ? {} : _a,\n transformer = _b.transformer,\n parent = _b.parent;\n /**\r\n * Duration, in milliseconds, since last updating frame.\r\n *\r\n * @internal\r\n */\n\n\n this.timeDelta = 0;\n /**\r\n * Timestamp of the last time this `MotionValue` was updated.\r\n *\r\n * @internal\r\n */\n\n this.lastUpdated = 0;\n /**\r\n * Tracks whether this value can output a velocity. Currently this is only true\r\n * if the value is numerical, but we might be able to widen the scope here and support\r\n * other value types.\r\n *\r\n * @internal\r\n */\n\n this.canTrackVelocity = false;\n\n this.updateAndNotify = function (v, render) {\n if (render === void 0) {\n render = true;\n }\n\n _this.prev = _this.current;\n _this.current = _this.transformer ? _this.transformer(v) : v;\n\n if (_this.updateSubscribers && _this.prev !== _this.current) {\n _this.updateSubscribers.forEach(_this.notifySubscriber);\n }\n\n if (_this.children) {\n _this.children.forEach(_this.setChild);\n }\n\n if (render && _this.renderSubscribers) {\n _this.renderSubscribers.forEach(_this.notifySubscriber);\n } // Update timestamp\n\n\n var _a = getFrameData(),\n delta = _a.delta,\n timestamp = _a.timestamp;\n\n if (_this.lastUpdated !== timestamp) {\n _this.timeDelta = delta;\n _this.lastUpdated = timestamp;\n sync.postRender(_this.scheduleVelocityCheck);\n }\n };\n /**\r\n * Notify a subscriber with the latest value.\r\n *\r\n * This is an instanced and bound function to prevent generating a new\r\n * function once per frame.\r\n *\r\n * @param subscriber - The subscriber to notify.\r\n *\r\n * @internal\r\n */\n\n\n this.notifySubscriber = function (subscriber) {\n subscriber(_this.current);\n };\n /**\r\n * Schedule a velocity check for the next frame.\r\n *\r\n * This is an instanced and bound function to prevent generating a new\r\n * function once per frame.\r\n *\r\n * @internal\r\n */\n\n\n this.scheduleVelocityCheck = function () {\n return sync.postRender(_this.velocityCheck);\n };\n /**\r\n * Updates `prev` with `current` if the value hasn't been updated this frame.\r\n * This ensures velocity calculations return `0`.\r\n *\r\n * This is an instanced and bound function to prevent generating a new\r\n * function once per frame.\r\n *\r\n * @internal\r\n */\n\n\n this.velocityCheck = function (_a) {\n var timestamp = _a.timestamp;\n\n if (timestamp !== _this.lastUpdated) {\n _this.prev = _this.current;\n }\n };\n /**\r\n * Updates child `MotionValue`.\r\n *\r\n * @param child - Child `MotionValue`.\r\n *\r\n * @internal\r\n */\n\n\n this.setChild = function (child) {\n return child.set(_this.current);\n };\n\n this.parent = parent;\n this.transformer = transformer;\n this.set(init, false);\n this.canTrackVelocity = isFloat(this.current);\n }\n /**\r\n * Creates a new `MotionValue` that's subscribed to the output of this one.\r\n *\r\n * @param config - Optional configuration options\r\n *\r\n * - `transformer`: A function to transform incoming values with.\r\n *\r\n * @internal\r\n */\n\n\n MotionValue.prototype.addChild = function (config) {\n if (config === void 0) {\n config = {};\n }\n\n var child = new MotionValue(this.current, __assign({\n parent: this\n }, config));\n if (!this.children) this.children = new Set();\n this.children.add(child);\n return child;\n };\n /**\r\n * Stops a `MotionValue` from being subscribed to this one.\r\n *\r\n * @param child - The subscribed `MotionValue`\r\n *\r\n * @internal\r\n */\n\n\n MotionValue.prototype.removeChild = function (child) {\n if (!this.children) {\n return;\n }\n\n this.children[\"delete\"](child);\n };\n /**\r\n * Subscribes a subscriber function to a subscription list.\r\n *\r\n * @param subscriptions - A `Set` of subscribers.\r\n * @param subscription - A subscriber function.\r\n */\n\n\n MotionValue.prototype.subscribeTo = function (subscriptions, subscription) {\n var _this = this;\n\n var updateSubscriber = function updateSubscriber() {\n return subscription(_this.current);\n };\n\n subscriptions.add(updateSubscriber);\n return function () {\n return subscriptions[\"delete\"](updateSubscriber);\n };\n };\n /**\r\n * Adds a function that will be notified when the `MotionValue` is updated.\r\n *\r\n * It returns a function that, when called, will cancel the subscription.\r\n *\r\n * When calling `onChange` inside a React component, it should be wrapped with the\r\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\r\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\r\n *\r\n * @library\r\n *\r\n * ```jsx\r\n * function MyComponent() {\r\n * const x = useMotionValue(0)\r\n * const y = useMotionValue(0)\r\n * const opacity = useMotionValue(1)\r\n *\r\n * useEffect(() => {\r\n * function updateOpacity() {\r\n * const maxXY = Math.max(x.get(), y.get())\r\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\r\n * opacity.set(newOpacity)\r\n * }\r\n *\r\n * const unsubscribeX = x.onChange(updateOpacity)\r\n * const unsubscribeY = y.onChange(updateOpacity)\r\n *\r\n * return () => {\r\n * unsubscribeX()\r\n * unsubscribeY()\r\n * }\r\n * }, [])\r\n *\r\n * return \r\n * }\r\n * ```\r\n *\r\n * @motion\r\n *\r\n * ```jsx\r\n * export const MyComponent = () => {\r\n * const x = useMotionValue(0)\r\n * const y = useMotionValue(0)\r\n * const opacity = useMotionValue(1)\r\n *\r\n * useEffect(() => {\r\n * function updateOpacity() {\r\n * const maxXY = Math.max(x.get(), y.get())\r\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\r\n * opacity.set(newOpacity)\r\n * }\r\n *\r\n * const unsubscribeX = x.onChange(updateOpacity)\r\n * const unsubscribeY = y.onChange(updateOpacity)\r\n *\r\n * return () => {\r\n * unsubscribeX()\r\n * unsubscribeY()\r\n * }\r\n * }, [])\r\n *\r\n * return \r\n * }\r\n * ```\r\n *\r\n * @internalremarks\r\n *\r\n * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.\r\n *\r\n * ```jsx\r\n * useOnChange(x, () => {})\r\n * ```\r\n *\r\n * @param subscriber - A function that receives the latest value.\r\n * @returns A function that, when called, will cancel this subscription.\r\n *\r\n * @public\r\n */\n\n\n MotionValue.prototype.onChange = function (subscription) {\n if (!this.updateSubscribers) this.updateSubscribers = new Set();\n return this.subscribeTo(this.updateSubscribers, subscription);\n };\n /**\r\n * Adds a function that will be notified when the `MotionValue` requests a render.\r\n *\r\n * @param subscriber - A function that's provided the latest value.\r\n * @returns A function that, when called, will cancel this subscription.\r\n *\r\n * @internal\r\n */\n\n\n MotionValue.prototype.onRenderRequest = function (subscription) {\n if (!this.renderSubscribers) this.renderSubscribers = new Set(); // Render immediately\n\n this.notifySubscriber(subscription);\n return this.subscribeTo(this.renderSubscribers, subscription);\n };\n /**\r\n * Attaches a passive effect to the `MotionValue`.\r\n *\r\n * @internal\r\n */\n\n\n MotionValue.prototype.attach = function (passiveEffect) {\n this.passiveEffect = passiveEffect;\n };\n /**\r\n * Sets the state of the `MotionValue`.\r\n *\r\n * @remarks\r\n *\r\n * ```jsx\r\n * const x = useMotionValue(0)\r\n * x.set(10)\r\n * ```\r\n *\r\n * @param latest - Latest value to set.\r\n * @param render - Whether to notify render subscribers. Defaults to `true`\r\n *\r\n * @public\r\n */\n\n\n MotionValue.prototype.set = function (v, render) {\n if (render === void 0) {\n render = true;\n }\n\n if (!render || !this.passiveEffect) {\n this.updateAndNotify(v, render);\n } else {\n this.passiveEffect(v, this.updateAndNotify);\n }\n };\n /**\r\n * Returns the latest state of `MotionValue`\r\n *\r\n * @returns - The latest state of `MotionValue`\r\n *\r\n * @public\r\n */\n\n\n MotionValue.prototype.get = function () {\n return this.current;\n };\n /**\r\n * Returns the latest velocity of `MotionValue`\r\n *\r\n * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.\r\n *\r\n * @public\r\n */\n\n\n MotionValue.prototype.getVelocity = function () {\n // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful\n return this.canTrackVelocity ? // These casts could be avoided if parseFloat would be typed better\n velocityPerSecond(parseFloat(this.current) - parseFloat(this.prev), this.timeDelta) : 0;\n };\n /**\r\n * Registers a new animation to control this `MotionValue`. Only one\r\n * animation can drive a `MotionValue` at one time.\r\n *\r\n * ```jsx\r\n * value.start()\r\n * ```\r\n *\r\n * @param animation - A function that starts the provided animation\r\n *\r\n * @internal\r\n */\n\n\n MotionValue.prototype.start = function (animation) {\n var _this = this;\n\n this.stop();\n return new Promise(function (resolve) {\n _this.stopAnimation = animation(resolve);\n }).then(function () {\n return _this.clearAnimation();\n });\n };\n /**\r\n * Stop the currently active animation.\r\n *\r\n * @public\r\n */\n\n\n MotionValue.prototype.stop = function () {\n if (this.stopAnimation) this.stopAnimation();\n this.clearAnimation();\n };\n /**\r\n * Returns `true` if this value is currently animating.\r\n *\r\n * @public\r\n */\n\n\n MotionValue.prototype.isAnimating = function () {\n return !!this.stopAnimation;\n };\n\n MotionValue.prototype.clearAnimation = function () {\n this.stopAnimation = null;\n };\n /**\r\n * Destroy and clean up subscribers to this `MotionValue`.\r\n *\r\n * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically\r\n * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually\r\n * created a `MotionValue` via the `motionValue` function.\r\n *\r\n * @public\r\n */\n\n\n MotionValue.prototype.destroy = function () {\n this.updateSubscribers && this.updateSubscribers.clear();\n this.renderSubscribers && this.renderSubscribers.clear();\n this.parent && this.parent.removeChild(this);\n this.stop();\n };\n\n return MotionValue;\n}();\n/**\r\n * @internal\r\n */\n\n\nfunction motionValue(init, opts) {\n return new MotionValue(init, opts);\n}\n/**\r\n * Creates a constant value over the lifecycle of a component.\r\n *\r\n * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer\r\n * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`\r\n * you can ensure that initialisers don't execute twice or more.\r\n */\n\n\nfunction useConstant(init) {\n var ref = useRef(null);\n\n if (ref.current === null) {\n ref.current = init();\n }\n\n return ref.current;\n}\n\nvar isMotionValue = function isMotionValue(value) {\n return value instanceof MotionValue;\n}; // Creating a styler factory for the `onUpdate` prop allows all values\n// to fire and the `onUpdate` prop will only fire once per frame\n\n\nvar updateStyler = createStylerFactory({\n onRead: function onRead() {\n return null;\n },\n onRender: function onRender(state, _a) {\n var onUpdate = _a.onUpdate;\n return onUpdate(state);\n }\n});\n\nvar MotionValuesMap =\n/** @class */\nfunction () {\n function MotionValuesMap() {\n this.hasMounted = false;\n this.values = new Map();\n this.unsubscribers = new Map();\n }\n\n MotionValuesMap.prototype.has = function (key) {\n return this.values.has(key);\n };\n\n MotionValuesMap.prototype.set = function (key, value) {\n this.values.set(key, value);\n\n if (this.hasMounted) {\n this.bindValueToOutput(key, value);\n }\n };\n\n MotionValuesMap.prototype.get = function (key, defaultValue) {\n var value = this.values.get(key);\n\n if (value === undefined && defaultValue !== undefined) {\n value = new MotionValue(defaultValue);\n this.set(key, value);\n }\n\n return value;\n };\n\n MotionValuesMap.prototype.forEach = function (callback) {\n return this.values.forEach(callback);\n };\n\n MotionValuesMap.prototype.bindValueToOutput = function (key, value) {\n var _this = this;\n\n var onRender = function onRender(v) {\n return _this.output && _this.output(key, v);\n };\n\n var unsubscribeOnRender = value.onRenderRequest(onRender);\n\n var onChange = function onChange(v) {\n _this.onUpdate && _this.onUpdate.set(key, v);\n };\n\n var unsubscribeOnChange = value.onChange(onChange);\n\n if (this.unsubscribers.has(key)) {\n this.unsubscribers.get(key)();\n }\n\n this.unsubscribers.set(key, function () {\n unsubscribeOnRender();\n unsubscribeOnChange();\n });\n };\n\n MotionValuesMap.prototype.setOnUpdate = function (onUpdate) {\n this.onUpdate = undefined;\n\n if (onUpdate) {\n this.onUpdate = updateStyler({\n onUpdate: onUpdate\n });\n }\n };\n\n MotionValuesMap.prototype.setTransformTemplate = function (transformTemplate) {\n if (this.transformTemplate !== transformTemplate) {\n this.transformTemplate = transformTemplate;\n this.updateTransformTemplate();\n }\n };\n\n MotionValuesMap.prototype.getTransformTemplate = function () {\n return this.transformTemplate;\n };\n\n MotionValuesMap.prototype.updateTransformTemplate = function () {\n if (this.output) {\n this.output(\"transform\", this.transformTemplate);\n }\n };\n\n MotionValuesMap.prototype.mount = function (output) {\n var _this = this;\n\n this.hasMounted = true;\n if (output) this.output = output;\n this.values.forEach(function (value, key) {\n return _this.bindValueToOutput(key, value);\n });\n this.updateTransformTemplate();\n };\n\n MotionValuesMap.prototype.unmount = function () {\n var _this = this;\n\n this.values.forEach(function (_value, key) {\n var unsubscribe = _this.unsubscribers.get(key);\n\n unsubscribe && unsubscribe();\n });\n };\n\n return MotionValuesMap;\n}();\n\nvar specialMotionValueProps = new Set([\"dragOriginX\", \"dragOriginY\"]);\n\nvar useMotionValues = function useMotionValues(props) {\n var motionValues = useConstant(function () {\n var map = new MotionValuesMap();\n /**\r\n * Loop through every prop and add any detected `MotionValue`s. This is SVG-specific\r\n * code that should be extracted, perhaps considered hollistically with `useMotionStyles`.\r\n *\r\n * \r\n */\n\n for (var key in props) {\n if (isMotionValue(props[key]) && !specialMotionValueProps.has(key)) {\n map.set(key, props[key]);\n }\n }\n\n return map;\n });\n motionValues.setOnUpdate(props.onUpdate);\n motionValues.setTransformTemplate(props.transformTemplate);\n return motionValues;\n};\n\nvar session = null;\nvar syncRenderSession = {\n isOpen: function isOpen() {\n return session !== null;\n },\n open: function open() {\n invariant(!session, \"Sync render session already open\");\n session = [];\n },\n flush: function flush() {\n invariant(session !== null, \"No sync render session found\");\n session && session.forEach(function (styler) {\n return styler.render();\n });\n session = null;\n },\n push: function push(styler) {\n invariant(session !== null, \"No sync render session found\");\n session && session.push(styler);\n }\n};\n/**\r\n * `useEffect` gets resolved bottom-up. We defer some optional functionality to child\r\n * components, so to ensure everything runs correctly we export the ref-binding logic\r\n * to a new component rather than in `useMotionValues`.\r\n */\n\nvar MountComponent = function MountComponent(_a) {\n var ref = _a.innerRef,\n values = _a.values,\n isStatic = _a.isStatic;\n useEffect(function () {\n invariant(ref.current instanceof Element, \"No `ref` found. Ensure components created with `motion.custom` forward refs using `React.forwardRef`\");\n var domStyler = styler(ref.current, {\n preparseOutput: false,\n enableHardwareAcceleration: !isStatic\n });\n values.mount(function (key, value) {\n domStyler.set(key, value);\n\n if (syncRenderSession.isOpen()) {\n syncRenderSession.push(domStyler);\n }\n });\n return function () {\n return values.unmount();\n };\n }, []);\n return null;\n};\n\nvar Mount = memo(MountComponent);\n\nvar createValueResolver = function createValueResolver(resolver) {\n return function (values) {\n var resolvedValues = {};\n values.forEach(function (value, key) {\n return resolvedValues[key] = resolver(value);\n });\n return resolvedValues;\n };\n};\n\nvar resolveCurrent = createValueResolver(function (value) {\n return value.get();\n});\nvar transformOriginProps = new Set([\"originX\", \"originY\", \"originZ\"]);\n\nvar isTransformOriginProp = function isTransformOriginProp(key) {\n return transformOriginProps.has(key);\n};\n\nvar buildStyleAttr = function buildStyleAttr(values, styleProp, isStatic) {\n var motionValueStyles = resolveCurrent(values);\n var transformTemplate = values.getTransformTemplate();\n\n if (transformTemplate) {\n // If `transform` has been manually set as a string, pass that through the template\n // otherwise pass it forward to Stylefire's style property builder\n motionValueStyles.transform = styleProp.transform ? transformTemplate({}, styleProp.transform) : transformTemplate;\n }\n\n return buildStyleProperty(__assign({}, styleProp, motionValueStyles), !isStatic);\n};\n\nvar useMotionStyles = function useMotionStyles(values, styleProp, isStatic, transformValues) {\n if (styleProp === void 0) {\n styleProp = {};\n }\n\n var style = {};\n var prevMotionStyles = useRef({}).current;\n\n for (var key in styleProp) {\n var thisStyle = styleProp[key];\n\n if (isMotionValue(thisStyle)) {\n // If this is a motion value, add it to our MotionValuesMap\n values.set(key, thisStyle);\n } else if (!isStatic && (isTransformProp(key) || isTransformOriginProp(key))) {\n // Or if it's a transform prop, create a motion value (or update an existing one)\n // to ensure Stylefire can reconcile all the transform values together.\n // A further iteration on this would be to create a single styler per component that gets\n // used in the DOM renderer's buildStyleAttr *and* animations, then we would only\n // have to convert animating values to `MotionValues` (we could probably remove this entire function).\n // The only architectural consideration is to allow Stylefire to have elements mounted after\n // a styler is created.\n if (!values.has(key)) {\n // If it doesn't exist as a motion value, create it\n values.set(key, motionValue(thisStyle));\n } else {\n // Otherwise only update it if it's changed from a previous render\n if (thisStyle !== prevMotionStyles[key]) {\n var value = values.get(key);\n value.set(thisStyle);\n }\n }\n\n prevMotionStyles[key] = thisStyle;\n } else {\n style[key] = thisStyle;\n }\n }\n\n return transformValues ? transformValues(style) : style;\n};\n\nvar isKeyframesTarget = function isKeyframesTarget(v) {\n return Array.isArray(v);\n};\n\nvar isCustomValue = function isCustomValue(v) {\n return Boolean(v && typeof v === \"object\" && v.mix && v.toValue);\n};\n\nvar resolveFinalValueInKeyframes = function resolveFinalValueInKeyframes(v) {\n // TODO maybe throw if v.length - 1 is placeholder token?\n return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;\n};\n\nvar auto = {\n test: function test(v) {\n return v === \"auto\";\n },\n parse: function parse(v) {\n return v;\n }\n};\nvar dimensionTypes = [number, px, percent, degrees, vw, vh, auto];\nvar valueTypes = dimensionTypes.concat([color, complex]);\n\nvar testValueType = function testValueType(v) {\n return function (type) {\n return type.test(v);\n };\n};\n\nvar getDimensionValueType = function getDimensionValueType(v) {\n return dimensionTypes.find(testValueType(v));\n};\n\nvar getValueType = function getValueType(v) {\n return valueTypes.find(testValueType(v));\n};\n\nvar underDampedSpring = function underDampedSpring() {\n return {\n type: \"spring\",\n stiffness: 500,\n damping: 25,\n restDelta: 0.5,\n restSpeed: 10\n };\n};\n\nvar overDampedSpring = function overDampedSpring(to) {\n return {\n type: \"spring\",\n stiffness: 700,\n damping: to === 0 ? 100 : 35\n };\n};\n\nvar linearTween = function linearTween() {\n return {\n ease: \"linear\",\n duration: 0.3\n };\n};\n\nvar keyframes = function keyframes(values) {\n return {\n type: \"keyframes\",\n duration: 0.8,\n values: values\n };\n};\n\nvar defaultTransitions = {\n x: underDampedSpring,\n y: underDampedSpring,\n z: underDampedSpring,\n rotate: underDampedSpring,\n rotateX: underDampedSpring,\n rotateY: underDampedSpring,\n rotateZ: underDampedSpring,\n scaleX: overDampedSpring,\n scaleY: overDampedSpring,\n scale: overDampedSpring,\n opacity: linearTween,\n backgroundColor: linearTween,\n color: linearTween,\n \"default\": overDampedSpring\n};\n\nvar getDefaultTransition = function getDefaultTransition(valueKey, to) {\n var transitionFactory;\n\n if (isKeyframesTarget(to)) {\n transitionFactory = keyframes;\n } else {\n transitionFactory = defaultTransitions[valueKey] || defaultTransitions[\"default\"];\n }\n\n return __assign({\n to: to\n }, transitionFactory(to));\n};\n/**\r\n * A Popmotion action that accepts a single `to` prop. When it starts, it immediately\r\n * updates with `to` and then completes. By using this we can compose instant transitions\r\n * in with the same logic that applies `delay` or returns a `Promise` etc.\r\n *\r\n * Accepting `duration` is a little bit of a hack that simply defers the completetion of\r\n * the animation until after the duration finishes. This is for situations when you're **only**\r\n * animating non-animatable values and then setting something on `transitionEnd`. Really\r\n * you want this to fire after the \"animation\" finishes, rather than instantly.\r\n *\r\n * ```\r\n * animate={{\r\n * display: 'block',\r\n * transitionEnd: { display: 'none' }\r\n * }}\r\n * ```\r\n */\n\n\nvar just = function just(_a) {\n var to = _a.to,\n duration = _a.duration;\n return action(function (_a) {\n var update = _a.update,\n complete = _a.complete;\n update(to);\n duration ? delay(duration).start({\n complete: complete\n }) : complete();\n });\n};\n\nvar easingDefinitionToFunction = function easingDefinitionToFunction(definition) {\n if (Array.isArray(definition)) {\n // If cubic bezier definition, create bezier curve\n invariant(definition.length === 4, \"Cubic bezier arrays must contain four numerical values.\");\n var x1 = definition[0],\n y1 = definition[1],\n x2 = definition[2],\n y2 = definition[3];\n return cubicBezier(x1, y1, x2, y2);\n } else if (typeof definition === \"string\") {\n // Else lookup from table\n invariant(easingLookup[definition] !== undefined, \"Invalid easing type '\" + definition + \"'\");\n return easingLookup[definition];\n }\n\n return definition;\n};\n\nvar isEasingArray = function isEasingArray(ease) {\n return Array.isArray(ease) && typeof ease[0] !== \"number\";\n};\n\nvar isDurationAnimation = function isDurationAnimation(v) {\n return v.hasOwnProperty(\"duration\") || v.hasOwnProperty(\"repeatDelay\");\n};\n/**\r\n * Check if a value is animatable. Examples:\r\n *\r\n * ✅: 100, \"100px\", \"#fff\"\r\n * ❌: \"block\", \"url(2.jpg)\"\r\n * @param value\r\n *\r\n * @internal\r\n */\n\n\nvar isAnimatable = function isAnimatable(key, value) {\n // If the list of keys tat might be non-animatable grows, replace with Set\n if (key === \"zIndex\") return false; // If it's a number or a keyframes array, we can animate it. We might at some point\n // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,\n // but for now lets leave it like this for performance reasons\n\n if (typeof value === \"number\" || Array.isArray(value)) return true;\n\n if (typeof value === \"string\" && // It's animatable if we have a string\n complex.test(value) && // And it contains numbers and/or colors\n !value.startsWith(\"url(\") // Unless it starts with \"url(\"\n ) {\n return true;\n }\n\n return false;\n};\n/**\r\n * Converts seconds to milliseconds\r\n *\r\n * @param seconds - Time in seconds.\r\n * @return milliseconds - Converted time in milliseconds.\r\n */\n\n\nvar secondsToMilliseconds = function secondsToMilliseconds(seconds) {\n return seconds * 1000;\n};\n\nvar transitions = {\n tween: tween,\n spring: spring,\n keyframes: keyframes$1,\n inertia: inertia,\n just: just\n};\nvar transitionOptionParser = {\n tween: function tween(opts) {\n if (opts.ease) {\n var ease = isEasingArray(opts.ease) ? opts.ease[0] : opts.ease;\n opts.ease = easingDefinitionToFunction(ease);\n }\n\n return opts;\n },\n keyframes: function keyframes(_a) {\n var from = _a.from,\n to = _a.to,\n velocity = _a.velocity,\n opts = __rest(_a, [\"from\", \"to\", \"velocity\"]);\n\n if (opts.values && opts.values[0] === null) {\n var values = opts.values.slice();\n values[0] = from;\n opts.values = values;\n }\n\n if (opts.ease) {\n opts.easings = isEasingArray(opts.ease) ? opts.ease.map(easingDefinitionToFunction) : easingDefinitionToFunction(opts.ease);\n }\n\n opts.ease = linear;\n return opts;\n }\n};\n\nvar isTransitionDefined = function isTransitionDefined(_a) {\n var when = _a.when,\n delay = _a.delay,\n delayChildren = _a.delayChildren,\n staggerChildren = _a.staggerChildren,\n staggerDirection = _a.staggerDirection,\n transition = __rest(_a, [\"when\", \"delay\", \"delayChildren\", \"staggerChildren\", \"staggerDirection\"]);\n\n return Object.keys(transition).length;\n};\n\nvar getTransitionDefinition = function getTransitionDefinition(key, to, transitionDefinition) {\n var delay = transitionDefinition ? transitionDefinition.delay : 0; // If no object, return default transition\n // A better way to handle this would be to deconstruct out all the shared Orchestration props\n // and see if there's any props remaining\n\n if (transitionDefinition === undefined || !isTransitionDefined(transitionDefinition)) {\n return __assign({\n delay: delay\n }, getDefaultTransition(key, to));\n }\n\n var valueTransitionDefinition = transitionDefinition[key] || transitionDefinition[\"default\"] || transitionDefinition;\n\n if (valueTransitionDefinition.type === false) {\n return {\n delay: valueTransitionDefinition.hasOwnProperty(\"delay\") ? valueTransitionDefinition.delay : delay,\n to: isKeyframesTarget(to) ? to[to.length - 1] : to,\n type: \"just\"\n };\n } else if (isKeyframesTarget(to)) {\n return __assign({\n values: to,\n duration: 0.8,\n delay: delay,\n ease: \"linear\"\n }, valueTransitionDefinition, {\n // This animation must be keyframes if we're animating through an array\n type: \"keyframes\"\n });\n } else {\n return __assign({\n type: \"tween\",\n to: to,\n delay: delay\n }, valueTransitionDefinition);\n }\n};\n\nvar preprocessOptions = function preprocessOptions(type, opts) {\n return transitionOptionParser[type] ? transitionOptionParser[type](opts) : opts;\n};\n\nvar getAnimation = function getAnimation(key, value, target, transition) {\n var origin = value.get();\n var isOriginAnimatable = isAnimatable(key, origin);\n var isTargetAnimatable = isAnimatable(key, target); // TODO we could probably improve this check to ensure both values are of the same type -\n // for instance 100 to #fff. This might live better in Popmotion.\n\n warning(isOriginAnimatable === isTargetAnimatable, \"You are trying to animate \" + key + \" from \\\"\" + origin + \"\\\" to \" + target + \". \\\"\" + origin + \"\\\" is not an animatable value - to enable this animation set \" + origin + \" to a value animatable to \" + target + \" via the `style` property.\"); // Parse the `transition` prop and return options for the Popmotion animation\n\n var _a = getTransitionDefinition(key, target, transition),\n _b = _a.type,\n type = _b === void 0 ? \"tween\" : _b,\n transitionDefinition = __rest(_a, [\"type\"]); // If this is an animatable pair of values, return an animation, otherwise use `just`\n\n\n var actionFactory = isOriginAnimatable && isTargetAnimatable ? transitions[type] : just;\n var opts = preprocessOptions(type, __assign({\n from: origin,\n velocity: value.getVelocity()\n }, transitionDefinition)); // Convert duration from Framer Motion's seconds into Popmotion's milliseconds\n\n if (isDurationAnimation(opts)) {\n if (opts.duration) {\n opts.duration = secondsToMilliseconds(opts.duration);\n }\n\n if (opts.repeatDelay) {\n opts.repeatDelay = secondsToMilliseconds(opts.repeatDelay);\n }\n }\n\n return [actionFactory, opts];\n};\n/**\r\n * Start animation on a value. This function completely encapsulates Popmotion-specific logic.\r\n *\r\n * @internal\r\n */\n\n\nfunction startAnimation(key, value, target, _a) {\n var _b = _a.delay,\n delay$1 = _b === void 0 ? 0 : _b,\n transition = __rest(_a, [\"delay\"]);\n\n return value.start(function (complete) {\n var activeAnimation;\n\n var _a = getAnimation(key, value, target, transition),\n animationFactory = _a[0],\n _b = _a[1],\n valueDelay = _b.delay,\n options = __rest(_b, [\"delay\"]);\n\n if (valueDelay !== undefined) {\n delay$1 = valueDelay;\n }\n\n var animate = function animate() {\n var animation = animationFactory(options); // Bind animation opts to animation\n\n activeAnimation = animation.start({\n update: function update(v) {\n return value.set(v);\n },\n complete: complete\n });\n }; // If we're delaying this animation, only resolve it **after** the delay to\n // ensure the value's resolve velocity is up-to-date.\n\n\n if (delay$1) {\n activeAnimation = delay(secondsToMilliseconds(delay$1)).start({\n complete: animate\n });\n } else {\n animate();\n }\n\n return function () {\n if (activeAnimation) activeAnimation.stop();\n };\n });\n}\n/**\r\n * Get the current value of every `MotionValue`\r\n * @param values -\r\n */\n\n\nvar getCurrent = function getCurrent(values) {\n var current = {};\n values.forEach(function (value, key) {\n return current[key] = value.get();\n });\n return current;\n};\n/**\r\n * Get the current velocity of every `MotionValue`\r\n * @param values -\r\n */\n\n\nvar getVelocity = function getVelocity(values) {\n var velocity = {};\n values.forEach(function (value, key) {\n return velocity[key] = value.getVelocity();\n });\n return velocity;\n};\n/**\r\n * Check if value is a function that returns a `Target`. A generic typeof === 'function'\r\n * check, just helps with typing.\r\n * @param p -\r\n */\n\n\nvar isTargetResolver = function isTargetResolver(p) {\n return typeof p === \"function\";\n};\n/**\r\n * Check if value is a list of variant labels\r\n * @param v -\r\n */\n\n\nvar isVariantLabels = function isVariantLabels(v) {\n return Array.isArray(v);\n};\n/**\r\n * Check if value is a numerical string, ie \"100\" or \"100px\"\r\n */\n\n\nvar isNumericalString = function isNumericalString(v) {\n return /^\\d*\\.?\\d+$/.test(v);\n};\n/**\r\n * Control animations for a single component\r\n * @internal\r\n */\n\n\nvar ValueAnimationControls =\n/** @class */\nfunction () {\n function ValueAnimationControls(_a) {\n var _this = this;\n\n var values = _a.values,\n readValueFromSource = _a.readValueFromSource,\n makeTargetAnimatable = _a.makeTargetAnimatable;\n /**\r\n * A reference to the component's latest props. We could probably ditch this in\r\n * favour to a reference to the `custom` prop now we don't send all props through\r\n * to target resolvers.\r\n */\n\n this.props = {};\n /**\r\n * The component's variants, as provided by `variants`\r\n */\n\n this.variants = {};\n /**\r\n * A set of values that we animate back to when a value is cleared of all overrides.\r\n */\n\n this.baseTarget = {};\n /**\r\n * A series of target overrides that we can animate to/from when overrides are set/cleared.\r\n */\n\n this.overrides = [];\n /**\r\n * A series of target overrides as they were originally resolved.\r\n */\n\n this.resolvedOverrides = [];\n /**\r\n * A Set of currently active override indexes\r\n */\n\n this.activeOverrides = new Set();\n /**\r\n * A Set of value keys that are currently animating.\r\n */\n\n this.isAnimating = new Set();\n /**\r\n * Check if the associated `MotionValueMap` has a key with the provided string.\r\n * Pre-bound to the class so we can provide directly to the `filter` in `checkForNewValues`.\r\n */\n\n this.hasValue = function (key) {\n return !_this.values.has(key);\n };\n\n this.values = values;\n this.readValueFromSource = readValueFromSource;\n this.makeTargetAnimatable = makeTargetAnimatable;\n this.values.forEach(function (value, key) {\n return _this.baseTarget[key] = value.get();\n });\n }\n /**\r\n * Set the reference to the component's props.\r\n * @param props -\r\n */\n\n\n ValueAnimationControls.prototype.setProps = function (props) {\n this.props = props;\n };\n /**\r\n * Set the reference to the component's variants\r\n * @param variants -\r\n */\n\n\n ValueAnimationControls.prototype.setVariants = function (variants) {\n if (variants) this.variants = variants;\n };\n /**\r\n * Set the component's default transition\r\n * @param transition -\r\n */\n\n\n ValueAnimationControls.prototype.setDefaultTransition = function (transition) {\n if (transition) this.defaultTransition = transition;\n };\n /**\r\n * Set motion values without animation.\r\n *\r\n * @param definition\r\n * @param isActive -\r\n */\n\n\n ValueAnimationControls.prototype.setValues = function (definition, _a) {\n var _this = this;\n\n var _b = _a === void 0 ? {} : _a,\n _c = _b.isActive,\n isActive = _c === void 0 ? new Set() : _c,\n priority = _b.priority;\n\n var _d = this.resolveVariant(definition),\n target = _d.target,\n transitionEnd = _d.transitionEnd;\n\n target = this.transformValues(__assign({}, target, transitionEnd));\n return Object.keys(target).forEach(function (key) {\n if (isActive.has(key)) return;\n isActive.add(key);\n\n if (target) {\n var targetValue = resolveFinalValueInKeyframes(target[key]);\n\n if (_this.values.has(key)) {\n var value = _this.values.get(key);\n\n value && value.set(targetValue);\n } else {\n _this.values.set(key, motionValue(targetValue));\n }\n\n if (!priority) _this.baseTarget[key] = targetValue;\n }\n });\n };\n /**\r\n * Allows `transformValues` to be set by a component that allows us to\r\n * transform the values in a given `Target`. This allows Framer Library\r\n * to extend Framer Motion to animate `Color` variables etc. Currently we have\r\n * to manually support these extended types here in Framer Motion.\r\n *\r\n * @param values -\r\n */\n\n\n ValueAnimationControls.prototype.transformValues = function (values) {\n var transformValues = this.props.transformValues;\n return transformValues ? transformValues(values) : values;\n };\n /**\r\n * Check a `Target` for new values we haven't animated yet, and add them\r\n * to the `MotionValueMap`.\r\n *\r\n * Currently there's functionality here that is DOM-specific, we should allow\r\n * this functionality to be injected by the factory that creates DOM-specific\r\n * components.\r\n *\r\n * @param target -\r\n */\n\n\n ValueAnimationControls.prototype.checkForNewValues = function (target) {\n var newValueKeys = Object.keys(target).filter(this.hasValue);\n var numNewValues = newValueKeys.length;\n if (!numNewValues) return;\n\n for (var i = 0; i < numNewValues; i++) {\n var key = newValueKeys[i];\n var targetValue = target[key];\n var value = null; // If this is a keyframes value, we can attempt to use the first value in the\n // array as that's going to be the first value of the animation anyway\n\n if (Array.isArray(targetValue)) {\n value = targetValue[0];\n } // If it isn't a keyframes or the first keyframes value was set as `null`, read the\n // value from the DOM. It might be worth investigating whether to check props (for SVG)\n // or props.style (for HTML) if the value exists there before attempting to read.\n\n\n if (value === null) {\n value = this.readValueFromSource(key);\n invariant(value !== null, \"No initial value for \\\"\" + key + \"\\\" can be inferred. Ensure an initial value for \\\"\" + key + \"\\\" is defined on the component.\");\n }\n\n if (typeof value === \"string\" && isNumericalString(value)) {\n // If this is a number read as a string, ie \"0\" or \"200\", convert it to a number\n value = parseFloat(value);\n } else if (!getValueType(value) && complex.test(targetValue)) {\n // If value is not recognised as animatable, ie \"none\", create an animatable version origin based on the target\n value = complex.getAnimatableNone(targetValue);\n }\n\n this.values.set(key, motionValue(value));\n this.baseTarget[key] = value;\n }\n };\n /**\r\n * Resolve a variant from its label or resolver into an actual `Target` we can animate to.\r\n * @param variant -\r\n */\n\n\n ValueAnimationControls.prototype.resolveVariant = function (variant) {\n if (!variant) {\n return {\n target: undefined,\n transition: undefined,\n transitionEnd: undefined\n };\n }\n\n if (isTargetResolver(variant)) {\n // resolve current and velocity\n variant = variant(this.props.custom, getCurrent(this.values), getVelocity(this.values));\n }\n\n var _a = variant.transition,\n transition = _a === void 0 ? this.defaultTransition : _a,\n transitionEnd = variant.transitionEnd,\n target = __rest(variant, [\"transition\", \"transitionEnd\"]);\n\n return {\n transition: transition,\n transitionEnd: transitionEnd,\n target: target\n };\n };\n /**\r\n * Get the highest active override priority index\r\n */\n\n\n ValueAnimationControls.prototype.getHighestPriority = function () {\n if (!this.activeOverrides.size) return 0;\n return Math.max.apply(Math, Array.from(this.activeOverrides));\n };\n /**\r\n * Set an override. We add this layer of indirection so if, for instance, a tap gesture\r\n * starts and overrides a hover gesture, when we clear the tap gesture and fallback to the\r\n * hover gesture, if that hover gesture has changed in the meantime we can go to that rather\r\n * than the one that was resolved when the hover gesture animation started.\r\n *\r\n * @param definition -\r\n * @param overrideIndex -\r\n */\n\n\n ValueAnimationControls.prototype.setOverride = function (definition, overrideIndex) {\n this.overrides[overrideIndex] = definition;\n\n if (this.children) {\n this.children.forEach(function (child) {\n return child.setOverride(definition, overrideIndex);\n });\n }\n };\n /**\r\n * Start an override animation.\r\n * @param overrideIndex -\r\n */\n\n\n ValueAnimationControls.prototype.startOverride = function (overrideIndex) {\n var override = this.overrides[overrideIndex];\n\n if (override) {\n return this.start(override, {\n priority: overrideIndex\n });\n }\n };\n /**\r\n * Clear an override. We check every value we animated to in this override to see if\r\n * its present on any lower-priority overrides. If not, we animate it back to its base target.\r\n * @param overrideIndex -\r\n */\n\n\n ValueAnimationControls.prototype.clearOverride = function (overrideIndex) {\n var _this = this;\n\n if (this.children) {\n this.children.forEach(function (child) {\n return child.clearOverride(overrideIndex);\n });\n }\n\n var override = this.overrides[overrideIndex];\n if (!override) return;\n this.activeOverrides[\"delete\"](overrideIndex);\n var highest = this.getHighestPriority();\n this.resetIsAnimating();\n\n if (highest) {\n var highestOverride = this.overrides[highest];\n highestOverride && this.startOverride(highest);\n } // Figure out which remaining values were affected by the override and animate those\n\n\n var overrideTarget = this.resolvedOverrides[overrideIndex];\n if (!overrideTarget) return;\n var remainingValues = {};\n\n for (var key in this.baseTarget) {\n if (overrideTarget[key] !== undefined) {\n remainingValues[key] = this.baseTarget[key];\n }\n }\n\n this.onStart();\n this.animate(remainingValues).then(function () {\n return _this.onComplete();\n });\n };\n /**\r\n * Apply a target/variant without any animation\r\n */\n\n\n ValueAnimationControls.prototype.apply = function (definition) {\n if (Array.isArray(definition)) {\n return this.applyVariantLabels(definition);\n } else if (typeof definition === \"string\") {\n return this.applyVariantLabels([definition]);\n } else {\n this.setValues(definition);\n }\n };\n /**\r\n * Apply variant labels without animation\r\n */\n\n\n ValueAnimationControls.prototype.applyVariantLabels = function (variantLabelList) {\n var _this = this;\n\n var isActive = new Set();\n var reversedList = variantLabelList.slice().reverse();\n reversedList.forEach(function (key) {\n var _a = _this.resolveVariant(_this.variants[key]),\n target = _a.target,\n transitionEnd = _a.transitionEnd;\n\n if (transitionEnd) {\n _this.setValues(transitionEnd, {\n isActive: isActive\n });\n }\n\n if (target) {\n _this.setValues(target, {\n isActive: isActive\n });\n }\n\n if (_this.children && _this.children.size) {\n _this.children.forEach(function (child) {\n return child.applyVariantLabels(variantLabelList);\n });\n }\n });\n };\n\n ValueAnimationControls.prototype.start = function (definition, opts) {\n var _this = this;\n\n if (opts === void 0) {\n opts = {};\n }\n\n if (opts.priority) {\n this.activeOverrides.add(opts.priority);\n }\n\n this.resetIsAnimating(opts.priority);\n var animation;\n\n if (isVariantLabels(definition)) {\n animation = this.animateVariantLabels(definition, opts);\n } else if (typeof definition === \"string\") {\n animation = this.animateVariant(definition, opts);\n } else {\n animation = this.animate(definition, opts);\n }\n\n this.onStart();\n return animation.then(function () {\n return _this.onComplete();\n });\n };\n\n ValueAnimationControls.prototype.animate = function (animationDefinition, _a) {\n var _this = this;\n\n var _b = _a === void 0 ? {} : _a,\n _c = _b.delay,\n delay = _c === void 0 ? 0 : _c,\n _d = _b.priority,\n priority = _d === void 0 ? 0 : _d,\n transitionOverride = _b.transitionOverride;\n\n var _e = this.resolveVariant(animationDefinition),\n target = _e.target,\n transition = _e.transition,\n transitionEnd = _e.transitionEnd;\n\n if (transitionOverride) {\n transition = transitionOverride;\n }\n\n if (!target) return Promise.resolve();\n target = this.transformValues(target);\n\n if (transitionEnd) {\n transitionEnd = this.transformValues(transitionEnd);\n }\n\n this.checkForNewValues(target);\n\n if (this.makeTargetAnimatable) {\n var animatable = this.makeTargetAnimatable(target, transitionEnd);\n target = animatable.target;\n transitionEnd = animatable.transitionEnd;\n }\n\n if (priority) {\n this.resolvedOverrides[priority] = target;\n }\n\n this.checkForNewValues(target);\n var animations = [];\n\n for (var key in target) {\n var value = this.values.get(key);\n if (!value || !target || target[key] === undefined) continue;\n var valueTarget = target[key];\n\n if (!priority) {\n this.baseTarget[key] = resolveFinalValueInKeyframes(valueTarget);\n }\n\n if (this.isAnimating.has(key)) continue;\n this.isAnimating.add(key);\n animations.push(startAnimation(key, value, valueTarget, __assign({\n delay: delay\n }, transition)));\n }\n\n var allAnimations = Promise.all(animations);\n return transitionEnd ? allAnimations.then(function () {\n _this.setValues(transitionEnd, {\n priority: priority\n });\n }) : allAnimations;\n };\n\n ValueAnimationControls.prototype.animateVariantLabels = function (variantLabels, opts) {\n var _this = this;\n\n var animations = variantLabels.slice().reverse().map(function (label) {\n return _this.animateVariant(label, opts);\n });\n return Promise.all(animations);\n };\n\n ValueAnimationControls.prototype.animateVariant = function (variantLabel, opts) {\n var _this = this;\n\n var when = false;\n var delayChildren = 0;\n var staggerChildren = 0;\n var staggerDirection = 1;\n var priority = opts && opts.priority || 0;\n var variant = this.variants[variantLabel];\n var getAnimations = variant ? function () {\n return _this.animate(variant, opts);\n } : function () {\n return Promise.resolve();\n };\n var getChildrenAnimations = this.children ? function () {\n return _this.animateChildren(variantLabel, delayChildren, staggerChildren, staggerDirection, priority);\n } : function () {\n return Promise.resolve();\n };\n\n if (variant && this.children) {\n var transition = this.resolveVariant(variant).transition;\n\n if (transition) {\n when = transition.when || when;\n delayChildren = transition.delayChildren || delayChildren;\n staggerChildren = transition.staggerChildren || staggerChildren;\n staggerDirection = transition.staggerDirection || staggerDirection;\n }\n }\n\n if (when) {\n var _a = when === \"beforeChildren\" ? [getAnimations, getChildrenAnimations] : [getChildrenAnimations, getAnimations],\n first = _a[0],\n last = _a[1];\n\n return first().then(last);\n } else {\n return Promise.all([getAnimations(), getChildrenAnimations()]);\n }\n };\n\n ValueAnimationControls.prototype.animateChildren = function (variantLabel, delayChildren, staggerChildren, staggerDirection, priority) {\n if (delayChildren === void 0) {\n delayChildren = 0;\n }\n\n if (staggerChildren === void 0) {\n staggerChildren = 0;\n }\n\n if (staggerDirection === void 0) {\n staggerDirection = 1;\n }\n\n if (priority === void 0) {\n priority = 0;\n }\n\n if (!this.children) {\n return Promise.resolve();\n }\n\n var animations = [];\n var maxStaggerDuration = (this.children.size - 1) * staggerChildren;\n var generateStaggerDuration = staggerDirection === 1 ? function (i) {\n return i * staggerChildren;\n } : function (i) {\n return maxStaggerDuration - i * staggerChildren;\n };\n Array.from(this.children).forEach(function (childControls, i) {\n var animation = childControls.animateVariant(variantLabel, {\n priority: priority,\n delay: delayChildren + generateStaggerDuration(i)\n });\n animations.push(animation);\n });\n return Promise.all(animations);\n };\n\n ValueAnimationControls.prototype.onStart = function () {\n var onAnimationStart = this.props.onAnimationStart;\n onAnimationStart && onAnimationStart();\n };\n\n ValueAnimationControls.prototype.onComplete = function () {\n var onAnimationComplete = this.props.onAnimationComplete;\n onAnimationComplete && onAnimationComplete();\n };\n\n ValueAnimationControls.prototype.checkOverrideIsAnimating = function (priority) {\n var numOverrides = this.overrides.length;\n\n for (var i = priority + 1; i < numOverrides; i++) {\n var resolvedOverride = this.resolvedOverrides[i];\n\n if (resolvedOverride) {\n for (var key in resolvedOverride) {\n this.isAnimating.add(key);\n }\n }\n }\n };\n\n ValueAnimationControls.prototype.resetIsAnimating = function (priority) {\n if (priority === void 0) {\n priority = 0;\n }\n\n this.isAnimating.clear(); // If this isn't the highest priority gesture, block the animation\n // of anything that's currently being animated\n\n if (priority < this.getHighestPriority()) {\n this.checkOverrideIsAnimating(priority);\n }\n\n if (this.children) {\n this.children.forEach(function (child) {\n return child.resetIsAnimating(priority);\n });\n }\n };\n\n ValueAnimationControls.prototype.stop = function () {\n this.values.forEach(function (value) {\n return value.stop();\n });\n };\n /**\r\n * Add the controls of a child component.\r\n * @param controls -\r\n */\n\n\n ValueAnimationControls.prototype.addChild = function (controls) {\n if (!this.children) {\n this.children = new Set();\n }\n\n this.children.add(controls); // We set child overrides when `setOverride` is called, but also have to do it here\n // as the first time `setOverride` is called all the children might not have been added yet.\n\n this.overrides.forEach(function (override, i) {\n override && controls.setOverride(override, i);\n });\n };\n\n ValueAnimationControls.prototype.removeChild = function (controls) {\n if (!this.children) {\n return;\n }\n\n this.children[\"delete\"](controls);\n };\n\n ValueAnimationControls.prototype.resetChildren = function () {\n if (this.children) this.children.clear();\n };\n\n return ValueAnimationControls;\n}();\n/**\r\n * Use callback either only on the initial render or on all renders. In concurrent mode\r\n * the \"initial\" render might run multiple times\r\n *\r\n * @param callback - Callback to run\r\n * @param isInitialOnly - Set to `true` to only run on initial render, or `false` for all renders. Defaults to `false`.\r\n *\r\n * @public\r\n */\n\n\nfunction useInitialOrEveryRender(callback, isInitialOnly) {\n if (isInitialOnly === void 0) {\n isInitialOnly = false;\n }\n\n var isInitialRender = useRef(true);\n\n if (!isInitialOnly || isInitialOnly && isInitialRender.current) {\n callback();\n }\n\n isInitialRender.current = false;\n}\n/**\r\n * Control animations on one or more components.\r\n *\r\n * @public\r\n */\n\n\nvar AnimationControls =\n/** @class */\nfunction () {\n function AnimationControls() {\n /**\r\n * Track whether the host component has mounted.\r\n *\r\n * @internal\r\n */\n this.hasMounted = false;\n /**\r\n * Pending animations that are started before a component is mounted.\r\n *\r\n * @internal\r\n */\n\n this.pendingAnimations = [];\n /**\r\n * A collection of linked component animation controls.\r\n *\r\n * @internal\r\n */\n\n this.componentControls = new Set();\n }\n /**\r\n * Set variants on this and all child components.\r\n *\r\n * @param variants - The variants to set\r\n *\r\n * @internal\r\n */\n\n\n AnimationControls.prototype.setVariants = function (variants) {\n this.variants = variants;\n this.componentControls.forEach(function (controls) {\n return controls.setVariants(variants);\n });\n };\n /**\r\n * Set a default transition on this and all child components\r\n *\r\n * @param transition - The default transition to set\r\n *\r\n * @internal\r\n */\n\n\n AnimationControls.prototype.setDefaultTransition = function (transition) {\n this.defaultTransition = transition;\n this.componentControls.forEach(function (controls) {\n return controls.setDefaultTransition(transition);\n });\n };\n /**\r\n * Subscribes a component's animation controls to this.\r\n *\r\n * @param controls - The controls to subscribe\r\n * @returns An unsubscribe function.\r\n *\r\n * @internal\r\n */\n\n\n AnimationControls.prototype.subscribe = function (controls) {\n var _this = this;\n\n this.componentControls.add(controls);\n if (this.variants) controls.setVariants(this.variants);\n if (this.defaultTransition) controls.setDefaultTransition(this.defaultTransition);\n return function () {\n return _this.componentControls[\"delete\"](controls);\n };\n };\n /**\r\n * Starts an animation on all linked components.\r\n *\r\n * @remarks\r\n *\r\n * ```jsx\r\n * controls.start(\"variantLabel\")\r\n * controls.start({\r\n * x: 0,\r\n * transition: { duration: 1 }\r\n * })\r\n * ```\r\n *\r\n * @param definition - Properties or variant label to animate to\r\n * @param transition - Optional `transtion` to apply to a variant\r\n * @returns - A `Promise` that resolves when all animations have completed.\r\n *\r\n * @public\r\n */\n\n\n AnimationControls.prototype.start = function (definition, transitionOverride) {\n var _this = this;\n\n if (this.hasMounted) {\n var animations_1 = [];\n this.componentControls.forEach(function (controls) {\n var animation = controls.start(definition, {\n transitionOverride: transitionOverride\n });\n animations_1.push(animation);\n });\n return Promise.all(animations_1);\n } else {\n return new Promise(function (resolve) {\n _this.pendingAnimations.push({\n animation: [definition, transitionOverride],\n resolve: resolve\n });\n });\n }\n };\n /**\r\n * Instantly set to a set of properties or a variant.\r\n *\r\n * ```jsx\r\n * // With properties\r\n * controls.set({ opacity: 0 })\r\n *\r\n * // With variants\r\n * controls.set(\"hidden\")\r\n * ```\r\n *\r\n * @internalremarks\r\n * We could perform a similar trick to `.start` where this can be called before mount\r\n * and we maintain a list of of pending actions that get applied on mount. But the\r\n * expectation of `set` is that it happens synchronously and this would be difficult\r\n * to do before any children have even attached themselves. It's also poor practise\r\n * and we should discourage render-synchronous `.start` calls rather than lean into this.\r\n *\r\n * @public\r\n */\n\n\n AnimationControls.prototype.set = function (definition) {\n invariant(this.hasMounted, \"controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.\");\n return this.componentControls.forEach(function (controls) {\n return controls.apply(definition);\n });\n };\n /**\r\n * Stops animations on all linked components.\r\n *\r\n * ```jsx\r\n * controls.stop()\r\n * ```\r\n *\r\n * @public\r\n */\n\n\n AnimationControls.prototype.stop = function () {\n this.componentControls.forEach(function (controls) {\n return controls.stop();\n });\n };\n /**\r\n * Initialises the animation controls.\r\n *\r\n * @internal\r\n */\n\n\n AnimationControls.prototype.mount = function () {\n var _this = this;\n\n this.hasMounted = true;\n this.pendingAnimations.forEach(function (_a) {\n var animation = _a.animation,\n resolve = _a.resolve;\n return _this.start.apply(_this, animation).then(resolve);\n });\n };\n /**\r\n * Stops all child animations when the host component unmounts.\r\n *\r\n * @internal\r\n */\n\n\n AnimationControls.prototype.unmount = function () {\n this.hasMounted = false;\n this.stop();\n };\n\n return AnimationControls;\n}();\n/**\r\n * @internal\r\n */\n\n\nvar animationControls = function animationControls() {\n return new AnimationControls();\n};\n/**\r\n * @internal\r\n */\n\n\nvar MotionContext = createContext({\n \"static\": false\n});\n\nvar isVariantLabel = function isVariantLabel(v) {\n return typeof v === \"string\" || Array.isArray(v);\n};\n\nvar isAnimationControls = function isAnimationControls(v) {\n return v instanceof AnimationControls;\n};\n/**\r\n * Set up the context for children motion components.\r\n *\r\n * We also use this opportunity to apply `initial` values\r\n */\n\n\nvar useMotionContext = function useMotionContext(parentContext, controls, values, isStatic, _a) {\n if (isStatic === void 0) {\n isStatic = false;\n }\n\n var initial = _a.initial,\n animate = _a.animate,\n variants = _a.variants,\n whileTap = _a.whileTap,\n whileHover = _a.whileHover; // Override initial with that from a parent context, if defined\n\n if (parentContext.exitProps && parentContext.exitProps.initial !== undefined) {\n initial = parentContext.exitProps.initial;\n }\n\n var initialState;\n\n if (initial === false && !isAnimationControls(animate)) {\n initialState = animate;\n } else if (typeof initial !== \"boolean\") {\n initialState = initial;\n } // Track mounted status so children can detect whether they were present during their\n // parent's first render\n\n\n var hasMounted = useRef(false); // We propagate this component's ValueAnimationControls *if* we're being provided variants,\n // if we're being used to control variants, or if we're being passed animation controls.\n // Otherwise this component should be \"invisible\" to variant propagation. This is a slight concession\n // to Framer X where every `Frame` is a `motion` component and it might be if we change that in the future\n // that this restriction is removed.\n\n var shouldPropagateControls = variants || isVariantLabel(animate) || isVariantLabel(whileTap) || isVariantLabel(whileHover) || isAnimationControls(animate); // If this component's `initial` prop is a variant label, propagate it. Otherwise pass the parent's.\n\n var targetInitial = isVariantLabel(initialState) ? initialState : parentContext.initial; // If this is a variant tree we need to propagate the `animate` prop in case new children are added after\n // the tree initially animates.\n\n var targetAnimate = isVariantLabel(animate) ? animate : parentContext.animate; // Only allow `initial` to trigger context re-renders if this is a `static` component (ie we're on the Framer canvas)\n // or in another non-animation/interaction environment.\n\n var initialDependency = isStatic ? targetInitial : null; // Only allow `animate` to trigger context re-renders if it's a variant label. If this is an array of\n // variant labels there's probably an optimisation to deep-compare but it might be an over-optimisation.\n // We want to do this as we rely on React's component rendering order each render cycle to determine\n // the new order of any child components for the `staggerChildren` functionality.\n\n var animateDependency = shouldPropagateControls && isVariantLabel(targetAnimate) ? targetAnimate : null; // The context to provide to the child. We `useMemo` because although `controls` and `initial` are\n // unlikely to change, by making the context an object it'll be considered a new value every render.\n // So all child motion components will re-render as a result.\n\n var context = useMemo(function () {\n return {\n controls: shouldPropagateControls ? controls : parentContext.controls,\n initial: targetInitial,\n animate: targetAnimate,\n values: values,\n hasMounted: hasMounted,\n isReducedMotion: parentContext.isReducedMotion\n };\n }, [initialDependency, animateDependency, parentContext.isReducedMotion]); // Update the `static` property every render. This is unlikely to change but also essentially free.\n\n context[\"static\"] = isStatic; // Set initial state. If this is a static component (ie in Framer canvas), respond to updates\n // in `initial`.\n\n useInitialOrEveryRender(function () {\n var initialToApply = initialState || parentContext.initial;\n initialToApply && controls.apply(initialToApply);\n }, !isStatic);\n useEffect(function () {\n hasMounted.current = true;\n }, []);\n return context;\n};\n/**\r\n * Creates an imperative set of controls to trigger animations.\r\n *\r\n * This allows a consolidated, uniform API for animations, to be triggered by other APIs like the `animate` prop, or the gesture handlers.\r\n *\r\n * @param values\r\n * @param props\r\n * @param ref\r\n * @param subscribeToParentControls\r\n *\r\n * @internal\r\n */\n\n\nfunction useValueAnimationControls(config, props, subscribeToParentControls, parentContext) {\n var variants = props.variants,\n transition = props.transition;\n var parentControls = useContext(MotionContext).controls;\n var controls = useConstant(function () {\n return new ValueAnimationControls(config);\n }); // Reset and resubscribe children every render to ensure stagger order is correct\n\n if (!parentContext || !parentContext.exitProps || !parentContext.exitProps.isExiting) {\n controls.resetChildren();\n controls.setProps(props);\n controls.setVariants(variants);\n controls.setDefaultTransition(transition);\n } // We have to subscribe to the parent controls within a useEffect rather than during render,\n // as\n\n\n useEffect(function () {\n if (subscribeToParentControls && parentControls) {\n parentControls.addChild(controls);\n }\n });\n useEffect(function () {\n return function () {\n // Remove reference to onAnimationComplete from controls. All the MotionValues\n // are unsubscribed from this component separately. We let animations run out\n // as they might be animating other components.\n var onAnimationComplete = props.onAnimationComplete,\n unmountProps = __rest(props, [\"onAnimationComplete\"]);\n\n controls.setProps(unmountProps);\n parentControls && parentControls.removeChild(controls);\n };\n }, []);\n return controls;\n}\n\nvar checkShouldInheritVariant = function checkShouldInheritVariant(_a) {\n var animate = _a.animate,\n variants = _a.variants,\n _b = _a.inherit,\n inherit = _b === void 0 ? true : _b;\n return inherit && !!variants && (!animate || animate instanceof AnimationControls);\n};\n/**\r\n * Uses the ref that is passed in, or creates a new one\r\n * @param external - External ref\r\n * @internal\r\n */\n\n\nfunction useExternalRef(externalRef) {\n // We're conditionally calling `useRef` here which is sort of naughty as hooks\n // shouldn't be called conditionally. However, Framer Motion will break if this\n // condition changes anyway. It might be possible to use an invariant here to\n // make it explicit, but I expect changing `ref` is not normal behaviour.\n var ref = !externalRef || typeof externalRef === \"function\" ? useRef(null) : externalRef; // Handle `ref` functions. Again, calling the hook conditionally is kind of naughty\n // but `ref` types changing between renders would break Motion anyway. If we receive\n // bug reports about this, we should track the provided ref and throw an invariant\n // rather than move the conditional to inside the useEffect as this will be fired\n // for every Frame component within Framer.\n\n if (externalRef && typeof externalRef === \"function\") {\n useEffect(function () {\n externalRef(ref.current);\n return function () {\n return externalRef(null);\n };\n }, []);\n }\n\n return ref;\n}\n/**\r\n * @internal\r\n */\n\n\nvar createMotionComponent = function createMotionComponent(_a) {\n var getValueControlsConfig = _a.getValueControlsConfig,\n loadFunctionalityComponents = _a.loadFunctionalityComponents,\n renderComponent = _a.renderComponent;\n\n function MotionComponent(props, externalRef) {\n var ref = useExternalRef(externalRef);\n var parentContext = useContext(MotionContext);\n var isStatic = parentContext[\"static\"] || props[\"static\"] || false;\n var values = useMotionValues(props);\n var style = useMotionStyles(values, props.style, isStatic, props.transformValues);\n var shouldInheritVariant = checkShouldInheritVariant(props);\n var controlsConfig = useConstant(function () {\n return getValueControlsConfig(ref, values);\n });\n var controls = useValueAnimationControls(controlsConfig, props, shouldInheritVariant, parentContext);\n var context = useMotionContext(parentContext, controls, values, isStatic, props);\n var functionality = isStatic ? null : loadFunctionalityComponents(ref, values, props, parentContext, controls, shouldInheritVariant);\n var renderedComponent = renderComponent(ref, style, values, props, isStatic);\n return createElement(Fragment, null, createElement(MotionContext.Provider, {\n value: context\n }, renderedComponent), createElement(Fragment, null, createElement(Mount, {\n innerRef: ref,\n values: values,\n isStatic: isStatic\n }), functionality));\n }\n\n return forwardRef(MotionComponent);\n};\n/**\r\n * @internal\r\n */\n\n\nvar htmlElements = [\"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\", \"webview\"];\n/**\r\n * @internal\r\n */\n\nvar svgElements = [\"animate\", \"circle\", \"clipPath\", \"defs\", \"desc\", \"ellipse\", \"feBlend\", \"feColorMatrix\", \"feComponentTransfer\", \"feComposite\", \"feConvolveMatrix\", \"feDiffuseLighting\", \"feDisplacementMap\", \"feDistantLight\", \"feDropShadow\", \"feFlood\", \"feFuncA\", \"feFuncB\", \"feFuncG\", \"feFuncR\", \"feGaussianBlur\", \"feImage\", \"feMerge\", \"feMergeNode\", \"feMorphology\", \"feOffset\", \"fePointLight\", \"feSpecularLighting\", \"feSpotLight\", \"feTile\", \"feTurbulence\", \"filter\", \"foreignObject\", \"g\", \"image\", \"line\", \"linearGradient\", \"marker\", \"mask\", \"metadata\", \"path\", \"pattern\", \"polygon\", \"polyline\", \"radialGradient\", \"rect\", \"stop\", \"svg\", \"switch\", \"symbol\", \"text\", \"textPath\", \"tspan\", \"use\", \"view\"];\n/** @public */\n\nvar Point;\n\n(function (Point) {\n /** @beta */\n Point.subtract = function (a, b) {\n return {\n x: a.x - b.x,\n y: a.y - b.y\n };\n };\n /** @beta */\n\n\n Point.relativeTo = function (idOrElem) {\n var elem;\n\n var getElem = function getElem() {\n // Caching element here could be leaky because of React lifecycle\n if (elem !== undefined) return elem;\n\n if (typeof idOrElem === \"string\") {\n elem = document.getElementById(idOrElem);\n } else {\n elem = idOrElem;\n }\n\n return elem;\n };\n\n return function (_a) {\n var x = _a.x,\n y = _a.y;\n var localElem = getElem();\n if (!localElem) return undefined;\n var rect = localElem.getBoundingClientRect();\n return {\n x: x - rect.left - window.scrollX,\n y: y - rect.top - window.scrollY\n };\n };\n };\n})(Point || (Point = {}));\n/**\r\n * @internal\r\n */\n\n\nvar MotionPluginContext = createContext({\n transformPagePoint: function transformPagePoint(p) {\n return p;\n }\n});\n/**\r\n * @internal\r\n * @internalremarks For now I think this should remain a private API for our own use\r\n * until we can figure out a nicer way of allowing people to add these\r\n */\n\nfunction MotionPlugins(_a) {\n var children = _a.children,\n props = __rest(_a, [\"children\"]);\n\n var pluginContext = useContext(MotionPluginContext);\n var value = useRef(__assign({}, pluginContext)).current; // Mutative to prevent triggering rerenders in all listening\n // components every time this component renders\n\n for (var key in props) {\n value[key] = props[key];\n }\n\n return createElement(MotionPluginContext.Provider, {\n value: value\n }, children);\n}\n\nvar isViewportScrollBlocked = false;\nvar isBrowser = typeof window !== \"undefined\";\n\nif (isBrowser) {\n document.addEventListener(\"touchmove\", function (event) {\n if (isViewportScrollBlocked) {\n event.preventDefault();\n }\n }, {\n passive: false\n });\n}\n\nvar blockViewportScroll = function blockViewportScroll() {\n return isViewportScrollBlocked = true;\n};\n\nvar unblockViewportScroll = function unblockViewportScroll() {\n return isViewportScrollBlocked = false;\n};\n\nfunction isMouseEvent(event) {\n // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.\n if (typeof PointerEvent !== \"undefined\" && event instanceof PointerEvent) {\n return !!(event.pointerType === \"mouse\");\n }\n\n return event instanceof MouseEvent;\n}\n\nfunction isTouchEvent(event) {\n var hasTouches = !!event.touches;\n return hasTouches;\n}\n\nfunction useLatest(value) {\n var ref = useRef(value);\n useEffect(function () {\n ref.current = value;\n });\n return ref;\n}\n\nfunction useUnmountEffect(callback) {\n return useEffect(function () {\n return function () {\n return callback();\n };\n }, []);\n}\n\nfunction addDomEvent(target, eventName, handler, options) {\n if (!handler) return;\n target.addEventListener(eventName, handler, options);\n return function () {\n return target.removeEventListener(eventName, handler, options);\n };\n}\n/**\r\n * Attaches an event listener directly to the provided DOM element.\r\n *\r\n * Bypassing React's event system can be desirable, for instance when attaching non-passive\r\n * event handlers.\r\n *\r\n * ```jsx\r\n * const ref = useRef(null)\r\n *\r\n * useDomEvent(ref, 'wheel', onWheel, { passive: false })\r\n *\r\n * return \r\n * ```\r\n *\r\n * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.\r\n * @param eventName - Name of the event you want listen for.\r\n * @param handler - Function to fire when receiving the event.\r\n * @param options - Options to pass to `Event.addEventListener`.\r\n *\r\n * @public\r\n */\n\n\nfunction useDomEvent(ref, eventName, handler, options) {\n useEffect(function () {\n var element = ref.current;\n\n if (handler && element) {\n return addDomEvent(element, eventName, handler, options);\n }\n }, [ref, eventName, handler, options]);\n}\n/**\r\n * Filters out events not attached to the primary pointer (currently left mouse button)\r\n * @param eventHandler\r\n */\n\n\nfunction filterPrimaryPointer(eventHandler) {\n if (!eventHandler) return undefined;\n return function (event) {\n var isMouseEvent = event instanceof MouseEvent;\n var isPrimaryPointer = !isMouseEvent || isMouseEvent && event.button === 0;\n\n if (isPrimaryPointer) {\n eventHandler(event);\n }\n };\n}\n\nvar defaultPagePoint = {\n pageX: 0,\n pageY: 0\n};\n\nfunction pointFromTouch(e) {\n var primaryTouch = e.touches[0] || e.changedTouches[0];\n\n var _a = primaryTouch || defaultPagePoint,\n pageX = _a.pageX,\n pageY = _a.pageY;\n\n return {\n x: pageX,\n y: pageY\n };\n}\n\nfunction pointFromMouse(_a) {\n var _b = _a.pageX,\n pageX = _b === void 0 ? 0 : _b,\n _c = _a.pageY,\n pageY = _c === void 0 ? 0 : _c;\n return {\n x: pageX,\n y: pageY\n };\n}\n\nfunction extractEventInfo(event) {\n return {\n point: isTouchEvent(event) ? pointFromTouch(event) : pointFromMouse(event)\n };\n}\n\nvar wrapHandler = function wrapHandler(handler, shouldFilterPrimaryPointer) {\n if (shouldFilterPrimaryPointer === void 0) {\n shouldFilterPrimaryPointer = false;\n }\n\n if (!handler) return;\n\n var listener = function listener(event) {\n return handler(event, extractEventInfo(event));\n };\n\n return shouldFilterPrimaryPointer ? filterPrimaryPointer(listener) : listener;\n};\n\nvar isBrowser$1 = typeof window !== \"undefined\"; // We check for event support via functions in case they've been mocked by a testing suite.\n\nvar supportsPointerEvents = function supportsPointerEvents() {\n return isBrowser$1 && window.onpointerdown === null;\n};\n\nvar supportsTouchEvents = function supportsTouchEvents() {\n return isBrowser$1 && window.ontouchstart === null;\n};\n\nvar supportsMouseEvents = function supportsMouseEvents() {\n return isBrowser$1 && window.onmousedown === null;\n};\n\nvar mouseEventNames = {\n pointerdown: \"mousedown\",\n pointermove: \"mousemove\",\n pointerup: \"mouseup\",\n pointercancel: \"mousecancel\",\n pointerover: \"mouseover\",\n pointerout: \"mouseout\",\n pointerenter: \"mouseenter\",\n pointerleave: \"mouseleave\"\n};\nvar touchEventNames = {\n pointerdown: \"touchstart\",\n pointermove: \"touchmove\",\n pointerup: \"touchend\",\n pointercancel: \"touchcancel\"\n};\n\nfunction getPointerEventName(name) {\n if (supportsPointerEvents()) {\n return name;\n } else if (supportsTouchEvents()) {\n return touchEventNames[name];\n } else if (supportsMouseEvents()) {\n return mouseEventNames[name];\n }\n\n return name;\n}\n\nfunction addPointerEvent(target, eventName, handler, options) {\n return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === \"pointerdown\"), options);\n}\n\nfunction usePointerEvent(ref, eventName, handler, options) {\n return useDomEvent(ref, getPointerEventName(eventName), wrapHandler(handler, eventName === \"pointerdown\"), options);\n}\n\nfunction startDevicePoint(session) {\n return session.pointHistory[0];\n}\n\nfunction lastDevicePoint(session) {\n return session.pointHistory[session.pointHistory.length - 1];\n}\n\nfunction getVelocity$1(session, timeDelta) {\n var pointHistory = session.pointHistory;\n\n if (pointHistory.length < 2) {\n return {\n x: 0,\n y: 0\n };\n }\n\n var i = pointHistory.length - 1;\n var timestampedPoint = null;\n var lastPoint = lastDevicePoint(session);\n\n while (i >= 0) {\n timestampedPoint = pointHistory[i];\n\n if (lastPoint.timestamp - timestampedPoint.timestamp > secondsToMilliseconds(timeDelta)) {\n break;\n }\n\n i--;\n }\n\n if (!timestampedPoint) {\n return {\n x: 0,\n y: 0\n };\n }\n\n var time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000;\n\n if (time === 0) {\n return {\n x: 0,\n y: 0\n };\n }\n\n var currentVelocity = {\n x: (lastPoint.x - timestampedPoint.x) / time,\n y: (lastPoint.y - timestampedPoint.y) / time\n };\n\n if (currentVelocity.x === Infinity) {\n currentVelocity.x = 0;\n }\n\n if (currentVelocity.y === Infinity) {\n currentVelocity.y = 0;\n }\n\n return currentVelocity;\n}\n/**\r\n *\r\n * @param handlers -\r\n * @param ref -\r\n *\r\n * @internalremarks\r\n * Currently this sets new pan gesture functions every render. The memo route has been explored\r\n * in the past but ultimately we're still creating new functions every render. An optimisation\r\n * to explore is creating the pan gestures and loading them into a `ref`.\r\n *\r\n * @internal\r\n */\n\n\nfunction usePanGesture(_a, ref) {\n var onPan = _a.onPan,\n onPanStart = _a.onPanStart,\n onPanEnd = _a.onPanEnd,\n onPanSessionStart = _a.onPanSessionStart;\n var hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;\n var session = useRef(null);\n var lastMoveEvent = useRef(null);\n var lastMoveEventInfo = useRef(null);\n var transformPagePoint = useContext(MotionPluginContext).transformPagePoint;\n var pointerEventSubscription = useRef(null); // Load the callbacks into mutable state to ensure that even if we don't create a new\n // gesture handler every render, we still reference the latest callbacks (which are almost certain to change per render)\n\n var handlersRef = useLatest({\n onPanSessionStart: onPanSessionStart,\n onPanStart: onPanStart,\n onPan: onPan,\n onPanEnd: onPanEnd\n });\n\n function removePointerEvents() {\n pointerEventSubscription.current && pointerEventSubscription.current();\n pointerEventSubscription.current = null;\n }\n\n function getPanInfo(_a) {\n var point = _a.point;\n var currentPoint = session.current; // TODO: A potential optimisation here that might be a breaking change would be\n // to keep one mutable ref to a point that we update\n\n return {\n point: point,\n delta: Point.subtract(point, lastDevicePoint(currentPoint)),\n offset: Point.subtract(point, startDevicePoint(currentPoint)),\n velocity: getVelocity$1(currentPoint, 0.1)\n };\n }\n\n function transformPoint(info) {\n return {\n point: transformPagePoint(info.point)\n };\n }\n\n function cancelPan() {\n removePointerEvents();\n cancelSync.update(updatePoint);\n unblockViewportScroll();\n }\n\n function updatePoint() {\n if (!session.current || !lastMoveEvent.current || !lastMoveEventInfo.current) {\n warning(false, \"onPointerMove fired without pointer session\");\n cancelPan();\n return;\n }\n\n var info = getPanInfo(lastMoveEventInfo.current);\n var panStarted = session.current.startEvent !== undefined; // Only start panning if the offset is larger than 3 pixels. If we make it\n // any larger than this we'll want to reset the pointer history\n // on the first update to avoid visual snapping to the cursoe.\n\n var distancePastThreshold = distance(info.offset, {\n x: 0,\n y: 0\n }) >= 3;\n if (!panStarted && !distancePastThreshold) return;\n var point = info.point;\n var timestamp = getFrameData().timestamp;\n session.current.pointHistory.push(__assign({}, point, {\n timestamp: timestamp\n }));\n var _a = handlersRef.current,\n onPanStart = _a.onPanStart,\n onPan = _a.onPan;\n\n if (!panStarted) {\n onPanStart && onPanStart(lastMoveEvent.current, info);\n session.current.startEvent = lastMoveEvent.current;\n }\n\n onPan && onPan(lastMoveEvent.current, info);\n }\n\n function onPointerMove(event, info) {\n lastMoveEvent.current = event;\n lastMoveEventInfo.current = transformPoint(info); // Because Safari doesn't trigger mouseup events when it's above a `