\n
\n )\n }\n\n return null\n}\n\nexport const LayoutWrapper: FunctionComponent{label}
\n \n \n );\n }\n if (modal) {\n let TEXT = \"text-white\";\n let BG = \"bg-red\";\n\n if (variant && variant === \"reverse\") {\n TEXT = \"text-black\";\n BG = \"bg-white\";\n }\n\n return (\n {label}
\n \n \n );\n }\n if (href) {\n return (\n {label}
\n \n \n );\n } else return null;\n }\n);\n","/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\n\n/* global Reflect, Promise */\nvar _extendStatics = function extendStatics(d, b) {\n _extendStatics = Object.setPrototypeOf || {\n __proto__: []\n } instanceof Array && function (d, b) {\n d.__proto__ = b;\n } || function (d, b) {\n for (var p in b) {\n if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];\n }\n };\n\n return _extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null) throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n\n _extendStatics(d, b);\n\n function __() {\n this.constructor = d;\n }\n\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nvar _assign = function __assign() {\n _assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n }\n\n return t;\n };\n\n return _assign.apply(this, arguments);\n};\n\nexport { _assign as __assign };\nexport function __rest(s, e) {\n var t = {};\n\n for (var p in s) {\n if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n }\n\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n }\n return t;\n}\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length,\n r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,\n d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {\n if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n }\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\nexport function __param(paramIndex, decorator) {\n return function (target, key) {\n decorator(target, key, paramIndex);\n };\n}\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\nexport function __awaiter(thisArg, _arguments, P, generator) {\n function adopt(value) {\n return value instanceof P ? value : new P(function (resolve) {\n resolve(value);\n });\n }\n\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) {\n try {\n step(generator.next(value));\n } catch (e) {\n reject(e);\n }\n }\n\n function rejected(value) {\n try {\n step(generator[\"throw\"](value));\n } catch (e) {\n reject(e);\n }\n }\n\n function step(result) {\n result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n }\n\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\nexport function __generator(thisArg, body) {\n var _ = {\n label: 0,\n sent: function sent() {\n if (t[0] & 1) throw t[1];\n return t[1];\n },\n trys: [],\n ops: []\n },\n f,\n y,\n t,\n g;\n return g = {\n next: verb(0),\n \"throw\": verb(1),\n \"return\": verb(2)\n }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function () {\n return this;\n }), g;\n\n function verb(n) {\n return function (v) {\n return step([n, v]);\n };\n }\n\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n\n while (_) {\n try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n\n switch (op[0]) {\n case 0:\n case 1:\n t = op;\n break;\n\n case 4:\n _.label++;\n return {\n value: op[1],\n done: false\n };\n\n case 5:\n _.label++;\n y = op[1];\n op = [0];\n continue;\n\n case 7:\n op = _.ops.pop();\n\n _.trys.pop();\n\n continue;\n\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {\n _ = 0;\n continue;\n }\n\n if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {\n _.label = op[1];\n break;\n }\n\n if (op[0] === 6 && _.label < t[1]) {\n _.label = t[1];\n t = op;\n break;\n }\n\n if (t && _.label < t[2]) {\n _.label = t[2];\n\n _.ops.push(op);\n\n break;\n }\n\n if (t[2]) _.ops.pop();\n\n _.trys.pop();\n\n continue;\n }\n\n op = body.call(thisArg, _);\n } catch (e) {\n op = [6, e];\n y = 0;\n } finally {\n f = t = 0;\n }\n }\n\n if (op[0] & 5) throw op[1];\n return {\n value: op[0] ? op[1] : void 0,\n done: true\n };\n }\n}\nexport var __createBinding = Object.create ? function (o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = {\n enumerable: true,\n get: function get() {\n return m[k];\n }\n };\n }\n\n Object.defineProperty(o, k2, desc);\n} : function (o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n};\nexport function __exportStar(m, o) {\n for (var p in m) {\n if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n }\n}\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator,\n m = s && o[s],\n i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function next() {\n if (o && i >= o.length) o = void 0;\n return {\n value: o && o[i++],\n done: !o\n };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o),\n r,\n ar = [],\n e;\n\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {\n ar.push(r.value);\n }\n } catch (error) {\n e = {\n error: error\n };\n } finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n } finally {\n if (e) throw e.error;\n }\n }\n\n return ar;\n}\n/** @deprecated */\n\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++) {\n ar = ar.concat(__read(arguments[i]));\n }\n\n return ar;\n}\n/** @deprecated */\n\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) {\n s += arguments[i].length;\n }\n\n for (var r = Array(s), k = 0, i = 0; i < il; i++) {\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {\n r[k] = a[j];\n }\n }\n\n return r;\n}\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []),\n i,\n q = [];\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () {\n return this;\n }, i;\n\n function verb(n) {\n if (g[n]) i[n] = function (v) {\n return new Promise(function (a, b) {\n q.push([n, v, a, b]) > 1 || resume(n, v);\n });\n };\n }\n\n function resume(n, v) {\n try {\n step(g[n](v));\n } catch (e) {\n settle(q[0][3], e);\n }\n }\n\n function step(r) {\n r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r);\n }\n\n function fulfill(value) {\n resume(\"next\", value);\n }\n\n function reject(value) {\n resume(\"throw\", value);\n }\n\n function settle(f, v) {\n if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]);\n }\n}\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) {\n throw e;\n }), verb(\"return\"), i[Symbol.iterator] = function () {\n return this;\n }, i;\n\n function verb(n, f) {\n i[n] = o[n] ? function (v) {\n return (p = !p) ? {\n value: __await(o[n](v)),\n done: n === \"return\"\n } : f ? f(v) : v;\n } : f;\n }\n}\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator],\n i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () {\n return this;\n }, i);\n\n function verb(n) {\n i[n] = o[n] && function (v) {\n return new Promise(function (resolve, reject) {\n v = o[n](v), settle(resolve, reject, v.done, v.value);\n });\n };\n }\n\n function settle(resolve, reject, d, v) {\n Promise.resolve(v).then(function (v) {\n resolve({\n value: v,\n done: d\n });\n }, reject);\n }\n}\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) {\n Object.defineProperty(cooked, \"raw\", {\n value: raw\n });\n } else {\n cooked.raw = raw;\n }\n\n return cooked;\n}\n;\n\nvar __setModuleDefault = Object.create ? function (o, v) {\n Object.defineProperty(o, \"default\", {\n enumerable: true,\n value: v\n });\n} : function (o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) {\n if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n }\n\n __setModuleDefault(result, mod);\n\n return result;\n}\nexport function __importDefault(mod) {\n return mod && mod.__esModule ? mod : {\n default: mod\n };\n}\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;\n}\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || typeof receiver !== \"object\" && typeof receiver !== \"function\") throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}","import { useEffect } from 'react';\n\nfunction useUnmountEffect(callback) {\n return useEffect(function () {\n return function () {\n return callback();\n };\n }, []);\n}\n\nexport { useUnmountEffect };","import { createContext } from 'react';\n/**\n * @public\n */\n\nvar PresenceContext = createContext(null);\nexport { PresenceContext };","import { useRef } from 'react';\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 */\n\nfunction useConstant(init) {\n var ref = useRef(null);\n\n if (ref.current === null) {\n ref.current = init();\n }\n\n return ref.current;\n}\n\nexport { useConstant };","import * as React from 'react';\nimport { useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.js';\nimport { useConstant } from '../../utils/use-constant.js';\nvar presenceId = 0;\n\nfunction getPresenceId() {\n var id = presenceId;\n presenceId++;\n return id;\n}\n\nvar PresenceChild = function PresenceChild(_a) {\n var children = _a.children,\n initial = _a.initial,\n isPresent = _a.isPresent,\n _onExitComplete = _a.onExitComplete,\n custom = _a.custom,\n presenceAffectsLayout = _a.presenceAffectsLayout;\n var presenceChildren = useConstant(newChildrenMap);\n var id = useConstant(getPresenceId);\n var context = useMemo(function () {\n return {\n id: id,\n initial: initial,\n isPresent: isPresent,\n custom: custom,\n onExitComplete: function onExitComplete(childId) {\n presenceChildren.set(childId, true);\n var allComplete = true;\n presenceChildren.forEach(function (isComplete) {\n if (!isComplete) allComplete = false;\n });\n allComplete && (_onExitComplete === null || _onExitComplete === void 0 ? void 0 : _onExitComplete());\n },\n register: function register(childId) {\n presenceChildren.set(childId, false);\n return function () {\n return presenceChildren.delete(childId);\n };\n }\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(function () {\n presenceChildren.forEach(function (_, key) {\n return presenceChildren.set(key, false);\n });\n }, [isPresent]);\n /**\n * If there's no `motion` components to fire exit animations, we want to remove this\n * component immediately.\n */\n\n React.useEffect(function () {\n !isPresent && !presenceChildren.size && (_onExitComplete === null || _onExitComplete === void 0 ? void 0 : _onExitComplete());\n }, [isPresent]);\n return React.createElement(PresenceContext.Provider, {\n value: context\n }, children);\n};\n\nfunction newChildrenMap() {\n return new Map();\n}\n\nexport { PresenceChild };","var defaultTimestep = 1 / 60 * 1000;\nvar getCurrentTime = typeof performance !== \"undefined\" ? function () {\n return performance.now();\n} : function () {\n return Date.now();\n};\nvar onNextFrame = typeof window !== \"undefined\" ? function (callback) {\n return window.requestAnimationFrame(callback);\n} : function (callback) {\n return setTimeout(function () {\n return callback(getCurrentTime());\n }, defaultTimestep);\n};\nexport { defaultTimestep, onNextFrame };","import { onNextFrame, defaultTimestep } from './on-next-frame.js';\nimport { createRenderStep } from './create-render-step.js';\nvar maxElapsed = 40;\nvar useDefaultElapsed = true;\nvar runNextFrame = false;\nvar isProcessing = false;\nvar frame = {\n delta: 0,\n timestamp: 0\n};\nvar stepsOrder = [\"read\", \"update\", \"preRender\", \"render\", \"postRender\"];\nvar steps = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {\n acc[key] = createRenderStep(function () {\n return runNextFrame = true;\n });\n return acc;\n}, {});\nvar sync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {\n var step = steps[key];\n\n acc[key] = function (process, keepAlive, immediate) {\n if (keepAlive === void 0) {\n keepAlive = false;\n }\n\n if (immediate === void 0) {\n immediate = false;\n }\n\n if (!runNextFrame) startLoop();\n return step.schedule(process, keepAlive, immediate);\n };\n\n return acc;\n}, {});\nvar cancelSync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {\n acc[key] = steps[key].cancel;\n return acc;\n}, {});\nvar flushSync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {\n acc[key] = function () {\n return steps[key].process(frame);\n };\n\n return acc;\n}, {});\n\nvar processStep = function processStep(stepId) {\n return steps[stepId].process(frame);\n};\n\nvar processFrame = function processFrame(timestamp) {\n runNextFrame = false;\n frame.delta = useDefaultElapsed ? defaultTimestep : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);\n frame.timestamp = timestamp;\n isProcessing = true;\n stepsOrder.forEach(processStep);\n isProcessing = false;\n\n if (runNextFrame) {\n useDefaultElapsed = false;\n onNextFrame(processFrame);\n }\n};\n\nvar startLoop = function startLoop() {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!isProcessing) onNextFrame(processFrame);\n};\n\nvar getFrameData = function getFrameData() {\n return frame;\n};\n\nexport default sync;\nexport { cancelSync, flushSync, getFrameData };","function createRenderStep(runNextFrame) {\n var toRun = [];\n var toRunNextFrame = [];\n var numToRun = 0;\n var isProcessing = false;\n var toKeepAlive = new WeakSet();\n var step = {\n schedule: function schedule(callback, keepAlive, immediate) {\n if (keepAlive === void 0) {\n keepAlive = false;\n }\n\n if (immediate === void 0) {\n immediate = false;\n }\n\n var addToCurrentFrame = immediate && isProcessing;\n var buffer = addToCurrentFrame ? toRun : toRunNextFrame;\n if (keepAlive) toKeepAlive.add(callback);\n\n if (buffer.indexOf(callback) === -1) {\n buffer.push(callback);\n if (addToCurrentFrame && isProcessing) numToRun = toRun.length;\n }\n\n return callback;\n },\n cancel: function cancel(callback) {\n var index = toRunNextFrame.indexOf(callback);\n if (index !== -1) toRunNextFrame.splice(index, 1);\n toKeepAlive.delete(callback);\n },\n process: function process(frameData) {\n var _a;\n\n isProcessing = true;\n _a = [toRunNextFrame, toRun], toRun = _a[0], toRunNextFrame = _a[1];\n toRunNextFrame.length = 0;\n numToRun = toRun.length;\n\n if (numToRun) {\n for (var i = 0; i < numToRun; i++) {\n var callback = toRun[i];\n callback(frameData);\n\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n }\n }\n\n isProcessing = false;\n }\n };\n return step;\n}\n\nexport { createRenderStep };","function noop(any) {\n return any;\n}\n\nexport { noop };","import { __assign } from 'tslib';\nimport { noop } from '../noop.js';\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 */\n\nfunction convertBoundingBoxToAxisBox(_a) {\n var top = _a.top,\n left = _a.left,\n right = _a.right,\n bottom = _a.bottom;\n return {\n x: {\n min: left,\n max: right\n },\n y: {\n min: top,\n max: bottom\n }\n };\n}\n\nfunction convertAxisBoxToBoundingBox(_a) {\n var x = _a.x,\n y = _a.y;\n return {\n top: y.min,\n bottom: y.max,\n left: x.min,\n right: x.max\n };\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 */\n\n\nfunction transformBoundingBox(_a, transformPoint) {\n var top = _a.top,\n left = _a.left,\n bottom = _a.bottom,\n right = _a.right;\n\n if (transformPoint === void 0) {\n transformPoint = noop;\n }\n\n var topLeft = transformPoint({\n x: left,\n y: top\n });\n var bottomRight = transformPoint({\n x: right,\n y: bottom\n });\n return {\n top: topLeft.y,\n left: topLeft.x,\n bottom: bottomRight.y,\n right: bottomRight.x\n };\n}\n/**\n * Create an empty axis box of zero size\n */\n\n\nfunction axisBox() {\n return {\n x: {\n min: 0,\n max: 1\n },\n y: {\n min: 0,\n max: 1\n }\n };\n}\n\nfunction copyAxisBox(box) {\n return {\n x: __assign({}, box.x),\n y: __assign({}, box.y)\n };\n}\n/**\n * Create an empty box delta\n */\n\n\nvar zeroDelta = {\n translate: 0,\n scale: 1,\n origin: 0,\n originPoint: 0\n};\n\nfunction delta() {\n return {\n x: __assign({}, zeroDelta),\n y: __assign({}, zeroDelta)\n };\n}\n\nexport { axisBox, convertAxisBoxToBoundingBox, convertBoundingBoxToAxisBox, copyAxisBox, delta, transformBoundingBox };","var compareByDepth = function compareByDepth(a, b) {\n return a.depth - b.depth;\n};\n\nexport { compareByDepth };","import sync from 'framesync';\nimport { copyAxisBox } from '../../../utils/geometry/index.js';\nimport { compareByDepth } from '../../utils/compare-by-depth.js';\n\nfunction isProjecting(visualElement) {\n var isEnabled = visualElement.projection.isEnabled;\n return isEnabled || visualElement.shouldResetTransform();\n}\n\nfunction collectProjectingAncestors(visualElement, ancestors) {\n if (ancestors === void 0) {\n ancestors = [];\n }\n\n var parent = visualElement.parent;\n if (parent) collectProjectingAncestors(parent, ancestors);\n if (isProjecting(visualElement)) ancestors.push(visualElement);\n return ancestors;\n}\n\nfunction collectProjectingChildren(visualElement) {\n var children = [];\n\n var addChild = function addChild(child) {\n if (isProjecting(child)) children.push(child);\n child.children.forEach(addChild);\n };\n\n visualElement.children.forEach(addChild);\n return children.sort(compareByDepth);\n}\n/**\n * Update the layoutState by measuring the DOM layout. This\n * should be called after resetting any layout-affecting transforms.\n */\n\n\nfunction updateLayoutMeasurement(visualElement) {\n if (visualElement.shouldResetTransform()) return;\n var layoutState = visualElement.getLayoutState();\n visualElement.notifyBeforeLayoutMeasure(layoutState.layout);\n layoutState.isHydrated = true;\n layoutState.layout = visualElement.measureViewportBox();\n layoutState.layoutCorrected = copyAxisBox(layoutState.layout);\n visualElement.notifyLayoutMeasure(layoutState.layout, visualElement.prevViewportBox || layoutState.layout);\n sync.update(function () {\n return visualElement.rebaseProjectionTarget();\n });\n}\n/**\n * Record the viewport box as it was before an expected mutation/re-render\n */\n\n\nfunction snapshotViewportBox(visualElement) {\n if (visualElement.shouldResetTransform()) return;\n visualElement.prevViewportBox = visualElement.measureViewportBox(false);\n /**\n * Update targetBox to match the prevViewportBox. This is just to ensure\n * that targetBox is affected by scroll in the same way as the measured box\n */\n\n visualElement.rebaseProjectionTarget(false, visualElement.prevViewportBox);\n}\n\nexport { collectProjectingAncestors, collectProjectingChildren, snapshotViewportBox, updateLayoutMeasurement };","var unresolvedJobs = new Set();\n\nfunction pushJob(stack, job, pointer) {\n if (!stack[pointer]) stack[pointer] = [];\n stack[pointer].push(job);\n}\n\nfunction batchLayout(callback) {\n unresolvedJobs.add(callback);\n return function () {\n return unresolvedJobs.delete(callback);\n };\n}\n\nfunction flushLayout() {\n if (!unresolvedJobs.size) return;\n var pointer = 0;\n var reads = [[]];\n var writes = [];\n\n var setRead = function setRead(job) {\n return pushJob(reads, job, pointer);\n };\n\n var setWrite = function setWrite(job) {\n pushJob(writes, job, pointer);\n pointer++;\n };\n /**\n * Resolve jobs into their array stacks\n */\n\n\n unresolvedJobs.forEach(function (callback) {\n callback(setRead, setWrite);\n pointer = 0;\n });\n unresolvedJobs.clear();\n /**\n * Execute jobs\n */\n\n var numStacks = writes.length;\n\n for (var i = 0; i <= numStacks; i++) {\n reads[i] && reads[i].forEach(executeJob);\n writes[i] && writes[i].forEach(executeJob);\n }\n}\n\nvar executeJob = function executeJob(job) {\n return job();\n};\n\nexport { batchLayout, flushLayout };","/**\n * @public\n */\nvar Presence;\n\n(function (Presence) {\n Presence[Presence[\"Entering\"] = 0] = \"Entering\";\n Presence[Presence[\"Present\"] = 1] = \"Present\";\n Presence[Presence[\"Exiting\"] = 2] = \"Exiting\";\n})(Presence || (Presence = {}));\n/**\n * @public\n */\n\n\nvar VisibilityAction;\n\n(function (VisibilityAction) {\n VisibilityAction[VisibilityAction[\"Hide\"] = 0] = \"Hide\";\n VisibilityAction[VisibilityAction[\"Show\"] = 1] = \"Show\";\n})(VisibilityAction || (VisibilityAction = {}));\n\nexport { Presence, VisibilityAction };","import { __spreadArray, __read } from 'tslib';\nimport sync, { flushSync } from 'framesync';\nimport { collectProjectingAncestors, updateLayoutMeasurement } from '../../../render/dom/projection/utils.js';\nimport { batchLayout, flushLayout } from '../../../render/dom/utils/batch-layout.js';\nimport { compareByDepth } from '../../../render/utils/compare-by-depth.js';\nimport { Presence } from '../types.js';\n/**\n * Default handlers for batching VisualElements\n */\n\nvar defaultHandler = {\n layoutReady: function layoutReady(child) {\n return child.notifyLayoutReady();\n }\n};\n/**\n * Create a batcher to process VisualElements\n */\n\nfunction createBatcher() {\n var queue = new Set();\n return {\n add: function add(child) {\n return queue.add(child);\n },\n flush: function flush(_a) {\n var _b = _a === void 0 ? defaultHandler : _a,\n layoutReady = _b.layoutReady,\n parent = _b.parent;\n\n batchLayout(function (read, write) {\n var order = Array.from(queue).sort(compareByDepth);\n var ancestors = parent ? collectProjectingAncestors(parent) : [];\n write(function () {\n var allElements = __spreadArray(__spreadArray([], __read(ancestors)), __read(order));\n\n allElements.forEach(function (element) {\n return element.resetTransform();\n });\n });\n read(function () {\n order.forEach(updateLayoutMeasurement);\n });\n write(function () {\n ancestors.forEach(function (element) {\n return element.restoreTransform();\n });\n order.forEach(layoutReady);\n });\n read(function () {\n /**\n * After all children have started animating, ensure any Entering components are set to Present.\n * If we add deferred animations (set up all animations and then start them in two loops) this\n * could be moved to the start loop. But it needs to happen after all the animations configs\n * are generated in AnimateSharedLayout as this relies on presence data\n */\n order.forEach(function (child) {\n if (child.isPresent) child.presence = Presence.Present;\n });\n });\n write(function () {\n /**\n * Starting these animations will have queued jobs on the frame loop. In some situations,\n * like when removing an element, these will be processed too late after the DOM is manipulated,\n * leaving a flash of incorrectly-projected content. By manually flushing these jobs\n * we ensure there's no flash.\n */\n flushSync.preRender();\n flushSync.render();\n });\n read(function () {\n /**\n * Schedule a callback at the end of the following frame to assign the latest projection\n * box to the prevViewportBox snapshot. Once global batching is in place this could be run\n * synchronously. But for now it ensures that if any nested `AnimateSharedLayout` top-level\n * child attempts to calculate its previous relative position against a prevViewportBox\n * it will be against its latest projection box instead, as the snapshot is useless beyond this\n * render.\n */\n sync.postRender(function () {\n return order.forEach(assignProjectionToSnapshot);\n });\n queue.clear();\n });\n }); // TODO: Need to find a layout-synchronous way of flushing this\n\n flushLayout();\n }\n };\n}\n\nfunction assignProjectionToSnapshot(child) {\n child.prevViewportBox = child.projection.target;\n}\n\nexport { createBatcher };","import { createContext } from 'react';\nimport { createBatcher } from '../components/AnimateSharedLayout/utils/batcher.js';\nvar SharedLayoutContext = createContext(createBatcher());\n/**\n * @internal\n */\n\nvar FramerTreeLayoutContext = createContext(createBatcher());\n\nfunction isSharedLayout(context) {\n return !!context.forceUpdate;\n}\n\nexport { FramerTreeLayoutContext, SharedLayoutContext, isSharedLayout };","import { __spreadArray, __read } from 'tslib';\nimport * as React from 'react';\nimport { useContext, useRef, cloneElement, Children, isValidElement } from 'react';\nimport { useForceUpdate } from '../../utils/use-force-update.js';\nimport { PresenceChild } from './PresenceChild.js';\nimport { SharedLayoutContext, isSharedLayout } from '../../context/SharedLayoutContext.js';\n\nfunction getChildKey(child) {\n return child.key || \"\";\n}\n\nfunction updateChildLookup(children, allChildren) {\n var seenChildren = process.env.NODE_ENV !== \"production\" ? new Set() : null;\n children.forEach(function (child) {\n var key = getChildKey(child);\n\n if (process.env.NODE_ENV !== \"production\" && seenChildren) {\n if (seenChildren.has(key)) {\n console.warn(\"Children of AnimatePresence require unique keys. \\\"\" + key + \"\\\" is a duplicate.\");\n }\n\n seenChildren.add(key);\n }\n\n allChildren.set(key, child);\n });\n}\n\nfunction onlyElements(children) {\n var filtered = []; // We use forEach here instead of map as map mutates the component key by preprending `.$`\n\n Children.forEach(children, function (child) {\n if (isValidElement(child)) 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 * @library\n *\n * Any `Frame` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { Frame, AnimatePresence } from 'framer'\n *\n * // As items are added and removed from `items`\n * export function Items({ items }) {\n * return (\n * \n {content?.internal?.content}\n
\n );\n}\n","var createDefinition = function createDefinition(propNames) {\n return {\n isEnabled: function isEnabled(props) {\n return propNames.some(function (name) {\n return !!props[name];\n });\n }\n };\n};\n\nvar featureDefinitions = {\n measureLayout: createDefinition([\"layout\", \"layoutId\", \"drag\", \"_layoutResetTransform\"]),\n animation: createDefinition([\"animate\", \"exit\", \"variants\", \"whileHover\", \"whileTap\", \"whileFocus\", \"whileDrag\"]),\n exit: createDefinition([\"exit\"]),\n drag: createDefinition([\"drag\", \"dragControls\"]),\n focus: createDefinition([\"whileFocus\"]),\n hover: createDefinition([\"whileHover\", \"onHoverStart\", \"onHoverEnd\"]),\n tap: createDefinition([\"whileTap\", \"onTap\", \"onTapStart\", \"onTapCancel\"]),\n pan: createDefinition([\"onPan\", \"onPanStart\", \"onPanSessionStart\", \"onPanEnd\"]),\n layoutAnimation: createDefinition([\"layout\", \"layoutId\"])\n};\n\nfunction loadFeatures(features) {\n for (var key in features) {\n var Component = features[key];\n if (Component !== null) featureDefinitions[key].Component = Component;\n }\n}\n\nexport { featureDefinitions, loadFeatures };","import { createContext } from 'react';\nvar LazyContext = createContext({\n strict: false\n});\nexport { LazyContext };","import { __assign } from 'tslib';\nimport * as React from 'react';\nimport { useContext } from 'react';\nimport { featureDefinitions } from './definitions.js';\nimport { invariant } from 'hey-listen';\nimport { LazyContext } from '../../context/LazyContext.js';\nvar featureNames = Object.keys(featureDefinitions);\nvar numFeatures = featureNames.length;\n/**\n * Load features via renderless components based on the provided MotionProps.\n */\n\nfunction useFeatures(props, visualElement, preloadedFeatures) {\n var features = [];\n var lazyContext = useContext(LazyContext);\n if (!visualElement) return null;\n /**\n * If we're in development mode, check to make sure we're not rendering a motion component\n * as a child of LazyMotion, as this will break the file-size benefits of using it.\n */\n\n if (process.env.NODE_ENV !== \"production\" && preloadedFeatures && lazyContext.strict) {\n invariant(false, \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\");\n }\n\n for (var i = 0; i < numFeatures; i++) {\n var name_1 = featureNames[i];\n var _a = featureDefinitions[name_1],\n isEnabled = _a.isEnabled,\n Component = _a.Component;\n /**\n * It might be possible in the future to use this moment to\n * dynamically request functionality. In initial tests this\n * was producing a lot of duplication amongst bundles.\n */\n\n if (isEnabled(props) && Component) {\n features.push(React.createElement(Component, __assign({\n key: name_1\n }, props, {\n visualElement: visualElement\n })));\n }\n }\n\n return features;\n}\n\nexport { useFeatures };","import { createContext } from 'react';\n/**\n * @public\n */\n\nvar MotionConfigContext = createContext({\n transformPagePoint: function transformPagePoint(p) {\n return p;\n },\n isStatic: false\n});\nexport { MotionConfigContext };","import { useContext, createContext } from 'react';\nvar MotionContext = createContext({});\n\nfunction useVisualElementContext() {\n return useContext(MotionContext).visualElement;\n}\n\nexport { MotionContext, useVisualElementContext };","import { useContext, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.js';\nimport { useConstant } from '../../utils/use-constant.js';\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 */\n\nfunction usePresence() {\n var context = useContext(PresenceContext);\n if (context === null) return [true, null];\n var isPresent = context.isPresent,\n onExitComplete = context.onExitComplete,\n register = context.register; // It's safe to call the following hooks conditionally (after an early return) because the context will always\n // either be null or non-null for the lifespan of the component.\n // Replace with useOpaqueId when released in React\n\n var id = useUniqueId();\n useEffect(function () {\n return register(id);\n }, []);\n\n var safeToRemove = function safeToRemove() {\n return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id);\n };\n\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 */\n\n\nfunction useIsPresent() {\n return isPresent(useContext(PresenceContext));\n}\n\nfunction isPresent(context) {\n return context === null ? true : context.isPresent;\n}\n\nvar counter = 0;\n\nvar incrementId = function incrementId() {\n return counter++;\n};\n\nvar useUniqueId = function useUniqueId() {\n return useConstant(incrementId);\n};\n\nexport { isPresent, useIsPresent, usePresence };","import { createContext } from 'react';\n/**\n * @internal\n */\n\nvar LayoutGroupContext = createContext(null);\nexport { LayoutGroupContext };","var isBrowser = typeof window !== \"undefined\";\nexport { isBrowser };","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.js';\nvar useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\nexport { useIsomorphicLayoutEffect };","import { __assign } from 'tslib';\nimport { useContext, useRef, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.js';\nimport { isPresent } from '../../components/AnimatePresence/use-presence.js';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.js';\nimport { useVisualElementContext } from '../../context/MotionContext/index.js';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.js';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.js';\nimport { LazyContext } from '../../context/LazyContext.js';\n\nfunction useLayoutId(_a) {\n var layoutId = _a.layoutId;\n var layoutGroupId = useContext(LayoutGroupContext);\n return layoutGroupId && layoutId !== undefined ? layoutGroupId + \"-\" + layoutId : layoutId;\n}\n\nfunction useVisualElement(Component, visualState, props, createVisualElement) {\n var config = useContext(MotionConfigContext);\n var lazyContext = useContext(LazyContext);\n var parent = useVisualElementContext();\n var presenceContext = useContext(PresenceContext);\n var layoutId = useLayoutId(props);\n var visualElementRef = useRef(undefined);\n /**\n * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n */\n\n if (!createVisualElement) createVisualElement = lazyContext.renderer;\n\n if (!visualElementRef.current && createVisualElement) {\n visualElementRef.current = createVisualElement(Component, {\n visualState: visualState,\n parent: parent,\n props: __assign(__assign({}, props), {\n layoutId: layoutId\n }),\n presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,\n blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false\n });\n }\n\n var visualElement = visualElementRef.current;\n useIsomorphicLayoutEffect(function () {\n if (!visualElement) return;\n visualElement.setProps(__assign(__assign(__assign({}, config), props), {\n layoutId: layoutId\n }));\n visualElement.isPresent = isPresent(presenceContext);\n visualElement.isPresenceRoot = !parent || parent.presenceId !== (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id);\n /**\n * Fire a render to ensure the latest state is reflected on-screen.\n */\n\n visualElement.syncRender();\n });\n useEffect(function () {\n var _a;\n\n if (!visualElement) return;\n /**\n * In a future refactor we can replace the features-as-components and\n * have this loop through them all firing \"effect\" listeners\n */\n\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges();\n });\n useIsomorphicLayoutEffect(function () {\n return function () {\n return visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount();\n };\n }, []);\n return visualElement;\n}\n\nexport { useVisualElement };","function isRefObject(ref) {\n return typeof ref === \"object\" && Object.prototype.hasOwnProperty.call(ref, \"current\");\n}\n\nexport { isRefObject };","/**\n * Decides if the supplied variable is an array of variant labels\n */\nfunction isVariantLabels(v) {\n return Array.isArray(v);\n}\n/**\n * Decides if the supplied variable is variant label\n */\n\n\nfunction isVariantLabel(v) {\n return typeof v === \"string\" || isVariantLabels(v);\n}\n/**\n * Creates an object containing the latest state of every MotionValue on a VisualElement\n */\n\n\nfunction getCurrent(visualElement) {\n var current = {};\n visualElement.forEachValue(function (value, key) {\n return current[key] = value.get();\n });\n return current;\n}\n/**\n * Creates an object containing the latest velocity of every MotionValue on a VisualElement\n */\n\n\nfunction getVelocity(visualElement) {\n var velocity = {};\n visualElement.forEachValue(function (value, key) {\n return velocity[key] = value.getVelocity();\n });\n return velocity;\n}\n\nfunction resolveVariantFromProps(props, definition, custom, currentValues, currentVelocity) {\n var _a;\n\n if (currentValues === void 0) {\n currentValues = {};\n }\n\n if (currentVelocity === void 0) {\n currentVelocity = {};\n }\n\n if (typeof definition === \"string\") {\n definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];\n }\n\n return typeof definition === \"function\" ? definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity) : definition;\n}\n\nfunction resolveVariant(visualElement, definition, custom) {\n var props = visualElement.getProps();\n return resolveVariantFromProps(props, definition, custom !== null && custom !== void 0 ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement));\n}\n\nfunction checkIfControllingVariants(props) {\n var _a;\n\n return typeof ((_a = props.animate) === null || _a === void 0 ? void 0 : _a.start) === \"function\" || isVariantLabel(props.initial) || isVariantLabel(props.animate) || isVariantLabel(props.whileHover) || isVariantLabel(props.whileDrag) || isVariantLabel(props.whileTap) || isVariantLabel(props.whileFocus) || isVariantLabel(props.exit);\n}\n\nfunction checkIfVariantNode(props) {\n return Boolean(checkIfControllingVariants(props) || props.variants);\n}\n\nexport { checkIfControllingVariants, checkIfVariantNode, isVariantLabel, isVariantLabels, resolveVariant, resolveVariantFromProps };","import { useMemo, useContext } from 'react';\nimport { MotionContext } from './index.js';\nimport { getCurrentTreeVariants } from './utils.js';\n\nfunction useCreateMotionContext(props, isStatic) {\n var _a = getCurrentTreeVariants(props, useContext(MotionContext)),\n initial = _a.initial,\n animate = _a.animate;\n\n return useMemo(function () {\n return {\n initial: initial,\n animate: animate\n };\n },\n /**\n * Only break memoisation in static mode\n */\n isStatic ? [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)] : []);\n}\n\nfunction variantLabelsAsDependency(prop) {\n return Array.isArray(prop) ? prop.join(\" \") : prop;\n}\n\nexport { useCreateMotionContext };","import { checkIfControllingVariants, isVariantLabel } from '../../render/utils/variants.js';\n\nfunction getCurrentTreeVariants(props, context) {\n if (checkIfControllingVariants(props)) {\n var initial = props.initial,\n animate = props.animate;\n return {\n initial: initial === false || isVariantLabel(initial) ? initial : undefined,\n animate: isVariantLabel(animate) ? animate : undefined\n };\n }\n\n return props.inherit !== false ? context : {};\n}\n\nexport { getCurrentTreeVariants };","import * as React from 'react';\nimport { forwardRef, useContext } from 'react';\nimport { useFeatures } from './features/use-features.js';\nimport { MotionConfigContext } from '../context/MotionConfigContext.js';\nimport { MotionContext } from '../context/MotionContext/index.js';\nimport { useVisualElement } from './utils/use-visual-element.js';\nimport { useMotionRef } from './utils/use-motion-ref.js';\nimport { useCreateMotionContext } from '../context/MotionContext/create.js';\nimport { loadFeatures } from './features/definitions.js';\nimport { isBrowser } from '../utils/is-browser.js';\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n *\n * @internal\n */\n\nfunction createMotionComponent(_a) {\n var preloadedFeatures = _a.preloadedFeatures,\n createVisualElement = _a.createVisualElement,\n useRender = _a.useRender,\n useVisualState = _a.useVisualState,\n Component = _a.Component;\n preloadedFeatures && loadFeatures(preloadedFeatures);\n\n function MotionComponent(props, externalRef) {\n /**\n * If we're rendering in a static environment, we only visually update the component\n * as a result of a React-rerender rather than interactions or animations. This\n * means we don't need to load additional memory structures like VisualElement,\n * or any gesture/animation features.\n */\n var isStatic = useContext(MotionConfigContext).isStatic;\n var features = null;\n /**\n * Create the tree context. This is memoized and will only trigger renders\n * when the current tree variant changes in static mode.\n */\n\n var context = useCreateMotionContext(props, isStatic);\n /**\n *\n */\n\n var visualState = useVisualState(props, isStatic);\n\n if (!isStatic && isBrowser) {\n /**\n * Create a VisualElement for this component. A VisualElement provides a common\n * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n * providing a way of rendering to these APIs outside of the React render loop\n * for more performant animations and interactions\n */\n context.visualElement = useVisualElement(Component, visualState, props, createVisualElement);\n /**\n * Load Motion gesture and animation features. These are rendered as renderless\n * components so each feature can optionally make use of React lifecycle methods.\n *\n * TODO: The intention is to move these away from a React-centric to a\n * VisualElement-centric lifecycle scheme.\n */\n\n features = useFeatures(props, context.visualElement, preloadedFeatures);\n }\n /**\n * The mount order and hierarchy is specific to ensure our element ref\n * is hydrated by the time features fire their effects.\n */\n\n\n return React.createElement(React.Fragment, null, React.createElement(MotionContext.Provider, {\n value: context\n }, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic)), features);\n }\n\n return forwardRef(MotionComponent);\n}\n\nexport { createMotionComponent };","import { useCallback } from 'react';\nimport { isRefObject } from '../../utils/is-ref-object.js';\n/**\n * Creates a ref function that, when called, hydrates the provided\n * external ref and VisualElement.\n */\n\nfunction useMotionRef(visualState, visualElement, externalRef) {\n return useCallback(function (instance) {\n var _a;\n\n instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));\n\n if (visualElement) {\n instance ? visualElement.mount(instance) : visualElement.unmount();\n }\n\n if (externalRef) {\n if (typeof externalRef === \"function\") {\n externalRef(instance);\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 * We keep these listed seperately as we use the lowercase tag names as part\n * of the runtime bundle to detect SVG components\n */\nvar lowercaseSVGElements = [\"animate\", \"circle\", \"defs\", \"desc\", \"ellipse\", \"g\", \"image\", \"line\", \"filter\", \"marker\", \"mask\", \"metadata\", \"path\", \"pattern\", \"polygon\", \"polyline\", \"rect\", \"stop\", \"svg\", \"switch\", \"symbol\", \"text\", \"tspan\", \"use\", \"view\"];\nexport { lowercaseSVGElements };","import { lowercaseSVGElements } from '../../svg/lowercase-elements.js';\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 } 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\n return false;\n}\n\nexport { isSVGComponent };","var valueScaleCorrection = {};\n/**\n * @internal\n */\n\nfunction addScaleCorrection(correctors) {\n for (var key in correctors) {\n valueScaleCorrection[key] = correctors[key];\n }\n}\n\nexport { addScaleCorrection, valueScaleCorrection };","/**\n * A list of all transformable axes. We'll use this list to generated a version\n * of each axes for each transform.\n */\nvar transformAxes = [\"\", \"X\", \"Y\", \"Z\"];\n/**\n * An ordered array of each transformable value. By default, transform values\n * will be sorted to this order.\n */\n\nvar order = [\"translate\", \"scale\", \"rotate\", \"skew\"];\n/**\n * Generate a list of every possible transform key.\n */\n\nvar transformProps = [\"transformPerspective\", \"x\", \"y\", \"z\"];\norder.forEach(function (operationKey) {\n return transformAxes.forEach(function (axesKey) {\n return transformProps.push(operationKey + axesKey);\n });\n});\n/**\n * A function to use with Array.sort to sort transform keys by their default order.\n */\n\nfunction sortTransformProps(a, b) {\n return transformProps.indexOf(a) - transformProps.indexOf(b);\n}\n/**\n * A quick lookup for transform props.\n */\n\n\nvar transformPropSet = new Set(transformProps);\n\nfunction isTransformProp(key) {\n return transformPropSet.has(key);\n}\n/**\n * A quick lookup for transform origin props\n */\n\n\nvar transformOriginProps = new Set([\"originX\", \"originY\", \"originZ\"]);\n\nfunction isTransformOriginProp(key) {\n return transformOriginProps.has(key);\n}\n\nexport { isTransformOriginProp, isTransformProp, sortTransformProps, transformAxes, transformProps };","import { valueScaleCorrection } from '../../render/dom/projection/scale-correction.js';\nimport { isTransformProp, isTransformOriginProp } from '../../render/html/utils/transform.js';\n\nfunction isForcedMotionValue(key, _a) {\n var layout = _a.layout,\n layoutId = _a.layoutId;\n return isTransformProp(key) || isTransformOriginProp(key) || (layout || layoutId !== undefined) && (!!valueScaleCorrection[key] || key === \"opacity\");\n}\n\nexport { isForcedMotionValue };","var isMotionValue = function isMotionValue(value) {\n return value !== null && typeof value === \"object\" && value.getVelocity;\n};\n\nexport { isMotionValue };","import { sortTransformProps } from './transform.js';\nvar translateAlias = {\n x: \"translateX\",\n y: \"translateY\",\n z: \"translateZ\",\n transformPerspective: \"perspective\"\n};\n/**\n * Build a CSS transform style from individual x/y/scale etc properties.\n *\n * This outputs with a default order of transforms/scales/rotations, this can be customised by\n * providing a transformTemplate function.\n */\n\nfunction buildTransform(_a, _b, transformIsDefault, transformTemplate) {\n var transform = _a.transform,\n transformKeys = _a.transformKeys;\n var _c = _b.enableHardwareAcceleration,\n enableHardwareAcceleration = _c === void 0 ? true : _c,\n _d = _b.allowTransformNone,\n allowTransformNone = _d === void 0 ? true : _d; // The transform string we're going to build into.\n\n var transformString = \"\"; // Transform keys into their default order - this will determine the output order.\n\n transformKeys.sort(sortTransformProps); // Track whether the defined transform has a defined z so we don't add a\n // second to enable hardware acceleration\n\n var transformHasZ = false; // Loop over each transform and build them into transformString\n\n var numTransformKeys = transformKeys.length;\n\n for (var i = 0; i < numTransformKeys; i++) {\n var key = transformKeys[i];\n transformString += (translateAlias[key] || key) + \"(\" + transform[key] + \") \";\n if (key === \"z\") transformHasZ = true;\n }\n\n if (!transformHasZ && enableHardwareAcceleration) {\n transformString += \"translateZ(0)\";\n } else {\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\n\n if (transformTemplate) {\n transformString = transformTemplate(transform, transformIsDefault ? \"\" : transformString);\n } else if (allowTransformNone && transformIsDefault) {\n transformString = \"none\";\n }\n\n return transformString;\n}\n/**\n * Build a transformOrigin style. Uses the same defaults as the browser for\n * undefined origins.\n */\n\n\nfunction buildTransformOrigin(_a) {\n var _b = _a.originX,\n originX = _b === void 0 ? \"50%\" : _b,\n _c = _a.originY,\n originY = _c === void 0 ? \"50%\" : _c,\n _d = _a.originZ,\n originZ = _d === void 0 ? 0 : _d;\n return originX + \" \" + originY + \" \" + originZ;\n}\n\nexport { buildTransform, buildTransformOrigin };","/**\n * Returns true if the provided key is a CSS variable\n */\nfunction isCSSVariable(key) {\n return key.startsWith(\"--\");\n}\n\nexport { isCSSVariable };","/**\n * Provided a value and a ValueType, returns the value as that value type.\n */\nvar getValueAsType = function getValueAsType(value, type) {\n return type && typeof value === \"number\" ? type.transform(value) : value;\n};\n\nexport { getValueAsType };","var clamp = function clamp(min, max) {\n return function (v) {\n return Math.max(Math.min(v, max), min);\n };\n};\n\nvar sanitize = function sanitize(v) {\n return v % 1 ? Number(v.toFixed(5)) : v;\n};\n\nvar floatRegex = /(-)?([\\d]*\\.?[\\d])+/g;\nvar colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2,3}\\s*\\/*\\s*[\\d\\.]+%?\\))/gi;\nvar singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2,3}\\s*\\/*\\s*[\\d\\.]+%?\\))$/i;\n\nfunction isString(v) {\n return typeof v === 'string';\n}\n\nexport { clamp, colorRegex, floatRegex, isString, sanitize, singleColorRegex };","import { __assign } from 'tslib';\nimport { isString } from '../utils.js';\n\nvar createUnitType = function createUnitType(unit) {\n return {\n test: function test(v) {\n return isString(v) && v.endsWith(unit) && v.split(' ').length === 1;\n },\n parse: parseFloat,\n transform: function transform(v) {\n return \"\" + v + unit;\n }\n };\n};\n\nvar degrees = createUnitType('deg');\nvar percent = createUnitType('%');\nvar px = createUnitType('px');\nvar vh = createUnitType('vh');\nvar vw = createUnitType('vw');\n\nvar progressPercentage = __assign(__assign({}, percent), {\n parse: function parse(v) {\n return percent.parse(v) / 100;\n },\n transform: function transform(v) {\n return percent.transform(v * 100);\n }\n});\n\nexport { degrees, percent, progressPercentage, px, vh, vw };","import { __assign } from 'tslib';\nimport { clamp } from '../utils.js';\nvar number = {\n test: function test(v) {\n return typeof v === 'number';\n },\n parse: parseFloat,\n transform: function transform(v) {\n return v;\n }\n};\n\nvar alpha = __assign(__assign({}, number), {\n transform: clamp(0, 1)\n});\n\nvar scale = __assign(__assign({}, number), {\n default: 1\n});\n\nexport { alpha, number, scale };","import { __assign } from 'tslib';\nimport { number } from 'style-value-types';\n\nvar int = __assign(__assign({}, number), {\n transform: Math.round\n});\n\nexport { int };","import { px, degrees, scale, alpha, progressPercentage } from 'style-value-types';\nimport { int } from './type-int.js';\nvar 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: 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};\nexport { numberValueTypes };","import { valueScaleCorrection } from '../../dom/projection/scale-correction.js';\nimport { buildTransform, buildTransformOrigin } from './build-transform.js';\nimport { isCSSVariable } from '../../dom/utils/is-css-variable.js';\nimport { isTransformProp, isTransformOriginProp } from './transform.js';\nimport { getValueAsType } from '../../dom/value-types/get-as-type.js';\nimport { numberValueTypes } from '../../dom/value-types/number.js';\n\nfunction buildHTMLStyles(state, latestValues, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin) {\n var _a;\n\n var style = state.style,\n vars = state.vars,\n transform = state.transform,\n transformKeys = state.transformKeys,\n transformOrigin = state.transformOrigin; // Empty the transformKeys array. As we're throwing out refs to its items\n // this might not be as cheap as suspected. Maybe using the array as a buffer\n // with a manual incrementation would be better.\n\n transformKeys.length = 0; // Track whether we encounter any transform or transformOrigin values.\n\n var hasTransform = false;\n var hasTransformOrigin = false; // Does the calculated transform essentially equal \"none\"?\n\n var transformIsNone = true;\n /**\n * Loop over all our latest animated values and decide whether to handle them\n * as a style or CSS variable.\n *\n * Transforms and transform origins are kept seperately for further processing.\n */\n\n for (var key in latestValues) {\n var value = latestValues[key];\n /**\n * If this is a CSS variable we don't do any further processing.\n */\n\n if (isCSSVariable(key)) {\n vars[key] = value;\n continue;\n } // Convert the value to its default value type, ie 0 -> \"0px\"\n\n\n var valueType = numberValueTypes[key];\n var valueAsType = getValueAsType(value, valueType);\n\n if (isTransformProp(key)) {\n // If this is a transform, flag to enable further transform processing\n hasTransform = true;\n transform[key] = valueAsType;\n transformKeys.push(key); // If we already know we have a non-default transform, early return\n\n if (!transformIsNone) continue; // Otherwise check to see if this is a default transform\n\n if (value !== ((_a = valueType.default) !== null && _a !== void 0 ? _a : 0)) transformIsNone = false;\n } else if (isTransformOriginProp(key)) {\n transformOrigin[key] = valueAsType; // If this is a transform origin, flag and enable further transform-origin processing\n\n hasTransformOrigin = true;\n } else {\n /**\n * If layout projection is on, and we need to perform scale correction for this\n * value type, perform it.\n */\n if ((projection === null || projection === void 0 ? void 0 : projection.isHydrated) && (layoutState === null || layoutState === void 0 ? void 0 : layoutState.isHydrated) && valueScaleCorrection[key]) {\n var correctedValue = valueScaleCorrection[key].process(value, layoutState, projection);\n /**\n * Scale-correctable values can define a number of other values to break\n * down into. For instance borderRadius needs applying to borderBottomLeftRadius etc\n */\n\n var applyTo = valueScaleCorrection[key].applyTo;\n\n if (applyTo) {\n var num = applyTo.length;\n\n for (var i = 0; i < num; i++) {\n style[applyTo[i]] = correctedValue;\n }\n } else {\n style[key] = correctedValue;\n }\n } else {\n style[key] = valueAsType;\n }\n }\n }\n\n if (layoutState && projection && buildProjectionTransform && buildProjectionTransformOrigin) {\n style.transform = buildProjectionTransform(layoutState.deltaFinal, layoutState.treeScale, hasTransform ? transform : undefined);\n\n if (transformTemplate) {\n style.transform = transformTemplate(transform, style.transform);\n }\n\n style.transformOrigin = buildProjectionTransformOrigin(layoutState);\n } else {\n if (hasTransform) {\n style.transform = buildTransform(state, options, transformIsNone, transformTemplate);\n }\n\n if (hasTransformOrigin) {\n style.transformOrigin = buildTransformOrigin(transformOrigin);\n }\n }\n}\n\nexport { buildHTMLStyles };","var createHtmlRenderState = function createHtmlRenderState() {\n return {\n style: {},\n transform: {},\n transformKeys: [],\n transformOrigin: {},\n vars: {}\n };\n};\n\nexport { createHtmlRenderState };","import { __assign } from 'tslib';\nimport { useMemo } from 'react';\nimport { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.js';\nimport { isMotionValue } from '../../value/utils/is-motion-value.js';\nimport { buildHTMLStyles } from './utils/build-styles.js';\nimport { createHtmlRenderState } from './utils/create-render-state.js';\n\nfunction copyRawValuesOnly(target, source, props) {\n for (var key in source) {\n if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {\n target[key] = source[key];\n }\n }\n}\n\nfunction useInitialMotionValues(_a, visualState, isStatic) {\n var transformTemplate = _a.transformTemplate;\n return useMemo(function () {\n var state = createHtmlRenderState();\n buildHTMLStyles(state, visualState, undefined, undefined, {\n enableHardwareAcceleration: !isStatic\n }, transformTemplate);\n var vars = state.vars,\n style = state.style;\n return __assign(__assign({}, vars), style);\n }, [visualState]);\n}\n\nfunction useStyle(props, visualState, isStatic) {\n var styleProp = props.style || {};\n var style = {};\n /**\n * Copy non-Motion Values straight into style\n */\n\n copyRawValuesOnly(style, styleProp, props);\n Object.assign(style, useInitialMotionValues(props, visualState, isStatic));\n\n if (props.transformValues) {\n style = props.transformValues(style);\n }\n\n return style;\n}\n\nfunction useHTMLProps(props, visualState, isStatic) {\n // The `any` isn't ideal but it is the type of createElement props argument\n var htmlProps = {};\n var style = useStyle(props, visualState, isStatic);\n\n if (Boolean(props.drag)) {\n // Disable the ghost element when a user drags\n htmlProps.draggable = false; // Disable text selection\n\n style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout = \"none\"; // Disable scrolling on the draggable direction\n\n style.touchAction = props.drag === true ? \"none\" : \"pan-\" + (props.drag === \"x\" ? \"y\" : \"x\");\n }\n\n htmlProps.style = style;\n return htmlProps;\n}\n\nexport { copyRawValuesOnly, useHTMLProps, useStyle };","/**\n * A list of all valid MotionProps.\n *\n * @internalremarks\n * This doesn't throw if a `MotionProp` name is missing - it should.\n */\nvar validMotionProps = new Set([\"initial\", \"animate\", \"exit\", \"style\", \"variants\", \"transition\", \"transformTemplate\", \"transformValues\", \"custom\", \"inherit\", \"layout\", \"layoutId\", \"_layoutResetTransform\", \"onLayoutAnimationComplete\", \"onViewportBoxUpdate\", \"onLayoutMeasure\", \"onBeforeLayoutMeasure\", \"onAnimationStart\", \"onAnimationComplete\", \"onUpdate\", \"onDragStart\", \"onDrag\", \"onDragEnd\", \"onMeasureDragConstraints\", \"onDirectionLock\", \"onDragTransitionEnd\", \"drag\", \"dragControls\", \"dragListener\", \"dragConstraints\", \"dragDirectionLock\", \"_dragX\", \"_dragY\", \"dragElastic\", \"dragMomentum\", \"dragPropagation\", \"dragTransition\", \"whileDrag\", \"onPan\", \"onPanStart\", \"onPanEnd\", \"onPanSessionStart\", \"onTap\", \"onTapStart\", \"onTapCancel\", \"onHoverStart\", \"onHoverEnd\", \"whileFocus\", \"whileTap\", \"whileHover\"]);\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 */\n\nfunction isValidMotionProp(key) {\n return validMotionProps.has(key);\n}\n\nexport { isValidMotionProp };","import { isValidMotionProp } from '../../../motion/utils/valid-prop.js';\n\nvar shouldForward = function shouldForward(key) {\n return !isValidMotionProp(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 */\n\n\ntry {\n var emotionIsPropValid_1 = require(\"@emotion/is-prop-valid\").default;\n\n shouldForward = function shouldForward(key) {\n // Handle events explicitly as Emotion validates them all as true\n if (key.startsWith(\"on\")) {\n return !isValidMotionProp(key);\n } else {\n return emotionIsPropValid_1(key);\n }\n };\n} catch (_a) {// We don't need to actually do anything here - the fallback is the existing `isPropValid`.\n}\n\nfunction filterProps(props, isDom, forwardMotionProps) {\n var filteredProps = {};\n\n for (var key in props) {\n if (shouldForward(key) || forwardMotionProps === true && isValidMotionProp(key) || !isDom && !isValidMotionProp(key)) {\n filteredProps[key] = props[key];\n }\n }\n\n return filteredProps;\n}\n\nexport { filterProps };","import { px } from 'style-value-types';\n\nfunction calcOrigin(origin, offset, size) {\n return typeof origin === \"string\" ? origin : 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 */\n\n\nfunction calcSVGTransformOrigin(dimensions, originX, originY) {\n var pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);\n var pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);\n return pxOriginX + \" \" + pxOriginY;\n}\n\nexport { calcSVGTransformOrigin };","import { px } from 'style-value-types'; // Convert a progress 0-1 to a pixels value based on the provided length\n\nvar progressToPixels = function progressToPixels(progress, length) {\n return px.transform(progress * length);\n};\n\nvar dashKeys = {\n offset: \"stroke-dashoffset\",\n array: \"stroke-dasharray\"\n};\nvar camelKeys = {\n offset: \"strokeDashoffset\",\n array: \"strokeDasharray\"\n};\n/**\n * Build SVG path properties. Uses the path's measured length to convert\n * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset\n * and stroke-dasharray attributes.\n *\n * This function is mutative to reduce per-frame GC.\n */\n\nfunction buildSVGPath(attrs, totalLength, length, spacing, offset, useDashCase) {\n if (spacing === void 0) {\n spacing = 1;\n }\n\n if (offset === void 0) {\n offset = 0;\n }\n\n if (useDashCase === void 0) {\n useDashCase = true;\n } // We use dash case when setting attributes directly to the DOM node and camel case\n // when defining props on a React component.\n\n\n var keys = useDashCase ? dashKeys : camelKeys; // Build the dash offset\n\n attrs[keys.offset] = progressToPixels(-offset, totalLength); // Build the dash array\n\n var pathLength = progressToPixels(length, totalLength);\n var pathSpacing = progressToPixels(spacing, totalLength);\n attrs[keys.array] = pathLength + \" \" + pathSpacing;\n}\n\nexport { buildSVGPath };","import { __rest } from 'tslib';\nimport { buildHTMLStyles } from '../../html/utils/build-styles.js';\nimport { calcSVGTransformOrigin } from './transform-origin.js';\nimport { buildSVGPath } from './path.js';\n/**\n * Build SVG visual attrbutes, like cx and style.transform\n */\n\nfunction buildSVGAttrs(state, _a, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin) {\n var attrX = _a.attrX,\n attrY = _a.attrY,\n originX = _a.originX,\n originY = _a.originY,\n pathLength = _a.pathLength,\n _b = _a.pathSpacing,\n pathSpacing = _b === void 0 ? 1 : _b,\n _c = _a.pathOffset,\n pathOffset = _c === void 0 ? 0 : _c,\n // This is object creation, which we try to avoid per-frame.\n latest = __rest(_a, [\"attrX\", \"attrY\", \"originX\", \"originY\", \"pathLength\", \"pathSpacing\", \"pathOffset\"]);\n\n buildHTMLStyles(state, latest, projection, layoutState, options, transformTemplate, buildProjectionTransform, buildProjectionTransformOrigin);\n state.attrs = state.style;\n state.style = {};\n var attrs = state.attrs,\n style = state.style,\n dimensions = state.dimensions,\n totalPathLength = state.totalPathLength;\n /**\n * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs\n * and copy it into style.\n */\n\n if (attrs.transform) {\n if (dimensions) style.transform = attrs.transform;\n delete attrs.transform;\n } // Parse transformOrigin\n\n\n if (dimensions && (originX !== undefined || originY !== undefined || style.transform)) {\n style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);\n } // Treat x/y not as shortcuts but as actual attributes\n\n\n if (attrX !== undefined) attrs.x = attrX;\n if (attrY !== undefined) attrs.y = attrY; // Build SVG path if one has been measured\n\n if (totalPathLength !== undefined && pathLength !== undefined) {\n buildSVGPath(attrs, totalPathLength, pathLength, pathSpacing, pathOffset, false);\n }\n}\n\nexport { buildSVGAttrs };","import { __assign } from 'tslib';\nimport { createHtmlRenderState } from '../../html/utils/create-render-state.js';\n\nvar createSvgRenderState = function createSvgRenderState() {\n return __assign(__assign({}, createHtmlRenderState()), {\n attrs: {}\n });\n};\n\nexport { createSvgRenderState };","import { __assign } from 'tslib';\nimport { useMemo } from 'react';\nimport { copyRawValuesOnly } from '../html/use-props.js';\nimport { buildSVGAttrs } from './utils/build-attrs.js';\nimport { createSvgRenderState } from './utils/create-render-state.js';\n\nfunction useSVGProps(props, visualState) {\n var visualProps = useMemo(function () {\n var state = createSvgRenderState();\n buildSVGAttrs(state, visualState, undefined, undefined, {\n enableHardwareAcceleration: false\n }, props.transformTemplate);\n return __assign(__assign({}, state.attrs), {\n style: __assign({}, state.style)\n });\n }, [visualState]);\n\n if (props.style) {\n var rawStyles = {};\n copyRawValuesOnly(rawStyles, props.style, props);\n visualProps.style = __assign(__assign({}, rawStyles), visualProps.style);\n }\n\n return visualProps;\n}\n\nexport { useSVGProps };","import { __assign } from 'tslib';\nimport { createElement } from 'react';\nimport { useHTMLProps } from '../html/use-props.js';\nimport { filterProps } from './utils/filter-props.js';\nimport { isSVGComponent } from './utils/is-svg-component.js';\nimport { useSVGProps } from '../svg/use-props.js';\n\nfunction createUseRender(forwardMotionProps) {\n if (forwardMotionProps === void 0) {\n forwardMotionProps = false;\n }\n\n var useRender = function useRender(Component, props, ref, _a, isStatic) {\n var latestValues = _a.latestValues;\n var useVisualProps = isSVGComponent(Component) ? useSVGProps : useHTMLProps;\n var visualProps = useVisualProps(props, latestValues, isStatic);\n var filteredProps = filterProps(props, typeof Component === \"string\", forwardMotionProps);\n\n var elementProps = __assign(__assign(__assign({}, filteredProps), visualProps), {\n ref: ref\n });\n\n return createElement(Component, elementProps);\n };\n\n return useRender;\n}\n\nexport { createUseRender };","var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;\nvar REPLACE_TEMPLATE = \"$1-$2\";\n/**\n * Convert camelCase to dash-case properties.\n */\n\nvar camelToDash = function camelToDash(str) {\n return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();\n};\n\nexport { camelToDash };","function renderHTML(element, _a) {\n var style = _a.style,\n vars = _a.vars; // Directly assign style into the Element's style prop. In tests Object.assign is the\n // fastest way to assign styles.\n\n Object.assign(element.style, style); // Loop over any CSS variables and assign those.\n\n for (var key in vars) {\n element.style.setProperty(key, vars[key]);\n }\n}\n\nexport { renderHTML };","/**\n * A set of attribute names that are always read/written as camel case.\n */\nvar camelCaseAttributes = new Set([\"baseFrequency\", \"diffuseConstant\", \"kernelMatrix\", \"kernelUnitLength\", \"keySplines\", \"keyTimes\", \"limitingConeAngle\", \"markerHeight\", \"markerWidth\", \"numOctaves\", \"targetX\", \"targetY\", \"surfaceScale\", \"specularConstant\", \"specularExponent\", \"stdDeviation\", \"tableValues\", \"viewBox\", \"gradientTransform\"]);\nexport { camelCaseAttributes };","import { camelToDash } from '../../dom/utils/camel-to-dash.js';\nimport { renderHTML } from '../../html/utils/render.js';\nimport { camelCaseAttributes } from './camel-case-attrs.js';\n\nfunction renderSVG(element, renderState) {\n renderHTML(element, renderState);\n\n for (var key in renderState.attrs) {\n element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);\n }\n}\n\nexport { renderSVG };","import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.js';\nimport { isMotionValue } from '../../../value/utils/is-motion-value.js';\n\nfunction scrapeMotionValuesFromProps(props) {\n var style = props.style;\n var newValues = {};\n\n for (var key in style) {\n if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) {\n newValues[key] = style[key];\n }\n }\n\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };","import { isMotionValue } from '../../../value/utils/is-motion-value.js';\nimport { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.js';\n\nfunction scrapeMotionValuesFromProps(props) {\n var newValues = scrapeMotionValuesFromProps$1(props);\n\n for (var key in props) {\n if (isMotionValue(props[key])) {\n var targetKey = key === \"x\" || key === \"y\" ? \"attr\" + key.toUpperCase() : key;\n newValues[targetKey] = props[key];\n }\n }\n\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };","function isAnimationControls(v) {\n return typeof v === \"object\" && typeof v.start === \"function\";\n}\n\nexport { isAnimationControls };","var isKeyframesTarget = function isKeyframesTarget(v) {\n return Array.isArray(v);\n};\n\nexport { isKeyframesTarget };","import { isCustomValue } from '../../utils/resolve-value.js';\nimport { isMotionValue } from './is-motion-value.js';\n/**\n * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself\n *\n * TODO: Remove and move to library\n *\n * @internal\n */\n\nfunction resolveMotionValue(value) {\n var unwrappedValue = isMotionValue(value) ? value.get() : value;\n return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;\n}\n\nexport { resolveMotionValue };","import { isKeyframesTarget } from '../animation/utils/is-keyframes-target.js';\n\nvar isCustomValue = function isCustomValue(v) {\n return Boolean(v && typeof v === \"object\" && v.mix && v.toValue);\n};\n\nvar resolveFinalValueInKeyframes = function resolveFinalValueInKeyframes(v) {\n // TODO maybe throw if v.length - 1 is placeholder token?\n return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;\n};\n\nexport { isCustomValue, resolveFinalValueInKeyframes };","import { __rest } from 'tslib';\nimport { useContext } from 'react';\nimport { isAnimationControls } from '../../animation/utils/is-animation-controls.js';\nimport { PresenceContext } from '../../context/PresenceContext.js';\nimport { checkIfControllingVariants, checkIfVariantNode, resolveVariantFromProps } from '../../render/utils/variants.js';\nimport { useConstant } from '../../utils/use-constant.js';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.js';\nimport { MotionContext } from '../../context/MotionContext/index.js';\n\nfunction makeState(_a, props, context, presenceContext) {\n var scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps,\n createRenderState = _a.createRenderState,\n onMount = _a.onMount;\n var state = {\n latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),\n renderState: createRenderState()\n };\n\n if (onMount) {\n state.mount = function (instance) {\n return onMount(props, instance, state);\n };\n }\n\n return state;\n}\n\nvar makeUseVisualState = function makeUseVisualState(config) {\n return function (props, isStatic) {\n var context = useContext(MotionContext);\n var presenceContext = useContext(PresenceContext);\n return isStatic ? makeState(config, props, context, presenceContext) : useConstant(function () {\n return makeState(config, props, context, presenceContext);\n });\n };\n};\n\nfunction makeLatestValues(props, context, presenceContext, scrapeMotionValues) {\n var values = {};\n var blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false;\n var motionValues = scrapeMotionValues(props);\n\n for (var key in motionValues) {\n values[key] = resolveMotionValue(motionValues[key]);\n }\n\n var initial = props.initial,\n animate = props.animate;\n var isControllingVariants = checkIfControllingVariants(props);\n var isVariantNode = checkIfVariantNode(props);\n\n if (context && isVariantNode && !isControllingVariants && props.inherit !== false) {\n initial !== null && initial !== void 0 ? initial : initial = context.initial;\n animate !== null && animate !== void 0 ? animate : animate = context.animate;\n }\n\n var variantToSet = blockInitialAnimation || initial === false ? animate : initial;\n\n if (variantToSet && typeof variantToSet !== \"boolean\" && !isAnimationControls(variantToSet)) {\n var list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];\n list.forEach(function (definition) {\n var resolved = resolveVariantFromProps(props, definition);\n if (!resolved) return;\n var transitionEnd = resolved.transitionEnd;\n resolved.transition;\n\n var target = __rest(resolved, [\"transitionEnd\", \"transition\"]);\n\n for (var key in target) {\n values[key] = target[key];\n }\n\n for (var key in transitionEnd) {\n values[key] = transitionEnd[key];\n }\n });\n }\n\n return values;\n}\n\nexport { makeUseVisualState };","import { renderSVG } from './utils/render.js';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';\nimport { makeUseVisualState } from '../../motion/utils/use-visual-state.js';\nimport { createSvgRenderState } from './utils/create-render-state.js';\nimport { buildSVGAttrs } from './utils/build-attrs.js';\nvar svgMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createSvgRenderState,\n onMount: function onMount(props, instance, _a) {\n var renderState = _a.renderState,\n latestValues = _a.latestValues;\n\n try {\n renderState.dimensions = typeof instance.getBBox === \"function\" ? instance.getBBox() : instance.getBoundingClientRect();\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 if (isPath(instance)) {\n renderState.totalPathLength = instance.getTotalLength();\n }\n\n buildSVGAttrs(renderState, latestValues, undefined, undefined, {\n enableHardwareAcceleration: false\n }, props.transformTemplate); // TODO: Replace with direct assignment\n\n renderSVG(instance, renderState);\n }\n })\n};\n\nfunction isPath(element) {\n return element.tagName === \"path\";\n}\n\nexport { svgMotionConfig };","import { makeUseVisualState } from '../../motion/utils/use-visual-state.js';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';\nimport { createHtmlRenderState } from './utils/create-render-state.js';\nvar htmlMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createHtmlRenderState\n })\n};\nexport { htmlMotionConfig };","var AnimationType;\n\n(function (AnimationType) {\n AnimationType[\"Animate\"] = \"animate\";\n AnimationType[\"Hover\"] = \"whileHover\";\n AnimationType[\"Tap\"] = \"whileTap\";\n AnimationType[\"Drag\"] = \"whileDrag\";\n AnimationType[\"Focus\"] = \"whileFocus\";\n AnimationType[\"Exit\"] = \"exit\";\n})(AnimationType || (AnimationType = {}));\n\nexport { AnimationType };","import { useEffect } from 'react';\n\nfunction addDomEvent(target, eventName, handler, options) {\n target.addEventListener(eventName, handler, options);\n return function () {\n return target.removeEventListener(eventName, handler, options);\n };\n}\n/**\n * Attaches an event listener directly to the provided DOM element.\n *\n * Bypassing React's event system can be desirable, for instance when attaching non-passive\n * event handlers.\n *\n * ```jsx\n * const ref = useRef(null)\n *\n * useDomEvent(ref, 'wheel', onWheel, { passive: false })\n *\n * return \n * ```\n *\n * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.\n * @param eventName - Name of the event you want listen for.\n * @param handler - Function to fire when receiving the event.\n * @param options - Options to pass to `Event.addEventListener`.\n *\n * @public\n */\n\n\nfunction useDomEvent(ref, eventName, handler, options) {\n useEffect(function () {\n var element = ref.current;\n\n if (handler && element) {\n return addDomEvent(element, eventName, handler, options);\n }\n }, [ref, eventName, handler, options]);\n}\n\nexport { addDomEvent, useDomEvent };","function isMouseEvent(event) {\n // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.\n if (typeof PointerEvent !== \"undefined\" && event instanceof PointerEvent) {\n return !!(event.pointerType === \"mouse\");\n }\n\n return event instanceof MouseEvent;\n}\n\nfunction isTouchEvent(event) {\n var hasTouches = !!event.touches;\n return hasTouches;\n}\n\nexport { isMouseEvent, isTouchEvent };","import { isTouchEvent } from '../gestures/utils/event-type.js';\n/**\n * Filters out events not attached to the primary pointer (currently left mouse button)\n * @param eventHandler\n */\n\nfunction filterPrimaryPointer(eventHandler) {\n return function (event) {\n var isMouseEvent = event instanceof MouseEvent;\n var isPrimaryPointer = !isMouseEvent || isMouseEvent && event.button === 0;\n\n if (isPrimaryPointer) {\n eventHandler(event);\n }\n };\n}\n\nvar defaultPagePoint = {\n pageX: 0,\n pageY: 0\n};\n\nfunction pointFromTouch(e, pointType) {\n if (pointType === void 0) {\n pointType = \"page\";\n }\n\n var primaryTouch = e.touches[0] || e.changedTouches[0];\n var point = primaryTouch || defaultPagePoint;\n return {\n x: point[pointType + \"X\"],\n y: point[pointType + \"Y\"]\n };\n}\n\nfunction pointFromMouse(point, pointType) {\n if (pointType === void 0) {\n pointType = \"page\";\n }\n\n return {\n x: point[pointType + \"X\"],\n y: point[pointType + \"Y\"]\n };\n}\n\nfunction extractEventInfo(event, pointType) {\n if (pointType === void 0) {\n pointType = \"page\";\n }\n\n return {\n point: isTouchEvent(event) ? pointFromTouch(event, pointType) : pointFromMouse(event, pointType)\n };\n}\n\nfunction getViewportPointFromEvent(event) {\n return extractEventInfo(event, \"client\");\n}\n\nvar wrapHandler = function wrapHandler(handler, shouldFilterPrimaryPointer) {\n if (shouldFilterPrimaryPointer === void 0) {\n shouldFilterPrimaryPointer = false;\n }\n\n var listener = function listener(event) {\n return handler(event, extractEventInfo(event));\n };\n\n return shouldFilterPrimaryPointer ? filterPrimaryPointer(listener) : listener;\n};\n\nexport { extractEventInfo, getViewportPointFromEvent, wrapHandler };","import { useDomEvent, addDomEvent } from './use-dom-event.js';\nimport { wrapHandler } from './event-info.js';\nimport { supportsPointerEvents, supportsTouchEvents, supportsMouseEvents } from './utils.js';\nvar mouseEventNames = {\n pointerdown: \"mousedown\",\n pointermove: \"mousemove\",\n pointerup: \"mouseup\",\n pointercancel: \"mousecancel\",\n pointerover: \"mouseover\",\n pointerout: \"mouseout\",\n pointerenter: \"mouseenter\",\n pointerleave: \"mouseleave\"\n};\nvar touchEventNames = {\n pointerdown: \"touchstart\",\n pointermove: \"touchmove\",\n pointerup: \"touchend\",\n pointercancel: \"touchcancel\"\n};\n\nfunction getPointerEventName(name) {\n if (supportsPointerEvents()) {\n return name;\n } else if (supportsTouchEvents()) {\n return touchEventNames[name];\n } else if (supportsMouseEvents()) {\n return mouseEventNames[name];\n }\n\n return name;\n}\n\nfunction addPointerEvent(target, eventName, handler, options) {\n return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === \"pointerdown\"), options);\n}\n\nfunction usePointerEvent(ref, eventName, handler, options) {\n return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === \"pointerdown\"), options);\n}\n\nexport { addPointerEvent, usePointerEvent };","import { isBrowser } from '../utils/is-browser.js'; // We check for event support via functions in case they've been mocked by a testing suite.\n\nvar supportsPointerEvents = function supportsPointerEvents() {\n return isBrowser && window.onpointerdown === null;\n};\n\nvar supportsTouchEvents = function supportsTouchEvents() {\n return isBrowser && window.ontouchstart === null;\n};\n\nvar supportsMouseEvents = function supportsMouseEvents() {\n return isBrowser && window.onmousedown === null;\n};\n\nexport { supportsMouseEvents, supportsPointerEvents, supportsTouchEvents };","function createLock(name) {\n var lock = null;\n return function () {\n var openLock = function openLock() {\n lock = null;\n };\n\n if (lock === null) {\n lock = name;\n return openLock;\n }\n\n return false;\n };\n}\n\nvar globalHorizontalLock = createLock(\"dragHorizontal\");\nvar globalVerticalLock = createLock(\"dragVertical\");\n\nfunction getGlobalLock(drag) {\n var lock = false;\n\n if (drag === \"y\") {\n lock = globalVerticalLock();\n } else if (drag === \"x\") {\n lock = globalHorizontalLock();\n } else {\n var openHorizontal_1 = globalHorizontalLock();\n var openVertical_1 = globalVerticalLock();\n\n if (openHorizontal_1 && openVertical_1) {\n lock = function lock() {\n openHorizontal_1();\n openVertical_1();\n };\n } else {\n // Release the locks because we don't use them\n if (openHorizontal_1) openHorizontal_1();\n if (openVertical_1) openVertical_1();\n }\n }\n\n return lock;\n}\n\nfunction isDragActive() {\n // Check the gesture lock - if we get it, it means no drag gesture is active\n // and we can safely fire the tap gesture.\n var openGestureLock = getGlobalLock(true);\n if (!openGestureLock) return true;\n openGestureLock();\n return false;\n}\n\nexport { createLock, getGlobalLock, isDragActive };","import { isMouseEvent } from './utils/event-type.js';\nimport { AnimationType } from '../render/utils/types.js';\nimport { usePointerEvent } from '../events/use-pointer-event.js';\nimport { isDragActive } from './drag/utils/lock.js';\n\nfunction createHoverEvent(visualElement, isActive, callback) {\n return function (event, info) {\n var _a;\n\n if (!isMouseEvent(event) || isDragActive()) return;\n callback === null || callback === void 0 ? void 0 : callback(event, info);\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, isActive);\n };\n}\n\nfunction useHoverGesture(_a) {\n var onHoverStart = _a.onHoverStart,\n onHoverEnd = _a.onHoverEnd,\n whileHover = _a.whileHover,\n visualElement = _a.visualElement;\n usePointerEvent(visualElement, \"pointerenter\", onHoverStart || whileHover ? createHoverEvent(visualElement, true, onHoverStart) : undefined);\n usePointerEvent(visualElement, \"pointerleave\", onHoverEnd || whileHover ? createHoverEvent(visualElement, false, onHoverEnd) : undefined);\n}\n\nexport { useHoverGesture };","/**\n * Recursively traverse up the tree to check whether the provided child node\n * is the parent or a descendant of it.\n *\n * @param parent - Element to find\n * @param child - Element to test against parent\n */\nvar isNodeOrChild = function isNodeOrChild(parent, child) {\n if (!child) {\n return false;\n } else if (parent === child) {\n return true;\n } else {\n return isNodeOrChild(parent, child.parentElement);\n }\n};\n\nexport { isNodeOrChild };","var combineFunctions = function combineFunctions(a, b) {\n return function (v) {\n return b(a(v));\n };\n};\n\nvar pipe = function pipe() {\n var transformers = [];\n\n for (var _i = 0; _i < arguments.length; _i++) {\n transformers[_i] = arguments[_i];\n }\n\n return transformers.reduce(combineFunctions);\n};\n\nexport { pipe };","var makeRenderlessComponent = function makeRenderlessComponent(hook) {\n return function (props) {\n hook(props);\n return null;\n };\n};\n\nexport { makeRenderlessComponent };","import { useFocusGesture } from '../../gestures/use-focus-gesture.js';\nimport { useHoverGesture } from '../../gestures/use-hover-gesture.js';\nimport { useTapGesture } from '../../gestures/use-tap-gesture.js';\nimport { makeRenderlessComponent } from '../utils/make-renderless-component.js';\nvar gestureAnimations = {\n tap: makeRenderlessComponent(useTapGesture),\n focus: makeRenderlessComponent(useFocusGesture),\n hover: makeRenderlessComponent(useHoverGesture)\n};\nexport { gestureAnimations };","import { useRef } from 'react';\nimport { isNodeOrChild } from './utils/is-node-or-child.js';\nimport { usePointerEvent, addPointerEvent } from '../events/use-pointer-event.js';\nimport { useUnmountEffect } from '../utils/use-unmount-effect.js';\nimport { pipe } from 'popmotion';\nimport { AnimationType } from '../render/utils/types.js';\nimport { isDragActive } from './drag/utils/lock.js';\n/**\n * @param handlers -\n * @internal\n */\n\nfunction useTapGesture(_a) {\n var onTap = _a.onTap,\n onTapStart = _a.onTapStart,\n onTapCancel = _a.onTapCancel,\n whileTap = _a.whileTap,\n visualElement = _a.visualElement;\n var hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;\n var isPressing = useRef(false);\n var cancelPointerEndListeners = useRef(null);\n\n function removePointerEndListener() {\n var _a;\n\n (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);\n cancelPointerEndListeners.current = null;\n }\n\n function checkPointerEnd() {\n var _a;\n\n removePointerEndListener();\n isPressing.current = false;\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, false);\n return !isDragActive();\n }\n\n function onPointerUp(event, info) {\n if (!checkPointerEnd()) return;\n /**\n * We only count this as a tap gesture if the event.target is the same\n * as, or a child of, this component's element\n */\n\n !isNodeOrChild(visualElement.getInstance(), event.target) ? onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info) : onTap === null || onTap === void 0 ? void 0 : onTap(event, info);\n }\n\n function onPointerCancel(event, info) {\n if (!checkPointerEnd()) return;\n onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info);\n }\n\n function onPointerDown(event, info) {\n var _a;\n\n removePointerEndListener();\n if (isPressing.current) return;\n isPressing.current = true;\n cancelPointerEndListeners.current = pipe(addPointerEvent(window, \"pointerup\", onPointerUp), addPointerEvent(window, \"pointercancel\", onPointerCancel));\n onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true);\n }\n\n usePointerEvent(visualElement, \"pointerdown\", hasPressListeners ? onPointerDown : undefined);\n useUnmountEffect(removePointerEndListener);\n}\n\nexport { useTapGesture };","import { AnimationType } from '../render/utils/types.js';\nimport { useDomEvent } from '../events/use-dom-event.js';\n/**\n *\n * @param props\n * @param ref\n * @internal\n */\n\nfunction useFocusGesture(_a) {\n var whileFocus = _a.whileFocus,\n visualElement = _a.visualElement;\n\n var onFocus = function onFocus() {\n var _a;\n\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, true);\n };\n\n var onBlur = function onBlur() {\n var _a;\n\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, false);\n };\n\n useDomEvent(visualElement, \"focus\", whileFocus ? onFocus : undefined);\n useDomEvent(visualElement, \"blur\", whileFocus ? onBlur : undefined);\n}\n\nexport { useFocusGesture };","function shallowCompare(next, prev) {\n if (!Array.isArray(prev)) return false;\n var prevLength = prev.length;\n if (prevLength !== next.length) return false;\n\n for (var i = 0; i < prevLength; i++) {\n if (prev[i] !== next[i]) return false;\n }\n\n return true;\n}\n\nexport { shallowCompare };","var clamp = function clamp(min, max, v) {\n return Math.min(Math.max(v, min), max);\n};\n\nexport { clamp };","import { warning } from 'hey-listen';\nimport { clamp } from '../../utils/clamp.js';\nvar safeMin = 0.001;\nvar minDuration = 0.01;\nvar maxDuration = 10.0;\nvar minDamping = 0.05;\nvar maxDamping = 1;\n\nfunction findSpring(_a) {\n var _b = _a.duration,\n duration = _b === void 0 ? 800 : _b,\n _c = _a.bounce,\n bounce = _c === void 0 ? 0.25 : _c,\n _d = _a.velocity,\n velocity = _d === void 0 ? 0 : _d,\n _e = _a.mass,\n mass = _e === void 0 ? 1 : _e;\n var envelope;\n var derivative;\n warning(duration <= maxDuration * 1000, \"Spring duration must be 10 seconds or less\");\n var dampingRatio = 1 - bounce;\n dampingRatio = clamp(minDamping, maxDamping, dampingRatio);\n duration = clamp(minDuration, maxDuration, duration / 1000);\n\n if (dampingRatio < 1) {\n envelope = function envelope(undampedFreq) {\n var exponentialDecay = undampedFreq * dampingRatio;\n var delta = exponentialDecay * duration;\n var a = exponentialDecay - velocity;\n var b = calcAngularFreq(undampedFreq, dampingRatio);\n var c = Math.exp(-delta);\n return safeMin - a / b * c;\n };\n\n derivative = function derivative(undampedFreq) {\n var exponentialDecay = undampedFreq * dampingRatio;\n var delta = exponentialDecay * duration;\n var d = delta * velocity + velocity;\n var e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;\n var f = Math.exp(-delta);\n var g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);\n var factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;\n return factor * ((d - e) * f) / g;\n };\n } else {\n envelope = function envelope(undampedFreq) {\n var a = Math.exp(-undampedFreq * duration);\n var b = (undampedFreq - velocity) * duration + 1;\n return -safeMin + a * b;\n };\n\n derivative = function derivative(undampedFreq) {\n var a = Math.exp(-undampedFreq * duration);\n var b = (velocity - undampedFreq) * (duration * duration);\n return a * b;\n };\n }\n\n var initialGuess = 5 / duration;\n var undampedFreq = approximateRoot(envelope, derivative, initialGuess);\n duration = duration * 1000;\n\n if (isNaN(undampedFreq)) {\n return {\n stiffness: 100,\n damping: 10,\n duration: duration\n };\n } else {\n var stiffness = Math.pow(undampedFreq, 2) * mass;\n return {\n stiffness: stiffness,\n damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),\n duration: duration\n };\n }\n}\n\nvar rootIterations = 12;\n\nfunction approximateRoot(envelope, derivative, initialGuess) {\n var result = initialGuess;\n\n for (var i = 1; i < rootIterations; i++) {\n result = result - envelope(result) / derivative(result);\n }\n\n return result;\n}\n\nfunction calcAngularFreq(undampedFreq, dampingRatio) {\n return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);\n}\n\nexport { calcAngularFreq, findSpring, maxDamping, maxDuration, minDamping, minDuration };","import { __rest, __assign } from 'tslib';\nimport { findSpring, calcAngularFreq } from '../utils/find-spring.js';\nvar durationKeys = [\"duration\", \"bounce\"];\nvar physicsKeys = [\"stiffness\", \"damping\", \"mass\"];\n\nfunction isSpringType(options, keys) {\n return keys.some(function (key) {\n return options[key] !== undefined;\n });\n}\n\nfunction getSpringOptions(options) {\n var springOptions = __assign({\n velocity: 0.0,\n stiffness: 100,\n damping: 10,\n mass: 1.0,\n isResolvedFromDuration: false\n }, options);\n\n if (!isSpringType(options, physicsKeys) && isSpringType(options, durationKeys)) {\n var derived = findSpring(options);\n springOptions = __assign(__assign(__assign({}, springOptions), derived), {\n velocity: 0.0,\n mass: 1.0\n });\n springOptions.isResolvedFromDuration = true;\n }\n\n return springOptions;\n}\n\nfunction spring(_a) {\n var _b = _a.from,\n from = _b === void 0 ? 0.0 : _b,\n _c = _a.to,\n to = _c === void 0 ? 1.0 : _c,\n _d = _a.restSpeed,\n restSpeed = _d === void 0 ? 2 : _d,\n restDelta = _a.restDelta,\n options = __rest(_a, [\"from\", \"to\", \"restSpeed\", \"restDelta\"]);\n\n var state = {\n done: false,\n value: from\n };\n\n var _e = getSpringOptions(options),\n stiffness = _e.stiffness,\n damping = _e.damping,\n mass = _e.mass,\n velocity = _e.velocity,\n duration = _e.duration,\n isResolvedFromDuration = _e.isResolvedFromDuration;\n\n var resolveSpring = zero;\n var resolveVelocity = zero;\n\n function createSpring() {\n var initialVelocity = velocity ? -(velocity / 1000) : 0.0;\n var initialDelta = to - from;\n var dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));\n var undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;\n restDelta !== null && restDelta !== void 0 ? restDelta : restDelta = Math.abs(to - from) <= 1 ? 0.01 : 0.4;\n\n if (dampingRatio < 1) {\n var angularFreq_1 = calcAngularFreq(undampedAngularFreq, dampingRatio);\n\n resolveSpring = function resolveSpring(t) {\n var envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return to - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) / angularFreq_1 * Math.sin(angularFreq_1 * t) + initialDelta * Math.cos(angularFreq_1 * t));\n };\n\n resolveVelocity = function resolveVelocity(t) {\n var envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return dampingRatio * undampedAngularFreq * envelope * (Math.sin(angularFreq_1 * t) * (initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) / angularFreq_1 + initialDelta * Math.cos(angularFreq_1 * t)) - envelope * (Math.cos(angularFreq_1 * t) * (initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) - angularFreq_1 * initialDelta * Math.sin(angularFreq_1 * t));\n };\n } else if (dampingRatio === 1) {\n resolveSpring = function resolveSpring(t) {\n return to - Math.exp(-undampedAngularFreq * t) * (initialDelta + (initialVelocity + undampedAngularFreq * initialDelta) * t);\n };\n } else {\n var dampedAngularFreq_1 = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);\n\n resolveSpring = function resolveSpring(t) {\n var envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n var freqForT = Math.min(dampedAngularFreq_1 * t, 300);\n return to - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) * Math.sinh(freqForT) + dampedAngularFreq_1 * initialDelta * Math.cosh(freqForT)) / dampedAngularFreq_1;\n };\n }\n }\n\n createSpring();\n return {\n next: function next(t) {\n var current = resolveSpring(t);\n\n if (!isResolvedFromDuration) {\n var currentVelocity = resolveVelocity(t) * 1000;\n var isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;\n var isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta;\n state.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;\n } else {\n state.done = t >= duration;\n }\n\n state.value = state.done ? to : current;\n return state;\n },\n flipTarget: function flipTarget() {\n var _a;\n\n velocity = -velocity;\n _a = [to, from], from = _a[0], to = _a[1];\n createSpring();\n }\n };\n}\n\nspring.needsInterpolation = function (a, b) {\n return typeof a === \"string\" || typeof b === \"string\";\n};\n\nvar zero = function zero(_t) {\n return 0;\n};\n\nexport { spring };","var progress = function progress(from, to, value) {\n var toFromDifference = to - from;\n return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;\n};\n\nexport { progress };","var mix = function mix(from, to, progress) {\n return -progress * from + progress * to + from;\n};\n\nexport { mix };","import { isString, singleColorRegex, floatRegex } from '../utils.js';\n\nvar isColorString = function isColorString(type, testProp) {\n return function (v) {\n return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && Object.prototype.hasOwnProperty.call(v, testProp));\n };\n};\n\nvar splitColor = function splitColor(aName, bName, cName) {\n return function (v) {\n var _a;\n\n if (!isString(v)) return v;\n\n var _b = v.match(floatRegex),\n a = _b[0],\n b = _b[1],\n c = _b[2],\n alpha = _b[3];\n\n return _a = {}, _a[aName] = parseFloat(a), _a[bName] = parseFloat(b), _a[cName] = parseFloat(c), _a.alpha = alpha !== undefined ? parseFloat(alpha) : 1, _a;\n };\n};\n\nexport { isColorString, splitColor };","import { __assign } from 'tslib';\nimport { number, alpha } from '../numbers/index.js';\nimport { sanitize, clamp } from '../utils.js';\nimport { isColorString, splitColor } from './utils.js';\nvar clampRgbUnit = clamp(0, 255);\n\nvar rgbUnit = __assign(__assign({}, number), {\n transform: function transform(v) {\n return Math.round(clampRgbUnit(v));\n }\n});\n\nvar rgba = {\n test: isColorString('rgb', 'red'),\n parse: splitColor('red', 'green', 'blue'),\n transform: function transform(_a) {\n var red = _a.red,\n green = _a.green,\n blue = _a.blue,\n _b = _a.alpha,\n alpha$1 = _b === void 0 ? 1 : _b;\n return 'rgba(' + rgbUnit.transform(red) + ', ' + rgbUnit.transform(green) + ', ' + rgbUnit.transform(blue) + ', ' + sanitize(alpha.transform(alpha$1)) + ')';\n }\n};\nexport { rgbUnit, rgba };","import { rgba } from './rgba.js';\nimport { isColorString } from './utils.js';\n\nfunction parseHex(v) {\n var r = '';\n var g = '';\n var b = '';\n var a = '';\n\n if (v.length > 5) {\n r = v.substr(1, 2);\n g = v.substr(3, 2);\n b = v.substr(5, 2);\n a = v.substr(7, 2);\n } else {\n r = v.substr(1, 1);\n g = v.substr(2, 1);\n b = v.substr(3, 1);\n a = v.substr(4, 1);\n r += r;\n g += g;\n b += b;\n a += a;\n }\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}\n\nvar hex = {\n test: isColorString('#'),\n parse: parseHex,\n transform: rgba.transform\n};\nexport { hex };","import { alpha } from '../numbers/index.js';\nimport { percent } from '../numbers/units.js';\nimport { sanitize } from '../utils.js';\nimport { isColorString, splitColor } from './utils.js';\nvar hsla = {\n test: isColorString('hsl', 'hue'),\n parse: splitColor('hue', 'saturation', 'lightness'),\n transform: function transform(_a) {\n var hue = _a.hue,\n saturation = _a.saturation,\n lightness = _a.lightness,\n _b = _a.alpha,\n alpha$1 = _b === void 0 ? 1 : _b;\n return 'hsla(' + Math.round(hue) + ', ' + percent.transform(sanitize(saturation)) + ', ' + percent.transform(sanitize(lightness)) + ', ' + sanitize(alpha.transform(alpha$1)) + ')';\n }\n};\nexport { hsla };","import { __assign } from 'tslib';\nimport { mix } from './mix.js';\nimport { hex, rgba, hsla } from 'style-value-types';\nimport { invariant } from 'hey-listen';\n\nvar mixLinearColor = function mixLinearColor(from, to, v) {\n var fromExpo = from * from;\n var toExpo = to * to;\n return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));\n};\n\nvar colorTypes = [hex, rgba, hsla];\n\nvar getColorType = function getColorType(v) {\n return colorTypes.find(function (type) {\n return type.test(v);\n });\n};\n\nvar notAnimatable = function notAnimatable(color) {\n return \"'\" + color + \"' is not an animatable color. Use the equivalent color code instead.\";\n};\n\nvar mixColor = function mixColor(from, to) {\n var fromColorType = getColorType(from);\n var toColorType = getColorType(to);\n invariant(!!fromColorType, notAnimatable(from));\n invariant(!!toColorType, notAnimatable(to));\n invariant(fromColorType.transform === toColorType.transform, \"Both colors must be hex/RGBA, OR both must be HSLA.\");\n var fromColor = fromColorType.parse(from);\n var toColor = toColorType.parse(to);\n\n var blended = __assign({}, fromColor);\n\n var mixFunc = fromColorType === hsla ? mix : mixLinearColor;\n return function (v) {\n for (var key in blended) {\n if (key !== \"alpha\") {\n blended[key] = mixFunc(fromColor[key], toColor[key], v);\n }\n }\n\n blended.alpha = mix(fromColor.alpha, toColor.alpha, v);\n return fromColorType.transform(blended);\n };\n};\n\nexport { mixColor, mixLinearColor };","import { isString } from '../utils.js';\nimport { hex } from './hex.js';\nimport { hsla } from './hsla.js';\nimport { rgba } from './rgba.js';\nvar color = {\n test: function test(v) {\n return rgba.test(v) || hex.test(v) || hsla.test(v);\n },\n parse: function parse(v) {\n if (rgba.test(v)) {\n return rgba.parse(v);\n } else if (hsla.test(v)) {\n return hsla.parse(v);\n } else {\n return hex.parse(v);\n }\n },\n transform: function transform(v) {\n return isString(v) ? v : v.hasOwnProperty('red') ? rgba.transform(v) : hsla.transform(v);\n }\n};\nexport { color };","import { color } from '../color/index.js';\nimport { number } from '../numbers/index.js';\nimport { isString, floatRegex, colorRegex, sanitize } from '../utils.js';\nvar colorToken = '${c}';\nvar numberToken = '${n}';\n\nfunction test(v) {\n var _a, _b, _c, _d;\n\n return isNaN(v) && isString(v) && ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0;\n}\n\nfunction analyse(v) {\n var values = [];\n var numColors = 0;\n var colors = v.match(colorRegex);\n\n if (colors) {\n numColors = colors.length;\n v = v.replace(colorRegex, colorToken);\n values.push.apply(values, colors.map(color.parse));\n }\n\n var numbers = v.match(floatRegex);\n\n if (numbers) {\n v = v.replace(floatRegex, numberToken);\n values.push.apply(values, numbers.map(number.parse));\n }\n\n return {\n values: values,\n numColors: numColors,\n tokenised: v\n };\n}\n\nfunction parse(v) {\n return analyse(v).values;\n}\n\nfunction createTransformer(v) {\n var _a = analyse(v),\n values = _a.values,\n numColors = _a.numColors,\n tokenised = _a.tokenised;\n\n var numValues = values.length;\n return function (v) {\n var output = tokenised;\n\n for (var i = 0; i < numValues; i++) {\n output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v[i]) : sanitize(v[i]));\n }\n\n return output;\n };\n}\n\nvar convertNumbersToZero = function convertNumbersToZero(v) {\n return typeof v === 'number' ? 0 : v;\n};\n\nfunction getAnimatableNone(v) {\n var parsed = parse(v);\n var transformer = createTransformer(v);\n return transformer(parsed.map(convertNumbersToZero));\n}\n\nvar complex = {\n test: test,\n parse: parse,\n createTransformer: createTransformer,\n getAnimatableNone: getAnimatableNone\n};\nexport { complex };","var zeroPoint = {\n x: 0,\n y: 0,\n z: 0\n};\n\nvar isNum = function isNum(v) {\n return typeof v === 'number';\n};\n\nexport { isNum, zeroPoint };","import { __spreadArray, __assign } from 'tslib';\nimport { complex, color } from 'style-value-types';\nimport { mix } from './mix.js';\nimport { mixColor } from './mix-color.js';\nimport { isNum } from './inc.js';\nimport { pipe } from './pipe.js';\nimport { invariant } from 'hey-listen';\n\nfunction getMixer(origin, target) {\n if (isNum(origin)) {\n return function (v) {\n return mix(origin, target, v);\n };\n } else if (color.test(origin)) {\n return mixColor(origin, target);\n } else {\n return mixComplex(origin, target);\n }\n}\n\nvar mixArray = function mixArray(from, to) {\n var output = __spreadArray([], from);\n\n var numValues = output.length;\n var blendValue = from.map(function (fromThis, i) {\n return getMixer(fromThis, to[i]);\n });\n return function (v) {\n for (var i = 0; i < numValues; i++) {\n output[i] = blendValue[i](v);\n }\n\n return output;\n };\n};\n\nvar mixObject = function mixObject(origin, target) {\n var output = __assign(__assign({}, origin), target);\n\n var blendValue = {};\n\n for (var key in output) {\n if (origin[key] !== undefined && target[key] !== undefined) {\n blendValue[key] = getMixer(origin[key], target[key]);\n }\n }\n\n return function (v) {\n for (var key in blendValue) {\n output[key] = blendValue[key](v);\n }\n\n return output;\n };\n};\n\nfunction analyse(value) {\n var parsed = complex.parse(value);\n var numValues = parsed.length;\n var numNumbers = 0;\n var numRGB = 0;\n var numHSL = 0;\n\n for (var i = 0; i < numValues; i++) {\n if (numNumbers || typeof parsed[i] === \"number\") {\n numNumbers++;\n } else {\n if (parsed[i].hue !== undefined) {\n numHSL++;\n } else {\n numRGB++;\n }\n }\n }\n\n return {\n parsed: parsed,\n numNumbers: numNumbers,\n numRGB: numRGB,\n numHSL: numHSL\n };\n}\n\nvar mixComplex = function mixComplex(origin, target) {\n var template = complex.createTransformer(target);\n var originStats = analyse(origin);\n var targetStats = analyse(target);\n invariant(originStats.numHSL === targetStats.numHSL && originStats.numRGB === targetStats.numRGB && originStats.numNumbers >= targetStats.numNumbers, \"Complex values '\" + origin + \"' and '\" + target + \"' too different to mix. Ensure all colors are of the same type.\");\n return pipe(mixArray(originStats.parsed, targetStats.parsed), template);\n};\n\nexport { mixArray, mixComplex, mixObject };","import { progress } from './progress.js';\nimport { mix } from './mix.js';\nimport { mixColor } from './mix-color.js';\nimport { mixComplex, mixArray, mixObject } from './mix-complex.js';\nimport { color } from 'style-value-types';\nimport { clamp } from './clamp.js';\nimport { pipe } from './pipe.js';\nimport { invariant } from 'hey-listen';\n\nvar mixNumber = function mixNumber(from, to) {\n return function (p) {\n return mix(from, to, p);\n };\n};\n\nfunction detectMixerFactory(v) {\n if (typeof v === 'number') {\n return mixNumber;\n } else if (typeof v === 'string') {\n if (color.test(v)) {\n return mixColor;\n } else {\n return mixComplex;\n }\n } else if (Array.isArray(v)) {\n return mixArray;\n } else if (typeof v === 'object') {\n return mixObject;\n }\n}\n\nfunction createMixers(output, ease, customMixer) {\n var mixers = [];\n var mixerFactory = customMixer || detectMixerFactory(output[0]);\n var numMixers = output.length - 1;\n\n for (var i = 0; i < numMixers; i++) {\n var mixer = mixerFactory(output[i], output[i + 1]);\n\n if (ease) {\n var easingFunction = Array.isArray(ease) ? ease[i] : ease;\n mixer = pipe(easingFunction, mixer);\n }\n\n mixers.push(mixer);\n }\n\n return mixers;\n}\n\nfunction fastInterpolate(_a, _b) {\n var from = _a[0],\n to = _a[1];\n var mixer = _b[0];\n return function (v) {\n return mixer(progress(from, to, v));\n };\n}\n\nfunction slowInterpolate(input, mixers) {\n var inputLength = input.length;\n var lastInputIndex = inputLength - 1;\n return function (v) {\n var mixerIndex = 0;\n var foundMixerIndex = false;\n\n if (v <= input[0]) {\n foundMixerIndex = true;\n } else if (v >= input[lastInputIndex]) {\n mixerIndex = lastInputIndex - 1;\n foundMixerIndex = true;\n }\n\n if (!foundMixerIndex) {\n var i = 1;\n\n for (; i < inputLength; i++) {\n if (input[i] > v || i === lastInputIndex) {\n break;\n }\n }\n\n mixerIndex = i - 1;\n }\n\n var progressInRange = progress(input[mixerIndex], input[mixerIndex + 1], v);\n return mixers[mixerIndex](progressInRange);\n };\n}\n\nfunction interpolate(input, output, _a) {\n var _b = _a === void 0 ? {} : _a,\n _c = _b.clamp,\n isClamp = _c === void 0 ? true : _c,\n ease = _b.ease,\n mixer = _b.mixer;\n\n var inputLength = input.length;\n invariant(inputLength === output.length, 'Both input and output ranges must be the same length');\n invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, 'Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.');\n\n if (input[0] > input[inputLength - 1]) {\n input = [].concat(input);\n output = [].concat(output);\n input.reverse();\n output.reverse();\n }\n\n var mixers = createMixers(output, ease, mixer);\n var interpolator = inputLength === 2 ? fastInterpolate(input, mixers) : slowInterpolate(input, mixers);\n return isClamp ? function (v) {\n return interpolator(clamp(input[0], input[inputLength - 1], v));\n } : interpolator;\n}\n\nexport { interpolate };","var reverseEasing = function reverseEasing(easing) {\n return function (p) {\n return 1 - easing(1 - p);\n };\n};\n\nvar mirrorEasing = function mirrorEasing(easing) {\n return function (p) {\n return p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;\n };\n};\n\nvar createExpoIn = function createExpoIn(power) {\n return function (p) {\n return Math.pow(p, power);\n };\n};\n\nvar createBackIn = function createBackIn(power) {\n return function (p) {\n return p * p * ((power + 1) * p - power);\n };\n};\n\nvar createAnticipate = function createAnticipate(power) {\n var backEasing = createBackIn(power);\n return function (p) {\n return (p *= 2) < 1 ? 0.5 * backEasing(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));\n };\n};\n\nexport { createAnticipate, createBackIn, createExpoIn, mirrorEasing, reverseEasing };","import { createExpoIn, reverseEasing, mirrorEasing, createBackIn, createAnticipate } from './utils.js';\nvar DEFAULT_OVERSHOOT_STRENGTH = 1.525;\nvar BOUNCE_FIRST_THRESHOLD = 4.0 / 11.0;\nvar BOUNCE_SECOND_THRESHOLD = 8.0 / 11.0;\nvar BOUNCE_THIRD_THRESHOLD = 9.0 / 10.0;\n\nvar linear = function linear(p) {\n return p;\n};\n\nvar easeIn = createExpoIn(2);\nvar easeOut = reverseEasing(easeIn);\nvar easeInOut = mirrorEasing(easeIn);\n\nvar circIn = function circIn(p) {\n return 1 - Math.sin(Math.acos(p));\n};\n\nvar circOut = reverseEasing(circIn);\nvar circInOut = mirrorEasing(circOut);\nvar backIn = createBackIn(DEFAULT_OVERSHOOT_STRENGTH);\nvar backOut = reverseEasing(backIn);\nvar backInOut = mirrorEasing(backIn);\nvar anticipate = createAnticipate(DEFAULT_OVERSHOOT_STRENGTH);\nvar ca = 4356.0 / 361.0;\nvar cb = 35442.0 / 1805.0;\nvar cc = 16061.0 / 1805.0;\n\nvar bounceOut = function bounceOut(p) {\n if (p === 1 || p === 0) return p;\n var p2 = p * p;\n return p < BOUNCE_FIRST_THRESHOLD ? 7.5625 * p2 : p < BOUNCE_SECOND_THRESHOLD ? 9.075 * p2 - 9.9 * p + 3.4 : p < BOUNCE_THIRD_THRESHOLD ? ca * p2 - cb * p + cc : 10.8 * p * p - 20.52 * p + 10.72;\n};\n\nvar bounceIn = reverseEasing(bounceOut);\n\nvar bounceInOut = function bounceInOut(p) {\n return p < 0.5 ? 0.5 * (1.0 - bounceOut(1.0 - p * 2.0)) : 0.5 * bounceOut(p * 2.0 - 1.0) + 0.5;\n};\n\nexport { anticipate, backIn, backInOut, backOut, bounceIn, bounceInOut, bounceOut, circIn, circInOut, circOut, easeIn, easeInOut, easeOut, linear };","import { interpolate } from '../../utils/interpolate.js';\nimport { easeInOut } from '../../easing/index.js';\n\nfunction defaultEasing(values, easing) {\n return values.map(function () {\n return easing || easeInOut;\n }).splice(0, values.length - 1);\n}\n\nfunction defaultOffset(values) {\n var numValues = values.length;\n return values.map(function (_value, i) {\n return i !== 0 ? i / (numValues - 1) : 0;\n });\n}\n\nfunction convertOffsetToTimes(offset, duration) {\n return offset.map(function (o) {\n return o * duration;\n });\n}\n\nfunction keyframes(_a) {\n var _b = _a.from,\n from = _b === void 0 ? 0 : _b,\n _c = _a.to,\n to = _c === void 0 ? 1 : _c,\n ease = _a.ease,\n offset = _a.offset,\n _d = _a.duration,\n duration = _d === void 0 ? 300 : _d;\n var state = {\n done: false,\n value: from\n };\n var values = Array.isArray(to) ? to : [from, to];\n var times = convertOffsetToTimes(offset && offset.length === values.length ? offset : defaultOffset(values), duration);\n\n function createInterpolator() {\n return interpolate(times, values, {\n ease: Array.isArray(ease) ? ease : defaultEasing(values, ease)\n });\n }\n\n var interpolator = createInterpolator();\n return {\n next: function next(t) {\n state.value = interpolator(t);\n state.done = t >= duration;\n return state;\n },\n flipTarget: function flipTarget() {\n values.reverse();\n interpolator = createInterpolator();\n }\n };\n}\n\nexport { convertOffsetToTimes, defaultEasing, defaultOffset, keyframes };","import { spring } from '../generators/spring.js';\nimport { keyframes } from '../generators/keyframes.js';\nimport { decay } from '../generators/decay.js';\nvar types = {\n keyframes: keyframes,\n spring: spring,\n decay: decay\n};\n\nfunction detectAnimationFromOptions(config) {\n if (Array.isArray(config.to)) {\n return keyframes;\n } else if (types[config.type]) {\n return types[config.type];\n }\n\n var keys = new Set(Object.keys(config));\n\n if (keys.has(\"ease\") || keys.has(\"duration\") && !keys.has(\"dampingRatio\")) {\n return keyframes;\n } else if (keys.has(\"dampingRatio\") || keys.has(\"stiffness\") || keys.has(\"mass\") || keys.has(\"damping\") || keys.has(\"restSpeed\") || keys.has(\"restDelta\")) {\n return spring;\n }\n\n return keyframes;\n}\n\nexport { detectAnimationFromOptions };","function decay(_a) {\n var _b = _a.velocity,\n velocity = _b === void 0 ? 0 : _b,\n _c = _a.from,\n from = _c === void 0 ? 0 : _c,\n _d = _a.power,\n power = _d === void 0 ? 0.8 : _d,\n _e = _a.timeConstant,\n timeConstant = _e === void 0 ? 350 : _e,\n _f = _a.restDelta,\n restDelta = _f === void 0 ? 0.5 : _f,\n modifyTarget = _a.modifyTarget;\n var state = {\n done: false,\n value: from\n };\n var amplitude = power * velocity;\n var ideal = from + amplitude;\n var target = modifyTarget === undefined ? ideal : modifyTarget(ideal);\n if (target !== ideal) amplitude = target - from;\n return {\n next: function next(t) {\n var delta = -amplitude * Math.exp(-t / timeConstant);\n state.done = !(delta > restDelta || delta < -restDelta);\n state.value = state.done ? target : target + delta;\n return state;\n },\n flipTarget: function flipTarget() {}\n };\n}\n\nexport { decay };","function loopElapsed(elapsed, duration, delay) {\n if (delay === void 0) {\n delay = 0;\n }\n\n return elapsed - duration - delay;\n}\n\nfunction reverseElapsed(elapsed, duration, delay, isForwardPlayback) {\n if (delay === void 0) {\n delay = 0;\n }\n\n if (isForwardPlayback === void 0) {\n isForwardPlayback = true;\n }\n\n return isForwardPlayback ? loopElapsed(duration + -elapsed, duration, delay) : duration - (elapsed - duration) + delay;\n}\n\nfunction hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {\n return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;\n}\n\nexport { hasRepeatDelayElapsed, loopElapsed, reverseElapsed };","import { __rest, __assign } from 'tslib';\nimport { detectAnimationFromOptions } from './utils/detect-animation-from-options.js';\nimport sync, { cancelSync } from 'framesync';\nimport { interpolate } from '../utils/interpolate.js';\nimport { hasRepeatDelayElapsed, reverseElapsed, loopElapsed } from './utils/elapsed.js';\n\nvar framesync = function framesync(update) {\n var passTimestamp = function passTimestamp(_a) {\n var delta = _a.delta;\n return update(delta);\n };\n\n return {\n start: function start() {\n return sync.update(passTimestamp, true);\n },\n stop: function stop() {\n return cancelSync.update(passTimestamp);\n }\n };\n};\n\nfunction animate(_a) {\n var _b, _c;\n\n var from = _a.from,\n _d = _a.autoplay,\n autoplay = _d === void 0 ? true : _d,\n _e = _a.driver,\n driver = _e === void 0 ? framesync : _e,\n _f = _a.elapsed,\n elapsed = _f === void 0 ? 0 : _f,\n _g = _a.repeat,\n repeatMax = _g === void 0 ? 0 : _g,\n _h = _a.repeatType,\n repeatType = _h === void 0 ? \"loop\" : _h,\n _j = _a.repeatDelay,\n repeatDelay = _j === void 0 ? 0 : _j,\n onPlay = _a.onPlay,\n onStop = _a.onStop,\n onComplete = _a.onComplete,\n onRepeat = _a.onRepeat,\n onUpdate = _a.onUpdate,\n options = __rest(_a, [\"from\", \"autoplay\", \"driver\", \"elapsed\", \"repeat\", \"repeatType\", \"repeatDelay\", \"onPlay\", \"onStop\", \"onComplete\", \"onRepeat\", \"onUpdate\"]);\n\n var to = options.to;\n var driverControls;\n var repeatCount = 0;\n var computedDuration = options.duration;\n var latest;\n var isComplete = false;\n var isForwardPlayback = true;\n var interpolateFromNumber;\n var animator = detectAnimationFromOptions(options);\n\n if ((_c = (_b = animator).needsInterpolation) === null || _c === void 0 ? void 0 : _c.call(_b, from, to)) {\n interpolateFromNumber = interpolate([0, 100], [from, to], {\n clamp: false\n });\n from = 0;\n to = 100;\n }\n\n var animation = animator(__assign(__assign({}, options), {\n from: from,\n to: to\n }));\n\n function repeat() {\n repeatCount++;\n\n if (repeatType === \"reverse\") {\n isForwardPlayback = repeatCount % 2 === 0;\n elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);\n } else {\n elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);\n if (repeatType === \"mirror\") animation.flipTarget();\n }\n\n isComplete = false;\n onRepeat && onRepeat();\n }\n\n function complete() {\n driverControls.stop();\n onComplete && onComplete();\n }\n\n function update(delta) {\n if (!isForwardPlayback) delta = -delta;\n elapsed += delta;\n\n if (!isComplete) {\n var state = animation.next(Math.max(0, elapsed));\n latest = state.value;\n if (interpolateFromNumber) latest = interpolateFromNumber(latest);\n isComplete = isForwardPlayback ? state.done : elapsed <= 0;\n }\n\n onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);\n\n if (isComplete) {\n if (repeatCount === 0) computedDuration !== null && computedDuration !== void 0 ? computedDuration : computedDuration = elapsed;\n\n if (repeatCount < repeatMax) {\n hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();\n } else {\n complete();\n }\n }\n }\n\n function play() {\n onPlay === null || onPlay === void 0 ? void 0 : onPlay();\n driverControls = driver(update);\n driverControls.start();\n }\n\n autoplay && play();\n return {\n stop: function stop() {\n onStop === null || onStop === void 0 ? void 0 : onStop();\n driverControls.stop();\n }\n };\n}\n\nexport { animate };","function velocityPerSecond(velocity, frameDuration) {\n return frameDuration ? velocity * (1000 / frameDuration) : 0;\n}\n\nexport { velocityPerSecond };","/**\n * Converts seconds to milliseconds\n *\n * @param seconds - Time in seconds.\n * @return milliseconds - Converted time in milliseconds.\n */\nvar secondsToMilliseconds = function secondsToMilliseconds(seconds) {\n return seconds * 1000;\n};\n\nexport { secondsToMilliseconds };","import { linear } from './index.js';\n\nvar a = function a(a1, a2) {\n return 1.0 - 3.0 * a2 + 3.0 * a1;\n};\n\nvar b = function b(a1, a2) {\n return 3.0 * a2 - 6.0 * a1;\n};\n\nvar c = function c(a1) {\n return 3.0 * a1;\n};\n\nvar calcBezier = function calcBezier(t, a1, a2) {\n return ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;\n};\n\nvar getSlope = function getSlope(t, a1, a2) {\n return 3.0 * a(a1, a2) * t * t + 2.0 * b(a1, a2) * t + c(a1);\n};\n\nvar subdivisionPrecision = 0.0000001;\nvar subdivisionMaxIterations = 10;\n\nfunction binarySubdivide(aX, aA, aB, mX1, mX2) {\n var currentX;\n var currentT;\n var i = 0;\n\n do {\n currentT = aA + (aB - aA) / 2.0;\n currentX = calcBezier(currentT, mX1, mX2) - aX;\n\n if (currentX > 0.0) {\n aB = currentT;\n } else {\n aA = currentT;\n }\n } while (Math.abs(currentX) > subdivisionPrecision && ++i < subdivisionMaxIterations);\n\n return currentT;\n}\n\nvar newtonIterations = 8;\nvar newtonMinSlope = 0.001;\n\nfunction newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {\n for (var i = 0; i < newtonIterations; ++i) {\n var currentSlope = getSlope(aGuessT, mX1, mX2);\n\n if (currentSlope === 0.0) {\n return aGuessT;\n }\n\n var currentX = calcBezier(aGuessT, mX1, mX2) - aX;\n aGuessT -= currentX / currentSlope;\n }\n\n return aGuessT;\n}\n\nvar kSplineTableSize = 11;\nvar kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);\n\nfunction cubicBezier(mX1, mY1, mX2, mY2) {\n if (mX1 === mY1 && mX2 === mY2) return linear;\n var sampleValues = new Float32Array(kSplineTableSize);\n\n for (var i = 0; i < kSplineTableSize; ++i) {\n sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);\n }\n\n function getTForX(aX) {\n var intervalStart = 0.0;\n var currentSample = 1;\n var lastSample = kSplineTableSize - 1;\n\n for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {\n intervalStart += kSampleStepSize;\n }\n\n --currentSample;\n var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);\n var guessForT = intervalStart + dist * kSampleStepSize;\n var initialSlope = getSlope(guessForT, mX1, mX2);\n\n if (initialSlope >= newtonMinSlope) {\n return newtonRaphsonIterate(aX, guessForT, mX1, mX2);\n } else if (initialSlope === 0.0) {\n return guessForT;\n } else {\n return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);\n }\n }\n\n return function (t) {\n return t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);\n };\n}\n\nexport { cubicBezier };","import { __read } from 'tslib';\nimport { invariant } from 'hey-listen';\nimport { cubicBezier, linear, easeIn, easeInOut, easeOut, circIn, circInOut, circOut, backIn, backInOut, backOut, anticipate, bounceIn, bounceInOut, bounceOut } from 'popmotion';\nvar easingLookup = {\n linear: linear,\n easeIn: easeIn,\n easeInOut: easeInOut,\n easeOut: easeOut,\n circIn: circIn,\n circInOut: circInOut,\n circOut: circOut,\n backIn: backIn,\n backInOut: backInOut,\n backOut: backOut,\n anticipate: anticipate,\n bounceIn: bounceIn,\n bounceInOut: bounceInOut,\n bounceOut: bounceOut\n};\n\nvar easingDefinitionToFunction = function easingDefinitionToFunction(definition) {\n if (Array.isArray(definition)) {\n // If cubic bezier definition, create bezier curve\n invariant(definition.length === 4, \"Cubic bezier arrays must contain four numerical values.\");\n\n var _a = __read(definition, 4),\n x1 = _a[0],\n y1 = _a[1],\n x2 = _a[2],\n y2 = _a[3];\n\n return cubicBezier(x1, y1, x2, y2);\n } else if (typeof definition === \"string\") {\n // Else lookup from table\n invariant(easingLookup[definition] !== undefined, \"Invalid easing type '\" + definition + \"'\");\n return easingLookup[definition];\n }\n\n return definition;\n};\n\nvar isEasingArray = function isEasingArray(ease) {\n return Array.isArray(ease) && typeof ease[0] !== \"number\";\n};\n\nexport { easingDefinitionToFunction, isEasingArray };","import { complex } from 'style-value-types';\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 */\n\nvar isAnimatable = function isAnimatable(key, value) {\n // If the list of keys tat might be non-animatable grows, replace with Set\n if (key === \"zIndex\") return false; // If it's a number or a keyframes array, we can animate it. We might at some point\n // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,\n // but for now lets leave it like this for performance reasons\n\n if (typeof value === \"number\" || Array.isArray(value)) return true;\n\n if (typeof value === \"string\" && // It's animatable if we have a string\n complex.test(value) && // And it contains numbers and/or colors\n !value.startsWith(\"url(\") // Unless it starts with \"url(\"\n ) {\n return true;\n }\n\n return false;\n};\n\nexport { isAnimatable };","import { __assign } from 'tslib';\nimport { isKeyframesTarget } from './is-keyframes-target.js';\n\nvar underDampedSpring = function underDampedSpring() {\n return {\n type: \"spring\",\n stiffness: 500,\n damping: 25,\n restDelta: 0.5,\n restSpeed: 10\n };\n};\n\nvar criticallyDampedSpring = function criticallyDampedSpring(to) {\n return {\n type: \"spring\",\n stiffness: 550,\n damping: to === 0 ? 2 * Math.sqrt(550) : 30,\n restDelta: 0.01,\n restSpeed: 10\n };\n};\n\nvar linearTween = function linearTween() {\n return {\n type: \"keyframes\",\n ease: \"linear\",\n duration: 0.3\n };\n};\n\nvar keyframes = function keyframes(values) {\n return {\n type: \"keyframes\",\n duration: 0.8,\n values: values\n };\n};\n\nvar defaultTransitions = {\n x: underDampedSpring,\n y: underDampedSpring,\n z: underDampedSpring,\n rotate: underDampedSpring,\n rotateX: underDampedSpring,\n rotateY: underDampedSpring,\n rotateZ: underDampedSpring,\n scaleX: criticallyDampedSpring,\n scaleY: criticallyDampedSpring,\n scale: criticallyDampedSpring,\n opacity: linearTween,\n backgroundColor: linearTween,\n color: linearTween,\n default: criticallyDampedSpring\n};\n\nvar getDefaultTransition = function getDefaultTransition(valueKey, to) {\n var transitionFactory;\n\n if (isKeyframesTarget(to)) {\n transitionFactory = keyframes;\n } else {\n transitionFactory = defaultTransitions[valueKey] || defaultTransitions.default;\n }\n\n return __assign({\n to: to\n }, transitionFactory(to));\n};\n\nexport { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };","import { __assign } from 'tslib';\nimport { complex } from './index.js';\nimport { floatRegex } from '../utils.js';\nvar maxDefaults = new Set(['brightness', 'contrast', 'saturate', 'opacity']);\n\nfunction applyDefaultFilter(v) {\n var _a = v.slice(0, -1).split('('),\n name = _a[0],\n value = _a[1];\n\n if (name === 'drop-shadow') return v;\n var number = (value.match(floatRegex) || [])[0];\n if (!number) return v;\n var unit = value.replace(number, '');\n var defaultValue = maxDefaults.has(name) ? 1 : 0;\n if (number !== value) defaultValue *= 100;\n return name + '(' + defaultValue + unit + ')';\n}\n\nvar functionRegex = /([a-z-]*)\\(.*?\\)/g;\n\nvar filter = __assign(__assign({}, complex), {\n getAnimatableNone: function getAnimatableNone(v) {\n var functions = v.match(functionRegex);\n return functions ? functions.map(applyDefaultFilter).join(' ') : v;\n }\n});\n\nexport { filter };","import { __assign } from 'tslib';\nimport { color, filter } from 'style-value-types';\nimport { numberValueTypes } from './number.js';\n/**\n * A map of default value types for common values\n */\n\nvar defaultValueTypes = __assign(__assign({}, numberValueTypes), {\n // Color props\n color: 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: filter,\n WebkitFilter: filter\n});\n/**\n * Gets the default ValueType for the provided value key\n */\n\n\nvar getDefaultValueType = function getDefaultValueType(key) {\n return defaultValueTypes[key];\n};\n\nexport { defaultValueTypes, getDefaultValueType };","import { filter, complex } from 'style-value-types';\nimport { getDefaultValueType } from './defaults.js';\n\nfunction getAnimatableNone(key, value) {\n var _a;\n\n var defaultValueType = getDefaultValueType(key);\n if (defaultValueType !== filter) defaultValueType = complex; // If value is not recognised as animatable, ie \"none\", create an animatable version origin based on the target\n\n return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);\n}\n\nexport { getAnimatableNone };","import { __assign, __rest, __spreadArray, __read } from 'tslib';\nimport { inertia, animate } from 'popmotion';\nimport { secondsToMilliseconds } from '../../utils/time-conversion.js';\nimport { isEasingArray, easingDefinitionToFunction } from './easing.js';\nimport { isAnimatable } from './is-animatable.js';\nimport { getDefaultTransition } from './default-transitions.js';\nimport { warning } from 'hey-listen';\nimport { getAnimatableNone } from '../../render/dom/value-types/animatable-none.js';\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 */\n\nfunction isTransitionDefined(_a) {\n _a.when;\n _a.delay;\n _a.delayChildren;\n _a.staggerChildren;\n _a.staggerDirection;\n _a.repeat;\n _a.repeatType;\n _a.repeatDelay;\n _a.from;\n\n var transition = __rest(_a, [\"when\", \"delay\", \"delayChildren\", \"staggerChildren\", \"staggerDirection\", \"repeat\", \"repeatType\", \"repeatDelay\", \"from\"]);\n\n return !!Object.keys(transition).length;\n}\n\nvar legacyRepeatWarning = false;\n/**\n * Convert Framer Motion's Transition type into Popmotion-compatible options.\n */\n\nfunction convertTransitionToAnimationOptions(_a) {\n var ease = _a.ease,\n times = _a.times,\n yoyo = _a.yoyo,\n flip = _a.flip,\n loop = _a.loop,\n transition = __rest(_a, [\"ease\", \"times\", \"yoyo\", \"flip\", \"loop\"]);\n\n var options = __assign({}, transition);\n\n if (times) options[\"offset\"] = times;\n /**\n * Convert any existing durations from seconds to milliseconds\n */\n\n if (transition.duration) options[\"duration\"] = secondsToMilliseconds(transition.duration);\n if (transition.repeatDelay) options.repeatDelay = secondsToMilliseconds(transition.repeatDelay);\n /**\n * Map easing names to Popmotion's easing functions\n */\n\n if (ease) {\n options[\"ease\"] = isEasingArray(ease) ? ease.map(easingDefinitionToFunction) : easingDefinitionToFunction(ease);\n }\n /**\n * Support legacy transition API\n */\n\n\n if (transition.type === \"tween\") options.type = \"keyframes\";\n /**\n * TODO: These options are officially removed from the API.\n */\n\n if (yoyo || loop || flip) {\n warning(!legacyRepeatWarning, \"yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.\");\n legacyRepeatWarning = true;\n\n if (yoyo) {\n options.repeatType = \"reverse\";\n } else if (loop) {\n options.repeatType = \"loop\";\n } else if (flip) {\n options.repeatType = \"mirror\";\n }\n\n options.repeat = loop || yoyo || flip || transition.repeat;\n }\n /**\n * TODO: Popmotion 9 has the ability to automatically detect whether to use\n * a keyframes or spring animation, but does so by detecting velocity and other spring options.\n * It'd be good to introduce a similar thing here.\n */\n\n\n if (transition.type !== \"spring\") options.type = \"keyframes\";\n return options;\n}\n/**\n * Get the delay for a value by checking Transition with decreasing specificity.\n */\n\n\nfunction getDelayFromTransition(transition, key) {\n var _a;\n\n var valueTransition = getValueTransition(transition, key) || {};\n return (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : 0;\n}\n\nfunction hydrateKeyframes(options) {\n if (Array.isArray(options.to) && options.to[0] === null) {\n options.to = __spreadArray([], __read(options.to));\n options.to[0] = options.from;\n }\n\n return options;\n}\n\nfunction getPopmotionAnimationOptions(transition, options, key) {\n var _a;\n\n if (Array.isArray(options.to)) {\n (_a = transition.duration) !== null && _a !== void 0 ? _a : transition.duration = 0.8;\n }\n\n hydrateKeyframes(options);\n /**\n * Get a default transition if none is determined to be defined.\n */\n\n if (!isTransitionDefined(transition)) {\n transition = __assign(__assign({}, transition), getDefaultTransition(key, options.to));\n }\n\n return __assign(__assign({}, options), convertTransitionToAnimationOptions(transition));\n}\n/**\n *\n */\n\n\nfunction getAnimation(key, value, target, transition, onComplete) {\n var _a;\n\n var valueTransition = getValueTransition(transition, key);\n var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();\n var isTargetAnimatable = isAnimatable(key, target);\n\n if (origin === \"none\" && isTargetAnimatable && typeof target === \"string\") {\n /**\n * If we're trying to animate from \"none\", try and get an animatable version\n * of the target. This could be improved to work both ways.\n */\n origin = getAnimatableNone(key, target);\n } else if (isZero(origin) && typeof target === \"string\") {\n origin = getZeroUnit(target);\n } else if (!Array.isArray(target) && isZero(target) && typeof origin === \"string\") {\n target = getZeroUnit(origin);\n }\n\n var isOriginAnimatable = isAnimatable(key, origin);\n warning(isOriginAnimatable === isTargetAnimatable, \"You are trying to animate \" + key + \" from \\\"\" + origin + \"\\\" to \\\"\" + target + \"\\\". \" + origin + \" is not an animatable value - to enable this animation set \" + origin + \" to a value animatable to \" + target + \" via the `style` property.\");\n\n function start() {\n var options = {\n from: origin,\n to: target,\n velocity: value.getVelocity(),\n onComplete: onComplete,\n onUpdate: function onUpdate(v) {\n return value.set(v);\n }\n };\n return valueTransition.type === \"inertia\" || valueTransition.type === \"decay\" ? inertia(__assign(__assign({}, options), valueTransition)) : animate(__assign(__assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), {\n onUpdate: function onUpdate(v) {\n var _a;\n\n options.onUpdate(v);\n (_a = valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, v);\n },\n onComplete: function onComplete() {\n var _a;\n\n options.onComplete();\n (_a = valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);\n }\n }));\n }\n\n function set() {\n var _a;\n\n value.set(target);\n onComplete();\n (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);\n return {\n stop: function stop() {}\n };\n }\n\n return !isOriginAnimatable || !isTargetAnimatable || valueTransition.type === false ? set : start;\n}\n\nfunction isZero(value) {\n return value === 0 || typeof value === \"string\" && parseFloat(value) === 0 && value.indexOf(\" \") === -1;\n}\n\nfunction getZeroUnit(potentialUnitType) {\n return typeof potentialUnitType === \"number\" ? 0 : getAnimatableNone(\"\", potentialUnitType);\n}\n\nfunction getValueTransition(transition, key) {\n return transition[key] || transition[\"default\"] || transition;\n}\n/**\n * Start animation on a MotionValue. This function is an interface between\n * Framer Motion and Popmotion\n *\n * @internal\n */\n\n\nfunction startAnimation(key, value, target, transition) {\n if (transition === void 0) {\n transition = {};\n }\n\n return value.start(function (onComplete) {\n var delayTimer;\n var controls;\n var animation = getAnimation(key, value, target, transition, onComplete);\n var delay = getDelayFromTransition(transition, key);\n\n var start = function start() {\n return controls = animation();\n };\n\n if (delay) {\n delayTimer = setTimeout(start, secondsToMilliseconds(delay));\n } else {\n start();\n }\n\n return function () {\n clearTimeout(delayTimer);\n controls === null || controls === void 0 ? void 0 : controls.stop();\n };\n });\n}\n\nexport { convertTransitionToAnimationOptions, getDelayFromTransition, getPopmotionAnimationOptions, getValueTransition, getZeroUnit, hydrateKeyframes, isTransitionDefined, isZero, startAnimation };","import { __assign } from 'tslib';\nimport { animate } from './index.js';\nimport { velocityPerSecond } from '../utils/velocity-per-second.js';\nimport { getFrameData } from 'framesync';\n\nfunction inertia(_a) {\n var _b = _a.from,\n from = _b === void 0 ? 0 : _b,\n _c = _a.velocity,\n velocity = _c === void 0 ? 0 : _c,\n min = _a.min,\n max = _a.max,\n _d = _a.power,\n power = _d === void 0 ? 0.8 : _d,\n _e = _a.timeConstant,\n timeConstant = _e === void 0 ? 750 : _e,\n _f = _a.bounceStiffness,\n bounceStiffness = _f === void 0 ? 500 : _f,\n _g = _a.bounceDamping,\n bounceDamping = _g === void 0 ? 10 : _g,\n _h = _a.restDelta,\n restDelta = _h === void 0 ? 1 : _h,\n modifyTarget = _a.modifyTarget,\n driver = _a.driver,\n _onUpdate = _a.onUpdate,\n onComplete = _a.onComplete;\n var currentAnimation;\n\n function isOutOfBounds(v) {\n return min !== undefined && v < min || max !== undefined && v > max;\n }\n\n function boundaryNearest(v) {\n if (min === undefined) return max;\n if (max === undefined) return min;\n return Math.abs(min - v) < Math.abs(max - v) ? min : max;\n }\n\n function startAnimation(options) {\n currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();\n currentAnimation = animate(__assign(__assign({}, options), {\n driver: driver,\n onUpdate: function onUpdate(v) {\n var _a;\n\n _onUpdate === null || _onUpdate === void 0 ? void 0 : _onUpdate(v);\n (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);\n },\n onComplete: onComplete\n }));\n }\n\n function startSpring(options) {\n startAnimation(__assign({\n type: \"spring\",\n stiffness: bounceStiffness,\n damping: bounceDamping,\n restDelta: restDelta\n }, options));\n }\n\n if (isOutOfBounds(from)) {\n startSpring({\n from: from,\n velocity: velocity,\n to: boundaryNearest(from)\n });\n } else {\n var target = power * velocity + from;\n if (typeof modifyTarget !== \"undefined\") target = modifyTarget(target);\n var boundary_1 = boundaryNearest(target);\n var heading_1 = boundary_1 === min ? -1 : 1;\n var prev_1;\n var current_1;\n\n var checkBoundary = function checkBoundary(v) {\n prev_1 = current_1;\n current_1 = v;\n velocity = velocityPerSecond(v - prev_1, getFrameData().delta);\n\n if (heading_1 === 1 && v > boundary_1 || heading_1 === -1 && v < boundary_1) {\n startSpring({\n from: v,\n to: boundary_1,\n velocity: velocity\n });\n }\n };\n\n startAnimation({\n type: \"decay\",\n from: from,\n velocity: velocity,\n timeConstant: timeConstant,\n power: power,\n restDelta: restDelta,\n modifyTarget: modifyTarget,\n onUpdate: isOutOfBounds(target) ? checkBoundary : undefined\n });\n }\n\n return {\n stop: function stop() {\n return currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();\n }\n };\n}\n\nexport { inertia };","function addUniqueItem(arr, item) {\n arr.indexOf(item) === -1 && arr.push(item);\n}\n\nfunction removeItem(arr, item) {\n var index = arr.indexOf(item);\n index > -1 && arr.splice(index, 1);\n}\n\nexport { addUniqueItem, removeItem };","import { addUniqueItem, removeItem } from './array.js';\n\nvar SubscriptionManager =\n/** @class */\nfunction () {\n function SubscriptionManager() {\n this.subscriptions = [];\n }\n\n SubscriptionManager.prototype.add = function (handler) {\n var _this = this;\n\n addUniqueItem(this.subscriptions, handler);\n return function () {\n return removeItem(_this.subscriptions, handler);\n };\n };\n\n SubscriptionManager.prototype.notify = function (a, b, c) {\n var numSubscriptions = this.subscriptions.length;\n if (!numSubscriptions) return;\n\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 } else {\n for (var i = 0; i < numSubscriptions; i++) {\n /**\n * Check whether the handler exists before firing as it's possible\n * the subscriptions were modified during this loop running.\n */\n var handler = this.subscriptions[i];\n handler && handler(a, b, c);\n }\n }\n };\n\n SubscriptionManager.prototype.getSize = function () {\n return this.subscriptions.length;\n };\n\n SubscriptionManager.prototype.clear = function () {\n this.subscriptions.length = 0;\n };\n\n return SubscriptionManager;\n}();\n\nexport { SubscriptionManager };","import sync, { getFrameData } from 'framesync';\nimport { velocityPerSecond } from 'popmotion';\nimport { SubscriptionManager } from '../utils/subscription-manager.js';\n\nvar isFloat = function isFloat(value) {\n return !isNaN(parseFloat(value));\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\n\n\nvar MotionValue =\n/** @class */\nfunction () {\n /**\n * @param init - The initiating value\n * @param config - Optional configuration options\n *\n * - `transformer`: A function to transform incoming values with.\n *\n * @internal\n */\n function MotionValue(init) {\n var _this = this;\n /**\n * Duration, in milliseconds, since last updating frame.\n *\n * @internal\n */\n\n\n this.timeDelta = 0;\n /**\n * Timestamp of the last time this `MotionValue` was updated.\n *\n * @internal\n */\n\n this.lastUpdated = 0;\n /**\n * Functions to notify when the `MotionValue` updates.\n *\n * @internal\n */\n\n this.updateSubscribers = new SubscriptionManager();\n /**\n * Functions to notify when the velocity updates.\n *\n * @internal\n */\n\n this.velocityUpdateSubscribers = new SubscriptionManager();\n /**\n * Functions to notify when the `MotionValue` updates and `render` is set to `true`.\n *\n * @internal\n */\n\n this.renderSubscribers = new SubscriptionManager();\n /**\n * Tracks whether this value can output a velocity. Currently this is only true\n * if the value is numerical, but we might be able to widen the scope here and support\n * other value types.\n *\n * @internal\n */\n\n this.canTrackVelocity = false;\n\n this.updateAndNotify = function (v, render) {\n if (render === void 0) {\n render = true;\n }\n\n _this.prev = _this.current;\n _this.current = v; // Update timestamp\n\n var _a = getFrameData(),\n delta = _a.delta,\n timestamp = _a.timestamp;\n\n if (_this.lastUpdated !== timestamp) {\n _this.timeDelta = delta;\n _this.lastUpdated = timestamp;\n sync.postRender(_this.scheduleVelocityCheck);\n } // Update update subscribers\n\n\n if (_this.prev !== _this.current) {\n _this.updateSubscribers.notify(_this.current);\n } // Update velocity subscribers\n\n\n if (_this.velocityUpdateSubscribers.getSize()) {\n _this.velocityUpdateSubscribers.notify(_this.getVelocity());\n } // Update render subscribers\n\n\n if (render) {\n _this.renderSubscribers.notify(_this.current);\n }\n };\n /**\n * Schedule a velocity check for the next frame.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n\n\n this.scheduleVelocityCheck = function () {\n return sync.postRender(_this.velocityCheck);\n };\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\n\n this.velocityCheck = function (_a) {\n var timestamp = _a.timestamp;\n\n if (timestamp !== _this.lastUpdated) {\n _this.prev = _this.current;\n\n _this.velocityUpdateSubscribers.notify(_this.getVelocity());\n }\n };\n\n this.hasAnimated = false;\n this.prev = this.current = init;\n this.canTrackVelocity = isFloat(this.current);\n }\n /**\n * Adds a function that will be notified when the `MotionValue` is updated.\n *\n * It returns a function that, when called, will cancel the subscription.\n *\n * When calling `onChange` inside a React component, it should be wrapped with the\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\n *\n * @library\n *\n * ```jsx\n * function MyComponent() {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.onChange(updateOpacity)\n * const unsubscribeY = y.onChange(updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return \n * }\n * ```\n *\n * @motion\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.onChange(updateOpacity)\n * const unsubscribeY = y.onChange(updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return