1?s.options.decimal+o[1]:\"\",s.options.useGrouping){e=\"\";for(var l=3,h=0,u=0,p=n.length;uwindow.scrollY&&t.paused?(t.paused=!1,setTimeout(function(){return t.start()},t.options.scrollSpyDelay),t.options.scrollSpyOnce&&(t.once=!0)):(window.scrollY>a||s>i)&&!t.paused&&t.reset()}},t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold&&this.options.useEasing){this.finalEndVal=t;var n=this.countDown?1:-1;this.endVal=t+n*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;null!==this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,null==this.finalEndVal&&this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);this.el&&(\"INPUT\"===this.el.tagName?this.el.value=i:\"text\"===this.el.tagName||\"tspan\"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i)},t.prototype.ensureNumber=function(t){return\"number\"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error=\"[CountUp] invalid start or end value: \".concat(t),null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp};","var QueryHandler = require('./QueryHandler');\nvar each = require('./Util').each;\n\n/**\n * Represents a single media query, manages it's state and registered handlers for this query\n *\n * @constructor\n * @param {string} query the media query string\n * @param {boolean} [isUnconditional=false] whether the media query should run regardless of whether the conditions are met. Primarily for helping older browsers deal with mobile-first design\n */\nfunction MediaQuery(query, isUnconditional) {\n this.query = query;\n this.isUnconditional = isUnconditional;\n this.handlers = [];\n this.mql = window.matchMedia(query);\n\n var self = this;\n this.listener = function(mql) {\n // Chrome passes an MediaQueryListEvent object, while other browsers pass MediaQueryList directly\n self.mql = mql.currentTarget || mql;\n self.assess();\n };\n this.mql.addListener(this.listener);\n}\n\nMediaQuery.prototype = {\n\n constuctor : MediaQuery,\n\n /**\n * add a handler for this query, triggering if already active\n *\n * @param {object} handler\n * @param {function} handler.match callback for when query is activated\n * @param {function} [handler.unmatch] callback for when query is deactivated\n * @param {function} [handler.setup] callback for immediate execution when a query handler is registered\n * @param {boolean} [handler.deferSetup=false] should the setup callback be deferred until the first time the handler is matched?\n */\n addHandler : function(handler) {\n var qh = new QueryHandler(handler);\n this.handlers.push(qh);\n\n this.matches() && qh.on();\n },\n\n /**\n * removes the given handler from the collection, and calls it's destroy methods\n *\n * @param {object || function} handler the handler to remove\n */\n removeHandler : function(handler) {\n var handlers = this.handlers;\n each(handlers, function(h, i) {\n if(h.equals(handler)) {\n h.destroy();\n return !handlers.splice(i,1); //remove from array and exit each early\n }\n });\n },\n\n /**\n * Determine whether the media query should be considered a match\n *\n * @return {Boolean} true if media query can be considered a match, false otherwise\n */\n matches : function() {\n return this.mql.matches || this.isUnconditional;\n },\n\n /**\n * Clears all handlers and unbinds events\n */\n clear : function() {\n each(this.handlers, function(handler) {\n handler.destroy();\n });\n this.mql.removeListener(this.listener);\n this.handlers.length = 0; //clear array\n },\n\n /*\n * Assesses the query, turning on all handlers if it matches, turning them off if it doesn't match\n */\n assess : function() {\n var action = this.matches() ? 'on' : 'off';\n\n each(this.handlers, function(handler) {\n handler[action]();\n });\n }\n};\n\nmodule.exports = MediaQuery;\n","var MediaQuery = require('./MediaQuery');\nvar Util = require('./Util');\nvar each = Util.each;\nvar isFunction = Util.isFunction;\nvar isArray = Util.isArray;\n\n/**\n * Allows for registration of query handlers.\n * Manages the query handler's state and is responsible for wiring up browser events\n *\n * @constructor\n */\nfunction MediaQueryDispatch () {\n if(!window.matchMedia) {\n throw new Error('matchMedia not present, legacy browsers require a polyfill');\n }\n\n this.queries = {};\n this.browserIsIncapable = !window.matchMedia('only all').matches;\n}\n\nMediaQueryDispatch.prototype = {\n\n constructor : MediaQueryDispatch,\n\n /**\n * Registers a handler for the given media query\n *\n * @param {string} q the media query\n * @param {object || Array || Function} options either a single query handler object, a function, or an array of query handlers\n * @param {function} options.match fired when query matched\n * @param {function} [options.unmatch] fired when a query is no longer matched\n * @param {function} [options.setup] fired when handler first triggered\n * @param {boolean} [options.deferSetup=false] whether setup should be run immediately or deferred until query is first matched\n * @param {boolean} [shouldDegrade=false] whether this particular media query should always run on incapable browsers\n */\n register : function(q, options, shouldDegrade) {\n var queries = this.queries,\n isUnconditional = shouldDegrade && this.browserIsIncapable;\n\n if(!queries[q]) {\n queries[q] = new MediaQuery(q, isUnconditional);\n }\n\n //normalise to object in an array\n if(isFunction(options)) {\n options = { match : options };\n }\n if(!isArray(options)) {\n options = [options];\n }\n each(options, function(handler) {\n if (isFunction(handler)) {\n handler = { match : handler };\n }\n queries[q].addHandler(handler);\n });\n\n return this;\n },\n\n /**\n * unregisters a query and all it's handlers, or a specific handler for a query\n *\n * @param {string} q the media query to target\n * @param {object || function} [handler] specific handler to unregister\n */\n unregister : function(q, handler) {\n var query = this.queries[q];\n\n if(query) {\n if(handler) {\n query.removeHandler(handler);\n }\n else {\n query.clear();\n delete this.queries[q];\n }\n }\n\n return this;\n }\n};\n\nmodule.exports = MediaQueryDispatch;\n","/**\n * Delegate to handle a media query being matched and unmatched.\n *\n * @param {object} options\n * @param {function} options.match callback for when the media query is matched\n * @param {function} [options.unmatch] callback for when the media query is unmatched\n * @param {function} [options.setup] one-time callback triggered the first time a query is matched\n * @param {boolean} [options.deferSetup=false] should the setup callback be run immediately, rather than first time query is matched?\n * @constructor\n */\nfunction QueryHandler(options) {\n this.options = options;\n !options.deferSetup && this.setup();\n}\n\nQueryHandler.prototype = {\n\n constructor : QueryHandler,\n\n /**\n * coordinates setup of the handler\n *\n * @function\n */\n setup : function() {\n if(this.options.setup) {\n this.options.setup();\n }\n this.initialised = true;\n },\n\n /**\n * coordinates setup and triggering of the handler\n *\n * @function\n */\n on : function() {\n !this.initialised && this.setup();\n this.options.match && this.options.match();\n },\n\n /**\n * coordinates the unmatch event for the handler\n *\n * @function\n */\n off : function() {\n this.options.unmatch && this.options.unmatch();\n },\n\n /**\n * called when a handler is to be destroyed.\n * delegates to the destroy or unmatch callbacks, depending on availability.\n *\n * @function\n */\n destroy : function() {\n this.options.destroy ? this.options.destroy() : this.off();\n },\n\n /**\n * determines equality by reference.\n * if object is supplied compare options, if function, compare match callback\n *\n * @function\n * @param {object || function} [target] the target for comparison\n */\n equals : function(target) {\n return this.options === target || this.options.match === target;\n }\n\n};\n\nmodule.exports = QueryHandler;\n","/**\n * Helper function for iterating over a collection\n *\n * @param collection\n * @param fn\n */\nfunction each(collection, fn) {\n var i = 0,\n length = collection.length,\n cont;\n\n for(i; i < length; i++) {\n cont = fn(collection[i], i);\n if(cont === false) {\n break; //allow early exit\n }\n }\n}\n\n/**\n * Helper function for determining whether target object is an array\n *\n * @param target the object under test\n * @return {Boolean} true if array, false otherwise\n */\nfunction isArray(target) {\n return Object.prototype.toString.apply(target) === '[object Array]';\n}\n\n/**\n * Helper function for determining whether target object is a function\n *\n * @param target the object under test\n * @return {Boolean} true if function, false otherwise\n */\nfunction isFunction(target) {\n return typeof target === 'function';\n}\n\nmodule.exports = {\n isFunction : isFunction,\n isArray : isArray,\n each : each\n};\n","var MediaQueryDispatch = require('./MediaQueryDispatch');\nmodule.exports = new MediaQueryDispatch();\n","'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar tslib = require('tslib');\nvar React = require('react');\nvar heyListen = require('hey-listen');\nvar styleValueTypes = require('style-value-types');\nvar popmotion = require('popmotion');\nvar sync = require('framesync');\n\nfunction _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }\n\nfunction _interopNamespace(e) {\n if (e && e.__esModule) return e;\n var n = Object.create(null);\n if (e) {\n Object.keys(e).forEach(function (k) {\n if (k !== 'default') {\n var d = Object.getOwnPropertyDescriptor(e, k);\n Object.defineProperty(n, k, d.get ? d : {\n enumerable: true,\n get: function () {\n return e[k];\n }\n });\n }\n });\n }\n n['default'] = e;\n return Object.freeze(n);\n}\n\nvar React__namespace = /*#__PURE__*/_interopNamespace(React);\nvar React__default = /*#__PURE__*/_interopDefaultLegacy(React);\nvar sync__default = /*#__PURE__*/_interopDefaultLegacy(sync);\n\nvar createDefinition = function (propNames) { return ({\n isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); },\n}); };\nvar featureDefinitions = {\n measureLayout: createDefinition([\n \"layout\",\n \"layoutId\",\n \"drag\",\n \"_layoutResetTransform\",\n ]),\n animation: createDefinition([\n \"animate\",\n \"exit\",\n \"variants\",\n \"whileHover\",\n \"whileTap\",\n \"whileFocus\",\n \"whileDrag\",\n ]),\n exit: createDefinition([\"exit\"]),\n drag: createDefinition([\"drag\", \"dragControls\"]),\n focus: createDefinition([\"whileFocus\"]),\n hover: createDefinition([\"whileHover\", \"onHoverStart\", \"onHoverEnd\"]),\n tap: createDefinition([\"whileTap\", \"onTap\", \"onTapStart\", \"onTapCancel\"]),\n pan: createDefinition([\n \"onPan\",\n \"onPanStart\",\n \"onPanSessionStart\",\n \"onPanEnd\",\n ]),\n layoutAnimation: createDefinition([\"layout\", \"layoutId\"]),\n};\nfunction loadFeatures(features) {\n for (var key in features) {\n var Component = features[key];\n if (Component !== null)\n featureDefinitions[key].Component = Component;\n }\n}\n\nvar LazyContext = React.createContext({ strict: false });\n\nvar featureNames = Object.keys(featureDefinitions);\nvar numFeatures = featureNames.length;\n/**\n * Load features via renderless components based on the provided MotionProps.\n */\nfunction useFeatures(props, visualElement, preloadedFeatures) {\n var features = [];\n var lazyContext = React.useContext(LazyContext);\n if (!visualElement)\n return null;\n /**\n * If we're in development mode, check to make sure we're not rendering a motion component\n * as a child of LazyMotion, as this will break the file-size benefits of using it.\n */\n if (process.env.NODE_ENV !== \"production\" &&\n preloadedFeatures &&\n lazyContext.strict) {\n heyListen.invariant(false, \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\");\n }\n for (var i = 0; i < numFeatures; i++) {\n var name_1 = featureNames[i];\n var _a = featureDefinitions[name_1], isEnabled = _a.isEnabled, Component = _a.Component;\n /**\n * It might be possible in the future to use this moment to\n * dynamically request functionality. In initial tests this\n * was producing a lot of duplication amongst bundles.\n */\n if (isEnabled(props) && Component) {\n features.push(React__namespace.createElement(Component, tslib.__assign({ key: name_1 }, props, { visualElement: visualElement })));\n }\n }\n return features;\n}\n\n/**\n * @public\n */\nvar MotionConfigContext = React.createContext({\n transformPagePoint: function (p) { return p; },\n isStatic: false,\n});\n\nvar MotionContext = React.createContext({});\nfunction useVisualElementContext() {\n return React.useContext(MotionContext).visualElement;\n}\n\n/**\n * @public\n */\nvar PresenceContext = React.createContext(null);\n\n/**\n * Creates a constant value over the lifecycle of a component.\n *\n * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer\n * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`\n * you can ensure that initialisers don't execute twice or more.\n */\nfunction useConstant(init) {\n var ref = React.useRef(null);\n if (ref.current === null) {\n ref.current = init();\n }\n return ref.current;\n}\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n * const [isPresent, safeToRemove] = usePresence()\n *\n * useEffect(() => {\n * !isPresent && setTimeout(safeToRemove, 1000)\n * }, [isPresent])\n *\n * return
\n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence() {\n var context = React.useContext(PresenceContext);\n if (context === null)\n return [true, null];\n var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;\n // It's safe to call the following hooks conditionally (after an early return) because the context will always\n // either be null or non-null for the lifespan of the component.\n // Replace with useOpaqueId when released in React\n var id = useUniqueId();\n React.useEffect(function () { return register(id); }, []);\n var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n * const isPresent = useIsPresent()\n *\n * useEffect(() => {\n * !isPresent && console.log(\"I've been removed!\")\n * }, [isPresent])\n *\n * return \n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n return isPresent(React.useContext(PresenceContext));\n}\nfunction isPresent(context) {\n return context === null ? true : context.isPresent;\n}\nvar counter = 0;\nvar incrementId = function () { return counter++; };\nvar useUniqueId = function () { return useConstant(incrementId); };\n\n/**\n * @internal\n */\nvar LayoutGroupContext = React.createContext(null);\n\nvar isBrowser = typeof window !== \"undefined\";\n\nvar useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;\n\nfunction useLayoutId(_a) {\n var layoutId = _a.layoutId;\n var layoutGroupId = React.useContext(LayoutGroupContext);\n return layoutGroupId && layoutId !== undefined\n ? layoutGroupId + \"-\" + layoutId\n : layoutId;\n}\nfunction useVisualElement(Component, visualState, props, createVisualElement) {\n var config = React.useContext(MotionConfigContext);\n var lazyContext = React.useContext(LazyContext);\n var parent = useVisualElementContext();\n var presenceContext = React.useContext(PresenceContext);\n var layoutId = useLayoutId(props);\n var visualElementRef = React.useRef(undefined);\n /**\n * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n */\n if (!createVisualElement)\n createVisualElement = lazyContext.renderer;\n if (!visualElementRef.current && createVisualElement) {\n visualElementRef.current = createVisualElement(Component, {\n visualState: visualState,\n parent: parent,\n props: tslib.__assign(tslib.__assign({}, props), { layoutId: layoutId }),\n presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,\n blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,\n });\n }\n var visualElement = visualElementRef.current;\n useIsomorphicLayoutEffect(function () {\n if (!visualElement)\n return;\n visualElement.setProps(tslib.__assign(tslib.__assign(tslib.__assign({}, config), props), { layoutId: layoutId }));\n visualElement.isPresent = isPresent(presenceContext);\n visualElement.isPresenceRoot =\n !parent || parent.presenceId !== (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id);\n /**\n * Fire a render to ensure the latest state is reflected on-screen.\n */\n visualElement.syncRender();\n });\n React.useEffect(function () {\n var _a;\n if (!visualElement)\n return;\n /**\n * In a future refactor we can replace the features-as-components and\n * have this loop through them all firing \"effect\" listeners\n */\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges();\n });\n useIsomorphicLayoutEffect(function () { return function () { return visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount(); }; }, []);\n return visualElement;\n}\n\nfunction isRefObject(ref) {\n return (typeof ref === \"object\" &&\n Object.prototype.hasOwnProperty.call(ref, \"current\"));\n}\n\n/**\n * Creates a ref function that, when called, hydrates the provided\n * external ref and VisualElement.\n */\nfunction useMotionRef(visualState, visualElement, externalRef) {\n return React.useCallback(function (instance) {\n var _a;\n instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));\n if (visualElement) {\n instance\n ? visualElement.mount(instance)\n : visualElement.unmount();\n }\n if (externalRef) {\n if (typeof externalRef === \"function\") {\n externalRef(instance);\n }\n else if (isRefObject(externalRef)) {\n externalRef.current = instance;\n }\n }\n }, \n /**\n * Only pass a new ref callback to React if we've received a visual element\n * factory. Otherwise we'll be mounting/remounting every time externalRef\n * or other dependencies change.\n */\n [visualElement]);\n}\n\n/**\n * Decides if the supplied variable is an array of variant labels\n */\nfunction isVariantLabels(v) {\n return Array.isArray(v);\n}\n/**\n * Decides if the supplied variable is variant label\n */\nfunction isVariantLabel(v) {\n return typeof v === \"string\" || isVariantLabels(v);\n}\n/**\n * Creates an object containing the latest state of every MotionValue on a VisualElement\n */\nfunction getCurrent(visualElement) {\n var current = {};\n visualElement.forEachValue(function (value, key) { return (current[key] = value.get()); });\n return current;\n}\n/**\n * Creates an object containing the latest velocity of every MotionValue on a VisualElement\n */\nfunction getVelocity$1(visualElement) {\n var velocity = {};\n visualElement.forEachValue(function (value, key) { return (velocity[key] = value.getVelocity()); });\n return velocity;\n}\nfunction resolveVariantFromProps(props, definition, custom, currentValues, currentVelocity) {\n var _a;\n if (currentValues === void 0) { currentValues = {}; }\n if (currentVelocity === void 0) { currentVelocity = {}; }\n if (typeof definition === \"string\") {\n definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];\n }\n return typeof definition === \"function\"\n ? definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity)\n : definition;\n}\nfunction resolveVariant(visualElement, definition, custom) {\n var props = visualElement.getProps();\n return resolveVariantFromProps(props, definition, custom !== null && custom !== void 0 ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));\n}\nfunction checkIfControllingVariants(props) {\n var _a;\n return (typeof ((_a = props.animate) === null || _a === void 0 ? void 0 : _a.start) === \"function\" ||\n isVariantLabel(props.initial) ||\n isVariantLabel(props.animate) ||\n isVariantLabel(props.whileHover) ||\n isVariantLabel(props.whileDrag) ||\n isVariantLabel(props.whileTap) ||\n isVariantLabel(props.whileFocus) ||\n isVariantLabel(props.exit));\n}\nfunction checkIfVariantNode(props) {\n return Boolean(checkIfControllingVariants(props) || props.variants);\n}\n\nfunction getCurrentTreeVariants(props, context) {\n if (checkIfControllingVariants(props)) {\n var initial = props.initial, animate = props.animate;\n return {\n initial: initial === false || isVariantLabel(initial)\n ? initial\n : undefined,\n animate: isVariantLabel(animate) ? animate : undefined,\n };\n }\n return props.inherit !== false ? context : {};\n}\n\nfunction useCreateMotionContext(props, isStatic) {\n var _a = getCurrentTreeVariants(props, React.useContext(MotionContext)), initial = _a.initial, animate = _a.animate;\n return React.useMemo(function () { return ({ initial: initial, animate: animate }); }, \n /**\n * Only break memoisation in static mode\n */\n isStatic\n ? [\n variantLabelsAsDependency(initial),\n variantLabelsAsDependency(animate),\n ]\n : []);\n}\nfunction variantLabelsAsDependency(prop) {\n return Array.isArray(prop) ? prop.join(\" \") : prop;\n}\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n *\n * @internal\n */\nfunction createMotionComponent(_a) {\n var preloadedFeatures = _a.preloadedFeatures, createVisualElement = _a.createVisualElement, useRender = _a.useRender, useVisualState = _a.useVisualState, Component = _a.Component;\n preloadedFeatures && loadFeatures(preloadedFeatures);\n function MotionComponent(props, externalRef) {\n /**\n * If we're rendering in a static environment, we only visually update the component\n * as a result of a React-rerender rather than interactions or animations. This\n * means we don't need to load additional memory structures like VisualElement,\n * or any gesture/animation features.\n */\n var isStatic = React.useContext(MotionConfigContext).isStatic;\n var features = null;\n /**\n * Create the tree context. This is memoized and will only trigger renders\n * when the current tree variant changes in static mode.\n */\n var context = useCreateMotionContext(props, isStatic);\n /**\n *\n */\n var visualState = useVisualState(props, isStatic);\n if (!isStatic && isBrowser) {\n /**\n * Create a VisualElement for this component. A VisualElement provides a common\n * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n * providing a way of rendering to these APIs outside of the React render loop\n * for more performant animations and interactions\n */\n context.visualElement = useVisualElement(Component, visualState, props, createVisualElement);\n /**\n * Load Motion gesture and animation features. These are rendered as renderless\n * components so each feature can optionally make use of React lifecycle methods.\n *\n * TODO: The intention is to move these away from a React-centric to a\n * VisualElement-centric lifecycle scheme.\n */\n features = useFeatures(props, context.visualElement, preloadedFeatures);\n }\n /**\n * The mount order and hierarchy is specific to ensure our element ref\n * is hydrated by the time features fire their effects.\n */\n return (React__namespace.createElement(React__namespace.Fragment, null,\n React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic)),\n features));\n }\n return React.forwardRef(MotionComponent);\n}\n\n/**\n * Convert any React component into a `motion` component. The provided component\n * **must** use `React.forwardRef` to the underlying DOM component you want to animate.\n *\n * ```jsx\n * const Component = React.forwardRef((props, ref) => {\n * return \n * })\n *\n * const MotionComponent = motion(Component)\n * ```\n *\n * @public\n */\nfunction createMotionProxy(createConfig) {\n function custom(Component, customMotionComponentConfig) {\n if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }\n return createMotionComponent(createConfig(Component, customMotionComponentConfig));\n }\n /**\n * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.\n * Rather than generating them anew every render.\n */\n var componentCache = new Map();\n return new Proxy(custom, {\n /**\n * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.\n * The prop name is passed through as `key` and we can use that to generate a `motion`\n * DOM component with that name.\n */\n get: function (_target, key) {\n /**\n * If this element doesn't exist in the component cache, create it and cache.\n */\n if (!componentCache.has(key)) {\n componentCache.set(key, custom(key));\n }\n return componentCache.get(key);\n },\n });\n}\n\n/**\n * We keep these listed seperately as we use the lowercase tag names as part\n * of the runtime bundle to detect SVG components\n */\nvar lowercaseSVGElements = [\n \"animate\",\n \"circle\",\n \"defs\",\n \"desc\",\n \"ellipse\",\n \"g\",\n \"image\",\n \"line\",\n \"filter\",\n \"marker\",\n \"mask\",\n \"metadata\",\n \"path\",\n \"pattern\",\n \"polygon\",\n \"polyline\",\n \"rect\",\n \"stop\",\n \"svg\",\n \"switch\",\n \"symbol\",\n \"text\",\n \"tspan\",\n \"use\",\n \"view\",\n];\n\nfunction isSVGComponent(Component) {\n if (\n /**\n * If it's not a string, it's a custom React component. Currently we only support\n * HTML custom React components.\n */\n typeof Component !== \"string\" ||\n /**\n * If it contains a dash, the element is a custom HTML webcomponent.\n */\n Component.includes(\"-\")) {\n return false;\n }\n else if (\n /**\n * If it's in our list of lowercase SVG tags, it's an SVG component\n */\n lowercaseSVGElements.indexOf(Component) > -1 ||\n /**\n * If it contains a capital letter, it's an SVG component\n */\n /[A-Z]/.test(Component)) {\n return true;\n }\n return false;\n}\n\nvar valueScaleCorrection = {};\n/**\n * @internal\n */\nfunction addScaleCorrection(correctors) {\n for (var key in correctors) {\n valueScaleCorrection[key] = correctors[key];\n }\n}\n\n/**\n * A list of all transformable axes. We'll use this list to generated a version\n * of each axes for each transform.\n */\nvar transformAxes = [\"\", \"X\", \"Y\", \"Z\"];\n/**\n * An ordered array of each transformable value. By default, transform values\n * will be sorted to this order.\n */\nvar order = [\"translate\", \"scale\", \"rotate\", \"skew\"];\n/**\n * Generate a list of every possible transform key.\n */\nvar transformProps = [\"transformPerspective\", \"x\", \"y\", \"z\"];\norder.forEach(function (operationKey) {\n return transformAxes.forEach(function (axesKey) {\n return transformProps.push(operationKey + axesKey);\n });\n});\n/**\n * A function to use with Array.sort to sort transform keys by their default order.\n */\nfunction sortTransformProps(a, b) {\n return transformProps.indexOf(a) - transformProps.indexOf(b);\n}\n/**\n * A quick lookup for transform props.\n */\nvar transformPropSet = new Set(transformProps);\nfunction isTransformProp(key) {\n return transformPropSet.has(key);\n}\n/**\n * A quick lookup for transform origin props\n */\nvar transformOriginProps = new Set([\"originX\", \"originY\", \"originZ\"]);\nfunction isTransformOriginProp(key) {\n return transformOriginProps.has(key);\n}\n\nfunction isForcedMotionValue(key, _a) {\n var layout = _a.layout, layoutId = _a.layoutId;\n return (isTransformProp(key) ||\n isTransformOriginProp(key) ||\n ((layout || layoutId !== undefined) &&\n (!!valueScaleCorrection[key] || key === \"opacity\")));\n}\n\nvar isMotionValue = function (value) {\n return value !== null && typeof value === \"object\" && value.getVelocity;\n};\n\nvar translateAlias = {\n x: \"translateX\",\n y: \"translateY\",\n z: \"translateZ\",\n transformPerspective: \"perspective\",\n};\n/**\n * Build a CSS transform style from individual x/y/scale etc properties.\n *\n * This outputs with a default order of transforms/scales/rotations, this can be customised by\n * providing a transformTemplate function.\n */\nfunction buildTransform(_a, _b, transformIsDefault, transformTemplate) {\n var transform = _a.transform, transformKeys = _a.transformKeys;\n var _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.allowTransformNone, allowTransformNone = _d === void 0 ? true : _d;\n // The transform string we're going to build into.\n var transformString = \"\";\n // Transform keys into their default order - this will determine the output order.\n transformKeys.sort(sortTransformProps);\n // Track whether the defined transform has a defined z so we don't add a\n // second to enable hardware acceleration\n var transformHasZ = false;\n // Loop over each transform and build them into transformString\n var numTransformKeys = transformKeys.length;\n for (var i = 0; i < numTransformKeys; i++) {\n var key = transformKeys[i];\n transformString += (translateAlias[key] || key) + \"(\" + transform[key] + \") \";\n if (key === \"z\")\n transformHasZ = true;\n }\n if (!transformHasZ && enableHardwareAcceleration) {\n transformString += \"translateZ(0)\";\n }\n else {\n transformString = transformString.trim();\n }\n // If we have a custom `transform` template, pass our transform values and\n // generated transformString to that before returning\n if (transformTemplate) {\n transformString = transformTemplate(transform, transformIsDefault ? \"\" : transformString);\n }\n else if (allowTransformNone && transformIsDefault) {\n transformString = \"none\";\n }\n return transformString;\n}\n/**\n * Build a transformOrigin style. Uses the same defaults as the browser for\n * undefined origins.\n */\nfunction buildTransformOrigin(_a) {\n var _b = _a.originX, originX = _b === void 0 ? \"50%\" : _b, _c = _a.originY, originY = _c === void 0 ? \"50%\" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;\n return originX + \" \" + originY + \" \" + originZ;\n}\n\n/**\n * Returns true if the provided key is a CSS variable\n */\nfunction isCSSVariable$1(key) {\n return key.startsWith(\"--\");\n}\n\n/**\n * Provided a value and a ValueType, returns the value as that value type.\n */\nvar getValueAsType = function (value, type) {\n return type && typeof value === \"number\"\n ? type.transform(value)\n : value;\n};\n\nvar int = tslib.__assign(tslib.__assign({}, styleValueTypes.number), { transform: Math.round });\n\nvar numberValueTypes = {\n // Border props\n borderWidth: styleValueTypes.px,\n borderTopWidth: styleValueTypes.px,\n borderRightWidth: styleValueTypes.px,\n borderBottomWidth: styleValueTypes.px,\n borderLeftWidth: styleValueTypes.px,\n borderRadius: styleValueTypes.px,\n radius: styleValueTypes.px,\n borderTopLeftRadius: styleValueTypes.px,\n borderTopRightRadius: styleValueTypes.px,\n borderBottomRightRadius: styleValueTypes.px,\n borderBottomLeftRadius: styleValueTypes.px,\n // Positioning props\n width: styleValueTypes.px,\n maxWidth: styleValueTypes.px,\n height: styleValueTypes.px,\n maxHeight: styleValueTypes.px,\n size: styleValueTypes.px,\n top: styleValueTypes.px,\n right: styleValueTypes.px,\n bottom: styleValueTypes.px,\n left: styleValueTypes.px,\n // Spacing props\n padding: styleValueTypes.px,\n paddingTop: styleValueTypes.px,\n paddingRight: styleValueTypes.px,\n paddingBottom: styleValueTypes.px,\n paddingLeft: styleValueTypes.px,\n margin: styleValueTypes.px,\n marginTop: styleValueTypes.px,\n marginRight: styleValueTypes.px,\n marginBottom: styleValueTypes.px,\n marginLeft: styleValueTypes.px,\n // Transform props\n rotate: styleValueTypes.degrees,\n rotateX: styleValueTypes.degrees,\n rotateY: styleValueTypes.degrees,\n rotateZ: styleValueTypes.degrees,\n scale: styleValueTypes.scale,\n scaleX: styleValueTypes.scale,\n scaleY: styleValueTypes.scale,\n scaleZ: styleValueTypes.scale,\n skew: styleValueTypes.degrees,\n skewX: styleValueTypes.degrees,\n skewY: styleValueTypes.degrees,\n distance: styleValueTypes.px,\n translateX: styleValueTypes.px,\n translateY: styleValueTypes.px,\n translateZ: styleValueTypes.px,\n x: styleValueTypes.px,\n y: styleValueTypes.px,\n z: styleValueTypes.px,\n perspective: styleValueTypes.px,\n transformPerspective: styleValueTypes.px,\n opacity: styleValueTypes.alpha,\n originX: styleValueTypes.progressPercentage,\n originY: styleValueTypes.progressPercentage,\n originZ: styleValueTypes.px,\n // Misc\n zIndex: int,\n // SVG\n fillOpacity: styleValueTypes.alpha,\n strokeOpacity: styleValueTypes.alpha,\n numOctaves: int,\n};\n\nfunction buildHTMLStyles(state, latestValues, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin) {\n var _a;\n var style = state.style, vars = state.vars, transform = state.transform, transformKeys = state.transformKeys, transformOrigin = state.transformOrigin;\n // Empty the transformKeys array. As we're throwing out refs to its items\n // this might not be as cheap as suspected. Maybe using the array as a buffer\n // with a manual incrementation would be better.\n transformKeys.length = 0;\n // Track whether we encounter any transform or transformOrigin values.\n var hasTransform = false;\n var hasTransformOrigin = false;\n // Does the calculated transform essentially equal \"none\"?\n var transformIsNone = true;\n /**\n * Loop over all our latest animated values and decide whether to handle them\n * as a style or CSS variable.\n *\n * Transforms and transform origins are kept seperately for further processing.\n */\n for (var key in latestValues) {\n var value = latestValues[key];\n /**\n * If this is a CSS variable we don't do any further processing.\n */\n if (isCSSVariable$1(key)) {\n vars[key] = value;\n continue;\n }\n // Convert the value to its default value type, ie 0 -> \"0px\"\n var valueType = numberValueTypes[key];\n var valueAsType = getValueAsType(value, valueType);\n if (isTransformProp(key)) {\n // If this is a transform, flag to enable further transform processing\n hasTransform = true;\n transform[key] = valueAsType;\n transformKeys.push(key);\n // If we already know we have a non-default transform, early return\n if (!transformIsNone)\n continue;\n // Otherwise check to see if this is a default transform\n if (value !== ((_a = valueType.default) !== null && _a !== void 0 ? _a : 0))\n transformIsNone = false;\n }\n else if (isTransformOriginProp(key)) {\n transformOrigin[key] = valueAsType;\n // If this is a transform origin, flag and enable further transform-origin processing\n hasTransformOrigin = true;\n }\n else {\n /**\n * If layout projection is on, and we need to perform scale correction for this\n * value type, perform it.\n */\n if ((projection === null || projection === void 0 ? void 0 : projection.isHydrated) &&\n (layoutState === null || layoutState === void 0 ? void 0 : layoutState.isHydrated) &&\n valueScaleCorrection[key]) {\n var correctedValue = valueScaleCorrection[key].process(value, layoutState, projection);\n /**\n * Scale-correctable values can define a number of other values to break\n * down into. For instance borderRadius needs applying to borderBottomLeftRadius etc\n */\n var applyTo = valueScaleCorrection[key].applyTo;\n if (applyTo) {\n var num = applyTo.length;\n for (var i = 0; i < num; i++) {\n style[applyTo[i]] = correctedValue;\n }\n }\n else {\n style[key] = correctedValue;\n }\n }\n else {\n style[key] = valueAsType;\n }\n }\n }\n if (layoutState &&\n projection &&\n buildProjectionTransform &&\n buildProjectionTransformOrigin) {\n style.transform = buildProjectionTransform(layoutState.deltaFinal, layoutState.treeScale, hasTransform ? transform : undefined);\n if (transformTemplate) {\n style.transform = transformTemplate(transform, style.transform);\n }\n style.transformOrigin = buildProjectionTransformOrigin(layoutState);\n }\n else {\n if (hasTransform) {\n style.transform = buildTransform(state, options, transformIsNone, transformTemplate);\n }\n if (hasTransformOrigin) {\n style.transformOrigin = buildTransformOrigin(transformOrigin);\n }\n }\n}\n\nvar createHtmlRenderState = function () { return ({\n style: {},\n transform: {},\n transformKeys: [],\n transformOrigin: {},\n vars: {},\n}); };\n\nfunction copyRawValuesOnly(target, source, props) {\n for (var key in source) {\n if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {\n target[key] = source[key];\n }\n }\n}\nfunction useInitialMotionValues(_a, visualState, isStatic) {\n var transformTemplate = _a.transformTemplate;\n return React.useMemo(function () {\n var state = createHtmlRenderState();\n buildHTMLStyles(state, visualState, undefined, undefined, { enableHardwareAcceleration: !isStatic }, transformTemplate);\n var vars = state.vars, style = state.style;\n return tslib.__assign(tslib.__assign({}, vars), style);\n }, [visualState]);\n}\nfunction useStyle(props, visualState, isStatic) {\n var styleProp = props.style || {};\n var style = {};\n /**\n * Copy non-Motion Values straight into style\n */\n copyRawValuesOnly(style, styleProp, props);\n Object.assign(style, useInitialMotionValues(props, visualState, isStatic));\n if (props.transformValues) {\n style = props.transformValues(style);\n }\n return style;\n}\nfunction useHTMLProps(props, visualState, isStatic) {\n // The `any` isn't ideal but it is the type of createElement props argument\n var htmlProps = {};\n var style = useStyle(props, visualState, isStatic);\n if (Boolean(props.drag)) {\n // Disable the ghost element when a user drags\n htmlProps.draggable = false;\n // Disable text selection\n style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout =\n \"none\";\n // Disable scrolling on the draggable direction\n style.touchAction =\n props.drag === true\n ? \"none\"\n : \"pan-\" + (props.drag === \"x\" ? \"y\" : \"x\");\n }\n htmlProps.style = style;\n return htmlProps;\n}\n\n/**\n * A list of all valid MotionProps.\n *\n * @internalremarks\n * This doesn't throw if a `MotionProp` name is missing - it should.\n */\nvar validMotionProps = new Set([\n \"initial\",\n \"animate\",\n \"exit\",\n \"style\",\n \"variants\",\n \"transition\",\n \"transformTemplate\",\n \"transformValues\",\n \"custom\",\n \"inherit\",\n \"layout\",\n \"layoutId\",\n \"_layoutResetTransform\",\n \"onLayoutAnimationComplete\",\n \"onViewportBoxUpdate\",\n \"onLayoutMeasure\",\n \"onBeforeLayoutMeasure\",\n \"onAnimationStart\",\n \"onAnimationComplete\",\n \"onUpdate\",\n \"onDragStart\",\n \"onDrag\",\n \"onDragEnd\",\n \"onMeasureDragConstraints\",\n \"onDirectionLock\",\n \"onDragTransitionEnd\",\n \"drag\",\n \"dragControls\",\n \"dragListener\",\n \"dragConstraints\",\n \"dragDirectionLock\",\n \"_dragX\",\n \"_dragY\",\n \"dragElastic\",\n \"dragMomentum\",\n \"dragPropagation\",\n \"dragTransition\",\n \"whileDrag\",\n \"onPan\",\n \"onPanStart\",\n \"onPanEnd\",\n \"onPanSessionStart\",\n \"onTap\",\n \"onTapStart\",\n \"onTapCancel\",\n \"onHoverStart\",\n \"onHoverEnd\",\n \"whileFocus\",\n \"whileTap\",\n \"whileHover\",\n]);\n/**\n * Check whether a prop name is a valid `MotionProp` key.\n *\n * @param key - Name of the property to check\n * @returns `true` is key is a valid `MotionProp`.\n *\n * @public\n */\nfunction isValidMotionProp(key) {\n return validMotionProps.has(key);\n}\n\nvar shouldForward = function (key) { return !isValidMotionProp(key); };\n/**\n * Emotion and Styled Components both allow users to pass through arbitrary props to their components\n * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which\n * of these should be passed to the underlying DOM node.\n *\n * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props\n * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props\n * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of\n * `@emotion/is-prop-valid`, however to fix this problem we need to use it.\n *\n * By making it an optionalDependency we can offer this functionality only in the situations where it's\n * actually required.\n */\ntry {\n var emotionIsPropValid_1 = require(\"@emotion/is-prop-valid\").default;\n shouldForward = function (key) {\n // Handle events explicitly as Emotion validates them all as true\n if (key.startsWith(\"on\")) {\n return !isValidMotionProp(key);\n }\n else {\n return emotionIsPropValid_1(key);\n }\n };\n}\ncatch (_a) {\n // We don't need to actually do anything here - the fallback is the existing `isPropValid`.\n}\nfunction filterProps(props, isDom, forwardMotionProps) {\n var filteredProps = {};\n for (var key in props) {\n if (shouldForward(key) ||\n (forwardMotionProps === true && isValidMotionProp(key)) ||\n (!isDom && !isValidMotionProp(key))) {\n filteredProps[key] = props[key];\n }\n }\n return filteredProps;\n}\n\nfunction calcOrigin$1(origin, offset, size) {\n return typeof origin === \"string\"\n ? origin\n : styleValueTypes.px.transform(offset + size * origin);\n}\n/**\n * The SVG transform origin defaults are different to CSS and is less intuitive,\n * so we use the measured dimensions of the SVG to reconcile these.\n */\nfunction calcSVGTransformOrigin(dimensions, originX, originY) {\n var pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);\n var pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);\n return pxOriginX + \" \" + pxOriginY;\n}\n\n// Convert a progress 0-1 to a pixels value based on the provided length\nvar progressToPixels = function (progress, length) {\n return styleValueTypes.px.transform(progress * length);\n};\nvar dashKeys = {\n offset: \"stroke-dashoffset\",\n array: \"stroke-dasharray\",\n};\nvar camelKeys = {\n offset: \"strokeDashoffset\",\n array: \"strokeDasharray\",\n};\n/**\n * Build SVG path properties. Uses the path's measured length to convert\n * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset\n * and stroke-dasharray attributes.\n *\n * This function is mutative to reduce per-frame GC.\n */\nfunction buildSVGPath(attrs, totalLength, length, spacing, offset, useDashCase) {\n if (spacing === void 0) { spacing = 1; }\n if (offset === void 0) { offset = 0; }\n if (useDashCase === void 0) { useDashCase = true; }\n // We use dash case when setting attributes directly to the DOM node and camel case\n // when defining props on a React component.\n var keys = useDashCase ? dashKeys : camelKeys;\n // Build the dash offset\n attrs[keys.offset] = progressToPixels(-offset, totalLength);\n // Build the dash array\n var pathLength = progressToPixels(length, totalLength);\n var pathSpacing = progressToPixels(spacing, totalLength);\n attrs[keys.array] = pathLength + \" \" + pathSpacing;\n}\n\n/**\n * Build SVG visual attrbutes, like cx and style.transform\n */\nfunction buildSVGAttrs(state, _a, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin) {\n var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, \n // This is object creation, which we try to avoid per-frame.\n latest = tslib.__rest(_a, [\"attrX\", \"attrY\", \"originX\", \"originY\", \"pathLength\", \"pathSpacing\", \"pathOffset\"]);\n buildHTMLStyles(state, latest, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin);\n state.attrs = state.style;\n state.style = {};\n var attrs = state.attrs, style = state.style, dimensions = state.dimensions, totalPathLength = state.totalPathLength;\n /**\n * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs\n * and copy it into style.\n */\n if (attrs.transform) {\n if (dimensions)\n style.transform = attrs.transform;\n delete attrs.transform;\n }\n // Parse transformOrigin\n if (dimensions &&\n (originX !== undefined || originY !== undefined || style.transform)) {\n style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);\n }\n // Treat x/y not as shortcuts but as actual attributes\n if (attrX !== undefined)\n attrs.x = attrX;\n if (attrY !== undefined)\n attrs.y = attrY;\n // Build SVG path if one has been measured\n if (totalPathLength !== undefined && pathLength !== undefined) {\n buildSVGPath(attrs, totalPathLength, pathLength, pathSpacing, pathOffset, false);\n }\n}\n\nvar createSvgRenderState = function () { return (tslib.__assign(tslib.__assign({}, createHtmlRenderState()), { attrs: {} })); };\n\nfunction useSVGProps(props, visualState) {\n var visualProps = React.useMemo(function () {\n var state = createSvgRenderState();\n buildSVGAttrs(state, visualState, undefined, undefined, { enableHardwareAcceleration: false }, props.transformTemplate);\n return tslib.__assign(tslib.__assign({}, state.attrs), { style: tslib.__assign({}, state.style) });\n }, [visualState]);\n if (props.style) {\n var rawStyles = {};\n copyRawValuesOnly(rawStyles, props.style, props);\n visualProps.style = tslib.__assign(tslib.__assign({}, rawStyles), visualProps.style);\n }\n return visualProps;\n}\n\nfunction createUseRender(forwardMotionProps) {\n if (forwardMotionProps === void 0) { forwardMotionProps = false; }\n var useRender = function (Component, props, ref, _a, isStatic) {\n var latestValues = _a.latestValues;\n var useVisualProps = isSVGComponent(Component)\n ? useSVGProps\n : useHTMLProps;\n var visualProps = useVisualProps(props, latestValues, isStatic);\n var filteredProps = filterProps(props, typeof Component === \"string\", forwardMotionProps);\n var elementProps = tslib.__assign(tslib.__assign(tslib.__assign({}, filteredProps), visualProps), { ref: ref });\n return React.createElement(Component, elementProps);\n };\n return useRender;\n}\n\nvar CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;\nvar REPLACE_TEMPLATE = \"$1-$2\";\n/**\n * Convert camelCase to dash-case properties.\n */\nvar camelToDash = function (str) {\n return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();\n};\n\nfunction renderHTML(element, _a) {\n var style = _a.style, vars = _a.vars;\n // Directly assign style into the Element's style prop. In tests Object.assign is the\n // fastest way to assign styles.\n Object.assign(element.style, style);\n // Loop over any CSS variables and assign those.\n for (var key in vars) {\n element.style.setProperty(key, vars[key]);\n }\n}\n\n/**\n * A set of attribute names that are always read/written as camel case.\n */\nvar camelCaseAttributes = new Set([\n \"baseFrequency\",\n \"diffuseConstant\",\n \"kernelMatrix\",\n \"kernelUnitLength\",\n \"keySplines\",\n \"keyTimes\",\n \"limitingConeAngle\",\n \"markerHeight\",\n \"markerWidth\",\n \"numOctaves\",\n \"targetX\",\n \"targetY\",\n \"surfaceScale\",\n \"specularConstant\",\n \"specularExponent\",\n \"stdDeviation\",\n \"tableValues\",\n \"viewBox\",\n \"gradientTransform\",\n]);\n\nfunction renderSVG(element, renderState) {\n renderHTML(element, renderState);\n for (var key in renderState.attrs) {\n element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);\n }\n}\n\nfunction scrapeMotionValuesFromProps$1(props) {\n var style = props.style;\n var newValues = {};\n for (var key in style) {\n if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) {\n newValues[key] = style[key];\n }\n }\n return newValues;\n}\n\nfunction scrapeMotionValuesFromProps(props) {\n var newValues = scrapeMotionValuesFromProps$1(props);\n for (var key in props) {\n if (isMotionValue(props[key])) {\n var targetKey = key === \"x\" || key === \"y\" ? \"attr\" + key.toUpperCase() : key;\n newValues[targetKey] = props[key];\n }\n }\n return newValues;\n}\n\nfunction isAnimationControls(v) {\n return typeof v === \"object\" && typeof v.start === \"function\";\n}\n\nvar isKeyframesTarget = function (v) {\n return Array.isArray(v);\n};\n\nvar isCustomValue = function (v) {\n return Boolean(v && typeof v === \"object\" && v.mix && v.toValue);\n};\nvar resolveFinalValueInKeyframes = function (v) {\n // TODO maybe throw if v.length - 1 is placeholder token?\n return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;\n};\n\n/**\n * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself\n *\n * TODO: Remove and move to library\n *\n * @internal\n */\nfunction resolveMotionValue(value) {\n var unwrappedValue = isMotionValue(value) ? value.get() : value;\n return isCustomValue(unwrappedValue)\n ? unwrappedValue.toValue()\n : unwrappedValue;\n}\n\nfunction makeState(_a, props, context, presenceContext) {\n var scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps, createRenderState = _a.createRenderState, onMount = _a.onMount;\n var state = {\n latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),\n renderState: createRenderState(),\n };\n if (onMount) {\n state.mount = function (instance) { return onMount(props, instance, state); };\n }\n return state;\n}\nvar makeUseVisualState = function (config) { return function (props, isStatic) {\n var context = React.useContext(MotionContext);\n var presenceContext = React.useContext(PresenceContext);\n return isStatic\n ? makeState(config, props, context, presenceContext)\n : useConstant(function () { return makeState(config, props, context, presenceContext); });\n}; };\nfunction makeLatestValues(props, context, presenceContext, scrapeMotionValues) {\n var values = {};\n var blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false;\n var motionValues = scrapeMotionValues(props);\n for (var key in motionValues) {\n values[key] = resolveMotionValue(motionValues[key]);\n }\n var initial = props.initial, animate = props.animate;\n var isControllingVariants = checkIfControllingVariants(props);\n var isVariantNode = checkIfVariantNode(props);\n if (context &&\n isVariantNode &&\n !isControllingVariants &&\n props.inherit !== false) {\n initial !== null && initial !== void 0 ? initial : (initial = context.initial);\n animate !== null && animate !== void 0 ? animate : (animate = context.animate);\n }\n var variantToSet = blockInitialAnimation || initial === false ? animate : initial;\n if (variantToSet &&\n typeof variantToSet !== \"boolean\" &&\n !isAnimationControls(variantToSet)) {\n var list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];\n list.forEach(function (definition) {\n var resolved = resolveVariantFromProps(props, definition);\n if (!resolved)\n return;\n var transitionEnd = resolved.transitionEnd; resolved.transition; var target = tslib.__rest(resolved, [\"transitionEnd\", \"transition\"]);\n for (var key in target)\n values[key] = target[key];\n for (var key in transitionEnd)\n values[key] = transitionEnd[key];\n });\n }\n return values;\n}\n\nvar svgMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createSvgRenderState,\n onMount: function (props, instance, _a) {\n var renderState = _a.renderState, latestValues = _a.latestValues;\n try {\n renderState.dimensions =\n typeof instance.getBBox ===\n \"function\"\n ? instance.getBBox()\n : instance.getBoundingClientRect();\n }\n catch (e) {\n // Most likely trying to measure an unrendered element under Firefox\n renderState.dimensions = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n };\n }\n if (isPath(instance)) {\n renderState.totalPathLength = instance.getTotalLength();\n }\n buildSVGAttrs(renderState, latestValues, undefined, undefined, { enableHardwareAcceleration: false }, props.transformTemplate);\n // TODO: Replace with direct assignment\n renderSVG(instance, renderState);\n },\n }),\n};\nfunction isPath(element) {\n return element.tagName === \"path\";\n}\n\nvar htmlMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,\n createRenderState: createHtmlRenderState,\n }),\n};\n\nfunction createDomMotionConfig(Component, _a, preloadedFeatures, createVisualElement) {\n var _b = _a.forwardMotionProps, forwardMotionProps = _b === void 0 ? false : _b;\n var baseConfig = isSVGComponent(Component)\n ? svgMotionConfig\n : htmlMotionConfig;\n return tslib.__assign(tslib.__assign({}, baseConfig), { preloadedFeatures: preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement: createVisualElement,\n Component: Component });\n}\n\nvar AnimationType;\n(function (AnimationType) {\n AnimationType[\"Animate\"] = \"animate\";\n AnimationType[\"Hover\"] = \"whileHover\";\n AnimationType[\"Tap\"] = \"whileTap\";\n AnimationType[\"Drag\"] = \"whileDrag\";\n AnimationType[\"Focus\"] = \"whileFocus\";\n AnimationType[\"Exit\"] = \"exit\";\n})(AnimationType || (AnimationType = {}));\n\nfunction addDomEvent(target, eventName, handler, options) {\n target.addEventListener(eventName, handler, options);\n return function () { return target.removeEventListener(eventName, handler, options); };\n}\n/**\n * Attaches an event listener directly to the provided DOM element.\n *\n * Bypassing React's event system can be desirable, for instance when attaching non-passive\n * event handlers.\n *\n * ```jsx\n * const ref = useRef(null)\n *\n * useDomEvent(ref, 'wheel', onWheel, { passive: false })\n *\n * return \n * ```\n *\n * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.\n * @param eventName - Name of the event you want listen for.\n * @param handler - Function to fire when receiving the event.\n * @param options - Options to pass to `Event.addEventListener`.\n *\n * @public\n */\nfunction useDomEvent(ref, eventName, handler, options) {\n React.useEffect(function () {\n var element = ref.current;\n if (handler && element) {\n return addDomEvent(element, eventName, handler, options);\n }\n }, [ref, eventName, handler, options]);\n}\n\n/**\n *\n * @param props\n * @param ref\n * @internal\n */\nfunction useFocusGesture(_a) {\n var whileFocus = _a.whileFocus, visualElement = _a.visualElement;\n var onFocus = function () {\n var _a;\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, true);\n };\n var onBlur = function () {\n var _a;\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, false);\n };\n useDomEvent(visualElement, \"focus\", whileFocus ? onFocus : undefined);\n useDomEvent(visualElement, \"blur\", whileFocus ? onBlur : undefined);\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 return event instanceof MouseEvent;\n}\nfunction isTouchEvent(event) {\n var hasTouches = !!event.touches;\n return hasTouches;\n}\n\n/**\n * Filters out events not attached to the primary pointer (currently left mouse button)\n * @param eventHandler\n */\nfunction filterPrimaryPointer(eventHandler) {\n return function (event) {\n var isMouseEvent = event instanceof MouseEvent;\n var isPrimaryPointer = !isMouseEvent ||\n (isMouseEvent && event.button === 0);\n if (isPrimaryPointer) {\n eventHandler(event);\n }\n };\n}\nvar defaultPagePoint = { pageX: 0, pageY: 0 };\nfunction pointFromTouch(e, pointType) {\n if (pointType === void 0) { pointType = \"page\"; }\n var primaryTouch = e.touches[0] || e.changedTouches[0];\n var point = primaryTouch || defaultPagePoint;\n return {\n x: point[pointType + \"X\"],\n y: point[pointType + \"Y\"],\n };\n}\nfunction pointFromMouse(point, pointType) {\n if (pointType === void 0) { pointType = \"page\"; }\n return {\n x: point[pointType + \"X\"],\n y: point[pointType + \"Y\"],\n };\n}\nfunction extractEventInfo(event, pointType) {\n if (pointType === void 0) { pointType = \"page\"; }\n return {\n point: isTouchEvent(event)\n ? pointFromTouch(event, pointType)\n : pointFromMouse(event, pointType),\n };\n}\nfunction getViewportPointFromEvent(event) {\n return extractEventInfo(event, \"client\");\n}\nvar wrapHandler = function (handler, shouldFilterPrimaryPointer) {\n if (shouldFilterPrimaryPointer === void 0) { shouldFilterPrimaryPointer = false; }\n var listener = function (event) {\n return handler(event, extractEventInfo(event));\n };\n return shouldFilterPrimaryPointer\n ? filterPrimaryPointer(listener)\n : listener;\n};\n\n// We check for event support via functions in case they've been mocked by a testing suite.\nvar supportsPointerEvents = function () {\n return isBrowser && window.onpointerdown === null;\n};\nvar supportsTouchEvents = function () {\n return isBrowser && window.ontouchstart === null;\n};\nvar supportsMouseEvents = function () {\n return isBrowser && 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};\nfunction getPointerEventName(name) {\n if (supportsPointerEvents()) {\n return name;\n }\n else if (supportsTouchEvents()) {\n return touchEventNames[name];\n }\n else if (supportsMouseEvents()) {\n return mouseEventNames[name];\n }\n return name;\n}\nfunction addPointerEvent(target, eventName, handler, options) {\n return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === \"pointerdown\"), options);\n}\nfunction usePointerEvent(ref, eventName, handler, options) {\n return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === \"pointerdown\"), options);\n}\n\nfunction createLock(name) {\n var lock = null;\n return function () {\n var openLock = function () {\n lock = null;\n };\n if (lock === null) {\n lock = name;\n return openLock;\n }\n return false;\n };\n}\nvar globalHorizontalLock = createLock(\"dragHorizontal\");\nvar globalVerticalLock = createLock(\"dragVertical\");\nfunction getGlobalLock(drag) {\n var lock = false;\n if (drag === \"y\") {\n lock = globalVerticalLock();\n }\n else if (drag === \"x\") {\n lock = globalHorizontalLock();\n }\n else {\n var openHorizontal_1 = globalHorizontalLock();\n var openVertical_1 = globalVerticalLock();\n if (openHorizontal_1 && openVertical_1) {\n lock = function () {\n openHorizontal_1();\n openVertical_1();\n };\n }\n else {\n // Release the locks because we don't use them\n if (openHorizontal_1)\n openHorizontal_1();\n if (openVertical_1)\n openVertical_1();\n }\n }\n return lock;\n}\nfunction isDragActive() {\n // Check the gesture lock - if we get it, it means no drag gesture is active\n // and we can safely fire the tap gesture.\n var openGestureLock = getGlobalLock(true);\n if (!openGestureLock)\n return true;\n openGestureLock();\n return false;\n}\n\nfunction createHoverEvent(visualElement, isActive, callback) {\n return function (event, info) {\n var _a;\n if (!isMouseEvent(event) || isDragActive())\n return;\n callback === null || callback === void 0 ? void 0 : callback(event, info);\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, isActive);\n };\n}\nfunction useHoverGesture(_a) {\n var onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, whileHover = _a.whileHover, visualElement = _a.visualElement;\n usePointerEvent(visualElement, \"pointerenter\", onHoverStart || whileHover\n ? createHoverEvent(visualElement, true, onHoverStart)\n : undefined);\n usePointerEvent(visualElement, \"pointerleave\", onHoverEnd || whileHover\n ? createHoverEvent(visualElement, false, onHoverEnd)\n : undefined);\n}\n\n/**\n * Recursively traverse up the tree to check whether the provided child node\n * is the parent or a descendant of it.\n *\n * @param parent - Element to find\n * @param child - Element to test against parent\n */\nvar isNodeOrChild = function (parent, child) {\n if (!child) {\n return false;\n }\n else if (parent === child) {\n return true;\n }\n else {\n return isNodeOrChild(parent, child.parentElement);\n }\n};\n\nfunction useUnmountEffect(callback) {\n return React.useEffect(function () { return function () { return callback(); }; }, []);\n}\n\n/**\n * @param handlers -\n * @internal\n */\nfunction useTapGesture(_a) {\n var onTap = _a.onTap, onTapStart = _a.onTapStart, onTapCancel = _a.onTapCancel, whileTap = _a.whileTap, visualElement = _a.visualElement;\n var hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;\n var isPressing = React.useRef(false);\n var cancelPointerEndListeners = React.useRef(null);\n function removePointerEndListener() {\n var _a;\n (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);\n cancelPointerEndListeners.current = null;\n }\n function checkPointerEnd() {\n var _a;\n removePointerEndListener();\n isPressing.current = false;\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, false);\n return !isDragActive();\n }\n function onPointerUp(event, info) {\n if (!checkPointerEnd())\n return;\n /**\n * We only count this as a tap gesture if the event.target is the same\n * as, or a child of, this component's element\n */\n !isNodeOrChild(visualElement.getInstance(), event.target)\n ? onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info)\n : onTap === null || onTap === void 0 ? void 0 : onTap(event, info);\n }\n function onPointerCancel(event, info) {\n if (!checkPointerEnd())\n return;\n onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info);\n }\n function onPointerDown(event, info) {\n var _a;\n removePointerEndListener();\n if (isPressing.current)\n return;\n isPressing.current = true;\n cancelPointerEndListeners.current = popmotion.pipe(addPointerEvent(window, \"pointerup\", onPointerUp), addPointerEvent(window, \"pointercancel\", onPointerCancel));\n onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true);\n }\n usePointerEvent(visualElement, \"pointerdown\", hasPressListeners ? onPointerDown : undefined);\n useUnmountEffect(removePointerEndListener);\n}\n\nvar makeRenderlessComponent = function (hook) { return function (props) {\n hook(props);\n return null;\n}; };\n\nvar gestureAnimations = {\n tap: makeRenderlessComponent(useTapGesture),\n focus: makeRenderlessComponent(useFocusGesture),\n hover: makeRenderlessComponent(useHoverGesture),\n};\n\nfunction shallowCompare(next, prev) {\n if (!Array.isArray(prev))\n return false;\n var prevLength = prev.length;\n if (prevLength !== next.length)\n return false;\n for (var i = 0; i < prevLength; i++) {\n if (prev[i] !== next[i])\n return false;\n }\n return true;\n}\n\n/**\n * Converts seconds to milliseconds\n *\n * @param seconds - Time in seconds.\n * @return milliseconds - Converted time in milliseconds.\n */\nvar secondsToMilliseconds = function (seconds) { return seconds * 1000; };\n\nvar easingLookup = {\n linear: popmotion.linear,\n easeIn: popmotion.easeIn,\n easeInOut: popmotion.easeInOut,\n easeOut: popmotion.easeOut,\n circIn: popmotion.circIn,\n circInOut: popmotion.circInOut,\n circOut: popmotion.circOut,\n backIn: popmotion.backIn,\n backInOut: popmotion.backInOut,\n backOut: popmotion.backOut,\n anticipate: popmotion.anticipate,\n bounceIn: popmotion.bounceIn,\n bounceInOut: popmotion.bounceInOut,\n bounceOut: popmotion.bounceOut,\n};\nvar easingDefinitionToFunction = function (definition) {\n if (Array.isArray(definition)) {\n // If cubic bezier definition, create bezier curve\n heyListen.invariant(definition.length === 4, \"Cubic bezier arrays must contain four numerical values.\");\n var _a = tslib.__read(definition, 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];\n return popmotion.cubicBezier(x1, y1, x2, y2);\n }\n else if (typeof definition === \"string\") {\n // Else lookup from table\n heyListen.invariant(easingLookup[definition] !== undefined, \"Invalid easing type '\" + definition + \"'\");\n return easingLookup[definition];\n }\n return definition;\n};\nvar isEasingArray = function (ease) {\n return Array.isArray(ease) && typeof ease[0] !== \"number\";\n};\n\n/**\n * Check if a value is animatable. Examples:\n *\n * ✅: 100, \"100px\", \"#fff\"\n * ❌: \"block\", \"url(2.jpg)\"\n * @param value\n *\n * @internal\n */\nvar isAnimatable = function (key, value) {\n // If the list of keys tat might be non-animatable grows, replace with Set\n if (key === \"zIndex\")\n return false;\n // 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 if (typeof value === \"number\" || Array.isArray(value))\n return true;\n if (typeof value === \"string\" && // It's animatable if we have a string\n styleValueTypes.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 return false;\n};\n\nvar underDampedSpring = function () { return ({\n type: \"spring\",\n stiffness: 500,\n damping: 25,\n restDelta: 0.5,\n restSpeed: 10,\n}); };\nvar criticallyDampedSpring = function (to) { return ({\n type: \"spring\",\n stiffness: 550,\n damping: to === 0 ? 2 * Math.sqrt(550) : 30,\n restDelta: 0.01,\n restSpeed: 10,\n}); };\nvar linearTween = function () { return ({\n type: \"keyframes\",\n ease: \"linear\",\n duration: 0.3,\n}); };\nvar keyframes = function (values) { return ({\n type: \"keyframes\",\n duration: 0.8,\n values: values,\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: criticallyDampedSpring,\n scaleY: criticallyDampedSpring,\n scale: criticallyDampedSpring,\n opacity: linearTween,\n backgroundColor: linearTween,\n color: linearTween,\n default: criticallyDampedSpring,\n};\nvar getDefaultTransition = function (valueKey, to) {\n var transitionFactory;\n if (isKeyframesTarget(to)) {\n transitionFactory = keyframes;\n }\n else {\n transitionFactory =\n defaultTransitions[valueKey] || defaultTransitions.default;\n }\n return tslib.__assign({ to: to }, transitionFactory(to));\n};\n\n/**\n * A map of default value types for common values\n */\nvar defaultValueTypes = tslib.__assign(tslib.__assign({}, numberValueTypes), { \n // Color props\n color: styleValueTypes.color, backgroundColor: styleValueTypes.color, outlineColor: styleValueTypes.color, fill: styleValueTypes.color, stroke: styleValueTypes.color, \n // Border props\n borderColor: styleValueTypes.color, borderTopColor: styleValueTypes.color, borderRightColor: styleValueTypes.color, borderBottomColor: styleValueTypes.color, borderLeftColor: styleValueTypes.color, filter: styleValueTypes.filter, WebkitFilter: styleValueTypes.filter });\n/**\n * Gets the default ValueType for the provided value key\n */\nvar getDefaultValueType = function (key) { return defaultValueTypes[key]; };\n\nfunction getAnimatableNone(key, value) {\n var _a;\n var defaultValueType = getDefaultValueType(key);\n if (defaultValueType !== styleValueTypes.filter)\n defaultValueType = styleValueTypes.complex;\n // If value is not recognised as animatable, ie \"none\", create an animatable version origin based on the target\n return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);\n}\n\n/**\n * Decide whether a transition is defined on a given Transition.\n * This filters out orchestration options and returns true\n * if any options are left.\n */\nfunction isTransitionDefined(_a) {\n _a.when; _a.delay; _a.delayChildren; _a.staggerChildren; _a.staggerDirection; _a.repeat; _a.repeatType; _a.repeatDelay; _a.from; var transition = tslib.__rest(_a, [\"when\", \"delay\", \"delayChildren\", \"staggerChildren\", \"staggerDirection\", \"repeat\", \"repeatType\", \"repeatDelay\", \"from\"]);\n return !!Object.keys(transition).length;\n}\nvar legacyRepeatWarning = false;\n/**\n * Convert Framer Motion's Transition type into Popmotion-compatible options.\n */\nfunction convertTransitionToAnimationOptions(_a) {\n var ease = _a.ease, times = _a.times, yoyo = _a.yoyo, flip = _a.flip, loop = _a.loop, transition = tslib.__rest(_a, [\"ease\", \"times\", \"yoyo\", \"flip\", \"loop\"]);\n var options = tslib.__assign({}, transition);\n if (times)\n options[\"offset\"] = times;\n /**\n * Convert any existing durations from seconds to milliseconds\n */\n if (transition.duration)\n options[\"duration\"] = secondsToMilliseconds(transition.duration);\n if (transition.repeatDelay)\n options.repeatDelay = secondsToMilliseconds(transition.repeatDelay);\n /**\n * Map easing names to Popmotion's easing functions\n */\n if (ease) {\n options[\"ease\"] = isEasingArray(ease)\n ? ease.map(easingDefinitionToFunction)\n : easingDefinitionToFunction(ease);\n }\n /**\n * Support legacy transition API\n */\n if (transition.type === \"tween\")\n options.type = \"keyframes\";\n /**\n * TODO: These options are officially removed from the API.\n */\n if (yoyo || loop || flip) {\n heyListen.warning(!legacyRepeatWarning, \"yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.\");\n legacyRepeatWarning = true;\n if (yoyo) {\n options.repeatType = \"reverse\";\n }\n else if (loop) {\n options.repeatType = \"loop\";\n }\n else if (flip) {\n options.repeatType = \"mirror\";\n }\n options.repeat = loop || yoyo || flip || transition.repeat;\n }\n /**\n * TODO: Popmotion 9 has the ability to automatically detect whether to use\n * a keyframes or spring animation, but does so by detecting velocity and other spring options.\n * It'd be good to introduce a similar thing here.\n */\n if (transition.type !== \"spring\")\n options.type = \"keyframes\";\n return options;\n}\n/**\n * Get the delay for a value by checking Transition with decreasing specificity.\n */\nfunction getDelayFromTransition(transition, key) {\n var _a;\n var valueTransition = getValueTransition(transition, key) || {};\n return (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : 0;\n}\nfunction hydrateKeyframes(options) {\n if (Array.isArray(options.to) && options.to[0] === null) {\n options.to = tslib.__spreadArray([], tslib.__read(options.to));\n options.to[0] = options.from;\n }\n return options;\n}\nfunction getPopmotionAnimationOptions(transition, options, key) {\n var _a;\n if (Array.isArray(options.to)) {\n (_a = transition.duration) !== null && _a !== void 0 ? _a : (transition.duration = 0.8);\n }\n hydrateKeyframes(options);\n /**\n * Get a default transition if none is determined to be defined.\n */\n if (!isTransitionDefined(transition)) {\n transition = tslib.__assign(tslib.__assign({}, transition), getDefaultTransition(key, options.to));\n }\n return tslib.__assign(tslib.__assign({}, options), convertTransitionToAnimationOptions(transition));\n}\n/**\n *\n */\nfunction getAnimation(key, value, target, transition, onComplete) {\n var _a;\n var valueTransition = getValueTransition(transition, key);\n var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();\n var isTargetAnimatable = isAnimatable(key, target);\n if (origin === \"none\" && isTargetAnimatable && typeof target === \"string\") {\n /**\n * If we're trying to animate from \"none\", try and get an animatable version\n * of the target. This could be improved to work both ways.\n */\n origin = getAnimatableNone(key, target);\n }\n else if (isZero(origin) && typeof target === \"string\") {\n origin = getZeroUnit(target);\n }\n else if (!Array.isArray(target) &&\n isZero(target) &&\n typeof origin === \"string\") {\n target = getZeroUnit(origin);\n }\n var isOriginAnimatable = isAnimatable(key, origin);\n heyListen.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.\");\n function start() {\n var options = {\n from: origin,\n to: target,\n velocity: value.getVelocity(),\n onComplete: onComplete,\n onUpdate: function (v) { return value.set(v); },\n };\n return valueTransition.type === \"inertia\" ||\n valueTransition.type === \"decay\"\n ? popmotion.inertia(tslib.__assign(tslib.__assign({}, options), valueTransition))\n : popmotion.animate(tslib.__assign(tslib.__assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: function (v) {\n var _a;\n options.onUpdate(v);\n (_a = valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, v);\n }, onComplete: function () {\n var _a;\n options.onComplete();\n (_a = valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);\n } }));\n }\n function set() {\n var _a;\n value.set(target);\n onComplete();\n (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);\n return { stop: function () { } };\n }\n return !isOriginAnimatable ||\n !isTargetAnimatable ||\n valueTransition.type === false\n ? set\n : start;\n}\nfunction isZero(value) {\n return (value === 0 ||\n (typeof value === \"string\" &&\n parseFloat(value) === 0 &&\n value.indexOf(\" \") === -1));\n}\nfunction getZeroUnit(potentialUnitType) {\n return typeof potentialUnitType === \"number\"\n ? 0\n : getAnimatableNone(\"\", potentialUnitType);\n}\nfunction getValueTransition(transition, key) {\n return transition[key] || transition[\"default\"] || transition;\n}\n/**\n * Start animation on a MotionValue. This function is an interface between\n * Framer Motion and Popmotion\n *\n * @internal\n */\nfunction startAnimation(key, value, target, transition) {\n if (transition === void 0) { transition = {}; }\n return value.start(function (onComplete) {\n var delayTimer;\n var controls;\n var animation = getAnimation(key, value, target, transition, onComplete);\n var delay = getDelayFromTransition(transition, key);\n var start = function () { return (controls = animation()); };\n if (delay) {\n delayTimer = setTimeout(start, secondsToMilliseconds(delay));\n }\n else {\n start();\n }\n return function () {\n clearTimeout(delayTimer);\n controls === null || controls === void 0 ? void 0 : controls.stop();\n };\n });\n}\n\n/**\n * Check if value is a numerical string, ie a string that is purely a number eg \"100\" or \"-100.1\"\n */\nvar isNumericalString = function (v) { return /^\\-?\\d*\\.?\\d+$/.test(v); };\n\nfunction addUniqueItem(arr, item) {\n arr.indexOf(item) === -1 && arr.push(item);\n}\nfunction removeItem(arr, item) {\n var index = arr.indexOf(item);\n index > -1 && arr.splice(index, 1);\n}\n\nvar SubscriptionManager = /** @class */ (function () {\n function SubscriptionManager() {\n this.subscriptions = [];\n }\n SubscriptionManager.prototype.add = function (handler) {\n var _this = this;\n addUniqueItem(this.subscriptions, handler);\n return function () { return removeItem(_this.subscriptions, handler); };\n };\n SubscriptionManager.prototype.notify = function (a, b, c) {\n var numSubscriptions = this.subscriptions.length;\n if (!numSubscriptions)\n return;\n if (numSubscriptions === 1) {\n /**\n * If there's only a single handler we can just call it without invoking a loop.\n */\n this.subscriptions[0](a, b, c);\n }\n else {\n for (var i = 0; i < numSubscriptions; i++) {\n /**\n * Check whether the handler exists before firing as it's possible\n * the subscriptions were modified during this loop running.\n */\n var handler = this.subscriptions[i];\n handler && handler(a, b, c);\n }\n }\n };\n SubscriptionManager.prototype.getSize = function () {\n return this.subscriptions.length;\n };\n SubscriptionManager.prototype.clear = function () {\n this.subscriptions.length = 0;\n };\n return SubscriptionManager;\n}());\n\nvar isFloat = function (value) {\n return !isNaN(parseFloat(value));\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nvar MotionValue = /** @class */ (function () {\n /**\n * @param init - The initiating value\n * @param config - Optional configuration options\n *\n * - `transformer`: A function to transform incoming values with.\n *\n * @internal\n */\n function MotionValue(init) {\n var _this = this;\n /**\n * Duration, in milliseconds, since last updating frame.\n *\n * @internal\n */\n this.timeDelta = 0;\n /**\n * Timestamp of the last time this `MotionValue` was updated.\n *\n * @internal\n */\n this.lastUpdated = 0;\n /**\n * Functions to notify when the `MotionValue` updates.\n *\n * @internal\n */\n this.updateSubscribers = new SubscriptionManager();\n /**\n * Functions to notify when the velocity updates.\n *\n * @internal\n */\n this.velocityUpdateSubscribers = new SubscriptionManager();\n /**\n * Functions to notify when the `MotionValue` updates and `render` is set to `true`.\n *\n * @internal\n */\n this.renderSubscribers = new SubscriptionManager();\n /**\n * Tracks whether this value can output a velocity. Currently this is only true\n * if the value is numerical, but we might be able to widen the scope here and support\n * other value types.\n *\n * @internal\n */\n this.canTrackVelocity = false;\n this.updateAndNotify = function (v, render) {\n if (render === void 0) { render = true; }\n _this.prev = _this.current;\n _this.current = v;\n // Update timestamp\n var _a = sync.getFrameData(), delta = _a.delta, timestamp = _a.timestamp;\n if (_this.lastUpdated !== timestamp) {\n _this.timeDelta = delta;\n _this.lastUpdated = timestamp;\n sync__default['default'].postRender(_this.scheduleVelocityCheck);\n }\n // Update update subscribers\n if (_this.prev !== _this.current) {\n _this.updateSubscribers.notify(_this.current);\n }\n // Update velocity subscribers\n if (_this.velocityUpdateSubscribers.getSize()) {\n _this.velocityUpdateSubscribers.notify(_this.getVelocity());\n }\n // Update render subscribers\n if (render) {\n _this.renderSubscribers.notify(_this.current);\n }\n };\n /**\n * Schedule a velocity check for the next frame.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.scheduleVelocityCheck = function () { return sync__default['default'].postRender(_this.velocityCheck); };\n /**\n * Updates `prev` with `current` if the value hasn't been updated this frame.\n * This ensures velocity calculations return `0`.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.velocityCheck = function (_a) {\n var timestamp = _a.timestamp;\n if (timestamp !== _this.lastUpdated) {\n _this.prev = _this.current;\n _this.velocityUpdateSubscribers.notify(_this.getVelocity());\n }\n };\n this.hasAnimated = false;\n this.prev = this.current = init;\n this.canTrackVelocity = isFloat(this.current);\n }\n /**\n * Adds a function that will be notified when the `MotionValue` is updated.\n *\n * It returns a function that, when called, will cancel the subscription.\n *\n * When calling `onChange` inside a React component, it should be wrapped with the\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\n *\n * @library\n *\n * ```jsx\n * function MyComponent() {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.onChange(updateOpacity)\n * const unsubscribeY = y.onChange(updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return \n * }\n * ```\n *\n * @motion\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.onChange(updateOpacity)\n * const unsubscribeY = y.onChange(updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return \n * }\n * ```\n *\n * @internalremarks\n *\n * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.\n *\n * ```jsx\n * useOnChange(x, () => {})\n * ```\n *\n * @param subscriber - A function that receives the latest value.\n * @returns A function that, when called, will cancel this subscription.\n *\n * @public\n */\n MotionValue.prototype.onChange = function (subscription) {\n return this.updateSubscribers.add(subscription);\n };\n MotionValue.prototype.clearListeners = function () {\n this.updateSubscribers.clear();\n };\n /**\n * Adds a function that will be notified when the `MotionValue` requests a render.\n *\n * @param subscriber - A function that's provided the latest value.\n * @returns A function that, when called, will cancel this subscription.\n *\n * @internal\n */\n MotionValue.prototype.onRenderRequest = function (subscription) {\n // Render immediately\n subscription(this.get());\n return this.renderSubscribers.add(subscription);\n };\n /**\n * Attaches a passive effect to the `MotionValue`.\n *\n * @internal\n */\n MotionValue.prototype.attach = function (passiveEffect) {\n this.passiveEffect = passiveEffect;\n };\n /**\n * Sets the state of the `MotionValue`.\n *\n * @remarks\n *\n * ```jsx\n * const x = useMotionValue(0)\n * x.set(10)\n * ```\n *\n * @param latest - Latest value to set.\n * @param render - Whether to notify render subscribers. Defaults to `true`\n *\n * @public\n */\n MotionValue.prototype.set = function (v, render) {\n if (render === void 0) { render = true; }\n if (!render || !this.passiveEffect) {\n this.updateAndNotify(v, render);\n }\n else {\n this.passiveEffect(v, this.updateAndNotify);\n }\n };\n /**\n * Returns the latest state of `MotionValue`\n *\n * @returns - The latest state of `MotionValue`\n *\n * @public\n */\n MotionValue.prototype.get = function () {\n return this.current;\n };\n /**\n * @public\n */\n MotionValue.prototype.getPrevious = function () {\n return this.prev;\n };\n /**\n * Returns the latest velocity of `MotionValue`\n *\n * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.\n *\n * @public\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\n ? // These casts could be avoided if parseFloat would be typed better\n popmotion.velocityPerSecond(parseFloat(this.current) -\n parseFloat(this.prev), this.timeDelta)\n : 0;\n };\n /**\n * Registers a new animation to control this `MotionValue`. Only one\n * animation can drive a `MotionValue` at one time.\n *\n * ```jsx\n * value.start()\n * ```\n *\n * @param animation - A function that starts the provided animation\n *\n * @internal\n */\n MotionValue.prototype.start = function (animation) {\n var _this = this;\n this.stop();\n return new Promise(function (resolve) {\n _this.hasAnimated = true;\n _this.stopAnimation = animation(resolve);\n }).then(function () { return _this.clearAnimation(); });\n };\n /**\n * Stop the currently active animation.\n *\n * @public\n */\n MotionValue.prototype.stop = function () {\n if (this.stopAnimation)\n this.stopAnimation();\n this.clearAnimation();\n };\n /**\n * Returns `true` if this value is currently animating.\n *\n * @public\n */\n MotionValue.prototype.isAnimating = function () {\n return !!this.stopAnimation;\n };\n MotionValue.prototype.clearAnimation = function () {\n this.stopAnimation = null;\n };\n /**\n * Destroy and clean up subscribers to this `MotionValue`.\n *\n * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically\n * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually\n * created a `MotionValue` via the `motionValue` function.\n *\n * @public\n */\n MotionValue.prototype.destroy = function () {\n this.updateSubscribers.clear();\n this.renderSubscribers.clear();\n this.stop();\n };\n return MotionValue;\n}());\n/**\n * @internal\n */\nfunction motionValue(init) {\n return new MotionValue(init);\n}\n\n/**\n * Tests a provided value against a ValueType\n */\nvar testValueType = function (v) { return function (type) { return type.test(v); }; };\n\n/**\n * ValueType for \"auto\"\n */\nvar auto = {\n test: function (v) { return v === \"auto\"; },\n parse: function (v) { return v; },\n};\n\n/**\n * A list of value types commonly used for dimensions\n */\nvar dimensionValueTypes = [styleValueTypes.number, styleValueTypes.px, styleValueTypes.percent, styleValueTypes.degrees, styleValueTypes.vw, styleValueTypes.vh, auto];\n/**\n * Tests a dimensional value against the list of dimension ValueTypes\n */\nvar findDimensionValueType = function (v) {\n return dimensionValueTypes.find(testValueType(v));\n};\n\n/**\n * A list of all ValueTypes\n */\nvar valueTypes = tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(dimensionValueTypes)), [styleValueTypes.color, styleValueTypes.complex]);\n/**\n * Tests a value against the list of ValueTypes\n */\nvar findValueType = function (v) { return valueTypes.find(testValueType(v)); };\n\n/**\n * Set VisualElement's MotionValue, creating a new MotionValue for it if\n * it doesn't exist.\n */\nfunction setMotionValue(visualElement, key, value) {\n if (visualElement.hasValue(key)) {\n visualElement.getValue(key).set(value);\n }\n else {\n visualElement.addValue(key, motionValue(value));\n }\n}\nfunction setTarget(visualElement, definition) {\n var resolved = resolveVariant(visualElement, definition);\n var _a = resolved\n ? visualElement.makeTargetAnimatable(resolved, false)\n : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = tslib.__rest(_a, [\"transitionEnd\", \"transition\"]);\n target = tslib.__assign(tslib.__assign({}, target), transitionEnd);\n for (var key in target) {\n var value = resolveFinalValueInKeyframes(target[key]);\n setMotionValue(visualElement, key, value);\n }\n}\nfunction setVariants(visualElement, variantLabels) {\n var reversedLabels = tslib.__spreadArray([], tslib.__read(variantLabels)).reverse();\n reversedLabels.forEach(function (key) {\n var _a;\n var variant = visualElement.getVariant(key);\n variant && setTarget(visualElement, variant);\n (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {\n setVariants(child, variantLabels);\n });\n });\n}\nfunction setValues(visualElement, definition) {\n if (Array.isArray(definition)) {\n return setVariants(visualElement, definition);\n }\n else if (typeof definition === \"string\") {\n return setVariants(visualElement, [definition]);\n }\n else {\n setTarget(visualElement, definition);\n }\n}\nfunction checkTargetForNewValues(visualElement, target, origin) {\n var _a, _b, _c;\n var _d;\n var newValueKeys = Object.keys(target).filter(function (key) { return !visualElement.hasValue(key); });\n var numNewValues = newValueKeys.length;\n if (!numNewValues)\n return;\n for (var i = 0; i < numNewValues; i++) {\n var key = newValueKeys[i];\n var targetValue = target[key];\n var value = null;\n /**\n * If the target is a series of keyframes, we can use the first value\n * in the array. If this first value is null, we'll still need to read from the DOM.\n */\n if (Array.isArray(targetValue)) {\n value = targetValue[0];\n }\n /**\n * If the target isn't keyframes, or the first keyframe was null, we need to\n * first check if an origin value was explicitly defined in the transition as \"from\",\n * if not read the value from the DOM. As an absolute fallback, take the defined target value.\n */\n if (value === null) {\n value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];\n }\n /**\n * If value is still undefined or null, ignore it. Preferably this would throw,\n * but this was causing issues in Framer.\n */\n if (value === undefined || value === null)\n continue;\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 }\n else if (!findValueType(value) && styleValueTypes.complex.test(targetValue)) {\n value = getAnimatableNone(key, targetValue);\n }\n visualElement.addValue(key, motionValue(value));\n (_c = (_d = origin)[key]) !== null && _c !== void 0 ? _c : (_d[key] = value);\n visualElement.setBaseTarget(key, value);\n }\n}\nfunction getOriginFromTransition(key, transition) {\n if (!transition)\n return;\n var valueTransition = transition[key] || transition[\"default\"] || transition;\n return valueTransition.from;\n}\nfunction getOrigin(target, transition, visualElement) {\n var _a, _b;\n var origin = {};\n for (var key in target) {\n origin[key] =\n (_a = getOriginFromTransition(key, transition)) !== null && _a !== void 0 ? _a : (_b = visualElement.getValue(key)) === null || _b === void 0 ? void 0 : _b.get();\n }\n return origin;\n}\n\n/**\n * @internal\n */\nfunction animateVisualElement(visualElement, definition, options) {\n if (options === void 0) { options = {}; }\n visualElement.notifyAnimationStart();\n var animation;\n if (Array.isArray(definition)) {\n var animations = definition.map(function (variant) {\n return animateVariant(visualElement, variant, options);\n });\n animation = Promise.all(animations);\n }\n else if (typeof definition === \"string\") {\n animation = animateVariant(visualElement, definition, options);\n }\n else {\n var resolvedDefinition = typeof definition === \"function\"\n ? resolveVariant(visualElement, definition, options.custom)\n : definition;\n animation = animateTarget(visualElement, resolvedDefinition, options);\n }\n return animation.then(function () {\n return visualElement.notifyAnimationComplete(definition);\n });\n}\nfunction animateVariant(visualElement, variant, options) {\n var _a;\n if (options === void 0) { options = {}; }\n var resolved = resolveVariant(visualElement, variant, options.custom);\n var _b = (resolved || {}).transition, transition = _b === void 0 ? visualElement.getDefaultTransition() || {} : _b;\n if (options.transitionOverride) {\n transition = options.transitionOverride;\n }\n /**\n * If we have a variant, create a callback that runs it as an animation.\n * Otherwise, we resolve a Promise immediately for a composable no-op.\n */\n var getAnimation = resolved\n ? function () { return animateTarget(visualElement, resolved, options); }\n : function () { return Promise.resolve(); };\n /**\n * If we have children, create a callback that runs all their animations.\n * Otherwise, we resolve a Promise immediately for a composable no-op.\n */\n var getChildAnimations = ((_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.size)\n ? function (forwardDelay) {\n if (forwardDelay === void 0) { forwardDelay = 0; }\n var _a = transition.delayChildren, delayChildren = _a === void 0 ? 0 : _a, staggerChildren = transition.staggerChildren, staggerDirection = transition.staggerDirection;\n return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);\n }\n : function () { return Promise.resolve(); };\n /**\n * If the transition explicitly defines a \"when\" option, we need to resolve either\n * this animation or all children animations before playing the other.\n */\n var when = transition.when;\n if (when) {\n var _c = tslib.__read(when === \"beforeChildren\"\n ? [getAnimation, getChildAnimations]\n : [getChildAnimations, getAnimation], 2), first = _c[0], last = _c[1];\n return first().then(last);\n }\n else {\n return Promise.all([getAnimation(), getChildAnimations(options.delay)]);\n }\n}\n/**\n * @internal\n */\nfunction animateTarget(visualElement, definition, _a) {\n var _b;\n var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;\n var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = tslib.__rest(_e, [\"transition\", \"transitionEnd\"]);\n if (transitionOverride)\n transition = transitionOverride;\n var animations = [];\n var animationTypeState = type && ((_b = visualElement.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]);\n for (var key in target) {\n var value = visualElement.getValue(key);\n var valueTarget = target[key];\n if (!value ||\n valueTarget === undefined ||\n (animationTypeState &&\n shouldBlockAnimation(animationTypeState, key))) {\n continue;\n }\n var animation = startAnimation(key, value, valueTarget, tslib.__assign({ delay: delay }, transition));\n animations.push(animation);\n }\n return Promise.all(animations).then(function () {\n transitionEnd && setTarget(visualElement, transitionEnd);\n });\n}\nfunction animateChildren(visualElement, variant, delayChildren, staggerChildren, staggerDirection, options) {\n if (delayChildren === void 0) { delayChildren = 0; }\n if (staggerChildren === void 0) { staggerChildren = 0; }\n if (staggerDirection === void 0) { staggerDirection = 1; }\n var animations = [];\n var maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;\n var generateStaggerDuration = staggerDirection === 1\n ? function (i) {\n if (i === void 0) { i = 0; }\n return i * staggerChildren;\n }\n : function (i) {\n if (i === void 0) { i = 0; }\n return maxStaggerDuration - i * staggerChildren;\n };\n Array.from(visualElement.variantChildren)\n .sort(sortByTreeOrder)\n .forEach(function (child, i) {\n animations.push(animateVariant(child, variant, tslib.__assign(tslib.__assign({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function () { return child.notifyAnimationComplete(variant); }));\n });\n return Promise.all(animations);\n}\nfunction stopAnimation(visualElement) {\n visualElement.forEachValue(function (value) { return value.stop(); });\n}\nfunction sortByTreeOrder(a, b) {\n return a.sortNodePosition(b);\n}\n/**\n * Decide whether we should block this animation. Previously, we achieved this\n * just by checking whether the key was listed in protectedKeys, but this\n * posed problems if an animation was triggered by afterChildren and protectedKeys\n * had been set to true in the meantime.\n */\nfunction shouldBlockAnimation(_a, key) {\n var protectedKeys = _a.protectedKeys, needsAnimating = _a.needsAnimating;\n var shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;\n needsAnimating[key] = false;\n return shouldBlock;\n}\n\nvar variantPriorityOrder = [\n AnimationType.Animate,\n AnimationType.Hover,\n AnimationType.Tap,\n AnimationType.Drag,\n AnimationType.Focus,\n AnimationType.Exit,\n];\nvar reversePriorityOrder = tslib.__spreadArray([], tslib.__read(variantPriorityOrder)).reverse();\nvar numAnimationTypes = variantPriorityOrder.length;\nfunction animateList(visualElement) {\n return function (animations) {\n return Promise.all(animations.map(function (_a) {\n var animation = _a.animation, options = _a.options;\n return animateVisualElement(visualElement, animation, options);\n }));\n };\n}\nfunction createAnimationState(visualElement) {\n var animate = animateList(visualElement);\n var state = createState();\n var allAnimatedKeys = {};\n var isInitialRender = true;\n /**\n * This function will be used to reduce the animation definitions for\n * each active animation type into an object of resolved values for it.\n */\n var buildResolvedTypeValues = function (acc, definition) {\n var resolved = resolveVariant(visualElement, definition);\n if (resolved) {\n resolved.transition; var transitionEnd = resolved.transitionEnd, target = tslib.__rest(resolved, [\"transition\", \"transitionEnd\"]);\n acc = tslib.__assign(tslib.__assign(tslib.__assign({}, acc), target), transitionEnd);\n }\n return acc;\n };\n function isAnimated(key) {\n return allAnimatedKeys[key] !== undefined;\n }\n /**\n * This just allows us to inject mocked animation functions\n * @internal\n */\n function setAnimateFunction(makeAnimator) {\n animate = makeAnimator(visualElement);\n }\n /**\n * When we receive new props, we need to:\n * 1. Create a list of protected keys for each type. This is a directory of\n * value keys that are currently being \"handled\" by types of a higher priority\n * so that whenever an animation is played of a given type, these values are\n * protected from being animated.\n * 2. Determine if an animation type needs animating.\n * 3. Determine if any values have been removed from a type and figure out\n * what to animate those to.\n */\n function animateChanges(options, changedActiveType) {\n var _a;\n var props = visualElement.getProps();\n var context = visualElement.getVariantContext(true) || {};\n /**\n * A list of animations that we'll build into as we iterate through the animation\n * types. This will get executed at the end of the function.\n */\n var animations = [];\n /**\n * Keep track of which values have been removed. Then, as we hit lower priority\n * animation types, we can check if they contain removed values and animate to that.\n */\n var removedKeys = new Set();\n /**\n * A dictionary of all encountered keys. This is an object to let us build into and\n * copy it without iteration. Each time we hit an animation type we set its protected\n * keys - the keys its not allowed to animate - to the latest version of this object.\n */\n var encounteredKeys = {};\n /**\n * If a variant has been removed at a given index, and this component is controlling\n * variant animations, we want to ensure lower-priority variants are forced to animate.\n */\n var removedVariantIndex = Infinity;\n var _loop_1 = function (i) {\n var type = reversePriorityOrder[i];\n var typeState = state[type];\n var prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type];\n var propIsVariant = isVariantLabel(prop);\n /**\n * If this type has *just* changed isActive status, set activeDelta\n * to that status. Otherwise set to null.\n */\n var activeDelta = type === changedActiveType ? typeState.isActive : null;\n if (activeDelta === false)\n removedVariantIndex = i;\n /**\n * If this prop is an inherited variant, rather than been set directly on the\n * component itself, we want to make sure we allow the parent to trigger animations.\n *\n * TODO: Can probably change this to a !isControllingVariants check\n */\n var isInherited = prop === context[type] && prop !== props[type] && propIsVariant;\n /**\n *\n */\n if (isInherited &&\n isInitialRender &&\n visualElement.manuallyAnimateOnMount) {\n isInherited = false;\n }\n /**\n * Set all encountered keys so far as the protected keys for this type. This will\n * be any key that has been animated or otherwise handled by active, higher-priortiy types.\n */\n typeState.protectedKeys = tslib.__assign({}, encounteredKeys);\n // Check if we can skip analysing this prop early\n if (\n // If it isn't active and hasn't *just* been set as inactive\n (!typeState.isActive && activeDelta === null) ||\n // If we didn't and don't have any defined prop for this animation type\n (!prop && !typeState.prevProp) ||\n // Or if the prop doesn't define an animation\n isAnimationControls(prop) ||\n typeof prop === \"boolean\") {\n return \"continue\";\n }\n /**\n * As we go look through the values defined on this type, if we detect\n * a changed value or a value that was removed in a higher priority, we set\n * this to true and add this prop to the animation list.\n */\n var shouldAnimateType = variantsHaveChanged(typeState.prevProp, prop) ||\n // If we're making this variant active, we want to always make it active\n (type === changedActiveType &&\n typeState.isActive &&\n !isInherited &&\n propIsVariant) ||\n // If we removed a higher-priority variant (i is in reverse order)\n (i > removedVariantIndex && propIsVariant);\n /**\n * As animations can be set as variant lists, variants or target objects, we\n * coerce everything to an array if it isn't one already\n */\n var definitionList = Array.isArray(prop) ? prop : [prop];\n /**\n * Build an object of all the resolved values. We'll use this in the subsequent\n * animateChanges calls to determine whether a value has changed.\n */\n var resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});\n if (activeDelta === false)\n resolvedValues = {};\n /**\n * Now we need to loop through all the keys in the prev prop and this prop,\n * and decide:\n * 1. If the value has changed, and needs animating\n * 2. If it has been removed, and needs adding to the removedKeys set\n * 3. If it has been removed in a higher priority type and needs animating\n * 4. If it hasn't been removed in a higher priority but hasn't changed, and\n * needs adding to the type's protectedKeys list.\n */\n var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;\n var allKeys = tslib.__assign(tslib.__assign({}, prevResolvedValues), resolvedValues);\n var markToAnimate = function (key) {\n shouldAnimateType = true;\n removedKeys.delete(key);\n typeState.needsAnimating[key] = true;\n };\n for (var key in allKeys) {\n var next = resolvedValues[key];\n var prev = prevResolvedValues[key];\n // If we've already handled this we can just skip ahead\n if (encounteredKeys.hasOwnProperty(key))\n continue;\n /**\n * If the value has changed, we probably want to animate it.\n */\n if (next !== prev) {\n /**\n * If both values are keyframes, we need to shallow compare them to\n * detect whether any value has changed. If it has, we animate it.\n */\n if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {\n if (!shallowCompare(next, prev)) {\n markToAnimate(key);\n }\n else {\n /**\n * If it hasn't changed, we want to ensure it doesn't animate by\n * adding it to the list of protected keys.\n */\n typeState.protectedKeys[key] = true;\n }\n }\n else if (next !== undefined) {\n // If next is defined and doesn't equal prev, it needs animating\n markToAnimate(key);\n }\n else {\n // If it's undefined, it's been removed.\n removedKeys.add(key);\n }\n }\n else if (next !== undefined && removedKeys.has(key)) {\n /**\n * If next hasn't changed and it isn't undefined, we want to check if it's\n * been removed by a higher priority\n */\n markToAnimate(key);\n }\n else {\n /**\n * If it hasn't changed, we add it to the list of protected values\n * to ensure it doesn't get animated.\n */\n typeState.protectedKeys[key] = true;\n }\n }\n /**\n * Update the typeState so next time animateChanges is called we can compare the\n * latest prop and resolvedValues to these.\n */\n typeState.prevProp = prop;\n typeState.prevResolvedValues = resolvedValues;\n /**\n *\n */\n if (typeState.isActive) {\n encounteredKeys = tslib.__assign(tslib.__assign({}, encounteredKeys), resolvedValues);\n }\n if (isInitialRender && visualElement.blockInitialAnimation) {\n shouldAnimateType = false;\n }\n /**\n * If this is an inherited prop we want to hard-block animations\n * TODO: Test as this should probably still handle animations triggered\n * by removed values?\n */\n if (shouldAnimateType && !isInherited) {\n animations.push.apply(animations, tslib.__spreadArray([], tslib.__read(definitionList.map(function (animation) { return ({\n animation: animation,\n options: tslib.__assign({ type: type }, options),\n }); }))));\n }\n };\n /**\n * Iterate through all animation types in reverse priority order. For each, we want to\n * detect which values it's handling and whether or not they've changed (and therefore\n * need to be animated). If any values have been removed, we want to detect those in\n * lower priority props and flag for animation.\n */\n for (var i = 0; i < numAnimationTypes; i++) {\n _loop_1(i);\n }\n allAnimatedKeys = tslib.__assign({}, encounteredKeys);\n /**\n * If there are some removed value that haven't been dealt with,\n * we need to create a new animation that falls back either to the value\n * defined in the style prop, or the last read value.\n */\n if (removedKeys.size) {\n var fallbackAnimation_1 = {};\n removedKeys.forEach(function (key) {\n var fallbackTarget = visualElement.getBaseTarget(key);\n if (fallbackTarget !== undefined) {\n fallbackAnimation_1[key] = fallbackTarget;\n }\n });\n animations.push({ animation: fallbackAnimation_1 });\n }\n var shouldAnimate = Boolean(animations.length);\n if (isInitialRender &&\n props.initial === false &&\n !visualElement.manuallyAnimateOnMount) {\n shouldAnimate = false;\n }\n isInitialRender = false;\n return shouldAnimate ? animate(animations) : Promise.resolve();\n }\n /**\n * Change whether a certain animation type is active.\n */\n function setActive(type, isActive, options) {\n var _a;\n // If the active state hasn't changed, we can safely do nothing here\n if (state[type].isActive === isActive)\n return Promise.resolve();\n // Propagate active change to children\n (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });\n state[type].isActive = isActive;\n return animateChanges(options, type);\n }\n return {\n isAnimated: isAnimated,\n animateChanges: animateChanges,\n setActive: setActive,\n setAnimateFunction: setAnimateFunction,\n getState: function () { return state; },\n };\n}\nfunction variantsHaveChanged(prev, next) {\n if (typeof next === \"string\") {\n return next !== prev;\n }\n else if (isVariantLabels(next)) {\n return !shallowCompare(next, prev);\n }\n return false;\n}\nfunction createTypeState(isActive) {\n if (isActive === void 0) { isActive = false; }\n return {\n isActive: isActive,\n protectedKeys: {},\n needsAnimating: {},\n prevResolvedValues: {},\n };\n}\nfunction createState() {\n var _a;\n return _a = {},\n _a[AnimationType.Animate] = createTypeState(true),\n _a[AnimationType.Hover] = createTypeState(),\n _a[AnimationType.Tap] = createTypeState(),\n _a[AnimationType.Drag] = createTypeState(),\n _a[AnimationType.Focus] = createTypeState(),\n _a[AnimationType.Exit] = createTypeState(),\n _a;\n}\n\nvar animations = {\n animation: makeRenderlessComponent(function (_a) {\n var visualElement = _a.visualElement, animate = _a.animate;\n /**\n * We dynamically generate the AnimationState manager as it contains a reference\n * to the underlying animation library. We only want to load that if we load this,\n * so people can optionally code split it out using the `m` component.\n */\n visualElement.animationState || (visualElement.animationState = createAnimationState(visualElement));\n /**\n * Subscribe any provided AnimationControls to the component's VisualElement\n */\n if (isAnimationControls(animate)) {\n React.useEffect(function () { return animate.subscribe(visualElement); }, [animate]);\n }\n }),\n exit: makeRenderlessComponent(function (props) {\n var custom = props.custom, visualElement = props.visualElement;\n var _a = tslib.__read(usePresence(), 2), isPresent = _a[0], onExitComplete = _a[1];\n var presenceContext = React.useContext(PresenceContext);\n React.useEffect(function () {\n var _a, _b;\n var animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom });\n !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(onExitComplete));\n }, [isPresent]);\n }),\n};\n\n/**\n * @internal\n */\nvar PanSession = /** @class */ (function () {\n function PanSession(event, handlers, _a) {\n var _this = this;\n var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;\n /**\n * @internal\n */\n this.startEvent = null;\n /**\n * @internal\n */\n this.lastMoveEvent = null;\n /**\n * @internal\n */\n this.lastMoveEventInfo = null;\n /**\n * @internal\n */\n this.handlers = {};\n this.updatePoint = function () {\n if (!(_this.lastMoveEvent && _this.lastMoveEventInfo))\n return;\n var info = getPanInfo(_this.lastMoveEventInfo, _this.history);\n var isPanStarted = _this.startEvent !== null;\n // 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 var isDistancePastThreshold = popmotion.distance(info.offset, { x: 0, y: 0 }) >= 3;\n if (!isPanStarted && !isDistancePastThreshold)\n return;\n var point = info.point;\n var timestamp = sync.getFrameData().timestamp;\n _this.history.push(tslib.__assign(tslib.__assign({}, point), { timestamp: timestamp }));\n var _a = _this.handlers, onStart = _a.onStart, onMove = _a.onMove;\n if (!isPanStarted) {\n onStart && onStart(_this.lastMoveEvent, info);\n _this.startEvent = _this.lastMoveEvent;\n }\n onMove && onMove(_this.lastMoveEvent, info);\n };\n this.handlePointerMove = function (event, info) {\n _this.lastMoveEvent = event;\n _this.lastMoveEventInfo = transformPoint(info, _this.transformPagePoint);\n // Because Safari doesn't trigger mouseup events when it's above a `