\n {_children}\n \n )\n },\n)\n\nIconButton.displayName = \"IconButton\"\n","import type { Target, TargetAndTransition, Transition } from \"framer-motion\"\n\nexport type TransitionProperties = {\n /**\n * Custom `transition` definition for `enter` and `exit`\n */\n transition?: TransitionConfig\n /**\n * Custom `transitionEnd` definition for `enter` and `exit`\n */\n transitionEnd?: TransitionEndConfig\n /**\n * Custom `delay` definition for `enter` and `exit`\n */\n delay?: number | DelayConfig\n}\n\ntype TargetResolver = (\n props: P & TransitionProperties,\n) => TargetAndTransition\n\ntype Variant
= TargetAndTransition | TargetResolver
\n\nexport type Variants
= {\n enter: Variant
\n exit: Variant
\n initial?: Variant
\n}\n\ntype WithMotionState
= Partial>\n\nexport type TransitionConfig = WithMotionState\n\nexport type TransitionEndConfig = WithMotionState\n\nexport type DelayConfig = WithMotionState\n\nexport const TRANSITION_EASINGS = {\n ease: [0.25, 0.1, 0.25, 1],\n easeIn: [0.4, 0, 1, 1],\n easeOut: [0, 0, 0.2, 1],\n easeInOut: [0.4, 0, 0.2, 1],\n} as const\n\nexport const TRANSITION_VARIANTS = {\n scale: {\n enter: { scale: 1 },\n exit: { scale: 0.95 },\n },\n fade: {\n enter: { opacity: 1 },\n exit: { opacity: 0 },\n },\n pushLeft: {\n enter: { x: \"100%\" },\n exit: { x: \"-30%\" },\n },\n pushRight: {\n enter: { x: \"-100%\" },\n exit: { x: \"30%\" },\n },\n pushUp: {\n enter: { y: \"100%\" },\n exit: { y: \"-30%\" },\n },\n pushDown: {\n enter: { y: \"-100%\" },\n exit: { y: \"30%\" },\n },\n slideLeft: {\n position: { left: 0, top: 0, bottom: 0, width: \"100%\" },\n enter: { x: 0, y: 0 },\n exit: { x: \"-100%\", y: 0 },\n },\n slideRight: {\n position: { right: 0, top: 0, bottom: 0, width: \"100%\" },\n enter: { x: 0, y: 0 },\n exit: { x: \"100%\", y: 0 },\n },\n slideUp: {\n position: { top: 0, left: 0, right: 0, maxWidth: \"100vw\" },\n enter: { x: 0, y: 0 },\n exit: { x: 0, y: \"-100%\" },\n },\n slideDown: {\n position: { bottom: 0, left: 0, right: 0, maxWidth: \"100vw\" },\n enter: { x: 0, y: 0 },\n exit: { x: 0, y: \"100%\" },\n },\n}\n\nexport type SlideDirection = \"top\" | \"left\" | \"bottom\" | \"right\"\n\nexport function getSlideTransition(options?: { direction?: SlideDirection }) {\n const side = options?.direction ?? \"right\"\n switch (side) {\n case \"right\":\n return TRANSITION_VARIANTS.slideRight\n case \"left\":\n return TRANSITION_VARIANTS.slideLeft\n case \"bottom\":\n return TRANSITION_VARIANTS.slideDown\n case \"top\":\n return TRANSITION_VARIANTS.slideUp\n default:\n return TRANSITION_VARIANTS.slideRight\n }\n}\n\nexport const TRANSITION_DEFAULTS = {\n enter: {\n duration: 0.2,\n ease: TRANSITION_EASINGS.easeOut,\n },\n exit: {\n duration: 0.1,\n ease: TRANSITION_EASINGS.easeIn,\n },\n} as const\n\nexport type WithTransitionConfig = Omit &\n TransitionProperties & {\n /**\n * If `true`, the element will unmount when `in={false}` and animation is done\n */\n unmountOnExit?: boolean\n /**\n * Show the component; triggers when enter or exit states\n */\n in?: boolean\n }\n\nexport const withDelay = {\n enter: (\n transition: Transition,\n delay?: number | DelayConfig,\n ): Transition & { delay: number | undefined } => ({\n ...transition,\n delay: typeof delay === \"number\" ? delay : delay?.[\"enter\"],\n }),\n exit: (\n transition: Transition,\n delay?: number | DelayConfig,\n ): Transition & { delay: number | undefined } => ({\n ...transition,\n delay: typeof delay === \"number\" ? delay : delay?.[\"exit\"],\n }),\n}\n","const isBrowser = typeof document !== \"undefined\";\n\nexport { isBrowser };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","import { useRef } from 'react';\nimport { useIsomorphicLayoutEffect } from './use-isomorphic-effect.mjs';\n\nfunction useIsMounted() {\n const isMounted = useRef(false);\n useIsomorphicLayoutEffect(() => {\n isMounted.current = true;\n return () => {\n isMounted.current = false;\n };\n }, []);\n return isMounted;\n}\n\nexport { useIsMounted };\n","const noop = (any) => any;\n\nexport { noop };\n","export default function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}","import toPropertyKey from \"./toPropertyKey.js\";\nfunction _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, toPropertyKey(descriptor.key), descriptor);\n }\n}\nexport default function _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n Object.defineProperty(Constructor, \"prototype\", {\n writable: false\n });\n return Constructor;\n}","class Queue {\n constructor() {\n this.order = [];\n this.scheduled = new Set();\n }\n add(process) {\n if (!this.scheduled.has(process)) {\n this.scheduled.add(process);\n this.order.push(process);\n return true;\n }\n }\n remove(process) {\n const index = this.order.indexOf(process);\n if (index !== -1) {\n this.order.splice(index, 1);\n this.scheduled.delete(process);\n }\n }\n clear() {\n this.order.length = 0;\n this.scheduled.clear();\n }\n}\nfunction createRenderStep(runNextFrame) {\n /**\n * We create and reuse two queues, one to queue jobs for the current frame\n * and one for the next. We reuse to avoid triggering GC after x frames.\n */\n let thisFrame = new Queue();\n let nextFrame = new Queue();\n let numToRun = 0;\n /**\n * Track whether we're currently processing jobs in this step. This way\n * we can decide whether to schedule new jobs for this frame or next.\n */\n let isProcessing = false;\n let flushNextFrame = false;\n /**\n * A set of processes which were marked keepAlive when scheduled.\n */\n const toKeepAlive = new WeakSet();\n const step = {\n /**\n * Schedule a process to run on the next frame.\n */\n schedule: (callback, keepAlive = false, immediate = false) => {\n const addToCurrentFrame = immediate && isProcessing;\n const queue = addToCurrentFrame ? thisFrame : nextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n if (queue.add(callback) && addToCurrentFrame && isProcessing) {\n // If we're adding it to the currently running queue, update its measured size\n numToRun = thisFrame.order.length;\n }\n return callback;\n },\n /**\n * Cancel the provided callback from running on the next frame.\n */\n cancel: (callback) => {\n nextFrame.remove(callback);\n toKeepAlive.delete(callback);\n },\n /**\n * Execute all schedule callbacks.\n */\n process: (frameData) => {\n /**\n * If we're already processing we've probably been triggered by a flushSync\n * inside an existing process. Instead of executing, mark flushNextFrame\n * as true and ensure we flush the following frame at the end of this one.\n */\n if (isProcessing) {\n flushNextFrame = true;\n return;\n }\n isProcessing = true;\n [thisFrame, nextFrame] = [nextFrame, thisFrame];\n // Clear the next frame queue\n nextFrame.clear();\n // Execute this frame\n numToRun = thisFrame.order.length;\n if (numToRun) {\n for (let i = 0; i < numToRun; i++) {\n const callback = thisFrame.order[i];\n callback(frameData);\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n }\n }\n isProcessing = false;\n if (flushNextFrame) {\n flushNextFrame = false;\n step.process(frameData);\n }\n },\n };\n return step;\n}\n\nexport { createRenderStep };\n","import { createRenderStep } from './render-step.mjs';\n\nconst stepsOrder = [\n \"prepare\",\n \"read\",\n \"update\",\n \"preRender\",\n \"render\",\n \"postRender\",\n];\nconst maxElapsed = 40;\nfunction createRenderBatcher(scheduleNextBatch, allowKeepAlive) {\n let runNextFrame = false;\n let useDefaultElapsed = true;\n const state = {\n delta: 0,\n timestamp: 0,\n isProcessing: false,\n };\n const steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(() => (runNextFrame = true));\n return acc;\n }, {});\n const processStep = (stepId) => steps[stepId].process(state);\n const processBatch = () => {\n const timestamp = performance.now();\n runNextFrame = false;\n state.delta = useDefaultElapsed\n ? 1000 / 60\n : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);\n state.timestamp = timestamp;\n state.isProcessing = true;\n stepsOrder.forEach(processStep);\n state.isProcessing = false;\n if (runNextFrame && allowKeepAlive) {\n useDefaultElapsed = false;\n scheduleNextBatch(processBatch);\n }\n };\n const wake = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!state.isProcessing) {\n scheduleNextBatch(processBatch);\n }\n };\n const schedule = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n wake();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n }, {});\n const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process));\n return { schedule, cancel, state, steps };\n}\n\nexport { createRenderBatcher, stepsOrder };\n","import { noop } from '../utils/noop.mjs';\nimport { createRenderBatcher } from './batcher.mjs';\n\nconst { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== \"undefined\" ? requestAnimationFrame : noop, true);\n\nexport { cancelFrame, frame, frameData, steps };\n","import { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","import { useRef } from 'react';\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 const ref = useRef(null);\n if (ref.current === null) {\n ref.current = init();\n }\n return ref.current;\n}\n\nexport { useConstant };\n","export default function _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n return _setPrototypeOf(o, p);\n}","import setPrototypeOf from \"./setPrototypeOf.js\";\nexport default function _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n writable: true,\n configurable: true\n }\n });\n Object.defineProperty(subClass, \"prototype\", {\n writable: false\n });\n if (superClass) setPrototypeOf(subClass, superClass);\n}","export default function _getPrototypeOf(o) {\n _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}","export default function _isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n try {\n Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}","import _typeof from \"./typeof.js\";\nimport assertThisInitialized from \"./assertThisInitialized.js\";\nexport default function _possibleConstructorReturn(self, call) {\n if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n return call;\n } else if (call !== void 0) {\n throw new TypeError(\"Derived constructors may only return object or undefined\");\n }\n return assertThisInitialized(self);\n}","export default function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return self;\n}","import getPrototypeOf from \"./getPrototypeOf.js\";\nimport isNativeReflectConstruct from \"./isNativeReflectConstruct.js\";\nimport possibleConstructorReturn from \"./possibleConstructorReturn.js\";\nexport default function _createSuper(Derived) {\n var hasNativeReflectConstruct = isNativeReflectConstruct();\n return function _createSuperInternal() {\n var Super = getPrototypeOf(Derived),\n result;\n if (hasNativeReflectConstruct) {\n var NewTarget = getPrototypeOf(this).constructor;\n result = Reflect.construct(Super, arguments, NewTarget);\n } else {\n result = Super.apply(this, arguments);\n }\n return possibleConstructorReturn(this, result);\n };\n}","import * as React from 'react';\nimport { useId, useRef, useInsertionEffect } from 'react';\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n getSnapshotBeforeUpdate(prevProps) {\n const element = this.props.childRef.current;\n if (element && prevProps.isPresent && !this.props.isPresent) {\n const size = this.props.sizeRef.current;\n size.height = element.offsetHeight || 0;\n size.width = element.offsetWidth || 0;\n size.top = element.offsetTop;\n size.left = element.offsetLeft;\n }\n return null;\n }\n /**\n * Required with getSnapshotBeforeUpdate to stop React complaining.\n */\n componentDidUpdate() { }\n render() {\n return this.props.children;\n }\n}\nfunction PopChild({ children, isPresent }) {\n const id = useId();\n const ref = useRef(null);\n const size = useRef({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n });\n /**\n * We create and inject a style block so we can apply this explicit\n * sizing in a non-destructive manner by just deleting the style block.\n *\n * We can't apply size via render as the measurement happens\n * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n * styles directly on the DOM node, we might be overwriting\n * styles set via the style prop.\n */\n useInsertionEffect(() => {\n const { width, height, top, left } = size.current;\n if (isPresent || !ref.current || !width || !height)\n return;\n ref.current.dataset.motionPopId = id;\n const style = document.createElement(\"style\");\n document.head.appendChild(style);\n if (style.sheet) {\n style.sheet.insertRule(`\n [data-motion-pop-id=\"${id}\"] {\n position: absolute !important;\n width: ${width}px !important;\n height: ${height}px !important;\n top: ${top}px !important;\n left: ${left}px !important;\n }\n `);\n }\n return () => {\n document.head.removeChild(style);\n };\n }, [isPresent]);\n return (React.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React.cloneElement(children, { ref })));\n}\n\nexport { PopChild };\n","import * as React from 'react';\nimport { useId, useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PopChild } from './PopChild.mjs';\n\nconst PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {\n const presenceChildren = useConstant(newChildrenMap);\n const id = useId();\n const context = useMemo(() => ({\n id,\n initial,\n isPresent,\n custom,\n onExitComplete: (childId) => {\n presenceChildren.set(childId, true);\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete)\n return; // can stop searching when any is incomplete\n }\n onExitComplete && onExitComplete();\n },\n register: (childId) => {\n presenceChildren.set(childId, false);\n return () => presenceChildren.delete(childId);\n },\n }), \n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n presenceAffectsLayout ? undefined : [isPresent]);\n useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n }, [isPresent]);\n /**\n * If there's no `motion` components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !isPresent &&\n !presenceChildren.size &&\n onExitComplete &&\n onExitComplete();\n }, [isPresent]);\n if (mode === \"popLayout\") {\n children = React.createElement(PopChild, { isPresent: isPresent }, children);\n }\n return (React.createElement(PresenceContext.Provider, { value: context }, children));\n};\nfunction newChildrenMap() {\n return new Map();\n}\n\nexport { PresenceChild };\n","import { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","import { noop } from './noop.mjs';\n\nlet warning = noop;\nlet invariant = noop;\nif (process.env.NODE_ENV !== \"production\") {\n warning = (check, message) => {\n if (!check && typeof console !== \"undefined\") {\n console.warn(message);\n }\n };\n invariant = (check, message) => {\n if (!check) {\n throw new Error(message);\n }\n };\n}\n\nexport { invariant, warning };\n","import * as React from 'react';\nimport { useContext, useRef, cloneElement, Children, isValidElement } from 'react';\nimport { useForceUpdate } from '../../utils/use-force-update.mjs';\nimport { useIsMounted } from '../../utils/use-is-mounted.mjs';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';\nimport { invariant } from '../../utils/errors.mjs';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction updateChildLookup(children, allChildren) {\n children.forEach((child) => {\n const key = getChildKey(child);\n allChildren.set(key, child);\n });\n}\nfunction onlyElements(children) {\n const filtered = [];\n // We use forEach here instead of map as map mutates the component key by preprending `.$`\n Children.forEach(children, (child) => {\n if (isValidElement(child))\n filtered.push(child);\n });\n return filtered;\n}\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n * \n * {items.map(item => (\n * \n * ))}\n * \n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = \"sync\", }) => {\n invariant(!exitBeforeEnter, \"Replace exitBeforeEnter with mode='wait'\");\n // We want to force a re-render once all exiting animations have finished. We\n // either use a local forceRender function, or one from a parent context if it exists.\n const forceRender = useContext(LayoutGroupContext).forceRender || useForceUpdate()[0];\n const isMounted = useIsMounted();\n // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key\n const filteredChildren = onlyElements(children);\n let childrenToRender = filteredChildren;\n const exitingChildren = useRef(new Map()).current;\n // Keep a living record of the children we're actually rendering so we\n // can diff to figure out which are entering and exiting\n const presentChildren = useRef(childrenToRender);\n // A lookup table to quickly reference components by key\n const allChildren = useRef(new Map()).current;\n // If this is the initial component render, just deal with logic surrounding whether\n // we play onMount animations or not.\n const isInitialRender = useRef(true);\n useIsomorphicLayoutEffect(() => {\n isInitialRender.current = false;\n updateChildLookup(filteredChildren, allChildren);\n presentChildren.current = childrenToRender;\n });\n useUnmountEffect(() => {\n isInitialRender.current = true;\n allChildren.clear();\n exitingChildren.clear();\n });\n if (isInitialRender.current) {\n return (React.createElement(React.Fragment, null, childrenToRender.map((child) => (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)))));\n }\n // If this is a subsequent render, deal with entering and exiting children\n childrenToRender = [...childrenToRender];\n // Diff the keys of the currently-present and target children to update our\n // exiting list.\n const presentKeys = presentChildren.current.map(getChildKey);\n const targetKeys = filteredChildren.map(getChildKey);\n // Diff the present children with our target children and mark those that are exiting\n const numPresent = presentKeys.length;\n for (let i = 0; i < numPresent; i++) {\n const key = presentKeys[i];\n if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {\n exitingChildren.set(key, undefined);\n }\n }\n // If we currently have exiting children, and we're deferring rendering incoming children\n // until after all current children have exiting, empty the childrenToRender array\n if (mode === \"wait\" && exitingChildren.size) {\n childrenToRender = [];\n }\n // Loop through all currently exiting components and clone them to overwrite `animate`\n // with any `exit` prop they might have defined.\n exitingChildren.forEach((component, key) => {\n // If this component is actually entering again, early return\n if (targetKeys.indexOf(key) !== -1)\n return;\n const child = allChildren.get(key);\n if (!child)\n return;\n const insertionIndex = presentKeys.indexOf(key);\n let exitingComponent = component;\n if (!exitingComponent) {\n const onExit = () => {\n allChildren.delete(key);\n exitingChildren.delete(key);\n // Remove this child from the present children\n const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);\n presentChildren.current.splice(removeIndex, 1);\n // Defer re-rendering until all exiting children have indeed left\n if (!exitingChildren.size) {\n presentChildren.current = filteredChildren;\n if (isMounted.current === false)\n return;\n forceRender();\n onExitComplete && onExitComplete();\n }\n };\n exitingComponent = (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));\n exitingChildren.set(key, exitingComponent);\n }\n childrenToRender.splice(insertionIndex, 0, exitingComponent);\n });\n // Add `MotionContext` even to children that don't need it to ensure we're rendering\n // the same tree between renders\n childrenToRender = childrenToRender.map((child) => {\n const key = child.key;\n return exitingChildren.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));\n });\n if (process.env.NODE_ENV !== \"production\" &&\n mode === \"wait\" &&\n childrenToRender.length > 1) {\n console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n }\n return (React.createElement(React.Fragment, null, exitingChildren.size\n ? childrenToRender\n : childrenToRender.map((child) => cloneElement(child))));\n};\n\nexport { AnimatePresence };\n","import { useEffect } from 'react';\n\nfunction useUnmountEffect(callback) {\n return useEffect(() => () => callback(), []);\n}\n\nexport { useUnmountEffect };\n","import { useState, useCallback } from 'react';\nimport { useIsMounted } from './use-is-mounted.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\nfunction useForceUpdate() {\n const isMounted = useIsMounted();\n const [forcedRenderCount, setForcedRenderCount] = useState(0);\n const forceRender = useCallback(() => {\n isMounted.current && setForcedRenderCount(forcedRenderCount + 1);\n }, [forcedRenderCount]);\n /**\n * Defer this to the end of the next animation frame in case there are multiple\n * synchronous calls.\n */\n const deferredForceRender = useCallback(() => frame.postRender(forceRender), [forceRender]);\n return [deferredForceRender, forcedRenderCount];\n}\n\nexport { useForceUpdate };\n","import { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n transformPagePoint: (p) => p,\n isStatic: false,\n reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","import { createContext } from 'react';\n\nconst MotionContext = createContext({});\n\nexport { MotionContext };\n","import { createContext } from 'react';\n\nconst LazyContext = createContext({ strict: false });\n\nexport { LazyContext };\n","function isRefObject(ref) {\n return (typeof ref === \"object\" &&\n Object.prototype.hasOwnProperty.call(ref, \"current\"));\n}\n\nexport { isRefObject };\n","/**\n * Decides if the supplied variable is variant label\n */\nfunction isVariantLabel(v) {\n return typeof v === \"string\" || Array.isArray(v);\n}\n\nexport { isVariantLabel };\n","function isAnimationControls(v) {\n return typeof v === \"object\" && typeof v.start === \"function\";\n}\n\nexport { isAnimationControls };\n","const variantPriorityOrder = [\n \"animate\",\n \"whileInView\",\n \"whileFocus\",\n \"whileHover\",\n \"whileTap\",\n \"whileDrag\",\n \"exit\",\n];\nconst variantProps = [\"initial\", ...variantPriorityOrder];\n\nexport { variantPriorityOrder, variantProps };\n","import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { isVariantLabel } from './is-variant-label.mjs';\nimport { variantProps } from './variant-props.mjs';\n\nfunction isControllingVariants(props) {\n return (isAnimationControls(props.animate) ||\n variantProps.some((name) => isVariantLabel(props[name])));\n}\nfunction isVariantNode(props) {\n return Boolean(isControllingVariants(props) || props.variants);\n}\n\nexport { isControllingVariants, isVariantNode };\n","import { useContext, useMemo } from 'react';\nimport { MotionContext } from './index.mjs';\nimport { getCurrentTreeVariants } from './utils.mjs';\n\nfunction useCreateMotionContext(props) {\n const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));\n return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);\n}\nfunction variantLabelsAsDependency(prop) {\n return Array.isArray(prop) ? prop.join(\" \") : prop;\n}\n\nexport { useCreateMotionContext };\n","import { isVariantLabel } from '../../render/utils/is-variant-label.mjs';\nimport { isControllingVariants } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction getCurrentTreeVariants(props, context) {\n if (isControllingVariants(props)) {\n const { initial, animate } = props;\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\nexport { getCurrentTreeVariants };\n","const featureProps = {\n animation: [\n \"animate\",\n \"variants\",\n \"whileHover\",\n \"whileTap\",\n \"exit\",\n \"whileInView\",\n \"whileFocus\",\n \"whileDrag\",\n ],\n exit: [\"exit\"],\n drag: [\"drag\", \"dragControls\"],\n focus: [\"whileFocus\"],\n hover: [\"whileHover\", \"onHoverStart\", \"onHoverEnd\"],\n tap: [\"whileTap\", \"onTap\", \"onTapStart\", \"onTapCancel\"],\n pan: [\"onPan\", \"onPanStart\", \"onPanSessionStart\", \"onPanEnd\"],\n inView: [\"whileInView\", \"onViewportEnter\", \"onViewportLeave\"],\n layout: [\"layout\", \"layoutId\"],\n};\nconst featureDefinitions = {};\nfor (const key in featureProps) {\n featureDefinitions[key] = {\n isEnabled: (props) => featureProps[key].some((name) => !!props[name]),\n };\n}\n\nexport { featureDefinitions };\n","import { createContext } from 'react';\n\n/**\n * Internal, exported only for usage in Framer\n */\nconst SwitchLayoutGroupContext = createContext({});\n\nexport { SwitchLayoutGroupContext };\n","const motionComponentSymbol = Symbol.for(\"motionComponentSymbol\");\n\nexport { motionComponentSymbol };\n","import * as React from 'react';\nimport { forwardRef, useContext } from 'react';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { MotionContext } from '../context/MotionContext/index.mjs';\nimport { useVisualElement } from './utils/use-visual-element.mjs';\nimport { useMotionRef } from './utils/use-motion-ref.mjs';\nimport { useCreateMotionContext } from '../context/MotionContext/create.mjs';\nimport { loadFeatures } from './features/load-features.mjs';\nimport { isBrowser } from '../utils/is-browser.mjs';\nimport { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';\nimport { LazyContext } from '../context/LazyContext.mjs';\nimport { SwitchLayoutGroupContext } from '../context/SwitchLayoutGroupContext.mjs';\nimport { motionComponentSymbol } from './utils/symbol.mjs';\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 */\nfunction createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {\n preloadedFeatures && loadFeatures(preloadedFeatures);\n function MotionComponent(props, externalRef) {\n /**\n * If we need to measure the element we load this functionality in a\n * separate class component in order to gain access to getSnapshotBeforeUpdate.\n */\n let MeasureLayout;\n const configAndProps = {\n ...useContext(MotionConfigContext),\n ...props,\n layoutId: useLayoutId(props),\n };\n const { isStatic } = configAndProps;\n const context = useCreateMotionContext(props);\n const 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, configAndProps, 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 const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);\n const isStrict = useContext(LazyContext).strict;\n if (context.visualElement) {\n MeasureLayout = context.visualElement.loadFeatures(\n // Note: Pass the full new combined props to correctly re-render dynamic feature components.\n configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig);\n }\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.createElement(MotionContext.Provider, { value: context },\n MeasureLayout && context.visualElement ? (React.createElement(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null,\n useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)));\n }\n const ForwardRefComponent = forwardRef(MotionComponent);\n ForwardRefComponent[motionComponentSymbol] = Component;\n return ForwardRefComponent;\n}\nfunction useLayoutId({ layoutId }) {\n const layoutGroupId = useContext(LayoutGroupContext).id;\n return layoutGroupId && layoutId !== undefined\n ? layoutGroupId + \"-\" + layoutId\n : layoutId;\n}\n\nexport { createMotionComponent };\n","import { featureDefinitions } from './definitions.mjs';\n\nfunction loadFeatures(features) {\n for (const key in features) {\n featureDefinitions[key] = {\n ...featureDefinitions[key],\n ...features[key],\n };\n }\n}\n\nexport { loadFeatures };\n","import { useContext, useRef, useInsertionEffect, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { LazyContext } from '../../context/LazyContext.mjs';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\nfunction useVisualElement(Component, visualState, props, createVisualElement) {\n const { visualElement: parent } = useContext(MotionContext);\n const lazyContext = useContext(LazyContext);\n const presenceContext = useContext(PresenceContext);\n const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;\n const visualElementRef = useRef();\n /**\n * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n */\n createVisualElement = createVisualElement || lazyContext.renderer;\n if (!visualElementRef.current && createVisualElement) {\n visualElementRef.current = createVisualElement(Component, {\n visualState,\n parent,\n props,\n presenceContext,\n blockInitialAnimation: presenceContext\n ? presenceContext.initial === false\n : false,\n reducedMotionConfig,\n });\n }\n const visualElement = visualElementRef.current;\n useInsertionEffect(() => {\n visualElement && visualElement.update(props, presenceContext);\n });\n /**\n * Cache this value as we want to know whether HandoffAppearAnimations\n * was present on initial render - it will be deleted after this.\n */\n const canHandoff = useRef(Boolean(window.HandoffAppearAnimations));\n useIsomorphicLayoutEffect(() => {\n if (!visualElement)\n return;\n visualElement.render();\n /**\n * Ideally this function would always run in a useEffect.\n *\n * However, if we have optimised appear animations to handoff from,\n * it needs to happen synchronously to ensure there's no flash of\n * incorrect styles in the event of a hydration error.\n *\n * So if we detect a situtation where optimised appear animations\n * are running, we use useLayoutEffect to trigger animations.\n */\n if (canHandoff.current && visualElement.animationState) {\n visualElement.animationState.animateChanges();\n }\n });\n useEffect(() => {\n if (!visualElement)\n return;\n visualElement.updateFeatures();\n if (!canHandoff.current && visualElement.animationState) {\n visualElement.animationState.animateChanges();\n }\n /**\n * Once we've handed off animations we can delete HandoffAppearAnimations\n * so components added after the initial render can animate changes\n * in useEffect vs useLayoutEffect.\n */\n window.HandoffAppearAnimations = undefined;\n canHandoff.current = false;\n });\n return visualElement;\n}\n\nexport { useVisualElement };\n","import { useCallback } from 'react';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\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 useCallback((instance) => {\n instance && visualState.mount && visualState.mount(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\nexport { useMotionRef };\n","import { createMotionComponent } from '../../motion/index.mjs';\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 return createMotionComponent(createConfig(Component, customMotionComponentConfig));\n }\n if (typeof Proxy === \"undefined\") {\n return custom;\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 const 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: (_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\nexport { createMotionProxy };\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 */\nconst 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 \"switch\",\n \"symbol\",\n \"svg\",\n \"text\",\n \"tspan\",\n \"use\",\n \"view\",\n];\n\nexport { lowercaseSVGElements };\n","import { lowercaseSVGElements } from '../../svg/lowercase-elements.mjs';\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\nexport { isSVGComponent };\n","const scaleCorrectors = {};\nfunction addScaleCorrector(correctors) {\n Object.assign(scaleCorrectors, correctors);\n}\n\nexport { addScaleCorrector, scaleCorrectors };\n","/**\n * Generate a list of every possible transform key.\n */\nconst transformPropOrder = [\n \"transformPerspective\",\n \"x\",\n \"y\",\n \"z\",\n \"translateX\",\n \"translateY\",\n \"translateZ\",\n \"scale\",\n \"scaleX\",\n \"scaleY\",\n \"rotate\",\n \"rotateX\",\n \"rotateY\",\n \"rotateZ\",\n \"skew\",\n \"skewX\",\n \"skewY\",\n];\n/**\n * A quick lookup for transform props.\n */\nconst transformProps = new Set(transformPropOrder);\n\nexport { transformPropOrder, transformProps };\n","import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';\nimport { transformProps } from '../../render/html/utils/transform.mjs';\n\nfunction isForcedMotionValue(key, { layout, layoutId }) {\n return (transformProps.has(key) ||\n key.startsWith(\"origin\") ||\n ((layout || layoutId !== undefined) &&\n (!!scaleCorrectors[key] || key === \"opacity\")));\n}\n\nexport { isForcedMotionValue };\n","const isMotionValue = (value) => Boolean(value && value.getVelocity);\n\nexport { isMotionValue };\n","import { transformPropOrder } from './transform.mjs';\n\nconst translateAlias = {\n x: \"translateX\",\n y: \"translateY\",\n z: \"translateZ\",\n transformPerspective: \"perspective\",\n};\nconst numTransforms = transformPropOrder.length;\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(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {\n // The transform string we're going to build into.\n let transformString = \"\";\n /**\n * Loop over all possible transforms in order, adding the ones that\n * are present to the transform string.\n */\n for (let i = 0; i < numTransforms; i++) {\n const key = transformPropOrder[i];\n if (transform[key] !== undefined) {\n const transformName = translateAlias[key] || key;\n transformString += `${transformName}(${transform[key]}) `;\n }\n }\n if (enableHardwareAcceleration && !transform.z) {\n transformString += \"translateZ(0)\";\n }\n transformString = transformString.trim();\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\nexport { buildTransform };\n","const checkStringStartsWith = (token) => (key) => typeof key === \"string\" && key.startsWith(token);\nconst isCSSVariableName = checkStringStartsWith(\"--\");\nconst isCSSVariableToken = checkStringStartsWith(\"var(--\");\nconst cssVariableRegex = /var\\s*\\(\\s*--[\\w-]+(\\s*,\\s*(?:(?:[^)(]|\\((?:[^)(]+|\\([^)(]*\\))*\\))*)+)?\\s*\\)/g;\n\nexport { cssVariableRegex, isCSSVariableName, isCSSVariableToken };\n","/**\n * Provided a value and a ValueType, returns the value as that value type.\n */\nconst getValueAsType = (value, type) => {\n return type && typeof value === \"number\"\n ? type.transform(value)\n : value;\n};\n\nexport { getValueAsType };\n","const clamp = (min, max, v) => Math.min(Math.max(v, min), max);\n\nexport { clamp };\n","import { clamp } from '../../../utils/clamp.mjs';\n\nconst number = {\n test: (v) => typeof v === \"number\",\n parse: parseFloat,\n transform: (v) => v,\n};\nconst alpha = {\n ...number,\n transform: (v) => clamp(0, 1, v),\n};\nconst scale = {\n ...number,\n default: 1,\n};\n\nexport { alpha, number, scale };\n","/**\n * TODO: When we move from string as a source of truth to data models\n * everything in this folder should probably be referred to as models vs types\n */\n// If this number is a decimal, make it just five decimal places\n// to avoid exponents\nconst sanitize = (v) => Math.round(v * 100000) / 100000;\nconst floatRegex = /(-)?([\\d]*\\.?[\\d])+/g;\nconst colorRegex = /(#[0-9a-f]{3,8}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2}(-?[\\d\\.]+%?)\\s*[\\,\\/]?\\s*[\\d\\.]*%?\\))/gi;\nconst singleColorRegex = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2}(-?[\\d\\.]+%?)\\s*[\\,\\/]?\\s*[\\d\\.]*%?\\))$/i;\nfunction isString(v) {\n return typeof v === \"string\";\n}\n\nexport { colorRegex, floatRegex, isString, sanitize, singleColorRegex };\n","import { isString } from '../utils.mjs';\n\nconst createUnitType = (unit) => ({\n test: (v) => isString(v) && v.endsWith(unit) && v.split(\" \").length === 1,\n parse: parseFloat,\n transform: (v) => `${v}${unit}`,\n});\nconst degrees = createUnitType(\"deg\");\nconst percent = createUnitType(\"%\");\nconst px = createUnitType(\"px\");\nconst vh = createUnitType(\"vh\");\nconst vw = createUnitType(\"vw\");\nconst progressPercentage = {\n ...percent,\n parse: (v) => percent.parse(v) / 100,\n transform: (v) => percent.transform(v * 100),\n};\n\nexport { degrees, percent, progressPercentage, px, vh, vw };\n","import { number } from '../../../value/types/numbers/index.mjs';\n\nconst int = {\n ...number,\n transform: Math.round,\n};\n\nexport { int };\n","import { scale, alpha } from '../../../value/types/numbers/index.mjs';\nimport { px, degrees, progressPercentage } from '../../../value/types/numbers/units.mjs';\nimport { int } from './type-int.mjs';\n\nconst numberValueTypes = {\n // Border props\n borderWidth: px,\n borderTopWidth: px,\n borderRightWidth: px,\n borderBottomWidth: px,\n borderLeftWidth: px,\n borderRadius: px,\n radius: px,\n borderTopLeftRadius: px,\n borderTopRightRadius: px,\n borderBottomRightRadius: px,\n borderBottomLeftRadius: px,\n // Positioning props\n width: px,\n maxWidth: px,\n height: px,\n maxHeight: px,\n size: px,\n top: px,\n right: px,\n bottom: px,\n left: px,\n // Spacing props\n padding: px,\n paddingTop: px,\n paddingRight: px,\n paddingBottom: px,\n paddingLeft: px,\n margin: px,\n marginTop: px,\n marginRight: px,\n marginBottom: px,\n marginLeft: px,\n // Transform props\n rotate: degrees,\n rotateX: degrees,\n rotateY: degrees,\n rotateZ: degrees,\n scale,\n scaleX: scale,\n scaleY: scale,\n scaleZ: scale,\n skew: degrees,\n skewX: degrees,\n skewY: degrees,\n distance: px,\n translateX: px,\n translateY: px,\n translateZ: px,\n x: px,\n y: px,\n z: px,\n perspective: px,\n transformPerspective: px,\n opacity: alpha,\n originX: progressPercentage,\n originY: progressPercentage,\n originZ: px,\n // Misc\n zIndex: int,\n // SVG\n fillOpacity: alpha,\n strokeOpacity: alpha,\n numOctaves: int,\n};\n\nexport { numberValueTypes };\n","import { buildTransform } from './build-transform.mjs';\nimport { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';\nimport { transformProps } from './transform.mjs';\nimport { getValueAsType } from '../../dom/value-types/get-as-type.mjs';\nimport { numberValueTypes } from '../../dom/value-types/number.mjs';\n\nfunction buildHTMLStyles(state, latestValues, options, transformTemplate) {\n const { style, vars, transform, transformOrigin } = state;\n // Track whether we encounter any transform or transformOrigin values.\n let hasTransform = false;\n let hasTransformOrigin = false;\n // Does the calculated transform essentially equal \"none\"?\n let 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 (const key in latestValues) {\n const value = latestValues[key];\n /**\n * If this is a CSS variable we don't do any further processing.\n */\n if (isCSSVariableName(key)) {\n vars[key] = value;\n continue;\n }\n // Convert the value to its default value type, ie 0 -> \"0px\"\n const valueType = numberValueTypes[key];\n const valueAsType = getValueAsType(value, valueType);\n if (transformProps.has(key)) {\n // If this is a transform, flag to enable further transform processing\n hasTransform = true;\n transform[key] = valueAsType;\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 !== (valueType.default || 0))\n transformIsNone = false;\n }\n else if (key.startsWith(\"origin\")) {\n // If this is a transform origin, flag and enable further transform-origin processing\n hasTransformOrigin = true;\n transformOrigin[key] = valueAsType;\n }\n else {\n style[key] = valueAsType;\n }\n }\n if (!latestValues.transform) {\n if (hasTransform || transformTemplate) {\n style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);\n }\n else if (style.transform) {\n /**\n * If we have previously created a transform but currently don't have any,\n * reset transform style to none.\n */\n style.transform = \"none\";\n }\n }\n /**\n * Build a transformOrigin style. Uses the same defaults as the browser for\n * undefined origins.\n */\n if (hasTransformOrigin) {\n const { originX = \"50%\", originY = \"50%\", originZ = 0, } = transformOrigin;\n style.transformOrigin = `${originX} ${originY} ${originZ}`;\n }\n}\n\nexport { buildHTMLStyles };\n","const createHtmlRenderState = () => ({\n style: {},\n transform: {},\n transformOrigin: {},\n vars: {},\n});\n\nexport { createHtmlRenderState };\n","import { useMemo } from 'react';\nimport { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\nimport { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nfunction copyRawValuesOnly(target, source, props) {\n for (const key in source) {\n if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {\n target[key] = source[key];\n }\n }\n}\nfunction useInitialMotionValues({ transformTemplate }, visualState, isStatic) {\n return useMemo(() => {\n const state = createHtmlRenderState();\n buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);\n return Object.assign({}, state.vars, state.style);\n }, [visualState]);\n}\nfunction useStyle(props, visualState, isStatic) {\n const styleProp = props.style || {};\n const 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 return props.transformValues ? props.transformValues(style) : style;\n}\nfunction useHTMLProps(props, visualState, isStatic) {\n // The `any` isn't ideal but it is the type of createElement props argument\n const htmlProps = {};\n const style = useStyle(props, visualState, isStatic);\n if (props.drag && props.dragListener !== false) {\n // Disable the ghost element when a user drags\n htmlProps.draggable = false;\n // Disable text selection\n style.userSelect =\n style.WebkitUserSelect =\n 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 if (props.tabIndex === undefined &&\n (props.onTap || props.onTapStart || props.whileTap)) {\n htmlProps.tabIndex = 0;\n }\n htmlProps.style = style;\n return htmlProps;\n}\n\nexport { copyRawValuesOnly, useHTMLProps };\n","/**\n * A list of all valid MotionProps.\n *\n * @privateRemarks\n * This doesn't throw if a `MotionProp` name is missing - it should.\n */\nconst validMotionProps = new Set([\n \"animate\",\n \"exit\",\n \"variants\",\n \"initial\",\n \"style\",\n \"values\",\n \"variants\",\n \"transition\",\n \"transformTemplate\",\n \"transformValues\",\n \"custom\",\n \"inherit\",\n \"onLayoutAnimationStart\",\n \"onLayoutAnimationComplete\",\n \"onLayoutMeasure\",\n \"onBeforeLayoutMeasure\",\n \"onAnimationStart\",\n \"onAnimationComplete\",\n \"onUpdate\",\n \"onDragStart\",\n \"onDrag\",\n \"onDragEnd\",\n \"onMeasureDragConstraints\",\n \"onDirectionLock\",\n \"onDragTransitionEnd\",\n \"_dragX\",\n \"_dragY\",\n \"onHoverStart\",\n \"onHoverEnd\",\n \"onViewportEnter\",\n \"onViewportLeave\",\n \"ignoreStrict\",\n \"viewport\",\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 (key.startsWith(\"while\") ||\n (key.startsWith(\"drag\") && key !== \"draggable\") ||\n key.startsWith(\"layout\") ||\n key.startsWith(\"onTap\") ||\n key.startsWith(\"onPan\") ||\n validMotionProps.has(key));\n}\n\nexport { isValidMotionProp };\n","import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';\n\nlet shouldForward = (key) => !isValidMotionProp(key);\nfunction loadExternalIsValidProp(isValidProp) {\n if (!isValidProp)\n return;\n // Explicitly filter our events\n shouldForward = (key) => key.startsWith(\"on\") ? !isValidMotionProp(key) : isValidProp(key);\n}\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 /**\n * We attempt to import this package but require won't be defined in esm environments, in that case\n * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed\n * in favour of explicit injection.\n */\n loadExternalIsValidProp(require(\"@emotion/is-prop-valid\").default);\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 const filteredProps = {};\n for (const key in props) {\n /**\n * values is considered a valid prop by Emotion, so if it's present\n * this will be rendered out to the DOM unless explicitly filtered.\n *\n * We check the type as it could be used with the `feColorMatrix`\n * element, which we support.\n */\n if (key === \"values\" && typeof props.values === \"object\")\n continue;\n if (shouldForward(key) ||\n (forwardMotionProps === true && isValidMotionProp(key)) ||\n (!isDom && !isValidMotionProp(key)) ||\n // If trying to use native HTML drag events, forward drag listeners\n (props[\"draggable\"] && key.startsWith(\"onDrag\"))) {\n filteredProps[key] = props[key];\n }\n }\n return filteredProps;\n}\n\nexport { filterProps, loadExternalIsValidProp };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nfunction calcOrigin(origin, offset, size) {\n return typeof origin === \"string\"\n ? origin\n : 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 const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);\n const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);\n return `${pxOriginX} ${pxOriginY}`;\n}\n\nexport { calcSVGTransformOrigin };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nconst dashKeys = {\n offset: \"stroke-dashoffset\",\n array: \"stroke-dasharray\",\n};\nconst 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, length, spacing = 1, offset = 0, useDashCase = true) {\n // Normalise path length by setting SVG attribute pathLength to 1\n attrs.pathLength = 1;\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 const keys = useDashCase ? dashKeys : camelKeys;\n // Build the dash offset\n attrs[keys.offset] = px.transform(-offset);\n // Build the dash array\n const pathLength = px.transform(length);\n const pathSpacing = px.transform(spacing);\n attrs[keys.array] = `${pathLength} ${pathSpacing}`;\n}\n\nexport { buildSVGPath };\n","import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';\nimport { calcSVGTransformOrigin } from './transform-origin.mjs';\nimport { buildSVGPath } from './path.mjs';\n\n/**\n * Build SVG visual attrbutes, like cx and style.transform\n */\nfunction buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, \n// This is object creation, which we try to avoid per-frame.\n...latest }, options, isSVGTag, transformTemplate) {\n buildHTMLStyles(state, latest, options, transformTemplate);\n /**\n * For svg tags we just want to make sure viewBox is animatable and treat all the styles\n * as normal HTML tags.\n */\n if (isSVGTag) {\n if (state.style.viewBox) {\n state.attrs.viewBox = state.style.viewBox;\n }\n return;\n }\n state.attrs = state.style;\n state.style = {};\n const { attrs, style, dimensions } = state;\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 // Render attrX/attrY/attrScale as attributes\n if (attrX !== undefined)\n attrs.x = attrX;\n if (attrY !== undefined)\n attrs.y = attrY;\n if (attrScale !== undefined)\n attrs.scale = attrScale;\n // Build SVG path if one has been defined\n if (pathLength !== undefined) {\n buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);\n }\n}\n\nexport { buildSVGAttrs };\n","import { createHtmlRenderState } from '../../html/utils/create-render-state.mjs';\n\nconst createSvgRenderState = () => ({\n ...createHtmlRenderState(),\n attrs: {},\n});\n\nexport { createSvgRenderState };\n","const isSVGTag = (tag) => typeof tag === \"string\" && tag.toLowerCase() === \"svg\";\n\nexport { isSVGTag };\n","import { useMemo } from 'react';\nimport { copyRawValuesOnly } from '../html/use-props.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nfunction useSVGProps(props, visualState, _isStatic, Component) {\n const visualProps = useMemo(() => {\n const state = createSvgRenderState();\n buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate);\n return {\n ...state.attrs,\n style: { ...state.style },\n };\n }, [visualState]);\n if (props.style) {\n const rawStyles = {};\n copyRawValuesOnly(rawStyles, props.style, props);\n visualProps.style = { ...rawStyles, ...visualProps.style };\n }\n return visualProps;\n}\n\nexport { useSVGProps };\n","import { useMemo, createElement } from 'react';\nimport { useHTMLProps } from '../html/use-props.mjs';\nimport { filterProps } from './utils/filter-props.mjs';\nimport { isSVGComponent } from './utils/is-svg-component.mjs';\nimport { useSVGProps } from '../svg/use-props.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction createUseRender(forwardMotionProps = false) {\n const useRender = (Component, props, ref, { latestValues }, isStatic) => {\n const useVisualProps = isSVGComponent(Component)\n ? useSVGProps\n : useHTMLProps;\n const visualProps = useVisualProps(props, latestValues, isStatic, Component);\n const filteredProps = filterProps(props, typeof Component === \"string\", forwardMotionProps);\n const elementProps = {\n ...filteredProps,\n ...visualProps,\n ref,\n };\n /**\n * If component has been handed a motion value as its child,\n * memoise its initial value and render that. Subsequent updates\n * will be handled by the onChange handler\n */\n const { children } = props;\n const renderedChildren = useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);\n return createElement(Component, {\n ...elementProps,\n children: renderedChildren,\n });\n };\n return useRender;\n}\n\nexport { createUseRender };\n","/**\n * Convert camelCase to dash-case properties.\n */\nconst camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n\nexport { camelToDash };\n","function renderHTML(element, { style, vars }, styleProp, projection) {\n Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));\n // Loop over any CSS variables and assign those.\n for (const key in vars) {\n element.style.setProperty(key, vars[key]);\n }\n}\n\nexport { renderHTML };\n","/**\n * A set of attribute names that are always read/written as camel case.\n */\nconst 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 \"pathLength\",\n \"startOffset\",\n \"textLength\",\n \"lengthAdjust\",\n]);\n\nexport { camelCaseAttributes };\n","import { camelToDash } from '../../dom/utils/camel-to-dash.mjs';\nimport { renderHTML } from '../../html/utils/render.mjs';\nimport { camelCaseAttributes } from './camel-case-attrs.mjs';\n\nfunction renderSVG(element, renderState, _styleProp, projection) {\n renderHTML(element, renderState, undefined, projection);\n for (const key in renderState.attrs) {\n element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);\n }\n}\n\nexport { renderSVG };\n","import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps) {\n const { style } = props;\n const newValues = {};\n for (const key in style) {\n if (isMotionValue(style[key]) ||\n (prevProps.style && isMotionValue(prevProps.style[key])) ||\n isForcedMotionValue(key, props)) {\n newValues[key] = style[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\nimport { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';\nimport { transformPropOrder } from '../../html/utils/transform.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps) {\n const newValues = scrapeMotionValuesFromProps$1(props, prevProps);\n for (const key in props) {\n if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) {\n const targetKey = transformPropOrder.indexOf(key) !== -1\n ? \"attr\" + key.charAt(0).toUpperCase() + key.substring(1)\n : key;\n newValues[targetKey] = props[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {\n /**\n * If the variant definition is a function, resolve.\n */\n if (typeof definition === \"function\") {\n definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);\n }\n /**\n * If the variant definition is a variant label, or\n * the function returned a variant label, resolve.\n */\n if (typeof definition === \"string\") {\n definition = props.variants && props.variants[definition];\n }\n /**\n * At this point we've resolved both functions and variant labels,\n * but the resolved variant label might itself have been a function.\n * If so, resolve. This can only have returned a valid target object.\n */\n if (typeof definition === \"function\") {\n definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);\n }\n return definition;\n}\n\nexport { resolveVariantFromProps };\n","const isKeyframesTarget = (v) => {\n return Array.isArray(v);\n};\n\nexport { isKeyframesTarget };\n","import { isKeyframesTarget } from '../animation/utils/is-keyframes-target.mjs';\n\nconst isCustomValue = (v) => {\n return Boolean(v && typeof v === \"object\" && v.mix && v.toValue);\n};\nconst resolveFinalValueInKeyframes = (v) => {\n // TODO maybe throw if v.length - 1 is placeholder token?\n return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;\n};\n\nexport { isCustomValue, resolveFinalValueInKeyframes };\n","import { isCustomValue } from '../../utils/resolve-value.mjs';\nimport { isMotionValue } from './is-motion-value.mjs';\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 */\nfunction resolveMotionValue(value) {\n const unwrappedValue = isMotionValue(value) ? value.get() : value;\n return isCustomValue(unwrappedValue)\n ? unwrappedValue.toValue()\n : unwrappedValue;\n}\n\nexport { resolveMotionValue };\n","import { useContext } from 'react';\nimport { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {\n const state = {\n latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),\n renderState: createRenderState(),\n };\n if (onMount) {\n state.mount = (instance) => onMount(props, instance, state);\n }\n return state;\n}\nconst makeUseVisualState = (config) => (props, isStatic) => {\n const context = useContext(MotionContext);\n const presenceContext = useContext(PresenceContext);\n const make = () => makeState(config, props, context, presenceContext);\n return isStatic ? make() : useConstant(make);\n};\nfunction makeLatestValues(props, context, presenceContext, scrapeMotionValues) {\n const values = {};\n const motionValues = scrapeMotionValues(props, {});\n for (const key in motionValues) {\n values[key] = resolveMotionValue(motionValues[key]);\n }\n let { initial, animate } = props;\n const isControllingVariants$1 = isControllingVariants(props);\n const isVariantNode$1 = isVariantNode(props);\n if (context &&\n isVariantNode$1 &&\n !isControllingVariants$1 &&\n props.inherit !== false) {\n if (initial === undefined)\n initial = context.initial;\n if (animate === undefined)\n animate = context.animate;\n }\n let isInitialAnimationBlocked = presenceContext\n ? presenceContext.initial === false\n : false;\n isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;\n const variantToSet = isInitialAnimationBlocked ? animate : initial;\n if (variantToSet &&\n typeof variantToSet !== \"boolean\" &&\n !isAnimationControls(variantToSet)) {\n const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];\n list.forEach((definition) => {\n const resolved = resolveVariantFromProps(props, definition);\n if (!resolved)\n return;\n const { transitionEnd, transition, ...target } = resolved;\n for (const key in target) {\n let valueTarget = target[key];\n if (Array.isArray(valueTarget)) {\n /**\n * Take final keyframe if the initial animation is blocked because\n * we want to initialise at the end of that blocked animation.\n */\n const index = isInitialAnimationBlocked\n ? valueTarget.length - 1\n : 0;\n valueTarget = valueTarget[index];\n }\n if (valueTarget !== null) {\n values[key] = valueTarget;\n }\n }\n for (const key in transitionEnd)\n values[key] = transitionEnd[key];\n });\n }\n return values;\n}\n\nexport { makeUseVisualState };\n","import { renderSVG } from './utils/render.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst svgMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createSvgRenderState,\n onMount: (props, instance, { renderState, latestValues }) => {\n frame.read(() => {\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 });\n frame.render(() => {\n buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);\n renderSVG(instance, renderState);\n });\n },\n }),\n};\n\nexport { svgMotionConfig };\n","import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nconst htmlMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps,\n createRenderState: createHtmlRenderState,\n }),\n};\n\nexport { htmlMotionConfig };\n","function addDomEvent(target, eventName, handler, options = { passive: true }) {\n target.addEventListener(eventName, handler, options);\n return () => target.removeEventListener(eventName, handler);\n}\n\nexport { addDomEvent };\n","const isPrimaryPointer = (event) => {\n if (event.pointerType === \"mouse\") {\n return typeof event.button !== \"number\" || event.button <= 0;\n }\n else {\n /**\n * isPrimary is true for all mice buttons, whereas every touch point\n * is regarded as its own input. So subsequent concurrent touch points\n * will be false.\n *\n * Specifically match against false here as incomplete versions of\n * PointerEvents in very old browser might have it set as undefined.\n */\n return event.isPrimary !== false;\n }\n};\n\nexport { isPrimaryPointer };\n","import { isPrimaryPointer } from './utils/is-primary-pointer.mjs';\n\nfunction extractEventInfo(event, pointType = \"page\") {\n return {\n point: {\n x: event[pointType + \"X\"],\n y: event[pointType + \"Y\"],\n },\n };\n}\nconst addPointerInfo = (handler) => {\n return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));\n};\n\nexport { addPointerInfo, extractEventInfo };\n","import { addDomEvent } from './add-dom-event.mjs';\nimport { addPointerInfo } from './event-info.mjs';\n\nfunction addPointerEvent(target, eventName, handler, options) {\n return addDomEvent(target, eventName, addPointerInfo(handler), options);\n}\n\nexport { addPointerEvent };\n","/**\n * Pipe\n * Compose other transformers to run linearily\n * pipe(min(20), max(40))\n * @param {...functions} transformers\n * @return {function}\n */\nconst combineFunctions = (a, b) => (v) => b(a(v));\nconst pipe = (...transformers) => transformers.reduce(combineFunctions);\n\nexport { pipe };\n","function createLock(name) {\n let lock = null;\n return () => {\n const openLock = () => {\n lock = null;\n };\n if (lock === null) {\n lock = name;\n return openLock;\n }\n return false;\n };\n}\nconst globalHorizontalLock = createLock(\"dragHorizontal\");\nconst globalVerticalLock = createLock(\"dragVertical\");\nfunction getGlobalLock(drag) {\n let lock = false;\n if (drag === \"y\") {\n lock = globalVerticalLock();\n }\n else if (drag === \"x\") {\n lock = globalHorizontalLock();\n }\n else {\n const openHorizontal = globalHorizontalLock();\n const openVertical = globalVerticalLock();\n if (openHorizontal && openVertical) {\n lock = () => {\n openHorizontal();\n openVertical();\n };\n }\n else {\n // Release the locks because we don't use them\n if (openHorizontal)\n openHorizontal();\n if (openVertical)\n openVertical();\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 const openGestureLock = getGlobalLock(true);\n if (!openGestureLock)\n return true;\n openGestureLock();\n return false;\n}\n\nexport { createLock, getGlobalLock, isDragActive };\n","class Feature {\n constructor(node) {\n this.isMounted = false;\n this.node = node;\n }\n update() { }\n}\n\nexport { Feature };\n","import { addPointerEvent } from '../events/add-pointer-event.mjs';\nimport { pipe } from '../utils/pipe.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\nfunction addHoverEvent(node, isActive) {\n const eventName = \"pointer\" + (isActive ? \"enter\" : \"leave\");\n const callbackName = \"onHover\" + (isActive ? \"Start\" : \"End\");\n const handleEvent = (event, info) => {\n if (event.type === \"touch\" || isDragActive())\n return;\n const props = node.getProps();\n if (node.animationState && props.whileHover) {\n node.animationState.setActive(\"whileHover\", isActive);\n }\n if (props[callbackName]) {\n frame.update(() => props[callbackName](event, info));\n }\n };\n return addPointerEvent(node.current, eventName, handleEvent, {\n passive: !node.getProps()[callbackName],\n });\n}\nclass HoverGesture extends Feature {\n mount() {\n this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));\n }\n unmount() { }\n}\n\nexport { HoverGesture };\n","import { addDomEvent } from '../events/add-dom-event.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { pipe } from '../utils/pipe.mjs';\n\nclass FocusGesture extends Feature {\n constructor() {\n super(...arguments);\n this.isActive = false;\n }\n onFocus() {\n let isFocusVisible = false;\n /**\n * If this element doesn't match focus-visible then don't\n * apply whileHover. But, if matches throws that focus-visible\n * is not a valid selector then in that browser outline styles will be applied\n * to the element by default and we want to match that behaviour with whileFocus.\n */\n try {\n isFocusVisible = this.node.current.matches(\":focus-visible\");\n }\n catch (e) {\n isFocusVisible = true;\n }\n if (!isFocusVisible || !this.node.animationState)\n return;\n this.node.animationState.setActive(\"whileFocus\", true);\n this.isActive = true;\n }\n onBlur() {\n if (!this.isActive || !this.node.animationState)\n return;\n this.node.animationState.setActive(\"whileFocus\", false);\n this.isActive = false;\n }\n mount() {\n this.unmount = pipe(addDomEvent(this.node.current, \"focus\", () => this.onFocus()), addDomEvent(this.node.current, \"blur\", () => this.onBlur()));\n }\n unmount() { }\n}\n\nexport { FocusGesture };\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 */\nconst isNodeOrChild = (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\nexport { isNodeOrChild };\n","import { extractEventInfo } from '../events/event-info.mjs';\nimport { addDomEvent } from '../events/add-dom-event.mjs';\nimport { addPointerEvent } from '../events/add-pointer-event.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { pipe } from '../utils/pipe.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { isNodeOrChild } from './utils/is-node-or-child.mjs';\nimport { noop } from '../utils/noop.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\nfunction fireSyntheticPointerEvent(name, handler) {\n if (!handler)\n return;\n const syntheticPointerEvent = new PointerEvent(\"pointer\" + name);\n handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));\n}\nclass PressGesture extends Feature {\n constructor() {\n super(...arguments);\n this.removeStartListeners = noop;\n this.removeEndListeners = noop;\n this.removeAccessibleListeners = noop;\n this.startPointerPress = (startEvent, startInfo) => {\n this.removeEndListeners();\n if (this.isPressing)\n return;\n const props = this.node.getProps();\n const endPointerPress = (endEvent, endInfo) => {\n if (!this.checkPressEnd())\n return;\n const { onTap, onTapCancel } = this.node.getProps();\n frame.update(() => {\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(this.node.current, endEvent.target)\n ? onTapCancel && onTapCancel(endEvent, endInfo)\n : onTap && onTap(endEvent, endInfo);\n });\n };\n const removePointerUpListener = addPointerEvent(window, \"pointerup\", endPointerPress, { passive: !(props.onTap || props[\"onPointerUp\"]) });\n const removePointerCancelListener = addPointerEvent(window, \"pointercancel\", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props[\"onPointerCancel\"]) });\n this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);\n this.startPress(startEvent, startInfo);\n };\n this.startAccessiblePress = () => {\n const handleKeydown = (keydownEvent) => {\n if (keydownEvent.key !== \"Enter\" || this.isPressing)\n return;\n const handleKeyup = (keyupEvent) => {\n if (keyupEvent.key !== \"Enter\" || !this.checkPressEnd())\n return;\n fireSyntheticPointerEvent(\"up\", (event, info) => {\n const { onTap } = this.node.getProps();\n if (onTap) {\n frame.update(() => onTap(event, info));\n }\n });\n };\n this.removeEndListeners();\n this.removeEndListeners = addDomEvent(this.node.current, \"keyup\", handleKeyup);\n fireSyntheticPointerEvent(\"down\", (event, info) => {\n this.startPress(event, info);\n });\n };\n const removeKeydownListener = addDomEvent(this.node.current, \"keydown\", handleKeydown);\n const handleBlur = () => {\n if (!this.isPressing)\n return;\n fireSyntheticPointerEvent(\"cancel\", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));\n };\n const removeBlurListener = addDomEvent(this.node.current, \"blur\", handleBlur);\n this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);\n };\n }\n startPress(event, info) {\n this.isPressing = true;\n const { onTapStart, whileTap } = this.node.getProps();\n /**\n * Ensure we trigger animations before firing event callback\n */\n if (whileTap && this.node.animationState) {\n this.node.animationState.setActive(\"whileTap\", true);\n }\n if (onTapStart) {\n frame.update(() => onTapStart(event, info));\n }\n }\n checkPressEnd() {\n this.removeEndListeners();\n this.isPressing = false;\n const props = this.node.getProps();\n if (props.whileTap && this.node.animationState) {\n this.node.animationState.setActive(\"whileTap\", false);\n }\n return !isDragActive();\n }\n cancelPress(event, info) {\n if (!this.checkPressEnd())\n return;\n const { onTapCancel } = this.node.getProps();\n if (onTapCancel) {\n frame.update(() => onTapCancel(event, info));\n }\n }\n mount() {\n const props = this.node.getProps();\n const removePointerListener = addPointerEvent(this.node.current, \"pointerdown\", this.startPointerPress, { passive: !(props.onTapStart || props[\"onPointerStart\"]) });\n const removeFocusListener = addDomEvent(this.node.current, \"focus\", this.startAccessiblePress);\n this.removeStartListeners = pipe(removePointerListener, removeFocusListener);\n }\n unmount() {\n this.removeStartListeners();\n this.removeEndListeners();\n this.removeAccessibleListeners();\n }\n}\n\nexport { PressGesture };\n","/**\n * Map an IntersectionHandler callback to an element. We only ever make one handler for one\n * element, so even though these handlers might all be triggered by different\n * observers, we can keep them in the same map.\n */\nconst observerCallbacks = new WeakMap();\n/**\n * Multiple observers can be created for multiple element/document roots. Each with\n * different settings. So here we store dictionaries of observers to each root,\n * using serialised settings (threshold/margin) as lookup keys.\n */\nconst observers = new WeakMap();\nconst fireObserverCallback = (entry) => {\n const callback = observerCallbacks.get(entry.target);\n callback && callback(entry);\n};\nconst fireAllObserverCallbacks = (entries) => {\n entries.forEach(fireObserverCallback);\n};\nfunction initIntersectionObserver({ root, ...options }) {\n const lookupRoot = root || document;\n /**\n * If we don't have an observer lookup map for this root, create one.\n */\n if (!observers.has(lookupRoot)) {\n observers.set(lookupRoot, {});\n }\n const rootObservers = observers.get(lookupRoot);\n const key = JSON.stringify(options);\n /**\n * If we don't have an observer for this combination of root and settings,\n * create one.\n */\n if (!rootObservers[key]) {\n rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });\n }\n return rootObservers[key];\n}\nfunction observeIntersection(element, options, callback) {\n const rootInteresectionObserver = initIntersectionObserver(options);\n observerCallbacks.set(element, callback);\n rootInteresectionObserver.observe(element);\n return () => {\n observerCallbacks.delete(element);\n rootInteresectionObserver.unobserve(element);\n };\n}\n\nexport { observeIntersection };\n","import { Feature } from '../Feature.mjs';\nimport { observeIntersection } from './observers.mjs';\n\nconst thresholdNames = {\n some: 0,\n all: 1,\n};\nclass InViewFeature extends Feature {\n constructor() {\n super(...arguments);\n this.hasEnteredView = false;\n this.isInView = false;\n }\n startObserver() {\n this.unmount();\n const { viewport = {} } = this.node.getProps();\n const { root, margin: rootMargin, amount = \"some\", once } = viewport;\n const options = {\n root: root ? root.current : undefined,\n rootMargin,\n threshold: typeof amount === \"number\" ? amount : thresholdNames[amount],\n };\n const onIntersectionUpdate = (entry) => {\n const { isIntersecting } = entry;\n /**\n * If there's been no change in the viewport state, early return.\n */\n if (this.isInView === isIntersecting)\n return;\n this.isInView = isIntersecting;\n /**\n * Handle hasEnteredView. If this is only meant to run once, and\n * element isn't visible, early return. Otherwise set hasEnteredView to true.\n */\n if (once && !isIntersecting && this.hasEnteredView) {\n return;\n }\n else if (isIntersecting) {\n this.hasEnteredView = true;\n }\n if (this.node.animationState) {\n this.node.animationState.setActive(\"whileInView\", isIntersecting);\n }\n /**\n * Use the latest committed props rather than the ones in scope\n * when this observer is created\n */\n const { onViewportEnter, onViewportLeave } = this.node.getProps();\n const callback = isIntersecting ? onViewportEnter : onViewportLeave;\n callback && callback(entry);\n };\n return observeIntersection(this.node.current, options, onIntersectionUpdate);\n }\n mount() {\n this.startObserver();\n }\n update() {\n if (typeof IntersectionObserver === \"undefined\")\n return;\n const { props, prevProps } = this.node;\n const hasOptionsChanged = [\"amount\", \"margin\", \"root\"].some(hasViewportOptionChanged(props, prevProps));\n if (hasOptionsChanged) {\n this.startObserver();\n }\n }\n unmount() { }\n}\nfunction hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {\n return (name) => viewport[name] !== prevViewport[name];\n}\n\nexport { InViewFeature };\n","import { HoverGesture } from '../../gestures/hover.mjs';\nimport { FocusGesture } from '../../gestures/focus.mjs';\nimport { PressGesture } from '../../gestures/press.mjs';\nimport { InViewFeature } from './viewport/index.mjs';\n\nconst gestureAnimations = {\n inView: {\n Feature: InViewFeature,\n },\n tap: {\n Feature: PressGesture,\n },\n focus: {\n Feature: FocusGesture,\n },\n hover: {\n Feature: HoverGesture,\n },\n};\n\nexport { gestureAnimations };\n","function shallowCompare(next, prev) {\n if (!Array.isArray(prev))\n return false;\n const prevLength = prev.length;\n if (prevLength !== next.length)\n return false;\n for (let i = 0; i < prevLength; i++) {\n if (prev[i] !== next[i])\n return false;\n }\n return true;\n}\n\nexport { shallowCompare };\n","import { resolveVariantFromProps } from './resolve-variants.mjs';\n\n/**\n * Creates an object containing the latest state of every MotionValue on a VisualElement\n */\nfunction getCurrent(visualElement) {\n const current = {};\n visualElement.values.forEach((value, key) => (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(visualElement) {\n const velocity = {};\n visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity()));\n return velocity;\n}\nfunction resolveVariant(visualElement, definition, custom) {\n const props = visualElement.getProps();\n return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement));\n}\n\nexport { resolveVariant };\n","import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';\n\nconst optimizedAppearDataId = \"framerAppearId\";\nconst optimizedAppearDataAttribute = \"data-\" + camelToDash(optimizedAppearDataId);\n\nexport { optimizedAppearDataAttribute, optimizedAppearDataId };\n","/**\n * Converts seconds to milliseconds\n *\n * @param seconds - Time in seconds.\n * @return milliseconds - Converted time in milliseconds.\n */\nconst secondsToMilliseconds = (seconds) => seconds * 1000;\nconst millisecondsToSeconds = (milliseconds) => milliseconds / 1000;\n\nexport { millisecondsToSeconds, secondsToMilliseconds };\n","const instantAnimationState = {\n current: false,\n};\n\nexport { instantAnimationState };\n","const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === \"number\";\n\nexport { isBezierDefinition };\n","import { isBezierDefinition } from '../../../easing/utils/is-bezier-definition.mjs';\n\nfunction isWaapiSupportedEasing(easing) {\n return Boolean(!easing ||\n (typeof easing === \"string\" && supportedWaapiEasing[easing]) ||\n isBezierDefinition(easing) ||\n (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));\n}\nconst cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;\nconst supportedWaapiEasing = {\n linear: \"linear\",\n ease: \"ease\",\n easeIn: \"ease-in\",\n easeOut: \"ease-out\",\n easeInOut: \"ease-in-out\",\n circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),\n circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),\n backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),\n backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),\n};\nfunction mapEasingToNativeEasing(easing) {\n if (!easing)\n return undefined;\n return isBezierDefinition(easing)\n ? cubicBezierAsString(easing)\n : Array.isArray(easing)\n ? easing.map(mapEasingToNativeEasing)\n : supportedWaapiEasing[easing];\n}\n\nexport { cubicBezierAsString, isWaapiSupportedEasing, mapEasingToNativeEasing, supportedWaapiEasing };\n","import { noop } from '../utils/noop.mjs';\n\n/*\n Bezier function generator\n This has been modified from Gaëtan Renaudeau's BezierEasing\n https://github.com/gre/bezier-easing/blob/master/src/index.js\n https://github.com/gre/bezier-easing/blob/master/LICENSE\n \n I've removed the newtonRaphsonIterate algo because in benchmarking it\n wasn't noticiably faster than binarySubdivision, indeed removing it\n usually improved times, depending on the curve.\n I also removed the lookup table, as for the added bundle size and loop we're\n only cutting ~4 or so subdivision iterations. I bumped the max iterations up\n to 12 to compensate and this still tended to be faster for no perceivable\n loss in accuracy.\n Usage\n const easeOut = cubicBezier(.17,.67,.83,.67);\n const x = easeOut(0.5); // returns 0.627...\n*/\n// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.\nconst calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *\n t;\nconst subdivisionPrecision = 0.0000001;\nconst subdivisionMaxIterations = 12;\nfunction binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {\n let currentX;\n let currentT;\n let i = 0;\n do {\n currentT = lowerBound + (upperBound - lowerBound) / 2.0;\n currentX = calcBezier(currentT, mX1, mX2) - x;\n if (currentX > 0.0) {\n upperBound = currentT;\n }\n else {\n lowerBound = currentT;\n }\n } while (Math.abs(currentX) > subdivisionPrecision &&\n ++i < subdivisionMaxIterations);\n return currentT;\n}\nfunction cubicBezier(mX1, mY1, mX2, mY2) {\n // If this is a linear gradient, return linear easing\n if (mX1 === mY1 && mX2 === mY2)\n return noop;\n const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);\n // If animation is at start/end, return t without easing\n return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);\n}\n\nexport { cubicBezier };\n","import { cubicBezier } from './cubic-bezier.mjs';\n\nconst easeIn = cubicBezier(0.42, 0, 1, 1);\nconst easeOut = cubicBezier(0, 0, 0.58, 1);\nconst easeInOut = cubicBezier(0.42, 0, 0.58, 1);\n\nexport { easeIn, easeInOut, easeOut };\n","const isEasingArray = (ease) => {\n return Array.isArray(ease) && typeof ease[0] !== \"number\";\n};\n\nexport { isEasingArray };\n","// Accepts an easing function and returns a new one that outputs mirrored values for\n// the second half of the animation. Turns easeIn into easeInOut.\nconst mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;\n\nexport { mirrorEasing };\n","// Accepts an easing function and returns a new one that outputs reversed values.\n// Turns easeIn into easeOut.\nconst reverseEasing = (easing) => (p) => 1 - easing(1 - p);\n\nexport { reverseEasing };\n","import { mirrorEasing } from './modifiers/mirror.mjs';\nimport { reverseEasing } from './modifiers/reverse.mjs';\n\nconst circIn = (p) => 1 - Math.sin(Math.acos(p));\nconst circOut = reverseEasing(circIn);\nconst circInOut = mirrorEasing(circOut);\n\nexport { circIn, circInOut, circOut };\n","import { cubicBezier } from './cubic-bezier.mjs';\nimport { mirrorEasing } from './modifiers/mirror.mjs';\nimport { reverseEasing } from './modifiers/reverse.mjs';\n\nconst backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);\nconst backIn = reverseEasing(backOut);\nconst backInOut = mirrorEasing(backIn);\n\nexport { backIn, backInOut, backOut };\n","import { invariant } from '../../utils/errors.mjs';\nimport { cubicBezier } from '../cubic-bezier.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { easeIn, easeInOut, easeOut } from '../ease.mjs';\nimport { circIn, circInOut, circOut } from '../circ.mjs';\nimport { backIn, backInOut, backOut } from '../back.mjs';\nimport { anticipate } from '../anticipate.mjs';\n\nconst easingLookup = {\n linear: noop,\n easeIn,\n easeInOut,\n easeOut,\n circIn,\n circInOut,\n circOut,\n backIn,\n backInOut,\n backOut,\n anticipate,\n};\nconst easingDefinitionToFunction = (definition) => {\n if (Array.isArray(definition)) {\n // If cubic bezier definition, create bezier curve\n invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);\n const [x1, y1, x2, y2] = definition;\n return cubicBezier(x1, y1, x2, y2);\n }\n else if (typeof definition === \"string\") {\n // Else lookup from table\n invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);\n return easingLookup[definition];\n }\n return definition;\n};\n\nexport { easingDefinitionToFunction };\n","import { backIn } from './back.mjs';\n\nconst anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));\n\nexport { anticipate };\n","import { isString, singleColorRegex, floatRegex } from '../utils.mjs';\n\n/**\n * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,\n * but false if a number or multiple colors\n */\nconst isColorString = (type, testProp) => (v) => {\n return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||\n (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));\n};\nconst splitColor = (aName, bName, cName) => (v) => {\n if (!isString(v))\n return v;\n const [a, b, c, alpha] = v.match(floatRegex);\n return {\n [aName]: parseFloat(a),\n [bName]: parseFloat(b),\n [cName]: parseFloat(c),\n alpha: alpha !== undefined ? parseFloat(alpha) : 1,\n };\n};\n\nexport { isColorString, splitColor };\n","import { clamp } from '../../../utils/clamp.mjs';\nimport { number, alpha } from '../numbers/index.mjs';\nimport { sanitize } from '../utils.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst clampRgbUnit = (v) => clamp(0, 255, v);\nconst rgbUnit = {\n ...number,\n transform: (v) => Math.round(clampRgbUnit(v)),\n};\nconst rgba = {\n test: isColorString(\"rgb\", \"red\"),\n parse: splitColor(\"red\", \"green\", \"blue\"),\n transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => \"rgba(\" +\n rgbUnit.transform(red) +\n \", \" +\n rgbUnit.transform(green) +\n \", \" +\n rgbUnit.transform(blue) +\n \", \" +\n sanitize(alpha.transform(alpha$1)) +\n \")\",\n};\n\nexport { rgbUnit, rgba };\n","import { rgba } from './rgba.mjs';\nimport { isColorString } from './utils.mjs';\n\nfunction parseHex(v) {\n let r = \"\";\n let g = \"\";\n let b = \"\";\n let a = \"\";\n // If we have 6 characters, ie #FF0000\n if (v.length > 5) {\n r = v.substring(1, 3);\n g = v.substring(3, 5);\n b = v.substring(5, 7);\n a = v.substring(7, 9);\n // Or we have 3 characters, ie #F00\n }\n else {\n r = v.substring(1, 2);\n g = v.substring(2, 3);\n b = v.substring(3, 4);\n a = v.substring(4, 5);\n r += r;\n g += g;\n b += b;\n a += a;\n }\n return {\n red: parseInt(r, 16),\n green: parseInt(g, 16),\n blue: parseInt(b, 16),\n alpha: a ? parseInt(a, 16) / 255 : 1,\n };\n}\nconst hex = {\n test: isColorString(\"#\"),\n parse: parseHex,\n transform: rgba.transform,\n};\n\nexport { hex };\n","import { alpha } from '../numbers/index.mjs';\nimport { percent } from '../numbers/units.mjs';\nimport { sanitize } from '../utils.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst hsla = {\n test: isColorString(\"hsl\", \"hue\"),\n parse: splitColor(\"hue\", \"saturation\", \"lightness\"),\n transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {\n return (\"hsla(\" +\n Math.round(hue) +\n \", \" +\n percent.transform(sanitize(saturation)) +\n \", \" +\n percent.transform(sanitize(lightness)) +\n \", \" +\n sanitize(alpha.transform(alpha$1)) +\n \")\");\n },\n};\n\nexport { hsla };\n","import { isString } from '../utils.mjs';\nimport { hex } from './hex.mjs';\nimport { hsla } from './hsla.mjs';\nimport { rgba } from './rgba.mjs';\n\nconst color = {\n test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),\n parse: (v) => {\n if (rgba.test(v)) {\n return rgba.parse(v);\n }\n else if (hsla.test(v)) {\n return hsla.parse(v);\n }\n else {\n return hex.parse(v);\n }\n },\n transform: (v) => {\n return isString(v)\n ? v\n : v.hasOwnProperty(\"red\")\n ? rgba.transform(v)\n : hsla.transform(v);\n },\n};\n\nexport { color };\n","/*\n Value in range from progress\n\n Given a lower limit and an upper limit, we return the value within\n that range as expressed by progress (usually a number from 0 to 1)\n\n So progress = 0.5 would change\n\n from -------- to\n\n to\n\n from ---- to\n\n E.g. from = 10, to = 20, progress = 0.5 => 15\n\n @param [number]: Lower limit of range\n @param [number]: Upper limit of range\n @param [number]: The progress between lower and upper limits expressed 0-1\n @return [number]: Value as calculated from progress within range (not limited within range)\n*/\nconst mix = (from, to, progress) => -progress * from + progress * to + from;\n\nexport { mix };\n","// Adapted from https://gist.github.com/mjackson/5311256\nfunction hueToRgb(p, q, t) {\n if (t < 0)\n t += 1;\n if (t > 1)\n t -= 1;\n if (t < 1 / 6)\n return p + (q - p) * 6 * t;\n if (t < 1 / 2)\n return q;\n if (t < 2 / 3)\n return p + (q - p) * (2 / 3 - t) * 6;\n return p;\n}\nfunction hslaToRgba({ hue, saturation, lightness, alpha }) {\n hue /= 360;\n saturation /= 100;\n lightness /= 100;\n let red = 0;\n let green = 0;\n let blue = 0;\n if (!saturation) {\n red = green = blue = lightness;\n }\n else {\n const q = lightness < 0.5\n ? lightness * (1 + saturation)\n : lightness + saturation - lightness * saturation;\n const p = 2 * lightness - q;\n red = hueToRgb(p, q, hue + 1 / 3);\n green = hueToRgb(p, q, hue);\n blue = hueToRgb(p, q, hue - 1 / 3);\n }\n return {\n red: Math.round(red * 255),\n green: Math.round(green * 255),\n blue: Math.round(blue * 255),\n alpha,\n };\n}\n\nexport { hslaToRgba };\n","import { mix } from './mix.mjs';\nimport { invariant } from './errors.mjs';\nimport { hslaToRgba } from './hsla-to-rgba.mjs';\nimport { hex } from '../value/types/color/hex.mjs';\nimport { rgba } from '../value/types/color/rgba.mjs';\nimport { hsla } from '../value/types/color/hsla.mjs';\n\n// Linear color space blending\n// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw\n// Demonstrated http://codepen.io/osublake/pen/xGVVaN\nconst mixLinearColor = (from, to, v) => {\n const fromExpo = from * from;\n return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));\n};\nconst colorTypes = [hex, rgba, hsla];\nconst getColorType = (v) => colorTypes.find((type) => type.test(v));\nfunction asRGBA(color) {\n const type = getColorType(color);\n invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);\n let model = type.parse(color);\n if (type === hsla) {\n // TODO Remove this cast - needed since Framer Motion's stricter typing\n model = hslaToRgba(model);\n }\n return model;\n}\nconst mixColor = (from, to) => {\n const fromRGBA = asRGBA(from);\n const toRGBA = asRGBA(to);\n const blended = { ...fromRGBA };\n return (v) => {\n blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);\n blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);\n blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);\n blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v);\n return rgba.transform(blended);\n };\n};\n\nexport { mixColor, mixLinearColor };\n","import { cssVariableRegex } from '../../../render/dom/utils/is-css-variable.mjs';\nimport { noop } from '../../../utils/noop.mjs';\nimport { color } from '../color/index.mjs';\nimport { number } from '../numbers/index.mjs';\nimport { colorRegex, floatRegex, isString, sanitize } from '../utils.mjs';\n\nfunction test(v) {\n var _a, _b;\n return (isNaN(v) &&\n isString(v) &&\n (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +\n (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >\n 0);\n}\nconst cssVarTokeniser = {\n regex: cssVariableRegex,\n countKey: \"Vars\",\n token: \"${v}\",\n parse: noop,\n};\nconst colorTokeniser = {\n regex: colorRegex,\n countKey: \"Colors\",\n token: \"${c}\",\n parse: color.parse,\n};\nconst numberTokeniser = {\n regex: floatRegex,\n countKey: \"Numbers\",\n token: \"${n}\",\n parse: number.parse,\n};\nfunction tokenise(info, { regex, countKey, token, parse }) {\n const matches = info.tokenised.match(regex);\n if (!matches)\n return;\n info[\"num\" + countKey] = matches.length;\n info.tokenised = info.tokenised.replace(regex, token);\n info.values.push(...matches.map(parse));\n}\nfunction analyseComplexValue(value) {\n const originalValue = value.toString();\n const info = {\n value: originalValue,\n tokenised: originalValue,\n values: [],\n numVars: 0,\n numColors: 0,\n numNumbers: 0,\n };\n if (info.value.includes(\"var(--\"))\n tokenise(info, cssVarTokeniser);\n tokenise(info, colorTokeniser);\n tokenise(info, numberTokeniser);\n return info;\n}\nfunction parseComplexValue(v) {\n return analyseComplexValue(v).values;\n}\nfunction createTransformer(source) {\n const { values, numColors, numVars, tokenised } = analyseComplexValue(source);\n const numValues = values.length;\n return (v) => {\n let output = tokenised;\n for (let i = 0; i < numValues; i++) {\n if (i < numVars) {\n output = output.replace(cssVarTokeniser.token, v[i]);\n }\n else if (i < numVars + numColors) {\n output = output.replace(colorTokeniser.token, color.transform(v[i]));\n }\n else {\n output = output.replace(numberTokeniser.token, sanitize(v[i]));\n }\n }\n return output;\n };\n}\nconst convertNumbersToZero = (v) => typeof v === \"number\" ? 0 : v;\nfunction getAnimatableNone(v) {\n const parsed = parseComplexValue(v);\n const transformer = createTransformer(v);\n return transformer(parsed.map(convertNumbersToZero));\n}\nconst complex = {\n test,\n parse: parseComplexValue,\n createTransformer,\n getAnimatableNone,\n};\n\nexport { analyseComplexValue, complex };\n","import { mix } from './mix.mjs';\nimport { mixColor } from './mix-color.mjs';\nimport { pipe } from './pipe.mjs';\nimport { warning } from './errors.mjs';\nimport { color } from '../value/types/color/index.mjs';\nimport { complex, analyseComplexValue } from '../value/types/complex/index.mjs';\n\nconst mixImmediate = (origin, target) => (p) => `${p > 0 ? target : origin}`;\nfunction getMixer(origin, target) {\n if (typeof origin === \"number\") {\n return (v) => mix(origin, target, v);\n }\n else if (color.test(origin)) {\n return mixColor(origin, target);\n }\n else {\n return origin.startsWith(\"var(\")\n ? mixImmediate(origin, target)\n : mixComplex(origin, target);\n }\n}\nconst mixArray = (from, to) => {\n const output = [...from];\n const numValues = output.length;\n const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));\n return (v) => {\n for (let i = 0; i < numValues; i++) {\n output[i] = blendValue[i](v);\n }\n return output;\n };\n};\nconst mixObject = (origin, target) => {\n const output = { ...origin, ...target };\n const blendValue = {};\n for (const key in output) {\n if (origin[key] !== undefined && target[key] !== undefined) {\n blendValue[key] = getMixer(origin[key], target[key]);\n }\n }\n return (v) => {\n for (const key in blendValue) {\n output[key] = blendValue[key](v);\n }\n return output;\n };\n};\nconst mixComplex = (origin, target) => {\n const template = complex.createTransformer(target);\n const originStats = analyseComplexValue(origin);\n const targetStats = analyseComplexValue(target);\n const canInterpolate = originStats.numVars === targetStats.numVars &&\n originStats.numColors === targetStats.numColors &&\n originStats.numNumbers >= targetStats.numNumbers;\n if (canInterpolate) {\n return pipe(mixArray(originStats.values, targetStats.values), template);\n }\n else {\n warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);\n return mixImmediate(origin, target);\n }\n};\n\nexport { mixArray, mixComplex, mixObject };\n","/*\n Progress within given range\n\n Given a lower limit and an upper limit, we return the progress\n (expressed as a number 0-1) represented by the given value, and\n limit that progress to within 0-1.\n\n @param [number]: Lower limit\n @param [number]: Upper limit\n @param [number]: Value to find progress within given range\n @return [number]: Progress of value within range as expressed 0-1\n*/\nconst progress = (from, to, value) => {\n const toFromDifference = to - from;\n return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;\n};\n\nexport { progress };\n","import { invariant } from './errors.mjs';\nimport { color } from '../value/types/color/index.mjs';\nimport { clamp } from './clamp.mjs';\nimport { mix } from './mix.mjs';\nimport { mixColor } from './mix-color.mjs';\nimport { mixComplex, mixArray, mixObject } from './mix-complex.mjs';\nimport { pipe } from './pipe.mjs';\nimport { progress } from './progress.mjs';\nimport { noop } from './noop.mjs';\n\nconst mixNumber = (from, to) => (p) => mix(from, to, p);\nfunction detectMixerFactory(v) {\n if (typeof v === \"number\") {\n return mixNumber;\n }\n else if (typeof v === \"string\") {\n return color.test(v) ? mixColor : mixComplex;\n }\n else if (Array.isArray(v)) {\n return mixArray;\n }\n else if (typeof v === \"object\") {\n return mixObject;\n }\n return mixNumber;\n}\nfunction createMixers(output, ease, customMixer) {\n const mixers = [];\n const mixerFactory = customMixer || detectMixerFactory(output[0]);\n const numMixers = output.length - 1;\n for (let i = 0; i < numMixers; i++) {\n let mixer = mixerFactory(output[i], output[i + 1]);\n if (ease) {\n const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;\n mixer = pipe(easingFunction, mixer);\n }\n mixers.push(mixer);\n }\n return mixers;\n}\n/**\n * Create a function that maps from a numerical input array to a generic output array.\n *\n * Accepts:\n * - Numbers\n * - Colors (hex, hsl, hsla, rgb, rgba)\n * - Complex (combinations of one or more numbers or strings)\n *\n * ```jsx\n * const mixColor = interpolate([0, 1], ['#fff', '#000'])\n *\n * mixColor(0.5) // 'rgba(128, 128, 128, 1)'\n * ```\n *\n * TODO Revist this approach once we've moved to data models for values,\n * probably not needed to pregenerate mixer functions.\n *\n * @public\n */\nfunction interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {\n const inputLength = input.length;\n invariant(inputLength === output.length, \"Both input and output ranges must be the same length\");\n /**\n * If we're only provided a single input, we can just make a function\n * that returns the output.\n */\n if (inputLength === 1)\n return () => output[0];\n // If input runs highest -> lowest, reverse both arrays\n if (input[0] > input[inputLength - 1]) {\n input = [...input].reverse();\n output = [...output].reverse();\n }\n const mixers = createMixers(output, ease, mixer);\n const numMixers = mixers.length;\n const interpolator = (v) => {\n let i = 0;\n if (numMixers > 1) {\n for (; i < input.length - 2; i++) {\n if (v < input[i + 1])\n break;\n }\n }\n const progressInRange = progress(input[i], input[i + 1], v);\n return mixers[i](progressInRange);\n };\n return isClamp\n ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))\n : interpolator;\n}\n\nexport { interpolate };\n","import { fillOffset } from './fill.mjs';\n\nfunction defaultOffset(arr) {\n const offset = [0];\n fillOffset(offset, arr.length - 1);\n return offset;\n}\n\nexport { defaultOffset };\n","import { mix } from '../mix.mjs';\nimport { progress } from '../progress.mjs';\n\nfunction fillOffset(offset, remaining) {\n const min = offset[offset.length - 1];\n for (let i = 1; i <= remaining; i++) {\n const offsetProgress = progress(0, remaining, i);\n offset.push(mix(min, 1, offsetProgress));\n }\n}\n\nexport { fillOffset };\n","import { easeInOut } from '../../easing/ease.mjs';\nimport { isEasingArray } from '../../easing/utils/is-easing-array.mjs';\nimport { easingDefinitionToFunction } from '../../easing/utils/map.mjs';\nimport { interpolate } from '../../utils/interpolate.mjs';\nimport { defaultOffset } from '../../utils/offsets/default.mjs';\nimport { convertOffsetToTimes } from '../../utils/offsets/time.mjs';\n\nfunction defaultEasing(values, easing) {\n return values.map(() => easing || easeInOut).splice(0, values.length - 1);\n}\nfunction keyframes({ duration = 300, keyframes: keyframeValues, times, ease = \"easeInOut\", }) {\n /**\n * Easing functions can be externally defined as strings. Here we convert them\n * into actual functions.\n */\n const easingFunctions = isEasingArray(ease)\n ? ease.map(easingDefinitionToFunction)\n : easingDefinitionToFunction(ease);\n /**\n * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator\n * to reduce GC during animation.\n */\n const state = {\n done: false,\n value: keyframeValues[0],\n };\n /**\n * Create a times array based on the provided 0-1 offsets\n */\n const absoluteTimes = convertOffsetToTimes(\n // Only use the provided offsets if they're the correct length\n // TODO Maybe we should warn here if there's a length mismatch\n times && times.length === keyframeValues.length\n ? times\n : defaultOffset(keyframeValues), duration);\n const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {\n ease: Array.isArray(easingFunctions)\n ? easingFunctions\n : defaultEasing(keyframeValues, easingFunctions),\n });\n return {\n calculatedDuration: duration,\n next: (t) => {\n state.value = mapTimeToKeyframe(t);\n state.done = t >= duration;\n return state;\n },\n };\n}\n\nexport { defaultEasing, keyframes };\n","function convertOffsetToTimes(offset, duration) {\n return offset.map((o) => o * duration);\n}\n\nexport { convertOffsetToTimes };\n","/*\n Convert velocity into velocity per second\n\n @param [number]: Unit per frame\n @param [number]: Frame duration in ms\n*/\nfunction velocityPerSecond(velocity, frameDuration) {\n return frameDuration ? velocity * (1000 / frameDuration) : 0;\n}\n\nexport { velocityPerSecond };\n","import { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';\n\nconst velocitySampleDuration = 5; // ms\nfunction calcGeneratorVelocity(resolveValue, t, current) {\n const prevT = Math.max(t - velocitySampleDuration, 0);\n return velocityPerSecond(current - resolveValue(prevT), t - prevT);\n}\n\nexport { calcGeneratorVelocity };\n","import { warning } from '../../../utils/errors.mjs';\nimport { clamp } from '../../../utils/clamp.mjs';\nimport { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';\n\nconst safeMin = 0.001;\nconst minDuration = 0.01;\nconst maxDuration = 10.0;\nconst minDamping = 0.05;\nconst maxDamping = 1;\nfunction findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {\n let envelope;\n let derivative;\n warning(duration <= secondsToMilliseconds(maxDuration), \"Spring duration must be 10 seconds or less\");\n let dampingRatio = 1 - bounce;\n /**\n * Restrict dampingRatio and duration to within acceptable ranges.\n */\n dampingRatio = clamp(minDamping, maxDamping, dampingRatio);\n duration = clamp(minDuration, maxDuration, millisecondsToSeconds(duration));\n if (dampingRatio < 1) {\n /**\n * Underdamped spring\n */\n envelope = (undampedFreq) => {\n const exponentialDecay = undampedFreq * dampingRatio;\n const delta = exponentialDecay * duration;\n const a = exponentialDecay - velocity;\n const b = calcAngularFreq(undampedFreq, dampingRatio);\n const c = Math.exp(-delta);\n return safeMin - (a / b) * c;\n };\n derivative = (undampedFreq) => {\n const exponentialDecay = undampedFreq * dampingRatio;\n const delta = exponentialDecay * duration;\n const d = delta * velocity + velocity;\n const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;\n const f = Math.exp(-delta);\n const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);\n const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;\n return (factor * ((d - e) * f)) / g;\n };\n }\n else {\n /**\n * Critically-damped spring\n */\n envelope = (undampedFreq) => {\n const a = Math.exp(-undampedFreq * duration);\n const b = (undampedFreq - velocity) * duration + 1;\n return -safeMin + a * b;\n };\n derivative = (undampedFreq) => {\n const a = Math.exp(-undampedFreq * duration);\n const b = (velocity - undampedFreq) * (duration * duration);\n return a * b;\n };\n }\n const initialGuess = 5 / duration;\n const undampedFreq = approximateRoot(envelope, derivative, initialGuess);\n duration = secondsToMilliseconds(duration);\n if (isNaN(undampedFreq)) {\n return {\n stiffness: 100,\n damping: 10,\n duration,\n };\n }\n else {\n const stiffness = Math.pow(undampedFreq, 2) * mass;\n return {\n stiffness,\n damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),\n duration,\n };\n }\n}\nconst rootIterations = 12;\nfunction approximateRoot(envelope, derivative, initialGuess) {\n let result = initialGuess;\n for (let i = 1; i < rootIterations; i++) {\n result = result - envelope(result) / derivative(result);\n }\n return result;\n}\nfunction calcAngularFreq(undampedFreq, dampingRatio) {\n return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);\n}\n\nexport { calcAngularFreq, findSpring, maxDamping, maxDuration, minDamping, minDuration };\n","import { millisecondsToSeconds } from '../../../utils/time-conversion.mjs';\nimport { calcGeneratorVelocity } from '../utils/velocity.mjs';\nimport { findSpring, calcAngularFreq } from './find.mjs';\n\nconst durationKeys = [\"duration\", \"bounce\"];\nconst physicsKeys = [\"stiffness\", \"damping\", \"mass\"];\nfunction isSpringType(options, keys) {\n return keys.some((key) => options[key] !== undefined);\n}\nfunction getSpringOptions(options) {\n let springOptions = {\n velocity: 0.0,\n stiffness: 100,\n damping: 10,\n mass: 1.0,\n isResolvedFromDuration: false,\n ...options,\n };\n // stiffness/damping/mass overrides duration/bounce\n if (!isSpringType(options, physicsKeys) &&\n isSpringType(options, durationKeys)) {\n const derived = findSpring(options);\n springOptions = {\n ...springOptions,\n ...derived,\n velocity: 0.0,\n mass: 1.0,\n };\n springOptions.isResolvedFromDuration = true;\n }\n return springOptions;\n}\nfunction spring({ keyframes, restDelta, restSpeed, ...options }) {\n const origin = keyframes[0];\n const target = keyframes[keyframes.length - 1];\n /**\n * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator\n * to reduce GC during animation.\n */\n const state = { done: false, value: origin };\n const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);\n const initialVelocity = velocity ? -millisecondsToSeconds(velocity) : 0.0;\n const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));\n const initialDelta = target - origin;\n const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));\n /**\n * If we're working on a granular scale, use smaller defaults for determining\n * when the spring is finished.\n *\n * These defaults have been selected emprically based on what strikes a good\n * ratio between feeling good and finishing as soon as changes are imperceptible.\n */\n const isGranularScale = Math.abs(initialDelta) < 5;\n restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);\n restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);\n let resolveSpring;\n if (dampingRatio < 1) {\n const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);\n // Underdamped spring\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return (target -\n envelope *\n (((initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) /\n angularFreq) *\n Math.sin(angularFreq * t) +\n initialDelta * Math.cos(angularFreq * t)));\n };\n }\n else if (dampingRatio === 1) {\n // Critically damped spring\n resolveSpring = (t) => target -\n Math.exp(-undampedAngularFreq * t) *\n (initialDelta +\n (initialVelocity + undampedAngularFreq * initialDelta) * t);\n }\n else {\n // Overdamped spring\n const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n // When performing sinh or cosh values can hit Infinity so we cap them here\n const freqForT = Math.min(dampedAngularFreq * t, 300);\n return (target -\n (envelope *\n ((initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) *\n Math.sinh(freqForT) +\n dampedAngularFreq *\n initialDelta *\n Math.cosh(freqForT))) /\n dampedAngularFreq);\n };\n }\n return {\n calculatedDuration: isResolvedFromDuration ? duration || null : null,\n next: (t) => {\n const current = resolveSpring(t);\n if (!isResolvedFromDuration) {\n let currentVelocity = initialVelocity;\n if (t !== 0) {\n /**\n * We only need to calculate velocity for under-damped springs\n * as over- and critically-damped springs can't overshoot, so\n * checking only for displacement is enough.\n */\n if (dampingRatio < 1) {\n currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);\n }\n else {\n currentVelocity = 0;\n }\n }\n const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;\n const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;\n state.done =\n isBelowVelocityThreshold && isBelowDisplacementThreshold;\n }\n else {\n state.done = t >= duration;\n }\n state.value = state.done ? target : current;\n return state;\n },\n };\n}\n\nexport { spring };\n","import { spring } from './spring/index.mjs';\nimport { calcGeneratorVelocity } from './utils/velocity.mjs';\n\nfunction inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {\n const origin = keyframes[0];\n const state = {\n done: false,\n value: origin,\n };\n const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);\n const nearestBoundary = (v) => {\n if (min === undefined)\n return max;\n if (max === undefined)\n return min;\n return Math.abs(min - v) < Math.abs(max - v) ? min : max;\n };\n let amplitude = power * velocity;\n const ideal = origin + amplitude;\n const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);\n /**\n * If the target has changed we need to re-calculate the amplitude, otherwise\n * the animation will start from the wrong position.\n */\n if (target !== ideal)\n amplitude = target - origin;\n const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);\n const calcLatest = (t) => target + calcDelta(t);\n const applyFriction = (t) => {\n const delta = calcDelta(t);\n const latest = calcLatest(t);\n state.done = Math.abs(delta) <= restDelta;\n state.value = state.done ? target : latest;\n };\n /**\n * Ideally this would resolve for t in a stateless way, we could\n * do that by always precalculating the animation but as we know\n * this will be done anyway we can assume that spring will\n * be discovered during that.\n */\n let timeReachedBoundary;\n let spring$1;\n const checkCatchBoundary = (t) => {\n if (!isOutOfBounds(state.value))\n return;\n timeReachedBoundary = t;\n spring$1 = spring({\n keyframes: [state.value, nearestBoundary(state.value)],\n velocity: calcGeneratorVelocity(calcLatest, t, state.value),\n damping: bounceDamping,\n stiffness: bounceStiffness,\n restDelta,\n restSpeed,\n });\n };\n checkCatchBoundary(0);\n return {\n calculatedDuration: null,\n next: (t) => {\n /**\n * We need to resolve the friction to figure out if we need a\n * spring but we don't want to do this twice per frame. So here\n * we flag if we updated for this frame and later if we did\n * we can skip doing it again.\n */\n let hasUpdatedFrame = false;\n if (!spring$1 && timeReachedBoundary === undefined) {\n hasUpdatedFrame = true;\n applyFriction(t);\n checkCatchBoundary(t);\n }\n /**\n * If we have a spring and the provided t is beyond the moment the friction\n * animation crossed the min/max boundary, use the spring.\n */\n if (timeReachedBoundary !== undefined && t > timeReachedBoundary) {\n return spring$1.next(t - timeReachedBoundary);\n }\n else {\n !hasUpdatedFrame && applyFriction(t);\n return state;\n }\n },\n };\n}\n\nexport { inertia };\n","import { frame, cancelFrame, frameData } from '../../../frameloop/frame.mjs';\n\nconst frameloopDriver = (update) => {\n const passTimestamp = ({ timestamp }) => update(timestamp);\n return {\n start: () => frame.update(passTimestamp, true),\n stop: () => cancelFrame(passTimestamp),\n /**\n * If we're processing this frame we can use the\n * framelocked timestamp to keep things in sync.\n */\n now: () => frameData.isProcessing ? frameData.timestamp : performance.now(),\n };\n};\n\nexport { frameloopDriver };\n","/**\n * Implement a practical max duration for keyframe generation\n * to prevent infinite loops\n */\nconst maxGeneratorDuration = 20000;\nfunction calcGeneratorDuration(generator) {\n let duration = 0;\n const timeStep = 50;\n let state = generator.next(duration);\n while (!state.done && duration < maxGeneratorDuration) {\n duration += timeStep;\n state = generator.next(duration);\n }\n return duration >= maxGeneratorDuration ? Infinity : duration;\n}\n\nexport { calcGeneratorDuration, maxGeneratorDuration };\n","import { keyframes } from '../../generators/keyframes.mjs';\nimport { spring } from '../../generators/spring/index.mjs';\nimport { inertia } from '../../generators/inertia.mjs';\nimport { frameloopDriver } from './driver-frameloop.mjs';\nimport { interpolate } from '../../../utils/interpolate.mjs';\nimport { clamp } from '../../../utils/clamp.mjs';\nimport { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';\nimport { calcGeneratorDuration } from '../../generators/utils/calc-duration.mjs';\n\nconst types = {\n decay: inertia,\n inertia,\n tween: keyframes,\n keyframes: keyframes,\n spring,\n};\n/**\n * Animate a single value on the main thread.\n *\n * This function is written, where functionality overlaps,\n * to be largely spec-compliant with WAAPI to allow fungibility\n * between the two.\n */\nfunction animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = \"keyframes\", repeat = 0, repeatDelay = 0, repeatType = \"loop\", onPlay, onStop, onComplete, onUpdate, ...options }) {\n let speed = 1;\n let hasStopped = false;\n let resolveFinishedPromise;\n let currentFinishedPromise;\n /**\n * Resolve the current Promise every time we enter the\n * finished state. This is WAAPI-compatible behaviour.\n */\n const updateFinishedPromise = () => {\n currentFinishedPromise = new Promise((resolve) => {\n resolveFinishedPromise = resolve;\n });\n };\n // Create the first finished promise\n updateFinishedPromise();\n let animationDriver;\n const generatorFactory = types[type] || keyframes;\n /**\n * If this isn't the keyframes generator and we've been provided\n * strings as keyframes, we need to interpolate these.\n * TODO: Support velocity for units and complex value types/\n */\n let mapNumbersToKeyframes;\n if (generatorFactory !== keyframes &&\n typeof keyframes$1[0] !== \"number\") {\n mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, {\n clamp: false,\n });\n keyframes$1 = [0, 100];\n }\n const generator = generatorFactory({ ...options, keyframes: keyframes$1 });\n let mirroredGenerator;\n if (repeatType === \"mirror\") {\n mirroredGenerator = generatorFactory({\n ...options,\n keyframes: [...keyframes$1].reverse(),\n velocity: -(options.velocity || 0),\n });\n }\n let playState = \"idle\";\n let holdTime = null;\n let startTime = null;\n let cancelTime = null;\n /**\n * If duration is undefined and we have repeat options,\n * we need to calculate a duration from the generator.\n *\n * We set it to the generator itself to cache the duration.\n * Any timeline resolver will need to have already precalculated\n * the duration by this step.\n */\n if (generator.calculatedDuration === null && repeat) {\n generator.calculatedDuration = calcGeneratorDuration(generator);\n }\n const { calculatedDuration } = generator;\n let resolvedDuration = Infinity;\n let totalDuration = Infinity;\n if (calculatedDuration !== null) {\n resolvedDuration = calculatedDuration + repeatDelay;\n totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;\n }\n let currentTime = 0;\n const tick = (timestamp) => {\n if (startTime === null)\n return;\n /**\n * requestAnimationFrame timestamps can come through as lower than\n * the startTime as set by performance.now(). Here we prevent this,\n * though in the future it could be possible to make setting startTime\n * a pending operation that gets resolved here.\n */\n if (speed > 0)\n startTime = Math.min(startTime, timestamp);\n if (speed < 0)\n startTime = Math.min(timestamp - totalDuration / speed, startTime);\n if (holdTime !== null) {\n currentTime = holdTime;\n }\n else {\n // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =\n // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for\n // example.\n currentTime = Math.round(timestamp - startTime) * speed;\n }\n // Rebase on delay\n const timeWithoutDelay = currentTime - delay * (speed >= 0 ? 1 : -1);\n const isInDelayPhase = speed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration;\n currentTime = Math.max(timeWithoutDelay, 0);\n /**\n * If this animation has finished, set the current time\n * to the total duration.\n */\n if (playState === \"finished\" && holdTime === null) {\n currentTime = totalDuration;\n }\n let elapsed = currentTime;\n let frameGenerator = generator;\n if (repeat) {\n /**\n * Get the current progress (0-1) of the animation. If t is >\n * than duration we'll get values like 2.5 (midway through the\n * third iteration)\n */\n const progress = currentTime / resolvedDuration;\n /**\n * Get the current iteration (0 indexed). For instance the floor of\n * 2.5 is 2.\n */\n let currentIteration = Math.floor(progress);\n /**\n * Get the current progress of the iteration by taking the remainder\n * so 2.5 is 0.5 through iteration 2\n */\n let iterationProgress = progress % 1.0;\n /**\n * If iteration progress is 1 we count that as the end\n * of the previous iteration.\n */\n if (!iterationProgress && progress >= 1) {\n iterationProgress = 1;\n }\n iterationProgress === 1 && currentIteration--;\n currentIteration = Math.min(currentIteration, repeat + 1);\n /**\n * Reverse progress if we're not running in \"normal\" direction\n */\n const iterationIsOdd = Boolean(currentIteration % 2);\n if (iterationIsOdd) {\n if (repeatType === \"reverse\") {\n iterationProgress = 1 - iterationProgress;\n if (repeatDelay) {\n iterationProgress -= repeatDelay / resolvedDuration;\n }\n }\n else if (repeatType === \"mirror\") {\n frameGenerator = mirroredGenerator;\n }\n }\n let p = clamp(0, 1, iterationProgress);\n if (currentTime > totalDuration) {\n p = repeatType === \"reverse\" && iterationIsOdd ? 1 : 0;\n }\n elapsed = p * resolvedDuration;\n }\n /**\n * If we're in negative time, set state as the initial keyframe.\n * This prevents delay: x, duration: 0 animations from finishing\n * instantly.\n */\n const state = isInDelayPhase\n ? { done: false, value: keyframes$1[0] }\n : frameGenerator.next(elapsed);\n if (mapNumbersToKeyframes) {\n state.value = mapNumbersToKeyframes(state.value);\n }\n let { done } = state;\n if (!isInDelayPhase && calculatedDuration !== null) {\n done = speed >= 0 ? currentTime >= totalDuration : currentTime <= 0;\n }\n const isAnimationFinished = holdTime === null &&\n (playState === \"finished\" || (playState === \"running\" && done));\n if (onUpdate) {\n onUpdate(state.value);\n }\n if (isAnimationFinished) {\n finish();\n }\n return state;\n };\n const stopAnimationDriver = () => {\n animationDriver && animationDriver.stop();\n animationDriver = undefined;\n };\n const cancel = () => {\n playState = \"idle\";\n stopAnimationDriver();\n resolveFinishedPromise();\n updateFinishedPromise();\n startTime = cancelTime = null;\n };\n const finish = () => {\n playState = \"finished\";\n onComplete && onComplete();\n stopAnimationDriver();\n resolveFinishedPromise();\n };\n const play = () => {\n if (hasStopped)\n return;\n if (!animationDriver)\n animationDriver = driver(tick);\n const now = animationDriver.now();\n onPlay && onPlay();\n if (holdTime !== null) {\n startTime = now - holdTime;\n }\n else if (!startTime || playState === \"finished\") {\n startTime = now;\n }\n if (playState === \"finished\") {\n updateFinishedPromise();\n }\n cancelTime = startTime;\n holdTime = null;\n /**\n * Set playState to running only after we've used it in\n * the previous logic.\n */\n playState = \"running\";\n animationDriver.start();\n };\n if (autoplay) {\n play();\n }\n const controls = {\n then(resolve, reject) {\n return currentFinishedPromise.then(resolve, reject);\n },\n get time() {\n return millisecondsToSeconds(currentTime);\n },\n set time(newTime) {\n newTime = secondsToMilliseconds(newTime);\n currentTime = newTime;\n if (holdTime !== null || !animationDriver || speed === 0) {\n holdTime = newTime;\n }\n else {\n startTime = animationDriver.now() - newTime / speed;\n }\n },\n get duration() {\n const duration = generator.calculatedDuration === null\n ? calcGeneratorDuration(generator)\n : generator.calculatedDuration;\n return millisecondsToSeconds(duration);\n },\n get speed() {\n return speed;\n },\n set speed(newSpeed) {\n if (newSpeed === speed || !animationDriver)\n return;\n speed = newSpeed;\n controls.time = millisecondsToSeconds(currentTime);\n },\n get state() {\n return playState;\n },\n play,\n pause: () => {\n playState = \"paused\";\n holdTime = currentTime;\n },\n stop: () => {\n hasStopped = true;\n if (playState === \"idle\")\n return;\n playState = \"idle\";\n onStop && onStop();\n cancel();\n },\n cancel: () => {\n if (cancelTime !== null)\n tick(cancelTime);\n cancel();\n },\n complete: () => {\n playState = \"finished\";\n },\n sample: (elapsed) => {\n startTime = 0;\n return tick(elapsed);\n },\n };\n return controls;\n}\n\nexport { animateValue };\n","import { animateStyle } from './index.mjs';\nimport { isWaapiSupportedEasing } from './easing.mjs';\nimport { getFinalKeyframe } from './utils/get-final-keyframe.mjs';\nimport { animateValue } from '../js/index.mjs';\nimport { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';\nimport { memo } from '../../../utils/memo.mjs';\nimport { noop } from '../../../utils/noop.mjs';\nimport { frameData, frame, cancelFrame } from '../../../frameloop/frame.mjs';\n\nconst supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, \"animate\"));\n/**\n * A list of values that can be hardware-accelerated.\n */\nconst acceleratedValues = new Set([\n \"opacity\",\n \"clipPath\",\n \"filter\",\n \"transform\",\n \"backgroundColor\",\n]);\n/**\n * 10ms is chosen here as it strikes a balance between smooth\n * results (more than one keyframe per frame at 60fps) and\n * keyframe quantity.\n */\nconst sampleDelta = 10; //ms\n/**\n * Implement a practical max duration for keyframe generation\n * to prevent infinite loops\n */\nconst maxDuration = 20000;\nconst requiresPregeneratedKeyframes = (valueName, options) => options.type === \"spring\" ||\n valueName === \"backgroundColor\" ||\n !isWaapiSupportedEasing(options.ease);\nfunction createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) {\n const canAccelerateAnimation = supportsWaapi() &&\n acceleratedValues.has(valueName) &&\n !options.repeatDelay &&\n options.repeatType !== \"mirror\" &&\n options.damping !== 0 &&\n options.type !== \"inertia\";\n if (!canAccelerateAnimation)\n return false;\n /**\n * TODO: Unify with js/index\n */\n let hasStopped = false;\n let resolveFinishedPromise;\n let currentFinishedPromise;\n /**\n * Resolve the current Promise every time we enter the\n * finished state. This is WAAPI-compatible behaviour.\n */\n const updateFinishedPromise = () => {\n currentFinishedPromise = new Promise((resolve) => {\n resolveFinishedPromise = resolve;\n });\n };\n // Create the first finished promise\n updateFinishedPromise();\n let { keyframes, duration = 300, ease, times } = options;\n /**\n * If this animation needs pre-generated keyframes then generate.\n */\n if (requiresPregeneratedKeyframes(valueName, options)) {\n const sampleAnimation = animateValue({\n ...options,\n repeat: 0,\n delay: 0,\n });\n let state = { done: false, value: keyframes[0] };\n const pregeneratedKeyframes = [];\n /**\n * Bail after 20 seconds of pre-generated keyframes as it's likely\n * we're heading for an infinite loop.\n */\n let t = 0;\n while (!state.done && t < maxDuration) {\n state = sampleAnimation.sample(t);\n pregeneratedKeyframes.push(state.value);\n t += sampleDelta;\n }\n times = undefined;\n keyframes = pregeneratedKeyframes;\n duration = t - sampleDelta;\n ease = \"linear\";\n }\n const animation = animateStyle(value.owner.current, valueName, keyframes, {\n ...options,\n duration,\n /**\n * This function is currently not called if ease is provided\n * as a function so the cast is safe.\n *\n * However it would be possible for a future refinement to port\n * in easing pregeneration from Motion One for browsers that\n * support the upcoming `linear()` easing function.\n */\n ease: ease,\n times,\n });\n /**\n * WAAPI animations don't resolve startTime synchronously. But a blocked\n * thread could delay the startTime resolution by a noticeable amount.\n * For synching handoff animations with the new Motion animation we want\n * to ensure startTime is synchronously set.\n */\n if (options.syncStart) {\n animation.startTime = frameData.isProcessing\n ? frameData.timestamp\n : document.timeline\n ? document.timeline.currentTime\n : performance.now();\n }\n const cancelAnimation = () => animation.cancel();\n const safeCancel = () => {\n frame.update(cancelAnimation);\n resolveFinishedPromise();\n updateFinishedPromise();\n };\n /**\n * Prefer the `onfinish` prop as it's more widely supported than\n * the `finished` promise.\n *\n * Here, we synchronously set the provided MotionValue to the end\n * keyframe. If we didn't, when the WAAPI animation is finished it would\n * be removed from the element which would then revert to its old styles.\n */\n animation.onfinish = () => {\n value.set(getFinalKeyframe(keyframes, options));\n onComplete && onComplete();\n safeCancel();\n };\n /**\n * Animation interrupt callback.\n */\n const controls = {\n then(resolve, reject) {\n return currentFinishedPromise.then(resolve, reject);\n },\n attachTimeline(timeline) {\n animation.timeline = timeline;\n animation.onfinish = null;\n return noop;\n },\n get time() {\n return millisecondsToSeconds(animation.currentTime || 0);\n },\n set time(newTime) {\n animation.currentTime = secondsToMilliseconds(newTime);\n },\n get speed() {\n return animation.playbackRate;\n },\n set speed(newSpeed) {\n animation.playbackRate = newSpeed;\n },\n get duration() {\n return millisecondsToSeconds(duration);\n },\n play: () => {\n if (hasStopped)\n return;\n animation.play();\n /**\n * Cancel any pending cancel tasks\n */\n cancelFrame(cancelAnimation);\n },\n pause: () => animation.pause(),\n stop: () => {\n hasStopped = true;\n if (animation.playState === \"idle\")\n return;\n /**\n * WAAPI doesn't natively have any interruption capabilities.\n *\n * Rather than read commited styles back out of the DOM, we can\n * create a renderless JS animation and sample it twice to calculate\n * its current value, \"previous\" value, and therefore allow\n * Motion to calculate velocity for any subsequent animation.\n */\n const { currentTime } = animation;\n if (currentTime) {\n const sampleAnimation = animateValue({\n ...options,\n autoplay: false,\n });\n value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta);\n }\n safeCancel();\n },\n complete: () => animation.finish(),\n cancel: safeCancel,\n };\n return controls;\n}\n\nexport { createAcceleratedAnimation };\n","function memo(callback) {\n let result;\n return () => {\n if (result === undefined)\n result = callback();\n return result;\n };\n}\n\nexport { memo };\n","import { mapEasingToNativeEasing } from './easing.mjs';\n\nfunction animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = \"loop\", ease, times, } = {}) {\n const keyframeOptions = { [valueName]: keyframes };\n if (times)\n keyframeOptions.offset = times;\n const easing = mapEasingToNativeEasing(ease);\n /**\n * If this is an easing array, apply to keyframes, not animation as a whole\n */\n if (Array.isArray(easing))\n keyframeOptions.easing = easing;\n return element.animate(keyframeOptions, {\n delay,\n duration,\n easing: !Array.isArray(easing) ? easing : \"linear\",\n fill: \"both\",\n iterations: repeat + 1,\n direction: repeatType === \"reverse\" ? \"alternate\" : \"normal\",\n });\n}\n\nexport { animateStyle };\n","function getFinalKeyframe(keyframes, { repeat, repeatType = \"loop\" }) {\n const index = repeat && repeatType !== \"loop\" && repeat % 2 === 1\n ? 0\n : keyframes.length - 1;\n return keyframes[index];\n}\n\nexport { getFinalKeyframe };\n","import { transformProps } from '../../render/html/utils/transform.mjs';\n\nconst underDampedSpring = {\n type: \"spring\",\n stiffness: 500,\n damping: 25,\n restSpeed: 10,\n};\nconst criticallyDampedSpring = (target) => ({\n type: \"spring\",\n stiffness: 550,\n damping: target === 0 ? 2 * Math.sqrt(550) : 30,\n restSpeed: 10,\n});\nconst keyframesTransition = {\n type: \"keyframes\",\n duration: 0.8,\n};\n/**\n * Default easing curve is a slightly shallower version of\n * the default browser easing curve.\n */\nconst ease = {\n type: \"keyframes\",\n ease: [0.25, 0.1, 0.35, 1],\n duration: 0.3,\n};\nconst getDefaultTransition = (valueKey, { keyframes }) => {\n if (keyframes.length > 2) {\n return keyframesTransition;\n }\n else if (transformProps.has(valueKey)) {\n return valueKey.startsWith(\"scale\")\n ? criticallyDampedSpring(keyframes[1])\n : underDampedSpring;\n }\n return ease;\n};\n\nexport { getDefaultTransition };\n","import { complex } from '../../value/types/complex/index.mjs';\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 */\nconst isAnimatable = (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 (complex.test(value) || value === \"0\") && // 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\nexport { isAnimatable };\n","import { complex } from './index.mjs';\nimport { floatRegex } from '../utils.mjs';\n\n/**\n * Properties that should default to 1 or 100%\n */\nconst maxDefaults = new Set([\"brightness\", \"contrast\", \"saturate\", \"opacity\"]);\nfunction applyDefaultFilter(v) {\n const [name, value] = v.slice(0, -1).split(\"(\");\n if (name === \"drop-shadow\")\n return v;\n const [number] = value.match(floatRegex) || [];\n if (!number)\n return v;\n const unit = value.replace(number, \"\");\n let defaultValue = maxDefaults.has(name) ? 1 : 0;\n if (number !== value)\n defaultValue *= 100;\n return name + \"(\" + defaultValue + unit + \")\";\n}\nconst functionRegex = /([a-z-]*)\\(.*?\\)/g;\nconst filter = {\n ...complex,\n getAnimatableNone: (v) => {\n const functions = v.match(functionRegex);\n return functions ? functions.map(applyDefaultFilter).join(\" \") : v;\n },\n};\n\nexport { filter };\n","import { color } from '../../../value/types/color/index.mjs';\nimport { filter } from '../../../value/types/complex/filter.mjs';\nimport { numberValueTypes } from './number.mjs';\n\n/**\n * A map of default value types for common values\n */\nconst defaultValueTypes = {\n ...numberValueTypes,\n // Color props\n color,\n backgroundColor: color,\n outlineColor: color,\n fill: color,\n stroke: color,\n // Border props\n borderColor: color,\n borderTopColor: color,\n borderRightColor: color,\n borderBottomColor: color,\n borderLeftColor: color,\n filter,\n WebkitFilter: filter,\n};\n/**\n * Gets the default ValueType for the provided value key\n */\nconst getDefaultValueType = (key) => defaultValueTypes[key];\n\nexport { defaultValueTypes, getDefaultValueType };\n","import { complex } from '../../../value/types/complex/index.mjs';\nimport { filter } from '../../../value/types/complex/filter.mjs';\nimport { getDefaultValueType } from './defaults.mjs';\n\nfunction getAnimatableNone(key, value) {\n let defaultValueType = getDefaultValueType(key);\n if (defaultValueType !== filter)\n defaultValueType = complex;\n // If value is not recognised as animatable, ie \"none\", create an animatable version origin based on the target\n return defaultValueType.getAnimatableNone\n ? defaultValueType.getAnimatableNone(value)\n : undefined;\n}\n\nexport { getAnimatableNone };\n","/**\n * Check if the value is a zero value string like \"0px\" or \"0%\"\n */\nconst isZeroValueString = (v) => /^0[^.\\s]+$/.test(v);\n\nexport { isZeroValueString };\n","import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';\n\nfunction isNone(value) {\n if (typeof value === \"number\") {\n return value === 0;\n }\n else if (value !== null) {\n return value === \"none\" || value === \"0\" || isZeroValueString(value);\n }\n}\n\nexport { isNone };\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({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {\n return !!Object.keys(transition).length;\n}\nfunction getValueTransition(transition, key) {\n return transition[key] || transition[\"default\"] || transition;\n}\n\nexport { getValueTransition, isTransitionDefined };\n","import { warning } from '../../utils/errors.mjs';\nimport { secondsToMilliseconds } from '../../utils/time-conversion.mjs';\nimport { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';\nimport { createAcceleratedAnimation } from '../animators/waapi/create-accelerated-animation.mjs';\nimport { createInstantAnimation } from '../animators/instant.mjs';\nimport { getDefaultTransition } from '../utils/default-transitions.mjs';\nimport { isAnimatable } from '../utils/is-animatable.mjs';\nimport { getKeyframes } from '../utils/keyframes.mjs';\nimport { getValueTransition, isTransitionDefined } from '../utils/transitions.mjs';\nimport { animateValue } from '../animators/js/index.mjs';\n\nconst animateMotionValue = (valueName, value, target, transition = {}) => {\n return (onComplete) => {\n const valueTransition = getValueTransition(transition, valueName) || {};\n /**\n * Most transition values are currently completely overwritten by value-specific\n * transitions. In the future it'd be nicer to blend these transitions. But for now\n * delay actually does inherit from the root transition if not value-specific.\n */\n const delay = valueTransition.delay || transition.delay || 0;\n /**\n * Elapsed isn't a public transition option but can be passed through from\n * optimized appear effects in milliseconds.\n */\n let { elapsed = 0 } = transition;\n elapsed = elapsed - secondsToMilliseconds(delay);\n const keyframes = getKeyframes(value, valueName, target, valueTransition);\n /**\n * Check if we're able to animate between the start and end keyframes,\n * and throw a warning if we're attempting to animate between one that's\n * animatable and another that isn't.\n */\n const originKeyframe = keyframes[0];\n const targetKeyframe = keyframes[keyframes.length - 1];\n const isOriginAnimatable = isAnimatable(valueName, originKeyframe);\n const isTargetAnimatable = isAnimatable(valueName, targetKeyframe);\n warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from \"${originKeyframe}\" to \"${targetKeyframe}\". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \\`style\\` property.`);\n let options = {\n keyframes,\n velocity: value.getVelocity(),\n ease: \"easeOut\",\n ...valueTransition,\n delay: -elapsed,\n onUpdate: (v) => {\n value.set(v);\n valueTransition.onUpdate && valueTransition.onUpdate(v);\n },\n onComplete: () => {\n onComplete();\n valueTransition.onComplete && valueTransition.onComplete();\n },\n };\n /**\n * If there's no transition defined for this value, we can generate\n * unqiue transition settings for this value.\n */\n if (!isTransitionDefined(valueTransition)) {\n options = {\n ...options,\n ...getDefaultTransition(valueName, options),\n };\n }\n /**\n * Both WAAPI and our internal animation functions use durations\n * as defined by milliseconds, while our external API defines them\n * as seconds.\n */\n if (options.duration) {\n options.duration = secondsToMilliseconds(options.duration);\n }\n if (options.repeatDelay) {\n options.repeatDelay = secondsToMilliseconds(options.repeatDelay);\n }\n if (!isOriginAnimatable ||\n !isTargetAnimatable ||\n instantAnimationState.current ||\n valueTransition.type === false) {\n /**\n * If we can't animate this value, or the global instant animation flag is set,\n * or this is simply defined as an instant transition, return an instant transition.\n */\n return createInstantAnimation(instantAnimationState.current\n ? { ...options, delay: 0 }\n : options);\n }\n /**\n * Animate via WAAPI if possible.\n */\n if (value.owner &&\n value.owner.current instanceof HTMLElement &&\n !value.owner.getProps().onUpdate) {\n const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options);\n if (acceleratedAnimation)\n return acceleratedAnimation;\n }\n /**\n * If we didn't create an accelerated animation, create a JS animation\n */\n return animateValue(options);\n };\n};\n\nexport { animateMotionValue };\n","import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';\nimport { isAnimatable } from './is-animatable.mjs';\nimport { isNone } from './is-none.mjs';\n\nfunction getKeyframes(value, valueName, target, transition) {\n const isTargetAnimatable = isAnimatable(valueName, target);\n let keyframes;\n if (Array.isArray(target)) {\n keyframes = [...target];\n }\n else {\n keyframes = [null, target];\n }\n const defaultOrigin = transition.from !== undefined ? transition.from : value.get();\n let animatableTemplateValue = undefined;\n const noneKeyframeIndexes = [];\n for (let i = 0; i < keyframes.length; i++) {\n /**\n * Fill null/wildcard keyframes\n */\n if (keyframes[i] === null) {\n keyframes[i] = i === 0 ? defaultOrigin : keyframes[i - 1];\n }\n if (isNone(keyframes[i])) {\n noneKeyframeIndexes.push(i);\n }\n // TODO: Clean this conditional, it works for now\n if (typeof keyframes[i] === \"string\" &&\n keyframes[i] !== \"none\" &&\n keyframes[i] !== \"0\") {\n animatableTemplateValue = keyframes[i];\n }\n }\n if (isTargetAnimatable &&\n noneKeyframeIndexes.length &&\n animatableTemplateValue) {\n for (let i = 0; i < noneKeyframeIndexes.length; i++) {\n const index = noneKeyframeIndexes[i];\n keyframes[index] = getAnimatableNone(valueName, animatableTemplateValue);\n }\n }\n return keyframes;\n}\n\nexport { getKeyframes };\n","import { animateValue } from './js/index.mjs';\nimport { noop } from '../../utils/noop.mjs';\n\nfunction createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) {\n const setValue = () => {\n onUpdate && onUpdate(keyframes[keyframes.length - 1]);\n onComplete && onComplete();\n /**\n * TODO: As this API grows it could make sense to always return\n * animateValue. This will be a bigger project as animateValue\n * is frame-locked whereas this function resolves instantly.\n * This is a behavioural change and also has ramifications regarding\n * assumptions within tests.\n */\n return {\n time: 0,\n speed: 1,\n duration: 0,\n play: (noop),\n pause: (noop),\n stop: (noop),\n then: (resolve) => {\n resolve();\n return Promise.resolve();\n },\n cancel: (noop),\n complete: (noop),\n };\n };\n return delay\n ? animateValue({\n keyframes: [0, 1],\n duration: 0,\n delay,\n onComplete: setValue,\n })\n : setValue();\n}\n\nexport { createInstantAnimation };\n","import { isMotionValue } from '../utils/is-motion-value.mjs';\n\nfunction isWillChangeMotionValue(value) {\n return Boolean(isMotionValue(value) && value.add);\n}\n\nexport { isWillChangeMotionValue };\n","/**\n * Check if value is a numerical string, ie a string that is purely a number eg \"100\" or \"-100.1\"\n */\nconst isNumericalString = (v) => /^\\-?\\d*\\.?\\d+$/.test(v);\n\nexport { isNumericalString };\n","function addUniqueItem(arr, item) {\n if (arr.indexOf(item) === -1)\n arr.push(item);\n}\nfunction removeItem(arr, item) {\n const index = arr.indexOf(item);\n if (index > -1)\n arr.splice(index, 1);\n}\n// Adapted from array-move\nfunction moveItem([...arr], fromIndex, toIndex) {\n const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;\n if (startIndex >= 0 && startIndex < arr.length) {\n const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;\n const [item] = arr.splice(fromIndex, 1);\n arr.splice(endIndex, 0, item);\n }\n return arr;\n}\n\nexport { addUniqueItem, moveItem, removeItem };\n","import { addUniqueItem, removeItem } from './array.mjs';\n\nclass SubscriptionManager {\n constructor() {\n this.subscriptions = [];\n }\n add(handler) {\n addUniqueItem(this.subscriptions, handler);\n return () => removeItem(this.subscriptions, handler);\n }\n notify(a, b, c) {\n const 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 (let 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 const handler = this.subscriptions[i];\n handler && handler(a, b, c);\n }\n }\n }\n getSize() {\n return this.subscriptions.length;\n }\n clear() {\n this.subscriptions.length = 0;\n }\n}\n\nexport { SubscriptionManager };\n","import { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { velocityPerSecond } from '../utils/velocity-per-second.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\nimport { frame, frameData } from '../frameloop/frame.mjs';\n\nconst isFloat = (value) => {\n return !isNaN(parseFloat(value));\n};\nconst collectMotionValues = {\n current: undefined,\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nclass MotionValue {\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 constructor(init, options = {}) {\n /**\n * This will be replaced by the build step with the latest version number.\n * When MotionValues are provided to motion components, warn if versions are mixed.\n */\n this.version = \"10.16.4\";\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 * 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 /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n this.updateAndNotify = (v, render = true) => {\n this.prev = this.current;\n this.current = v;\n // Update timestamp\n const { delta, timestamp } = frameData;\n if (this.lastUpdated !== timestamp) {\n this.timeDelta = delta;\n this.lastUpdated = timestamp;\n frame.postRender(this.scheduleVelocityCheck);\n }\n // Update update subscribers\n if (this.prev !== this.current && this.events.change) {\n this.events.change.notify(this.current);\n }\n // Update velocity subscribers\n if (this.events.velocityChange) {\n this.events.velocityChange.notify(this.getVelocity());\n }\n // Update render subscribers\n if (render && this.events.renderRequest) {\n this.events.renderRequest.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 = () => frame.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 = ({ timestamp }) => {\n if (timestamp !== this.lastUpdated) {\n this.prev = this.current;\n if (this.events.velocityChange) {\n this.events.velocityChange.notify(this.getVelocity());\n }\n }\n };\n this.hasAnimated = false;\n this.prev = this.current = init;\n this.canTrackVelocity = isFloat(this.current);\n this.owner = options.owner;\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 * ```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.on(\"change\", updateOpacity)\n * const unsubscribeY = y.on(\"change\", updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return \n * }\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 * @deprecated\n */\n onChange(subscription) {\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on(\"change\", callback).`);\n }\n return this.on(\"change\", subscription);\n }\n on(eventName, callback) {\n if (!this.events[eventName]) {\n this.events[eventName] = new SubscriptionManager();\n }\n const unsubscribe = this.events[eventName].add(callback);\n if (eventName === \"change\") {\n return () => {\n unsubscribe();\n /**\n * If we have no more change listeners by the start\n * of the next frame, stop active animations.\n */\n frame.read(() => {\n if (!this.events.change.getSize()) {\n this.stop();\n }\n });\n };\n }\n return unsubscribe;\n }\n clearListeners() {\n for (const eventManagers in this.events) {\n this.events[eventManagers].clear();\n }\n }\n /**\n * Attaches a passive effect to the `MotionValue`.\n *\n * @internal\n */\n attach(passiveEffect, stopPassiveEffect) {\n this.passiveEffect = passiveEffect;\n this.stopPassiveEffect = stopPassiveEffect;\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 set(v, render = true) {\n if (!render || !this.passiveEffect) {\n this.updateAndNotify(v, render);\n }\n else {\n this.passiveEffect(v, this.updateAndNotify);\n }\n }\n setWithVelocity(prev, current, delta) {\n this.set(current);\n this.prev = prev;\n this.timeDelta = delta;\n }\n /**\n * Set the state of the `MotionValue`, stopping any active animations,\n * effects, and resets velocity to `0`.\n */\n jump(v) {\n this.updateAndNotify(v);\n this.prev = v;\n this.stop();\n if (this.stopPassiveEffect)\n this.stopPassiveEffect();\n }\n /**\n * Returns the latest state of `MotionValue`\n *\n * @returns - The latest state of `MotionValue`\n *\n * @public\n */\n get() {\n if (collectMotionValues.current) {\n collectMotionValues.current.push(this);\n }\n return this.current;\n }\n /**\n * @public\n */\n getPrevious() {\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 getVelocity() {\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 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 start(startAnimation) {\n this.stop();\n return new Promise((resolve) => {\n this.hasAnimated = true;\n this.animation = startAnimation(resolve);\n if (this.events.animationStart) {\n this.events.animationStart.notify();\n }\n }).then(() => {\n if (this.events.animationComplete) {\n this.events.animationComplete.notify();\n }\n this.clearAnimation();\n });\n }\n /**\n * Stop the currently active animation.\n *\n * @public\n */\n stop() {\n if (this.animation) {\n this.animation.stop();\n if (this.events.animationCancel) {\n this.events.animationCancel.notify();\n }\n }\n this.clearAnimation();\n }\n /**\n * Returns `true` if this value is currently animating.\n *\n * @public\n */\n isAnimating() {\n return !!this.animation;\n }\n clearAnimation() {\n delete this.animation;\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 destroy() {\n this.clearListeners();\n this.stop();\n if (this.stopPassiveEffect) {\n this.stopPassiveEffect();\n }\n }\n}\nfunction motionValue(init, options) {\n return new MotionValue(init, options);\n}\n\nexport { MotionValue, collectMotionValues, motionValue };\n","/**\n * Tests a provided value against a ValueType\n */\nconst testValueType = (v) => (type) => type.test(v);\n\nexport { testValueType };\n","import { number } from '../../../value/types/numbers/index.mjs';\nimport { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.mjs';\nimport { testValueType } from './test.mjs';\nimport { auto } from './type-auto.mjs';\n\n/**\n * A list of value types commonly used for dimensions\n */\nconst dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];\n/**\n * Tests a dimensional value against the list of dimension ValueTypes\n */\nconst findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));\n\nexport { dimensionValueTypes, findDimensionValueType };\n","/**\n * ValueType for \"auto\"\n */\nconst auto = {\n test: (v) => v === \"auto\",\n parse: (v) => v,\n};\n\nexport { auto };\n","import { color } from '../../../value/types/color/index.mjs';\nimport { complex } from '../../../value/types/complex/index.mjs';\nimport { dimensionValueTypes } from './dimensions.mjs';\nimport { testValueType } from './test.mjs';\n\n/**\n * A list of all ValueTypes\n */\nconst valueTypes = [...dimensionValueTypes, color, complex];\n/**\n * Tests a value against the list of ValueTypes\n */\nconst findValueType = (v) => valueTypes.find(testValueType(v));\n\nexport { findValueType };\n","import { isNumericalString } from '../../utils/is-numerical-string.mjs';\nimport { isZeroValueString } from '../../utils/is-zero-value-string.mjs';\nimport { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { complex } from '../../value/types/complex/index.mjs';\nimport { getAnimatableNone } from '../dom/value-types/animatable-none.mjs';\nimport { findValueType } from '../dom/value-types/find.mjs';\nimport { resolveVariant } from './resolve-dynamic-variants.mjs';\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 const resolved = resolveVariant(visualElement, definition);\n let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};\n target = { ...target, ...transitionEnd };\n for (const key in target) {\n const value = resolveFinalValueInKeyframes(target[key]);\n setMotionValue(visualElement, key, value);\n }\n}\nfunction setVariants(visualElement, variantLabels) {\n const reversedLabels = [...variantLabels].reverse();\n reversedLabels.forEach((key) => {\n const variant = visualElement.getVariant(key);\n variant && setTarget(visualElement, variant);\n if (visualElement.variantChildren) {\n visualElement.variantChildren.forEach((child) => {\n setVariants(child, variantLabels);\n });\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;\n const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));\n const numNewValues = newValueKeys.length;\n if (!numNewValues)\n return;\n for (let i = 0; i < numNewValues; i++) {\n const key = newValueKeys[i];\n const targetValue = target[key];\n let 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\" &&\n (isNumericalString(value) || isZeroValueString(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) && complex.test(targetValue)) {\n value = getAnimatableNone(key, targetValue);\n }\n visualElement.addValue(key, motionValue(value, { owner: visualElement }));\n if (origin[key] === undefined) {\n origin[key] = value;\n }\n if (value !== null)\n visualElement.setBaseTarget(key, value);\n }\n}\nfunction getOriginFromTransition(key, transition) {\n if (!transition)\n return;\n const valueTransition = transition[key] || transition[\"default\"] || transition;\n return valueTransition.from;\n}\nfunction getOrigin(target, transition, visualElement) {\n const origin = {};\n for (const key in target) {\n const transitionOrigin = getOriginFromTransition(key, transition);\n if (transitionOrigin !== undefined) {\n origin[key] = transitionOrigin;\n }\n else {\n const value = visualElement.getValue(key);\n if (value) {\n origin[key] = value.get();\n }\n }\n }\n return origin;\n}\n\nexport { checkTargetForNewValues, getOrigin, getOriginFromTransition, setTarget, setValues };\n","import { transformProps } from '../../render/html/utils/transform.mjs';\nimport { optimizedAppearDataAttribute } from '../optimized-appear/data-id.mjs';\nimport { animateMotionValue } from './motion-value.mjs';\nimport { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';\nimport { setTarget } from '../../render/utils/setters.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\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({ protectedKeys, needsAnimating }, key) {\n const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;\n needsAnimating[key] = false;\n return shouldBlock;\n}\nfunction animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {\n let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);\n const willChange = visualElement.getValue(\"willChange\");\n if (transitionOverride)\n transition = transitionOverride;\n const animations = [];\n const animationTypeState = type &&\n visualElement.animationState &&\n visualElement.animationState.getState()[type];\n for (const key in target) {\n const value = visualElement.getValue(key);\n const valueTarget = target[key];\n if (!value ||\n valueTarget === undefined ||\n (animationTypeState &&\n shouldBlockAnimation(animationTypeState, key))) {\n continue;\n }\n const valueTransition = {\n delay,\n elapsed: 0,\n ...transition,\n };\n /**\n * If this is the first time a value is being animated, check\n * to see if we're handling off from an existing animation.\n */\n if (window.HandoffAppearAnimations && !value.hasAnimated) {\n const appearId = visualElement.getProps()[optimizedAppearDataAttribute];\n if (appearId) {\n valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, frame);\n valueTransition.syncStart = true;\n }\n }\n value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)\n ? { type: false }\n : valueTransition));\n const animation = value.animation;\n if (isWillChangeMotionValue(willChange)) {\n willChange.add(key);\n animation.then(() => willChange.remove(key));\n }\n animations.push(animation);\n }\n if (transitionEnd) {\n Promise.all(animations).then(() => {\n transitionEnd && setTarget(visualElement, transitionEnd);\n });\n }\n return animations;\n}\n\nexport { animateTarget };\n","import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';\nimport { animateTarget } from './visual-element-target.mjs';\n\nfunction animateVariant(visualElement, variant, options = {}) {\n const resolved = resolveVariant(visualElement, variant, options.custom);\n let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};\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 const getAnimation = resolved\n ? () => Promise.all(animateTarget(visualElement, resolved, options))\n : () => 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 const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size\n ? (forwardDelay = 0) => {\n const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;\n return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);\n }\n : () => 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 const { when } = transition;\n if (when) {\n const [first, last] = when === \"beforeChildren\"\n ? [getAnimation, getChildAnimations]\n : [getChildAnimations, getAnimation];\n return first().then(() => last());\n }\n else {\n return Promise.all([getAnimation(), getChildAnimations(options.delay)]);\n }\n}\nfunction animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {\n const animations = [];\n const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;\n const generateStaggerDuration = staggerDirection === 1\n ? (i = 0) => i * staggerChildren\n : (i = 0) => maxStaggerDuration - i * staggerChildren;\n Array.from(visualElement.variantChildren)\n .sort(sortByTreeOrder)\n .forEach((child, i) => {\n child.notify(\"AnimationStart\", variant);\n animations.push(animateVariant(child, variant, {\n ...options,\n delay: delayChildren + generateStaggerDuration(i),\n }).then(() => child.notify(\"AnimationComplete\", variant)));\n });\n return Promise.all(animations);\n}\nfunction sortByTreeOrder(a, b) {\n return a.sortNodePosition(b);\n}\n\nexport { animateVariant, sortByTreeOrder };\n","import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { isKeyframesTarget } from '../../animation/utils/is-keyframes-target.mjs';\nimport { shallowCompare } from '../../utils/shallow-compare.mjs';\nimport { isVariantLabel } from './is-variant-label.mjs';\nimport { resolveVariant } from './resolve-dynamic-variants.mjs';\nimport { variantPriorityOrder } from './variant-props.mjs';\nimport { animateVisualElement } from '../../animation/interfaces/visual-element.mjs';\n\nconst reversePriorityOrder = [...variantPriorityOrder].reverse();\nconst numAnimationTypes = variantPriorityOrder.length;\nfunction animateList(visualElement) {\n return (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));\n}\nfunction createAnimationState(visualElement) {\n let animate = animateList(visualElement);\n const state = createState();\n let 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 const buildResolvedTypeValues = (acc, definition) => {\n const resolved = resolveVariant(visualElement, definition);\n if (resolved) {\n const { transition, transitionEnd, ...target } = resolved;\n acc = { ...acc, ...target, ...transitionEnd };\n }\n return acc;\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 const props = visualElement.getProps();\n const 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 const 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 const 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 let 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 let removedVariantIndex = Infinity;\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 (let i = 0; i < numAnimationTypes; i++) {\n const type = reversePriorityOrder[i];\n const typeState = state[type];\n const prop = props[type] !== undefined ? props[type] : context[type];\n const 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 const 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 let 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 = { ...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 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 const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);\n let shouldAnimateType = variantDidChange ||\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 const 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 let 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 const { prevResolvedValues = {} } = typeState;\n const allKeys = {\n ...prevResolvedValues,\n ...resolvedValues,\n };\n const markToAnimate = (key) => {\n shouldAnimateType = true;\n removedKeys.delete(key);\n typeState.needsAnimating[key] = true;\n };\n for (const key in allKeys) {\n const next = resolvedValues[key];\n const 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) || variantDidChange) {\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 = { ...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(...definitionList.map((animation) => ({\n animation: animation,\n options: { type, ...options },\n })));\n }\n }\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 const fallbackAnimation = {};\n removedKeys.forEach((key) => {\n const fallbackTarget = visualElement.getBaseTarget(key);\n if (fallbackTarget !== undefined) {\n fallbackAnimation[key] = fallbackTarget;\n }\n });\n animations.push({ animation: fallbackAnimation });\n }\n let 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((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });\n state[type].isActive = isActive;\n const animations = animateChanges(options, type);\n for (const key in state) {\n state[key].protectedKeys = {};\n }\n return animations;\n }\n return {\n animateChanges,\n setActive,\n setAnimateFunction,\n getState: () => state,\n };\n}\nfunction checkVariantsDidChange(prev, next) {\n if (typeof next === \"string\") {\n return next !== prev;\n }\n else if (Array.isArray(next)) {\n return !shallowCompare(next, prev);\n }\n return false;\n}\nfunction createTypeState(isActive = false) {\n return {\n isActive,\n protectedKeys: {},\n needsAnimating: {},\n prevResolvedValues: {},\n };\n}\nfunction createState() {\n return {\n animate: createTypeState(true),\n whileInView: createTypeState(),\n whileHover: createTypeState(),\n whileTap: createTypeState(),\n whileDrag: createTypeState(),\n whileFocus: createTypeState(),\n exit: createTypeState(),\n };\n}\n\nexport { checkVariantsDidChange, createAnimationState };\n","import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';\nimport { animateTarget } from './visual-element-target.mjs';\nimport { animateVariant } from './visual-element-variant.mjs';\n\nfunction animateVisualElement(visualElement, definition, options = {}) {\n visualElement.notify(\"AnimationStart\", definition);\n let animation;\n if (Array.isArray(definition)) {\n const animations = definition.map((variant) => animateVariant(visualElement, variant, options));\n animation = Promise.all(animations);\n }\n else if (typeof definition === \"string\") {\n animation = animateVariant(visualElement, definition, options);\n }\n else {\n const resolvedDefinition = typeof definition === \"function\"\n ? resolveVariant(visualElement, definition, options.custom)\n : definition;\n animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));\n }\n return animation.then(() => visualElement.notify(\"AnimationComplete\", definition));\n}\n\nexport { animateVisualElement };\n","import { isAnimationControls } from '../../../animation/utils/is-animation-controls.mjs';\nimport { createAnimationState } from '../../../render/utils/animation-state.mjs';\nimport { Feature } from '../Feature.mjs';\n\nclass AnimationFeature extends Feature {\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 constructor(node) {\n super(node);\n node.animationState || (node.animationState = createAnimationState(node));\n }\n updateAnimationControlsSubscription() {\n const { animate } = this.node.getProps();\n this.unmount();\n if (isAnimationControls(animate)) {\n this.unmount = animate.subscribe(this.node);\n }\n }\n /**\n * Subscribe any provided AnimationControls to the component's VisualElement\n */\n mount() {\n this.updateAnimationControlsSubscription();\n }\n update() {\n const { animate } = this.node.getProps();\n const { animate: prevAnimate } = this.node.prevProps || {};\n if (animate !== prevAnimate) {\n this.updateAnimationControlsSubscription();\n }\n }\n unmount() { }\n}\n\nexport { AnimationFeature };\n","import { Feature } from '../Feature.mjs';\n\nlet id = 0;\nclass ExitAnimationFeature extends Feature {\n constructor() {\n super(...arguments);\n this.id = id++;\n }\n update() {\n if (!this.node.presenceContext)\n return;\n const { isPresent, onExitComplete, custom } = this.node.presenceContext;\n const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};\n if (!this.node.animationState || isPresent === prevIsPresent) {\n return;\n }\n const exitAnimation = this.node.animationState.setActive(\"exit\", !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom });\n if (onExitComplete && !isPresent) {\n exitAnimation.then(() => onExitComplete(this.id));\n }\n }\n mount() {\n const { register } = this.node.presenceContext || {};\n if (register) {\n this.unmount = register(this.id);\n }\n }\n unmount() { }\n}\n\nexport { ExitAnimationFeature };\n","import { AnimationFeature } from './animation/index.mjs';\nimport { ExitAnimationFeature } from './animation/exit.mjs';\n\nconst animations = {\n animation: {\n Feature: AnimationFeature,\n },\n exit: {\n Feature: ExitAnimationFeature,\n },\n};\n\nexport { animations };\n","const distance = (a, b) => Math.abs(a - b);\nfunction distance2D(a, b) {\n // Multi-dimensional\n const xDelta = distance(a.x, b.x);\n const yDelta = distance(a.y, b.y);\n return Math.sqrt(xDelta ** 2 + yDelta ** 2);\n}\n\nexport { distance, distance2D };\n","import { extractEventInfo } from '../../events/event-info.mjs';\nimport { secondsToMilliseconds, millisecondsToSeconds } from '../../utils/time-conversion.mjs';\nimport { addPointerEvent } from '../../events/add-pointer-event.mjs';\nimport { pipe } from '../../utils/pipe.mjs';\nimport { distance2D } from '../../utils/distance.mjs';\nimport { isPrimaryPointer } from '../../events/utils/is-primary-pointer.mjs';\nimport { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';\n\n/**\n * @internal\n */\nclass PanSession {\n constructor(event, handlers, { 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 = () => {\n if (!(this.lastMoveEvent && this.lastMoveEventInfo))\n return;\n const info = getPanInfo(this.lastMoveEventInfo, this.history);\n const 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 const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;\n if (!isPanStarted && !isDistancePastThreshold)\n return;\n const { point } = info;\n const { timestamp } = frameData;\n this.history.push({ ...point, timestamp });\n const { onStart, onMove } = this.handlers;\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 = (event, info) => {\n this.lastMoveEvent = event;\n this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);\n // Throttle mouse move event to once per frame\n frame.update(this.updatePoint, true);\n };\n this.handlePointerUp = (event, info) => {\n this.end();\n if (!(this.lastMoveEvent && this.lastMoveEventInfo))\n return;\n const { onEnd, onSessionEnd } = this.handlers;\n const panInfo = getPanInfo(event.type === \"pointercancel\"\n ? this.lastMoveEventInfo\n : transformPoint(info, this.transformPagePoint), this.history);\n if (this.startEvent && onEnd) {\n onEnd(event, panInfo);\n }\n onSessionEnd && onSessionEnd(event, panInfo);\n };\n // If we have more than one touch, don't start detecting this gesture\n if (!isPrimaryPointer(event))\n return;\n this.handlers = handlers;\n this.transformPagePoint = transformPagePoint;\n const info = extractEventInfo(event);\n const initialInfo = transformPoint(info, this.transformPagePoint);\n const { point } = initialInfo;\n const { timestamp } = frameData;\n this.history = [{ ...point, timestamp }];\n const { onSessionStart } = handlers;\n onSessionStart &&\n onSessionStart(event, getPanInfo(initialInfo, this.history));\n this.removeListeners = pipe(addPointerEvent(window, \"pointermove\", this.handlePointerMove), addPointerEvent(window, \"pointerup\", this.handlePointerUp), addPointerEvent(window, \"pointercancel\", this.handlePointerUp));\n }\n updateHandlers(handlers) {\n this.handlers = handlers;\n }\n end() {\n this.removeListeners && this.removeListeners();\n cancelFrame(this.updatePoint);\n }\n}\nfunction transformPoint(info, transformPagePoint) {\n return transformPagePoint ? { point: transformPagePoint(info.point) } : info;\n}\nfunction subtractPoint(a, b) {\n return { x: a.x - b.x, y: a.y - b.y };\n}\nfunction getPanInfo({ point }, history) {\n return {\n point,\n delta: subtractPoint(point, lastDevicePoint(history)),\n offset: subtractPoint(point, startDevicePoint(history)),\n velocity: getVelocity(history, 0.1),\n };\n}\nfunction startDevicePoint(history) {\n return history[0];\n}\nfunction lastDevicePoint(history) {\n return history[history.length - 1];\n}\nfunction getVelocity(history, timeDelta) {\n if (history.length < 2) {\n return { x: 0, y: 0 };\n }\n let i = history.length - 1;\n let timestampedPoint = null;\n const lastPoint = lastDevicePoint(history);\n while (i >= 0) {\n timestampedPoint = history[i];\n if (lastPoint.timestamp - timestampedPoint.timestamp >\n secondsToMilliseconds(timeDelta)) {\n break;\n }\n i--;\n }\n if (!timestampedPoint) {\n return { x: 0, y: 0 };\n }\n const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);\n if (time === 0) {\n return { x: 0, y: 0 };\n }\n const currentVelocity = {\n x: (lastPoint.x - timestampedPoint.x) / time,\n y: (lastPoint.y - timestampedPoint.y) / time,\n };\n if (currentVelocity.x === Infinity) {\n currentVelocity.x = 0;\n }\n if (currentVelocity.y === Infinity) {\n currentVelocity.y = 0;\n }\n return currentVelocity;\n}\n\nexport { PanSession };\n","import { mix } from '../../utils/mix.mjs';\n\nfunction calcLength(axis) {\n return axis.max - axis.min;\n}\nfunction isNear(value, target = 0, maxDistance = 0.01) {\n return Math.abs(value - target) <= maxDistance;\n}\nfunction calcAxisDelta(delta, source, target, origin = 0.5) {\n delta.origin = origin;\n delta.originPoint = mix(source.min, source.max, delta.origin);\n delta.scale = calcLength(target) / calcLength(source);\n if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale))\n delta.scale = 1;\n delta.translate =\n mix(target.min, target.max, delta.origin) - delta.originPoint;\n if (isNear(delta.translate) || isNaN(delta.translate))\n delta.translate = 0;\n}\nfunction calcBoxDelta(delta, source, target, origin) {\n calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);\n calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);\n}\nfunction calcRelativeAxis(target, relative, parent) {\n target.min = parent.min + relative.min;\n target.max = target.min + calcLength(relative);\n}\nfunction calcRelativeBox(target, relative, parent) {\n calcRelativeAxis(target.x, relative.x, parent.x);\n calcRelativeAxis(target.y, relative.y, parent.y);\n}\nfunction calcRelativeAxisPosition(target, layout, parent) {\n target.min = layout.min - parent.min;\n target.max = target.min + calcLength(layout);\n}\nfunction calcRelativePosition(target, layout, parent) {\n calcRelativeAxisPosition(target.x, layout.x, parent.x);\n calcRelativeAxisPosition(target.y, layout.y, parent.y);\n}\n\nexport { calcAxisDelta, calcBoxDelta, calcLength, calcRelativeAxis, calcRelativeAxisPosition, calcRelativeBox, calcRelativePosition, isNear };\n","import { progress } from '../../../utils/progress.mjs';\nimport { calcLength } from '../../../projection/geometry/delta-calc.mjs';\nimport { clamp } from '../../../utils/clamp.mjs';\nimport { mix } from '../../../utils/mix.mjs';\n\n/**\n * Apply constraints to a point. These constraints are both physical along an\n * axis, and an elastic factor that determines how much to constrain the point\n * by if it does lie outside the defined parameters.\n */\nfunction applyConstraints(point, { min, max }, elastic) {\n if (min !== undefined && point < min) {\n // If we have a min point defined, and this is outside of that, constrain\n point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);\n }\n else if (max !== undefined && point > max) {\n // If we have a max point defined, and this is outside of that, constrain\n point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);\n }\n return point;\n}\n/**\n * Calculate constraints in terms of the viewport when defined relatively to the\n * measured axis. This is measured from the nearest edge, so a max constraint of 200\n * on an axis with a max value of 300 would return a constraint of 500 - axis length\n */\nfunction calcRelativeAxisConstraints(axis, min, max) {\n return {\n min: min !== undefined ? axis.min + min : undefined,\n max: max !== undefined\n ? axis.max + max - (axis.max - axis.min)\n : undefined,\n };\n}\n/**\n * Calculate constraints in terms of the viewport when\n * defined relatively to the measured bounding box.\n */\nfunction calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {\n return {\n x: calcRelativeAxisConstraints(layoutBox.x, left, right),\n y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),\n };\n}\n/**\n * Calculate viewport constraints when defined as another viewport-relative axis\n */\nfunction calcViewportAxisConstraints(layoutAxis, constraintsAxis) {\n let min = constraintsAxis.min - layoutAxis.min;\n let max = constraintsAxis.max - layoutAxis.max;\n // If the constraints axis is actually smaller than the layout axis then we can\n // flip the constraints\n if (constraintsAxis.max - constraintsAxis.min <\n layoutAxis.max - layoutAxis.min) {\n [min, max] = [max, min];\n }\n return { min, max };\n}\n/**\n * Calculate viewport constraints when defined as another viewport-relative box\n */\nfunction calcViewportConstraints(layoutBox, constraintsBox) {\n return {\n x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),\n y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),\n };\n}\n/**\n * Calculate a transform origin relative to the source axis, between 0-1, that results\n * in an asthetically pleasing scale/transform needed to project from source to target.\n */\nfunction calcOrigin(source, target) {\n let origin = 0.5;\n const sourceLength = calcLength(source);\n const targetLength = calcLength(target);\n if (targetLength > sourceLength) {\n origin = progress(target.min, target.max - sourceLength, source.min);\n }\n else if (sourceLength > targetLength) {\n origin = progress(source.min, source.max - targetLength, target.min);\n }\n return clamp(0, 1, origin);\n}\n/**\n * Rebase the calculated viewport constraints relative to the layout.min point.\n */\nfunction rebaseAxisConstraints(layout, constraints) {\n const relativeConstraints = {};\n if (constraints.min !== undefined) {\n relativeConstraints.min = constraints.min - layout.min;\n }\n if (constraints.max !== undefined) {\n relativeConstraints.max = constraints.max - layout.min;\n }\n return relativeConstraints;\n}\nconst defaultElastic = 0.35;\n/**\n * Accepts a dragElastic prop and returns resolved elastic values for each axis.\n */\nfunction resolveDragElastic(dragElastic = defaultElastic) {\n if (dragElastic === false) {\n dragElastic = 0;\n }\n else if (dragElastic === true) {\n dragElastic = defaultElastic;\n }\n return {\n x: resolveAxisElastic(dragElastic, \"left\", \"right\"),\n y: resolveAxisElastic(dragElastic, \"top\", \"bottom\"),\n };\n}\nfunction resolveAxisElastic(dragElastic, minLabel, maxLabel) {\n return {\n min: resolvePointElastic(dragElastic, minLabel),\n max: resolvePointElastic(dragElastic, maxLabel),\n };\n}\nfunction resolvePointElastic(dragElastic, label) {\n return typeof dragElastic === \"number\"\n ? dragElastic\n : dragElastic[label] || 0;\n}\n\nexport { applyConstraints, calcOrigin, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };\n","const createAxisDelta = () => ({\n translate: 0,\n scale: 1,\n origin: 0,\n originPoint: 0,\n});\nconst createDelta = () => ({\n x: createAxisDelta(),\n y: createAxisDelta(),\n});\nconst createAxis = () => ({ min: 0, max: 0 });\nconst createBox = () => ({\n x: createAxis(),\n y: createAxis(),\n});\n\nexport { createAxis, createAxisDelta, createBox, createDelta };\n","function eachAxis(callback) {\n return [callback(\"x\"), callback(\"y\")];\n}\n\nexport { eachAxis };\n","/**\n * Bounding boxes tend to be defined as top, left, right, bottom. For various operations\n * it's easier to consider each axis individually. This function returns a bounding box\n * as a map of single-axis min/max values.\n */\nfunction convertBoundingBoxToBox({ top, left, right, bottom, }) {\n return {\n x: { min: left, max: right },\n y: { min: top, max: bottom },\n };\n}\nfunction convertBoxToBoundingBox({ x, y }) {\n return { top: y.min, right: x.max, bottom: y.max, left: x.min };\n}\n/**\n * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function\n * provided by Framer to allow measured points to be corrected for device scaling. This is used\n * when measuring DOM elements and DOM event points.\n */\nfunction transformBoxPoints(point, transformPoint) {\n if (!transformPoint)\n return point;\n const topLeft = transformPoint({ x: point.left, y: point.top });\n const bottomRight = transformPoint({ x: point.right, y: point.bottom });\n return {\n top: topLeft.y,\n left: topLeft.x,\n bottom: bottomRight.y,\n right: bottomRight.x,\n };\n}\n\nexport { convertBoundingBoxToBox, convertBoxToBoundingBox, transformBoxPoints };\n","function isIdentityScale(scale) {\n return scale === undefined || scale === 1;\n}\nfunction hasScale({ scale, scaleX, scaleY }) {\n return (!isIdentityScale(scale) ||\n !isIdentityScale(scaleX) ||\n !isIdentityScale(scaleY));\n}\nfunction hasTransform(values) {\n return (hasScale(values) ||\n has2DTranslate(values) ||\n values.z ||\n values.rotate ||\n values.rotateX ||\n values.rotateY);\n}\nfunction has2DTranslate(values) {\n return is2DTranslate(values.x) || is2DTranslate(values.y);\n}\nfunction is2DTranslate(value) {\n return value && value !== \"0%\";\n}\n\nexport { has2DTranslate, hasScale, hasTransform };\n","import { mix } from '../../utils/mix.mjs';\nimport { hasTransform } from '../utils/has-transform.mjs';\n\n/**\n * Scales a point based on a factor and an originPoint\n */\nfunction scalePoint(point, scale, originPoint) {\n const distanceFromOrigin = point - originPoint;\n const scaled = scale * distanceFromOrigin;\n return originPoint + scaled;\n}\n/**\n * Applies a translate/scale delta to a point\n */\nfunction applyPointDelta(point, translate, scale, originPoint, boxScale) {\n if (boxScale !== undefined) {\n point = scalePoint(point, boxScale, originPoint);\n }\n return scalePoint(point, scale, originPoint) + translate;\n}\n/**\n * Applies a translate/scale delta to an axis\n */\nfunction applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) {\n axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale);\n axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale);\n}\n/**\n * Applies a translate/scale delta to a box\n */\nfunction applyBoxDelta(box, { x, y }) {\n applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);\n applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);\n}\n/**\n * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms\n * in a tree upon our box before then calculating how to project it into our desired viewport-relative box\n *\n * This is the final nested loop within updateLayoutDelta for future refactoring\n */\nfunction applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {\n const treeLength = treePath.length;\n if (!treeLength)\n return;\n // Reset the treeScale\n treeScale.x = treeScale.y = 1;\n let node;\n let delta;\n for (let i = 0; i < treeLength; i++) {\n node = treePath[i];\n delta = node.projectionDelta;\n /**\n * TODO: Prefer to remove this, but currently we have motion components with\n * display: contents in Framer.\n */\n const instance = node.instance;\n if (instance &&\n instance.style &&\n instance.style.display === \"contents\") {\n continue;\n }\n if (isSharedTransition &&\n node.options.layoutScroll &&\n node.scroll &&\n node !== node.root) {\n transformBox(box, {\n x: -node.scroll.offset.x,\n y: -node.scroll.offset.y,\n });\n }\n if (delta) {\n // Incoporate each ancestor's scale into a culmulative treeScale for this component\n treeScale.x *= delta.x.scale;\n treeScale.y *= delta.y.scale;\n // Apply each ancestor's calculated delta into this component's recorded layout box\n applyBoxDelta(box, delta);\n }\n if (isSharedTransition && hasTransform(node.latestValues)) {\n transformBox(box, node.latestValues);\n }\n }\n /**\n * Snap tree scale back to 1 if it's within a non-perceivable threshold.\n * This will help reduce useless scales getting rendered.\n */\n treeScale.x = snapToDefault(treeScale.x);\n treeScale.y = snapToDefault(treeScale.y);\n}\nfunction snapToDefault(scale) {\n if (Number.isInteger(scale))\n return scale;\n return scale > 1.0000000000001 || scale < 0.999999999999 ? scale : 1;\n}\nfunction translateAxis(axis, distance) {\n axis.min = axis.min + distance;\n axis.max = axis.max + distance;\n}\n/**\n * Apply a transform to an axis from the latest resolved motion values.\n * This function basically acts as a bridge between a flat motion value map\n * and applyAxisDelta\n */\nfunction transformAxis(axis, transforms, [key, scaleKey, originKey]) {\n const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;\n const originPoint = mix(axis.min, axis.max, axisOrigin);\n // Apply the axis delta to the final axis\n applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);\n}\n/**\n * The names of the motion values we want to apply as translation, scale and origin.\n */\nconst xKeys = [\"x\", \"scaleX\", \"originX\"];\nconst yKeys = [\"y\", \"scaleY\", \"originY\"];\n/**\n * Apply a transform to a box from the latest resolved motion values.\n */\nfunction transformBox(box, transform) {\n transformAxis(box.x, transform, xKeys);\n transformAxis(box.y, transform, yKeys);\n}\n\nexport { applyAxisDelta, applyBoxDelta, applyPointDelta, applyTreeDeltas, scalePoint, transformAxis, transformBox, translateAxis };\n","import { convertBoundingBoxToBox, transformBoxPoints } from '../geometry/conversion.mjs';\nimport { translateAxis } from '../geometry/delta-apply.mjs';\n\nfunction measureViewportBox(instance, transformPoint) {\n return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));\n}\nfunction measurePageBox(element, rootProjectionNode, transformPagePoint) {\n const viewportBox = measureViewportBox(element, transformPagePoint);\n const { scroll } = rootProjectionNode;\n if (scroll) {\n translateAxis(viewportBox.x, scroll.offset.x);\n translateAxis(viewportBox.y, scroll.offset.y);\n }\n return viewportBox;\n}\n\nexport { measurePageBox, measureViewportBox };\n","import { invariant } from '../../utils/errors.mjs';\nimport { PanSession } from '../pan/PanSession.mjs';\nimport { getGlobalLock } from './utils/lock.mjs';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\nimport { addPointerEvent } from '../../events/add-pointer-event.mjs';\nimport { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, calcOrigin } from './utils/constraints.mjs';\nimport { createBox } from '../../projection/geometry/models.mjs';\nimport { eachAxis } from '../../projection/utils/each-axis.mjs';\nimport { measurePageBox } from '../../projection/utils/measure.mjs';\nimport { extractEventInfo } from '../../events/event-info.mjs';\nimport { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';\nimport { addDomEvent } from '../../events/add-dom-event.mjs';\nimport { calcLength } from '../../projection/geometry/delta-calc.mjs';\nimport { mix } from '../../utils/mix.mjs';\nimport { percent } from '../../value/types/numbers/units.mjs';\nimport { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst elementDragControls = new WeakMap();\n/**\n *\n */\n// let latestPointerEvent: PointerEvent\nclass VisualElementDragControls {\n constructor(visualElement) {\n // This is a reference to the global drag gesture lock, ensuring only one component\n // can \"capture\" the drag of one or both axes.\n // TODO: Look into moving this into pansession?\n this.openGlobalLock = null;\n this.isDragging = false;\n this.currentDirection = null;\n this.originPoint = { x: 0, y: 0 };\n /**\n * The permitted boundaries of travel, in pixels.\n */\n this.constraints = false;\n this.hasMutatedConstraints = false;\n /**\n * The per-axis resolved elastic values.\n */\n this.elastic = createBox();\n this.visualElement = visualElement;\n }\n start(originEvent, { snapToCursor = false } = {}) {\n /**\n * Don't start dragging if this component is exiting\n */\n const { presenceContext } = this.visualElement;\n if (presenceContext && presenceContext.isPresent === false)\n return;\n const onSessionStart = (event) => {\n // Stop any animations on both axis values immediately. This allows the user to throw and catch\n // the component.\n this.stopAnimation();\n if (snapToCursor) {\n this.snapToCursor(extractEventInfo(event, \"page\").point);\n }\n };\n const onStart = (event, info) => {\n // Attempt to grab the global drag gesture lock - maybe make this part of PanSession\n const { drag, dragPropagation, onDragStart } = this.getProps();\n if (drag && !dragPropagation) {\n if (this.openGlobalLock)\n this.openGlobalLock();\n this.openGlobalLock = getGlobalLock(drag);\n // If we don 't have the lock, don't start dragging\n if (!this.openGlobalLock)\n return;\n }\n this.isDragging = true;\n this.currentDirection = null;\n this.resolveConstraints();\n if (this.visualElement.projection) {\n this.visualElement.projection.isAnimationBlocked = true;\n this.visualElement.projection.target = undefined;\n }\n /**\n * Record gesture origin\n */\n eachAxis((axis) => {\n let current = this.getAxisMotionValue(axis).get() || 0;\n /**\n * If the MotionValue is a percentage value convert to px\n */\n if (percent.test(current)) {\n const { projection } = this.visualElement;\n if (projection && projection.layout) {\n const measuredAxis = projection.layout.layoutBox[axis];\n if (measuredAxis) {\n const length = calcLength(measuredAxis);\n current = length * (parseFloat(current) / 100);\n }\n }\n }\n this.originPoint[axis] = current;\n });\n // Fire onDragStart event\n if (onDragStart) {\n frame.update(() => onDragStart(event, info), false, true);\n }\n const { animationState } = this.visualElement;\n animationState && animationState.setActive(\"whileDrag\", true);\n };\n const onMove = (event, info) => {\n // latestPointerEvent = event\n const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();\n // If we didn't successfully receive the gesture lock, early return.\n if (!dragPropagation && !this.openGlobalLock)\n return;\n const { offset } = info;\n // Attempt to detect drag direction if directionLock is true\n if (dragDirectionLock && this.currentDirection === null) {\n this.currentDirection = getCurrentDirection(offset);\n // If we've successfully set a direction, notify listener\n if (this.currentDirection !== null) {\n onDirectionLock && onDirectionLock(this.currentDirection);\n }\n return;\n }\n // Update each point with the latest position\n this.updateAxis(\"x\", info.point, offset);\n this.updateAxis(\"y\", info.point, offset);\n /**\n * Ideally we would leave the renderer to fire naturally at the end of\n * this frame but if the element is about to change layout as the result\n * of a re-render we want to ensure the browser can read the latest\n * bounding box to ensure the pointer and element don't fall out of sync.\n */\n this.visualElement.render();\n /**\n * This must fire after the render call as it might trigger a state\n * change which itself might trigger a layout update.\n */\n onDrag && onDrag(event, info);\n };\n const onSessionEnd = (event, info) => this.stop(event, info);\n this.panSession = new PanSession(originEvent, {\n onSessionStart,\n onStart,\n onMove,\n onSessionEnd,\n }, { transformPagePoint: this.visualElement.getTransformPagePoint() });\n }\n stop(event, info) {\n const isDragging = this.isDragging;\n this.cancel();\n if (!isDragging)\n return;\n const { velocity } = info;\n this.startAnimation(velocity);\n const { onDragEnd } = this.getProps();\n if (onDragEnd) {\n frame.update(() => onDragEnd(event, info));\n }\n }\n cancel() {\n this.isDragging = false;\n const { projection, animationState } = this.visualElement;\n if (projection) {\n projection.isAnimationBlocked = false;\n }\n this.panSession && this.panSession.end();\n this.panSession = undefined;\n const { dragPropagation } = this.getProps();\n if (!dragPropagation && this.openGlobalLock) {\n this.openGlobalLock();\n this.openGlobalLock = null;\n }\n animationState && animationState.setActive(\"whileDrag\", false);\n }\n updateAxis(axis, _point, offset) {\n const { drag } = this.getProps();\n // If we're not dragging this axis, do an early return.\n if (!offset || !shouldDrag(axis, drag, this.currentDirection))\n return;\n const axisValue = this.getAxisMotionValue(axis);\n let next = this.originPoint[axis] + offset[axis];\n // Apply constraints\n if (this.constraints && this.constraints[axis]) {\n next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);\n }\n axisValue.set(next);\n }\n resolveConstraints() {\n const { dragConstraints, dragElastic } = this.getProps();\n const { layout } = this.visualElement.projection || {};\n const prevConstraints = this.constraints;\n if (dragConstraints && isRefObject(dragConstraints)) {\n if (!this.constraints) {\n this.constraints = this.resolveRefConstraints();\n }\n }\n else {\n if (dragConstraints && layout) {\n this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);\n }\n else {\n this.constraints = false;\n }\n }\n this.elastic = resolveDragElastic(dragElastic);\n /**\n * If we're outputting to external MotionValues, we want to rebase the measured constraints\n * from viewport-relative to component-relative.\n */\n if (prevConstraints !== this.constraints &&\n layout &&\n this.constraints &&\n !this.hasMutatedConstraints) {\n eachAxis((axis) => {\n if (this.getAxisMotionValue(axis)) {\n this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);\n }\n });\n }\n }\n resolveRefConstraints() {\n const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();\n if (!constraints || !isRefObject(constraints))\n return false;\n const constraintsElement = constraints.current;\n invariant(constraintsElement !== null, \"If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.\");\n const { projection } = this.visualElement;\n // TODO\n if (!projection || !projection.layout)\n return false;\n const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());\n let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);\n /**\n * If there's an onMeasureDragConstraints listener we call it and\n * if different constraints are returned, set constraints to that\n */\n if (onMeasureDragConstraints) {\n const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));\n this.hasMutatedConstraints = !!userConstraints;\n if (userConstraints) {\n measuredConstraints = convertBoundingBoxToBox(userConstraints);\n }\n }\n return measuredConstraints;\n }\n startAnimation(velocity) {\n const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();\n const constraints = this.constraints || {};\n const momentumAnimations = eachAxis((axis) => {\n if (!shouldDrag(axis, drag, this.currentDirection)) {\n return;\n }\n let transition = (constraints && constraints[axis]) || {};\n if (dragSnapToOrigin)\n transition = { min: 0, max: 0 };\n /**\n * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame\n * of spring animations so we should look into adding a disable spring option to `inertia`.\n * We could do something here where we affect the `bounceStiffness` and `bounceDamping`\n * using the value of `dragElastic`.\n */\n const bounceStiffness = dragElastic ? 200 : 1000000;\n const bounceDamping = dragElastic ? 40 : 10000000;\n const inertia = {\n type: \"inertia\",\n velocity: dragMomentum ? velocity[axis] : 0,\n bounceStiffness,\n bounceDamping,\n timeConstant: 750,\n restDelta: 1,\n restSpeed: 10,\n ...dragTransition,\n ...transition,\n };\n // If we're not animating on an externally-provided `MotionValue` we can use the\n // component's animation controls which will handle interactions with whileHover (etc),\n // otherwise we just have to animate the `MotionValue` itself.\n return this.startAxisValueAnimation(axis, inertia);\n });\n // Run all animations and then resolve the new drag constraints.\n return Promise.all(momentumAnimations).then(onDragTransitionEnd);\n }\n startAxisValueAnimation(axis, transition) {\n const axisValue = this.getAxisMotionValue(axis);\n return axisValue.start(animateMotionValue(axis, axisValue, 0, transition));\n }\n stopAnimation() {\n eachAxis((axis) => this.getAxisMotionValue(axis).stop());\n }\n /**\n * Drag works differently depending on which props are provided.\n *\n * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.\n * - Otherwise, we apply the delta to the x/y motion values.\n */\n getAxisMotionValue(axis) {\n const dragKey = \"_drag\" + axis.toUpperCase();\n const props = this.visualElement.getProps();\n const externalMotionValue = props[dragKey];\n return externalMotionValue\n ? externalMotionValue\n : this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : undefined) || 0);\n }\n snapToCursor(point) {\n eachAxis((axis) => {\n const { drag } = this.getProps();\n // If we're not dragging this axis, do an early return.\n if (!shouldDrag(axis, drag, this.currentDirection))\n return;\n const { projection } = this.visualElement;\n const axisValue = this.getAxisMotionValue(axis);\n if (projection && projection.layout) {\n const { min, max } = projection.layout.layoutBox[axis];\n axisValue.set(point[axis] - mix(min, max, 0.5));\n }\n });\n }\n /**\n * When the viewport resizes we want to check if the measured constraints\n * have changed and, if so, reposition the element within those new constraints\n * relative to where it was before the resize.\n */\n scalePositionWithinConstraints() {\n if (!this.visualElement.current)\n return;\n const { drag, dragConstraints } = this.getProps();\n const { projection } = this.visualElement;\n if (!isRefObject(dragConstraints) || !projection || !this.constraints)\n return;\n /**\n * Stop current animations as there can be visual glitching if we try to do\n * this mid-animation\n */\n this.stopAnimation();\n /**\n * Record the relative position of the dragged element relative to the\n * constraints box and save as a progress value.\n */\n const boxProgress = { x: 0, y: 0 };\n eachAxis((axis) => {\n const axisValue = this.getAxisMotionValue(axis);\n if (axisValue) {\n const latest = axisValue.get();\n boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);\n }\n });\n /**\n * Update the layout of this element and resolve the latest drag constraints\n */\n const { transformTemplate } = this.visualElement.getProps();\n this.visualElement.current.style.transform = transformTemplate\n ? transformTemplate({}, \"\")\n : \"none\";\n projection.root && projection.root.updateScroll();\n projection.updateLayout();\n this.resolveConstraints();\n /**\n * For each axis, calculate the current progress of the layout axis\n * within the new constraints.\n */\n eachAxis((axis) => {\n if (!shouldDrag(axis, drag, null))\n return;\n /**\n * Calculate a new transform based on the previous box progress\n */\n const axisValue = this.getAxisMotionValue(axis);\n const { min, max } = this.constraints[axis];\n axisValue.set(mix(min, max, boxProgress[axis]));\n });\n }\n addListeners() {\n if (!this.visualElement.current)\n return;\n elementDragControls.set(this.visualElement, this);\n const element = this.visualElement.current;\n /**\n * Attach a pointerdown event listener on this DOM element to initiate drag tracking.\n */\n const stopPointerListener = addPointerEvent(element, \"pointerdown\", (event) => {\n const { drag, dragListener = true } = this.getProps();\n drag && dragListener && this.start(event);\n });\n const measureDragConstraints = () => {\n const { dragConstraints } = this.getProps();\n if (isRefObject(dragConstraints)) {\n this.constraints = this.resolveRefConstraints();\n }\n };\n const { projection } = this.visualElement;\n const stopMeasureLayoutListener = projection.addEventListener(\"measure\", measureDragConstraints);\n if (projection && !projection.layout) {\n projection.root && projection.root.updateScroll();\n projection.updateLayout();\n }\n measureDragConstraints();\n /**\n * Attach a window resize listener to scale the draggable target within its defined\n * constraints as the window resizes.\n */\n const stopResizeListener = addDomEvent(window, \"resize\", () => this.scalePositionWithinConstraints());\n /**\n * If the element's layout changes, calculate the delta and apply that to\n * the drag gesture's origin point.\n */\n const stopLayoutUpdateListener = projection.addEventListener(\"didUpdate\", (({ delta, hasLayoutChanged }) => {\n if (this.isDragging && hasLayoutChanged) {\n eachAxis((axis) => {\n const motionValue = this.getAxisMotionValue(axis);\n if (!motionValue)\n return;\n this.originPoint[axis] += delta[axis].translate;\n motionValue.set(motionValue.get() + delta[axis].translate);\n });\n this.visualElement.render();\n }\n }));\n return () => {\n stopResizeListener();\n stopPointerListener();\n stopMeasureLayoutListener();\n stopLayoutUpdateListener && stopLayoutUpdateListener();\n };\n }\n getProps() {\n const props = this.visualElement.getProps();\n const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;\n return {\n ...props,\n drag,\n dragDirectionLock,\n dragPropagation,\n dragConstraints,\n dragElastic,\n dragMomentum,\n };\n }\n}\nfunction shouldDrag(direction, drag, currentDirection) {\n return ((drag === true || drag === direction) &&\n (currentDirection === null || currentDirection === direction));\n}\n/**\n * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower\n * than the provided threshold, return `null`.\n *\n * @param offset - The x/y offset from origin.\n * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.\n */\nfunction getCurrentDirection(offset, lockThreshold = 10) {\n let direction = null;\n if (Math.abs(offset.y) > lockThreshold) {\n direction = \"y\";\n }\n else if (Math.abs(offset.x) > lockThreshold) {\n direction = \"x\";\n }\n return direction;\n}\n\nexport { VisualElementDragControls, elementDragControls };\n","import { Feature } from '../../motion/features/Feature.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { VisualElementDragControls } from './VisualElementDragControls.mjs';\n\nclass DragGesture extends Feature {\n constructor(node) {\n super(node);\n this.removeGroupControls = noop;\n this.removeListeners = noop;\n this.controls = new VisualElementDragControls(node);\n }\n mount() {\n // If we've been provided a DragControls for manual control over the drag gesture,\n // subscribe this component to it on mount.\n const { dragControls } = this.node.getProps();\n if (dragControls) {\n this.removeGroupControls = dragControls.subscribe(this.controls);\n }\n this.removeListeners = this.controls.addListeners() || noop;\n }\n unmount() {\n this.removeGroupControls();\n this.removeListeners();\n }\n}\n\nexport { DragGesture };\n","import { PanSession } from './PanSession.mjs';\nimport { addPointerEvent } from '../../events/add-pointer-event.mjs';\nimport { Feature } from '../../motion/features/Feature.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst asyncHandler = (handler) => (event, info) => {\n if (handler) {\n frame.update(() => handler(event, info));\n }\n};\nclass PanGesture extends Feature {\n constructor() {\n super(...arguments);\n this.removePointerDownListener = noop;\n }\n onPointerDown(pointerDownEvent) {\n this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() });\n }\n createPanHandlers() {\n const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();\n return {\n onSessionStart: asyncHandler(onPanSessionStart),\n onStart: asyncHandler(onPanStart),\n onMove: onPan,\n onEnd: (event, info) => {\n delete this.session;\n if (onPanEnd) {\n frame.update(() => onPanEnd(event, info));\n }\n },\n };\n }\n mount() {\n this.removePointerDownListener = addPointerEvent(this.node.current, \"pointerdown\", (event) => this.onPointerDown(event));\n }\n update() {\n this.session && this.session.updateHandlers(this.createPanHandlers());\n }\n unmount() {\n this.removePointerDownListener();\n this.session && this.session.end();\n }\n}\n\nexport { PanGesture };\n","import { useContext, useId, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\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 const context = useContext(PresenceContext);\n if (context === null)\n return [true, null];\n const { isPresent, onExitComplete, register } = context;\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 const id = useId();\n useEffect(() => register(id), []);\n const safeToRemove = () => onExitComplete && 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(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","/**\n * This should only ever be modified on the client otherwise it'll\n * persist through server requests. If we need instanced states we\n * could lazy-init via root.\n */\nconst globalProjectionState = {\n /**\n * Global flag as to whether the tree has animated since the last time\n * we resized the window\n */\n hasAnimatedSinceResize: true,\n /**\n * We set this to true once, on the first update. Any nodes added to the tree beyond that\n * update will be given a `data-projection-id` attribute.\n */\n hasEverUpdated: false,\n};\n\nexport { globalProjectionState };\n","import { px } from '../../value/types/numbers/units.mjs';\n\nfunction pixelsToPercent(pixels, axis) {\n if (axis.max === axis.min)\n return 0;\n return (pixels / (axis.max - axis.min)) * 100;\n}\n/**\n * We always correct borderRadius as a percentage rather than pixels to reduce paints.\n * For example, if you are projecting a box that is 100px wide with a 10px borderRadius\n * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%\n * borderRadius in both states. If we animate between the two in pixels that will trigger\n * a paint each time. If we animate between the two in percentage we'll avoid a paint.\n */\nconst correctBorderRadius = {\n correct: (latest, node) => {\n if (!node.target)\n return latest;\n /**\n * If latest is a string, if it's a percentage we can return immediately as it's\n * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.\n */\n if (typeof latest === \"string\") {\n if (px.test(latest)) {\n latest = parseFloat(latest);\n }\n else {\n return latest;\n }\n }\n /**\n * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that\n * pixel value as a percentage of each axis\n */\n const x = pixelsToPercent(latest, node.target.x);\n const y = pixelsToPercent(latest, node.target.y);\n return `${x}% ${y}%`;\n },\n};\n\nexport { correctBorderRadius, pixelsToPercent };\n","import { mix } from '../../utils/mix.mjs';\nimport { complex } from '../../value/types/complex/index.mjs';\n\nconst correctBoxShadow = {\n correct: (latest, { treeScale, projectionDelta }) => {\n const original = latest;\n const shadow = complex.parse(latest);\n // TODO: Doesn't support multiple shadows\n if (shadow.length > 5)\n return original;\n const template = complex.createTransformer(latest);\n const offset = typeof shadow[0] !== \"number\" ? 1 : 0;\n // Calculate the overall context scale\n const xScale = projectionDelta.x.scale * treeScale.x;\n const yScale = projectionDelta.y.scale * treeScale.y;\n shadow[0 + offset] /= xScale;\n shadow[1 + offset] /= yScale;\n /**\n * Ideally we'd correct x and y scales individually, but because blur and\n * spread apply to both we have to take a scale average and apply that instead.\n * We could potentially improve the outcome of this by incorporating the ratio between\n * the two scales.\n */\n const averageScale = mix(xScale, yScale, 0.5);\n // Blur\n if (typeof shadow[2 + offset] === \"number\")\n shadow[2 + offset] /= averageScale;\n // Spread\n if (typeof shadow[3 + offset] === \"number\")\n shadow[3 + offset] /= averageScale;\n return template(shadow);\n },\n};\n\nexport { correctBoxShadow };\n","import React__default, { useContext } from 'react';\nimport { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';\nimport { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';\nimport { SwitchLayoutGroupContext } from '../../../context/SwitchLayoutGroupContext.mjs';\nimport { globalProjectionState } from '../../../projection/node/state.mjs';\nimport { correctBorderRadius } from '../../../projection/styles/scale-border-radius.mjs';\nimport { correctBoxShadow } from '../../../projection/styles/scale-box-shadow.mjs';\nimport { addScaleCorrector } from '../../../projection/styles/scale-correction.mjs';\nimport { frame } from '../../../frameloop/frame.mjs';\n\nclass MeasureLayoutWithContext extends React__default.Component {\n /**\n * This only mounts projection nodes for components that\n * need measuring, we might want to do it for all components\n * in order to incorporate transforms\n */\n componentDidMount() {\n const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;\n const { projection } = visualElement;\n addScaleCorrector(defaultScaleCorrectors);\n if (projection) {\n if (layoutGroup.group)\n layoutGroup.group.add(projection);\n if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {\n switchLayoutGroup.register(projection);\n }\n projection.root.didUpdate();\n projection.addEventListener(\"animationComplete\", () => {\n this.safeToRemove();\n });\n projection.setOptions({\n ...projection.options,\n onExitComplete: () => this.safeToRemove(),\n });\n }\n globalProjectionState.hasEverUpdated = true;\n }\n getSnapshotBeforeUpdate(prevProps) {\n const { layoutDependency, visualElement, drag, isPresent } = this.props;\n const projection = visualElement.projection;\n if (!projection)\n return null;\n /**\n * TODO: We use this data in relegate to determine whether to\n * promote a previous element. There's no guarantee its presence data\n * will have updated by this point - if a bug like this arises it will\n * have to be that we markForRelegation and then find a new lead some other way,\n * perhaps in didUpdate\n */\n projection.isPresent = isPresent;\n if (drag ||\n prevProps.layoutDependency !== layoutDependency ||\n layoutDependency === undefined) {\n projection.willUpdate();\n }\n else {\n this.safeToRemove();\n }\n if (prevProps.isPresent !== isPresent) {\n if (isPresent) {\n projection.promote();\n }\n else if (!projection.relegate()) {\n /**\n * If there's another stack member taking over from this one,\n * it's in charge of the exit animation and therefore should\n * be in charge of the safe to remove. Otherwise we call it here.\n */\n frame.postRender(() => {\n const stack = projection.getStack();\n if (!stack || !stack.members.length) {\n this.safeToRemove();\n }\n });\n }\n }\n return null;\n }\n componentDidUpdate() {\n const { projection } = this.props.visualElement;\n if (projection) {\n projection.root.didUpdate();\n queueMicrotask(() => {\n if (!projection.currentAnimation && projection.isLead()) {\n this.safeToRemove();\n }\n });\n }\n }\n componentWillUnmount() {\n const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props;\n const { projection } = visualElement;\n if (projection) {\n projection.scheduleCheckAfterUnmount();\n if (layoutGroup && layoutGroup.group)\n layoutGroup.group.remove(projection);\n if (promoteContext && promoteContext.deregister)\n promoteContext.deregister(projection);\n }\n }\n safeToRemove() {\n const { safeToRemove } = this.props;\n safeToRemove && safeToRemove();\n }\n render() {\n return null;\n }\n}\nfunction MeasureLayout(props) {\n const [isPresent, safeToRemove] = usePresence();\n const layoutGroup = useContext(LayoutGroupContext);\n return (React__default.createElement(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove }));\n}\nconst defaultScaleCorrectors = {\n borderRadius: {\n ...correctBorderRadius,\n applyTo: [\n \"borderTopLeftRadius\",\n \"borderTopRightRadius\",\n \"borderBottomLeftRadius\",\n \"borderBottomRightRadius\",\n ],\n },\n borderTopLeftRadius: correctBorderRadius,\n borderTopRightRadius: correctBorderRadius,\n borderBottomLeftRadius: correctBorderRadius,\n borderBottomRightRadius: correctBorderRadius,\n boxShadow: correctBoxShadow,\n};\n\nexport { MeasureLayout };\n","import { circOut } from '../../easing/circ.mjs';\nimport { progress } from '../../utils/progress.mjs';\nimport { mix } from '../../utils/mix.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { percent, px } from '../../value/types/numbers/units.mjs';\n\nconst borders = [\"TopLeft\", \"TopRight\", \"BottomLeft\", \"BottomRight\"];\nconst numBorders = borders.length;\nconst asNumber = (value) => typeof value === \"string\" ? parseFloat(value) : value;\nconst isPx = (value) => typeof value === \"number\" || px.test(value);\nfunction mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {\n if (shouldCrossfadeOpacity) {\n target.opacity = mix(0, \n // TODO Reinstate this if only child\n lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));\n target.opacityExit = mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));\n }\n else if (isOnlyMember) {\n target.opacity = mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);\n }\n /**\n * Mix border radius\n */\n for (let i = 0; i < numBorders; i++) {\n const borderLabel = `border${borders[i]}Radius`;\n let followRadius = getRadius(follow, borderLabel);\n let leadRadius = getRadius(lead, borderLabel);\n if (followRadius === undefined && leadRadius === undefined)\n continue;\n followRadius || (followRadius = 0);\n leadRadius || (leadRadius = 0);\n const canMix = followRadius === 0 ||\n leadRadius === 0 ||\n isPx(followRadius) === isPx(leadRadius);\n if (canMix) {\n target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0);\n if (percent.test(leadRadius) || percent.test(followRadius)) {\n target[borderLabel] += \"%\";\n }\n }\n else {\n target[borderLabel] = leadRadius;\n }\n }\n /**\n * Mix rotation\n */\n if (follow.rotate || lead.rotate) {\n target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress);\n }\n}\nfunction getRadius(values, radiusName) {\n return values[radiusName] !== undefined\n ? values[radiusName]\n : values.borderRadius;\n}\n// /**\n// * We only want to mix the background color if there's a follow element\n// * that we're not crossfading opacity between. For instance with switch\n// * AnimateSharedLayout animations, this helps the illusion of a continuous\n// * element being animated but also cuts down on the number of paints triggered\n// * for elements where opacity is doing that work for us.\n// */\n// if (\n// !hasFollowElement &&\n// latestLeadValues.backgroundColor &&\n// latestFollowValues.backgroundColor\n// ) {\n// /**\n// * This isn't ideal performance-wise as mixColor is creating a new function every frame.\n// * We could probably create a mixer that runs at the start of the animation but\n// * the idea behind the crossfader is that it runs dynamically between two potentially\n// * changing targets (ie opacity or borderRadius may be animating independently via variants)\n// */\n// leadState.backgroundColor = followState.backgroundColor = mixColor(\n// latestFollowValues.backgroundColor as string,\n// latestLeadValues.backgroundColor as string\n// )(p)\n// }\nconst easeCrossfadeIn = compress(0, 0.5, circOut);\nconst easeCrossfadeOut = compress(0.5, 0.95, noop);\nfunction compress(min, max, easing) {\n return (p) => {\n // Could replace ifs with clamp\n if (p < min)\n return 0;\n if (p > max)\n return 1;\n return easing(progress(min, max, p));\n };\n}\n\nexport { mixValues };\n","/**\n * Reset an axis to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyAxisInto(axis, originAxis) {\n axis.min = originAxis.min;\n axis.max = originAxis.max;\n}\n/**\n * Reset a box to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyBoxInto(box, originBox) {\n copyAxisInto(box.x, originBox.x);\n copyAxisInto(box.y, originBox.y);\n}\n\nexport { copyAxisInto, copyBoxInto };\n","import { mix } from '../../utils/mix.mjs';\nimport { percent } from '../../value/types/numbers/units.mjs';\nimport { scalePoint } from './delta-apply.mjs';\n\n/**\n * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse\n */\nfunction removePointDelta(point, translate, scale, originPoint, boxScale) {\n point -= translate;\n point = scalePoint(point, 1 / scale, originPoint);\n if (boxScale !== undefined) {\n point = scalePoint(point, 1 / boxScale, originPoint);\n }\n return point;\n}\n/**\n * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse\n */\nfunction removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {\n if (percent.test(translate)) {\n translate = parseFloat(translate);\n const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100);\n translate = relativeProgress - sourceAxis.min;\n }\n if (typeof translate !== \"number\")\n return;\n let originPoint = mix(originAxis.min, originAxis.max, origin);\n if (axis === originAxis)\n originPoint -= translate;\n axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);\n axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale);\n}\n/**\n * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse\n * and acts as a bridge between motion values and removeAxisDelta\n */\nfunction removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {\n removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);\n}\n/**\n * The names of the motion values we want to apply as translation, scale and origin.\n */\nconst xKeys = [\"x\", \"scaleX\", \"originX\"];\nconst yKeys = [\"y\", \"scaleY\", \"originY\"];\n/**\n * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse\n * and acts as a bridge between motion values and removeAxisDelta\n */\nfunction removeBoxTransforms(box, transforms, originBox, sourceBox) {\n removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);\n removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);\n}\n\nexport { removeAxisDelta, removeAxisTransforms, removeBoxTransforms, removePointDelta };\n","import { calcLength } from './delta-calc.mjs';\n\nfunction isAxisDeltaZero(delta) {\n return delta.translate === 0 && delta.scale === 1;\n}\nfunction isDeltaZero(delta) {\n return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);\n}\nfunction boxEquals(a, b) {\n return (a.x.min === b.x.min &&\n a.x.max === b.x.max &&\n a.y.min === b.y.min &&\n a.y.max === b.y.max);\n}\nfunction boxEqualsRounded(a, b) {\n return (Math.round(a.x.min) === Math.round(b.x.min) &&\n Math.round(a.x.max) === Math.round(b.x.max) &&\n Math.round(a.y.min) === Math.round(b.y.min) &&\n Math.round(a.y.max) === Math.round(b.y.max));\n}\nfunction aspectRatio(box) {\n return calcLength(box.x) / calcLength(box.y);\n}\n\nexport { aspectRatio, boxEquals, boxEqualsRounded, isDeltaZero };\n","import { addUniqueItem, removeItem } from '../../utils/array.mjs';\n\nclass NodeStack {\n constructor() {\n this.members = [];\n }\n add(node) {\n addUniqueItem(this.members, node);\n node.scheduleRender();\n }\n remove(node) {\n removeItem(this.members, node);\n if (node === this.prevLead) {\n this.prevLead = undefined;\n }\n if (node === this.lead) {\n const prevLead = this.members[this.members.length - 1];\n if (prevLead) {\n this.promote(prevLead);\n }\n }\n }\n relegate(node) {\n const indexOfNode = this.members.findIndex((member) => node === member);\n if (indexOfNode === 0)\n return false;\n /**\n * Find the next projection node that is present\n */\n let prevLead;\n for (let i = indexOfNode; i >= 0; i--) {\n const member = this.members[i];\n if (member.isPresent !== false) {\n prevLead = member;\n break;\n }\n }\n if (prevLead) {\n this.promote(prevLead);\n return true;\n }\n else {\n return false;\n }\n }\n promote(node, preserveFollowOpacity) {\n const prevLead = this.lead;\n if (node === prevLead)\n return;\n this.prevLead = prevLead;\n this.lead = node;\n node.show();\n if (prevLead) {\n prevLead.instance && prevLead.scheduleRender();\n node.scheduleRender();\n node.resumeFrom = prevLead;\n if (preserveFollowOpacity) {\n node.resumeFrom.preserveOpacity = true;\n }\n if (prevLead.snapshot) {\n node.snapshot = prevLead.snapshot;\n node.snapshot.latestValues =\n prevLead.animationValues || prevLead.latestValues;\n }\n if (node.root && node.root.isUpdating) {\n node.isLayoutDirty = true;\n }\n const { crossfade } = node.options;\n if (crossfade === false) {\n prevLead.hide();\n }\n /**\n * TODO:\n * - Test border radius when previous node was deleted\n * - boxShadow mixing\n * - Shared between element A in scrolled container and element B (scroll stays the same or changes)\n * - Shared between element A in transformed container and element B (transform stays the same or changes)\n * - Shared between element A in scrolled page and element B (scroll stays the same or changes)\n * ---\n * - Crossfade opacity of root nodes\n * - layoutId changes after animation\n * - layoutId changes mid animation\n */\n }\n }\n exitAnimationComplete() {\n this.members.forEach((node) => {\n const { options, resumingFrom } = node;\n options.onExitComplete && options.onExitComplete();\n if (resumingFrom) {\n resumingFrom.options.onExitComplete &&\n resumingFrom.options.onExitComplete();\n }\n });\n }\n scheduleRender() {\n this.members.forEach((node) => {\n node.instance && node.scheduleRender(false);\n });\n }\n /**\n * Clear any leads that have been removed this render to prevent them from being\n * used in future animations and to prevent memory leaks\n */\n removeLeadSnapshot() {\n if (this.lead && this.lead.snapshot) {\n this.lead.snapshot = undefined;\n }\n }\n}\n\nexport { NodeStack };\n","function buildProjectionTransform(delta, treeScale, latestTransform) {\n let transform = \"\";\n /**\n * The translations we use to calculate are always relative to the viewport coordinate space.\n * But when we apply scales, we also scale the coordinate space of an element and its children.\n * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need\n * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.\n */\n const xTranslate = delta.x.translate / treeScale.x;\n const yTranslate = delta.y.translate / treeScale.y;\n if (xTranslate || yTranslate) {\n transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `;\n }\n /**\n * Apply scale correction for the tree transform.\n * This will apply scale to the screen-orientated axes.\n */\n if (treeScale.x !== 1 || treeScale.y !== 1) {\n transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;\n }\n if (latestTransform) {\n const { rotate, rotateX, rotateY } = latestTransform;\n if (rotate)\n transform += `rotate(${rotate}deg) `;\n if (rotateX)\n transform += `rotateX(${rotateX}deg) `;\n if (rotateY)\n transform += `rotateY(${rotateY}deg) `;\n }\n /**\n * Apply scale to match the size of the element to the size we want it.\n * This will apply scale to the element-orientated axes.\n */\n const elementScaleX = delta.x.scale * treeScale.x;\n const elementScaleY = delta.y.scale * treeScale.y;\n if (elementScaleX !== 1 || elementScaleY !== 1) {\n transform += `scale(${elementScaleX}, ${elementScaleY})`;\n }\n return transform || \"none\";\n}\n\nexport { buildProjectionTransform };\n","const compareByDepth = (a, b) => a.depth - b.depth;\n\nexport { compareByDepth };\n","import { addUniqueItem, removeItem } from '../../utils/array.mjs';\nimport { compareByDepth } from './compare-by-depth.mjs';\n\nclass FlatTree {\n constructor() {\n this.children = [];\n this.isDirty = false;\n }\n add(child) {\n addUniqueItem(this.children, child);\n this.isDirty = true;\n }\n remove(child) {\n removeItem(this.children, child);\n this.isDirty = true;\n }\n forEach(callback) {\n this.isDirty && this.children.sort(compareByDepth);\n this.isDirty = false;\n this.children.forEach(callback);\n }\n}\n\nexport { FlatTree };\n","import { SubscriptionManager } from '../../utils/subscription-manager.mjs';\nimport { mixValues } from '../animation/mix-values.mjs';\nimport { copyBoxInto } from '../geometry/copy.mjs';\nimport { translateAxis, transformBox, applyBoxDelta, applyTreeDeltas } from '../geometry/delta-apply.mjs';\nimport { calcRelativePosition, calcRelativeBox, calcBoxDelta, calcLength, isNear } from '../geometry/delta-calc.mjs';\nimport { removeBoxTransforms } from '../geometry/delta-remove.mjs';\nimport { createBox, createDelta } from '../geometry/models.mjs';\nimport { getValueTransition } from '../../animation/utils/transitions.mjs';\nimport { boxEqualsRounded, isDeltaZero, aspectRatio, boxEquals } from '../geometry/utils.mjs';\nimport { NodeStack } from '../shared/stack.mjs';\nimport { scaleCorrectors } from '../styles/scale-correction.mjs';\nimport { buildProjectionTransform } from '../styles/transform.mjs';\nimport { eachAxis } from '../utils/each-axis.mjs';\nimport { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.mjs';\nimport { FlatTree } from '../../render/utils/flat-tree.mjs';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';\nimport { globalProjectionState } from './state.mjs';\nimport { delay } from '../../utils/delay.mjs';\nimport { mix } from '../../utils/mix.mjs';\nimport { record } from '../../debug/record.mjs';\nimport { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';\nimport { animateSingleValue } from '../../animation/interfaces/single-value.mjs';\nimport { clamp } from '../../utils/clamp.mjs';\nimport { cancelFrame, frameData, steps, frame } from '../../frameloop/frame.mjs';\nimport { noop } from '../../utils/noop.mjs';\n\nconst transformAxes = [\"\", \"X\", \"Y\", \"Z\"];\n/**\n * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1\n * which has a noticeable difference in spring animations\n */\nconst animationTarget = 1000;\nlet id = 0;\n/**\n * Use a mutable data object for debug data so as to not create a new\n * object every frame.\n */\nconst projectionFrameData = {\n type: \"projectionFrame\",\n totalNodes: 0,\n resolvedTargetDeltas: 0,\n recalculatedProjection: 0,\n};\nfunction createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {\n return class ProjectionNode {\n constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {\n /**\n * A unique ID generated for every projection node.\n */\n this.id = id++;\n /**\n * An id that represents a unique session instigated by startUpdate.\n */\n this.animationId = 0;\n /**\n * A Set containing all this component's children. This is used to iterate\n * through the children.\n *\n * TODO: This could be faster to iterate as a flat array stored on the root node.\n */\n this.children = new Set();\n /**\n * Options for the node. We use this to configure what kind of layout animations\n * we should perform (if any).\n */\n this.options = {};\n /**\n * We use this to detect when its safe to shut down part of a projection tree.\n * We have to keep projecting children for scale correction and relative projection\n * until all their parents stop performing layout animations.\n */\n this.isTreeAnimating = false;\n this.isAnimationBlocked = false;\n /**\n * Flag to true if we think this layout has been changed. We can't always know this,\n * currently we set it to true every time a component renders, or if it has a layoutDependency\n * if that has changed between renders. Additionally, components can be grouped by LayoutGroup\n * and if one node is dirtied, they all are.\n */\n this.isLayoutDirty = false;\n /**\n * Flag to true if we think the projection calculations for this node needs\n * recalculating as a result of an updated transform or layout animation.\n */\n this.isProjectionDirty = false;\n /**\n * Flag to true if the layout *or* transform has changed. This then gets propagated\n * throughout the projection tree, forcing any element below to recalculate on the next frame.\n */\n this.isSharedProjectionDirty = false;\n /**\n * Flag transform dirty. This gets propagated throughout the whole tree but is only\n * respected by shared nodes.\n */\n this.isTransformDirty = false;\n /**\n * Block layout updates for instant layout transitions throughout the tree.\n */\n this.updateManuallyBlocked = false;\n this.updateBlockedByResize = false;\n /**\n * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`\n * call.\n */\n this.isUpdating = false;\n /**\n * If this is an SVG element we currently disable projection transforms\n */\n this.isSVG = false;\n /**\n * Flag to true (during promotion) if a node doing an instant layout transition needs to reset\n * its projection styles.\n */\n this.needsReset = false;\n /**\n * Flags whether this node should have its transform reset prior to measuring.\n */\n this.shouldResetTransform = false;\n /**\n * An object representing the calculated contextual/accumulated/tree scale.\n * This will be used to scale calculcated projection transforms, as these are\n * calculated in screen-space but need to be scaled for elements to layoutly\n * make it to their calculated destinations.\n *\n * TODO: Lazy-init\n */\n this.treeScale = { x: 1, y: 1 };\n /**\n *\n */\n this.eventHandlers = new Map();\n this.hasTreeAnimated = false;\n // Note: Currently only running on root node\n this.updateScheduled = false;\n this.checkUpdateFailed = () => {\n if (this.isUpdating) {\n this.isUpdating = false;\n this.clearAllSnapshots();\n }\n };\n /**\n * This is a multi-step process as shared nodes might be of different depths. Nodes\n * are sorted by depth order, so we need to resolve the entire tree before moving to\n * the next step.\n */\n this.updateProjection = () => {\n /**\n * Reset debug counts. Manually resetting rather than creating a new\n * object each frame.\n */\n projectionFrameData.totalNodes =\n projectionFrameData.resolvedTargetDeltas =\n projectionFrameData.recalculatedProjection =\n 0;\n this.nodes.forEach(propagateDirtyNodes);\n this.nodes.forEach(resolveTargetDelta);\n this.nodes.forEach(calcProjection);\n this.nodes.forEach(cleanDirtyNodes);\n record(projectionFrameData);\n };\n this.hasProjected = false;\n this.isVisible = true;\n this.animationProgress = 0;\n /**\n * Shared layout\n */\n // TODO Only running on root node\n this.sharedNodes = new Map();\n this.latestValues = latestValues;\n this.root = parent ? parent.root || parent : this;\n this.path = parent ? [...parent.path, parent] : [];\n this.parent = parent;\n this.depth = parent ? parent.depth + 1 : 0;\n for (let i = 0; i < this.path.length; i++) {\n this.path[i].shouldResetTransform = true;\n }\n if (this.root === this)\n this.nodes = new FlatTree();\n }\n addEventListener(name, handler) {\n if (!this.eventHandlers.has(name)) {\n this.eventHandlers.set(name, new SubscriptionManager());\n }\n return this.eventHandlers.get(name).add(handler);\n }\n notifyListeners(name, ...args) {\n const subscriptionManager = this.eventHandlers.get(name);\n subscriptionManager && subscriptionManager.notify(...args);\n }\n hasListeners(name) {\n return this.eventHandlers.has(name);\n }\n /**\n * Lifecycles\n */\n mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {\n if (this.instance)\n return;\n this.isSVG = isSVGElement(instance);\n this.instance = instance;\n const { layoutId, layout, visualElement } = this.options;\n if (visualElement && !visualElement.current) {\n visualElement.mount(instance);\n }\n this.root.nodes.add(this);\n this.parent && this.parent.children.add(this);\n if (isLayoutDirty && (layout || layoutId)) {\n this.isLayoutDirty = true;\n }\n if (attachResizeListener) {\n let cancelDelay;\n const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);\n attachResizeListener(instance, () => {\n this.root.updateBlockedByResize = true;\n cancelDelay && cancelDelay();\n cancelDelay = delay(resizeUnblockUpdate, 250);\n if (globalProjectionState.hasAnimatedSinceResize) {\n globalProjectionState.hasAnimatedSinceResize = false;\n this.nodes.forEach(finishAnimation);\n }\n });\n }\n if (layoutId) {\n this.root.registerSharedNode(layoutId, this);\n }\n // Only register the handler if it requires layout animation\n if (this.options.animate !== false &&\n visualElement &&\n (layoutId || layout)) {\n this.addEventListener(\"didUpdate\", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {\n if (this.isTreeAnimationBlocked()) {\n this.target = undefined;\n this.relativeTarget = undefined;\n return;\n }\n // TODO: Check here if an animation exists\n const layoutTransition = this.options.transition ||\n visualElement.getDefaultTransition() ||\n defaultLayoutTransition;\n const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();\n /**\n * The target layout of the element might stay the same,\n * but its position relative to its parent has changed.\n */\n const targetChanged = !this.targetLayout ||\n !boxEqualsRounded(this.targetLayout, newLayout) ||\n hasRelativeTargetChanged;\n /**\n * If the layout hasn't seemed to have changed, it might be that the\n * element is visually in the same place in the document but its position\n * relative to its parent has indeed changed. So here we check for that.\n */\n const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;\n if (this.options.layoutRoot ||\n (this.resumeFrom && this.resumeFrom.instance) ||\n hasOnlyRelativeTargetChanged ||\n (hasLayoutChanged &&\n (targetChanged || !this.currentAnimation))) {\n if (this.resumeFrom) {\n this.resumingFrom = this.resumeFrom;\n this.resumingFrom.resumingFrom = undefined;\n }\n this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);\n const animationOptions = {\n ...getValueTransition(layoutTransition, \"layout\"),\n onPlay: onLayoutAnimationStart,\n onComplete: onLayoutAnimationComplete,\n };\n if (visualElement.shouldReduceMotion ||\n this.options.layoutRoot) {\n animationOptions.delay = 0;\n animationOptions.type = false;\n }\n this.startAnimation(animationOptions);\n }\n else {\n /**\n * If the layout hasn't changed and we have an animation that hasn't started yet,\n * finish it immediately. Otherwise it will be animating from a location\n * that was probably never commited to screen and look like a jumpy box.\n */\n if (!hasLayoutChanged) {\n finishAnimation(this);\n }\n if (this.isLead() && this.options.onExitComplete) {\n this.options.onExitComplete();\n }\n }\n this.targetLayout = newLayout;\n });\n }\n }\n unmount() {\n this.options.layoutId && this.willUpdate();\n this.root.nodes.remove(this);\n const stack = this.getStack();\n stack && stack.remove(this);\n this.parent && this.parent.children.delete(this);\n this.instance = undefined;\n cancelFrame(this.updateProjection);\n }\n // only on the root\n blockUpdate() {\n this.updateManuallyBlocked = true;\n }\n unblockUpdate() {\n this.updateManuallyBlocked = false;\n }\n isUpdateBlocked() {\n return this.updateManuallyBlocked || this.updateBlockedByResize;\n }\n isTreeAnimationBlocked() {\n return (this.isAnimationBlocked ||\n (this.parent && this.parent.isTreeAnimationBlocked()) ||\n false);\n }\n // Note: currently only running on root node\n startUpdate() {\n if (this.isUpdateBlocked())\n return;\n this.isUpdating = true;\n this.nodes && this.nodes.forEach(resetRotation);\n this.animationId++;\n }\n getTransformTemplate() {\n const { visualElement } = this.options;\n return visualElement && visualElement.getProps().transformTemplate;\n }\n willUpdate(shouldNotifyListeners = true) {\n this.root.hasTreeAnimated = true;\n if (this.root.isUpdateBlocked()) {\n this.options.onExitComplete && this.options.onExitComplete();\n return;\n }\n !this.root.isUpdating && this.root.startUpdate();\n if (this.isLayoutDirty)\n return;\n this.isLayoutDirty = true;\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n node.shouldResetTransform = true;\n node.updateScroll(\"snapshot\");\n if (node.options.layoutRoot) {\n node.willUpdate(false);\n }\n }\n const { layoutId, layout } = this.options;\n if (layoutId === undefined && !layout)\n return;\n const transformTemplate = this.getTransformTemplate();\n this.prevTransformTemplateValue = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : undefined;\n this.updateSnapshot();\n shouldNotifyListeners && this.notifyListeners(\"willUpdate\");\n }\n update() {\n this.updateScheduled = false;\n const updateWasBlocked = this.isUpdateBlocked();\n // When doing an instant transition, we skip the layout update,\n // but should still clean up the measurements so that the next\n // snapshot could be taken correctly.\n if (updateWasBlocked) {\n this.unblockUpdate();\n this.clearAllSnapshots();\n this.nodes.forEach(clearMeasurements);\n return;\n }\n if (!this.isUpdating) {\n this.nodes.forEach(clearIsLayoutDirty);\n }\n this.isUpdating = false;\n /**\n * Write\n */\n this.nodes.forEach(resetTransformStyle);\n /**\n * Read ==================\n */\n // Update layout measurements of updated children\n this.nodes.forEach(updateLayout);\n /**\n * Write\n */\n // Notify listeners that the layout is updated\n this.nodes.forEach(notifyLayoutUpdate);\n this.clearAllSnapshots();\n /**\n * Manually flush any pending updates. Ideally\n * we could leave this to the following requestAnimationFrame but this seems\n * to leave a flash of incorrectly styled content.\n */\n const now = performance.now();\n frameData.delta = clamp(0, 1000 / 60, now - frameData.timestamp);\n frameData.timestamp = now;\n frameData.isProcessing = true;\n steps.update.process(frameData);\n steps.preRender.process(frameData);\n steps.render.process(frameData);\n frameData.isProcessing = false;\n }\n didUpdate() {\n if (!this.updateScheduled) {\n this.updateScheduled = true;\n queueMicrotask(() => this.update());\n }\n }\n clearAllSnapshots() {\n this.nodes.forEach(clearSnapshot);\n this.sharedNodes.forEach(removeLeadSnapshots);\n }\n scheduleUpdateProjection() {\n frame.preRender(this.updateProjection, false, true);\n }\n scheduleCheckAfterUnmount() {\n /**\n * If the unmounting node is in a layoutGroup and did trigger a willUpdate,\n * we manually call didUpdate to give a chance to the siblings to animate.\n * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.\n */\n frame.postRender(() => {\n if (this.isLayoutDirty) {\n this.root.didUpdate();\n }\n else {\n this.root.checkUpdateFailed();\n }\n });\n }\n /**\n * Update measurements\n */\n updateSnapshot() {\n if (this.snapshot || !this.instance)\n return;\n this.snapshot = this.measure();\n }\n updateLayout() {\n if (!this.instance)\n return;\n // TODO: Incorporate into a forwarded scroll offset\n this.updateScroll();\n if (!(this.options.alwaysMeasureLayout && this.isLead()) &&\n !this.isLayoutDirty) {\n return;\n }\n /**\n * When a node is mounted, it simply resumes from the prevLead's\n * snapshot instead of taking a new one, but the ancestors scroll\n * might have updated while the prevLead is unmounted. We need to\n * update the scroll again to make sure the layout we measure is\n * up to date.\n */\n if (this.resumeFrom && !this.resumeFrom.instance) {\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n node.updateScroll();\n }\n }\n const prevLayout = this.layout;\n this.layout = this.measure(false);\n this.layoutCorrected = createBox();\n this.isLayoutDirty = false;\n this.projectionDelta = undefined;\n this.notifyListeners(\"measure\", this.layout.layoutBox);\n const { visualElement } = this.options;\n visualElement &&\n visualElement.notify(\"LayoutMeasure\", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);\n }\n updateScroll(phase = \"measure\") {\n let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);\n if (this.scroll &&\n this.scroll.animationId === this.root.animationId &&\n this.scroll.phase === phase) {\n needsMeasurement = false;\n }\n if (needsMeasurement) {\n this.scroll = {\n animationId: this.root.animationId,\n phase,\n isRoot: checkIsScrollRoot(this.instance),\n offset: measureScroll(this.instance),\n };\n }\n }\n resetTransform() {\n if (!resetTransform)\n return;\n const isResetRequested = this.isLayoutDirty || this.shouldResetTransform;\n const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);\n const transformTemplate = this.getTransformTemplate();\n const transformTemplateValue = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : undefined;\n const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;\n if (isResetRequested &&\n (hasProjection ||\n hasTransform(this.latestValues) ||\n transformTemplateHasChanged)) {\n resetTransform(this.instance, transformTemplateValue);\n this.shouldResetTransform = false;\n this.scheduleRender();\n }\n }\n measure(removeTransform = true) {\n const pageBox = this.measurePageBox();\n let layoutBox = this.removeElementScroll(pageBox);\n /**\n * Measurements taken during the pre-render stage\n * still have transforms applied so we remove them\n * via calculation.\n */\n if (removeTransform) {\n layoutBox = this.removeTransform(layoutBox);\n }\n roundBox(layoutBox);\n return {\n animationId: this.root.animationId,\n measuredBox: pageBox,\n layoutBox,\n latestValues: {},\n source: this.id,\n };\n }\n measurePageBox() {\n const { visualElement } = this.options;\n if (!visualElement)\n return createBox();\n const box = visualElement.measureViewportBox();\n // Remove viewport scroll to give page-relative coordinates\n const { scroll } = this.root;\n if (scroll) {\n translateAxis(box.x, scroll.offset.x);\n translateAxis(box.y, scroll.offset.y);\n }\n return box;\n }\n removeElementScroll(box) {\n const boxWithoutScroll = createBox();\n copyBoxInto(boxWithoutScroll, box);\n /**\n * Performance TODO: Keep a cumulative scroll offset down the tree\n * rather than loop back up the path.\n */\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n const { scroll, options } = node;\n if (node !== this.root && scroll && options.layoutScroll) {\n /**\n * If this is a new scroll root, we want to remove all previous scrolls\n * from the viewport box.\n */\n if (scroll.isRoot) {\n copyBoxInto(boxWithoutScroll, box);\n const { scroll: rootScroll } = this.root;\n /**\n * Undo the application of page scroll that was originally added\n * to the measured bounding box.\n */\n if (rootScroll) {\n translateAxis(boxWithoutScroll.x, -rootScroll.offset.x);\n translateAxis(boxWithoutScroll.y, -rootScroll.offset.y);\n }\n }\n translateAxis(boxWithoutScroll.x, scroll.offset.x);\n translateAxis(boxWithoutScroll.y, scroll.offset.y);\n }\n }\n return boxWithoutScroll;\n }\n applyTransform(box, transformOnly = false) {\n const withTransforms = createBox();\n copyBoxInto(withTransforms, box);\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n if (!transformOnly &&\n node.options.layoutScroll &&\n node.scroll &&\n node !== node.root) {\n transformBox(withTransforms, {\n x: -node.scroll.offset.x,\n y: -node.scroll.offset.y,\n });\n }\n if (!hasTransform(node.latestValues))\n continue;\n transformBox(withTransforms, node.latestValues);\n }\n if (hasTransform(this.latestValues)) {\n transformBox(withTransforms, this.latestValues);\n }\n return withTransforms;\n }\n removeTransform(box) {\n const boxWithoutTransform = createBox();\n copyBoxInto(boxWithoutTransform, box);\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n if (!node.instance)\n continue;\n if (!hasTransform(node.latestValues))\n continue;\n hasScale(node.latestValues) && node.updateSnapshot();\n const sourceBox = createBox();\n const nodeBox = node.measurePageBox();\n copyBoxInto(sourceBox, nodeBox);\n removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);\n }\n if (hasTransform(this.latestValues)) {\n removeBoxTransforms(boxWithoutTransform, this.latestValues);\n }\n return boxWithoutTransform;\n }\n setTargetDelta(delta) {\n this.targetDelta = delta;\n this.root.scheduleUpdateProjection();\n this.isProjectionDirty = true;\n }\n setOptions(options) {\n this.options = {\n ...this.options,\n ...options,\n crossfade: options.crossfade !== undefined ? options.crossfade : true,\n };\n }\n clearMeasurements() {\n this.scroll = undefined;\n this.layout = undefined;\n this.snapshot = undefined;\n this.prevTransformTemplateValue = undefined;\n this.targetDelta = undefined;\n this.target = undefined;\n this.isLayoutDirty = false;\n }\n forceRelativeParentToResolveTarget() {\n if (!this.relativeParent)\n return;\n /**\n * If the parent target isn't up-to-date, force it to update.\n * This is an unfortunate de-optimisation as it means any updating relative\n * projection will cause all the relative parents to recalculate back\n * up the tree.\n */\n if (this.relativeParent.resolvedRelativeTargetAt !==\n frameData.timestamp) {\n this.relativeParent.resolveTargetDelta(true);\n }\n }\n resolveTargetDelta(forceRecalculation = false) {\n var _a;\n /**\n * Once the dirty status of nodes has been spread through the tree, we also\n * need to check if we have a shared node of a different depth that has itself\n * been dirtied.\n */\n const lead = this.getLead();\n this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);\n this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);\n this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);\n const isShared = Boolean(this.resumingFrom) || this !== lead;\n /**\n * We don't use transform for this step of processing so we don't\n * need to check whether any nodes have changed transform.\n */\n const canSkip = !(forceRecalculation ||\n (isShared && this.isSharedProjectionDirty) ||\n this.isProjectionDirty ||\n ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||\n this.attemptToResolveRelativeTarget);\n if (canSkip)\n return;\n const { layout, layoutId } = this.options;\n /**\n * If we have no layout, we can't perform projection, so early return\n */\n if (!this.layout || !(layout || layoutId))\n return;\n this.resolvedRelativeTargetAt = frameData.timestamp;\n /**\n * If we don't have a targetDelta but do have a layout, we can attempt to resolve\n * a relativeParent. This will allow a component to perform scale correction\n * even if no animation has started.\n */\n // TODO If this is unsuccessful this currently happens every frame\n if (!this.targetDelta && !this.relativeTarget) {\n // TODO: This is a semi-repetition of further down this function, make DRY\n const relativeParent = this.getClosestProjectingParent();\n if (relativeParent &&\n relativeParent.layout &&\n this.animationProgress !== 1) {\n this.relativeParent = relativeParent;\n this.forceRelativeParentToResolveTarget();\n this.relativeTarget = createBox();\n this.relativeTargetOrigin = createBox();\n calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);\n copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);\n }\n else {\n this.relativeParent = this.relativeTarget = undefined;\n }\n }\n /**\n * If we have no relative target or no target delta our target isn't valid\n * for this frame.\n */\n if (!this.relativeTarget && !this.targetDelta)\n return;\n /**\n * Lazy-init target data structure\n */\n if (!this.target) {\n this.target = createBox();\n this.targetWithTransforms = createBox();\n }\n /**\n * If we've got a relative box for this component, resolve it into a target relative to the parent.\n */\n if (this.relativeTarget &&\n this.relativeTargetOrigin &&\n this.relativeParent &&\n this.relativeParent.target) {\n this.forceRelativeParentToResolveTarget();\n calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);\n /**\n * If we've only got a targetDelta, resolve it into a target\n */\n }\n else if (this.targetDelta) {\n if (Boolean(this.resumingFrom)) {\n // TODO: This is creating a new object every frame\n this.target = this.applyTransform(this.layout.layoutBox);\n }\n else {\n copyBoxInto(this.target, this.layout.layoutBox);\n }\n applyBoxDelta(this.target, this.targetDelta);\n }\n else {\n /**\n * If no target, use own layout as target\n */\n copyBoxInto(this.target, this.layout.layoutBox);\n }\n /**\n * If we've been told to attempt to resolve a relative target, do so.\n */\n if (this.attemptToResolveRelativeTarget) {\n this.attemptToResolveRelativeTarget = false;\n const relativeParent = this.getClosestProjectingParent();\n if (relativeParent &&\n Boolean(relativeParent.resumingFrom) ===\n Boolean(this.resumingFrom) &&\n !relativeParent.options.layoutScroll &&\n relativeParent.target &&\n this.animationProgress !== 1) {\n this.relativeParent = relativeParent;\n this.forceRelativeParentToResolveTarget();\n this.relativeTarget = createBox();\n this.relativeTargetOrigin = createBox();\n calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);\n copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);\n }\n else {\n this.relativeParent = this.relativeTarget = undefined;\n }\n }\n /**\n * Increase debug counter for resolved target deltas\n */\n projectionFrameData.resolvedTargetDeltas++;\n }\n getClosestProjectingParent() {\n if (!this.parent ||\n hasScale(this.parent.latestValues) ||\n has2DTranslate(this.parent.latestValues)) {\n return undefined;\n }\n if (this.parent.isProjecting()) {\n return this.parent;\n }\n else {\n return this.parent.getClosestProjectingParent();\n }\n }\n isProjecting() {\n return Boolean((this.relativeTarget ||\n this.targetDelta ||\n this.options.layoutRoot) &&\n this.layout);\n }\n calcProjection() {\n var _a;\n const lead = this.getLead();\n const isShared = Boolean(this.resumingFrom) || this !== lead;\n let canSkip = true;\n /**\n * If this is a normal layout animation and neither this node nor its nearest projecting\n * is dirty then we can't skip.\n */\n if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {\n canSkip = false;\n }\n /**\n * If this is a shared layout animation and this node's shared projection is dirty then\n * we can't skip.\n */\n if (isShared &&\n (this.isSharedProjectionDirty || this.isTransformDirty)) {\n canSkip = false;\n }\n /**\n * If we have resolved the target this frame we must recalculate the\n * projection to ensure it visually represents the internal calculations.\n */\n if (this.resolvedRelativeTargetAt === frameData.timestamp) {\n canSkip = false;\n }\n if (canSkip)\n return;\n const { layout, layoutId } = this.options;\n /**\n * If this section of the tree isn't animating we can\n * delete our target sources for the following frame.\n */\n this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||\n this.currentAnimation ||\n this.pendingAnimation);\n if (!this.isTreeAnimating) {\n this.targetDelta = this.relativeTarget = undefined;\n }\n if (!this.layout || !(layout || layoutId))\n return;\n /**\n * Reset the corrected box with the latest values from box, as we're then going\n * to perform mutative operations on it.\n */\n copyBoxInto(this.layoutCorrected, this.layout.layoutBox);\n /**\n * Record previous tree scales before updating.\n */\n const prevTreeScaleX = this.treeScale.x;\n const prevTreeScaleY = this.treeScale.y;\n /**\n * Apply all the parent deltas to this box to produce the corrected box. This\n * is the layout box, as it will appear on screen as a result of the transforms of its parents.\n */\n applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);\n /**\n * If this layer needs to perform scale correction but doesn't have a target,\n * use the layout as the target.\n */\n if (lead.layout &&\n !lead.target &&\n (this.treeScale.x !== 1 || this.treeScale.y !== 1)) {\n lead.target = lead.layout.layoutBox;\n }\n const { target } = lead;\n if (!target) {\n /**\n * If we don't have a target to project into, but we were previously\n * projecting, we want to remove the stored transform and schedule\n * a render to ensure the elements reflect the removed transform.\n */\n if (this.projectionTransform) {\n this.projectionDelta = createDelta();\n this.projectionTransform = \"none\";\n this.scheduleRender();\n }\n return;\n }\n if (!this.projectionDelta) {\n this.projectionDelta = createDelta();\n this.projectionDeltaWithTransform = createDelta();\n }\n const prevProjectionTransform = this.projectionTransform;\n /**\n * Update the delta between the corrected box and the target box before user-set transforms were applied.\n * This will allow us to calculate the corrected borderRadius and boxShadow to compensate\n * for our layout reprojection, but still allow them to be scaled correctly by the user.\n * It might be that to simplify this we may want to accept that user-set scale is also corrected\n * and we wouldn't have to keep and calc both deltas, OR we could support a user setting\n * to allow people to choose whether these styles are corrected based on just the\n * layout reprojection or the final bounding box.\n */\n calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);\n this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale);\n if (this.projectionTransform !== prevProjectionTransform ||\n this.treeScale.x !== prevTreeScaleX ||\n this.treeScale.y !== prevTreeScaleY) {\n this.hasProjected = true;\n this.scheduleRender();\n this.notifyListeners(\"projectionUpdate\", target);\n }\n /**\n * Increase debug counter for recalculated projections\n */\n projectionFrameData.recalculatedProjection++;\n }\n hide() {\n this.isVisible = false;\n // TODO: Schedule render\n }\n show() {\n this.isVisible = true;\n // TODO: Schedule render\n }\n scheduleRender(notifyAll = true) {\n this.options.scheduleRender && this.options.scheduleRender();\n if (notifyAll) {\n const stack = this.getStack();\n stack && stack.scheduleRender();\n }\n if (this.resumingFrom && !this.resumingFrom.instance) {\n this.resumingFrom = undefined;\n }\n }\n setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {\n const snapshot = this.snapshot;\n const snapshotLatestValues = snapshot\n ? snapshot.latestValues\n : {};\n const mixedValues = { ...this.latestValues };\n const targetDelta = createDelta();\n if (!this.relativeParent ||\n !this.relativeParent.options.layoutRoot) {\n this.relativeTarget = this.relativeTargetOrigin = undefined;\n }\n this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;\n const relativeLayout = createBox();\n const snapshotSource = snapshot ? snapshot.source : undefined;\n const layoutSource = this.layout ? this.layout.source : undefined;\n const isSharedLayoutAnimation = snapshotSource !== layoutSource;\n const stack = this.getStack();\n const isOnlyMember = !stack || stack.members.length <= 1;\n const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&\n !isOnlyMember &&\n this.options.crossfade === true &&\n !this.path.some(hasOpacityCrossfade));\n this.animationProgress = 0;\n let prevRelativeTarget;\n this.mixTargetDelta = (latest) => {\n const progress = latest / 1000;\n mixAxisDelta(targetDelta.x, delta.x, progress);\n mixAxisDelta(targetDelta.y, delta.y, progress);\n this.setTargetDelta(targetDelta);\n if (this.relativeTarget &&\n this.relativeTargetOrigin &&\n this.layout &&\n this.relativeParent &&\n this.relativeParent.layout) {\n calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);\n mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);\n /**\n * If this is an unchanged relative target we can consider the\n * projection not dirty.\n */\n if (prevRelativeTarget &&\n boxEquals(this.relativeTarget, prevRelativeTarget)) {\n this.isProjectionDirty = false;\n }\n if (!prevRelativeTarget)\n prevRelativeTarget = createBox();\n copyBoxInto(prevRelativeTarget, this.relativeTarget);\n }\n if (isSharedLayoutAnimation) {\n this.animationValues = mixedValues;\n mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);\n }\n this.root.scheduleUpdateProjection();\n this.scheduleRender();\n this.animationProgress = progress;\n };\n this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);\n }\n startAnimation(options) {\n this.notifyListeners(\"animationStart\");\n this.currentAnimation && this.currentAnimation.stop();\n if (this.resumingFrom && this.resumingFrom.currentAnimation) {\n this.resumingFrom.currentAnimation.stop();\n }\n if (this.pendingAnimation) {\n cancelFrame(this.pendingAnimation);\n this.pendingAnimation = undefined;\n }\n /**\n * Start the animation in the next frame to have a frame with progress 0,\n * where the target is the same as when the animation started, so we can\n * calculate the relative positions correctly for instant transitions.\n */\n this.pendingAnimation = frame.update(() => {\n globalProjectionState.hasAnimatedSinceResize = true;\n this.currentAnimation = animateSingleValue(0, animationTarget, {\n ...options,\n onUpdate: (latest) => {\n this.mixTargetDelta(latest);\n options.onUpdate && options.onUpdate(latest);\n },\n onComplete: () => {\n options.onComplete && options.onComplete();\n this.completeAnimation();\n },\n });\n if (this.resumingFrom) {\n this.resumingFrom.currentAnimation = this.currentAnimation;\n }\n this.pendingAnimation = undefined;\n });\n }\n completeAnimation() {\n if (this.resumingFrom) {\n this.resumingFrom.currentAnimation = undefined;\n this.resumingFrom.preserveOpacity = undefined;\n }\n const stack = this.getStack();\n stack && stack.exitAnimationComplete();\n this.resumingFrom =\n this.currentAnimation =\n this.animationValues =\n undefined;\n this.notifyListeners(\"animationComplete\");\n }\n finishAnimation() {\n if (this.currentAnimation) {\n this.mixTargetDelta && this.mixTargetDelta(animationTarget);\n this.currentAnimation.stop();\n }\n this.completeAnimation();\n }\n applyTransformsToTarget() {\n const lead = this.getLead();\n let { targetWithTransforms, target, layout, latestValues } = lead;\n if (!targetWithTransforms || !target || !layout)\n return;\n /**\n * If we're only animating position, and this element isn't the lead element,\n * then instead of projecting into the lead box we instead want to calculate\n * a new target that aligns the two boxes but maintains the layout shape.\n */\n if (this !== lead &&\n this.layout &&\n layout &&\n shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {\n target = this.target || createBox();\n const xLength = calcLength(this.layout.layoutBox.x);\n target.x.min = lead.target.x.min;\n target.x.max = target.x.min + xLength;\n const yLength = calcLength(this.layout.layoutBox.y);\n target.y.min = lead.target.y.min;\n target.y.max = target.y.min + yLength;\n }\n copyBoxInto(targetWithTransforms, target);\n /**\n * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.\n * This is the final box that we will then project into by calculating a transform delta and\n * applying it to the corrected box.\n */\n transformBox(targetWithTransforms, latestValues);\n /**\n * Update the delta between the corrected box and the final target box, after\n * user-set transforms are applied to it. This will be used by the renderer to\n * create a transform style that will reproject the element from its layout layout\n * into the desired bounding box.\n */\n calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);\n }\n registerSharedNode(layoutId, node) {\n if (!this.sharedNodes.has(layoutId)) {\n this.sharedNodes.set(layoutId, new NodeStack());\n }\n const stack = this.sharedNodes.get(layoutId);\n stack.add(node);\n const config = node.options.initialPromotionConfig;\n node.promote({\n transition: config ? config.transition : undefined,\n preserveFollowOpacity: config && config.shouldPreserveFollowOpacity\n ? config.shouldPreserveFollowOpacity(node)\n : undefined,\n });\n }\n isLead() {\n const stack = this.getStack();\n return stack ? stack.lead === this : true;\n }\n getLead() {\n var _a;\n const { layoutId } = this.options;\n return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;\n }\n getPrevLead() {\n var _a;\n const { layoutId } = this.options;\n return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;\n }\n getStack() {\n const { layoutId } = this.options;\n if (layoutId)\n return this.root.sharedNodes.get(layoutId);\n }\n promote({ needsReset, transition, preserveFollowOpacity, } = {}) {\n const stack = this.getStack();\n if (stack)\n stack.promote(this, preserveFollowOpacity);\n if (needsReset) {\n this.projectionDelta = undefined;\n this.needsReset = true;\n }\n if (transition)\n this.setOptions({ transition });\n }\n relegate() {\n const stack = this.getStack();\n if (stack) {\n return stack.relegate(this);\n }\n else {\n return false;\n }\n }\n resetRotation() {\n const { visualElement } = this.options;\n if (!visualElement)\n return;\n // If there's no detected rotation values, we can early return without a forced render.\n let hasRotate = false;\n /**\n * An unrolled check for rotation values. Most elements don't have any rotation and\n * skipping the nested loop and new object creation is 50% faster.\n */\n const { latestValues } = visualElement;\n if (latestValues.rotate ||\n latestValues.rotateX ||\n latestValues.rotateY ||\n latestValues.rotateZ) {\n hasRotate = true;\n }\n // If there's no rotation values, we don't need to do any more.\n if (!hasRotate)\n return;\n const resetValues = {};\n // Check the rotate value of all axes and reset to 0\n for (let i = 0; i < transformAxes.length; i++) {\n const key = \"rotate\" + transformAxes[i];\n // Record the rotation and then temporarily set it to 0\n if (latestValues[key]) {\n resetValues[key] = latestValues[key];\n visualElement.setStaticValue(key, 0);\n }\n }\n // Force a render of this element to apply the transform with all rotations\n // set to 0.\n visualElement.render();\n // Put back all the values we reset\n for (const key in resetValues) {\n visualElement.setStaticValue(key, resetValues[key]);\n }\n // Schedule a render for the next frame. This ensures we won't visually\n // see the element with the reset rotate value applied.\n visualElement.scheduleRender();\n }\n getProjectionStyles(styleProp = {}) {\n var _a, _b;\n // TODO: Return lifecycle-persistent object\n const styles = {};\n if (!this.instance || this.isSVG)\n return styles;\n if (!this.isVisible) {\n return { visibility: \"hidden\" };\n }\n else {\n styles.visibility = \"\";\n }\n const transformTemplate = this.getTransformTemplate();\n if (this.needsReset) {\n this.needsReset = false;\n styles.opacity = \"\";\n styles.pointerEvents =\n resolveMotionValue(styleProp.pointerEvents) || \"\";\n styles.transform = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : \"none\";\n return styles;\n }\n const lead = this.getLead();\n if (!this.projectionDelta || !this.layout || !lead.target) {\n const emptyStyles = {};\n if (this.options.layoutId) {\n emptyStyles.opacity =\n this.latestValues.opacity !== undefined\n ? this.latestValues.opacity\n : 1;\n emptyStyles.pointerEvents =\n resolveMotionValue(styleProp.pointerEvents) || \"\";\n }\n if (this.hasProjected && !hasTransform(this.latestValues)) {\n emptyStyles.transform = transformTemplate\n ? transformTemplate({}, \"\")\n : \"none\";\n this.hasProjected = false;\n }\n return emptyStyles;\n }\n const valuesToRender = lead.animationValues || lead.latestValues;\n this.applyTransformsToTarget();\n styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);\n if (transformTemplate) {\n styles.transform = transformTemplate(valuesToRender, styles.transform);\n }\n const { x, y } = this.projectionDelta;\n styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;\n if (lead.animationValues) {\n /**\n * If the lead component is animating, assign this either the entering/leaving\n * opacity\n */\n styles.opacity =\n lead === this\n ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1\n : this.preserveOpacity\n ? this.latestValues.opacity\n : valuesToRender.opacityExit;\n }\n else {\n /**\n * Or we're not animating at all, set the lead component to its layout\n * opacity and other components to hidden.\n */\n styles.opacity =\n lead === this\n ? valuesToRender.opacity !== undefined\n ? valuesToRender.opacity\n : \"\"\n : valuesToRender.opacityExit !== undefined\n ? valuesToRender.opacityExit\n : 0;\n }\n /**\n * Apply scale correction\n */\n for (const key in scaleCorrectors) {\n if (valuesToRender[key] === undefined)\n continue;\n const { correct, applyTo } = scaleCorrectors[key];\n /**\n * Only apply scale correction to the value if we have an\n * active projection transform. Otherwise these values become\n * vulnerable to distortion if the element changes size without\n * a corresponding layout animation.\n */\n const corrected = styles.transform === \"none\"\n ? valuesToRender[key]\n : correct(valuesToRender[key], lead);\n if (applyTo) {\n const num = applyTo.length;\n for (let i = 0; i < num; i++) {\n styles[applyTo[i]] = corrected;\n }\n }\n else {\n styles[key] = corrected;\n }\n }\n /**\n * Disable pointer events on follow components. This is to ensure\n * that if a follow component covers a lead component it doesn't block\n * pointer events on the lead.\n */\n if (this.options.layoutId) {\n styles.pointerEvents =\n lead === this\n ? resolveMotionValue(styleProp.pointerEvents) || \"\"\n : \"none\";\n }\n return styles;\n }\n clearSnapshot() {\n this.resumeFrom = this.snapshot = undefined;\n }\n // Only run on root\n resetTree() {\n this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });\n this.root.nodes.forEach(clearMeasurements);\n this.root.sharedNodes.clear();\n }\n };\n}\nfunction updateLayout(node) {\n node.updateLayout();\n}\nfunction notifyLayoutUpdate(node) {\n var _a;\n const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;\n if (node.isLead() &&\n node.layout &&\n snapshot &&\n node.hasListeners(\"didUpdate\")) {\n const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;\n const { animationType } = node.options;\n const isShared = snapshot.source !== node.layout.source;\n // TODO Maybe we want to also resize the layout snapshot so we don't trigger\n // animations for instance if layout=\"size\" and an element has only changed position\n if (animationType === \"size\") {\n eachAxis((axis) => {\n const axisSnapshot = isShared\n ? snapshot.measuredBox[axis]\n : snapshot.layoutBox[axis];\n const length = calcLength(axisSnapshot);\n axisSnapshot.min = layout[axis].min;\n axisSnapshot.max = axisSnapshot.min + length;\n });\n }\n else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {\n eachAxis((axis) => {\n const axisSnapshot = isShared\n ? snapshot.measuredBox[axis]\n : snapshot.layoutBox[axis];\n const length = calcLength(layout[axis]);\n axisSnapshot.max = axisSnapshot.min + length;\n /**\n * Ensure relative target gets resized and rerendererd\n */\n if (node.relativeTarget && !node.currentAnimation) {\n node.isProjectionDirty = true;\n node.relativeTarget[axis].max =\n node.relativeTarget[axis].min + length;\n }\n });\n }\n const layoutDelta = createDelta();\n calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);\n const visualDelta = createDelta();\n if (isShared) {\n calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);\n }\n else {\n calcBoxDelta(visualDelta, layout, snapshot.layoutBox);\n }\n const hasLayoutChanged = !isDeltaZero(layoutDelta);\n let hasRelativeTargetChanged = false;\n if (!node.resumeFrom) {\n const relativeParent = node.getClosestProjectingParent();\n /**\n * If the relativeParent is itself resuming from a different element then\n * the relative snapshot is not relavent\n */\n if (relativeParent && !relativeParent.resumeFrom) {\n const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;\n if (parentSnapshot && parentLayout) {\n const relativeSnapshot = createBox();\n calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);\n const relativeLayout = createBox();\n calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);\n if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {\n hasRelativeTargetChanged = true;\n }\n if (relativeParent.options.layoutRoot) {\n node.relativeTarget = relativeLayout;\n node.relativeTargetOrigin = relativeSnapshot;\n node.relativeParent = relativeParent;\n }\n }\n }\n }\n node.notifyListeners(\"didUpdate\", {\n layout,\n snapshot,\n delta: visualDelta,\n layoutDelta,\n hasLayoutChanged,\n hasRelativeTargetChanged,\n });\n }\n else if (node.isLead()) {\n const { onExitComplete } = node.options;\n onExitComplete && onExitComplete();\n }\n /**\n * Clearing transition\n * TODO: Investigate why this transition is being passed in as {type: false } from Framer\n * and why we need it at all\n */\n node.options.transition = undefined;\n}\nfunction propagateDirtyNodes(node) {\n /**\n * Increase debug counter for nodes encountered this frame\n */\n projectionFrameData.totalNodes++;\n if (!node.parent)\n return;\n /**\n * If this node isn't projecting, propagate isProjectionDirty. It will have\n * no performance impact but it will allow the next child that *is* projecting\n * but *isn't* dirty to just check its parent to see if *any* ancestor needs\n * correcting.\n */\n if (!node.isProjecting()) {\n node.isProjectionDirty = node.parent.isProjectionDirty;\n }\n /**\n * Propagate isSharedProjectionDirty and isTransformDirty\n * throughout the whole tree. A future revision can take another look at\n * this but for safety we still recalcualte shared nodes.\n */\n node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||\n node.parent.isProjectionDirty ||\n node.parent.isSharedProjectionDirty));\n node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);\n}\nfunction cleanDirtyNodes(node) {\n node.isProjectionDirty =\n node.isSharedProjectionDirty =\n node.isTransformDirty =\n false;\n}\nfunction clearSnapshot(node) {\n node.clearSnapshot();\n}\nfunction clearMeasurements(node) {\n node.clearMeasurements();\n}\nfunction clearIsLayoutDirty(node) {\n node.isLayoutDirty = false;\n}\nfunction resetTransformStyle(node) {\n const { visualElement } = node.options;\n if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {\n visualElement.notify(\"BeforeLayoutMeasure\");\n }\n node.resetTransform();\n}\nfunction finishAnimation(node) {\n node.finishAnimation();\n node.targetDelta = node.relativeTarget = node.target = undefined;\n node.isProjectionDirty = true;\n}\nfunction resolveTargetDelta(node) {\n node.resolveTargetDelta();\n}\nfunction calcProjection(node) {\n node.calcProjection();\n}\nfunction resetRotation(node) {\n node.resetRotation();\n}\nfunction removeLeadSnapshots(stack) {\n stack.removeLeadSnapshot();\n}\nfunction mixAxisDelta(output, delta, p) {\n output.translate = mix(delta.translate, 0, p);\n output.scale = mix(delta.scale, 1, p);\n output.origin = delta.origin;\n output.originPoint = delta.originPoint;\n}\nfunction mixAxis(output, from, to, p) {\n output.min = mix(from.min, to.min, p);\n output.max = mix(from.max, to.max, p);\n}\nfunction mixBox(output, from, to, p) {\n mixAxis(output.x, from.x, to.x, p);\n mixAxis(output.y, from.y, to.y, p);\n}\nfunction hasOpacityCrossfade(node) {\n return (node.animationValues && node.animationValues.opacityExit !== undefined);\n}\nconst defaultLayoutTransition = {\n duration: 0.45,\n ease: [0.4, 0, 0.1, 1],\n};\nconst userAgentContains = (string) => typeof navigator !== \"undefined\" &&\n navigator.userAgent.toLowerCase().includes(string);\n/**\n * Measured bounding boxes must be rounded in Safari and\n * left untouched in Chrome, otherwise non-integer layouts within scaled-up elements\n * can appear to jump.\n */\nconst roundPoint = userAgentContains(\"applewebkit/\") && !userAgentContains(\"chrome/\")\n ? Math.round\n : noop;\nfunction roundAxis(axis) {\n // Round to the nearest .5 pixels to support subpixel layouts\n axis.min = roundPoint(axis.min);\n axis.max = roundPoint(axis.max);\n}\nfunction roundBox(box) {\n roundAxis(box.x);\n roundAxis(box.y);\n}\nfunction shouldAnimatePositionOnly(animationType, snapshot, layout) {\n return (animationType === \"position\" ||\n (animationType === \"preserve-aspect\" &&\n !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));\n}\n\nexport { cleanDirtyNodes, createProjectionNode, mixAxis, mixAxisDelta, mixBox, propagateDirtyNodes };\n","function record(data) {\n if (window.MotionDebug) {\n window.MotionDebug.record(data);\n }\n}\n\nexport { record };\n","function isSVGElement(element) {\n return element instanceof SVGElement && element.tagName !== \"svg\";\n}\n\nexport { isSVGElement };\n","import { frame, cancelFrame } from '../frameloop/frame.mjs';\n\n/**\n * Timeout defined in ms\n */\nfunction delay(callback, timeout) {\n const start = performance.now();\n const checkElapsed = ({ timestamp }) => {\n const elapsed = timestamp - start;\n if (elapsed >= timeout) {\n cancelFrame(checkElapsed);\n callback(elapsed - timeout);\n }\n };\n frame.read(checkElapsed, true);\n return () => cancelFrame(checkElapsed);\n}\n\nexport { delay };\n","import { animateMotionValue } from './motion-value.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction animateSingleValue(value, keyframes, options) {\n const motionValue$1 = isMotionValue(value) ? value : motionValue(value);\n motionValue$1.start(animateMotionValue(\"\", motionValue$1, keyframes, options));\n return motionValue$1.animation;\n}\n\nexport { animateSingleValue };\n","import { createProjectionNode } from './create-projection-node.mjs';\nimport { addDomEvent } from '../../events/add-dom-event.mjs';\n\nconst DocumentProjectionNode = createProjectionNode({\n attachResizeListener: (ref, notify) => addDomEvent(ref, \"resize\", notify),\n measureScroll: () => ({\n x: document.documentElement.scrollLeft || document.body.scrollLeft,\n y: document.documentElement.scrollTop || document.body.scrollTop,\n }),\n checkIsScrollRoot: () => true,\n});\n\nexport { DocumentProjectionNode };\n","import { createProjectionNode } from './create-projection-node.mjs';\nimport { DocumentProjectionNode } from './DocumentProjectionNode.mjs';\n\nconst rootProjectionNode = {\n current: undefined,\n};\nconst HTMLProjectionNode = createProjectionNode({\n measureScroll: (instance) => ({\n x: instance.scrollLeft,\n y: instance.scrollTop,\n }),\n defaultParent: () => {\n if (!rootProjectionNode.current) {\n const documentNode = new DocumentProjectionNode({});\n documentNode.mount(window);\n documentNode.setOptions({ layoutScroll: true });\n rootProjectionNode.current = documentNode;\n }\n return rootProjectionNode.current;\n },\n resetTransform: (instance, value) => {\n instance.style.transform = value !== undefined ? value : \"none\";\n },\n checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === \"fixed\"),\n});\n\nexport { HTMLProjectionNode, rootProjectionNode };\n","import { DragGesture } from '../../gestures/drag/index.mjs';\nimport { PanGesture } from '../../gestures/pan/index.mjs';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\nimport { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';\n\nconst drag = {\n pan: {\n Feature: PanGesture,\n },\n drag: {\n Feature: DragGesture,\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n};\n\nexport { drag };\n","import { invariant } from '../../../utils/errors.mjs';\nimport { isNumericalString } from '../../../utils/is-numerical-string.mjs';\nimport { isCSSVariableToken } from './is-css-variable.mjs';\n\n/**\n * Parse Framer's special CSS variable format into a CSS token and a fallback.\n *\n * ```\n * `var(--foo, #fff)` => [`--foo`, '#fff']\n * ```\n *\n * @param current\n */\nconst splitCSSVariableRegex = /var\\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\\)/;\nfunction parseCSSVariable(current) {\n const match = splitCSSVariableRegex.exec(current);\n if (!match)\n return [,];\n const [, token, fallback] = match;\n return [token, fallback];\n}\nconst maxDepth = 4;\nfunction getVariableValue(current, element, depth = 1) {\n invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property \"${current}\". This may indicate a circular fallback dependency.`);\n const [token, fallback] = parseCSSVariable(current);\n // No CSS variable detected\n if (!token)\n return;\n // Attempt to read this CSS variable off the element\n const resolved = window.getComputedStyle(element).getPropertyValue(token);\n if (resolved) {\n const trimmed = resolved.trim();\n return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;\n }\n else if (isCSSVariableToken(fallback)) {\n // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.\n return getVariableValue(fallback, element, depth + 1);\n }\n else {\n return fallback;\n }\n}\n/**\n * Resolve CSS variables from\n *\n * @internal\n */\nfunction resolveCSSVariables(visualElement, { ...target }, transitionEnd) {\n const element = visualElement.current;\n if (!(element instanceof Element))\n return { target, transitionEnd };\n // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`\n // only if they change but I think this reads clearer and this isn't a performance-critical path.\n if (transitionEnd) {\n transitionEnd = { ...transitionEnd };\n }\n // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved\n visualElement.values.forEach((value) => {\n const current = value.get();\n if (!isCSSVariableToken(current))\n return;\n const resolved = getVariableValue(current, element);\n if (resolved)\n value.set(resolved);\n });\n // Cycle through every target property and resolve CSS variables. Currently\n // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`\n for (const key in target) {\n const current = target[key];\n if (!isCSSVariableToken(current))\n continue;\n const resolved = getVariableValue(current, element);\n if (!resolved)\n continue;\n // Clone target if it hasn't already been\n target[key] = resolved;\n if (!transitionEnd)\n transitionEnd = {};\n // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved\n // CSS variable. This will ensure that after the animation the component will reflect\n // changes in the value of the CSS variable.\n if (transitionEnd[key] === undefined) {\n transitionEnd[key] = current;\n }\n }\n return { target, transitionEnd };\n}\n\nexport { parseCSSVariable, resolveCSSVariables };\n","export default function _objectDestructuringEmpty(obj) {\n if (obj == null) throw new TypeError(\"Cannot destructure \" + obj);\n}","import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.mjs';\nimport { invariant } from '../../../utils/errors.mjs';\nimport { transformPropOrder } from '../../html/utils/transform.mjs';\nimport { findDimensionValueType } from '../value-types/dimensions.mjs';\nimport { isBrowser } from '../../../utils/is-browser.mjs';\nimport { number } from '../../../value/types/numbers/index.mjs';\nimport { px } from '../../../value/types/numbers/units.mjs';\n\nconst positionalKeys = new Set([\n \"width\",\n \"height\",\n \"top\",\n \"left\",\n \"right\",\n \"bottom\",\n \"x\",\n \"y\",\n \"translateX\",\n \"translateY\",\n]);\nconst isPositionalKey = (key) => positionalKeys.has(key);\nconst hasPositionalKey = (target) => {\n return Object.keys(target).some(isPositionalKey);\n};\nconst isNumOrPxType = (v) => v === number || v === px;\nconst getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(\", \")[pos]);\nconst getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {\n if (transform === \"none\" || !transform)\n return 0;\n const matrix3d = transform.match(/^matrix3d\\((.+)\\)$/);\n if (matrix3d) {\n return getPosFromMatrix(matrix3d[1], pos3);\n }\n else {\n const matrix = transform.match(/^matrix\\((.+)\\)$/);\n if (matrix) {\n return getPosFromMatrix(matrix[1], pos2);\n }\n else {\n return 0;\n }\n }\n};\nconst transformKeys = new Set([\"x\", \"y\", \"z\"]);\nconst nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));\nfunction removeNonTranslationalTransform(visualElement) {\n const removedTransforms = [];\n nonTranslationalTransformKeys.forEach((key) => {\n const value = visualElement.getValue(key);\n if (value !== undefined) {\n removedTransforms.push([key, value.get()]);\n value.set(key.startsWith(\"scale\") ? 1 : 0);\n }\n });\n // Apply changes to element before measurement\n if (removedTransforms.length)\n visualElement.render();\n return removedTransforms;\n}\nconst positionalValues = {\n // Dimensions\n width: ({ x }, { paddingLeft = \"0\", paddingRight = \"0\" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),\n height: ({ y }, { paddingTop = \"0\", paddingBottom = \"0\" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),\n top: (_bbox, { top }) => parseFloat(top),\n left: (_bbox, { left }) => parseFloat(left),\n bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),\n right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),\n // Transform\n x: getTranslateFromMatrix(4, 13),\n y: getTranslateFromMatrix(5, 14),\n};\n// Alias translate longform names\npositionalValues.translateX = positionalValues.x;\npositionalValues.translateY = positionalValues.y;\nconst convertChangedValueTypes = (target, visualElement, changedKeys) => {\n const originBbox = visualElement.measureViewportBox();\n const element = visualElement.current;\n const elementComputedStyle = getComputedStyle(element);\n const { display } = elementComputedStyle;\n const origin = {};\n // If the element is currently set to display: \"none\", make it visible before\n // measuring the target bounding box\n if (display === \"none\") {\n visualElement.setStaticValue(\"display\", target.display || \"block\");\n }\n /**\n * Record origins before we render and update styles\n */\n changedKeys.forEach((key) => {\n origin[key] = positionalValues[key](originBbox, elementComputedStyle);\n });\n // Apply the latest values (as set in checkAndConvertChangedValueTypes)\n visualElement.render();\n const targetBbox = visualElement.measureViewportBox();\n changedKeys.forEach((key) => {\n // Restore styles to their **calculated computed style**, not their actual\n // originally set style. This allows us to animate between equivalent pixel units.\n const value = visualElement.getValue(key);\n value && value.jump(origin[key]);\n target[key] = positionalValues[key](targetBbox, elementComputedStyle);\n });\n return target;\n};\nconst checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {\n target = { ...target };\n transitionEnd = { ...transitionEnd };\n const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);\n // We want to remove any transform values that could affect the element's bounding box before\n // it's measured. We'll reapply these later.\n let removedTransformValues = [];\n let hasAttemptedToRemoveTransformValues = false;\n const changedValueTypeKeys = [];\n targetPositionalKeys.forEach((key) => {\n const value = visualElement.getValue(key);\n if (!visualElement.hasValue(key))\n return;\n let from = origin[key];\n let fromType = findDimensionValueType(from);\n const to = target[key];\n let toType;\n // TODO: The current implementation of this basically throws an error\n // if you try and do value conversion via keyframes. There's probably\n // a way of doing this but the performance implications would need greater scrutiny,\n // as it'd be doing multiple resize-remeasure operations.\n if (isKeyframesTarget(to)) {\n const numKeyframes = to.length;\n const fromIndex = to[0] === null ? 1 : 0;\n from = to[fromIndex];\n fromType = findDimensionValueType(from);\n for (let i = fromIndex; i < numKeyframes; i++) {\n /**\n * Don't allow wildcard keyframes to be used to detect\n * a difference in value types.\n */\n if (to[i] === null)\n break;\n if (!toType) {\n toType = findDimensionValueType(to[i]);\n invariant(toType === fromType ||\n (isNumOrPxType(fromType) && isNumOrPxType(toType)), \"Keyframes must be of the same dimension as the current value\");\n }\n else {\n invariant(findDimensionValueType(to[i]) === toType, \"All keyframes must be of the same type\");\n }\n }\n }\n else {\n toType = findDimensionValueType(to);\n }\n if (fromType !== toType) {\n // If they're both just number or px, convert them both to numbers rather than\n // relying on resize/remeasure to convert (which is wasteful in this situation)\n if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {\n const current = value.get();\n if (typeof current === \"string\") {\n value.set(parseFloat(current));\n }\n if (typeof to === \"string\") {\n target[key] = parseFloat(to);\n }\n else if (Array.isArray(to) && toType === px) {\n target[key] = to.map(parseFloat);\n }\n }\n else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&\n (toType === null || toType === void 0 ? void 0 : toType.transform) &&\n (from === 0 || to === 0)) {\n // If one or the other value is 0, it's safe to coerce it to the\n // type of the other without measurement\n if (from === 0) {\n value.set(toType.transform(from));\n }\n else {\n target[key] = fromType.transform(to);\n }\n }\n else {\n // If we're going to do value conversion via DOM measurements, we first\n // need to remove non-positional transform values that could affect the bbox measurements.\n if (!hasAttemptedToRemoveTransformValues) {\n removedTransformValues =\n removeNonTranslationalTransform(visualElement);\n hasAttemptedToRemoveTransformValues = true;\n }\n changedValueTypeKeys.push(key);\n transitionEnd[key] =\n transitionEnd[key] !== undefined\n ? transitionEnd[key]\n : target[key];\n value.jump(to);\n }\n }\n });\n if (changedValueTypeKeys.length) {\n const scrollY = changedValueTypeKeys.indexOf(\"height\") >= 0\n ? window.pageYOffset\n : null;\n const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);\n // If we removed transform values, reapply them before the next render\n if (removedTransformValues.length) {\n removedTransformValues.forEach(([key, value]) => {\n visualElement.getValue(key).set(value);\n });\n }\n // Reapply original values\n visualElement.render();\n // Restore scroll position\n if (isBrowser && scrollY !== null) {\n window.scrollTo({ top: scrollY });\n }\n return { target: convertedTarget, transitionEnd };\n }\n else {\n return { target, transitionEnd };\n }\n};\n/**\n * Convert value types for x/y/width/height/top/left/bottom/right\n *\n * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'`\n *\n * @internal\n */\nfunction unitConversion(visualElement, target, origin, transitionEnd) {\n return hasPositionalKey(target)\n ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)\n : { target, transitionEnd };\n}\n\nexport { positionalValues, unitConversion };\n","import { resolveCSSVariables } from './css-variables-conversion.mjs';\nimport { unitConversion } from './unit-conversion.mjs';\n\n/**\n * Parse a DOM variant to make it animatable. This involves resolving CSS variables\n * and ensuring animations like \"20%\" => \"calc(50vw)\" are performed in pixels.\n */\nconst parseDomVariant = (visualElement, target, origin, transitionEnd) => {\n const resolved = resolveCSSVariables(visualElement, target, transitionEnd);\n target = resolved.target;\n transitionEnd = resolved.transitionEnd;\n return unitConversion(visualElement, target, origin, transitionEnd);\n};\n\nexport { parseDomVariant };\n","// Does this device prefer reduced motion? Returns `null` server-side.\nconst prefersReducedMotion = { current: null };\nconst hasReducedMotionListener = { current: false };\n\nexport { hasReducedMotionListener, prefersReducedMotion };\n","const visualElementStore = new WeakMap();\n\nexport { visualElementStore };\n","import { warning, invariant } from '../utils/errors.mjs';\nimport { createBox } from '../projection/geometry/models.mjs';\nimport { isRefObject } from '../utils/is-ref-object.mjs';\nimport { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';\nimport { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';\nimport { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { motionValue } from '../value/index.mjs';\nimport { isWillChangeMotionValue } from '../value/use-will-change/is.mjs';\nimport { isMotionValue } from '../value/utils/is-motion-value.mjs';\nimport { transformProps } from './html/utils/transform.mjs';\nimport { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';\nimport { isVariantLabel } from './utils/is-variant-label.mjs';\nimport { updateMotionValuesFromProps } from './utils/motion-values.mjs';\nimport { resolveVariantFromProps } from './utils/resolve-variants.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\nimport { featureDefinitions } from '../motion/features/definitions.mjs';\nimport { variantProps } from './utils/variant-props.mjs';\nimport { visualElementStore } from './store.mjs';\nimport { frame, cancelFrame } from '../frameloop/frame.mjs';\n\nconst featureNames = Object.keys(featureDefinitions);\nconst numFeatures = featureNames.length;\nconst propEventHandlers = [\n \"AnimationStart\",\n \"AnimationComplete\",\n \"Update\",\n \"BeforeLayoutMeasure\",\n \"LayoutMeasure\",\n \"LayoutAnimationStart\",\n \"LayoutAnimationComplete\",\n];\nconst numVariantProps = variantProps.length;\n/**\n * A VisualElement is an imperative abstraction around UI elements such as\n * HTMLElement, SVGElement, Three.Object3D etc.\n */\nclass VisualElement {\n constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) {\n /**\n * A reference to the current underlying Instance, e.g. a HTMLElement\n * or Three.Mesh etc.\n */\n this.current = null;\n /**\n * A set containing references to this VisualElement's children.\n */\n this.children = new Set();\n /**\n * Determine what role this visual element should take in the variant tree.\n */\n this.isVariantNode = false;\n this.isControllingVariants = false;\n /**\n * Decides whether this VisualElement should animate in reduced motion\n * mode.\n *\n * TODO: This is currently set on every individual VisualElement but feels\n * like it could be set globally.\n */\n this.shouldReduceMotion = null;\n /**\n * A map of all motion values attached to this visual element. Motion\n * values are source of truth for any given animated value. A motion\n * value might be provided externally by the component via props.\n */\n this.values = new Map();\n /**\n * Cleanup functions for active features (hover/tap/exit etc)\n */\n this.features = {};\n /**\n * A map of every subscription that binds the provided or generated\n * motion values onChange listeners to this visual element.\n */\n this.valueSubscriptions = new Map();\n /**\n * A reference to the previously-provided motion values as returned\n * from scrapeMotionValuesFromProps. We use the keys in here to determine\n * if any motion values need to be removed after props are updated.\n */\n this.prevMotionValues = {};\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n /**\n * An object containing an unsubscribe function for each prop event subscription.\n * For example, every \"Update\" event can have multiple subscribers via\n * VisualElement.on(), but only one of those can be defined via the onUpdate prop.\n */\n this.propEventSubscriptions = {};\n this.notifyUpdate = () => this.notify(\"Update\", this.latestValues);\n this.render = () => {\n if (!this.current)\n return;\n this.triggerBuild();\n this.renderInstance(this.current, this.renderState, this.props.style, this.projection);\n };\n this.scheduleRender = () => frame.render(this.render, false, true);\n const { latestValues, renderState } = visualState;\n this.latestValues = latestValues;\n this.baseTarget = { ...latestValues };\n this.initialValues = props.initial ? { ...latestValues } : {};\n this.renderState = renderState;\n this.parent = parent;\n this.props = props;\n this.presenceContext = presenceContext;\n this.depth = parent ? parent.depth + 1 : 0;\n this.reducedMotionConfig = reducedMotionConfig;\n this.options = options;\n this.isControllingVariants = isControllingVariants(props);\n this.isVariantNode = isVariantNode(props);\n if (this.isVariantNode) {\n this.variantChildren = new Set();\n }\n this.manuallyAnimateOnMount = Boolean(parent && parent.current);\n /**\n * Any motion values that are provided to the element when created\n * aren't yet bound to the element, as this would technically be impure.\n * However, we iterate through the motion values and set them to the\n * initial values for this component.\n *\n * TODO: This is impure and we should look at changing this to run on mount.\n * Doing so will break some tests but this isn't neccessarily a breaking change,\n * more a reflection of the test.\n */\n const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {});\n for (const key in initialMotionValues) {\n const value = initialMotionValues[key];\n if (latestValues[key] !== undefined && isMotionValue(value)) {\n value.set(latestValues[key], false);\n if (isWillChangeMotionValue(willChange)) {\n willChange.add(key);\n }\n }\n }\n }\n /**\n * This method takes React props and returns found MotionValues. For example, HTML\n * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.\n *\n * This isn't an abstract method as it needs calling in the constructor, but it is\n * intended to be one.\n */\n scrapeMotionValuesFromProps(_props, _prevProps) {\n return {};\n }\n mount(instance) {\n this.current = instance;\n visualElementStore.set(instance, this);\n if (this.projection && !this.projection.instance) {\n this.projection.mount(instance);\n }\n if (this.parent && this.isVariantNode && !this.isControllingVariants) {\n this.removeFromVariantTree = this.parent.addVariantChild(this);\n }\n this.values.forEach((value, key) => this.bindToMotionValue(key, value));\n if (!hasReducedMotionListener.current) {\n initPrefersReducedMotion();\n }\n this.shouldReduceMotion =\n this.reducedMotionConfig === \"never\"\n ? false\n : this.reducedMotionConfig === \"always\"\n ? true\n : prefersReducedMotion.current;\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(this.shouldReduceMotion !== true, \"You have Reduced Motion enabled on your device. Animations may not appear as expected.\");\n }\n if (this.parent)\n this.parent.children.add(this);\n this.update(this.props, this.presenceContext);\n }\n unmount() {\n visualElementStore.delete(this.current);\n this.projection && this.projection.unmount();\n cancelFrame(this.notifyUpdate);\n cancelFrame(this.render);\n this.valueSubscriptions.forEach((remove) => remove());\n this.removeFromVariantTree && this.removeFromVariantTree();\n this.parent && this.parent.children.delete(this);\n for (const key in this.events) {\n this.events[key].clear();\n }\n for (const key in this.features) {\n this.features[key].unmount();\n }\n this.current = null;\n }\n bindToMotionValue(key, value) {\n const valueIsTransform = transformProps.has(key);\n const removeOnChange = value.on(\"change\", (latestValue) => {\n this.latestValues[key] = latestValue;\n this.props.onUpdate &&\n frame.update(this.notifyUpdate, false, true);\n if (valueIsTransform && this.projection) {\n this.projection.isTransformDirty = true;\n }\n });\n const removeOnRenderRequest = value.on(\"renderRequest\", this.scheduleRender);\n this.valueSubscriptions.set(key, () => {\n removeOnChange();\n removeOnRenderRequest();\n });\n }\n sortNodePosition(other) {\n /**\n * If these nodes aren't even of the same type we can't compare their depth.\n */\n if (!this.current ||\n !this.sortInstanceNodePosition ||\n this.type !== other.type) {\n return 0;\n }\n return this.sortInstanceNodePosition(this.current, other.current);\n }\n loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) {\n let ProjectionNodeConstructor;\n let MeasureLayout;\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 isStrict) {\n const strictMessage = \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\";\n renderedProps.ignoreStrict\n ? warning(false, strictMessage)\n : invariant(false, strictMessage);\n }\n for (let i = 0; i < numFeatures; i++) {\n const name = featureNames[i];\n const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name];\n if (ProjectionNode)\n ProjectionNodeConstructor = ProjectionNode;\n if (isEnabled(renderedProps)) {\n if (!this.features[name] && FeatureConstructor) {\n this.features[name] = new FeatureConstructor(this);\n }\n if (MeasureLayoutComponent) {\n MeasureLayout = MeasureLayoutComponent;\n }\n }\n }\n if (!this.projection && ProjectionNodeConstructor) {\n this.projection = new ProjectionNodeConstructor(this.latestValues, this.parent && this.parent.projection);\n const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;\n this.projection.setOptions({\n layoutId,\n layout,\n alwaysMeasureLayout: Boolean(drag) ||\n (dragConstraints && isRefObject(dragConstraints)),\n visualElement: this,\n scheduleRender: () => this.scheduleRender(),\n /**\n * TODO: Update options in an effect. This could be tricky as it'll be too late\n * to update by the time layout animations run.\n * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,\n * ensuring it gets called if there's no potential layout animations.\n *\n */\n animationType: typeof layout === \"string\" ? layout : \"both\",\n initialPromotionConfig: initialLayoutGroupConfig,\n layoutScroll,\n layoutRoot,\n });\n }\n return MeasureLayout;\n }\n updateFeatures() {\n for (const key in this.features) {\n const feature = this.features[key];\n if (feature.isMounted) {\n feature.update();\n }\n else {\n feature.mount();\n feature.isMounted = true;\n }\n }\n }\n triggerBuild() {\n this.build(this.renderState, this.latestValues, this.options, this.props);\n }\n /**\n * Measure the current viewport box with or without transforms.\n * Only measures axis-aligned boxes, rotate and skew must be manually\n * removed with a re-render to work.\n */\n measureViewportBox() {\n return this.current\n ? this.measureInstanceViewportBox(this.current, this.props)\n : createBox();\n }\n getStaticValue(key) {\n return this.latestValues[key];\n }\n setStaticValue(key, value) {\n this.latestValues[key] = value;\n }\n /**\n * Make a target animatable by Popmotion. For instance, if we're\n * trying to animate width from 100px to 100vw we need to measure 100vw\n * in pixels to determine what we really need to animate to. This is also\n * pluggable to support Framer's custom value types like Color,\n * and CSS variables.\n */\n makeTargetAnimatable(target, canMutate = true) {\n return this.makeTargetAnimatableFromInstance(target, this.props, canMutate);\n }\n /**\n * Update the provided props. Ensure any newly-added motion values are\n * added to our map, old ones removed, and listeners updated.\n */\n update(props, presenceContext) {\n if (props.transformTemplate || this.props.transformTemplate) {\n this.scheduleRender();\n }\n this.prevProps = this.props;\n this.props = props;\n this.prevPresenceContext = this.presenceContext;\n this.presenceContext = presenceContext;\n /**\n * Update prop event handlers ie onAnimationStart, onAnimationComplete\n */\n for (let i = 0; i < propEventHandlers.length; i++) {\n const key = propEventHandlers[i];\n if (this.propEventSubscriptions[key]) {\n this.propEventSubscriptions[key]();\n delete this.propEventSubscriptions[key];\n }\n const listener = props[\"on\" + key];\n if (listener) {\n this.propEventSubscriptions[key] = this.on(key, listener);\n }\n }\n this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues);\n if (this.handleChildMotionValue) {\n this.handleChildMotionValue();\n }\n }\n getProps() {\n return this.props;\n }\n /**\n * Returns the variant definition with a given name.\n */\n getVariant(name) {\n return this.props.variants ? this.props.variants[name] : undefined;\n }\n /**\n * Returns the defined default transition on this component.\n */\n getDefaultTransition() {\n return this.props.transition;\n }\n getTransformPagePoint() {\n return this.props.transformPagePoint;\n }\n getClosestVariantNode() {\n return this.isVariantNode\n ? this\n : this.parent\n ? this.parent.getClosestVariantNode()\n : undefined;\n }\n getVariantContext(startAtParent = false) {\n if (startAtParent) {\n return this.parent ? this.parent.getVariantContext() : undefined;\n }\n if (!this.isControllingVariants) {\n const context = this.parent\n ? this.parent.getVariantContext() || {}\n : {};\n if (this.props.initial !== undefined) {\n context.initial = this.props.initial;\n }\n return context;\n }\n const context = {};\n for (let i = 0; i < numVariantProps; i++) {\n const name = variantProps[i];\n const prop = this.props[name];\n if (isVariantLabel(prop) || prop === false) {\n context[name] = prop;\n }\n }\n return context;\n }\n /**\n * Add a child visual element to our set of children.\n */\n addVariantChild(child) {\n const closestVariantNode = this.getClosestVariantNode();\n if (closestVariantNode) {\n closestVariantNode.variantChildren &&\n closestVariantNode.variantChildren.add(child);\n return () => closestVariantNode.variantChildren.delete(child);\n }\n }\n /**\n * Add a motion value and bind it to this visual element.\n */\n addValue(key, value) {\n // Remove existing value if it exists\n if (value !== this.values.get(key)) {\n this.removeValue(key);\n this.bindToMotionValue(key, value);\n }\n this.values.set(key, value);\n this.latestValues[key] = value.get();\n }\n /**\n * Remove a motion value and unbind any active subscriptions.\n */\n removeValue(key) {\n this.values.delete(key);\n const unsubscribe = this.valueSubscriptions.get(key);\n if (unsubscribe) {\n unsubscribe();\n this.valueSubscriptions.delete(key);\n }\n delete this.latestValues[key];\n this.removeValueFromRenderState(key, this.renderState);\n }\n /**\n * Check whether we have a motion value for this key\n */\n hasValue(key) {\n return this.values.has(key);\n }\n getValue(key, defaultValue) {\n if (this.props.values && this.props.values[key]) {\n return this.props.values[key];\n }\n let value = this.values.get(key);\n if (value === undefined && defaultValue !== undefined) {\n value = motionValue(defaultValue, { owner: this });\n this.addValue(key, value);\n }\n return value;\n }\n /**\n * If we're trying to animate to a previously unencountered value,\n * we need to check for it in our state and as a last resort read it\n * directly from the instance (which might have performance implications).\n */\n readValue(key) {\n var _a;\n return this.latestValues[key] !== undefined || !this.current\n ? this.latestValues[key]\n : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);\n }\n /**\n * Set the base target to later animate back to. This is currently\n * only hydrated on creation and when we first read a value.\n */\n setBaseTarget(key, value) {\n this.baseTarget[key] = value;\n }\n /**\n * Find the base target for a value thats been removed from all animation\n * props.\n */\n getBaseTarget(key) {\n var _a;\n const { initial } = this.props;\n const valueFromInitial = typeof initial === \"string\" || typeof initial === \"object\"\n ? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key]\n : undefined;\n /**\n * If this value still exists in the current initial variant, read that.\n */\n if (initial && valueFromInitial !== undefined) {\n return valueFromInitial;\n }\n /**\n * Alternatively, if this VisualElement config has defined a getBaseTarget\n * so we can read the value from an alternative source, try that.\n */\n const target = this.getBaseTargetFromProps(this.props, key);\n if (target !== undefined && !isMotionValue(target))\n return target;\n /**\n * If the value was initially defined on initial, but it doesn't any more,\n * return undefined. Otherwise return the value as initially read from the DOM.\n */\n return this.initialValues[key] !== undefined &&\n valueFromInitial === undefined\n ? undefined\n : this.baseTarget[key];\n }\n on(eventName, callback) {\n if (!this.events[eventName]) {\n this.events[eventName] = new SubscriptionManager();\n }\n return this.events[eventName].add(callback);\n }\n notify(eventName, ...args) {\n if (this.events[eventName]) {\n this.events[eventName].notify(...args);\n }\n }\n}\n\nexport { VisualElement };\n","import { isBrowser } from '../is-browser.mjs';\nimport { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';\n\nfunction initPrefersReducedMotion() {\n hasReducedMotionListener.current = true;\n if (!isBrowser)\n return;\n if (window.matchMedia) {\n const motionMediaQuery = window.matchMedia(\"(prefers-reduced-motion)\");\n const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);\n motionMediaQuery.addListener(setReducedMotionPreferences);\n setReducedMotionPreferences();\n }\n else {\n prefersReducedMotion.current = false;\n }\n}\n\nexport { initPrefersReducedMotion };\n","import { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';\nimport { warnOnce } from '../../utils/warn-once.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction updateMotionValuesFromProps(element, next, prev) {\n const { willChange } = next;\n for (const key in next) {\n const nextValue = next[key];\n const prevValue = prev[key];\n if (isMotionValue(nextValue)) {\n /**\n * If this is a motion value found in props or style, we want to add it\n * to our visual element's motion value map.\n */\n element.addValue(key, nextValue);\n if (isWillChangeMotionValue(willChange)) {\n willChange.add(key);\n }\n /**\n * Check the version of the incoming motion value with this version\n * and warn against mismatches.\n */\n if (process.env.NODE_ENV === \"development\") {\n warnOnce(nextValue.version === \"10.16.4\", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.16.4 may not work as expected.`);\n }\n }\n else if (isMotionValue(prevValue)) {\n /**\n * If we're swapping from a motion value to a static value,\n * create a new motion value from that\n */\n element.addValue(key, motionValue(nextValue, { owner: element }));\n if (isWillChangeMotionValue(willChange)) {\n willChange.remove(key);\n }\n }\n else if (prevValue !== nextValue) {\n /**\n * If this is a flat value that has changed, update the motion value\n * or create one if it doesn't exist. We only want to do this if we're\n * not handling the value with our animation state.\n */\n if (element.hasValue(key)) {\n const existingValue = element.getValue(key);\n // TODO: Only update values that aren't being animated or even looked at\n !existingValue.hasAnimated && existingValue.set(nextValue);\n }\n else {\n const latestValue = element.getStaticValue(key);\n element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));\n }\n }\n }\n // Handle removed values\n for (const key in prev) {\n if (next[key] === undefined)\n element.removeValue(key);\n }\n return next;\n}\n\nexport { updateMotionValuesFromProps };\n","import { getOrigin, checkTargetForNewValues } from '../utils/setters.mjs';\nimport { parseDomVariant } from './utils/parse-dom-variant.mjs';\nimport { VisualElement } from '../VisualElement.mjs';\n\nclass DOMVisualElement extends VisualElement {\n sortInstanceNodePosition(a, b) {\n /**\n * compareDocumentPosition returns a bitmask, by using the bitwise &\n * we're returning true if 2 in that bitmask is set to true. 2 is set\n * to true if b preceeds a.\n */\n return a.compareDocumentPosition(b) & 2 ? 1 : -1;\n }\n getBaseTargetFromProps(props, key) {\n return props.style ? props.style[key] : undefined;\n }\n removeValueFromRenderState(key, { vars, style }) {\n delete vars[key];\n delete style[key];\n }\n makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) {\n let origin = getOrigin(target, transition || {}, this);\n /**\n * If Framer has provided a function to convert `Color` etc value types, convert them\n */\n if (transformValues) {\n if (transitionEnd)\n transitionEnd = transformValues(transitionEnd);\n if (target)\n target = transformValues(target);\n if (origin)\n origin = transformValues(origin);\n }\n if (isMounted) {\n checkTargetForNewValues(this, target, origin);\n const parsed = parseDomVariant(this, target, origin, transitionEnd);\n transitionEnd = parsed.transitionEnd;\n target = parsed.target;\n }\n return {\n transition,\n transitionEnd,\n ...target,\n };\n }\n}\n\nexport { DOMVisualElement };\n","import { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';\nimport { transformProps } from './utils/transform.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { renderHTML } from './utils/render.mjs';\nimport { getDefaultValueType } from '../dom/value-types/defaults.mjs';\nimport { measureViewportBox } from '../../projection/utils/measure.mjs';\nimport { DOMVisualElement } from '../dom/DOMVisualElement.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction getComputedStyle(element) {\n return window.getComputedStyle(element);\n}\nclass HTMLVisualElement extends DOMVisualElement {\n readValueFromInstance(instance, key) {\n if (transformProps.has(key)) {\n const defaultType = getDefaultValueType(key);\n return defaultType ? defaultType.default || 0 : 0;\n }\n else {\n const computedStyle = getComputedStyle(instance);\n const value = (isCSSVariableName(key)\n ? computedStyle.getPropertyValue(key)\n : computedStyle[key]) || 0;\n return typeof value === \"string\" ? value.trim() : value;\n }\n }\n measureInstanceViewportBox(instance, { transformPagePoint }) {\n return measureViewportBox(instance, transformPagePoint);\n }\n build(renderState, latestValues, options, props) {\n buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);\n }\n scrapeMotionValuesFromProps(props, prevProps) {\n return scrapeMotionValuesFromProps(props, prevProps);\n }\n handleChildMotionValue() {\n if (this.childSubscription) {\n this.childSubscription();\n delete this.childSubscription;\n }\n const { children } = this.props;\n if (isMotionValue(children)) {\n this.childSubscription = children.on(\"change\", (latest) => {\n if (this.current)\n this.current.textContent = `${latest}`;\n });\n }\n }\n renderInstance(instance, renderState, styleProp, projection) {\n renderHTML(instance, renderState, styleProp, projection);\n }\n}\n\nexport { HTMLVisualElement, getComputedStyle };\n","import superPropBase from \"./superPropBase.js\";\nexport default function _get() {\n if (typeof Reflect !== \"undefined\" && Reflect.get) {\n _get = Reflect.get.bind();\n } else {\n _get = function _get(target, property, receiver) {\n var base = superPropBase(target, property);\n if (!base) return;\n var desc = Object.getOwnPropertyDescriptor(base, property);\n if (desc.get) {\n return desc.get.call(arguments.length < 3 ? target : receiver);\n }\n return desc.value;\n };\n }\n return _get.apply(this, arguments);\n}","import getPrototypeOf from \"./getPrototypeOf.js\";\nexport default function _superPropBase(object, property) {\n while (!Object.prototype.hasOwnProperty.call(object, property)) {\n object = getPrototypeOf(object);\n if (object === null) break;\n }\n return object;\n}","import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { DOMVisualElement } from '../dom/DOMVisualElement.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { camelToDash } from '../dom/utils/camel-to-dash.mjs';\nimport { camelCaseAttributes } from './utils/camel-case-attrs.mjs';\nimport { transformProps } from '../html/utils/transform.mjs';\nimport { renderSVG } from './utils/render.mjs';\nimport { getDefaultValueType } from '../dom/value-types/defaults.mjs';\nimport { createBox } from '../../projection/geometry/models.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nclass SVGVisualElement extends DOMVisualElement {\n constructor() {\n super(...arguments);\n this.isSVGTag = false;\n }\n getBaseTargetFromProps(props, key) {\n return props[key];\n }\n readValueFromInstance(instance, key) {\n if (transformProps.has(key)) {\n const defaultType = getDefaultValueType(key);\n return defaultType ? defaultType.default || 0 : 0;\n }\n key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;\n return instance.getAttribute(key);\n }\n measureInstanceViewportBox() {\n return createBox();\n }\n scrapeMotionValuesFromProps(props, prevProps) {\n return scrapeMotionValuesFromProps(props, prevProps);\n }\n build(renderState, latestValues, options, props) {\n buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);\n }\n renderInstance(instance, renderState, styleProp, projection) {\n renderSVG(instance, renderState, styleProp, projection);\n }\n mount(instance) {\n this.isSVGTag = isSVGTag(instance.tagName);\n super.mount(instance);\n }\n}\n\nexport { SVGVisualElement };\n","import { HTMLVisualElement } from '../html/HTMLVisualElement.mjs';\nimport { SVGVisualElement } from '../svg/SVGVisualElement.mjs';\nimport { isSVGComponent } from './utils/is-svg-component.mjs';\n\nconst createDomVisualElement = (Component, options) => {\n return isSVGComponent(Component)\n ? new SVGVisualElement(options, { enableHardwareAcceleration: false })\n : new HTMLVisualElement(options, { enableHardwareAcceleration: true });\n};\n\nexport { createDomVisualElement };\n","import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\n\nconst layout = {\n layout: {\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n};\n\nexport { layout };\n","import { createMotionComponent } from '../../motion/index.mjs';\nimport { createMotionProxy } from './motion-proxy.mjs';\nimport { createDomMotionConfig } from './utils/create-config.mjs';\nimport { gestureAnimations } from '../../motion/features/gestures.mjs';\nimport { animations } from '../../motion/features/animations.mjs';\nimport { drag } from '../../motion/features/drag.mjs';\nimport { createDomVisualElement } from './create-visual-element.mjs';\nimport { layout } from '../../motion/features/layout.mjs';\n\nconst preloadedFeatures = {\n ...animations,\n ...gestureAnimations,\n ...drag,\n ...layout,\n};\n/**\n * HTML & SVG components, optimised for use with gestures and animation. These can be used as\n * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.\n *\n * @public\n */\nconst motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomMotionConfig(Component, config, preloadedFeatures, createDomVisualElement));\n/**\n * Create a DOM `motion` component with the provided string. This is primarily intended\n * as a full alternative to `motion` for consumers who have to support environments that don't\n * support `Proxy`.\n *\n * ```javascript\n * import { createDomMotionComponent } from \"framer-motion\"\n *\n * const motion = {\n * div: createDomMotionComponent('div')\n * }\n * ```\n *\n * @public\n */\nfunction createDomMotionComponent(key) {\n return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, preloadedFeatures, createDomVisualElement));\n}\n\nexport { createDomMotionComponent, motion };\n","import { isSVGComponent } from './is-svg-component.mjs';\nimport { createUseRender } from '../use-render.mjs';\nimport { svgMotionConfig } from '../../svg/config-motion.mjs';\nimport { htmlMotionConfig } from '../../html/config-motion.mjs';\n\nfunction createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement) {\n const baseConfig = isSVGComponent(Component)\n ? svgMotionConfig\n : htmlMotionConfig;\n return {\n ...baseConfig,\n preloadedFeatures,\n useRender: createUseRender(forwardMotionProps),\n createVisualElement,\n Component,\n };\n}\n\nexport { createDomMotionConfig };\n","import { cx, warn } from \"@chakra-ui/shared-utils\"\nimport {\n AnimatePresence,\n HTMLMotionProps,\n motion,\n Variants as _Variants,\n} from \"framer-motion\"\nimport { forwardRef, useEffect, useState } from \"react\"\nimport {\n TRANSITION_EASINGS,\n Variants,\n withDelay,\n WithTransitionConfig,\n} from \"./transition-utils\"\n\nconst isNumeric = (value?: string | number) =>\n value != null && parseInt(value.toString(), 10) > 0\n\nexport interface CollapseOptions {\n /**\n * If `true`, the opacity of the content will be animated\n * @default true\n */\n animateOpacity?: boolean\n /**\n * The height you want the content in its collapsed state.\n * @default 0\n */\n startingHeight?: number | string\n /**\n * The height you want the content in its expanded state.\n * @default \"auto\"\n */\n endingHeight?: number | string\n}\n\nconst defaultTransitions = {\n exit: {\n height: { duration: 0.2, ease: TRANSITION_EASINGS.ease },\n opacity: { duration: 0.3, ease: TRANSITION_EASINGS.ease },\n },\n enter: {\n height: { duration: 0.3, ease: TRANSITION_EASINGS.ease },\n opacity: { duration: 0.4, ease: TRANSITION_EASINGS.ease },\n },\n}\n\nconst variants: Variants = {\n exit: ({\n animateOpacity,\n startingHeight,\n transition,\n transitionEnd,\n delay,\n }) => ({\n ...(animateOpacity && { opacity: isNumeric(startingHeight) ? 1 : 0 }),\n height: startingHeight,\n transitionEnd: transitionEnd?.exit,\n transition:\n transition?.exit ?? withDelay.exit(defaultTransitions.exit, delay),\n }),\n enter: ({\n animateOpacity,\n endingHeight,\n transition,\n transitionEnd,\n delay,\n }) => ({\n ...(animateOpacity && { opacity: 1 }),\n height: endingHeight,\n transitionEnd: transitionEnd?.enter,\n transition:\n transition?.enter ?? withDelay.enter(defaultTransitions.enter, delay),\n }),\n}\n\nexport type ICollapse = CollapseProps\n\nexport interface CollapseProps\n extends WithTransitionConfig>,\n CollapseOptions {}\n\nexport const Collapse = forwardRef(\n (props, ref) => {\n const {\n in: isOpen,\n unmountOnExit,\n animateOpacity = true,\n startingHeight = 0,\n endingHeight = \"auto\",\n style,\n className,\n transition,\n transitionEnd,\n ...rest\n } = props\n\n const [mounted, setMounted] = useState(false)\n useEffect(() => {\n const timeout = setTimeout(() => {\n setMounted(true)\n })\n return () => clearTimeout(timeout)\n }, [])\n\n /**\n * Warn 🚨: `startingHeight` and `unmountOnExit` are mutually exclusive\n *\n * If you specify a starting height, the collapsed needs to be mounted\n * for the height to take effect.\n */\n warn({\n condition: Number(startingHeight) > 0 && !!unmountOnExit,\n message: `startingHeight and unmountOnExit are mutually exclusive. You can't use them together`,\n })\n\n const hasStartingHeight = parseFloat(startingHeight.toString()) > 0\n\n const custom = {\n startingHeight,\n endingHeight,\n animateOpacity,\n transition: !mounted ? { enter: { duration: 0 } } : transition,\n transitionEnd: {\n enter: transitionEnd?.enter,\n exit: unmountOnExit\n ? transitionEnd?.exit\n : {\n ...transitionEnd?.exit,\n display: hasStartingHeight ? \"block\" : \"none\",\n },\n },\n }\n\n const show = unmountOnExit ? isOpen : true\n const animate = isOpen || unmountOnExit ? \"enter\" : \"exit\"\n\n return (\n \n {show && (\n \n )}\n \n )\n },\n)\n\nCollapse.displayName = \"Collapse\"\n","import { useCallback, useEffect, useRef } from \"react\"\n\nexport function useCallbackRef any>(\n callback: T | undefined,\n deps: React.DependencyList = [],\n) {\n const callbackRef = useRef(callback)\n\n useEffect(() => {\n callbackRef.current = callback\n })\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return useCallback(((...args) => callbackRef.current?.(...args)) as T, deps)\n}\n","import { useEffect } from \"react\"\nimport { useCallbackRef } from \"@chakra-ui/react-use-callback-ref\"\n\ntype Target = EventTarget | null | (() => EventTarget | null)\ntype Options = boolean | AddEventListenerOptions\n\nexport function useEventListener(\n target: Target,\n event: K,\n handler?: (event: DocumentEventMap[K]) => void,\n options?: Options,\n): VoidFunction\nexport function useEventListener(\n target: Target,\n event: K,\n handler?: (event: WindowEventMap[K]) => void,\n options?: Options,\n): VoidFunction\nexport function useEventListener(\n target: Target,\n event: K,\n handler?: (event: GlobalEventHandlersEventMap[K]) => void,\n options?: Options,\n): VoidFunction\nexport function useEventListener(\n target: Target,\n event: string,\n handler: ((event: Event) => void) | undefined,\n options?: Options,\n) {\n const listener = useCallbackRef(handler)\n\n useEffect(() => {\n const node = typeof target === \"function\" ? target() : target ?? document\n\n if (!handler || !node) return\n\n node.addEventListener(event, listener, options)\n return () => {\n node.removeEventListener(event, listener, options)\n }\n }, [event, target, options, listener, handler])\n\n return () => {\n const node = typeof target === \"function\" ? target() : target ?? document\n node?.removeEventListener(event, listener, options)\n }\n}\n","// src/dom.ts\nfunction isElement(el) {\n return el != null && typeof el == \"object\" && \"nodeType\" in el && el.nodeType === Node.ELEMENT_NODE;\n}\nfunction isHTMLElement(el) {\n var _a;\n if (!isElement(el))\n return false;\n const win = (_a = el.ownerDocument.defaultView) != null ? _a : window;\n return el instanceof win.HTMLElement;\n}\nfunction getOwnerWindow(node) {\n var _a, _b;\n return (_b = (_a = getOwnerDocument(node)) == null ? void 0 : _a.defaultView) != null ? _b : window;\n}\nfunction getOwnerDocument(node) {\n return isElement(node) ? node.ownerDocument : document;\n}\nfunction getEventWindow(event) {\n var _a;\n return (_a = event.view) != null ? _a : window;\n}\nfunction isBrowser() {\n return Boolean(globalThis == null ? void 0 : globalThis.document);\n}\nfunction getActiveElement(node) {\n return getOwnerDocument(node).activeElement;\n}\nfunction contains(parent, child) {\n if (!parent)\n return false;\n return parent === child || parent.contains(child);\n}\n\nexport {\n isElement,\n isHTMLElement,\n getOwnerWindow,\n getOwnerDocument,\n getEventWindow,\n isBrowser,\n getActiveElement,\n contains\n};\n","import { useEffect, useState } from \"react\"\nimport { useEventListener } from \"@chakra-ui/react-use-event-listener\"\nimport { getOwnerWindow } from \"@chakra-ui/dom-utils\"\nexport type UseAnimationStateProps = {\n isOpen: boolean\n ref: React.RefObject\n}\n\nexport function useAnimationState(props: UseAnimationStateProps) {\n const { isOpen, ref } = props\n\n const [mounted, setMounted] = useState(isOpen)\n const [once, setOnce] = useState(false)\n\n useEffect(() => {\n if (!once) {\n setMounted(isOpen)\n setOnce(true)\n }\n }, [isOpen, once, mounted])\n\n useEventListener(\n () => ref.current,\n \"animationend\",\n () => {\n setMounted(isOpen)\n },\n )\n\n const hidden = isOpen ? false : !mounted\n\n return {\n present: !hidden,\n onComplete() {\n const win = getOwnerWindow(ref.current)\n const evt = new win.CustomEvent(\"animationend\", { bubbles: true })\n ref.current?.dispatchEvent(evt)\n },\n }\n}\n","import { useEventListener } from \"@chakra-ui/react-use-event-listener\"\n\nexport interface UseFocusOnMouseDownProps {\n enabled?: boolean\n ref: React.RefObject\n elements?: Array | HTMLElement | null>\n}\n\nfunction isRefObject(val: any): val is { current: any } {\n return \"current\" in val\n}\n\nconst isDom = () => typeof window !== \"undefined\"\nfunction getPlatform() {\n const agent = (navigator as any).userAgentData\n return agent?.platform ?? navigator.platform\n}\nconst vn = (v: RegExp) => isDom() && v.test(navigator.vendor)\nconst pt = (v: RegExp) => isDom() && v.test(getPlatform())\nconst isApple = () => pt(/mac|iphone|ipad|ipod/i)\nconst isSafari = () => isApple() && vn(/apple/i)\n\n/**\n * Polyfill to get `relatedTarget` working correctly consistently\n * across all browsers.\n *\n * It ensures that elements receives focus on pointer down if\n * it's not the active element.\n *\n * @internal\n */\nexport function useFocusOnPointerDown(props: UseFocusOnMouseDownProps) {\n const { ref, elements, enabled } = props\n\n const doc = () => ref.current?.ownerDocument ?? document\n\n useEventListener(doc, \"pointerdown\", (event) => {\n if (!isSafari() || !enabled) return\n const target = event.target as HTMLElement\n\n const els = elements ?? [ref]\n const isValidTarget = els.some((elementOrRef) => {\n const el = isRefObject(elementOrRef) ? elementOrRef.current : elementOrRef\n return el?.contains(target) || el === target\n })\n\n if (doc().activeElement !== target && isValidTarget) {\n event.preventDefault()\n target.focus()\n }\n })\n}\n","import {\n getOwnerDocument,\n isHTMLElement\n} from \"./chunk-3XANSPY5.mjs\";\n\n// src/tabbable.ts\nvar hasDisplayNone = (element) => window.getComputedStyle(element).display === \"none\";\nvar hasTabIndex = (element) => element.hasAttribute(\"tabindex\");\nvar hasNegativeTabIndex = (element) => hasTabIndex(element) && element.tabIndex === -1;\nfunction isDisabled(element) {\n return Boolean(element.getAttribute(\"disabled\")) === true || Boolean(element.getAttribute(\"aria-disabled\")) === true;\n}\nfunction isInputElement(element) {\n return isHTMLElement(element) && element.localName === \"input\" && \"select\" in element;\n}\nfunction isActiveElement(element) {\n const doc = isHTMLElement(element) ? getOwnerDocument(element) : document;\n return doc.activeElement === element;\n}\nfunction hasFocusWithin(element) {\n if (!document.activeElement)\n return false;\n return element.contains(document.activeElement);\n}\nfunction isHidden(element) {\n if (element.parentElement && isHidden(element.parentElement))\n return true;\n return element.hidden;\n}\nfunction isContentEditable(element) {\n const value = element.getAttribute(\"contenteditable\");\n return value !== \"false\" && value != null;\n}\nfunction isFocusable(element) {\n if (!isHTMLElement(element) || isHidden(element) || isDisabled(element)) {\n return false;\n }\n const { localName } = element;\n const focusableTags = [\"input\", \"select\", \"textarea\", \"button\"];\n if (focusableTags.indexOf(localName) >= 0)\n return true;\n const others = {\n a: () => element.hasAttribute(\"href\"),\n audio: () => element.hasAttribute(\"controls\"),\n video: () => element.hasAttribute(\"controls\")\n };\n if (localName in others) {\n return others[localName]();\n }\n if (isContentEditable(element))\n return true;\n return hasTabIndex(element);\n}\nfunction isTabbable(element) {\n if (!element)\n return false;\n return isHTMLElement(element) && isFocusable(element) && !hasNegativeTabIndex(element);\n}\n\nexport {\n hasDisplayNone,\n hasTabIndex,\n hasNegativeTabIndex,\n isDisabled,\n isInputElement,\n isActiveElement,\n hasFocusWithin,\n isHidden,\n isContentEditable,\n isFocusable,\n isTabbable\n};\n","import {\n getScrollParent\n} from \"./chunk-4WEUWBTD.mjs\";\nimport {\n hasDisplayNone,\n hasFocusWithin,\n hasNegativeTabIndex,\n hasTabIndex,\n isActiveElement,\n isContentEditable,\n isDisabled,\n isFocusable,\n isHidden,\n isInputElement,\n isTabbable\n} from \"./chunk-ROURZMX4.mjs\";\nimport {\n contains,\n getActiveElement,\n getEventWindow,\n getOwnerDocument,\n getOwnerWindow,\n isBrowser,\n isElement,\n isHTMLElement\n} from \"./chunk-3XANSPY5.mjs\";\n\n// src/index.ts\nvar focusableElList = [\n \"input:not(:disabled):not([disabled])\",\n \"select:not(:disabled):not([disabled])\",\n \"textarea:not(:disabled):not([disabled])\",\n \"embed\",\n \"iframe\",\n \"object\",\n \"a[href]\",\n \"area[href]\",\n \"button:not(:disabled):not([disabled])\",\n \"[tabindex]\",\n \"audio[controls]\",\n \"video[controls]\",\n \"*[tabindex]:not([aria-disabled])\",\n \"*[contenteditable]\"\n];\nvar focusableElSelector = focusableElList.join();\nvar isVisible = (el) => el.offsetWidth > 0 && el.offsetHeight > 0;\nfunction getAllFocusable(container) {\n const focusableEls = Array.from(\n container.querySelectorAll(focusableElSelector)\n );\n focusableEls.unshift(container);\n return focusableEls.filter((el) => isFocusable(el) && isVisible(el));\n}\nfunction getFirstFocusable(container) {\n const allFocusable = getAllFocusable(container);\n return allFocusable.length ? allFocusable[0] : null;\n}\nfunction getAllTabbable(container, fallbackToFocusable) {\n const allFocusable = Array.from(\n container.querySelectorAll(focusableElSelector)\n );\n const allTabbable = allFocusable.filter(isTabbable);\n if (isTabbable(container)) {\n allTabbable.unshift(container);\n }\n if (!allTabbable.length && fallbackToFocusable) {\n return allFocusable;\n }\n return allTabbable;\n}\nfunction getFirstTabbableIn(container, fallbackToFocusable) {\n const [first] = getAllTabbable(container, fallbackToFocusable);\n return first || null;\n}\nfunction getLastTabbableIn(container, fallbackToFocusable) {\n const allTabbable = getAllTabbable(container, fallbackToFocusable);\n return allTabbable[allTabbable.length - 1] || null;\n}\nfunction getNextTabbable(container, fallbackToFocusable) {\n const allFocusable = getAllFocusable(container);\n const index = allFocusable.indexOf(document.activeElement);\n const slice = allFocusable.slice(index + 1);\n return slice.find(isTabbable) || allFocusable.find(isTabbable) || (fallbackToFocusable ? slice[0] : null);\n}\nfunction getPreviousTabbable(container, fallbackToFocusable) {\n const allFocusable = getAllFocusable(container).reverse();\n const index = allFocusable.indexOf(document.activeElement);\n const slice = allFocusable.slice(index + 1);\n return slice.find(isTabbable) || allFocusable.find(isTabbable) || (fallbackToFocusable ? slice[0] : null);\n}\nexport {\n contains,\n getActiveElement,\n getAllFocusable,\n getAllTabbable,\n getEventWindow,\n getFirstFocusable,\n getFirstTabbableIn,\n getLastTabbableIn,\n getNextTabbable,\n getOwnerDocument,\n getOwnerWindow,\n getPreviousTabbable,\n getScrollParent,\n hasDisplayNone,\n hasFocusWithin,\n hasNegativeTabIndex,\n hasTabIndex,\n isActiveElement,\n isBrowser,\n isContentEditable,\n isDisabled,\n isElement,\n isFocusable,\n isHTMLElement,\n isHidden,\n isInputElement,\n isTabbable\n};\n","import { useEffect, useRef } from \"react\"\n\nexport function useUpdateEffect(\n callback: React.EffectCallback,\n deps: React.DependencyList,\n) {\n const renderCycleRef = useRef(false)\n const effectCycleRef = useRef(false)\n\n useEffect(() => {\n const mounted = renderCycleRef.current\n const run = mounted && effectCycleRef.current\n if (run) {\n return callback()\n }\n effectCycleRef.current = true\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps)\n\n useEffect(() => {\n renderCycleRef.current = true\n return () => {\n renderCycleRef.current = false\n }\n }, [])\n}\n","import {\n FocusableElement,\n getActiveElement,\n getAllFocusable,\n isTabbable,\n} from \"@chakra-ui/dom-utils\"\nimport { useEventListener } from \"@chakra-ui/react-use-event-listener\"\nimport { useSafeLayoutEffect } from \"@chakra-ui/react-use-safe-layout-effect\"\nimport { useUpdateEffect } from \"@chakra-ui/react-use-update-effect\"\nimport type { RefObject } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\nexport interface UseFocusOnHideOptions {\n focusRef: RefObject\n shouldFocus?: boolean\n visible?: boolean\n}\n\nfunction preventReturnFocus(containerRef: React.RefObject) {\n const el = containerRef.current\n if (!el) return false\n\n const activeElement = getActiveElement(el)\n\n if (!activeElement) return false\n if (el.contains(activeElement)) return false\n if (isTabbable(activeElement)) return true\n\n return false\n}\n\n/**\n * Popover hook to manage the focus when the popover closes or hides.\n *\n * We either want to return focus back to the popover trigger or\n * let focus proceed normally if user moved to another interactive\n * element in the viewport.\n */\nexport function useFocusOnHide(\n containerRef: RefObject,\n options: UseFocusOnHideOptions,\n) {\n const { shouldFocus: shouldFocusProp, visible, focusRef } = options\n\n const shouldFocus = shouldFocusProp && !visible\n\n useUpdateEffect(() => {\n if (!shouldFocus) return\n\n if (preventReturnFocus(containerRef)) {\n return\n }\n\n const el = focusRef?.current || containerRef.current\n\n let rafId: number\n\n if (el) {\n rafId = requestAnimationFrame(() => {\n el.focus({ preventScroll: true })\n })\n return () => {\n cancelAnimationFrame(rafId)\n }\n }\n }, [shouldFocus, containerRef, focusRef])\n}\n\nexport interface UseFocusOnShowOptions {\n visible?: boolean\n shouldFocus?: boolean\n preventScroll?: boolean\n focusRef?: React.RefObject\n}\n\nconst defaultOptions: UseFocusOnShowOptions = {\n preventScroll: true,\n shouldFocus: false,\n}\n\nexport function useFocusOnShow(\n target: React.RefObject | T,\n options = defaultOptions,\n) {\n const { focusRef, preventScroll, shouldFocus, visible } = options\n const element = isRefObject(target) ? target.current : target\n\n const autoFocusValue = shouldFocus && visible\n const autoFocusRef = useRef(autoFocusValue)\n const lastVisibleRef = useRef(visible)\n\n useSafeLayoutEffect(() => {\n if (!lastVisibleRef.current && visible) {\n autoFocusRef.current = autoFocusValue\n }\n lastVisibleRef.current = visible\n }, [visible, autoFocusValue])\n\n const onFocus = useCallback(() => {\n if (!visible || !element || !autoFocusRef.current) return\n autoFocusRef.current = false\n\n if (element.contains(document.activeElement as HTMLElement)) return\n\n if (focusRef?.current) {\n requestAnimationFrame(() => {\n focusRef.current?.focus({ preventScroll })\n })\n } else {\n const tabbableEls = getAllFocusable(element)\n if (tabbableEls.length > 0) {\n requestAnimationFrame(() => {\n tabbableEls[0].focus({ preventScroll })\n })\n }\n }\n }, [visible, preventScroll, element, focusRef])\n\n useUpdateEffect(() => {\n onFocus()\n }, [onFocus])\n\n useEventListener(element, \"transitionend\", onFocus)\n}\n\nfunction isRefObject(val: any): val is { current: any } {\n return \"current\" in val\n}\n","import { useCallbackRef } from \"@chakra-ui/react-use-callback-ref\"\nimport React, { useCallback, useState, useId } from \"react\"\n\nexport interface UseDisclosureProps {\n isOpen?: boolean\n defaultIsOpen?: boolean\n onClose?(): void\n onOpen?(): void\n id?: string\n}\n\ntype HTMLProps = React.HTMLAttributes\n\n/**\n * `useDisclosure` is a custom hook used to help handle common open, close, or toggle scenarios.\n * It can be used to control feedback component such as `Modal`, `AlertDialog`, `Drawer`, etc.\n *\n * @see Docs https://chakra-ui.com/docs/hooks/use-disclosure\n */\nexport function useDisclosure(props: UseDisclosureProps = {}) {\n const {\n onClose: onCloseProp,\n onOpen: onOpenProp,\n isOpen: isOpenProp,\n id: idProp,\n } = props\n\n const handleOpen = useCallbackRef(onOpenProp)\n const handleClose = useCallbackRef(onCloseProp)\n\n const [isOpenState, setIsOpen] = useState(props.defaultIsOpen || false)\n\n const isOpen = isOpenProp !== undefined ? isOpenProp : isOpenState\n\n const isControlled = isOpenProp !== undefined\n\n const uid = useId()\n const id = idProp ?? `disclosure-${uid}`\n\n const onClose = useCallback(() => {\n if (!isControlled) {\n setIsOpen(false)\n }\n handleClose?.()\n }, [isControlled, handleClose])\n\n const onOpen = useCallback(() => {\n if (!isControlled) {\n setIsOpen(true)\n }\n handleOpen?.()\n }, [isControlled, handleOpen])\n\n const onToggle = useCallback(() => {\n if (isOpen) {\n onClose()\n } else {\n onOpen()\n }\n }, [isOpen, onOpen, onClose])\n\n function getButtonProps(props: HTMLProps = {}): HTMLProps {\n return {\n ...props,\n \"aria-expanded\": isOpen,\n \"aria-controls\": id,\n onClick(event) {\n props.onClick?.(event)\n onToggle()\n },\n }\n }\n\n function getDisclosureProps(props: HTMLProps = {}): HTMLProps {\n return {\n ...props,\n hidden: !isOpen,\n id,\n }\n }\n\n return {\n isOpen,\n onOpen,\n onClose,\n onToggle,\n isControlled,\n getButtonProps,\n getDisclosureProps,\n }\n}\n\nexport type UseDisclosureReturn = ReturnType\n","import { Placement } from \"@popperjs/core\"\n\nconst toVar = (value: string, fallback?: string) => ({\n var: value,\n varRef: fallback ? `var(${value}, ${fallback})` : `var(${value})`,\n})\n\nexport const cssVars = {\n arrowShadowColor: toVar(\"--popper-arrow-shadow-color\"),\n arrowSize: toVar(\"--popper-arrow-size\", \"8px\"),\n arrowSizeHalf: toVar(\"--popper-arrow-size-half\"),\n arrowBg: toVar(\"--popper-arrow-bg\"),\n transformOrigin: toVar(\"--popper-transform-origin\"),\n arrowOffset: toVar(\"--popper-arrow-offset\"),\n} as const\n\nexport function getBoxShadow(placement: Placement) {\n if (placement.includes(\"top\"))\n return `1px 1px 0px 0 var(--popper-arrow-shadow-color)`\n if (placement.includes(\"bottom\"))\n return `-1px -1px 0px 0 var(--popper-arrow-shadow-color)`\n if (placement.includes(\"right\"))\n return `-1px 1px 0px 0 var(--popper-arrow-shadow-color)`\n if (placement.includes(\"left\"))\n return `1px -1px 0px 0 var(--popper-arrow-shadow-color)`\n}\n\nconst transforms: Record = {\n top: \"bottom center\",\n \"top-start\": \"bottom left\",\n \"top-end\": \"bottom right\",\n\n bottom: \"top center\",\n \"bottom-start\": \"top left\",\n \"bottom-end\": \"top right\",\n\n left: \"right center\",\n \"left-start\": \"right top\",\n \"left-end\": \"right bottom\",\n\n right: \"left center\",\n \"right-start\": \"left top\",\n \"right-end\": \"left bottom\",\n}\n\nexport const toTransformOrigin = (placement: Placement) => transforms[placement]\n\nconst defaultEventListeners = {\n scroll: true,\n resize: true,\n}\n\nexport function getEventListenerOptions(\n value?: boolean | Partial,\n) {\n let eventListeners: {\n enabled?: boolean\n options?: typeof defaultEventListeners\n }\n if (typeof value === \"object\") {\n eventListeners = {\n enabled: true,\n options: { ...defaultEventListeners, ...value },\n }\n } else {\n eventListeners = {\n enabled: value,\n options: defaultEventListeners,\n }\n }\n return eventListeners\n}\n","import { Placement, Modifier, State } from \"@popperjs/core\"\nimport { getBoxShadow, toTransformOrigin, cssVars } from \"./utils\"\n\n/* -------------------------------------------------------------------------------------------------\n The match width modifier sets the popper width to match the reference.\n It is useful for custom selects, autocomplete, etc.\n* -----------------------------------------------------------------------------------------------*/\n\nexport const matchWidth: Modifier<\"matchWidth\", any> = {\n name: \"matchWidth\",\n enabled: true,\n phase: \"beforeWrite\",\n requires: [\"computeStyles\"],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`\n },\n effect:\n ({ state }) =>\n () => {\n const reference = state.elements.reference as HTMLElement\n state.elements.popper.style.width = `${reference.offsetWidth}px`\n },\n}\n\n/* -------------------------------------------------------------------------------------------------\n The transform origin modifier sets the css `transformOrigin` value of the popper\n based on the dynamic placement state of the popper.\n \n Useful when we need to animate/transition the popper.\n* -----------------------------------------------------------------------------------------------*/\n\nexport const transformOrigin: Modifier<\"transformOrigin\", any> = {\n name: \"transformOrigin\",\n enabled: true,\n phase: \"write\",\n fn: ({ state }) => {\n setTransformOrigin(state)\n },\n effect:\n ({ state }) =>\n () => {\n setTransformOrigin(state)\n },\n}\n\nconst setTransformOrigin = (state: State) => {\n state.elements.popper.style.setProperty(\n cssVars.transformOrigin.var,\n toTransformOrigin(state.placement),\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n The position arrow modifier adds width, height and overrides the `top/left/right/bottom`\n styles generated by popper.js to properly position the arrow\n* -----------------------------------------------------------------------------------------------*/\n\nexport const positionArrow: Modifier<\"positionArrow\", any> = {\n name: \"positionArrow\",\n enabled: true,\n phase: \"afterWrite\",\n fn: ({ state }) => {\n setArrowStyles(state)\n },\n}\n\nconst setArrowStyles = (state: Partial) => {\n if (!state.placement) return\n const overrides = getArrowStyle(state.placement)\n\n if (state.elements?.arrow && overrides) {\n Object.assign(state.elements.arrow.style, {\n [overrides.property]: overrides.value,\n width: cssVars.arrowSize.varRef,\n height: cssVars.arrowSize.varRef,\n zIndex: -1,\n })\n\n const vars = {\n [cssVars.arrowSizeHalf\n .var]: `calc(${cssVars.arrowSize.varRef} / 2 - 1px)`,\n [cssVars.arrowOffset.var]: `calc(${cssVars.arrowSizeHalf.varRef} * -1)`,\n }\n\n for (const property in vars) {\n state.elements.arrow.style.setProperty(property, vars[property])\n }\n }\n}\n\nconst getArrowStyle = (placement: Placement) => {\n if (placement.startsWith(\"top\")) {\n return { property: \"bottom\", value: cssVars.arrowOffset.varRef }\n }\n if (placement.startsWith(\"bottom\")) {\n return { property: \"top\", value: cssVars.arrowOffset.varRef }\n }\n if (placement.startsWith(\"left\")) {\n return { property: \"right\", value: cssVars.arrowOffset.varRef }\n }\n if (placement.startsWith(\"right\")) {\n return { property: \"left\", value: cssVars.arrowOffset.varRef }\n }\n}\n\n/* -------------------------------------------------------------------------------------------------\n The inner arrow modifier, sets the placement styles for the inner arrow that forms\n the popper arrow tip.\n* -----------------------------------------------------------------------------------------------*/\n\nexport const innerArrow: Modifier<\"innerArrow\", any> = {\n name: \"innerArrow\",\n enabled: true,\n phase: \"main\",\n requires: [\"arrow\"],\n fn: ({ state }) => {\n setInnerArrowStyles(state)\n },\n effect:\n ({ state }) =>\n () => {\n setInnerArrowStyles(state)\n },\n}\n\nconst setInnerArrowStyles = (state: State) => {\n if (!state.elements.arrow) return\n\n const inner = state.elements.arrow.querySelector(\n \"[data-popper-arrow-inner]\",\n ) as HTMLElement | null\n\n if (!inner) return\n const boxShadow = getBoxShadow(state.placement)\n if (boxShadow) {\n inner.style.setProperty(\"--popper-arrow-default-shadow\", boxShadow)\n }\n\n Object.assign(inner.style, {\n transform: \"rotate(45deg)\",\n background: cssVars.arrowBg.varRef,\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n boxShadow: `var(--popper-arrow-shadow, var(--popper-arrow-default-shadow))`,\n })\n}\n","import type { Placement } from \"@popperjs/core\"\n\ntype Logical =\n | \"start-start\"\n | \"start-end\"\n | \"end-start\"\n | \"end-end\"\n | \"start\"\n | \"end\"\n\ntype PlacementWithLogical = Placement | Logical\n\nexport type { Placement, PlacementWithLogical }\n\nconst logicals: Record = {\n \"start-start\": { ltr: \"left-start\", rtl: \"right-start\" },\n \"start-end\": { ltr: \"left-end\", rtl: \"right-end\" },\n \"end-start\": { ltr: \"right-start\", rtl: \"left-start\" },\n \"end-end\": { ltr: \"right-end\", rtl: \"left-end\" },\n start: { ltr: \"left\", rtl: \"right\" },\n end: { ltr: \"right\", rtl: \"left\" },\n}\n\nconst opposites: Partial> = {\n \"auto-start\": \"auto-end\",\n \"auto-end\": \"auto-start\",\n \"top-start\": \"top-end\",\n \"top-end\": \"top-start\",\n \"bottom-start\": \"bottom-end\",\n \"bottom-end\": \"bottom-start\",\n}\n\nexport function getPopperPlacement(\n placement: PlacementWithLogical,\n dir: \"ltr\" | \"rtl\" = \"ltr\",\n): Placement {\n const value = ((logicals as any)[placement]?.[dir] || placement) as Placement\n if (dir === \"ltr\") return value\n return (opposites as any)[placement] ?? value\n}\n","export default function getWindow(node) {\n if (node == null) {\n return window;\n }\n\n if (node.toString() !== '[object Window]') {\n var ownerDocument = node.ownerDocument;\n return ownerDocument ? ownerDocument.defaultView || window : window;\n }\n\n return node;\n}","import getWindow from \"./getWindow.js\";\n\nfunction isElement(node) {\n var OwnElement = getWindow(node).Element;\n return node instanceof OwnElement || node instanceof Element;\n}\n\nfunction isHTMLElement(node) {\n var OwnElement = getWindow(node).HTMLElement;\n return node instanceof OwnElement || node instanceof HTMLElement;\n}\n\nfunction isShadowRoot(node) {\n // IE 11 has no ShadowRoot\n if (typeof ShadowRoot === 'undefined') {\n return false;\n }\n\n var OwnElement = getWindow(node).ShadowRoot;\n return node instanceof OwnElement || node instanceof ShadowRoot;\n}\n\nexport { isElement, isHTMLElement, isShadowRoot };","export var max = Math.max;\nexport var min = Math.min;\nexport var round = Math.round;","export default function getUAString() {\n var uaData = navigator.userAgentData;\n\n if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {\n return uaData.brands.map(function (item) {\n return item.brand + \"/\" + item.version;\n }).join(' ');\n }\n\n return navigator.userAgent;\n}","import getUAString from \"../utils/userAgent.js\";\nexport default function isLayoutViewport() {\n return !/^((?!chrome|android).)*safari/i.test(getUAString());\n}","import { isElement, isHTMLElement } from \"./instanceOf.js\";\nimport { round } from \"../utils/math.js\";\nimport getWindow from \"./getWindow.js\";\nimport isLayoutViewport from \"./isLayoutViewport.js\";\nexport default function getBoundingClientRect(element, includeScale, isFixedStrategy) {\n if (includeScale === void 0) {\n includeScale = false;\n }\n\n if (isFixedStrategy === void 0) {\n isFixedStrategy = false;\n }\n\n var clientRect = element.getBoundingClientRect();\n var scaleX = 1;\n var scaleY = 1;\n\n if (includeScale && isHTMLElement(element)) {\n scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;\n scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;\n }\n\n var _ref = isElement(element) ? getWindow(element) : window,\n visualViewport = _ref.visualViewport;\n\n var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;\n var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;\n var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;\n var width = clientRect.width / scaleX;\n var height = clientRect.height / scaleY;\n return {\n width: width,\n height: height,\n top: y,\n right: x + width,\n bottom: y + height,\n left: x,\n x: x,\n y: y\n };\n}","import getWindow from \"./getWindow.js\";\nexport default function getWindowScroll(node) {\n var win = getWindow(node);\n var scrollLeft = win.pageXOffset;\n var scrollTop = win.pageYOffset;\n return {\n scrollLeft: scrollLeft,\n scrollTop: scrollTop\n };\n}","export default function getNodeName(element) {\n return element ? (element.nodeName || '').toLowerCase() : null;\n}","import { isElement } from \"./instanceOf.js\";\nexport default function getDocumentElement(element) {\n // $FlowFixMe[incompatible-return]: assume body is always available\n return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]\n element.document) || window.document).documentElement;\n}","import getBoundingClientRect from \"./getBoundingClientRect.js\";\nimport getDocumentElement from \"./getDocumentElement.js\";\nimport getWindowScroll from \"./getWindowScroll.js\";\nexport default function getWindowScrollBarX(element) {\n // If has a CSS width greater than the viewport, then this will be\n // incorrect for RTL.\n // Popper 1 is broken in this case and never had a bug report so let's assume\n // it's not an issue. I don't think anyone ever specifies width on \n // anyway.\n // Browsers where the left scrollbar doesn't cause an issue report `0` for\n // this (e.g. Edge 2019, IE11, Safari)\n return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;\n}","import getWindow from \"./getWindow.js\";\nexport default function getComputedStyle(element) {\n return getWindow(element).getComputedStyle(element);\n}","import getComputedStyle from \"./getComputedStyle.js\";\nexport default function isScrollParent(element) {\n // Firefox wants us to check `-x` and `-y` variations as well\n var _getComputedStyle = getComputedStyle(element),\n overflow = _getComputedStyle.overflow,\n overflowX = _getComputedStyle.overflowX,\n overflowY = _getComputedStyle.overflowY;\n\n return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);\n}","import getBoundingClientRect from \"./getBoundingClientRect.js\";\nimport getNodeScroll from \"./getNodeScroll.js\";\nimport getNodeName from \"./getNodeName.js\";\nimport { isHTMLElement } from \"./instanceOf.js\";\nimport getWindowScrollBarX from \"./getWindowScrollBarX.js\";\nimport getDocumentElement from \"./getDocumentElement.js\";\nimport isScrollParent from \"./isScrollParent.js\";\nimport { round } from \"../utils/math.js\";\n\nfunction isElementScaled(element) {\n var rect = element.getBoundingClientRect();\n var scaleX = round(rect.width) / element.offsetWidth || 1;\n var scaleY = round(rect.height) / element.offsetHeight || 1;\n return scaleX !== 1 || scaleY !== 1;\n} // Returns the composite rect of an element relative to its offsetParent.\n// Composite means it takes into account transforms as well as layout.\n\n\nexport default function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {\n if (isFixed === void 0) {\n isFixed = false;\n }\n\n var isOffsetParentAnElement = isHTMLElement(offsetParent);\n var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);\n var documentElement = getDocumentElement(offsetParent);\n var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);\n var scroll = {\n scrollLeft: 0,\n scrollTop: 0\n };\n var offsets = {\n x: 0,\n y: 0\n };\n\n if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {\n if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078\n isScrollParent(documentElement)) {\n scroll = getNodeScroll(offsetParent);\n }\n\n if (isHTMLElement(offsetParent)) {\n offsets = getBoundingClientRect(offsetParent, true);\n offsets.x += offsetParent.clientLeft;\n offsets.y += offsetParent.clientTop;\n } else if (documentElement) {\n offsets.x = getWindowScrollBarX(documentElement);\n }\n }\n\n return {\n x: rect.left + scroll.scrollLeft - offsets.x,\n y: rect.top + scroll.scrollTop - offsets.y,\n width: rect.width,\n height: rect.height\n };\n}","import getWindowScroll from \"./getWindowScroll.js\";\nimport getWindow from \"./getWindow.js\";\nimport { isHTMLElement } from \"./instanceOf.js\";\nimport getHTMLElementScroll from \"./getHTMLElementScroll.js\";\nexport default function getNodeScroll(node) {\n if (node === getWindow(node) || !isHTMLElement(node)) {\n return getWindowScroll(node);\n } else {\n return getHTMLElementScroll(node);\n }\n}","export default function getHTMLElementScroll(element) {\n return {\n scrollLeft: element.scrollLeft,\n scrollTop: element.scrollTop\n };\n}","import getBoundingClientRect from \"./getBoundingClientRect.js\"; // Returns the layout rect of an element relative to its offsetParent. Layout\n// means it doesn't take into account transforms.\n\nexport default function getLayoutRect(element) {\n var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.\n // Fixes https://github.com/popperjs/popper-core/issues/1223\n\n var width = element.offsetWidth;\n var height = element.offsetHeight;\n\n if (Math.abs(clientRect.width - width) <= 1) {\n width = clientRect.width;\n }\n\n if (Math.abs(clientRect.height - height) <= 1) {\n height = clientRect.height;\n }\n\n return {\n x: element.offsetLeft,\n y: element.offsetTop,\n width: width,\n height: height\n };\n}","import getNodeName from \"./getNodeName.js\";\nimport getDocumentElement from \"./getDocumentElement.js\";\nimport { isShadowRoot } from \"./instanceOf.js\";\nexport default function getParentNode(element) {\n if (getNodeName(element) === 'html') {\n return element;\n }\n\n return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle\n // $FlowFixMe[incompatible-return]\n // $FlowFixMe[prop-missing]\n element.assignedSlot || // step into the shadow DOM of the parent of a slotted node\n element.parentNode || ( // DOM Element detected\n isShadowRoot(element) ? element.host : null) || // ShadowRoot detected\n // $FlowFixMe[incompatible-call]: HTMLElement is a Node\n getDocumentElement(element) // fallback\n\n );\n}","import getParentNode from \"./getParentNode.js\";\nimport isScrollParent from \"./isScrollParent.js\";\nimport getNodeName from \"./getNodeName.js\";\nimport { isHTMLElement } from \"./instanceOf.js\";\nexport default function getScrollParent(node) {\n if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {\n // $FlowFixMe[incompatible-return]: assume body is always available\n return node.ownerDocument.body;\n }\n\n if (isHTMLElement(node) && isScrollParent(node)) {\n return node;\n }\n\n return getScrollParent(getParentNode(node));\n}","import getScrollParent from \"./getScrollParent.js\";\nimport getParentNode from \"./getParentNode.js\";\nimport getWindow from \"./getWindow.js\";\nimport isScrollParent from \"./isScrollParent.js\";\n/*\ngiven a DOM element, return the list of all scroll parents, up the list of ancesors\nuntil we get to the top window object. This list is what we attach scroll listeners\nto, because if any of these parent elements scroll, we'll need to re-calculate the\nreference element's position.\n*/\n\nexport default function listScrollParents(element, list) {\n var _element$ownerDocumen;\n\n if (list === void 0) {\n list = [];\n }\n\n var scrollParent = getScrollParent(element);\n var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);\n var win = getWindow(scrollParent);\n var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;\n var updatedList = list.concat(target);\n return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here\n updatedList.concat(listScrollParents(getParentNode(target)));\n}","import getNodeName from \"./getNodeName.js\";\nexport default function isTableElement(element) {\n return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;\n}","import getWindow from \"./getWindow.js\";\nimport getNodeName from \"./getNodeName.js\";\nimport getComputedStyle from \"./getComputedStyle.js\";\nimport { isHTMLElement, isShadowRoot } from \"./instanceOf.js\";\nimport isTableElement from \"./isTableElement.js\";\nimport getParentNode from \"./getParentNode.js\";\nimport getUAString from \"../utils/userAgent.js\";\n\nfunction getTrueOffsetParent(element) {\n if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837\n getComputedStyle(element).position === 'fixed') {\n return null;\n }\n\n return element.offsetParent;\n} // `.offsetParent` reports `null` for fixed elements, while absolute elements\n// return the containing block\n\n\nfunction getContainingBlock(element) {\n var isFirefox = /firefox/i.test(getUAString());\n var isIE = /Trident/i.test(getUAString());\n\n if (isIE && isHTMLElement(element)) {\n // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport\n var elementCss = getComputedStyle(element);\n\n if (elementCss.position === 'fixed') {\n return null;\n }\n }\n\n var currentNode = getParentNode(element);\n\n if (isShadowRoot(currentNode)) {\n currentNode = currentNode.host;\n }\n\n while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {\n var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that\n // create a containing block.\n // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block\n\n if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {\n return currentNode;\n } else {\n currentNode = currentNode.parentNode;\n }\n }\n\n return null;\n} // Gets the closest ancestor positioned element. Handles some edge cases,\n// such as table ancestors and cross browser bugs.\n\n\nexport default function getOffsetParent(element) {\n var window = getWindow(element);\n var offsetParent = getTrueOffsetParent(element);\n\n while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {\n offsetParent = getTrueOffsetParent(offsetParent);\n }\n\n if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {\n return window;\n }\n\n return offsetParent || getContainingBlock(element) || window;\n}","export var top = 'top';\nexport var bottom = 'bottom';\nexport var right = 'right';\nexport var left = 'left';\nexport var auto = 'auto';\nexport var basePlacements = [top, bottom, right, left];\nexport var start = 'start';\nexport var end = 'end';\nexport var clippingParents = 'clippingParents';\nexport var viewport = 'viewport';\nexport var popper = 'popper';\nexport var reference = 'reference';\nexport var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {\n return acc.concat([placement + \"-\" + start, placement + \"-\" + end]);\n}, []);\nexport var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {\n return acc.concat([placement, placement + \"-\" + start, placement + \"-\" + end]);\n}, []); // modifiers that need to read the DOM\n\nexport var beforeRead = 'beforeRead';\nexport var read = 'read';\nexport var afterRead = 'afterRead'; // pure-logic modifiers\n\nexport var beforeMain = 'beforeMain';\nexport var main = 'main';\nexport var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)\n\nexport var beforeWrite = 'beforeWrite';\nexport var write = 'write';\nexport var afterWrite = 'afterWrite';\nexport var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];","import { modifierPhases } from \"../enums.js\"; // source: https://stackoverflow.com/questions/49875255\n\nfunction order(modifiers) {\n var map = new Map();\n var visited = new Set();\n var result = [];\n modifiers.forEach(function (modifier) {\n map.set(modifier.name, modifier);\n }); // On visiting object, check for its dependencies and visit them recursively\n\n function sort(modifier) {\n visited.add(modifier.name);\n var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []);\n requires.forEach(function (dep) {\n if (!visited.has(dep)) {\n var depModifier = map.get(dep);\n\n if (depModifier) {\n sort(depModifier);\n }\n }\n });\n result.push(modifier);\n }\n\n modifiers.forEach(function (modifier) {\n if (!visited.has(modifier.name)) {\n // check for visited object\n sort(modifier);\n }\n });\n return result;\n}\n\nexport default function orderModifiers(modifiers) {\n // order based on dependencies\n var orderedModifiers = order(modifiers); // order based on phase\n\n return modifierPhases.reduce(function (acc, phase) {\n return acc.concat(orderedModifiers.filter(function (modifier) {\n return modifier.phase === phase;\n }));\n }, []);\n}","export default function debounce(fn) {\n var pending;\n return function () {\n if (!pending) {\n pending = new Promise(function (resolve) {\n Promise.resolve().then(function () {\n pending = undefined;\n resolve(fn());\n });\n });\n }\n\n return pending;\n };\n}","import getCompositeRect from \"./dom-utils/getCompositeRect.js\";\nimport getLayoutRect from \"./dom-utils/getLayoutRect.js\";\nimport listScrollParents from \"./dom-utils/listScrollParents.js\";\nimport getOffsetParent from \"./dom-utils/getOffsetParent.js\";\nimport orderModifiers from \"./utils/orderModifiers.js\";\nimport debounce from \"./utils/debounce.js\";\nimport mergeByName from \"./utils/mergeByName.js\";\nimport detectOverflow from \"./utils/detectOverflow.js\";\nimport { isElement } from \"./dom-utils/instanceOf.js\";\nvar DEFAULT_OPTIONS = {\n placement: 'bottom',\n modifiers: [],\n strategy: 'absolute'\n};\n\nfunction areValidElements() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return !args.some(function (element) {\n return !(element && typeof element.getBoundingClientRect === 'function');\n });\n}\n\nexport function popperGenerator(generatorOptions) {\n if (generatorOptions === void 0) {\n generatorOptions = {};\n }\n\n var _generatorOptions = generatorOptions,\n _generatorOptions$def = _generatorOptions.defaultModifiers,\n defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,\n _generatorOptions$def2 = _generatorOptions.defaultOptions,\n defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;\n return function createPopper(reference, popper, options) {\n if (options === void 0) {\n options = defaultOptions;\n }\n\n var state = {\n placement: 'bottom',\n orderedModifiers: [],\n options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),\n modifiersData: {},\n elements: {\n reference: reference,\n popper: popper\n },\n attributes: {},\n styles: {}\n };\n var effectCleanupFns = [];\n var isDestroyed = false;\n var instance = {\n state: state,\n setOptions: function setOptions(setOptionsAction) {\n var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;\n cleanupModifierEffects();\n state.options = Object.assign({}, defaultOptions, state.options, options);\n state.scrollParents = {\n reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],\n popper: listScrollParents(popper)\n }; // Orders the modifiers based on their dependencies and `phase`\n // properties\n\n var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers\n\n state.orderedModifiers = orderedModifiers.filter(function (m) {\n return m.enabled;\n });\n runModifierEffects();\n return instance.update();\n },\n // Sync update – it will always be executed, even if not necessary. This\n // is useful for low frequency updates where sync behavior simplifies the\n // logic.\n // For high frequency updates (e.g. `resize` and `scroll` events), always\n // prefer the async Popper#update method\n forceUpdate: function forceUpdate() {\n if (isDestroyed) {\n return;\n }\n\n var _state$elements = state.elements,\n reference = _state$elements.reference,\n popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements\n // anymore\n\n if (!areValidElements(reference, popper)) {\n return;\n } // Store the reference and popper rects to be read by modifiers\n\n\n state.rects = {\n reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),\n popper: getLayoutRect(popper)\n }; // Modifiers have the ability to reset the current update cycle. The\n // most common use case for this is the `flip` modifier changing the\n // placement, which then needs to re-run all the modifiers, because the\n // logic was previously ran for the previous placement and is therefore\n // stale/incorrect\n\n state.reset = false;\n state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier\n // is filled with the initial data specified by the modifier. This means\n // it doesn't persist and is fresh on each update.\n // To ensure persistent data, use `${name}#persistent`\n\n state.orderedModifiers.forEach(function (modifier) {\n return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);\n });\n\n for (var index = 0; index < state.orderedModifiers.length; index++) {\n if (state.reset === true) {\n state.reset = false;\n index = -1;\n continue;\n }\n\n var _state$orderedModifie = state.orderedModifiers[index],\n fn = _state$orderedModifie.fn,\n _state$orderedModifie2 = _state$orderedModifie.options,\n _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,\n name = _state$orderedModifie.name;\n\n if (typeof fn === 'function') {\n state = fn({\n state: state,\n options: _options,\n name: name,\n instance: instance\n }) || state;\n }\n }\n },\n // Async and optimistically optimized update – it will not be executed if\n // not necessary (debounced to run at most once-per-tick)\n update: debounce(function () {\n return new Promise(function (resolve) {\n instance.forceUpdate();\n resolve(state);\n });\n }),\n destroy: function destroy() {\n cleanupModifierEffects();\n isDestroyed = true;\n }\n };\n\n if (!areValidElements(reference, popper)) {\n return instance;\n }\n\n instance.setOptions(options).then(function (state) {\n if (!isDestroyed && options.onFirstUpdate) {\n options.onFirstUpdate(state);\n }\n }); // Modifiers have the ability to execute arbitrary code before the first\n // update cycle runs. They will be executed in the same order as the update\n // cycle. This is useful when a modifier adds some persistent data that\n // other modifiers need to use, but the modifier is run after the dependent\n // one.\n\n function runModifierEffects() {\n state.orderedModifiers.forEach(function (_ref) {\n var name = _ref.name,\n _ref$options = _ref.options,\n options = _ref$options === void 0 ? {} : _ref$options,\n effect = _ref.effect;\n\n if (typeof effect === 'function') {\n var cleanupFn = effect({\n state: state,\n name: name,\n instance: instance,\n options: options\n });\n\n var noopFn = function noopFn() {};\n\n effectCleanupFns.push(cleanupFn || noopFn);\n }\n });\n }\n\n function cleanupModifierEffects() {\n effectCleanupFns.forEach(function (fn) {\n return fn();\n });\n effectCleanupFns = [];\n }\n\n return instance;\n };\n}\nexport var createPopper = /*#__PURE__*/popperGenerator(); // eslint-disable-next-line import/no-unused-modules\n\nexport { detectOverflow };","export default function mergeByName(modifiers) {\n var merged = modifiers.reduce(function (merged, current) {\n var existing = merged[current.name];\n merged[current.name] = existing ? Object.assign({}, existing, current, {\n options: Object.assign({}, existing.options, current.options),\n data: Object.assign({}, existing.data, current.data)\n }) : current;\n return merged;\n }, {}); // IE11 does not support Object.values\n\n return Object.keys(merged).map(function (key) {\n return merged[key];\n });\n}","import getWindow from \"../dom-utils/getWindow.js\"; // eslint-disable-next-line import/no-unused-modules\n\nvar passive = {\n passive: true\n};\n\nfunction effect(_ref) {\n var state = _ref.state,\n instance = _ref.instance,\n options = _ref.options;\n var _options$scroll = options.scroll,\n scroll = _options$scroll === void 0 ? true : _options$scroll,\n _options$resize = options.resize,\n resize = _options$resize === void 0 ? true : _options$resize;\n var window = getWindow(state.elements.popper);\n var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);\n\n if (scroll) {\n scrollParents.forEach(function (scrollParent) {\n scrollParent.addEventListener('scroll', instance.update, passive);\n });\n }\n\n if (resize) {\n window.addEventListener('resize', instance.update, passive);\n }\n\n return function () {\n if (scroll) {\n scrollParents.forEach(function (scrollParent) {\n scrollParent.removeEventListener('scroll', instance.update, passive);\n });\n }\n\n if (resize) {\n window.removeEventListener('resize', instance.update, passive);\n }\n };\n} // eslint-disable-next-line import/no-unused-modules\n\n\nexport default {\n name: 'eventListeners',\n enabled: true,\n phase: 'write',\n fn: function fn() {},\n effect: effect,\n data: {}\n};","import { auto } from \"../enums.js\";\nexport default function getBasePlacement(placement) {\n return placement.split('-')[0];\n}","export default function getVariation(placement) {\n return placement.split('-')[1];\n}","export default function getMainAxisFromPlacement(placement) {\n return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';\n}","import getBasePlacement from \"./getBasePlacement.js\";\nimport getVariation from \"./getVariation.js\";\nimport getMainAxisFromPlacement from \"./getMainAxisFromPlacement.js\";\nimport { top, right, bottom, left, start, end } from \"../enums.js\";\nexport default function computeOffsets(_ref) {\n var reference = _ref.reference,\n element = _ref.element,\n placement = _ref.placement;\n var basePlacement = placement ? getBasePlacement(placement) : null;\n var variation = placement ? getVariation(placement) : null;\n var commonX = reference.x + reference.width / 2 - element.width / 2;\n var commonY = reference.y + reference.height / 2 - element.height / 2;\n var offsets;\n\n switch (basePlacement) {\n case top:\n offsets = {\n x: commonX,\n y: reference.y - element.height\n };\n break;\n\n case bottom:\n offsets = {\n x: commonX,\n y: reference.y + reference.height\n };\n break;\n\n case right:\n offsets = {\n x: reference.x + reference.width,\n y: commonY\n };\n break;\n\n case left:\n offsets = {\n x: reference.x - element.width,\n y: commonY\n };\n break;\n\n default:\n offsets = {\n x: reference.x,\n y: reference.y\n };\n }\n\n var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;\n\n if (mainAxis != null) {\n var len = mainAxis === 'y' ? 'height' : 'width';\n\n switch (variation) {\n case start:\n offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);\n break;\n\n case end:\n offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);\n break;\n\n default:\n }\n }\n\n return offsets;\n}","import computeOffsets from \"../utils/computeOffsets.js\";\n\nfunction popperOffsets(_ref) {\n var state = _ref.state,\n name = _ref.name;\n // Offsets are the actual position the popper needs to have to be\n // properly positioned near its reference element\n // This is the most basic placement, and will be adjusted by\n // the modifiers in the next step\n state.modifiersData[name] = computeOffsets({\n reference: state.rects.reference,\n element: state.rects.popper,\n strategy: 'absolute',\n placement: state.placement\n });\n} // eslint-disable-next-line import/no-unused-modules\n\n\nexport default {\n name: 'popperOffsets',\n enabled: true,\n phase: 'read',\n fn: popperOffsets,\n data: {}\n};","import { top, left, right, bottom, end } from \"../enums.js\";\nimport getOffsetParent from \"../dom-utils/getOffsetParent.js\";\nimport getWindow from \"../dom-utils/getWindow.js\";\nimport getDocumentElement from \"../dom-utils/getDocumentElement.js\";\nimport getComputedStyle from \"../dom-utils/getComputedStyle.js\";\nimport getBasePlacement from \"../utils/getBasePlacement.js\";\nimport getVariation from \"../utils/getVariation.js\";\nimport { round } from \"../utils/math.js\"; // eslint-disable-next-line import/no-unused-modules\n\nvar unsetSides = {\n top: 'auto',\n right: 'auto',\n bottom: 'auto',\n left: 'auto'\n}; // Round the offsets to the nearest suitable subpixel based on the DPR.\n// Zooming can change the DPR, but it seems to report a value that will\n// cleanly divide the values into the appropriate subpixels.\n\nfunction roundOffsetsByDPR(_ref, win) {\n var x = _ref.x,\n y = _ref.y;\n var dpr = win.devicePixelRatio || 1;\n return {\n x: round(x * dpr) / dpr || 0,\n y: round(y * dpr) / dpr || 0\n };\n}\n\nexport function mapToStyles(_ref2) {\n var _Object$assign2;\n\n var popper = _ref2.popper,\n popperRect = _ref2.popperRect,\n placement = _ref2.placement,\n variation = _ref2.variation,\n offsets = _ref2.offsets,\n position = _ref2.position,\n gpuAcceleration = _ref2.gpuAcceleration,\n adaptive = _ref2.adaptive,\n roundOffsets = _ref2.roundOffsets,\n isFixed = _ref2.isFixed;\n var _offsets$x = offsets.x,\n x = _offsets$x === void 0 ? 0 : _offsets$x,\n _offsets$y = offsets.y,\n y = _offsets$y === void 0 ? 0 : _offsets$y;\n\n var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({\n x: x,\n y: y\n }) : {\n x: x,\n y: y\n };\n\n x = _ref3.x;\n y = _ref3.y;\n var hasX = offsets.hasOwnProperty('x');\n var hasY = offsets.hasOwnProperty('y');\n var sideX = left;\n var sideY = top;\n var win = window;\n\n if (adaptive) {\n var offsetParent = getOffsetParent(popper);\n var heightProp = 'clientHeight';\n var widthProp = 'clientWidth';\n\n if (offsetParent === getWindow(popper)) {\n offsetParent = getDocumentElement(popper);\n\n if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {\n heightProp = 'scrollHeight';\n widthProp = 'scrollWidth';\n }\n } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it\n\n\n offsetParent = offsetParent;\n\n if (placement === top || (placement === left || placement === right) && variation === end) {\n sideY = bottom;\n var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]\n offsetParent[heightProp];\n y -= offsetY - popperRect.height;\n y *= gpuAcceleration ? 1 : -1;\n }\n\n if (placement === left || (placement === top || placement === bottom) && variation === end) {\n sideX = right;\n var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]\n offsetParent[widthProp];\n x -= offsetX - popperRect.width;\n x *= gpuAcceleration ? 1 : -1;\n }\n }\n\n var commonStyles = Object.assign({\n position: position\n }, adaptive && unsetSides);\n\n var _ref4 = roundOffsets === true ? roundOffsetsByDPR({\n x: x,\n y: y\n }, getWindow(popper)) : {\n x: x,\n y: y\n };\n\n x = _ref4.x;\n y = _ref4.y;\n\n if (gpuAcceleration) {\n var _Object$assign;\n\n return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? \"translate(\" + x + \"px, \" + y + \"px)\" : \"translate3d(\" + x + \"px, \" + y + \"px, 0)\", _Object$assign));\n }\n\n return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + \"px\" : '', _Object$assign2[sideX] = hasX ? x + \"px\" : '', _Object$assign2.transform = '', _Object$assign2));\n}\n\nfunction computeStyles(_ref5) {\n var state = _ref5.state,\n options = _ref5.options;\n var _options$gpuAccelerat = options.gpuAcceleration,\n gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,\n _options$adaptive = options.adaptive,\n adaptive = _options$adaptive === void 0 ? true : _options$adaptive,\n _options$roundOffsets = options.roundOffsets,\n roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;\n var commonStyles = {\n placement: getBasePlacement(state.placement),\n variation: getVariation(state.placement),\n popper: state.elements.popper,\n popperRect: state.rects.popper,\n gpuAcceleration: gpuAcceleration,\n isFixed: state.options.strategy === 'fixed'\n };\n\n if (state.modifiersData.popperOffsets != null) {\n state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {\n offsets: state.modifiersData.popperOffsets,\n position: state.options.strategy,\n adaptive: adaptive,\n roundOffsets: roundOffsets\n })));\n }\n\n if (state.modifiersData.arrow != null) {\n state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {\n offsets: state.modifiersData.arrow,\n position: 'absolute',\n adaptive: false,\n roundOffsets: roundOffsets\n })));\n }\n\n state.attributes.popper = Object.assign({}, state.attributes.popper, {\n 'data-popper-placement': state.placement\n });\n} // eslint-disable-next-line import/no-unused-modules\n\n\nexport default {\n name: 'computeStyles',\n enabled: true,\n phase: 'beforeWrite',\n fn: computeStyles,\n data: {}\n};","import getNodeName from \"../dom-utils/getNodeName.js\";\nimport { isHTMLElement } from \"../dom-utils/instanceOf.js\"; // This modifier takes the styles prepared by the `computeStyles` modifier\n// and applies them to the HTMLElements such as popper and arrow\n\nfunction applyStyles(_ref) {\n var state = _ref.state;\n Object.keys(state.elements).forEach(function (name) {\n var style = state.styles[name] || {};\n var attributes = state.attributes[name] || {};\n var element = state.elements[name]; // arrow is optional + virtual elements\n\n if (!isHTMLElement(element) || !getNodeName(element)) {\n return;\n } // Flow doesn't support to extend this property, but it's the most\n // effective way to apply styles to an HTMLElement\n // $FlowFixMe[cannot-write]\n\n\n Object.assign(element.style, style);\n Object.keys(attributes).forEach(function (name) {\n var value = attributes[name];\n\n if (value === false) {\n element.removeAttribute(name);\n } else {\n element.setAttribute(name, value === true ? '' : value);\n }\n });\n });\n}\n\nfunction effect(_ref2) {\n var state = _ref2.state;\n var initialStyles = {\n popper: {\n position: state.options.strategy,\n left: '0',\n top: '0',\n margin: '0'\n },\n arrow: {\n position: 'absolute'\n },\n reference: {}\n };\n Object.assign(state.elements.popper.style, initialStyles.popper);\n state.styles = initialStyles;\n\n if (state.elements.arrow) {\n Object.assign(state.elements.arrow.style, initialStyles.arrow);\n }\n\n return function () {\n Object.keys(state.elements).forEach(function (name) {\n var element = state.elements[name];\n var attributes = state.attributes[name] || {};\n var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them\n\n var style = styleProperties.reduce(function (style, property) {\n style[property] = '';\n return style;\n }, {}); // arrow is optional + virtual elements\n\n if (!isHTMLElement(element) || !getNodeName(element)) {\n return;\n }\n\n Object.assign(element.style, style);\n Object.keys(attributes).forEach(function (attribute) {\n element.removeAttribute(attribute);\n });\n });\n };\n} // eslint-disable-next-line import/no-unused-modules\n\n\nexport default {\n name: 'applyStyles',\n enabled: true,\n phase: 'write',\n fn: applyStyles,\n effect: effect,\n requires: ['computeStyles']\n};","import getBasePlacement from \"../utils/getBasePlacement.js\";\nimport { top, left, right, placements } from \"../enums.js\"; // eslint-disable-next-line import/no-unused-modules\n\nexport function distanceAndSkiddingToXY(placement, rects, offset) {\n var basePlacement = getBasePlacement(placement);\n var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;\n\n var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {\n placement: placement\n })) : offset,\n skidding = _ref[0],\n distance = _ref[1];\n\n skidding = skidding || 0;\n distance = (distance || 0) * invertDistance;\n return [left, right].indexOf(basePlacement) >= 0 ? {\n x: distance,\n y: skidding\n } : {\n x: skidding,\n y: distance\n };\n}\n\nfunction offset(_ref2) {\n var state = _ref2.state,\n options = _ref2.options,\n name = _ref2.name;\n var _options$offset = options.offset,\n offset = _options$offset === void 0 ? [0, 0] : _options$offset;\n var data = placements.reduce(function (acc, placement) {\n acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);\n return acc;\n }, {});\n var _data$state$placement = data[state.placement],\n x = _data$state$placement.x,\n y = _data$state$placement.y;\n\n if (state.modifiersData.popperOffsets != null) {\n state.modifiersData.popperOffsets.x += x;\n state.modifiersData.popperOffsets.y += y;\n }\n\n state.modifiersData[name] = data;\n} // eslint-disable-next-line import/no-unused-modules\n\n\nexport default {\n name: 'offset',\n enabled: true,\n phase: 'main',\n requires: ['popperOffsets'],\n fn: offset\n};","var hash = {\n left: 'right',\n right: 'left',\n bottom: 'top',\n top: 'bottom'\n};\nexport default function getOppositePlacement(placement) {\n return placement.replace(/left|right|bottom|top/g, function (matched) {\n return hash[matched];\n });\n}","var hash = {\n start: 'end',\n end: 'start'\n};\nexport default function getOppositeVariationPlacement(placement) {\n return placement.replace(/start|end/g, function (matched) {\n return hash[matched];\n });\n}","import { isShadowRoot } from \"./instanceOf.js\";\nexport default function contains(parent, child) {\n var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method\n\n if (parent.contains(child)) {\n return true;\n } // then fallback to custom implementation with Shadow DOM support\n else if (rootNode && isShadowRoot(rootNode)) {\n var next = child;\n\n do {\n if (next && parent.isSameNode(next)) {\n return true;\n } // $FlowFixMe[prop-missing]: need a better way to handle this...\n\n\n next = next.parentNode || next.host;\n } while (next);\n } // Give up, the result is false\n\n\n return false;\n}","export default function rectToClientRect(rect) {\n return Object.assign({}, rect, {\n left: rect.x,\n top: rect.y,\n right: rect.x + rect.width,\n bottom: rect.y + rect.height\n });\n}","import { viewport } from \"../enums.js\";\nimport getViewportRect from \"./getViewportRect.js\";\nimport getDocumentRect from \"./getDocumentRect.js\";\nimport listScrollParents from \"./listScrollParents.js\";\nimport getOffsetParent from \"./getOffsetParent.js\";\nimport getDocumentElement from \"./getDocumentElement.js\";\nimport getComputedStyle from \"./getComputedStyle.js\";\nimport { isElement, isHTMLElement } from \"./instanceOf.js\";\nimport getBoundingClientRect from \"./getBoundingClientRect.js\";\nimport getParentNode from \"./getParentNode.js\";\nimport contains from \"./contains.js\";\nimport getNodeName from \"./getNodeName.js\";\nimport rectToClientRect from \"../utils/rectToClientRect.js\";\nimport { max, min } from \"../utils/math.js\";\n\nfunction getInnerBoundingClientRect(element, strategy) {\n var rect = getBoundingClientRect(element, false, strategy === 'fixed');\n rect.top = rect.top + element.clientTop;\n rect.left = rect.left + element.clientLeft;\n rect.bottom = rect.top + element.clientHeight;\n rect.right = rect.left + element.clientWidth;\n rect.width = element.clientWidth;\n rect.height = element.clientHeight;\n rect.x = rect.left;\n rect.y = rect.top;\n return rect;\n}\n\nfunction getClientRectFromMixedType(element, clippingParent, strategy) {\n return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));\n} // A \"clipping parent\" is an overflowable container with the characteristic of\n// clipping (or hiding) overflowing elements with a position different from\n// `initial`\n\n\nfunction getClippingParents(element) {\n var clippingParents = listScrollParents(getParentNode(element));\n var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;\n var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;\n\n if (!isElement(clipperElement)) {\n return [];\n } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414\n\n\n return clippingParents.filter(function (clippingParent) {\n return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';\n });\n} // Gets the maximum area that the element is visible in due to any number of\n// clipping parents\n\n\nexport default function getClippingRect(element, boundary, rootBoundary, strategy) {\n var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);\n var clippingParents = [].concat(mainClippingParents, [rootBoundary]);\n var firstClippingParent = clippingParents[0];\n var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {\n var rect = getClientRectFromMixedType(element, clippingParent, strategy);\n accRect.top = max(rect.top, accRect.top);\n accRect.right = min(rect.right, accRect.right);\n accRect.bottom = min(rect.bottom, accRect.bottom);\n accRect.left = max(rect.left, accRect.left);\n return accRect;\n }, getClientRectFromMixedType(element, firstClippingParent, strategy));\n clippingRect.width = clippingRect.right - clippingRect.left;\n clippingRect.height = clippingRect.bottom - clippingRect.top;\n clippingRect.x = clippingRect.left;\n clippingRect.y = clippingRect.top;\n return clippingRect;\n}","import getWindow from \"./getWindow.js\";\nimport getDocumentElement from \"./getDocumentElement.js\";\nimport getWindowScrollBarX from \"./getWindowScrollBarX.js\";\nimport isLayoutViewport from \"./isLayoutViewport.js\";\nexport default function getViewportRect(element, strategy) {\n var win = getWindow(element);\n var html = getDocumentElement(element);\n var visualViewport = win.visualViewport;\n var width = html.clientWidth;\n var height = html.clientHeight;\n var x = 0;\n var y = 0;\n\n if (visualViewport) {\n width = visualViewport.width;\n height = visualViewport.height;\n var layoutViewport = isLayoutViewport();\n\n if (layoutViewport || !layoutViewport && strategy === 'fixed') {\n x = visualViewport.offsetLeft;\n y = visualViewport.offsetTop;\n }\n }\n\n return {\n width: width,\n height: height,\n x: x + getWindowScrollBarX(element),\n y: y\n };\n}","import getDocumentElement from \"./getDocumentElement.js\";\nimport getComputedStyle from \"./getComputedStyle.js\";\nimport getWindowScrollBarX from \"./getWindowScrollBarX.js\";\nimport getWindowScroll from \"./getWindowScroll.js\";\nimport { max } from \"../utils/math.js\"; // Gets the entire size of the scrollable document area, even extending outside\n// of the `` and `` rect bounds if horizontally scrollable\n\nexport default function getDocumentRect(element) {\n var _element$ownerDocumen;\n\n var html = getDocumentElement(element);\n var winScroll = getWindowScroll(element);\n var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;\n var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);\n var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);\n var x = -winScroll.scrollLeft + getWindowScrollBarX(element);\n var y = -winScroll.scrollTop;\n\n if (getComputedStyle(body || html).direction === 'rtl') {\n x += max(html.clientWidth, body ? body.clientWidth : 0) - width;\n }\n\n return {\n width: width,\n height: height,\n x: x,\n y: y\n };\n}","import getFreshSideObject from \"./getFreshSideObject.js\";\nexport default function mergePaddingObject(paddingObject) {\n return Object.assign({}, getFreshSideObject(), paddingObject);\n}","export default function getFreshSideObject() {\n return {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0\n };\n}","export default function expandToHashMap(value, keys) {\n return keys.reduce(function (hashMap, key) {\n hashMap[key] = value;\n return hashMap;\n }, {});\n}","import getClippingRect from \"../dom-utils/getClippingRect.js\";\nimport getDocumentElement from \"../dom-utils/getDocumentElement.js\";\nimport getBoundingClientRect from \"../dom-utils/getBoundingClientRect.js\";\nimport computeOffsets from \"./computeOffsets.js\";\nimport rectToClientRect from \"./rectToClientRect.js\";\nimport { clippingParents, reference, popper, bottom, top, right, basePlacements, viewport } from \"../enums.js\";\nimport { isElement } from \"../dom-utils/instanceOf.js\";\nimport mergePaddingObject from \"./mergePaddingObject.js\";\nimport expandToHashMap from \"./expandToHashMap.js\"; // eslint-disable-next-line import/no-unused-modules\n\nexport default function detectOverflow(state, options) {\n if (options === void 0) {\n options = {};\n }\n\n var _options = options,\n _options$placement = _options.placement,\n placement = _options$placement === void 0 ? state.placement : _options$placement,\n _options$strategy = _options.strategy,\n strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,\n _options$boundary = _options.boundary,\n boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,\n _options$rootBoundary = _options.rootBoundary,\n rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary,\n _options$elementConte = _options.elementContext,\n elementContext = _options$elementConte === void 0 ? popper : _options$elementConte,\n _options$altBoundary = _options.altBoundary,\n altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary,\n _options$padding = _options.padding,\n padding = _options$padding === void 0 ? 0 : _options$padding;\n var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));\n var altContext = elementContext === popper ? reference : popper;\n var popperRect = state.rects.popper;\n var element = state.elements[altBoundary ? altContext : elementContext];\n var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);\n var referenceClientRect = getBoundingClientRect(state.elements.reference);\n var popperOffsets = computeOffsets({\n reference: referenceClientRect,\n element: popperRect,\n strategy: 'absolute',\n placement: placement\n });\n var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));\n var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect\n // 0 or negative = within the clipping rect\n\n var overflowOffsets = {\n top: clippingClientRect.top - elementClientRect.top + paddingObject.top,\n bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,\n left: clippingClientRect.left - elementClientRect.left + paddingObject.left,\n right: elementClientRect.right - clippingClientRect.right + paddingObject.right\n };\n var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element\n\n if (elementContext === popper && offsetData) {\n var offset = offsetData[placement];\n Object.keys(overflowOffsets).forEach(function (key) {\n var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1;\n var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x';\n overflowOffsets[key] += offset[axis] * multiply;\n });\n }\n\n return overflowOffsets;\n}","import getOppositePlacement from \"../utils/getOppositePlacement.js\";\nimport getBasePlacement from \"../utils/getBasePlacement.js\";\nimport getOppositeVariationPlacement from \"../utils/getOppositeVariationPlacement.js\";\nimport detectOverflow from \"../utils/detectOverflow.js\";\nimport computeAutoPlacement from \"../utils/computeAutoPlacement.js\";\nimport { bottom, top, start, right, left, auto } from \"../enums.js\";\nimport getVariation from \"../utils/getVariation.js\"; // eslint-disable-next-line import/no-unused-modules\n\nfunction getExpandedFallbackPlacements(placement) {\n if (getBasePlacement(placement) === auto) {\n return [];\n }\n\n var oppositePlacement = getOppositePlacement(placement);\n return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];\n}\n\nfunction flip(_ref) {\n var state = _ref.state,\n options = _ref.options,\n name = _ref.name;\n\n if (state.modifiersData[name]._skip) {\n return;\n }\n\n var _options$mainAxis = options.mainAxis,\n checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,\n _options$altAxis = options.altAxis,\n checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis,\n specifiedFallbackPlacements = options.fallbackPlacements,\n padding = options.padding,\n boundary = options.boundary,\n rootBoundary = options.rootBoundary,\n altBoundary = options.altBoundary,\n _options$flipVariatio = options.flipVariations,\n flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio,\n allowedAutoPlacements = options.allowedAutoPlacements;\n var preferredPlacement = state.options.placement;\n var basePlacement = getBasePlacement(preferredPlacement);\n var isBasePlacement = basePlacement === preferredPlacement;\n var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));\n var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {\n return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, {\n placement: placement,\n boundary: boundary,\n rootBoundary: rootBoundary,\n padding: padding,\n flipVariations: flipVariations,\n allowedAutoPlacements: allowedAutoPlacements\n }) : placement);\n }, []);\n var referenceRect = state.rects.reference;\n var popperRect = state.rects.popper;\n var checksMap = new Map();\n var makeFallbackChecks = true;\n var firstFittingPlacement = placements[0];\n\n for (var i = 0; i < placements.length; i++) {\n var placement = placements[i];\n\n var _basePlacement = getBasePlacement(placement);\n\n var isStartVariation = getVariation(placement) === start;\n var isVertical = [top, bottom].indexOf(_basePlacement) >= 0;\n var len = isVertical ? 'width' : 'height';\n var overflow = detectOverflow(state, {\n placement: placement,\n boundary: boundary,\n rootBoundary: rootBoundary,\n altBoundary: altBoundary,\n padding: padding\n });\n var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top;\n\n if (referenceRect[len] > popperRect[len]) {\n mainVariationSide = getOppositePlacement(mainVariationSide);\n }\n\n var altVariationSide = getOppositePlacement(mainVariationSide);\n var checks = [];\n\n if (checkMainAxis) {\n checks.push(overflow[_basePlacement] <= 0);\n }\n\n if (checkAltAxis) {\n checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0);\n }\n\n if (checks.every(function (check) {\n return check;\n })) {\n firstFittingPlacement = placement;\n makeFallbackChecks = false;\n break;\n }\n\n checksMap.set(placement, checks);\n }\n\n if (makeFallbackChecks) {\n // `2` may be desired in some cases – research later\n var numberOfChecks = flipVariations ? 3 : 1;\n\n var _loop = function _loop(_i) {\n var fittingPlacement = placements.find(function (placement) {\n var checks = checksMap.get(placement);\n\n if (checks) {\n return checks.slice(0, _i).every(function (check) {\n return check;\n });\n }\n });\n\n if (fittingPlacement) {\n firstFittingPlacement = fittingPlacement;\n return \"break\";\n }\n };\n\n for (var _i = numberOfChecks; _i > 0; _i--) {\n var _ret = _loop(_i);\n\n if (_ret === \"break\") break;\n }\n }\n\n if (state.placement !== firstFittingPlacement) {\n state.modifiersData[name]._skip = true;\n state.placement = firstFittingPlacement;\n state.reset = true;\n }\n} // eslint-disable-next-line import/no-unused-modules\n\n\nexport default {\n name: 'flip',\n enabled: true,\n phase: 'main',\n fn: flip,\n requiresIfExists: ['offset'],\n data: {\n _skip: false\n }\n};","import getVariation from \"./getVariation.js\";\nimport { variationPlacements, basePlacements, placements as allPlacements } from \"../enums.js\";\nimport detectOverflow from \"./detectOverflow.js\";\nimport getBasePlacement from \"./getBasePlacement.js\";\nexport default function computeAutoPlacement(state, options) {\n if (options === void 0) {\n options = {};\n }\n\n var _options = options,\n placement = _options.placement,\n boundary = _options.boundary,\n rootBoundary = _options.rootBoundary,\n padding = _options.padding,\n flipVariations = _options.flipVariations,\n _options$allowedAutoP = _options.allowedAutoPlacements,\n allowedAutoPlacements = _options$allowedAutoP === void 0 ? allPlacements : _options$allowedAutoP;\n var variation = getVariation(placement);\n var placements = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {\n return getVariation(placement) === variation;\n }) : basePlacements;\n var allowedPlacements = placements.filter(function (placement) {\n return allowedAutoPlacements.indexOf(placement) >= 0;\n });\n\n if (allowedPlacements.length === 0) {\n allowedPlacements = placements;\n } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...\n\n\n var overflows = allowedPlacements.reduce(function (acc, placement) {\n acc[placement] = detectOverflow(state, {\n placement: placement,\n boundary: boundary,\n rootBoundary: rootBoundary,\n padding: padding\n })[getBasePlacement(placement)];\n return acc;\n }, {});\n return Object.keys(overflows).sort(function (a, b) {\n return overflows[a] - overflows[b];\n });\n}","import { max as mathMax, min as mathMin } from \"./math.js\";\nexport function within(min, value, max) {\n return mathMax(min, mathMin(value, max));\n}\nexport function withinMaxClamp(min, value, max) {\n var v = within(min, value, max);\n return v > max ? max : v;\n}","import { top, left, right, bottom, start } from \"../enums.js\";\nimport getBasePlacement from \"../utils/getBasePlacement.js\";\nimport getMainAxisFromPlacement from \"../utils/getMainAxisFromPlacement.js\";\nimport getAltAxis from \"../utils/getAltAxis.js\";\nimport { within, withinMaxClamp } from \"../utils/within.js\";\nimport getLayoutRect from \"../dom-utils/getLayoutRect.js\";\nimport getOffsetParent from \"../dom-utils/getOffsetParent.js\";\nimport detectOverflow from \"../utils/detectOverflow.js\";\nimport getVariation from \"../utils/getVariation.js\";\nimport getFreshSideObject from \"../utils/getFreshSideObject.js\";\nimport { min as mathMin, max as mathMax } from \"../utils/math.js\";\n\nfunction preventOverflow(_ref) {\n var state = _ref.state,\n options = _ref.options,\n name = _ref.name;\n var _options$mainAxis = options.mainAxis,\n checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,\n _options$altAxis = options.altAxis,\n checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis,\n boundary = options.boundary,\n rootBoundary = options.rootBoundary,\n altBoundary = options.altBoundary,\n padding = options.padding,\n _options$tether = options.tether,\n tether = _options$tether === void 0 ? true : _options$tether,\n _options$tetherOffset = options.tetherOffset,\n tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;\n var overflow = detectOverflow(state, {\n boundary: boundary,\n rootBoundary: rootBoundary,\n padding: padding,\n altBoundary: altBoundary\n });\n var basePlacement = getBasePlacement(state.placement);\n var variation = getVariation(state.placement);\n var isBasePlacement = !variation;\n var mainAxis = getMainAxisFromPlacement(basePlacement);\n var altAxis = getAltAxis(mainAxis);\n var popperOffsets = state.modifiersData.popperOffsets;\n var referenceRect = state.rects.reference;\n var popperRect = state.rects.popper;\n var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {\n placement: state.placement\n })) : tetherOffset;\n var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {\n mainAxis: tetherOffsetValue,\n altAxis: tetherOffsetValue\n } : Object.assign({\n mainAxis: 0,\n altAxis: 0\n }, tetherOffsetValue);\n var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;\n var data = {\n x: 0,\n y: 0\n };\n\n if (!popperOffsets) {\n return;\n }\n\n if (checkMainAxis) {\n var _offsetModifierState$;\n\n var mainSide = mainAxis === 'y' ? top : left;\n var altSide = mainAxis === 'y' ? bottom : right;\n var len = mainAxis === 'y' ? 'height' : 'width';\n var offset = popperOffsets[mainAxis];\n var min = offset + overflow[mainSide];\n var max = offset - overflow[altSide];\n var additive = tether ? -popperRect[len] / 2 : 0;\n var minLen = variation === start ? referenceRect[len] : popperRect[len];\n var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go\n // outside the reference bounds\n\n var arrowElement = state.elements.arrow;\n var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : {\n width: 0,\n height: 0\n };\n var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject();\n var arrowPaddingMin = arrowPaddingObject[mainSide];\n var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want\n // to include its full size in the calculation. If the reference is small\n // and near the edge of a boundary, the popper can overflow even if the\n // reference is not overflowing as well (e.g. virtual elements with no\n // width or height)\n\n var arrowLen = within(0, referenceRect[len], arrowRect[len]);\n var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;\n var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;\n var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);\n var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;\n var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;\n var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;\n var tetherMax = offset + maxOffset - offsetModifierValue;\n var preventedOffset = within(tether ? mathMin(min, tetherMin) : min, offset, tether ? mathMax(max, tetherMax) : max);\n popperOffsets[mainAxis] = preventedOffset;\n data[mainAxis] = preventedOffset - offset;\n }\n\n if (checkAltAxis) {\n var _offsetModifierState$2;\n\n var _mainSide = mainAxis === 'x' ? top : left;\n\n var _altSide = mainAxis === 'x' ? bottom : right;\n\n var _offset = popperOffsets[altAxis];\n\n var _len = altAxis === 'y' ? 'height' : 'width';\n\n var _min = _offset + overflow[_mainSide];\n\n var _max = _offset - overflow[_altSide];\n\n var isOriginSide = [top, left].indexOf(basePlacement) !== -1;\n\n var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;\n\n var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;\n\n var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;\n\n var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);\n\n popperOffsets[altAxis] = _preventedOffset;\n data[altAxis] = _preventedOffset - _offset;\n }\n\n state.modifiersData[name] = data;\n} // eslint-disable-next-line import/no-unused-modules\n\n\nexport default {\n name: 'preventOverflow',\n enabled: true,\n phase: 'main',\n fn: preventOverflow,\n requiresIfExists: ['offset']\n};","export default function getAltAxis(axis) {\n return axis === 'x' ? 'y' : 'x';\n}","import getBasePlacement from \"../utils/getBasePlacement.js\";\nimport getLayoutRect from \"../dom-utils/getLayoutRect.js\";\nimport contains from \"../dom-utils/contains.js\";\nimport getOffsetParent from \"../dom-utils/getOffsetParent.js\";\nimport getMainAxisFromPlacement from \"../utils/getMainAxisFromPlacement.js\";\nimport { within } from \"../utils/within.js\";\nimport mergePaddingObject from \"../utils/mergePaddingObject.js\";\nimport expandToHashMap from \"../utils/expandToHashMap.js\";\nimport { left, right, basePlacements, top, bottom } from \"../enums.js\"; // eslint-disable-next-line import/no-unused-modules\n\nvar toPaddingObject = function toPaddingObject(padding, state) {\n padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {\n placement: state.placement\n })) : padding;\n return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));\n};\n\nfunction arrow(_ref) {\n var _state$modifiersData$;\n\n var state = _ref.state,\n name = _ref.name,\n options = _ref.options;\n var arrowElement = state.elements.arrow;\n var popperOffsets = state.modifiersData.popperOffsets;\n var basePlacement = getBasePlacement(state.placement);\n var axis = getMainAxisFromPlacement(basePlacement);\n var isVertical = [left, right].indexOf(basePlacement) >= 0;\n var len = isVertical ? 'height' : 'width';\n\n if (!arrowElement || !popperOffsets) {\n return;\n }\n\n var paddingObject = toPaddingObject(options.padding, state);\n var arrowRect = getLayoutRect(arrowElement);\n var minProp = axis === 'y' ? top : left;\n var maxProp = axis === 'y' ? bottom : right;\n var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];\n var startDiff = popperOffsets[axis] - state.rects.reference[axis];\n var arrowOffsetParent = getOffsetParent(arrowElement);\n var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;\n var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is\n // outside of the popper bounds\n\n var min = paddingObject[minProp];\n var max = clientSize - arrowRect[len] - paddingObject[maxProp];\n var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;\n var offset = within(min, center, max); // Prevents breaking syntax highlighting...\n\n var axisProp = axis;\n state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);\n}\n\nfunction effect(_ref2) {\n var state = _ref2.state,\n options = _ref2.options;\n var _options$element = options.element,\n arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;\n\n if (arrowElement == null) {\n return;\n } // CSS selector\n\n\n if (typeof arrowElement === 'string') {\n arrowElement = state.elements.popper.querySelector(arrowElement);\n\n if (!arrowElement) {\n return;\n }\n }\n\n if (!contains(state.elements.popper, arrowElement)) {\n return;\n }\n\n state.elements.arrow = arrowElement;\n} // eslint-disable-next-line import/no-unused-modules\n\n\nexport default {\n name: 'arrow',\n enabled: true,\n phase: 'main',\n fn: arrow,\n effect: effect,\n requires: ['popperOffsets'],\n requiresIfExists: ['preventOverflow']\n};","import { top, bottom, left, right } from \"../enums.js\";\nimport detectOverflow from \"../utils/detectOverflow.js\";\n\nfunction getSideOffsets(overflow, rect, preventedOffsets) {\n if (preventedOffsets === void 0) {\n preventedOffsets = {\n x: 0,\n y: 0\n };\n }\n\n return {\n top: overflow.top - rect.height - preventedOffsets.y,\n right: overflow.right - rect.width + preventedOffsets.x,\n bottom: overflow.bottom - rect.height + preventedOffsets.y,\n left: overflow.left - rect.width - preventedOffsets.x\n };\n}\n\nfunction isAnySideFullyClipped(overflow) {\n return [top, right, bottom, left].some(function (side) {\n return overflow[side] >= 0;\n });\n}\n\nfunction hide(_ref) {\n var state = _ref.state,\n name = _ref.name;\n var referenceRect = state.rects.reference;\n var popperRect = state.rects.popper;\n var preventedOffsets = state.modifiersData.preventOverflow;\n var referenceOverflow = detectOverflow(state, {\n elementContext: 'reference'\n });\n var popperAltOverflow = detectOverflow(state, {\n altBoundary: true\n });\n var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);\n var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);\n var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);\n var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);\n state.modifiersData[name] = {\n referenceClippingOffsets: referenceClippingOffsets,\n popperEscapeOffsets: popperEscapeOffsets,\n isReferenceHidden: isReferenceHidden,\n hasPopperEscaped: hasPopperEscaped\n };\n state.attributes.popper = Object.assign({}, state.attributes.popper, {\n 'data-popper-reference-hidden': isReferenceHidden,\n 'data-popper-escaped': hasPopperEscaped\n });\n} // eslint-disable-next-line import/no-unused-modules\n\n\nexport default {\n name: 'hide',\n enabled: true,\n phase: 'main',\n requiresIfExists: ['preventOverflow'],\n fn: hide\n};","import { popperGenerator, detectOverflow } from \"./createPopper.js\";\nimport eventListeners from \"./modifiers/eventListeners.js\";\nimport popperOffsets from \"./modifiers/popperOffsets.js\";\nimport computeStyles from \"./modifiers/computeStyles.js\";\nimport applyStyles from \"./modifiers/applyStyles.js\";\nimport offset from \"./modifiers/offset.js\";\nimport flip from \"./modifiers/flip.js\";\nimport preventOverflow from \"./modifiers/preventOverflow.js\";\nimport arrow from \"./modifiers/arrow.js\";\nimport hide from \"./modifiers/hide.js\";\nvar defaultModifiers = [eventListeners, popperOffsets, computeStyles, applyStyles, offset, flip, preventOverflow, arrow, hide];\nvar createPopper = /*#__PURE__*/popperGenerator({\n defaultModifiers: defaultModifiers\n}); // eslint-disable-next-line import/no-unused-modules\n\nexport { createPopper, popperGenerator, defaultModifiers, detectOverflow }; // eslint-disable-next-line import/no-unused-modules\n\nexport { createPopper as createPopperLite } from \"./popper-lite.js\"; // eslint-disable-next-line import/no-unused-modules\n\nexport * from \"./modifiers/index.js\";","import { mergeRefs } from \"@chakra-ui/react-use-merge-refs\"\nimport { PropGetter } from \"@chakra-ui/react-types\"\nimport {\n createPopper,\n Instance,\n Modifier,\n VirtualElement,\n} from \"@popperjs/core\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport * as customModifiers from \"./modifiers\"\nimport { getPopperPlacement, PlacementWithLogical } from \"./popper.placement\"\nimport { cssVars, getEventListenerOptions } from \"./utils\"\n\nexport interface UsePopperProps {\n /**\n * Whether the popper.js should be enabled\n */\n enabled?: boolean\n /**\n * The main and cross-axis offset to displace popper element\n * from its reference element.\n */\n offset?: [number, number]\n /**\n * The distance or margin between the reference and popper.\n * It is used internally to create an `offset` modifier.\n *\n * NB: If you define `offset` prop, it'll override the gutter.\n * @default 8\n */\n gutter?: number\n /**\n * If `true`, will prevent the popper from being cut off and ensure\n * it's visible within the boundary area.\n * @default true\n */\n preventOverflow?: boolean\n /**\n * If `true`, the popper will change its placement and flip when it's\n * about to overflow its boundary area.\n * @default true\n */\n flip?: boolean\n /**\n * If `true`, the popper will match the width of the reference at all times.\n * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n * @default false\n */\n matchWidth?: boolean\n /**\n * The boundary area for the popper. Used within the `preventOverflow` modifier\n * @default \"clippingParents\"\n */\n boundary?: \"clippingParents\" | \"scrollParent\" | HTMLElement\n /**\n * If provided, determines whether the popper will reposition itself on `scroll`\n * and `resize` of the window.\n * @default true\n */\n eventListeners?: boolean | { scroll?: boolean; resize?: boolean }\n /**\n * The padding required to prevent the arrow from\n * reaching the very edge of the popper.\n * @default 8\n */\n arrowPadding?: number\n /**\n * The CSS positioning strategy to use.\n * @default \"absolute\"\n */\n strategy?: \"absolute\" | \"fixed\"\n /**\n * The placement of the popper relative to its reference.\n * @default \"bottom\"\n */\n placement?: PlacementWithLogical\n /**\n * Array of popper.js modifiers. Check the docs to see\n * the list of possible modifiers you can pass.\n *\n * @see Docs https://popper.js.org/docs/v2/modifiers/\n */\n modifiers?: Array>>\n /**\n * Theme direction `ltr` or `rtl`. Popper's placement will\n * be set accordingly\n * @default \"ltr\"\n */\n direction?: \"ltr\" | \"rtl\"\n}\n\nexport type ArrowCSSVarProps = {\n /**\n * The size of the popover arrow.\n * This sets the `--popper-arrow-size` css property\n */\n size?: string | number\n /**\n * The box-shadow color of the popover arrow.\n * This sets the `--popper-arrow-shadow-color` css property\n */\n shadowColor?: string\n /**\n * The background color of the popper arrow.\n * This sets the `--popper-arrow-bg` css property.\n */\n bg?: string\n}\n\nexport function usePopper(props: UsePopperProps = {}) {\n const {\n enabled = true,\n modifiers,\n placement: placementProp = \"bottom\",\n strategy = \"absolute\",\n arrowPadding = 8,\n eventListeners = true,\n offset,\n gutter = 8,\n flip = true,\n boundary = \"clippingParents\",\n preventOverflow = true,\n matchWidth,\n direction = \"ltr\",\n } = props\n\n const reference = useRef(null)\n const popper = useRef(null)\n const instance = useRef(null)\n const placement = getPopperPlacement(placementProp, direction)\n\n const cleanup = useRef(() => {})\n\n const setupPopper = useCallback(() => {\n if (!enabled || !reference.current || !popper.current) return\n\n // If popper instance exists, destroy it, so we can create a new one\n cleanup.current?.()\n\n instance.current = createPopper(reference.current, popper.current, {\n placement,\n modifiers: [\n customModifiers.innerArrow,\n customModifiers.positionArrow,\n customModifiers.transformOrigin,\n {\n ...customModifiers.matchWidth,\n enabled: !!matchWidth,\n },\n {\n name: \"eventListeners\",\n ...getEventListenerOptions(eventListeners),\n },\n {\n name: \"arrow\",\n options: { padding: arrowPadding },\n },\n {\n name: \"offset\",\n options: {\n offset: offset ?? [0, gutter],\n },\n },\n {\n name: \"flip\",\n enabled: !!flip,\n options: { padding: 8 },\n },\n {\n name: \"preventOverflow\",\n enabled: !!preventOverflow,\n options: { boundary },\n },\n // allow users override internal modifiers\n ...(modifiers ?? []),\n ],\n strategy,\n })\n\n // force update one-time to fix any positioning issues\n instance.current.forceUpdate()\n\n cleanup.current = instance.current.destroy\n }, [\n placement,\n enabled,\n modifiers,\n matchWidth,\n eventListeners,\n arrowPadding,\n offset,\n gutter,\n flip,\n preventOverflow,\n boundary,\n strategy,\n ])\n\n useEffect(() => {\n return () => {\n /**\n * Fast refresh might call this function and tear down the popper\n * even if the reference still exists. This checks against that\n */\n if (!reference.current && !popper.current) {\n instance.current?.destroy()\n instance.current = null\n }\n }\n }, [])\n\n const referenceRef = useCallback(\n (node: T | null) => {\n reference.current = node\n setupPopper()\n },\n [setupPopper],\n )\n\n const getReferenceProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref: mergeRefs(referenceRef, ref),\n }),\n [referenceRef],\n )\n\n const popperRef = useCallback(\n (node: T | null) => {\n popper.current = node\n setupPopper()\n },\n [setupPopper],\n )\n\n const getPopperProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref: mergeRefs(popperRef, ref),\n style: {\n ...props.style,\n position: strategy,\n minWidth: matchWidth ? undefined : \"max-content\",\n inset: \"0 auto auto 0\",\n },\n }),\n [strategy, popperRef, matchWidth],\n )\n\n const getArrowProps: PropGetter = useCallback((props = {}, ref = null) => {\n const { size, shadowColor, bg, style, ...rest } = props\n return {\n ...rest,\n ref,\n \"data-popper-arrow\": \"\",\n style: getArrowStyle(props),\n }\n }, [])\n\n const getArrowInnerProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n ref,\n \"data-popper-arrow-inner\": \"\",\n }),\n [],\n )\n\n return {\n update() {\n instance.current?.update()\n },\n forceUpdate() {\n instance.current?.forceUpdate()\n },\n transformOrigin: cssVars.transformOrigin.varRef,\n referenceRef,\n popperRef,\n getPopperProps,\n getArrowProps,\n getArrowInnerProps,\n getReferenceProps,\n }\n}\n\nfunction getArrowStyle(props: any) {\n const { size, shadowColor, bg, style } = props\n const computedStyle = { ...style, position: \"absolute\" }\n if (size) {\n computedStyle[\"--popper-arrow-size\"] = size\n }\n if (shadowColor) {\n computedStyle[\"--popper-arrow-shadow-color\"] = shadowColor\n }\n if (bg) {\n computedStyle[\"--popper-arrow-bg\"] = bg\n }\n return computedStyle\n}\n\nexport type UsePopperReturn = ReturnType\n","// src/index.ts\nfunction lazyDisclosure(options) {\n const { wasSelected, enabled, isSelected, mode = \"unmount\" } = options;\n if (!enabled)\n return true;\n if (isSelected)\n return true;\n if (mode === \"keepMounted\" && wasSelected)\n return true;\n return false;\n}\nexport {\n lazyDisclosure\n};\n","import { useAnimationState } from \"@chakra-ui/react-use-animation-state\"\nimport { useFocusOnPointerDown } from \"@chakra-ui/react-use-focus-on-pointer-down\"\nimport {\n useFocusOnHide,\n useFocusOnShow,\n} from \"@chakra-ui/react-use-focus-effect\"\nimport { useDisclosure } from \"@chakra-ui/react-use-disclosure\"\nimport { popperCSSVars, usePopper, UsePopperProps } from \"@chakra-ui/popper\"\nimport { DOMAttributes, PropGetter } from \"@chakra-ui/react-types\"\nimport { mergeRefs } from \"@chakra-ui/react-use-merge-refs\"\nimport { callAllHandlers } from \"@chakra-ui/shared-utils\"\nimport { lazyDisclosure, LazyMode } from \"@chakra-ui/lazy-utils\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\n\nconst TRIGGER = {\n click: \"click\",\n hover: \"hover\",\n} as const\n\nexport interface UsePopoverProps extends Omit {\n /**\n * The html `id` attribute of the popover.\n * If not provided, we generate a unique id.\n *\n * This `id` is also used to auto-generate the `aria-labelledby`\n * and `aria-describedby` attributes that points to the `PopoverHeader` and `PopoverBody`\n */\n id?: string\n /**\n * If `true`, the popover will be opened in controlled mode.\n */\n isOpen?: boolean\n /**\n * If `true`, the popover will be initially opened.\n */\n defaultIsOpen?: boolean\n /**\n * The `ref` of the element that should receive focus when the popover opens.\n */\n initialFocusRef?: React.RefObject<{ focus(): void }>\n /**\n * If `true`, focus will be returned to the element that triggers the popover\n * when it closes\n * @default true\n */\n returnFocusOnClose?: boolean\n /**\n * If `true`, focus will be transferred to the first interactive element\n * when the popover opens\n * @default true\n */\n autoFocus?: boolean\n /**\n * If `true`, the popover will close when you blur out it by\n * clicking outside or tabbing out\n * @default true\n */\n closeOnBlur?: boolean\n /**\n * If `true`, the popover will close when you hit the `Esc` key\n * @default true\n */\n closeOnEsc?: boolean\n /**\n * Callback fired when the popover opens\n */\n onOpen?: () => void\n /**\n * Callback fired when the popover closes\n */\n onClose?: () => void\n /**\n * The size of the popover arrow\n */\n arrowSize?: number\n /**\n * The `box-shadow` of the popover arrow\n */\n arrowShadowColor?: string\n /**\n * The interaction that triggers the popover.\n *\n * `hover` - means the popover will open when you hover with mouse or\n * focus with keyboard on the popover trigger\n *\n * `click` - means the popover will open on click or\n * press `Enter` to `Space` on keyboard\n *\n * @default \"click\"\n */\n trigger?: keyof typeof TRIGGER\n /**\n * Delay in milliseconds before the popover opens after a trigger event.\n * Only works when `trigger=\"hover\"`\n *\n * @default 200\n */\n openDelay?: number\n /**\n * Delay in milliseconds before the popover closes after a trigger event.\n * Only works when `trigger=\"hover\"`\n *\n * @default 200\n */\n closeDelay?: number\n /**\n * Performance 🚀:\n * If `true`, the PopoverContent rendering will be deferred\n * until the popover is open.\n */\n isLazy?: boolean\n /**\n * Performance 🚀:\n * The lazy behavior of popover's content when not visible.\n * Only works when `isLazy={true}`\n *\n * - \"unmount\": The popover's content is always unmounted when not open.\n * - \"keepMounted\": The popover's content initially unmounted,\n * but stays mounted when popover is open.\n *\n * @default \"unmount\"\n */\n lazyBehavior?: LazyMode\n /**\n * If `true`, the popover will be positioned when it mounts\n * (even if it's not open)\n *\n * Note 🚨: We don't recommend using this in a popover/menu intensive UI or page\n * as it might affect scrolling performance.\n */\n computePositionOnMount?: boolean\n}\n\n/**\n * @internal\n */\nexport function usePopover(props: UsePopoverProps = {}) {\n const {\n closeOnBlur = true,\n closeOnEsc = true,\n initialFocusRef,\n id,\n returnFocusOnClose = true,\n autoFocus = true,\n arrowSize,\n arrowShadowColor,\n trigger = TRIGGER.click,\n openDelay = 200,\n closeDelay = 200,\n isLazy,\n lazyBehavior = \"unmount\",\n computePositionOnMount,\n ...popperProps\n } = props\n\n const { isOpen, onClose, onOpen, onToggle } = useDisclosure(props)\n\n const anchorRef = useRef(null)\n const triggerRef = useRef(null)\n const popoverRef = useRef(null)\n\n const isHoveringRef = useRef(false)\n\n const hasBeenOpened = useRef(false)\n if (isOpen) {\n hasBeenOpened.current = true\n }\n\n const [hasHeader, setHasHeader] = useState(false)\n const [hasBody, setHasBody] = useState(false)\n\n const uuid = useId()\n const uid = id ?? uuid\n const [triggerId, popoverId, headerId, bodyId] = [\n \"popover-trigger\",\n \"popover-content\",\n \"popover-header\",\n \"popover-body\",\n ].map((id) => `${id}-${uid}`)\n\n const {\n referenceRef,\n getArrowProps,\n getPopperProps,\n getArrowInnerProps,\n forceUpdate,\n } = usePopper({\n ...popperProps,\n enabled: isOpen || !!computePositionOnMount,\n })\n\n const animated = useAnimationState({ isOpen, ref: popoverRef })\n\n useFocusOnPointerDown({\n enabled: isOpen,\n ref: triggerRef,\n })\n\n useFocusOnHide(popoverRef, {\n focusRef: triggerRef,\n visible: isOpen,\n shouldFocus: returnFocusOnClose && trigger === TRIGGER.click,\n })\n\n useFocusOnShow(popoverRef, {\n focusRef: initialFocusRef,\n visible: isOpen,\n shouldFocus: autoFocus && trigger === TRIGGER.click,\n })\n\n const shouldRenderChildren = lazyDisclosure({\n wasSelected: hasBeenOpened.current,\n enabled: isLazy,\n mode: lazyBehavior,\n isSelected: animated.present,\n })\n\n const getPopoverProps: PropGetter = useCallback(\n (props = {}, _ref = null) => {\n const popoverProps: DOMAttributes = {\n ...props,\n style: {\n ...props.style,\n transformOrigin: popperCSSVars.transformOrigin.varRef,\n [popperCSSVars.arrowSize.var]: arrowSize\n ? `${arrowSize}px`\n : undefined,\n [popperCSSVars.arrowShadowColor.var]: arrowShadowColor,\n },\n ref: mergeRefs(popoverRef, _ref),\n children: shouldRenderChildren ? props.children : null,\n id: popoverId,\n tabIndex: -1,\n role: \"dialog\",\n onKeyDown: callAllHandlers(props.onKeyDown, (event) => {\n if (closeOnEsc && event.key === \"Escape\") {\n onClose()\n }\n }),\n onBlur: callAllHandlers(props.onBlur, (event) => {\n const relatedTarget = getRelatedTarget(event)\n const targetIsPopover = contains(popoverRef.current, relatedTarget)\n const targetIsTrigger = contains(triggerRef.current, relatedTarget)\n\n const isValidBlur = !targetIsPopover && !targetIsTrigger\n\n if (isOpen && closeOnBlur && isValidBlur) {\n onClose()\n }\n }),\n \"aria-labelledby\": hasHeader ? headerId : undefined,\n \"aria-describedby\": hasBody ? bodyId : undefined,\n }\n\n if (trigger === TRIGGER.hover) {\n popoverProps.role = \"tooltip\"\n popoverProps.onMouseEnter = callAllHandlers(props.onMouseEnter, () => {\n isHoveringRef.current = true\n })\n popoverProps.onMouseLeave = callAllHandlers(\n props.onMouseLeave,\n (event) => {\n // https://stackoverflow.com/questions/46831247/select-triggers-mouseleave-event-on-parent-element-in-mozilla-firefox\n if (event.nativeEvent.relatedTarget === null) {\n return\n }\n isHoveringRef.current = false\n setTimeout(() => onClose(), closeDelay)\n },\n )\n }\n\n return popoverProps\n },\n [\n shouldRenderChildren,\n popoverId,\n hasHeader,\n headerId,\n hasBody,\n bodyId,\n trigger,\n closeOnEsc,\n onClose,\n isOpen,\n closeOnBlur,\n closeDelay,\n arrowShadowColor,\n arrowSize,\n ],\n )\n\n const getPopoverPositionerProps: PropGetter = useCallback(\n (props = {}, forwardedRef = null) =>\n getPopperProps(\n {\n ...props,\n style: {\n visibility: isOpen ? \"visible\" : \"hidden\",\n ...props.style,\n },\n },\n forwardedRef,\n ),\n [isOpen, getPopperProps],\n )\n\n const getAnchorProps: PropGetter = useCallback(\n (props, _ref = null) => {\n return {\n ...props,\n // If anchor is rendered, it is used as reference.\n ref: mergeRefs(_ref, anchorRef, referenceRef),\n }\n },\n [anchorRef, referenceRef],\n )\n\n const openTimeout = useRef()\n const closeTimeout = useRef()\n\n const maybeReferenceRef = useCallback(\n (node: Element) => {\n // Don't override referenceRef in case the PopoverAnchor is rendered.\n if (anchorRef.current == null) {\n referenceRef(node)\n }\n },\n [referenceRef],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}, _ref = null) => {\n const triggerProps: DOMAttributes = {\n ...props,\n ref: mergeRefs(triggerRef, _ref, maybeReferenceRef),\n id: triggerId,\n \"aria-haspopup\": \"dialog\",\n \"aria-expanded\": isOpen,\n \"aria-controls\": popoverId,\n }\n\n if (trigger === TRIGGER.click) {\n triggerProps.onClick = callAllHandlers(props.onClick, onToggle)\n }\n\n if (trigger === TRIGGER.hover) {\n /**\n * Any content that shows on pointer hover should also show on keyboard focus.\n * Consider focus and blur to be the `hover` for keyboard users.\n *\n * @see https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html\n */\n triggerProps.onFocus = callAllHandlers(props.onFocus, () => {\n // If openTimeout.current does not exist, the user is using keyboard focus (not mouse hover/click)\n if (openTimeout.current === undefined) {\n onOpen()\n }\n })\n triggerProps.onBlur = callAllHandlers(props.onBlur, (event) => {\n const relatedTarget = getRelatedTarget(event)\n const isValidBlur = !contains(popoverRef.current, relatedTarget)\n\n if (isOpen && closeOnBlur && isValidBlur) {\n onClose()\n }\n })\n\n /**\n * Any content that shows on hover or focus must be dismissible.\n * This case pressing `Escape` will dismiss the popover\n */\n triggerProps.onKeyDown = callAllHandlers(props.onKeyDown, (event) => {\n if (event.key === \"Escape\") {\n onClose()\n }\n })\n\n triggerProps.onMouseEnter = callAllHandlers(props.onMouseEnter, () => {\n isHoveringRef.current = true\n openTimeout.current = window.setTimeout(() => onOpen(), openDelay)\n })\n\n triggerProps.onMouseLeave = callAllHandlers(props.onMouseLeave, () => {\n isHoveringRef.current = false\n\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n openTimeout.current = undefined\n }\n\n closeTimeout.current = window.setTimeout(() => {\n if (isHoveringRef.current === false) {\n onClose()\n }\n }, closeDelay)\n })\n }\n\n return triggerProps\n },\n [\n triggerId,\n isOpen,\n popoverId,\n trigger,\n maybeReferenceRef,\n onToggle,\n onOpen,\n closeOnBlur,\n onClose,\n openDelay,\n closeDelay,\n ],\n )\n\n useEffect(() => {\n return () => {\n if (openTimeout.current) {\n clearTimeout(openTimeout.current)\n }\n if (closeTimeout.current) {\n clearTimeout(closeTimeout.current)\n }\n }\n }, [])\n\n const getHeaderProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n id: headerId,\n ref: mergeRefs(ref, (node: HTMLElement | null) => {\n setHasHeader(!!node)\n }),\n }),\n [headerId],\n )\n\n const getBodyProps: PropGetter = useCallback(\n (props = {}, ref = null) => ({\n ...props,\n id: bodyId,\n ref: mergeRefs(ref, (node) => {\n setHasBody(!!node)\n }),\n }),\n [bodyId],\n )\n\n return {\n forceUpdate,\n isOpen,\n onAnimationComplete: animated.onComplete,\n onClose,\n getAnchorProps,\n getArrowProps,\n getArrowInnerProps,\n getPopoverPositionerProps,\n getPopoverProps,\n getTriggerProps,\n getHeaderProps,\n getBodyProps,\n }\n}\n\nexport type UsePopoverReturn = ReturnType\n\nfunction contains(parent: HTMLElement | null, child: HTMLElement | null) {\n return parent === child || parent?.contains(child)\n}\n\nfunction getRelatedTarget(event: React.FocusEvent) {\n const activeEl = event.currentTarget.ownerDocument.activeElement\n return (event.relatedTarget ?? activeEl) as HTMLElement | null\n}\n","import { createContext } from \"@chakra-ui/react-context\"\nimport { SystemStyleObject } from \"@chakra-ui/system\"\nimport { UsePopoverReturn } from \"./use-popover\"\n\nexport const [PopoverProvider, usePopoverContext] =\n createContext({\n name: \"PopoverContext\",\n errorMessage:\n \"usePopoverContext: `context` is undefined. Seems you forgot to wrap all popover components within ``\",\n })\n\nexport const [PopoverStylesProvider, usePopoverStyles] = createContext<\n Record\n>({\n name: `PopoverStylesContext`,\n errorMessage: `usePopoverStyles returned is 'undefined'. Seems you forgot to wrap the components in \"\" `,\n})\n","import { MaybeRenderProp } from \"@chakra-ui/react-types\"\nimport {\n omitThemingProps,\n ThemingProps,\n useMultiStyleConfig,\n useTheme,\n} from \"@chakra-ui/system\"\nimport { runIfFn } from \"@chakra-ui/shared-utils\"\nimport { PopoverProvider, PopoverStylesProvider } from \"./popover-context\"\nimport { usePopover, UsePopoverProps } from \"./use-popover\"\n\nexport interface PopoverProps extends UsePopoverProps, ThemingProps<\"Popover\"> {\n /**\n * The content of the popover. It is usually the `PopoverTrigger`,\n * and `PopoverContent`\n */\n children?: MaybeRenderProp<{\n isOpen: boolean\n onClose: () => void\n forceUpdate: (() => void) | undefined\n }>\n}\n\n/**\n * Popover is used to bring attention to specific user interface elements,\n * typically to suggest an action or to guide users through a new experience.\n *\n * @see Docs https://chakra-ui.com/docs/components/popover\n */\nexport function Popover(props: PopoverProps) {\n const styles = useMultiStyleConfig(\"Popover\", props)\n\n const { children, ...rest } = omitThemingProps(props)\n const theme = useTheme()\n const context = usePopover({ ...rest, direction: theme.direction })\n\n return (\n \n \n {runIfFn(children, {\n isOpen: context.isOpen,\n onClose: context.onClose,\n forceUpdate: context.forceUpdate,\n })}\n \n \n )\n}\n\nPopover.displayName = \"Popover\"\n","import { Children, cloneElement } from \"react\"\nimport { usePopoverContext } from \"./popover-context\"\n\n/**\n * PopoverTrigger opens the popover's content. It must be an interactive element\n * such as `button` or `a`.\n */\n\nexport function PopoverTrigger(props: { children: React.ReactNode }) {\n // enforce a single child\n const child: any = Children.only(props.children)\n const { getTriggerProps } = usePopoverContext()\n return cloneElement(child, getTriggerProps(child.props, child.ref))\n}\n\nPopoverTrigger.displayName = \"PopoverTrigger\"\n","import { chakra, HTMLChakraProps, forwardRef } from \"@chakra-ui/system\"\nimport { HTMLMotionProps, motion, Variant } from \"framer-motion\"\nimport React from \"react\"\nimport { usePopoverContext } from \"./popover-context\"\n\ntype HTMLMotionChakraProps = Omit<\n HTMLChakraProps,\n keyof HTMLMotionProps\n> &\n Omit<\n HTMLMotionProps,\n | \"style\"\n | \"onDrag\"\n | \"onDragEnd\"\n | \"onDragStart\"\n | \"onAnimationStart\"\n | \"variants\"\n | \"transition\"\n | \"children\"\n > & {\n variants?: MotionVariants\n }\n\ntype MotionVariants = Partial>\n\nfunction mergeVariants(variants?: MotionVariants): any {\n if (!variants) return\n return {\n enter: {\n ...variants.enter,\n visibility: \"visible\",\n },\n exit: {\n ...variants.exit,\n transitionEnd: {\n visibility: \"hidden\",\n },\n },\n }\n}\n\nconst scaleFade: MotionVariants = {\n exit: {\n opacity: 0,\n scale: 0.95,\n transition: {\n duration: 0.1,\n ease: [0.4, 0, 1, 1],\n },\n },\n enter: {\n scale: 1,\n opacity: 1,\n transition: {\n duration: 0.15,\n ease: [0, 0, 0.2, 1],\n },\n },\n}\n\nconst MotionSection = chakra(motion.section)\n\nexport interface PopoverTransitionProps\n extends HTMLMotionChakraProps<\"section\"> {}\n\nexport const PopoverTransition = forwardRef(function PopoverTransition(\n props: PopoverTransitionProps,\n ref: React.Ref,\n) {\n const { variants = scaleFade, ...rest } = props\n const { isOpen } = usePopoverContext()\n return (\n \n )\n})\n\nPopoverTransition.displayName = \"PopoverTransition\"\n","import { callAll, cx } from \"@chakra-ui/shared-utils\"\nimport {\n chakra,\n forwardRef,\n HTMLChakraProps,\n SystemStyleObject,\n} from \"@chakra-ui/system\"\nimport { HTMLMotionProps } from \"framer-motion\"\nimport { usePopoverContext, usePopoverStyles } from \"./popover-context\"\nimport { PopoverTransition, PopoverTransitionProps } from \"./popover-transition\"\n\nexport interface PopoverContentProps extends PopoverTransitionProps {\n rootProps?: HTMLChakraProps<\"div\">\n motionProps?: HTMLMotionProps<\"section\">\n}\n\nexport const PopoverContent = forwardRef(\n function PopoverContent(props, ref) {\n const { rootProps, motionProps, ...contentProps } = props\n\n const { getPopoverProps, getPopoverPositionerProps, onAnimationComplete } =\n usePopoverContext()\n\n const styles = usePopoverStyles()\n const contentStyles: SystemStyleObject = {\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n ...styles.content,\n }\n\n return (\n \n \n \n )\n },\n)\n\nPopoverContent.displayName = \"PopoverContent\"\n","import {\n chakra,\n ChakraProps,\n forwardRef,\n SystemStyleObject,\n useStyleConfig,\n} from \"@chakra-ui/system\"\nimport { cx } from \"@chakra-ui/shared-utils\"\n\nconst fallbackIcon = {\n path: (\n \n \n \n \n \n ),\n viewBox: \"0 0 24 24\",\n}\n\ntype Orientation = \"vertical\" | \"horizontal\"\n\nexport interface IconProps\n extends Omit, keyof ChakraProps>,\n ChakraProps {\n orientation?: Orientation\n}\n\n/**\n * The Icon component renders as an svg element to help define your own custom components.\n *\n * @see Docs https://chakra-ui.com/docs/components/icon#using-the-icon-component\n */\nexport const Icon = forwardRef((props, ref) => {\n const {\n as: element,\n viewBox,\n color = \"currentColor\",\n focusable = false,\n children,\n className,\n __css,\n ...rest\n } = props\n\n const _className = cx(\"chakra-icon\", className)\n const customStyles = useStyleConfig(\"Icon\", props)\n\n const styles: SystemStyleObject = {\n w: \"1em\",\n h: \"1em\",\n display: \"inline-block\",\n lineHeight: \"1em\",\n flexShrink: 0,\n color,\n ...__css,\n ...customStyles,\n }\n\n const shared: any = {\n ref,\n focusable,\n className: _className,\n __css: styles,\n }\n\n const _viewBox = viewBox ?? fallbackIcon.viewBox\n\n /**\n * If you're using an icon library like `react-icons`.\n * Note: anyone passing the `as` prop, should manage the `viewBox` from the external component\n */\n if (element && typeof element !== \"string\") {\n return \n }\n\n const _path = (children ?? fallbackIcon.path) as React.ReactNode\n\n return (\n \n {_path}\n \n )\n})\n\nIcon.displayName = \"Icon\"\n\nexport default Icon\n","import { forwardRef } from \"@chakra-ui/system\"\nimport { Children } from \"react\"\nimport { Icon, IconProps } from \"./icon\"\n\ninterface CreateIconOptions {\n /**\n * The icon `svg` viewBox\n * @default \"0 0 24 24\"\n */\n viewBox?: string\n /**\n * The `svg` path or group element\n * @type React.ReactElement | React.ReactElement[]\n */\n path?: React.ReactElement | React.ReactElement[]\n /**\n * If the `svg` has a single path, simply copy the path's `d` attribute\n */\n d?: string\n /**\n * The display name useful in the dev tools\n */\n displayName?: string\n /**\n * Default props automatically passed to the component; overwritable\n */\n defaultProps?: IconProps\n}\n\nexport function createIcon(options: CreateIconOptions) {\n const {\n viewBox = \"0 0 24 24\",\n d: pathDefinition,\n displayName,\n defaultProps = {},\n } = options\n const path = Children.toArray(options.path)\n\n const Comp = forwardRef((props, ref) => (\n \n {path.length ? path : }\n \n ))\n\n Comp.displayName = displayName\n\n return Comp\n}\n","import { createIcon } from \"@chakra-ui/icon\"\n\nexport const CloseIcon = createIcon({\n displayName: \"CloseIcon\",\n d: \"M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z\",\n})\n","////////////////////////////////////////////////////////////////////////////////\n//#region Types and Constants\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * Actions represent the type of change to a location value.\n */\nexport enum Action {\n /**\n * A POP indicates a change to an arbitrary index in the history stack, such\n * as a back or forward navigation. It does not describe the direction of the\n * navigation, only that the current index changed.\n *\n * Note: This is the default action for newly created history objects.\n */\n Pop = \"POP\",\n\n /**\n * A PUSH indicates a new entry being added to the history stack, such as when\n * a link is clicked and a new page loads. When this happens, all subsequent\n * entries in the stack are lost.\n */\n Push = \"PUSH\",\n\n /**\n * A REPLACE indicates the entry at the current index in the history stack\n * being replaced by a new one.\n */\n Replace = \"REPLACE\",\n}\n\n/**\n * The pathname, search, and hash values of a URL.\n */\nexport interface Path {\n /**\n * A URL pathname, beginning with a /.\n */\n pathname: string;\n\n /**\n * A URL search string, beginning with a ?.\n */\n search: string;\n\n /**\n * A URL fragment identifier, beginning with a #.\n */\n hash: string;\n}\n\n/**\n * An entry in a history stack. A location contains information about the\n * URL path, as well as possibly some arbitrary state and a key.\n */\nexport interface Location extends Path {\n /**\n * A value of arbitrary data associated with this location.\n */\n state: any;\n\n /**\n * A unique string associated with this location. May be used to safely store\n * and retrieve data in some other storage API, like `localStorage`.\n *\n * Note: This value is always \"default\" on the initial location.\n */\n key: string;\n}\n\n/**\n * A change to the current location.\n */\nexport interface Update {\n /**\n * The action that triggered the change.\n */\n action: Action;\n\n /**\n * The new location.\n */\n location: Location;\n\n /**\n * The delta between this location and the former location in the history stack\n */\n delta: number | null;\n}\n\n/**\n * A function that receives notifications about location changes.\n */\nexport interface Listener {\n (update: Update): void;\n}\n\n/**\n * Describes a location that is the destination of some navigation, either via\n * `history.push` or `history.replace`. May be either a URL or the pieces of a\n * URL path.\n */\nexport type To = string | Partial;\n\n/**\n * A history is an interface to the navigation stack. The history serves as the\n * source of truth for the current location, as well as provides a set of\n * methods that may be used to change it.\n *\n * It is similar to the DOM's `window.history` object, but with a smaller, more\n * focused API.\n */\nexport interface History {\n /**\n * The last action that modified the current location. This will always be\n * Action.Pop when a history instance is first created. This value is mutable.\n */\n readonly action: Action;\n\n /**\n * The current location. This value is mutable.\n */\n readonly location: Location;\n\n /**\n * Returns a valid href for the given `to` value that may be used as\n * the value of an attribute.\n *\n * @param to - The destination URL\n */\n createHref(to: To): string;\n\n /**\n * Returns a URL for the given `to` value\n *\n * @param to - The destination URL\n */\n createURL(to: To): URL;\n\n /**\n * Encode a location the same way window.history would do (no-op for memory\n * history) so we ensure our PUSH/REPLACE navigations for data routers\n * behave the same as POP\n *\n * @param to Unencoded path\n */\n encodeLocation(to: To): Path;\n\n /**\n * Pushes a new location onto the history stack, increasing its length by one.\n * If there were any entries in the stack after the current one, they are\n * lost.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n push(to: To, state?: any): void;\n\n /**\n * Replaces the current location in the history stack with a new one. The\n * location that was replaced will no longer be available.\n *\n * @param to - The new URL\n * @param state - Data to associate with the new location\n */\n replace(to: To, state?: any): void;\n\n /**\n * Navigates `n` entries backward/forward in the history stack relative to the\n * current index. For example, a \"back\" navigation would use go(-1).\n *\n * @param delta - The delta in the stack index\n */\n go(delta: number): void;\n\n /**\n * Sets up a listener that will be called whenever the current location\n * changes.\n *\n * @param listener - A function that will be called when the location changes\n * @returns unlisten - A function that may be used to stop listening\n */\n listen(listener: Listener): () => void;\n}\n\ntype HistoryState = {\n usr: any;\n key?: string;\n idx: number;\n};\n\nconst PopStateEventType = \"popstate\";\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Memory History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A user-supplied object that describes a location. Used when providing\n * entries to `createMemoryHistory` via its `initialEntries` option.\n */\nexport type InitialEntry = string | Partial;\n\nexport type MemoryHistoryOptions = {\n initialEntries?: InitialEntry[];\n initialIndex?: number;\n v5Compat?: boolean;\n};\n\n/**\n * A memory history stores locations in memory. This is useful in stateful\n * environments where there is no web browser, such as node tests or React\n * Native.\n */\nexport interface MemoryHistory extends History {\n /**\n * The current index in the history stack.\n */\n readonly index: number;\n}\n\n/**\n * Memory history stores the current location in memory. It is designed for use\n * in stateful non-browser environments like tests and React Native.\n */\nexport function createMemoryHistory(\n options: MemoryHistoryOptions = {}\n): MemoryHistory {\n let { initialEntries = [\"/\"], initialIndex, v5Compat = false } = options;\n let entries: Location[]; // Declare so we can access from createMemoryLocation\n entries = initialEntries.map((entry, index) =>\n createMemoryLocation(\n entry,\n typeof entry === \"string\" ? null : entry.state,\n index === 0 ? \"default\" : undefined\n )\n );\n let index = clampIndex(\n initialIndex == null ? entries.length - 1 : initialIndex\n );\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n function clampIndex(n: number): number {\n return Math.min(Math.max(n, 0), entries.length - 1);\n }\n function getCurrentLocation(): Location {\n return entries[index];\n }\n function createMemoryLocation(\n to: To,\n state: any = null,\n key?: string\n ): Location {\n let location = createLocation(\n entries ? getCurrentLocation().pathname : \"/\",\n to,\n state,\n key\n );\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in memory history: ${JSON.stringify(\n to\n )}`\n );\n return location;\n }\n\n function createHref(to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n let history: MemoryHistory = {\n get index() {\n return index;\n },\n get action() {\n return action;\n },\n get location() {\n return getCurrentLocation();\n },\n createHref,\n createURL(to) {\n return new URL(createHref(to), \"http://localhost\");\n },\n encodeLocation(to: To) {\n let path = typeof to === \"string\" ? parsePath(to) : to;\n return {\n pathname: path.pathname || \"\",\n search: path.search || \"\",\n hash: path.hash || \"\",\n };\n },\n push(to, state) {\n action = Action.Push;\n let nextLocation = createMemoryLocation(to, state);\n index += 1;\n entries.splice(index, entries.length, nextLocation);\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 1 });\n }\n },\n replace(to, state) {\n action = Action.Replace;\n let nextLocation = createMemoryLocation(to, state);\n entries[index] = nextLocation;\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 0 });\n }\n },\n go(delta) {\n action = Action.Pop;\n let nextIndex = clampIndex(index + delta);\n let nextLocation = entries[nextIndex];\n index = nextIndex;\n if (listener) {\n listener({ action, location: nextLocation, delta });\n }\n },\n listen(fn: Listener) {\n listener = fn;\n return () => {\n listener = null;\n };\n },\n };\n\n return history;\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Browser History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A browser history stores the current location in regular URLs in a web\n * browser environment. This is the standard for most web apps and provides the\n * cleanest URLs the browser's address bar.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#browserhistory\n */\nexport interface BrowserHistory extends UrlHistory {}\n\nexport type BrowserHistoryOptions = UrlHistoryOptions;\n\n/**\n * Browser history stores the location in regular URLs. This is the standard for\n * most web apps, but it requires some configuration on the server to ensure you\n * serve the same app at multiple URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createbrowserhistory\n */\nexport function createBrowserHistory(\n options: BrowserHistoryOptions = {}\n): BrowserHistory {\n function createBrowserLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let { pathname, search, hash } = window.location;\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createBrowserHref(window: Window, to: To) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n\n return getUrlBasedHistory(\n createBrowserLocation,\n createBrowserHref,\n null,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region Hash History\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * A hash history stores the current location in the fragment identifier portion\n * of the URL in a web browser environment.\n *\n * This is ideal for apps that do not control the server for some reason\n * (because the fragment identifier is never sent to the server), including some\n * shared hosting environments that do not provide fine-grained controls over\n * which pages are served at which URLs.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#hashhistory\n */\nexport interface HashHistory extends UrlHistory {}\n\nexport type HashHistoryOptions = UrlHistoryOptions;\n\n/**\n * Hash history stores the location in window.location.hash. This makes it ideal\n * for situations where you don't want to send the location to the server for\n * some reason, either because you do cannot configure it or the URL space is\n * reserved for something else.\n *\n * @see https://github.com/remix-run/history/tree/main/docs/api-reference.md#createhashhistory\n */\nexport function createHashHistory(\n options: HashHistoryOptions = {}\n): HashHistory {\n function createHashLocation(\n window: Window,\n globalHistory: Window[\"history\"]\n ) {\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n } = parsePath(window.location.hash.substr(1));\n\n // Hash URL should always have a leading / just like window.location.pathname\n // does, so if an app ends up at a route like /#something then we add a\n // leading slash so all of our path-matching behaves the same as if it would\n // in a browser router. This is particularly important when there exists a\n // root splat route () since that matches internally against\n // \"/*\" and we'd expect /#something to 404 in a hash router app.\n if (!pathname.startsWith(\"/\") && !pathname.startsWith(\".\")) {\n pathname = \"/\" + pathname;\n }\n\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n (globalHistory.state && globalHistory.state.usr) || null,\n (globalHistory.state && globalHistory.state.key) || \"default\"\n );\n }\n\n function createHashHref(window: Window, to: To) {\n let base = window.document.querySelector(\"base\");\n let href = \"\";\n\n if (base && base.getAttribute(\"href\")) {\n let url = window.location.href;\n let hashIndex = url.indexOf(\"#\");\n href = hashIndex === -1 ? url : url.slice(0, hashIndex);\n }\n\n return href + \"#\" + (typeof to === \"string\" ? to : createPath(to));\n }\n\n function validateHashLocation(location: Location, to: To) {\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in hash history.push(${JSON.stringify(\n to\n )})`\n );\n }\n\n return getUrlBasedHistory(\n createHashLocation,\n createHashHref,\n validateHashLocation,\n options\n );\n}\n//#endregion\n\n////////////////////////////////////////////////////////////////////////////////\n//#region UTILS\n////////////////////////////////////////////////////////////////////////////////\n\n/**\n * @private\n */\nexport function invariant(value: boolean, message?: string): asserts value;\nexport function invariant(\n value: T | null | undefined,\n message?: string\n): asserts value is T;\nexport function invariant(value: any, message?: string) {\n if (value === false || value === null || typeof value === \"undefined\") {\n throw new Error(message);\n }\n}\n\nexport function warning(cond: any, message: string) {\n if (!cond) {\n // eslint-disable-next-line no-console\n if (typeof console !== \"undefined\") console.warn(message);\n\n try {\n // Welcome to debugging history!\n //\n // This error is thrown as a convenience so you can more easily\n // find the source for a warning that appears in the console by\n // enabling \"pause on exceptions\" in your JavaScript debugger.\n throw new Error(message);\n // eslint-disable-next-line no-empty\n } catch (e) {}\n }\n}\n\nfunction createKey() {\n return Math.random().toString(36).substr(2, 8);\n}\n\n/**\n * For browser-based histories, we combine the state and key into an object\n */\nfunction getHistoryState(location: Location, index: number): HistoryState {\n return {\n usr: location.state,\n key: location.key,\n idx: index,\n };\n}\n\n/**\n * Creates a Location object with a unique key from the given Path\n */\nexport function createLocation(\n current: string | Location,\n to: To,\n state: any = null,\n key?: string\n): Readonly {\n let location: Readonly = {\n pathname: typeof current === \"string\" ? current : current.pathname,\n search: \"\",\n hash: \"\",\n ...(typeof to === \"string\" ? parsePath(to) : to),\n state,\n // TODO: This could be cleaned up. push/replace should probably just take\n // full Locations now and avoid the need to run through this flow at all\n // But that's a pretty big refactor to the current test suite so going to\n // keep as is for the time being and just let any incoming keys take precedence\n key: (to && (to as Location).key) || key || createKey(),\n };\n return location;\n}\n\n/**\n * Creates a string URL path from the given pathname, search, and hash components.\n */\nexport function createPath({\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n}: Partial) {\n if (search && search !== \"?\")\n pathname += search.charAt(0) === \"?\" ? search : \"?\" + search;\n if (hash && hash !== \"#\")\n pathname += hash.charAt(0) === \"#\" ? hash : \"#\" + hash;\n return pathname;\n}\n\n/**\n * Parses a string URL path into its separate pathname, search, and hash components.\n */\nexport function parsePath(path: string): Partial {\n let parsedPath: Partial = {};\n\n if (path) {\n let hashIndex = path.indexOf(\"#\");\n if (hashIndex >= 0) {\n parsedPath.hash = path.substr(hashIndex);\n path = path.substr(0, hashIndex);\n }\n\n let searchIndex = path.indexOf(\"?\");\n if (searchIndex >= 0) {\n parsedPath.search = path.substr(searchIndex);\n path = path.substr(0, searchIndex);\n }\n\n if (path) {\n parsedPath.pathname = path;\n }\n }\n\n return parsedPath;\n}\n\nexport interface UrlHistory extends History {}\n\nexport type UrlHistoryOptions = {\n window?: Window;\n v5Compat?: boolean;\n};\n\nfunction getUrlBasedHistory(\n getLocation: (window: Window, globalHistory: Window[\"history\"]) => Location,\n createHref: (window: Window, to: To) => string,\n validateLocation: ((location: Location, to: To) => void) | null,\n options: UrlHistoryOptions = {}\n): UrlHistory {\n let { window = document.defaultView!, v5Compat = false } = options;\n let globalHistory = window.history;\n let action = Action.Pop;\n let listener: Listener | null = null;\n\n let index = getIndex()!;\n // Index should only be null when we initialize. If not, it's because the\n // user called history.pushState or history.replaceState directly, in which\n // case we should log a warning as it will result in bugs.\n if (index == null) {\n index = 0;\n globalHistory.replaceState({ ...globalHistory.state, idx: index }, \"\");\n }\n\n function getIndex(): number {\n let state = globalHistory.state || { idx: null };\n return state.idx;\n }\n\n function handlePop() {\n action = Action.Pop;\n let nextIndex = getIndex();\n let delta = nextIndex == null ? null : nextIndex - index;\n index = nextIndex;\n if (listener) {\n listener({ action, location: history.location, delta });\n }\n }\n\n function push(to: To, state?: any) {\n action = Action.Push;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n index = getIndex() + 1;\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n\n // try...catch because iOS limits us to 100 pushState calls :/\n try {\n globalHistory.pushState(historyState, \"\", url);\n } catch (error) {\n // If the exception is because `state` can't be serialized, let that throw\n // outwards just like a replace call would so the dev knows the cause\n // https://html.spec.whatwg.org/multipage/nav-history-apis.html#shared-history-push/replace-state-steps\n // https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeinternal\n if (error instanceof DOMException && error.name === \"DataCloneError\") {\n throw error;\n }\n // They are going to lose state here, but there is no real\n // way to warn them about it since the page will refresh...\n window.location.assign(url);\n }\n\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 1 });\n }\n }\n\n function replace(to: To, state?: any) {\n action = Action.Replace;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n\n index = getIndex();\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n globalHistory.replaceState(historyState, \"\", url);\n\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 0 });\n }\n }\n\n function createURL(to: To): URL {\n // window.location.origin is \"null\" (the literal string value) in Firefox\n // under certain conditions, notably when serving from a local HTML file\n // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297\n let base =\n window.location.origin !== \"null\"\n ? window.location.origin\n : window.location.href;\n\n let href = typeof to === \"string\" ? to : createPath(to);\n invariant(\n base,\n `No window.location.(origin|href) available to create URL for href: ${href}`\n );\n return new URL(href, base);\n }\n\n let history: History = {\n get action() {\n return action;\n },\n get location() {\n return getLocation(window, globalHistory);\n },\n listen(fn: Listener) {\n if (listener) {\n throw new Error(\"A history only accepts one active listener\");\n }\n window.addEventListener(PopStateEventType, handlePop);\n listener = fn;\n\n return () => {\n window.removeEventListener(PopStateEventType, handlePop);\n listener = null;\n };\n },\n createHref(to) {\n return createHref(window, to);\n },\n createURL,\n encodeLocation(to) {\n // Encode a Location the same way window.location would\n let url = createURL(to);\n return {\n pathname: url.pathname,\n search: url.search,\n hash: url.hash,\n };\n },\n push,\n replace,\n go(n) {\n return globalHistory.go(n);\n },\n };\n\n return history;\n}\n\n//#endregion\n","import { createIcon } from \"@chakra-ui/icon\"\n\nexport const HamburgerIcon = createIcon({\n displayName: \"HamburgerIcon\",\n viewBox: \"0 0 24 24\",\n d: \"M 3 5 A 1.0001 1.0001 0 1 0 3 7 L 21 7 A 1.0001 1.0001 0 1 0 21 5 L 3 5 z M 3 11 A 1.0001 1.0001 0 1 0 3 13 L 21 13 A 1.0001 1.0001 0 1 0 21 11 L 3 11 z M 3 17 A 1.0001 1.0001 0 1 0 3 19 L 21 19 A 1.0001 1.0001 0 1 0 21 17 L 3 17 z\",\n})\n","import { createIcon } from \"@chakra-ui/icon\"\n\nexport const ChevronRightIcon = createIcon({\n d: \"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\",\n displayName: \"ChevronRightIcon\",\n})\n","import { createIcon } from \"@chakra-ui/icon\"\n\nexport const ChevronDownIcon = createIcon({\n displayName: \"ChevronDownIcon\",\n d: \"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z\",\n})\n","import setPrototypeOf from \"./setPrototypeOf.js\";\nimport isNativeReflectConstruct from \"./isNativeReflectConstruct.js\";\nexport default function _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n _construct = Reflect.construct.bind();\n } else {\n _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n return _construct.apply(null, arguments);\n}","import getPrototypeOf from \"./getPrototypeOf.js\";\nimport setPrototypeOf from \"./setPrototypeOf.js\";\nimport isNativeFunction from \"./isNativeFunction.js\";\nimport construct from \"./construct.js\";\nexport default function _wrapNativeSuper(Class) {\n var _cache = typeof Map === \"function\" ? new Map() : undefined;\n _wrapNativeSuper = function _wrapNativeSuper(Class) {\n if (Class === null || !isNativeFunction(Class)) return Class;\n if (typeof Class !== \"function\") {\n throw new TypeError(\"Super expression must either be null or a function\");\n }\n if (typeof _cache !== \"undefined\") {\n if (_cache.has(Class)) return _cache.get(Class);\n _cache.set(Class, Wrapper);\n }\n function Wrapper() {\n return construct(Class, arguments, getPrototypeOf(this).constructor);\n }\n Wrapper.prototype = Object.create(Class.prototype, {\n constructor: {\n value: Wrapper,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n return setPrototypeOf(Wrapper, Class);\n };\n return _wrapNativeSuper(Class);\n}","export default function _isNativeFunction(fn) {\n return Function.toString.call(fn).indexOf(\"[native code]\") !== -1;\n}","import type { Location, Path, To } from \"./history\";\nimport { warning, invariant, parsePath } from \"./history\";\n\n/**\n * Map of routeId -> data returned from a loader/action/error\n */\nexport interface RouteData {\n [routeId: string]: any;\n}\n\nexport enum ResultType {\n data = \"data\",\n deferred = \"deferred\",\n redirect = \"redirect\",\n error = \"error\",\n}\n\n/**\n * Successful result from a loader or action\n */\nexport interface SuccessResult {\n type: ResultType.data;\n data: any;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Successful defer() result from a loader or action\n */\nexport interface DeferredResult {\n type: ResultType.deferred;\n deferredData: DeferredData;\n statusCode?: number;\n headers?: Headers;\n}\n\n/**\n * Redirect result from a loader or action\n */\nexport interface RedirectResult {\n type: ResultType.redirect;\n status: number;\n location: string;\n revalidate: boolean;\n reloadDocument?: boolean;\n}\n\n/**\n * Unsuccessful result from a loader or action\n */\nexport interface ErrorResult {\n type: ResultType.error;\n error: any;\n headers?: Headers;\n}\n\n/**\n * Result from a loader or action - potentially successful or unsuccessful\n */\nexport type DataResult =\n | SuccessResult\n | DeferredResult\n | RedirectResult\n | ErrorResult;\n\ntype LowerCaseFormMethod = \"get\" | \"post\" | \"put\" | \"patch\" | \"delete\";\ntype UpperCaseFormMethod = Uppercase;\n\n/**\n * Users can specify either lowercase or uppercase form methods on
![](\"image.png\")
: