g(x,c))a[d]=x,a[n]=c,d=n;else break a}}return b}\nfunction g(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}if(\"object\"===typeof performance&&\"function\"===typeof performance.now){var l=performance;exports.unstable_now=function(){return l.now()}}else{var p=Date,q=p.now();exports.unstable_now=function(){return p.now()-q}}var r=[],t=[],u=1,v=null,y=3,z=!1,A=!1,B=!1,D=\"function\"===typeof setTimeout?setTimeout:null,E=\"function\"===typeof clearTimeout?clearTimeout:null,F=\"undefined\"!==typeof setImmediate?setImmediate:null;\n\"undefined\"!==typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function G(a){for(var b=h(t);null!==b;){if(null===b.callback)k(t);else if(b.startTime<=a)k(t),b.sortIndex=b.expirationTime,f(r,b);else break;b=h(t)}}function H(a){B=!1;G(a);if(!A)if(null!==h(r))A=!0,I(J);else{var b=h(t);null!==b&&K(H,b.startTime-a)}}\nfunction J(a,b){A=!1;B&&(B=!1,E(L),L=-1);z=!0;var c=y;try{G(b);for(v=h(r);null!==v&&(!(v.expirationTime>b)||a&&!M());){var d=v.callback;if(\"function\"===typeof d){v.callback=null;y=v.priorityLevel;var e=d(v.expirationTime<=b);b=exports.unstable_now();\"function\"===typeof e?v.callback=e:v===h(r)&&k(r);G(b)}else k(r);v=h(r)}if(null!==v)var w=!0;else{var m=h(t);null!==m&&K(H,m.startTime-b);w=!1}return w}finally{v=null,y=c,z=!1}}var N=!1,O=null,L=-1,P=5,Q=-1;\nfunction M(){return exports.unstable_now()-Qa||125d?(a.sortIndex=c,f(t,a),null===h(r)&&a===h(t)&&(B?(E(L),L=-1):B=!0,K(H,c-d))):(a.sortIndex=e,f(r,a),A||z||(A=!0,I(J)));return a};\nexports.unstable_shouldYield=M;exports.unstable_wrapCallback=function(a){var b=y;return function(){var c=y;y=b;try{return a.apply(this,arguments)}finally{y=c}}};\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/scheduler.production.min.js');\n} else {\n module.exports = require('./cjs/scheduler.development.js');\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\tloaded: false,\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Flag the module as loaded\n\tmodule.loaded = true;\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);\nvar leafPrototypes;\n// create a fake namespace object\n// mode & 1: value is a module id, require it\n// mode & 2: merge all properties of value into the ns\n// mode & 4: return value when already ns object\n// mode & 16: return value when it's Promise-like\n// mode & 8|1: behave like require\n__webpack_require__.t = function(value, mode) {\n\tif(mode & 1) value = this(value);\n\tif(mode & 8) return value;\n\tif(typeof value === 'object' && value) {\n\t\tif((mode & 4) && value.__esModule) return value;\n\t\tif((mode & 16) && typeof value.then === 'function') return value;\n\t}\n\tvar ns = Object.create(null);\n\t__webpack_require__.r(ns);\n\tvar def = {};\n\tleafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];\n\tfor(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {\n\t\tObject.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));\n\t}\n\tdef['default'] = () => (value);\n\t__webpack_require__.d(ns, def);\n\treturn ns;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.f = {};\n// This file contains only the entry chunk.\n// The chunk loading function for additional chunks\n__webpack_require__.e = (chunkId) => {\n\treturn Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {\n\t\t__webpack_require__.f[key](chunkId, promises);\n\t\treturn promises;\n\t}, []));\n};","// This function allow to reference async chunks\n__webpack_require__.u = (chunkId) => {\n\t// return url for filenames based on template\n\treturn \"static/js/\" + chunkId + \".\" + \"b03bc01e\" + \".chunk.js\";\n};","// This function allow to reference async chunks\n__webpack_require__.miniCssF = (chunkId) => {\n\t// return url for filenames based on template\n\treturn undefined;\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","var inProgress = {};\nvar dataWebpackPrefix = \"homesite:\";\n// loadScript function to load a script via script tag\n__webpack_require__.l = (url, done, key, chunkId) => {\n\tif(inProgress[url]) { inProgress[url].push(done); return; }\n\tvar script, needAttach;\n\tif(key !== undefined) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tfor(var i = 0; i < scripts.length; i++) {\n\t\t\tvar s = scripts[i];\n\t\t\tif(s.getAttribute(\"src\") == url || s.getAttribute(\"data-webpack\") == dataWebpackPrefix + key) { script = s; break; }\n\t\t}\n\t}\n\tif(!script) {\n\t\tneedAttach = true;\n\t\tscript = document.createElement('script');\n\n\t\tscript.charset = 'utf-8';\n\t\tscript.timeout = 120;\n\t\tif (__webpack_require__.nc) {\n\t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n\t\t}\n\t\tscript.setAttribute(\"data-webpack\", dataWebpackPrefix + key);\n\n\t\tscript.src = url;\n\t}\n\tinProgress[url] = [done];\n\tvar onScriptComplete = (prev, event) => {\n\t\t// avoid mem leaks in IE.\n\t\tscript.onerror = script.onload = null;\n\t\tclearTimeout(timeout);\n\t\tvar doneFns = inProgress[url];\n\t\tdelete inProgress[url];\n\t\tscript.parentNode && script.parentNode.removeChild(script);\n\t\tdoneFns && doneFns.forEach((fn) => (fn(event)));\n\t\tif(prev) return prev(event);\n\t}\n\tvar timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);\n\tscript.onerror = onScriptComplete.bind(null, script.onerror);\n\tscript.onload = onScriptComplete.bind(null, script.onload);\n\tneedAttach && document.head.appendChild(script);\n};","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.nmd = (module) => {\n\tmodule.paths = [];\n\tif (!module.children) module.children = [];\n\treturn module;\n};","__webpack_require__.p = \"/\";","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t792: 0\n};\n\n__webpack_require__.f.j = (chunkId, promises) => {\n\t\t// JSONP chunk loading for javascript\n\t\tvar installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;\n\t\tif(installedChunkData !== 0) { // 0 means \"already installed\".\n\n\t\t\t// a Promise means \"currently loading\".\n\t\t\tif(installedChunkData) {\n\t\t\t\tpromises.push(installedChunkData[2]);\n\t\t\t} else {\n\t\t\t\tif(true) { // all chunks have JS\n\t\t\t\t\t// setup Promise in chunk cache\n\t\t\t\t\tvar promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));\n\t\t\t\t\tpromises.push(installedChunkData[2] = promise);\n\n\t\t\t\t\t// start chunk loading\n\t\t\t\t\tvar url = __webpack_require__.p + __webpack_require__.u(chunkId);\n\t\t\t\t\t// create error before stack unwound to get useful stacktrace later\n\t\t\t\t\tvar error = new Error();\n\t\t\t\t\tvar loadingEnded = (event) => {\n\t\t\t\t\t\tif(__webpack_require__.o(installedChunks, chunkId)) {\n\t\t\t\t\t\t\tinstalledChunkData = installedChunks[chunkId];\n\t\t\t\t\t\t\tif(installedChunkData !== 0) installedChunks[chunkId] = undefined;\n\t\t\t\t\t\t\tif(installedChunkData) {\n\t\t\t\t\t\t\t\tvar errorType = event && (event.type === 'load' ? 'missing' : event.type);\n\t\t\t\t\t\t\t\tvar realSrc = event && event.target && event.target.src;\n\t\t\t\t\t\t\t\terror.message = 'Loading chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';\n\t\t\t\t\t\t\t\terror.name = 'ChunkLoadError';\n\t\t\t\t\t\t\t\terror.type = errorType;\n\t\t\t\t\t\t\t\terror.request = realSrc;\n\t\t\t\t\t\t\t\tinstalledChunkData[1](error);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t\t__webpack_require__.l(url, loadingEnded, \"chunk-\" + chunkId, chunkId);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n};\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n// no on chunks loaded\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkhomesite\"] = self[\"webpackChunkhomesite\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","__webpack_require__.nc = undefined;","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","function anatomy(name, map = {}) {\n let called = false;\n function assert() {\n if (!called) {\n called = true;\n return;\n }\n throw new Error(\n \"[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?\"\n );\n }\n function parts(...values) {\n assert();\n for (const part of values) {\n map[part] = toPart(part);\n }\n return anatomy(name, map);\n }\n function extend(...parts2) {\n for (const part of parts2) {\n if (part in map)\n continue;\n map[part] = toPart(part);\n }\n return anatomy(name, map);\n }\n function selectors() {\n const value = Object.fromEntries(\n Object.entries(map).map(([key, part]) => [key, part.selector])\n );\n return value;\n }\n function classnames() {\n const value = Object.fromEntries(\n Object.entries(map).map(([key, part]) => [key, part.className])\n );\n return value;\n }\n function toPart(part) {\n const el = [\"container\", \"root\"].includes(part ?? \"\") ? [name] : [name, part];\n const attr = el.filter(Boolean).join(\"__\");\n const className = `chakra-${attr}`;\n const partObj = {\n className,\n selector: `.${className}`,\n toString: () => part\n };\n return partObj;\n }\n const __type = {};\n return {\n parts,\n toPart,\n extend,\n selectors,\n classnames,\n get keys() {\n return Object.keys(map);\n },\n __type\n };\n}\n\nexport { anatomy };\n","import { anatomy } from './create-anatomy.mjs';\n\nconst accordionAnatomy = anatomy(\"accordion\").parts(\n \"root\",\n \"container\",\n \"button\",\n \"panel\",\n \"icon\"\n);\nconst alertAnatomy = anatomy(\"alert\").parts(\n \"title\",\n \"description\",\n \"container\",\n \"icon\",\n \"spinner\"\n);\nconst avatarAnatomy = anatomy(\"avatar\").parts(\n \"label\",\n \"badge\",\n \"container\",\n \"excessLabel\",\n \"group\"\n);\nconst breadcrumbAnatomy = anatomy(\"breadcrumb\").parts(\n \"link\",\n \"item\",\n \"container\",\n \"separator\"\n);\nconst buttonAnatomy = anatomy(\"button\").parts();\nconst checkboxAnatomy = anatomy(\"checkbox\").parts(\n \"control\",\n \"icon\",\n \"container\",\n \"label\"\n);\nconst circularProgressAnatomy = anatomy(\"progress\").parts(\n \"track\",\n \"filledTrack\",\n \"label\"\n);\nconst drawerAnatomy = anatomy(\"drawer\").parts(\n \"overlay\",\n \"dialogContainer\",\n \"dialog\",\n \"header\",\n \"closeButton\",\n \"body\",\n \"footer\"\n);\nconst editableAnatomy = anatomy(\"editable\").parts(\n \"preview\",\n \"input\",\n \"textarea\"\n);\nconst formAnatomy = anatomy(\"form\").parts(\n \"container\",\n \"requiredIndicator\",\n \"helperText\"\n);\nconst formErrorAnatomy = anatomy(\"formError\").parts(\"text\", \"icon\");\nconst inputAnatomy = anatomy(\"input\").parts(\n \"addon\",\n \"field\",\n \"element\",\n \"group\"\n);\nconst listAnatomy = anatomy(\"list\").parts(\"container\", \"item\", \"icon\");\nconst menuAnatomy = anatomy(\"menu\").parts(\n \"button\",\n \"list\",\n \"item\",\n \"groupTitle\",\n \"icon\",\n \"command\",\n \"divider\"\n);\nconst modalAnatomy = anatomy(\"modal\").parts(\n \"overlay\",\n \"dialogContainer\",\n \"dialog\",\n \"header\",\n \"closeButton\",\n \"body\",\n \"footer\"\n);\nconst numberInputAnatomy = anatomy(\"numberinput\").parts(\n \"root\",\n \"field\",\n \"stepperGroup\",\n \"stepper\"\n);\nconst pinInputAnatomy = anatomy(\"pininput\").parts(\"field\");\nconst popoverAnatomy = anatomy(\"popover\").parts(\n \"content\",\n \"header\",\n \"body\",\n \"footer\",\n \"popper\",\n \"arrow\",\n \"closeButton\"\n);\nconst progressAnatomy = anatomy(\"progress\").parts(\n \"label\",\n \"filledTrack\",\n \"track\"\n);\nconst radioAnatomy = anatomy(\"radio\").parts(\n \"container\",\n \"control\",\n \"label\"\n);\nconst selectAnatomy = anatomy(\"select\").parts(\"field\", \"icon\");\nconst sliderAnatomy = anatomy(\"slider\").parts(\n \"container\",\n \"track\",\n \"thumb\",\n \"filledTrack\",\n \"mark\"\n);\nconst statAnatomy = anatomy(\"stat\").parts(\n \"container\",\n \"label\",\n \"helpText\",\n \"number\",\n \"icon\"\n);\nconst switchAnatomy = anatomy(\"switch\").parts(\n \"container\",\n \"track\",\n \"thumb\",\n \"label\"\n);\nconst tableAnatomy = anatomy(\"table\").parts(\n \"table\",\n \"thead\",\n \"tbody\",\n \"tr\",\n \"th\",\n \"td\",\n \"tfoot\",\n \"caption\"\n);\nconst tabsAnatomy = anatomy(\"tabs\").parts(\n \"root\",\n \"tab\",\n \"tablist\",\n \"tabpanel\",\n \"tabpanels\",\n \"indicator\"\n);\nconst tagAnatomy = anatomy(\"tag\").parts(\n \"container\",\n \"label\",\n \"closeButton\"\n);\nconst cardAnatomy = anatomy(\"card\").parts(\n \"container\",\n \"header\",\n \"body\",\n \"footer\"\n);\nconst stepperAnatomy = anatomy(\"stepper\").parts(\n \"stepper\",\n \"step\",\n \"title\",\n \"description\",\n \"indicator\",\n \"separator\",\n \"icon\",\n \"number\"\n);\n\nexport { accordionAnatomy, alertAnatomy, avatarAnatomy, breadcrumbAnatomy, buttonAnatomy, cardAnatomy, checkboxAnatomy, circularProgressAnatomy, drawerAnatomy, editableAnatomy, formAnatomy, formErrorAnatomy, inputAnatomy, listAnatomy, menuAnatomy, modalAnatomy, numberInputAnatomy, pinInputAnatomy, popoverAnatomy, progressAnatomy, radioAnatomy, selectAnatomy, sliderAnatomy, statAnatomy, stepperAnatomy, switchAnatomy, tableAnatomy, tabsAnatomy, tagAnatomy };\n","function defineStyle(styles) {\n return styles;\n}\nfunction defineStyleConfig(config) {\n return config;\n}\nfunction createMultiStyleConfigHelpers(parts) {\n return {\n definePartsStyle(config) {\n return config;\n },\n defineMultiStyleConfig(config) {\n return { parts, ...config };\n }\n };\n}\n\nexport { createMultiStyleConfigHelpers, defineStyle, defineStyleConfig };\n","import { accordionAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(accordionAnatomy.keys);\nconst baseStyleContainer = defineStyle({\n borderTopWidth: \"1px\",\n borderColor: \"inherit\",\n _last: {\n borderBottomWidth: \"1px\"\n }\n});\nconst baseStyleButton = defineStyle({\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n fontSize: \"md\",\n _focusVisible: {\n boxShadow: \"outline\"\n },\n _hover: {\n bg: \"blackAlpha.50\"\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n },\n px: \"4\",\n py: \"2\"\n});\nconst baseStylePanel = defineStyle({\n pt: \"2\",\n px: \"4\",\n pb: \"5\"\n});\nconst baseStyleIcon = defineStyle({\n fontSize: \"1.25em\"\n});\nconst baseStyle = definePartsStyle({\n container: baseStyleContainer,\n button: baseStyleButton,\n panel: baseStylePanel,\n icon: baseStyleIcon\n});\nconst accordionTheme = defineMultiStyleConfig({ baseStyle });\n\nexport { accordionTheme };\n","function replaceWhiteSpace(value, replaceValue = \"-\") {\n return value.replace(/\\s+/g, replaceValue);\n}\nfunction escape(value) {\n const valueStr = replaceWhiteSpace(value.toString());\n return escapeSymbol(escapeDot(valueStr));\n}\nfunction escapeDot(value) {\n if (value.includes(\"\\\\.\"))\n return value;\n const isDecimal = !Number.isInteger(parseFloat(value.toString()));\n return isDecimal ? value.replace(\".\", `\\\\.`) : value;\n}\nfunction escapeSymbol(value) {\n return value.replace(/[!-,/:-@[-^`{-~]/g, \"\\\\$&\");\n}\nfunction addPrefix(value, prefix = \"\") {\n return [prefix, value].filter(Boolean).join(\"-\");\n}\nfunction toVarReference(name, fallback) {\n return `var(${name}${fallback ? `, ${fallback}` : \"\"})`;\n}\nfunction toVarDefinition(value, prefix = \"\") {\n return escape(`--${addPrefix(value, prefix)}`);\n}\nfunction cssVar(name, fallback, cssVarPrefix) {\n const cssVariable = toVarDefinition(name, cssVarPrefix);\n return {\n variable: cssVariable,\n reference: toVarReference(cssVariable, fallback)\n };\n}\nfunction defineCssVars(scope, keys) {\n const vars = {};\n for (const key of keys) {\n if (Array.isArray(key)) {\n const [name, fallback] = key;\n vars[name] = cssVar(`${scope}-${name}`, fallback);\n continue;\n }\n vars[key] = cssVar(`${scope}-${key}`);\n }\n return vars;\n}\n\nexport { addPrefix, cssVar, defineCssVars, toVarDefinition, toVarReference };\n","/**\n * A simple guard function:\n *\n * ```js\n * Math.min(Math.max(low, value), high)\n * ```\n */\nfunction guard(low: number, high: number, value: number): number {\n return Math.min(Math.max(low, value), high);\n}\n\nexport default guard;\n","class ColorError extends Error {\n constructor(color: string) {\n super(`Failed to parse color: \"${color}\"`);\n }\n}\n\nexport default ColorError;\n","import guard from './guard';\nimport ColorError from './ColorError';\n\n/**\n * Parses a color into red, gree, blue, alpha parts\n *\n * @param color the input color. Can be a RGB, RBGA, HSL, HSLA, or named color\n */\nfunction parseToRgba(color: string): [number, number, number, number] {\n if (typeof color !== 'string') throw new ColorError(color);\n if (color.trim().toLowerCase() === 'transparent') return [0, 0, 0, 0];\n\n let normalizedColor = color.trim();\n normalizedColor = namedColorRegex.test(color) ? nameToHex(color) : color;\n\n const reducedHexMatch = reducedHexRegex.exec(normalizedColor);\n if (reducedHexMatch) {\n const arr = Array.from(reducedHexMatch).slice(1);\n return [\n ...arr.slice(0, 3).map((x) => parseInt(r(x, 2), 16)),\n parseInt(r(arr[3] || 'f', 2), 16) / 255,\n ] as [number, number, number, number];\n }\n\n const hexMatch = hexRegex.exec(normalizedColor);\n if (hexMatch) {\n const arr = Array.from(hexMatch).slice(1);\n return [\n ...arr.slice(0, 3).map((x) => parseInt(x, 16)),\n parseInt(arr[3] || 'ff', 16) / 255,\n ] as [number, number, number, number];\n }\n\n const rgbaMatch = rgbaRegex.exec(normalizedColor);\n if (rgbaMatch) {\n const arr = Array.from(rgbaMatch).slice(1);\n return [\n ...arr.slice(0, 3).map((x) => parseInt(x, 10)),\n parseFloat(arr[3] || '1'),\n ] as [number, number, number, number];\n }\n\n const hslaMatch = hslaRegex.exec(normalizedColor);\n if (hslaMatch) {\n const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);\n if (guard(0, 100, s) !== s) throw new ColorError(color);\n if (guard(0, 100, l) !== l) throw new ColorError(color);\n return [...hslToRgb(h, s, l), Number.isNaN(a) ? 1 : a] as [\n number,\n number,\n number,\n number\n ];\n }\n\n throw new ColorError(color);\n}\n\nfunction hash(str: string) {\n let hash = 5381;\n let i = str.length;\n\n while (i) {\n hash = (hash * 33) ^ str.charCodeAt(--i);\n }\n\n /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed\n * integers. Since we want the results to be always positive, convert the\n * signed int to an unsigned by doing an unsigned bitshift. */\n return (hash >>> 0) % 2341;\n}\n\nconst colorToInt = (x: string) => parseInt(x.replace(/_/g, ''), 36);\n\nconst compressedColorMap =\n '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'\n .split(' ')\n .reduce((acc, next) => {\n const key = colorToInt(next.substring(0, 3));\n const hex = colorToInt(next.substring(3)).toString(16);\n\n // NOTE: padStart could be used here but it breaks Node 6 compat\n // https://github.com/ricokahler/color2k/issues/351\n let prefix = '';\n for (let i = 0; i < 6 - hex.length; i++) {\n prefix += '0';\n }\n\n acc[key] = `${prefix}${hex}`;\n return acc;\n }, {} as { [key: string]: string });\n\n/**\n * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.\n */\nfunction nameToHex(color: string): string {\n const normalizedColorName = color.toLowerCase().trim();\n const result = compressedColorMap[hash(normalizedColorName)];\n if (!result) throw new ColorError(color);\n return `#${result}`;\n}\n\nconst r = (str: string, amount: number) =>\n Array.from(Array(amount))\n .map(() => str)\n .join('');\n\nconst reducedHexRegex = new RegExp(`^#${r('([a-f0-9])', 3)}([a-f0-9])?$`, 'i');\nconst hexRegex = new RegExp(`^#${r('([a-f0-9]{2})', 3)}([a-f0-9]{2})?$`, 'i');\nconst rgbaRegex = new RegExp(\n `^rgba?\\\\(\\\\s*(\\\\d+)\\\\s*${r(\n ',\\\\s*(\\\\d+)\\\\s*',\n 2\n )}(?:,\\\\s*([\\\\d.]+))?\\\\s*\\\\)$`,\n 'i'\n);\nconst hslaRegex =\n /^hsla?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)%\\s*,\\s*([\\d.]+)%(?:\\s*,\\s*([\\d.]+))?\\s*\\)$/i;\nconst namedColorRegex = /^[a-z]+$/i;\n\nconst roundColor = (color: number): number => {\n return Math.round(color * 255);\n};\n\nconst hslToRgb = (\n hue: number,\n saturation: number,\n lightness: number\n): [number, number, number] => {\n let l = lightness / 100;\n if (saturation === 0) {\n // achromatic\n return [l, l, l].map(roundColor) as [number, number, number];\n }\n\n // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV\n const huePrime = (((hue % 360) + 360) % 360) / 60;\n const chroma = (1 - Math.abs(2 * l - 1)) * (saturation / 100);\n const secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));\n\n let red = 0;\n let green = 0;\n let blue = 0;\n\n if (huePrime >= 0 && huePrime < 1) {\n red = chroma;\n green = secondComponent;\n } else if (huePrime >= 1 && huePrime < 2) {\n red = secondComponent;\n green = chroma;\n } else if (huePrime >= 2 && huePrime < 3) {\n green = chroma;\n blue = secondComponent;\n } else if (huePrime >= 3 && huePrime < 4) {\n green = secondComponent;\n blue = chroma;\n } else if (huePrime >= 4 && huePrime < 5) {\n red = secondComponent;\n blue = chroma;\n } else if (huePrime >= 5 && huePrime < 6) {\n red = chroma;\n blue = secondComponent;\n }\n\n const lightnessModification = l - chroma / 2;\n const finalRed = red + lightnessModification;\n const finalGreen = green + lightnessModification;\n const finalBlue = blue + lightnessModification;\n\n return [finalRed, finalGreen, finalBlue].map(roundColor) as [\n number,\n number,\n number\n ];\n};\n\nexport default parseToRgba;\n","import guard from './guard';\n\n/**\n * Takes in rgba parts and returns an rgba string\n *\n * @param red The amount of red in the red channel, given in a number between 0 and 255 inclusive\n * @param green The amount of green in the red channel, given in a number between 0 and 255 inclusive\n * @param blue The amount of blue in the red channel, given in a number between 0 and 255 inclusive\n * @param alpha Percentage of opacity, given as a decimal between 0 and 1\n */\nfunction rgba(red: number, green: number, blue: number, alpha: number): string {\n return `rgba(${guard(0, 255, red).toFixed()}, ${guard(\n 0,\n 255,\n green\n ).toFixed()}, ${guard(0, 255, blue).toFixed()}, ${parseFloat(\n guard(0, 1, alpha).toFixed(3)\n )})`;\n}\n\nexport default rgba;\n","import parseToRgba from './parseToRgba';\nimport rgba from './rgba';\n\n/**\n * Takes in a color and makes it more transparent by convert to `rgba` and\n * decreasing the amount in the alpha channel.\n *\n * @param amount The amount to increase the transparency by, given as a decimal between 0 and 1\n */\nfunction transparentize(color: string, amount: number): string {\n const [r, g, b, a] = parseToRgba(color);\n return rgba(r, g, b, a - amount);\n}\n\nexport default transparentize;\n","import { getCSSVar } from '@chakra-ui/styled-system';\nimport { toHex, transparentize as transparentize$1, mix, darken as darken$1, lighten as lighten$1, getContrast, getLuminance, parseToHsla, hsla, parseToRgba } from 'color2k';\n\nconst isEmptyObject = (obj) => Object.keys(obj).length === 0;\nfunction get(obj, key, def, p, undef) {\n key = key.split ? key.split(\".\") : key;\n for (p = 0; p < key.length; p++) {\n obj = obj ? obj[key[p]] : undef;\n }\n return obj === undef ? def : obj;\n}\nconst getColor = (theme, color, fallback) => {\n const hex = get(theme, `colors.${color}`, color);\n try {\n toHex(hex);\n return hex;\n } catch {\n return fallback ?? \"#000000\";\n }\n};\nconst getColorVar = (theme, color, fallback) => {\n return getCSSVar(theme, \"colors\", color) ?? fallback;\n};\nconst getBrightness = (color) => {\n const [r, g, b] = parseToRgba(color);\n return (r * 299 + g * 587 + b * 114) / 1e3;\n};\nconst tone = (color) => (theme) => {\n const hex = getColor(theme, color);\n const brightness = getBrightness(hex);\n const isDark2 = brightness < 128;\n return isDark2 ? \"dark\" : \"light\";\n};\nconst isDark = (color) => (theme) => tone(color)(theme) === \"dark\";\nconst isLight = (color) => (theme) => tone(color)(theme) === \"light\";\nconst transparentize = (color, opacity) => (theme) => {\n const raw = getColor(theme, color);\n return transparentize$1(raw, 1 - opacity);\n};\nconst whiten = (color, amount) => (theme) => {\n const raw = getColor(theme, color);\n return toHex(mix(raw, \"#fff\", amount));\n};\nconst blacken = (color, amount) => (theme) => {\n const raw = getColor(theme, color);\n return toHex(mix(raw, \"#000\", amount / 100));\n};\nconst darken = (color, amount) => (theme) => {\n const raw = getColor(theme, color);\n return toHex(darken$1(raw, amount / 100));\n};\nconst lighten = (color, amount) => (theme) => {\n const raw = getColor(theme, color);\n toHex(lighten$1(raw, amount / 100));\n};\nconst contrast = (fg, bg) => (theme) => getContrast(getColor(theme, bg), getColor(theme, fg));\nconst isAccessible = (textColor, bgColor, options) => (theme) => isReadable(getColor(theme, bgColor), getColor(theme, textColor), options);\nfunction isReadable(color1, color2, wcag2 = { level: \"AA\", size: \"small\" }) {\n const readabilityLevel = readability(color1, color2);\n switch ((wcag2.level ?? \"AA\") + (wcag2.size ?? \"small\")) {\n case \"AAsmall\":\n case \"AAAlarge\":\n return readabilityLevel >= 4.5;\n case \"AAlarge\":\n return readabilityLevel >= 3;\n case \"AAAsmall\":\n return readabilityLevel >= 7;\n default:\n return false;\n }\n}\nfunction readability(color1, color2) {\n return (Math.max(getLuminance(color1), getLuminance(color2)) + 0.05) / (Math.min(getLuminance(color1), getLuminance(color2)) + 0.05);\n}\nconst complementary = (color) => (theme) => {\n const raw = getColor(theme, color);\n const hsl = parseToHsla(raw);\n const complementHsl = Object.assign(hsl, [\n (hsl[0] + 180) % 360\n ]);\n return toHex(hsla(...complementHsl));\n};\nfunction generateStripe(size = \"1rem\", color = \"rgba(255, 255, 255, 0.15)\") {\n return {\n backgroundImage: `linear-gradient(\n 45deg,\n ${color} 25%,\n transparent 25%,\n transparent 50%,\n ${color} 50%,\n ${color} 75%,\n transparent 75%,\n transparent\n )`,\n backgroundSize: `${size} ${size}`\n };\n}\nconst randomHex = () => `#${Math.floor(Math.random() * 16777215).toString(16).padEnd(6, \"0\")}`;\nfunction randomColor(opts) {\n const fallback = randomHex();\n if (!opts || isEmptyObject(opts)) {\n return fallback;\n }\n if (opts.string && opts.colors) {\n return randomColorFromList(opts.string, opts.colors);\n }\n if (opts.string && !opts.colors) {\n return randomColorFromString(opts.string);\n }\n if (opts.colors && !opts.string) {\n return randomFromList(opts.colors);\n }\n return fallback;\n}\nfunction randomColorFromString(str) {\n let hash = 0;\n if (str.length === 0)\n return hash.toString();\n for (let i = 0; i < str.length; i += 1) {\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n hash = hash & hash;\n }\n let color = \"#\";\n for (let j = 0; j < 3; j += 1) {\n const value = hash >> j * 8 & 255;\n color += `00${value.toString(16)}`.substr(-2);\n }\n return color;\n}\nfunction randomColorFromList(str, list) {\n let index = 0;\n if (str.length === 0)\n return list[0];\n for (let i = 0; i < str.length; i += 1) {\n index = str.charCodeAt(i) + ((index << 5) - index);\n index = index & index;\n }\n index = (index % list.length + list.length) % list.length;\n return list[index];\n}\nfunction randomFromList(list) {\n return list[Math.floor(Math.random() * list.length)];\n}\n\nexport { blacken, complementary, contrast, darken, generateStripe, getColor, getColorVar, isAccessible, isDark, isLight, isReadable, lighten, randomColor, readability, tone, transparentize, whiten };\n","import parseToRgba from './parseToRgba';\nimport guard from './guard';\n\n/**\n * Takes in any color and returns it as a hex code.\n */\nfunction toHex(color: string): string {\n const [r, g, b, a] = parseToRgba(color);\n\n let hex = (x: number) => {\n const h = guard(0, 255, x).toString(16);\n // NOTE: padStart could be used here but it breaks Node 6 compat\n // https://github.com/ricokahler/color2k/issues/351\n return h.length === 1 ? `0${h}` : h;\n };\n\n return `#${hex(r)}${hex(g)}${hex(b)}${a < 1 ? hex(Math.round(a * 255)) : ''}`;\n}\n\nexport default toHex;\n","import { alertAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar } from '@chakra-ui/styled-system';\nimport { transparentize } from '@chakra-ui/theme-tools';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys);\nconst $fg = cssVar(\"alert-fg\");\nconst $bg = cssVar(\"alert-bg\");\nconst baseStyle = definePartsStyle({\n container: {\n bg: $bg.reference,\n px: \"4\",\n py: \"3\"\n },\n title: {\n fontWeight: \"bold\",\n lineHeight: \"6\",\n marginEnd: \"2\"\n },\n description: {\n lineHeight: \"6\"\n },\n icon: {\n color: $fg.reference,\n flexShrink: 0,\n marginEnd: \"3\",\n w: \"5\",\n h: \"6\"\n },\n spinner: {\n color: $fg.reference,\n flexShrink: 0,\n marginEnd: \"3\",\n w: \"5\",\n h: \"5\"\n }\n});\nfunction getBg(props) {\n const { theme, colorScheme: c } = props;\n const darkBg = transparentize(`${c}.200`, 0.16)(theme);\n return {\n light: `colors.${c}.100`,\n dark: darkBg\n };\n}\nconst variantSubtle = definePartsStyle((props) => {\n const { colorScheme: c } = props;\n const bg = getBg(props);\n return {\n container: {\n [$fg.variable]: `colors.${c}.600`,\n [$bg.variable]: bg.light,\n _dark: {\n [$fg.variable]: `colors.${c}.200`,\n [$bg.variable]: bg.dark\n }\n }\n };\n});\nconst variantLeftAccent = definePartsStyle((props) => {\n const { colorScheme: c } = props;\n const bg = getBg(props);\n return {\n container: {\n [$fg.variable]: `colors.${c}.600`,\n [$bg.variable]: bg.light,\n _dark: {\n [$fg.variable]: `colors.${c}.200`,\n [$bg.variable]: bg.dark\n },\n paddingStart: \"3\",\n borderStartWidth: \"4px\",\n borderStartColor: $fg.reference\n }\n };\n});\nconst variantTopAccent = definePartsStyle((props) => {\n const { colorScheme: c } = props;\n const bg = getBg(props);\n return {\n container: {\n [$fg.variable]: `colors.${c}.600`,\n [$bg.variable]: bg.light,\n _dark: {\n [$fg.variable]: `colors.${c}.200`,\n [$bg.variable]: bg.dark\n },\n pt: \"2\",\n borderTopWidth: \"4px\",\n borderTopColor: $fg.reference\n }\n };\n});\nconst variantSolid = definePartsStyle((props) => {\n const { colorScheme: c } = props;\n return {\n container: {\n [$fg.variable]: `colors.white`,\n [$bg.variable]: `colors.${c}.600`,\n _dark: {\n [$fg.variable]: `colors.gray.900`,\n [$bg.variable]: `colors.${c}.200`\n },\n color: $fg.reference\n }\n };\n});\nconst variants = {\n subtle: variantSubtle,\n \"left-accent\": variantLeftAccent,\n \"top-accent\": variantTopAccent,\n solid: variantSolid\n};\nconst alertTheme = defineMultiStyleConfig({\n baseStyle,\n variants,\n defaultProps: {\n variant: \"subtle\",\n colorScheme: \"blue\"\n }\n});\n\nexport { alertTheme };\n","const spacing = {\n px: \"1px\",\n 0.5: \"0.125rem\",\n 1: \"0.25rem\",\n 1.5: \"0.375rem\",\n 2: \"0.5rem\",\n 2.5: \"0.625rem\",\n 3: \"0.75rem\",\n 3.5: \"0.875rem\",\n 4: \"1rem\",\n 5: \"1.25rem\",\n 6: \"1.5rem\",\n 7: \"1.75rem\",\n 8: \"2rem\",\n 9: \"2.25rem\",\n 10: \"2.5rem\",\n 12: \"3rem\",\n 14: \"3.5rem\",\n 16: \"4rem\",\n 20: \"5rem\",\n 24: \"6rem\",\n 28: \"7rem\",\n 32: \"8rem\",\n 36: \"9rem\",\n 40: \"10rem\",\n 44: \"11rem\",\n 48: \"12rem\",\n 52: \"13rem\",\n 56: \"14rem\",\n 60: \"15rem\",\n 64: \"16rem\",\n 72: \"18rem\",\n 80: \"20rem\",\n 96: \"24rem\"\n};\n\nexport { spacing };\n","import { spacing } from './spacing.mjs';\n\nconst largeSizes = {\n max: \"max-content\",\n min: \"min-content\",\n full: \"100%\",\n \"3xs\": \"14rem\",\n \"2xs\": \"16rem\",\n xs: \"20rem\",\n sm: \"24rem\",\n md: \"28rem\",\n lg: \"32rem\",\n xl: \"36rem\",\n \"2xl\": \"42rem\",\n \"3xl\": \"48rem\",\n \"4xl\": \"56rem\",\n \"5xl\": \"64rem\",\n \"6xl\": \"72rem\",\n \"7xl\": \"80rem\",\n \"8xl\": \"90rem\",\n prose: \"60ch\"\n};\nconst container = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\"\n};\nconst sizes = {\n ...spacing,\n ...largeSizes,\n container\n};\n\nexport { sizes as default };\n","const isFunction = (value) => typeof value === \"function\";\nfunction runIfFn(valueOrFn, ...args) {\n return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;\n}\n\nexport { runIfFn };\n","import { avatarAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\nimport { randomColor, isDark } from '@chakra-ui/theme-tools';\nimport sizes$1 from '../foundations/sizes.mjs';\nimport { runIfFn } from '../utils/run-if-fn.mjs';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(avatarAnatomy.keys);\nconst $border = cssVar(\"avatar-border-color\");\nconst $bg = cssVar(\"avatar-bg\");\nconst $fs = cssVar(\"avatar-font-size\");\nconst $size = cssVar(\"avatar-size\");\nconst baseStyleBadge = defineStyle({\n borderRadius: \"full\",\n border: \"0.2em solid\",\n borderColor: $border.reference,\n [$border.variable]: \"white\",\n _dark: {\n [$border.variable]: \"colors.gray.800\"\n }\n});\nconst baseStyleExcessLabel = defineStyle({\n bg: $bg.reference,\n fontSize: $fs.reference,\n width: $size.reference,\n height: $size.reference,\n lineHeight: \"1\",\n [$bg.variable]: \"colors.gray.200\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.400\"\n }\n});\nconst baseStyleContainer = defineStyle((props) => {\n const { name, theme } = props;\n const bg = name ? randomColor({ string: name }) : \"colors.gray.400\";\n const isBgDark = isDark(bg)(theme);\n let color = \"white\";\n if (!isBgDark)\n color = \"gray.800\";\n return {\n bg: $bg.reference,\n fontSize: $fs.reference,\n color,\n borderColor: $border.reference,\n verticalAlign: \"top\",\n width: $size.reference,\n height: $size.reference,\n \"&:not([data-loaded])\": {\n [$bg.variable]: bg\n },\n [$border.variable]: \"colors.white\",\n _dark: {\n [$border.variable]: \"colors.gray.800\"\n }\n };\n});\nconst baseStyleLabel = defineStyle({\n fontSize: $fs.reference,\n lineHeight: \"1\"\n});\nconst baseStyle = definePartsStyle((props) => ({\n badge: runIfFn(baseStyleBadge, props),\n excessLabel: runIfFn(baseStyleExcessLabel, props),\n container: runIfFn(baseStyleContainer, props),\n label: baseStyleLabel\n}));\nfunction getSize(size) {\n const themeSize = size !== \"100%\" ? sizes$1[size] : void 0;\n return definePartsStyle({\n container: {\n [$size.variable]: themeSize ?? size,\n [$fs.variable]: `calc(${themeSize ?? size} / 2.5)`\n },\n excessLabel: {\n [$size.variable]: themeSize ?? size,\n [$fs.variable]: `calc(${themeSize ?? size} / 2.5)`\n }\n });\n}\nconst sizes = {\n \"2xs\": getSize(4),\n xs: getSize(6),\n sm: getSize(8),\n md: getSize(12),\n lg: getSize(16),\n xl: getSize(24),\n \"2xl\": getSize(32),\n full: getSize(\"100%\")\n};\nconst avatarTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\"\n }\n});\n\nexport { avatarTheme };\n","import { defineCssVars, defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\nimport { transparentize } from '@chakra-ui/theme-tools';\n\nconst vars = defineCssVars(\"badge\", [\"bg\", \"color\", \"shadow\"]);\nconst baseStyle = defineStyle({\n px: 1,\n textTransform: \"uppercase\",\n fontSize: \"xs\",\n borderRadius: \"sm\",\n fontWeight: \"bold\",\n bg: vars.bg.reference,\n color: vars.color.reference,\n boxShadow: vars.shadow.reference\n});\nconst variantSolid = defineStyle((props) => {\n const { colorScheme: c, theme } = props;\n const dark = transparentize(`${c}.500`, 0.6)(theme);\n return {\n [vars.bg.variable]: `colors.${c}.500`,\n [vars.color.variable]: `colors.white`,\n _dark: {\n [vars.bg.variable]: dark,\n [vars.color.variable]: `colors.whiteAlpha.800`\n }\n };\n});\nconst variantSubtle = defineStyle((props) => {\n const { colorScheme: c, theme } = props;\n const darkBg = transparentize(`${c}.200`, 0.16)(theme);\n return {\n [vars.bg.variable]: `colors.${c}.100`,\n [vars.color.variable]: `colors.${c}.800`,\n _dark: {\n [vars.bg.variable]: darkBg,\n [vars.color.variable]: `colors.${c}.200`\n }\n };\n});\nconst variantOutline = defineStyle((props) => {\n const { colorScheme: c, theme } = props;\n const darkColor = transparentize(`${c}.200`, 0.8)(theme);\n return {\n [vars.color.variable]: `colors.${c}.500`,\n _dark: {\n [vars.color.variable]: darkColor\n },\n [vars.shadow.variable]: `inset 0 0 0px 1px ${vars.color.reference}`\n };\n});\nconst variants = {\n solid: variantSolid,\n subtle: variantSubtle,\n outline: variantOutline\n};\nconst badgeTheme = defineStyleConfig({\n baseStyle,\n variants,\n defaultProps: {\n variant: \"subtle\",\n colorScheme: \"gray\"\n }\n});\n\nexport { badgeTheme, vars as badgeVars };\n","import { breadcrumbAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys);\nconst $decor = cssVar(\"breadcrumb-link-decor\");\nconst baseStyleLink = defineStyle({\n transitionProperty: \"common\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"ease-out\",\n outline: \"none\",\n color: \"inherit\",\n textDecoration: $decor.reference,\n [$decor.variable]: \"none\",\n \"&:not([aria-current=page])\": {\n cursor: \"pointer\",\n _hover: {\n [$decor.variable]: \"underline\"\n },\n _focusVisible: {\n boxShadow: \"outline\"\n }\n }\n});\nconst baseStyle = definePartsStyle({\n link: baseStyleLink\n});\nconst breadcrumbTheme = defineMultiStyleConfig({\n baseStyle\n});\n\nexport { breadcrumbTheme };\n","function mode(light, dark) {\n return (props) => props.colorMode === \"dark\" ? dark : light;\n}\nfunction orient(options) {\n const { orientation, vertical, horizontal } = options;\n if (!orientation)\n return {};\n return orientation === \"vertical\" ? vertical : horizontal;\n}\n\nexport { mode, orient };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\nimport { mode, transparentize } from '@chakra-ui/theme-tools';\nimport { runIfFn } from '../utils/run-if-fn.mjs';\n\nconst baseStyle = defineStyle({\n lineHeight: \"1.2\",\n borderRadius: \"md\",\n fontWeight: \"semibold\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n _focusVisible: {\n boxShadow: \"outline\"\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\",\n boxShadow: \"none\"\n },\n _hover: {\n _disabled: {\n bg: \"initial\"\n }\n }\n});\nconst variantGhost = defineStyle((props) => {\n const { colorScheme: c, theme } = props;\n if (c === \"gray\") {\n return {\n color: mode(`gray.800`, `whiteAlpha.900`)(props),\n _hover: {\n bg: mode(`gray.100`, `whiteAlpha.200`)(props)\n },\n _active: { bg: mode(`gray.200`, `whiteAlpha.300`)(props) }\n };\n }\n const darkHoverBg = transparentize(`${c}.200`, 0.12)(theme);\n const darkActiveBg = transparentize(`${c}.200`, 0.24)(theme);\n return {\n color: mode(`${c}.600`, `${c}.200`)(props),\n bg: \"transparent\",\n _hover: {\n bg: mode(`${c}.50`, darkHoverBg)(props)\n },\n _active: {\n bg: mode(`${c}.100`, darkActiveBg)(props)\n }\n };\n});\nconst variantOutline = defineStyle((props) => {\n const { colorScheme: c } = props;\n const borderColor = mode(`gray.200`, `whiteAlpha.300`)(props);\n return {\n border: \"1px solid\",\n borderColor: c === \"gray\" ? borderColor : \"currentColor\",\n \".chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)\": { marginEnd: \"-1px\" },\n \".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)\": { marginBottom: \"-1px\" },\n ...runIfFn(variantGhost, props)\n };\n});\nconst accessibleColorMap = {\n yellow: {\n bg: \"yellow.400\",\n color: \"black\",\n hoverBg: \"yellow.500\",\n activeBg: \"yellow.600\"\n },\n cyan: {\n bg: \"cyan.400\",\n color: \"black\",\n hoverBg: \"cyan.500\",\n activeBg: \"cyan.600\"\n }\n};\nconst variantSolid = defineStyle((props) => {\n const { colorScheme: c } = props;\n if (c === \"gray\") {\n const bg2 = mode(`gray.100`, `whiteAlpha.200`)(props);\n return {\n bg: bg2,\n color: mode(`gray.800`, `whiteAlpha.900`)(props),\n _hover: {\n bg: mode(`gray.200`, `whiteAlpha.300`)(props),\n _disabled: {\n bg: bg2\n }\n },\n _active: { bg: mode(`gray.300`, `whiteAlpha.400`)(props) }\n };\n }\n const {\n bg = `${c}.500`,\n color = \"white\",\n hoverBg = `${c}.600`,\n activeBg = `${c}.700`\n } = accessibleColorMap[c] ?? {};\n const background = mode(bg, `${c}.200`)(props);\n return {\n bg: background,\n color: mode(color, `gray.800`)(props),\n _hover: {\n bg: mode(hoverBg, `${c}.300`)(props),\n _disabled: {\n bg: background\n }\n },\n _active: { bg: mode(activeBg, `${c}.400`)(props) }\n };\n});\nconst variantLink = defineStyle((props) => {\n const { colorScheme: c } = props;\n return {\n padding: 0,\n height: \"auto\",\n lineHeight: \"normal\",\n verticalAlign: \"baseline\",\n color: mode(`${c}.500`, `${c}.200`)(props),\n _hover: {\n textDecoration: \"underline\",\n _disabled: {\n textDecoration: \"none\"\n }\n },\n _active: {\n color: mode(`${c}.700`, `${c}.500`)(props)\n }\n };\n});\nconst variantUnstyled = defineStyle({\n bg: \"none\",\n color: \"inherit\",\n display: \"inline\",\n lineHeight: \"inherit\",\n m: \"0\",\n p: \"0\"\n});\nconst variants = {\n ghost: variantGhost,\n outline: variantOutline,\n solid: variantSolid,\n link: variantLink,\n unstyled: variantUnstyled\n};\nconst sizes = {\n lg: defineStyle({\n h: \"12\",\n minW: \"12\",\n fontSize: \"lg\",\n px: \"6\"\n }),\n md: defineStyle({\n h: \"10\",\n minW: \"10\",\n fontSize: \"md\",\n px: \"4\"\n }),\n sm: defineStyle({\n h: \"8\",\n minW: \"8\",\n fontSize: \"sm\",\n px: \"3\"\n }),\n xs: defineStyle({\n h: \"6\",\n minW: \"6\",\n fontSize: \"xs\",\n px: \"2\"\n })\n};\nconst buttonTheme = defineStyleConfig({\n baseStyle,\n variants,\n sizes,\n defaultProps: {\n variant: \"solid\",\n size: \"md\",\n colorScheme: \"gray\"\n }\n});\n\nexport { buttonTheme };\n","import { cardAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar } from '@chakra-ui/styled-system';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(cardAnatomy.keys);\nconst $bg = cssVar(\"card-bg\");\nconst $padding = cssVar(\"card-padding\");\nconst $shadow = cssVar(\"card-shadow\");\nconst $radius = cssVar(\"card-radius\");\nconst $border = cssVar(\"card-border-width\", \"0\");\nconst $borderColor = cssVar(\"card-border-color\");\nconst baseStyle = definePartsStyle({\n container: {\n [$bg.variable]: \"colors.chakra-body-bg\",\n backgroundColor: $bg.reference,\n boxShadow: $shadow.reference,\n borderRadius: $radius.reference,\n color: \"chakra-body-text\",\n borderWidth: $border.reference,\n borderColor: $borderColor.reference\n },\n body: {\n padding: $padding.reference,\n flex: \"1 1 0%\"\n },\n header: {\n padding: $padding.reference\n },\n footer: {\n padding: $padding.reference\n }\n});\nconst sizes = {\n sm: definePartsStyle({\n container: {\n [$radius.variable]: \"radii.base\",\n [$padding.variable]: \"space.3\"\n }\n }),\n md: definePartsStyle({\n container: {\n [$radius.variable]: \"radii.md\",\n [$padding.variable]: \"space.5\"\n }\n }),\n lg: definePartsStyle({\n container: {\n [$radius.variable]: \"radii.xl\",\n [$padding.variable]: \"space.7\"\n }\n })\n};\nconst variants = {\n elevated: definePartsStyle({\n container: {\n [$shadow.variable]: \"shadows.base\",\n _dark: {\n [$bg.variable]: \"colors.gray.700\"\n }\n }\n }),\n outline: definePartsStyle({\n container: {\n [$border.variable]: \"1px\",\n [$borderColor.variable]: \"colors.chakra-border-color\"\n }\n }),\n filled: definePartsStyle({\n container: {\n [$bg.variable]: \"colors.chakra-subtle-bg\"\n }\n }),\n unstyled: {\n body: {\n [$padding.variable]: 0\n },\n header: {\n [$padding.variable]: 0\n },\n footer: {\n [$padding.variable]: 0\n }\n }\n};\nconst cardTheme = defineMultiStyleConfig({\n baseStyle,\n variants,\n sizes,\n defaultProps: {\n variant: \"elevated\",\n size: \"md\"\n }\n});\n\nexport { cardTheme };\n","import { checkboxAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\nimport { mode } from '@chakra-ui/theme-tools';\nimport { runIfFn } from '../utils/run-if-fn.mjs';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(checkboxAnatomy.keys);\nconst $size = cssVar(\"checkbox-size\");\nconst baseStyleControl = defineStyle((props) => {\n const { colorScheme: c } = props;\n return {\n w: $size.reference,\n h: $size.reference,\n transitionProperty: \"box-shadow\",\n transitionDuration: \"normal\",\n border: \"2px solid\",\n borderRadius: \"sm\",\n borderColor: \"inherit\",\n color: \"white\",\n _checked: {\n bg: mode(`${c}.500`, `${c}.200`)(props),\n borderColor: mode(`${c}.500`, `${c}.200`)(props),\n color: mode(\"white\", \"gray.900\")(props),\n _hover: {\n bg: mode(`${c}.600`, `${c}.300`)(props),\n borderColor: mode(`${c}.600`, `${c}.300`)(props)\n },\n _disabled: {\n borderColor: mode(\"gray.200\", \"transparent\")(props),\n bg: mode(\"gray.200\", \"whiteAlpha.300\")(props),\n color: mode(\"gray.500\", \"whiteAlpha.500\")(props)\n }\n },\n _indeterminate: {\n bg: mode(`${c}.500`, `${c}.200`)(props),\n borderColor: mode(`${c}.500`, `${c}.200`)(props),\n color: mode(\"white\", \"gray.900\")(props)\n },\n _disabled: {\n bg: mode(\"gray.100\", \"whiteAlpha.100\")(props),\n borderColor: mode(\"gray.100\", \"transparent\")(props)\n },\n _focusVisible: {\n boxShadow: \"outline\"\n },\n _invalid: {\n borderColor: mode(\"red.500\", \"red.300\")(props)\n }\n };\n});\nconst baseStyleContainer = defineStyle({\n _disabled: { cursor: \"not-allowed\" }\n});\nconst baseStyleLabel = defineStyle({\n userSelect: \"none\",\n _disabled: { opacity: 0.4 }\n});\nconst baseStyleIcon = defineStyle({\n transitionProperty: \"transform\",\n transitionDuration: \"normal\"\n});\nconst baseStyle = definePartsStyle((props) => ({\n icon: baseStyleIcon,\n container: baseStyleContainer,\n control: runIfFn(baseStyleControl, props),\n label: baseStyleLabel\n}));\nconst sizes = {\n sm: definePartsStyle({\n control: { [$size.variable]: \"sizes.3\" },\n label: { fontSize: \"sm\" },\n icon: { fontSize: \"3xs\" }\n }),\n md: definePartsStyle({\n control: { [$size.variable]: \"sizes.4\" },\n label: { fontSize: \"md\" },\n icon: { fontSize: \"2xs\" }\n }),\n lg: definePartsStyle({\n control: { [$size.variable]: \"sizes.5\" },\n label: { fontSize: \"lg\" },\n icon: { fontSize: \"2xs\" }\n })\n};\nconst checkboxTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\"\n }\n});\n\nexport { checkboxTheme };\n","function isDecimal(value) {\n return !Number.isInteger(parseFloat(value.toString()));\n}\nfunction replaceWhiteSpace(value, replaceValue = \"-\") {\n return value.replace(/\\s+/g, replaceValue);\n}\nfunction escape(value) {\n const valueStr = replaceWhiteSpace(value.toString());\n if (valueStr.includes(\"\\\\.\"))\n return value;\n return isDecimal(value) ? valueStr.replace(\".\", `\\\\.`) : value;\n}\nfunction addPrefix(value, prefix = \"\") {\n return [prefix, escape(value)].filter(Boolean).join(\"-\");\n}\nfunction toVarRef(name, fallback) {\n return `var(${escape(name)}${fallback ? `, ${fallback}` : \"\"})`;\n}\nfunction toVar(value, prefix = \"\") {\n return `--${addPrefix(value, prefix)}`;\n}\nfunction cssVar(name, options) {\n const cssVariable = toVar(name, options?.prefix);\n return {\n variable: cssVariable,\n reference: toVarRef(cssVariable, getFallback(options?.fallback))\n };\n}\nfunction getFallback(fallback) {\n if (typeof fallback === \"string\")\n return fallback;\n return fallback?.reference;\n}\n\nexport { addPrefix, cssVar, isDecimal, toVar, toVarRef };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\nimport { cssVar } from '@chakra-ui/theme-tools';\n\nconst $size = cssVar(\"close-button-size\");\nconst $bg = cssVar(\"close-button-bg\");\nconst baseStyle = defineStyle({\n w: [$size.reference],\n h: [$size.reference],\n borderRadius: \"md\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\",\n boxShadow: \"none\"\n },\n _hover: {\n [$bg.variable]: \"colors.blackAlpha.100\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.100\"\n }\n },\n _active: {\n [$bg.variable]: \"colors.blackAlpha.200\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.200\"\n }\n },\n _focusVisible: {\n boxShadow: \"outline\"\n },\n bg: $bg.reference\n});\nconst sizes = {\n lg: defineStyle({\n [$size.variable]: \"sizes.10\",\n fontSize: \"md\"\n }),\n md: defineStyle({\n [$size.variable]: \"sizes.8\",\n fontSize: \"xs\"\n }),\n sm: defineStyle({\n [$size.variable]: \"sizes.6\",\n fontSize: \"2xs\"\n })\n};\nconst closeButtonTheme = defineStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\"\n }\n});\n\nexport { closeButtonTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\nimport { badgeVars as vars, badgeTheme } from './badge.mjs';\n\nconst { variants, defaultProps } = badgeTheme;\nconst baseStyle = defineStyle({\n fontFamily: \"mono\",\n fontSize: \"sm\",\n px: \"0.2em\",\n borderRadius: \"sm\",\n bg: vars.bg.reference,\n color: vars.color.reference,\n boxShadow: vars.shadow.reference\n});\nconst codeTheme = defineStyleConfig({\n baseStyle,\n variants,\n defaultProps\n});\n\nexport { codeTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\n\nconst baseStyle = defineStyle({\n w: \"100%\",\n mx: \"auto\",\n maxW: \"prose\",\n px: \"4\"\n});\nconst containerTheme = defineStyleConfig({\n baseStyle\n});\n\nexport { containerTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\n\nconst baseStyle = defineStyle({\n opacity: 0.6,\n borderColor: \"inherit\"\n});\nconst variantSolid = defineStyle({\n borderStyle: \"solid\"\n});\nconst variantDashed = defineStyle({\n borderStyle: \"dashed\"\n});\nconst variants = {\n solid: variantSolid,\n dashed: variantDashed\n};\nconst dividerTheme = defineStyleConfig({\n baseStyle,\n variants,\n defaultProps: {\n variant: \"solid\"\n }\n});\n\nexport { dividerTheme };\n","import { drawerAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\nimport { runIfFn } from '../utils/run-if-fn.mjs';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(drawerAnatomy.keys);\nconst $bg = cssVar(\"drawer-bg\");\nconst $bs = cssVar(\"drawer-box-shadow\");\nfunction getSize(value) {\n if (value === \"full\") {\n return definePartsStyle({\n dialog: { maxW: \"100vw\", h: \"100vh\" }\n });\n }\n return definePartsStyle({\n dialog: { maxW: value }\n });\n}\nconst baseStyleOverlay = defineStyle({\n bg: \"blackAlpha.600\",\n zIndex: \"modal\"\n});\nconst baseStyleDialogContainer = defineStyle({\n display: \"flex\",\n zIndex: \"modal\",\n justifyContent: \"center\"\n});\nconst baseStyleDialog = defineStyle((props) => {\n const { isFullHeight } = props;\n return {\n ...isFullHeight && { height: \"100vh\" },\n zIndex: \"modal\",\n maxH: \"100vh\",\n color: \"inherit\",\n [$bg.variable]: \"colors.white\",\n [$bs.variable]: \"shadows.lg\",\n _dark: {\n [$bg.variable]: \"colors.gray.700\",\n [$bs.variable]: \"shadows.dark-lg\"\n },\n bg: $bg.reference,\n boxShadow: $bs.reference\n };\n});\nconst baseStyleHeader = defineStyle({\n px: \"6\",\n py: \"4\",\n fontSize: \"xl\",\n fontWeight: \"semibold\"\n});\nconst baseStyleCloseButton = defineStyle({\n position: \"absolute\",\n top: \"2\",\n insetEnd: \"3\"\n});\nconst baseStyleBody = defineStyle({\n px: \"6\",\n py: \"2\",\n flex: \"1\",\n overflow: \"auto\"\n});\nconst baseStyleFooter = defineStyle({\n px: \"6\",\n py: \"4\"\n});\nconst baseStyle = definePartsStyle((props) => ({\n overlay: baseStyleOverlay,\n dialogContainer: baseStyleDialogContainer,\n dialog: runIfFn(baseStyleDialog, props),\n header: baseStyleHeader,\n closeButton: baseStyleCloseButton,\n body: baseStyleBody,\n footer: baseStyleFooter\n}));\nconst sizes = {\n xs: getSize(\"xs\"),\n sm: getSize(\"md\"),\n md: getSize(\"lg\"),\n lg: getSize(\"2xl\"),\n xl: getSize(\"4xl\"),\n full: getSize(\"full\")\n};\nconst drawerTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"xs\"\n }\n});\n\nexport { drawerTheme };\n","import { editableAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(editableAnatomy.keys);\nconst baseStylePreview = defineStyle({\n borderRadius: \"md\",\n py: \"1\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\"\n});\nconst baseStyleInput = defineStyle({\n borderRadius: \"md\",\n py: \"1\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n width: \"full\",\n _focusVisible: { boxShadow: \"outline\" },\n _placeholder: { opacity: 0.6 }\n});\nconst baseStyleTextarea = defineStyle({\n borderRadius: \"md\",\n py: \"1\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n width: \"full\",\n _focusVisible: { boxShadow: \"outline\" },\n _placeholder: { opacity: 0.6 }\n});\nconst baseStyle = definePartsStyle({\n preview: baseStylePreview,\n input: baseStyleInput,\n textarea: baseStyleTextarea\n});\nconst editableTheme = defineMultiStyleConfig({\n baseStyle\n});\n\nexport { editableTheme };\n","import { formAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(formAnatomy.keys);\nconst $fg = cssVar(\"form-control-color\");\nconst baseStyleRequiredIndicator = defineStyle({\n marginStart: \"1\",\n [$fg.variable]: \"colors.red.500\",\n _dark: {\n [$fg.variable]: \"colors.red.300\"\n },\n color: $fg.reference\n});\nconst baseStyleHelperText = defineStyle({\n mt: \"2\",\n [$fg.variable]: \"colors.gray.600\",\n _dark: {\n [$fg.variable]: \"colors.whiteAlpha.600\"\n },\n color: $fg.reference,\n lineHeight: \"normal\",\n fontSize: \"sm\"\n});\nconst baseStyle = definePartsStyle({\n container: {\n width: \"100%\",\n position: \"relative\"\n },\n requiredIndicator: baseStyleRequiredIndicator,\n helperText: baseStyleHelperText\n});\nconst formTheme = defineMultiStyleConfig({\n baseStyle\n});\n\nexport { formTheme };\n","import { formErrorAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(formErrorAnatomy.keys);\nconst $fg = cssVar(\"form-error-color\");\nconst baseStyleText = defineStyle({\n [$fg.variable]: `colors.red.500`,\n _dark: {\n [$fg.variable]: `colors.red.300`\n },\n color: $fg.reference,\n mt: \"2\",\n fontSize: \"sm\",\n lineHeight: \"normal\"\n});\nconst baseStyleIcon = defineStyle({\n marginEnd: \"0.5em\",\n [$fg.variable]: `colors.red.500`,\n _dark: {\n [$fg.variable]: `colors.red.300`\n },\n color: $fg.reference\n});\nconst baseStyle = definePartsStyle({\n text: baseStyleText,\n icon: baseStyleIcon\n});\nconst formErrorTheme = defineMultiStyleConfig({\n baseStyle\n});\n\nexport { formErrorTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\n\nconst baseStyle = defineStyle({\n fontSize: \"md\",\n marginEnd: \"3\",\n mb: \"2\",\n fontWeight: \"medium\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n opacity: 1,\n _disabled: {\n opacity: 0.4\n }\n});\nconst formLabelTheme = defineStyleConfig({\n baseStyle\n});\n\nexport { formLabelTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\n\nconst baseStyle = defineStyle({\n fontFamily: \"heading\",\n fontWeight: \"bold\"\n});\nconst sizes = {\n \"4xl\": defineStyle({\n fontSize: [\"6xl\", null, \"7xl\"],\n lineHeight: 1\n }),\n \"3xl\": defineStyle({\n fontSize: [\"5xl\", null, \"6xl\"],\n lineHeight: 1\n }),\n \"2xl\": defineStyle({\n fontSize: [\"4xl\", null, \"5xl\"],\n lineHeight: [1.2, null, 1]\n }),\n xl: defineStyle({\n fontSize: [\"3xl\", null, \"4xl\"],\n lineHeight: [1.33, null, 1.2]\n }),\n lg: defineStyle({\n fontSize: [\"2xl\", null, \"3xl\"],\n lineHeight: [1.33, null, 1.2]\n }),\n md: defineStyle({\n fontSize: \"xl\",\n lineHeight: 1.2\n }),\n sm: defineStyle({\n fontSize: \"md\",\n lineHeight: 1.2\n }),\n xs: defineStyle({\n fontSize: \"sm\",\n lineHeight: 1.2\n })\n};\nconst headingTheme = defineStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"xl\"\n }\n});\n\nexport { headingTheme };\n","import { inputAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\nimport { mode, getColor } from '@chakra-ui/theme-tools';\n\nconst { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(inputAnatomy.keys);\nconst $height = cssVar(\"input-height\");\nconst $fontSize = cssVar(\"input-font-size\");\nconst $padding = cssVar(\"input-padding\");\nconst $borderRadius = cssVar(\"input-border-radius\");\nconst baseStyle = definePartsStyle({\n addon: {\n height: $height.reference,\n fontSize: $fontSize.reference,\n px: $padding.reference,\n borderRadius: $borderRadius.reference\n },\n field: {\n width: \"100%\",\n height: $height.reference,\n fontSize: $fontSize.reference,\n px: $padding.reference,\n borderRadius: $borderRadius.reference,\n minWidth: 0,\n outline: 0,\n position: \"relative\",\n appearance: \"none\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n }\n }\n});\nconst size = {\n lg: defineStyle({\n [$fontSize.variable]: \"fontSizes.lg\",\n [$padding.variable]: \"space.4\",\n [$borderRadius.variable]: \"radii.md\",\n [$height.variable]: \"sizes.12\"\n }),\n md: defineStyle({\n [$fontSize.variable]: \"fontSizes.md\",\n [$padding.variable]: \"space.4\",\n [$borderRadius.variable]: \"radii.md\",\n [$height.variable]: \"sizes.10\"\n }),\n sm: defineStyle({\n [$fontSize.variable]: \"fontSizes.sm\",\n [$padding.variable]: \"space.3\",\n [$borderRadius.variable]: \"radii.sm\",\n [$height.variable]: \"sizes.8\"\n }),\n xs: defineStyle({\n [$fontSize.variable]: \"fontSizes.xs\",\n [$padding.variable]: \"space.2\",\n [$borderRadius.variable]: \"radii.sm\",\n [$height.variable]: \"sizes.6\"\n })\n};\nconst sizes = {\n lg: definePartsStyle({\n field: size.lg,\n group: size.lg\n }),\n md: definePartsStyle({\n field: size.md,\n group: size.md\n }),\n sm: definePartsStyle({\n field: size.sm,\n group: size.sm\n }),\n xs: definePartsStyle({\n field: size.xs,\n group: size.xs\n })\n};\nfunction getDefaults(props) {\n const { focusBorderColor: fc, errorBorderColor: ec } = props;\n return {\n focusBorderColor: fc || mode(\"blue.500\", \"blue.300\")(props),\n errorBorderColor: ec || mode(\"red.500\", \"red.300\")(props)\n };\n}\nconst variantOutline = definePartsStyle((props) => {\n const { theme } = props;\n const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);\n return {\n field: {\n border: \"1px solid\",\n borderColor: \"inherit\",\n bg: \"inherit\",\n _hover: {\n borderColor: mode(\"gray.300\", \"whiteAlpha.400\")(props)\n },\n _readOnly: {\n boxShadow: \"none !important\",\n userSelect: \"all\"\n },\n _invalid: {\n borderColor: getColor(theme, ec),\n boxShadow: `0 0 0 1px ${getColor(theme, ec)}`\n },\n _focusVisible: {\n zIndex: 1,\n borderColor: getColor(theme, fc),\n boxShadow: `0 0 0 1px ${getColor(theme, fc)}`\n }\n },\n addon: {\n border: \"1px solid\",\n borderColor: mode(\"inherit\", \"whiteAlpha.50\")(props),\n bg: mode(\"gray.100\", \"whiteAlpha.300\")(props)\n }\n };\n});\nconst variantFilled = definePartsStyle((props) => {\n const { theme } = props;\n const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);\n return {\n field: {\n border: \"2px solid\",\n borderColor: \"transparent\",\n bg: mode(\"gray.100\", \"whiteAlpha.50\")(props),\n _hover: {\n bg: mode(\"gray.200\", \"whiteAlpha.100\")(props)\n },\n _readOnly: {\n boxShadow: \"none !important\",\n userSelect: \"all\"\n },\n _invalid: {\n borderColor: getColor(theme, ec)\n },\n _focusVisible: {\n bg: \"transparent\",\n borderColor: getColor(theme, fc)\n }\n },\n addon: {\n border: \"2px solid\",\n borderColor: \"transparent\",\n bg: mode(\"gray.100\", \"whiteAlpha.50\")(props)\n }\n };\n});\nconst variantFlushed = definePartsStyle((props) => {\n const { theme } = props;\n const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);\n return {\n field: {\n borderBottom: \"1px solid\",\n borderColor: \"inherit\",\n borderRadius: \"0\",\n px: \"0\",\n bg: \"transparent\",\n _readOnly: {\n boxShadow: \"none !important\",\n userSelect: \"all\"\n },\n _invalid: {\n borderColor: getColor(theme, ec),\n boxShadow: `0px 1px 0px 0px ${getColor(theme, ec)}`\n },\n _focusVisible: {\n borderColor: getColor(theme, fc),\n boxShadow: `0px 1px 0px 0px ${getColor(theme, fc)}`\n }\n },\n addon: {\n borderBottom: \"2px solid\",\n borderColor: \"inherit\",\n borderRadius: \"0\",\n px: \"0\",\n bg: \"transparent\"\n }\n };\n});\nconst variantUnstyled = definePartsStyle({\n field: {\n bg: \"transparent\",\n px: \"0\",\n height: \"auto\"\n },\n addon: {\n bg: \"transparent\",\n px: \"0\",\n height: \"auto\"\n }\n});\nconst variants = {\n outline: variantOutline,\n filled: variantFilled,\n flushed: variantFlushed,\n unstyled: variantUnstyled\n};\nconst inputTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n variants,\n defaultProps: {\n size: \"md\",\n variant: \"outline\"\n }\n});\n\nexport { inputTheme };\n","import { cssVar, defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\n\nconst $bg = cssVar(\"kbd-bg\");\nconst baseStyle = defineStyle({\n [$bg.variable]: \"colors.gray.100\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.100\"\n },\n bg: $bg.reference,\n borderRadius: \"md\",\n borderWidth: \"1px\",\n borderBottomWidth: \"3px\",\n fontSize: \"0.8em\",\n fontWeight: \"bold\",\n lineHeight: \"normal\",\n px: \"0.4em\",\n whiteSpace: \"nowrap\"\n});\nconst kbdTheme = defineStyleConfig({\n baseStyle\n});\n\nexport { kbdTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\n\nconst baseStyle = defineStyle({\n transitionProperty: \"common\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"ease-out\",\n cursor: \"pointer\",\n textDecoration: \"none\",\n outline: \"none\",\n color: \"inherit\",\n _hover: {\n textDecoration: \"underline\"\n },\n _focusVisible: {\n boxShadow: \"outline\"\n }\n});\nconst linkTheme = defineStyleConfig({\n baseStyle\n});\n\nexport { linkTheme };\n","import { listAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(listAnatomy.keys);\nconst baseStyleIcon = defineStyle({\n marginEnd: \"2\",\n display: \"inline\",\n verticalAlign: \"text-bottom\"\n});\nconst baseStyle = definePartsStyle({\n icon: baseStyleIcon\n});\nconst listTheme = defineMultiStyleConfig({\n baseStyle\n});\n\nexport { listTheme };\n","import { menuAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);\nconst $bg = cssVar(\"menu-bg\");\nconst $shadow = cssVar(\"menu-shadow\");\nconst baseStyleList = defineStyle({\n [$bg.variable]: \"#fff\",\n [$shadow.variable]: \"shadows.sm\",\n _dark: {\n [$bg.variable]: \"colors.gray.700\",\n [$shadow.variable]: \"shadows.dark-lg\"\n },\n color: \"inherit\",\n minW: \"3xs\",\n py: \"2\",\n zIndex: \"dropdown\",\n borderRadius: \"md\",\n borderWidth: \"1px\",\n bg: $bg.reference,\n boxShadow: $shadow.reference\n});\nconst baseStyleItem = defineStyle({\n py: \"1.5\",\n px: \"3\",\n transitionProperty: \"background\",\n transitionDuration: \"ultra-fast\",\n transitionTimingFunction: \"ease-in\",\n _focus: {\n [$bg.variable]: \"colors.gray.100\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.100\"\n }\n },\n _active: {\n [$bg.variable]: \"colors.gray.200\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.200\"\n }\n },\n _expanded: {\n [$bg.variable]: \"colors.gray.100\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.100\"\n }\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n },\n bg: $bg.reference\n});\nconst baseStyleGroupTitle = defineStyle({\n mx: 4,\n my: 2,\n fontWeight: \"semibold\",\n fontSize: \"sm\"\n});\nconst baseStyleIcon = defineStyle({\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flexShrink: 0\n});\nconst baseStyleCommand = defineStyle({\n opacity: 0.6\n});\nconst baseStyleDivider = defineStyle({\n border: 0,\n borderBottom: \"1px solid\",\n borderColor: \"inherit\",\n my: \"2\",\n opacity: 0.6\n});\nconst baseStyleButton = defineStyle({\n transitionProperty: \"common\",\n transitionDuration: \"normal\"\n});\nconst baseStyle = definePartsStyle({\n button: baseStyleButton,\n list: baseStyleList,\n item: baseStyleItem,\n groupTitle: baseStyleGroupTitle,\n icon: baseStyleIcon,\n command: baseStyleCommand,\n divider: baseStyleDivider\n});\nconst menuTheme = defineMultiStyleConfig({\n baseStyle\n});\n\nexport { menuTheme };\n","import { modalAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\nimport { runIfFn } from '../utils/run-if-fn.mjs';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(modalAnatomy.keys);\nconst $bg = cssVar(\"modal-bg\");\nconst $shadow = cssVar(\"modal-shadow\");\nconst baseStyleOverlay = defineStyle({\n bg: \"blackAlpha.600\",\n zIndex: \"modal\"\n});\nconst baseStyleDialogContainer = defineStyle((props) => {\n const { isCentered, scrollBehavior } = props;\n return {\n display: \"flex\",\n zIndex: \"modal\",\n justifyContent: \"center\",\n alignItems: isCentered ? \"center\" : \"flex-start\",\n overflow: scrollBehavior === \"inside\" ? \"hidden\" : \"auto\",\n overscrollBehaviorY: \"none\"\n };\n});\nconst baseStyleDialog = defineStyle((props) => {\n const { isCentered, scrollBehavior } = props;\n return {\n borderRadius: \"md\",\n color: \"inherit\",\n my: isCentered ? \"auto\" : \"16\",\n mx: isCentered ? \"auto\" : void 0,\n zIndex: \"modal\",\n maxH: scrollBehavior === \"inside\" ? \"calc(100% - 7.5rem)\" : void 0,\n [$bg.variable]: \"colors.white\",\n [$shadow.variable]: \"shadows.lg\",\n _dark: {\n [$bg.variable]: \"colors.gray.700\",\n [$shadow.variable]: \"shadows.dark-lg\"\n },\n bg: $bg.reference,\n boxShadow: $shadow.reference\n };\n});\nconst baseStyleHeader = defineStyle({\n px: \"6\",\n py: \"4\",\n fontSize: \"xl\",\n fontWeight: \"semibold\"\n});\nconst baseStyleCloseButton = defineStyle({\n position: \"absolute\",\n top: \"2\",\n insetEnd: \"3\"\n});\nconst baseStyleBody = defineStyle((props) => {\n const { scrollBehavior } = props;\n return {\n px: \"6\",\n py: \"2\",\n flex: \"1\",\n overflow: scrollBehavior === \"inside\" ? \"auto\" : void 0\n };\n});\nconst baseStyleFooter = defineStyle({\n px: \"6\",\n py: \"4\"\n});\nconst baseStyle = definePartsStyle((props) => ({\n overlay: baseStyleOverlay,\n dialogContainer: runIfFn(baseStyleDialogContainer, props),\n dialog: runIfFn(baseStyleDialog, props),\n header: baseStyleHeader,\n closeButton: baseStyleCloseButton,\n body: runIfFn(baseStyleBody, props),\n footer: baseStyleFooter\n}));\nfunction getSize(value) {\n if (value === \"full\") {\n return definePartsStyle({\n dialog: {\n maxW: \"100vw\",\n minH: \"$100vh\",\n my: \"0\",\n borderRadius: \"0\"\n }\n });\n }\n return definePartsStyle({\n dialog: { maxW: value }\n });\n}\nconst sizes = {\n xs: getSize(\"xs\"),\n sm: getSize(\"sm\"),\n md: getSize(\"md\"),\n lg: getSize(\"lg\"),\n xl: getSize(\"xl\"),\n \"2xl\": getSize(\"2xl\"),\n \"3xl\": getSize(\"3xl\"),\n \"4xl\": getSize(\"4xl\"),\n \"5xl\": getSize(\"5xl\"),\n \"6xl\": getSize(\"6xl\"),\n full: getSize(\"full\")\n};\nconst modalTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: { size: \"md\" }\n});\n\nexport { modalTheme };\n","function isNumber(value) {\n return typeof value === \"number\";\n}\nfunction isNotNumber(value) {\n return typeof value !== \"number\" || Number.isNaN(value) || !Number.isFinite(value);\n}\nfunction isNumeric(value) {\n return value != null && value - parseFloat(value) + 1 >= 0;\n}\nfunction isArray(value) {\n return Array.isArray(value);\n}\nfunction isEmptyArray(value) {\n return isArray(value) && value.length === 0;\n}\nfunction isFunction(value) {\n return typeof value === \"function\";\n}\nfunction isDefined(value) {\n return typeof value !== \"undefined\" && value !== void 0;\n}\nfunction isUndefined(value) {\n return typeof value === \"undefined\" || value === void 0;\n}\nfunction isObject(value) {\n const type = typeof value;\n return value != null && (type === \"object\" || type === \"function\") && !isArray(value);\n}\nfunction isEmptyObject(value) {\n return isObject(value) && Object.keys(value).length === 0;\n}\nfunction isNull(value) {\n return value == null;\n}\nfunction isString(value) {\n return Object.prototype.toString.call(value) === \"[object String]\";\n}\nfunction isCssVar(value) {\n return /^var\\(--.+\\)$/.test(value);\n}\nfunction isEmpty(value) {\n if (isArray(value))\n return isEmptyArray(value);\n if (isObject(value))\n return isEmptyObject(value);\n if (value == null || value === \"\")\n return true;\n return false;\n}\nfunction isRefObject(val) {\n return \"current\" in val;\n}\nfunction isInputEvent(value) {\n return value && isObject(value) && isObject(value.target);\n}\n\nexport { isArray, isCssVar, isDefined, isEmpty, isEmptyArray, isEmptyObject, isFunction, isInputEvent, isNotNumber, isNull, isNumber, isNumeric, isObject, isRefObject, isString, isUndefined };\n","import { isObject } from '@chakra-ui/utils';\n\nfunction toRef(operand) {\n if (isObject(operand) && operand.reference) {\n return operand.reference;\n }\n return String(operand);\n}\nconst toExpr = (operator, ...operands) => operands.map(toRef).join(` ${operator} `).replace(/calc/g, \"\");\nconst add = (...operands) => `calc(${toExpr(\"+\", ...operands)})`;\nconst subtract = (...operands) => `calc(${toExpr(\"-\", ...operands)})`;\nconst multiply = (...operands) => `calc(${toExpr(\"*\", ...operands)})`;\nconst divide = (...operands) => `calc(${toExpr(\"/\", ...operands)})`;\nconst negate = (x) => {\n const value = toRef(x);\n if (value != null && !Number.isNaN(parseFloat(value))) {\n return String(value).startsWith(\"-\") ? String(value).slice(1) : `-${value}`;\n }\n return multiply(value, -1);\n};\nconst calc = Object.assign(\n (x) => ({\n add: (...operands) => calc(add(x, ...operands)),\n subtract: (...operands) => calc(subtract(x, ...operands)),\n multiply: (...operands) => calc(multiply(x, ...operands)),\n divide: (...operands) => calc(divide(x, ...operands)),\n negate: () => calc(negate(x)),\n toString: () => x.toString()\n }),\n {\n add,\n subtract,\n multiply,\n divide,\n negate\n }\n);\n\nexport { calc };\n","const typography = {\n letterSpacings: {\n tighter: \"-0.05em\",\n tight: \"-0.025em\",\n normal: \"0\",\n wide: \"0.025em\",\n wider: \"0.05em\",\n widest: \"0.1em\"\n },\n lineHeights: {\n normal: \"normal\",\n none: 1,\n shorter: 1.25,\n short: 1.375,\n base: 1.5,\n tall: 1.625,\n taller: \"2\",\n \"3\": \".75rem\",\n \"4\": \"1rem\",\n \"5\": \"1.25rem\",\n \"6\": \"1.5rem\",\n \"7\": \"1.75rem\",\n \"8\": \"2rem\",\n \"9\": \"2.25rem\",\n \"10\": \"2.5rem\"\n },\n fontWeights: {\n hairline: 100,\n thin: 200,\n light: 300,\n normal: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n extrabold: 800,\n black: 900\n },\n fonts: {\n heading: `-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"`,\n body: `-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"`,\n mono: `SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace`\n },\n fontSizes: {\n \"3xs\": \"0.45rem\",\n \"2xs\": \"0.625rem\",\n xs: \"0.75rem\",\n sm: \"0.875rem\",\n md: \"1rem\",\n lg: \"1.125rem\",\n xl: \"1.25rem\",\n \"2xl\": \"1.5rem\",\n \"3xl\": \"1.875rem\",\n \"4xl\": \"2.25rem\",\n \"5xl\": \"3rem\",\n \"6xl\": \"3.75rem\",\n \"7xl\": \"4.5rem\",\n \"8xl\": \"6rem\",\n \"9xl\": \"8rem\"\n }\n};\n\nexport { typography as default };\n","import { numberInputAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\nimport { cssVar, calc } from '@chakra-ui/theme-tools';\nimport typography from '../foundations/typography.mjs';\nimport { inputTheme } from './input.mjs';\nimport { runIfFn } from '../utils/run-if-fn.mjs';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(numberInputAnatomy.keys);\nconst $stepperWidth = cssVar(\"number-input-stepper-width\");\nconst $inputPadding = cssVar(\"number-input-input-padding\");\nconst inputPaddingValue = calc($stepperWidth).add(\"0.5rem\").toString();\nconst $bg = cssVar(\"number-input-bg\");\nconst $fg = cssVar(\"number-input-color\");\nconst $border = cssVar(\"number-input-border-color\");\nconst baseStyleRoot = defineStyle({\n [$stepperWidth.variable]: \"sizes.6\",\n [$inputPadding.variable]: inputPaddingValue\n});\nconst baseStyleField = defineStyle(\n (props) => runIfFn(inputTheme.baseStyle, props)?.field ?? {}\n);\nconst baseStyleStepperGroup = defineStyle({\n width: $stepperWidth.reference\n});\nconst baseStyleStepper = defineStyle({\n borderStart: \"1px solid\",\n borderStartColor: $border.reference,\n color: $fg.reference,\n bg: $bg.reference,\n [$fg.variable]: \"colors.chakra-body-text\",\n [$border.variable]: \"colors.chakra-border-color\",\n _dark: {\n [$fg.variable]: \"colors.whiteAlpha.800\",\n [$border.variable]: \"colors.whiteAlpha.300\"\n },\n _active: {\n [$bg.variable]: \"colors.gray.200\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.300\"\n }\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n }\n});\nconst baseStyle = definePartsStyle((props) => ({\n root: baseStyleRoot,\n field: runIfFn(baseStyleField, props) ?? {},\n stepperGroup: baseStyleStepperGroup,\n stepper: baseStyleStepper\n}));\nfunction getSize(size) {\n const sizeStyle = inputTheme.sizes?.[size];\n const radius = {\n lg: \"md\",\n md: \"md\",\n sm: \"sm\",\n xs: \"sm\"\n };\n const _fontSize = sizeStyle.field?.fontSize ?? \"md\";\n const fontSize = typography.fontSizes[_fontSize];\n return definePartsStyle({\n field: {\n ...sizeStyle.field,\n paddingInlineEnd: $inputPadding.reference,\n verticalAlign: \"top\"\n },\n stepper: {\n fontSize: calc(fontSize).multiply(0.75).toString(),\n _first: {\n borderTopEndRadius: radius[size]\n },\n _last: {\n borderBottomEndRadius: radius[size],\n mt: \"-1px\",\n borderTopWidth: 1\n }\n }\n });\n}\nconst sizes = {\n xs: getSize(\"xs\"),\n sm: getSize(\"sm\"),\n md: getSize(\"md\"),\n lg: getSize(\"lg\")\n};\nconst numberInputTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n variants: inputTheme.variants,\n defaultProps: inputTheme.defaultProps\n});\n\nexport { numberInputTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\nimport { inputTheme } from './input.mjs';\nimport { runIfFn } from '../utils/run-if-fn.mjs';\n\nconst baseStyle = defineStyle({\n ...inputTheme.baseStyle?.field,\n textAlign: \"center\"\n});\nconst sizes = {\n lg: defineStyle({\n fontSize: \"lg\",\n w: 12,\n h: 12,\n borderRadius: \"md\"\n }),\n md: defineStyle({\n fontSize: \"md\",\n w: 10,\n h: 10,\n borderRadius: \"md\"\n }),\n sm: defineStyle({\n fontSize: \"sm\",\n w: 8,\n h: 8,\n borderRadius: \"sm\"\n }),\n xs: defineStyle({\n fontSize: \"xs\",\n w: 6,\n h: 6,\n borderRadius: \"sm\"\n })\n};\nconst variants = {\n outline: defineStyle(\n (props) => runIfFn(inputTheme.variants?.outline, props)?.field ?? {}\n ),\n flushed: defineStyle(\n (props) => runIfFn(inputTheme.variants?.flushed, props)?.field ?? {}\n ),\n filled: defineStyle(\n (props) => runIfFn(inputTheme.variants?.filled, props)?.field ?? {}\n ),\n unstyled: inputTheme.variants?.unstyled.field ?? {}\n};\nconst pinInputTheme = defineStyleConfig({\n baseStyle,\n sizes,\n variants,\n defaultProps: inputTheme.defaultProps\n});\n\nexport { pinInputTheme };\n","import { popoverAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\nimport { cssVar } from '@chakra-ui/theme-tools';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);\nconst $popperBg = cssVar(\"popper-bg\");\nconst $arrowBg = cssVar(\"popper-arrow-bg\");\nconst $arrowShadowColor = cssVar(\"popper-arrow-shadow-color\");\nconst baseStylePopper = defineStyle({\n zIndex: \"popover\"\n});\nconst baseStyleContent = defineStyle({\n [$popperBg.variable]: `colors.white`,\n bg: $popperBg.reference,\n [$arrowBg.variable]: $popperBg.reference,\n [$arrowShadowColor.variable]: `colors.gray.200`,\n _dark: {\n [$popperBg.variable]: `colors.gray.700`,\n [$arrowShadowColor.variable]: `colors.whiteAlpha.300`\n },\n width: \"xs\",\n border: \"1px solid\",\n borderColor: \"inherit\",\n borderRadius: \"md\",\n boxShadow: \"sm\",\n zIndex: \"inherit\",\n _focusVisible: {\n outline: 0,\n boxShadow: \"outline\"\n }\n});\nconst baseStyleHeader = defineStyle({\n px: 3,\n py: 2,\n borderBottomWidth: \"1px\"\n});\nconst baseStyleBody = defineStyle({\n px: 3,\n py: 2\n});\nconst baseStyleFooter = defineStyle({\n px: 3,\n py: 2,\n borderTopWidth: \"1px\"\n});\nconst baseStyleCloseButton = defineStyle({\n position: \"absolute\",\n borderRadius: \"md\",\n top: 1,\n insetEnd: 2,\n padding: 2\n});\nconst baseStyle = definePartsStyle({\n popper: baseStylePopper,\n content: baseStyleContent,\n header: baseStyleHeader,\n body: baseStyleBody,\n footer: baseStyleFooter,\n closeButton: baseStyleCloseButton\n});\nconst popoverTheme = defineMultiStyleConfig({\n baseStyle\n});\n\nexport { popoverTheme };\n","import { progressAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\nimport { mode, generateStripe, getColor } from '@chakra-ui/theme-tools';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(progressAnatomy.keys);\nconst filledStyle = defineStyle((props) => {\n const { colorScheme: c, theme: t, isIndeterminate, hasStripe } = props;\n const stripeStyle = mode(\n generateStripe(),\n generateStripe(\"1rem\", \"rgba(0,0,0,0.1)\")\n )(props);\n const bgColor = mode(`${c}.500`, `${c}.200`)(props);\n const gradient = `linear-gradient(\n to right,\n transparent 0%,\n ${getColor(t, bgColor)} 50%,\n transparent 100%\n )`;\n const addStripe = !isIndeterminate && hasStripe;\n return {\n ...addStripe && stripeStyle,\n ...isIndeterminate ? { bgImage: gradient } : { bgColor }\n };\n});\nconst baseStyleLabel = defineStyle({\n lineHeight: \"1\",\n fontSize: \"0.25em\",\n fontWeight: \"bold\",\n color: \"white\"\n});\nconst baseStyleTrack = defineStyle((props) => {\n return {\n bg: mode(\"gray.100\", \"whiteAlpha.300\")(props)\n };\n});\nconst baseStyleFilledTrack = defineStyle((props) => {\n return {\n transitionProperty: \"common\",\n transitionDuration: \"slow\",\n ...filledStyle(props)\n };\n});\nconst baseStyle = definePartsStyle((props) => ({\n label: baseStyleLabel,\n filledTrack: baseStyleFilledTrack(props),\n track: baseStyleTrack(props)\n}));\nconst sizes = {\n xs: definePartsStyle({\n track: { h: \"1\" }\n }),\n sm: definePartsStyle({\n track: { h: \"2\" }\n }),\n md: definePartsStyle({\n track: { h: \"3\" }\n }),\n lg: definePartsStyle({\n track: { h: \"4\" }\n })\n};\nconst progressTheme = defineMultiStyleConfig({\n sizes,\n baseStyle,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\"\n }\n});\n\nexport { progressTheme };\n","import { radioAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\nimport { runIfFn } from '../utils/run-if-fn.mjs';\nimport { checkboxTheme } from './checkbox.mjs';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(radioAnatomy.keys);\nconst baseStyleControl = defineStyle((props) => {\n const controlStyle = runIfFn(checkboxTheme.baseStyle, props)?.control;\n return {\n ...controlStyle,\n borderRadius: \"full\",\n _checked: {\n ...controlStyle?.[\"_checked\"],\n _before: {\n content: `\"\"`,\n display: \"inline-block\",\n pos: \"relative\",\n w: \"50%\",\n h: \"50%\",\n borderRadius: \"50%\",\n bg: \"currentColor\"\n }\n }\n };\n});\nconst baseStyle = definePartsStyle((props) => ({\n label: checkboxTheme.baseStyle?.(props).label,\n container: checkboxTheme.baseStyle?.(props).container,\n control: baseStyleControl(props)\n}));\nconst sizes = {\n md: definePartsStyle({\n control: { w: \"4\", h: \"4\" },\n label: { fontSize: \"md\" }\n }),\n lg: definePartsStyle({\n control: { w: \"5\", h: \"5\" },\n label: { fontSize: \"lg\" }\n }),\n sm: definePartsStyle({\n control: { width: \"3\", height: \"3\" },\n label: { fontSize: \"sm\" }\n })\n};\nconst radioTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\"\n }\n});\n\nexport { radioTheme };\n","import { selectAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\nimport { inputTheme } from './input.mjs';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(selectAnatomy.keys);\nconst $bg = cssVar(\"select-bg\");\nconst baseStyleField = defineStyle({\n ...inputTheme.baseStyle?.field,\n appearance: \"none\",\n paddingBottom: \"1px\",\n lineHeight: \"normal\",\n bg: $bg.reference,\n [$bg.variable]: \"colors.white\",\n _dark: {\n [$bg.variable]: \"colors.gray.700\"\n },\n \"> option, > optgroup\": {\n bg: $bg.reference\n }\n});\nconst baseStyleIcon = defineStyle({\n width: \"6\",\n height: \"100%\",\n insetEnd: \"2\",\n position: \"relative\",\n color: \"currentColor\",\n fontSize: \"xl\",\n _disabled: {\n opacity: 0.5\n }\n});\nconst baseStyle = definePartsStyle({\n field: baseStyleField,\n icon: baseStyleIcon\n});\nconst iconSpacing = defineStyle({\n paddingInlineEnd: \"8\"\n});\nconst sizes = {\n lg: {\n ...inputTheme.sizes?.lg,\n field: {\n ...inputTheme.sizes?.lg.field,\n ...iconSpacing\n }\n },\n md: {\n ...inputTheme.sizes?.md,\n field: {\n ...inputTheme.sizes?.md.field,\n ...iconSpacing\n }\n },\n sm: {\n ...inputTheme.sizes?.sm,\n field: {\n ...inputTheme.sizes?.sm.field,\n ...iconSpacing\n }\n },\n xs: {\n ...inputTheme.sizes?.xs,\n field: {\n ...inputTheme.sizes?.xs.field,\n ...iconSpacing\n },\n icon: {\n insetEnd: \"1\"\n }\n }\n};\nconst selectTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n variants: inputTheme.variants,\n defaultProps: inputTheme.defaultProps\n});\n\nexport { selectTheme };\n","import { cssVar, defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\n\nconst $startColor = cssVar(\"skeleton-start-color\");\nconst $endColor = cssVar(\"skeleton-end-color\");\nconst baseStyle = defineStyle({\n [$startColor.variable]: \"colors.gray.100\",\n [$endColor.variable]: \"colors.gray.400\",\n _dark: {\n [$startColor.variable]: \"colors.gray.800\",\n [$endColor.variable]: \"colors.gray.600\"\n },\n background: $startColor.reference,\n borderColor: $endColor.reference,\n opacity: 0.7,\n borderRadius: \"sm\"\n});\nconst skeletonTheme = defineStyleConfig({\n baseStyle\n});\n\nexport { skeletonTheme };\n","import { cssVar, defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\n\nconst $bg = cssVar(\"skip-link-bg\");\nconst baseStyle = defineStyle({\n borderRadius: \"md\",\n fontWeight: \"semibold\",\n _focusVisible: {\n boxShadow: \"outline\",\n padding: \"4\",\n position: \"fixed\",\n top: \"6\",\n insetStart: \"6\",\n [$bg.variable]: \"colors.white\",\n _dark: {\n [$bg.variable]: \"colors.gray.700\"\n },\n bg: $bg.reference\n }\n});\nconst skipLinkTheme = defineStyleConfig({\n baseStyle\n});\n\nexport { skipLinkTheme };\n","import { isObject } from '@chakra-ui/utils';\n\nfunction resolveReference(operand) {\n if (isObject(operand) && operand.reference) {\n return operand.reference;\n }\n return String(operand);\n}\nconst toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(/calc/g, \"\");\nconst add = (...operands) => `calc(${toExpression(\"+\", ...operands)})`;\nconst subtract = (...operands) => `calc(${toExpression(\"-\", ...operands)})`;\nconst multiply = (...operands) => `calc(${toExpression(\"*\", ...operands)})`;\nconst divide = (...operands) => `calc(${toExpression(\"/\", ...operands)})`;\nconst negate = (x) => {\n const value = resolveReference(x);\n if (value != null && !Number.isNaN(parseFloat(value))) {\n return String(value).startsWith(\"-\") ? String(value).slice(1) : `-${value}`;\n }\n return multiply(value, -1);\n};\nconst calc = Object.assign(\n (x) => ({\n add: (...operands) => calc(add(x, ...operands)),\n subtract: (...operands) => calc(subtract(x, ...operands)),\n multiply: (...operands) => calc(multiply(x, ...operands)),\n divide: (...operands) => calc(divide(x, ...operands)),\n negate: () => calc(negate(x)),\n toString: () => x.toString()\n }),\n {\n add,\n subtract,\n multiply,\n divide,\n negate\n }\n);\n\nexport { calc };\n","import { sliderAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle, calc } from '@chakra-ui/styled-system';\nimport { orient } from '@chakra-ui/theme-tools';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(sliderAnatomy.keys);\nconst $thumbSize = cssVar(\"slider-thumb-size\");\nconst $trackSize = cssVar(\"slider-track-size\");\nconst $bg = cssVar(\"slider-bg\");\nconst baseStyleContainer = defineStyle((props) => {\n const { orientation } = props;\n return {\n display: \"inline-block\",\n position: \"relative\",\n cursor: \"pointer\",\n _disabled: {\n opacity: 0.6,\n cursor: \"default\",\n pointerEvents: \"none\"\n },\n ...orient({\n orientation,\n vertical: {\n h: \"100%\",\n px: calc($thumbSize.reference).divide(2).toString()\n },\n horizontal: {\n w: \"100%\",\n py: calc($thumbSize.reference).divide(2).toString()\n }\n })\n };\n});\nconst baseStyleTrack = defineStyle((props) => {\n const orientationStyles = orient({\n orientation: props.orientation,\n horizontal: { h: $trackSize.reference },\n vertical: { w: $trackSize.reference }\n });\n return {\n ...orientationStyles,\n overflow: \"hidden\",\n borderRadius: \"sm\",\n [$bg.variable]: \"colors.gray.200\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.200\"\n },\n _disabled: {\n [$bg.variable]: \"colors.gray.300\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.300\"\n }\n },\n bg: $bg.reference\n };\n});\nconst baseStyleThumb = defineStyle((props) => {\n const { orientation } = props;\n const orientationStyle = orient({\n orientation,\n vertical: {\n left: \"50%\",\n transform: `translateX(-50%)`,\n _active: {\n transform: `translateX(-50%) scale(1.15)`\n }\n },\n horizontal: {\n top: \"50%\",\n transform: `translateY(-50%)`,\n _active: {\n transform: `translateY(-50%) scale(1.15)`\n }\n }\n });\n return {\n ...orientationStyle,\n w: $thumbSize.reference,\n h: $thumbSize.reference,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"absolute\",\n outline: 0,\n zIndex: 1,\n borderRadius: \"full\",\n bg: \"white\",\n boxShadow: \"base\",\n border: \"1px solid\",\n borderColor: \"transparent\",\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n _focusVisible: {\n boxShadow: \"outline\"\n },\n _disabled: {\n bg: \"gray.300\"\n }\n };\n});\nconst baseStyleFilledTrack = defineStyle((props) => {\n const { colorScheme: c } = props;\n return {\n width: \"inherit\",\n height: \"inherit\",\n [$bg.variable]: `colors.${c}.500`,\n _dark: {\n [$bg.variable]: `colors.${c}.200`\n },\n bg: $bg.reference\n };\n});\nconst baseStyle = definePartsStyle((props) => ({\n container: baseStyleContainer(props),\n track: baseStyleTrack(props),\n thumb: baseStyleThumb(props),\n filledTrack: baseStyleFilledTrack(props)\n}));\nconst sizeLg = definePartsStyle({\n container: {\n [$thumbSize.variable]: `sizes.4`,\n [$trackSize.variable]: `sizes.1`\n }\n});\nconst sizeMd = definePartsStyle({\n container: {\n [$thumbSize.variable]: `sizes.3.5`,\n [$trackSize.variable]: `sizes.1`\n }\n});\nconst sizeSm = definePartsStyle({\n container: {\n [$thumbSize.variable]: `sizes.2.5`,\n [$trackSize.variable]: `sizes.0.5`\n }\n});\nconst sizes = {\n lg: sizeLg,\n md: sizeMd,\n sm: sizeSm\n};\nconst sliderTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\"\n }\n});\n\nexport { sliderTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\nimport { cssVar } from '@chakra-ui/theme-tools';\n\nconst $size = cssVar(\"spinner-size\");\nconst baseStyle = defineStyle({\n width: [$size.reference],\n height: [$size.reference]\n});\nconst sizes = {\n xs: defineStyle({\n [$size.variable]: \"sizes.3\"\n }),\n sm: defineStyle({\n [$size.variable]: \"sizes.4\"\n }),\n md: defineStyle({\n [$size.variable]: \"sizes.6\"\n }),\n lg: defineStyle({\n [$size.variable]: \"sizes.8\"\n }),\n xl: defineStyle({\n [$size.variable]: \"sizes.12\"\n })\n};\nconst spinnerTheme = defineStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\"\n }\n});\n\nexport { spinnerTheme };\n","import { statAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(statAnatomy.keys);\nconst baseStyleLabel = defineStyle({\n fontWeight: \"medium\"\n});\nconst baseStyleHelpText = defineStyle({\n opacity: 0.8,\n marginBottom: \"2\"\n});\nconst baseStyleNumber = defineStyle({\n verticalAlign: \"baseline\",\n fontWeight: \"semibold\"\n});\nconst baseStyleIcon = defineStyle({\n marginEnd: 1,\n w: \"3.5\",\n h: \"3.5\",\n verticalAlign: \"middle\"\n});\nconst baseStyle = definePartsStyle({\n container: {},\n label: baseStyleLabel,\n helpText: baseStyleHelpText,\n number: baseStyleNumber,\n icon: baseStyleIcon\n});\nconst sizes = {\n md: definePartsStyle({\n label: { fontSize: \"sm\" },\n helpText: { fontSize: \"sm\" },\n number: { fontSize: \"2xl\" }\n })\n};\nconst statTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\"\n }\n});\n\nexport { statTheme };\n","import { createMultiStyleConfigHelpers, cssVar } from '@chakra-ui/styled-system';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([\n \"stepper\",\n \"step\",\n \"title\",\n \"description\",\n \"indicator\",\n \"separator\",\n \"icon\",\n \"number\"\n]);\nconst $size = cssVar(\"stepper-indicator-size\");\nconst $iconSize = cssVar(\"stepper-icon-size\");\nconst $titleFontSize = cssVar(\"stepper-title-font-size\");\nconst $descFontSize = cssVar(\"stepper-description-font-size\");\nconst $accentColor = cssVar(\"stepper-accent-color\");\nconst baseStyle = definePartsStyle(({ colorScheme: c }) => ({\n stepper: {\n display: \"flex\",\n justifyContent: \"space-between\",\n gap: \"4\",\n \"&[data-orientation=vertical]\": {\n flexDirection: \"column\",\n alignItems: \"flex-start\"\n },\n \"&[data-orientation=horizontal]\": {\n flexDirection: \"row\",\n alignItems: \"center\"\n },\n [$accentColor.variable]: `colors.${c}.500`,\n _dark: {\n [$accentColor.variable]: `colors.${c}.200`\n }\n },\n title: {\n fontSize: $titleFontSize.reference,\n fontWeight: \"medium\"\n },\n description: {\n fontSize: $descFontSize.reference,\n color: \"chakra-subtle-text\"\n },\n number: {\n fontSize: $titleFontSize.reference\n },\n step: {\n flexShrink: 0,\n position: \"relative\",\n display: \"flex\",\n gap: \"2\",\n \"&[data-orientation=horizontal]\": {\n alignItems: \"center\"\n },\n flex: \"1\",\n \"&:last-of-type:not([data-stretch])\": {\n flex: \"initial\"\n }\n },\n icon: {\n flexShrink: 0,\n width: $iconSize.reference,\n height: $iconSize.reference\n },\n indicator: {\n flexShrink: 0,\n borderRadius: \"full\",\n width: $size.reference,\n height: $size.reference,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n \"&[data-status=active]\": {\n borderWidth: \"2px\",\n borderColor: $accentColor.reference\n },\n \"&[data-status=complete]\": {\n bg: $accentColor.reference,\n color: \"chakra-inverse-text\"\n },\n \"&[data-status=incomplete]\": {\n borderWidth: \"2px\"\n }\n },\n separator: {\n bg: \"chakra-border-color\",\n flex: \"1\",\n \"&[data-status=complete]\": {\n bg: $accentColor.reference\n },\n \"&[data-orientation=horizontal]\": {\n width: \"100%\",\n height: \"2px\",\n marginStart: \"2\"\n },\n \"&[data-orientation=vertical]\": {\n width: \"2px\",\n position: \"absolute\",\n height: \"100%\",\n maxHeight: `calc(100% - ${$size.reference} - 8px)`,\n top: `calc(${$size.reference} + 4px)`,\n insetStart: `calc(${$size.reference} / 2 - 1px)`\n }\n }\n}));\nconst stepperTheme = defineMultiStyleConfig({\n baseStyle,\n sizes: {\n xs: definePartsStyle({\n stepper: {\n [$size.variable]: \"sizes.4\",\n [$iconSize.variable]: \"sizes.3\",\n [$titleFontSize.variable]: \"fontSizes.xs\",\n [$descFontSize.variable]: \"fontSizes.xs\"\n }\n }),\n sm: definePartsStyle({\n stepper: {\n [$size.variable]: \"sizes.6\",\n [$iconSize.variable]: \"sizes.4\",\n [$titleFontSize.variable]: \"fontSizes.sm\",\n [$descFontSize.variable]: \"fontSizes.xs\"\n }\n }),\n md: definePartsStyle({\n stepper: {\n [$size.variable]: \"sizes.8\",\n [$iconSize.variable]: \"sizes.5\",\n [$titleFontSize.variable]: \"fontSizes.md\",\n [$descFontSize.variable]: \"fontSizes.sm\"\n }\n }),\n lg: definePartsStyle({\n stepper: {\n [$size.variable]: \"sizes.10\",\n [$iconSize.variable]: \"sizes.6\",\n [$titleFontSize.variable]: \"fontSizes.lg\",\n [$descFontSize.variable]: \"fontSizes.md\"\n }\n })\n },\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\"\n }\n});\n\nexport { stepperTheme };\n","import { switchAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\nimport { cssVar, calc } from '@chakra-ui/theme-tools';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(switchAnatomy.keys);\nconst $width = cssVar(\"switch-track-width\");\nconst $height = cssVar(\"switch-track-height\");\nconst $diff = cssVar(\"switch-track-diff\");\nconst diffValue = calc.subtract($width, $height);\nconst $translateX = cssVar(\"switch-thumb-x\");\nconst $bg = cssVar(\"switch-bg\");\nconst baseStyleTrack = defineStyle((props) => {\n const { colorScheme: c } = props;\n return {\n borderRadius: \"full\",\n p: \"0.5\",\n width: [$width.reference],\n height: [$height.reference],\n transitionProperty: \"common\",\n transitionDuration: \"fast\",\n [$bg.variable]: \"colors.gray.300\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.400\"\n },\n _focusVisible: {\n boxShadow: \"outline\"\n },\n _disabled: {\n opacity: 0.4,\n cursor: \"not-allowed\"\n },\n _checked: {\n [$bg.variable]: `colors.${c}.500`,\n _dark: {\n [$bg.variable]: `colors.${c}.200`\n }\n },\n bg: $bg.reference\n };\n});\nconst baseStyleThumb = defineStyle({\n bg: \"white\",\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n borderRadius: \"inherit\",\n width: [$height.reference],\n height: [$height.reference],\n _checked: {\n transform: `translateX(${$translateX.reference})`\n }\n});\nconst baseStyle = definePartsStyle((props) => ({\n container: {\n [$diff.variable]: diffValue,\n [$translateX.variable]: $diff.reference,\n _rtl: {\n [$translateX.variable]: calc($diff).negate().toString()\n }\n },\n track: baseStyleTrack(props),\n thumb: baseStyleThumb\n}));\nconst sizes = {\n sm: definePartsStyle({\n container: {\n [$width.variable]: \"1.375rem\",\n [$height.variable]: \"sizes.3\"\n }\n }),\n md: definePartsStyle({\n container: {\n [$width.variable]: \"1.875rem\",\n [$height.variable]: \"sizes.4\"\n }\n }),\n lg: definePartsStyle({\n container: {\n [$width.variable]: \"2.875rem\",\n [$height.variable]: \"sizes.6\"\n }\n })\n};\nconst switchTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\"\n }\n});\n\nexport { switchTheme };\n","import { tableAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\nimport { mode } from '@chakra-ui/theme-tools';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(tableAnatomy.keys);\nconst baseStyle = definePartsStyle({\n table: {\n fontVariantNumeric: \"lining-nums tabular-nums\",\n borderCollapse: \"collapse\",\n width: \"full\"\n },\n th: {\n fontFamily: \"heading\",\n fontWeight: \"bold\",\n textTransform: \"uppercase\",\n letterSpacing: \"wider\",\n textAlign: \"start\"\n },\n td: {\n textAlign: \"start\"\n },\n caption: {\n mt: 4,\n fontFamily: \"heading\",\n textAlign: \"center\",\n fontWeight: \"medium\"\n }\n});\nconst numericStyles = defineStyle({\n \"&[data-is-numeric=true]\": {\n textAlign: \"end\"\n }\n});\nconst variantSimple = definePartsStyle((props) => {\n const { colorScheme: c } = props;\n return {\n th: {\n color: mode(\"gray.600\", \"gray.400\")(props),\n borderBottom: \"1px\",\n borderColor: mode(`${c}.100`, `${c}.700`)(props),\n ...numericStyles\n },\n td: {\n borderBottom: \"1px\",\n borderColor: mode(`${c}.100`, `${c}.700`)(props),\n ...numericStyles\n },\n caption: {\n color: mode(\"gray.600\", \"gray.100\")(props)\n },\n tfoot: {\n tr: {\n \"&:last-of-type\": {\n th: { borderBottomWidth: 0 }\n }\n }\n }\n };\n});\nconst variantStripe = definePartsStyle((props) => {\n const { colorScheme: c } = props;\n return {\n th: {\n color: mode(\"gray.600\", \"gray.400\")(props),\n borderBottom: \"1px\",\n borderColor: mode(`${c}.100`, `${c}.700`)(props),\n ...numericStyles\n },\n td: {\n borderBottom: \"1px\",\n borderColor: mode(`${c}.100`, `${c}.700`)(props),\n ...numericStyles\n },\n caption: {\n color: mode(\"gray.600\", \"gray.100\")(props)\n },\n tbody: {\n tr: {\n \"&:nth-of-type(odd)\": {\n \"th, td\": {\n borderBottomWidth: \"1px\",\n borderColor: mode(`${c}.100`, `${c}.700`)(props)\n },\n td: {\n background: mode(`${c}.100`, `${c}.700`)(props)\n }\n }\n }\n },\n tfoot: {\n tr: {\n \"&:last-of-type\": {\n th: { borderBottomWidth: 0 }\n }\n }\n }\n };\n});\nconst variants = {\n simple: variantSimple,\n striped: variantStripe,\n unstyled: defineStyle({})\n};\nconst sizes = {\n sm: definePartsStyle({\n th: {\n px: \"4\",\n py: \"1\",\n lineHeight: \"4\",\n fontSize: \"xs\"\n },\n td: {\n px: \"4\",\n py: \"2\",\n fontSize: \"sm\",\n lineHeight: \"4\"\n },\n caption: {\n px: \"4\",\n py: \"2\",\n fontSize: \"xs\"\n }\n }),\n md: definePartsStyle({\n th: {\n px: \"6\",\n py: \"3\",\n lineHeight: \"4\",\n fontSize: \"xs\"\n },\n td: {\n px: \"6\",\n py: \"4\",\n lineHeight: \"5\"\n },\n caption: {\n px: \"6\",\n py: \"2\",\n fontSize: \"sm\"\n }\n }),\n lg: definePartsStyle({\n th: {\n px: \"8\",\n py: \"4\",\n lineHeight: \"5\",\n fontSize: \"sm\"\n },\n td: {\n px: \"8\",\n py: \"5\",\n lineHeight: \"6\"\n },\n caption: {\n px: \"6\",\n py: \"2\",\n fontSize: \"md\"\n }\n })\n};\nconst tableTheme = defineMultiStyleConfig({\n baseStyle,\n variants,\n sizes,\n defaultProps: {\n variant: \"simple\",\n size: \"md\",\n colorScheme: \"gray\"\n }\n});\n\nexport { tableTheme };\n","import { tabsAnatomy } from '@chakra-ui/anatomy';\nimport { cssVar, createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/styled-system';\nimport { getColor } from '@chakra-ui/theme-tools';\n\nconst $fg = cssVar(\"tabs-color\");\nconst $bg = cssVar(\"tabs-bg\");\nconst $border = cssVar(\"tabs-border-color\");\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(tabsAnatomy.keys);\nconst baseStyleRoot = defineStyle((props) => {\n const { orientation } = props;\n return {\n display: orientation === \"vertical\" ? \"flex\" : \"block\"\n };\n});\nconst baseStyleTab = defineStyle((props) => {\n const { isFitted } = props;\n return {\n flex: isFitted ? 1 : void 0,\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n _focusVisible: {\n zIndex: 1,\n boxShadow: \"outline\"\n },\n _disabled: {\n cursor: \"not-allowed\",\n opacity: 0.4\n }\n };\n});\nconst baseStyleTablist = defineStyle((props) => {\n const { align = \"start\", orientation } = props;\n const alignments = {\n end: \"flex-end\",\n center: \"center\",\n start: \"flex-start\"\n };\n return {\n justifyContent: alignments[align],\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\"\n };\n});\nconst baseStyleTabpanel = defineStyle({\n p: 4\n});\nconst baseStyle = definePartsStyle((props) => ({\n root: baseStyleRoot(props),\n tab: baseStyleTab(props),\n tablist: baseStyleTablist(props),\n tabpanel: baseStyleTabpanel\n}));\nconst sizes = {\n sm: definePartsStyle({\n tab: {\n py: 1,\n px: 4,\n fontSize: \"sm\"\n }\n }),\n md: definePartsStyle({\n tab: {\n fontSize: \"md\",\n py: 2,\n px: 4\n }\n }),\n lg: definePartsStyle({\n tab: {\n fontSize: \"lg\",\n py: 3,\n px: 4\n }\n })\n};\nconst variantLine = definePartsStyle((props) => {\n const { colorScheme: c, orientation } = props;\n const isVertical = orientation === \"vertical\";\n const borderProp = isVertical ? \"borderStart\" : \"borderBottom\";\n const marginProp = isVertical ? \"marginStart\" : \"marginBottom\";\n return {\n tablist: {\n [borderProp]: \"2px solid\",\n borderColor: \"inherit\"\n },\n tab: {\n [borderProp]: \"2px solid\",\n borderColor: \"transparent\",\n [marginProp]: \"-2px\",\n _selected: {\n [$fg.variable]: `colors.${c}.600`,\n _dark: {\n [$fg.variable]: `colors.${c}.300`\n },\n borderColor: \"currentColor\"\n },\n _active: {\n [$bg.variable]: \"colors.gray.200\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.300\"\n }\n },\n _disabled: {\n _active: { bg: \"none\" }\n },\n color: $fg.reference,\n bg: $bg.reference\n }\n };\n});\nconst variantEnclosed = definePartsStyle((props) => {\n const { colorScheme: c } = props;\n return {\n tab: {\n borderTopRadius: \"md\",\n border: \"1px solid\",\n borderColor: \"transparent\",\n mb: \"-1px\",\n [$border.variable]: \"transparent\",\n _selected: {\n [$fg.variable]: `colors.${c}.600`,\n [$border.variable]: `colors.white`,\n _dark: {\n [$fg.variable]: `colors.${c}.300`,\n [$border.variable]: `colors.gray.800`\n },\n borderColor: \"inherit\",\n borderBottomColor: $border.reference\n },\n color: $fg.reference\n },\n tablist: {\n mb: \"-1px\",\n borderBottom: \"1px solid\",\n borderColor: \"inherit\"\n }\n };\n});\nconst variantEnclosedColored = definePartsStyle((props) => {\n const { colorScheme: c } = props;\n return {\n tab: {\n border: \"1px solid\",\n borderColor: \"inherit\",\n [$bg.variable]: \"colors.gray.50\",\n _dark: {\n [$bg.variable]: \"colors.whiteAlpha.50\"\n },\n mb: \"-1px\",\n _notLast: {\n marginEnd: \"-1px\"\n },\n _selected: {\n [$bg.variable]: \"colors.white\",\n [$fg.variable]: `colors.${c}.600`,\n _dark: {\n [$bg.variable]: \"colors.gray.800\",\n [$fg.variable]: `colors.${c}.300`\n },\n borderColor: \"inherit\",\n borderTopColor: \"currentColor\",\n borderBottomColor: \"transparent\"\n },\n color: $fg.reference,\n bg: $bg.reference\n },\n tablist: {\n mb: \"-1px\",\n borderBottom: \"1px solid\",\n borderColor: \"inherit\"\n }\n };\n});\nconst variantSoftRounded = definePartsStyle((props) => {\n const { colorScheme: c, theme } = props;\n return {\n tab: {\n borderRadius: \"full\",\n fontWeight: \"semibold\",\n color: \"gray.600\",\n _selected: {\n color: getColor(theme, `${c}.700`),\n bg: getColor(theme, `${c}.100`)\n }\n }\n };\n});\nconst variantSolidRounded = definePartsStyle((props) => {\n const { colorScheme: c } = props;\n return {\n tab: {\n borderRadius: \"full\",\n fontWeight: \"semibold\",\n [$fg.variable]: \"colors.gray.600\",\n _dark: {\n [$fg.variable]: \"inherit\"\n },\n _selected: {\n [$fg.variable]: \"colors.white\",\n [$bg.variable]: `colors.${c}.600`,\n _dark: {\n [$fg.variable]: \"colors.gray.800\",\n [$bg.variable]: `colors.${c}.300`\n }\n },\n color: $fg.reference,\n bg: $bg.reference\n }\n };\n});\nconst variantUnstyled = definePartsStyle({});\nconst variants = {\n line: variantLine,\n enclosed: variantEnclosed,\n \"enclosed-colored\": variantEnclosedColored,\n \"soft-rounded\": variantSoftRounded,\n \"solid-rounded\": variantSolidRounded,\n unstyled: variantUnstyled\n};\nconst tabsTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n variants,\n defaultProps: {\n size: \"md\",\n variant: \"line\",\n colorScheme: \"blue\"\n }\n});\n\nexport { tabsTheme };\n","import { tagAnatomy } from '@chakra-ui/anatomy';\nimport { createMultiStyleConfigHelpers, cssVar, defineStyle } from '@chakra-ui/styled-system';\nimport { badgeVars as vars, badgeTheme } from './badge.mjs';\n\nconst { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(tagAnatomy.keys);\nconst $bg = cssVar(\"tag-bg\");\nconst $color = cssVar(\"tag-color\");\nconst $shadow = cssVar(\"tag-shadow\");\nconst $minH = cssVar(\"tag-min-height\");\nconst $minW = cssVar(\"tag-min-width\");\nconst $fontSize = cssVar(\"tag-font-size\");\nconst $paddingX = cssVar(\"tag-padding-inline\");\nconst baseStyleContainer = defineStyle({\n fontWeight: \"medium\",\n lineHeight: 1.2,\n outline: 0,\n [$color.variable]: vars.color.reference,\n [$bg.variable]: vars.bg.reference,\n [$shadow.variable]: vars.shadow.reference,\n color: $color.reference,\n bg: $bg.reference,\n boxShadow: $shadow.reference,\n borderRadius: \"md\",\n minH: $minH.reference,\n minW: $minW.reference,\n fontSize: $fontSize.reference,\n px: $paddingX.reference,\n _focusVisible: {\n [$shadow.variable]: \"shadows.outline\"\n }\n});\nconst baseStyleLabel = defineStyle({\n lineHeight: 1.2,\n overflow: \"visible\"\n});\nconst baseStyleCloseButton = defineStyle({\n fontSize: \"lg\",\n w: \"5\",\n h: \"5\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n borderRadius: \"full\",\n marginStart: \"1.5\",\n marginEnd: \"-1\",\n opacity: 0.5,\n _disabled: {\n opacity: 0.4\n },\n _focusVisible: {\n boxShadow: \"outline\",\n bg: \"rgba(0, 0, 0, 0.14)\"\n },\n _hover: {\n opacity: 0.8\n },\n _active: {\n opacity: 1\n }\n});\nconst baseStyle = definePartsStyle({\n container: baseStyleContainer,\n label: baseStyleLabel,\n closeButton: baseStyleCloseButton\n});\nconst sizes = {\n sm: definePartsStyle({\n container: {\n [$minH.variable]: \"sizes.5\",\n [$minW.variable]: \"sizes.5\",\n [$fontSize.variable]: \"fontSizes.xs\",\n [$paddingX.variable]: \"space.2\"\n },\n closeButton: {\n marginEnd: \"-2px\",\n marginStart: \"0.35rem\"\n }\n }),\n md: definePartsStyle({\n container: {\n [$minH.variable]: \"sizes.6\",\n [$minW.variable]: \"sizes.6\",\n [$fontSize.variable]: \"fontSizes.sm\",\n [$paddingX.variable]: \"space.2\"\n }\n }),\n lg: definePartsStyle({\n container: {\n [$minH.variable]: \"sizes.8\",\n [$minW.variable]: \"sizes.8\",\n [$fontSize.variable]: \"fontSizes.md\",\n [$paddingX.variable]: \"space.3\"\n }\n })\n};\nconst variants = {\n subtle: definePartsStyle((props) => ({\n container: badgeTheme.variants?.subtle(props)\n })),\n solid: definePartsStyle((props) => ({\n container: badgeTheme.variants?.solid(props)\n })),\n outline: definePartsStyle((props) => ({\n container: badgeTheme.variants?.outline(props)\n }))\n};\nconst tagTheme = defineMultiStyleConfig({\n variants,\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n variant: \"subtle\",\n colorScheme: \"gray\"\n }\n});\n\nexport { tagTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\nimport { inputTheme } from './input.mjs';\n\nconst baseStyle = defineStyle({\n ...inputTheme.baseStyle?.field,\n paddingY: \"2\",\n minHeight: \"20\",\n lineHeight: \"short\",\n verticalAlign: \"top\"\n});\nconst variants = {\n outline: defineStyle(\n (props) => inputTheme.variants?.outline(props).field ?? {}\n ),\n flushed: defineStyle(\n (props) => inputTheme.variants?.flushed(props).field ?? {}\n ),\n filled: defineStyle(\n (props) => inputTheme.variants?.filled(props).field ?? {}\n ),\n unstyled: inputTheme.variants?.unstyled.field ?? {}\n};\nconst sizes = {\n xs: inputTheme.sizes?.xs.field ?? {},\n sm: inputTheme.sizes?.sm.field ?? {},\n md: inputTheme.sizes?.md.field ?? {},\n lg: inputTheme.sizes?.lg.field ?? {}\n};\nconst textareaTheme = defineStyleConfig({\n baseStyle,\n sizes,\n variants,\n defaultProps: {\n size: \"md\",\n variant: \"outline\"\n }\n});\n\nexport { textareaTheme };\n","import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';\nimport { cssVar } from '@chakra-ui/theme-tools';\n\nconst $bg = cssVar(\"tooltip-bg\");\nconst $fg = cssVar(\"tooltip-fg\");\nconst $arrowBg = cssVar(\"popper-arrow-bg\");\nconst baseStyle = defineStyle({\n bg: $bg.reference,\n color: $fg.reference,\n [$bg.variable]: \"colors.gray.700\",\n [$fg.variable]: \"colors.whiteAlpha.900\",\n _dark: {\n [$bg.variable]: \"colors.gray.300\",\n [$fg.variable]: \"colors.gray.900\"\n },\n [$arrowBg.variable]: $bg.reference,\n px: \"2\",\n py: \"0.5\",\n borderRadius: \"sm\",\n fontWeight: \"medium\",\n fontSize: \"sm\",\n boxShadow: \"md\",\n maxW: \"xs\",\n zIndex: \"tooltip\"\n});\nconst tooltipTheme = defineStyleConfig({\n baseStyle\n});\n\nexport { tooltipTheme };\n","import { accordionTheme } from './accordion.mjs';\nimport { alertTheme } from './alert.mjs';\nimport { avatarTheme } from './avatar.mjs';\nimport { badgeTheme } from './badge.mjs';\nimport { breadcrumbTheme } from './breadcrumb.mjs';\nimport { buttonTheme } from './button.mjs';\nimport { cardTheme } from './card.mjs';\nimport { checkboxTheme } from './checkbox.mjs';\nimport { closeButtonTheme } from './close-button.mjs';\nimport { codeTheme } from './code.mjs';\nimport { containerTheme } from './container.mjs';\nimport { dividerTheme } from './divider.mjs';\nimport { drawerTheme } from './drawer.mjs';\nimport { editableTheme } from './editable.mjs';\nimport { formTheme } from './form-control.mjs';\nimport { formErrorTheme } from './form-error.mjs';\nimport { formLabelTheme } from './form-label.mjs';\nimport { headingTheme } from './heading.mjs';\nimport { inputTheme } from './input.mjs';\nimport { kbdTheme } from './kbd.mjs';\nimport { linkTheme } from './link.mjs';\nimport { listTheme } from './list.mjs';\nimport { menuTheme } from './menu.mjs';\nimport { modalTheme } from './modal.mjs';\nimport { numberInputTheme } from './number-input.mjs';\nimport { pinInputTheme } from './pin-input.mjs';\nimport { popoverTheme } from './popover.mjs';\nimport { progressTheme } from './progress.mjs';\nimport { radioTheme } from './radio.mjs';\nimport { selectTheme } from './select.mjs';\nimport { skeletonTheme } from './skeleton.mjs';\nimport { skipLinkTheme } from './skip-link.mjs';\nimport { sliderTheme } from './slider.mjs';\nimport { spinnerTheme } from './spinner.mjs';\nimport { statTheme } from './stat.mjs';\nimport { stepperTheme } from './stepper.mjs';\nimport { switchTheme } from './switch.mjs';\nimport { tableTheme } from './table.mjs';\nimport { tabsTheme } from './tabs.mjs';\nimport { tagTheme } from './tag.mjs';\nimport { textareaTheme } from './textarea.mjs';\nimport { tooltipTheme } from './tooltip.mjs';\n\nconst components = {\n Accordion: accordionTheme,\n Alert: alertTheme,\n Avatar: avatarTheme,\n Badge: badgeTheme,\n Breadcrumb: breadcrumbTheme,\n Button: buttonTheme,\n Checkbox: checkboxTheme,\n CloseButton: closeButtonTheme,\n Code: codeTheme,\n Container: containerTheme,\n Divider: dividerTheme,\n Drawer: drawerTheme,\n Editable: editableTheme,\n Form: formTheme,\n FormError: formErrorTheme,\n FormLabel: formLabelTheme,\n Heading: headingTheme,\n Input: inputTheme,\n Kbd: kbdTheme,\n Link: linkTheme,\n List: listTheme,\n Menu: menuTheme,\n Modal: modalTheme,\n NumberInput: numberInputTheme,\n PinInput: pinInputTheme,\n Popover: popoverTheme,\n Progress: progressTheme,\n Radio: radioTheme,\n Select: selectTheme,\n Skeleton: skeletonTheme,\n SkipLink: skipLinkTheme,\n Slider: sliderTheme,\n Spinner: spinnerTheme,\n Stat: statTheme,\n Switch: switchTheme,\n Table: tableTheme,\n Tabs: tabsTheme,\n Tag: tagTheme,\n Textarea: textareaTheme,\n Tooltip: tooltipTheme,\n Card: cardTheme,\n Stepper: stepperTheme\n};\n\nexport { accordionTheme as Accordion, alertTheme as Alert, avatarTheme as Avatar, badgeTheme as Badge, breadcrumbTheme as Breadcrumb, buttonTheme as Button, checkboxTheme as Checkbox, closeButtonTheme as CloseButton, codeTheme as Code, containerTheme as Container, dividerTheme as Divider, drawerTheme as Drawer, editableTheme as Editable, formTheme as Form, formErrorTheme as FormError, formLabelTheme as FormLabel, headingTheme as Heading, inputTheme as Input, kbdTheme as Kbd, linkTheme as Link, listTheme as List, menuTheme as Menu, modalTheme as Modal, numberInputTheme as NumberInput, pinInputTheme as PinInput, popoverTheme as Popover, progressTheme as Progress, radioTheme as Radio, selectTheme as Select, skeletonTheme as Skeleton, skipLinkTheme as SkipLink, sliderTheme as Slider, spinnerTheme as Spinner, statTheme as Stat, stepperTheme as Stepper, switchTheme as Switch, tableTheme as Table, tabsTheme as Tabs, tagTheme as Tag, textareaTheme as Textarea, tooltipTheme as Tooltip, components };\n","const transitionProperty = {\n common: \"background-color, border-color, color, fill, stroke, opacity, box-shadow, transform\",\n colors: \"background-color, border-color, color, fill, stroke\",\n dimensions: \"width, height\",\n position: \"left, right, top, bottom\",\n background: \"background-color, background-image, background-position\"\n};\nconst transitionTimingFunction = {\n \"ease-in\": \"cubic-bezier(0.4, 0, 1, 1)\",\n \"ease-out\": \"cubic-bezier(0, 0, 0.2, 1)\",\n \"ease-in-out\": \"cubic-bezier(0.4, 0, 0.2, 1)\"\n};\nconst transitionDuration = {\n \"ultra-fast\": \"50ms\",\n faster: \"100ms\",\n fast: \"150ms\",\n normal: \"200ms\",\n slow: \"300ms\",\n slower: \"400ms\",\n \"ultra-slow\": \"500ms\"\n};\nconst transition = {\n property: transitionProperty,\n easing: transitionTimingFunction,\n duration: transitionDuration\n};\n\nexport { transition as default };\n","import borders from './borders.mjs';\nimport breakpoints from './breakpoints.mjs';\nimport colors from './colors.mjs';\nimport radii from './radius.mjs';\nimport shadows from './shadows.mjs';\nimport sizes from './sizes.mjs';\nimport { spacing } from './spacing.mjs';\nimport transition from './transition.mjs';\nimport typography from './typography.mjs';\nimport zIndices from './z-index.mjs';\nimport blur from './blur.mjs';\n\nconst foundations = {\n breakpoints,\n zIndices,\n radii,\n blur,\n colors,\n ...typography,\n sizes,\n shadows,\n space: spacing,\n borders,\n transition\n};\n\nexport { foundations };\n","const breakpoints = {\n base: \"0em\",\n sm: \"30em\",\n md: \"48em\",\n lg: \"62em\",\n xl: \"80em\",\n \"2xl\": \"96em\"\n};\n\nexport { breakpoints as default };\n","const zIndices = {\n hide: -1,\n auto: \"auto\",\n base: 0,\n docked: 10,\n dropdown: 1e3,\n sticky: 1100,\n banner: 1200,\n overlay: 1300,\n modal: 1400,\n popover: 1500,\n skipLink: 1600,\n toast: 1700,\n tooltip: 1800\n};\n\nexport { zIndices as default };\n","const radii = {\n none: \"0\",\n sm: \"0.125rem\",\n base: \"0.25rem\",\n md: \"0.375rem\",\n lg: \"0.5rem\",\n xl: \"0.75rem\",\n \"2xl\": \"1rem\",\n \"3xl\": \"1.5rem\",\n full: \"9999px\"\n};\n\nexport { radii as default };\n","const blur = {\n none: 0,\n sm: \"4px\",\n base: \"8px\",\n md: \"12px\",\n lg: \"16px\",\n xl: \"24px\",\n \"2xl\": \"40px\",\n \"3xl\": \"64px\"\n};\n\nexport { blur as default };\n","const colors = {\n transparent: \"transparent\",\n current: \"currentColor\",\n black: \"#000000\",\n white: \"#FFFFFF\",\n whiteAlpha: {\n 50: \"rgba(255, 255, 255, 0.04)\",\n 100: \"rgba(255, 255, 255, 0.06)\",\n 200: \"rgba(255, 255, 255, 0.08)\",\n 300: \"rgba(255, 255, 255, 0.16)\",\n 400: \"rgba(255, 255, 255, 0.24)\",\n 500: \"rgba(255, 255, 255, 0.36)\",\n 600: \"rgba(255, 255, 255, 0.48)\",\n 700: \"rgba(255, 255, 255, 0.64)\",\n 800: \"rgba(255, 255, 255, 0.80)\",\n 900: \"rgba(255, 255, 255, 0.92)\"\n },\n blackAlpha: {\n 50: \"rgba(0, 0, 0, 0.04)\",\n 100: \"rgba(0, 0, 0, 0.06)\",\n 200: \"rgba(0, 0, 0, 0.08)\",\n 300: \"rgba(0, 0, 0, 0.16)\",\n 400: \"rgba(0, 0, 0, 0.24)\",\n 500: \"rgba(0, 0, 0, 0.36)\",\n 600: \"rgba(0, 0, 0, 0.48)\",\n 700: \"rgba(0, 0, 0, 0.64)\",\n 800: \"rgba(0, 0, 0, 0.80)\",\n 900: \"rgba(0, 0, 0, 0.92)\"\n },\n gray: {\n 50: \"#F7FAFC\",\n 100: \"#EDF2F7\",\n 200: \"#E2E8F0\",\n 300: \"#CBD5E0\",\n 400: \"#A0AEC0\",\n 500: \"#718096\",\n 600: \"#4A5568\",\n 700: \"#2D3748\",\n 800: \"#1A202C\",\n 900: \"#171923\"\n },\n red: {\n 50: \"#FFF5F5\",\n 100: \"#FED7D7\",\n 200: \"#FEB2B2\",\n 300: \"#FC8181\",\n 400: \"#F56565\",\n 500: \"#E53E3E\",\n 600: \"#C53030\",\n 700: \"#9B2C2C\",\n 800: \"#822727\",\n 900: \"#63171B\"\n },\n orange: {\n 50: \"#FFFAF0\",\n 100: \"#FEEBC8\",\n 200: \"#FBD38D\",\n 300: \"#F6AD55\",\n 400: \"#ED8936\",\n 500: \"#DD6B20\",\n 600: \"#C05621\",\n 700: \"#9C4221\",\n 800: \"#7B341E\",\n 900: \"#652B19\"\n },\n yellow: {\n 50: \"#FFFFF0\",\n 100: \"#FEFCBF\",\n 200: \"#FAF089\",\n 300: \"#F6E05E\",\n 400: \"#ECC94B\",\n 500: \"#D69E2E\",\n 600: \"#B7791F\",\n 700: \"#975A16\",\n 800: \"#744210\",\n 900: \"#5F370E\"\n },\n green: {\n 50: \"#F0FFF4\",\n 100: \"#C6F6D5\",\n 200: \"#9AE6B4\",\n 300: \"#68D391\",\n 400: \"#48BB78\",\n 500: \"#38A169\",\n 600: \"#2F855A\",\n 700: \"#276749\",\n 800: \"#22543D\",\n 900: \"#1C4532\"\n },\n teal: {\n 50: \"#E6FFFA\",\n 100: \"#B2F5EA\",\n 200: \"#81E6D9\",\n 300: \"#4FD1C5\",\n 400: \"#38B2AC\",\n 500: \"#319795\",\n 600: \"#2C7A7B\",\n 700: \"#285E61\",\n 800: \"#234E52\",\n 900: \"#1D4044\"\n },\n blue: {\n 50: \"#ebf8ff\",\n 100: \"#bee3f8\",\n 200: \"#90cdf4\",\n 300: \"#63b3ed\",\n 400: \"#4299e1\",\n 500: \"#3182ce\",\n 600: \"#2b6cb0\",\n 700: \"#2c5282\",\n 800: \"#2a4365\",\n 900: \"#1A365D\"\n },\n cyan: {\n 50: \"#EDFDFD\",\n 100: \"#C4F1F9\",\n 200: \"#9DECF9\",\n 300: \"#76E4F7\",\n 400: \"#0BC5EA\",\n 500: \"#00B5D8\",\n 600: \"#00A3C4\",\n 700: \"#0987A0\",\n 800: \"#086F83\",\n 900: \"#065666\"\n },\n purple: {\n 50: \"#FAF5FF\",\n 100: \"#E9D8FD\",\n 200: \"#D6BCFA\",\n 300: \"#B794F4\",\n 400: \"#9F7AEA\",\n 500: \"#805AD5\",\n 600: \"#6B46C1\",\n 700: \"#553C9A\",\n 800: \"#44337A\",\n 900: \"#322659\"\n },\n pink: {\n 50: \"#FFF5F7\",\n 100: \"#FED7E2\",\n 200: \"#FBB6CE\",\n 300: \"#F687B3\",\n 400: \"#ED64A6\",\n 500: \"#D53F8C\",\n 600: \"#B83280\",\n 700: \"#97266D\",\n 800: \"#702459\",\n 900: \"#521B41\"\n }\n};\n\nexport { colors as default };\n","const shadows = {\n xs: \"0 0 0 1px rgba(0, 0, 0, 0.05)\",\n sm: \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\",\n base: \"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)\",\n md: \"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)\",\n lg: \"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)\",\n xl: \"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)\",\n \"2xl\": \"0 25px 50px -12px rgba(0, 0, 0, 0.25)\",\n outline: \"0 0 0 3px rgba(66, 153, 225, 0.6)\",\n inner: \"inset 0 2px 4px 0 rgba(0,0,0,0.06)\",\n none: \"none\",\n \"dark-lg\": \"rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px\"\n};\n\nexport { shadows as default };\n","const borders = {\n none: 0,\n \"1px\": \"1px solid\",\n \"2px\": \"2px solid\",\n \"4px\": \"4px solid\",\n \"8px\": \"8px solid\"\n};\n\nexport { borders as default };\n","const semanticTokens = {\n colors: {\n \"chakra-body-text\": { _light: \"gray.800\", _dark: \"whiteAlpha.900\" },\n \"chakra-body-bg\": { _light: \"white\", _dark: \"gray.800\" },\n \"chakra-border-color\": { _light: \"gray.200\", _dark: \"whiteAlpha.300\" },\n \"chakra-inverse-text\": { _light: \"white\", _dark: \"gray.800\" },\n \"chakra-subtle-bg\": { _light: \"gray.100\", _dark: \"gray.700\" },\n \"chakra-subtle-text\": { _light: \"gray.600\", _dark: \"gray.400\" },\n \"chakra-placeholder-color\": { _light: \"gray.500\", _dark: \"whiteAlpha.400\" }\n }\n};\n\nexport { semanticTokens };\n","const styles = {\n global: {\n body: {\n fontFamily: \"body\",\n color: \"chakra-body-text\",\n bg: \"chakra-body-bg\",\n transitionProperty: \"background-color\",\n transitionDuration: \"normal\",\n lineHeight: \"base\"\n },\n \"*::placeholder\": {\n color: \"chakra-placeholder-color\"\n },\n \"*, *::before, &::after\": {\n borderColor: \"chakra-border-color\"\n }\n }\n};\n\nexport { styles };\n","import { components } from './components/index.mjs';\nimport { foundations } from './foundations/index.mjs';\nimport { semanticTokens } from './semantic-tokens.mjs';\nimport { styles } from './styles.mjs';\nexport { isChakraTheme, requiredChakraThemeKeys } from './utils/is-chakra-theme.mjs';\n\nconst direction = \"ltr\";\nconst config = {\n useSystemColorMode: false,\n initialColorMode: \"light\",\n cssVarPrefix: \"chakra\"\n};\nconst theme = {\n semanticTokens,\n direction,\n ...foundations,\n components,\n styles,\n config\n};\nconst baseTheme = {\n semanticTokens,\n direction,\n components: {},\n ...foundations,\n styles,\n config\n};\n\nexport { baseTheme, theme };\n","function isHTMLElement(el) {\n return el != null && typeof el == \"object\" && \"nodeType\" in el && el.nodeType === Node.ELEMENT_NODE;\n}\nfunction isBrowser() {\n return Boolean(globalThis?.document);\n}\nfunction isInputElement(element) {\n return isHTMLElement(element) && element.localName === \"input\" && \"select\" in element;\n}\nfunction isActiveElement(element) {\n const doc = isHTMLElement(element) ? element.ownerDocument : document;\n return doc.activeElement === element;\n}\nfunction isHiddenElement(element) {\n if (element.parentElement && isHiddenElement(element.parentElement))\n return true;\n return element.hidden;\n}\nfunction isContentEditableElement(element) {\n const value = element.getAttribute(\"contenteditable\");\n return value !== \"false\" && value != null;\n}\nfunction isDisabledElement(element) {\n return Boolean(element.getAttribute(\"disabled\")) === true || Boolean(element.getAttribute(\"aria-disabled\")) === true;\n}\n\nexport { isActiveElement, isBrowser, isContentEditableElement, isDisabledElement, isHTMLElement, isHiddenElement, isInputElement };\n","var isDevelopment = false;\n\n/*\n\nBased off glamor's StyleSheet, thanks Sunil ❤️\n\nhigh performance StyleSheet for css-in-js systems\n\n- uses multiple style tags behind the scenes for millions of rules\n- uses `insertRule` for appending in production for *much* faster performance\n\n// usage\n\nimport { StyleSheet } from '@emotion/sheet'\n\nlet styleSheet = new StyleSheet({ key: '', container: document.head })\n\nstyleSheet.insert('#box { border: 1px solid red; }')\n- appends a css rule into the stylesheet\n\nstyleSheet.flush()\n- empties the stylesheet of all its contents\n\n*/\n\nfunction sheetForTag(tag) {\n if (tag.sheet) {\n return tag.sheet;\n } // this weirdness brought to you by firefox\n\n /* istanbul ignore next */\n\n\n for (var i = 0; i < document.styleSheets.length; i++) {\n if (document.styleSheets[i].ownerNode === tag) {\n return document.styleSheets[i];\n }\n } // this function should always return with a value\n // TS can't understand it though so we make it stop complaining here\n\n\n return undefined;\n}\n\nfunction createStyleElement(options) {\n var tag = document.createElement('style');\n tag.setAttribute('data-emotion', options.key);\n\n if (options.nonce !== undefined) {\n tag.setAttribute('nonce', options.nonce);\n }\n\n tag.appendChild(document.createTextNode(''));\n tag.setAttribute('data-s', '');\n return tag;\n}\n\nvar StyleSheet = /*#__PURE__*/function () {\n // Using Node instead of HTMLElement since container may be a ShadowRoot\n function StyleSheet(options) {\n var _this = this;\n\n this._insertTag = function (tag) {\n var before;\n\n if (_this.tags.length === 0) {\n if (_this.insertionPoint) {\n before = _this.insertionPoint.nextSibling;\n } else if (_this.prepend) {\n before = _this.container.firstChild;\n } else {\n before = _this.before;\n }\n } else {\n before = _this.tags[_this.tags.length - 1].nextSibling;\n }\n\n _this.container.insertBefore(tag, before);\n\n _this.tags.push(tag);\n };\n\n this.isSpeedy = options.speedy === undefined ? !isDevelopment : options.speedy;\n this.tags = [];\n this.ctr = 0;\n this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets\n\n this.key = options.key;\n this.container = options.container;\n this.prepend = options.prepend;\n this.insertionPoint = options.insertionPoint;\n this.before = null;\n }\n\n var _proto = StyleSheet.prototype;\n\n _proto.hydrate = function hydrate(nodes) {\n nodes.forEach(this._insertTag);\n };\n\n _proto.insert = function insert(rule) {\n // the max length is how many rules we have per style tag, it's 65000 in speedy mode\n // it's 1 in dev because we insert source maps that map a single rule to a location\n // and you can only have one source map per style tag\n if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {\n this._insertTag(createStyleElement(this));\n }\n\n var tag = this.tags[this.tags.length - 1];\n\n if (this.isSpeedy) {\n var sheet = sheetForTag(tag);\n\n try {\n // this is the ultrafast version, works across browsers\n // the big drawback is that the css won't be editable in devtools\n sheet.insertRule(rule, sheet.cssRules.length);\n } catch (e) {\n }\n } else {\n tag.appendChild(document.createTextNode(rule));\n }\n\n this.ctr++;\n };\n\n _proto.flush = function flush() {\n this.tags.forEach(function (tag) {\n var _tag$parentNode;\n\n return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);\n });\n this.tags = [];\n this.ctr = 0;\n };\n\n return StyleSheet;\n}();\n\nexport { StyleSheet };\n","/**\n * @param {number}\n * @return {number}\n */\nexport var abs = Math.abs\n\n/**\n * @param {number}\n * @return {string}\n */\nexport var from = String.fromCharCode\n\n/**\n * @param {object}\n * @return {object}\n */\nexport var assign = Object.assign\n\n/**\n * @param {string} value\n * @param {number} length\n * @return {number}\n */\nexport function hash (value, length) {\n\treturn charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0\n}\n\n/**\n * @param {string} value\n * @return {string}\n */\nexport function trim (value) {\n\treturn value.trim()\n}\n\n/**\n * @param {string} value\n * @param {RegExp} pattern\n * @return {string?}\n */\nexport function match (value, pattern) {\n\treturn (value = pattern.exec(value)) ? value[0] : value\n}\n\n/**\n * @param {string} value\n * @param {(string|RegExp)} pattern\n * @param {string} replacement\n * @return {string}\n */\nexport function replace (value, pattern, replacement) {\n\treturn value.replace(pattern, replacement)\n}\n\n/**\n * @param {string} value\n * @param {string} search\n * @return {number}\n */\nexport function indexof (value, search) {\n\treturn value.indexOf(search)\n}\n\n/**\n * @param {string} value\n * @param {number} index\n * @return {number}\n */\nexport function charat (value, index) {\n\treturn value.charCodeAt(index) | 0\n}\n\n/**\n * @param {string} value\n * @param {number} begin\n * @param {number} end\n * @return {string}\n */\nexport function substr (value, begin, end) {\n\treturn value.slice(begin, end)\n}\n\n/**\n * @param {string} value\n * @return {number}\n */\nexport function strlen (value) {\n\treturn value.length\n}\n\n/**\n * @param {any[]} value\n * @return {number}\n */\nexport function sizeof (value) {\n\treturn value.length\n}\n\n/**\n * @param {any} value\n * @param {any[]} array\n * @return {any}\n */\nexport function append (value, array) {\n\treturn array.push(value), value\n}\n\n/**\n * @param {string[]} array\n * @param {function} callback\n * @return {string}\n */\nexport function combine (array, callback) {\n\treturn array.map(callback).join('')\n}\n","import {from, trim, charat, strlen, substr, append, assign} from './Utility.js'\n\nexport var line = 1\nexport var column = 1\nexport var length = 0\nexport var position = 0\nexport var character = 0\nexport var characters = ''\n\n/**\n * @param {string} value\n * @param {object | null} root\n * @param {object | null} parent\n * @param {string} type\n * @param {string[] | string} props\n * @param {object[] | string} children\n * @param {number} length\n */\nexport function node (value, root, parent, type, props, children, length) {\n\treturn {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}\n}\n\n/**\n * @param {object} root\n * @param {object} props\n * @return {object}\n */\nexport function copy (root, props) {\n\treturn assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)\n}\n\n/**\n * @return {number}\n */\nexport function char () {\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function prev () {\n\tcharacter = position > 0 ? charat(characters, --position) : 0\n\n\tif (column--, character === 10)\n\t\tcolumn = 1, line--\n\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function next () {\n\tcharacter = position < length ? charat(characters, position++) : 0\n\n\tif (column++, character === 10)\n\t\tcolumn = 1, line++\n\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function peek () {\n\treturn charat(characters, position)\n}\n\n/**\n * @return {number}\n */\nexport function caret () {\n\treturn position\n}\n\n/**\n * @param {number} begin\n * @param {number} end\n * @return {string}\n */\nexport function slice (begin, end) {\n\treturn substr(characters, begin, end)\n}\n\n/**\n * @param {number} type\n * @return {number}\n */\nexport function token (type) {\n\tswitch (type) {\n\t\t// \\0 \\t \\n \\r \\s whitespace token\n\t\tcase 0: case 9: case 10: case 13: case 32:\n\t\t\treturn 5\n\t\t// ! + , / > @ ~ isolate token\n\t\tcase 33: case 43: case 44: case 47: case 62: case 64: case 126:\n\t\t// ; { } breakpoint token\n\t\tcase 59: case 123: case 125:\n\t\t\treturn 4\n\t\t// : accompanied token\n\t\tcase 58:\n\t\t\treturn 3\n\t\t// \" ' ( [ opening delimit token\n\t\tcase 34: case 39: case 40: case 91:\n\t\t\treturn 2\n\t\t// ) ] closing delimit token\n\t\tcase 41: case 93:\n\t\t\treturn 1\n\t}\n\n\treturn 0\n}\n\n/**\n * @param {string} value\n * @return {any[]}\n */\nexport function alloc (value) {\n\treturn line = column = 1, length = strlen(characters = value), position = 0, []\n}\n\n/**\n * @param {any} value\n * @return {any}\n */\nexport function dealloc (value) {\n\treturn characters = '', value\n}\n\n/**\n * @param {number} type\n * @return {string}\n */\nexport function delimit (type) {\n\treturn trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))\n}\n\n/**\n * @param {string} value\n * @return {string[]}\n */\nexport function tokenize (value) {\n\treturn dealloc(tokenizer(alloc(value)))\n}\n\n/**\n * @param {number} type\n * @return {string}\n */\nexport function whitespace (type) {\n\twhile (character = peek())\n\t\tif (character < 33)\n\t\t\tnext()\n\t\telse\n\t\t\tbreak\n\n\treturn token(type) > 2 || token(character) > 3 ? '' : ' '\n}\n\n/**\n * @param {string[]} children\n * @return {string[]}\n */\nexport function tokenizer (children) {\n\twhile (next())\n\t\tswitch (token(character)) {\n\t\t\tcase 0: append(identifier(position - 1), children)\n\t\t\t\tbreak\n\t\t\tcase 2: append(delimit(character), children)\n\t\t\t\tbreak\n\t\t\tdefault: append(from(character), children)\n\t\t}\n\n\treturn children\n}\n\n/**\n * @param {number} index\n * @param {number} count\n * @return {string}\n */\nexport function escaping (index, count) {\n\twhile (--count && next())\n\t\t// not 0-9 A-F a-f\n\t\tif (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))\n\t\t\tbreak\n\n\treturn slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))\n}\n\n/**\n * @param {number} type\n * @return {number}\n */\nexport function delimiter (type) {\n\twhile (next())\n\t\tswitch (character) {\n\t\t\t// ] ) \" '\n\t\t\tcase type:\n\t\t\t\treturn position\n\t\t\t// \" '\n\t\t\tcase 34: case 39:\n\t\t\t\tif (type !== 34 && type !== 39)\n\t\t\t\t\tdelimiter(character)\n\t\t\t\tbreak\n\t\t\t// (\n\t\t\tcase 40:\n\t\t\t\tif (type === 41)\n\t\t\t\t\tdelimiter(type)\n\t\t\t\tbreak\n\t\t\t// \\\n\t\t\tcase 92:\n\t\t\t\tnext()\n\t\t\t\tbreak\n\t\t}\n\n\treturn position\n}\n\n/**\n * @param {number} type\n * @param {number} index\n * @return {number}\n */\nexport function commenter (type, index) {\n\twhile (next())\n\t\t// //\n\t\tif (type + character === 47 + 10)\n\t\t\tbreak\n\t\t// /*\n\t\telse if (type + character === 42 + 42 && peek() === 47)\n\t\t\tbreak\n\n\treturn '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next())\n}\n\n/**\n * @param {number} index\n * @return {string}\n */\nexport function identifier (index) {\n\twhile (!token(peek()))\n\t\tnext()\n\n\treturn slice(index, position)\n}\n","export var MS = '-ms-'\nexport var MOZ = '-moz-'\nexport var WEBKIT = '-webkit-'\n\nexport var COMMENT = 'comm'\nexport var RULESET = 'rule'\nexport var DECLARATION = 'decl'\n\nexport var PAGE = '@page'\nexport var MEDIA = '@media'\nexport var IMPORT = '@import'\nexport var CHARSET = '@charset'\nexport var VIEWPORT = '@viewport'\nexport var SUPPORTS = '@supports'\nexport var DOCUMENT = '@document'\nexport var NAMESPACE = '@namespace'\nexport var KEYFRAMES = '@keyframes'\nexport var FONT_FACE = '@font-face'\nexport var COUNTER_STYLE = '@counter-style'\nexport var FONT_FEATURE_VALUES = '@font-feature-values'\nexport var LAYER = '@layer'\n","import {IMPORT, LAYER, COMMENT, RULESET, DECLARATION, KEYFRAMES} from './Enum.js'\nimport {strlen, sizeof} from './Utility.js'\n\n/**\n * @param {object[]} children\n * @param {function} callback\n * @return {string}\n */\nexport function serialize (children, callback) {\n\tvar output = ''\n\tvar length = sizeof(children)\n\n\tfor (var i = 0; i < length; i++)\n\t\toutput += callback(children[i], i, children, callback) || ''\n\n\treturn output\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n * @param {function} callback\n * @return {string}\n */\nexport function stringify (element, index, children, callback) {\n\tswitch (element.type) {\n\t\tcase LAYER: if (element.children.length) break\n\t\tcase IMPORT: case DECLARATION: return element.return = element.return || element.value\n\t\tcase COMMENT: return ''\n\t\tcase KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'\n\t\tcase RULESET: element.value = element.props.join(',')\n\t}\n\n\treturn strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''\n}\n","import {COMMENT, RULESET, DECLARATION} from './Enum.js'\nimport {abs, charat, trim, from, sizeof, strlen, substr, append, replace, indexof} from './Utility.js'\nimport {node, char, prev, next, peek, caret, alloc, dealloc, delimit, whitespace, escaping, identifier, commenter} from './Tokenizer.js'\n\n/**\n * @param {string} value\n * @return {object[]}\n */\nexport function compile (value) {\n\treturn dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value))\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {string[]} rule\n * @param {string[]} rules\n * @param {string[]} rulesets\n * @param {number[]} pseudo\n * @param {number[]} points\n * @param {string[]} declarations\n * @return {object}\n */\nexport function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {\n\tvar index = 0\n\tvar offset = 0\n\tvar length = pseudo\n\tvar atrule = 0\n\tvar property = 0\n\tvar previous = 0\n\tvar variable = 1\n\tvar scanning = 1\n\tvar ampersand = 1\n\tvar character = 0\n\tvar type = ''\n\tvar props = rules\n\tvar children = rulesets\n\tvar reference = rule\n\tvar characters = type\n\n\twhile (scanning)\n\t\tswitch (previous = character, character = next()) {\n\t\t\t// (\n\t\t\tcase 40:\n\t\t\t\tif (previous != 108 && charat(characters, length - 1) == 58) {\n\t\t\t\t\tif (indexof(characters += replace(delimit(character), '&', '&\\f'), '&\\f') != -1)\n\t\t\t\t\t\tampersand = -1\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t// \" ' [\n\t\t\tcase 34: case 39: case 91:\n\t\t\t\tcharacters += delimit(character)\n\t\t\t\tbreak\n\t\t\t// \\t \\n \\r \\s\n\t\t\tcase 9: case 10: case 13: case 32:\n\t\t\t\tcharacters += whitespace(previous)\n\t\t\t\tbreak\n\t\t\t// \\\n\t\t\tcase 92:\n\t\t\t\tcharacters += escaping(caret() - 1, 7)\n\t\t\t\tcontinue\n\t\t\t// /\n\t\t\tcase 47:\n\t\t\t\tswitch (peek()) {\n\t\t\t\t\tcase 42: case 47:\n\t\t\t\t\t\tappend(comment(commenter(next(), caret()), root, parent), declarations)\n\t\t\t\t\t\tbreak\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tcharacters += '/'\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t// {\n\t\t\tcase 123 * variable:\n\t\t\t\tpoints[index++] = strlen(characters) * ampersand\n\t\t\t// } ; \\0\n\t\t\tcase 125 * variable: case 59: case 0:\n\t\t\t\tswitch (character) {\n\t\t\t\t\t// \\0 }\n\t\t\t\t\tcase 0: case 125: scanning = 0\n\t\t\t\t\t// ;\n\t\t\t\t\tcase 59 + offset: if (ampersand == -1) characters = replace(characters, /\\f/g, '')\n\t\t\t\t\t\tif (property > 0 && (strlen(characters) - length))\n\t\t\t\t\t\t\tappend(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// @ ;\n\t\t\t\t\tcase 59: characters += ';'\n\t\t\t\t\t// { rule/at-rule\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tappend(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets)\n\n\t\t\t\t\t\tif (character === 123)\n\t\t\t\t\t\t\tif (offset === 0)\n\t\t\t\t\t\t\t\tparse(characters, root, reference, reference, props, rulesets, length, points, children)\n\t\t\t\t\t\t\telse\n\t\t\t\t\t\t\t\tswitch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {\n\t\t\t\t\t\t\t\t\t// d l m s\n\t\t\t\t\t\t\t\t\tcase 100: case 108: case 109: case 115:\n\t\t\t\t\t\t\t\t\t\tparse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children)\n\t\t\t\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\tparse(characters, reference, reference, reference, [''], children, 0, points, children)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tindex = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo\n\t\t\t\tbreak\n\t\t\t// :\n\t\t\tcase 58:\n\t\t\t\tlength = 1 + strlen(characters), property = previous\n\t\t\tdefault:\n\t\t\t\tif (variable < 1)\n\t\t\t\t\tif (character == 123)\n\t\t\t\t\t\t--variable\n\t\t\t\t\telse if (character == 125 && variable++ == 0 && prev() == 125)\n\t\t\t\t\t\tcontinue\n\n\t\t\t\tswitch (characters += from(character), character * variable) {\n\t\t\t\t\t// &\n\t\t\t\t\tcase 38:\n\t\t\t\t\t\tampersand = offset > 0 ? 1 : (characters += '\\f', -1)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// ,\n\t\t\t\t\tcase 44:\n\t\t\t\t\t\tpoints[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// @\n\t\t\t\t\tcase 64:\n\t\t\t\t\t\t// -\n\t\t\t\t\t\tif (peek() === 45)\n\t\t\t\t\t\t\tcharacters += delimit(next())\n\n\t\t\t\t\t\tatrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// -\n\t\t\t\t\tcase 45:\n\t\t\t\t\t\tif (previous === 45 && strlen(characters) == 2)\n\t\t\t\t\t\t\tvariable = 0\n\t\t\t\t}\n\t\t}\n\n\treturn rulesets\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {number} index\n * @param {number} offset\n * @param {string[]} rules\n * @param {number[]} points\n * @param {string} type\n * @param {string[]} props\n * @param {string[]} children\n * @param {number} length\n * @return {object}\n */\nexport function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {\n\tvar post = offset - 1\n\tvar rule = offset === 0 ? rules : ['']\n\tvar size = sizeof(rule)\n\n\tfor (var i = 0, j = 0, k = 0; i < index; ++i)\n\t\tfor (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)\n\t\t\tif (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\\f/g, rule[x])))\n\t\t\t\tprops[k++] = z\n\n\treturn node(value, root, parent, offset === 0 ? RULESET : type, props, children, length)\n}\n\n/**\n * @param {number} value\n * @param {object} root\n * @param {object?} parent\n * @return {object}\n */\nexport function comment (value, root, parent) {\n\treturn node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0)\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {number} length\n * @return {object}\n */\nexport function declaration (value, root, parent, length) {\n\treturn node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length)\n}\n","import { StyleSheet } from '@emotion/sheet';\nimport { dealloc, alloc, next, token, from, peek, delimit, slice, position, RULESET, combine, match, serialize, copy, replace, WEBKIT, MOZ, MS, KEYFRAMES, DECLARATION, hash, charat, strlen, indexof, stringify, rulesheet, middleware, compile } from 'stylis';\nimport '@emotion/weak-memoize';\nimport '@emotion/memoize';\n\nvar identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {\n var previous = 0;\n var character = 0;\n\n while (true) {\n previous = character;\n character = peek(); // &\\f\n\n if (previous === 38 && character === 12) {\n points[index] = 1;\n }\n\n if (token(character)) {\n break;\n }\n\n next();\n }\n\n return slice(begin, position);\n};\n\nvar toRules = function toRules(parsed, points) {\n // pretend we've started with a comma\n var index = -1;\n var character = 44;\n\n do {\n switch (token(character)) {\n case 0:\n // &\\f\n if (character === 38 && peek() === 12) {\n // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings\n // stylis inserts \\f after & to know when & where it should replace this sequence with the context selector\n // and when it should just concatenate the outer and inner selectors\n // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here\n points[index] = 1;\n }\n\n parsed[index] += identifierWithPointTracking(position - 1, points, index);\n break;\n\n case 2:\n parsed[index] += delimit(character);\n break;\n\n case 4:\n // comma\n if (character === 44) {\n // colon\n parsed[++index] = peek() === 58 ? '&\\f' : '';\n points[index] = parsed[index].length;\n break;\n }\n\n // fallthrough\n\n default:\n parsed[index] += from(character);\n }\n } while (character = next());\n\n return parsed;\n};\n\nvar getRules = function getRules(value, points) {\n return dealloc(toRules(alloc(value), points));\n}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11\n\n\nvar fixedElements = /* #__PURE__ */new WeakMap();\nvar compat = function compat(element) {\n if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo\n // negative .length indicates that this rule has been already prefixed\n element.length < 1) {\n return;\n }\n\n var value = element.value,\n parent = element.parent;\n var isImplicitRule = element.column === parent.column && element.line === parent.line;\n\n while (parent.type !== 'rule') {\n parent = parent.parent;\n if (!parent) return;\n } // short-circuit for the simplest case\n\n\n if (element.props.length === 1 && value.charCodeAt(0) !== 58\n /* colon */\n && !fixedElements.get(parent)) {\n return;\n } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)\n // then the props has already been manipulated beforehand as they that array is shared between it and its \"rule parent\"\n\n\n if (isImplicitRule) {\n return;\n }\n\n fixedElements.set(element, true);\n var points = [];\n var rules = getRules(value, points);\n var parentRules = parent.props;\n\n for (var i = 0, k = 0; i < rules.length; i++) {\n for (var j = 0; j < parentRules.length; j++, k++) {\n element.props[k] = points[i] ? rules[i].replace(/&\\f/g, parentRules[j]) : parentRules[j] + \" \" + rules[i];\n }\n }\n};\nvar removeLabel = function removeLabel(element) {\n if (element.type === 'decl') {\n var value = element.value;\n\n if ( // charcode for l\n value.charCodeAt(0) === 108 && // charcode for b\n value.charCodeAt(2) === 98) {\n // this ignores label\n element[\"return\"] = '';\n element.value = '';\n }\n }\n};\n\n/* eslint-disable no-fallthrough */\n\nfunction prefix(value, length) {\n switch (hash(value, length)) {\n // color-adjust\n case 5103:\n return WEBKIT + 'print-' + value + value;\n // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)\n\n case 5737:\n case 4201:\n case 3177:\n case 3433:\n case 1641:\n case 4457:\n case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break\n\n case 5572:\n case 6356:\n case 5844:\n case 3191:\n case 6645:\n case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,\n\n case 6391:\n case 5879:\n case 5623:\n case 6135:\n case 4599:\n case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)\n\n case 4215:\n case 6389:\n case 5109:\n case 5365:\n case 5621:\n case 3829:\n return WEBKIT + value + value;\n // appearance, user-select, transform, hyphens, text-size-adjust\n\n case 5349:\n case 4246:\n case 4810:\n case 6968:\n case 2756:\n return WEBKIT + value + MOZ + value + MS + value + value;\n // flex, flex-direction\n\n case 6828:\n case 4268:\n return WEBKIT + value + MS + value + value;\n // order\n\n case 6165:\n return WEBKIT + value + MS + 'flex-' + value + value;\n // align-items\n\n case 5187:\n return WEBKIT + value + replace(value, /(\\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;\n // align-self\n\n case 5443:\n return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value;\n // align-content\n\n case 4675:\n return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value;\n // flex-shrink\n\n case 5548:\n return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;\n // flex-basis\n\n case 5292:\n return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;\n // flex-grow\n\n case 6060:\n return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;\n // transition\n\n case 4554:\n return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;\n // cursor\n\n case 6187:\n return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;\n // background, background-image\n\n case 5495:\n case 3959:\n return replace(value, /(image-set\\([^]*)/, WEBKIT + '$1' + '$`$1');\n // justify-content\n\n case 4968:\n return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;\n // (margin|padding)-inline-(start|end)\n\n case 4095:\n case 3583:\n case 4068:\n case 2532:\n return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;\n // (min|max)?(width|height|inline-size|block-size)\n\n case 8116:\n case 7059:\n case 5753:\n case 5535:\n case 5445:\n case 5701:\n case 4933:\n case 4677:\n case 5533:\n case 5789:\n case 5021:\n case 4765:\n // stretch, max-content, min-content, fill-available\n if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {\n // (m)ax-content, (m)in-content\n case 109:\n // -\n if (charat(value, length + 4) !== 45) break;\n // (f)ill-available, (f)it-content\n\n case 102:\n return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;\n // (s)tretch\n\n case 115:\n return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value;\n }\n break;\n // position: sticky\n\n case 4949:\n // (s)ticky?\n if (charat(value, length + 1) !== 115) break;\n // display: (flex|inline-flex)\n\n case 6444:\n switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {\n // stic(k)y\n case 107:\n return replace(value, ':', ':' + WEBKIT) + value;\n // (inline-)?fl(e)x\n\n case 101:\n return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;\n }\n\n break;\n // writing-mode\n\n case 5936:\n switch (charat(value, length + 11)) {\n // vertical-l(r)\n case 114:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'tb') + value;\n // vertical-r(l)\n\n case 108:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'tb-rl') + value;\n // horizontal(-)tb\n\n case 45:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'lr') + value;\n }\n\n return WEBKIT + value + MS + value + value;\n }\n\n return value;\n}\n\nvar prefixer = function prefixer(element, index, children, callback) {\n if (element.length > -1) if (!element[\"return\"]) switch (element.type) {\n case DECLARATION:\n element[\"return\"] = prefix(element.value, element.length);\n break;\n\n case KEYFRAMES:\n return serialize([copy(element, {\n value: replace(element.value, '@', '@' + WEBKIT)\n })], callback);\n\n case RULESET:\n if (element.length) return combine(element.props, function (value) {\n switch (match(value, /(::plac\\w+|:read-\\w+)/)) {\n // :read-(only|write)\n case ':read-only':\n case ':read-write':\n return serialize([copy(element, {\n props: [replace(value, /:(read-\\w+)/, ':' + MOZ + '$1')]\n })], callback);\n // :placeholder\n\n case '::placeholder':\n return serialize([copy(element, {\n props: [replace(value, /:(plac\\w+)/, ':' + WEBKIT + 'input-$1')]\n }), copy(element, {\n props: [replace(value, /:(plac\\w+)/, ':' + MOZ + '$1')]\n }), copy(element, {\n props: [replace(value, /:(plac\\w+)/, MS + 'input-$1')]\n })], callback);\n }\n\n return '';\n });\n }\n};\n\nvar defaultStylisPlugins = [prefixer];\n\nvar createCache = function\n /*: EmotionCache */\ncreateCache(options\n/*: Options */\n) {\n var key = options.key;\n\n if (key === 'css') {\n var ssrStyles = document.querySelectorAll(\"style[data-emotion]:not([data-s])\"); // get SSRed styles out of the way of React's hydration\n // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)\n // note this very very intentionally targets all style elements regardless of the key to ensure\n // that creating a cache works inside of render of a React component\n\n Array.prototype.forEach.call(ssrStyles, function (node\n /*: HTMLStyleElement */\n ) {\n // we want to only move elements which have a space in the data-emotion attribute value\n // because that indicates that it is an Emotion 11 server-side rendered style elements\n // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector\n // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)\n // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles\n // will not result in the Emotion 10 styles being destroyed\n var dataEmotionAttribute = node.getAttribute('data-emotion');\n\n if (dataEmotionAttribute.indexOf(' ') === -1) {\n return;\n }\n\n document.head.appendChild(node);\n node.setAttribute('data-s', '');\n });\n }\n\n var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;\n\n var inserted = {};\n var container;\n /* : Node */\n\n var nodesToHydrate = [];\n\n {\n container = options.container || document.head;\n Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which\n // means that the style elements we're looking at are only Emotion 11 server-rendered style elements\n document.querySelectorAll(\"style[data-emotion^=\\\"\" + key + \" \\\"]\"), function (node\n /*: HTMLStyleElement */\n ) {\n var attrib = node.getAttribute(\"data-emotion\").split(' ');\n\n for (var i = 1; i < attrib.length; i++) {\n inserted[attrib[i]] = true;\n }\n\n nodesToHydrate.push(node);\n });\n }\n\n var _insert;\n /*: (\n selector: string,\n serialized: SerializedStyles,\n sheet: StyleSheet,\n shouldCache: boolean\n ) => string | void */\n\n\n var omnipresentPlugins = [compat, removeLabel];\n\n {\n var currentSheet;\n var finalizingPlugins = [stringify, rulesheet(function (rule) {\n currentSheet.insert(rule);\n })];\n var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));\n\n var stylis = function stylis(styles) {\n return serialize(compile(styles), serializer);\n };\n\n _insert = function\n /*: void */\n insert(selector\n /*: string */\n , serialized\n /*: SerializedStyles */\n , sheet\n /*: StyleSheet */\n , shouldCache\n /*: boolean */\n ) {\n currentSheet = sheet;\n\n stylis(selector ? selector + \"{\" + serialized.styles + \"}\" : serialized.styles);\n\n if (shouldCache) {\n cache.inserted[serialized.name] = true;\n }\n };\n }\n\n var cache\n /*: EmotionCache */\n = {\n key: key,\n sheet: new StyleSheet({\n key: key,\n container: container,\n nonce: options.nonce,\n speedy: options.speedy,\n prepend: options.prepend,\n insertionPoint: options.insertionPoint\n }),\n nonce: options.nonce,\n inserted: inserted,\n registered: {},\n insert: _insert\n };\n cache.sheet.hydrate(nodesToHydrate);\n return cache;\n};\n\nexport { createCache as default };\n","import {MS, MOZ, WEBKIT, RULESET, KEYFRAMES, DECLARATION} from './Enum.js'\nimport {match, charat, substr, strlen, sizeof, replace, combine} from './Utility.js'\nimport {copy, tokenize} from './Tokenizer.js'\nimport {serialize} from './Serializer.js'\nimport {prefix} from './Prefixer.js'\n\n/**\n * @param {function[]} collection\n * @return {function}\n */\nexport function middleware (collection) {\n\tvar length = sizeof(collection)\n\n\treturn function (element, index, children, callback) {\n\t\tvar output = ''\n\n\t\tfor (var i = 0; i < length; i++)\n\t\t\toutput += collection[i](element, index, children, callback) || ''\n\n\t\treturn output\n\t}\n}\n\n/**\n * @param {function} callback\n * @return {function}\n */\nexport function rulesheet (callback) {\n\treturn function (element) {\n\t\tif (!element.root)\n\t\t\tif (element = element.return)\n\t\t\t\tcallback(element)\n\t}\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n * @param {function} callback\n */\nexport function prefixer (element, index, children, callback) {\n\tif (element.length > -1)\n\t\tif (!element.return)\n\t\t\tswitch (element.type) {\n\t\t\t\tcase DECLARATION: element.return = prefix(element.value, element.length, children)\n\t\t\t\t\treturn\n\t\t\t\tcase KEYFRAMES:\n\t\t\t\t\treturn serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback)\n\t\t\t\tcase RULESET:\n\t\t\t\t\tif (element.length)\n\t\t\t\t\t\treturn combine(element.props, function (value) {\n\t\t\t\t\t\t\tswitch (match(value, /(::plac\\w+|:read-\\w+)/)) {\n\t\t\t\t\t\t\t\t// :read-(only|write)\n\t\t\t\t\t\t\t\tcase ':read-only': case ':read-write':\n\t\t\t\t\t\t\t\t\treturn serialize([copy(element, {props: [replace(value, /:(read-\\w+)/, ':' + MOZ + '$1')]})], callback)\n\t\t\t\t\t\t\t\t// :placeholder\n\t\t\t\t\t\t\t\tcase '::placeholder':\n\t\t\t\t\t\t\t\t\treturn serialize([\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, ':' + WEBKIT + 'input-$1')]}),\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, ':' + MOZ + '$1')]}),\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, MS + 'input-$1')]})\n\t\t\t\t\t\t\t\t\t], callback)\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn ''\n\t\t\t\t\t\t})\n\t\t\t}\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n */\nexport function namespace (element) {\n\tswitch (element.type) {\n\t\tcase RULESET:\n\t\t\telement.props = element.props.map(function (value) {\n\t\t\t\treturn combine(tokenize(value), function (value, index, children) {\n\t\t\t\t\tswitch (charat(value, 0)) {\n\t\t\t\t\t\t// \\f\n\t\t\t\t\t\tcase 12:\n\t\t\t\t\t\t\treturn substr(value, 1, strlen(value))\n\t\t\t\t\t\t// \\0 ( + > ~\n\t\t\t\t\t\tcase 0: case 40: case 43: case 62: case 126:\n\t\t\t\t\t\t\treturn value\n\t\t\t\t\t\t// :\n\t\t\t\t\t\tcase 58:\n\t\t\t\t\t\t\tif (children[++index] === 'global')\n\t\t\t\t\t\t\t\tchildren[index] = '', children[++index] = '\\f' + substr(children[index], index = 1, -1)\n\t\t\t\t\t\t// \\s\n\t\t\t\t\t\tcase 32:\n\t\t\t\t\t\t\treturn index === 1 ? '' : value\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tswitch (index) {\n\t\t\t\t\t\t\t\tcase 0: element = value\n\t\t\t\t\t\t\t\t\treturn sizeof(children) > 1 ? '' : value\n\t\t\t\t\t\t\t\tcase index = sizeof(children) - 1: case 2:\n\t\t\t\t\t\t\t\t\treturn index === 2 ? value + element + element : value + element\n\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\treturn value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t}\n}\n","function _extends() {\n return _extends = Object.assign ? Object.assign.bind() : function (n) {\n for (var e = 1; e < arguments.length; e++) {\n var t = arguments[e];\n for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);\n }\n return n;\n }, _extends.apply(null, arguments);\n}\nexport { _extends as default };","var weakMemoize = function weakMemoize(func) {\n var cache = new WeakMap();\n return function (arg) {\n if (cache.has(arg)) {\n // Use non-null assertion because we just checked that the cache `has` it\n // This allows us to remove `undefined` from the return value\n return cache.get(arg);\n }\n\n var ret = func(arg);\n cache.set(arg, ret);\n return ret;\n };\n};\n\nexport { weakMemoize as default };\n","var unitlessKeys = {\n animationIterationCount: 1,\n aspectRatio: 1,\n borderImageOutset: 1,\n borderImageSlice: 1,\n borderImageWidth: 1,\n boxFlex: 1,\n boxFlexGroup: 1,\n boxOrdinalGroup: 1,\n columnCount: 1,\n columns: 1,\n flex: 1,\n flexGrow: 1,\n flexPositive: 1,\n flexShrink: 1,\n flexNegative: 1,\n flexOrder: 1,\n gridRow: 1,\n gridRowEnd: 1,\n gridRowSpan: 1,\n gridRowStart: 1,\n gridColumn: 1,\n gridColumnEnd: 1,\n gridColumnSpan: 1,\n gridColumnStart: 1,\n msGridRow: 1,\n msGridRowSpan: 1,\n msGridColumn: 1,\n msGridColumnSpan: 1,\n fontWeight: 1,\n lineHeight: 1,\n opacity: 1,\n order: 1,\n orphans: 1,\n scale: 1,\n tabSize: 1,\n widows: 1,\n zIndex: 1,\n zoom: 1,\n WebkitLineClamp: 1,\n // SVG-related properties\n fillOpacity: 1,\n floodOpacity: 1,\n stopOpacity: 1,\n strokeDasharray: 1,\n strokeDashoffset: 1,\n strokeMiterlimit: 1,\n strokeOpacity: 1,\n strokeWidth: 1\n};\n\nexport { unitlessKeys as default };\n","function memoize(fn) {\n var cache = Object.create(null);\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport { memoize as default };\n","import hashString from '@emotion/hash';\nimport unitless from '@emotion/unitless';\nimport memoize from '@emotion/memoize';\n\nvar isDevelopment = false;\n\nvar hyphenateRegex = /[A-Z]|^ms/g;\nvar animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;\n\nvar isCustomProperty = function isCustomProperty(property) {\n return property.charCodeAt(1) === 45;\n};\n\nvar isProcessableValue = function isProcessableValue(value) {\n return value != null && typeof value !== 'boolean';\n};\n\nvar processStyleName = /* #__PURE__ */memoize(function (styleName) {\n return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();\n});\n\nvar processStyleValue = function processStyleValue(key, value) {\n switch (key) {\n case 'animation':\n case 'animationName':\n {\n if (typeof value === 'string') {\n return value.replace(animationRegex, function (match, p1, p2) {\n cursor = {\n name: p1,\n styles: p2,\n next: cursor\n };\n return p1;\n });\n }\n }\n }\n\n if (unitless[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {\n return value + 'px';\n }\n\n return value;\n};\n\nvar noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';\n\nfunction handleInterpolation(mergedProps, registered, interpolation) {\n if (interpolation == null) {\n return '';\n }\n\n var componentSelector = interpolation;\n\n if (componentSelector.__emotion_styles !== undefined) {\n\n return componentSelector;\n }\n\n switch (typeof interpolation) {\n case 'boolean':\n {\n return '';\n }\n\n case 'object':\n {\n var keyframes = interpolation;\n\n if (keyframes.anim === 1) {\n cursor = {\n name: keyframes.name,\n styles: keyframes.styles,\n next: cursor\n };\n return keyframes.name;\n }\n\n var serializedStyles = interpolation;\n\n if (serializedStyles.styles !== undefined) {\n var next = serializedStyles.next;\n\n if (next !== undefined) {\n // not the most efficient thing ever but this is a pretty rare case\n // and there will be very few iterations of this generally\n while (next !== undefined) {\n cursor = {\n name: next.name,\n styles: next.styles,\n next: cursor\n };\n next = next.next;\n }\n }\n\n var styles = serializedStyles.styles + \";\";\n\n return styles;\n }\n\n return createStringFromObject(mergedProps, registered, interpolation);\n }\n\n case 'function':\n {\n if (mergedProps !== undefined) {\n var previousCursor = cursor;\n var result = interpolation(mergedProps);\n cursor = previousCursor;\n return handleInterpolation(mergedProps, registered, result);\n }\n\n break;\n }\n } // finalize string values (regular strings and functions interpolated into css calls)\n\n\n var asString = interpolation;\n\n if (registered == null) {\n return asString;\n }\n\n var cached = registered[asString];\n return cached !== undefined ? cached : asString;\n}\n\nfunction createStringFromObject(mergedProps, registered, obj) {\n var string = '';\n\n if (Array.isArray(obj)) {\n for (var i = 0; i < obj.length; i++) {\n string += handleInterpolation(mergedProps, registered, obj[i]) + \";\";\n }\n } else {\n for (var key in obj) {\n var value = obj[key];\n\n if (typeof value !== 'object') {\n var asString = value;\n\n if (registered != null && registered[asString] !== undefined) {\n string += key + \"{\" + registered[asString] + \"}\";\n } else if (isProcessableValue(asString)) {\n string += processStyleName(key) + \":\" + processStyleValue(key, asString) + \";\";\n }\n } else {\n if (key === 'NO_COMPONENT_SELECTOR' && isDevelopment) {\n throw new Error(noComponentSelectorMessage);\n }\n\n if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {\n for (var _i = 0; _i < value.length; _i++) {\n if (isProcessableValue(value[_i])) {\n string += processStyleName(key) + \":\" + processStyleValue(key, value[_i]) + \";\";\n }\n }\n } else {\n var interpolated = handleInterpolation(mergedProps, registered, value);\n\n switch (key) {\n case 'animation':\n case 'animationName':\n {\n string += processStyleName(key) + \":\" + interpolated + \";\";\n break;\n }\n\n default:\n {\n\n string += key + \"{\" + interpolated + \"}\";\n }\n }\n }\n }\n }\n }\n\n return string;\n}\n\nvar labelPattern = /label:\\s*([^\\s;{]+)\\s*(;|$)/g;\n// keyframes are stored on the SerializedStyles object as a linked list\n\n\nvar cursor;\nfunction serializeStyles(args, registered, mergedProps) {\n if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {\n return args[0];\n }\n\n var stringMode = true;\n var styles = '';\n cursor = undefined;\n var strings = args[0];\n\n if (strings == null || strings.raw === undefined) {\n stringMode = false;\n styles += handleInterpolation(mergedProps, registered, strings);\n } else {\n var asTemplateStringsArr = strings;\n\n styles += asTemplateStringsArr[0];\n } // we start at 1 since we've already handled the first arg\n\n\n for (var i = 1; i < args.length; i++) {\n styles += handleInterpolation(mergedProps, registered, args[i]);\n\n if (stringMode) {\n var templateStringsArr = strings;\n\n styles += templateStringsArr[i];\n }\n }\n\n\n labelPattern.lastIndex = 0;\n var identifierName = '';\n var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5\n\n while ((match = labelPattern.exec(styles)) !== null) {\n identifierName += '-' + match[1];\n }\n\n var name = hashString(styles) + identifierName;\n\n return {\n name: name,\n styles: styles,\n next: cursor\n };\n}\n\nexport { serializeStyles };\n","/* eslint-disable */\n// Inspired by https://github.com/garycourt/murmurhash-js\n// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86\nfunction murmur2(str) {\n // 'm' and 'r' are mixing constants generated offline.\n // They're not really 'magic', they just happen to work well.\n // const m = 0x5bd1e995;\n // const r = 24;\n // Initialize the hash\n var h = 0; // Mix 4 bytes at a time into the hash\n\n var k,\n i = 0,\n len = str.length;\n\n for (; len >= 4; ++i, len -= 4) {\n k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;\n k =\n /* Math.imul(k, m): */\n (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);\n k ^=\n /* k >>> r: */\n k >>> 24;\n h =\n /* Math.imul(k, m): */\n (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n } // Handle the last few bytes of the input array\n\n\n switch (len) {\n case 3:\n h ^= (str.charCodeAt(i + 2) & 0xff) << 16;\n\n case 2:\n h ^= (str.charCodeAt(i + 1) & 0xff) << 8;\n\n case 1:\n h ^= str.charCodeAt(i) & 0xff;\n h =\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n } // Do a few final mixes of the hash to ensure the last few\n // bytes are well-incorporated.\n\n\n h ^= h >>> 13;\n h =\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n return ((h ^ h >>> 15) >>> 0).toString(36);\n}\n\nexport { murmur2 as default };\n","import * as React from 'react';\n\nvar syncFallback = function syncFallback(create) {\n return create();\n};\n\nvar useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;\nvar useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;\nvar useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;\n\nexport { useInsertionEffectAlwaysWithSyncFallback, useInsertionEffectWithLayoutFallback };\n","import * as React from 'react';\nimport { useContext, forwardRef } from 'react';\nimport createCache from '@emotion/cache';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport weakMemoize from '@emotion/weak-memoize';\nimport hoistNonReactStatics from '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar isDevelopment = false;\n\n/* import { type EmotionCache } from '@emotion/utils' */\nvar EmotionCacheContext\n/*: React.Context */\n= /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case\n// because this module is primarily intended for the browser and node\n// but it's also required in react native and similar environments sometimes\n// and we could have a special build just for that\n// but this is much easier and the native packages\n// might use a different theme context in the future anyway\ntypeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({\n key: 'css'\n}) : null);\n\nvar CacheProvider = EmotionCacheContext.Provider;\nvar __unsafe_useEmotionCache = function useEmotionCache()\n/*: EmotionCache | null*/\n{\n return useContext(EmotionCacheContext);\n};\n\nvar withEmotionCache = function withEmotionCache\n/* > */\n(func\n/*: (props: Props, cache: EmotionCache, ref: Ref) => React.Node */\n)\n/*: React.AbstractComponent */\n{\n return /*#__PURE__*/forwardRef(function (props\n /*: Props */\n , ref\n /*: Ref */\n ) {\n // the cache will never be null in the browser\n var cache = useContext(EmotionCacheContext);\n return func(props, cache, ref);\n });\n};\n\nvar ThemeContext = /* #__PURE__ */React.createContext({});\n\nvar useTheme = function useTheme() {\n return React.useContext(ThemeContext);\n};\n\nvar getTheme = function getTheme(outerTheme\n/*: Object */\n, theme\n/*: Object | (Object => Object) */\n) {\n if (typeof theme === 'function') {\n var mergedTheme = theme(outerTheme);\n\n return mergedTheme;\n }\n\n return _extends({}, outerTheme, theme);\n};\n\nvar createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {\n return weakMemoize(function (theme) {\n return getTheme(outerTheme, theme);\n });\n});\n/*\ntype ThemeProviderProps = {\n theme: Object | (Object => Object),\n children: React.Node\n}\n*/\n\nvar ThemeProvider = function ThemeProvider(props\n/*: ThemeProviderProps */\n) {\n var theme = React.useContext(ThemeContext);\n\n if (props.theme !== theme) {\n theme = createCacheWithTheme(theme)(props.theme);\n }\n\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, props.children);\n};\nfunction withTheme\n/* */\n(Component\n/*: React.AbstractComponent */\n)\n/*: React.AbstractComponent<$Diff> */\n{\n var componentName = Component.displayName || Component.name || 'Component';\n\n var render = function render(props, ref) {\n var theme = React.useContext(ThemeContext);\n return /*#__PURE__*/React.createElement(Component, _extends({\n theme: theme,\n ref: ref\n }, props));\n };\n\n var WithTheme = /*#__PURE__*/React.forwardRef(render);\n WithTheme.displayName = \"WithTheme(\" + componentName + \")\";\n return hoistNonReactStatics(WithTheme, Component);\n}\n\nvar hasOwn = {}.hasOwnProperty;\n\nvar typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';\nvar createEmotionProps = function createEmotionProps(type\n/*: React.ElementType */\n, props\n/*: Object */\n) {\n\n var newProps\n /*: any */\n = {};\n\n for (var key in props) {\n if (hasOwn.call(props, key)) {\n newProps[key] = props[key];\n }\n }\n\n newProps[typePropName] = type; // Runtime labeling is an opt-in feature because:\n\n return newProps;\n};\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar Emotion = /* #__PURE__ */withEmotionCache(\n/* */\nfunction (props, cache, ref) {\n var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works\n // not passing the registered cache to serializeStyles because it would\n // make certain babel optimisations not possible\n\n if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {\n cssProp = cache.registered[cssProp];\n }\n\n var WrappedComponent = props[typePropName];\n var registeredStyles = [cssProp];\n var className = '';\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, registeredStyles, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));\n\n className += cache.key + \"-\" + serialized.name;\n var newProps = {};\n\n for (var key in props) {\n if (hasOwn.call(props, key) && key !== 'css' && key !== typePropName && (!isDevelopment )) {\n newProps[key] = props[key];\n }\n }\n\n newProps.className = className;\n\n if (ref) {\n newProps.ref = ref;\n }\n\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof WrappedComponent === 'string'\n }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));\n});\n\nvar Emotion$1 = Emotion;\n\nexport { CacheProvider as C, Emotion$1 as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwn as h, isDevelopment as i, useTheme as u, withEmotionCache as w };\n","'use client';\nimport { createContext, useContext } from 'react';\n\nconst ColorModeContext = createContext({});\nColorModeContext.displayName = \"ColorModeContext\";\nfunction useColorMode() {\n const context = useContext(ColorModeContext);\n if (context === void 0) {\n throw new Error(\"useColorMode must be used within a ColorModeProvider\");\n }\n return context;\n}\nfunction useColorModeValue(light, dark) {\n const { colorMode } = useColorMode();\n return colorMode === \"dark\" ? dark : light;\n}\n\nexport { ColorModeContext, useColorMode, useColorModeValue };\n","'use client';\nconst classNames = {\n light: \"chakra-ui-light\",\n dark: \"chakra-ui-dark\"\n};\nfunction getColorModeUtils(options = {}) {\n const { preventTransition = true, nonce } = options;\n const utils = {\n setDataset: (value) => {\n const cleanup = preventTransition ? utils.preventTransition() : void 0;\n document.documentElement.dataset.theme = value;\n document.documentElement.style.colorScheme = value;\n cleanup?.();\n },\n setClassName(dark) {\n document.body.classList.add(dark ? classNames.dark : classNames.light);\n document.body.classList.remove(dark ? classNames.light : classNames.dark);\n },\n query() {\n return window.matchMedia(\"(prefers-color-scheme: dark)\");\n },\n getSystemTheme(fallback) {\n const dark = utils.query().matches ?? fallback === \"dark\";\n return dark ? \"dark\" : \"light\";\n },\n addListener(fn) {\n const mql = utils.query();\n const listener = (e) => {\n fn(e.matches ? \"dark\" : \"light\");\n };\n if (typeof mql.addListener === \"function\")\n mql.addListener(listener);\n else\n mql.addEventListener(\"change\", listener);\n return () => {\n if (typeof mql.removeListener === \"function\")\n mql.removeListener(listener);\n else\n mql.removeEventListener(\"change\", listener);\n };\n },\n preventTransition() {\n const css = document.createElement(\"style\");\n css.appendChild(\n document.createTextNode(\n `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`\n )\n );\n if (nonce !== void 0) {\n css.nonce = nonce;\n }\n document.head.appendChild(css);\n return () => {\n (() => window.getComputedStyle(document.body))();\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n document.head.removeChild(css);\n });\n });\n };\n }\n };\n return utils;\n}\n\nexport { getColorModeUtils };\n","'use client';\nconst STORAGE_KEY = \"chakra-ui-color-mode\";\nfunction createLocalStorageManager(key) {\n return {\n ssr: false,\n type: \"localStorage\",\n get(init) {\n if (!globalThis?.document)\n return init;\n let value;\n try {\n value = localStorage.getItem(key) || init;\n } catch (e) {\n }\n return value || init;\n },\n set(value) {\n try {\n localStorage.setItem(key, value);\n } catch (e) {\n }\n }\n };\n}\nconst localStorageManager = createLocalStorageManager(STORAGE_KEY);\nfunction parseCookie(cookie, key) {\n const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`));\n return match?.[2];\n}\nfunction createCookieStorageManager(key, cookie) {\n return {\n ssr: !!cookie,\n type: \"cookie\",\n get(init) {\n if (cookie)\n return parseCookie(cookie, key);\n if (!globalThis?.document)\n return init;\n return parseCookie(document.cookie, key) || init;\n },\n set(value) {\n document.cookie = `${key}=${value}; max-age=31536000; path=/`;\n }\n };\n}\nconst cookieStorageManager = createCookieStorageManager(STORAGE_KEY);\nconst cookieStorageManagerSSR = (cookie) => createCookieStorageManager(STORAGE_KEY, cookie);\n\nexport { STORAGE_KEY, cookieStorageManager, cookieStorageManagerSSR, createCookieStorageManager, createLocalStorageManager, localStorageManager };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { isBrowser } from '@chakra-ui/utils';\nimport { withEmotionCache } from '@emotion/react';\nimport { useLayoutEffect, useEffect, useState, useMemo, useCallback } from 'react';\nimport { ColorModeContext } from './color-mode-context.mjs';\nimport { getColorModeUtils } from './color-mode.utils.mjs';\nimport { localStorageManager } from './storage-manager.mjs';\n\nconst noop = () => {\n};\nconst useSafeLayoutEffect = isBrowser() ? useLayoutEffect : useEffect;\nfunction getTheme(manager, fallback) {\n return manager.type === \"cookie\" && manager.ssr ? manager.get(fallback) : fallback;\n}\nconst ColorModeProvider = withEmotionCache(function ColorModeProvider2(props, cache) {\n const {\n value,\n children,\n options: {\n useSystemColorMode,\n initialColorMode,\n disableTransitionOnChange\n } = {},\n colorModeManager = localStorageManager\n } = props;\n const defaultColorMode = initialColorMode === \"dark\" ? \"dark\" : \"light\";\n const [colorMode, rawSetColorMode] = useState(\n () => getTheme(colorModeManager, defaultColorMode)\n );\n const [resolvedColorMode, setResolvedColorMode] = useState(\n () => getTheme(colorModeManager)\n );\n const { getSystemTheme, setClassName, setDataset, addListener } = useMemo(\n () => getColorModeUtils({\n preventTransition: disableTransitionOnChange,\n nonce: cache?.nonce\n }),\n [disableTransitionOnChange, cache?.nonce]\n );\n const resolvedValue = initialColorMode === \"system\" && !colorMode ? resolvedColorMode : colorMode;\n const setColorMode = useCallback(\n (value2) => {\n const resolved = value2 === \"system\" ? getSystemTheme() : value2;\n rawSetColorMode(resolved);\n setClassName(resolved === \"dark\");\n setDataset(resolved);\n colorModeManager.set(resolved);\n },\n [colorModeManager, getSystemTheme, setClassName, setDataset]\n );\n useSafeLayoutEffect(() => {\n if (initialColorMode === \"system\") {\n setResolvedColorMode(getSystemTheme());\n }\n }, []);\n useEffect(() => {\n const managerValue = colorModeManager.get();\n if (managerValue) {\n setColorMode(managerValue);\n return;\n }\n if (initialColorMode === \"system\") {\n setColorMode(\"system\");\n return;\n }\n setColorMode(defaultColorMode);\n }, [colorModeManager, defaultColorMode, initialColorMode, setColorMode]);\n const toggleColorMode = useCallback(() => {\n setColorMode(resolvedValue === \"dark\" ? \"light\" : \"dark\");\n }, [resolvedValue, setColorMode]);\n useEffect(() => {\n if (!useSystemColorMode)\n return;\n return addListener(setColorMode);\n }, [useSystemColorMode, addListener, setColorMode]);\n const context = useMemo(\n () => ({\n colorMode: value ?? resolvedValue,\n toggleColorMode: value ? noop : toggleColorMode,\n setColorMode: value ? noop : setColorMode,\n forced: value !== void 0\n }),\n [resolvedValue, toggleColorMode, setColorMode, value]\n );\n return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: context, children });\n});\nColorModeProvider.displayName = \"ColorModeProvider\";\nfunction DarkMode(props) {\n const context = useMemo(\n () => ({\n colorMode: \"dark\",\n toggleColorMode: noop,\n setColorMode: noop,\n forced: true\n }),\n []\n );\n return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: context, ...props });\n}\nDarkMode.displayName = \"DarkMode\";\nfunction LightMode(props) {\n const context = useMemo(\n () => ({\n colorMode: \"light\",\n toggleColorMode: noop,\n setColorMode: noop,\n forced: true\n }),\n []\n );\n return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: context, ...props });\n}\nLightMode.displayName = \"LightMode\";\n\nexport { ColorModeProvider, DarkMode, LightMode };\n","var isBrowser = true;\n\nfunction getRegisteredStyles(registered, registeredStyles, classNames) {\n var rawClassName = '';\n classNames.split(' ').forEach(function (className) {\n if (registered[className] !== undefined) {\n registeredStyles.push(registered[className] + \";\");\n } else if (className) {\n rawClassName += className + \" \";\n }\n });\n return rawClassName;\n}\nvar registerStyles = function registerStyles(cache, serialized, isStringTag) {\n var className = cache.key + \"-\" + serialized.name;\n\n if ( // we only need to add the styles to the registered cache if the\n // class name could be used further down\n // the tree but if it's a string tag, we know it won't\n // so we don't have to add it to registered cache.\n // this improves memory usage since we can avoid storing the whole style string\n (isStringTag === false || // we need to always store it if we're in compat mode and\n // in node since emotion-server relies on whether a style is in\n // the registered cache to know whether a style is global or not\n // also, note that this check will be dead code eliminated in the browser\n isBrowser === false ) && cache.registered[className] === undefined) {\n cache.registered[className] = serialized.styles;\n }\n};\nvar insertStyles = function insertStyles(cache, serialized, isStringTag) {\n registerStyles(cache, serialized, isStringTag);\n var className = cache.key + \"-\" + serialized.name;\n\n if (cache.inserted[serialized.name] === undefined) {\n var current = serialized;\n\n do {\n cache.insert(serialized === current ? \".\" + className : '', current, cache.sheet, true);\n\n current = current.next;\n } while (current !== undefined);\n }\n};\n\nexport { getRegisteredStyles, insertStyles, registerStyles };\n","import { h as hasOwn, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isDevelopment } from './emotion-element-5486c51c.browser.esm.js';\nexport { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-5486c51c.browser.esm.js';\nimport * as React from 'react';\nimport { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils';\nimport { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\nimport { serializeStyles } from '@emotion/serialize';\nimport '@emotion/cache';\nimport '@babel/runtime/helpers/extends';\nimport '@emotion/weak-memoize';\nimport '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport 'hoist-non-react-statics';\n\nvar jsx\n/*: typeof React.createElement */\n= function jsx\n/*: typeof React.createElement */\n(type\n/*: React.ElementType */\n, props\n/*: Object */\n) {\n var args = arguments;\n\n if (props == null || !hasOwn.call(props, 'css')) {\n return React.createElement.apply(undefined, args);\n }\n\n var argsLength = args.length;\n var createElementArgArray = new Array(argsLength);\n createElementArgArray[0] = Emotion;\n createElementArgArray[1] = createEmotionProps(type, props);\n\n for (var i = 2; i < argsLength; i++) {\n createElementArgArray[i] = args[i];\n }\n\n return React.createElement.apply(null, createElementArgArray);\n};\n\n// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild\n// initial client-side render from SSR, use place of hydrating tag\n\nvar Global\n/*: React.AbstractComponent<\nGlobalProps\n> */\n= /* #__PURE__ */withEmotionCache(function (props\n/*: GlobalProps */\n, cache) {\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));\n // but it is based on a constant that will never change at runtime\n // it's effectively like having two implementations and switching them out\n // so it's not actually breaking anything\n\n\n var sheetRef = React.useRef();\n useInsertionEffectWithLayoutFallback(function () {\n var key = cache.key + \"-global\"; // use case of https://github.com/emotion-js/emotion/issues/2675\n\n var sheet = new cache.sheet.constructor({\n key: key,\n nonce: cache.sheet.nonce,\n container: cache.sheet.container,\n speedy: cache.sheet.isSpeedy\n });\n var rehydrating = false;\n var node\n /*: HTMLStyleElement | null*/\n = document.querySelector(\"style[data-emotion=\\\"\" + key + \" \" + serialized.name + \"\\\"]\");\n\n if (cache.sheet.tags.length) {\n sheet.before = cache.sheet.tags[0];\n }\n\n if (node !== null) {\n rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other s\n\n node.setAttribute('data-emotion', key);\n sheet.hydrate([node]);\n }\n\n sheetRef.current = [sheet, rehydrating];\n return function () {\n sheet.flush();\n };\n }, [cache]);\n useInsertionEffectWithLayoutFallback(function () {\n var sheetRefCurrent = sheetRef.current;\n var sheet = sheetRefCurrent[0],\n rehydrating = sheetRefCurrent[1];\n\n if (rehydrating) {\n sheetRefCurrent[1] = false;\n return;\n }\n\n if (serialized.next !== undefined) {\n // insert keyframes\n insertStyles(cache, serialized.next, true);\n }\n\n if (sheet.tags.length) {\n // if this doesn't exist then it will be null so the style element will be appended\n var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;\n sheet.before = element;\n sheet.flush();\n }\n\n cache.insert(\"\", serialized, sheet, false);\n }, [cache, serialized.name]);\n return null;\n});\n\n/* import type { Interpolation, SerializedStyles } from '@emotion/utils' */\n\nfunction css()\n/*: SerializedStyles */\n{\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return serializeStyles(args);\n}\n\n/*\ntype Keyframes = {|\n name: string,\n styles: string,\n anim: 1,\n toString: () => string\n|} & string\n*/\n\nvar keyframes = function\n /*: Keyframes */\nkeyframes() {\n var insertable = css.apply(void 0, arguments);\n var name = \"animation-\" + insertable.name;\n return {\n name: name,\n styles: \"@keyframes \" + name + \"{\" + insertable.styles + \"}\",\n anim: 1,\n toString: function toString() {\n return \"_EMO_\" + this.name + \"_\" + this.styles + \"_EMO_\";\n }\n };\n};\n\n/*\ntype ClassNameArg =\n | string\n | boolean\n | { [key: string]: boolean }\n | Array\n | null\n | void\n*/\n\nvar classnames = function\n /*: string */\nclassnames(args\n/*: Array */\n) {\n var len = args.length;\n var i = 0;\n var cls = '';\n\n for (; i < len; i++) {\n var arg = args[i];\n if (arg == null) continue;\n var toAdd = void 0;\n\n switch (typeof arg) {\n case 'boolean':\n break;\n\n case 'object':\n {\n if (Array.isArray(arg)) {\n toAdd = classnames(arg);\n } else {\n\n toAdd = '';\n\n for (var k in arg) {\n if (arg[k] && k) {\n toAdd && (toAdd += ' ');\n toAdd += k;\n }\n }\n }\n\n break;\n }\n\n default:\n {\n toAdd = arg;\n }\n }\n\n if (toAdd) {\n cls && (cls += ' ');\n cls += toAdd;\n }\n }\n\n return cls;\n};\n\nfunction merge(registered\n/*: Object */\n, css\n/*: (...args: Array) => string */\n, className\n/*: string */\n) {\n var registeredStyles = [];\n var rawClassName = getRegisteredStyles(registered, registeredStyles, className);\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n}\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serializedArr = _ref.serializedArr;\n useInsertionEffectAlwaysWithSyncFallback(function () {\n\n for (var i = 0; i < serializedArr.length; i++) {\n insertStyles(cache, serializedArr[i], false);\n }\n });\n\n return null;\n};\n/*\ntype Props = {\n children: ({\n css: (...args: any) => string,\n cx: (...args: Array) => string,\n theme: Object\n }) => React.Node\n} */\n\n\nvar ClassNames\n/*: React.AbstractComponent*/\n= /* #__PURE__ */withEmotionCache(function (props, cache) {\n var hasRendered = false;\n var serializedArr = [];\n\n var css = function css() {\n if (hasRendered && isDevelopment) {\n throw new Error('css can only be used during render');\n }\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var serialized = serializeStyles(args, cache.registered);\n serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`\n\n registerStyles(cache, serialized, false);\n return cache.key + \"-\" + serialized.name;\n };\n\n var cx = function cx() {\n if (hasRendered && isDevelopment) {\n throw new Error('cx can only be used during render');\n }\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return merge(cache.registered, css, classnames(args));\n };\n\n var content = {\n css: css,\n cx: cx,\n theme: React.useContext(ThemeContext)\n };\n var ele = props.children(content);\n hasRendered = true;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serializedArr: serializedArr\n }), ele);\n});\n\nexport { ClassNames, Global, jsx as createElement, css, jsx, keyframes };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { Global } from '@emotion/react';\n\nconst css = String.raw;\nconst vhPolyfill = css`\n :root,\n :host {\n --chakra-vh: 100vh;\n }\n\n @supports (height: -webkit-fill-available) {\n :root,\n :host {\n --chakra-vh: -webkit-fill-available;\n }\n }\n\n @supports (height: -moz-fill-available) {\n :root,\n :host {\n --chakra-vh: -moz-fill-available;\n }\n }\n\n @supports (height: 100dvh) {\n :root,\n :host {\n --chakra-vh: 100dvh;\n }\n }\n`;\nconst CSSPolyfill = () => /* @__PURE__ */ jsx(Global, { styles: vhPolyfill });\nconst CSSReset = ({ scope = \"\" }) => /* @__PURE__ */ jsx(\n Global,\n {\n styles: css`\n html {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n font-family: system-ui, sans-serif;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n -moz-osx-font-smoothing: grayscale;\n touch-action: manipulation;\n }\n\n body {\n position: relative;\n min-height: 100%;\n margin: 0;\n font-feature-settings: \"kern\";\n }\n\n ${scope} :where(*, *::before, *::after) {\n border-width: 0;\n border-style: solid;\n box-sizing: border-box;\n word-wrap: break-word;\n }\n\n main {\n display: block;\n }\n\n ${scope} hr {\n border-top-width: 1px;\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n }\n\n ${scope} :where(pre, code, kbd,samp) {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-size: 1em;\n }\n\n ${scope} a {\n background-color: transparent;\n color: inherit;\n text-decoration: inherit;\n }\n\n ${scope} abbr[title] {\n border-bottom: none;\n text-decoration: underline;\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n ${scope} :where(b, strong) {\n font-weight: bold;\n }\n\n ${scope} small {\n font-size: 80%;\n }\n\n ${scope} :where(sub,sup) {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n\n ${scope} sub {\n bottom: -0.25em;\n }\n\n ${scope} sup {\n top: -0.5em;\n }\n\n ${scope} img {\n border-style: none;\n }\n\n ${scope} :where(button, input, optgroup, select, textarea) {\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n margin: 0;\n }\n\n ${scope} :where(button, input) {\n overflow: visible;\n }\n\n ${scope} :where(button, select) {\n text-transform: none;\n }\n\n ${scope} :where(\n button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner\n ) {\n border-style: none;\n padding: 0;\n }\n\n ${scope} fieldset {\n padding: 0.35em 0.75em 0.625em;\n }\n\n ${scope} legend {\n box-sizing: border-box;\n color: inherit;\n display: table;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n }\n\n ${scope} progress {\n vertical-align: baseline;\n }\n\n ${scope} textarea {\n overflow: auto;\n }\n\n ${scope} :where([type=\"checkbox\"], [type=\"radio\"]) {\n box-sizing: border-box;\n padding: 0;\n }\n\n ${scope} input[type=\"number\"]::-webkit-inner-spin-button,\n ${scope} input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none !important;\n }\n\n ${scope} input[type=\"number\"] {\n -moz-appearance: textfield;\n }\n\n ${scope} input[type=\"search\"] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n }\n\n ${scope} input[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none !important;\n }\n\n ${scope} ::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n }\n\n ${scope} details {\n display: block;\n }\n\n ${scope} summary {\n display: list-item;\n }\n\n template {\n display: none;\n }\n\n [hidden] {\n display: none !important;\n }\n\n ${scope} :where(\n blockquote,\n dl,\n dd,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n hr,\n figure,\n p,\n pre\n ) {\n margin: 0;\n }\n\n ${scope} button {\n background: transparent;\n padding: 0;\n }\n\n ${scope} fieldset {\n margin: 0;\n padding: 0;\n }\n\n ${scope} :where(ol, ul) {\n margin: 0;\n padding: 0;\n }\n\n ${scope} textarea {\n resize: vertical;\n }\n\n ${scope} :where(button, [role=\"button\"]) {\n cursor: pointer;\n }\n\n ${scope} button::-moz-focus-inner {\n border: 0 !important;\n }\n\n ${scope} table {\n border-collapse: collapse;\n }\n\n ${scope} :where(h1, h2, h3, h4, h5, h6) {\n font-size: inherit;\n font-weight: inherit;\n }\n\n ${scope} :where(button, input, optgroup, select, textarea) {\n padding: 0;\n line-height: inherit;\n color: inherit;\n }\n\n ${scope} :where(img, svg, video, canvas, audio, iframe, embed, object) {\n display: block;\n }\n\n ${scope} :where(img, video) {\n max-width: 100%;\n height: auto;\n }\n\n [data-js-focus-visible]\n :focus:not([data-focus-visible-added]):not(\n [data-focus-visible-disabled]\n ) {\n outline: none;\n box-shadow: none;\n }\n\n ${scope} select::-ms-expand {\n display: none;\n }\n\n ${vhPolyfill}\n `\n }\n);\n\nexport { CSSPolyfill, CSSReset };\n","import { isObject } from './is.mjs';\n\nfunction getLastItem(array) {\n const length = array == null ? 0 : array.length;\n return length ? array[length - 1] : void 0;\n}\nfunction analyzeCSSValue(value) {\n const num = parseFloat(value.toString());\n const unit = value.toString().replace(String(num), \"\");\n return { unitless: !unit, value: num, unit };\n}\nfunction px(value) {\n if (value == null)\n return value;\n const { unitless } = analyzeCSSValue(value);\n return unitless || typeof value === \"number\" ? `${value}px` : value;\n}\nconst sortByBreakpointValue = (a, b) => parseInt(a[1], 10) > parseInt(b[1], 10) ? 1 : -1;\nconst sortBps = (breakpoints) => Object.fromEntries(Object.entries(breakpoints).sort(sortByBreakpointValue));\nfunction normalize(breakpoints) {\n const sorted = sortBps(breakpoints);\n return Object.assign(Object.values(sorted), sorted);\n}\nfunction keys(breakpoints) {\n const value = Object.keys(sortBps(breakpoints));\n return new Set(value);\n}\nfunction subtract(value) {\n if (!value)\n return value;\n value = px(value) ?? value;\n const OFFSET = -0.02;\n return typeof value === \"number\" ? `${value + OFFSET}` : value.replace(/(\\d+\\.?\\d*)/u, (m) => `${parseFloat(m) + OFFSET}`);\n}\nfunction toMediaQueryString(min, max) {\n const query = [\"@media screen\"];\n if (min)\n query.push(\"and\", `(min-width: ${px(min)})`);\n if (max)\n query.push(\"and\", `(max-width: ${px(max)})`);\n return query.join(\" \");\n}\nfunction analyzeBreakpoints(breakpoints) {\n if (!breakpoints)\n return null;\n breakpoints.base = breakpoints.base ?? \"0px\";\n const normalized = normalize(breakpoints);\n const queries = Object.entries(breakpoints).sort(sortByBreakpointValue).map(([breakpoint, minW], index, entry) => {\n let [, maxW] = entry[index + 1] ?? [];\n maxW = parseFloat(maxW) > 0 ? subtract(maxW) : void 0;\n return {\n _minW: subtract(minW),\n breakpoint,\n minW,\n maxW,\n maxWQuery: toMediaQueryString(null, maxW),\n minWQuery: toMediaQueryString(minW),\n minMaxQuery: toMediaQueryString(minW, maxW)\n };\n });\n const _keys = keys(breakpoints);\n const _keysArr = Array.from(_keys.values());\n return {\n keys: _keys,\n normalized,\n isResponsive(test) {\n const keys2 = Object.keys(test);\n return keys2.length > 0 && keys2.every((key) => _keys.has(key));\n },\n asObject: sortBps(breakpoints),\n asArray: normalize(breakpoints),\n details: queries,\n get(key) {\n return queries.find((q) => q.breakpoint === key);\n },\n media: [\n null,\n ...normalized.map((minW) => toMediaQueryString(minW)).slice(1)\n ],\n /**\n * Converts the object responsive syntax to array syntax\n *\n * @example\n * toArrayValue({ base: 1, sm: 2, md: 3 }) // => [1, 2, 3]\n */\n toArrayValue(test) {\n if (!isObject(test)) {\n throw new Error(\"toArrayValue: value must be an object\");\n }\n const result = _keysArr.map((bp) => test[bp] ?? null);\n while (getLastItem(result) === null) {\n result.pop();\n }\n return result;\n },\n /**\n * Converts the array responsive syntax to object syntax\n *\n * @example\n * toObjectValue([1, 2, 3]) // => { base: 1, sm: 2, md: 3 }\n */\n toObjectValue(test) {\n if (!Array.isArray(test)) {\n throw new Error(\"toObjectValue: value must be an array\");\n }\n return test.reduce(\n (acc, value, index) => {\n const key = _keysArr[index];\n if (key != null && value != null)\n acc[key] = value;\n return acc;\n },\n {}\n );\n }\n };\n}\n\nexport { analyzeBreakpoints, px, toMediaQueryString };\n","import { isObject } from './is.mjs';\n\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n if (isObject(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = getKey?.(prop) ?? prop;\n const childPath = [...path, key];\n if (stop?.(value, childPath)) {\n return predicate(value, path);\n }\n result[key] = inner(child, childPath);\n }\n return result;\n }\n return predicate(value, path);\n }\n return inner(target);\n}\n\nexport { walkObject };\n","const state = {\n open: (str, post) => `${str}[data-open], ${str}[open], ${str}[data-state=open] ${post}`,\n closed: (str, post) => `${str}[data-closed], ${str}[data-state=closed] ${post}`,\n hover: (str, post) => `${str}:hover ${post}, ${str}[data-hover] ${post}`,\n focus: (str, post) => `${str}:focus ${post}, ${str}[data-focus] ${post}`,\n focusVisible: (str, post) => `${str}:focus-visible ${post}`,\n focusWithin: (str, post) => `${str}:focus-within ${post}`,\n active: (str, post) => `${str}:active ${post}, ${str}[data-active] ${post}`,\n disabled: (str, post) => `${str}:disabled ${post}, ${str}[data-disabled] ${post}`,\n invalid: (str, post) => `${str}:invalid ${post}, ${str}[data-invalid] ${post}`,\n checked: (str, post) => `${str}:checked ${post}, ${str}[data-checked] ${post}`,\n indeterminate: (str, post) => `${str}:indeterminate ${post}, ${str}[aria-checked=mixed] ${post}, ${str}[data-indeterminate] ${post}`,\n readOnly: (str, post) => `${str}:read-only ${post}, ${str}[readonly] ${post}, ${str}[data-read-only] ${post}`,\n expanded: (str, post) => `${str}:read-only ${post}, ${str}[aria-expanded=true] ${post}, ${str}[data-expanded] ${post}`,\n placeholderShown: (str, post) => `${str}:placeholder-shown ${post}`\n};\nconst toGroup = (fn) => merge((v) => fn(v, \"&\"), \"[role=group]\", \"[data-group]\", \".group\");\nconst toPeer = (fn) => merge((v) => fn(v, \"~ &\"), \"[data-peer]\", \".peer\");\nconst merge = (fn, ...selectors) => selectors.map(fn).join(\", \");\nconst pseudoSelectors = {\n /**\n * Styles for CSS selector `&:hover`\n */\n _hover: \"&:hover, &[data-hover]\",\n /**\n * Styles for CSS Selector `&:active`\n */\n _active: \"&:active, &[data-active]\",\n /**\n * Styles for CSS selector `&:focus`\n *\n */\n _focus: \"&:focus, &[data-focus]\",\n /**\n * Styles for the highlighted state.\n */\n _highlighted: \"&[data-highlighted]\",\n /**\n * Styles to apply when a child of this element has received focus\n * - CSS Selector `&:focus-within`\n */\n _focusWithin: \"&:focus-within, &[data-focus-within]\",\n /**\n * Styles to apply when this element has received focus via tabbing\n * - CSS Selector `&:focus-visible`\n */\n _focusVisible: \"&:focus-visible, &[data-focus-visible]\",\n /**\n * Styles to apply when this element is disabled. The passed styles are applied to these CSS selectors:\n * - `&[aria-disabled=true]`\n * - `&:disabled`\n * - `&[data-disabled]`\n * - `&[disabled]`\n */\n _disabled: \"&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]\",\n /**\n * Styles for CSS Selector `&:readonly`\n */\n _readOnly: \"&[aria-readonly=true], &[readonly], &[data-readonly]\",\n /**\n * Styles for CSS selector `&::before`\n *\n * NOTE:When using this, ensure the `content` is wrapped in a backtick.\n * @example\n * ```jsx\n * \n * ```\n */\n _before: \"&::before\",\n /**\n * Styles for CSS selector `&::after`\n *\n * NOTE:When using this, ensure the `content` is wrapped in a backtick.\n * @example\n * ```jsx\n * \n * ```\n */\n _after: \"&::after\",\n /**\n * Styles for CSS selector `&:empty`\n */\n _empty: \"&:empty, &[data-empty]\",\n /**\n * Styles to apply when the ARIA attribute `aria-expanded` is `true`\n * - CSS selector `&[aria-expanded=true]`\n */\n _expanded: \"&[aria-expanded=true], &[data-expanded], &[data-state=expanded]\",\n /**\n * Styles to apply when the ARIA attribute `aria-checked` is `true`\n * - CSS selector `&[aria-checked=true]`\n */\n _checked: \"&[aria-checked=true], &[data-checked], &[data-state=checked]\",\n /**\n * Styles to apply when the ARIA attribute `aria-grabbed` is `true`\n * - CSS selector `&[aria-grabbed=true]`\n */\n _grabbed: \"&[aria-grabbed=true], &[data-grabbed]\",\n /**\n * Styles for CSS Selector `&[aria-pressed=true]`\n * Typically used to style the current \"pressed\" state of toggle buttons\n */\n _pressed: \"&[aria-pressed=true], &[data-pressed]\",\n /**\n * Styles to apply when the ARIA attribute `aria-invalid` is `true`\n * - CSS selector `&[aria-invalid=true]`\n */\n _invalid: \"&[aria-invalid=true], &[data-invalid]\",\n /**\n * Styles for the valid state\n * - CSS selector `&[data-valid], &[data-state=valid]`\n */\n _valid: \"&[data-valid], &[data-state=valid]\",\n /**\n * Styles for CSS Selector `&[aria-busy=true]` or `&[data-loading=true]`.\n * Useful for styling loading states\n */\n _loading: \"&[data-loading], &[aria-busy=true]\",\n /**\n * Styles to apply when the ARIA attribute `aria-selected` is `true`\n *\n * - CSS selector `&[aria-selected=true]`\n */\n _selected: \"&[aria-selected=true], &[data-selected]\",\n /**\n * Styles for CSS Selector `[hidden=true]`\n */\n _hidden: \"&[hidden], &[data-hidden]\",\n /**\n * Styles for CSS Selector `&:-webkit-autofill`\n */\n _autofill: \"&:-webkit-autofill\",\n /**\n * Styles for CSS Selector `&:nth-child(even)`\n */\n _even: \"&:nth-of-type(even)\",\n /**\n * Styles for CSS Selector `&:nth-child(odd)`\n */\n _odd: \"&:nth-of-type(odd)\",\n /**\n * Styles for CSS Selector `&:first-of-type`\n */\n _first: \"&:first-of-type\",\n /**\n * Styles for CSS selector `&::first-letter`\n *\n * NOTE: This selector is only applied for block-level elements and not preceded by an image or table.\n * @example\n * ```jsx\n * Once upon a time\n * ```\n */\n _firstLetter: \"&::first-letter\",\n /**\n * Styles for CSS Selector `&:last-of-type`\n */\n _last: \"&:last-of-type\",\n /**\n * Styles for CSS Selector `&:not(:first-of-type)`\n */\n _notFirst: \"&:not(:first-of-type)\",\n /**\n * Styles for CSS Selector `&:not(:last-of-type)`\n */\n _notLast: \"&:not(:last-of-type)\",\n /**\n * Styles for CSS Selector `&:visited`\n */\n _visited: \"&:visited\",\n /**\n * Used to style the active link in a navigation\n * Styles for CSS Selector `&[aria-current=page]`\n */\n _activeLink: \"&[aria-current=page]\",\n /**\n * Used to style the current step within a process\n * Styles for CSS Selector `&[aria-current=step]`\n */\n _activeStep: \"&[aria-current=step]\",\n /**\n * Styles to apply when the ARIA attribute `aria-checked` is `mixed`\n * - CSS selector `&[aria-checked=mixed]`\n */\n _indeterminate: \"&:indeterminate, &[aria-checked=mixed], &[data-indeterminate], &[data-state=indeterminate]\",\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is open\n */\n _groupOpen: toGroup(state.open),\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is closed\n */\n _groupClosed: toGroup(state.closed),\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is hovered\n */\n _groupHover: toGroup(state.hover),\n /**\n * Styles to apply when a sibling element with `.peer` or `data-peer` is hovered\n */\n _peerHover: toPeer(state.hover),\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is focused\n */\n _groupFocus: toGroup(state.focus),\n /**\n * Styles to apply when a sibling element with `.peer` or `data-peer` is focused\n */\n _peerFocus: toPeer(state.focus),\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has visible focus\n */\n _groupFocusVisible: toGroup(state.focusVisible),\n /**\n * Styles to apply when a sibling element with `.peer`or `data-peer` has visible focus\n */\n _peerFocusVisible: toPeer(state.focusVisible),\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is active\n */\n _groupActive: toGroup(state.active),\n /**\n * Styles to apply when a sibling element with `.peer` or `data-peer` is active\n */\n _peerActive: toPeer(state.active),\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is disabled\n */\n _groupDisabled: toGroup(state.disabled),\n /**\n * Styles to apply when a sibling element with `.peer` or `data-peer` is disabled\n */\n _peerDisabled: toPeer(state.disabled),\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is invalid\n */\n _groupInvalid: toGroup(state.invalid),\n /**\n * Styles to apply when a sibling element with `.peer` or `data-peer` is invalid\n */\n _peerInvalid: toPeer(state.invalid),\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` is checked\n */\n _groupChecked: toGroup(state.checked),\n /**\n * Styles to apply when a sibling element with `.peer` or `data-peer` is checked\n */\n _peerChecked: toPeer(state.checked),\n /**\n * Styles to apply when a parent element with `.group`, `data-group` or `role=group` has focus within\n */\n _groupFocusWithin: toGroup(state.focusWithin),\n /**\n * Styles to apply when a sibling element with `.peer` or `data-peer` has focus within\n */\n _peerFocusWithin: toPeer(state.focusWithin),\n /**\n * Styles to apply when a sibling element with `.peer` or `data-peer` has placeholder shown\n */\n _peerPlaceholderShown: toPeer(state.placeholderShown),\n /**\n * Styles for CSS Selector `&::placeholder`.\n */\n _placeholder: \"&::placeholder, &[data-placeholder]\",\n /**\n * Styles for CSS Selector `&:placeholder-shown`.\n */\n _placeholderShown: \"&:placeholder-shown, &[data-placeholder-shown]\",\n /**\n * Styles for CSS Selector `&:fullscreen`.\n */\n _fullScreen: \"&:fullscreen, &[data-fullscreen]\",\n /**\n * Styles for CSS Selector `&::selection`\n */\n _selection: \"&::selection\",\n /**\n * Styles for CSS Selector `[dir=rtl] &`\n * It is applied when a parent element or this element has `dir=\"rtl\"`\n */\n _rtl: \"[dir=rtl] &, &[dir=rtl]\",\n /**\n * Styles for CSS Selector `[dir=ltr] &`\n * It is applied when a parent element or this element has `dir=\"ltr\"`\n */\n _ltr: \"[dir=ltr] &, &[dir=ltr]\",\n /**\n * Styles for CSS Selector `@media (prefers-color-scheme: dark)`\n * It is used when the user has requested the system use a light or dark color theme.\n */\n _mediaDark: \"@media (prefers-color-scheme: dark)\",\n /**\n * Styles for CSS Selector `@media (prefers-reduced-motion: reduce)`\n * It is used when the user has requested the system to reduce the amount of animations.\n */\n _mediaReduceMotion: \"@media (prefers-reduced-motion: reduce)\",\n /**\n * Styles for when `data-theme` is applied to any parent of\n * this component or element.\n */\n _dark: \".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]\",\n /**\n * Styles for when `data-theme` is applied to any parent of\n * this component or element.\n */\n _light: \".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]\",\n /**\n * Styles for the CSS Selector `&[data-orientation=horizontal]`\n */\n _horizontal: \"&[data-orientation=horizontal]\",\n /**\n * Styles for the CSS Selector `&[data-orientation=vertical]`\n */\n _vertical: \"&[data-orientation=vertical]\",\n /**\n * Styles for the CSS Selector `&[data-open], &[open], &[data-state=open]`\n */\n _open: \"&[data-open], &[open], &[data-state=open]\",\n /**\n * Styles for the CSS Selector `&[data-closed], &[data-state=closed]`\n */\n _closed: \"&[data-closed], &[data-state=closed]\",\n /**\n * Styles for the CSS Selector `&[data-complete]`\n */\n _complete: \"&[data-complete]\",\n /**\n * Styles for the CSS Selector `&[data-incomplete]`\n */\n _incomplete: \"&[data-incomplete]\",\n /**\n * Styles for the CSS Selector `&[data-current]`\n */\n _current: \"&[data-current]\"\n};\nconst pseudoPropNames = Object.keys(\n pseudoSelectors\n);\n\nexport { pseudoPropNames, pseudoSelectors };\n","import { pick } from '@chakra-ui/utils';\n\nconst tokens = [\n \"colors\",\n \"borders\",\n \"borderWidths\",\n \"borderStyles\",\n \"fonts\",\n \"fontSizes\",\n \"fontWeights\",\n \"gradients\",\n \"letterSpacings\",\n \"lineHeights\",\n \"radii\",\n \"space\",\n \"shadows\",\n \"sizes\",\n \"zIndices\",\n \"transition\",\n \"blur\",\n \"breakpoints\"\n];\nfunction extractTokens(theme) {\n const _tokens = tokens;\n return pick(theme, _tokens);\n}\nfunction extractSemanticTokens(theme) {\n return theme.semanticTokens;\n}\nfunction omitVars(rawTheme) {\n const { __cssMap, __cssVars, __breakpoints, ...cleanTheme } = rawTheme;\n return cleanTheme;\n}\n\nexport { extractSemanticTokens, extractTokens, omitVars };\n","function pick(object, keysToPick) {\n const result = {};\n for (const key of keysToPick) {\n if (key in object) {\n result[key] = object[key];\n }\n }\n return result;\n}\n\nexport { pick };\n","import { isObject, mergeWith } from '@chakra-ui/utils';\nimport { calc } from './calc.mjs';\nimport { cssVar } from './css-var.mjs';\nimport { flattenTokens } from './flatten-tokens.mjs';\nimport { pseudoSelectors } from '../pseudos.mjs';\n\nfunction tokenToCssVar(token, prefix) {\n return cssVar(String(token).replace(/\\./g, \"-\"), void 0, prefix);\n}\nfunction createThemeVars(theme) {\n const flatTokens = flattenTokens(theme);\n const cssVarPrefix = theme.config?.cssVarPrefix;\n let cssVars = {};\n const cssMap = {};\n function lookupToken(token, maybeToken) {\n const scale = String(token).split(\".\")[0];\n const withScale = [scale, maybeToken].join(\".\");\n const resolvedTokenValue = flatTokens[withScale];\n if (!resolvedTokenValue)\n return maybeToken;\n const { reference } = tokenToCssVar(withScale, cssVarPrefix);\n return reference;\n }\n for (const [token, tokenValue] of Object.entries(flatTokens)) {\n const { isSemantic, value } = tokenValue;\n const { variable, reference } = tokenToCssVar(token, cssVarPrefix);\n if (!isSemantic) {\n if (token.startsWith(\"space\")) {\n const keys = token.split(\".\");\n const [firstKey, ...referenceKeys] = keys;\n const negativeLookupKey = `${firstKey}.-${referenceKeys.join(\".\")}`;\n const negativeValue = calc.negate(value);\n const negatedReference = calc.negate(reference);\n cssMap[negativeLookupKey] = {\n value: negativeValue,\n var: variable,\n varRef: negatedReference\n };\n }\n cssVars[variable] = value;\n cssMap[token] = {\n value,\n var: variable,\n varRef: reference\n };\n continue;\n }\n const normalizedValue = isObject(value) ? value : { default: value };\n cssVars = mergeWith(\n cssVars,\n Object.entries(normalizedValue).reduce(\n (acc, [conditionAlias, conditionValue]) => {\n if (!conditionValue)\n return acc;\n const tokenReference = lookupToken(token, `${conditionValue}`);\n if (conditionAlias === \"default\") {\n acc[variable] = tokenReference;\n return acc;\n }\n const conditionSelector = pseudoSelectors?.[conditionAlias] ?? conditionAlias;\n acc[conditionSelector] = { [variable]: tokenReference };\n return acc;\n },\n {}\n )\n );\n cssMap[token] = {\n value: reference,\n var: variable,\n varRef: reference\n };\n }\n return {\n cssVars,\n cssMap\n };\n}\n\nexport { createThemeVars };\n","import { walkObject } from '@chakra-ui/utils';\nimport { pseudoPropNames } from '../pseudos.mjs';\nimport { extractTokens, extractSemanticTokens } from './theme-tokens.mjs';\n\nfunction flattenTokens(theme) {\n const tokens = extractTokens(theme);\n const semanticTokens = extractSemanticTokens(theme);\n const isSemanticCondition = (key) => (\n // @ts-ignore\n pseudoPropNames.includes(key) || \"default\" === key\n );\n const result = {};\n walkObject(tokens, (value, path) => {\n if (value == null)\n return;\n result[path.join(\".\")] = { isSemantic: false, value };\n });\n walkObject(\n semanticTokens,\n (value, path) => {\n if (value == null)\n return;\n result[path.join(\".\")] = { isSemantic: true, value };\n },\n {\n stop: (value) => Object.keys(value).every(isSemanticCondition)\n }\n );\n return result;\n}\n\nexport { flattenTokens };\n","const isFunction = (value) => typeof value === \"function\";\nfunction runIfFn(valueOrFn, ...args) {\n return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;\n}\n\nexport { runIfFn };\n","import { isObject } from '@chakra-ui/utils';\n\nconst isImportant = (value) => /!(important)?$/.test(value);\nconst withoutImportant = (value) => typeof value === \"string\" ? value.replace(/!(important)?$/, \"\").trim() : value;\nconst tokenToCSSVar = (scale, value) => (theme) => {\n const valueStr = String(value);\n const important = isImportant(valueStr);\n const valueWithoutImportant = withoutImportant(valueStr);\n const key = scale ? `${scale}.${valueWithoutImportant}` : valueWithoutImportant;\n let transformed = isObject(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value;\n transformed = withoutImportant(transformed);\n return important ? `${transformed} !important` : transformed;\n};\nfunction createTransform(options) {\n const { scale, transform, compose } = options;\n const fn = (value, theme) => {\n const _value = tokenToCSSVar(scale, value)(theme);\n let result = transform?.(_value, theme) ?? _value;\n if (compose) {\n result = compose(result, theme);\n }\n return result;\n };\n return fn;\n}\n\nexport { createTransform, tokenToCSSVar };\n","const pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);\n\nexport { pipe };\n","import { createTransform } from './create-transform.mjs';\n\nfunction toConfig(scale, transform) {\n return (property) => {\n const result = { property, scale };\n result.transform = createTransform({\n scale,\n transform\n });\n return result;\n };\n}\nconst getRtl = ({ rtl, ltr }) => (theme) => theme.direction === \"rtl\" ? rtl : ltr;\nfunction logical(options) {\n const { property, scale, transform } = options;\n return {\n scale,\n property: getRtl(property),\n transform: scale ? createTransform({\n scale,\n compose: transform\n }) : transform\n };\n}\n\nexport { logical, toConfig };\n","const transformTemplate = [\n \"rotate(var(--chakra-rotate, 0))\",\n \"scaleX(var(--chakra-scale-x, 1))\",\n \"scaleY(var(--chakra-scale-y, 1))\",\n \"skewX(var(--chakra-skew-x, 0))\",\n \"skewY(var(--chakra-skew-y, 0))\"\n];\nfunction getTransformTemplate() {\n return [\n \"translateX(var(--chakra-translate-x, 0))\",\n \"translateY(var(--chakra-translate-y, 0))\",\n ...transformTemplate\n ].join(\" \");\n}\nfunction getTransformGpuTemplate() {\n return [\n \"translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)\",\n ...transformTemplate\n ].join(\" \");\n}\nconst filterTemplate = {\n \"--chakra-blur\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-brightness\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-contrast\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-grayscale\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-hue-rotate\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-invert\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-saturate\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-sepia\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-drop-shadow\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n filter: [\n \"var(--chakra-blur)\",\n \"var(--chakra-brightness)\",\n \"var(--chakra-contrast)\",\n \"var(--chakra-grayscale)\",\n \"var(--chakra-hue-rotate)\",\n \"var(--chakra-invert)\",\n \"var(--chakra-saturate)\",\n \"var(--chakra-sepia)\",\n \"var(--chakra-drop-shadow)\"\n ].join(\" \")\n};\nconst backdropFilterTemplate = {\n backdropFilter: [\n \"var(--chakra-backdrop-blur)\",\n \"var(--chakra-backdrop-brightness)\",\n \"var(--chakra-backdrop-contrast)\",\n \"var(--chakra-backdrop-grayscale)\",\n \"var(--chakra-backdrop-hue-rotate)\",\n \"var(--chakra-backdrop-invert)\",\n \"var(--chakra-backdrop-opacity)\",\n \"var(--chakra-backdrop-saturate)\",\n \"var(--chakra-backdrop-sepia)\"\n ].join(\" \"),\n \"--chakra-backdrop-blur\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-backdrop-brightness\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-backdrop-contrast\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-backdrop-grayscale\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-backdrop-hue-rotate\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-backdrop-invert\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-backdrop-opacity\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-backdrop-saturate\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-backdrop-sepia\": \"var(--chakra-empty,/*!*/ /*!*/)\"\n};\nfunction getRingTemplate(value) {\n return {\n \"--chakra-ring-offset-shadow\": `var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)`,\n \"--chakra-ring-shadow\": `var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)`,\n \"--chakra-ring-width\": value,\n boxShadow: [\n `var(--chakra-ring-offset-shadow)`,\n `var(--chakra-ring-shadow)`,\n `var(--chakra-shadow, 0 0 #0000)`\n ].join(\", \")\n };\n}\nconst flexDirectionTemplate = {\n \"row-reverse\": {\n space: \"--chakra-space-x-reverse\",\n divide: \"--chakra-divide-x-reverse\"\n },\n \"column-reverse\": {\n space: \"--chakra-space-y-reverse\",\n divide: \"--chakra-divide-y-reverse\"\n }\n};\n\nexport { backdropFilterTemplate, filterTemplate, flexDirectionTemplate, getRingTemplate, getTransformGpuTemplate, getTransformTemplate };\n","const directionMap = {\n \"to-t\": \"to top\",\n \"to-tr\": \"to top right\",\n \"to-r\": \"to right\",\n \"to-br\": \"to bottom right\",\n \"to-b\": \"to bottom\",\n \"to-bl\": \"to bottom left\",\n \"to-l\": \"to left\",\n \"to-tl\": \"to top left\"\n};\nconst valueSet = new Set(Object.values(directionMap));\nconst globalSet = /* @__PURE__ */ new Set([\n \"none\",\n \"-moz-initial\",\n \"inherit\",\n \"initial\",\n \"revert\",\n \"unset\"\n]);\nconst trimSpace = (str) => str.trim();\nfunction parseGradient(value, theme) {\n if (value == null || globalSet.has(value))\n return value;\n const prevent = isCSSFunction(value) || globalSet.has(value);\n if (!prevent)\n return `url('${value}')`;\n const regex = /(^[a-z-A-Z]+)\\((.*)\\)/g;\n const results = regex.exec(value);\n const type = results?.[1];\n const values = results?.[2];\n if (!type || !values)\n return value;\n const _type = type.includes(\"-gradient\") ? type : `${type}-gradient`;\n const [maybeDirection, ...stops] = values.split(\",\").map(trimSpace).filter(Boolean);\n if (stops?.length === 0)\n return value;\n const direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection;\n stops.unshift(direction);\n const _values = stops.map((stop) => {\n if (valueSet.has(stop))\n return stop;\n const firstStop = stop.indexOf(\" \");\n const [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop];\n const _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(\" \");\n const key = `colors.${_color}`;\n const color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color;\n return _stopOrFunc ? [\n color,\n ...Array.isArray(_stopOrFunc) ? _stopOrFunc : [_stopOrFunc]\n ].join(\" \") : color;\n });\n return `${_type}(${_values.join(\", \")})`;\n}\nconst isCSSFunction = (value) => {\n return typeof value === \"string\" && value.includes(\"(\") && value.includes(\")\");\n};\nconst gradientTransform = (value, theme) => parseGradient(value, theme ?? {});\n\nexport { globalSet, gradientTransform, isCSSFunction, parseGradient };\n","import { filterTemplate, backdropFilterTemplate, getRingTemplate, getTransformTemplate, getTransformGpuTemplate, flexDirectionTemplate } from './templates.mjs';\nimport { gradientTransform, isCSSFunction, globalSet } from './parse-gradient.mjs';\n\nfunction isCssVar(value) {\n return /^var\\(--.+\\)$/.test(value);\n}\nconst analyzeCSSValue = (value) => {\n const num = parseFloat(value.toString());\n const unit = value.toString().replace(String(num), \"\");\n return { unitless: !unit, value: num, unit };\n};\nconst wrap = (str) => (value) => `${str}(${value})`;\nconst transformFunctions = {\n filter(value) {\n return value !== \"auto\" ? value : filterTemplate;\n },\n backdropFilter(value) {\n return value !== \"auto\" ? value : backdropFilterTemplate;\n },\n ring(value) {\n return getRingTemplate(transformFunctions.px(value));\n },\n bgClip(value) {\n return value === \"text\" ? { color: \"transparent\", backgroundClip: \"text\" } : { backgroundClip: value };\n },\n transform(value) {\n if (value === \"auto\")\n return getTransformTemplate();\n if (value === \"auto-gpu\")\n return getTransformGpuTemplate();\n return value;\n },\n vh(value) {\n return value === \"$100vh\" ? \"var(--chakra-vh)\" : value;\n },\n px(value) {\n if (value == null)\n return value;\n const { unitless } = analyzeCSSValue(value);\n return unitless || typeof value === \"number\" ? `${value}px` : value;\n },\n fraction(value) {\n return !(typeof value === \"number\") || value > 1 ? value : `${value * 100}%`;\n },\n float(value, theme) {\n const map = { left: \"right\", right: \"left\" };\n return theme.direction === \"rtl\" ? map[value] : value;\n },\n degree(value) {\n if (isCssVar(value) || value == null)\n return value;\n const unitless = typeof value === \"string\" && !value.endsWith(\"deg\");\n return typeof value === \"number\" || unitless ? `${value}deg` : value;\n },\n gradient: gradientTransform,\n blur: wrap(\"blur\"),\n opacity: wrap(\"opacity\"),\n brightness: wrap(\"brightness\"),\n contrast: wrap(\"contrast\"),\n dropShadow: wrap(\"drop-shadow\"),\n grayscale: wrap(\"grayscale\"),\n hueRotate: (value) => wrap(\"hue-rotate\")(transformFunctions.degree(value)),\n invert: wrap(\"invert\"),\n saturate: wrap(\"saturate\"),\n sepia: wrap(\"sepia\"),\n bgImage(value) {\n if (value == null)\n return value;\n const prevent = isCSSFunction(value) || globalSet.has(value);\n return !prevent ? `url(${value})` : value;\n },\n outline(value) {\n const isNoneOrZero = String(value) === \"0\" || String(value) === \"none\";\n return value !== null && isNoneOrZero ? { outline: \"2px solid transparent\", outlineOffset: \"2px\" } : { outline: value };\n },\n flexDirection(value) {\n const { space, divide } = flexDirectionTemplate[value] ?? {};\n const result = { flexDirection: value };\n if (space)\n result[space] = 1;\n if (divide)\n result[divide] = 1;\n return result;\n }\n};\n\nexport { transformFunctions };\n","import { createTransform } from './create-transform.mjs';\nimport { pipe } from './pipe.mjs';\nimport { toConfig, logical } from './prop-config.mjs';\nimport { transformFunctions } from './transform-functions.mjs';\n\nconst t = {\n borderWidths: toConfig(\"borderWidths\"),\n borderStyles: toConfig(\"borderStyles\"),\n colors: toConfig(\"colors\"),\n borders: toConfig(\"borders\"),\n gradients: toConfig(\"gradients\", transformFunctions.gradient),\n radii: toConfig(\"radii\", transformFunctions.px),\n space: toConfig(\"space\", pipe(transformFunctions.vh, transformFunctions.px)),\n spaceT: toConfig(\"space\", pipe(transformFunctions.vh, transformFunctions.px)),\n degreeT(property) {\n return { property, transform: transformFunctions.degree };\n },\n prop(property, scale, transform) {\n return {\n property,\n scale,\n ...scale && {\n transform: createTransform({ scale, transform })\n }\n };\n },\n propT(property, transform) {\n return { property, transform };\n },\n sizes: toConfig(\"sizes\", pipe(transformFunctions.vh, transformFunctions.px)),\n sizesT: toConfig(\"sizes\", pipe(transformFunctions.vh, transformFunctions.fraction)),\n shadows: toConfig(\"shadows\"),\n logical,\n blur: toConfig(\"blur\", transformFunctions.blur)\n};\n\nexport { t, transformFunctions as transforms };\n","import { t } from '../utils/index.mjs';\nimport { transformFunctions } from '../utils/transform-functions.mjs';\n\nconst background = {\n background: t.colors(\"background\"),\n backgroundColor: t.colors(\"backgroundColor\"),\n backgroundImage: t.gradients(\"backgroundImage\"),\n backgroundSize: true,\n backgroundPosition: true,\n backgroundRepeat: true,\n backgroundAttachment: true,\n backgroundClip: { transform: transformFunctions.bgClip },\n bgSize: t.prop(\"backgroundSize\"),\n bgPosition: t.prop(\"backgroundPosition\"),\n bg: t.colors(\"background\"),\n bgColor: t.colors(\"backgroundColor\"),\n bgPos: t.prop(\"backgroundPosition\"),\n bgRepeat: t.prop(\"backgroundRepeat\"),\n bgAttachment: t.prop(\"backgroundAttachment\"),\n bgGradient: t.gradients(\"backgroundImage\"),\n bgClip: { transform: transformFunctions.bgClip }\n};\nObject.assign(background, {\n bgImage: background.backgroundImage,\n bgImg: background.backgroundImage\n});\n\nexport { background };\n","import { t } from '../utils/index.mjs';\n\nconst border = {\n border: t.borders(\"border\"),\n borderWidth: t.borderWidths(\"borderWidth\"),\n borderStyle: t.borderStyles(\"borderStyle\"),\n borderColor: t.colors(\"borderColor\"),\n borderRadius: t.radii(\"borderRadius\"),\n borderTop: t.borders(\"borderTop\"),\n borderBlockStart: t.borders(\"borderBlockStart\"),\n borderTopLeftRadius: t.radii(\"borderTopLeftRadius\"),\n borderStartStartRadius: t.logical({\n scale: \"radii\",\n property: {\n ltr: \"borderTopLeftRadius\",\n rtl: \"borderTopRightRadius\"\n }\n }),\n borderEndStartRadius: t.logical({\n scale: \"radii\",\n property: {\n ltr: \"borderBottomLeftRadius\",\n rtl: \"borderBottomRightRadius\"\n }\n }),\n borderTopRightRadius: t.radii(\"borderTopRightRadius\"),\n borderStartEndRadius: t.logical({\n scale: \"radii\",\n property: {\n ltr: \"borderTopRightRadius\",\n rtl: \"borderTopLeftRadius\"\n }\n }),\n borderEndEndRadius: t.logical({\n scale: \"radii\",\n property: {\n ltr: \"borderBottomRightRadius\",\n rtl: \"borderBottomLeftRadius\"\n }\n }),\n borderRight: t.borders(\"borderRight\"),\n borderInlineEnd: t.borders(\"borderInlineEnd\"),\n borderBottom: t.borders(\"borderBottom\"),\n borderBlockEnd: t.borders(\"borderBlockEnd\"),\n borderBottomLeftRadius: t.radii(\"borderBottomLeftRadius\"),\n borderBottomRightRadius: t.radii(\"borderBottomRightRadius\"),\n borderLeft: t.borders(\"borderLeft\"),\n borderInlineStart: {\n property: \"borderInlineStart\",\n scale: \"borders\"\n },\n borderInlineStartRadius: t.logical({\n scale: \"radii\",\n property: {\n ltr: [\"borderTopLeftRadius\", \"borderBottomLeftRadius\"],\n rtl: [\"borderTopRightRadius\", \"borderBottomRightRadius\"]\n }\n }),\n borderInlineEndRadius: t.logical({\n scale: \"radii\",\n property: {\n ltr: [\"borderTopRightRadius\", \"borderBottomRightRadius\"],\n rtl: [\"borderTopLeftRadius\", \"borderBottomLeftRadius\"]\n }\n }),\n borderX: t.borders([\"borderLeft\", \"borderRight\"]),\n borderInline: t.borders(\"borderInline\"),\n borderY: t.borders([\"borderTop\", \"borderBottom\"]),\n borderBlock: t.borders(\"borderBlock\"),\n borderTopWidth: t.borderWidths(\"borderTopWidth\"),\n borderBlockStartWidth: t.borderWidths(\"borderBlockStartWidth\"),\n borderTopColor: t.colors(\"borderTopColor\"),\n borderBlockStartColor: t.colors(\"borderBlockStartColor\"),\n borderTopStyle: t.borderStyles(\"borderTopStyle\"),\n borderBlockStartStyle: t.borderStyles(\"borderBlockStartStyle\"),\n borderBottomWidth: t.borderWidths(\"borderBottomWidth\"),\n borderBlockEndWidth: t.borderWidths(\"borderBlockEndWidth\"),\n borderBottomColor: t.colors(\"borderBottomColor\"),\n borderBlockEndColor: t.colors(\"borderBlockEndColor\"),\n borderBottomStyle: t.borderStyles(\"borderBottomStyle\"),\n borderBlockEndStyle: t.borderStyles(\"borderBlockEndStyle\"),\n borderLeftWidth: t.borderWidths(\"borderLeftWidth\"),\n borderInlineStartWidth: t.borderWidths(\"borderInlineStartWidth\"),\n borderLeftColor: t.colors(\"borderLeftColor\"),\n borderInlineStartColor: t.colors(\"borderInlineStartColor\"),\n borderLeftStyle: t.borderStyles(\"borderLeftStyle\"),\n borderInlineStartStyle: t.borderStyles(\"borderInlineStartStyle\"),\n borderRightWidth: t.borderWidths(\"borderRightWidth\"),\n borderInlineEndWidth: t.borderWidths(\"borderInlineEndWidth\"),\n borderRightColor: t.colors(\"borderRightColor\"),\n borderInlineEndColor: t.colors(\"borderInlineEndColor\"),\n borderRightStyle: t.borderStyles(\"borderRightStyle\"),\n borderInlineEndStyle: t.borderStyles(\"borderInlineEndStyle\"),\n borderTopRadius: t.radii([\"borderTopLeftRadius\", \"borderTopRightRadius\"]),\n borderBottomRadius: t.radii([\n \"borderBottomLeftRadius\",\n \"borderBottomRightRadius\"\n ]),\n borderLeftRadius: t.radii([\"borderTopLeftRadius\", \"borderBottomLeftRadius\"]),\n borderRightRadius: t.radii([\n \"borderTopRightRadius\",\n \"borderBottomRightRadius\"\n ])\n};\nObject.assign(border, {\n rounded: border.borderRadius,\n roundedTop: border.borderTopRadius,\n roundedTopLeft: border.borderTopLeftRadius,\n roundedTopRight: border.borderTopRightRadius,\n roundedTopStart: border.borderStartStartRadius,\n roundedTopEnd: border.borderStartEndRadius,\n roundedBottom: border.borderBottomRadius,\n roundedBottomLeft: border.borderBottomLeftRadius,\n roundedBottomRight: border.borderBottomRightRadius,\n roundedBottomStart: border.borderEndStartRadius,\n roundedBottomEnd: border.borderEndEndRadius,\n roundedLeft: border.borderLeftRadius,\n roundedRight: border.borderRightRadius,\n roundedStart: border.borderInlineStartRadius,\n roundedEnd: border.borderInlineEndRadius,\n borderStart: border.borderInlineStart,\n borderEnd: border.borderInlineEnd,\n borderTopStartRadius: border.borderStartStartRadius,\n borderTopEndRadius: border.borderStartEndRadius,\n borderBottomStartRadius: border.borderEndStartRadius,\n borderBottomEndRadius: border.borderEndEndRadius,\n borderStartRadius: border.borderInlineStartRadius,\n borderEndRadius: border.borderInlineEndRadius,\n borderStartWidth: border.borderInlineStartWidth,\n borderEndWidth: border.borderInlineEndWidth,\n borderStartColor: border.borderInlineStartColor,\n borderEndColor: border.borderInlineEndColor,\n borderStartStyle: border.borderInlineStartStyle,\n borderEndStyle: border.borderInlineEndStyle\n});\n\nexport { border };\n","import { t } from '../utils/index.mjs';\n\nconst color = {\n color: t.colors(\"color\"),\n textColor: t.colors(\"color\"),\n fill: t.colors(\"fill\"),\n stroke: t.colors(\"stroke\"),\n accentColor: t.colors(\"accentColor\"),\n textFillColor: t.colors(\"textFillColor\")\n};\n\nexport { color };\n","import { t } from '../utils/index.mjs';\nimport { transformFunctions } from '../utils/transform-functions.mjs';\n\nconst flexbox = {\n alignItems: true,\n alignContent: true,\n justifyItems: true,\n justifyContent: true,\n flexWrap: true,\n flexDirection: { transform: transformFunctions.flexDirection },\n flex: true,\n flexFlow: true,\n flexGrow: true,\n flexShrink: true,\n flexBasis: t.sizes(\"flexBasis\"),\n justifySelf: true,\n alignSelf: true,\n order: true,\n placeItems: true,\n placeContent: true,\n placeSelf: true,\n gap: t.space(\"gap\"),\n rowGap: t.space(\"rowGap\"),\n columnGap: t.space(\"columnGap\")\n};\nObject.assign(flexbox, {\n flexDir: flexbox.flexDirection\n});\n\nexport { flexbox };\n","import { t } from '../utils/index.mjs';\nimport { transformFunctions } from '../utils/transform-functions.mjs';\n\nconst layout = {\n width: t.sizesT(\"width\"),\n inlineSize: t.sizesT(\"inlineSize\"),\n height: t.sizes(\"height\"),\n blockSize: t.sizes(\"blockSize\"),\n boxSize: t.sizes([\"width\", \"height\"]),\n minWidth: t.sizes(\"minWidth\"),\n minInlineSize: t.sizes(\"minInlineSize\"),\n minHeight: t.sizes(\"minHeight\"),\n minBlockSize: t.sizes(\"minBlockSize\"),\n maxWidth: t.sizes(\"maxWidth\"),\n maxInlineSize: t.sizes(\"maxInlineSize\"),\n maxHeight: t.sizes(\"maxHeight\"),\n maxBlockSize: t.sizes(\"maxBlockSize\"),\n overflow: true,\n overflowX: true,\n overflowY: true,\n overscrollBehavior: true,\n overscrollBehaviorX: true,\n overscrollBehaviorY: true,\n display: true,\n aspectRatio: true,\n hideFrom: {\n scale: \"breakpoints\",\n transform: (value, theme) => {\n const breakpoint = theme.__breakpoints?.get(value)?.minW ?? value;\n const mq = `@media screen and (min-width: ${breakpoint})`;\n return { [mq]: { display: \"none\" } };\n }\n },\n hideBelow: {\n scale: \"breakpoints\",\n transform: (value, theme) => {\n const breakpoint = theme.__breakpoints?.get(value)?._minW ?? value;\n const mq = `@media screen and (max-width: ${breakpoint})`;\n return { [mq]: { display: \"none\" } };\n }\n },\n verticalAlign: true,\n boxSizing: true,\n boxDecorationBreak: true,\n float: t.propT(\"float\", transformFunctions.float),\n objectFit: true,\n objectPosition: true,\n visibility: true,\n isolation: true\n};\nObject.assign(layout, {\n w: layout.width,\n h: layout.height,\n minW: layout.minWidth,\n maxW: layout.maxWidth,\n minH: layout.minHeight,\n maxH: layout.maxHeight,\n overscroll: layout.overscrollBehavior,\n overscrollX: layout.overscrollBehaviorX,\n overscrollY: layout.overscrollBehaviorY\n});\n\nexport { layout };\n","import { t } from '../utils/index.mjs';\nimport { transformFunctions } from '../utils/transform-functions.mjs';\n\nconst filter = {\n filter: { transform: transformFunctions.filter },\n blur: t.blur(\"--chakra-blur\"),\n brightness: t.propT(\"--chakra-brightness\", transformFunctions.brightness),\n contrast: t.propT(\"--chakra-contrast\", transformFunctions.contrast),\n hueRotate: t.propT(\"--chakra-hue-rotate\", transformFunctions.hueRotate),\n invert: t.propT(\"--chakra-invert\", transformFunctions.invert),\n saturate: t.propT(\"--chakra-saturate\", transformFunctions.saturate),\n dropShadow: t.propT(\"--chakra-drop-shadow\", transformFunctions.dropShadow),\n backdropFilter: { transform: transformFunctions.backdropFilter },\n backdropBlur: t.blur(\"--chakra-backdrop-blur\"),\n backdropBrightness: t.propT(\n \"--chakra-backdrop-brightness\",\n transformFunctions.brightness\n ),\n backdropContrast: t.propT(\"--chakra-backdrop-contrast\", transformFunctions.contrast),\n backdropHueRotate: t.propT(\n \"--chakra-backdrop-hue-rotate\",\n transformFunctions.hueRotate\n ),\n backdropInvert: t.propT(\"--chakra-backdrop-invert\", transformFunctions.invert),\n backdropSaturate: t.propT(\"--chakra-backdrop-saturate\", transformFunctions.saturate)\n};\n\nexport { filter };\n","import { t } from '../utils/index.mjs';\nimport { transformFunctions } from '../utils/transform-functions.mjs';\n\nconst ring = {\n ring: { transform: transformFunctions.ring },\n ringColor: t.colors(\"--chakra-ring-color\"),\n ringOffset: t.prop(\"--chakra-ring-offset-width\"),\n ringOffsetColor: t.colors(\"--chakra-ring-offset-color\"),\n ringInset: t.prop(\"--chakra-ring-inset\")\n};\n\nexport { ring };\n","import { t } from '../utils/index.mjs';\nimport { transformFunctions } from '../utils/transform-functions.mjs';\n\nconst interactivity = {\n appearance: true,\n cursor: true,\n resize: true,\n userSelect: true,\n pointerEvents: true,\n outline: { transform: transformFunctions.outline },\n outlineOffset: true,\n outlineColor: t.colors(\"outlineColor\")\n};\n\nexport { interactivity };\n","import { t } from '../utils/index.mjs';\n\nconst grid = {\n gridGap: t.space(\"gridGap\"),\n gridColumnGap: t.space(\"gridColumnGap\"),\n gridRowGap: t.space(\"gridRowGap\"),\n gridColumn: true,\n gridRow: true,\n gridAutoFlow: true,\n gridAutoColumns: true,\n gridColumnStart: true,\n gridColumnEnd: true,\n gridRowStart: true,\n gridRowEnd: true,\n gridAutoRows: true,\n gridTemplate: true,\n gridTemplateColumns: true,\n gridTemplateRows: true,\n gridTemplateAreas: true,\n gridArea: true\n};\n\nexport { grid };\n","function get(obj, path, fallback, index) {\n const key = typeof path === \"string\" ? path.split(\".\") : [path];\n for (index = 0; index < key.length; index += 1) {\n if (!obj)\n break;\n obj = obj[key[index]];\n }\n return obj === void 0 ? fallback : obj;\n}\nconst memoize = (fn) => {\n const cache = /* @__PURE__ */ new WeakMap();\n const memoizedFn = (obj, path, fallback, index) => {\n if (typeof obj === \"undefined\") {\n return fn(obj, path, fallback);\n }\n if (!cache.has(obj)) {\n cache.set(obj, /* @__PURE__ */ new Map());\n }\n const map = cache.get(obj);\n if (map.has(path)) {\n return map.get(path);\n }\n const value = fn(obj, path, fallback, index);\n map.set(path, value);\n return value;\n };\n return memoizedFn;\n};\nconst memoizedGet = memoize(get);\n\nexport { get, memoize, memoizedGet };\n","import { memoizedGet } from '../get.mjs';\n\nconst srOnly = {\n border: \"0px\",\n clip: \"rect(0, 0, 0, 0)\",\n width: \"1px\",\n height: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\"\n};\nconst srFocusable = {\n position: \"static\",\n width: \"auto\",\n height: \"auto\",\n clip: \"auto\",\n padding: \"0\",\n margin: \"0\",\n overflow: \"visible\",\n whiteSpace: \"normal\"\n};\nconst getWithPriority = (theme, key, styles) => {\n const result = {};\n const obj = memoizedGet(theme, key, {});\n for (const prop in obj) {\n const isInStyles = prop in styles && styles[prop] != null;\n if (!isInStyles)\n result[prop] = obj[prop];\n }\n return result;\n};\nconst others = {\n srOnly: {\n transform(value) {\n if (value === true)\n return srOnly;\n if (value === \"focusable\")\n return srFocusable;\n return {};\n }\n },\n layerStyle: {\n processResult: true,\n transform: (value, theme, styles) => getWithPriority(theme, `layerStyles.${value}`, styles)\n },\n textStyle: {\n processResult: true,\n transform: (value, theme, styles) => getWithPriority(theme, `textStyles.${value}`, styles)\n },\n apply: {\n processResult: true,\n transform: (value, theme, styles) => getWithPriority(theme, value, styles)\n }\n};\n\nexport { others };\n","import { t } from '../utils/index.mjs';\n\nconst position = {\n position: true,\n pos: t.prop(\"position\"),\n zIndex: t.prop(\"zIndex\", \"zIndices\"),\n inset: t.spaceT(\"inset\"),\n insetX: t.spaceT([\"left\", \"right\"]),\n insetInline: t.spaceT(\"insetInline\"),\n insetY: t.spaceT([\"top\", \"bottom\"]),\n insetBlock: t.spaceT(\"insetBlock\"),\n top: t.spaceT(\"top\"),\n insetBlockStart: t.spaceT(\"insetBlockStart\"),\n bottom: t.spaceT(\"bottom\"),\n insetBlockEnd: t.spaceT(\"insetBlockEnd\"),\n left: t.spaceT(\"left\"),\n insetInlineStart: t.logical({\n scale: \"space\",\n property: { ltr: \"left\", rtl: \"right\" }\n }),\n right: t.spaceT(\"right\"),\n insetInlineEnd: t.logical({\n scale: \"space\",\n property: { ltr: \"right\", rtl: \"left\" }\n })\n};\nObject.assign(position, {\n insetStart: position.insetInlineStart,\n insetEnd: position.insetInlineEnd\n});\n\nexport { position };\n","import { t } from '../utils/index.mjs';\n\nconst effect = {\n boxShadow: t.shadows(\"boxShadow\"),\n mixBlendMode: true,\n blendMode: t.prop(\"mixBlendMode\"),\n backgroundBlendMode: true,\n bgBlendMode: t.prop(\"backgroundBlendMode\"),\n opacity: true\n};\nObject.assign(effect, {\n shadow: effect.boxShadow\n});\n\nexport { effect };\n","import { t } from '../utils/index.mjs';\n\nconst space = {\n margin: t.spaceT(\"margin\"),\n marginTop: t.spaceT(\"marginTop\"),\n marginBlockStart: t.spaceT(\"marginBlockStart\"),\n marginRight: t.spaceT(\"marginRight\"),\n marginInlineEnd: t.spaceT(\"marginInlineEnd\"),\n marginBottom: t.spaceT(\"marginBottom\"),\n marginBlockEnd: t.spaceT(\"marginBlockEnd\"),\n marginLeft: t.spaceT(\"marginLeft\"),\n marginInlineStart: t.spaceT(\"marginInlineStart\"),\n marginX: t.spaceT([\"marginInlineStart\", \"marginInlineEnd\"]),\n marginInline: t.spaceT(\"marginInline\"),\n marginY: t.spaceT([\"marginTop\", \"marginBottom\"]),\n marginBlock: t.spaceT(\"marginBlock\"),\n padding: t.space(\"padding\"),\n paddingTop: t.space(\"paddingTop\"),\n paddingBlockStart: t.space(\"paddingBlockStart\"),\n paddingRight: t.space(\"paddingRight\"),\n paddingBottom: t.space(\"paddingBottom\"),\n paddingBlockEnd: t.space(\"paddingBlockEnd\"),\n paddingLeft: t.space(\"paddingLeft\"),\n paddingInlineStart: t.space(\"paddingInlineStart\"),\n paddingInlineEnd: t.space(\"paddingInlineEnd\"),\n paddingX: t.space([\"paddingInlineStart\", \"paddingInlineEnd\"]),\n paddingInline: t.space(\"paddingInline\"),\n paddingY: t.space([\"paddingTop\", \"paddingBottom\"]),\n paddingBlock: t.space(\"paddingBlock\")\n};\nObject.assign(space, {\n m: space.margin,\n mt: space.marginTop,\n mr: space.marginRight,\n me: space.marginInlineEnd,\n marginEnd: space.marginInlineEnd,\n mb: space.marginBottom,\n ml: space.marginLeft,\n ms: space.marginInlineStart,\n marginStart: space.marginInlineStart,\n mx: space.marginX,\n my: space.marginY,\n p: space.padding,\n pt: space.paddingTop,\n py: space.paddingY,\n px: space.paddingX,\n pb: space.paddingBottom,\n pl: space.paddingLeft,\n ps: space.paddingInlineStart,\n paddingStart: space.paddingInlineStart,\n pr: space.paddingRight,\n pe: space.paddingInlineEnd,\n paddingEnd: space.paddingInlineEnd\n});\n\nexport { space };\n","import { t } from '../utils/index.mjs';\n\nconst scroll = {\n scrollBehavior: true,\n scrollSnapAlign: true,\n scrollSnapStop: true,\n scrollSnapType: true,\n // scroll margin\n scrollMargin: t.spaceT(\"scrollMargin\"),\n scrollMarginTop: t.spaceT(\"scrollMarginTop\"),\n scrollMarginBottom: t.spaceT(\"scrollMarginBottom\"),\n scrollMarginLeft: t.spaceT(\"scrollMarginLeft\"),\n scrollMarginRight: t.spaceT(\"scrollMarginRight\"),\n scrollMarginX: t.spaceT([\"scrollMarginLeft\", \"scrollMarginRight\"]),\n scrollMarginY: t.spaceT([\"scrollMarginTop\", \"scrollMarginBottom\"]),\n // scroll padding\n scrollPadding: t.spaceT(\"scrollPadding\"),\n scrollPaddingTop: t.spaceT(\"scrollPaddingTop\"),\n scrollPaddingBottom: t.spaceT(\"scrollPaddingBottom\"),\n scrollPaddingLeft: t.spaceT(\"scrollPaddingLeft\"),\n scrollPaddingRight: t.spaceT(\"scrollPaddingRight\"),\n scrollPaddingX: t.spaceT([\"scrollPaddingLeft\", \"scrollPaddingRight\"]),\n scrollPaddingY: t.spaceT([\"scrollPaddingTop\", \"scrollPaddingBottom\"])\n};\n\nexport { scroll };\n","import { t } from '../utils/index.mjs';\nimport { transformFunctions } from '../utils/transform-functions.mjs';\n\nconst typography = {\n fontFamily: t.prop(\"fontFamily\", \"fonts\"),\n fontSize: t.prop(\"fontSize\", \"fontSizes\", transformFunctions.px),\n fontWeight: t.prop(\"fontWeight\", \"fontWeights\"),\n lineHeight: t.prop(\"lineHeight\", \"lineHeights\"),\n letterSpacing: t.prop(\"letterSpacing\", \"letterSpacings\"),\n textAlign: true,\n fontStyle: true,\n textIndent: true,\n wordBreak: true,\n overflowWrap: true,\n textOverflow: true,\n textTransform: true,\n whiteSpace: true,\n isTruncated: {\n transform(value) {\n if (value === true) {\n return {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\"\n };\n }\n }\n },\n noOfLines: {\n static: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n display: \"-webkit-box\",\n WebkitBoxOrient: \"vertical\",\n //@ts-ignore\n WebkitLineClamp: \"var(--chakra-line-clamp)\"\n },\n property: \"--chakra-line-clamp\"\n }\n};\n\nexport { typography };\n","import { t } from '../utils/index.mjs';\n\nconst textDecoration = {\n textDecorationColor: t.colors(\"textDecorationColor\"),\n textDecoration: true,\n textDecor: { property: \"textDecoration\" },\n textDecorationLine: true,\n textDecorationStyle: true,\n textDecorationThickness: true,\n textUnderlineOffset: true,\n textShadow: t.shadows(\"textShadow\")\n};\n\nexport { textDecoration };\n","import { t } from '../utils/index.mjs';\nimport { transformFunctions } from '../utils/transform-functions.mjs';\n\nconst transform = {\n clipPath: true,\n transform: t.propT(\"transform\", transformFunctions.transform),\n transformOrigin: true,\n translateX: t.spaceT(\"--chakra-translate-x\"),\n translateY: t.spaceT(\"--chakra-translate-y\"),\n skewX: t.degreeT(\"--chakra-skew-x\"),\n skewY: t.degreeT(\"--chakra-skew-y\"),\n scaleX: t.prop(\"--chakra-scale-x\"),\n scaleY: t.prop(\"--chakra-scale-y\"),\n scale: t.prop([\"--chakra-scale-x\", \"--chakra-scale-y\"]),\n rotate: t.degreeT(\"--chakra-rotate\")\n};\n\nexport { transform };\n","import { t } from '../utils/index.mjs';\n\nconst list = {\n listStyleType: true,\n listStylePosition: true,\n listStylePos: t.prop(\"listStylePosition\"),\n listStyleImage: true,\n listStyleImg: t.prop(\"listStyleImage\")\n};\n\nexport { list };\n","import { t } from '../utils/index.mjs';\n\nconst transition = {\n transition: true,\n transitionDelay: true,\n animation: true,\n willChange: true,\n transitionDuration: t.prop(\"transitionDuration\", \"transition.duration\"),\n transitionProperty: t.prop(\"transitionProperty\", \"transition.property\"),\n transitionTimingFunction: t.prop(\n \"transitionTimingFunction\",\n \"transition.easing\"\n )\n};\n\nexport { transition };\n","import { mergeWith } from '@chakra-ui/utils';\nimport { pseudoPropNames, pseudoSelectors } from './pseudos.mjs';\nimport { background } from './config/background.mjs';\nimport { border } from './config/border.mjs';\nimport { color } from './config/color.mjs';\nimport { flexbox } from './config/flexbox.mjs';\nimport { layout } from './config/layout.mjs';\nimport { filter } from './config/filter.mjs';\nimport { ring } from './config/ring.mjs';\nimport { interactivity } from './config/interactivity.mjs';\nimport { grid } from './config/grid.mjs';\nimport { others } from './config/others.mjs';\nimport { position } from './config/position.mjs';\nimport { effect } from './config/effect.mjs';\nimport { space } from './config/space.mjs';\nimport { scroll } from './config/scroll.mjs';\nimport { typography } from './config/typography.mjs';\nimport { textDecoration } from './config/text-decoration.mjs';\nimport { transform } from './config/transform.mjs';\nimport { list } from './config/list.mjs';\nimport { transition } from './config/transition.mjs';\n\nconst systemProps = mergeWith(\n {},\n background,\n border,\n color,\n flexbox,\n layout,\n filter,\n ring,\n interactivity,\n grid,\n others,\n position,\n effect,\n space,\n scroll,\n typography,\n textDecoration,\n transform,\n list,\n transition\n);\nconst layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);\nconst layoutPropNames = Object.keys(\n layoutSystem\n);\nconst propNames = [...Object.keys(systemProps), ...pseudoPropNames];\nconst styleProps = { ...systemProps, ...pseudoSelectors };\nconst isStyleProp = (prop) => prop in styleProps;\n\nexport { isStyleProp, layoutPropNames, propNames, systemProps };\n","import { runIfFn, isObject, mergeWith } from '@chakra-ui/utils';\nimport { pseudoSelectors } from './pseudos.mjs';\nimport { systemProps } from './system.mjs';\nimport { expandResponsive } from './utils/expand-responsive.mjs';\nimport { splitByComma } from './utils/split-by-comma.mjs';\n\nfunction isCssVar(value) {\n return /^var\\(--.+\\)$/.test(value);\n}\nconst isCSSVariableTokenValue = (key, value) => key.startsWith(\"--\") && typeof value === \"string\" && !isCssVar(value);\nconst resolveTokenValue = (theme, value) => {\n if (value == null)\n return value;\n const getVar = (val) => theme.__cssMap?.[val]?.varRef;\n const getValue = (val) => getVar(val) ?? val;\n const [tokenValue, fallbackValue] = splitByComma(value);\n value = getVar(tokenValue) ?? getValue(fallbackValue) ?? getValue(value);\n return value;\n};\nfunction getCss(options) {\n const { configs = {}, pseudos = {}, theme } = options;\n const css2 = (stylesOrFn, nested = false) => {\n const _styles = runIfFn(stylesOrFn, theme);\n const styles = expandResponsive(_styles)(theme);\n let computedStyles = {};\n for (let key in styles) {\n const valueOrFn = styles[key];\n let value = runIfFn(valueOrFn, theme);\n if (key in pseudos) {\n key = pseudos[key];\n }\n if (isCSSVariableTokenValue(key, value)) {\n value = resolveTokenValue(theme, value);\n }\n let config = configs[key];\n if (config === true) {\n config = { property: key };\n }\n if (isObject(value)) {\n computedStyles[key] = computedStyles[key] ?? {};\n computedStyles[key] = mergeWith(\n {},\n computedStyles[key],\n css2(value, true)\n );\n continue;\n }\n let rawValue = config?.transform?.(value, theme, _styles) ?? value;\n rawValue = config?.processResult ? css2(rawValue, true) : rawValue;\n const configProperty = runIfFn(config?.property, theme);\n if (!nested && config?.static) {\n const staticStyles = runIfFn(config.static, theme);\n computedStyles = mergeWith({}, computedStyles, staticStyles);\n }\n if (configProperty && Array.isArray(configProperty)) {\n for (const property of configProperty) {\n computedStyles[property] = rawValue;\n }\n continue;\n }\n if (configProperty) {\n if (configProperty === \"&\" && isObject(rawValue)) {\n computedStyles = mergeWith({}, computedStyles, rawValue);\n } else {\n computedStyles[configProperty] = rawValue;\n }\n continue;\n }\n if (isObject(rawValue)) {\n computedStyles = mergeWith({}, computedStyles, rawValue);\n continue;\n }\n computedStyles[key] = rawValue;\n }\n return computedStyles;\n };\n return css2;\n}\nconst css = (styles) => (theme) => {\n const cssFn = getCss({\n theme,\n pseudos: pseudoSelectors,\n configs: systemProps\n });\n return cssFn(styles);\n};\n\nexport { css, getCss };\n","function splitByComma(value) {\n const chunks = [];\n let chunk = \"\";\n let inParens = false;\n for (let i = 0; i < value.length; i++) {\n const char = value[i];\n if (char === \"(\") {\n inParens = true;\n chunk += char;\n } else if (char === \")\") {\n inParens = false;\n chunk += char;\n } else if (char === \",\" && !inParens) {\n chunks.push(chunk);\n chunk = \"\";\n } else {\n chunk += char;\n }\n }\n chunk = chunk.trim();\n if (chunk) {\n chunks.push(chunk);\n }\n return chunks;\n}\n\nexport { splitByComma };\n","import { runIfFn, isObject } from '@chakra-ui/utils';\n\nconst expandResponsive = (styles) => (theme) => {\n if (!theme.__breakpoints)\n return styles;\n const { isResponsive, toArrayValue, media: medias } = theme.__breakpoints;\n const computedStyles = {};\n for (const key in styles) {\n let value = runIfFn(styles[key], theme);\n if (value == null)\n continue;\n value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value;\n if (!Array.isArray(value)) {\n computedStyles[key] = value;\n continue;\n }\n const queries = value.slice(0, medias.length).length;\n for (let index = 0; index < queries; index += 1) {\n const media = medias?.[index];\n if (!media) {\n computedStyles[key] = value[index];\n continue;\n }\n computedStyles[media] = computedStyles[media] || {};\n if (value[index] == null) {\n continue;\n }\n computedStyles[media][key] = value[index];\n }\n }\n return computedStyles;\n};\n\nexport { expandResponsive };\n","'use client';\nimport { createContext as createContext$1, useContext } from 'react';\n\nfunction getErrorMessage(hook, provider) {\n return `${hook} returned \\`undefined\\`. Seems you forgot to wrap component within ${provider}`;\n}\nfunction createContext(options = {}) {\n const {\n name,\n strict = true,\n hookName = \"useContext\",\n providerName = \"Provider\",\n errorMessage,\n defaultValue\n } = options;\n const Context = createContext$1(defaultValue);\n Context.displayName = name;\n function useContext$1() {\n const context = useContext(Context);\n if (!context && strict) {\n const error = new Error(\n errorMessage ?? getErrorMessage(hookName, providerName)\n );\n error.name = \"ContextError\";\n Error.captureStackTrace?.(error, useContext$1);\n throw error;\n }\n return context;\n }\n return [Context.Provider, useContext$1, Context];\n}\n\nexport { createContext };\n","function get(obj, path, fallback, index) {\n const key = typeof path === \"string\" ? path.split(\".\") : [path];\n for (index = 0; index < key.length; index += 1) {\n if (!obj)\n break;\n obj = obj[key[index]];\n }\n return obj === void 0 ? fallback : obj;\n}\nconst memoize = (fn) => {\n const cache = /* @__PURE__ */ new WeakMap();\n const memoizedFn = (obj, path, fallback, index) => {\n if (typeof obj === \"undefined\") {\n return fn(obj, path, fallback);\n }\n if (!cache.has(obj)) {\n cache.set(obj, /* @__PURE__ */ new Map());\n }\n const map = cache.get(obj);\n if (map.has(path)) {\n return map.get(path);\n }\n const value = fn(obj, path, fallback, index);\n map.set(path, value);\n return value;\n };\n return memoizedFn;\n};\nconst memoizedGet = memoize(get);\n\nexport { get, memoizedGet };\n","'use client';\nimport { jsxs, jsx } from 'react/jsx-runtime';\nimport { toCSSVar, css } from '@chakra-ui/styled-system';\nimport { createContext, memoizedGet, runIfFn } from '@chakra-ui/utils';\nimport { ThemeProvider as ThemeProvider$1, Global } from '@emotion/react';\nimport { useMemo } from 'react';\nimport { useColorMode } from '../color-mode/color-mode-context.mjs';\n\nfunction ThemeProvider(props) {\n const { cssVarsRoot, theme, children } = props;\n const computedTheme = useMemo(() => toCSSVar(theme), [theme]);\n return /* @__PURE__ */ jsxs(ThemeProvider$1, { theme: computedTheme, children: [\n /* @__PURE__ */ jsx(CSSVars, { root: cssVarsRoot }),\n children\n ] });\n}\nfunction CSSVars({ root = \":host, :root\" }) {\n const selector = [root, `[data-theme]`].join(\",\");\n return /* @__PURE__ */ jsx(Global, { styles: (theme) => ({ [selector]: theme.__cssVars }) });\n}\nconst [StylesProvider, useStyles] = createContext({\n name: \"StylesContext\",\n errorMessage: \"useStyles: `styles` is undefined. Seems you forgot to wrap the components in `` \"\n});\nfunction createStylesContext(componentName) {\n return createContext({\n name: `${componentName}StylesContext`,\n errorMessage: `useStyles: \"styles\" is undefined. Seems you forgot to wrap the components in \"<${componentName} />\" `\n });\n}\nfunction GlobalStyle() {\n const { colorMode } = useColorMode();\n return /* @__PURE__ */ jsx(\n Global,\n {\n styles: (theme) => {\n const styleObjectOrFn = memoizedGet(theme, \"styles.global\");\n const globalStyles = runIfFn(styleObjectOrFn, { theme, colorMode });\n if (!globalStyles)\n return void 0;\n const styles = css(globalStyles)(theme);\n return styles;\n }\n }\n );\n}\n\nexport { CSSVars, GlobalStyle, StylesProvider, ThemeProvider, createStylesContext, useStyles };\n","import { analyzeBreakpoints } from '@chakra-ui/utils';\nimport { createThemeVars } from './create-theme-vars.mjs';\nimport { omitVars } from './theme-tokens.mjs';\n\nfunction toCSSVar(rawTheme) {\n const theme = omitVars(rawTheme);\n const {\n /**\n * This is more like a dictionary of tokens users will type `green.500`,\n * and their equivalent css variable.\n */\n cssMap,\n /**\n * The extracted css variables will be stored here, and used in\n * the emotion's component to attach variables to `:root`\n */\n cssVars\n } = createThemeVars(theme);\n const defaultCssVars = {\n \"--chakra-ring-inset\": \"var(--chakra-empty,/*!*/ /*!*/)\",\n \"--chakra-ring-offset-width\": \"0px\",\n \"--chakra-ring-offset-color\": \"#fff\",\n \"--chakra-ring-color\": \"rgba(66, 153, 225, 0.6)\",\n \"--chakra-ring-offset-shadow\": \"0 0 #0000\",\n \"--chakra-ring-shadow\": \"0 0 #0000\",\n \"--chakra-space-x-reverse\": \"0\",\n \"--chakra-space-y-reverse\": \"0\"\n };\n Object.assign(theme, {\n __cssVars: { ...defaultCssVars, ...cssVars },\n __cssMap: cssMap,\n __breakpoints: analyzeBreakpoints(theme.breakpoints)\n });\n return theme;\n}\n\nexport { toCSSVar };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { createContext } from '@chakra-ui/utils';\n\nconst [PortalManagerContextProvider, usePortalManager] = createContext({\n strict: false,\n name: \"PortalManagerContext\"\n});\nfunction PortalManager(props) {\n const { children, zIndex } = props;\n return /* @__PURE__ */ jsx(PortalManagerContextProvider, { value: { zIndex }, children });\n}\nPortalManager.displayName = \"PortalManager\";\n\nexport { PortalManager, usePortalManager };\n","'use client';\nimport { useLayoutEffect, useEffect } from 'react';\n\nconst useSafeLayoutEffect = Boolean(globalThis?.document) ? useLayoutEffect : useEffect;\n\nexport { useSafeLayoutEffect };\n","'use client';\nimport { jsxs, jsx } from 'react/jsx-runtime';\nimport { useSafeLayoutEffect } from '@chakra-ui/hooks';\nimport { createContext, useReducer, useContext, useRef, useMemo } from 'react';\n\nconst EnvironmentContext = createContext({\n getDocument() {\n return document;\n },\n getWindow() {\n return window;\n }\n});\nEnvironmentContext.displayName = \"EnvironmentContext\";\nfunction useEnvironment({ defer } = {}) {\n const [, forceUpdate] = useReducer((c) => c + 1, 0);\n useSafeLayoutEffect(() => {\n if (!defer)\n return;\n forceUpdate();\n }, [defer]);\n return useContext(EnvironmentContext);\n}\nfunction EnvironmentProvider(props) {\n const { children, environment: environmentProp, disabled } = props;\n const ref = useRef(null);\n const context = useMemo(() => {\n if (environmentProp)\n return environmentProp;\n return {\n getDocument: () => ref.current?.ownerDocument ?? document,\n getWindow: () => ref.current?.ownerDocument.defaultView ?? window\n };\n }, [environmentProp]);\n const showSpan = !disabled || !environmentProp;\n return /* @__PURE__ */ jsxs(EnvironmentContext.Provider, { value: context, children: [\n children,\n showSpan && /* @__PURE__ */ jsx(\"span\", { id: \"__chakra_env\", hidden: true, ref })\n ] });\n}\nEnvironmentProvider.displayName = \"EnvironmentProvider\";\n\nexport { EnvironmentProvider, useEnvironment };\n","'use client';\nimport { jsx, jsxs } from 'react/jsx-runtime';\nimport { ColorModeProvider } from '../color-mode/color-mode-provider.mjs';\nimport { CSSReset, CSSPolyfill } from '../css-reset/css-reset.mjs';\nimport { ThemeProvider, GlobalStyle } from '../system/providers.mjs';\nimport { PortalManager } from '../portal/portal-manager.mjs';\nimport { EnvironmentProvider } from '../env/env.mjs';\n\nconst Provider = (props) => {\n const {\n children,\n colorModeManager,\n portalZIndex,\n resetScope,\n resetCSS = true,\n theme = {},\n environment,\n cssVarsRoot,\n disableEnvironment,\n disableGlobalStyle\n } = props;\n const _children = /* @__PURE__ */ jsx(\n EnvironmentProvider,\n {\n environment,\n disabled: disableEnvironment,\n children\n }\n );\n return /* @__PURE__ */ jsx(ThemeProvider, { theme, cssVarsRoot, children: /* @__PURE__ */ jsxs(\n ColorModeProvider,\n {\n colorModeManager,\n options: theme.config,\n children: [\n resetCSS ? /* @__PURE__ */ jsx(CSSReset, { scope: resetScope }) : /* @__PURE__ */ jsx(CSSPolyfill, {}),\n !disableGlobalStyle && /* @__PURE__ */ jsx(GlobalStyle, {}),\n portalZIndex ? /* @__PURE__ */ jsx(PortalManager, { zIndex: portalZIndex, children: _children }) : _children\n ]\n }\n ) });\n};\n\nexport { Provider };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","import { useRef } from 'react';\n\n/**\n * Creates a constant value over the lifecycle of a component.\n *\n * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer\n * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`\n * you can ensure that initialisers don't execute twice or more.\n */\nfunction useConstant(init) {\n const ref = useRef(null);\n if (ref.current === null) {\n ref.current = init();\n }\n return ref.current;\n}\n\nexport { useConstant };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n transformPagePoint: (p) => p,\n isStatic: false,\n reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useRef, useContext, useInsertionEffect } from 'react';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component {\n getSnapshotBeforeUpdate(prevProps) {\n const element = this.props.childRef.current;\n if (element && prevProps.isPresent && !this.props.isPresent) {\n const size = this.props.sizeRef.current;\n size.height = element.offsetHeight || 0;\n size.width = element.offsetWidth || 0;\n size.top = element.offsetTop;\n size.left = element.offsetLeft;\n }\n return null;\n }\n /**\n * Required with getSnapshotBeforeUpdate to stop React complaining.\n */\n componentDidUpdate() { }\n render() {\n return this.props.children;\n }\n}\nfunction PopChild({ children, isPresent }) {\n const id = useId();\n const ref = useRef(null);\n const size = useRef({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n });\n const { nonce } = useContext(MotionConfigContext);\n /**\n * We create and inject a style block so we can apply this explicit\n * sizing in a non-destructive manner by just deleting the style block.\n *\n * We can't apply size via render as the measurement happens\n * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n * styles directly on the DOM node, we might be overwriting\n * styles set via the style prop.\n */\n useInsertionEffect(() => {\n const { width, height, top, left } = size.current;\n if (isPresent || !ref.current || !width || !height)\n return;\n ref.current.dataset.motionPopId = id;\n const style = document.createElement(\"style\");\n if (nonce)\n style.nonce = nonce;\n document.head.appendChild(style);\n if (style.sheet) {\n style.sheet.insertRule(`\n [data-motion-pop-id=\"${id}\"] {\n position: absolute !important;\n width: ${width}px !important;\n height: ${height}px !important;\n top: ${top}px !important;\n left: ${left}px !important;\n }\n `);\n }\n return () => {\n document.head.removeChild(style);\n };\n }, [isPresent]);\n return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) }));\n}\n\nexport { PopChild };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport * as React from 'react';\nimport { useId, useCallback, useMemo } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { PopChild } from './PopChild.mjs';\n\nconst PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {\n const presenceChildren = useConstant(newChildrenMap);\n const id = useId();\n const memoizedOnExitComplete = useCallback((childId) => {\n presenceChildren.set(childId, true);\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete)\n return; // can stop searching when any is incomplete\n }\n onExitComplete && onExitComplete();\n }, [presenceChildren, onExitComplete]);\n const context = useMemo(() => ({\n id,\n initial,\n isPresent,\n custom,\n onExitComplete: memoizedOnExitComplete,\n register: (childId) => {\n presenceChildren.set(childId, false);\n return () => presenceChildren.delete(childId);\n },\n }), \n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n presenceAffectsLayout\n ? [Math.random(), memoizedOnExitComplete]\n : [isPresent, memoizedOnExitComplete]);\n useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false));\n }, [isPresent]);\n /**\n * If there's no `motion` components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !isPresent &&\n !presenceChildren.size &&\n onExitComplete &&\n onExitComplete();\n }, [isPresent]);\n if (mode === \"popLayout\") {\n children = jsx(PopChild, { isPresent: isPresent, children: children });\n }\n return (jsx(PresenceContext.Provider, { value: context, children: children }));\n};\nfunction newChildrenMap() {\n return new Map();\n}\n\nexport { PresenceChild };\n","\"use client\";\nimport { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","const noop = (any) => any;\n\nexport { noop };\n","import { noop } from './noop.mjs';\n\nlet warning = noop;\nlet invariant = noop;\nif (process.env.NODE_ENV !== \"production\") {\n warning = (check, message) => {\n if (!check && typeof console !== \"undefined\") {\n console.warn(message);\n }\n };\n invariant = (check, message) => {\n if (!check) {\n throw new Error(message);\n }\n };\n}\n\nexport { invariant, warning };\n","import { Children, isValidElement } from 'react';\n\nconst getChildKey = (child) => child.key || \"\";\nfunction onlyElements(children) {\n const filtered = [];\n // We use forEach here instead of map as map mutates the component key by preprending `.$`\n Children.forEach(children, (child) => {\n if (isValidElement(child))\n filtered.push(child);\n });\n return filtered;\n}\n\nexport { getChildKey, onlyElements };\n","const isBrowser = typeof window !== \"undefined\";\n\nexport { isBrowser };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","\"use client\";\nimport { jsx, Fragment } from 'react/jsx-runtime';\nimport { useMemo, useRef, useState, useContext } from 'react';\nimport { PresenceChild } from './PresenceChild.mjs';\nimport { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';\nimport { invariant } from '../../utils/errors.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { onlyElements, getChildKey } from './utils.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\n\n/**\n * `AnimatePresence` enables the animation of components that have been removed from the tree.\n *\n * When adding/removing more than a single child, every child **must** be given a unique `key` prop.\n *\n * Any `motion` components that have an `exit` property defined will animate out when removed from\n * the tree.\n *\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n * \n * {items.map(item => (\n * \n * ))}\n * \n * )\n * ```\n *\n * You can sequence exit animations throughout a tree using variants.\n *\n * If a child contains multiple `motion` components with `exit` props, it will only unmount the child\n * once all `motion` components have finished animating out. Likewise, any components using\n * `usePresence` all need to call `safeToRemove`.\n *\n * @public\n */\nconst AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = \"sync\", }) => {\n invariant(!exitBeforeEnter, \"Replace exitBeforeEnter with mode='wait'\");\n /**\n * Filter any children that aren't ReactElements. We can only track components\n * between renders with a props.key.\n */\n const presentChildren = useMemo(() => onlyElements(children), [children]);\n /**\n * Track the keys of the currently rendered children. This is used to\n * determine which children are exiting.\n */\n const presentKeys = presentChildren.map(getChildKey);\n /**\n * If `initial={false}` we only want to pass this to components in the first render.\n */\n const isInitialRender = useRef(true);\n /**\n * A ref containing the currently present children. When all exit animations\n * are complete, we use this to re-render the component with the latest children\n * *committed* rather than the latest children *rendered*.\n */\n const pendingPresentChildren = useRef(presentChildren);\n /**\n * Track which exiting children have finished animating out.\n */\n const exitComplete = useConstant(() => new Map());\n /**\n * Save children to render as React state. To ensure this component is concurrent-safe,\n * we check for exiting children via an effect.\n */\n const [diffedChildren, setDiffedChildren] = useState(presentChildren);\n const [renderedChildren, setRenderedChildren] = useState(presentChildren);\n useIsomorphicLayoutEffect(() => {\n isInitialRender.current = false;\n pendingPresentChildren.current = presentChildren;\n /**\n * Update complete status of exiting children.\n */\n for (let i = 0; i < renderedChildren.length; i++) {\n const key = getChildKey(renderedChildren[i]);\n if (!presentKeys.includes(key)) {\n if (exitComplete.get(key) !== true) {\n exitComplete.set(key, false);\n }\n }\n else {\n exitComplete.delete(key);\n }\n }\n }, [renderedChildren, presentKeys.length, presentKeys.join(\"-\")]);\n const exitingChildren = [];\n if (presentChildren !== diffedChildren) {\n let nextChildren = [...presentChildren];\n /**\n * Loop through all the currently rendered components and decide which\n * are exiting.\n */\n for (let i = 0; i < renderedChildren.length; i++) {\n const child = renderedChildren[i];\n const key = getChildKey(child);\n if (!presentKeys.includes(key)) {\n nextChildren.splice(i, 0, child);\n exitingChildren.push(child);\n }\n }\n /**\n * If we're in \"wait\" mode, and we have exiting children, we want to\n * only render these until they've all exited.\n */\n if (mode === \"wait\" && exitingChildren.length) {\n nextChildren = exitingChildren;\n }\n setRenderedChildren(onlyElements(nextChildren));\n setDiffedChildren(presentChildren);\n /**\n * Early return to ensure once we've set state with the latest diffed\n * children, we can immediately re-render.\n */\n return;\n }\n if (process.env.NODE_ENV !== \"production\" &&\n mode === \"wait\" &&\n renderedChildren.length > 1) {\n console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to \"wait\". This will lead to odd visual behaviour.`);\n }\n /**\n * If we've been provided a forceRender function by the LayoutGroupContext,\n * we can use it to force a re-render amongst all surrounding components once\n * all components have finished animating out.\n */\n const { forceRender } = useContext(LayoutGroupContext);\n return (jsx(Fragment, { children: renderedChildren.map((child) => {\n const key = getChildKey(child);\n const isPresent = presentChildren === renderedChildren ||\n presentKeys.includes(key);\n const onExit = () => {\n if (exitComplete.has(key)) {\n exitComplete.set(key, true);\n }\n else {\n return;\n }\n let isEveryExitComplete = true;\n exitComplete.forEach((isExitComplete) => {\n if (!isExitComplete)\n isEveryExitComplete = false;\n });\n if (isEveryExitComplete) {\n forceRender === null || forceRender === void 0 ? void 0 : forceRender();\n setRenderedChildren(pendingPresentChildren.current);\n onExitComplete && onExitComplete();\n }\n };\n return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial\n ? undefined\n : false, custom: isPresent ? undefined : custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, children: child }, key));\n }) }));\n};\n\nexport { AnimatePresence };\n","'use client';\nimport { useRef, useEffect } from 'react';\n\nconst useUpdateEffect = (effect, deps) => {\n const renderCycleRef = useRef(false);\n const effectCycleRef = useRef(false);\n useEffect(() => {\n const isMounted = renderCycleRef.current;\n const shouldRun = isMounted && effectCycleRef.current;\n if (shouldRun) {\n return effect();\n }\n effectCycleRef.current = true;\n }, deps);\n useEffect(() => {\n renderCycleRef.current = true;\n return () => {\n renderCycleRef.current = false;\n };\n }, []);\n};\n\nexport { useUpdateEffect };\n","'use client';\nimport { useRef, useEffect, useCallback } from 'react';\n\nfunction useCallbackRef(callback, deps = []) {\n const callbackRef = useRef(callback);\n useEffect(() => {\n callbackRef.current = callback;\n });\n return useCallback((...args) => callbackRef.current?.(...args), deps);\n}\n\nexport { useCallbackRef };\n","import { useContext, useId, useEffect, useCallback } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n * const [isPresent, safeToRemove] = usePresence()\n *\n * useEffect(() => {\n * !isPresent && setTimeout(safeToRemove, 1000)\n * }, [isPresent])\n *\n * return \n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence() {\n const context = useContext(PresenceContext);\n if (context === null)\n return [true, null];\n const { isPresent, onExitComplete, register } = context;\n // It's safe to call the following hooks conditionally (after an early return) because the context will always\n // either be null or non-null for the lifespan of the component.\n const id = useId();\n useEffect(() => register(id), []);\n const safeToRemove = useCallback(() => onExitComplete && onExitComplete(id), [id, onExitComplete]);\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n * const isPresent = useIsPresent()\n *\n * useEffect(() => {\n * !isPresent && console.log(\"I've been removed!\")\n * }, [isPresent])\n *\n * return \n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","import { warnOnce } from '../../utils/warn-once.mjs';\n\nfunction createDOMMotionComponentProxy(componentFactory) {\n if (typeof Proxy === \"undefined\") {\n return componentFactory;\n }\n /**\n * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.\n * Rather than generating them anew every render.\n */\n const componentCache = new Map();\n const deprecatedFactoryFunction = (...args) => {\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(false, \"motion() is deprecated. Use motion.create() instead.\");\n }\n return componentFactory(...args);\n };\n return new Proxy(deprecatedFactoryFunction, {\n /**\n * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.\n * The prop name is passed through as `key` and we can use that to generate a `motion`\n * DOM component with that name.\n */\n get: (_target, key) => {\n if (key === \"create\")\n return componentFactory;\n /**\n * If this element doesn't exist in the component cache, create it and cache.\n */\n if (!componentCache.has(key)) {\n componentCache.set(key, componentFactory(key));\n }\n return componentCache.get(key);\n },\n });\n}\n\nexport { createDOMMotionComponentProxy };\n","function isAnimationControls(v) {\n return (v !== null &&\n typeof v === \"object\" &&\n typeof v.start === \"function\");\n}\n\nexport { isAnimationControls };\n","const isKeyframesTarget = (v) => {\n return Array.isArray(v);\n};\n\nexport { isKeyframesTarget };\n","function shallowCompare(next, prev) {\n if (!Array.isArray(prev))\n return false;\n const prevLength = prev.length;\n if (prevLength !== next.length)\n return false;\n for (let i = 0; i < prevLength; i++) {\n if (prev[i] !== next[i])\n return false;\n }\n return true;\n}\n\nexport { shallowCompare };\n","/**\n * Decides if the supplied variable is variant label\n */\nfunction isVariantLabel(v) {\n return typeof v === \"string\" || Array.isArray(v);\n}\n\nexport { isVariantLabel };\n","function getValueState(visualElement) {\n const state = [{}, {}];\n visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {\n state[0][key] = value.get();\n state[1][key] = value.getVelocity();\n });\n return state;\n}\nfunction resolveVariantFromProps(props, definition, custom, visualElement) {\n /**\n * If the variant definition is a function, resolve.\n */\n if (typeof definition === \"function\") {\n const [current, velocity] = getValueState(visualElement);\n definition = definition(custom !== undefined ? custom : props.custom, current, velocity);\n }\n /**\n * If the variant definition is a variant label, or\n * the function returned a variant label, resolve.\n */\n if (typeof definition === \"string\") {\n definition = props.variants && props.variants[definition];\n }\n /**\n * At this point we've resolved both functions and variant labels,\n * but the resolved variant label might itself have been a function.\n * If so, resolve. This can only have returned a valid target object.\n */\n if (typeof definition === \"function\") {\n const [current, velocity] = getValueState(visualElement);\n definition = definition(custom !== undefined ? custom : props.custom, current, velocity);\n }\n return definition;\n}\n\nexport { resolveVariantFromProps };\n","import { resolveVariantFromProps } from './resolve-variants.mjs';\n\nfunction resolveVariant(visualElement, definition, custom) {\n const props = visualElement.getProps();\n return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);\n}\n\nexport { resolveVariant };\n","const variantPriorityOrder = [\n \"animate\",\n \"whileInView\",\n \"whileFocus\",\n \"whileHover\",\n \"whileTap\",\n \"whileDrag\",\n \"exit\",\n];\nconst variantProps = [\"initial\", ...variantPriorityOrder];\n\nexport { variantPriorityOrder, variantProps };\n","/**\n * Generate a list of every possible transform key.\n */\nconst transformPropOrder = [\n \"transformPerspective\",\n \"x\",\n \"y\",\n \"z\",\n \"translateX\",\n \"translateY\",\n \"translateZ\",\n \"scale\",\n \"scaleX\",\n \"scaleY\",\n \"rotate\",\n \"rotateX\",\n \"rotateY\",\n \"rotateZ\",\n \"skew\",\n \"skewX\",\n \"skewY\",\n];\n/**\n * A quick lookup for transform props.\n */\nconst transformProps = new Set(transformPropOrder);\n\nexport { transformPropOrder, transformProps };\n","/**\n * Converts seconds to milliseconds\n *\n * @param seconds - Time in seconds.\n * @return milliseconds - Converted time in milliseconds.\n */\nconst secondsToMilliseconds = (seconds) => seconds * 1000;\nconst millisecondsToSeconds = (milliseconds) => milliseconds / 1000;\n\nexport { millisecondsToSeconds, secondsToMilliseconds };\n","import { transformProps } from '../../render/html/utils/transform.mjs';\n\nconst underDampedSpring = {\n type: \"spring\",\n stiffness: 500,\n damping: 25,\n restSpeed: 10,\n};\nconst criticallyDampedSpring = (target) => ({\n type: \"spring\",\n stiffness: 550,\n damping: target === 0 ? 2 * Math.sqrt(550) : 30,\n restSpeed: 10,\n});\nconst keyframesTransition = {\n type: \"keyframes\",\n duration: 0.8,\n};\n/**\n * Default easing curve is a slightly shallower version of\n * the default browser easing curve.\n */\nconst ease = {\n type: \"keyframes\",\n ease: [0.25, 0.1, 0.35, 1],\n duration: 0.3,\n};\nconst getDefaultTransition = (valueKey, { keyframes }) => {\n if (keyframes.length > 2) {\n return keyframesTransition;\n }\n else if (transformProps.has(valueKey)) {\n return valueKey.startsWith(\"scale\")\n ? criticallyDampedSpring(keyframes[1])\n : underDampedSpring;\n }\n return ease;\n};\n\nexport { getDefaultTransition };\n","function getValueTransition(transition, key) {\n return transition\n ? transition[key] ||\n transition[\"default\"] ||\n transition\n : undefined;\n}\n\nexport { getValueTransition };\n","const MotionGlobalConfig = {\n skipAnimations: false,\n useManualTiming: false,\n};\n\nexport { MotionGlobalConfig };\n","const instantAnimationState = {\n current: false,\n};\n\nexport { instantAnimationState };\n","const isNotNull = (value) => value !== null;\nfunction getFinalKeyframe(keyframes, { repeat, repeatType = \"loop\" }, finalKeyframe) {\n const resolvedKeyframes = keyframes.filter(isNotNull);\n const index = repeat && repeatType !== \"loop\" && repeat % 2 === 1\n ? 0\n : resolvedKeyframes.length - 1;\n return !index || finalKeyframe === undefined\n ? resolvedKeyframes[index]\n : finalKeyframe;\n}\n\nexport { getFinalKeyframe };\n","import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';\nimport { createRenderStep } from './render-step.mjs';\n\nconst stepsOrder = [\n \"read\", // Read\n \"resolveKeyframes\", // Write/Read/Write/Read\n \"update\", // Compute\n \"preRender\", // Compute\n \"render\", // Write\n \"postRender\", // Compute\n];\nconst maxElapsed = 40;\nfunction createRenderBatcher(scheduleNextBatch, allowKeepAlive) {\n let runNextFrame = false;\n let useDefaultElapsed = true;\n const state = {\n delta: 0.0,\n timestamp: 0.0,\n isProcessing: false,\n };\n const flagRunNextFrame = () => (runNextFrame = true);\n const steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(flagRunNextFrame);\n return acc;\n }, {});\n const { read, resolveKeyframes, update, preRender, render, postRender } = steps;\n const processBatch = () => {\n const timestamp = MotionGlobalConfig.useManualTiming\n ? state.timestamp\n : performance.now();\n runNextFrame = false;\n state.delta = useDefaultElapsed\n ? 1000 / 60\n : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);\n state.timestamp = timestamp;\n state.isProcessing = true;\n // Unrolled render loop for better per-frame performance\n read.process(state);\n resolveKeyframes.process(state);\n update.process(state);\n preRender.process(state);\n render.process(state);\n postRender.process(state);\n state.isProcessing = false;\n if (runNextFrame && allowKeepAlive) {\n useDefaultElapsed = false;\n scheduleNextBatch(processBatch);\n }\n };\n const wake = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!state.isProcessing) {\n scheduleNextBatch(processBatch);\n }\n };\n const schedule = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n wake();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n }, {});\n const cancel = (process) => {\n for (let i = 0; i < stepsOrder.length; i++) {\n steps[stepsOrder[i]].cancel(process);\n }\n };\n return { schedule, cancel, state, steps };\n}\n\nexport { createRenderBatcher, stepsOrder };\n","function createRenderStep(runNextFrame) {\n /**\n * We create and reuse two queues, one to queue jobs for the current frame\n * and one for the next. We reuse to avoid triggering GC after x frames.\n */\n let thisFrame = new Set();\n let nextFrame = new Set();\n /**\n * Track whether we're currently processing jobs in this step. This way\n * we can decide whether to schedule new jobs for this frame or next.\n */\n let isProcessing = false;\n let flushNextFrame = false;\n /**\n * A set of processes which were marked keepAlive when scheduled.\n */\n const toKeepAlive = new WeakSet();\n let latestFrameData = {\n delta: 0.0,\n timestamp: 0.0,\n isProcessing: false,\n };\n function triggerCallback(callback) {\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n callback(latestFrameData);\n }\n const step = {\n /**\n * Schedule a process to run on the next frame.\n */\n schedule: (callback, keepAlive = false, immediate = false) => {\n const addToCurrentFrame = immediate && isProcessing;\n const queue = addToCurrentFrame ? thisFrame : nextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n if (!queue.has(callback))\n queue.add(callback);\n return callback;\n },\n /**\n * Cancel the provided callback from running on the next frame.\n */\n cancel: (callback) => {\n nextFrame.delete(callback);\n toKeepAlive.delete(callback);\n },\n /**\n * Execute all schedule callbacks.\n */\n process: (frameData) => {\n latestFrameData = frameData;\n /**\n * If we're already processing we've probably been triggered by a flushSync\n * inside an existing process. Instead of executing, mark flushNextFrame\n * as true and ensure we flush the following frame at the end of this one.\n */\n if (isProcessing) {\n flushNextFrame = true;\n return;\n }\n isProcessing = true;\n [thisFrame, nextFrame] = [nextFrame, thisFrame];\n // Clear the next frame queue\n nextFrame.clear();\n // Execute this frame\n thisFrame.forEach(triggerCallback);\n isProcessing = false;\n if (flushNextFrame) {\n flushNextFrame = false;\n step.process(frameData);\n }\n },\n };\n return step;\n}\n\nexport { createRenderStep };\n","import { noop } from '../utils/noop.mjs';\nimport { createRenderBatcher } from './batcher.mjs';\n\nconst { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== \"undefined\" ? requestAnimationFrame : noop, true);\n\nexport { cancelFrame, frame, frameData, frameSteps };\n","import { noop } from '../utils/noop.mjs';\n\n/*\n Bezier function generator\n This has been modified from Gaëtan Renaudeau's BezierEasing\n https://github.com/gre/bezier-easing/blob/master/src/index.js\n https://github.com/gre/bezier-easing/blob/master/LICENSE\n \n I've removed the newtonRaphsonIterate algo because in benchmarking it\n wasn't noticiably faster than binarySubdivision, indeed removing it\n usually improved times, depending on the curve.\n I also removed the lookup table, as for the added bundle size and loop we're\n only cutting ~4 or so subdivision iterations. I bumped the max iterations up\n to 12 to compensate and this still tended to be faster for no perceivable\n loss in accuracy.\n Usage\n const easeOut = cubicBezier(.17,.67,.83,.67);\n const x = easeOut(0.5); // returns 0.627...\n*/\n// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.\nconst calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *\n t;\nconst subdivisionPrecision = 0.0000001;\nconst subdivisionMaxIterations = 12;\nfunction binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {\n let currentX;\n let currentT;\n let i = 0;\n do {\n currentT = lowerBound + (upperBound - lowerBound) / 2.0;\n currentX = calcBezier(currentT, mX1, mX2) - x;\n if (currentX > 0.0) {\n upperBound = currentT;\n }\n else {\n lowerBound = currentT;\n }\n } while (Math.abs(currentX) > subdivisionPrecision &&\n ++i < subdivisionMaxIterations);\n return currentT;\n}\nfunction cubicBezier(mX1, mY1, mX2, mY2) {\n // If this is a linear gradient, return linear easing\n if (mX1 === mY1 && mX2 === mY2)\n return noop;\n const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);\n // If animation is at start/end, return t without easing\n return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);\n}\n\nexport { cubicBezier };\n","// Accepts an easing function and returns a new one that outputs mirrored values for\n// the second half of the animation. Turns easeIn into easeInOut.\nconst mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;\n\nexport { mirrorEasing };\n","// Accepts an easing function and returns a new one that outputs reversed values.\n// Turns easeIn into easeOut.\nconst reverseEasing = (easing) => (p) => 1 - easing(1 - p);\n\nexport { reverseEasing };\n","import { cubicBezier } from './cubic-bezier.mjs';\nimport { mirrorEasing } from './modifiers/mirror.mjs';\nimport { reverseEasing } from './modifiers/reverse.mjs';\n\nconst backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);\nconst backIn = /*@__PURE__*/ reverseEasing(backOut);\nconst backInOut = /*@__PURE__*/ mirrorEasing(backIn);\n\nexport { backIn, backInOut, backOut };\n","import { backIn } from './back.mjs';\n\nconst anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));\n\nexport { anticipate };\n","import { mirrorEasing } from './modifiers/mirror.mjs';\nimport { reverseEasing } from './modifiers/reverse.mjs';\n\nconst circIn = (p) => 1 - Math.sin(Math.acos(p));\nconst circOut = reverseEasing(circIn);\nconst circInOut = mirrorEasing(circIn);\n\nexport { circIn, circInOut, circOut };\n","/**\n * Check if the value is a zero value string like \"0px\" or \"0%\"\n */\nconst isZeroValueString = (v) => /^0[^.\\s]+$/u.test(v);\n\nexport { isZeroValueString };\n","/**\n * Check if value is a numerical string, ie a string that is purely a number eg \"100\" or \"-100.1\"\n */\nconst isNumericalString = (v) => /^-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)$/u.test(v);\n\nexport { isNumericalString };\n","const checkStringStartsWith = (token) => (key) => typeof key === \"string\" && key.startsWith(token);\nconst isCSSVariableName = \n/*@__PURE__*/ checkStringStartsWith(\"--\");\nconst startsAsVariableToken = \n/*@__PURE__*/ checkStringStartsWith(\"var(--\");\nconst isCSSVariableToken = (value) => {\n const startsWithToken = startsAsVariableToken(value);\n if (!startsWithToken)\n return false;\n // Ensure any comments are stripped from the value as this can harm performance of the regex.\n return singleCssVariableRegex.test(value.split(\"/*\")[0].trim());\n};\nconst singleCssVariableRegex = /var\\(--(?:[\\w-]+\\s*|[\\w-]+\\s*,(?:\\s*[^)(\\s]|\\s*\\((?:[^)(]|\\([^)(]*\\))*\\))+\\s*)\\)$/iu;\n\nexport { isCSSVariableName, isCSSVariableToken };\n","import { invariant } from '../../../utils/errors.mjs';\nimport { isNumericalString } from '../../../utils/is-numerical-string.mjs';\nimport { isCSSVariableToken } from './is-css-variable.mjs';\n\n/**\n * Parse Framer's special CSS variable format into a CSS token and a fallback.\n *\n * ```\n * `var(--foo, #fff)` => [`--foo`, '#fff']\n * ```\n *\n * @param current\n */\nconst splitCSSVariableRegex = \n// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words\n/^var\\(--(?:([\\w-]+)|([\\w-]+), ?([a-zA-Z\\d ()%#.,-]+))\\)/u;\nfunction parseCSSVariable(current) {\n const match = splitCSSVariableRegex.exec(current);\n if (!match)\n return [,];\n const [, token1, token2, fallback] = match;\n return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];\n}\nconst maxDepth = 4;\nfunction getVariableValue(current, element, depth = 1) {\n invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property \"${current}\". This may indicate a circular fallback dependency.`);\n const [token, fallback] = parseCSSVariable(current);\n // No CSS variable detected\n if (!token)\n return;\n // Attempt to read this CSS variable off the element\n const resolved = window.getComputedStyle(element).getPropertyValue(token);\n if (resolved) {\n const trimmed = resolved.trim();\n return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;\n }\n return isCSSVariableToken(fallback)\n ? getVariableValue(fallback, element, depth + 1)\n : fallback;\n}\n\nexport { getVariableValue, parseCSSVariable };\n","const clamp = (min, max, v) => {\n if (v > max)\n return max;\n if (v < min)\n return min;\n return v;\n};\n\nexport { clamp };\n","import { clamp } from '../../../utils/clamp.mjs';\n\nconst number = {\n test: (v) => typeof v === \"number\",\n parse: parseFloat,\n transform: (v) => v,\n};\nconst alpha = {\n ...number,\n transform: (v) => clamp(0, 1, v),\n};\nconst scale = {\n ...number,\n default: 1,\n};\n\nexport { alpha, number, scale };\n","const createUnitType = (unit) => ({\n test: (v) => typeof v === \"string\" && v.endsWith(unit) && v.split(\" \").length === 1,\n parse: parseFloat,\n transform: (v) => `${v}${unit}`,\n});\nconst degrees = /*@__PURE__*/ createUnitType(\"deg\");\nconst percent = /*@__PURE__*/ createUnitType(\"%\");\nconst px = /*@__PURE__*/ createUnitType(\"px\");\nconst vh = /*@__PURE__*/ createUnitType(\"vh\");\nconst vw = /*@__PURE__*/ createUnitType(\"vw\");\nconst progressPercentage = {\n ...percent,\n parse: (v) => percent.parse(v) / 100,\n transform: (v) => percent.transform(v * 100),\n};\n\nexport { degrees, percent, progressPercentage, px, vh, vw };\n","import { transformPropOrder } from '../../html/utils/transform.mjs';\nimport { number } from '../../../value/types/numbers/index.mjs';\nimport { px } from '../../../value/types/numbers/units.mjs';\n\nconst positionalKeys = new Set([\n \"width\",\n \"height\",\n \"top\",\n \"left\",\n \"right\",\n \"bottom\",\n \"x\",\n \"y\",\n \"translateX\",\n \"translateY\",\n]);\nconst isNumOrPxType = (v) => v === number || v === px;\nconst getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(\", \")[pos]);\nconst getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {\n if (transform === \"none\" || !transform)\n return 0;\n const matrix3d = transform.match(/^matrix3d\\((.+)\\)$/u);\n if (matrix3d) {\n return getPosFromMatrix(matrix3d[1], pos3);\n }\n else {\n const matrix = transform.match(/^matrix\\((.+)\\)$/u);\n if (matrix) {\n return getPosFromMatrix(matrix[1], pos2);\n }\n else {\n return 0;\n }\n }\n};\nconst transformKeys = new Set([\"x\", \"y\", \"z\"]);\nconst nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));\nfunction removeNonTranslationalTransform(visualElement) {\n const removedTransforms = [];\n nonTranslationalTransformKeys.forEach((key) => {\n const value = visualElement.getValue(key);\n if (value !== undefined) {\n removedTransforms.push([key, value.get()]);\n value.set(key.startsWith(\"scale\") ? 1 : 0);\n }\n });\n return removedTransforms;\n}\nconst positionalValues = {\n // Dimensions\n width: ({ x }, { paddingLeft = \"0\", paddingRight = \"0\" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),\n height: ({ y }, { paddingTop = \"0\", paddingBottom = \"0\" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),\n top: (_bbox, { top }) => parseFloat(top),\n left: (_bbox, { left }) => parseFloat(left),\n bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),\n right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),\n // Transform\n x: getTranslateFromMatrix(4, 13),\n y: getTranslateFromMatrix(5, 14),\n};\n// Alias translate longform names\npositionalValues.translateX = positionalValues.x;\npositionalValues.translateY = positionalValues.y;\n\nexport { isNumOrPxType, positionalKeys, positionalValues, removeNonTranslationalTransform };\n","/**\n * Tests a provided value against a ValueType\n */\nconst testValueType = (v) => (type) => type.test(v);\n\nexport { testValueType };\n","import { number } from '../../../value/types/numbers/index.mjs';\nimport { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.mjs';\nimport { testValueType } from './test.mjs';\nimport { auto } from './type-auto.mjs';\n\n/**\n * A list of value types commonly used for dimensions\n */\nconst dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];\n/**\n * Tests a dimensional value against the list of dimension ValueTypes\n */\nconst findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));\n\nexport { dimensionValueTypes, findDimensionValueType };\n","/**\n * ValueType for \"auto\"\n */\nconst auto = {\n test: (v) => v === \"auto\",\n parse: (v) => v,\n};\n\nexport { auto };\n","import { removeNonTranslationalTransform } from '../dom/utils/unit-conversion.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst toResolve = new Set();\nlet isScheduled = false;\nlet anyNeedsMeasurement = false;\nfunction measureAllKeyframes() {\n if (anyNeedsMeasurement) {\n const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);\n const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));\n const transformsToRestore = new Map();\n /**\n * Write pass\n * If we're measuring elements we want to remove bounding box-changing transforms.\n */\n elementsToMeasure.forEach((element) => {\n const removedTransforms = removeNonTranslationalTransform(element);\n if (!removedTransforms.length)\n return;\n transformsToRestore.set(element, removedTransforms);\n element.render();\n });\n // Read\n resolversToMeasure.forEach((resolver) => resolver.measureInitialState());\n // Write\n elementsToMeasure.forEach((element) => {\n element.render();\n const restore = transformsToRestore.get(element);\n if (restore) {\n restore.forEach(([key, value]) => {\n var _a;\n (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);\n });\n }\n });\n // Read\n resolversToMeasure.forEach((resolver) => resolver.measureEndState());\n // Write\n resolversToMeasure.forEach((resolver) => {\n if (resolver.suspendedScrollY !== undefined) {\n window.scrollTo(0, resolver.suspendedScrollY);\n }\n });\n }\n anyNeedsMeasurement = false;\n isScheduled = false;\n toResolve.forEach((resolver) => resolver.complete());\n toResolve.clear();\n}\nfunction readAllKeyframes() {\n toResolve.forEach((resolver) => {\n resolver.readKeyframes();\n if (resolver.needsMeasurement) {\n anyNeedsMeasurement = true;\n }\n });\n}\nfunction flushKeyframeResolvers() {\n readAllKeyframes();\n measureAllKeyframes();\n}\nclass KeyframeResolver {\n constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {\n /**\n * Track whether this resolver has completed. Once complete, it never\n * needs to attempt keyframe resolution again.\n */\n this.isComplete = false;\n /**\n * Track whether this resolver is async. If it is, it'll be added to the\n * resolver queue and flushed in the next frame. Resolvers that aren't going\n * to trigger read/write thrashing don't need to be async.\n */\n this.isAsync = false;\n /**\n * Track whether this resolver needs to perform a measurement\n * to resolve its keyframes.\n */\n this.needsMeasurement = false;\n /**\n * Track whether this resolver is currently scheduled to resolve\n * to allow it to be cancelled and resumed externally.\n */\n this.isScheduled = false;\n this.unresolvedKeyframes = [...unresolvedKeyframes];\n this.onComplete = onComplete;\n this.name = name;\n this.motionValue = motionValue;\n this.element = element;\n this.isAsync = isAsync;\n }\n scheduleResolve() {\n this.isScheduled = true;\n if (this.isAsync) {\n toResolve.add(this);\n if (!isScheduled) {\n isScheduled = true;\n frame.read(readAllKeyframes);\n frame.resolveKeyframes(measureAllKeyframes);\n }\n }\n else {\n this.readKeyframes();\n this.complete();\n }\n }\n readKeyframes() {\n const { unresolvedKeyframes, name, element, motionValue } = this;\n /**\n * If a keyframe is null, we hydrate it either by reading it from\n * the instance, or propagating from previous keyframes.\n */\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n if (unresolvedKeyframes[i] === null) {\n /**\n * If the first keyframe is null, we need to find its value by sampling the element\n */\n if (i === 0) {\n const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();\n const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];\n if (currentValue !== undefined) {\n unresolvedKeyframes[0] = currentValue;\n }\n else if (element && name) {\n const valueAsRead = element.readValue(name, finalKeyframe);\n if (valueAsRead !== undefined && valueAsRead !== null) {\n unresolvedKeyframes[0] = valueAsRead;\n }\n }\n if (unresolvedKeyframes[0] === undefined) {\n unresolvedKeyframes[0] = finalKeyframe;\n }\n if (motionValue && currentValue === undefined) {\n motionValue.set(unresolvedKeyframes[0]);\n }\n }\n else {\n unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];\n }\n }\n }\n }\n setFinalKeyframe() { }\n measureInitialState() { }\n renderEndStyles() { }\n measureEndState() { }\n complete() {\n this.isComplete = true;\n this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);\n toResolve.delete(this);\n }\n cancel() {\n if (!this.isComplete) {\n this.isScheduled = false;\n toResolve.delete(this);\n }\n }\n resume() {\n if (!this.isComplete)\n this.scheduleResolve();\n }\n}\n\nexport { KeyframeResolver, flushKeyframeResolvers };\n","// If this number is a decimal, make it just five decimal places\n// to avoid exponents\nconst sanitize = (v) => Math.round(v * 100000) / 100000;\n\nexport { sanitize };\n","const floatRegex = /-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)/gu;\n\nexport { floatRegex };\n","const singleColorRegex = /^(?:#[\\da-f]{3,8}|(?:rgb|hsl)a?\\((?:-?[\\d.]+%?[,\\s]+){2}-?[\\d.]+%?\\s*(?:[,/]\\s*)?(?:\\b\\d+(?:\\.\\d+)?|\\.\\d+)?%?\\))$/iu;\n\nexport { singleColorRegex };\n","import { floatRegex } from '../utils/float-regex.mjs';\nimport { isNullish } from '../utils/is-nullish.mjs';\nimport { singleColorRegex } from '../utils/single-color-regex.mjs';\n\n/**\n * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,\n * but false if a number or multiple colors\n */\nconst isColorString = (type, testProp) => (v) => {\n return Boolean((typeof v === \"string\" &&\n singleColorRegex.test(v) &&\n v.startsWith(type)) ||\n (testProp &&\n !isNullish(v) &&\n Object.prototype.hasOwnProperty.call(v, testProp)));\n};\nconst splitColor = (aName, bName, cName) => (v) => {\n if (typeof v !== \"string\")\n return v;\n const [a, b, c, alpha] = v.match(floatRegex);\n return {\n [aName]: parseFloat(a),\n [bName]: parseFloat(b),\n [cName]: parseFloat(c),\n alpha: alpha !== undefined ? parseFloat(alpha) : 1,\n };\n};\n\nexport { isColorString, splitColor };\n","function isNullish(v) {\n return v == null;\n}\n\nexport { isNullish };\n","import { clamp } from '../../../utils/clamp.mjs';\nimport { alpha, number } from '../numbers/index.mjs';\nimport { sanitize } from '../utils/sanitize.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst clampRgbUnit = (v) => clamp(0, 255, v);\nconst rgbUnit = {\n ...number,\n transform: (v) => Math.round(clampRgbUnit(v)),\n};\nconst rgba = {\n test: /*@__PURE__*/ isColorString(\"rgb\", \"red\"),\n parse: /*@__PURE__*/ splitColor(\"red\", \"green\", \"blue\"),\n transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => \"rgba(\" +\n rgbUnit.transform(red) +\n \", \" +\n rgbUnit.transform(green) +\n \", \" +\n rgbUnit.transform(blue) +\n \", \" +\n sanitize(alpha.transform(alpha$1)) +\n \")\",\n};\n\nexport { rgbUnit, rgba };\n","import { rgba } from './rgba.mjs';\nimport { isColorString } from './utils.mjs';\n\nfunction parseHex(v) {\n let r = \"\";\n let g = \"\";\n let b = \"\";\n let a = \"\";\n // If we have 6 characters, ie #FF0000\n if (v.length > 5) {\n r = v.substring(1, 3);\n g = v.substring(3, 5);\n b = v.substring(5, 7);\n a = v.substring(7, 9);\n // Or we have 3 characters, ie #F00\n }\n else {\n r = v.substring(1, 2);\n g = v.substring(2, 3);\n b = v.substring(3, 4);\n a = v.substring(4, 5);\n r += r;\n g += g;\n b += b;\n a += a;\n }\n return {\n red: parseInt(r, 16),\n green: parseInt(g, 16),\n blue: parseInt(b, 16),\n alpha: a ? parseInt(a, 16) / 255 : 1,\n };\n}\nconst hex = {\n test: /*@__PURE__*/ isColorString(\"#\"),\n parse: parseHex,\n transform: rgba.transform,\n};\n\nexport { hex };\n","import { alpha } from '../numbers/index.mjs';\nimport { percent } from '../numbers/units.mjs';\nimport { sanitize } from '../utils/sanitize.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst hsla = {\n test: /*@__PURE__*/ isColorString(\"hsl\", \"hue\"),\n parse: /*@__PURE__*/ splitColor(\"hue\", \"saturation\", \"lightness\"),\n transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {\n return (\"hsla(\" +\n Math.round(hue) +\n \", \" +\n percent.transform(sanitize(saturation)) +\n \", \" +\n percent.transform(sanitize(lightness)) +\n \", \" +\n sanitize(alpha.transform(alpha$1)) +\n \")\");\n },\n};\n\nexport { hsla };\n","import { hex } from './hex.mjs';\nimport { hsla } from './hsla.mjs';\nimport { rgba } from './rgba.mjs';\n\nconst color = {\n test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),\n parse: (v) => {\n if (rgba.test(v)) {\n return rgba.parse(v);\n }\n else if (hsla.test(v)) {\n return hsla.parse(v);\n }\n else {\n return hex.parse(v);\n }\n },\n transform: (v) => {\n return typeof v === \"string\"\n ? v\n : v.hasOwnProperty(\"red\")\n ? rgba.transform(v)\n : hsla.transform(v);\n },\n};\n\nexport { color };\n","const colorRegex = /(?:#[\\da-f]{3,8}|(?:rgb|hsl)a?\\((?:-?[\\d.]+%?[,\\s]+){2}-?[\\d.]+%?\\s*(?:[,/]\\s*)?(?:\\b\\d+(?:\\.\\d+)?|\\.\\d+)?%?\\))/giu;\n\nexport { colorRegex };\n","import { color } from '../color/index.mjs';\nimport { colorRegex } from '../utils/color-regex.mjs';\nimport { floatRegex } from '../utils/float-regex.mjs';\nimport { sanitize } from '../utils/sanitize.mjs';\n\nfunction test(v) {\n var _a, _b;\n return (isNaN(v) &&\n typeof v === \"string\" &&\n (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +\n (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >\n 0);\n}\nconst NUMBER_TOKEN = \"number\";\nconst COLOR_TOKEN = \"color\";\nconst VAR_TOKEN = \"var\";\nconst VAR_FUNCTION_TOKEN = \"var(\";\nconst SPLIT_TOKEN = \"${}\";\n// this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`\nconst complexRegex = /var\\s*\\(\\s*--(?:[\\w-]+\\s*|[\\w-]+\\s*,(?:\\s*[^)(\\s]|\\s*\\((?:[^)(]|\\([^)(]*\\))*\\))+\\s*)\\)|#[\\da-f]{3,8}|(?:rgb|hsl)a?\\((?:-?[\\d.]+%?[,\\s]+){2}-?[\\d.]+%?\\s*(?:[,/]\\s*)?(?:\\b\\d+(?:\\.\\d+)?|\\.\\d+)?%?\\)|-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)/giu;\nfunction analyseComplexValue(value) {\n const originalValue = value.toString();\n const values = [];\n const indexes = {\n color: [],\n number: [],\n var: [],\n };\n const types = [];\n let i = 0;\n const tokenised = originalValue.replace(complexRegex, (parsedValue) => {\n if (color.test(parsedValue)) {\n indexes.color.push(i);\n types.push(COLOR_TOKEN);\n values.push(color.parse(parsedValue));\n }\n else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {\n indexes.var.push(i);\n types.push(VAR_TOKEN);\n values.push(parsedValue);\n }\n else {\n indexes.number.push(i);\n types.push(NUMBER_TOKEN);\n values.push(parseFloat(parsedValue));\n }\n ++i;\n return SPLIT_TOKEN;\n });\n const split = tokenised.split(SPLIT_TOKEN);\n return { values, split, indexes, types };\n}\nfunction parseComplexValue(v) {\n return analyseComplexValue(v).values;\n}\nfunction createTransformer(source) {\n const { split, types } = analyseComplexValue(source);\n const numSections = split.length;\n return (v) => {\n let output = \"\";\n for (let i = 0; i < numSections; i++) {\n output += split[i];\n if (v[i] !== undefined) {\n const type = types[i];\n if (type === NUMBER_TOKEN) {\n output += sanitize(v[i]);\n }\n else if (type === COLOR_TOKEN) {\n output += color.transform(v[i]);\n }\n else {\n output += v[i];\n }\n }\n }\n return output;\n };\n}\nconst convertNumbersToZero = (v) => typeof v === \"number\" ? 0 : v;\nfunction getAnimatableNone(v) {\n const parsed = parseComplexValue(v);\n const transformer = createTransformer(v);\n return transformer(parsed.map(convertNumbersToZero));\n}\nconst complex = {\n test,\n parse: parseComplexValue,\n createTransformer,\n getAnimatableNone,\n};\n\nexport { analyseComplexValue, complex };\n","import { complex } from './index.mjs';\nimport { floatRegex } from '../utils/float-regex.mjs';\n\n/**\n * Properties that should default to 1 or 100%\n */\nconst maxDefaults = new Set([\"brightness\", \"contrast\", \"saturate\", \"opacity\"]);\nfunction applyDefaultFilter(v) {\n const [name, value] = v.slice(0, -1).split(\"(\");\n if (name === \"drop-shadow\")\n return v;\n const [number] = value.match(floatRegex) || [];\n if (!number)\n return v;\n const unit = value.replace(number, \"\");\n let defaultValue = maxDefaults.has(name) ? 1 : 0;\n if (number !== value)\n defaultValue *= 100;\n return name + \"(\" + defaultValue + unit + \")\";\n}\nconst functionRegex = /\\b([a-z-]*)\\(.*?\\)/gu;\nconst filter = {\n ...complex,\n getAnimatableNone: (v) => {\n const functions = v.match(functionRegex);\n return functions ? functions.map(applyDefaultFilter).join(\" \") : v;\n },\n};\n\nexport { filter };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nconst browserNumberValueTypes = {\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 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 // Misc\n backgroundPositionX: px,\n backgroundPositionY: px,\n};\n\nexport { browserNumberValueTypes };\n","import { scale, alpha } from '../../../value/types/numbers/index.mjs';\nimport { degrees, px, progressPercentage } from '../../../value/types/numbers/units.mjs';\n\nconst transformValueTypes = {\n rotate: degrees,\n rotateX: degrees,\n rotateY: degrees,\n rotateZ: degrees,\n scale,\n scaleX: scale,\n scaleY: scale,\n scaleZ: scale,\n skew: degrees,\n skewX: degrees,\n skewY: degrees,\n distance: px,\n translateX: px,\n translateY: px,\n translateZ: px,\n x: px,\n y: px,\n z: px,\n perspective: px,\n transformPerspective: px,\n opacity: alpha,\n originX: progressPercentage,\n originY: progressPercentage,\n originZ: px,\n};\n\nexport { transformValueTypes };\n","import { number } from '../../../value/types/numbers/index.mjs';\n\nconst int = {\n ...number,\n transform: Math.round,\n};\n\nexport { int };\n","import { alpha } from '../../../value/types/numbers/index.mjs';\nimport { px } from '../../../value/types/numbers/units.mjs';\nimport { browserNumberValueTypes } from './number-browser.mjs';\nimport { transformValueTypes } from './transform.mjs';\nimport { int } from './type-int.mjs';\n\nconst numberValueTypes = {\n ...browserNumberValueTypes,\n ...transformValueTypes,\n zIndex: int,\n size: px,\n // SVG\n fillOpacity: alpha,\n strokeOpacity: alpha,\n numOctaves: int,\n};\n\nexport { numberValueTypes };\n","import { color } from '../../../value/types/color/index.mjs';\nimport { filter } from '../../../value/types/complex/filter.mjs';\nimport { numberValueTypes } from './number.mjs';\n\n/**\n * A map of default value types for common values\n */\nconst defaultValueTypes = {\n ...numberValueTypes,\n // Color props\n color,\n backgroundColor: color,\n outlineColor: color,\n fill: color,\n stroke: color,\n // Border props\n borderColor: color,\n borderTopColor: color,\n borderRightColor: color,\n borderBottomColor: color,\n borderLeftColor: color,\n filter,\n WebkitFilter: filter,\n};\n/**\n * Gets the default ValueType for the provided value key\n */\nconst getDefaultValueType = (key) => defaultValueTypes[key];\n\nexport { defaultValueTypes, getDefaultValueType };\n","import { complex } from '../../../value/types/complex/index.mjs';\nimport { filter } from '../../../value/types/complex/filter.mjs';\nimport { getDefaultValueType } from './defaults.mjs';\n\nfunction getAnimatableNone(key, value) {\n let defaultValueType = getDefaultValueType(key);\n if (defaultValueType !== filter)\n defaultValueType = complex;\n // If value is not recognised as animatable, ie \"none\", create an animatable version origin based on the target\n return defaultValueType.getAnimatableNone\n ? defaultValueType.getAnimatableNone(value)\n : undefined;\n}\n\nexport { getAnimatableNone };\n","import { analyseComplexValue } from '../../../value/types/complex/index.mjs';\nimport { getAnimatableNone } from '../../dom/value-types/animatable-none.mjs';\n\n/**\n * If we encounter keyframes like \"none\" or \"0\" and we also have keyframes like\n * \"#fff\" or \"200px 200px\" we want to find a keyframe to serve as a template for\n * the \"none\" keyframes. In this case \"#fff\" or \"200px 200px\" - then these get turned into\n * zero equivalents, i.e. \"#fff0\" or \"0px 0px\".\n */\nconst invalidTemplates = new Set([\"auto\", \"none\", \"0\"]);\nfunction makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {\n let i = 0;\n let animatableTemplate = undefined;\n while (i < unresolvedKeyframes.length && !animatableTemplate) {\n const keyframe = unresolvedKeyframes[i];\n if (typeof keyframe === \"string\" &&\n !invalidTemplates.has(keyframe) &&\n analyseComplexValue(keyframe).values.length) {\n animatableTemplate = unresolvedKeyframes[i];\n }\n i++;\n }\n if (animatableTemplate && name) {\n for (const noneIndex of noneKeyframeIndexes) {\n unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);\n }\n }\n}\n\nexport { makeNoneKeyframesAnimatable };\n","import { isNone } from '../../animation/utils/is-none.mjs';\nimport { getVariableValue } from './utils/css-variables-conversion.mjs';\nimport { isCSSVariableToken } from './utils/is-css-variable.mjs';\nimport { positionalKeys, isNumOrPxType, positionalValues } from './utils/unit-conversion.mjs';\nimport { findDimensionValueType } from './value-types/dimensions.mjs';\nimport { KeyframeResolver } from '../utils/KeyframesResolver.mjs';\nimport { makeNoneKeyframesAnimatable } from '../html/utils/make-none-animatable.mjs';\n\nclass DOMKeyframesResolver extends KeyframeResolver {\n constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {\n super(unresolvedKeyframes, onComplete, name, motionValue, element, true);\n }\n readKeyframes() {\n const { unresolvedKeyframes, element, name } = this;\n if (!element || !element.current)\n return;\n super.readKeyframes();\n /**\n * If any keyframe is a CSS variable, we need to find its value by sampling the element\n */\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n let keyframe = unresolvedKeyframes[i];\n if (typeof keyframe === \"string\") {\n keyframe = keyframe.trim();\n if (isCSSVariableToken(keyframe)) {\n const resolved = getVariableValue(keyframe, element.current);\n if (resolved !== undefined) {\n unresolvedKeyframes[i] = resolved;\n }\n if (i === unresolvedKeyframes.length - 1) {\n this.finalKeyframe = keyframe;\n }\n }\n }\n }\n /**\n * Resolve \"none\" values. We do this potentially twice - once before and once after measuring keyframes.\n * This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which\n * have a far bigger performance impact.\n */\n this.resolveNoneKeyframes();\n /**\n * Check to see if unit type has changed. If so schedule jobs that will\n * temporarily set styles to the destination keyframes.\n * Skip if we have more than two keyframes or this isn't a positional value.\n * TODO: We can throw if there are multiple keyframes and the value type changes.\n */\n if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {\n return;\n }\n const [origin, target] = unresolvedKeyframes;\n const originType = findDimensionValueType(origin);\n const targetType = findDimensionValueType(target);\n /**\n * Either we don't recognise these value types or we can animate between them.\n */\n if (originType === targetType)\n return;\n /**\n * If both values are numbers or pixels, we can animate between them by\n * converting them to numbers.\n */\n if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n const value = unresolvedKeyframes[i];\n if (typeof value === \"string\") {\n unresolvedKeyframes[i] = parseFloat(value);\n }\n }\n }\n else {\n /**\n * Else, the only way to resolve this is by measuring the element.\n */\n this.needsMeasurement = true;\n }\n }\n resolveNoneKeyframes() {\n const { unresolvedKeyframes, name } = this;\n const noneKeyframeIndexes = [];\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n if (isNone(unresolvedKeyframes[i])) {\n noneKeyframeIndexes.push(i);\n }\n }\n if (noneKeyframeIndexes.length) {\n makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);\n }\n }\n measureInitialState() {\n const { element, unresolvedKeyframes, name } = this;\n if (!element || !element.current)\n return;\n if (name === \"height\") {\n this.suspendedScrollY = window.pageYOffset;\n }\n this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));\n unresolvedKeyframes[0] = this.measuredOrigin;\n // Set final key frame to measure after next render\n const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];\n if (measureKeyframe !== undefined) {\n element.getValue(name, measureKeyframe).jump(measureKeyframe, false);\n }\n }\n measureEndState() {\n var _a;\n const { element, name, unresolvedKeyframes } = this;\n if (!element || !element.current)\n return;\n const value = element.getValue(name);\n value && value.jump(this.measuredOrigin, false);\n const finalKeyframeIndex = unresolvedKeyframes.length - 1;\n const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];\n unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));\n if (finalKeyframe !== null && this.finalKeyframe === undefined) {\n this.finalKeyframe = finalKeyframe;\n }\n // If we removed transform values, reapply them before the next render\n if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) {\n this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {\n element\n .getValue(unsetTransformName)\n .set(unsetTransformValue);\n });\n }\n this.resolveNoneKeyframes();\n }\n}\n\nexport { DOMKeyframesResolver };\n","import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';\n\nfunction isNone(value) {\n if (typeof value === \"number\") {\n return value === 0;\n }\n else if (value !== null) {\n return value === \"none\" || value === \"0\" || isZeroValueString(value);\n }\n else {\n return true;\n }\n}\n\nexport { isNone };\n","function isGenerator(type) {\n return typeof type === \"function\";\n}\n\nexport { isGenerator };\n","import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';\nimport { frameData } from './frame.mjs';\n\nlet now;\nfunction clearTime() {\n now = undefined;\n}\n/**\n * An eventloop-synchronous alternative to performance.now().\n *\n * Ensures that time measurements remain consistent within a synchronous context.\n * Usually calling performance.now() twice within the same synchronous context\n * will return different values which isn't useful for animations when we're usually\n * trying to sync animations to the same frame.\n */\nconst time = {\n now: () => {\n if (now === undefined) {\n time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming\n ? frameData.timestamp\n : performance.now());\n }\n return now;\n },\n set: (newTime) => {\n now = newTime;\n queueMicrotask(clearTime);\n },\n};\n\nexport { time };\n","import { complex } from '../../value/types/complex/index.mjs';\n\n/**\n * Check if a value is animatable. Examples:\n *\n * ✅: 100, \"100px\", \"#fff\"\n * ❌: \"block\", \"url(2.jpg)\"\n * @param value\n *\n * @internal\n */\nconst isAnimatable = (value, name) => {\n // If the list of keys tat might be non-animatable grows, replace with Set\n if (name === \"zIndex\")\n return false;\n // If it's a number or a keyframes array, we can animate it. We might at some point\n // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,\n // but for now lets leave it like this for performance reasons\n if (typeof value === \"number\" || Array.isArray(value))\n return true;\n if (typeof value === \"string\" && // It's animatable if we have a string\n (complex.test(value) || value === \"0\") && // And it contains numbers and/or colors\n !value.startsWith(\"url(\") // Unless it starts with \"url(\"\n ) {\n return true;\n }\n return false;\n};\n\nexport { isAnimatable };\n","import { warning } from '../../../utils/errors.mjs';\nimport { isGenerator } from '../../generators/utils/is-generator.mjs';\nimport { isAnimatable } from '../../utils/is-animatable.mjs';\n\nfunction hasKeyframesChanged(keyframes) {\n const current = keyframes[0];\n if (keyframes.length === 1)\n return true;\n for (let i = 0; i < keyframes.length; i++) {\n if (keyframes[i] !== current)\n return true;\n }\n}\nfunction canAnimate(keyframes, name, type, velocity) {\n /**\n * Check if we're able to animate between the start and end keyframes,\n * and throw a warning if we're attempting to animate between one that's\n * animatable and another that isn't.\n */\n const originKeyframe = keyframes[0];\n if (originKeyframe === null)\n return false;\n /**\n * These aren't traditionally animatable but we do support them.\n * In future we could look into making this more generic or replacing\n * this function with mix() === mixImmediate\n */\n if (name === \"display\" || name === \"visibility\")\n return true;\n const targetKeyframe = keyframes[keyframes.length - 1];\n const isOriginAnimatable = isAnimatable(originKeyframe, name);\n const isTargetAnimatable = isAnimatable(targetKeyframe, name);\n warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from \"${originKeyframe}\" to \"${targetKeyframe}\". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \\`style\\` property.`);\n // Always skip if any of these are true\n if (!isOriginAnimatable || !isTargetAnimatable) {\n return false;\n }\n return (hasKeyframesChanged(keyframes) ||\n ((type === \"spring\" || isGenerator(type)) && velocity));\n}\n\nexport { canAnimate };\n","import { time } from '../../frameloop/sync-time.mjs';\nimport { flushKeyframeResolvers } from '../../render/utils/KeyframesResolver.mjs';\nimport { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';\nimport { canAnimate } from './utils/can-animate.mjs';\nimport { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';\n\n/**\n * Maximum time allowed between an animation being created and it being\n * resolved for us to use the latter as the start time.\n *\n * This is to ensure that while we prefer to \"start\" an animation as soon\n * as it's triggered, we also want to avoid a visual jump if there's a big delay\n * between these two moments.\n */\nconst MAX_RESOLVE_DELAY = 40;\nclass BaseAnimation {\n constructor({ autoplay = true, delay = 0, type = \"keyframes\", repeat = 0, repeatDelay = 0, repeatType = \"loop\", ...options }) {\n // Track whether the animation has been stopped. Stopped animations won't restart.\n this.isStopped = false;\n this.hasAttemptedResolve = false;\n this.createdAt = time.now();\n this.options = {\n autoplay,\n delay,\n type,\n repeat,\n repeatDelay,\n repeatType,\n ...options,\n };\n this.updateFinishedPromise();\n }\n /**\n * This method uses the createdAt and resolvedAt to calculate the\n * animation startTime. *Ideally*, we would use the createdAt time as t=0\n * as the following frame would then be the first frame of the animation in\n * progress, which would feel snappier.\n *\n * However, if there's a delay (main thread work) between the creation of\n * the animation and the first commited frame, we prefer to use resolvedAt\n * to avoid a sudden jump into the animation.\n */\n calcStartTime() {\n if (!this.resolvedAt)\n return this.createdAt;\n return this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY\n ? this.resolvedAt\n : this.createdAt;\n }\n /**\n * A getter for resolved data. If keyframes are not yet resolved, accessing\n * this.resolved will synchronously flush all pending keyframe resolvers.\n * This is a deoptimisation, but at its worst still batches read/writes.\n */\n get resolved() {\n if (!this._resolved && !this.hasAttemptedResolve) {\n flushKeyframeResolvers();\n }\n return this._resolved;\n }\n /**\n * A method to be called when the keyframes resolver completes. This method\n * will check if its possible to run the animation and, if not, skip it.\n * Otherwise, it will call initPlayback on the implementing class.\n */\n onKeyframesResolved(keyframes, finalKeyframe) {\n this.resolvedAt = time.now();\n this.hasAttemptedResolve = true;\n const { name, type, velocity, delay, onComplete, onUpdate, isGenerator, } = this.options;\n /**\n * If we can't animate this value with the resolved keyframes\n * then we should complete it immediately.\n */\n if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {\n // Finish immediately\n if (instantAnimationState.current || !delay) {\n onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));\n onComplete === null || onComplete === void 0 ? void 0 : onComplete();\n this.resolveFinishedPromise();\n return;\n }\n // Finish after a delay\n else {\n this.options.duration = 0;\n }\n }\n const resolvedAnimation = this.initPlayback(keyframes, finalKeyframe);\n if (resolvedAnimation === false)\n return;\n this._resolved = {\n keyframes,\n finalKeyframe,\n ...resolvedAnimation,\n };\n this.onPostResolved();\n }\n onPostResolved() { }\n /**\n * Allows the returned animation to be awaited or promise-chained. Currently\n * resolves when the animation finishes at all but in a future update could/should\n * reject if its cancels.\n */\n then(resolve, reject) {\n return this.currentFinishedPromise.then(resolve, reject);\n }\n updateFinishedPromise() {\n this.currentFinishedPromise = new Promise((resolve) => {\n this.resolveFinishedPromise = resolve;\n });\n }\n}\n\nexport { BaseAnimation };\n","/*\n Convert velocity into velocity per second\n\n @param [number]: Unit per frame\n @param [number]: Frame duration in ms\n*/\nfunction velocityPerSecond(velocity, frameDuration) {\n return frameDuration ? velocity * (1000 / frameDuration) : 0;\n}\n\nexport { velocityPerSecond };\n","import { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';\n\nconst velocitySampleDuration = 5; // ms\nfunction calcGeneratorVelocity(resolveValue, t, current) {\n const prevT = Math.max(t - velocitySampleDuration, 0);\n return velocityPerSecond(current - resolveValue(prevT), t - prevT);\n}\n\nexport { calcGeneratorVelocity };\n","import { warning } from '../../../utils/errors.mjs';\nimport { clamp } from '../../../utils/clamp.mjs';\nimport { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';\n\nconst safeMin = 0.001;\nconst minDuration = 0.01;\nconst maxDuration = 10.0;\nconst minDamping = 0.05;\nconst maxDamping = 1;\nfunction findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {\n let envelope;\n let derivative;\n warning(duration <= secondsToMilliseconds(maxDuration), \"Spring duration must be 10 seconds or less\");\n let dampingRatio = 1 - bounce;\n /**\n * Restrict dampingRatio and duration to within acceptable ranges.\n */\n dampingRatio = clamp(minDamping, maxDamping, dampingRatio);\n duration = clamp(minDuration, maxDuration, millisecondsToSeconds(duration));\n if (dampingRatio < 1) {\n /**\n * Underdamped spring\n */\n envelope = (undampedFreq) => {\n const exponentialDecay = undampedFreq * dampingRatio;\n const delta = exponentialDecay * duration;\n const a = exponentialDecay - velocity;\n const b = calcAngularFreq(undampedFreq, dampingRatio);\n const c = Math.exp(-delta);\n return safeMin - (a / b) * c;\n };\n derivative = (undampedFreq) => {\n const exponentialDecay = undampedFreq * dampingRatio;\n const delta = exponentialDecay * duration;\n const d = delta * velocity + velocity;\n const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;\n const f = Math.exp(-delta);\n const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);\n const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;\n return (factor * ((d - e) * f)) / g;\n };\n }\n else {\n /**\n * Critically-damped spring\n */\n envelope = (undampedFreq) => {\n const a = Math.exp(-undampedFreq * duration);\n const b = (undampedFreq - velocity) * duration + 1;\n return -safeMin + a * b;\n };\n derivative = (undampedFreq) => {\n const a = Math.exp(-undampedFreq * duration);\n const b = (velocity - undampedFreq) * (duration * duration);\n return a * b;\n };\n }\n const initialGuess = 5 / duration;\n const undampedFreq = approximateRoot(envelope, derivative, initialGuess);\n duration = secondsToMilliseconds(duration);\n if (isNaN(undampedFreq)) {\n return {\n stiffness: 100,\n damping: 10,\n duration,\n };\n }\n else {\n const stiffness = Math.pow(undampedFreq, 2) * mass;\n return {\n stiffness,\n damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),\n duration,\n };\n }\n}\nconst rootIterations = 12;\nfunction approximateRoot(envelope, derivative, initialGuess) {\n let result = initialGuess;\n for (let i = 1; i < rootIterations; i++) {\n result = result - envelope(result) / derivative(result);\n }\n return result;\n}\nfunction calcAngularFreq(undampedFreq, dampingRatio) {\n return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);\n}\n\nexport { calcAngularFreq, findSpring, maxDamping, maxDuration, minDamping, minDuration };\n","import { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';\nimport { calcGeneratorVelocity } from '../utils/velocity.mjs';\nimport { findSpring, calcAngularFreq } from './find.mjs';\n\nconst durationKeys = [\"duration\", \"bounce\"];\nconst physicsKeys = [\"stiffness\", \"damping\", \"mass\"];\nfunction isSpringType(options, keys) {\n return keys.some((key) => options[key] !== undefined);\n}\nfunction getSpringOptions(options) {\n let springOptions = {\n velocity: 0.0,\n stiffness: 100,\n damping: 10,\n mass: 1.0,\n isResolvedFromDuration: false,\n ...options,\n };\n // stiffness/damping/mass overrides duration/bounce\n if (!isSpringType(options, physicsKeys) &&\n isSpringType(options, durationKeys)) {\n const derived = findSpring(options);\n springOptions = {\n ...springOptions,\n ...derived,\n mass: 1.0,\n };\n springOptions.isResolvedFromDuration = true;\n }\n return springOptions;\n}\nfunction spring({ keyframes, restDelta, restSpeed, ...options }) {\n const origin = keyframes[0];\n const target = keyframes[keyframes.length - 1];\n /**\n * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator\n * to reduce GC during animation.\n */\n const state = { done: false, value: origin };\n const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, } = getSpringOptions({\n ...options,\n velocity: -millisecondsToSeconds(options.velocity || 0),\n });\n const initialVelocity = velocity || 0.0;\n const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));\n const initialDelta = target - origin;\n const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));\n /**\n * If we're working on a granular scale, use smaller defaults for determining\n * when the spring is finished.\n *\n * These defaults have been selected emprically based on what strikes a good\n * ratio between feeling good and finishing as soon as changes are imperceptible.\n */\n const isGranularScale = Math.abs(initialDelta) < 5;\n restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);\n restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);\n let resolveSpring;\n if (dampingRatio < 1) {\n const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);\n // Underdamped spring\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return (target -\n envelope *\n (((initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) /\n angularFreq) *\n Math.sin(angularFreq * t) +\n initialDelta * Math.cos(angularFreq * t)));\n };\n }\n else if (dampingRatio === 1) {\n // Critically damped spring\n resolveSpring = (t) => target -\n Math.exp(-undampedAngularFreq * t) *\n (initialDelta +\n (initialVelocity + undampedAngularFreq * initialDelta) * t);\n }\n else {\n // Overdamped spring\n const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n // When performing sinh or cosh values can hit Infinity so we cap them here\n const freqForT = Math.min(dampedAngularFreq * t, 300);\n return (target -\n (envelope *\n ((initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) *\n Math.sinh(freqForT) +\n dampedAngularFreq *\n initialDelta *\n Math.cosh(freqForT))) /\n dampedAngularFreq);\n };\n }\n return {\n calculatedDuration: isResolvedFromDuration ? duration || null : null,\n next: (t) => {\n const current = resolveSpring(t);\n if (!isResolvedFromDuration) {\n let currentVelocity = 0.0;\n /**\n * We only need to calculate velocity for under-damped springs\n * as over- and critically-damped springs can't overshoot, so\n * checking only for displacement is enough.\n */\n if (dampingRatio < 1) {\n currentVelocity =\n t === 0\n ? secondsToMilliseconds(initialVelocity)\n : calcGeneratorVelocity(resolveSpring, t, current);\n }\n const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;\n const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;\n state.done =\n isBelowVelocityThreshold && isBelowDisplacementThreshold;\n }\n else {\n state.done = t >= duration;\n }\n state.value = state.done ? target : current;\n return state;\n },\n };\n}\n\nexport { spring };\n","import { spring } from './spring/index.mjs';\nimport { calcGeneratorVelocity } from './utils/velocity.mjs';\n\nfunction inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {\n const origin = keyframes[0];\n const state = {\n done: false,\n value: origin,\n };\n const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);\n const nearestBoundary = (v) => {\n if (min === undefined)\n return max;\n if (max === undefined)\n return min;\n return Math.abs(min - v) < Math.abs(max - v) ? min : max;\n };\n let amplitude = power * velocity;\n const ideal = origin + amplitude;\n const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);\n /**\n * If the target has changed we need to re-calculate the amplitude, otherwise\n * the animation will start from the wrong position.\n */\n if (target !== ideal)\n amplitude = target - origin;\n const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);\n const calcLatest = (t) => target + calcDelta(t);\n const applyFriction = (t) => {\n const delta = calcDelta(t);\n const latest = calcLatest(t);\n state.done = Math.abs(delta) <= restDelta;\n state.value = state.done ? target : latest;\n };\n /**\n * Ideally this would resolve for t in a stateless way, we could\n * do that by always precalculating the animation but as we know\n * this will be done anyway we can assume that spring will\n * be discovered during that.\n */\n let timeReachedBoundary;\n let spring$1;\n const checkCatchBoundary = (t) => {\n if (!isOutOfBounds(state.value))\n return;\n timeReachedBoundary = t;\n spring$1 = spring({\n keyframes: [state.value, nearestBoundary(state.value)],\n velocity: calcGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000\n damping: bounceDamping,\n stiffness: bounceStiffness,\n restDelta,\n restSpeed,\n });\n };\n checkCatchBoundary(0);\n return {\n calculatedDuration: null,\n next: (t) => {\n /**\n * We need to resolve the friction to figure out if we need a\n * spring but we don't want to do this twice per frame. So here\n * we flag if we updated for this frame and later if we did\n * we can skip doing it again.\n */\n let hasUpdatedFrame = false;\n if (!spring$1 && timeReachedBoundary === undefined) {\n hasUpdatedFrame = true;\n applyFriction(t);\n checkCatchBoundary(t);\n }\n /**\n * If we have a spring and the provided t is beyond the moment the friction\n * animation crossed the min/max boundary, use the spring.\n */\n if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) {\n return spring$1.next(t - timeReachedBoundary);\n }\n else {\n !hasUpdatedFrame && applyFriction(t);\n return state;\n }\n },\n };\n}\n\nexport { inertia };\n","import { cubicBezier } from './cubic-bezier.mjs';\n\nconst easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);\nconst easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);\nconst easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);\n\nexport { easeIn, easeInOut, easeOut };\n","const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === \"number\";\n\nexport { isBezierDefinition };\n","import { invariant } from '../../utils/errors.mjs';\nimport { cubicBezier } from '../cubic-bezier.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { easeIn, easeInOut, easeOut } from '../ease.mjs';\nimport { circIn, circInOut, circOut } from '../circ.mjs';\nimport { backIn, backInOut, backOut } from '../back.mjs';\nimport { anticipate } from '../anticipate.mjs';\nimport { isBezierDefinition } from './is-bezier-definition.mjs';\n\nconst easingLookup = {\n linear: noop,\n easeIn,\n easeInOut,\n easeOut,\n circIn,\n circInOut,\n circOut,\n backIn,\n backInOut,\n backOut,\n anticipate,\n};\nconst easingDefinitionToFunction = (definition) => {\n if (isBezierDefinition(definition)) {\n // If cubic bezier definition, create bezier curve\n invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);\n const [x1, y1, x2, y2] = definition;\n return cubicBezier(x1, y1, x2, y2);\n }\n else if (typeof definition === \"string\") {\n // Else lookup from table\n invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);\n return easingLookup[definition];\n }\n return definition;\n};\n\nexport { easingDefinitionToFunction };\n","/**\n * Pipe\n * Compose other transformers to run linearily\n * pipe(min(20), max(40))\n * @param {...functions} transformers\n * @return {function}\n */\nconst combineFunctions = (a, b) => (v) => b(a(v));\nconst pipe = (...transformers) => transformers.reduce(combineFunctions);\n\nexport { pipe };\n","/*\n Progress within given range\n\n Given a lower limit and an upper limit, we return the progress\n (expressed as a number 0-1) represented by the given value, and\n limit that progress to within 0-1.\n\n @param [number]: Lower limit\n @param [number]: Upper limit\n @param [number]: Value to find progress within given range\n @return [number]: Progress of value within range as expressed 0-1\n*/\nconst progress = (from, to, value) => {\n const toFromDifference = to - from;\n return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;\n};\n\nexport { progress };\n","/*\n Value in range from progress\n\n Given a lower limit and an upper limit, we return the value within\n that range as expressed by progress (usually a number from 0 to 1)\n\n So progress = 0.5 would change\n\n from -------- to\n\n to\n\n from ---- to\n\n E.g. from = 10, to = 20, progress = 0.5 => 15\n\n @param [number]: Lower limit of range\n @param [number]: Upper limit of range\n @param [number]: The progress between lower and upper limits expressed 0-1\n @return [number]: Value as calculated from progress within range (not limited within range)\n*/\nconst mixNumber = (from, to, progress) => {\n return from + (to - from) * progress;\n};\n\nexport { mixNumber };\n","// Adapted from https://gist.github.com/mjackson/5311256\nfunction hueToRgb(p, q, t) {\n if (t < 0)\n t += 1;\n if (t > 1)\n t -= 1;\n if (t < 1 / 6)\n return p + (q - p) * 6 * t;\n if (t < 1 / 2)\n return q;\n if (t < 2 / 3)\n return p + (q - p) * (2 / 3 - t) * 6;\n return p;\n}\nfunction hslaToRgba({ hue, saturation, lightness, alpha }) {\n hue /= 360;\n saturation /= 100;\n lightness /= 100;\n let red = 0;\n let green = 0;\n let blue = 0;\n if (!saturation) {\n red = green = blue = lightness;\n }\n else {\n const q = lightness < 0.5\n ? lightness * (1 + saturation)\n : lightness + saturation - lightness * saturation;\n const p = 2 * lightness - q;\n red = hueToRgb(p, q, hue + 1 / 3);\n green = hueToRgb(p, q, hue);\n blue = hueToRgb(p, q, hue - 1 / 3);\n }\n return {\n red: Math.round(red * 255),\n green: Math.round(green * 255),\n blue: Math.round(blue * 255),\n alpha,\n };\n}\n\nexport { hslaToRgba };\n","function mixImmediate(a, b) {\n return (p) => (p > 0 ? b : a);\n}\n\nexport { mixImmediate };\n","import { mixNumber } from './number.mjs';\nimport { warning } from '../errors.mjs';\nimport { hslaToRgba } from '../hsla-to-rgba.mjs';\nimport { hex } from '../../value/types/color/hex.mjs';\nimport { rgba } from '../../value/types/color/rgba.mjs';\nimport { hsla } from '../../value/types/color/hsla.mjs';\nimport { mixImmediate } from './immediate.mjs';\n\n// Linear color space blending\n// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw\n// Demonstrated http://codepen.io/osublake/pen/xGVVaN\nconst mixLinearColor = (from, to, v) => {\n const fromExpo = from * from;\n const expo = v * (to * to - fromExpo) + fromExpo;\n return expo < 0 ? 0 : Math.sqrt(expo);\n};\nconst colorTypes = [hex, rgba, hsla];\nconst getColorType = (v) => colorTypes.find((type) => type.test(v));\nfunction asRGBA(color) {\n const type = getColorType(color);\n warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);\n if (!Boolean(type))\n return false;\n let model = type.parse(color);\n if (type === hsla) {\n // TODO Remove this cast - needed since Motion's stricter typing\n model = hslaToRgba(model);\n }\n return model;\n}\nconst mixColor = (from, to) => {\n const fromRGBA = asRGBA(from);\n const toRGBA = asRGBA(to);\n if (!fromRGBA || !toRGBA) {\n return mixImmediate(from, to);\n }\n const blended = { ...fromRGBA };\n return (v) => {\n blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);\n blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);\n blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);\n blended.alpha = mixNumber(fromRGBA.alpha, toRGBA.alpha, v);\n return rgba.transform(blended);\n };\n};\n\nexport { mixColor, mixLinearColor };\n","const invisibleValues = new Set([\"none\", \"hidden\"]);\n/**\n * Returns a function that, when provided a progress value between 0 and 1,\n * will return the \"none\" or \"hidden\" string only when the progress is that of\n * the origin or target.\n */\nfunction mixVisibility(origin, target) {\n if (invisibleValues.has(origin)) {\n return (p) => (p <= 0 ? origin : target);\n }\n else {\n return (p) => (p >= 1 ? target : origin);\n }\n}\n\nexport { invisibleValues, mixVisibility };\n","import { mixNumber as mixNumber$1 } from './number.mjs';\nimport { mixColor } from './color.mjs';\nimport { pipe } from '../pipe.mjs';\nimport { warning } from '../errors.mjs';\nimport { color } from '../../value/types/color/index.mjs';\nimport { complex, analyseComplexValue } from '../../value/types/complex/index.mjs';\nimport { isCSSVariableToken } from '../../render/dom/utils/is-css-variable.mjs';\nimport { invisibleValues, mixVisibility } from './visibility.mjs';\nimport { mixImmediate } from './immediate.mjs';\n\nfunction mixNumber(a, b) {\n return (p) => mixNumber$1(a, b, p);\n}\nfunction getMixer(a) {\n if (typeof a === \"number\") {\n return mixNumber;\n }\n else if (typeof a === \"string\") {\n return isCSSVariableToken(a)\n ? mixImmediate\n : color.test(a)\n ? mixColor\n : mixComplex;\n }\n else if (Array.isArray(a)) {\n return mixArray;\n }\n else if (typeof a === \"object\") {\n return color.test(a) ? mixColor : mixObject;\n }\n return mixImmediate;\n}\nfunction mixArray(a, b) {\n const output = [...a];\n const numValues = output.length;\n const blendValue = a.map((v, i) => getMixer(v)(v, b[i]));\n return (p) => {\n for (let i = 0; i < numValues; i++) {\n output[i] = blendValue[i](p);\n }\n return output;\n };\n}\nfunction mixObject(a, b) {\n const output = { ...a, ...b };\n const blendValue = {};\n for (const key in output) {\n if (a[key] !== undefined && b[key] !== undefined) {\n blendValue[key] = getMixer(a[key])(a[key], b[key]);\n }\n }\n return (v) => {\n for (const key in blendValue) {\n output[key] = blendValue[key](v);\n }\n return output;\n };\n}\nfunction matchOrder(origin, target) {\n var _a;\n const orderedOrigin = [];\n const pointers = { color: 0, var: 0, number: 0 };\n for (let i = 0; i < target.values.length; i++) {\n const type = target.types[i];\n const originIndex = origin.indexes[type][pointers[type]];\n const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;\n orderedOrigin[i] = originValue;\n pointers[type]++;\n }\n return orderedOrigin;\n}\nconst mixComplex = (origin, target) => {\n const template = complex.createTransformer(target);\n const originStats = analyseComplexValue(origin);\n const targetStats = analyseComplexValue(target);\n const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length &&\n originStats.indexes.color.length === targetStats.indexes.color.length &&\n originStats.indexes.number.length >= targetStats.indexes.number.length;\n if (canInterpolate) {\n if ((invisibleValues.has(origin) &&\n !targetStats.values.length) ||\n (invisibleValues.has(target) &&\n !originStats.values.length)) {\n return mixVisibility(origin, target);\n }\n return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);\n }\n else {\n warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);\n return mixImmediate(origin, target);\n }\n};\n\nexport { getMixer, mixArray, mixComplex, mixObject };\n","import { getMixer } from './complex.mjs';\nimport { mixNumber } from './number.mjs';\n\nfunction mix(from, to, p) {\n if (typeof from === \"number\" &&\n typeof to === \"number\" &&\n typeof p === \"number\") {\n return mixNumber(from, to, p);\n }\n const mixer = getMixer(from);\n return mixer(from, to);\n}\n\nexport { mix };\n","import { invariant } from './errors.mjs';\nimport { clamp } from './clamp.mjs';\nimport { pipe } from './pipe.mjs';\nimport { progress } from './progress.mjs';\nimport { noop } from './noop.mjs';\nimport { mix } from './mix/index.mjs';\n\nfunction createMixers(output, ease, customMixer) {\n const mixers = [];\n const mixerFactory = customMixer || mix;\n const numMixers = output.length - 1;\n for (let i = 0; i < numMixers; i++) {\n let mixer = mixerFactory(output[i], output[i + 1]);\n if (ease) {\n const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;\n mixer = pipe(easingFunction, mixer);\n }\n mixers.push(mixer);\n }\n return mixers;\n}\n/**\n * Create a function that maps from a numerical input array to a generic output array.\n *\n * Accepts:\n * - Numbers\n * - Colors (hex, hsl, hsla, rgb, rgba)\n * - Complex (combinations of one or more numbers or strings)\n *\n * ```jsx\n * const mixColor = interpolate([0, 1], ['#fff', '#000'])\n *\n * mixColor(0.5) // 'rgba(128, 128, 128, 1)'\n * ```\n *\n * TODO Revist this approach once we've moved to data models for values,\n * probably not needed to pregenerate mixer functions.\n *\n * @public\n */\nfunction interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {\n const inputLength = input.length;\n invariant(inputLength === output.length, \"Both input and output ranges must be the same length\");\n /**\n * If we're only provided a single input, we can just make a function\n * that returns the output.\n */\n if (inputLength === 1)\n return () => output[0];\n if (inputLength === 2 && input[0] === input[1])\n return () => output[1];\n // If input runs highest -> lowest, reverse both arrays\n if (input[0] > input[inputLength - 1]) {\n input = [...input].reverse();\n output = [...output].reverse();\n }\n const mixers = createMixers(output, ease, mixer);\n const numMixers = mixers.length;\n const interpolator = (v) => {\n let i = 0;\n if (numMixers > 1) {\n for (; i < input.length - 2; i++) {\n if (v < input[i + 1])\n break;\n }\n }\n const progressInRange = progress(input[i], input[i + 1], v);\n return mixers[i](progressInRange);\n };\n return isClamp\n ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))\n : interpolator;\n}\n\nexport { interpolate };\n","import { fillOffset } from './fill.mjs';\n\nfunction defaultOffset(arr) {\n const offset = [0];\n fillOffset(offset, arr.length - 1);\n return offset;\n}\n\nexport { defaultOffset };\n","import { mixNumber } from '../mix/number.mjs';\nimport { progress } from '../progress.mjs';\n\nfunction fillOffset(offset, remaining) {\n const min = offset[offset.length - 1];\n for (let i = 1; i <= remaining; i++) {\n const offsetProgress = progress(0, remaining, i);\n offset.push(mixNumber(min, 1, offsetProgress));\n }\n}\n\nexport { fillOffset };\n","import { easeInOut } from '../../easing/ease.mjs';\nimport { isEasingArray } from '../../easing/utils/is-easing-array.mjs';\nimport { easingDefinitionToFunction } from '../../easing/utils/map.mjs';\nimport { interpolate } from '../../utils/interpolate.mjs';\nimport { defaultOffset } from '../../utils/offsets/default.mjs';\nimport { convertOffsetToTimes } from '../../utils/offsets/time.mjs';\n\nfunction defaultEasing(values, easing) {\n return values.map(() => easing || easeInOut).splice(0, values.length - 1);\n}\nfunction keyframes({ duration = 300, keyframes: keyframeValues, times, ease = \"easeInOut\", }) {\n /**\n * Easing functions can be externally defined as strings. Here we convert them\n * into actual functions.\n */\n const easingFunctions = isEasingArray(ease)\n ? ease.map(easingDefinitionToFunction)\n : easingDefinitionToFunction(ease);\n /**\n * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator\n * to reduce GC during animation.\n */\n const state = {\n done: false,\n value: keyframeValues[0],\n };\n /**\n * Create a times array based on the provided 0-1 offsets\n */\n const absoluteTimes = convertOffsetToTimes(\n // Only use the provided offsets if they're the correct length\n // TODO Maybe we should warn here if there's a length mismatch\n times && times.length === keyframeValues.length\n ? times\n : defaultOffset(keyframeValues), duration);\n const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {\n ease: Array.isArray(easingFunctions)\n ? easingFunctions\n : defaultEasing(keyframeValues, easingFunctions),\n });\n return {\n calculatedDuration: duration,\n next: (t) => {\n state.value = mapTimeToKeyframe(t);\n state.done = t >= duration;\n return state;\n },\n };\n}\n\nexport { defaultEasing, keyframes };\n","const isEasingArray = (ease) => {\n return Array.isArray(ease) && typeof ease[0] !== \"number\";\n};\n\nexport { isEasingArray };\n","function convertOffsetToTimes(offset, duration) {\n return offset.map((o) => o * duration);\n}\n\nexport { convertOffsetToTimes };\n","import { time } from '../../../frameloop/sync-time.mjs';\nimport { frame, cancelFrame, frameData } from '../../../frameloop/frame.mjs';\n\nconst frameloopDriver = (update) => {\n const passTimestamp = ({ timestamp }) => update(timestamp);\n return {\n start: () => frame.update(passTimestamp, true),\n stop: () => cancelFrame(passTimestamp),\n /**\n * If we're processing this frame we can use the\n * framelocked timestamp to keep things in sync.\n */\n now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),\n };\n};\n\nexport { frameloopDriver };\n","import { KeyframeResolver } from '../../render/utils/KeyframesResolver.mjs';\nimport { spring } from '../generators/spring/index.mjs';\nimport { inertia } from '../generators/inertia.mjs';\nimport { keyframes } from '../generators/keyframes.mjs';\nimport { BaseAnimation } from './BaseAnimation.mjs';\nimport { pipe } from '../../utils/pipe.mjs';\nimport { mix } from '../../utils/mix/index.mjs';\nimport { calcGeneratorDuration } from '../generators/utils/calc-duration.mjs';\nimport { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';\nimport { clamp } from '../../utils/clamp.mjs';\nimport { invariant } from '../../utils/errors.mjs';\nimport { frameloopDriver } from './drivers/driver-frameloop.mjs';\nimport { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';\nimport { isGenerator } from '../generators/utils/is-generator.mjs';\n\nconst generators = {\n decay: inertia,\n inertia,\n tween: keyframes,\n keyframes: keyframes,\n spring,\n};\nconst percentToProgress = (percent) => percent / 100;\n/**\n * Animation that runs on the main thread. Designed to be WAAPI-spec in the subset of\n * features we expose publically. Mostly the compatibility is to ensure visual identity\n * between both WAAPI and main thread animations.\n */\nclass MainThreadAnimation extends BaseAnimation {\n constructor(options) {\n super(options);\n /**\n * The time at which the animation was paused.\n */\n this.holdTime = null;\n /**\n * The time at which the animation was cancelled.\n */\n this.cancelTime = null;\n /**\n * The current time of the animation.\n */\n this.currentTime = 0;\n /**\n * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.\n */\n this.playbackSpeed = 1;\n /**\n * The state of the animation to apply when the animation is resolved. This\n * allows calls to the public API to control the animation before it is resolved,\n * without us having to resolve it first.\n */\n this.pendingPlayState = \"running\";\n /**\n * The time at which the animation was started.\n */\n this.startTime = null;\n this.state = \"idle\";\n /**\n * This method is bound to the instance to fix a pattern where\n * animation.stop is returned as a reference from a useEffect.\n */\n this.stop = () => {\n this.resolver.cancel();\n this.isStopped = true;\n if (this.state === \"idle\")\n return;\n this.teardown();\n const { onStop } = this.options;\n onStop && onStop();\n };\n const { name, motionValue, element, keyframes } = this.options;\n const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;\n const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);\n this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);\n this.resolver.scheduleResolve();\n }\n initPlayback(keyframes$1) {\n const { type = \"keyframes\", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options;\n const generatorFactory = isGenerator(type)\n ? type\n : generators[type] || keyframes;\n /**\n * If our generator doesn't support mixing numbers, we need to replace keyframes with\n * [0, 100] and then make a function that maps that to the actual keyframes.\n *\n * 100 is chosen instead of 1 as it works nicer with spring animations.\n */\n let mapPercentToKeyframes;\n let mirroredGenerator;\n if (generatorFactory !== keyframes &&\n typeof keyframes$1[0] !== \"number\") {\n if (process.env.NODE_ENV !== \"production\") {\n invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);\n }\n mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));\n keyframes$1 = [0, 100];\n }\n const generator = generatorFactory({ ...this.options, keyframes: keyframes$1 });\n /**\n * If we have a mirror repeat type we need to create a second generator that outputs the\n * mirrored (not reversed) animation and later ping pong between the two generators.\n */\n if (repeatType === \"mirror\") {\n mirroredGenerator = generatorFactory({\n ...this.options,\n keyframes: [...keyframes$1].reverse(),\n velocity: -velocity,\n });\n }\n /**\n * If duration is undefined and we have repeat options,\n * we need to calculate a duration from the generator.\n *\n * We set it to the generator itself to cache the duration.\n * Any timeline resolver will need to have already precalculated\n * the duration by this step.\n */\n if (generator.calculatedDuration === null) {\n generator.calculatedDuration = calcGeneratorDuration(generator);\n }\n const { calculatedDuration } = generator;\n const resolvedDuration = calculatedDuration + repeatDelay;\n const totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;\n return {\n generator,\n mirroredGenerator,\n mapPercentToKeyframes,\n calculatedDuration,\n resolvedDuration,\n totalDuration,\n };\n }\n onPostResolved() {\n const { autoplay = true } = this.options;\n this.play();\n if (this.pendingPlayState === \"paused\" || !autoplay) {\n this.pause();\n }\n else {\n this.state = this.pendingPlayState;\n }\n }\n tick(timestamp, sample = false) {\n const { resolved } = this;\n // If the animations has failed to resolve, return the final keyframe.\n if (!resolved) {\n const { keyframes } = this.options;\n return { done: true, value: keyframes[keyframes.length - 1] };\n }\n const { finalKeyframe, generator, mirroredGenerator, mapPercentToKeyframes, keyframes, calculatedDuration, totalDuration, resolvedDuration, } = resolved;\n if (this.startTime === null)\n return generator.next(0);\n const { delay, repeat, repeatType, repeatDelay, onUpdate } = this.options;\n /**\n * requestAnimationFrame timestamps can come through as lower than\n * the startTime as set by performance.now(). Here we prevent this,\n * though in the future it could be possible to make setting startTime\n * a pending operation that gets resolved here.\n */\n if (this.speed > 0) {\n this.startTime = Math.min(this.startTime, timestamp);\n }\n else if (this.speed < 0) {\n this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);\n }\n // Update currentTime\n if (sample) {\n this.currentTime = timestamp;\n }\n else if (this.holdTime !== null) {\n this.currentTime = this.holdTime;\n }\n else {\n // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =\n // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for\n // example.\n this.currentTime =\n Math.round(timestamp - this.startTime) * this.speed;\n }\n // Rebase on delay\n const timeWithoutDelay = this.currentTime - delay * (this.speed >= 0 ? 1 : -1);\n const isInDelayPhase = this.speed >= 0\n ? timeWithoutDelay < 0\n : timeWithoutDelay > totalDuration;\n this.currentTime = Math.max(timeWithoutDelay, 0);\n // If this animation has finished, set the current time to the total duration.\n if (this.state === \"finished\" && this.holdTime === null) {\n this.currentTime = totalDuration;\n }\n let elapsed = this.currentTime;\n let frameGenerator = generator;\n if (repeat) {\n /**\n * Get the current progress (0-1) of the animation. If t is >\n * than duration we'll get values like 2.5 (midway through the\n * third iteration)\n */\n const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration;\n /**\n * Get the current iteration (0 indexed). For instance the floor of\n * 2.5 is 2.\n */\n let currentIteration = Math.floor(progress);\n /**\n * Get the current progress of the iteration by taking the remainder\n * so 2.5 is 0.5 through iteration 2\n */\n let iterationProgress = progress % 1.0;\n /**\n * If iteration progress is 1 we count that as the end\n * of the previous iteration.\n */\n if (!iterationProgress && progress >= 1) {\n iterationProgress = 1;\n }\n iterationProgress === 1 && currentIteration--;\n currentIteration = Math.min(currentIteration, repeat + 1);\n /**\n * Reverse progress if we're not running in \"normal\" direction\n */\n const isOddIteration = Boolean(currentIteration % 2);\n if (isOddIteration) {\n if (repeatType === \"reverse\") {\n iterationProgress = 1 - iterationProgress;\n if (repeatDelay) {\n iterationProgress -= repeatDelay / resolvedDuration;\n }\n }\n else if (repeatType === \"mirror\") {\n frameGenerator = mirroredGenerator;\n }\n }\n elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;\n }\n /**\n * If we're in negative time, set state as the initial keyframe.\n * This prevents delay: x, duration: 0 animations from finishing\n * instantly.\n */\n const state = isInDelayPhase\n ? { done: false, value: keyframes[0] }\n : frameGenerator.next(elapsed);\n if (mapPercentToKeyframes) {\n state.value = mapPercentToKeyframes(state.value);\n }\n let { done } = state;\n if (!isInDelayPhase && calculatedDuration !== null) {\n done =\n this.speed >= 0\n ? this.currentTime >= totalDuration\n : this.currentTime <= 0;\n }\n const isAnimationFinished = this.holdTime === null &&\n (this.state === \"finished\" || (this.state === \"running\" && done));\n if (isAnimationFinished && finalKeyframe !== undefined) {\n state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe);\n }\n if (onUpdate) {\n onUpdate(state.value);\n }\n if (isAnimationFinished) {\n this.finish();\n }\n return state;\n }\n get duration() {\n const { resolved } = this;\n return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0;\n }\n get time() {\n return millisecondsToSeconds(this.currentTime);\n }\n set time(newTime) {\n newTime = secondsToMilliseconds(newTime);\n this.currentTime = newTime;\n if (this.holdTime !== null || this.speed === 0) {\n this.holdTime = newTime;\n }\n else if (this.driver) {\n this.startTime = this.driver.now() - newTime / this.speed;\n }\n }\n get speed() {\n return this.playbackSpeed;\n }\n set speed(newSpeed) {\n const hasChanged = this.playbackSpeed !== newSpeed;\n this.playbackSpeed = newSpeed;\n if (hasChanged) {\n this.time = millisecondsToSeconds(this.currentTime);\n }\n }\n play() {\n if (!this.resolver.isScheduled) {\n this.resolver.resume();\n }\n if (!this._resolved) {\n this.pendingPlayState = \"running\";\n return;\n }\n if (this.isStopped)\n return;\n const { driver = frameloopDriver, onPlay, startTime } = this.options;\n if (!this.driver) {\n this.driver = driver((timestamp) => this.tick(timestamp));\n }\n onPlay && onPlay();\n const now = this.driver.now();\n if (this.holdTime !== null) {\n this.startTime = now - this.holdTime;\n }\n else if (!this.startTime) {\n this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();\n }\n else if (this.state === \"finished\") {\n this.startTime = now;\n }\n if (this.state === \"finished\") {\n this.updateFinishedPromise();\n }\n this.cancelTime = this.startTime;\n this.holdTime = null;\n /**\n * Set playState to running only after we've used it in\n * the previous logic.\n */\n this.state = \"running\";\n this.driver.start();\n }\n pause() {\n var _a;\n if (!this._resolved) {\n this.pendingPlayState = \"paused\";\n return;\n }\n this.state = \"paused\";\n this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;\n }\n complete() {\n if (this.state !== \"running\") {\n this.play();\n }\n this.pendingPlayState = this.state = \"finished\";\n this.holdTime = null;\n }\n finish() {\n this.teardown();\n this.state = \"finished\";\n const { onComplete } = this.options;\n onComplete && onComplete();\n }\n cancel() {\n if (this.cancelTime !== null) {\n this.tick(this.cancelTime);\n }\n this.teardown();\n this.updateFinishedPromise();\n }\n teardown() {\n this.state = \"idle\";\n this.stopDriver();\n this.resolveFinishedPromise();\n this.updateFinishedPromise();\n this.startTime = this.cancelTime = null;\n this.resolver.cancel();\n }\n stopDriver() {\n if (!this.driver)\n return;\n this.driver.stop();\n this.driver = undefined;\n }\n sample(time) {\n this.startTime = 0;\n return this.tick(time, true);\n }\n}\n// Legacy interface\nfunction animateValue(options) {\n return new MainThreadAnimation(options);\n}\n\nexport { MainThreadAnimation, animateValue };\n","/**\n * Implement a practical max duration for keyframe generation\n * to prevent infinite loops\n */\nconst maxGeneratorDuration = 20000;\nfunction calcGeneratorDuration(generator) {\n let duration = 0;\n const timeStep = 50;\n let state = generator.next(duration);\n while (!state.done && duration < maxGeneratorDuration) {\n duration += timeStep;\n state = generator.next(duration);\n }\n return duration >= maxGeneratorDuration ? Infinity : duration;\n}\n\nexport { calcGeneratorDuration, maxGeneratorDuration };\n","/**\n * A list of values that can be hardware-accelerated.\n */\nconst acceleratedValues = new Set([\n \"opacity\",\n \"clipPath\",\n \"filter\",\n \"transform\",\n // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved\n // or until we implement support for linear() easing.\n // \"background-color\"\n]);\n\nexport { acceleratedValues };\n","function memo(callback) {\n let result;\n return () => {\n if (result === undefined)\n result = callback();\n return result;\n };\n}\n\nexport { memo };\n","/**\n * Add the ability for test suites to manually set support flags\n * to better test more environments.\n */\nconst supportsFlags = {\n linearEasing: undefined,\n};\n\nexport { supportsFlags };\n","import { memo } from '../../../../utils/memo.mjs';\nimport { supportsFlags } from './supports-flags.mjs';\n\nfunction memoSupports(callback, supportsFlag) {\n const memoized = memo(callback);\n return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };\n}\n\nexport { memoSupports };\n","import { memoSupports } from './memo-supports.mjs';\n\nconst supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {\n try {\n document\n .createElement(\"div\")\n .animate({ opacity: 0 }, { easing: \"linear(0, 1)\" });\n }\n catch (e) {\n return false;\n }\n return true;\n}, \"linearEasing\");\n\nexport { supportsLinearEasing };\n","import { isBezierDefinition } from '../../../easing/utils/is-bezier-definition.mjs';\nimport { generateLinearEasing } from './utils/linear.mjs';\nimport { supportsLinearEasing } from './utils/supports-linear-easing.mjs';\n\nfunction isWaapiSupportedEasing(easing) {\n return Boolean((typeof easing === \"function\" && supportsLinearEasing()) ||\n !easing ||\n (typeof easing === \"string\" &&\n (easing in supportedWaapiEasing || supportsLinearEasing())) ||\n isBezierDefinition(easing) ||\n (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));\n}\nconst cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;\nconst supportedWaapiEasing = {\n linear: \"linear\",\n ease: \"ease\",\n easeIn: \"ease-in\",\n easeOut: \"ease-out\",\n easeInOut: \"ease-in-out\",\n circIn: /*@__PURE__*/ cubicBezierAsString([0, 0.65, 0.55, 1]),\n circOut: /*@__PURE__*/ cubicBezierAsString([0.55, 0, 1, 0.45]),\n backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),\n backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),\n};\nfunction mapEasingToNativeEasing(easing, duration) {\n if (!easing) {\n return undefined;\n }\n else if (typeof easing === \"function\" && supportsLinearEasing()) {\n return generateLinearEasing(easing, duration);\n }\n else if (isBezierDefinition(easing)) {\n return cubicBezierAsString(easing);\n }\n else if (Array.isArray(easing)) {\n return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||\n supportedWaapiEasing.easeOut);\n }\n else {\n return supportedWaapiEasing[easing];\n }\n}\n\nexport { cubicBezierAsString, isWaapiSupportedEasing, mapEasingToNativeEasing, supportedWaapiEasing };\n","import { progress } from '../../../../utils/progress.mjs';\n\n// Create a linear easing point for every 10 ms\nconst resolution = 10;\nconst generateLinearEasing = (easing, duration // as milliseconds\n) => {\n let points = \"\";\n const numPoints = Math.max(Math.round(duration / resolution), 2);\n for (let i = 0; i < numPoints; i++) {\n points += easing(progress(0, numPoints - 1, i)) + \", \";\n }\n return `linear(${points.substring(0, points.length - 2)})`;\n};\n\nexport { generateLinearEasing };\n","function attachTimeline(animation, timeline) {\n animation.timeline = timeline;\n animation.onfinish = null;\n}\n\nexport { attachTimeline };\n","import { memo } from '../../../../utils/memo.mjs';\n\nconst supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, \"animate\"));\n\nexport { supportsWaapi };\n","import { anticipate } from '../../easing/anticipate.mjs';\nimport { backInOut } from '../../easing/back.mjs';\nimport { circInOut } from '../../easing/circ.mjs';\nimport { DOMKeyframesResolver } from '../../render/dom/DOMKeyframesResolver.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';\nimport { isGenerator } from '../generators/utils/is-generator.mjs';\nimport { BaseAnimation } from './BaseAnimation.mjs';\nimport { MainThreadAnimation } from './MainThreadAnimation.mjs';\nimport { acceleratedValues } from './utils/accelerated-values.mjs';\nimport { startWaapiAnimation } from './waapi/index.mjs';\nimport { isWaapiSupportedEasing } from './waapi/easing.mjs';\nimport { attachTimeline } from './waapi/utils/attach-timeline.mjs';\nimport { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';\nimport { supportsLinearEasing } from './waapi/utils/supports-linear-easing.mjs';\nimport { supportsWaapi } from './waapi/utils/supports-waapi.mjs';\n\n/**\n * 10ms is chosen here as it strikes a balance between smooth\n * results (more than one keyframe per frame at 60fps) and\n * keyframe quantity.\n */\nconst sampleDelta = 10; //ms\n/**\n * Implement a practical max duration for keyframe generation\n * to prevent infinite loops\n */\nconst maxDuration = 20000;\n/**\n * Check if an animation can run natively via WAAPI or requires pregenerated keyframes.\n * WAAPI doesn't support spring or function easings so we run these as JS animation before\n * handing off.\n */\nfunction requiresPregeneratedKeyframes(options) {\n return (isGenerator(options.type) ||\n options.type === \"spring\" ||\n !isWaapiSupportedEasing(options.ease));\n}\nfunction pregenerateKeyframes(keyframes, options) {\n /**\n * Create a main-thread animation to pregenerate keyframes.\n * We sample this at regular intervals to generate keyframes that we then\n * linearly interpolate between.\n */\n const sampleAnimation = new MainThreadAnimation({\n ...options,\n keyframes,\n repeat: 0,\n delay: 0,\n isGenerator: true,\n });\n let state = { done: false, value: keyframes[0] };\n const pregeneratedKeyframes = [];\n /**\n * Bail after 20 seconds of pre-generated keyframes as it's likely\n * we're heading for an infinite loop.\n */\n let t = 0;\n while (!state.done && t < maxDuration) {\n state = sampleAnimation.sample(t);\n pregeneratedKeyframes.push(state.value);\n t += sampleDelta;\n }\n return {\n times: undefined,\n keyframes: pregeneratedKeyframes,\n duration: t - sampleDelta,\n ease: \"linear\",\n };\n}\nconst unsupportedEasingFunctions = {\n anticipate,\n backInOut,\n circInOut,\n};\nfunction isUnsupportedEase(key) {\n return key in unsupportedEasingFunctions;\n}\nclass AcceleratedAnimation extends BaseAnimation {\n constructor(options) {\n super(options);\n const { name, motionValue, element, keyframes } = this.options;\n this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue, element);\n this.resolver.scheduleResolve();\n }\n initPlayback(keyframes, finalKeyframe) {\n var _a;\n let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;\n /**\n * If element has since been unmounted, return false to indicate\n * the animation failed to initialised.\n */\n if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) {\n return false;\n }\n /**\n * If the user has provided an easing function name that isn't supported\n * by WAAPI (like \"anticipate\"), we need to provide the corressponding\n * function. This will later get converted to a linear() easing function.\n */\n if (typeof ease === \"string\" &&\n supportsLinearEasing() &&\n isUnsupportedEase(ease)) {\n ease = unsupportedEasingFunctions[ease];\n }\n /**\n * If this animation needs pre-generated keyframes then generate.\n */\n if (requiresPregeneratedKeyframes(this.options)) {\n const { onComplete, onUpdate, motionValue, element, ...options } = this.options;\n const pregeneratedAnimation = pregenerateKeyframes(keyframes, options);\n keyframes = pregeneratedAnimation.keyframes;\n // If this is a very short animation, ensure we have\n // at least two keyframes to animate between as older browsers\n // can't animate between a single keyframe.\n if (keyframes.length === 1) {\n keyframes[1] = keyframes[0];\n }\n duration = pregeneratedAnimation.duration;\n times = pregeneratedAnimation.times;\n ease = pregeneratedAnimation.ease;\n type = \"keyframes\";\n }\n const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });\n // Override the browser calculated startTime with one synchronised to other JS\n // and WAAPI animations starting this event loop.\n animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();\n if (this.pendingTimeline) {\n attachTimeline(animation, this.pendingTimeline);\n this.pendingTimeline = undefined;\n }\n else {\n /**\n * Prefer the `onfinish` prop as it's more widely supported than\n * the `finished` promise.\n *\n * Here, we synchronously set the provided MotionValue to the end\n * keyframe. If we didn't, when the WAAPI animation is finished it would\n * be removed from the element which would then revert to its old styles.\n */\n animation.onfinish = () => {\n const { onComplete } = this.options;\n motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe));\n onComplete && onComplete();\n this.cancel();\n this.resolveFinishedPromise();\n };\n }\n return {\n animation,\n duration,\n times,\n type,\n ease,\n keyframes: keyframes,\n };\n }\n get duration() {\n const { resolved } = this;\n if (!resolved)\n return 0;\n const { duration } = resolved;\n return millisecondsToSeconds(duration);\n }\n get time() {\n const { resolved } = this;\n if (!resolved)\n return 0;\n const { animation } = resolved;\n return millisecondsToSeconds(animation.currentTime || 0);\n }\n set time(newTime) {\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation } = resolved;\n animation.currentTime = secondsToMilliseconds(newTime);\n }\n get speed() {\n const { resolved } = this;\n if (!resolved)\n return 1;\n const { animation } = resolved;\n return animation.playbackRate;\n }\n set speed(newSpeed) {\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation } = resolved;\n animation.playbackRate = newSpeed;\n }\n get state() {\n const { resolved } = this;\n if (!resolved)\n return \"idle\";\n const { animation } = resolved;\n return animation.playState;\n }\n get startTime() {\n const { resolved } = this;\n if (!resolved)\n return null;\n const { animation } = resolved;\n // Coerce to number as TypeScript incorrectly types this\n // as CSSNumberish\n return animation.startTime;\n }\n /**\n * Replace the default DocumentTimeline with another AnimationTimeline.\n * Currently used for scroll animations.\n */\n attachTimeline(timeline) {\n if (!this._resolved) {\n this.pendingTimeline = timeline;\n }\n else {\n const { resolved } = this;\n if (!resolved)\n return noop;\n const { animation } = resolved;\n attachTimeline(animation, timeline);\n }\n return noop;\n }\n play() {\n if (this.isStopped)\n return;\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation } = resolved;\n if (animation.playState === \"finished\") {\n this.updateFinishedPromise();\n }\n animation.play();\n }\n pause() {\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation } = resolved;\n animation.pause();\n }\n stop() {\n this.resolver.cancel();\n this.isStopped = true;\n if (this.state === \"idle\")\n return;\n this.resolveFinishedPromise();\n this.updateFinishedPromise();\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation, keyframes, duration, type, ease, times } = resolved;\n if (animation.playState === \"idle\" ||\n animation.playState === \"finished\") {\n return;\n }\n /**\n * WAAPI doesn't natively have any interruption capabilities.\n *\n * Rather than read commited styles back out of the DOM, we can\n * create a renderless JS animation and sample it twice to calculate\n * its current value, \"previous\" value, and therefore allow\n * Motion to calculate velocity for any subsequent animation.\n */\n if (this.time) {\n const { motionValue, onUpdate, onComplete, element, ...options } = this.options;\n const sampleAnimation = new MainThreadAnimation({\n ...options,\n keyframes,\n duration,\n type,\n ease,\n times,\n isGenerator: true,\n });\n const sampleTime = secondsToMilliseconds(this.time);\n motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);\n }\n const { onStop } = this.options;\n onStop && onStop();\n this.cancel();\n }\n complete() {\n const { resolved } = this;\n if (!resolved)\n return;\n resolved.animation.finish();\n }\n cancel() {\n const { resolved } = this;\n if (!resolved)\n return;\n resolved.animation.cancel();\n }\n static supports(options) {\n const { motionValue, name, repeatDelay, repeatType, damping, type } = options;\n return (supportsWaapi() &&\n name &&\n acceleratedValues.has(name) &&\n motionValue &&\n motionValue.owner &&\n motionValue.owner.current instanceof HTMLElement &&\n /**\n * If we're outputting values to onUpdate then we can't use WAAPI as there's\n * no way to read the value from WAAPI every frame.\n */\n !motionValue.owner.getProps().onUpdate &&\n !repeatDelay &&\n repeatType !== \"mirror\" &&\n damping !== 0 &&\n type !== \"inertia\");\n }\n}\n\nexport { AcceleratedAnimation };\n","import { mapEasingToNativeEasing } from './easing.mjs';\n\nfunction startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = \"loop\", ease = \"easeInOut\", times, } = {}) {\n const keyframeOptions = { [valueName]: keyframes };\n if (times)\n keyframeOptions.offset = times;\n const easing = mapEasingToNativeEasing(ease, duration);\n /**\n * If this is an easing array, apply to keyframes, not animation as a whole\n */\n if (Array.isArray(easing))\n keyframeOptions.easing = easing;\n return element.animate(keyframeOptions, {\n delay,\n duration,\n easing: !Array.isArray(easing) ? easing : \"linear\",\n fill: \"both\",\n iterations: repeat + 1,\n direction: repeatType === \"reverse\" ? \"alternate\" : \"normal\",\n });\n}\n\nexport { startWaapiAnimation };\n","import { memo } from '../../../utils/memo.mjs';\n\nconst supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);\n\nexport { supportsScrollTimeline };\n","import { supportsScrollTimeline } from '../render/dom/scroll/supports.mjs';\n\nclass GroupPlaybackControls {\n constructor(animations) {\n // Bound to accomodate common `return animation.stop` pattern\n this.stop = () => this.runAll(\"stop\");\n this.animations = animations.filter(Boolean);\n }\n then(onResolve, onReject) {\n return Promise.all(this.animations).then(onResolve).catch(onReject);\n }\n /**\n * TODO: Filter out cancelled or stopped animations before returning\n */\n getAll(propName) {\n return this.animations[0][propName];\n }\n setAll(propName, newValue) {\n for (let i = 0; i < this.animations.length; i++) {\n this.animations[i][propName] = newValue;\n }\n }\n attachTimeline(timeline, fallback) {\n const subscriptions = this.animations.map((animation) => {\n if (supportsScrollTimeline() && animation.attachTimeline) {\n return animation.attachTimeline(timeline);\n }\n else {\n return fallback(animation);\n }\n });\n return () => {\n subscriptions.forEach((cancel, i) => {\n cancel && cancel();\n this.animations[i].stop();\n });\n };\n }\n get time() {\n return this.getAll(\"time\");\n }\n set time(time) {\n this.setAll(\"time\", time);\n }\n get speed() {\n return this.getAll(\"speed\");\n }\n set speed(speed) {\n this.setAll(\"speed\", speed);\n }\n get startTime() {\n return this.getAll(\"startTime\");\n }\n get duration() {\n let max = 0;\n for (let i = 0; i < this.animations.length; i++) {\n max = Math.max(max, this.animations[i].duration);\n }\n return max;\n }\n runAll(methodName) {\n this.animations.forEach((controls) => controls[methodName]());\n }\n play() {\n this.runAll(\"play\");\n }\n pause() {\n this.runAll(\"pause\");\n }\n cancel() {\n this.runAll(\"cancel\");\n }\n complete() {\n this.runAll(\"complete\");\n }\n}\n\nexport { GroupPlaybackControls };\n","import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';\nimport { getDefaultTransition } from '../utils/default-transitions.mjs';\nimport { getValueTransition } from '../utils/get-value-transition.mjs';\nimport { MotionGlobalConfig } from '../../utils/GlobalConfig.mjs';\nimport { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';\nimport { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\nimport { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';\nimport { MainThreadAnimation } from '../animators/MainThreadAnimation.mjs';\nimport { GroupPlaybackControls } from '../GroupPlaybackControls.mjs';\nimport { isTransitionDefined } from '../utils/is-transition-defined.mjs';\n\nconst animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {\n const valueTransition = getValueTransition(transition, name) || {};\n /**\n * Most transition values are currently completely overwritten by value-specific\n * transitions. In the future it'd be nicer to blend these transitions. But for now\n * delay actually does inherit from the root transition if not value-specific.\n */\n const delay = valueTransition.delay || transition.delay || 0;\n /**\n * Elapsed isn't a public transition option but can be passed through from\n * optimized appear effects in milliseconds.\n */\n let { elapsed = 0 } = transition;\n elapsed = elapsed - secondsToMilliseconds(delay);\n let options = {\n keyframes: Array.isArray(target) ? target : [null, target],\n ease: \"easeOut\",\n velocity: value.getVelocity(),\n ...valueTransition,\n delay: -elapsed,\n onUpdate: (v) => {\n value.set(v);\n valueTransition.onUpdate && valueTransition.onUpdate(v);\n },\n onComplete: () => {\n onComplete();\n valueTransition.onComplete && valueTransition.onComplete();\n },\n name,\n motionValue: value,\n element: isHandoff ? undefined : element,\n };\n /**\n * If there's no transition defined for this value, we can generate\n * unqiue transition settings for this value.\n */\n if (!isTransitionDefined(valueTransition)) {\n options = {\n ...options,\n ...getDefaultTransition(name, options),\n };\n }\n /**\n * Both WAAPI and our internal animation functions use durations\n * as defined by milliseconds, while our external API defines them\n * as seconds.\n */\n if (options.duration) {\n options.duration = secondsToMilliseconds(options.duration);\n }\n if (options.repeatDelay) {\n options.repeatDelay = secondsToMilliseconds(options.repeatDelay);\n }\n if (options.from !== undefined) {\n options.keyframes[0] = options.from;\n }\n let shouldSkip = false;\n if (options.type === false ||\n (options.duration === 0 && !options.repeatDelay)) {\n options.duration = 0;\n if (options.delay === 0) {\n shouldSkip = true;\n }\n }\n if (instantAnimationState.current ||\n MotionGlobalConfig.skipAnimations) {\n shouldSkip = true;\n options.duration = 0;\n options.delay = 0;\n }\n /**\n * If we can or must skip creating the animation, and apply only\n * the final keyframe, do so. We also check once keyframes are resolved but\n * this early check prevents the need to create an animation at all.\n */\n if (shouldSkip && !isHandoff && value.get() !== undefined) {\n const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);\n if (finalKeyframe !== undefined) {\n frame.update(() => {\n options.onUpdate(finalKeyframe);\n options.onComplete();\n });\n // We still want to return some animation controls here rather\n // than returning undefined\n return new GroupPlaybackControls([]);\n }\n }\n /**\n * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via\n * WAAPI. Therefore, this animation must be JS to ensure it runs \"under\" the\n * optimised animation.\n */\n if (!isHandoff && AcceleratedAnimation.supports(options)) {\n return new AcceleratedAnimation(options);\n }\n else {\n return new MainThreadAnimation(options);\n }\n};\n\nexport { animateMotionValue };\n","/**\n * Decide whether a transition is defined on a given Transition.\n * This filters out orchestration options and returns true\n * if any options are left.\n */\nfunction isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {\n return !!Object.keys(transition).length;\n}\n\nexport { isTransitionDefined };\n","function addUniqueItem(arr, item) {\n if (arr.indexOf(item) === -1)\n arr.push(item);\n}\nfunction removeItem(arr, item) {\n const index = arr.indexOf(item);\n if (index > -1)\n arr.splice(index, 1);\n}\n// Adapted from array-move\nfunction moveItem([...arr], fromIndex, toIndex) {\n const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;\n if (startIndex >= 0 && startIndex < arr.length) {\n const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;\n const [item] = arr.splice(fromIndex, 1);\n arr.splice(endIndex, 0, item);\n }\n return arr;\n}\n\nexport { addUniqueItem, moveItem, removeItem };\n","import { addUniqueItem, removeItem } from './array.mjs';\n\nclass SubscriptionManager {\n constructor() {\n this.subscriptions = [];\n }\n add(handler) {\n addUniqueItem(this.subscriptions, handler);\n return () => removeItem(this.subscriptions, handler);\n }\n notify(a, b, c) {\n const numSubscriptions = this.subscriptions.length;\n if (!numSubscriptions)\n return;\n if (numSubscriptions === 1) {\n /**\n * If there's only a single handler we can just call it without invoking a loop.\n */\n this.subscriptions[0](a, b, c);\n }\n else {\n for (let i = 0; i < numSubscriptions; i++) {\n /**\n * Check whether the handler exists before firing as it's possible\n * the subscriptions were modified during this loop running.\n */\n const handler = this.subscriptions[i];\n handler && handler(a, b, c);\n }\n }\n }\n getSize() {\n return this.subscriptions.length;\n }\n clear() {\n this.subscriptions.length = 0;\n }\n}\n\nexport { SubscriptionManager };\n","import { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { velocityPerSecond } from '../utils/velocity-per-second.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\n/**\n * Maximum time between the value of two frames, beyond which we\n * assume the velocity has since been 0.\n */\nconst MAX_VELOCITY_DELTA = 30;\nconst isFloat = (value) => {\n return !isNaN(parseFloat(value));\n};\nconst collectMotionValues = {\n current: undefined,\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nclass MotionValue {\n /**\n * @param init - The initiating value\n * @param config - Optional configuration options\n *\n * - `transformer`: A function to transform incoming values with.\n *\n * @internal\n */\n constructor(init, options = {}) {\n /**\n * This will be replaced by the build step with the latest version number.\n * When MotionValues are provided to motion components, warn if versions are mixed.\n */\n this.version = \"11.11.13\";\n /**\n * Tracks whether this value can output a velocity. Currently this is only true\n * if the value is numerical, but we might be able to widen the scope here and support\n * other value types.\n *\n * @internal\n */\n this.canTrackVelocity = null;\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n this.updateAndNotify = (v, render = true) => {\n const currentTime = time.now();\n /**\n * If we're updating the value during another frame or eventloop\n * than the previous frame, then the we set the previous frame value\n * to current.\n */\n if (this.updatedAt !== currentTime) {\n this.setPrevFrameValue();\n }\n this.prev = this.current;\n this.setCurrent(v);\n // Update update subscribers\n if (this.current !== this.prev && this.events.change) {\n this.events.change.notify(this.current);\n }\n // Update render subscribers\n if (render && this.events.renderRequest) {\n this.events.renderRequest.notify(this.current);\n }\n };\n this.hasAnimated = false;\n this.setCurrent(init);\n this.owner = options.owner;\n }\n setCurrent(current) {\n this.current = current;\n this.updatedAt = time.now();\n if (this.canTrackVelocity === null && current !== undefined) {\n this.canTrackVelocity = isFloat(this.current);\n }\n }\n setPrevFrameValue(prevFrameValue = this.current) {\n this.prevFrameValue = prevFrameValue;\n this.prevUpdatedAt = this.updatedAt;\n }\n /**\n * Adds a function that will be notified when the `MotionValue` is updated.\n *\n * It returns a function that, when called, will cancel the subscription.\n *\n * When calling `onChange` inside a React component, it should be wrapped with the\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.on(\"change\", updateOpacity)\n * const unsubscribeY = y.on(\"change\", updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return \n * }\n * ```\n *\n * @param subscriber - A function that receives the latest value.\n * @returns A function that, when called, will cancel this subscription.\n *\n * @deprecated\n */\n onChange(subscription) {\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on(\"change\", callback).`);\n }\n return this.on(\"change\", subscription);\n }\n on(eventName, callback) {\n if (!this.events[eventName]) {\n this.events[eventName] = new SubscriptionManager();\n }\n const unsubscribe = this.events[eventName].add(callback);\n if (eventName === \"change\") {\n return () => {\n unsubscribe();\n /**\n * If we have no more change listeners by the start\n * of the next frame, stop active animations.\n */\n frame.read(() => {\n if (!this.events.change.getSize()) {\n this.stop();\n }\n });\n };\n }\n return unsubscribe;\n }\n clearListeners() {\n for (const eventManagers in this.events) {\n this.events[eventManagers].clear();\n }\n }\n /**\n * Attaches a passive effect to the `MotionValue`.\n *\n * @internal\n */\n attach(passiveEffect, stopPassiveEffect) {\n this.passiveEffect = passiveEffect;\n this.stopPassiveEffect = stopPassiveEffect;\n }\n /**\n * Sets the state of the `MotionValue`.\n *\n * @remarks\n *\n * ```jsx\n * const x = useMotionValue(0)\n * x.set(10)\n * ```\n *\n * @param latest - Latest value to set.\n * @param render - Whether to notify render subscribers. Defaults to `true`\n *\n * @public\n */\n set(v, render = true) {\n if (!render || !this.passiveEffect) {\n this.updateAndNotify(v, render);\n }\n else {\n this.passiveEffect(v, this.updateAndNotify);\n }\n }\n setWithVelocity(prev, current, delta) {\n this.set(current);\n this.prev = undefined;\n this.prevFrameValue = prev;\n this.prevUpdatedAt = this.updatedAt - delta;\n }\n /**\n * Set the state of the `MotionValue`, stopping any active animations,\n * effects, and resets velocity to `0`.\n */\n jump(v, endAnimation = true) {\n this.updateAndNotify(v);\n this.prev = v;\n this.prevUpdatedAt = this.prevFrameValue = undefined;\n endAnimation && this.stop();\n if (this.stopPassiveEffect)\n this.stopPassiveEffect();\n }\n /**\n * Returns the latest state of `MotionValue`\n *\n * @returns - The latest state of `MotionValue`\n *\n * @public\n */\n get() {\n if (collectMotionValues.current) {\n collectMotionValues.current.push(this);\n }\n return this.current;\n }\n /**\n * @public\n */\n getPrevious() {\n return this.prev;\n }\n /**\n * Returns the latest velocity of `MotionValue`\n *\n * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.\n *\n * @public\n */\n getVelocity() {\n const currentTime = time.now();\n if (!this.canTrackVelocity ||\n this.prevFrameValue === undefined ||\n currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {\n return 0;\n }\n const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);\n // Casts because of parseFloat's poor typing\n return velocityPerSecond(parseFloat(this.current) -\n parseFloat(this.prevFrameValue), delta);\n }\n /**\n * Registers a new animation to control this `MotionValue`. Only one\n * animation can drive a `MotionValue` at one time.\n *\n * ```jsx\n * value.start()\n * ```\n *\n * @param animation - A function that starts the provided animation\n *\n * @internal\n */\n start(startAnimation) {\n this.stop();\n return new Promise((resolve) => {\n this.hasAnimated = true;\n this.animation = startAnimation(resolve);\n if (this.events.animationStart) {\n this.events.animationStart.notify();\n }\n }).then(() => {\n if (this.events.animationComplete) {\n this.events.animationComplete.notify();\n }\n this.clearAnimation();\n });\n }\n /**\n * Stop the currently active animation.\n *\n * @public\n */\n stop() {\n if (this.animation) {\n this.animation.stop();\n if (this.events.animationCancel) {\n this.events.animationCancel.notify();\n }\n }\n this.clearAnimation();\n }\n /**\n * Returns `true` if this value is currently animating.\n *\n * @public\n */\n isAnimating() {\n return !!this.animation;\n }\n clearAnimation() {\n delete this.animation;\n }\n /**\n * Destroy and clean up subscribers to this `MotionValue`.\n *\n * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically\n * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually\n * created a `MotionValue` via the `motionValue` function.\n *\n * @public\n */\n destroy() {\n this.clearListeners();\n this.stop();\n if (this.stopPassiveEffect) {\n this.stopPassiveEffect();\n }\n }\n}\nfunction motionValue(init, options) {\n return new MotionValue(init, options);\n}\n\nexport { MotionValue, collectMotionValues, motionValue };\n","import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { resolveVariant } from './resolve-dynamic-variants.mjs';\n\n/**\n * Set VisualElement's MotionValue, creating a new MotionValue for it if\n * it doesn't exist.\n */\nfunction setMotionValue(visualElement, key, value) {\n if (visualElement.hasValue(key)) {\n visualElement.getValue(key).set(value);\n }\n else {\n visualElement.addValue(key, motionValue(value));\n }\n}\nfunction setTarget(visualElement, definition) {\n const resolved = resolveVariant(visualElement, definition);\n let { transitionEnd = {}, transition = {}, ...target } = resolved || {};\n target = { ...target, ...transitionEnd };\n for (const key in target) {\n const value = resolveFinalValueInKeyframes(target[key]);\n setMotionValue(visualElement, key, value);\n }\n}\n\nexport { setTarget };\n","/**\n * Convert camelCase to dash-case properties.\n */\nconst camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, \"$1-$2\").toLowerCase();\n\nexport { camelToDash };\n","import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';\n\nconst optimizedAppearDataId = \"framerAppearId\";\nconst optimizedAppearDataAttribute = \"data-\" + camelToDash(optimizedAppearDataId);\n\nexport { optimizedAppearDataAttribute, optimizedAppearDataId };\n","import { optimizedAppearDataAttribute } from './data-id.mjs';\n\nfunction getOptimisedAppearId(visualElement) {\n return visualElement.props[optimizedAppearDataAttribute];\n}\n\nexport { getOptimisedAppearId };\n","const isMotionValue = (value) => Boolean(value && value.getVelocity);\n\nexport { isMotionValue };\n","import { isWillChangeMotionValue } from './is.mjs';\n\nfunction addValueToWillChange(visualElement, key) {\n const willChange = visualElement.getValue(\"willChange\");\n /**\n * It could be that a user has set willChange to a regular MotionValue,\n * in which case we can't add the value to it.\n */\n if (isWillChangeMotionValue(willChange)) {\n return willChange.add(key);\n }\n}\n\nexport { addValueToWillChange };\n","import { isMotionValue } from '../utils/is-motion-value.mjs';\n\nfunction isWillChangeMotionValue(value) {\n return Boolean(isMotionValue(value) && value.add);\n}\n\nexport { isWillChangeMotionValue };\n","import { transformProps } from '../../render/html/utils/transform.mjs';\nimport { animateMotionValue } from './motion-value.mjs';\nimport { setTarget } from '../../render/utils/setters.mjs';\nimport { getValueTransition } from '../utils/get-value-transition.mjs';\nimport { getOptimisedAppearId } from '../optimized-appear/get-appear-id.mjs';\nimport { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\n/**\n * Decide whether we should block this animation. Previously, we achieved this\n * just by checking whether the key was listed in protectedKeys, but this\n * posed problems if an animation was triggered by afterChildren and protectedKeys\n * had been set to true in the meantime.\n */\nfunction shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {\n const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;\n needsAnimating[key] = false;\n return shouldBlock;\n}\nfunction animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {\n var _a;\n let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;\n if (transitionOverride)\n transition = transitionOverride;\n const animations = [];\n const animationTypeState = type &&\n visualElement.animationState &&\n visualElement.animationState.getState()[type];\n for (const key in target) {\n const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null);\n const valueTarget = target[key];\n if (valueTarget === undefined ||\n (animationTypeState &&\n shouldBlockAnimation(animationTypeState, key))) {\n continue;\n }\n const valueTransition = {\n delay,\n ...getValueTransition(transition || {}, key),\n };\n /**\n * If this is the first time a value is being animated, check\n * to see if we're handling off from an existing animation.\n */\n let isHandoff = false;\n if (window.MotionHandoffAnimation) {\n const appearId = getOptimisedAppearId(visualElement);\n if (appearId) {\n const startTime = window.MotionHandoffAnimation(appearId, key, frame);\n if (startTime !== null) {\n valueTransition.startTime = startTime;\n isHandoff = true;\n }\n }\n }\n addValueToWillChange(visualElement, key);\n value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)\n ? { type: false }\n : valueTransition, visualElement, isHandoff));\n const animation = value.animation;\n if (animation) {\n animations.push(animation);\n }\n }\n if (transitionEnd) {\n Promise.all(animations).then(() => {\n frame.update(() => {\n transitionEnd && setTarget(visualElement, transitionEnd);\n });\n });\n }\n return animations;\n}\n\nexport { animateTarget };\n","import { isKeyframesTarget } from '../animation/utils/is-keyframes-target.mjs';\n\nconst isCustomValue = (v) => {\n return Boolean(v && typeof v === \"object\" && v.mix && v.toValue);\n};\nconst resolveFinalValueInKeyframes = (v) => {\n // TODO maybe throw if v.length - 1 is placeholder token?\n return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;\n};\n\nexport { isCustomValue, resolveFinalValueInKeyframes };\n","import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';\nimport { animateTarget } from './visual-element-target.mjs';\n\nfunction animateVariant(visualElement, variant, options = {}) {\n var _a;\n const resolved = resolveVariant(visualElement, variant, options.type === \"exit\"\n ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom\n : undefined);\n let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};\n if (options.transitionOverride) {\n transition = options.transitionOverride;\n }\n /**\n * If we have a variant, create a callback that runs it as an animation.\n * Otherwise, we resolve a Promise immediately for a composable no-op.\n */\n const getAnimation = resolved\n ? () => Promise.all(animateTarget(visualElement, resolved, options))\n : () => Promise.resolve();\n /**\n * If we have children, create a callback that runs all their animations.\n * Otherwise, we resolve a Promise immediately for a composable no-op.\n */\n const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size\n ? (forwardDelay = 0) => {\n const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;\n return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);\n }\n : () => Promise.resolve();\n /**\n * If the transition explicitly defines a \"when\" option, we need to resolve either\n * this animation or all children animations before playing the other.\n */\n const { when } = transition;\n if (when) {\n const [first, last] = when === \"beforeChildren\"\n ? [getAnimation, getChildAnimations]\n : [getChildAnimations, getAnimation];\n return first().then(() => last());\n }\n else {\n return Promise.all([getAnimation(), getChildAnimations(options.delay)]);\n }\n}\nfunction animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {\n const animations = [];\n const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;\n const generateStaggerDuration = staggerDirection === 1\n ? (i = 0) => i * staggerChildren\n : (i = 0) => maxStaggerDuration - i * staggerChildren;\n Array.from(visualElement.variantChildren)\n .sort(sortByTreeOrder)\n .forEach((child, i) => {\n child.notify(\"AnimationStart\", variant);\n animations.push(animateVariant(child, variant, {\n ...options,\n delay: delayChildren + generateStaggerDuration(i),\n }).then(() => child.notify(\"AnimationComplete\", variant)));\n });\n return Promise.all(animations);\n}\nfunction sortByTreeOrder(a, b) {\n return a.sortNodePosition(b);\n}\n\nexport { animateVariant, sortByTreeOrder };\n","import { isVariantLabel } from './is-variant-label.mjs';\nimport { variantProps } from './variant-props.mjs';\n\nconst numVariantProps = variantProps.length;\nfunction getVariantContext(visualElement) {\n if (!visualElement)\n return undefined;\n if (!visualElement.isControllingVariants) {\n const context = visualElement.parent\n ? getVariantContext(visualElement.parent) || {}\n : {};\n if (visualElement.props.initial !== undefined) {\n context.initial = visualElement.props.initial;\n }\n return context;\n }\n const context = {};\n for (let i = 0; i < numVariantProps; i++) {\n const name = variantProps[i];\n const prop = visualElement.props[name];\n if (isVariantLabel(prop) || prop === false) {\n context[name] = prop;\n }\n }\n return context;\n}\n\nexport { getVariantContext };\n","import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { isKeyframesTarget } from '../../animation/utils/is-keyframes-target.mjs';\nimport { shallowCompare } from '../../utils/shallow-compare.mjs';\nimport { isVariantLabel } from './is-variant-label.mjs';\nimport { resolveVariant } from './resolve-dynamic-variants.mjs';\nimport { variantPriorityOrder } from './variant-props.mjs';\nimport { animateVisualElement } from '../../animation/interfaces/visual-element.mjs';\nimport { getVariantContext } from './get-variant-context.mjs';\n\nconst reversePriorityOrder = [...variantPriorityOrder].reverse();\nconst numAnimationTypes = variantPriorityOrder.length;\nfunction animateList(visualElement) {\n return (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));\n}\nfunction createAnimationState(visualElement) {\n let animate = animateList(visualElement);\n let state = createState();\n let isInitialRender = true;\n /**\n * This function will be used to reduce the animation definitions for\n * each active animation type into an object of resolved values for it.\n */\n const buildResolvedTypeValues = (type) => (acc, definition) => {\n var _a;\n const resolved = resolveVariant(visualElement, definition, type === \"exit\"\n ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom\n : undefined);\n if (resolved) {\n const { transition, transitionEnd, ...target } = resolved;\n acc = { ...acc, ...target, ...transitionEnd };\n }\n return acc;\n };\n /**\n * This just allows us to inject mocked animation functions\n * @internal\n */\n function setAnimateFunction(makeAnimator) {\n animate = makeAnimator(visualElement);\n }\n /**\n * When we receive new props, we need to:\n * 1. Create a list of protected keys for each type. This is a directory of\n * value keys that are currently being \"handled\" by types of a higher priority\n * so that whenever an animation is played of a given type, these values are\n * protected from being animated.\n * 2. Determine if an animation type needs animating.\n * 3. Determine if any values have been removed from a type and figure out\n * what to animate those to.\n */\n function animateChanges(changedActiveType) {\n const { props } = visualElement;\n const context = getVariantContext(visualElement.parent) || {};\n /**\n * A list of animations that we'll build into as we iterate through the animation\n * types. This will get executed at the end of the function.\n */\n const animations = [];\n /**\n * Keep track of which values have been removed. Then, as we hit lower priority\n * animation types, we can check if they contain removed values and animate to that.\n */\n const removedKeys = new Set();\n /**\n * A dictionary of all encountered keys. This is an object to let us build into and\n * copy it without iteration. Each time we hit an animation type we set its protected\n * keys - the keys its not allowed to animate - to the latest version of this object.\n */\n let encounteredKeys = {};\n /**\n * If a variant has been removed at a given index, and this component is controlling\n * variant animations, we want to ensure lower-priority variants are forced to animate.\n */\n let removedVariantIndex = Infinity;\n /**\n * Iterate through all animation types in reverse priority order. For each, we want to\n * detect which values it's handling and whether or not they've changed (and therefore\n * need to be animated). If any values have been removed, we want to detect those in\n * lower priority props and flag for animation.\n */\n for (let i = 0; i < numAnimationTypes; i++) {\n const type = reversePriorityOrder[i];\n const typeState = state[type];\n const prop = props[type] !== undefined\n ? props[type]\n : context[type];\n const propIsVariant = isVariantLabel(prop);\n /**\n * If this type has *just* changed isActive status, set activeDelta\n * to that status. Otherwise set to null.\n */\n const activeDelta = type === changedActiveType ? typeState.isActive : null;\n if (activeDelta === false)\n removedVariantIndex = i;\n /**\n * If this prop is an inherited variant, rather than been set directly on the\n * component itself, we want to make sure we allow the parent to trigger animations.\n *\n * TODO: Can probably change this to a !isControllingVariants check\n */\n let isInherited = prop === context[type] &&\n prop !== props[type] &&\n propIsVariant;\n /**\n *\n */\n if (isInherited &&\n isInitialRender &&\n visualElement.manuallyAnimateOnMount) {\n isInherited = false;\n }\n /**\n * Set all encountered keys so far as the protected keys for this type. This will\n * be any key that has been animated or otherwise handled by active, higher-priortiy types.\n */\n typeState.protectedKeys = { ...encounteredKeys };\n // Check if we can skip analysing this prop early\n if (\n // If it isn't active and hasn't *just* been set as inactive\n (!typeState.isActive && activeDelta === null) ||\n // If we didn't and don't have any defined prop for this animation type\n (!prop && !typeState.prevProp) ||\n // Or if the prop doesn't define an animation\n isAnimationControls(prop) ||\n typeof prop === \"boolean\") {\n continue;\n }\n /**\n * As we go look through the values defined on this type, if we detect\n * a changed value or a value that was removed in a higher priority, we set\n * this to true and add this prop to the animation list.\n */\n const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);\n let shouldAnimateType = variantDidChange ||\n // If we're making this variant active, we want to always make it active\n (type === changedActiveType &&\n typeState.isActive &&\n !isInherited &&\n propIsVariant) ||\n // If we removed a higher-priority variant (i is in reverse order)\n (i > removedVariantIndex && propIsVariant);\n let handledRemovedValues = false;\n /**\n * As animations can be set as variant lists, variants or target objects, we\n * coerce everything to an array if it isn't one already\n */\n const definitionList = Array.isArray(prop) ? prop : [prop];\n /**\n * Build an object of all the resolved values. We'll use this in the subsequent\n * animateChanges calls to determine whether a value has changed.\n */\n let resolvedValues = definitionList.reduce(buildResolvedTypeValues(type), {});\n if (activeDelta === false)\n resolvedValues = {};\n /**\n * Now we need to loop through all the keys in the prev prop and this prop,\n * and decide:\n * 1. If the value has changed, and needs animating\n * 2. If it has been removed, and needs adding to the removedKeys set\n * 3. If it has been removed in a higher priority type and needs animating\n * 4. If it hasn't been removed in a higher priority but hasn't changed, and\n * needs adding to the type's protectedKeys list.\n */\n const { prevResolvedValues = {} } = typeState;\n const allKeys = {\n ...prevResolvedValues,\n ...resolvedValues,\n };\n const markToAnimate = (key) => {\n shouldAnimateType = true;\n if (removedKeys.has(key)) {\n handledRemovedValues = true;\n removedKeys.delete(key);\n }\n typeState.needsAnimating[key] = true;\n const motionValue = visualElement.getValue(key);\n if (motionValue)\n motionValue.liveStyle = false;\n };\n for (const key in allKeys) {\n const next = resolvedValues[key];\n const prev = prevResolvedValues[key];\n // If we've already handled this we can just skip ahead\n if (encounteredKeys.hasOwnProperty(key))\n continue;\n /**\n * If the value has changed, we probably want to animate it.\n */\n let valueHasChanged = false;\n if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {\n valueHasChanged = !shallowCompare(next, prev);\n }\n else {\n valueHasChanged = next !== prev;\n }\n if (valueHasChanged) {\n if (next !== undefined && next !== null) {\n // If next is defined and doesn't equal prev, it needs animating\n markToAnimate(key);\n }\n else {\n // If it's undefined, it's been removed.\n removedKeys.add(key);\n }\n }\n else if (next !== undefined && removedKeys.has(key)) {\n /**\n * If next hasn't changed and it isn't undefined, we want to check if it's\n * been removed by a higher priority\n */\n markToAnimate(key);\n }\n else {\n /**\n * If it hasn't changed, we add it to the list of protected values\n * to ensure it doesn't get animated.\n */\n typeState.protectedKeys[key] = true;\n }\n }\n /**\n * Update the typeState so next time animateChanges is called we can compare the\n * latest prop and resolvedValues to these.\n */\n typeState.prevProp = prop;\n typeState.prevResolvedValues = resolvedValues;\n /**\n *\n */\n if (typeState.isActive) {\n encounteredKeys = { ...encounteredKeys, ...resolvedValues };\n }\n if (isInitialRender && visualElement.blockInitialAnimation) {\n shouldAnimateType = false;\n }\n /**\n * If this is an inherited prop we want to skip this animation\n * unless the inherited variants haven't changed on this render.\n */\n const willAnimateViaParent = isInherited && variantDidChange;\n const needsAnimating = !willAnimateViaParent || handledRemovedValues;\n if (shouldAnimateType && needsAnimating) {\n animations.push(...definitionList.map((animation) => ({\n animation: animation,\n options: { type },\n })));\n }\n }\n /**\n * If there are some removed value that haven't been dealt with,\n * we need to create a new animation that falls back either to the value\n * defined in the style prop, or the last read value.\n */\n if (removedKeys.size) {\n const fallbackAnimation = {};\n removedKeys.forEach((key) => {\n const fallbackTarget = visualElement.getBaseTarget(key);\n const motionValue = visualElement.getValue(key);\n if (motionValue)\n motionValue.liveStyle = true;\n // @ts-expect-error - @mattgperry to figure if we should do something here\n fallbackAnimation[key] = fallbackTarget !== null && fallbackTarget !== void 0 ? fallbackTarget : null;\n });\n animations.push({ animation: fallbackAnimation });\n }\n let shouldAnimate = Boolean(animations.length);\n if (isInitialRender &&\n (props.initial === false || props.initial === props.animate) &&\n !visualElement.manuallyAnimateOnMount) {\n shouldAnimate = false;\n }\n isInitialRender = false;\n return shouldAnimate ? animate(animations) : Promise.resolve();\n }\n /**\n * Change whether a certain animation type is active.\n */\n function setActive(type, isActive) {\n var _a;\n // If the active state hasn't changed, we can safely do nothing here\n if (state[type].isActive === isActive)\n return Promise.resolve();\n // Propagate active change to children\n (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });\n state[type].isActive = isActive;\n const animations = animateChanges(type);\n for (const key in state) {\n state[key].protectedKeys = {};\n }\n return animations;\n }\n return {\n animateChanges,\n setActive,\n setAnimateFunction,\n getState: () => state,\n reset: () => {\n state = createState();\n isInitialRender = true;\n },\n };\n}\nfunction checkVariantsDidChange(prev, next) {\n if (typeof next === \"string\") {\n return next !== prev;\n }\n else if (Array.isArray(next)) {\n return !shallowCompare(next, prev);\n }\n return false;\n}\nfunction createTypeState(isActive = false) {\n return {\n isActive,\n protectedKeys: {},\n needsAnimating: {},\n prevResolvedValues: {},\n };\n}\nfunction createState() {\n return {\n animate: createTypeState(true),\n whileInView: createTypeState(),\n whileHover: createTypeState(),\n whileTap: createTypeState(),\n whileDrag: createTypeState(),\n whileFocus: createTypeState(),\n exit: createTypeState(),\n };\n}\n\nexport { checkVariantsDidChange, createAnimationState };\n","import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';\nimport { animateTarget } from './visual-element-target.mjs';\nimport { animateVariant } from './visual-element-variant.mjs';\n\nfunction animateVisualElement(visualElement, definition, options = {}) {\n visualElement.notify(\"AnimationStart\", definition);\n let animation;\n if (Array.isArray(definition)) {\n const animations = definition.map((variant) => animateVariant(visualElement, variant, options));\n animation = Promise.all(animations);\n }\n else if (typeof definition === \"string\") {\n animation = animateVariant(visualElement, definition, options);\n }\n else {\n const resolvedDefinition = typeof definition === \"function\"\n ? resolveVariant(visualElement, definition, options.custom)\n : definition;\n animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));\n }\n return animation.then(() => {\n visualElement.notify(\"AnimationComplete\", definition);\n });\n}\n\nexport { animateVisualElement };\n","class Feature {\n constructor(node) {\n this.isMounted = false;\n this.node = node;\n }\n update() { }\n}\n\nexport { Feature };\n","import { Feature } from '../Feature.mjs';\n\nlet id = 0;\nclass ExitAnimationFeature extends Feature {\n constructor() {\n super(...arguments);\n this.id = id++;\n }\n update() {\n if (!this.node.presenceContext)\n return;\n const { isPresent, onExitComplete } = this.node.presenceContext;\n const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};\n if (!this.node.animationState || isPresent === prevIsPresent) {\n return;\n }\n const exitAnimation = this.node.animationState.setActive(\"exit\", !isPresent);\n if (onExitComplete && !isPresent) {\n exitAnimation.then(() => onExitComplete(this.id));\n }\n }\n mount() {\n const { register } = this.node.presenceContext || {};\n if (register) {\n this.unmount = register(this.id);\n }\n }\n unmount() { }\n}\n\nexport { ExitAnimationFeature };\n","import { AnimationFeature } from './animation/index.mjs';\nimport { ExitAnimationFeature } from './animation/exit.mjs';\n\nconst animations = {\n animation: {\n Feature: AnimationFeature,\n },\n exit: {\n Feature: ExitAnimationFeature,\n },\n};\n\nexport { animations };\n","import { isAnimationControls } from '../../../animation/utils/is-animation-controls.mjs';\nimport { createAnimationState } from '../../../render/utils/animation-state.mjs';\nimport { Feature } from '../Feature.mjs';\n\nclass AnimationFeature extends Feature {\n /**\n * We dynamically generate the AnimationState manager as it contains a reference\n * to the underlying animation library. We only want to load that if we load this,\n * so people can optionally code split it out using the `m` component.\n */\n constructor(node) {\n super(node);\n node.animationState || (node.animationState = createAnimationState(node));\n }\n updateAnimationControlsSubscription() {\n const { animate } = this.node.getProps();\n if (isAnimationControls(animate)) {\n this.unmountControls = animate.subscribe(this.node);\n }\n }\n /**\n * Subscribe any provided AnimationControls to the component's VisualElement\n */\n mount() {\n this.updateAnimationControlsSubscription();\n }\n update() {\n const { animate } = this.node.getProps();\n const { animate: prevAnimate } = this.node.prevProps || {};\n if (animate !== prevAnimate) {\n this.updateAnimationControlsSubscription();\n }\n }\n unmount() {\n var _a;\n this.node.animationState.reset();\n (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);\n }\n}\n\nexport { AnimationFeature };\n","const isPrimaryPointer = (event) => {\n if (event.pointerType === \"mouse\") {\n return typeof event.button !== \"number\" || event.button <= 0;\n }\n else {\n /**\n * isPrimary is true for all mice buttons, whereas every touch point\n * is regarded as its own input. So subsequent concurrent touch points\n * will be false.\n *\n * Specifically match against false here as incomplete versions of\n * PointerEvents in very old browser might have it set as undefined.\n */\n return event.isPrimary !== false;\n }\n};\n\nexport { isPrimaryPointer };\n","import { isPrimaryPointer } from './utils/is-primary-pointer.mjs';\n\nfunction extractEventInfo(event, pointType = \"page\") {\n return {\n point: {\n x: event[`${pointType}X`],\n y: event[`${pointType}Y`],\n },\n };\n}\nconst addPointerInfo = (handler) => {\n return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));\n};\n\nexport { addPointerInfo, extractEventInfo };\n","function addDomEvent(target, eventName, handler, options = { passive: true }) {\n target.addEventListener(eventName, handler, options);\n return () => target.removeEventListener(eventName, handler);\n}\n\nexport { addDomEvent };\n","import { addDomEvent } from './add-dom-event.mjs';\nimport { addPointerInfo } from './event-info.mjs';\n\nfunction addPointerEvent(target, eventName, handler, options) {\n return addDomEvent(target, eventName, addPointerInfo(handler), options);\n}\n\nexport { addPointerEvent };\n","const distance = (a, b) => Math.abs(a - b);\nfunction distance2D(a, b) {\n // Multi-dimensional\n const xDelta = distance(a.x, b.x);\n const yDelta = distance(a.y, b.y);\n return Math.sqrt(xDelta ** 2 + yDelta ** 2);\n}\n\nexport { distance, distance2D };\n","import { extractEventInfo } from '../../events/event-info.mjs';\nimport { secondsToMilliseconds, millisecondsToSeconds } from '../../utils/time-conversion.mjs';\nimport { addPointerEvent } from '../../events/add-pointer-event.mjs';\nimport { pipe } from '../../utils/pipe.mjs';\nimport { distance2D } from '../../utils/distance.mjs';\nimport { isPrimaryPointer } from '../../events/utils/is-primary-pointer.mjs';\nimport { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';\n\n/**\n * @internal\n */\nclass PanSession {\n constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) {\n /**\n * @internal\n */\n this.startEvent = null;\n /**\n * @internal\n */\n this.lastMoveEvent = null;\n /**\n * @internal\n */\n this.lastMoveEventInfo = null;\n /**\n * @internal\n */\n this.handlers = {};\n /**\n * @internal\n */\n this.contextWindow = window;\n this.updatePoint = () => {\n if (!(this.lastMoveEvent && this.lastMoveEventInfo))\n return;\n const info = getPanInfo(this.lastMoveEventInfo, this.history);\n const isPanStarted = this.startEvent !== null;\n // Only start panning if the offset is larger than 3 pixels. If we make it\n // any larger than this we'll want to reset the pointer history\n // on the first update to avoid visual snapping to the cursoe.\n const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;\n if (!isPanStarted && !isDistancePastThreshold)\n return;\n const { point } = info;\n const { timestamp } = frameData;\n this.history.push({ ...point, timestamp });\n const { onStart, onMove } = this.handlers;\n if (!isPanStarted) {\n onStart && onStart(this.lastMoveEvent, info);\n this.startEvent = this.lastMoveEvent;\n }\n onMove && onMove(this.lastMoveEvent, info);\n };\n this.handlePointerMove = (event, info) => {\n this.lastMoveEvent = event;\n this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);\n // Throttle mouse move event to once per frame\n frame.update(this.updatePoint, true);\n };\n this.handlePointerUp = (event, info) => {\n this.end();\n const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;\n if (this.dragSnapToOrigin)\n resumeAnimation && resumeAnimation();\n if (!(this.lastMoveEvent && this.lastMoveEventInfo))\n return;\n const panInfo = getPanInfo(event.type === \"pointercancel\"\n ? this.lastMoveEventInfo\n : transformPoint(info, this.transformPagePoint), this.history);\n if (this.startEvent && onEnd) {\n onEnd(event, panInfo);\n }\n onSessionEnd && onSessionEnd(event, panInfo);\n };\n // If we have more than one touch, don't start detecting this gesture\n if (!isPrimaryPointer(event))\n return;\n this.dragSnapToOrigin = dragSnapToOrigin;\n this.handlers = handlers;\n this.transformPagePoint = transformPagePoint;\n this.contextWindow = contextWindow || window;\n const info = extractEventInfo(event);\n const initialInfo = transformPoint(info, this.transformPagePoint);\n const { point } = initialInfo;\n const { timestamp } = frameData;\n this.history = [{ ...point, timestamp }];\n const { onSessionStart } = handlers;\n onSessionStart &&\n onSessionStart(event, getPanInfo(initialInfo, this.history));\n this.removeListeners = pipe(addPointerEvent(this.contextWindow, \"pointermove\", this.handlePointerMove), addPointerEvent(this.contextWindow, \"pointerup\", this.handlePointerUp), addPointerEvent(this.contextWindow, \"pointercancel\", this.handlePointerUp));\n }\n updateHandlers(handlers) {\n this.handlers = handlers;\n }\n end() {\n this.removeListeners && this.removeListeners();\n cancelFrame(this.updatePoint);\n }\n}\nfunction transformPoint(info, transformPagePoint) {\n return transformPagePoint ? { point: transformPagePoint(info.point) } : info;\n}\nfunction subtractPoint(a, b) {\n return { x: a.x - b.x, y: a.y - b.y };\n}\nfunction getPanInfo({ point }, history) {\n return {\n point,\n delta: subtractPoint(point, lastDevicePoint(history)),\n offset: subtractPoint(point, startDevicePoint(history)),\n velocity: getVelocity(history, 0.1),\n };\n}\nfunction startDevicePoint(history) {\n return history[0];\n}\nfunction lastDevicePoint(history) {\n return history[history.length - 1];\n}\nfunction getVelocity(history, timeDelta) {\n if (history.length < 2) {\n return { x: 0, y: 0 };\n }\n let i = history.length - 1;\n let timestampedPoint = null;\n const lastPoint = lastDevicePoint(history);\n while (i >= 0) {\n timestampedPoint = history[i];\n if (lastPoint.timestamp - timestampedPoint.timestamp >\n secondsToMilliseconds(timeDelta)) {\n break;\n }\n i--;\n }\n if (!timestampedPoint) {\n return { x: 0, y: 0 };\n }\n const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);\n if (time === 0) {\n return { x: 0, y: 0 };\n }\n const currentVelocity = {\n x: (lastPoint.x - timestampedPoint.x) / time,\n y: (lastPoint.y - timestampedPoint.y) / time,\n };\n if (currentVelocity.x === Infinity) {\n currentVelocity.x = 0;\n }\n if (currentVelocity.y === Infinity) {\n currentVelocity.y = 0;\n }\n return currentVelocity;\n}\n\nexport { PanSession };\n","function createLock(name) {\n let lock = null;\n return () => {\n const openLock = () => {\n lock = null;\n };\n if (lock === null) {\n lock = name;\n return openLock;\n }\n return false;\n };\n}\nconst globalHorizontalLock = createLock(\"dragHorizontal\");\nconst globalVerticalLock = createLock(\"dragVertical\");\nfunction getGlobalLock(drag) {\n let lock = false;\n if (drag === \"y\") {\n lock = globalVerticalLock();\n }\n else if (drag === \"x\") {\n lock = globalHorizontalLock();\n }\n else {\n const openHorizontal = globalHorizontalLock();\n const openVertical = globalVerticalLock();\n if (openHorizontal && openVertical) {\n lock = () => {\n openHorizontal();\n openVertical();\n };\n }\n else {\n // Release the locks because we don't use them\n if (openHorizontal)\n openHorizontal();\n if (openVertical)\n openVertical();\n }\n }\n return lock;\n}\nfunction isDragActive() {\n // Check the gesture lock - if we get it, it means no drag gesture is active\n // and we can safely fire the tap gesture.\n const openGestureLock = getGlobalLock(true);\n if (!openGestureLock)\n return true;\n openGestureLock();\n return false;\n}\n\nexport { createLock, getGlobalLock, isDragActive };\n","function isRefObject(ref) {\n return (ref &&\n typeof ref === \"object\" &&\n Object.prototype.hasOwnProperty.call(ref, \"current\"));\n}\n\nexport { isRefObject };\n","import { mixNumber } from '../../utils/mix/number.mjs';\n\nconst SCALE_PRECISION = 0.0001;\nconst SCALE_MIN = 1 - SCALE_PRECISION;\nconst SCALE_MAX = 1 + SCALE_PRECISION;\nconst TRANSLATE_PRECISION = 0.01;\nconst TRANSLATE_MIN = 0 - TRANSLATE_PRECISION;\nconst TRANSLATE_MAX = 0 + TRANSLATE_PRECISION;\nfunction calcLength(axis) {\n return axis.max - axis.min;\n}\nfunction isNear(value, target, maxDistance) {\n return Math.abs(value - target) <= maxDistance;\n}\nfunction calcAxisDelta(delta, source, target, origin = 0.5) {\n delta.origin = origin;\n delta.originPoint = mixNumber(source.min, source.max, delta.origin);\n delta.scale = calcLength(target) / calcLength(source);\n delta.translate =\n mixNumber(target.min, target.max, delta.origin) - delta.originPoint;\n if ((delta.scale >= SCALE_MIN && delta.scale <= SCALE_MAX) ||\n isNaN(delta.scale)) {\n delta.scale = 1.0;\n }\n if ((delta.translate >= TRANSLATE_MIN &&\n delta.translate <= TRANSLATE_MAX) ||\n isNaN(delta.translate)) {\n delta.translate = 0.0;\n }\n}\nfunction calcBoxDelta(delta, source, target, origin) {\n calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined);\n calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined);\n}\nfunction calcRelativeAxis(target, relative, parent) {\n target.min = parent.min + relative.min;\n target.max = target.min + calcLength(relative);\n}\nfunction calcRelativeBox(target, relative, parent) {\n calcRelativeAxis(target.x, relative.x, parent.x);\n calcRelativeAxis(target.y, relative.y, parent.y);\n}\nfunction calcRelativeAxisPosition(target, layout, parent) {\n target.min = layout.min - parent.min;\n target.max = target.min + calcLength(layout);\n}\nfunction calcRelativePosition(target, layout, parent) {\n calcRelativeAxisPosition(target.x, layout.x, parent.x);\n calcRelativeAxisPosition(target.y, layout.y, parent.y);\n}\n\nexport { calcAxisDelta, calcBoxDelta, calcLength, calcRelativeAxis, calcRelativeAxisPosition, calcRelativeBox, calcRelativePosition, isNear };\n","import { progress } from '../../../utils/progress.mjs';\nimport { calcLength } from '../../../projection/geometry/delta-calc.mjs';\nimport { clamp } from '../../../utils/clamp.mjs';\nimport { mixNumber } from '../../../utils/mix/number.mjs';\n\n/**\n * Apply constraints to a point. These constraints are both physical along an\n * axis, and an elastic factor that determines how much to constrain the point\n * by if it does lie outside the defined parameters.\n */\nfunction applyConstraints(point, { min, max }, elastic) {\n if (min !== undefined && point < min) {\n // If we have a min point defined, and this is outside of that, constrain\n point = elastic\n ? mixNumber(min, point, elastic.min)\n : Math.max(point, min);\n }\n else if (max !== undefined && point > max) {\n // If we have a max point defined, and this is outside of that, constrain\n point = elastic\n ? mixNumber(max, point, elastic.max)\n : Math.min(point, max);\n }\n return point;\n}\n/**\n * Calculate constraints in terms of the viewport when defined relatively to the\n * measured axis. This is measured from the nearest edge, so a max constraint of 200\n * on an axis with a max value of 300 would return a constraint of 500 - axis length\n */\nfunction calcRelativeAxisConstraints(axis, min, max) {\n return {\n min: min !== undefined ? axis.min + min : undefined,\n max: max !== undefined\n ? axis.max + max - (axis.max - axis.min)\n : undefined,\n };\n}\n/**\n * Calculate constraints in terms of the viewport when\n * defined relatively to the measured bounding box.\n */\nfunction calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {\n return {\n x: calcRelativeAxisConstraints(layoutBox.x, left, right),\n y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),\n };\n}\n/**\n * Calculate viewport constraints when defined as another viewport-relative axis\n */\nfunction calcViewportAxisConstraints(layoutAxis, constraintsAxis) {\n let min = constraintsAxis.min - layoutAxis.min;\n let max = constraintsAxis.max - layoutAxis.max;\n // If the constraints axis is actually smaller than the layout axis then we can\n // flip the constraints\n if (constraintsAxis.max - constraintsAxis.min <\n layoutAxis.max - layoutAxis.min) {\n [min, max] = [max, min];\n }\n return { min, max };\n}\n/**\n * Calculate viewport constraints when defined as another viewport-relative box\n */\nfunction calcViewportConstraints(layoutBox, constraintsBox) {\n return {\n x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),\n y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),\n };\n}\n/**\n * Calculate a transform origin relative to the source axis, between 0-1, that results\n * in an asthetically pleasing scale/transform needed to project from source to target.\n */\nfunction calcOrigin(source, target) {\n let origin = 0.5;\n const sourceLength = calcLength(source);\n const targetLength = calcLength(target);\n if (targetLength > sourceLength) {\n origin = progress(target.min, target.max - sourceLength, source.min);\n }\n else if (sourceLength > targetLength) {\n origin = progress(source.min, source.max - targetLength, target.min);\n }\n return clamp(0, 1, origin);\n}\n/**\n * Rebase the calculated viewport constraints relative to the layout.min point.\n */\nfunction rebaseAxisConstraints(layout, constraints) {\n const relativeConstraints = {};\n if (constraints.min !== undefined) {\n relativeConstraints.min = constraints.min - layout.min;\n }\n if (constraints.max !== undefined) {\n relativeConstraints.max = constraints.max - layout.min;\n }\n return relativeConstraints;\n}\nconst defaultElastic = 0.35;\n/**\n * Accepts a dragElastic prop and returns resolved elastic values for each axis.\n */\nfunction resolveDragElastic(dragElastic = defaultElastic) {\n if (dragElastic === false) {\n dragElastic = 0;\n }\n else if (dragElastic === true) {\n dragElastic = defaultElastic;\n }\n return {\n x: resolveAxisElastic(dragElastic, \"left\", \"right\"),\n y: resolveAxisElastic(dragElastic, \"top\", \"bottom\"),\n };\n}\nfunction resolveAxisElastic(dragElastic, minLabel, maxLabel) {\n return {\n min: resolvePointElastic(dragElastic, minLabel),\n max: resolvePointElastic(dragElastic, maxLabel),\n };\n}\nfunction resolvePointElastic(dragElastic, label) {\n return typeof dragElastic === \"number\"\n ? dragElastic\n : dragElastic[label] || 0;\n}\n\nexport { applyConstraints, calcOrigin, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };\n","const createAxisDelta = () => ({\n translate: 0,\n scale: 1,\n origin: 0,\n originPoint: 0,\n});\nconst createDelta = () => ({\n x: createAxisDelta(),\n y: createAxisDelta(),\n});\nconst createAxis = () => ({ min: 0, max: 0 });\nconst createBox = () => ({\n x: createAxis(),\n y: createAxis(),\n});\n\nexport { createAxis, createAxisDelta, createBox, createDelta };\n","function eachAxis(callback) {\n return [callback(\"x\"), callback(\"y\")];\n}\n\nexport { eachAxis };\n","/**\n * Bounding boxes tend to be defined as top, left, right, bottom. For various operations\n * it's easier to consider each axis individually. This function returns a bounding box\n * as a map of single-axis min/max values.\n */\nfunction convertBoundingBoxToBox({ top, left, right, bottom, }) {\n return {\n x: { min: left, max: right },\n y: { min: top, max: bottom },\n };\n}\nfunction convertBoxToBoundingBox({ x, y }) {\n return { top: y.min, right: x.max, bottom: y.max, left: x.min };\n}\n/**\n * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function\n * provided by Framer to allow measured points to be corrected for device scaling. This is used\n * when measuring DOM elements and DOM event points.\n */\nfunction transformBoxPoints(point, transformPoint) {\n if (!transformPoint)\n return point;\n const topLeft = transformPoint({ x: point.left, y: point.top });\n const bottomRight = transformPoint({ x: point.right, y: point.bottom });\n return {\n top: topLeft.y,\n left: topLeft.x,\n bottom: bottomRight.y,\n right: bottomRight.x,\n };\n}\n\nexport { convertBoundingBoxToBox, convertBoxToBoundingBox, transformBoxPoints };\n","function isIdentityScale(scale) {\n return scale === undefined || scale === 1;\n}\nfunction hasScale({ scale, scaleX, scaleY }) {\n return (!isIdentityScale(scale) ||\n !isIdentityScale(scaleX) ||\n !isIdentityScale(scaleY));\n}\nfunction hasTransform(values) {\n return (hasScale(values) ||\n has2DTranslate(values) ||\n values.z ||\n values.rotate ||\n values.rotateX ||\n values.rotateY ||\n values.skewX ||\n values.skewY);\n}\nfunction has2DTranslate(values) {\n return is2DTranslate(values.x) || is2DTranslate(values.y);\n}\nfunction is2DTranslate(value) {\n return value && value !== \"0%\";\n}\n\nexport { has2DTranslate, hasScale, hasTransform };\n","import { mixNumber } from '../../utils/mix/number.mjs';\nimport { hasTransform } from '../utils/has-transform.mjs';\n\n/**\n * Scales a point based on a factor and an originPoint\n */\nfunction scalePoint(point, scale, originPoint) {\n const distanceFromOrigin = point - originPoint;\n const scaled = scale * distanceFromOrigin;\n return originPoint + scaled;\n}\n/**\n * Applies a translate/scale delta to a point\n */\nfunction applyPointDelta(point, translate, scale, originPoint, boxScale) {\n if (boxScale !== undefined) {\n point = scalePoint(point, boxScale, originPoint);\n }\n return scalePoint(point, scale, originPoint) + translate;\n}\n/**\n * Applies a translate/scale delta to an axis\n */\nfunction applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) {\n axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale);\n axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale);\n}\n/**\n * Applies a translate/scale delta to a box\n */\nfunction applyBoxDelta(box, { x, y }) {\n applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);\n applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);\n}\nconst TREE_SCALE_SNAP_MIN = 0.999999999999;\nconst TREE_SCALE_SNAP_MAX = 1.0000000000001;\n/**\n * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms\n * in a tree upon our box before then calculating how to project it into our desired viewport-relative box\n *\n * This is the final nested loop within updateLayoutDelta for future refactoring\n */\nfunction applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {\n const treeLength = treePath.length;\n if (!treeLength)\n return;\n // Reset the treeScale\n treeScale.x = treeScale.y = 1;\n let node;\n let delta;\n for (let i = 0; i < treeLength; i++) {\n node = treePath[i];\n delta = node.projectionDelta;\n /**\n * TODO: Prefer to remove this, but currently we have motion components with\n * display: contents in Framer.\n */\n const { visualElement } = node.options;\n if (visualElement &&\n visualElement.props.style &&\n visualElement.props.style.display === \"contents\") {\n continue;\n }\n if (isSharedTransition &&\n node.options.layoutScroll &&\n node.scroll &&\n node !== node.root) {\n transformBox(box, {\n x: -node.scroll.offset.x,\n y: -node.scroll.offset.y,\n });\n }\n if (delta) {\n // Incoporate each ancestor's scale into a culmulative treeScale for this component\n treeScale.x *= delta.x.scale;\n treeScale.y *= delta.y.scale;\n // Apply each ancestor's calculated delta into this component's recorded layout box\n applyBoxDelta(box, delta);\n }\n if (isSharedTransition && hasTransform(node.latestValues)) {\n transformBox(box, node.latestValues);\n }\n }\n /**\n * Snap tree scale back to 1 if it's within a non-perceivable threshold.\n * This will help reduce useless scales getting rendered.\n */\n if (treeScale.x < TREE_SCALE_SNAP_MAX &&\n treeScale.x > TREE_SCALE_SNAP_MIN) {\n treeScale.x = 1.0;\n }\n if (treeScale.y < TREE_SCALE_SNAP_MAX &&\n treeScale.y > TREE_SCALE_SNAP_MIN) {\n treeScale.y = 1.0;\n }\n}\nfunction translateAxis(axis, distance) {\n axis.min = axis.min + distance;\n axis.max = axis.max + distance;\n}\n/**\n * Apply a transform to an axis from the latest resolved motion values.\n * This function basically acts as a bridge between a flat motion value map\n * and applyAxisDelta\n */\nfunction transformAxis(axis, axisTranslate, axisScale, boxScale, axisOrigin = 0.5) {\n const originPoint = mixNumber(axis.min, axis.max, axisOrigin);\n // Apply the axis delta to the final axis\n applyAxisDelta(axis, axisTranslate, axisScale, originPoint, boxScale);\n}\n/**\n * Apply a transform to a box from the latest resolved motion values.\n */\nfunction transformBox(box, transform) {\n transformAxis(box.x, transform.x, transform.scaleX, transform.scale, transform.originX);\n transformAxis(box.y, transform.y, transform.scaleY, transform.scale, transform.originY);\n}\n\nexport { applyAxisDelta, applyBoxDelta, applyPointDelta, applyTreeDeltas, scalePoint, transformAxis, transformBox, translateAxis };\n","import { convertBoundingBoxToBox, transformBoxPoints } from '../geometry/conversion.mjs';\nimport { translateAxis } from '../geometry/delta-apply.mjs';\n\nfunction measureViewportBox(instance, transformPoint) {\n return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));\n}\nfunction measurePageBox(element, rootProjectionNode, transformPagePoint) {\n const viewportBox = measureViewportBox(element, transformPagePoint);\n const { scroll } = rootProjectionNode;\n if (scroll) {\n translateAxis(viewportBox.x, scroll.offset.x);\n translateAxis(viewportBox.y, scroll.offset.y);\n }\n return viewportBox;\n}\n\nexport { measurePageBox, measureViewportBox };\n","// Fixes https://github.com/framer/motion/issues/2270\nconst getContextWindow = ({ current }) => {\n return current ? current.ownerDocument.defaultView : null;\n};\n\nexport { getContextWindow };\n","import { invariant } from '../../utils/errors.mjs';\nimport { PanSession } from '../pan/PanSession.mjs';\nimport { getGlobalLock } from './utils/lock.mjs';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\nimport { addPointerEvent } from '../../events/add-pointer-event.mjs';\nimport { applyConstraints, calcRelativeConstraints, resolveDragElastic, rebaseAxisConstraints, calcViewportConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';\nimport { createBox } from '../../projection/geometry/models.mjs';\nimport { eachAxis } from '../../projection/utils/each-axis.mjs';\nimport { measurePageBox } from '../../projection/utils/measure.mjs';\nimport { extractEventInfo } from '../../events/event-info.mjs';\nimport { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';\nimport { addDomEvent } from '../../events/add-dom-event.mjs';\nimport { calcLength } from '../../projection/geometry/delta-calc.mjs';\nimport { mixNumber } from '../../utils/mix/number.mjs';\nimport { percent } from '../../value/types/numbers/units.mjs';\nimport { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';\nimport { getContextWindow } from '../../utils/get-context-window.mjs';\nimport { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst elementDragControls = new WeakMap();\n/**\n *\n */\n// let latestPointerEvent: PointerEvent\nclass VisualElementDragControls {\n constructor(visualElement) {\n // This is a reference to the global drag gesture lock, ensuring only one component\n // can \"capture\" the drag of one or both axes.\n // TODO: Look into moving this into pansession?\n this.openGlobalLock = null;\n this.isDragging = false;\n this.currentDirection = null;\n this.originPoint = { x: 0, y: 0 };\n /**\n * The permitted boundaries of travel, in pixels.\n */\n this.constraints = false;\n this.hasMutatedConstraints = false;\n /**\n * The per-axis resolved elastic values.\n */\n this.elastic = createBox();\n this.visualElement = visualElement;\n }\n start(originEvent, { snapToCursor = false } = {}) {\n /**\n * Don't start dragging if this component is exiting\n */\n const { presenceContext } = this.visualElement;\n if (presenceContext && presenceContext.isPresent === false)\n return;\n const onSessionStart = (event) => {\n const { dragSnapToOrigin } = this.getProps();\n // Stop or pause any animations on both axis values immediately. This allows the user to throw and catch\n // the component.\n dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation();\n if (snapToCursor) {\n this.snapToCursor(extractEventInfo(event, \"page\").point);\n }\n };\n const onStart = (event, info) => {\n // Attempt to grab the global drag gesture lock - maybe make this part of PanSession\n const { drag, dragPropagation, onDragStart } = this.getProps();\n if (drag && !dragPropagation) {\n if (this.openGlobalLock)\n this.openGlobalLock();\n this.openGlobalLock = getGlobalLock(drag);\n // If we don 't have the lock, don't start dragging\n if (!this.openGlobalLock)\n return;\n }\n this.isDragging = true;\n this.currentDirection = null;\n this.resolveConstraints();\n if (this.visualElement.projection) {\n this.visualElement.projection.isAnimationBlocked = true;\n this.visualElement.projection.target = undefined;\n }\n /**\n * Record gesture origin\n */\n eachAxis((axis) => {\n let current = this.getAxisMotionValue(axis).get() || 0;\n /**\n * If the MotionValue is a percentage value convert to px\n */\n if (percent.test(current)) {\n const { projection } = this.visualElement;\n if (projection && projection.layout) {\n const measuredAxis = projection.layout.layoutBox[axis];\n if (measuredAxis) {\n const length = calcLength(measuredAxis);\n current = length * (parseFloat(current) / 100);\n }\n }\n }\n this.originPoint[axis] = current;\n });\n // Fire onDragStart event\n if (onDragStart) {\n frame.postRender(() => onDragStart(event, info));\n }\n addValueToWillChange(this.visualElement, \"transform\");\n const { animationState } = this.visualElement;\n animationState && animationState.setActive(\"whileDrag\", true);\n };\n const onMove = (event, info) => {\n // latestPointerEvent = event\n const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();\n // If we didn't successfully receive the gesture lock, early return.\n if (!dragPropagation && !this.openGlobalLock)\n return;\n const { offset } = info;\n // Attempt to detect drag direction if directionLock is true\n if (dragDirectionLock && this.currentDirection === null) {\n this.currentDirection = getCurrentDirection(offset);\n // If we've successfully set a direction, notify listener\n if (this.currentDirection !== null) {\n onDirectionLock && onDirectionLock(this.currentDirection);\n }\n return;\n }\n // Update each point with the latest position\n this.updateAxis(\"x\", info.point, offset);\n this.updateAxis(\"y\", info.point, offset);\n /**\n * Ideally we would leave the renderer to fire naturally at the end of\n * this frame but if the element is about to change layout as the result\n * of a re-render we want to ensure the browser can read the latest\n * bounding box to ensure the pointer and element don't fall out of sync.\n */\n this.visualElement.render();\n /**\n * This must fire after the render call as it might trigger a state\n * change which itself might trigger a layout update.\n */\n onDrag && onDrag(event, info);\n };\n const onSessionEnd = (event, info) => this.stop(event, info);\n const resumeAnimation = () => eachAxis((axis) => {\n var _a;\n return this.getAnimationState(axis) === \"paused\" &&\n ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());\n });\n const { dragSnapToOrigin } = this.getProps();\n this.panSession = new PanSession(originEvent, {\n onSessionStart,\n onStart,\n onMove,\n onSessionEnd,\n resumeAnimation,\n }, {\n transformPagePoint: this.visualElement.getTransformPagePoint(),\n dragSnapToOrigin,\n contextWindow: getContextWindow(this.visualElement),\n });\n }\n stop(event, info) {\n const isDragging = this.isDragging;\n this.cancel();\n if (!isDragging)\n return;\n const { velocity } = info;\n this.startAnimation(velocity);\n const { onDragEnd } = this.getProps();\n if (onDragEnd) {\n frame.postRender(() => onDragEnd(event, info));\n }\n }\n cancel() {\n this.isDragging = false;\n const { projection, animationState } = this.visualElement;\n if (projection) {\n projection.isAnimationBlocked = false;\n }\n this.panSession && this.panSession.end();\n this.panSession = undefined;\n const { dragPropagation } = this.getProps();\n if (!dragPropagation && this.openGlobalLock) {\n this.openGlobalLock();\n this.openGlobalLock = null;\n }\n animationState && animationState.setActive(\"whileDrag\", false);\n }\n updateAxis(axis, _point, offset) {\n const { drag } = this.getProps();\n // If we're not dragging this axis, do an early return.\n if (!offset || !shouldDrag(axis, drag, this.currentDirection))\n return;\n const axisValue = this.getAxisMotionValue(axis);\n let next = this.originPoint[axis] + offset[axis];\n // Apply constraints\n if (this.constraints && this.constraints[axis]) {\n next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);\n }\n axisValue.set(next);\n }\n resolveConstraints() {\n var _a;\n const { dragConstraints, dragElastic } = this.getProps();\n const layout = this.visualElement.projection &&\n !this.visualElement.projection.layout\n ? this.visualElement.projection.measure(false)\n : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout;\n const prevConstraints = this.constraints;\n if (dragConstraints && isRefObject(dragConstraints)) {\n if (!this.constraints) {\n this.constraints = this.resolveRefConstraints();\n }\n }\n else {\n if (dragConstraints && layout) {\n this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);\n }\n else {\n this.constraints = false;\n }\n }\n this.elastic = resolveDragElastic(dragElastic);\n /**\n * If we're outputting to external MotionValues, we want to rebase the measured constraints\n * from viewport-relative to component-relative.\n */\n if (prevConstraints !== this.constraints &&\n layout &&\n this.constraints &&\n !this.hasMutatedConstraints) {\n eachAxis((axis) => {\n if (this.constraints !== false &&\n this.getAxisMotionValue(axis)) {\n this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);\n }\n });\n }\n }\n resolveRefConstraints() {\n const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();\n if (!constraints || !isRefObject(constraints))\n return false;\n const constraintsElement = constraints.current;\n invariant(constraintsElement !== null, \"If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.\");\n const { projection } = this.visualElement;\n // TODO\n if (!projection || !projection.layout)\n return false;\n const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());\n let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);\n /**\n * If there's an onMeasureDragConstraints listener we call it and\n * if different constraints are returned, set constraints to that\n */\n if (onMeasureDragConstraints) {\n const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));\n this.hasMutatedConstraints = !!userConstraints;\n if (userConstraints) {\n measuredConstraints = convertBoundingBoxToBox(userConstraints);\n }\n }\n return measuredConstraints;\n }\n startAnimation(velocity) {\n const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();\n const constraints = this.constraints || {};\n const momentumAnimations = eachAxis((axis) => {\n if (!shouldDrag(axis, drag, this.currentDirection)) {\n return;\n }\n let transition = (constraints && constraints[axis]) || {};\n if (dragSnapToOrigin)\n transition = { min: 0, max: 0 };\n /**\n * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame\n * of spring animations so we should look into adding a disable spring option to `inertia`.\n * We could do something here where we affect the `bounceStiffness` and `bounceDamping`\n * using the value of `dragElastic`.\n */\n const bounceStiffness = dragElastic ? 200 : 1000000;\n const bounceDamping = dragElastic ? 40 : 10000000;\n const inertia = {\n type: \"inertia\",\n velocity: dragMomentum ? velocity[axis] : 0,\n bounceStiffness,\n bounceDamping,\n timeConstant: 750,\n restDelta: 1,\n restSpeed: 10,\n ...dragTransition,\n ...transition,\n };\n // If we're not animating on an externally-provided `MotionValue` we can use the\n // component's animation controls which will handle interactions with whileHover (etc),\n // otherwise we just have to animate the `MotionValue` itself.\n return this.startAxisValueAnimation(axis, inertia);\n });\n // Run all animations and then resolve the new drag constraints.\n return Promise.all(momentumAnimations).then(onDragTransitionEnd);\n }\n startAxisValueAnimation(axis, transition) {\n const axisValue = this.getAxisMotionValue(axis);\n addValueToWillChange(this.visualElement, axis);\n return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false));\n }\n stopAnimation() {\n eachAxis((axis) => this.getAxisMotionValue(axis).stop());\n }\n pauseAnimation() {\n eachAxis((axis) => { var _a; return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause(); });\n }\n getAnimationState(axis) {\n var _a;\n return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;\n }\n /**\n * Drag works differently depending on which props are provided.\n *\n * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.\n * - Otherwise, we apply the delta to the x/y motion values.\n */\n getAxisMotionValue(axis) {\n const dragKey = `_drag${axis.toUpperCase()}`;\n const props = this.visualElement.getProps();\n const externalMotionValue = props[dragKey];\n return externalMotionValue\n ? externalMotionValue\n : this.visualElement.getValue(axis, (props.initial\n ? props.initial[axis]\n : undefined) || 0);\n }\n snapToCursor(point) {\n eachAxis((axis) => {\n const { drag } = this.getProps();\n // If we're not dragging this axis, do an early return.\n if (!shouldDrag(axis, drag, this.currentDirection))\n return;\n const { projection } = this.visualElement;\n const axisValue = this.getAxisMotionValue(axis);\n if (projection && projection.layout) {\n const { min, max } = projection.layout.layoutBox[axis];\n axisValue.set(point[axis] - mixNumber(min, max, 0.5));\n }\n });\n }\n /**\n * When the viewport resizes we want to check if the measured constraints\n * have changed and, if so, reposition the element within those new constraints\n * relative to where it was before the resize.\n */\n scalePositionWithinConstraints() {\n if (!this.visualElement.current)\n return;\n const { drag, dragConstraints } = this.getProps();\n const { projection } = this.visualElement;\n if (!isRefObject(dragConstraints) || !projection || !this.constraints)\n return;\n /**\n * Stop current animations as there can be visual glitching if we try to do\n * this mid-animation\n */\n this.stopAnimation();\n /**\n * Record the relative position of the dragged element relative to the\n * constraints box and save as a progress value.\n */\n const boxProgress = { x: 0, y: 0 };\n eachAxis((axis) => {\n const axisValue = this.getAxisMotionValue(axis);\n if (axisValue && this.constraints !== false) {\n const latest = axisValue.get();\n boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);\n }\n });\n /**\n * Update the layout of this element and resolve the latest drag constraints\n */\n const { transformTemplate } = this.visualElement.getProps();\n this.visualElement.current.style.transform = transformTemplate\n ? transformTemplate({}, \"\")\n : \"none\";\n projection.root && projection.root.updateScroll();\n projection.updateLayout();\n this.resolveConstraints();\n /**\n * For each axis, calculate the current progress of the layout axis\n * within the new constraints.\n */\n eachAxis((axis) => {\n if (!shouldDrag(axis, drag, null))\n return;\n /**\n * Calculate a new transform based on the previous box progress\n */\n const axisValue = this.getAxisMotionValue(axis);\n const { min, max } = this.constraints[axis];\n axisValue.set(mixNumber(min, max, boxProgress[axis]));\n });\n }\n addListeners() {\n if (!this.visualElement.current)\n return;\n elementDragControls.set(this.visualElement, this);\n const element = this.visualElement.current;\n /**\n * Attach a pointerdown event listener on this DOM element to initiate drag tracking.\n */\n const stopPointerListener = addPointerEvent(element, \"pointerdown\", (event) => {\n const { drag, dragListener = true } = this.getProps();\n drag && dragListener && this.start(event);\n });\n const measureDragConstraints = () => {\n const { dragConstraints } = this.getProps();\n if (isRefObject(dragConstraints) && dragConstraints.current) {\n this.constraints = this.resolveRefConstraints();\n }\n };\n const { projection } = this.visualElement;\n const stopMeasureLayoutListener = projection.addEventListener(\"measure\", measureDragConstraints);\n if (projection && !projection.layout) {\n projection.root && projection.root.updateScroll();\n projection.updateLayout();\n }\n frame.read(measureDragConstraints);\n /**\n * Attach a window resize listener to scale the draggable target within its defined\n * constraints as the window resizes.\n */\n const stopResizeListener = addDomEvent(window, \"resize\", () => this.scalePositionWithinConstraints());\n /**\n * If the element's layout changes, calculate the delta and apply that to\n * the drag gesture's origin point.\n */\n const stopLayoutUpdateListener = projection.addEventListener(\"didUpdate\", (({ delta, hasLayoutChanged }) => {\n if (this.isDragging && hasLayoutChanged) {\n eachAxis((axis) => {\n const motionValue = this.getAxisMotionValue(axis);\n if (!motionValue)\n return;\n this.originPoint[axis] += delta[axis].translate;\n motionValue.set(motionValue.get() + delta[axis].translate);\n });\n this.visualElement.render();\n }\n }));\n return () => {\n stopResizeListener();\n stopPointerListener();\n stopMeasureLayoutListener();\n stopLayoutUpdateListener && stopLayoutUpdateListener();\n };\n }\n getProps() {\n const props = this.visualElement.getProps();\n const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;\n return {\n ...props,\n drag,\n dragDirectionLock,\n dragPropagation,\n dragConstraints,\n dragElastic,\n dragMomentum,\n };\n }\n}\nfunction shouldDrag(direction, drag, currentDirection) {\n return ((drag === true || drag === direction) &&\n (currentDirection === null || currentDirection === direction));\n}\n/**\n * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower\n * than the provided threshold, return `null`.\n *\n * @param offset - The x/y offset from origin.\n * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.\n */\nfunction getCurrentDirection(offset, lockThreshold = 10) {\n let direction = null;\n if (Math.abs(offset.y) > lockThreshold) {\n direction = \"y\";\n }\n else if (Math.abs(offset.x) > lockThreshold) {\n direction = \"x\";\n }\n return direction;\n}\n\nexport { VisualElementDragControls, elementDragControls };\n","import { PanSession } from './PanSession.mjs';\nimport { addPointerEvent } from '../../events/add-pointer-event.mjs';\nimport { Feature } from '../../motion/features/Feature.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { getContextWindow } from '../../utils/get-context-window.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst asyncHandler = (handler) => (event, info) => {\n if (handler) {\n frame.postRender(() => handler(event, info));\n }\n};\nclass PanGesture extends Feature {\n constructor() {\n super(...arguments);\n this.removePointerDownListener = noop;\n }\n onPointerDown(pointerDownEvent) {\n this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {\n transformPagePoint: this.node.getTransformPagePoint(),\n contextWindow: getContextWindow(this.node),\n });\n }\n createPanHandlers() {\n const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();\n return {\n onSessionStart: asyncHandler(onPanSessionStart),\n onStart: asyncHandler(onPanStart),\n onMove: onPan,\n onEnd: (event, info) => {\n delete this.session;\n if (onPanEnd) {\n frame.postRender(() => onPanEnd(event, info));\n }\n },\n };\n }\n mount() {\n this.removePointerDownListener = addPointerEvent(this.node.current, \"pointerdown\", (event) => this.onPointerDown(event));\n }\n update() {\n this.session && this.session.updateHandlers(this.createPanHandlers());\n }\n unmount() {\n this.removePointerDownListener();\n this.session && this.session.end();\n }\n}\n\nexport { PanGesture };\n","\"use client\";\nimport { createContext } from 'react';\n\n/**\n * Internal, exported only for usage in Framer\n */\nconst SwitchLayoutGroupContext = createContext({});\n\nexport { SwitchLayoutGroupContext };\n","/**\n * This should only ever be modified on the client otherwise it'll\n * persist through server requests. If we need instanced states we\n * could lazy-init via root.\n */\nconst globalProjectionState = {\n /**\n * Global flag as to whether the tree has animated since the last time\n * we resized the window\n */\n hasAnimatedSinceResize: true,\n /**\n * We set this to true once, on the first update. Any nodes added to the tree beyond that\n * update will be given a `data-projection-id` attribute.\n */\n hasEverUpdated: false,\n};\n\nexport { globalProjectionState };\n","import { px } from '../../value/types/numbers/units.mjs';\n\nfunction pixelsToPercent(pixels, axis) {\n if (axis.max === axis.min)\n return 0;\n return (pixels / (axis.max - axis.min)) * 100;\n}\n/**\n * We always correct borderRadius as a percentage rather than pixels to reduce paints.\n * For example, if you are projecting a box that is 100px wide with a 10px borderRadius\n * into a box that is 200px wide with a 20px borderRadius, that is actually a 10%\n * borderRadius in both states. If we animate between the two in pixels that will trigger\n * a paint each time. If we animate between the two in percentage we'll avoid a paint.\n */\nconst correctBorderRadius = {\n correct: (latest, node) => {\n if (!node.target)\n return latest;\n /**\n * If latest is a string, if it's a percentage we can return immediately as it's\n * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.\n */\n if (typeof latest === \"string\") {\n if (px.test(latest)) {\n latest = parseFloat(latest);\n }\n else {\n return latest;\n }\n }\n /**\n * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that\n * pixel value as a percentage of each axis\n */\n const x = pixelsToPercent(latest, node.target.x);\n const y = pixelsToPercent(latest, node.target.y);\n return `${x}% ${y}%`;\n },\n};\n\nexport { correctBorderRadius, pixelsToPercent };\n","import { mixNumber } from '../../utils/mix/number.mjs';\nimport { complex } from '../../value/types/complex/index.mjs';\n\nconst correctBoxShadow = {\n correct: (latest, { treeScale, projectionDelta }) => {\n const original = latest;\n const shadow = complex.parse(latest);\n // TODO: Doesn't support multiple shadows\n if (shadow.length > 5)\n return original;\n const template = complex.createTransformer(latest);\n const offset = typeof shadow[0] !== \"number\" ? 1 : 0;\n // Calculate the overall context scale\n const xScale = projectionDelta.x.scale * treeScale.x;\n const yScale = projectionDelta.y.scale * treeScale.y;\n shadow[0 + offset] /= xScale;\n shadow[1 + offset] /= yScale;\n /**\n * Ideally we'd correct x and y scales individually, but because blur and\n * spread apply to both we have to take a scale average and apply that instead.\n * We could potentially improve the outcome of this by incorporating the ratio between\n * the two scales.\n */\n const averageScale = mixNumber(xScale, yScale, 0.5);\n // Blur\n if (typeof shadow[2 + offset] === \"number\")\n shadow[2 + offset] /= averageScale;\n // Spread\n if (typeof shadow[3 + offset] === \"number\")\n shadow[3 + offset] /= averageScale;\n return template(shadow);\n },\n};\n\nexport { correctBoxShadow };\n","const scaleCorrectors = {};\nfunction addScaleCorrector(correctors) {\n Object.assign(scaleCorrectors, correctors);\n}\n\nexport { addScaleCorrector, scaleCorrectors };\n","import { createRenderBatcher } from './batcher.mjs';\n\nconst { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);\n\nexport { cancelMicrotask, microtask };\n","\"use client\";\nimport { jsx } from 'react/jsx-runtime';\nimport { useContext, Component } from 'react';\nimport { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';\nimport { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';\nimport { SwitchLayoutGroupContext } from '../../../context/SwitchLayoutGroupContext.mjs';\nimport { globalProjectionState } from '../../../projection/node/state.mjs';\nimport { correctBorderRadius } from '../../../projection/styles/scale-border-radius.mjs';\nimport { correctBoxShadow } from '../../../projection/styles/scale-box-shadow.mjs';\nimport { addScaleCorrector } from '../../../projection/styles/scale-correction.mjs';\nimport { microtask } from '../../../frameloop/microtask.mjs';\nimport { frame } from '../../../frameloop/frame.mjs';\n\nclass MeasureLayoutWithContext extends Component {\n /**\n * This only mounts projection nodes for components that\n * need measuring, we might want to do it for all components\n * in order to incorporate transforms\n */\n componentDidMount() {\n const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;\n const { projection } = visualElement;\n addScaleCorrector(defaultScaleCorrectors);\n if (projection) {\n if (layoutGroup.group)\n layoutGroup.group.add(projection);\n if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {\n switchLayoutGroup.register(projection);\n }\n projection.root.didUpdate();\n projection.addEventListener(\"animationComplete\", () => {\n this.safeToRemove();\n });\n projection.setOptions({\n ...projection.options,\n onExitComplete: () => this.safeToRemove(),\n });\n }\n globalProjectionState.hasEverUpdated = true;\n }\n getSnapshotBeforeUpdate(prevProps) {\n const { layoutDependency, visualElement, drag, isPresent } = this.props;\n const projection = visualElement.projection;\n if (!projection)\n return null;\n /**\n * TODO: We use this data in relegate to determine whether to\n * promote a previous element. There's no guarantee its presence data\n * will have updated by this point - if a bug like this arises it will\n * have to be that we markForRelegation and then find a new lead some other way,\n * perhaps in didUpdate\n */\n projection.isPresent = isPresent;\n if (drag ||\n prevProps.layoutDependency !== layoutDependency ||\n layoutDependency === undefined) {\n projection.willUpdate();\n }\n else {\n this.safeToRemove();\n }\n if (prevProps.isPresent !== isPresent) {\n if (isPresent) {\n projection.promote();\n }\n else if (!projection.relegate()) {\n /**\n * If there's another stack member taking over from this one,\n * it's in charge of the exit animation and therefore should\n * be in charge of the safe to remove. Otherwise we call it here.\n */\n frame.postRender(() => {\n const stack = projection.getStack();\n if (!stack || !stack.members.length) {\n this.safeToRemove();\n }\n });\n }\n }\n return null;\n }\n componentDidUpdate() {\n const { projection } = this.props.visualElement;\n if (projection) {\n projection.root.didUpdate();\n microtask.postRender(() => {\n if (!projection.currentAnimation && projection.isLead()) {\n this.safeToRemove();\n }\n });\n }\n }\n componentWillUnmount() {\n const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props;\n const { projection } = visualElement;\n if (projection) {\n projection.scheduleCheckAfterUnmount();\n if (layoutGroup && layoutGroup.group)\n layoutGroup.group.remove(projection);\n if (promoteContext && promoteContext.deregister)\n promoteContext.deregister(projection);\n }\n }\n safeToRemove() {\n const { safeToRemove } = this.props;\n safeToRemove && safeToRemove();\n }\n render() {\n return null;\n }\n}\nfunction MeasureLayout(props) {\n const [isPresent, safeToRemove] = usePresence();\n const layoutGroup = useContext(LayoutGroupContext);\n return (jsx(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove }));\n}\nconst defaultScaleCorrectors = {\n borderRadius: {\n ...correctBorderRadius,\n applyTo: [\n \"borderTopLeftRadius\",\n \"borderTopRightRadius\",\n \"borderBottomLeftRadius\",\n \"borderBottomRightRadius\",\n ],\n },\n borderTopLeftRadius: correctBorderRadius,\n borderTopRightRadius: correctBorderRadius,\n borderBottomLeftRadius: correctBorderRadius,\n borderBottomRightRadius: correctBorderRadius,\n boxShadow: correctBoxShadow,\n};\n\nexport { MeasureLayout };\n","import { circOut } from '../../easing/circ.mjs';\nimport { progress } from '../../utils/progress.mjs';\nimport { mixNumber } from '../../utils/mix/number.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { percent, px } from '../../value/types/numbers/units.mjs';\n\nconst borders = [\"TopLeft\", \"TopRight\", \"BottomLeft\", \"BottomRight\"];\nconst numBorders = borders.length;\nconst asNumber = (value) => typeof value === \"string\" ? parseFloat(value) : value;\nconst isPx = (value) => typeof value === \"number\" || px.test(value);\nfunction mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {\n if (shouldCrossfadeOpacity) {\n target.opacity = mixNumber(0, \n // TODO Reinstate this if only child\n lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));\n target.opacityExit = mixNumber(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));\n }\n else if (isOnlyMember) {\n target.opacity = mixNumber(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);\n }\n /**\n * Mix border radius\n */\n for (let i = 0; i < numBorders; i++) {\n const borderLabel = `border${borders[i]}Radius`;\n let followRadius = getRadius(follow, borderLabel);\n let leadRadius = getRadius(lead, borderLabel);\n if (followRadius === undefined && leadRadius === undefined)\n continue;\n followRadius || (followRadius = 0);\n leadRadius || (leadRadius = 0);\n const canMix = followRadius === 0 ||\n leadRadius === 0 ||\n isPx(followRadius) === isPx(leadRadius);\n if (canMix) {\n target[borderLabel] = Math.max(mixNumber(asNumber(followRadius), asNumber(leadRadius), progress), 0);\n if (percent.test(leadRadius) || percent.test(followRadius)) {\n target[borderLabel] += \"%\";\n }\n }\n else {\n target[borderLabel] = leadRadius;\n }\n }\n /**\n * Mix rotation\n */\n if (follow.rotate || lead.rotate) {\n target.rotate = mixNumber(follow.rotate || 0, lead.rotate || 0, progress);\n }\n}\nfunction getRadius(values, radiusName) {\n return values[radiusName] !== undefined\n ? values[radiusName]\n : values.borderRadius;\n}\n// /**\n// * We only want to mix the background color if there's a follow element\n// * that we're not crossfading opacity between. For instance with switch\n// * AnimateSharedLayout animations, this helps the illusion of a continuous\n// * element being animated but also cuts down on the number of paints triggered\n// * for elements where opacity is doing that work for us.\n// */\n// if (\n// !hasFollowElement &&\n// latestLeadValues.backgroundColor &&\n// latestFollowValues.backgroundColor\n// ) {\n// /**\n// * This isn't ideal performance-wise as mixColor is creating a new function every frame.\n// * We could probably create a mixer that runs at the start of the animation but\n// * the idea behind the crossfader is that it runs dynamically between two potentially\n// * changing targets (ie opacity or borderRadius may be animating independently via variants)\n// */\n// leadState.backgroundColor = followState.backgroundColor = mixColor(\n// latestFollowValues.backgroundColor as string,\n// latestLeadValues.backgroundColor as string\n// )(p)\n// }\nconst easeCrossfadeIn = /*@__PURE__*/ compress(0, 0.5, circOut);\nconst easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop);\nfunction compress(min, max, easing) {\n return (p) => {\n // Could replace ifs with clamp\n if (p < min)\n return 0;\n if (p > max)\n return 1;\n return easing(progress(min, max, p));\n };\n}\n\nexport { mixValues };\n","/**\n * Reset an axis to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyAxisInto(axis, originAxis) {\n axis.min = originAxis.min;\n axis.max = originAxis.max;\n}\n/**\n * Reset a box to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyBoxInto(box, originBox) {\n copyAxisInto(box.x, originBox.x);\n copyAxisInto(box.y, originBox.y);\n}\n/**\n * Reset a delta to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyAxisDeltaInto(delta, originDelta) {\n delta.translate = originDelta.translate;\n delta.scale = originDelta.scale;\n delta.originPoint = originDelta.originPoint;\n delta.origin = originDelta.origin;\n}\n\nexport { copyAxisDeltaInto, copyAxisInto, copyBoxInto };\n","import { mixNumber } from '../../utils/mix/number.mjs';\nimport { percent } from '../../value/types/numbers/units.mjs';\nimport { scalePoint } from './delta-apply.mjs';\n\n/**\n * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse\n */\nfunction removePointDelta(point, translate, scale, originPoint, boxScale) {\n point -= translate;\n point = scalePoint(point, 1 / scale, originPoint);\n if (boxScale !== undefined) {\n point = scalePoint(point, 1 / boxScale, originPoint);\n }\n return point;\n}\n/**\n * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse\n */\nfunction removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {\n if (percent.test(translate)) {\n translate = parseFloat(translate);\n const relativeProgress = mixNumber(sourceAxis.min, sourceAxis.max, translate / 100);\n translate = relativeProgress - sourceAxis.min;\n }\n if (typeof translate !== \"number\")\n return;\n let originPoint = mixNumber(originAxis.min, originAxis.max, origin);\n if (axis === originAxis)\n originPoint -= translate;\n axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);\n axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale);\n}\n/**\n * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse\n * and acts as a bridge between motion values and removeAxisDelta\n */\nfunction removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {\n removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);\n}\n/**\n * The names of the motion values we want to apply as translation, scale and origin.\n */\nconst xKeys = [\"x\", \"scaleX\", \"originX\"];\nconst yKeys = [\"y\", \"scaleY\", \"originY\"];\n/**\n * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse\n * and acts as a bridge between motion values and removeAxisDelta\n */\nfunction removeBoxTransforms(box, transforms, originBox, sourceBox) {\n removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);\n removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);\n}\n\nexport { removeAxisDelta, removeAxisTransforms, removeBoxTransforms, removePointDelta };\n","import { calcLength } from './delta-calc.mjs';\n\nfunction isAxisDeltaZero(delta) {\n return delta.translate === 0 && delta.scale === 1;\n}\nfunction isDeltaZero(delta) {\n return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);\n}\nfunction axisEquals(a, b) {\n return a.min === b.min && a.max === b.max;\n}\nfunction boxEquals(a, b) {\n return axisEquals(a.x, b.x) && axisEquals(a.y, b.y);\n}\nfunction axisEqualsRounded(a, b) {\n return (Math.round(a.min) === Math.round(b.min) &&\n Math.round(a.max) === Math.round(b.max));\n}\nfunction boxEqualsRounded(a, b) {\n return axisEqualsRounded(a.x, b.x) && axisEqualsRounded(a.y, b.y);\n}\nfunction aspectRatio(box) {\n return calcLength(box.x) / calcLength(box.y);\n}\nfunction axisDeltaEquals(a, b) {\n return (a.translate === b.translate &&\n a.scale === b.scale &&\n a.originPoint === b.originPoint);\n}\n\nexport { aspectRatio, axisDeltaEquals, axisEquals, axisEqualsRounded, boxEquals, boxEqualsRounded, isDeltaZero };\n","import { addUniqueItem, removeItem } from '../../utils/array.mjs';\n\nclass NodeStack {\n constructor() {\n this.members = [];\n }\n add(node) {\n addUniqueItem(this.members, node);\n node.scheduleRender();\n }\n remove(node) {\n removeItem(this.members, node);\n if (node === this.prevLead) {\n this.prevLead = undefined;\n }\n if (node === this.lead) {\n const prevLead = this.members[this.members.length - 1];\n if (prevLead) {\n this.promote(prevLead);\n }\n }\n }\n relegate(node) {\n const indexOfNode = this.members.findIndex((member) => node === member);\n if (indexOfNode === 0)\n return false;\n /**\n * Find the next projection node that is present\n */\n let prevLead;\n for (let i = indexOfNode; i >= 0; i--) {\n const member = this.members[i];\n if (member.isPresent !== false) {\n prevLead = member;\n break;\n }\n }\n if (prevLead) {\n this.promote(prevLead);\n return true;\n }\n else {\n return false;\n }\n }\n promote(node, preserveFollowOpacity) {\n const prevLead = this.lead;\n if (node === prevLead)\n return;\n this.prevLead = prevLead;\n this.lead = node;\n node.show();\n if (prevLead) {\n prevLead.instance && prevLead.scheduleRender();\n node.scheduleRender();\n node.resumeFrom = prevLead;\n if (preserveFollowOpacity) {\n node.resumeFrom.preserveOpacity = true;\n }\n if (prevLead.snapshot) {\n node.snapshot = prevLead.snapshot;\n node.snapshot.latestValues =\n prevLead.animationValues || prevLead.latestValues;\n }\n if (node.root && node.root.isUpdating) {\n node.isLayoutDirty = true;\n }\n const { crossfade } = node.options;\n if (crossfade === false) {\n prevLead.hide();\n }\n /**\n * TODO:\n * - Test border radius when previous node was deleted\n * - boxShadow mixing\n * - Shared between element A in scrolled container and element B (scroll stays the same or changes)\n * - Shared between element A in transformed container and element B (transform stays the same or changes)\n * - Shared between element A in scrolled page and element B (scroll stays the same or changes)\n * ---\n * - Crossfade opacity of root nodes\n * - layoutId changes after animation\n * - layoutId changes mid animation\n */\n }\n }\n exitAnimationComplete() {\n this.members.forEach((node) => {\n const { options, resumingFrom } = node;\n options.onExitComplete && options.onExitComplete();\n if (resumingFrom) {\n resumingFrom.options.onExitComplete &&\n resumingFrom.options.onExitComplete();\n }\n });\n }\n scheduleRender() {\n this.members.forEach((node) => {\n node.instance && node.scheduleRender(false);\n });\n }\n /**\n * Clear any leads that have been removed this render to prevent them from being\n * used in future animations and to prevent memory leaks\n */\n removeLeadSnapshot() {\n if (this.lead && this.lead.snapshot) {\n this.lead.snapshot = undefined;\n }\n }\n}\n\nexport { NodeStack };\n","const compareByDepth = (a, b) => a.depth - b.depth;\n\nexport { compareByDepth };\n","import { addUniqueItem, removeItem } from '../../utils/array.mjs';\nimport { compareByDepth } from './compare-by-depth.mjs';\n\nclass FlatTree {\n constructor() {\n this.children = [];\n this.isDirty = false;\n }\n add(child) {\n addUniqueItem(this.children, child);\n this.isDirty = true;\n }\n remove(child) {\n removeItem(this.children, child);\n this.isDirty = true;\n }\n forEach(callback) {\n this.isDirty && this.children.sort(compareByDepth);\n this.isDirty = false;\n this.children.forEach(callback);\n }\n}\n\nexport { FlatTree };\n","import { isCustomValue } from '../../utils/resolve-value.mjs';\nimport { isMotionValue } from './is-motion-value.mjs';\n\n/**\n * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself\n *\n * TODO: Remove and move to library\n */\nfunction resolveMotionValue(value) {\n const unwrappedValue = isMotionValue(value) ? value.get() : value;\n return isCustomValue(unwrappedValue)\n ? unwrappedValue.toValue()\n : unwrappedValue;\n}\n\nexport { resolveMotionValue };\n","import { time } from '../frameloop/sync-time.mjs';\nimport { secondsToMilliseconds } from './time-conversion.mjs';\nimport { frame, cancelFrame } from '../frameloop/frame.mjs';\n\n/**\n * Timeout defined in ms\n */\nfunction delay(callback, timeout) {\n const start = time.now();\n const checkElapsed = ({ timestamp }) => {\n const elapsed = timestamp - start;\n if (elapsed >= timeout) {\n cancelFrame(checkElapsed);\n callback(elapsed - timeout);\n }\n };\n frame.read(checkElapsed, true);\n return () => cancelFrame(checkElapsed);\n}\nfunction delayInSeconds(callback, timeout) {\n return delay(callback, secondsToMilliseconds(timeout));\n}\n\nexport { delay, delayInSeconds };\n","import { SubscriptionManager } from '../../utils/subscription-manager.mjs';\nimport { mixValues } from '../animation/mix-values.mjs';\nimport { copyBoxInto, copyAxisDeltaInto } from '../geometry/copy.mjs';\nimport { translateAxis, transformBox, applyBoxDelta, applyTreeDeltas } from '../geometry/delta-apply.mjs';\nimport { calcRelativePosition, calcRelativeBox, calcBoxDelta, calcLength, isNear } from '../geometry/delta-calc.mjs';\nimport { removeBoxTransforms } from '../geometry/delta-remove.mjs';\nimport { getValueTransition } from '../../animation/utils/get-value-transition.mjs';\nimport { boxEqualsRounded, isDeltaZero, axisDeltaEquals, aspectRatio, boxEquals } from '../geometry/utils.mjs';\nimport { NodeStack } from '../shared/stack.mjs';\nimport { scaleCorrectors } from '../styles/scale-correction.mjs';\nimport { buildProjectionTransform } from '../styles/transform.mjs';\nimport { eachAxis } from '../utils/each-axis.mjs';\nimport { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.mjs';\nimport { FlatTree } from '../../render/utils/flat-tree.mjs';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';\nimport { globalProjectionState } from './state.mjs';\nimport { delay } from '../../utils/delay.mjs';\nimport { mixNumber } from '../../utils/mix/number.mjs';\nimport { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';\nimport { animateSingleValue } from '../../animation/animate/single-value.mjs';\nimport { clamp } from '../../utils/clamp.mjs';\nimport { cancelFrame, frameData, frameSteps, frame } from '../../frameloop/frame.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { time } from '../../frameloop/sync-time.mjs';\nimport { microtask } from '../../frameloop/microtask.mjs';\nimport { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';\nimport { createBox, createDelta } from '../geometry/models.mjs';\n\nconst metrics = {\n type: \"projectionFrame\",\n totalNodes: 0,\n resolvedTargetDeltas: 0,\n recalculatedProjection: 0,\n};\nconst isDebug = typeof window !== \"undefined\" && window.MotionDebug !== undefined;\nconst transformAxes = [\"\", \"X\", \"Y\", \"Z\"];\nconst hiddenVisibility = { visibility: \"hidden\" };\n/**\n * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1\n * which has a noticeable difference in spring animations\n */\nconst animationTarget = 1000;\nlet id = 0;\nfunction resetDistortingTransform(key, visualElement, values, sharedAnimationValues) {\n const { latestValues } = visualElement;\n // Record the distorting transform and then temporarily set it to 0\n if (latestValues[key]) {\n values[key] = latestValues[key];\n visualElement.setStaticValue(key, 0);\n if (sharedAnimationValues) {\n sharedAnimationValues[key] = 0;\n }\n }\n}\nfunction cancelTreeOptimisedTransformAnimations(projectionNode) {\n projectionNode.hasCheckedOptimisedAppear = true;\n if (projectionNode.root === projectionNode)\n return;\n const { visualElement } = projectionNode.options;\n if (!visualElement)\n return;\n const appearId = getOptimisedAppearId(visualElement);\n if (window.MotionHasOptimisedAnimation(appearId, \"transform\")) {\n const { layout, layoutId } = projectionNode.options;\n window.MotionCancelOptimisedAnimation(appearId, \"transform\", frame, !(layout || layoutId));\n }\n const { parent } = projectionNode;\n if (parent && !parent.hasCheckedOptimisedAppear) {\n cancelTreeOptimisedTransformAnimations(parent);\n }\n}\nfunction createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {\n return class ProjectionNode {\n constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {\n /**\n * A unique ID generated for every projection node.\n */\n this.id = id++;\n /**\n * An id that represents a unique session instigated by startUpdate.\n */\n this.animationId = 0;\n /**\n * A Set containing all this component's children. This is used to iterate\n * through the children.\n *\n * TODO: This could be faster to iterate as a flat array stored on the root node.\n */\n this.children = new Set();\n /**\n * Options for the node. We use this to configure what kind of layout animations\n * we should perform (if any).\n */\n this.options = {};\n /**\n * We use this to detect when its safe to shut down part of a projection tree.\n * We have to keep projecting children for scale correction and relative projection\n * until all their parents stop performing layout animations.\n */\n this.isTreeAnimating = false;\n this.isAnimationBlocked = false;\n /**\n * Flag to true if we think this layout has been changed. We can't always know this,\n * currently we set it to true every time a component renders, or if it has a layoutDependency\n * if that has changed between renders. Additionally, components can be grouped by LayoutGroup\n * and if one node is dirtied, they all are.\n */\n this.isLayoutDirty = false;\n /**\n * Flag to true if we think the projection calculations for this node needs\n * recalculating as a result of an updated transform or layout animation.\n */\n this.isProjectionDirty = false;\n /**\n * Flag to true if the layout *or* transform has changed. This then gets propagated\n * throughout the projection tree, forcing any element below to recalculate on the next frame.\n */\n this.isSharedProjectionDirty = false;\n /**\n * Flag transform dirty. This gets propagated throughout the whole tree but is only\n * respected by shared nodes.\n */\n this.isTransformDirty = false;\n /**\n * Block layout updates for instant layout transitions throughout the tree.\n */\n this.updateManuallyBlocked = false;\n this.updateBlockedByResize = false;\n /**\n * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`\n * call.\n */\n this.isUpdating = false;\n /**\n * If this is an SVG element we currently disable projection transforms\n */\n this.isSVG = false;\n /**\n * Flag to true (during promotion) if a node doing an instant layout transition needs to reset\n * its projection styles.\n */\n this.needsReset = false;\n /**\n * Flags whether this node should have its transform reset prior to measuring.\n */\n this.shouldResetTransform = false;\n /**\n * Store whether this node has been checked for optimised appear animations. As\n * effects fire bottom-up, and we want to look up the tree for appear animations,\n * this makes sure we only check each path once, stopping at nodes that\n * have already been checked.\n */\n this.hasCheckedOptimisedAppear = false;\n /**\n * An object representing the calculated contextual/accumulated/tree scale.\n * This will be used to scale calculcated projection transforms, as these are\n * calculated in screen-space but need to be scaled for elements to layoutly\n * make it to their calculated destinations.\n *\n * TODO: Lazy-init\n */\n this.treeScale = { x: 1, y: 1 };\n /**\n *\n */\n this.eventHandlers = new Map();\n this.hasTreeAnimated = false;\n // Note: Currently only running on root node\n this.updateScheduled = false;\n this.scheduleUpdate = () => this.update();\n this.projectionUpdateScheduled = false;\n this.checkUpdateFailed = () => {\n if (this.isUpdating) {\n this.isUpdating = false;\n this.clearAllSnapshots();\n }\n };\n /**\n * This is a multi-step process as shared nodes might be of different depths. Nodes\n * are sorted by depth order, so we need to resolve the entire tree before moving to\n * the next step.\n */\n this.updateProjection = () => {\n this.projectionUpdateScheduled = false;\n /**\n * Reset debug counts. Manually resetting rather than creating a new\n * object each frame.\n */\n if (isDebug) {\n metrics.totalNodes =\n metrics.resolvedTargetDeltas =\n metrics.recalculatedProjection =\n 0;\n }\n this.nodes.forEach(propagateDirtyNodes);\n this.nodes.forEach(resolveTargetDelta);\n this.nodes.forEach(calcProjection);\n this.nodes.forEach(cleanDirtyNodes);\n if (isDebug) {\n window.MotionDebug.record(metrics);\n }\n };\n /**\n * Frame calculations\n */\n this.resolvedRelativeTargetAt = 0.0;\n this.hasProjected = false;\n this.isVisible = true;\n this.animationProgress = 0;\n /**\n * Shared layout\n */\n // TODO Only running on root node\n this.sharedNodes = new Map();\n this.latestValues = latestValues;\n this.root = parent ? parent.root || parent : this;\n this.path = parent ? [...parent.path, parent] : [];\n this.parent = parent;\n this.depth = parent ? parent.depth + 1 : 0;\n for (let i = 0; i < this.path.length; i++) {\n this.path[i].shouldResetTransform = true;\n }\n if (this.root === this)\n this.nodes = new FlatTree();\n }\n addEventListener(name, handler) {\n if (!this.eventHandlers.has(name)) {\n this.eventHandlers.set(name, new SubscriptionManager());\n }\n return this.eventHandlers.get(name).add(handler);\n }\n notifyListeners(name, ...args) {\n const subscriptionManager = this.eventHandlers.get(name);\n subscriptionManager && subscriptionManager.notify(...args);\n }\n hasListeners(name) {\n return this.eventHandlers.has(name);\n }\n /**\n * Lifecycles\n */\n mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {\n if (this.instance)\n return;\n this.isSVG = isSVGElement(instance);\n this.instance = instance;\n const { layoutId, layout, visualElement } = this.options;\n if (visualElement && !visualElement.current) {\n visualElement.mount(instance);\n }\n this.root.nodes.add(this);\n this.parent && this.parent.children.add(this);\n if (isLayoutDirty && (layout || layoutId)) {\n this.isLayoutDirty = true;\n }\n if (attachResizeListener) {\n let cancelDelay;\n const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);\n attachResizeListener(instance, () => {\n this.root.updateBlockedByResize = true;\n cancelDelay && cancelDelay();\n cancelDelay = delay(resizeUnblockUpdate, 250);\n if (globalProjectionState.hasAnimatedSinceResize) {\n globalProjectionState.hasAnimatedSinceResize = false;\n this.nodes.forEach(finishAnimation);\n }\n });\n }\n if (layoutId) {\n this.root.registerSharedNode(layoutId, this);\n }\n // Only register the handler if it requires layout animation\n if (this.options.animate !== false &&\n visualElement &&\n (layoutId || layout)) {\n this.addEventListener(\"didUpdate\", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {\n if (this.isTreeAnimationBlocked()) {\n this.target = undefined;\n this.relativeTarget = undefined;\n return;\n }\n // TODO: Check here if an animation exists\n const layoutTransition = this.options.transition ||\n visualElement.getDefaultTransition() ||\n defaultLayoutTransition;\n const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();\n /**\n * The target layout of the element might stay the same,\n * but its position relative to its parent has changed.\n */\n const targetChanged = !this.targetLayout ||\n !boxEqualsRounded(this.targetLayout, newLayout) ||\n hasRelativeTargetChanged;\n /**\n * If the layout hasn't seemed to have changed, it might be that the\n * element is visually in the same place in the document but its position\n * relative to its parent has indeed changed. So here we check for that.\n */\n const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;\n if (this.options.layoutRoot ||\n (this.resumeFrom && this.resumeFrom.instance) ||\n hasOnlyRelativeTargetChanged ||\n (hasLayoutChanged &&\n (targetChanged || !this.currentAnimation))) {\n if (this.resumeFrom) {\n this.resumingFrom = this.resumeFrom;\n this.resumingFrom.resumingFrom = undefined;\n }\n this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);\n const animationOptions = {\n ...getValueTransition(layoutTransition, \"layout\"),\n onPlay: onLayoutAnimationStart,\n onComplete: onLayoutAnimationComplete,\n };\n if (visualElement.shouldReduceMotion ||\n this.options.layoutRoot) {\n animationOptions.delay = 0;\n animationOptions.type = false;\n }\n this.startAnimation(animationOptions);\n }\n else {\n /**\n * If the layout hasn't changed and we have an animation that hasn't started yet,\n * finish it immediately. Otherwise it will be animating from a location\n * that was probably never commited to screen and look like a jumpy box.\n */\n if (!hasLayoutChanged) {\n finishAnimation(this);\n }\n if (this.isLead() && this.options.onExitComplete) {\n this.options.onExitComplete();\n }\n }\n this.targetLayout = newLayout;\n });\n }\n }\n unmount() {\n this.options.layoutId && this.willUpdate();\n this.root.nodes.remove(this);\n const stack = this.getStack();\n stack && stack.remove(this);\n this.parent && this.parent.children.delete(this);\n this.instance = undefined;\n cancelFrame(this.updateProjection);\n }\n // only on the root\n blockUpdate() {\n this.updateManuallyBlocked = true;\n }\n unblockUpdate() {\n this.updateManuallyBlocked = false;\n }\n isUpdateBlocked() {\n return this.updateManuallyBlocked || this.updateBlockedByResize;\n }\n isTreeAnimationBlocked() {\n return (this.isAnimationBlocked ||\n (this.parent && this.parent.isTreeAnimationBlocked()) ||\n false);\n }\n // Note: currently only running on root node\n startUpdate() {\n if (this.isUpdateBlocked())\n return;\n this.isUpdating = true;\n this.nodes && this.nodes.forEach(resetSkewAndRotation);\n this.animationId++;\n }\n getTransformTemplate() {\n const { visualElement } = this.options;\n return visualElement && visualElement.getProps().transformTemplate;\n }\n willUpdate(shouldNotifyListeners = true) {\n this.root.hasTreeAnimated = true;\n if (this.root.isUpdateBlocked()) {\n this.options.onExitComplete && this.options.onExitComplete();\n return;\n }\n /**\n * If we're running optimised appear animations then these must be\n * cancelled before measuring the DOM. This is so we can measure\n * the true layout of the element rather than the WAAPI animation\n * which will be unaffected by the resetSkewAndRotate step.\n *\n * Note: This is a DOM write. Worst case scenario is this is sandwiched\n * between other snapshot reads which will cause unnecessary style recalculations.\n * This has to happen here though, as we don't yet know which nodes will need\n * snapshots in startUpdate(), but we only want to cancel optimised animations\n * if a layout animation measurement is actually going to be affected by them.\n */\n if (window.MotionCancelOptimisedAnimation &&\n !this.hasCheckedOptimisedAppear) {\n cancelTreeOptimisedTransformAnimations(this);\n }\n !this.root.isUpdating && this.root.startUpdate();\n if (this.isLayoutDirty)\n return;\n this.isLayoutDirty = true;\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n node.shouldResetTransform = true;\n node.updateScroll(\"snapshot\");\n if (node.options.layoutRoot) {\n node.willUpdate(false);\n }\n }\n const { layoutId, layout } = this.options;\n if (layoutId === undefined && !layout)\n return;\n const transformTemplate = this.getTransformTemplate();\n this.prevTransformTemplateValue = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : undefined;\n this.updateSnapshot();\n shouldNotifyListeners && this.notifyListeners(\"willUpdate\");\n }\n update() {\n this.updateScheduled = false;\n const updateWasBlocked = this.isUpdateBlocked();\n // When doing an instant transition, we skip the layout update,\n // but should still clean up the measurements so that the next\n // snapshot could be taken correctly.\n if (updateWasBlocked) {\n this.unblockUpdate();\n this.clearAllSnapshots();\n this.nodes.forEach(clearMeasurements);\n return;\n }\n if (!this.isUpdating) {\n this.nodes.forEach(clearIsLayoutDirty);\n }\n this.isUpdating = false;\n /**\n * Write\n */\n this.nodes.forEach(resetTransformStyle);\n /**\n * Read ==================\n */\n // Update layout measurements of updated children\n this.nodes.forEach(updateLayout);\n /**\n * Write\n */\n // Notify listeners that the layout is updated\n this.nodes.forEach(notifyLayoutUpdate);\n this.clearAllSnapshots();\n /**\n * Manually flush any pending updates. Ideally\n * we could leave this to the following requestAnimationFrame but this seems\n * to leave a flash of incorrectly styled content.\n */\n const now = time.now();\n frameData.delta = clamp(0, 1000 / 60, now - frameData.timestamp);\n frameData.timestamp = now;\n frameData.isProcessing = true;\n frameSteps.update.process(frameData);\n frameSteps.preRender.process(frameData);\n frameSteps.render.process(frameData);\n frameData.isProcessing = false;\n }\n didUpdate() {\n if (!this.updateScheduled) {\n this.updateScheduled = true;\n microtask.read(this.scheduleUpdate);\n }\n }\n clearAllSnapshots() {\n this.nodes.forEach(clearSnapshot);\n this.sharedNodes.forEach(removeLeadSnapshots);\n }\n scheduleUpdateProjection() {\n if (!this.projectionUpdateScheduled) {\n this.projectionUpdateScheduled = true;\n frame.preRender(this.updateProjection, false, true);\n }\n }\n scheduleCheckAfterUnmount() {\n /**\n * If the unmounting node is in a layoutGroup and did trigger a willUpdate,\n * we manually call didUpdate to give a chance to the siblings to animate.\n * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.\n */\n frame.postRender(() => {\n if (this.isLayoutDirty) {\n this.root.didUpdate();\n }\n else {\n this.root.checkUpdateFailed();\n }\n });\n }\n /**\n * Update measurements\n */\n updateSnapshot() {\n if (this.snapshot || !this.instance)\n return;\n this.snapshot = this.measure();\n }\n updateLayout() {\n if (!this.instance)\n return;\n // TODO: Incorporate into a forwarded scroll offset\n this.updateScroll();\n if (!(this.options.alwaysMeasureLayout && this.isLead()) &&\n !this.isLayoutDirty) {\n return;\n }\n /**\n * When a node is mounted, it simply resumes from the prevLead's\n * snapshot instead of taking a new one, but the ancestors scroll\n * might have updated while the prevLead is unmounted. We need to\n * update the scroll again to make sure the layout we measure is\n * up to date.\n */\n if (this.resumeFrom && !this.resumeFrom.instance) {\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n node.updateScroll();\n }\n }\n const prevLayout = this.layout;\n this.layout = this.measure(false);\n this.layoutCorrected = createBox();\n this.isLayoutDirty = false;\n this.projectionDelta = undefined;\n this.notifyListeners(\"measure\", this.layout.layoutBox);\n const { visualElement } = this.options;\n visualElement &&\n visualElement.notify(\"LayoutMeasure\", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);\n }\n updateScroll(phase = \"measure\") {\n let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);\n if (this.scroll &&\n this.scroll.animationId === this.root.animationId &&\n this.scroll.phase === phase) {\n needsMeasurement = false;\n }\n if (needsMeasurement) {\n const isRoot = checkIsScrollRoot(this.instance);\n this.scroll = {\n animationId: this.root.animationId,\n phase,\n isRoot,\n offset: measureScroll(this.instance),\n wasRoot: this.scroll ? this.scroll.isRoot : isRoot,\n };\n }\n }\n resetTransform() {\n if (!resetTransform)\n return;\n const isResetRequested = this.isLayoutDirty ||\n this.shouldResetTransform ||\n this.options.alwaysMeasureLayout;\n const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);\n const transformTemplate = this.getTransformTemplate();\n const transformTemplateValue = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : undefined;\n const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;\n if (isResetRequested &&\n (hasProjection ||\n hasTransform(this.latestValues) ||\n transformTemplateHasChanged)) {\n resetTransform(this.instance, transformTemplateValue);\n this.shouldResetTransform = false;\n this.scheduleRender();\n }\n }\n measure(removeTransform = true) {\n const pageBox = this.measurePageBox();\n let layoutBox = this.removeElementScroll(pageBox);\n /**\n * Measurements taken during the pre-render stage\n * still have transforms applied so we remove them\n * via calculation.\n */\n if (removeTransform) {\n layoutBox = this.removeTransform(layoutBox);\n }\n roundBox(layoutBox);\n return {\n animationId: this.root.animationId,\n measuredBox: pageBox,\n layoutBox,\n latestValues: {},\n source: this.id,\n };\n }\n measurePageBox() {\n var _a;\n const { visualElement } = this.options;\n if (!visualElement)\n return createBox();\n const box = visualElement.measureViewportBox();\n const wasInScrollRoot = ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot);\n if (!wasInScrollRoot) {\n // Remove viewport scroll to give page-relative coordinates\n const { scroll } = this.root;\n if (scroll) {\n translateAxis(box.x, scroll.offset.x);\n translateAxis(box.y, scroll.offset.y);\n }\n }\n return box;\n }\n removeElementScroll(box) {\n var _a;\n const boxWithoutScroll = createBox();\n copyBoxInto(boxWithoutScroll, box);\n if ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) {\n return boxWithoutScroll;\n }\n /**\n * Performance TODO: Keep a cumulative scroll offset down the tree\n * rather than loop back up the path.\n */\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n const { scroll, options } = node;\n if (node !== this.root && scroll && options.layoutScroll) {\n /**\n * If this is a new scroll root, we want to remove all previous scrolls\n * from the viewport box.\n */\n if (scroll.wasRoot) {\n copyBoxInto(boxWithoutScroll, box);\n }\n translateAxis(boxWithoutScroll.x, scroll.offset.x);\n translateAxis(boxWithoutScroll.y, scroll.offset.y);\n }\n }\n return boxWithoutScroll;\n }\n applyTransform(box, transformOnly = false) {\n const withTransforms = createBox();\n copyBoxInto(withTransforms, box);\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n if (!transformOnly &&\n node.options.layoutScroll &&\n node.scroll &&\n node !== node.root) {\n transformBox(withTransforms, {\n x: -node.scroll.offset.x,\n y: -node.scroll.offset.y,\n });\n }\n if (!hasTransform(node.latestValues))\n continue;\n transformBox(withTransforms, node.latestValues);\n }\n if (hasTransform(this.latestValues)) {\n transformBox(withTransforms, this.latestValues);\n }\n return withTransforms;\n }\n removeTransform(box) {\n const boxWithoutTransform = createBox();\n copyBoxInto(boxWithoutTransform, box);\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n if (!node.instance)\n continue;\n if (!hasTransform(node.latestValues))\n continue;\n hasScale(node.latestValues) && node.updateSnapshot();\n const sourceBox = createBox();\n const nodeBox = node.measurePageBox();\n copyBoxInto(sourceBox, nodeBox);\n removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);\n }\n if (hasTransform(this.latestValues)) {\n removeBoxTransforms(boxWithoutTransform, this.latestValues);\n }\n return boxWithoutTransform;\n }\n setTargetDelta(delta) {\n this.targetDelta = delta;\n this.root.scheduleUpdateProjection();\n this.isProjectionDirty = true;\n }\n setOptions(options) {\n this.options = {\n ...this.options,\n ...options,\n crossfade: options.crossfade !== undefined ? options.crossfade : true,\n };\n }\n clearMeasurements() {\n this.scroll = undefined;\n this.layout = undefined;\n this.snapshot = undefined;\n this.prevTransformTemplateValue = undefined;\n this.targetDelta = undefined;\n this.target = undefined;\n this.isLayoutDirty = false;\n }\n forceRelativeParentToResolveTarget() {\n if (!this.relativeParent)\n return;\n /**\n * If the parent target isn't up-to-date, force it to update.\n * This is an unfortunate de-optimisation as it means any updating relative\n * projection will cause all the relative parents to recalculate back\n * up the tree.\n */\n if (this.relativeParent.resolvedRelativeTargetAt !==\n frameData.timestamp) {\n this.relativeParent.resolveTargetDelta(true);\n }\n }\n resolveTargetDelta(forceRecalculation = false) {\n var _a;\n /**\n * Once the dirty status of nodes has been spread through the tree, we also\n * need to check if we have a shared node of a different depth that has itself\n * been dirtied.\n */\n const lead = this.getLead();\n this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);\n this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);\n this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);\n const isShared = Boolean(this.resumingFrom) || this !== lead;\n /**\n * We don't use transform for this step of processing so we don't\n * need to check whether any nodes have changed transform.\n */\n const canSkip = !(forceRecalculation ||\n (isShared && this.isSharedProjectionDirty) ||\n this.isProjectionDirty ||\n ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||\n this.attemptToResolveRelativeTarget ||\n this.root.updateBlockedByResize);\n if (canSkip)\n return;\n const { layout, layoutId } = this.options;\n /**\n * If we have no layout, we can't perform projection, so early return\n */\n if (!this.layout || !(layout || layoutId))\n return;\n this.resolvedRelativeTargetAt = frameData.timestamp;\n /**\n * If we don't have a targetDelta but do have a layout, we can attempt to resolve\n * a relativeParent. This will allow a component to perform scale correction\n * even if no animation has started.\n */\n if (!this.targetDelta && !this.relativeTarget) {\n const relativeParent = this.getClosestProjectingParent();\n if (relativeParent &&\n relativeParent.layout &&\n this.animationProgress !== 1) {\n this.relativeParent = relativeParent;\n this.forceRelativeParentToResolveTarget();\n this.relativeTarget = createBox();\n this.relativeTargetOrigin = createBox();\n calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);\n copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);\n }\n else {\n this.relativeParent = this.relativeTarget = undefined;\n }\n }\n /**\n * If we have no relative target or no target delta our target isn't valid\n * for this frame.\n */\n if (!this.relativeTarget && !this.targetDelta)\n return;\n /**\n * Lazy-init target data structure\n */\n if (!this.target) {\n this.target = createBox();\n this.targetWithTransforms = createBox();\n }\n /**\n * If we've got a relative box for this component, resolve it into a target relative to the parent.\n */\n if (this.relativeTarget &&\n this.relativeTargetOrigin &&\n this.relativeParent &&\n this.relativeParent.target) {\n this.forceRelativeParentToResolveTarget();\n calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);\n /**\n * If we've only got a targetDelta, resolve it into a target\n */\n }\n else if (this.targetDelta) {\n if (Boolean(this.resumingFrom)) {\n // TODO: This is creating a new object every frame\n this.target = this.applyTransform(this.layout.layoutBox);\n }\n else {\n copyBoxInto(this.target, this.layout.layoutBox);\n }\n applyBoxDelta(this.target, this.targetDelta);\n }\n else {\n /**\n * If no target, use own layout as target\n */\n copyBoxInto(this.target, this.layout.layoutBox);\n }\n /**\n * If we've been told to attempt to resolve a relative target, do so.\n */\n if (this.attemptToResolveRelativeTarget) {\n this.attemptToResolveRelativeTarget = false;\n const relativeParent = this.getClosestProjectingParent();\n if (relativeParent &&\n Boolean(relativeParent.resumingFrom) ===\n Boolean(this.resumingFrom) &&\n !relativeParent.options.layoutScroll &&\n relativeParent.target &&\n this.animationProgress !== 1) {\n this.relativeParent = relativeParent;\n this.forceRelativeParentToResolveTarget();\n this.relativeTarget = createBox();\n this.relativeTargetOrigin = createBox();\n calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);\n copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);\n }\n else {\n this.relativeParent = this.relativeTarget = undefined;\n }\n }\n /**\n * Increase debug counter for resolved target deltas\n */\n if (isDebug) {\n metrics.resolvedTargetDeltas++;\n }\n }\n getClosestProjectingParent() {\n if (!this.parent ||\n hasScale(this.parent.latestValues) ||\n has2DTranslate(this.parent.latestValues)) {\n return undefined;\n }\n if (this.parent.isProjecting()) {\n return this.parent;\n }\n else {\n return this.parent.getClosestProjectingParent();\n }\n }\n isProjecting() {\n return Boolean((this.relativeTarget ||\n this.targetDelta ||\n this.options.layoutRoot) &&\n this.layout);\n }\n calcProjection() {\n var _a;\n const lead = this.getLead();\n const isShared = Boolean(this.resumingFrom) || this !== lead;\n let canSkip = true;\n /**\n * If this is a normal layout animation and neither this node nor its nearest projecting\n * is dirty then we can't skip.\n */\n if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {\n canSkip = false;\n }\n /**\n * If this is a shared layout animation and this node's shared projection is dirty then\n * we can't skip.\n */\n if (isShared &&\n (this.isSharedProjectionDirty || this.isTransformDirty)) {\n canSkip = false;\n }\n /**\n * If we have resolved the target this frame we must recalculate the\n * projection to ensure it visually represents the internal calculations.\n */\n if (this.resolvedRelativeTargetAt === frameData.timestamp) {\n canSkip = false;\n }\n if (canSkip)\n return;\n const { layout, layoutId } = this.options;\n /**\n * If this section of the tree isn't animating we can\n * delete our target sources for the following frame.\n */\n this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||\n this.currentAnimation ||\n this.pendingAnimation);\n if (!this.isTreeAnimating) {\n this.targetDelta = this.relativeTarget = undefined;\n }\n if (!this.layout || !(layout || layoutId))\n return;\n /**\n * Reset the corrected box with the latest values from box, as we're then going\n * to perform mutative operations on it.\n */\n copyBoxInto(this.layoutCorrected, this.layout.layoutBox);\n /**\n * Record previous tree scales before updating.\n */\n const prevTreeScaleX = this.treeScale.x;\n const prevTreeScaleY = this.treeScale.y;\n /**\n * Apply all the parent deltas to this box to produce the corrected box. This\n * is the layout box, as it will appear on screen as a result of the transforms of its parents.\n */\n applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);\n /**\n * If this layer needs to perform scale correction but doesn't have a target,\n * use the layout as the target.\n */\n if (lead.layout &&\n !lead.target &&\n (this.treeScale.x !== 1 || this.treeScale.y !== 1)) {\n lead.target = lead.layout.layoutBox;\n lead.targetWithTransforms = createBox();\n }\n const { target } = lead;\n if (!target) {\n /**\n * If we don't have a target to project into, but we were previously\n * projecting, we want to remove the stored transform and schedule\n * a render to ensure the elements reflect the removed transform.\n */\n if (this.prevProjectionDelta) {\n this.createProjectionDeltas();\n this.scheduleRender();\n }\n return;\n }\n if (!this.projectionDelta || !this.prevProjectionDelta) {\n this.createProjectionDeltas();\n }\n else {\n copyAxisDeltaInto(this.prevProjectionDelta.x, this.projectionDelta.x);\n copyAxisDeltaInto(this.prevProjectionDelta.y, this.projectionDelta.y);\n }\n /**\n * Update the delta between the corrected box and the target box before user-set transforms were applied.\n * This will allow us to calculate the corrected borderRadius and boxShadow to compensate\n * for our layout reprojection, but still allow them to be scaled correctly by the user.\n * It might be that to simplify this we may want to accept that user-set scale is also corrected\n * and we wouldn't have to keep and calc both deltas, OR we could support a user setting\n * to allow people to choose whether these styles are corrected based on just the\n * layout reprojection or the final bounding box.\n */\n calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);\n if (this.treeScale.x !== prevTreeScaleX ||\n this.treeScale.y !== prevTreeScaleY ||\n !axisDeltaEquals(this.projectionDelta.x, this.prevProjectionDelta.x) ||\n !axisDeltaEquals(this.projectionDelta.y, this.prevProjectionDelta.y)) {\n this.hasProjected = true;\n this.scheduleRender();\n this.notifyListeners(\"projectionUpdate\", target);\n }\n /**\n * Increase debug counter for recalculated projections\n */\n if (isDebug) {\n metrics.recalculatedProjection++;\n }\n }\n hide() {\n this.isVisible = false;\n // TODO: Schedule render\n }\n show() {\n this.isVisible = true;\n // TODO: Schedule render\n }\n scheduleRender(notifyAll = true) {\n var _a;\n (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();\n if (notifyAll) {\n const stack = this.getStack();\n stack && stack.scheduleRender();\n }\n if (this.resumingFrom && !this.resumingFrom.instance) {\n this.resumingFrom = undefined;\n }\n }\n createProjectionDeltas() {\n this.prevProjectionDelta = createDelta();\n this.projectionDelta = createDelta();\n this.projectionDeltaWithTransform = createDelta();\n }\n setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {\n const snapshot = this.snapshot;\n const snapshotLatestValues = snapshot\n ? snapshot.latestValues\n : {};\n const mixedValues = { ...this.latestValues };\n const targetDelta = createDelta();\n if (!this.relativeParent ||\n !this.relativeParent.options.layoutRoot) {\n this.relativeTarget = this.relativeTargetOrigin = undefined;\n }\n this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;\n const relativeLayout = createBox();\n const snapshotSource = snapshot ? snapshot.source : undefined;\n const layoutSource = this.layout ? this.layout.source : undefined;\n const isSharedLayoutAnimation = snapshotSource !== layoutSource;\n const stack = this.getStack();\n const isOnlyMember = !stack || stack.members.length <= 1;\n const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&\n !isOnlyMember &&\n this.options.crossfade === true &&\n !this.path.some(hasOpacityCrossfade));\n this.animationProgress = 0;\n let prevRelativeTarget;\n this.mixTargetDelta = (latest) => {\n const progress = latest / 1000;\n mixAxisDelta(targetDelta.x, delta.x, progress);\n mixAxisDelta(targetDelta.y, delta.y, progress);\n this.setTargetDelta(targetDelta);\n if (this.relativeTarget &&\n this.relativeTargetOrigin &&\n this.layout &&\n this.relativeParent &&\n this.relativeParent.layout) {\n calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);\n mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);\n /**\n * If this is an unchanged relative target we can consider the\n * projection not dirty.\n */\n if (prevRelativeTarget &&\n boxEquals(this.relativeTarget, prevRelativeTarget)) {\n this.isProjectionDirty = false;\n }\n if (!prevRelativeTarget)\n prevRelativeTarget = createBox();\n copyBoxInto(prevRelativeTarget, this.relativeTarget);\n }\n if (isSharedLayoutAnimation) {\n this.animationValues = mixedValues;\n mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);\n }\n this.root.scheduleUpdateProjection();\n this.scheduleRender();\n this.animationProgress = progress;\n };\n this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);\n }\n startAnimation(options) {\n this.notifyListeners(\"animationStart\");\n this.currentAnimation && this.currentAnimation.stop();\n if (this.resumingFrom && this.resumingFrom.currentAnimation) {\n this.resumingFrom.currentAnimation.stop();\n }\n if (this.pendingAnimation) {\n cancelFrame(this.pendingAnimation);\n this.pendingAnimation = undefined;\n }\n /**\n * Start the animation in the next frame to have a frame with progress 0,\n * where the target is the same as when the animation started, so we can\n * calculate the relative positions correctly for instant transitions.\n */\n this.pendingAnimation = frame.update(() => {\n globalProjectionState.hasAnimatedSinceResize = true;\n this.currentAnimation = animateSingleValue(0, animationTarget, {\n ...options,\n onUpdate: (latest) => {\n this.mixTargetDelta(latest);\n options.onUpdate && options.onUpdate(latest);\n },\n onComplete: () => {\n options.onComplete && options.onComplete();\n this.completeAnimation();\n },\n });\n if (this.resumingFrom) {\n this.resumingFrom.currentAnimation = this.currentAnimation;\n }\n this.pendingAnimation = undefined;\n });\n }\n completeAnimation() {\n if (this.resumingFrom) {\n this.resumingFrom.currentAnimation = undefined;\n this.resumingFrom.preserveOpacity = undefined;\n }\n const stack = this.getStack();\n stack && stack.exitAnimationComplete();\n this.resumingFrom =\n this.currentAnimation =\n this.animationValues =\n undefined;\n this.notifyListeners(\"animationComplete\");\n }\n finishAnimation() {\n if (this.currentAnimation) {\n this.mixTargetDelta && this.mixTargetDelta(animationTarget);\n this.currentAnimation.stop();\n }\n this.completeAnimation();\n }\n applyTransformsToTarget() {\n const lead = this.getLead();\n let { targetWithTransforms, target, layout, latestValues } = lead;\n if (!targetWithTransforms || !target || !layout)\n return;\n /**\n * If we're only animating position, and this element isn't the lead element,\n * then instead of projecting into the lead box we instead want to calculate\n * a new target that aligns the two boxes but maintains the layout shape.\n */\n if (this !== lead &&\n this.layout &&\n layout &&\n shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {\n target = this.target || createBox();\n const xLength = calcLength(this.layout.layoutBox.x);\n target.x.min = lead.target.x.min;\n target.x.max = target.x.min + xLength;\n const yLength = calcLength(this.layout.layoutBox.y);\n target.y.min = lead.target.y.min;\n target.y.max = target.y.min + yLength;\n }\n copyBoxInto(targetWithTransforms, target);\n /**\n * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.\n * This is the final box that we will then project into by calculating a transform delta and\n * applying it to the corrected box.\n */\n transformBox(targetWithTransforms, latestValues);\n /**\n * Update the delta between the corrected box and the final target box, after\n * user-set transforms are applied to it. This will be used by the renderer to\n * create a transform style that will reproject the element from its layout layout\n * into the desired bounding box.\n */\n calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);\n }\n registerSharedNode(layoutId, node) {\n if (!this.sharedNodes.has(layoutId)) {\n this.sharedNodes.set(layoutId, new NodeStack());\n }\n const stack = this.sharedNodes.get(layoutId);\n stack.add(node);\n const config = node.options.initialPromotionConfig;\n node.promote({\n transition: config ? config.transition : undefined,\n preserveFollowOpacity: config && config.shouldPreserveFollowOpacity\n ? config.shouldPreserveFollowOpacity(node)\n : undefined,\n });\n }\n isLead() {\n const stack = this.getStack();\n return stack ? stack.lead === this : true;\n }\n getLead() {\n var _a;\n const { layoutId } = this.options;\n return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;\n }\n getPrevLead() {\n var _a;\n const { layoutId } = this.options;\n return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;\n }\n getStack() {\n const { layoutId } = this.options;\n if (layoutId)\n return this.root.sharedNodes.get(layoutId);\n }\n promote({ needsReset, transition, preserveFollowOpacity, } = {}) {\n const stack = this.getStack();\n if (stack)\n stack.promote(this, preserveFollowOpacity);\n if (needsReset) {\n this.projectionDelta = undefined;\n this.needsReset = true;\n }\n if (transition)\n this.setOptions({ transition });\n }\n relegate() {\n const stack = this.getStack();\n if (stack) {\n return stack.relegate(this);\n }\n else {\n return false;\n }\n }\n resetSkewAndRotation() {\n const { visualElement } = this.options;\n if (!visualElement)\n return;\n // If there's no detected skew or rotation values, we can early return without a forced render.\n let hasDistortingTransform = false;\n /**\n * An unrolled check for rotation values. Most elements don't have any rotation and\n * skipping the nested loop and new object creation is 50% faster.\n */\n const { latestValues } = visualElement;\n if (latestValues.z ||\n latestValues.rotate ||\n latestValues.rotateX ||\n latestValues.rotateY ||\n latestValues.rotateZ ||\n latestValues.skewX ||\n latestValues.skewY) {\n hasDistortingTransform = true;\n }\n // If there's no distorting values, we don't need to do any more.\n if (!hasDistortingTransform)\n return;\n const resetValues = {};\n if (latestValues.z) {\n resetDistortingTransform(\"z\", visualElement, resetValues, this.animationValues);\n }\n // Check the skew and rotate value of all axes and reset to 0\n for (let i = 0; i < transformAxes.length; i++) {\n resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues, this.animationValues);\n resetDistortingTransform(`skew${transformAxes[i]}`, visualElement, resetValues, this.animationValues);\n }\n // Force a render of this element to apply the transform with all skews and rotations\n // set to 0.\n visualElement.render();\n // Put back all the values we reset\n for (const key in resetValues) {\n visualElement.setStaticValue(key, resetValues[key]);\n if (this.animationValues) {\n this.animationValues[key] = resetValues[key];\n }\n }\n // Schedule a render for the next frame. This ensures we won't visually\n // see the element with the reset rotate value applied.\n visualElement.scheduleRender();\n }\n getProjectionStyles(styleProp) {\n var _a, _b;\n if (!this.instance || this.isSVG)\n return undefined;\n if (!this.isVisible) {\n return hiddenVisibility;\n }\n const styles = {\n visibility: \"\",\n };\n const transformTemplate = this.getTransformTemplate();\n if (this.needsReset) {\n this.needsReset = false;\n styles.opacity = \"\";\n styles.pointerEvents =\n resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || \"\";\n styles.transform = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : \"none\";\n return styles;\n }\n const lead = this.getLead();\n if (!this.projectionDelta || !this.layout || !lead.target) {\n const emptyStyles = {};\n if (this.options.layoutId) {\n emptyStyles.opacity =\n this.latestValues.opacity !== undefined\n ? this.latestValues.opacity\n : 1;\n emptyStyles.pointerEvents =\n resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || \"\";\n }\n if (this.hasProjected && !hasTransform(this.latestValues)) {\n emptyStyles.transform = transformTemplate\n ? transformTemplate({}, \"\")\n : \"none\";\n this.hasProjected = false;\n }\n return emptyStyles;\n }\n const valuesToRender = lead.animationValues || lead.latestValues;\n this.applyTransformsToTarget();\n styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);\n if (transformTemplate) {\n styles.transform = transformTemplate(valuesToRender, styles.transform);\n }\n const { x, y } = this.projectionDelta;\n styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;\n if (lead.animationValues) {\n /**\n * If the lead component is animating, assign this either the entering/leaving\n * opacity\n */\n styles.opacity =\n lead === this\n ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1\n : this.preserveOpacity\n ? this.latestValues.opacity\n : valuesToRender.opacityExit;\n }\n else {\n /**\n * Or we're not animating at all, set the lead component to its layout\n * opacity and other components to hidden.\n */\n styles.opacity =\n lead === this\n ? valuesToRender.opacity !== undefined\n ? valuesToRender.opacity\n : \"\"\n : valuesToRender.opacityExit !== undefined\n ? valuesToRender.opacityExit\n : 0;\n }\n /**\n * Apply scale correction\n */\n for (const key in scaleCorrectors) {\n if (valuesToRender[key] === undefined)\n continue;\n const { correct, applyTo } = scaleCorrectors[key];\n /**\n * Only apply scale correction to the value if we have an\n * active projection transform. Otherwise these values become\n * vulnerable to distortion if the element changes size without\n * a corresponding layout animation.\n */\n const corrected = styles.transform === \"none\"\n ? valuesToRender[key]\n : correct(valuesToRender[key], lead);\n if (applyTo) {\n const num = applyTo.length;\n for (let i = 0; i < num; i++) {\n styles[applyTo[i]] = corrected;\n }\n }\n else {\n styles[key] = corrected;\n }\n }\n /**\n * Disable pointer events on follow components. This is to ensure\n * that if a follow component covers a lead component it doesn't block\n * pointer events on the lead.\n */\n if (this.options.layoutId) {\n styles.pointerEvents =\n lead === this\n ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || \"\"\n : \"none\";\n }\n return styles;\n }\n clearSnapshot() {\n this.resumeFrom = this.snapshot = undefined;\n }\n // Only run on root\n resetTree() {\n this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });\n this.root.nodes.forEach(clearMeasurements);\n this.root.sharedNodes.clear();\n }\n };\n}\nfunction updateLayout(node) {\n node.updateLayout();\n}\nfunction notifyLayoutUpdate(node) {\n var _a;\n const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;\n if (node.isLead() &&\n node.layout &&\n snapshot &&\n node.hasListeners(\"didUpdate\")) {\n const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;\n const { animationType } = node.options;\n const isShared = snapshot.source !== node.layout.source;\n // TODO Maybe we want to also resize the layout snapshot so we don't trigger\n // animations for instance if layout=\"size\" and an element has only changed position\n if (animationType === \"size\") {\n eachAxis((axis) => {\n const axisSnapshot = isShared\n ? snapshot.measuredBox[axis]\n : snapshot.layoutBox[axis];\n const length = calcLength(axisSnapshot);\n axisSnapshot.min = layout[axis].min;\n axisSnapshot.max = axisSnapshot.min + length;\n });\n }\n else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {\n eachAxis((axis) => {\n const axisSnapshot = isShared\n ? snapshot.measuredBox[axis]\n : snapshot.layoutBox[axis];\n const length = calcLength(layout[axis]);\n axisSnapshot.max = axisSnapshot.min + length;\n /**\n * Ensure relative target gets resized and rerendererd\n */\n if (node.relativeTarget && !node.currentAnimation) {\n node.isProjectionDirty = true;\n node.relativeTarget[axis].max =\n node.relativeTarget[axis].min + length;\n }\n });\n }\n const layoutDelta = createDelta();\n calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);\n const visualDelta = createDelta();\n if (isShared) {\n calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);\n }\n else {\n calcBoxDelta(visualDelta, layout, snapshot.layoutBox);\n }\n const hasLayoutChanged = !isDeltaZero(layoutDelta);\n let hasRelativeTargetChanged = false;\n if (!node.resumeFrom) {\n const relativeParent = node.getClosestProjectingParent();\n /**\n * If the relativeParent is itself resuming from a different element then\n * the relative snapshot is not relavent\n */\n if (relativeParent && !relativeParent.resumeFrom) {\n const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;\n if (parentSnapshot && parentLayout) {\n const relativeSnapshot = createBox();\n calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);\n const relativeLayout = createBox();\n calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);\n if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {\n hasRelativeTargetChanged = true;\n }\n if (relativeParent.options.layoutRoot) {\n node.relativeTarget = relativeLayout;\n node.relativeTargetOrigin = relativeSnapshot;\n node.relativeParent = relativeParent;\n }\n }\n }\n }\n node.notifyListeners(\"didUpdate\", {\n layout,\n snapshot,\n delta: visualDelta,\n layoutDelta,\n hasLayoutChanged,\n hasRelativeTargetChanged,\n });\n }\n else if (node.isLead()) {\n const { onExitComplete } = node.options;\n onExitComplete && onExitComplete();\n }\n /**\n * Clearing transition\n * TODO: Investigate why this transition is being passed in as {type: false } from Framer\n * and why we need it at all\n */\n node.options.transition = undefined;\n}\nfunction propagateDirtyNodes(node) {\n /**\n * Increase debug counter for nodes encountered this frame\n */\n if (isDebug) {\n metrics.totalNodes++;\n }\n if (!node.parent)\n return;\n /**\n * If this node isn't projecting, propagate isProjectionDirty. It will have\n * no performance impact but it will allow the next child that *is* projecting\n * but *isn't* dirty to just check its parent to see if *any* ancestor needs\n * correcting.\n */\n if (!node.isProjecting()) {\n node.isProjectionDirty = node.parent.isProjectionDirty;\n }\n /**\n * Propagate isSharedProjectionDirty and isTransformDirty\n * throughout the whole tree. A future revision can take another look at\n * this but for safety we still recalcualte shared nodes.\n */\n node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||\n node.parent.isProjectionDirty ||\n node.parent.isSharedProjectionDirty));\n node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);\n}\nfunction cleanDirtyNodes(node) {\n node.isProjectionDirty =\n node.isSharedProjectionDirty =\n node.isTransformDirty =\n false;\n}\nfunction clearSnapshot(node) {\n node.clearSnapshot();\n}\nfunction clearMeasurements(node) {\n node.clearMeasurements();\n}\nfunction clearIsLayoutDirty(node) {\n node.isLayoutDirty = false;\n}\nfunction resetTransformStyle(node) {\n const { visualElement } = node.options;\n if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {\n visualElement.notify(\"BeforeLayoutMeasure\");\n }\n node.resetTransform();\n}\nfunction finishAnimation(node) {\n node.finishAnimation();\n node.targetDelta = node.relativeTarget = node.target = undefined;\n node.isProjectionDirty = true;\n}\nfunction resolveTargetDelta(node) {\n node.resolveTargetDelta();\n}\nfunction calcProjection(node) {\n node.calcProjection();\n}\nfunction resetSkewAndRotation(node) {\n node.resetSkewAndRotation();\n}\nfunction removeLeadSnapshots(stack) {\n stack.removeLeadSnapshot();\n}\nfunction mixAxisDelta(output, delta, p) {\n output.translate = mixNumber(delta.translate, 0, p);\n output.scale = mixNumber(delta.scale, 1, p);\n output.origin = delta.origin;\n output.originPoint = delta.originPoint;\n}\nfunction mixAxis(output, from, to, p) {\n output.min = mixNumber(from.min, to.min, p);\n output.max = mixNumber(from.max, to.max, p);\n}\nfunction mixBox(output, from, to, p) {\n mixAxis(output.x, from.x, to.x, p);\n mixAxis(output.y, from.y, to.y, p);\n}\nfunction hasOpacityCrossfade(node) {\n return (node.animationValues && node.animationValues.opacityExit !== undefined);\n}\nconst defaultLayoutTransition = {\n duration: 0.45,\n ease: [0.4, 0, 0.1, 1],\n};\nconst userAgentContains = (string) => typeof navigator !== \"undefined\" &&\n navigator.userAgent &&\n navigator.userAgent.toLowerCase().includes(string);\n/**\n * Measured bounding boxes must be rounded in Safari and\n * left untouched in Chrome, otherwise non-integer layouts within scaled-up elements\n * can appear to jump.\n */\nconst roundPoint = userAgentContains(\"applewebkit/\") && !userAgentContains(\"chrome/\")\n ? Math.round\n : noop;\nfunction roundAxis(axis) {\n // Round to the nearest .5 pixels to support subpixel layouts\n axis.min = roundPoint(axis.min);\n axis.max = roundPoint(axis.max);\n}\nfunction roundBox(box) {\n roundAxis(box.x);\n roundAxis(box.y);\n}\nfunction shouldAnimatePositionOnly(animationType, snapshot, layout) {\n return (animationType === \"position\" ||\n (animationType === \"preserve-aspect\" &&\n !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));\n}\nfunction checkNodeWasScrollRoot(node) {\n var _a;\n return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);\n}\n\nexport { cleanDirtyNodes, createProjectionNode, mixAxis, mixAxisDelta, mixBox, propagateDirtyNodes };\n","function isSVGElement(element) {\n return element instanceof SVGElement && element.tagName !== \"svg\";\n}\n\nexport { isSVGElement };\n","import { animateMotionValue } from '../interfaces/motion-value.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction animateSingleValue(value, keyframes, options) {\n const motionValue$1 = isMotionValue(value) ? value : motionValue(value);\n motionValue$1.start(animateMotionValue(\"\", motionValue$1, keyframes, options));\n return motionValue$1.animation;\n}\n\nexport { animateSingleValue };\n","function buildProjectionTransform(delta, treeScale, latestTransform) {\n let transform = \"\";\n /**\n * The translations we use to calculate are always relative to the viewport coordinate space.\n * But when we apply scales, we also scale the coordinate space of an element and its children.\n * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need\n * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.\n */\n const xTranslate = delta.x.translate / treeScale.x;\n const yTranslate = delta.y.translate / treeScale.y;\n const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0;\n if (xTranslate || yTranslate || zTranslate) {\n transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;\n }\n /**\n * Apply scale correction for the tree transform.\n * This will apply scale to the screen-orientated axes.\n */\n if (treeScale.x !== 1 || treeScale.y !== 1) {\n transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;\n }\n if (latestTransform) {\n const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } = latestTransform;\n if (transformPerspective)\n transform = `perspective(${transformPerspective}px) ${transform}`;\n if (rotate)\n transform += `rotate(${rotate}deg) `;\n if (rotateX)\n transform += `rotateX(${rotateX}deg) `;\n if (rotateY)\n transform += `rotateY(${rotateY}deg) `;\n if (skewX)\n transform += `skewX(${skewX}deg) `;\n if (skewY)\n transform += `skewY(${skewY}deg) `;\n }\n /**\n * Apply scale to match the size of the element to the size we want it.\n * This will apply scale to the element-orientated axes.\n */\n const elementScaleX = delta.x.scale * treeScale.x;\n const elementScaleY = delta.y.scale * treeScale.y;\n if (elementScaleX !== 1 || elementScaleY !== 1) {\n transform += `scale(${elementScaleX}, ${elementScaleY})`;\n }\n return transform || \"none\";\n}\n\nexport { buildProjectionTransform };\n","import { createProjectionNode } from './create-projection-node.mjs';\nimport { addDomEvent } from '../../events/add-dom-event.mjs';\n\nconst DocumentProjectionNode = createProjectionNode({\n attachResizeListener: (ref, notify) => addDomEvent(ref, \"resize\", notify),\n measureScroll: () => ({\n x: document.documentElement.scrollLeft || document.body.scrollLeft,\n y: document.documentElement.scrollTop || document.body.scrollTop,\n }),\n checkIsScrollRoot: () => true,\n});\n\nexport { DocumentProjectionNode };\n","import { createProjectionNode } from './create-projection-node.mjs';\nimport { DocumentProjectionNode } from './DocumentProjectionNode.mjs';\n\nconst rootProjectionNode = {\n current: undefined,\n};\nconst HTMLProjectionNode = createProjectionNode({\n measureScroll: (instance) => ({\n x: instance.scrollLeft,\n y: instance.scrollTop,\n }),\n defaultParent: () => {\n if (!rootProjectionNode.current) {\n const documentNode = new DocumentProjectionNode({});\n documentNode.mount(window);\n documentNode.setOptions({ layoutScroll: true });\n rootProjectionNode.current = documentNode;\n }\n return rootProjectionNode.current;\n },\n resetTransform: (instance, value) => {\n instance.style.transform = value !== undefined ? value : \"none\";\n },\n checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === \"fixed\"),\n});\n\nexport { HTMLProjectionNode, rootProjectionNode };\n","import { DragGesture } from '../../gestures/drag/index.mjs';\nimport { PanGesture } from '../../gestures/pan/index.mjs';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\nimport { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';\n\nconst drag = {\n pan: {\n Feature: PanGesture,\n },\n drag: {\n Feature: DragGesture,\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n};\n\nexport { drag };\n","import { Feature } from '../../motion/features/Feature.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { VisualElementDragControls } from './VisualElementDragControls.mjs';\n\nclass DragGesture extends Feature {\n constructor(node) {\n super(node);\n this.removeGroupControls = noop;\n this.removeListeners = noop;\n this.controls = new VisualElementDragControls(node);\n }\n mount() {\n // If we've been provided a DragControls for manual control over the drag gesture,\n // subscribe this component to it on mount.\n const { dragControls } = this.node.getProps();\n if (dragControls) {\n this.removeGroupControls = dragControls.subscribe(this.controls);\n }\n this.removeListeners = this.controls.addListeners() || noop;\n }\n unmount() {\n this.removeGroupControls();\n this.removeListeners();\n }\n}\n\nexport { DragGesture };\n","import { addPointerEvent } from '../events/add-pointer-event.mjs';\nimport { pipe } from '../utils/pipe.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\nfunction addHoverEvent(node, isActive) {\n const eventName = isActive ? \"pointerenter\" : \"pointerleave\";\n const callbackName = isActive ? \"onHoverStart\" : \"onHoverEnd\";\n const handleEvent = (event, info) => {\n if (event.pointerType === \"touch\" || isDragActive())\n return;\n const props = node.getProps();\n if (node.animationState && props.whileHover) {\n node.animationState.setActive(\"whileHover\", isActive);\n }\n const callback = props[callbackName];\n if (callback) {\n frame.postRender(() => callback(event, info));\n }\n };\n return addPointerEvent(node.current, eventName, handleEvent, {\n passive: !node.getProps()[callbackName],\n });\n}\nclass HoverGesture extends Feature {\n mount() {\n this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));\n }\n unmount() { }\n}\n\nexport { HoverGesture };\n","/**\n * Recursively traverse up the tree to check whether the provided child node\n * is the parent or a descendant of it.\n *\n * @param parent - Element to find\n * @param child - Element to test against parent\n */\nconst isNodeOrChild = (parent, child) => {\n if (!child) {\n return false;\n }\n else if (parent === child) {\n return true;\n }\n else {\n return isNodeOrChild(parent, child.parentElement);\n }\n};\n\nexport { isNodeOrChild };\n","import { extractEventInfo } from '../events/event-info.mjs';\nimport { addDomEvent } from '../events/add-dom-event.mjs';\nimport { addPointerEvent } from '../events/add-pointer-event.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { pipe } from '../utils/pipe.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { isNodeOrChild } from './utils/is-node-or-child.mjs';\nimport { noop } from '../utils/noop.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\nfunction fireSyntheticPointerEvent(name, handler) {\n if (!handler)\n return;\n const syntheticPointerEvent = new PointerEvent(\"pointer\" + name);\n handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));\n}\nclass PressGesture extends Feature {\n constructor() {\n super(...arguments);\n this.removeStartListeners = noop;\n this.removeEndListeners = noop;\n this.removeAccessibleListeners = noop;\n this.startPointerPress = (startEvent, startInfo) => {\n if (this.isPressing)\n return;\n this.removeEndListeners();\n const props = this.node.getProps();\n const endPointerPress = (endEvent, endInfo) => {\n if (!this.checkPressEnd())\n return;\n const { onTap, onTapCancel, globalTapTarget } = this.node.getProps();\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 const handler = !globalTapTarget &&\n !isNodeOrChild(this.node.current, endEvent.target)\n ? onTapCancel\n : onTap;\n if (handler) {\n frame.update(() => handler(endEvent, endInfo));\n }\n };\n const removePointerUpListener = addPointerEvent(window, \"pointerup\", endPointerPress, {\n passive: !(props.onTap || props[\"onPointerUp\"]),\n });\n const removePointerCancelListener = addPointerEvent(window, \"pointercancel\", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), {\n passive: !(props.onTapCancel ||\n props[\"onPointerCancel\"]),\n });\n this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);\n this.startPress(startEvent, startInfo);\n };\n this.startAccessiblePress = () => {\n const handleKeydown = (keydownEvent) => {\n if (keydownEvent.key !== \"Enter\" || this.isPressing)\n return;\n const handleKeyup = (keyupEvent) => {\n if (keyupEvent.key !== \"Enter\" || !this.checkPressEnd())\n return;\n fireSyntheticPointerEvent(\"up\", (event, info) => {\n const { onTap } = this.node.getProps();\n if (onTap) {\n frame.postRender(() => onTap(event, info));\n }\n });\n };\n this.removeEndListeners();\n this.removeEndListeners = addDomEvent(this.node.current, \"keyup\", handleKeyup);\n fireSyntheticPointerEvent(\"down\", (event, info) => {\n this.startPress(event, info);\n });\n };\n const removeKeydownListener = addDomEvent(this.node.current, \"keydown\", handleKeydown);\n const handleBlur = () => {\n if (!this.isPressing)\n return;\n fireSyntheticPointerEvent(\"cancel\", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));\n };\n const removeBlurListener = addDomEvent(this.node.current, \"blur\", handleBlur);\n this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);\n };\n }\n startPress(event, info) {\n this.isPressing = true;\n const { onTapStart, whileTap } = this.node.getProps();\n /**\n * Ensure we trigger animations before firing event callback\n */\n if (whileTap && this.node.animationState) {\n this.node.animationState.setActive(\"whileTap\", true);\n }\n if (onTapStart) {\n frame.postRender(() => onTapStart(event, info));\n }\n }\n checkPressEnd() {\n this.removeEndListeners();\n this.isPressing = false;\n const props = this.node.getProps();\n if (props.whileTap && this.node.animationState) {\n this.node.animationState.setActive(\"whileTap\", false);\n }\n return !isDragActive();\n }\n cancelPress(event, info) {\n if (!this.checkPressEnd())\n return;\n const { onTapCancel } = this.node.getProps();\n if (onTapCancel) {\n frame.postRender(() => onTapCancel(event, info));\n }\n }\n mount() {\n const props = this.node.getProps();\n const removePointerListener = addPointerEvent(props.globalTapTarget ? window : this.node.current, \"pointerdown\", this.startPointerPress, {\n passive: !(props.onTapStart ||\n props[\"onPointerStart\"]),\n });\n const removeFocusListener = addDomEvent(this.node.current, \"focus\", this.startAccessiblePress);\n this.removeStartListeners = pipe(removePointerListener, removeFocusListener);\n }\n unmount() {\n this.removeStartListeners();\n this.removeEndListeners();\n this.removeAccessibleListeners();\n }\n}\n\nexport { PressGesture };\n","/**\n * Map an IntersectionHandler callback to an element. We only ever make one handler for one\n * element, so even though these handlers might all be triggered by different\n * observers, we can keep them in the same map.\n */\nconst observerCallbacks = new WeakMap();\n/**\n * Multiple observers can be created for multiple element/document roots. Each with\n * different settings. So here we store dictionaries of observers to each root,\n * using serialised settings (threshold/margin) as lookup keys.\n */\nconst observers = new WeakMap();\nconst fireObserverCallback = (entry) => {\n const callback = observerCallbacks.get(entry.target);\n callback && callback(entry);\n};\nconst fireAllObserverCallbacks = (entries) => {\n entries.forEach(fireObserverCallback);\n};\nfunction initIntersectionObserver({ root, ...options }) {\n const lookupRoot = root || document;\n /**\n * If we don't have an observer lookup map for this root, create one.\n */\n if (!observers.has(lookupRoot)) {\n observers.set(lookupRoot, {});\n }\n const rootObservers = observers.get(lookupRoot);\n const key = JSON.stringify(options);\n /**\n * If we don't have an observer for this combination of root and settings,\n * create one.\n */\n if (!rootObservers[key]) {\n rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });\n }\n return rootObservers[key];\n}\nfunction observeIntersection(element, options, callback) {\n const rootInteresectionObserver = initIntersectionObserver(options);\n observerCallbacks.set(element, callback);\n rootInteresectionObserver.observe(element);\n return () => {\n observerCallbacks.delete(element);\n rootInteresectionObserver.unobserve(element);\n };\n}\n\nexport { observeIntersection };\n","import { Feature } from '../Feature.mjs';\nimport { observeIntersection } from './observers.mjs';\n\nconst thresholdNames = {\n some: 0,\n all: 1,\n};\nclass InViewFeature extends Feature {\n constructor() {\n super(...arguments);\n this.hasEnteredView = false;\n this.isInView = false;\n }\n startObserver() {\n this.unmount();\n const { viewport = {} } = this.node.getProps();\n const { root, margin: rootMargin, amount = \"some\", once } = viewport;\n const options = {\n root: root ? root.current : undefined,\n rootMargin,\n threshold: typeof amount === \"number\" ? amount : thresholdNames[amount],\n };\n const onIntersectionUpdate = (entry) => {\n const { isIntersecting } = entry;\n /**\n * If there's been no change in the viewport state, early return.\n */\n if (this.isInView === isIntersecting)\n return;\n this.isInView = isIntersecting;\n /**\n * Handle hasEnteredView. If this is only meant to run once, and\n * element isn't visible, early return. Otherwise set hasEnteredView to true.\n */\n if (once && !isIntersecting && this.hasEnteredView) {\n return;\n }\n else if (isIntersecting) {\n this.hasEnteredView = true;\n }\n if (this.node.animationState) {\n this.node.animationState.setActive(\"whileInView\", isIntersecting);\n }\n /**\n * Use the latest committed props rather than the ones in scope\n * when this observer is created\n */\n const { onViewportEnter, onViewportLeave } = this.node.getProps();\n const callback = isIntersecting ? onViewportEnter : onViewportLeave;\n callback && callback(entry);\n };\n return observeIntersection(this.node.current, options, onIntersectionUpdate);\n }\n mount() {\n this.startObserver();\n }\n update() {\n if (typeof IntersectionObserver === \"undefined\")\n return;\n const { props, prevProps } = this.node;\n const hasOptionsChanged = [\"amount\", \"margin\", \"root\"].some(hasViewportOptionChanged(props, prevProps));\n if (hasOptionsChanged) {\n this.startObserver();\n }\n }\n unmount() { }\n}\nfunction hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {\n return (name) => viewport[name] !== prevViewport[name];\n}\n\nexport { InViewFeature };\n","import { HoverGesture } from '../../gestures/hover.mjs';\nimport { FocusGesture } from '../../gestures/focus.mjs';\nimport { PressGesture } from '../../gestures/press.mjs';\nimport { InViewFeature } from './viewport/index.mjs';\n\nconst gestureAnimations = {\n inView: {\n Feature: InViewFeature,\n },\n tap: {\n Feature: PressGesture,\n },\n focus: {\n Feature: FocusGesture,\n },\n hover: {\n Feature: HoverGesture,\n },\n};\n\nexport { gestureAnimations };\n","import { addDomEvent } from '../events/add-dom-event.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { pipe } from '../utils/pipe.mjs';\n\nclass FocusGesture extends Feature {\n constructor() {\n super(...arguments);\n this.isActive = false;\n }\n onFocus() {\n let isFocusVisible = false;\n /**\n * If this element doesn't match focus-visible then don't\n * apply whileHover. But, if matches throws that focus-visible\n * is not a valid selector then in that browser outline styles will be applied\n * to the element by default and we want to match that behaviour with whileFocus.\n */\n try {\n isFocusVisible = this.node.current.matches(\":focus-visible\");\n }\n catch (e) {\n isFocusVisible = true;\n }\n if (!isFocusVisible || !this.node.animationState)\n return;\n this.node.animationState.setActive(\"whileFocus\", true);\n this.isActive = true;\n }\n onBlur() {\n if (!this.isActive || !this.node.animationState)\n return;\n this.node.animationState.setActive(\"whileFocus\", false);\n this.isActive = false;\n }\n mount() {\n this.unmount = pipe(addDomEvent(this.node.current, \"focus\", () => this.onFocus()), addDomEvent(this.node.current, \"blur\", () => this.onBlur()));\n }\n unmount() { }\n}\n\nexport { FocusGesture };\n","import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\n\nconst layout = {\n layout: {\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n};\n\nexport { layout };\n","\"use client\";\nimport { createContext } from 'react';\n\nconst MotionContext = createContext({});\n\nexport { MotionContext };\n","\"use client\";\nimport { createContext } from 'react';\n\nconst LazyContext = createContext({ strict: false });\n\nexport { LazyContext };\n","import { useContext, useRef, useInsertionEffect, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { LazyContext } from '../../context/LazyContext.mjs';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\nimport { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';\nimport { microtask } from '../../frameloop/microtask.mjs';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\nimport { SwitchLayoutGroupContext } from '../../context/SwitchLayoutGroupContext.mjs';\n\nfunction useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {\n var _a, _b;\n const { visualElement: parent } = useContext(MotionContext);\n const lazyContext = useContext(LazyContext);\n const presenceContext = useContext(PresenceContext);\n const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;\n const visualElementRef = useRef();\n /**\n * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n */\n createVisualElement = createVisualElement || lazyContext.renderer;\n if (!visualElementRef.current && createVisualElement) {\n visualElementRef.current = createVisualElement(Component, {\n visualState,\n parent,\n props,\n presenceContext,\n blockInitialAnimation: presenceContext\n ? presenceContext.initial === false\n : false,\n reducedMotionConfig,\n });\n }\n const visualElement = visualElementRef.current;\n /**\n * Load Motion gesture and animation features. These are rendered as renderless\n * components so each feature can optionally make use of React lifecycle methods.\n */\n const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);\n if (visualElement &&\n !visualElement.projection &&\n ProjectionNodeConstructor &&\n (visualElement.type === \"html\" || visualElement.type === \"svg\")) {\n createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);\n }\n const isMounted = useRef(false);\n useInsertionEffect(() => {\n /**\n * Check the component has already mounted before calling\n * `update` unnecessarily. This ensures we skip the initial update.\n */\n if (visualElement && isMounted.current) {\n visualElement.update(props, presenceContext);\n }\n });\n /**\n * Cache this value as we want to know whether HandoffAppearAnimations\n * was present on initial render - it will be deleted after this.\n */\n const optimisedAppearId = props[optimizedAppearDataAttribute];\n const wantsHandoff = useRef(Boolean(optimisedAppearId) &&\n !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&\n ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));\n useIsomorphicLayoutEffect(() => {\n if (!visualElement)\n return;\n isMounted.current = true;\n window.MotionIsMounted = true;\n visualElement.updateFeatures();\n microtask.render(visualElement.render);\n /**\n * Ideally this function would always run in a useEffect.\n *\n * However, if we have optimised appear animations to handoff from,\n * it needs to happen synchronously to ensure there's no flash of\n * incorrect styles in the event of a hydration error.\n *\n * So if we detect a situtation where optimised appear animations\n * are running, we use useLayoutEffect to trigger animations.\n */\n if (wantsHandoff.current && visualElement.animationState) {\n visualElement.animationState.animateChanges();\n }\n });\n useEffect(() => {\n if (!visualElement)\n return;\n if (!wantsHandoff.current && visualElement.animationState) {\n visualElement.animationState.animateChanges();\n }\n if (wantsHandoff.current) {\n // This ensures all future calls to animateChanges() in this component will run in useEffect\n queueMicrotask(() => {\n var _a;\n (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);\n });\n wantsHandoff.current = false;\n }\n });\n return visualElement;\n}\nfunction createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {\n const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = props;\n visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props[\"data-framer-portal-id\"]\n ? undefined\n : getClosestProjectingNode(visualElement.parent));\n visualElement.projection.setOptions({\n layoutId,\n layout,\n alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),\n visualElement,\n /**\n * TODO: Update options in an effect. This could be tricky as it'll be too late\n * to update by the time layout animations run.\n * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,\n * ensuring it gets called if there's no potential layout animations.\n *\n */\n animationType: typeof layout === \"string\" ? layout : \"both\",\n initialPromotionConfig,\n layoutScroll,\n layoutRoot,\n });\n}\nfunction getClosestProjectingNode(visualElement) {\n if (!visualElement)\n return undefined;\n return visualElement.options.allowProjection !== false\n ? visualElement.projection\n : getClosestProjectingNode(visualElement.parent);\n}\n\nexport { useVisualElement };\n","import { useCallback } from 'react';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\n\n/**\n * Creates a ref function that, when called, hydrates the provided\n * external ref and VisualElement.\n */\nfunction useMotionRef(visualState, visualElement, externalRef) {\n return useCallback((instance) => {\n instance && visualState.mount && visualState.mount(instance);\n if (visualElement) {\n if (instance) {\n visualElement.mount(instance);\n }\n else {\n visualElement.unmount();\n }\n }\n if (externalRef) {\n if (typeof externalRef === \"function\") {\n externalRef(instance);\n }\n else if (isRefObject(externalRef)) {\n externalRef.current = instance;\n }\n }\n }, \n /**\n * Only pass a new ref callback to React if we've received a visual element\n * factory. Otherwise we'll be mounting/remounting every time externalRef\n * or other dependencies change.\n */\n [visualElement]);\n}\n\nexport { useMotionRef };\n","import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { isVariantLabel } from './is-variant-label.mjs';\nimport { variantProps } from './variant-props.mjs';\n\nfunction isControllingVariants(props) {\n return (isAnimationControls(props.animate) ||\n variantProps.some((name) => isVariantLabel(props[name])));\n}\nfunction isVariantNode(props) {\n return Boolean(isControllingVariants(props) || props.variants);\n}\n\nexport { isControllingVariants, isVariantNode };\n","import { useContext, useMemo } from 'react';\nimport { MotionContext } from './index.mjs';\nimport { getCurrentTreeVariants } from './utils.mjs';\n\nfunction useCreateMotionContext(props) {\n const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));\n return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);\n}\nfunction variantLabelsAsDependency(prop) {\n return Array.isArray(prop) ? prop.join(\" \") : prop;\n}\n\nexport { useCreateMotionContext };\n","import { isVariantLabel } from '../../render/utils/is-variant-label.mjs';\nimport { isControllingVariants } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction getCurrentTreeVariants(props, context) {\n if (isControllingVariants(props)) {\n const { initial, animate } = props;\n return {\n initial: initial === false || isVariantLabel(initial)\n ? initial\n : undefined,\n animate: isVariantLabel(animate) ? animate : undefined,\n };\n }\n return props.inherit !== false ? context : {};\n}\n\nexport { getCurrentTreeVariants };\n","const featureProps = {\n animation: [\n \"animate\",\n \"variants\",\n \"whileHover\",\n \"whileTap\",\n \"exit\",\n \"whileInView\",\n \"whileFocus\",\n \"whileDrag\",\n ],\n exit: [\"exit\"],\n drag: [\"drag\", \"dragControls\"],\n focus: [\"whileFocus\"],\n hover: [\"whileHover\", \"onHoverStart\", \"onHoverEnd\"],\n tap: [\"whileTap\", \"onTap\", \"onTapStart\", \"onTapCancel\"],\n pan: [\"onPan\", \"onPanStart\", \"onPanSessionStart\", \"onPanEnd\"],\n inView: [\"whileInView\", \"onViewportEnter\", \"onViewportLeave\"],\n layout: [\"layout\", \"layoutId\"],\n};\nconst featureDefinitions = {};\nfor (const key in featureProps) {\n featureDefinitions[key] = {\n isEnabled: (props) => featureProps[key].some((name) => !!props[name]),\n };\n}\n\nexport { featureDefinitions };\n","const motionComponentSymbol = Symbol.for(\"motionComponentSymbol\");\n\nexport { motionComponentSymbol };\n","\"use client\";\nimport { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef, useContext } from 'react';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { MotionContext } from '../context/MotionContext/index.mjs';\nimport { useVisualElement } from './utils/use-visual-element.mjs';\nimport { useMotionRef } from './utils/use-motion-ref.mjs';\nimport { useCreateMotionContext } from '../context/MotionContext/create.mjs';\nimport { loadFeatures } from './features/load-features.mjs';\nimport { isBrowser } from '../utils/is-browser.mjs';\nimport { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';\nimport { LazyContext } from '../context/LazyContext.mjs';\nimport { motionComponentSymbol } from './utils/symbol.mjs';\nimport { warning, invariant } from '../utils/errors.mjs';\nimport { featureDefinitions } from './features/definitions.mjs';\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n */\nfunction createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {\n preloadedFeatures && loadFeatures(preloadedFeatures);\n function MotionComponent(props, externalRef) {\n /**\n * If we need to measure the element we load this functionality in a\n * separate class component in order to gain access to getSnapshotBeforeUpdate.\n */\n let MeasureLayout;\n const configAndProps = {\n ...useContext(MotionConfigContext),\n ...props,\n layoutId: useLayoutId(props),\n };\n const { isStatic } = configAndProps;\n const context = useCreateMotionContext(props);\n const visualState = useVisualState(props, isStatic);\n if (!isStatic && isBrowser) {\n useStrictMode(configAndProps, preloadedFeatures);\n const layoutProjection = getProjectionFunctionality(configAndProps);\n MeasureLayout = layoutProjection.MeasureLayout;\n /**\n * Create a VisualElement for this component. A VisualElement provides a common\n * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n * providing a way of rendering to these APIs outside of the React render loop\n * for more performant animations and interactions\n */\n context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);\n }\n /**\n * The mount order and hierarchy is specific to ensure our element ref\n * is hydrated by the time features fire their effects.\n */\n return (jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] }));\n }\n const ForwardRefMotionComponent = forwardRef(MotionComponent);\n ForwardRefMotionComponent[motionComponentSymbol] = Component;\n return ForwardRefMotionComponent;\n}\nfunction useLayoutId({ layoutId }) {\n const layoutGroupId = useContext(LayoutGroupContext).id;\n return layoutGroupId && layoutId !== undefined\n ? layoutGroupId + \"-\" + layoutId\n : layoutId;\n}\nfunction useStrictMode(configAndProps, preloadedFeatures) {\n const isStrict = useContext(LazyContext).strict;\n /**\n * If we're in development mode, check to make sure we're not rendering a motion component\n * as a child of LazyMotion, as this will break the file-size benefits of using it.\n */\n if (process.env.NODE_ENV !== \"production\" &&\n preloadedFeatures &&\n isStrict) {\n const strictMessage = \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\";\n configAndProps.ignoreStrict\n ? warning(false, strictMessage)\n : invariant(false, strictMessage);\n }\n}\nfunction getProjectionFunctionality(props) {\n const { drag, layout } = featureDefinitions;\n if (!drag && !layout)\n return {};\n const combined = { ...drag, ...layout };\n return {\n MeasureLayout: (drag === null || drag === void 0 ? void 0 : drag.isEnabled(props)) || (layout === null || layout === void 0 ? void 0 : layout.isEnabled(props))\n ? combined.MeasureLayout\n : undefined,\n ProjectionNode: combined.ProjectionNode,\n };\n}\n\nexport { createRendererMotionComponent };\n","import { featureDefinitions } from './definitions.mjs';\n\nfunction loadFeatures(features) {\n for (const key in features) {\n featureDefinitions[key] = {\n ...featureDefinitions[key],\n ...features[key],\n };\n }\n}\n\nexport { loadFeatures };\n","/**\n * We keep these listed separately as we use the lowercase tag names as part\n * of the runtime bundle to detect SVG components\n */\nconst lowercaseSVGElements = [\n \"animate\",\n \"circle\",\n \"defs\",\n \"desc\",\n \"ellipse\",\n \"g\",\n \"image\",\n \"line\",\n \"filter\",\n \"marker\",\n \"mask\",\n \"metadata\",\n \"path\",\n \"pattern\",\n \"polygon\",\n \"polyline\",\n \"rect\",\n \"stop\",\n \"switch\",\n \"symbol\",\n \"svg\",\n \"text\",\n \"tspan\",\n \"use\",\n \"view\",\n];\n\nexport { lowercaseSVGElements };\n","import { lowercaseSVGElements } from '../../svg/lowercase-elements.mjs';\n\nfunction isSVGComponent(Component) {\n if (\n /**\n * If it's not a string, it's a custom React component. Currently we only support\n * HTML custom React components.\n */\n typeof Component !== \"string\" ||\n /**\n * If it contains a dash, the element is a custom HTML webcomponent.\n */\n Component.includes(\"-\")) {\n return false;\n }\n else if (\n /**\n * If it's in our list of lowercase SVG tags, it's an SVG component\n */\n lowercaseSVGElements.indexOf(Component) > -1 ||\n /**\n * If it contains a capital letter, it's an SVG component\n */\n /[A-Z]/u.test(Component)) {\n return true;\n }\n return false;\n}\n\nexport { isSVGComponent };\n","function renderHTML(element, { style, vars }, styleProp, projection) {\n Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));\n // Loop over any CSS variables and assign those.\n for (const key in vars) {\n element.style.setProperty(key, vars[key]);\n }\n}\n\nexport { renderHTML };\n","/**\n * A set of attribute names that are always read/written as camel case.\n */\nconst camelCaseAttributes = new Set([\n \"baseFrequency\",\n \"diffuseConstant\",\n \"kernelMatrix\",\n \"kernelUnitLength\",\n \"keySplines\",\n \"keyTimes\",\n \"limitingConeAngle\",\n \"markerHeight\",\n \"markerWidth\",\n \"numOctaves\",\n \"targetX\",\n \"targetY\",\n \"surfaceScale\",\n \"specularConstant\",\n \"specularExponent\",\n \"stdDeviation\",\n \"tableValues\",\n \"viewBox\",\n \"gradientTransform\",\n \"pathLength\",\n \"startOffset\",\n \"textLength\",\n \"lengthAdjust\",\n]);\n\nexport { camelCaseAttributes };\n","import { camelToDash } from '../../dom/utils/camel-to-dash.mjs';\nimport { renderHTML } from '../../html/utils/render.mjs';\nimport { camelCaseAttributes } from './camel-case-attrs.mjs';\n\nfunction renderSVG(element, renderState, _styleProp, projection) {\n renderHTML(element, renderState, undefined, projection);\n for (const key in renderState.attrs) {\n element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);\n }\n}\n\nexport { renderSVG };\n","import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';\nimport { transformProps } from '../../render/html/utils/transform.mjs';\n\nfunction isForcedMotionValue(key, { layout, layoutId }) {\n return (transformProps.has(key) ||\n key.startsWith(\"origin\") ||\n ((layout || layoutId !== undefined) &&\n (!!scaleCorrectors[key] || key === \"opacity\")));\n}\n\nexport { isForcedMotionValue };\n","import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps, visualElement) {\n var _a;\n const { style } = props;\n const newValues = {};\n for (const key in style) {\n if (isMotionValue(style[key]) ||\n (prevProps.style &&\n isMotionValue(prevProps.style[key])) ||\n isForcedMotionValue(key, props) ||\n ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {\n newValues[key] = style[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\nimport { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';\nimport { transformPropOrder } from '../../html/utils/transform.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps, visualElement) {\n const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);\n for (const key in props) {\n if (isMotionValue(props[key]) ||\n isMotionValue(prevProps[key])) {\n const targetKey = transformPropOrder.indexOf(key) !== -1\n ? \"attr\" + key.charAt(0).toUpperCase() + key.substring(1)\n : key;\n newValues[targetKey] = props[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","import { useContext } from 'react';\nimport { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {\n const state = {\n latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),\n renderState: createRenderState(),\n };\n if (onMount) {\n state.mount = (instance) => onMount(props, instance, state);\n }\n return state;\n}\nconst makeUseVisualState = (config) => (props, isStatic) => {\n const context = useContext(MotionContext);\n const presenceContext = useContext(PresenceContext);\n const make = () => makeState(config, props, context, presenceContext);\n return isStatic ? make() : useConstant(make);\n};\nfunction makeLatestValues(props, context, presenceContext, scrapeMotionValues) {\n const values = {};\n const motionValues = scrapeMotionValues(props, {});\n for (const key in motionValues) {\n values[key] = resolveMotionValue(motionValues[key]);\n }\n let { initial, animate } = props;\n const isControllingVariants$1 = isControllingVariants(props);\n const isVariantNode$1 = isVariantNode(props);\n if (context &&\n isVariantNode$1 &&\n !isControllingVariants$1 &&\n props.inherit !== false) {\n if (initial === undefined)\n initial = context.initial;\n if (animate === undefined)\n animate = context.animate;\n }\n let isInitialAnimationBlocked = presenceContext\n ? presenceContext.initial === false\n : false;\n isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;\n const variantToSet = isInitialAnimationBlocked ? animate : initial;\n if (variantToSet &&\n typeof variantToSet !== \"boolean\" &&\n !isAnimationControls(variantToSet)) {\n const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];\n for (let i = 0; i < list.length; i++) {\n const resolved = resolveVariantFromProps(props, list[i]);\n if (resolved) {\n const { transitionEnd, transition, ...target } = resolved;\n for (const key in target) {\n let valueTarget = target[key];\n if (Array.isArray(valueTarget)) {\n /**\n * Take final keyframe if the initial animation is blocked because\n * we want to initialise at the end of that blocked animation.\n */\n const index = isInitialAnimationBlocked\n ? valueTarget.length - 1\n : 0;\n valueTarget = valueTarget[index];\n }\n if (valueTarget !== null) {\n values[key] = valueTarget;\n }\n }\n for (const key in transitionEnd) {\n values[key] = transitionEnd[key];\n }\n }\n }\n }\n return values;\n}\n\nexport { makeUseVisualState };\n","const createHtmlRenderState = () => ({\n style: {},\n transform: {},\n transformOrigin: {},\n vars: {},\n});\n\nexport { createHtmlRenderState };\n","import { createHtmlRenderState } from '../../html/utils/create-render-state.mjs';\n\nconst createSvgRenderState = () => ({\n ...createHtmlRenderState(),\n attrs: {},\n});\n\nexport { createSvgRenderState };\n","/**\n * Provided a value and a ValueType, returns the value as that value type.\n */\nconst getValueAsType = (value, type) => {\n return type && typeof value === \"number\"\n ? type.transform(value)\n : value;\n};\n\nexport { getValueAsType };\n","import { transformPropOrder } from './transform.mjs';\nimport { getValueAsType } from '../../dom/value-types/get-as-type.mjs';\nimport { numberValueTypes } from '../../dom/value-types/number.mjs';\n\nconst translateAlias = {\n x: \"translateX\",\n y: \"translateY\",\n z: \"translateZ\",\n transformPerspective: \"perspective\",\n};\nconst numTransforms = transformPropOrder.length;\n/**\n * Build a CSS transform style from individual x/y/scale etc properties.\n *\n * This outputs with a default order of transforms/scales/rotations, this can be customised by\n * providing a transformTemplate function.\n */\nfunction buildTransform(latestValues, transform, transformTemplate) {\n // The transform string we're going to build into.\n let transformString = \"\";\n let transformIsDefault = true;\n /**\n * Loop over all possible transforms in order, adding the ones that\n * are present to the transform string.\n */\n for (let i = 0; i < numTransforms; i++) {\n const key = transformPropOrder[i];\n const value = latestValues[key];\n if (value === undefined)\n continue;\n let valueIsDefault = true;\n if (typeof value === \"number\") {\n valueIsDefault = value === (key.startsWith(\"scale\") ? 1 : 0);\n }\n else {\n valueIsDefault = parseFloat(value) === 0;\n }\n if (!valueIsDefault || transformTemplate) {\n const valueAsType = getValueAsType(value, numberValueTypes[key]);\n if (!valueIsDefault) {\n transformIsDefault = false;\n const transformName = translateAlias[key] || key;\n transformString += `${transformName}(${valueAsType}) `;\n }\n if (transformTemplate) {\n transform[key] = valueAsType;\n }\n }\n }\n transformString = transformString.trim();\n // If we have a custom `transform` template, pass our transform values and\n // generated transformString to that before returning\n if (transformTemplate) {\n transformString = transformTemplate(transform, transformIsDefault ? \"\" : transformString);\n }\n else if (transformIsDefault) {\n transformString = \"none\";\n }\n return transformString;\n}\n\nexport { buildTransform };\n","import { buildTransform } from './build-transform.mjs';\nimport { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';\nimport { transformProps } from './transform.mjs';\nimport { getValueAsType } from '../../dom/value-types/get-as-type.mjs';\nimport { numberValueTypes } from '../../dom/value-types/number.mjs';\n\nfunction buildHTMLStyles(state, latestValues, transformTemplate) {\n const { style, vars, transformOrigin } = state;\n // Track whether we encounter any transform or transformOrigin values.\n let hasTransform = false;\n let hasTransformOrigin = false;\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 separately for further processing.\n */\n for (const key in latestValues) {\n const value = latestValues[key];\n if (transformProps.has(key)) {\n // If this is a transform, flag to enable further transform processing\n hasTransform = true;\n continue;\n }\n else if (isCSSVariableName(key)) {\n vars[key] = value;\n continue;\n }\n else {\n // Convert the value to its default value type, ie 0 -> \"0px\"\n const valueAsType = getValueAsType(value, numberValueTypes[key]);\n if (key.startsWith(\"origin\")) {\n // If this is a transform origin, flag and enable further transform-origin processing\n hasTransformOrigin = true;\n transformOrigin[key] =\n valueAsType;\n }\n else {\n style[key] = valueAsType;\n }\n }\n }\n if (!latestValues.transform) {\n if (hasTransform || transformTemplate) {\n style.transform = buildTransform(latestValues, state.transform, transformTemplate);\n }\n else if (style.transform) {\n /**\n * If we have previously created a transform but currently don't have any,\n * reset transform style to none.\n */\n style.transform = \"none\";\n }\n }\n /**\n * Build a transformOrigin style. Uses the same defaults as the browser for\n * undefined origins.\n */\n if (hasTransformOrigin) {\n const { originX = \"50%\", originY = \"50%\", originZ = 0, } = transformOrigin;\n style.transformOrigin = `${originX} ${originY} ${originZ}`;\n }\n}\n\nexport { buildHTMLStyles };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nfunction calcOrigin(origin, offset, size) {\n return typeof origin === \"string\"\n ? origin\n : px.transform(offset + size * origin);\n}\n/**\n * The SVG transform origin defaults are different to CSS and is less intuitive,\n * so we use the measured dimensions of the SVG to reconcile these.\n */\nfunction calcSVGTransformOrigin(dimensions, originX, originY) {\n const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);\n const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);\n return `${pxOriginX} ${pxOriginY}`;\n}\n\nexport { calcSVGTransformOrigin };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nconst dashKeys = {\n offset: \"stroke-dashoffset\",\n array: \"stroke-dasharray\",\n};\nconst camelKeys = {\n offset: \"strokeDashoffset\",\n array: \"strokeDasharray\",\n};\n/**\n * Build SVG path properties. Uses the path's measured length to convert\n * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset\n * and stroke-dasharray attributes.\n *\n * This function is mutative to reduce per-frame GC.\n */\nfunction buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {\n // Normalise path length by setting SVG attribute pathLength to 1\n attrs.pathLength = 1;\n // We use dash case when setting attributes directly to the DOM node and camel case\n // when defining props on a React component.\n const keys = useDashCase ? dashKeys : camelKeys;\n // Build the dash offset\n attrs[keys.offset] = px.transform(-offset);\n // Build the dash array\n const pathLength = px.transform(length);\n const pathSpacing = px.transform(spacing);\n attrs[keys.array] = `${pathLength} ${pathSpacing}`;\n}\n\nexport { buildSVGPath };\n","import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';\nimport { calcSVGTransformOrigin } from './transform-origin.mjs';\nimport { buildSVGPath } from './path.mjs';\n\n/**\n * Build SVG visual attrbutes, like cx and style.transform\n */\nfunction buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, \n// This is object creation, which we try to avoid per-frame.\n...latest }, isSVGTag, transformTemplate) {\n buildHTMLStyles(state, latest, transformTemplate);\n /**\n * For svg tags we just want to make sure viewBox is animatable and treat all the styles\n * as normal HTML tags.\n */\n if (isSVGTag) {\n if (state.style.viewBox) {\n state.attrs.viewBox = state.style.viewBox;\n }\n return;\n }\n state.attrs = state.style;\n state.style = {};\n const { attrs, style, dimensions } = state;\n /**\n * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs\n * and copy it into style.\n */\n if (attrs.transform) {\n if (dimensions)\n style.transform = attrs.transform;\n delete attrs.transform;\n }\n // Parse transformOrigin\n if (dimensions &&\n (originX !== undefined || originY !== undefined || style.transform)) {\n style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);\n }\n // Render attrX/attrY/attrScale as attributes\n if (attrX !== undefined)\n attrs.x = attrX;\n if (attrY !== undefined)\n attrs.y = attrY;\n if (attrScale !== undefined)\n attrs.scale = attrScale;\n // Build SVG path if one has been defined\n if (pathLength !== undefined) {\n buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);\n }\n}\n\nexport { buildSVGAttrs };\n","const isSVGTag = (tag) => typeof tag === \"string\" && tag.toLowerCase() === \"svg\";\n\nexport { isSVGTag };\n","import { renderSVG } from './utils/render.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst svgMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createSvgRenderState,\n onMount: (props, instance, { renderState, latestValues }) => {\n frame.read(() => {\n try {\n renderState.dimensions =\n typeof instance.getBBox ===\n \"function\"\n ? instance.getBBox()\n : instance.getBoundingClientRect();\n }\n catch (e) {\n // Most likely trying to measure an unrendered element under Firefox\n renderState.dimensions = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n };\n }\n });\n frame.render(() => {\n buildSVGAttrs(renderState, latestValues, isSVGTag(instance.tagName), props.transformTemplate);\n renderSVG(instance, renderState);\n });\n },\n }),\n};\n\nexport { svgMotionConfig };\n","import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nconst htmlMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps,\n createRenderState: createHtmlRenderState,\n }),\n};\n\nexport { htmlMotionConfig };\n","import { useMemo } from 'react';\nimport { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\nimport { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nfunction copyRawValuesOnly(target, source, props) {\n for (const key in source) {\n if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {\n target[key] = source[key];\n }\n }\n}\nfunction useInitialMotionValues({ transformTemplate }, visualState) {\n return useMemo(() => {\n const state = createHtmlRenderState();\n buildHTMLStyles(state, visualState, transformTemplate);\n return Object.assign({}, state.vars, state.style);\n }, [visualState]);\n}\nfunction useStyle(props, visualState) {\n const styleProp = props.style || {};\n const style = {};\n /**\n * Copy non-Motion Values straight into style\n */\n copyRawValuesOnly(style, styleProp, props);\n Object.assign(style, useInitialMotionValues(props, visualState));\n return style;\n}\nfunction useHTMLProps(props, visualState) {\n // The `any` isn't ideal but it is the type of createElement props argument\n const htmlProps = {};\n const style = useStyle(props, visualState);\n if (props.drag && props.dragListener !== false) {\n // Disable the ghost element when a user drags\n htmlProps.draggable = false;\n // Disable text selection\n style.userSelect =\n style.WebkitUserSelect =\n style.WebkitTouchCallout =\n \"none\";\n // Disable scrolling on the draggable direction\n style.touchAction =\n props.drag === true\n ? \"none\"\n : `pan-${props.drag === \"x\" ? \"y\" : \"x\"}`;\n }\n if (props.tabIndex === undefined &&\n (props.onTap || props.onTapStart || props.whileTap)) {\n htmlProps.tabIndex = 0;\n }\n htmlProps.style = style;\n return htmlProps;\n}\n\nexport { copyRawValuesOnly, useHTMLProps };\n","/**\n * A list of all valid MotionProps.\n *\n * @privateRemarks\n * This doesn't throw if a `MotionProp` name is missing - it should.\n */\nconst validMotionProps = new Set([\n \"animate\",\n \"exit\",\n \"variants\",\n \"initial\",\n \"style\",\n \"values\",\n \"variants\",\n \"transition\",\n \"transformTemplate\",\n \"custom\",\n \"inherit\",\n \"onBeforeLayoutMeasure\",\n \"onAnimationStart\",\n \"onAnimationComplete\",\n \"onUpdate\",\n \"onDragStart\",\n \"onDrag\",\n \"onDragEnd\",\n \"onMeasureDragConstraints\",\n \"onDirectionLock\",\n \"onDragTransitionEnd\",\n \"_dragX\",\n \"_dragY\",\n \"onHoverStart\",\n \"onHoverEnd\",\n \"onViewportEnter\",\n \"onViewportLeave\",\n \"globalTapTarget\",\n \"ignoreStrict\",\n \"viewport\",\n]);\n/**\n * Check whether a prop name is a valid `MotionProp` key.\n *\n * @param key - Name of the property to check\n * @returns `true` is key is a valid `MotionProp`.\n *\n * @public\n */\nfunction isValidMotionProp(key) {\n return (key.startsWith(\"while\") ||\n (key.startsWith(\"drag\") && key !== \"draggable\") ||\n key.startsWith(\"layout\") ||\n key.startsWith(\"onTap\") ||\n key.startsWith(\"onPan\") ||\n key.startsWith(\"onLayout\") ||\n validMotionProps.has(key));\n}\n\nexport { isValidMotionProp };\n","import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';\n\nlet shouldForward = (key) => !isValidMotionProp(key);\nfunction loadExternalIsValidProp(isValidProp) {\n if (!isValidProp)\n return;\n // Explicitly filter our events\n shouldForward = (key) => key.startsWith(\"on\") ? !isValidMotionProp(key) : isValidProp(key);\n}\n/**\n * Emotion and Styled Components both allow users to pass through arbitrary props to their components\n * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which\n * of these should be passed to the underlying DOM node.\n *\n * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props\n * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props\n * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of\n * `@emotion/is-prop-valid`, however to fix this problem we need to use it.\n *\n * By making it an optionalDependency we can offer this functionality only in the situations where it's\n * actually required.\n */\ntry {\n /**\n * We attempt to import this package but require won't be defined in esm environments, in that case\n * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed\n * in favour of explicit injection.\n */\n loadExternalIsValidProp(require(\"@emotion/is-prop-valid\").default);\n}\ncatch (_a) {\n // We don't need to actually do anything here - the fallback is the existing `isPropValid`.\n}\nfunction filterProps(props, isDom, forwardMotionProps) {\n const filteredProps = {};\n for (const key in props) {\n /**\n * values is considered a valid prop by Emotion, so if it's present\n * this will be rendered out to the DOM unless explicitly filtered.\n *\n * We check the type as it could be used with the `feColorMatrix`\n * element, which we support.\n */\n if (key === \"values\" && typeof props.values === \"object\")\n continue;\n if (shouldForward(key) ||\n (forwardMotionProps === true && isValidMotionProp(key)) ||\n (!isDom && !isValidMotionProp(key)) ||\n // If trying to use native HTML drag events, forward drag listeners\n (props[\"draggable\"] &&\n key.startsWith(\"onDrag\"))) {\n filteredProps[key] =\n props[key];\n }\n }\n return filteredProps;\n}\n\nexport { filterProps, loadExternalIsValidProp };\n","import { useMemo } from 'react';\nimport { copyRawValuesOnly } from '../html/use-props.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nfunction useSVGProps(props, visualState, _isStatic, Component) {\n const visualProps = useMemo(() => {\n const state = createSvgRenderState();\n buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate);\n return {\n ...state.attrs,\n style: { ...state.style },\n };\n }, [visualState]);\n if (props.style) {\n const rawStyles = {};\n copyRawValuesOnly(rawStyles, props.style, props);\n visualProps.style = { ...rawStyles, ...visualProps.style };\n }\n return visualProps;\n}\n\nexport { useSVGProps };\n","import { Fragment, useMemo, createElement } from 'react';\nimport { useHTMLProps } from '../html/use-props.mjs';\nimport { filterProps } from './utils/filter-props.mjs';\nimport { isSVGComponent } from './utils/is-svg-component.mjs';\nimport { useSVGProps } from '../svg/use-props.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction createUseRender(forwardMotionProps = false) {\n const useRender = (Component, props, ref, { latestValues }, isStatic) => {\n const useVisualProps = isSVGComponent(Component)\n ? useSVGProps\n : useHTMLProps;\n const visualProps = useVisualProps(props, latestValues, isStatic, Component);\n const filteredProps = filterProps(props, typeof Component === \"string\", forwardMotionProps);\n const elementProps = Component !== Fragment\n ? { ...filteredProps, ...visualProps, ref }\n : {};\n /**\n * If component has been handed a motion value as its child,\n * memoise its initial value and render that. Subsequent updates\n * will be handled by the onChange handler\n */\n const { children } = props;\n const renderedChildren = useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);\n return createElement(Component, {\n ...elementProps,\n children: renderedChildren,\n });\n };\n return useRender;\n}\n\nexport { createUseRender };\n","import { createRendererMotionComponent } from '../../motion/index.mjs';\nimport { isSVGComponent } from '../dom/utils/is-svg-component.mjs';\nimport { svgMotionConfig } from '../svg/config-motion.mjs';\nimport { htmlMotionConfig } from '../html/config-motion.mjs';\nimport { createUseRender } from '../dom/use-render.mjs';\n\nfunction createMotionComponentFactory(preloadedFeatures, createVisualElement) {\n return function createMotionComponent(Component, { forwardMotionProps } = { forwardMotionProps: false }) {\n const baseConfig = isSVGComponent(Component)\n ? svgMotionConfig\n : htmlMotionConfig;\n const config = {\n ...baseConfig,\n preloadedFeatures,\n useRender: createUseRender(forwardMotionProps),\n createVisualElement,\n Component,\n };\n return createRendererMotionComponent(config);\n };\n}\n\nexport { createMotionComponentFactory };\n","// Does this device prefer reduced motion? Returns `null` server-side.\nconst prefersReducedMotion = { current: null };\nconst hasReducedMotionListener = { current: false };\n\nexport { hasReducedMotionListener, prefersReducedMotion };\n","const visualElementStore = new WeakMap();\n\nexport { visualElementStore };\n","import { color } from '../../../value/types/color/index.mjs';\nimport { complex } from '../../../value/types/complex/index.mjs';\nimport { dimensionValueTypes } from './dimensions.mjs';\nimport { testValueType } from './test.mjs';\n\n/**\n * A list of all ValueTypes\n */\nconst valueTypes = [...dimensionValueTypes, color, complex];\n/**\n * Tests a value against the list of ValueTypes\n */\nconst findValueType = (v) => valueTypes.find(testValueType(v));\n\nexport { findValueType };\n","import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';\nimport { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';\nimport { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { motionValue } from '../value/index.mjs';\nimport { isMotionValue } from '../value/utils/is-motion-value.mjs';\nimport { transformProps } from './html/utils/transform.mjs';\nimport { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';\nimport { updateMotionValuesFromProps } from './utils/motion-values.mjs';\nimport { resolveVariantFromProps } from './utils/resolve-variants.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\nimport { featureDefinitions } from '../motion/features/definitions.mjs';\nimport { visualElementStore } from './store.mjs';\nimport { KeyframeResolver } from './utils/KeyframesResolver.mjs';\nimport { isNumericalString } from '../utils/is-numerical-string.mjs';\nimport { isZeroValueString } from '../utils/is-zero-value-string.mjs';\nimport { findValueType } from './dom/value-types/find.mjs';\nimport { complex } from '../value/types/complex/index.mjs';\nimport { getAnimatableNone } from './dom/value-types/animatable-none.mjs';\nimport { createBox } from '../projection/geometry/models.mjs';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { frame, cancelFrame } from '../frameloop/frame.mjs';\n\nconst propEventHandlers = [\n \"AnimationStart\",\n \"AnimationComplete\",\n \"Update\",\n \"BeforeLayoutMeasure\",\n \"LayoutMeasure\",\n \"LayoutAnimationStart\",\n \"LayoutAnimationComplete\",\n];\n/**\n * A VisualElement is an imperative abstraction around UI elements such as\n * HTMLElement, SVGElement, Three.Object3D etc.\n */\nclass VisualElement {\n /**\n * This method takes React props and returns found MotionValues. For example, HTML\n * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.\n *\n * This isn't an abstract method as it needs calling in the constructor, but it is\n * intended to be one.\n */\n scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) {\n return {};\n }\n constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }, options = {}) {\n /**\n * A reference to the current underlying Instance, e.g. a HTMLElement\n * or Three.Mesh etc.\n */\n this.current = null;\n /**\n * A set containing references to this VisualElement's children.\n */\n this.children = new Set();\n /**\n * Determine what role this visual element should take in the variant tree.\n */\n this.isVariantNode = false;\n this.isControllingVariants = false;\n /**\n * Decides whether this VisualElement should animate in reduced motion\n * mode.\n *\n * TODO: This is currently set on every individual VisualElement but feels\n * like it could be set globally.\n */\n this.shouldReduceMotion = null;\n /**\n * A map of all motion values attached to this visual element. Motion\n * values are source of truth for any given animated value. A motion\n * value might be provided externally by the component via props.\n */\n this.values = new Map();\n this.KeyframeResolver = KeyframeResolver;\n /**\n * Cleanup functions for active features (hover/tap/exit etc)\n */\n this.features = {};\n /**\n * A map of every subscription that binds the provided or generated\n * motion values onChange listeners to this visual element.\n */\n this.valueSubscriptions = new Map();\n /**\n * A reference to the previously-provided motion values as returned\n * from scrapeMotionValuesFromProps. We use the keys in here to determine\n * if any motion values need to be removed after props are updated.\n */\n this.prevMotionValues = {};\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n /**\n * An object containing an unsubscribe function for each prop event subscription.\n * For example, every \"Update\" event can have multiple subscribers via\n * VisualElement.on(), but only one of those can be defined via the onUpdate prop.\n */\n this.propEventSubscriptions = {};\n this.notifyUpdate = () => this.notify(\"Update\", this.latestValues);\n this.render = () => {\n if (!this.current)\n return;\n this.triggerBuild();\n this.renderInstance(this.current, this.renderState, this.props.style, this.projection);\n };\n this.renderScheduledAt = 0.0;\n this.scheduleRender = () => {\n const now = time.now();\n if (this.renderScheduledAt < now) {\n this.renderScheduledAt = now;\n frame.render(this.render, false, true);\n }\n };\n const { latestValues, renderState } = visualState;\n this.latestValues = latestValues;\n this.baseTarget = { ...latestValues };\n this.initialValues = props.initial ? { ...latestValues } : {};\n this.renderState = renderState;\n this.parent = parent;\n this.props = props;\n this.presenceContext = presenceContext;\n this.depth = parent ? parent.depth + 1 : 0;\n this.reducedMotionConfig = reducedMotionConfig;\n this.options = options;\n this.blockInitialAnimation = Boolean(blockInitialAnimation);\n this.isControllingVariants = isControllingVariants(props);\n this.isVariantNode = isVariantNode(props);\n if (this.isVariantNode) {\n this.variantChildren = new Set();\n }\n this.manuallyAnimateOnMount = Boolean(parent && parent.current);\n /**\n * Any motion values that are provided to the element when created\n * aren't yet bound to the element, as this would technically be impure.\n * However, we iterate through the motion values and set them to the\n * initial values for this component.\n *\n * TODO: This is impure and we should look at changing this to run on mount.\n * Doing so will break some tests but this isn't necessarily a breaking change,\n * more a reflection of the test.\n */\n const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);\n for (const key in initialMotionValues) {\n const value = initialMotionValues[key];\n if (latestValues[key] !== undefined && isMotionValue(value)) {\n value.set(latestValues[key], false);\n }\n }\n }\n mount(instance) {\n this.current = instance;\n visualElementStore.set(instance, this);\n if (this.projection && !this.projection.instance) {\n this.projection.mount(instance);\n }\n if (this.parent && this.isVariantNode && !this.isControllingVariants) {\n this.removeFromVariantTree = this.parent.addVariantChild(this);\n }\n this.values.forEach((value, key) => this.bindToMotionValue(key, value));\n if (!hasReducedMotionListener.current) {\n initPrefersReducedMotion();\n }\n this.shouldReduceMotion =\n this.reducedMotionConfig === \"never\"\n ? false\n : this.reducedMotionConfig === \"always\"\n ? true\n : prefersReducedMotion.current;\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(this.shouldReduceMotion !== true, \"You have Reduced Motion enabled on your device. Animations may not appear as expected.\");\n }\n if (this.parent)\n this.parent.children.add(this);\n this.update(this.props, this.presenceContext);\n }\n unmount() {\n visualElementStore.delete(this.current);\n this.projection && this.projection.unmount();\n cancelFrame(this.notifyUpdate);\n cancelFrame(this.render);\n this.valueSubscriptions.forEach((remove) => remove());\n this.valueSubscriptions.clear();\n this.removeFromVariantTree && this.removeFromVariantTree();\n this.parent && this.parent.children.delete(this);\n for (const key in this.events) {\n this.events[key].clear();\n }\n for (const key in this.features) {\n const feature = this.features[key];\n if (feature) {\n feature.unmount();\n feature.isMounted = false;\n }\n }\n this.current = null;\n }\n bindToMotionValue(key, value) {\n if (this.valueSubscriptions.has(key)) {\n this.valueSubscriptions.get(key)();\n }\n const valueIsTransform = transformProps.has(key);\n const removeOnChange = value.on(\"change\", (latestValue) => {\n this.latestValues[key] = latestValue;\n this.props.onUpdate && frame.preRender(this.notifyUpdate);\n if (valueIsTransform && this.projection) {\n this.projection.isTransformDirty = true;\n }\n });\n const removeOnRenderRequest = value.on(\"renderRequest\", this.scheduleRender);\n let removeSyncCheck;\n if (window.MotionCheckAppearSync) {\n removeSyncCheck = window.MotionCheckAppearSync(this, key, value);\n }\n this.valueSubscriptions.set(key, () => {\n removeOnChange();\n removeOnRenderRequest();\n if (removeSyncCheck)\n removeSyncCheck();\n if (value.owner)\n value.stop();\n });\n }\n sortNodePosition(other) {\n /**\n * If these nodes aren't even of the same type we can't compare their depth.\n */\n if (!this.current ||\n !this.sortInstanceNodePosition ||\n this.type !== other.type) {\n return 0;\n }\n return this.sortInstanceNodePosition(this.current, other.current);\n }\n updateFeatures() {\n let key = \"animation\";\n for (key in featureDefinitions) {\n const featureDefinition = featureDefinitions[key];\n if (!featureDefinition)\n continue;\n const { isEnabled, Feature: FeatureConstructor } = featureDefinition;\n /**\n * If this feature is enabled but not active, make a new instance.\n */\n if (!this.features[key] &&\n FeatureConstructor &&\n isEnabled(this.props)) {\n this.features[key] = new FeatureConstructor(this);\n }\n /**\n * If we have a feature, mount or update it.\n */\n if (this.features[key]) {\n const feature = this.features[key];\n if (feature.isMounted) {\n feature.update();\n }\n else {\n feature.mount();\n feature.isMounted = true;\n }\n }\n }\n }\n triggerBuild() {\n this.build(this.renderState, this.latestValues, this.props);\n }\n /**\n * Measure the current viewport box with or without transforms.\n * Only measures axis-aligned boxes, rotate and skew must be manually\n * removed with a re-render to work.\n */\n measureViewportBox() {\n return this.current\n ? this.measureInstanceViewportBox(this.current, this.props)\n : createBox();\n }\n getStaticValue(key) {\n return this.latestValues[key];\n }\n setStaticValue(key, value) {\n this.latestValues[key] = value;\n }\n /**\n * Update the provided props. Ensure any newly-added motion values are\n * added to our map, old ones removed, and listeners updated.\n */\n update(props, presenceContext) {\n if (props.transformTemplate || this.props.transformTemplate) {\n this.scheduleRender();\n }\n this.prevProps = this.props;\n this.props = props;\n this.prevPresenceContext = this.presenceContext;\n this.presenceContext = presenceContext;\n /**\n * Update prop event handlers ie onAnimationStart, onAnimationComplete\n */\n for (let i = 0; i < propEventHandlers.length; i++) {\n const key = propEventHandlers[i];\n if (this.propEventSubscriptions[key]) {\n this.propEventSubscriptions[key]();\n delete this.propEventSubscriptions[key];\n }\n const listenerName = (\"on\" + key);\n const listener = props[listenerName];\n if (listener) {\n this.propEventSubscriptions[key] = this.on(key, listener);\n }\n }\n this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps, this), this.prevMotionValues);\n if (this.handleChildMotionValue) {\n this.handleChildMotionValue();\n }\n }\n getProps() {\n return this.props;\n }\n /**\n * Returns the variant definition with a given name.\n */\n getVariant(name) {\n return this.props.variants ? this.props.variants[name] : undefined;\n }\n /**\n * Returns the defined default transition on this component.\n */\n getDefaultTransition() {\n return this.props.transition;\n }\n getTransformPagePoint() {\n return this.props.transformPagePoint;\n }\n getClosestVariantNode() {\n return this.isVariantNode\n ? this\n : this.parent\n ? this.parent.getClosestVariantNode()\n : undefined;\n }\n /**\n * Add a child visual element to our set of children.\n */\n addVariantChild(child) {\n const closestVariantNode = this.getClosestVariantNode();\n if (closestVariantNode) {\n closestVariantNode.variantChildren &&\n closestVariantNode.variantChildren.add(child);\n return () => closestVariantNode.variantChildren.delete(child);\n }\n }\n /**\n * Add a motion value and bind it to this visual element.\n */\n addValue(key, value) {\n // Remove existing value if it exists\n const existingValue = this.values.get(key);\n if (value !== existingValue) {\n if (existingValue)\n this.removeValue(key);\n this.bindToMotionValue(key, value);\n this.values.set(key, value);\n this.latestValues[key] = value.get();\n }\n }\n /**\n * Remove a motion value and unbind any active subscriptions.\n */\n removeValue(key) {\n this.values.delete(key);\n const unsubscribe = this.valueSubscriptions.get(key);\n if (unsubscribe) {\n unsubscribe();\n this.valueSubscriptions.delete(key);\n }\n delete this.latestValues[key];\n this.removeValueFromRenderState(key, this.renderState);\n }\n /**\n * Check whether we have a motion value for this key\n */\n hasValue(key) {\n return this.values.has(key);\n }\n getValue(key, defaultValue) {\n if (this.props.values && this.props.values[key]) {\n return this.props.values[key];\n }\n let value = this.values.get(key);\n if (value === undefined && defaultValue !== undefined) {\n value = motionValue(defaultValue === null ? undefined : defaultValue, { owner: this });\n this.addValue(key, value);\n }\n return value;\n }\n /**\n * If we're trying to animate to a previously unencountered value,\n * we need to check for it in our state and as a last resort read it\n * directly from the instance (which might have performance implications).\n */\n readValue(key, target) {\n var _a;\n let value = this.latestValues[key] !== undefined || !this.current\n ? this.latestValues[key]\n : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);\n if (value !== undefined && value !== null) {\n if (typeof value === \"string\" &&\n (isNumericalString(value) || isZeroValueString(value))) {\n // If this is a number read as a string, ie \"0\" or \"200\", convert it to a number\n value = parseFloat(value);\n }\n else if (!findValueType(value) && complex.test(target)) {\n value = getAnimatableNone(key, target);\n }\n this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);\n }\n return isMotionValue(value) ? value.get() : value;\n }\n /**\n * Set the base target to later animate back to. This is currently\n * only hydrated on creation and when we first read a value.\n */\n setBaseTarget(key, value) {\n this.baseTarget[key] = value;\n }\n /**\n * Find the base target for a value thats been removed from all animation\n * props.\n */\n getBaseTarget(key) {\n var _a;\n const { initial } = this.props;\n let valueFromInitial;\n if (typeof initial === \"string\" || typeof initial === \"object\") {\n const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);\n if (variant) {\n valueFromInitial = variant[key];\n }\n }\n /**\n * If this value still exists in the current initial variant, read that.\n */\n if (initial && valueFromInitial !== undefined) {\n return valueFromInitial;\n }\n /**\n * Alternatively, if this VisualElement config has defined a getBaseTarget\n * so we can read the value from an alternative source, try that.\n */\n const target = this.getBaseTargetFromProps(this.props, key);\n if (target !== undefined && !isMotionValue(target))\n return target;\n /**\n * If the value was initially defined on initial, but it doesn't any more,\n * return undefined. Otherwise return the value as initially read from the DOM.\n */\n return this.initialValues[key] !== undefined &&\n valueFromInitial === undefined\n ? undefined\n : this.baseTarget[key];\n }\n on(eventName, callback) {\n if (!this.events[eventName]) {\n this.events[eventName] = new SubscriptionManager();\n }\n return this.events[eventName].add(callback);\n }\n notify(eventName, ...args) {\n if (this.events[eventName]) {\n this.events[eventName].notify(...args);\n }\n }\n}\n\nexport { VisualElement };\n","import { isBrowser } from '../is-browser.mjs';\nimport { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';\n\nfunction initPrefersReducedMotion() {\n hasReducedMotionListener.current = true;\n if (!isBrowser)\n return;\n if (window.matchMedia) {\n const motionMediaQuery = window.matchMedia(\"(prefers-reduced-motion)\");\n const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);\n motionMediaQuery.addListener(setReducedMotionPreferences);\n setReducedMotionPreferences();\n }\n else {\n prefersReducedMotion.current = false;\n }\n}\n\nexport { initPrefersReducedMotion };\n","import { warnOnce } from '../../utils/warn-once.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction updateMotionValuesFromProps(element, next, prev) {\n for (const key in next) {\n const nextValue = next[key];\n const prevValue = prev[key];\n if (isMotionValue(nextValue)) {\n /**\n * If this is a motion value found in props or style, we want to add it\n * to our visual element's motion value map.\n */\n element.addValue(key, nextValue);\n /**\n * Check the version of the incoming motion value with this version\n * and warn against mismatches.\n */\n if (process.env.NODE_ENV === \"development\") {\n warnOnce(nextValue.version === \"11.11.13\", `Attempting to mix Motion versions ${nextValue.version} with 11.11.13 may not work as expected.`);\n }\n }\n else if (isMotionValue(prevValue)) {\n /**\n * If we're swapping from a motion value to a static value,\n * create a new motion value from that\n */\n element.addValue(key, motionValue(nextValue, { owner: element }));\n }\n else if (prevValue !== nextValue) {\n /**\n * If this is a flat value that has changed, update the motion value\n * or create one if it doesn't exist. We only want to do this if we're\n * not handling the value with our animation state.\n */\n if (element.hasValue(key)) {\n const existingValue = element.getValue(key);\n if (existingValue.liveStyle === true) {\n existingValue.jump(nextValue);\n }\n else if (!existingValue.hasAnimated) {\n existingValue.set(nextValue);\n }\n }\n else {\n const latestValue = element.getStaticValue(key);\n element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));\n }\n }\n }\n // Handle removed values\n for (const key in prev) {\n if (next[key] === undefined)\n element.removeValue(key);\n }\n return next;\n}\n\nexport { updateMotionValuesFromProps };\n","import { VisualElement } from '../VisualElement.mjs';\nimport { DOMKeyframesResolver } from './DOMKeyframesResolver.mjs';\n\nclass DOMVisualElement extends VisualElement {\n constructor() {\n super(...arguments);\n this.KeyframeResolver = DOMKeyframesResolver;\n }\n sortInstanceNodePosition(a, b) {\n /**\n * compareDocumentPosition returns a bitmask, by using the bitwise &\n * we're returning true if 2 in that bitmask is set to true. 2 is set\n * to true if b preceeds a.\n */\n return a.compareDocumentPosition(b) & 2 ? 1 : -1;\n }\n getBaseTargetFromProps(props, key) {\n return props.style\n ? props.style[key]\n : undefined;\n }\n removeValueFromRenderState(key, { vars, style }) {\n delete vars[key];\n delete style[key];\n }\n}\n\nexport { DOMVisualElement };\n","import { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';\nimport { transformProps } from './utils/transform.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { renderHTML } from './utils/render.mjs';\nimport { getDefaultValueType } from '../dom/value-types/defaults.mjs';\nimport { measureViewportBox } from '../../projection/utils/measure.mjs';\nimport { DOMVisualElement } from '../dom/DOMVisualElement.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction getComputedStyle(element) {\n return window.getComputedStyle(element);\n}\nclass HTMLVisualElement extends DOMVisualElement {\n constructor() {\n super(...arguments);\n this.type = \"html\";\n this.renderInstance = renderHTML;\n }\n readValueFromInstance(instance, key) {\n if (transformProps.has(key)) {\n const defaultType = getDefaultValueType(key);\n return defaultType ? defaultType.default || 0 : 0;\n }\n else {\n const computedStyle = getComputedStyle(instance);\n const value = (isCSSVariableName(key)\n ? computedStyle.getPropertyValue(key)\n : computedStyle[key]) || 0;\n return typeof value === \"string\" ? value.trim() : value;\n }\n }\n measureInstanceViewportBox(instance, { transformPagePoint }) {\n return measureViewportBox(instance, transformPagePoint);\n }\n build(renderState, latestValues, props) {\n buildHTMLStyles(renderState, latestValues, props.transformTemplate);\n }\n scrapeMotionValuesFromProps(props, prevProps, visualElement) {\n return scrapeMotionValuesFromProps(props, prevProps, visualElement);\n }\n handleChildMotionValue() {\n if (this.childSubscription) {\n this.childSubscription();\n delete this.childSubscription;\n }\n const { children } = this.props;\n if (isMotionValue(children)) {\n this.childSubscription = children.on(\"change\", (latest) => {\n if (this.current)\n this.current.textContent = `${latest}`;\n });\n }\n }\n}\n\nexport { HTMLVisualElement, getComputedStyle };\n","import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { DOMVisualElement } from '../dom/DOMVisualElement.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { camelToDash } from '../dom/utils/camel-to-dash.mjs';\nimport { camelCaseAttributes } from './utils/camel-case-attrs.mjs';\nimport { transformProps } from '../html/utils/transform.mjs';\nimport { renderSVG } from './utils/render.mjs';\nimport { getDefaultValueType } from '../dom/value-types/defaults.mjs';\nimport { createBox } from '../../projection/geometry/models.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nclass SVGVisualElement extends DOMVisualElement {\n constructor() {\n super(...arguments);\n this.type = \"svg\";\n this.isSVGTag = false;\n this.measureInstanceViewportBox = createBox;\n }\n getBaseTargetFromProps(props, key) {\n return props[key];\n }\n readValueFromInstance(instance, key) {\n if (transformProps.has(key)) {\n const defaultType = getDefaultValueType(key);\n return defaultType ? defaultType.default || 0 : 0;\n }\n key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;\n return instance.getAttribute(key);\n }\n scrapeMotionValuesFromProps(props, prevProps, visualElement) {\n return scrapeMotionValuesFromProps(props, prevProps, visualElement);\n }\n build(renderState, latestValues, props) {\n buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);\n }\n renderInstance(instance, renderState, styleProp, projection) {\n renderSVG(instance, renderState, styleProp, projection);\n }\n mount(instance) {\n this.isSVGTag = isSVGTag(instance.tagName);\n super.mount(instance);\n }\n}\n\nexport { SVGVisualElement };\n","import { Fragment } from 'react';\nimport { HTMLVisualElement } from '../html/HTMLVisualElement.mjs';\nimport { SVGVisualElement } from '../svg/SVGVisualElement.mjs';\nimport { isSVGComponent } from './utils/is-svg-component.mjs';\n\nconst createDomVisualElement = (Component, options) => {\n return isSVGComponent(Component)\n ? new SVGVisualElement(options)\n : new HTMLVisualElement(options, {\n allowProjection: Component !== Fragment,\n });\n};\n\nexport { createDomVisualElement };\n","import { createDOMMotionComponentProxy } from '../create-proxy.mjs';\nimport { createMotionComponent } from './create.mjs';\n\nconst motion = /*@__PURE__*/ createDOMMotionComponentProxy(createMotionComponent);\n\nexport { motion };\n","import { animations } from '../../../motion/features/animations.mjs';\nimport { drag } from '../../../motion/features/drag.mjs';\nimport { gestureAnimations } from '../../../motion/features/gestures.mjs';\nimport { layout } from '../../../motion/features/layout.mjs';\nimport { createMotionComponentFactory } from '../create-factory.mjs';\nimport { createDomVisualElement } from '../../dom/create-visual-element.mjs';\n\nconst createMotionComponent = /*@__PURE__*/ createMotionComponentFactory({\n ...animations,\n ...gestureAnimations,\n ...drag,\n ...layout,\n}, createDomVisualElement);\n\nexport { createMotionComponent };\n","'use client';\nconst findById = (arr, id) => arr.find((toast) => toast.id === id);\nfunction findToast(toasts, id) {\n const position = getToastPosition(toasts, id);\n const index = position ? toasts[position].findIndex((toast) => toast.id === id) : -1;\n return {\n position,\n index\n };\n}\nfunction getToastPosition(toasts, id) {\n for (const [position, values] of Object.entries(toasts)) {\n if (findById(values, id)) {\n return position;\n }\n }\n}\nconst isVisible = (toasts, id) => !!getToastPosition(toasts, id);\nfunction getToastStyle(position) {\n const isRighty = position.includes(\"right\");\n const isLefty = position.includes(\"left\");\n let alignItems = \"center\";\n if (isRighty)\n alignItems = \"flex-end\";\n if (isLefty)\n alignItems = \"flex-start\";\n return {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems\n };\n}\nfunction getToastListStyle(position) {\n const isTopOrBottom = position === \"top\" || position === \"bottom\";\n const margin = isTopOrBottom ? \"0 auto\" : void 0;\n const top = position.includes(\"top\") ? \"env(safe-area-inset-top, 0px)\" : void 0;\n const bottom = position.includes(\"bottom\") ? \"env(safe-area-inset-bottom, 0px)\" : void 0;\n const right = !position.includes(\"left\") ? \"env(safe-area-inset-right, 0px)\" : void 0;\n const left = !position.includes(\"right\") ? \"env(safe-area-inset-left, 0px)\" : void 0;\n return {\n position: \"fixed\",\n zIndex: \"var(--toast-z-index, 5500)\",\n pointerEvents: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n margin,\n top,\n bottom,\n right,\n left\n };\n}\n\nexport { findById, findToast, getToastListStyle, getToastPosition, getToastStyle, isVisible };\n","function compact(object) {\n const clone = Object.assign({}, object);\n for (let key in clone) {\n if (clone[key] === void 0)\n delete clone[key];\n }\n return clone;\n}\n\nexport { compact };\n","import memoize from '@emotion/memoize';\n\n// eslint-disable-next-line no-undef\nvar reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar isPropValid = /* #__PURE__ */memoize(function (prop) {\n return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111\n /* o */\n && prop.charCodeAt(1) === 110\n /* n */\n && prop.charCodeAt(2) < 91;\n}\n/* Z+1 */\n);\n\nexport { isPropValid as default };\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport * as React from 'react';\nimport isPropValid from '@emotion/is-prop-valid';\nimport { withEmotionCache, ThemeContext } from '@emotion/react';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\n/* import type {\n ElementType,\n StatelessFunctionalComponent,\n AbstractComponent\n} from 'react' */\n/*\nexport type Interpolations = Array\n\nexport type StyledElementType =\n | string\n | AbstractComponent<{ ...Props, className: string }, mixed>\n\nexport type StyledOptions = {\n label?: string,\n shouldForwardProp?: string => boolean,\n target?: string\n}\n\nexport type StyledComponent = StatelessFunctionalComponent & {\n defaultProps: any,\n toString: () => string,\n withComponent: (\n nextTag: StyledElementType,\n nextOptions?: StyledOptions\n ) => StyledComponent\n}\n\nexport type PrivateStyledComponent = StyledComponent & {\n __emotion_real: StyledComponent,\n __emotion_base: any,\n __emotion_styles: any,\n __emotion_forwardProp: any\n}\n*/\n\nvar testOmitPropsOnStringTag = isPropValid;\n\nvar testOmitPropsOnComponent = function testOmitPropsOnComponent(key\n/*: string */\n) {\n return key !== 'theme';\n};\n\nvar getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag\n/*: ElementType */\n) {\n return typeof tag === 'string' && // 96 is one less than the char code\n // for \"a\" so this is checking that\n // it's a lowercase character\n tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;\n};\nvar composeShouldForwardProps = function composeShouldForwardProps(tag\n/*: PrivateStyledComponent */\n, options\n/*: StyledOptions | void */\n, isReal\n/*: boolean */\n) {\n var shouldForwardProp;\n\n if (options) {\n var optionsShouldForwardProp = options.shouldForwardProp;\n shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName\n /*: string */\n ) {\n return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);\n } : optionsShouldForwardProp;\n }\n\n if (typeof shouldForwardProp !== 'function' && isReal) {\n shouldForwardProp = tag.__emotion_forwardProp;\n }\n\n return shouldForwardProp;\n};\n/*\nexport type CreateStyledComponent = (\n ...args: Interpolations\n) => StyledComponent\n\nexport type CreateStyled = {\n (\n tag: StyledElementType,\n options?: StyledOptions\n ): (...args: Interpolations) => StyledComponent,\n [key: string]: CreateStyledComponent,\n bind: () => CreateStyled\n}\n*/\n\nvar isDevelopment = false;\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar createStyled\n/*: CreateStyled */\n= function createStyled\n/*: CreateStyled */\n(tag\n/*: any */\n, options\n/* ?: StyledOptions */\n) {\n\n var isReal = tag.__emotion_real === tag;\n var baseTag = isReal && tag.__emotion_base || tag;\n var identifierName;\n var targetClassName;\n\n if (options !== undefined) {\n identifierName = options.label;\n targetClassName = options.target;\n }\n\n var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);\n var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);\n var shouldUseAs = !defaultShouldForwardProp('as');\n /* return function(): PrivateStyledComponent { */\n\n return function () {\n var args = arguments;\n var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];\n\n if (identifierName !== undefined) {\n styles.push(\"label:\" + identifierName + \";\");\n }\n\n if (args[0] == null || args[0].raw === undefined) {\n styles.push.apply(styles, args);\n } else {\n\n styles.push(args[0][0]);\n var len = args.length;\n var i = 1;\n\n for (; i < len; i++) {\n\n styles.push(args[i], args[0][i]);\n }\n }\n\n var Styled\n /*: PrivateStyledComponent */\n = withEmotionCache(function (props, cache, ref) {\n var FinalTag = shouldUseAs && props.as || baseTag;\n var className = '';\n var classInterpolations = [];\n var mergedProps = props;\n\n if (props.theme == null) {\n mergedProps = {};\n\n for (var key in props) {\n mergedProps[key] = props[key];\n }\n\n mergedProps.theme = React.useContext(ThemeContext);\n }\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, classInterpolations, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);\n className += cache.key + \"-\" + serialized.name;\n\n if (targetClassName !== undefined) {\n className += \" \" + targetClassName;\n }\n\n var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;\n var newProps = {};\n\n for (var _key in props) {\n if (shouldUseAs && _key === 'as') continue;\n\n if (finalShouldForwardProp(_key)) {\n newProps[_key] = props[_key];\n }\n }\n\n newProps.className = className;\n\n if (ref) {\n newProps.ref = ref;\n }\n\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof FinalTag === 'string'\n }), /*#__PURE__*/React.createElement(FinalTag, newProps));\n });\n Styled.displayName = identifierName !== undefined ? identifierName : \"Styled(\" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + \")\";\n Styled.defaultProps = tag.defaultProps;\n Styled.__emotion_real = Styled;\n Styled.__emotion_base = baseTag;\n Styled.__emotion_styles = styles;\n Styled.__emotion_forwardProp = shouldForwardProp;\n Object.defineProperty(Styled, 'toString', {\n value: function value() {\n if (targetClassName === undefined && isDevelopment) {\n return 'NO_COMPONENT_SELECTOR';\n }\n\n return \".\" + targetClassName;\n }\n });\n\n Styled.withComponent = function (nextTag\n /*: StyledElementType */\n , nextOptions\n /* ?: StyledOptions */\n ) {\n return createStyled(nextTag, _extends({}, options, nextOptions, {\n shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)\n })).apply(void 0, styles);\n };\n\n return Styled;\n };\n};\n\nexport { createStyled as default };\n","import createStyled from '../base/dist/emotion-styled-base.browser.esm.js';\nimport '@babel/runtime/helpers/extends';\nimport 'react';\nimport '@emotion/is-prop-valid';\nimport '@emotion/react';\nimport '@emotion/utils';\nimport '@emotion/serialize';\nimport '@emotion/use-insertion-effect-with-fallbacks';\n\nvar tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG\n'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];\n\nvar newStyled = createStyled.bind();\ntags.forEach(function (tagName) {\n newStyled[tagName] = newStyled(tagName);\n});\n\nexport { newStyled as default };\n","'use client';\nimport { propNames } from '@chakra-ui/styled-system';\n\nconst allPropNames = /* @__PURE__ */ new Set([\n ...propNames,\n \"textStyle\",\n \"layerStyle\",\n \"apply\",\n \"noOfLines\",\n \"focusBorderColor\",\n \"errorBorderColor\",\n \"as\",\n \"__css\",\n \"css\",\n \"sx\"\n]);\nconst validHTMLProps = /* @__PURE__ */ new Set([\n \"htmlWidth\",\n \"htmlHeight\",\n \"htmlSize\",\n \"htmlTranslate\"\n]);\nfunction shouldForwardProp(prop) {\n return (validHTMLProps.has(prop) || !allPropNames.has(prop)) && prop[0] !== \"_\";\n}\n\nexport { shouldForwardProp };\n","'use client';\nimport { isStyleProp, css } from '@chakra-ui/styled-system';\nimport { interopDefault, splitProps, runIfFn, assignAfter, compact } from '@chakra-ui/utils';\nimport createStyled from '@emotion/styled';\nimport { forwardRef, createElement } from 'react';\nimport { shouldForwardProp } from './should-forward-prop.mjs';\nimport { useColorMode } from '../color-mode/color-mode-context.mjs';\n\nconst emotion_styled = interopDefault(createStyled);\nconst toCSSObject = ({ baseStyle }) => (props) => {\n const { theme, css: cssProp, __css, sx, ...restProps } = props;\n const [styleProps] = splitProps(restProps, isStyleProp);\n const finalBaseStyle = runIfFn(baseStyle, props);\n const finalStyles = assignAfter(\n {},\n __css,\n finalBaseStyle,\n compact(styleProps),\n sx\n );\n const computedCSS = css(finalStyles)(props.theme);\n return cssProp ? [computedCSS, cssProp] : computedCSS;\n};\nfunction styled(component, options) {\n const { baseStyle, ...styledOptions } = options ?? {};\n if (!styledOptions.shouldForwardProp) {\n styledOptions.shouldForwardProp = shouldForwardProp;\n }\n const styleObject = toCSSObject({ baseStyle });\n const Component = emotion_styled(\n component,\n styledOptions\n )(styleObject);\n const chakraComponent = forwardRef(\n function ChakraComponent2(props, ref) {\n const { children, ...restProps } = props;\n const { colorMode, forced } = useColorMode();\n const dataTheme = forced ? colorMode : void 0;\n return createElement(\n Component,\n { ref, \"data-theme\": dataTheme, ...restProps },\n children\n );\n }\n );\n return chakraComponent;\n}\n\nexport { styled, toCSSObject };\n","const interopDefault = (mod) => mod.default || mod;\n\nexport { interopDefault };\n","function splitProps(props, ...keys) {\n const descriptors = Object.getOwnPropertyDescriptors(props);\n const dKeys = Object.keys(descriptors);\n const split = (k) => {\n const clone = {};\n for (let i = 0; i < k.length; i++) {\n const key = k[i];\n if (descriptors[key]) {\n Object.defineProperty(clone, key, descriptors[key]);\n delete descriptors[key];\n }\n }\n return clone;\n };\n const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));\n return keys.map(fn).concat(split(dKeys));\n}\n\nexport { splitProps };\n","function assignAfter(target, ...sources) {\n if (target == null) {\n throw new TypeError(\"Cannot convert undefined or null to object\");\n }\n const result = { ...target };\n for (const nextSource of sources) {\n if (nextSource == null)\n continue;\n for (const nextKey in nextSource) {\n if (!Object.prototype.hasOwnProperty.call(nextSource, nextKey))\n continue;\n if (nextKey in result)\n delete result[nextKey];\n result[nextKey] = nextSource[nextKey];\n }\n }\n return result;\n}\n\nexport { assignAfter };\n","'use client';\nimport { styled } from './system.mjs';\n\nfunction factory() {\n const cache = /* @__PURE__ */ new Map();\n return new Proxy(styled, {\n /**\n * @example\n * const Div = chakra(\"div\")\n * const WithChakra = chakra(AnotherComponent)\n */\n apply(target, thisArg, argArray) {\n return styled(...argArray);\n },\n /**\n * @example\n * \n */\n get(_, element) {\n if (!cache.has(element)) {\n cache.set(element, styled(element));\n }\n return cache.get(element);\n }\n });\n}\nconst chakra = factory();\n\nexport { chakra };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { useUpdateEffect, useTimeout } from '@chakra-ui/hooks';\nimport { runIfFn } from '@chakra-ui/utils';\nimport { useIsPresent, motion } from 'framer-motion';\nimport { memo, useState, useEffect, useMemo } from 'react';\nimport { getToastStyle } from './toast.utils.mjs';\nimport { chakra } from '../system/factory.mjs';\n\nconst toastMotionVariants = {\n initial: (props) => {\n const { position } = props;\n const dir = [\"top\", \"bottom\"].includes(position) ? \"y\" : \"x\";\n let factor = [\"top-right\", \"bottom-right\"].includes(position) ? 1 : -1;\n if (position === \"bottom\")\n factor = 1;\n return {\n opacity: 0,\n [dir]: factor * 24\n };\n },\n animate: {\n opacity: 1,\n y: 0,\n x: 0,\n scale: 1,\n transition: {\n duration: 0.4,\n ease: [0.4, 0, 0.2, 1]\n }\n },\n exit: {\n opacity: 0,\n scale: 0.85,\n transition: {\n duration: 0.2,\n ease: [0.4, 0, 1, 1]\n }\n }\n};\nconst ToastComponent = memo((props) => {\n const {\n id,\n message,\n onCloseComplete,\n onRequestRemove,\n requestClose = false,\n position = \"bottom\",\n duration = 5e3,\n containerStyle,\n motionVariants = toastMotionVariants,\n toastSpacing = \"0.5rem\"\n } = props;\n const [delay, setDelay] = useState(duration);\n const isPresent = useIsPresent();\n useUpdateEffect(() => {\n if (!isPresent) {\n onCloseComplete?.();\n }\n }, [isPresent]);\n useUpdateEffect(() => {\n setDelay(duration);\n }, [duration]);\n const onMouseEnter = () => setDelay(null);\n const onMouseLeave = () => setDelay(duration);\n const close = () => {\n if (isPresent)\n onRequestRemove();\n };\n useEffect(() => {\n if (isPresent && requestClose) {\n onRequestRemove();\n }\n }, [isPresent, requestClose, onRequestRemove]);\n useTimeout(close, delay);\n const containerStyles = useMemo(\n () => ({\n pointerEvents: \"auto\",\n maxWidth: 560,\n minWidth: 300,\n margin: toastSpacing,\n ...containerStyle\n }),\n [containerStyle, toastSpacing]\n );\n const toastStyle = useMemo(() => getToastStyle(position), [position]);\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n layout: true,\n className: \"chakra-toast\",\n variants: motionVariants,\n initial: \"initial\",\n animate: \"animate\",\n exit: \"exit\",\n onHoverStart: onMouseEnter,\n onHoverEnd: onMouseLeave,\n custom: { position },\n style: toastStyle,\n children: /* @__PURE__ */ jsx(\n chakra.div,\n {\n role: \"status\",\n \"aria-atomic\": \"true\",\n className: \"chakra-toast__inner\",\n __css: containerStyles,\n children: runIfFn(message, { id, onClose: close })\n }\n )\n }\n );\n});\nToastComponent.displayName = \"ToastComponent\";\n\nexport { ToastComponent };\n","'use client';\nimport { useEffect } from 'react';\nimport { useCallbackRef } from './use-callback-ref.mjs';\n\nfunction useTimeout(callback, delay) {\n const fn = useCallbackRef(callback);\n useEffect(() => {\n if (delay == null)\n return void 0;\n let timeoutId = null;\n timeoutId = window.setTimeout(() => {\n fn();\n }, delay);\n return () => {\n if (timeoutId) {\n window.clearTimeout(timeoutId);\n }\n };\n }, [delay, fn]);\n}\n\nexport { useTimeout };\n","function omit(object, keysToOmit = []) {\n const clone = Object.assign({}, object);\n for (const key of keysToOmit) {\n if (key in clone) {\n delete clone[key];\n }\n }\n return clone;\n}\n\nexport { omit };\n","import { omit } from '@chakra-ui/utils';\n\nfunction omitThemingProps(props) {\n return omit(props, [\"styleConfig\", \"size\", \"variant\", \"colorScheme\"]);\n}\n\nexport { omitThemingProps };\n","const cx = (...classNames) => classNames.filter(Boolean).join(\" \");\n\nexport { cx };\n","'use client';\nimport { forwardRef as forwardRef$1 } from 'react';\n\nfunction forwardRef(component) {\n return forwardRef$1(component);\n}\n\nexport { forwardRef };\n","import { mergeWith, runIfFn, toMediaQueryString, isObject } from '@chakra-ui/utils';\n\nfunction normalize(value, toArray) {\n if (Array.isArray(value))\n return value;\n if (isObject(value))\n return toArray(value);\n if (value != null)\n return [value];\n}\nfunction getNextIndex(values, i) {\n for (let j = i + 1; j < values.length; j++) {\n if (values[j] != null)\n return j;\n }\n return -1;\n}\nfunction createResolver(theme) {\n const breakpointUtil = theme.__breakpoints;\n return function resolver(config, prop, value, props) {\n if (!breakpointUtil)\n return;\n const result = {};\n const normalized = normalize(value, breakpointUtil.toArrayValue);\n if (!normalized)\n return result;\n const len = normalized.length;\n const isSingle = len === 1;\n const isMultipart = !!config.parts;\n for (let i = 0; i < len; i++) {\n const key = breakpointUtil.details[i];\n const nextKey = breakpointUtil.details[getNextIndex(normalized, i)];\n const query = toMediaQueryString(key.minW, nextKey?._minW);\n const styles = runIfFn(config[prop]?.[normalized[i]], props);\n if (!styles)\n continue;\n if (isMultipart) {\n config.parts?.forEach((part) => {\n mergeWith(result, {\n [part]: isSingle ? styles[part] : { [query]: styles[part] }\n });\n });\n continue;\n }\n if (!isMultipart) {\n if (isSingle)\n mergeWith(result, styles);\n else\n result[query] = styles;\n continue;\n }\n result[query] = styles;\n }\n return result;\n };\n}\nfunction resolveStyleConfig(config) {\n return (props) => {\n const { variant, size, theme } = props;\n const recipe = createResolver(theme);\n return mergeWith(\n {},\n runIfFn(config.baseStyle ?? {}, props),\n recipe(config, \"sizes\", size, props),\n recipe(config, \"variants\", variant, props)\n );\n };\n}\n\nexport { resolveStyleConfig };\n","'use client';\nimport { ThemeContext } from '@emotion/react';\nimport { useContext } from 'react';\n\nfunction useTheme() {\n const theme = useContext(\n ThemeContext\n );\n if (!theme) {\n throw Error(\n \"useTheme: `theme` is undefined. Seems you forgot to wrap your app in `` or ``\"\n );\n }\n return theme;\n}\n\nexport { useTheme };\n","'use client';\nimport { resolveStyleConfig } from '@chakra-ui/styled-system';\nimport { memoizedGet, mergeWith, compact, omit } from '@chakra-ui/utils';\nimport { useRef } from 'react';\nimport isEqual from 'react-fast-compare';\nimport { useChakra } from './hooks.mjs';\n\nfunction useStyleConfigImpl(themeKey, props = {}) {\n const { styleConfig: styleConfigProp, ...rest } = props;\n const { theme, colorMode } = useChakra();\n const themeStyleConfig = themeKey ? memoizedGet(theme, `components.${themeKey}`) : void 0;\n const styleConfig = styleConfigProp || themeStyleConfig;\n const mergedProps = mergeWith(\n { theme, colorMode },\n styleConfig?.defaultProps ?? {},\n compact(omit(rest, [\"children\"])),\n (obj, src) => !obj ? src : void 0\n );\n const stylesRef = useRef({});\n if (styleConfig) {\n const getStyles = resolveStyleConfig(styleConfig);\n const styles = getStyles(mergedProps);\n const isStyleEqual = isEqual(stylesRef.current, styles);\n if (!isStyleEqual) {\n stylesRef.current = styles;\n }\n }\n return stylesRef.current;\n}\nfunction useStyleConfig(themeKey, props = {}) {\n return useStyleConfigImpl(themeKey, props);\n}\nfunction useMultiStyleConfig(themeKey, props = {}) {\n return useStyleConfigImpl(themeKey, props);\n}\n\nexport { useMultiStyleConfig, useStyleConfig };\n","'use client';\nimport { useTheme } from './use-theme.mjs';\nimport { useColorMode } from '../color-mode/color-mode-context.mjs';\n\nfunction useChakra() {\n const colorModeResult = useColorMode();\n const theme = useTheme();\n return { ...colorModeResult, theme };\n}\nfunction getBreakpointValue(theme, value, fallback) {\n if (value == null)\n return value;\n const getValue = (val) => theme.__breakpoints?.asArray?.[val];\n return getValue(value) ?? getValue(fallback) ?? fallback;\n}\nfunction getTokenValue(theme, value, fallback) {\n if (value == null)\n return value;\n const getValue = (val) => theme.__cssMap?.[val]?.value;\n return getValue(value) ?? getValue(fallback) ?? fallback;\n}\nfunction useToken(scale, token, fallback) {\n const theme = useTheme();\n return getToken(scale, token, fallback)(theme);\n}\nfunction getToken(scale, token, fallback) {\n const _token = Array.isArray(token) ? token : [token];\n const _fallback = Array.isArray(fallback) ? fallback : [fallback];\n return (theme) => {\n const fallbackArr = _fallback.filter(Boolean);\n const result = _token.map((token2, index) => {\n if (scale === \"breakpoints\") {\n return getBreakpointValue(theme, token2, fallbackArr[index] ?? token2);\n }\n const path = `${scale}.${token2}`;\n return getTokenValue(theme, path, fallbackArr[index] ?? token2);\n });\n return Array.isArray(token) ? result : result[0];\n };\n}\n\nexport { getToken, useChakra, useToken };\n","'use client';\nimport { jsx, jsxs } from 'react/jsx-runtime';\nimport { cx } from '@chakra-ui/utils';\nimport { forwardRef } from '../system/forward-ref.mjs';\nimport { useStyleConfig } from '../system/use-style-config.mjs';\nimport { chakra } from '../system/factory.mjs';\n\nconst fallbackIcon = {\n path: /* @__PURE__ */ jsxs(\"g\", { stroke: \"currentColor\", strokeWidth: \"1.5\", children: [\n /* @__PURE__ */ jsx(\n \"path\",\n {\n strokeLinecap: \"round\",\n fill: \"none\",\n d: \"M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25\"\n }\n ),\n /* @__PURE__ */ jsx(\n \"path\",\n {\n fill: \"currentColor\",\n strokeLinecap: \"round\",\n d: \"M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0\"\n }\n ),\n /* @__PURE__ */ jsx(\"circle\", { fill: \"none\", strokeMiterlimit: \"10\", cx: \"12\", cy: \"12\", r: \"11.25\" })\n ] }),\n viewBox: \"0 0 24 24\"\n};\nconst Icon = forwardRef((props, ref) => {\n const {\n as: element,\n viewBox,\n color = \"currentColor\",\n focusable = false,\n children,\n className,\n __css,\n ...rest\n } = props;\n const _className = cx(\"chakra-icon\", className);\n const customStyles = useStyleConfig(\"Icon\", props);\n const styles = {\n w: \"1em\",\n h: \"1em\",\n display: \"inline-block\",\n lineHeight: \"1em\",\n flexShrink: 0,\n color,\n ...__css,\n ...customStyles\n };\n const shared = {\n ref,\n focusable,\n className: _className,\n __css: styles\n };\n const _viewBox = viewBox ?? fallbackIcon.viewBox;\n if (element && typeof element !== \"string\") {\n return /* @__PURE__ */ jsx(chakra.svg, { as: element, ...shared, ...rest });\n }\n const _path = children ?? fallbackIcon.path;\n return /* @__PURE__ */ jsx(chakra.svg, { verticalAlign: \"middle\", viewBox: _viewBox, ...shared, ...rest, children: _path });\n});\nIcon.displayName = \"Icon\";\n\nexport { Icon };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { Icon } from '../icon/icon.mjs';\n\nfunction CheckIcon(props) {\n return /* @__PURE__ */ jsx(Icon, { viewBox: \"0 0 24 24\", ...props, children: /* @__PURE__ */ jsx(\n \"path\",\n {\n fill: \"currentColor\",\n d: \"M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z\"\n }\n ) });\n}\nfunction InfoIcon(props) {\n return /* @__PURE__ */ jsx(Icon, { viewBox: \"0 0 24 24\", ...props, children: /* @__PURE__ */ jsx(\n \"path\",\n {\n fill: \"currentColor\",\n d: \"M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z\"\n }\n ) });\n}\nfunction WarningIcon(props) {\n return /* @__PURE__ */ jsx(Icon, { viewBox: \"0 0 24 24\", ...props, children: /* @__PURE__ */ jsx(\n \"path\",\n {\n fill: \"currentColor\",\n d: \"M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z\"\n }\n ) });\n}\n\nexport { CheckIcon, InfoIcon, WarningIcon };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { omitThemingProps } from '@chakra-ui/styled-system';\nimport { cx } from '@chakra-ui/utils';\nimport { keyframes } from '@emotion/react';\nimport { forwardRef } from '../system/forward-ref.mjs';\nimport { useStyleConfig } from '../system/use-style-config.mjs';\nimport { chakra } from '../system/factory.mjs';\n\nconst spin = keyframes({\n \"0%\": {\n transform: \"rotate(0deg)\"\n },\n \"100%\": {\n transform: \"rotate(360deg)\"\n }\n});\nconst Spinner = forwardRef((props, ref) => {\n const styles = useStyleConfig(\"Spinner\", props);\n const {\n label = \"Loading...\",\n thickness = \"2px\",\n speed = \"0.45s\",\n emptyColor = \"transparent\",\n className,\n ...rest\n } = omitThemingProps(props);\n const _className = cx(\"chakra-spinner\", className);\n const spinnerStyles = {\n display: \"inline-block\",\n borderColor: \"currentColor\",\n borderStyle: \"solid\",\n borderRadius: \"99999px\",\n borderWidth: thickness,\n borderBottomColor: emptyColor,\n borderLeftColor: emptyColor,\n animation: `${spin} ${speed} linear infinite`,\n ...styles\n };\n return /* @__PURE__ */ jsx(\n chakra.div,\n {\n ref,\n __css: spinnerStyles,\n className: _className,\n ...rest,\n children: label && /* @__PURE__ */ jsx(chakra.span, { srOnly: true, children: label })\n }\n );\n});\nSpinner.displayName = \"Spinner\";\n\nexport { Spinner };\n","'use client';\nimport { createContext } from '@chakra-ui/utils';\nimport { InfoIcon, WarningIcon, CheckIcon } from './alert-icons.mjs';\nimport { Spinner } from '../spinner/spinner.mjs';\n\nconst [AlertProvider, useAlertContext] = createContext({\n name: \"AlertContext\",\n hookName: \"useAlertContext\",\n providerName: \"\"\n});\nconst [AlertStylesProvider, useAlertStyles] = createContext({\n name: `AlertStylesContext`,\n hookName: `useAlertStyles`,\n providerName: \"\"\n});\nconst STATUSES = {\n info: { icon: InfoIcon, colorScheme: \"blue\" },\n warning: { icon: WarningIcon, colorScheme: \"orange\" },\n success: { icon: CheckIcon, colorScheme: \"green\" },\n error: { icon: WarningIcon, colorScheme: \"red\" },\n loading: { icon: Spinner, colorScheme: \"blue\" }\n};\nfunction getStatusColorScheme(status) {\n return STATUSES[status].colorScheme;\n}\nfunction getStatusIcon(status) {\n return STATUSES[status].icon;\n}\n\nexport { AlertProvider, AlertStylesProvider, getStatusColorScheme, getStatusIcon, useAlertContext, useAlertStyles };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { omitThemingProps, defineStyle } from '@chakra-ui/styled-system';\nimport { cx } from '@chakra-ui/utils';\nimport { getStatusColorScheme, AlertProvider, AlertStylesProvider } from './alert-context.mjs';\nimport { useMultiStyleConfig } from '../system/use-style-config.mjs';\nimport { forwardRef } from '../system/forward-ref.mjs';\nimport { chakra } from '../system/factory.mjs';\n\nconst Alert = forwardRef(function Alert2(props, ref) {\n const { status = \"info\", addRole = true, ...rest } = omitThemingProps(props);\n const colorScheme = props.colorScheme ?? getStatusColorScheme(status);\n const styles = useMultiStyleConfig(\"Alert\", { ...props, colorScheme });\n const alertStyles = defineStyle({\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n ...styles.container\n });\n return /* @__PURE__ */ jsx(AlertProvider, { value: { status }, children: /* @__PURE__ */ jsx(AlertStylesProvider, { value: styles, children: /* @__PURE__ */ jsx(\n chakra.div,\n {\n \"data-status\": status,\n role: addRole ? \"alert\" : void 0,\n ref,\n ...rest,\n className: cx(\"chakra-alert\", props.className),\n __css: alertStyles\n }\n ) }) });\n});\nAlert.displayName = \"Alert\";\n\nexport { Alert };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { cx } from '@chakra-ui/utils';\nimport { useAlertContext, getStatusIcon, useAlertStyles } from './alert-context.mjs';\nimport { chakra } from '../system/factory.mjs';\n\nfunction AlertIcon(props) {\n const { status } = useAlertContext();\n const BaseIcon = getStatusIcon(status);\n const styles = useAlertStyles();\n const css = status === \"loading\" ? styles.spinner : styles.icon;\n return /* @__PURE__ */ jsx(\n chakra.span,\n {\n display: \"inherit\",\n \"data-status\": status,\n ...props,\n className: cx(\"chakra-alert__icon\", props.className),\n __css: css,\n children: props.children || /* @__PURE__ */ jsx(BaseIcon, { h: \"100%\", w: \"100%\" })\n }\n );\n}\nAlertIcon.displayName = \"AlertIcon\";\n\nexport { AlertIcon };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { cx } from '@chakra-ui/utils';\nimport { useAlertStyles, useAlertContext } from './alert-context.mjs';\nimport { forwardRef } from '../system/forward-ref.mjs';\nimport { chakra } from '../system/factory.mjs';\n\nconst AlertTitle = forwardRef(\n function AlertTitle2(props, ref) {\n const styles = useAlertStyles();\n const { status } = useAlertContext();\n return /* @__PURE__ */ jsx(\n chakra.div,\n {\n ref,\n \"data-status\": status,\n ...props,\n className: cx(\"chakra-alert__title\", props.className),\n __css: styles.title\n }\n );\n }\n);\nAlertTitle.displayName = \"AlertTitle\";\n\nexport { AlertTitle };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { defineStyle } from '@chakra-ui/styled-system';\nimport { cx } from '@chakra-ui/utils';\nimport { useAlertContext, useAlertStyles } from './alert-context.mjs';\nimport { forwardRef } from '../system/forward-ref.mjs';\nimport { chakra } from '../system/factory.mjs';\n\nconst AlertDescription = forwardRef(\n function AlertDescription2(props, ref) {\n const { status } = useAlertContext();\n const styles = useAlertStyles();\n const descriptionStyles = defineStyle({\n display: \"inline\",\n ...styles.description\n });\n return /* @__PURE__ */ jsx(\n chakra.div,\n {\n ref,\n \"data-status\": status,\n ...props,\n className: cx(\"chakra-alert__desc\", props.className),\n __css: descriptionStyles\n }\n );\n }\n);\nAlertDescription.displayName = \"AlertDescription\";\n\nexport { AlertDescription };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { omitThemingProps } from '@chakra-ui/styled-system';\nimport { Icon } from '../icon/icon.mjs';\nimport { forwardRef } from '../system/forward-ref.mjs';\nimport { useStyleConfig } from '../system/use-style-config.mjs';\nimport { chakra } from '../system/factory.mjs';\n\nfunction CloseIcon(props) {\n return /* @__PURE__ */ jsx(Icon, { focusable: \"false\", \"aria-hidden\": true, ...props, children: /* @__PURE__ */ jsx(\n \"path\",\n {\n fill: \"currentColor\",\n d: \"M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z\"\n }\n ) });\n}\nconst CloseButton = forwardRef(\n function CloseButton2(props, ref) {\n const styles = useStyleConfig(\"CloseButton\", props);\n const { children, isDisabled, __css, ...rest } = omitThemingProps(props);\n const baseStyle = {\n outline: 0,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flexShrink: 0\n };\n return /* @__PURE__ */ jsx(\n chakra.button,\n {\n type: \"button\",\n \"aria-label\": \"Close\",\n ref,\n disabled: isDisabled,\n __css: {\n ...baseStyle,\n ...styles,\n ...__css\n },\n ...rest,\n children: children || /* @__PURE__ */ jsx(CloseIcon, { width: \"1em\", height: \"1em\" })\n }\n );\n }\n);\nCloseButton.displayName = \"CloseButton\";\n\nexport { CloseButton };\n","'use client';\nimport { jsxs, jsx } from 'react/jsx-runtime';\nimport { Alert } from '../alert/alert.mjs';\nimport { AlertIcon } from '../alert/alert-icon.mjs';\nimport { AlertTitle } from '../alert/alert-title.mjs';\nimport { AlertDescription } from '../alert/alert-description.mjs';\nimport { CloseButton } from '../close-button/close-button.mjs';\nimport { chakra } from '../system/factory.mjs';\n\nconst Toast = (props) => {\n const {\n status,\n variant = \"solid\",\n id,\n title,\n isClosable,\n onClose,\n description,\n colorScheme,\n icon\n } = props;\n const ids = id ? {\n root: `toast-${id}`,\n title: `toast-${id}-title`,\n description: `toast-${id}-description`\n } : void 0;\n return /* @__PURE__ */ jsxs(\n Alert,\n {\n addRole: false,\n status,\n variant,\n id: ids?.root,\n alignItems: \"start\",\n borderRadius: \"md\",\n boxShadow: \"lg\",\n paddingEnd: 8,\n textAlign: \"start\",\n width: \"auto\",\n colorScheme,\n children: [\n /* @__PURE__ */ jsx(AlertIcon, { children: icon }),\n /* @__PURE__ */ jsxs(chakra.div, { flex: \"1\", maxWidth: \"100%\", children: [\n title && /* @__PURE__ */ jsx(AlertTitle, { id: ids?.title, children: title }),\n description && /* @__PURE__ */ jsx(AlertDescription, { id: ids?.description, display: \"block\", children: description })\n ] }),\n isClosable && /* @__PURE__ */ jsx(\n CloseButton,\n {\n size: \"sm\",\n onClick: onClose,\n position: \"absolute\",\n insetEnd: 1,\n top: 1\n }\n )\n ]\n }\n );\n};\nfunction createRenderToast(options = {}) {\n const { render, toastComponent: ToastComponent = Toast } = options;\n const renderToast = (props) => {\n if (typeof render === \"function\") {\n return render({ ...props, ...options });\n }\n return /* @__PURE__ */ jsx(ToastComponent, { ...props, ...options });\n };\n return renderToast;\n}\n\nexport { Toast, createRenderToast };\n","'use client';\nimport { createRenderToast } from './toast.mjs';\nimport { findToast, getToastPosition } from './toast.utils.mjs';\n\nconst initialState = {\n top: [],\n \"top-left\": [],\n \"top-right\": [],\n \"bottom-left\": [],\n bottom: [],\n \"bottom-right\": []\n};\nconst toastStore = createStore(initialState);\nfunction createStore(initialState2) {\n let state = initialState2;\n const listeners = /* @__PURE__ */ new Set();\n const setState = (setStateFn) => {\n state = setStateFn(state);\n listeners.forEach((l) => l());\n };\n return {\n getState: () => state,\n subscribe: (listener) => {\n listeners.add(listener);\n return () => {\n setState(() => initialState2);\n listeners.delete(listener);\n };\n },\n /**\n * Delete a toast record at its position\n */\n removeToast: (id, position) => {\n setState((prevState) => ({\n ...prevState,\n // id may be string or number\n // eslint-disable-next-line eqeqeq\n [position]: prevState[position].filter((toast) => toast.id != id)\n }));\n },\n notify: (message, options) => {\n const toast = createToast(message, options);\n const { position, id } = toast;\n setState((prevToasts) => {\n const isTop = position.includes(\"top\");\n const toasts = isTop ? [toast, ...prevToasts[position] ?? []] : [...prevToasts[position] ?? [], toast];\n return {\n ...prevToasts,\n [position]: toasts\n };\n });\n return id;\n },\n update: (id, options) => {\n if (!id)\n return;\n setState((prevState) => {\n const nextState = { ...prevState };\n const { position, index } = findToast(nextState, id);\n if (position && index !== -1) {\n nextState[position][index] = {\n ...nextState[position][index],\n ...options,\n message: createRenderToast(options)\n };\n }\n return nextState;\n });\n },\n closeAll: ({ positions } = {}) => {\n setState((prev) => {\n const allPositions = [\n \"bottom\",\n \"bottom-right\",\n \"bottom-left\",\n \"top\",\n \"top-left\",\n \"top-right\"\n ];\n const positionsToClose = positions ?? allPositions;\n return positionsToClose.reduce(\n (acc, position) => {\n acc[position] = prev[position].map((toast) => ({\n ...toast,\n requestClose: true\n }));\n return acc;\n },\n { ...prev }\n );\n });\n },\n close: (id) => {\n setState((prevState) => {\n const position = getToastPosition(prevState, id);\n if (!position)\n return prevState;\n return {\n ...prevState,\n [position]: prevState[position].map((toast) => {\n if (toast.id == id) {\n return {\n ...toast,\n requestClose: true\n };\n }\n return toast;\n })\n };\n });\n },\n isActive: (id) => Boolean(findToast(toastStore.getState(), id).position)\n };\n}\nlet counter = 0;\nfunction createToast(message, options = {}) {\n counter += 1;\n const id = options.id ?? counter;\n const position = options.position ?? \"bottom\";\n return {\n id,\n message,\n position,\n duration: options.duration,\n onCloseComplete: options.onCloseComplete,\n onRequestRemove: () => toastStore.removeToast(String(id), position),\n status: options.status,\n requestClose: false,\n containerStyle: options.containerStyle\n };\n}\n\nexport { toastStore };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { useSafeLayoutEffect } from '@chakra-ui/hooks';\nimport { createContext } from '@chakra-ui/utils';\nimport { useState, useRef, useEffect, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePortalManager } from './portal-manager.mjs';\n\nconst [PortalContextProvider, usePortalContext] = createContext({\n strict: false,\n name: \"PortalContext\"\n});\nconst PORTAL_CLASSNAME = \"chakra-portal\";\nconst PORTAL_SELECTOR = `.chakra-portal`;\nconst Container = (props) => /* @__PURE__ */ jsx(\n \"div\",\n {\n className: \"chakra-portal-zIndex\",\n style: {\n position: \"absolute\",\n zIndex: props.zIndex,\n top: 0,\n left: 0,\n right: 0\n // NB: Don't add `bottom: 0`, it makes the entire app unusable\n // @see https://github.com/chakra-ui/chakra-ui/issues/3201\n },\n children: props.children\n }\n);\nconst DefaultPortal = (props) => {\n const { appendToParentPortal, children } = props;\n const [tempNode, setTempNode] = useState(null);\n const portal = useRef(null);\n const [, forceUpdate] = useState({});\n useEffect(() => forceUpdate({}), []);\n const parentPortal = usePortalContext();\n const manager = usePortalManager();\n useSafeLayoutEffect(() => {\n if (!tempNode)\n return;\n const doc = tempNode.ownerDocument;\n const host = appendToParentPortal ? parentPortal ?? doc.body : doc.body;\n if (!host)\n return;\n portal.current = doc.createElement(\"div\");\n portal.current.className = PORTAL_CLASSNAME;\n host.appendChild(portal.current);\n forceUpdate({});\n const portalNode = portal.current;\n return () => {\n if (host.contains(portalNode)) {\n host.removeChild(portalNode);\n }\n };\n }, [tempNode]);\n const _children = manager?.zIndex ? /* @__PURE__ */ jsx(Container, { zIndex: manager?.zIndex, children }) : children;\n return portal.current ? createPortal(\n /* @__PURE__ */ jsx(PortalContextProvider, { value: portal.current, children: _children }),\n portal.current\n ) : /* @__PURE__ */ jsx(\n \"span\",\n {\n ref: (el) => {\n if (el)\n setTempNode(el);\n }\n }\n );\n};\nconst ContainerPortal = (props) => {\n const { children, containerRef, appendToParentPortal } = props;\n const containerEl = containerRef.current;\n const host = containerEl ?? (typeof window !== \"undefined\" ? document.body : void 0);\n const portal = useMemo(() => {\n const node = containerEl?.ownerDocument.createElement(\"div\");\n if (node)\n node.className = PORTAL_CLASSNAME;\n return node;\n }, [containerEl]);\n const [, forceUpdate] = useState({});\n useSafeLayoutEffect(() => forceUpdate({}), []);\n useSafeLayoutEffect(() => {\n if (!portal || !host)\n return;\n host.appendChild(portal);\n return () => {\n host.removeChild(portal);\n };\n }, [portal, host]);\n if (host && portal) {\n return createPortal(\n /* @__PURE__ */ jsx(PortalContextProvider, { value: appendToParentPortal ? portal : null, children }),\n portal\n );\n }\n return null;\n};\nfunction Portal(props) {\n const portalProps = {\n appendToParentPortal: true,\n ...props\n };\n const { containerRef, ...rest } = portalProps;\n return containerRef ? /* @__PURE__ */ jsx(ContainerPortal, { containerRef, ...rest }) : /* @__PURE__ */ jsx(DefaultPortal, { ...rest });\n}\nPortal.className = PORTAL_CLASSNAME;\nPortal.selector = PORTAL_SELECTOR;\nPortal.displayName = \"Portal\";\n\nexport { Portal };\n","'use client';\nimport { jsx } from 'react/jsx-runtime';\nimport { createContext } from '@chakra-ui/utils';\nimport { AnimatePresence } from 'framer-motion';\nimport { useSyncExternalStore } from 'react';\nimport { ToastComponent } from './toast.component.mjs';\nimport { toastStore } from './toast.store.mjs';\nimport { getToastListStyle } from './toast.utils.mjs';\nimport { Portal } from '../portal/portal.mjs';\n\nconst [ToastOptionProvider, useToastOptionContext] = createContext({\n name: `ToastOptionsContext`,\n strict: false\n});\nconst ToastProvider = (props) => {\n const state = useSyncExternalStore(\n toastStore.subscribe,\n toastStore.getState,\n toastStore.getState\n );\n const {\n motionVariants,\n component: Component = ToastComponent,\n portalProps,\n animatePresenceProps\n } = props;\n const stateKeys = Object.keys(state);\n const toastList = stateKeys.map((position) => {\n const toasts = state[position];\n return /* @__PURE__ */ jsx(\n \"div\",\n {\n role: \"region\",\n \"aria-live\": \"polite\",\n \"aria-label\": `Notifications-${position}`,\n id: `chakra-toast-manager-${position}`,\n style: getToastListStyle(position),\n children: /* @__PURE__ */ jsx(AnimatePresence, { ...animatePresenceProps, initial: false, children: toasts.map((toast) => /* @__PURE__ */ jsx(\n Component,\n {\n motionVariants,\n ...toast\n },\n toast.id\n )) })\n },\n position\n );\n });\n return /* @__PURE__ */ jsx(Portal, { ...portalProps, children: toastList });\n};\n\nexport { ToastOptionProvider, ToastProvider, useToastOptionContext };\n","'use client';\nimport { theme } from '@chakra-ui/theme';\nimport { createProvider } from './provider/create-provider.mjs';\n\nconst ChakraProvider = createProvider(theme);\n\nexport { ChakraProvider };\n","'use client';\nimport { jsxs, jsx } from 'react/jsx-runtime';\nimport { Provider } from './provider.mjs';\nimport { ToastOptionProvider, ToastProvider } from '../toast/toast.provider.mjs';\n\nconst createProvider = (providerTheme) => {\n return function ChakraProvider({\n children,\n theme = providerTheme,\n toastOptions,\n ...restProps\n }) {\n return /* @__PURE__ */ jsxs(Provider, { theme, ...restProps, children: [\n /* @__PURE__ */ jsx(ToastOptionProvider, { value: toastOptions?.defaultOptions, children }),\n /* @__PURE__ */ jsx(ToastProvider, { ...toastOptions })\n ] });\n };\n};\n\nexport { createProvider };\n","import { isObject } from '@chakra-ui/utils';\n\nconst requiredChakraThemeKeys = [\n \"borders\",\n \"breakpoints\",\n \"colors\",\n \"components\",\n \"config\",\n \"direction\",\n \"fonts\",\n \"fontSizes\",\n \"fontWeights\",\n \"letterSpacings\",\n \"lineHeights\",\n \"radii\",\n \"shadows\",\n \"sizes\",\n \"space\",\n \"styles\",\n \"transition\",\n \"zIndices\"\n];\nfunction isChakraTheme(unit) {\n if (!isObject(unit)) {\n return false;\n }\n return requiredChakraThemeKeys.every(\n (propertyName) => Object.prototype.hasOwnProperty.call(unit, propertyName)\n );\n}\n\nexport { isChakraTheme, requiredChakraThemeKeys };\n","'use client';\nimport { isChakraTheme, theme, baseTheme } from '@chakra-ui/theme';\nimport { mergeWith, isArray, isObject } from '@chakra-ui/utils';\n\nfunction isFunction(value) {\n return typeof value === \"function\";\n}\nfunction pipe(...fns) {\n return (v) => fns.reduce((a, b) => b(a), v);\n}\nconst createExtendTheme = (theme2) => {\n return function extendTheme2(...extensions) {\n let overrides = [...extensions];\n let activeTheme = extensions[extensions.length - 1];\n if (isChakraTheme(activeTheme) && // this ensures backward compatibility\n // previously only `extendTheme(override, activeTheme?)` was allowed\n overrides.length > 1) {\n overrides = overrides.slice(0, overrides.length - 1);\n } else {\n activeTheme = theme2;\n }\n return pipe(\n ...overrides.map(\n (extension) => (prevTheme) => isFunction(extension) ? extension(prevTheme) : mergeThemeOverride(prevTheme, extension)\n )\n )(activeTheme);\n };\n};\nconst extendTheme = createExtendTheme(theme);\nconst extendBaseTheme = createExtendTheme(baseTheme);\nfunction mergeThemeOverride(...overrides) {\n return mergeWith({}, ...overrides, mergeThemeCustomizer);\n}\nfunction mergeThemeCustomizer(source, override, key, object) {\n if ((isFunction(source) || isFunction(override)) && Object.prototype.hasOwnProperty.call(object, key)) {\n return (...args) => {\n const sourceValue = isFunction(source) ? source(...args) : source;\n const overrideValue = isFunction(override) ? override(...args) : override;\n return mergeWith({}, sourceValue, overrideValue, mergeThemeCustomizer);\n };\n }\n if (isArray(source) && isArray(override)) {\n return [...source, ...override];\n }\n if (isArray(source) && isObject(override)) {\n return override;\n }\n return void 0;\n}\n\nexport { createExtendTheme, extendBaseTheme, extendTheme, mergeThemeOverride };\n","/**\n * react-router v7.0.2\n *\n * Copyright (c) Remix Software Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE.md file in the root directory of this source tree.\n *\n * @license MIT\n */\n\n// lib/router/history.ts\nvar Action = /* @__PURE__ */ ((Action2) => {\n Action2[\"Pop\"] = \"POP\";\n Action2[\"Push\"] = \"PUSH\";\n Action2[\"Replace\"] = \"REPLACE\";\n return Action2;\n})(Action || {});\nvar PopStateEventType = \"popstate\";\nfunction createMemoryHistory(options = {}) {\n let { initialEntries = [\"/\"], initialIndex, v5Compat = false } = options;\n let entries;\n entries = initialEntries.map(\n (entry, index2) => createMemoryLocation(\n entry,\n typeof entry === \"string\" ? null : entry.state,\n index2 === 0 ? \"default\" : void 0\n )\n );\n let index = clampIndex(\n initialIndex == null ? entries.length - 1 : initialIndex\n );\n let action = \"POP\" /* Pop */;\n let listener = null;\n function clampIndex(n) {\n return Math.min(Math.max(n, 0), entries.length - 1);\n }\n function getCurrentLocation() {\n return entries[index];\n }\n function createMemoryLocation(to, state = null, key) {\n let location = createLocation(\n entries ? getCurrentLocation().pathname : \"/\",\n to,\n state,\n key\n );\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in memory history: ${JSON.stringify(\n to\n )}`\n );\n return location;\n }\n function createHref2(to) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n let history = {\n get index() {\n return index;\n },\n get action() {\n return action;\n },\n get location() {\n return getCurrentLocation();\n },\n createHref: createHref2,\n createURL(to) {\n return new URL(createHref2(to), \"http://localhost\");\n },\n encodeLocation(to) {\n let path = typeof to === \"string\" ? parsePath(to) : to;\n return {\n pathname: path.pathname || \"\",\n search: path.search || \"\",\n hash: path.hash || \"\"\n };\n },\n push(to, state) {\n action = \"PUSH\" /* Push */;\n let nextLocation = createMemoryLocation(to, state);\n index += 1;\n entries.splice(index, entries.length, nextLocation);\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 1 });\n }\n },\n replace(to, state) {\n action = \"REPLACE\" /* Replace */;\n let nextLocation = createMemoryLocation(to, state);\n entries[index] = nextLocation;\n if (v5Compat && listener) {\n listener({ action, location: nextLocation, delta: 0 });\n }\n },\n go(delta) {\n action = \"POP\" /* Pop */;\n let nextIndex = clampIndex(index + delta);\n let nextLocation = entries[nextIndex];\n index = nextIndex;\n if (listener) {\n listener({ action, location: nextLocation, delta });\n }\n },\n listen(fn) {\n listener = fn;\n return () => {\n listener = null;\n };\n }\n };\n return history;\n}\nfunction createBrowserHistory(options = {}) {\n function createBrowserLocation(window2, globalHistory) {\n let { pathname, search, hash } = window2.location;\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n globalHistory.state && globalHistory.state.usr || null,\n globalHistory.state && globalHistory.state.key || \"default\"\n );\n }\n function createBrowserHref(window2, to) {\n return typeof to === \"string\" ? to : createPath(to);\n }\n return getUrlBasedHistory(\n createBrowserLocation,\n createBrowserHref,\n null,\n options\n );\n}\nfunction createHashHistory(options = {}) {\n function createHashLocation(window2, globalHistory) {\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\"\n } = parsePath(window2.location.hash.substring(1));\n if (!pathname.startsWith(\"/\") && !pathname.startsWith(\".\")) {\n pathname = \"/\" + pathname;\n }\n return createLocation(\n \"\",\n { pathname, search, hash },\n // state defaults to `null` because `window.history.state` does\n globalHistory.state && globalHistory.state.usr || null,\n globalHistory.state && globalHistory.state.key || \"default\"\n );\n }\n function createHashHref(window2, to) {\n let base = window2.document.querySelector(\"base\");\n let href = \"\";\n if (base && base.getAttribute(\"href\")) {\n let url = window2.location.href;\n let hashIndex = url.indexOf(\"#\");\n href = hashIndex === -1 ? url : url.slice(0, hashIndex);\n }\n return href + \"#\" + (typeof to === \"string\" ? to : createPath(to));\n }\n function validateHashLocation(location, to) {\n warning(\n location.pathname.charAt(0) === \"/\",\n `relative pathnames are not supported in hash history.push(${JSON.stringify(\n to\n )})`\n );\n }\n return getUrlBasedHistory(\n createHashLocation,\n createHashHref,\n validateHashLocation,\n options\n );\n}\nfunction invariant(value, message) {\n if (value === false || value === null || typeof value === \"undefined\") {\n throw new Error(message);\n }\n}\nfunction warning(cond, message) {\n if (!cond) {\n if (typeof console !== \"undefined\") console.warn(message);\n try {\n throw new Error(message);\n } catch (e) {\n }\n }\n}\nfunction createKey() {\n return Math.random().toString(36).substring(2, 10);\n}\nfunction getHistoryState(location, index) {\n return {\n usr: location.state,\n key: location.key,\n idx: index\n };\n}\nfunction createLocation(current, to, state = null, key) {\n let location = {\n pathname: typeof current === \"string\" ? current : current.pathname,\n search: \"\",\n hash: \"\",\n ...typeof to === \"string\" ? parsePath(to) : to,\n state,\n // TODO: This could be cleaned up. push/replace should probably just take\n // full Locations now and avoid the need to run through this flow at all\n // But that's a pretty big refactor to the current test suite so going to\n // keep as is for the time being and just let any incoming keys take precedence\n key: to && to.key || key || createKey()\n };\n return location;\n}\nfunction createPath({\n pathname = \"/\",\n search = \"\",\n hash = \"\"\n}) {\n if (search && search !== \"?\")\n pathname += search.charAt(0) === \"?\" ? search : \"?\" + search;\n if (hash && hash !== \"#\")\n pathname += hash.charAt(0) === \"#\" ? hash : \"#\" + hash;\n return pathname;\n}\nfunction parsePath(path) {\n let parsedPath = {};\n if (path) {\n let hashIndex = path.indexOf(\"#\");\n if (hashIndex >= 0) {\n parsedPath.hash = path.substring(hashIndex);\n path = path.substring(0, hashIndex);\n }\n let searchIndex = path.indexOf(\"?\");\n if (searchIndex >= 0) {\n parsedPath.search = path.substring(searchIndex);\n path = path.substring(0, searchIndex);\n }\n if (path) {\n parsedPath.pathname = path;\n }\n }\n return parsedPath;\n}\nfunction getUrlBasedHistory(getLocation, createHref2, validateLocation, options = {}) {\n let { window: window2 = document.defaultView, v5Compat = false } = options;\n let globalHistory = window2.history;\n let action = \"POP\" /* Pop */;\n let listener = null;\n let index = getIndex();\n if (index == null) {\n index = 0;\n globalHistory.replaceState({ ...globalHistory.state, idx: index }, \"\");\n }\n function getIndex() {\n let state = globalHistory.state || { idx: null };\n return state.idx;\n }\n function handlePop() {\n action = \"POP\" /* Pop */;\n let nextIndex = getIndex();\n let delta = nextIndex == null ? null : nextIndex - index;\n index = nextIndex;\n if (listener) {\n listener({ action, location: history.location, delta });\n }\n }\n function push(to, state) {\n action = \"PUSH\" /* Push */;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n index = getIndex() + 1;\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n try {\n globalHistory.pushState(historyState, \"\", url);\n } catch (error) {\n if (error instanceof DOMException && error.name === \"DataCloneError\") {\n throw error;\n }\n window2.location.assign(url);\n }\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 1 });\n }\n }\n function replace2(to, state) {\n action = \"REPLACE\" /* Replace */;\n let location = createLocation(history.location, to, state);\n if (validateLocation) validateLocation(location, to);\n index = getIndex();\n let historyState = getHistoryState(location, index);\n let url = history.createHref(location);\n globalHistory.replaceState(historyState, \"\", url);\n if (v5Compat && listener) {\n listener({ action, location: history.location, delta: 0 });\n }\n }\n function createURL(to) {\n let base = window2.location.origin !== \"null\" ? window2.location.origin : window2.location.href;\n let href = typeof to === \"string\" ? to : createPath(to);\n href = href.replace(/ $/, \"%20\");\n invariant(\n base,\n `No window.location.(origin|href) available to create URL for href: ${href}`\n );\n return new URL(href, base);\n }\n let history = {\n get action() {\n return action;\n },\n get location() {\n return getLocation(window2, globalHistory);\n },\n listen(fn) {\n if (listener) {\n throw new Error(\"A history only accepts one active listener\");\n }\n window2.addEventListener(PopStateEventType, handlePop);\n listener = fn;\n return () => {\n window2.removeEventListener(PopStateEventType, handlePop);\n listener = null;\n };\n },\n createHref(to) {\n return createHref2(window2, to);\n },\n createURL,\n encodeLocation(to) {\n let url = createURL(to);\n return {\n pathname: url.pathname,\n search: url.search,\n hash: url.hash\n };\n },\n push,\n replace: replace2,\n go(n) {\n return globalHistory.go(n);\n }\n };\n return history;\n}\n\n// lib/router/utils.ts\nvar immutableRouteKeys = /* @__PURE__ */ new Set([\n \"lazy\",\n \"caseSensitive\",\n \"path\",\n \"id\",\n \"index\",\n \"children\"\n]);\nfunction isIndexRoute(route) {\n return route.index === true;\n}\nfunction convertRoutesToDataRoutes(routes, mapRouteProperties2, parentPath = [], manifest = {}) {\n return routes.map((route, index) => {\n let treePath = [...parentPath, String(index)];\n let id = typeof route.id === \"string\" ? route.id : treePath.join(\"-\");\n invariant(\n route.index !== true || !route.children,\n `Cannot specify children on an index route`\n );\n invariant(\n !manifest[id],\n `Found a route id collision on id \"${id}\". Route id's must be globally unique within Data Router usages`\n );\n if (isIndexRoute(route)) {\n let indexRoute = {\n ...route,\n ...mapRouteProperties2(route),\n id\n };\n manifest[id] = indexRoute;\n return indexRoute;\n } else {\n let pathOrLayoutRoute = {\n ...route,\n ...mapRouteProperties2(route),\n id,\n children: void 0\n };\n manifest[id] = pathOrLayoutRoute;\n if (route.children) {\n pathOrLayoutRoute.children = convertRoutesToDataRoutes(\n route.children,\n mapRouteProperties2,\n treePath,\n manifest\n );\n }\n return pathOrLayoutRoute;\n }\n });\n}\nfunction matchRoutes(routes, locationArg, basename = \"/\") {\n return matchRoutesImpl(routes, locationArg, basename, false);\n}\nfunction matchRoutesImpl(routes, locationArg, basename, allowPartial) {\n let location = typeof locationArg === \"string\" ? parsePath(locationArg) : locationArg;\n let pathname = stripBasename(location.pathname || \"/\", basename);\n if (pathname == null) {\n return null;\n }\n let branches = flattenRoutes(routes);\n rankRouteBranches(branches);\n let matches = null;\n for (let i = 0; matches == null && i < branches.length; ++i) {\n let decoded = decodePath(pathname);\n matches = matchRouteBranch(\n branches[i],\n decoded,\n allowPartial\n );\n }\n return matches;\n}\nfunction convertRouteMatchToUiMatch(match, loaderData) {\n let { route, pathname, params } = match;\n return {\n id: route.id,\n pathname,\n params,\n data: loaderData[route.id],\n handle: route.handle\n };\n}\nfunction flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = \"\") {\n let flattenRoute = (route, index, relativePath) => {\n let meta = {\n relativePath: relativePath === void 0 ? route.path || \"\" : relativePath,\n caseSensitive: route.caseSensitive === true,\n childrenIndex: index,\n route\n };\n if (meta.relativePath.startsWith(\"/\")) {\n invariant(\n meta.relativePath.startsWith(parentPath),\n `Absolute route path \"${meta.relativePath}\" nested under path \"${parentPath}\" is not valid. An absolute child route path must start with the combined path of all its parent routes.`\n );\n meta.relativePath = meta.relativePath.slice(parentPath.length);\n }\n let path = joinPaths([parentPath, meta.relativePath]);\n let routesMeta = parentsMeta.concat(meta);\n if (route.children && route.children.length > 0) {\n invariant(\n // Our types know better, but runtime JS may not!\n // @ts-expect-error\n route.index !== true,\n `Index routes must not have child routes. Please remove all child routes from route path \"${path}\".`\n );\n flattenRoutes(route.children, branches, routesMeta, path);\n }\n if (route.path == null && !route.index) {\n return;\n }\n branches.push({\n path,\n score: computeScore(path, route.index),\n routesMeta\n });\n };\n routes.forEach((route, index) => {\n if (route.path === \"\" || !route.path?.includes(\"?\")) {\n flattenRoute(route, index);\n } else {\n for (let exploded of explodeOptionalSegments(route.path)) {\n flattenRoute(route, index, exploded);\n }\n }\n });\n return branches;\n}\nfunction explodeOptionalSegments(path) {\n let segments = path.split(\"/\");\n if (segments.length === 0) return [];\n let [first, ...rest] = segments;\n let isOptional = first.endsWith(\"?\");\n let required = first.replace(/\\?$/, \"\");\n if (rest.length === 0) {\n return isOptional ? [required, \"\"] : [required];\n }\n let restExploded = explodeOptionalSegments(rest.join(\"/\"));\n let result = [];\n result.push(\n ...restExploded.map(\n (subpath) => subpath === \"\" ? required : [required, subpath].join(\"/\")\n )\n );\n if (isOptional) {\n result.push(...restExploded);\n }\n return result.map(\n (exploded) => path.startsWith(\"/\") && exploded === \"\" ? \"/\" : exploded\n );\n}\nfunction rankRouteBranches(branches) {\n branches.sort(\n (a, b) => a.score !== b.score ? b.score - a.score : compareIndexes(\n a.routesMeta.map((meta) => meta.childrenIndex),\n b.routesMeta.map((meta) => meta.childrenIndex)\n )\n );\n}\nvar paramRe = /^:[\\w-]+$/;\nvar dynamicSegmentValue = 3;\nvar indexRouteValue = 2;\nvar emptySegmentValue = 1;\nvar staticSegmentValue = 10;\nvar splatPenalty = -2;\nvar isSplat = (s) => s === \"*\";\nfunction computeScore(path, index) {\n let segments = path.split(\"/\");\n let initialScore = segments.length;\n if (segments.some(isSplat)) {\n initialScore += splatPenalty;\n }\n if (index) {\n initialScore += indexRouteValue;\n }\n return segments.filter((s) => !isSplat(s)).reduce(\n (score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === \"\" ? emptySegmentValue : staticSegmentValue),\n initialScore\n );\n}\nfunction compareIndexes(a, b) {\n let siblings = a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);\n return siblings ? (\n // If two routes are siblings, we should try to match the earlier sibling\n // first. This allows people to have fine-grained control over the matching\n // behavior by simply putting routes with identical paths in the order they\n // want them tried.\n a[a.length - 1] - b[b.length - 1]\n ) : (\n // Otherwise, it doesn't really make sense to rank non-siblings by index,\n // so they sort equally.\n 0\n );\n}\nfunction matchRouteBranch(branch, pathname, allowPartial = false) {\n let { routesMeta } = branch;\n let matchedParams = {};\n let matchedPathname = \"/\";\n let matches = [];\n for (let i = 0; i < routesMeta.length; ++i) {\n let meta = routesMeta[i];\n let end = i === routesMeta.length - 1;\n let remainingPathname = matchedPathname === \"/\" ? pathname : pathname.slice(matchedPathname.length) || \"/\";\n let match = matchPath(\n { path: meta.relativePath, caseSensitive: meta.caseSensitive, end },\n remainingPathname\n );\n let route = meta.route;\n if (!match && end && allowPartial && !routesMeta[routesMeta.length - 1].route.index) {\n match = matchPath(\n {\n path: meta.relativePath,\n caseSensitive: meta.caseSensitive,\n end: false\n },\n remainingPathname\n );\n }\n if (!match) {\n return null;\n }\n Object.assign(matchedParams, match.params);\n matches.push({\n // TODO: Can this as be avoided?\n params: matchedParams,\n pathname: joinPaths([matchedPathname, match.pathname]),\n pathnameBase: normalizePathname(\n joinPaths([matchedPathname, match.pathnameBase])\n ),\n route\n });\n if (match.pathnameBase !== \"/\") {\n matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);\n }\n }\n return matches;\n}\nfunction generatePath(originalPath, params = {}) {\n let path = originalPath;\n if (path.endsWith(\"*\") && path !== \"*\" && !path.endsWith(\"/*\")) {\n warning(\n false,\n `Route path \"${path}\" will be treated as if it were \"${path.replace(/\\*$/, \"/*\")}\" because the \\`*\\` character must always follow a \\`/\\` in the pattern. To get rid of this warning, please change the route path to \"${path.replace(/\\*$/, \"/*\")}\".`\n );\n path = path.replace(/\\*$/, \"/*\");\n }\n const prefix = path.startsWith(\"/\") ? \"/\" : \"\";\n const stringify = (p) => p == null ? \"\" : typeof p === \"string\" ? p : String(p);\n const segments = path.split(/\\/+/).map((segment, index, array) => {\n const isLastSegment = index === array.length - 1;\n if (isLastSegment && segment === \"*\") {\n const star = \"*\";\n return stringify(params[star]);\n }\n const keyMatch = segment.match(/^:([\\w-]+)(\\??)$/);\n if (keyMatch) {\n const [, key, optional] = keyMatch;\n let param = params[key];\n invariant(optional === \"?\" || param != null, `Missing \":${key}\" param`);\n return stringify(param);\n }\n return segment.replace(/\\?$/g, \"\");\n }).filter((segment) => !!segment);\n return prefix + segments.join(\"/\");\n}\nfunction matchPath(pattern, pathname) {\n if (typeof pattern === \"string\") {\n pattern = { path: pattern, caseSensitive: false, end: true };\n }\n let [matcher, compiledParams] = compilePath(\n pattern.path,\n pattern.caseSensitive,\n pattern.end\n );\n let match = pathname.match(matcher);\n if (!match) return null;\n let matchedPathname = match[0];\n let pathnameBase = matchedPathname.replace(/(.)\\/+$/, \"$1\");\n let captureGroups = match.slice(1);\n let params = compiledParams.reduce(\n (memo2, { paramName, isOptional }, index) => {\n if (paramName === \"*\") {\n let splatValue = captureGroups[index] || \"\";\n pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\\/+$/, \"$1\");\n }\n const value = captureGroups[index];\n if (isOptional && !value) {\n memo2[paramName] = void 0;\n } else {\n memo2[paramName] = (value || \"\").replace(/%2F/g, \"/\");\n }\n return memo2;\n },\n {}\n );\n return {\n params,\n pathname: matchedPathname,\n pathnameBase,\n pattern\n };\n}\nfunction compilePath(path, caseSensitive = false, end = true) {\n warning(\n path === \"*\" || !path.endsWith(\"*\") || path.endsWith(\"/*\"),\n `Route path \"${path}\" will be treated as if it were \"${path.replace(/\\*$/, \"/*\")}\" because the \\`*\\` character must always follow a \\`/\\` in the pattern. To get rid of this warning, please change the route path to \"${path.replace(/\\*$/, \"/*\")}\".`\n );\n let params = [];\n let regexpSource = \"^\" + path.replace(/\\/*\\*?$/, \"\").replace(/^\\/*/, \"/\").replace(/[\\\\.*+^${}|()[\\]]/g, \"\\\\$&\").replace(\n /\\/:([\\w-]+)(\\?)?/g,\n (_, paramName, isOptional) => {\n params.push({ paramName, isOptional: isOptional != null });\n return isOptional ? \"/?([^\\\\/]+)?\" : \"/([^\\\\/]+)\";\n }\n );\n if (path.endsWith(\"*\")) {\n params.push({ paramName: \"*\" });\n regexpSource += path === \"*\" || path === \"/*\" ? \"(.*)$\" : \"(?:\\\\/(.+)|\\\\/*)$\";\n } else if (end) {\n regexpSource += \"\\\\/*$\";\n } else if (path !== \"\" && path !== \"/\") {\n regexpSource += \"(?:(?=\\\\/|$))\";\n } else {\n }\n let matcher = new RegExp(regexpSource, caseSensitive ? void 0 : \"i\");\n return [matcher, params];\n}\nfunction decodePath(value) {\n try {\n return value.split(\"/\").map((v) => decodeURIComponent(v).replace(/\\//g, \"%2F\")).join(\"/\");\n } catch (error) {\n warning(\n false,\n `The URL path \"${value}\" could not be decoded because it is is a malformed URL segment. This is probably due to a bad percent encoding (${error}).`\n );\n return value;\n }\n}\nfunction stripBasename(pathname, basename) {\n if (basename === \"/\") return pathname;\n if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {\n return null;\n }\n let startIndex = basename.endsWith(\"/\") ? basename.length - 1 : basename.length;\n let nextChar = pathname.charAt(startIndex);\n if (nextChar && nextChar !== \"/\") {\n return null;\n }\n return pathname.slice(startIndex) || \"/\";\n}\nfunction resolvePath(to, fromPathname = \"/\") {\n let {\n pathname: toPathname,\n search = \"\",\n hash = \"\"\n } = typeof to === \"string\" ? parsePath(to) : to;\n let pathname = toPathname ? toPathname.startsWith(\"/\") ? toPathname : resolvePathname(toPathname, fromPathname) : fromPathname;\n return {\n pathname,\n search: normalizeSearch(search),\n hash: normalizeHash(hash)\n };\n}\nfunction resolvePathname(relativePath, fromPathname) {\n let segments = fromPathname.replace(/\\/+$/, \"\").split(\"/\");\n let relativeSegments = relativePath.split(\"/\");\n relativeSegments.forEach((segment) => {\n if (segment === \"..\") {\n if (segments.length > 1) segments.pop();\n } else if (segment !== \".\") {\n segments.push(segment);\n }\n });\n return segments.length > 1 ? segments.join(\"/\") : \"/\";\n}\nfunction getInvalidPathError(char, field, dest, path) {\n return `Cannot include a '${char}' character in a manually specified \\`to.${field}\\` field [${JSON.stringify(\n path\n )}]. Please separate it out to the \\`to.${dest}\\` field. Alternatively you may provide the full path as a string in and the router will parse it for you.`;\n}\nfunction getPathContributingMatches(matches) {\n return matches.filter(\n (match, index) => index === 0 || match.route.path && match.route.path.length > 0\n );\n}\nfunction getResolveToMatches(matches) {\n let pathMatches = getPathContributingMatches(matches);\n return pathMatches.map(\n (match, idx) => idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase\n );\n}\nfunction resolveTo(toArg, routePathnames, locationPathname, isPathRelative = false) {\n let to;\n if (typeof toArg === \"string\") {\n to = parsePath(toArg);\n } else {\n to = { ...toArg };\n invariant(\n !to.pathname || !to.pathname.includes(\"?\"),\n getInvalidPathError(\"?\", \"pathname\", \"search\", to)\n );\n invariant(\n !to.pathname || !to.pathname.includes(\"#\"),\n getInvalidPathError(\"#\", \"pathname\", \"hash\", to)\n );\n invariant(\n !to.search || !to.search.includes(\"#\"),\n getInvalidPathError(\"#\", \"search\", \"hash\", to)\n );\n }\n let isEmptyPath = toArg === \"\" || to.pathname === \"\";\n let toPathname = isEmptyPath ? \"/\" : to.pathname;\n let from;\n if (toPathname == null) {\n from = locationPathname;\n } else {\n let routePathnameIndex = routePathnames.length - 1;\n if (!isPathRelative && toPathname.startsWith(\"..\")) {\n let toSegments = toPathname.split(\"/\");\n while (toSegments[0] === \"..\") {\n toSegments.shift();\n routePathnameIndex -= 1;\n }\n to.pathname = toSegments.join(\"/\");\n }\n from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : \"/\";\n }\n let path = resolvePath(to, from);\n let hasExplicitTrailingSlash = toPathname && toPathname !== \"/\" && toPathname.endsWith(\"/\");\n let hasCurrentTrailingSlash = (isEmptyPath || toPathname === \".\") && locationPathname.endsWith(\"/\");\n if (!path.pathname.endsWith(\"/\") && (hasExplicitTrailingSlash || hasCurrentTrailingSlash)) {\n path.pathname += \"/\";\n }\n return path;\n}\nvar joinPaths = (paths) => paths.join(\"/\").replace(/\\/\\/+/g, \"/\");\nvar normalizePathname = (pathname) => pathname.replace(/\\/+$/, \"\").replace(/^\\/*/, \"/\");\nvar normalizeSearch = (search) => !search || search === \"?\" ? \"\" : search.startsWith(\"?\") ? search : \"?\" + search;\nvar normalizeHash = (hash) => !hash || hash === \"#\" ? \"\" : hash.startsWith(\"#\") ? hash : \"#\" + hash;\nvar DataWithResponseInit = class {\n constructor(data2, init) {\n this.type = \"DataWithResponseInit\";\n this.data = data2;\n this.init = init || null;\n }\n};\nfunction data(data2, init) {\n return new DataWithResponseInit(\n data2,\n typeof init === \"number\" ? { status: init } : init\n );\n}\nvar redirect = (url, init = 302) => {\n let responseInit = init;\n if (typeof responseInit === \"number\") {\n responseInit = { status: responseInit };\n } else if (typeof responseInit.status === \"undefined\") {\n responseInit.status = 302;\n }\n let headers = new Headers(responseInit.headers);\n headers.set(\"Location\", url);\n return new Response(null, {\n ...responseInit,\n headers\n });\n};\nvar redirectDocument = (url, init) => {\n let response = redirect(url, init);\n response.headers.set(\"X-Remix-Reload-Document\", \"true\");\n return response;\n};\nvar replace = (url, init) => {\n let response = redirect(url, init);\n response.headers.set(\"X-Remix-Replace\", \"true\");\n return response;\n};\nvar ErrorResponseImpl = class {\n constructor(status, statusText, data2, internal = false) {\n this.status = status;\n this.statusText = statusText || \"\";\n this.internal = internal;\n if (data2 instanceof Error) {\n this.data = data2.toString();\n this.error = data2;\n } else {\n this.data = data2;\n }\n }\n};\nfunction isRouteErrorResponse(error) {\n return error != null && typeof error.status === \"number\" && typeof error.statusText === \"string\" && typeof error.internal === \"boolean\" && \"data\" in error;\n}\n\n// lib/router/router.ts\nvar validMutationMethodsArr = [\n \"POST\",\n \"PUT\",\n \"PATCH\",\n \"DELETE\"\n];\nvar validMutationMethods = new Set(\n validMutationMethodsArr\n);\nvar validRequestMethodsArr = [\n \"GET\",\n ...validMutationMethodsArr\n];\nvar validRequestMethods = new Set(validRequestMethodsArr);\nvar redirectStatusCodes = /* @__PURE__ */ new Set([301, 302, 303, 307, 308]);\nvar redirectPreserveMethodStatusCodes = /* @__PURE__ */ new Set([307, 308]);\nvar IDLE_NAVIGATION = {\n state: \"idle\",\n location: void 0,\n formMethod: void 0,\n formAction: void 0,\n formEncType: void 0,\n formData: void 0,\n json: void 0,\n text: void 0\n};\nvar IDLE_FETCHER = {\n state: \"idle\",\n data: void 0,\n formMethod: void 0,\n formAction: void 0,\n formEncType: void 0,\n formData: void 0,\n json: void 0,\n text: void 0\n};\nvar IDLE_BLOCKER = {\n state: \"unblocked\",\n proceed: void 0,\n reset: void 0,\n location: void 0\n};\nvar ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\\/\\/)/i;\nvar defaultMapRouteProperties = (route) => ({\n hasErrorBoundary: Boolean(route.hasErrorBoundary)\n});\nvar TRANSITIONS_STORAGE_KEY = \"remix-router-transitions\";\nvar ResetLoaderDataSymbol = Symbol(\"ResetLoaderData\");\nfunction createRouter(init) {\n const routerWindow = init.window ? init.window : typeof window !== \"undefined\" ? window : void 0;\n const isBrowser2 = typeof routerWindow !== \"undefined\" && typeof routerWindow.document !== \"undefined\" && typeof routerWindow.document.createElement !== \"undefined\";\n invariant(\n init.routes.length > 0,\n \"You must provide a non-empty routes array to createRouter\"\n );\n let mapRouteProperties2 = init.mapRouteProperties || defaultMapRouteProperties;\n let manifest = {};\n let dataRoutes = convertRoutesToDataRoutes(\n init.routes,\n mapRouteProperties2,\n void 0,\n manifest\n );\n let inFlightDataRoutes;\n let basename = init.basename || \"/\";\n let dataStrategyImpl = init.dataStrategy || defaultDataStrategy;\n let patchRoutesOnNavigationImpl = init.patchRoutesOnNavigation;\n let future = {\n ...init.future\n };\n let unlistenHistory = null;\n let subscribers = /* @__PURE__ */ new Set();\n let savedScrollPositions2 = null;\n let getScrollRestorationKey2 = null;\n let getScrollPosition = null;\n let initialScrollRestored = init.hydrationData != null;\n let initialMatches = matchRoutes(dataRoutes, init.history.location, basename);\n let initialErrors = null;\n if (initialMatches == null && !patchRoutesOnNavigationImpl) {\n let error = getInternalRouterError(404, {\n pathname: init.history.location.pathname\n });\n let { matches, route } = getShortCircuitMatches(dataRoutes);\n initialMatches = matches;\n initialErrors = { [route.id]: error };\n }\n if (initialMatches && !init.hydrationData) {\n let fogOfWar = checkFogOfWar(\n initialMatches,\n dataRoutes,\n init.history.location.pathname\n );\n if (fogOfWar.active) {\n initialMatches = null;\n }\n }\n let initialized;\n if (!initialMatches) {\n initialized = false;\n initialMatches = [];\n let fogOfWar = checkFogOfWar(\n null,\n dataRoutes,\n init.history.location.pathname\n );\n if (fogOfWar.active && fogOfWar.matches) {\n initialMatches = fogOfWar.matches;\n }\n } else if (initialMatches.some((m) => m.route.lazy)) {\n initialized = false;\n } else if (!initialMatches.some((m) => m.route.loader)) {\n initialized = true;\n } else {\n let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;\n let errors = init.hydrationData ? init.hydrationData.errors : null;\n if (errors) {\n let idx = initialMatches.findIndex(\n (m) => errors[m.route.id] !== void 0\n );\n initialized = initialMatches.slice(0, idx + 1).every((m) => !shouldLoadRouteOnHydration(m.route, loaderData, errors));\n } else {\n initialized = initialMatches.every(\n (m) => !shouldLoadRouteOnHydration(m.route, loaderData, errors)\n );\n }\n }\n let router;\n let state = {\n historyAction: init.history.action,\n location: init.history.location,\n matches: initialMatches,\n initialized,\n navigation: IDLE_NAVIGATION,\n // Don't restore on initial updateState() if we were SSR'd\n restoreScrollPosition: init.hydrationData != null ? false : null,\n preventScrollReset: false,\n revalidation: \"idle\",\n loaderData: init.hydrationData && init.hydrationData.loaderData || {},\n actionData: init.hydrationData && init.hydrationData.actionData || null,\n errors: init.hydrationData && init.hydrationData.errors || initialErrors,\n fetchers: /* @__PURE__ */ new Map(),\n blockers: /* @__PURE__ */ new Map()\n };\n let pendingAction = \"POP\" /* Pop */;\n let pendingPreventScrollReset = false;\n let pendingNavigationController;\n let pendingViewTransitionEnabled = false;\n let appliedViewTransitions = /* @__PURE__ */ new Map();\n let removePageHideEventListener = null;\n let isUninterruptedRevalidation = false;\n let isRevalidationRequired = false;\n let cancelledFetcherLoads = /* @__PURE__ */ new Set();\n let fetchControllers = /* @__PURE__ */ new Map();\n let incrementingLoadId = 0;\n let pendingNavigationLoadId = -1;\n let fetchReloadIds = /* @__PURE__ */ new Map();\n let fetchRedirectIds = /* @__PURE__ */ new Set();\n let fetchLoadMatches = /* @__PURE__ */ new Map();\n let activeFetchers = /* @__PURE__ */ new Map();\n let fetchersQueuedForDeletion = /* @__PURE__ */ new Set();\n let blockerFunctions = /* @__PURE__ */ new Map();\n let unblockBlockerHistoryUpdate = void 0;\n let pendingRevalidationDfd = null;\n function initialize() {\n unlistenHistory = init.history.listen(\n ({ action: historyAction, location, delta }) => {\n if (unblockBlockerHistoryUpdate) {\n unblockBlockerHistoryUpdate();\n unblockBlockerHistoryUpdate = void 0;\n return;\n }\n warning(\n blockerFunctions.size === 0 || delta != null,\n \"You are trying to use a blocker on a POP navigation to a location that was not created by @remix-run/router. This will fail silently in production. This can happen if you are navigating outside the router via `window.history.pushState`/`window.location.hash` instead of using router navigation APIs. This can also happen if you are using createHashRouter and the user manually changes the URL.\"\n );\n let blockerKey = shouldBlockNavigation({\n currentLocation: state.location,\n nextLocation: location,\n historyAction\n });\n if (blockerKey && delta != null) {\n let nextHistoryUpdatePromise = new Promise((resolve) => {\n unblockBlockerHistoryUpdate = resolve;\n });\n init.history.go(delta * -1);\n updateBlocker(blockerKey, {\n state: \"blocked\",\n location,\n proceed() {\n updateBlocker(blockerKey, {\n state: \"proceeding\",\n proceed: void 0,\n reset: void 0,\n location\n });\n nextHistoryUpdatePromise.then(() => init.history.go(delta));\n },\n reset() {\n let blockers = new Map(state.blockers);\n blockers.set(blockerKey, IDLE_BLOCKER);\n updateState({ blockers });\n }\n });\n return;\n }\n return startNavigation(historyAction, location);\n }\n );\n if (isBrowser2) {\n restoreAppliedTransitions(routerWindow, appliedViewTransitions);\n let _saveAppliedTransitions = () => persistAppliedTransitions(routerWindow, appliedViewTransitions);\n routerWindow.addEventListener(\"pagehide\", _saveAppliedTransitions);\n removePageHideEventListener = () => routerWindow.removeEventListener(\"pagehide\", _saveAppliedTransitions);\n }\n if (!state.initialized) {\n startNavigation(\"POP\" /* Pop */, state.location, {\n initialHydration: true\n });\n }\n return router;\n }\n function dispose() {\n if (unlistenHistory) {\n unlistenHistory();\n }\n if (removePageHideEventListener) {\n removePageHideEventListener();\n }\n subscribers.clear();\n pendingNavigationController && pendingNavigationController.abort();\n state.fetchers.forEach((_, key) => deleteFetcher(key));\n state.blockers.forEach((_, key) => deleteBlocker(key));\n }\n function subscribe(fn) {\n subscribers.add(fn);\n return () => subscribers.delete(fn);\n }\n function updateState(newState, opts = {}) {\n state = {\n ...state,\n ...newState\n };\n let unmountedFetchers = [];\n let mountedFetchers = [];\n state.fetchers.forEach((fetcher, key) => {\n if (fetcher.state === \"idle\") {\n if (fetchersQueuedForDeletion.has(key)) {\n unmountedFetchers.push(key);\n } else {\n mountedFetchers.push(key);\n }\n }\n });\n [...subscribers].forEach(\n (subscriber) => subscriber(state, {\n deletedFetchers: unmountedFetchers,\n viewTransitionOpts: opts.viewTransitionOpts,\n flushSync: opts.flushSync === true\n })\n );\n unmountedFetchers.forEach((key) => deleteFetcher(key));\n mountedFetchers.forEach((key) => state.fetchers.delete(key));\n }\n function completeNavigation(location, newState, { flushSync } = {}) {\n let isActionReload = state.actionData != null && state.navigation.formMethod != null && isMutationMethod(state.navigation.formMethod) && state.navigation.state === \"loading\" && location.state?._isRedirect !== true;\n let actionData;\n if (newState.actionData) {\n if (Object.keys(newState.actionData).length > 0) {\n actionData = newState.actionData;\n } else {\n actionData = null;\n }\n } else if (isActionReload) {\n actionData = state.actionData;\n } else {\n actionData = null;\n }\n let loaderData = newState.loaderData ? mergeLoaderData(\n state.loaderData,\n newState.loaderData,\n newState.matches || [],\n newState.errors\n ) : state.loaderData;\n let blockers = state.blockers;\n if (blockers.size > 0) {\n blockers = new Map(blockers);\n blockers.forEach((_, k) => blockers.set(k, IDLE_BLOCKER));\n }\n let preventScrollReset = pendingPreventScrollReset === true || state.navigation.formMethod != null && isMutationMethod(state.navigation.formMethod) && location.state?._isRedirect !== true;\n if (inFlightDataRoutes) {\n dataRoutes = inFlightDataRoutes;\n inFlightDataRoutes = void 0;\n }\n if (isUninterruptedRevalidation) {\n } else if (pendingAction === \"POP\" /* Pop */) {\n } else if (pendingAction === \"PUSH\" /* Push */) {\n init.history.push(location, location.state);\n } else if (pendingAction === \"REPLACE\" /* Replace */) {\n init.history.replace(location, location.state);\n }\n let viewTransitionOpts;\n if (pendingAction === \"POP\" /* Pop */) {\n let priorPaths = appliedViewTransitions.get(state.location.pathname);\n if (priorPaths && priorPaths.has(location.pathname)) {\n viewTransitionOpts = {\n currentLocation: state.location,\n nextLocation: location\n };\n } else if (appliedViewTransitions.has(location.pathname)) {\n viewTransitionOpts = {\n currentLocation: location,\n nextLocation: state.location\n };\n }\n } else if (pendingViewTransitionEnabled) {\n let toPaths = appliedViewTransitions.get(state.location.pathname);\n if (toPaths) {\n toPaths.add(location.pathname);\n } else {\n toPaths = /* @__PURE__ */ new Set([location.pathname]);\n appliedViewTransitions.set(state.location.pathname, toPaths);\n }\n viewTransitionOpts = {\n currentLocation: state.location,\n nextLocation: location\n };\n }\n updateState(\n {\n ...newState,\n // matches, errors, fetchers go through as-is\n actionData,\n loaderData,\n historyAction: pendingAction,\n location,\n initialized: true,\n navigation: IDLE_NAVIGATION,\n revalidation: \"idle\",\n restoreScrollPosition: getSavedScrollPosition(\n location,\n newState.matches || state.matches\n ),\n preventScrollReset,\n blockers\n },\n {\n viewTransitionOpts,\n flushSync: flushSync === true\n }\n );\n pendingAction = \"POP\" /* Pop */;\n pendingPreventScrollReset = false;\n pendingViewTransitionEnabled = false;\n isUninterruptedRevalidation = false;\n isRevalidationRequired = false;\n pendingRevalidationDfd?.resolve();\n pendingRevalidationDfd = null;\n }\n async function navigate(to, opts) {\n if (typeof to === \"number\") {\n init.history.go(to);\n return;\n }\n let normalizedPath = normalizeTo(\n state.location,\n state.matches,\n basename,\n to,\n opts?.fromRouteId,\n opts?.relative\n );\n let { path, submission, error } = normalizeNavigateOptions(\n false,\n normalizedPath,\n opts\n );\n let currentLocation = state.location;\n let nextLocation = createLocation(state.location, path, opts && opts.state);\n nextLocation = {\n ...nextLocation,\n ...init.history.encodeLocation(nextLocation)\n };\n let userReplace = opts && opts.replace != null ? opts.replace : void 0;\n let historyAction = \"PUSH\" /* Push */;\n if (userReplace === true) {\n historyAction = \"REPLACE\" /* Replace */;\n } else if (userReplace === false) {\n } else if (submission != null && isMutationMethod(submission.formMethod) && submission.formAction === state.location.pathname + state.location.search) {\n historyAction = \"REPLACE\" /* Replace */;\n }\n let preventScrollReset = opts && \"preventScrollReset\" in opts ? opts.preventScrollReset === true : void 0;\n let flushSync = (opts && opts.flushSync) === true;\n let blockerKey = shouldBlockNavigation({\n currentLocation,\n nextLocation,\n historyAction\n });\n if (blockerKey) {\n updateBlocker(blockerKey, {\n state: \"blocked\",\n location: nextLocation,\n proceed() {\n updateBlocker(blockerKey, {\n state: \"proceeding\",\n proceed: void 0,\n reset: void 0,\n location: nextLocation\n });\n navigate(to, opts);\n },\n reset() {\n let blockers = new Map(state.blockers);\n blockers.set(blockerKey, IDLE_BLOCKER);\n updateState({ blockers });\n }\n });\n return;\n }\n await startNavigation(historyAction, nextLocation, {\n submission,\n // Send through the formData serialization error if we have one so we can\n // render at the right error boundary after we match routes\n pendingError: error,\n preventScrollReset,\n replace: opts && opts.replace,\n enableViewTransition: opts && opts.viewTransition,\n flushSync\n });\n }\n function revalidate() {\n if (!pendingRevalidationDfd) {\n pendingRevalidationDfd = createDeferred();\n }\n interruptActiveLoads();\n updateState({ revalidation: \"loading\" });\n let promise = pendingRevalidationDfd.promise;\n if (state.navigation.state === \"submitting\") {\n return promise;\n }\n if (state.navigation.state === \"idle\") {\n startNavigation(state.historyAction, state.location, {\n startUninterruptedRevalidation: true\n });\n return promise;\n }\n startNavigation(\n pendingAction || state.historyAction,\n state.navigation.location,\n {\n overrideNavigation: state.navigation,\n // Proxy through any rending view transition\n enableViewTransition: pendingViewTransitionEnabled === true\n }\n );\n return promise;\n }\n async function startNavigation(historyAction, location, opts) {\n pendingNavigationController && pendingNavigationController.abort();\n pendingNavigationController = null;\n pendingAction = historyAction;\n isUninterruptedRevalidation = (opts && opts.startUninterruptedRevalidation) === true;\n saveScrollPosition(state.location, state.matches);\n pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;\n pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;\n let routesToUse = inFlightDataRoutes || dataRoutes;\n let loadingNavigation = opts && opts.overrideNavigation;\n let matches = matchRoutes(routesToUse, location, basename);\n let flushSync = (opts && opts.flushSync) === true;\n let fogOfWar = checkFogOfWar(matches, routesToUse, location.pathname);\n if (fogOfWar.active && fogOfWar.matches) {\n matches = fogOfWar.matches;\n }\n if (!matches) {\n let { error, notFoundMatches, route } = handleNavigational404(\n location.pathname\n );\n completeNavigation(\n location,\n {\n matches: notFoundMatches,\n loaderData: {},\n errors: {\n [route.id]: error\n }\n },\n { flushSync }\n );\n return;\n }\n if (state.initialized && !isRevalidationRequired && isHashChangeOnly(state.location, location) && !(opts && opts.submission && isMutationMethod(opts.submission.formMethod))) {\n completeNavigation(location, { matches }, { flushSync });\n return;\n }\n pendingNavigationController = new AbortController();\n let request = createClientSideRequest(\n init.history,\n location,\n pendingNavigationController.signal,\n opts && opts.submission\n );\n let pendingActionResult;\n if (opts && opts.pendingError) {\n pendingActionResult = [\n findNearestBoundary(matches).route.id,\n { type: \"error\" /* error */, error: opts.pendingError }\n ];\n } else if (opts && opts.submission && isMutationMethod(opts.submission.formMethod)) {\n let actionResult = await handleAction(\n request,\n location,\n opts.submission,\n matches,\n fogOfWar.active,\n { replace: opts.replace, flushSync }\n );\n if (actionResult.shortCircuited) {\n return;\n }\n if (actionResult.pendingActionResult) {\n let [routeId, result] = actionResult.pendingActionResult;\n if (isErrorResult(result) && isRouteErrorResponse(result.error) && result.error.status === 404) {\n pendingNavigationController = null;\n completeNavigation(location, {\n matches: actionResult.matches,\n loaderData: {},\n errors: {\n [routeId]: result.error\n }\n });\n return;\n }\n }\n matches = actionResult.matches || matches;\n pendingActionResult = actionResult.pendingActionResult;\n loadingNavigation = getLoadingNavigation(location, opts.submission);\n flushSync = false;\n fogOfWar.active = false;\n request = createClientSideRequest(\n init.history,\n request.url,\n request.signal\n );\n }\n let {\n shortCircuited,\n matches: updatedMatches,\n loaderData,\n errors\n } = await handleLoaders(\n request,\n location,\n matches,\n fogOfWar.active,\n loadingNavigation,\n opts && opts.submission,\n opts && opts.fetcherSubmission,\n opts && opts.replace,\n opts && opts.initialHydration === true,\n flushSync,\n pendingActionResult\n );\n if (shortCircuited) {\n return;\n }\n pendingNavigationController = null;\n completeNavigation(location, {\n matches: updatedMatches || matches,\n ...getActionDataForCommit(pendingActionResult),\n loaderData,\n errors\n });\n }\n async function handleAction(request, location, submission, matches, isFogOfWar, opts = {}) {\n interruptActiveLoads();\n let navigation = getSubmittingNavigation(location, submission);\n updateState({ navigation }, { flushSync: opts.flushSync === true });\n if (isFogOfWar) {\n let discoverResult = await discoverRoutes(\n matches,\n location.pathname,\n request.signal\n );\n if (discoverResult.type === \"aborted\") {\n return { shortCircuited: true };\n } else if (discoverResult.type === \"error\") {\n let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;\n return {\n matches: discoverResult.partialMatches,\n pendingActionResult: [\n boundaryId,\n {\n type: \"error\" /* error */,\n error: discoverResult.error\n }\n ]\n };\n } else if (!discoverResult.matches) {\n let { notFoundMatches, error, route } = handleNavigational404(\n location.pathname\n );\n return {\n matches: notFoundMatches,\n pendingActionResult: [\n route.id,\n {\n type: \"error\" /* error */,\n error\n }\n ]\n };\n } else {\n matches = discoverResult.matches;\n }\n }\n let result;\n let actionMatch = getTargetMatch(matches, location);\n if (!actionMatch.route.action && !actionMatch.route.lazy) {\n result = {\n type: \"error\" /* error */,\n error: getInternalRouterError(405, {\n method: request.method,\n pathname: location.pathname,\n routeId: actionMatch.route.id\n })\n };\n } else {\n let results = await callDataStrategy(\n \"action\",\n state,\n request,\n [actionMatch],\n matches,\n null\n );\n result = results[actionMatch.route.id];\n if (request.signal.aborted) {\n return { shortCircuited: true };\n }\n }\n if (isRedirectResult(result)) {\n let replace2;\n if (opts && opts.replace != null) {\n replace2 = opts.replace;\n } else {\n let location2 = normalizeRedirectLocation(\n result.response.headers.get(\"Location\"),\n new URL(request.url),\n basename\n );\n replace2 = location2 === state.location.pathname + state.location.search;\n }\n await startRedirectNavigation(request, result, true, {\n submission,\n replace: replace2\n });\n return { shortCircuited: true };\n }\n if (isErrorResult(result)) {\n let boundaryMatch = findNearestBoundary(matches, actionMatch.route.id);\n if ((opts && opts.replace) !== true) {\n pendingAction = \"PUSH\" /* Push */;\n }\n return {\n matches,\n pendingActionResult: [boundaryMatch.route.id, result]\n };\n }\n return {\n matches,\n pendingActionResult: [actionMatch.route.id, result]\n };\n }\n async function handleLoaders(request, location, matches, isFogOfWar, overrideNavigation, submission, fetcherSubmission, replace2, initialHydration, flushSync, pendingActionResult) {\n let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);\n let activeSubmission = submission || fetcherSubmission || getSubmissionFromNavigation(loadingNavigation);\n let shouldUpdateNavigationState = !isUninterruptedRevalidation && !initialHydration;\n if (isFogOfWar) {\n if (shouldUpdateNavigationState) {\n let actionData = getUpdatedActionData(pendingActionResult);\n updateState(\n {\n navigation: loadingNavigation,\n ...actionData !== void 0 ? { actionData } : {}\n },\n {\n flushSync\n }\n );\n }\n let discoverResult = await discoverRoutes(\n matches,\n location.pathname,\n request.signal\n );\n if (discoverResult.type === \"aborted\") {\n return { shortCircuited: true };\n } else if (discoverResult.type === \"error\") {\n let boundaryId = findNearestBoundary(discoverResult.partialMatches).route.id;\n return {\n matches: discoverResult.partialMatches,\n loaderData: {},\n errors: {\n [boundaryId]: discoverResult.error\n }\n };\n } else if (!discoverResult.matches) {\n let { error, notFoundMatches, route } = handleNavigational404(\n location.pathname\n );\n return {\n matches: notFoundMatches,\n loaderData: {},\n errors: {\n [route.id]: error\n }\n };\n } else {\n matches = discoverResult.matches;\n }\n }\n let routesToUse = inFlightDataRoutes || dataRoutes;\n let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(\n init.history,\n state,\n matches,\n activeSubmission,\n location,\n initialHydration === true,\n isRevalidationRequired,\n cancelledFetcherLoads,\n fetchersQueuedForDeletion,\n fetchLoadMatches,\n fetchRedirectIds,\n routesToUse,\n basename,\n pendingActionResult\n );\n pendingNavigationLoadId = ++incrementingLoadId;\n if (matchesToLoad.length === 0 && revalidatingFetchers.length === 0) {\n let updatedFetchers2 = markFetchRedirectsDone();\n completeNavigation(\n location,\n {\n matches,\n loaderData: {},\n // Commit pending error if we're short circuiting\n errors: pendingActionResult && isErrorResult(pendingActionResult[1]) ? { [pendingActionResult[0]]: pendingActionResult[1].error } : null,\n ...getActionDataForCommit(pendingActionResult),\n ...updatedFetchers2 ? { fetchers: new Map(state.fetchers) } : {}\n },\n { flushSync }\n );\n return { shortCircuited: true };\n }\n if (shouldUpdateNavigationState) {\n let updates = {};\n if (!isFogOfWar) {\n updates.navigation = loadingNavigation;\n let actionData = getUpdatedActionData(pendingActionResult);\n if (actionData !== void 0) {\n updates.actionData = actionData;\n }\n }\n if (revalidatingFetchers.length > 0) {\n updates.fetchers = getUpdatedRevalidatingFetchers(revalidatingFetchers);\n }\n updateState(updates, { flushSync });\n }\n revalidatingFetchers.forEach((rf) => {\n abortFetcher(rf.key);\n if (rf.controller) {\n fetchControllers.set(rf.key, rf.controller);\n }\n });\n let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach((f) => abortFetcher(f.key));\n if (pendingNavigationController) {\n pendingNavigationController.signal.addEventListener(\n \"abort\",\n abortPendingFetchRevalidations\n );\n }\n let { loaderResults, fetcherResults } = await callLoadersAndMaybeResolveData(\n state,\n matches,\n matchesToLoad,\n revalidatingFetchers,\n request\n );\n if (request.signal.aborted) {\n return { shortCircuited: true };\n }\n if (pendingNavigationController) {\n pendingNavigationController.signal.removeEventListener(\n \"abort\",\n abortPendingFetchRevalidations\n );\n }\n revalidatingFetchers.forEach((rf) => fetchControllers.delete(rf.key));\n let redirect2 = findRedirect(loaderResults);\n if (redirect2) {\n await startRedirectNavigation(request, redirect2.result, true, {\n replace: replace2\n });\n return { shortCircuited: true };\n }\n redirect2 = findRedirect(fetcherResults);\n if (redirect2) {\n fetchRedirectIds.add(redirect2.key);\n await startRedirectNavigation(request, redirect2.result, true, {\n replace: replace2\n });\n return { shortCircuited: true };\n }\n let { loaderData, errors } = processLoaderData(\n state,\n matches,\n loaderResults,\n pendingActionResult,\n revalidatingFetchers,\n fetcherResults\n );\n if (initialHydration && state.errors) {\n errors = { ...state.errors, ...errors };\n }\n let updatedFetchers = markFetchRedirectsDone();\n let didAbortFetchLoads = abortStaleFetchLoads(pendingNavigationLoadId);\n let shouldUpdateFetchers = updatedFetchers || didAbortFetchLoads || revalidatingFetchers.length > 0;\n return {\n matches,\n loaderData,\n errors,\n ...shouldUpdateFetchers ? { fetchers: new Map(state.fetchers) } : {}\n };\n }\n function getUpdatedActionData(pendingActionResult) {\n if (pendingActionResult && !isErrorResult(pendingActionResult[1])) {\n return {\n [pendingActionResult[0]]: pendingActionResult[1].data\n };\n } else if (state.actionData) {\n if (Object.keys(state.actionData).length === 0) {\n return null;\n } else {\n return state.actionData;\n }\n }\n }\n function getUpdatedRevalidatingFetchers(revalidatingFetchers) {\n revalidatingFetchers.forEach((rf) => {\n let fetcher = state.fetchers.get(rf.key);\n let revalidatingFetcher = getLoadingFetcher(\n void 0,\n fetcher ? fetcher.data : void 0\n );\n state.fetchers.set(rf.key, revalidatingFetcher);\n });\n return new Map(state.fetchers);\n }\n async function fetch2(key, routeId, href, opts) {\n abortFetcher(key);\n let flushSync = (opts && opts.flushSync) === true;\n let routesToUse = inFlightDataRoutes || dataRoutes;\n let normalizedPath = normalizeTo(\n state.location,\n state.matches,\n basename,\n href,\n routeId,\n opts?.relative\n );\n let matches = matchRoutes(routesToUse, normalizedPath, basename);\n let fogOfWar = checkFogOfWar(matches, routesToUse, normalizedPath);\n if (fogOfWar.active && fogOfWar.matches) {\n matches = fogOfWar.matches;\n }\n if (!matches) {\n setFetcherError(\n key,\n routeId,\n getInternalRouterError(404, { pathname: normalizedPath }),\n { flushSync }\n );\n return;\n }\n let { path, submission, error } = normalizeNavigateOptions(\n true,\n normalizedPath,\n opts\n );\n if (error) {\n setFetcherError(key, routeId, error, { flushSync });\n return;\n }\n let match = getTargetMatch(matches, path);\n let preventScrollReset = (opts && opts.preventScrollReset) === true;\n if (submission && isMutationMethod(submission.formMethod)) {\n await handleFetcherAction(\n key,\n routeId,\n path,\n match,\n matches,\n fogOfWar.active,\n flushSync,\n preventScrollReset,\n submission\n );\n return;\n }\n fetchLoadMatches.set(key, { routeId, path });\n await handleFetcherLoader(\n key,\n routeId,\n path,\n match,\n matches,\n fogOfWar.active,\n flushSync,\n preventScrollReset,\n submission\n );\n }\n async function handleFetcherAction(key, routeId, path, match, requestMatches, isFogOfWar, flushSync, preventScrollReset, submission) {\n interruptActiveLoads();\n fetchLoadMatches.delete(key);\n function detectAndHandle405Error(m) {\n if (!m.route.action && !m.route.lazy) {\n let error = getInternalRouterError(405, {\n method: submission.formMethod,\n pathname: path,\n routeId\n });\n setFetcherError(key, routeId, error, { flushSync });\n return true;\n }\n return false;\n }\n if (!isFogOfWar && detectAndHandle405Error(match)) {\n return;\n }\n let existingFetcher = state.fetchers.get(key);\n updateFetcherState(key, getSubmittingFetcher(submission, existingFetcher), {\n flushSync\n });\n let abortController = new AbortController();\n let fetchRequest = createClientSideRequest(\n init.history,\n path,\n abortController.signal,\n submission\n );\n if (isFogOfWar) {\n let discoverResult = await discoverRoutes(\n requestMatches,\n path,\n fetchRequest.signal\n );\n if (discoverResult.type === \"aborted\") {\n return;\n } else if (discoverResult.type === \"error\") {\n setFetcherError(key, routeId, discoverResult.error, { flushSync });\n return;\n } else if (!discoverResult.matches) {\n setFetcherError(\n key,\n routeId,\n getInternalRouterError(404, { pathname: path }),\n { flushSync }\n );\n return;\n } else {\n requestMatches = discoverResult.matches;\n match = getTargetMatch(requestMatches, path);\n if (detectAndHandle405Error(match)) {\n return;\n }\n }\n }\n fetchControllers.set(key, abortController);\n let originatingLoadId = incrementingLoadId;\n let actionResults = await callDataStrategy(\n \"action\",\n state,\n fetchRequest,\n [match],\n requestMatches,\n key\n );\n let actionResult = actionResults[match.route.id];\n if (fetchRequest.signal.aborted) {\n if (fetchControllers.get(key) === abortController) {\n fetchControllers.delete(key);\n }\n return;\n }\n if (fetchersQueuedForDeletion.has(key)) {\n if (isRedirectResult(actionResult) || isErrorResult(actionResult)) {\n updateFetcherState(key, getDoneFetcher(void 0));\n return;\n }\n } else {\n if (isRedirectResult(actionResult)) {\n fetchControllers.delete(key);\n if (pendingNavigationLoadId > originatingLoadId) {\n updateFetcherState(key, getDoneFetcher(void 0));\n return;\n } else {\n fetchRedirectIds.add(key);\n updateFetcherState(key, getLoadingFetcher(submission));\n return startRedirectNavigation(fetchRequest, actionResult, false, {\n fetcherSubmission: submission,\n preventScrollReset\n });\n }\n }\n if (isErrorResult(actionResult)) {\n setFetcherError(key, routeId, actionResult.error);\n return;\n }\n }\n let nextLocation = state.navigation.location || state.location;\n let revalidationRequest = createClientSideRequest(\n init.history,\n nextLocation,\n abortController.signal\n );\n let routesToUse = inFlightDataRoutes || dataRoutes;\n let matches = state.navigation.state !== \"idle\" ? matchRoutes(routesToUse, state.navigation.location, basename) : state.matches;\n invariant(matches, \"Didn't find any matches after fetcher action\");\n let loadId = ++incrementingLoadId;\n fetchReloadIds.set(key, loadId);\n let loadFetcher = getLoadingFetcher(submission, actionResult.data);\n state.fetchers.set(key, loadFetcher);\n let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(\n init.history,\n state,\n matches,\n submission,\n nextLocation,\n false,\n isRevalidationRequired,\n cancelledFetcherLoads,\n fetchersQueuedForDeletion,\n fetchLoadMatches,\n fetchRedirectIds,\n routesToUse,\n basename,\n [match.route.id, actionResult]\n );\n revalidatingFetchers.filter((rf) => rf.key !== key).forEach((rf) => {\n let staleKey = rf.key;\n let existingFetcher2 = state.fetchers.get(staleKey);\n let revalidatingFetcher = getLoadingFetcher(\n void 0,\n existingFetcher2 ? existingFetcher2.data : void 0\n );\n state.fetchers.set(staleKey, revalidatingFetcher);\n abortFetcher(staleKey);\n if (rf.controller) {\n fetchControllers.set(staleKey, rf.controller);\n }\n });\n updateState({ fetchers: new Map(state.fetchers) });\n let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach((rf) => abortFetcher(rf.key));\n abortController.signal.addEventListener(\n \"abort\",\n abortPendingFetchRevalidations\n );\n let { loaderResults, fetcherResults } = await callLoadersAndMaybeResolveData(\n state,\n matches,\n matchesToLoad,\n revalidatingFetchers,\n revalidationRequest\n );\n if (abortController.signal.aborted) {\n return;\n }\n abortController.signal.removeEventListener(\n \"abort\",\n abortPendingFetchRevalidations\n );\n fetchReloadIds.delete(key);\n fetchControllers.delete(key);\n revalidatingFetchers.forEach((r) => fetchControllers.delete(r.key));\n let redirect2 = findRedirect(loaderResults);\n if (redirect2) {\n return startRedirectNavigation(\n revalidationRequest,\n redirect2.result,\n false,\n { preventScrollReset }\n );\n }\n redirect2 = findRedirect(fetcherResults);\n if (redirect2) {\n fetchRedirectIds.add(redirect2.key);\n return startRedirectNavigation(\n revalidationRequest,\n redirect2.result,\n false,\n { preventScrollReset }\n );\n }\n let { loaderData, errors } = processLoaderData(\n state,\n matches,\n loaderResults,\n void 0,\n revalidatingFetchers,\n fetcherResults\n );\n if (state.fetchers.has(key)) {\n let doneFetcher = getDoneFetcher(actionResult.data);\n state.fetchers.set(key, doneFetcher);\n }\n abortStaleFetchLoads(loadId);\n if (state.navigation.state === \"loading\" && loadId > pendingNavigationLoadId) {\n invariant(pendingAction, \"Expected pending action\");\n pendingNavigationController && pendingNavigationController.abort();\n completeNavigation(state.navigation.location, {\n matches,\n loaderData,\n errors,\n fetchers: new Map(state.fetchers)\n });\n } else {\n updateState({\n errors,\n loaderData: mergeLoaderData(\n state.loaderData,\n loaderData,\n matches,\n errors\n ),\n fetchers: new Map(state.fetchers)\n });\n isRevalidationRequired = false;\n }\n }\n async function handleFetcherLoader(key, routeId, path, match, matches, isFogOfWar, flushSync, preventScrollReset, submission) {\n let existingFetcher = state.fetchers.get(key);\n updateFetcherState(\n key,\n getLoadingFetcher(\n submission,\n existingFetcher ? existingFetcher.data : void 0\n ),\n { flushSync }\n );\n let abortController = new AbortController();\n let fetchRequest = createClientSideRequest(\n init.history,\n path,\n abortController.signal\n );\n if (isFogOfWar) {\n let discoverResult = await discoverRoutes(\n matches,\n path,\n fetchRequest.signal\n );\n if (discoverResult.type === \"aborted\") {\n return;\n } else if (discoverResult.type === \"error\") {\n setFetcherError(key, routeId, discoverResult.error, { flushSync });\n return;\n } else if (!discoverResult.matches) {\n setFetcherError(\n key,\n routeId,\n getInternalRouterError(404, { pathname: path }),\n { flushSync }\n );\n return;\n } else {\n matches = discoverResult.matches;\n match = getTargetMatch(matches, path);\n }\n }\n fetchControllers.set(key, abortController);\n let originatingLoadId = incrementingLoadId;\n let results = await callDataStrategy(\n \"loader\",\n state,\n fetchRequest,\n [match],\n matches,\n key\n );\n let result = results[match.route.id];\n if (fetchControllers.get(key) === abortController) {\n fetchControllers.delete(key);\n }\n if (fetchRequest.signal.aborted) {\n return;\n }\n if (fetchersQueuedForDeletion.has(key)) {\n updateFetcherState(key, getDoneFetcher(void 0));\n return;\n }\n if (isRedirectResult(result)) {\n if (pendingNavigationLoadId > originatingLoadId) {\n updateFetcherState(key, getDoneFetcher(void 0));\n return;\n } else {\n fetchRedirectIds.add(key);\n await startRedirectNavigation(fetchRequest, result, false, {\n preventScrollReset\n });\n return;\n }\n }\n if (isErrorResult(result)) {\n setFetcherError(key, routeId, result.error);\n return;\n }\n updateFetcherState(key, getDoneFetcher(result.data));\n }\n async function startRedirectNavigation(request, redirect2, isNavigation, {\n submission,\n fetcherSubmission,\n preventScrollReset,\n replace: replace2\n } = {}) {\n if (redirect2.response.headers.has(\"X-Remix-Revalidate\")) {\n isRevalidationRequired = true;\n }\n let location = redirect2.response.headers.get(\"Location\");\n invariant(location, \"Expected a Location header on the redirect Response\");\n location = normalizeRedirectLocation(\n location,\n new URL(request.url),\n basename\n );\n let redirectLocation = createLocation(state.location, location, {\n _isRedirect: true\n });\n if (isBrowser2) {\n let isDocumentReload = false;\n if (redirect2.response.headers.has(\"X-Remix-Reload-Document\")) {\n isDocumentReload = true;\n } else if (ABSOLUTE_URL_REGEX.test(location)) {\n const url = init.history.createURL(location);\n isDocumentReload = // Hard reload if it's an absolute URL to a new origin\n url.origin !== routerWindow.location.origin || // Hard reload if it's an absolute URL that does not match our basename\n stripBasename(url.pathname, basename) == null;\n }\n if (isDocumentReload) {\n if (replace2) {\n routerWindow.location.replace(location);\n } else {\n routerWindow.location.assign(location);\n }\n return;\n }\n }\n pendingNavigationController = null;\n let redirectNavigationType = replace2 === true || redirect2.response.headers.has(\"X-Remix-Replace\") ? \"REPLACE\" /* Replace */ : \"PUSH\" /* Push */;\n let { formMethod, formAction, formEncType } = state.navigation;\n if (!submission && !fetcherSubmission && formMethod && formAction && formEncType) {\n submission = getSubmissionFromNavigation(state.navigation);\n }\n let activeSubmission = submission || fetcherSubmission;\n if (redirectPreserveMethodStatusCodes.has(redirect2.response.status) && activeSubmission && isMutationMethod(activeSubmission.formMethod)) {\n await startNavigation(redirectNavigationType, redirectLocation, {\n submission: {\n ...activeSubmission,\n formAction: location\n },\n // Preserve these flags across redirects\n preventScrollReset: preventScrollReset || pendingPreventScrollReset,\n enableViewTransition: isNavigation ? pendingViewTransitionEnabled : void 0\n });\n } else {\n let overrideNavigation = getLoadingNavigation(\n redirectLocation,\n submission\n );\n await startNavigation(redirectNavigationType, redirectLocation, {\n overrideNavigation,\n // Send fetcher submissions through for shouldRevalidate\n fetcherSubmission,\n // Preserve these flags across redirects\n preventScrollReset: preventScrollReset || pendingPreventScrollReset,\n enableViewTransition: isNavigation ? pendingViewTransitionEnabled : void 0\n });\n }\n }\n async function callDataStrategy(type, state2, request, matchesToLoad, matches, fetcherKey) {\n let results;\n let dataResults = {};\n try {\n results = await callDataStrategyImpl(\n dataStrategyImpl,\n type,\n state2,\n request,\n matchesToLoad,\n matches,\n fetcherKey,\n manifest,\n mapRouteProperties2\n );\n } catch (e) {\n matchesToLoad.forEach((m) => {\n dataResults[m.route.id] = {\n type: \"error\" /* error */,\n error: e\n };\n });\n return dataResults;\n }\n for (let [routeId, result] of Object.entries(results)) {\n if (isRedirectDataStrategyResult(result)) {\n let response = result.result;\n dataResults[routeId] = {\n type: \"redirect\" /* redirect */,\n response: normalizeRelativeRoutingRedirectResponse(\n response,\n request,\n routeId,\n matches,\n basename\n )\n };\n } else {\n dataResults[routeId] = await convertDataStrategyResultToDataResult(\n result\n );\n }\n }\n return dataResults;\n }\n async function callLoadersAndMaybeResolveData(state2, matches, matchesToLoad, fetchersToLoad, request) {\n let loaderResultsPromise = callDataStrategy(\n \"loader\",\n state2,\n request,\n matchesToLoad,\n matches,\n null\n );\n let fetcherResultsPromise = Promise.all(\n fetchersToLoad.map(async (f) => {\n if (f.matches && f.match && f.controller) {\n let results = await callDataStrategy(\n \"loader\",\n state2,\n createClientSideRequest(init.history, f.path, f.controller.signal),\n [f.match],\n f.matches,\n f.key\n );\n let result = results[f.match.route.id];\n return { [f.key]: result };\n } else {\n return Promise.resolve({\n [f.key]: {\n type: \"error\" /* error */,\n error: getInternalRouterError(404, {\n pathname: f.path\n })\n }\n });\n }\n })\n );\n let loaderResults = await loaderResultsPromise;\n let fetcherResults = (await fetcherResultsPromise).reduce(\n (acc, r) => Object.assign(acc, r),\n {}\n );\n return {\n loaderResults,\n fetcherResults\n };\n }\n function interruptActiveLoads() {\n isRevalidationRequired = true;\n fetchLoadMatches.forEach((_, key) => {\n if (fetchControllers.has(key)) {\n cancelledFetcherLoads.add(key);\n }\n abortFetcher(key);\n });\n }\n function updateFetcherState(key, fetcher, opts = {}) {\n state.fetchers.set(key, fetcher);\n updateState(\n { fetchers: new Map(state.fetchers) },\n { flushSync: (opts && opts.flushSync) === true }\n );\n }\n function setFetcherError(key, routeId, error, opts = {}) {\n let boundaryMatch = findNearestBoundary(state.matches, routeId);\n deleteFetcher(key);\n updateState(\n {\n errors: {\n [boundaryMatch.route.id]: error\n },\n fetchers: new Map(state.fetchers)\n },\n { flushSync: (opts && opts.flushSync) === true }\n );\n }\n function getFetcher(key) {\n activeFetchers.set(key, (activeFetchers.get(key) || 0) + 1);\n if (fetchersQueuedForDeletion.has(key)) {\n fetchersQueuedForDeletion.delete(key);\n }\n return state.fetchers.get(key) || IDLE_FETCHER;\n }\n function deleteFetcher(key) {\n let fetcher = state.fetchers.get(key);\n if (fetchControllers.has(key) && !(fetcher && fetcher.state === \"loading\" && fetchReloadIds.has(key))) {\n abortFetcher(key);\n }\n fetchLoadMatches.delete(key);\n fetchReloadIds.delete(key);\n fetchRedirectIds.delete(key);\n fetchersQueuedForDeletion.delete(key);\n cancelledFetcherLoads.delete(key);\n state.fetchers.delete(key);\n }\n function queueFetcherForDeletion(key) {\n let count = (activeFetchers.get(key) || 0) - 1;\n if (count <= 0) {\n activeFetchers.delete(key);\n fetchersQueuedForDeletion.add(key);\n } else {\n activeFetchers.set(key, count);\n }\n updateState({ fetchers: new Map(state.fetchers) });\n }\n function abortFetcher(key) {\n let controller = fetchControllers.get(key);\n if (controller) {\n controller.abort();\n fetchControllers.delete(key);\n }\n }\n function markFetchersDone(keys) {\n for (let key of keys) {\n let fetcher = getFetcher(key);\n let doneFetcher = getDoneFetcher(fetcher.data);\n state.fetchers.set(key, doneFetcher);\n }\n }\n function markFetchRedirectsDone() {\n let doneKeys = [];\n let updatedFetchers = false;\n for (let key of fetchRedirectIds) {\n let fetcher = state.fetchers.get(key);\n invariant(fetcher, `Expected fetcher: ${key}`);\n if (fetcher.state === \"loading\") {\n fetchRedirectIds.delete(key);\n doneKeys.push(key);\n updatedFetchers = true;\n }\n }\n markFetchersDone(doneKeys);\n return updatedFetchers;\n }\n function abortStaleFetchLoads(landedId) {\n let yeetedKeys = [];\n for (let [key, id] of fetchReloadIds) {\n if (id < landedId) {\n let fetcher = state.fetchers.get(key);\n invariant(fetcher, `Expected fetcher: ${key}`);\n if (fetcher.state === \"loading\") {\n abortFetcher(key);\n fetchReloadIds.delete(key);\n yeetedKeys.push(key);\n }\n }\n }\n markFetchersDone(yeetedKeys);\n return yeetedKeys.length > 0;\n }\n function getBlocker(key, fn) {\n let blocker = state.blockers.get(key) || IDLE_BLOCKER;\n if (blockerFunctions.get(key) !== fn) {\n blockerFunctions.set(key, fn);\n }\n return blocker;\n }\n function deleteBlocker(key) {\n state.blockers.delete(key);\n blockerFunctions.delete(key);\n }\n function updateBlocker(key, newBlocker) {\n let blocker = state.blockers.get(key) || IDLE_BLOCKER;\n invariant(\n blocker.state === \"unblocked\" && newBlocker.state === \"blocked\" || blocker.state === \"blocked\" && newBlocker.state === \"blocked\" || blocker.state === \"blocked\" && newBlocker.state === \"proceeding\" || blocker.state === \"blocked\" && newBlocker.state === \"unblocked\" || blocker.state === \"proceeding\" && newBlocker.state === \"unblocked\",\n `Invalid blocker state transition: ${blocker.state} -> ${newBlocker.state}`\n );\n let blockers = new Map(state.blockers);\n blockers.set(key, newBlocker);\n updateState({ blockers });\n }\n function shouldBlockNavigation({\n currentLocation,\n nextLocation,\n historyAction\n }) {\n if (blockerFunctions.size === 0) {\n return;\n }\n if (blockerFunctions.size > 1) {\n warning(false, \"A router only supports one blocker at a time\");\n }\n let entries = Array.from(blockerFunctions.entries());\n let [blockerKey, blockerFunction] = entries[entries.length - 1];\n let blocker = state.blockers.get(blockerKey);\n if (blocker && blocker.state === \"proceeding\") {\n return;\n }\n if (blockerFunction({ currentLocation, nextLocation, historyAction })) {\n return blockerKey;\n }\n }\n function handleNavigational404(pathname) {\n let error = getInternalRouterError(404, { pathname });\n let routesToUse = inFlightDataRoutes || dataRoutes;\n let { matches, route } = getShortCircuitMatches(routesToUse);\n return { notFoundMatches: matches, route, error };\n }\n function enableScrollRestoration(positions, getPosition, getKey) {\n savedScrollPositions2 = positions;\n getScrollPosition = getPosition;\n getScrollRestorationKey2 = getKey || null;\n if (!initialScrollRestored && state.navigation === IDLE_NAVIGATION) {\n initialScrollRestored = true;\n let y = getSavedScrollPosition(state.location, state.matches);\n if (y != null) {\n updateState({ restoreScrollPosition: y });\n }\n }\n return () => {\n savedScrollPositions2 = null;\n getScrollPosition = null;\n getScrollRestorationKey2 = null;\n };\n }\n function getScrollKey(location, matches) {\n if (getScrollRestorationKey2) {\n let key = getScrollRestorationKey2(\n location,\n matches.map((m) => convertRouteMatchToUiMatch(m, state.loaderData))\n );\n return key || location.key;\n }\n return location.key;\n }\n function saveScrollPosition(location, matches) {\n if (savedScrollPositions2 && getScrollPosition) {\n let key = getScrollKey(location, matches);\n savedScrollPositions2[key] = getScrollPosition();\n }\n }\n function getSavedScrollPosition(location, matches) {\n if (savedScrollPositions2) {\n let key = getScrollKey(location, matches);\n let y = savedScrollPositions2[key];\n if (typeof y === \"number\") {\n return y;\n }\n }\n return null;\n }\n function checkFogOfWar(matches, routesToUse, pathname) {\n if (patchRoutesOnNavigationImpl) {\n if (!matches) {\n let fogMatches = matchRoutesImpl(\n routesToUse,\n pathname,\n basename,\n true\n );\n return { active: true, matches: fogMatches || [] };\n } else {\n if (Object.keys(matches[0].params).length > 0) {\n let partialMatches = matchRoutesImpl(\n routesToUse,\n pathname,\n basename,\n true\n );\n return { active: true, matches: partialMatches };\n }\n }\n }\n return { active: false, matches: null };\n }\n async function discoverRoutes(matches, pathname, signal) {\n if (!patchRoutesOnNavigationImpl) {\n return { type: \"success\", matches };\n }\n let partialMatches = matches;\n while (true) {\n let isNonHMR = inFlightDataRoutes == null;\n let routesToUse = inFlightDataRoutes || dataRoutes;\n let localManifest = manifest;\n try {\n await patchRoutesOnNavigationImpl({\n path: pathname,\n matches: partialMatches,\n patch: (routeId, children) => {\n if (signal.aborted) return;\n patchRoutesImpl(\n routeId,\n children,\n routesToUse,\n localManifest,\n mapRouteProperties2\n );\n }\n });\n } catch (e) {\n return { type: \"error\", error: e, partialMatches };\n } finally {\n if (isNonHMR && !signal.aborted) {\n dataRoutes = [...dataRoutes];\n }\n }\n if (signal.aborted) {\n return { type: \"aborted\" };\n }\n let newMatches = matchRoutes(routesToUse, pathname, basename);\n if (newMatches) {\n return { type: \"success\", matches: newMatches };\n }\n let newPartialMatches = matchRoutesImpl(\n routesToUse,\n pathname,\n basename,\n true\n );\n if (!newPartialMatches || partialMatches.length === newPartialMatches.length && partialMatches.every(\n (m, i) => m.route.id === newPartialMatches[i].route.id\n )) {\n return { type: \"success\", matches: null };\n }\n partialMatches = newPartialMatches;\n }\n }\n function _internalSetRoutes(newRoutes) {\n manifest = {};\n inFlightDataRoutes = convertRoutesToDataRoutes(\n newRoutes,\n mapRouteProperties2,\n void 0,\n manifest\n );\n }\n function patchRoutes(routeId, children) {\n let isNonHMR = inFlightDataRoutes == null;\n let routesToUse = inFlightDataRoutes || dataRoutes;\n patchRoutesImpl(\n routeId,\n children,\n routesToUse,\n manifest,\n mapRouteProperties2\n );\n if (isNonHMR) {\n dataRoutes = [...dataRoutes];\n updateState({});\n }\n }\n router = {\n get basename() {\n return basename;\n },\n get future() {\n return future;\n },\n get state() {\n return state;\n },\n get routes() {\n return dataRoutes;\n },\n get window() {\n return routerWindow;\n },\n initialize,\n subscribe,\n enableScrollRestoration,\n navigate,\n fetch: fetch2,\n revalidate,\n // Passthrough to history-aware createHref used by useHref so we get proper\n // hash-aware URLs in DOM paths\n createHref: (to) => init.history.createHref(to),\n encodeLocation: (to) => init.history.encodeLocation(to),\n getFetcher,\n deleteFetcher: queueFetcherForDeletion,\n dispose,\n getBlocker,\n deleteBlocker,\n patchRoutes,\n _internalFetchControllers: fetchControllers,\n // TODO: Remove setRoutes, it's temporary to avoid dealing with\n // updating the tree while validating the update algorithm.\n _internalSetRoutes\n };\n return router;\n}\nfunction createStaticHandler(routes, opts) {\n invariant(\n routes.length > 0,\n \"You must provide a non-empty routes array to createStaticHandler\"\n );\n let manifest = {};\n let basename = (opts ? opts.basename : null) || \"/\";\n let mapRouteProperties2 = opts?.mapRouteProperties || defaultMapRouteProperties;\n let dataRoutes = convertRoutesToDataRoutes(\n routes,\n mapRouteProperties2,\n void 0,\n manifest\n );\n async function query(request, {\n requestContext,\n skipLoaderErrorBubbling,\n dataStrategy\n } = {}) {\n let url = new URL(request.url);\n let method = request.method;\n let location = createLocation(\"\", createPath(url), null, \"default\");\n let matches = matchRoutes(dataRoutes, location, basename);\n if (!isValidMethod(method) && method !== \"HEAD\") {\n let error = getInternalRouterError(405, { method });\n let { matches: methodNotAllowedMatches, route } = getShortCircuitMatches(dataRoutes);\n return {\n basename,\n location,\n matches: methodNotAllowedMatches,\n loaderData: {},\n actionData: null,\n errors: {\n [route.id]: error\n },\n statusCode: error.status,\n loaderHeaders: {},\n actionHeaders: {}\n };\n } else if (!matches) {\n let error = getInternalRouterError(404, { pathname: location.pathname });\n let { matches: notFoundMatches, route } = getShortCircuitMatches(dataRoutes);\n return {\n basename,\n location,\n matches: notFoundMatches,\n loaderData: {},\n actionData: null,\n errors: {\n [route.id]: error\n },\n statusCode: error.status,\n loaderHeaders: {},\n actionHeaders: {}\n };\n }\n let result = await queryImpl(\n request,\n location,\n matches,\n requestContext,\n dataStrategy || null,\n skipLoaderErrorBubbling === true,\n null\n );\n if (isResponse(result)) {\n return result;\n }\n return { location, basename, ...result };\n }\n async function queryRoute(request, {\n routeId,\n requestContext,\n dataStrategy\n } = {}) {\n let url = new URL(request.url);\n let method = request.method;\n let location = createLocation(\"\", createPath(url), null, \"default\");\n let matches = matchRoutes(dataRoutes, location, basename);\n if (!isValidMethod(method) && method !== \"HEAD\" && method !== \"OPTIONS\") {\n throw getInternalRouterError(405, { method });\n } else if (!matches) {\n throw getInternalRouterError(404, { pathname: location.pathname });\n }\n let match = routeId ? matches.find((m) => m.route.id === routeId) : getTargetMatch(matches, location);\n if (routeId && !match) {\n throw getInternalRouterError(403, {\n pathname: location.pathname,\n routeId\n });\n } else if (!match) {\n throw getInternalRouterError(404, { pathname: location.pathname });\n }\n let result = await queryImpl(\n request,\n location,\n matches,\n requestContext,\n dataStrategy || null,\n false,\n match\n );\n if (isResponse(result)) {\n return result;\n }\n let error = result.errors ? Object.values(result.errors)[0] : void 0;\n if (error !== void 0) {\n throw error;\n }\n if (result.actionData) {\n return Object.values(result.actionData)[0];\n }\n if (result.loaderData) {\n return Object.values(result.loaderData)[0];\n }\n return void 0;\n }\n async function queryImpl(request, location, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch) {\n invariant(\n request.signal,\n \"query()/queryRoute() requests must contain an AbortController signal\"\n );\n try {\n if (isMutationMethod(request.method)) {\n let result2 = await submit(\n request,\n matches,\n routeMatch || getTargetMatch(matches, location),\n requestContext,\n dataStrategy,\n skipLoaderErrorBubbling,\n routeMatch != null\n );\n return result2;\n }\n let result = await loadRouteData(\n request,\n matches,\n requestContext,\n dataStrategy,\n skipLoaderErrorBubbling,\n routeMatch\n );\n return isResponse(result) ? result : {\n ...result,\n actionData: null,\n actionHeaders: {}\n };\n } catch (e) {\n if (isDataStrategyResult(e) && isResponse(e.result)) {\n if (e.type === \"error\" /* error */) {\n throw e.result;\n }\n return e.result;\n }\n if (isRedirectResponse(e)) {\n return e;\n }\n throw e;\n }\n }\n async function submit(request, matches, actionMatch, requestContext, dataStrategy, skipLoaderErrorBubbling, isRouteRequest) {\n let result;\n if (!actionMatch.route.action && !actionMatch.route.lazy) {\n let error = getInternalRouterError(405, {\n method: request.method,\n pathname: new URL(request.url).pathname,\n routeId: actionMatch.route.id\n });\n if (isRouteRequest) {\n throw error;\n }\n result = {\n type: \"error\" /* error */,\n error\n };\n } else {\n let results = await callDataStrategy(\n \"action\",\n request,\n [actionMatch],\n matches,\n isRouteRequest,\n requestContext,\n dataStrategy\n );\n result = results[actionMatch.route.id];\n if (request.signal.aborted) {\n throwStaticHandlerAbortedError(request, isRouteRequest);\n }\n }\n if (isRedirectResult(result)) {\n throw new Response(null, {\n status: result.response.status,\n headers: {\n Location: result.response.headers.get(\"Location\")\n }\n });\n }\n if (isRouteRequest) {\n if (isErrorResult(result)) {\n throw result.error;\n }\n return {\n matches: [actionMatch],\n loaderData: {},\n actionData: { [actionMatch.route.id]: result.data },\n errors: null,\n // Note: statusCode + headers are unused here since queryRoute will\n // return the raw Response or value\n statusCode: 200,\n loaderHeaders: {},\n actionHeaders: {}\n };\n }\n let loaderRequest = new Request(request.url, {\n headers: request.headers,\n redirect: request.redirect,\n signal: request.signal\n });\n if (isErrorResult(result)) {\n let boundaryMatch = skipLoaderErrorBubbling ? actionMatch : findNearestBoundary(matches, actionMatch.route.id);\n let context2 = await loadRouteData(\n loaderRequest,\n matches,\n requestContext,\n dataStrategy,\n skipLoaderErrorBubbling,\n null,\n [boundaryMatch.route.id, result]\n );\n return {\n ...context2,\n statusCode: isRouteErrorResponse(result.error) ? result.error.status : result.statusCode != null ? result.statusCode : 500,\n actionData: null,\n actionHeaders: {\n ...result.headers ? { [actionMatch.route.id]: result.headers } : {}\n }\n };\n }\n let context = await loadRouteData(\n loaderRequest,\n matches,\n requestContext,\n dataStrategy,\n skipLoaderErrorBubbling,\n null\n );\n return {\n ...context,\n actionData: {\n [actionMatch.route.id]: result.data\n },\n // action status codes take precedence over loader status codes\n ...result.statusCode ? { statusCode: result.statusCode } : {},\n actionHeaders: result.headers ? { [actionMatch.route.id]: result.headers } : {}\n };\n }\n async function loadRouteData(request, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch, pendingActionResult) {\n let isRouteRequest = routeMatch != null;\n if (isRouteRequest && !routeMatch?.route.loader && !routeMatch?.route.lazy) {\n throw getInternalRouterError(400, {\n method: request.method,\n pathname: new URL(request.url).pathname,\n routeId: routeMatch?.route.id\n });\n }\n let requestMatches = routeMatch ? [routeMatch] : pendingActionResult && isErrorResult(pendingActionResult[1]) ? getLoaderMatchesUntilBoundary(matches, pendingActionResult[0]) : matches;\n let matchesToLoad = requestMatches.filter(\n (m) => m.route.loader || m.route.lazy\n );\n if (matchesToLoad.length === 0) {\n return {\n matches,\n // Add a null for all matched routes for proper revalidation on the client\n loaderData: matches.reduce(\n (acc, m) => Object.assign(acc, { [m.route.id]: null }),\n {}\n ),\n errors: pendingActionResult && isErrorResult(pendingActionResult[1]) ? {\n [pendingActionResult[0]]: pendingActionResult[1].error\n } : null,\n statusCode: 200,\n loaderHeaders: {}\n };\n }\n let results = await callDataStrategy(\n \"loader\",\n request,\n matchesToLoad,\n matches,\n isRouteRequest,\n requestContext,\n dataStrategy\n );\n if (request.signal.aborted) {\n throwStaticHandlerAbortedError(request, isRouteRequest);\n }\n let context = processRouteLoaderData(\n matches,\n results,\n pendingActionResult,\n true,\n skipLoaderErrorBubbling\n );\n let executedLoaders = new Set(\n matchesToLoad.map((match) => match.route.id)\n );\n matches.forEach((match) => {\n if (!executedLoaders.has(match.route.id)) {\n context.loaderData[match.route.id] = null;\n }\n });\n return {\n ...context,\n matches\n };\n }\n async function callDataStrategy(type, request, matchesToLoad, matches, isRouteRequest, requestContext, dataStrategy) {\n let results = await callDataStrategyImpl(\n dataStrategy || defaultDataStrategy,\n type,\n null,\n request,\n matchesToLoad,\n matches,\n null,\n manifest,\n mapRouteProperties2,\n requestContext\n );\n let dataResults = {};\n await Promise.all(\n matches.map(async (match) => {\n if (!(match.route.id in results)) {\n return;\n }\n let result = results[match.route.id];\n if (isRedirectDataStrategyResult(result)) {\n let response = result.result;\n throw normalizeRelativeRoutingRedirectResponse(\n response,\n request,\n match.route.id,\n matches,\n basename\n );\n }\n if (isResponse(result.result) && isRouteRequest) {\n throw result;\n }\n dataResults[match.route.id] = await convertDataStrategyResultToDataResult(result);\n })\n );\n return dataResults;\n }\n return {\n dataRoutes,\n query,\n queryRoute\n };\n}\nfunction getStaticContextFromError(routes, context, error) {\n let newContext = {\n ...context,\n statusCode: isRouteErrorResponse(error) ? error.status : 500,\n errors: {\n [context._deepestRenderedBoundaryId || routes[0].id]: error\n }\n };\n return newContext;\n}\nfunction throwStaticHandlerAbortedError(request, isRouteRequest) {\n if (request.signal.reason !== void 0) {\n throw request.signal.reason;\n }\n let method = isRouteRequest ? \"queryRoute\" : \"query\";\n throw new Error(\n `${method}() call aborted without an \\`AbortSignal.reason\\`: ${request.method} ${request.url}`\n );\n}\nfunction isSubmissionNavigation(opts) {\n return opts != null && (\"formData\" in opts && opts.formData != null || \"body\" in opts && opts.body !== void 0);\n}\nfunction normalizeTo(location, matches, basename, to, fromRouteId, relative) {\n let contextualMatches;\n let activeRouteMatch;\n if (fromRouteId) {\n contextualMatches = [];\n for (let match of matches) {\n contextualMatches.push(match);\n if (match.route.id === fromRouteId) {\n activeRouteMatch = match;\n break;\n }\n }\n } else {\n contextualMatches = matches;\n activeRouteMatch = matches[matches.length - 1];\n }\n let path = resolveTo(\n to ? to : \".\",\n getResolveToMatches(contextualMatches),\n stripBasename(location.pathname, basename) || location.pathname,\n relative === \"path\"\n );\n if (to == null) {\n path.search = location.search;\n path.hash = location.hash;\n }\n if ((to == null || to === \"\" || to === \".\") && activeRouteMatch) {\n let nakedIndex = hasNakedIndexQuery(path.search);\n if (activeRouteMatch.route.index && !nakedIndex) {\n path.search = path.search ? path.search.replace(/^\\?/, \"?index&\") : \"?index\";\n } else if (!activeRouteMatch.route.index && nakedIndex) {\n let params = new URLSearchParams(path.search);\n let indexValues = params.getAll(\"index\");\n params.delete(\"index\");\n indexValues.filter((v) => v).forEach((v) => params.append(\"index\", v));\n let qs = params.toString();\n path.search = qs ? `?${qs}` : \"\";\n }\n }\n if (basename !== \"/\") {\n path.pathname = path.pathname === \"/\" ? basename : joinPaths([basename, path.pathname]);\n }\n return createPath(path);\n}\nfunction normalizeNavigateOptions(isFetcher, path, opts) {\n if (!opts || !isSubmissionNavigation(opts)) {\n return { path };\n }\n if (opts.formMethod && !isValidMethod(opts.formMethod)) {\n return {\n path,\n error: getInternalRouterError(405, { method: opts.formMethod })\n };\n }\n let getInvalidBodyError = () => ({\n path,\n error: getInternalRouterError(400, { type: \"invalid-body\" })\n });\n let rawFormMethod = opts.formMethod || \"get\";\n let formMethod = rawFormMethod.toUpperCase();\n let formAction = stripHashFromPath(path);\n if (opts.body !== void 0) {\n if (opts.formEncType === \"text/plain\") {\n if (!isMutationMethod(formMethod)) {\n return getInvalidBodyError();\n }\n let text = typeof opts.body === \"string\" ? opts.body : opts.body instanceof FormData || opts.body instanceof URLSearchParams ? (\n // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plain-text-form-data\n Array.from(opts.body.entries()).reduce(\n (acc, [name, value]) => `${acc}${name}=${value}\n`,\n \"\"\n )\n ) : String(opts.body);\n return {\n path,\n submission: {\n formMethod,\n formAction,\n formEncType: opts.formEncType,\n formData: void 0,\n json: void 0,\n text\n }\n };\n } else if (opts.formEncType === \"application/json\") {\n if (!isMutationMethod(formMethod)) {\n return getInvalidBodyError();\n }\n try {\n let json = typeof opts.body === \"string\" ? JSON.parse(opts.body) : opts.body;\n return {\n path,\n submission: {\n formMethod,\n formAction,\n formEncType: opts.formEncType,\n formData: void 0,\n json,\n text: void 0\n }\n };\n } catch (e) {\n return getInvalidBodyError();\n }\n }\n }\n invariant(\n typeof FormData === \"function\",\n \"FormData is not available in this environment\"\n );\n let searchParams;\n let formData;\n if (opts.formData) {\n searchParams = convertFormDataToSearchParams(opts.formData);\n formData = opts.formData;\n } else if (opts.body instanceof FormData) {\n searchParams = convertFormDataToSearchParams(opts.body);\n formData = opts.body;\n } else if (opts.body instanceof URLSearchParams) {\n searchParams = opts.body;\n formData = convertSearchParamsToFormData(searchParams);\n } else if (opts.body == null) {\n searchParams = new URLSearchParams();\n formData = new FormData();\n } else {\n try {\n searchParams = new URLSearchParams(opts.body);\n formData = convertSearchParamsToFormData(searchParams);\n } catch (e) {\n return getInvalidBodyError();\n }\n }\n let submission = {\n formMethod,\n formAction,\n formEncType: opts && opts.formEncType || \"application/x-www-form-urlencoded\",\n formData,\n json: void 0,\n text: void 0\n };\n if (isMutationMethod(submission.formMethod)) {\n return { path, submission };\n }\n let parsedPath = parsePath(path);\n if (isFetcher && parsedPath.search && hasNakedIndexQuery(parsedPath.search)) {\n searchParams.append(\"index\", \"\");\n }\n parsedPath.search = `?${searchParams}`;\n return { path: createPath(parsedPath), submission };\n}\nfunction getLoaderMatchesUntilBoundary(matches, boundaryId, includeBoundary = false) {\n let index = matches.findIndex((m) => m.route.id === boundaryId);\n if (index >= 0) {\n return matches.slice(0, includeBoundary ? index + 1 : index);\n }\n return matches;\n}\nfunction getMatchesToLoad(history, state, matches, submission, location, initialHydration, isRevalidationRequired, cancelledFetcherLoads, fetchersQueuedForDeletion, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionResult) {\n let actionResult = pendingActionResult ? isErrorResult(pendingActionResult[1]) ? pendingActionResult[1].error : pendingActionResult[1].data : void 0;\n let currentUrl = history.createURL(state.location);\n let nextUrl = history.createURL(location);\n let boundaryMatches = matches;\n if (initialHydration && state.errors) {\n boundaryMatches = getLoaderMatchesUntilBoundary(\n matches,\n Object.keys(state.errors)[0],\n true\n );\n } else if (pendingActionResult && isErrorResult(pendingActionResult[1])) {\n boundaryMatches = getLoaderMatchesUntilBoundary(\n matches,\n pendingActionResult[0]\n );\n }\n let actionStatus = pendingActionResult ? pendingActionResult[1].statusCode : void 0;\n let shouldSkipRevalidation = actionStatus && actionStatus >= 400;\n let navigationMatches = boundaryMatches.filter((match, index) => {\n let { route } = match;\n if (route.lazy) {\n return true;\n }\n if (route.loader == null) {\n return false;\n }\n if (initialHydration) {\n return shouldLoadRouteOnHydration(route, state.loaderData, state.errors);\n }\n if (isNewLoader(state.loaderData, state.matches[index], match)) {\n return true;\n }\n let currentRouteMatch = state.matches[index];\n let nextRouteMatch = match;\n return shouldRevalidateLoader(match, {\n currentUrl,\n currentParams: currentRouteMatch.params,\n nextUrl,\n nextParams: nextRouteMatch.params,\n ...submission,\n actionResult,\n actionStatus,\n defaultShouldRevalidate: shouldSkipRevalidation ? false : (\n // Forced revalidation due to submission, useRevalidator, or X-Remix-Revalidate\n isRevalidationRequired || currentUrl.pathname + currentUrl.search === nextUrl.pathname + nextUrl.search || // Search params affect all loaders\n currentUrl.search !== nextUrl.search || isNewRouteInstance(currentRouteMatch, nextRouteMatch)\n )\n });\n });\n let revalidatingFetchers = [];\n fetchLoadMatches.forEach((f, key) => {\n if (initialHydration || !matches.some((m) => m.route.id === f.routeId) || fetchersQueuedForDeletion.has(key)) {\n return;\n }\n let fetcherMatches = matchRoutes(routesToUse, f.path, basename);\n if (!fetcherMatches) {\n revalidatingFetchers.push({\n key,\n routeId: f.routeId,\n path: f.path,\n matches: null,\n match: null,\n controller: null\n });\n return;\n }\n let fetcher = state.fetchers.get(key);\n let fetcherMatch = getTargetMatch(fetcherMatches, f.path);\n let shouldRevalidate = false;\n if (fetchRedirectIds.has(key)) {\n shouldRevalidate = false;\n } else if (cancelledFetcherLoads.has(key)) {\n cancelledFetcherLoads.delete(key);\n shouldRevalidate = true;\n } else if (fetcher && fetcher.state !== \"idle\" && fetcher.data === void 0) {\n shouldRevalidate = isRevalidationRequired;\n } else {\n shouldRevalidate = shouldRevalidateLoader(fetcherMatch, {\n currentUrl,\n currentParams: state.matches[state.matches.length - 1].params,\n nextUrl,\n nextParams: matches[matches.length - 1].params,\n ...submission,\n actionResult,\n actionStatus,\n defaultShouldRevalidate: shouldSkipRevalidation ? false : isRevalidationRequired\n });\n }\n if (shouldRevalidate) {\n revalidatingFetchers.push({\n key,\n routeId: f.routeId,\n path: f.path,\n matches: fetcherMatches,\n match: fetcherMatch,\n controller: new AbortController()\n });\n }\n });\n return [navigationMatches, revalidatingFetchers];\n}\nfunction shouldLoadRouteOnHydration(route, loaderData, errors) {\n if (route.lazy) {\n return true;\n }\n if (!route.loader) {\n return false;\n }\n let hasData = loaderData != null && loaderData[route.id] !== void 0;\n let hasError = errors != null && errors[route.id] !== void 0;\n if (!hasData && hasError) {\n return false;\n }\n if (typeof route.loader === \"function\" && route.loader.hydrate === true) {\n return true;\n }\n return !hasData && !hasError;\n}\nfunction isNewLoader(currentLoaderData, currentMatch, match) {\n let isNew = (\n // [a] -> [a, b]\n !currentMatch || // [a, b] -> [a, c]\n match.route.id !== currentMatch.route.id\n );\n let isMissingData = !currentLoaderData.hasOwnProperty(match.route.id);\n return isNew || isMissingData;\n}\nfunction isNewRouteInstance(currentMatch, match) {\n let currentPath = currentMatch.route.path;\n return (\n // param change for this match, /users/123 -> /users/456\n currentMatch.pathname !== match.pathname || // splat param changed, which is not present in match.path\n // e.g. /files/images/avatar.jpg -> files/finances.xls\n currentPath != null && currentPath.endsWith(\"*\") && currentMatch.params[\"*\"] !== match.params[\"*\"]\n );\n}\nfunction shouldRevalidateLoader(loaderMatch, arg) {\n if (loaderMatch.route.shouldRevalidate) {\n let routeChoice = loaderMatch.route.shouldRevalidate(arg);\n if (typeof routeChoice === \"boolean\") {\n return routeChoice;\n }\n }\n return arg.defaultShouldRevalidate;\n}\nfunction patchRoutesImpl(routeId, children, routesToUse, manifest, mapRouteProperties2) {\n let childrenToPatch;\n if (routeId) {\n let route = manifest[routeId];\n invariant(\n route,\n `No route found to patch children into: routeId = ${routeId}`\n );\n if (!route.children) {\n route.children = [];\n }\n childrenToPatch = route.children;\n } else {\n childrenToPatch = routesToUse;\n }\n let uniqueChildren = children.filter(\n (newRoute) => !childrenToPatch.some(\n (existingRoute) => isSameRoute(newRoute, existingRoute)\n )\n );\n let newRoutes = convertRoutesToDataRoutes(\n uniqueChildren,\n mapRouteProperties2,\n [routeId || \"_\", \"patch\", String(childrenToPatch?.length || \"0\")],\n manifest\n );\n childrenToPatch.push(...newRoutes);\n}\nfunction isSameRoute(newRoute, existingRoute) {\n if (\"id\" in newRoute && \"id\" in existingRoute && newRoute.id === existingRoute.id) {\n return true;\n }\n if (!(newRoute.index === existingRoute.index && newRoute.path === existingRoute.path && newRoute.caseSensitive === existingRoute.caseSensitive)) {\n return false;\n }\n if ((!newRoute.children || newRoute.children.length === 0) && (!existingRoute.children || existingRoute.children.length === 0)) {\n return true;\n }\n return newRoute.children.every(\n (aChild, i) => existingRoute.children?.some((bChild) => isSameRoute(aChild, bChild))\n );\n}\nasync function loadLazyRouteModule(route, mapRouteProperties2, manifest) {\n if (!route.lazy) {\n return;\n }\n let lazyRoute = await route.lazy();\n if (!route.lazy) {\n return;\n }\n let routeToUpdate = manifest[route.id];\n invariant(routeToUpdate, \"No route found in manifest\");\n let routeUpdates = {};\n for (let lazyRouteProperty in lazyRoute) {\n let staticRouteValue = routeToUpdate[lazyRouteProperty];\n let isPropertyStaticallyDefined = staticRouteValue !== void 0 && // This property isn't static since it should always be updated based\n // on the route updates\n lazyRouteProperty !== \"hasErrorBoundary\";\n warning(\n !isPropertyStaticallyDefined,\n `Route \"${routeToUpdate.id}\" has a static property \"${lazyRouteProperty}\" defined but its lazy function is also returning a value for this property. The lazy route property \"${lazyRouteProperty}\" will be ignored.`\n );\n if (!isPropertyStaticallyDefined && !immutableRouteKeys.has(lazyRouteProperty)) {\n routeUpdates[lazyRouteProperty] = lazyRoute[lazyRouteProperty];\n }\n }\n Object.assign(routeToUpdate, routeUpdates);\n Object.assign(routeToUpdate, {\n // To keep things framework agnostic, we use the provided `mapRouteProperties`\n // function to set the framework-aware properties (`element`/`hasErrorBoundary`)\n // since the logic will differ between frameworks.\n ...mapRouteProperties2(routeToUpdate),\n lazy: void 0\n });\n}\nasync function defaultDataStrategy({\n matches\n}) {\n let matchesToLoad = matches.filter((m) => m.shouldLoad);\n let results = await Promise.all(matchesToLoad.map((m) => m.resolve()));\n return results.reduce(\n (acc, result, i) => Object.assign(acc, { [matchesToLoad[i].route.id]: result }),\n {}\n );\n}\nasync function callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties2, requestContext) {\n let loadRouteDefinitionsPromises = matches.map(\n (m) => m.route.lazy ? loadLazyRouteModule(m.route, mapRouteProperties2, manifest) : void 0\n );\n let dsMatches = matches.map((match, i) => {\n let loadRoutePromise = loadRouteDefinitionsPromises[i];\n let shouldLoad = matchesToLoad.some((m) => m.route.id === match.route.id);\n let resolve = async (handlerOverride) => {\n if (handlerOverride && request.method === \"GET\" && (match.route.lazy || match.route.loader)) {\n shouldLoad = true;\n }\n return shouldLoad ? callLoaderOrAction(\n type,\n request,\n match,\n loadRoutePromise,\n handlerOverride,\n requestContext\n ) : Promise.resolve({ type: \"data\" /* data */, result: void 0 });\n };\n return {\n ...match,\n shouldLoad,\n resolve\n };\n });\n let results = await dataStrategyImpl({\n matches: dsMatches,\n request,\n params: matches[0].params,\n fetcherKey,\n context: requestContext\n });\n try {\n await Promise.all(loadRouteDefinitionsPromises);\n } catch (e) {\n }\n return results;\n}\nasync function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, staticContext) {\n let result;\n let onReject;\n let runHandler = (handler) => {\n let reject;\n let abortPromise = new Promise((_, r) => reject = r);\n onReject = () => reject();\n request.signal.addEventListener(\"abort\", onReject);\n let actualHandler = (ctx) => {\n if (typeof handler !== \"function\") {\n return Promise.reject(\n new Error(\n `You cannot call the handler for a route which defines a boolean \"${type}\" [routeId: ${match.route.id}]`\n )\n );\n }\n return handler(\n {\n request,\n params: match.params,\n context: staticContext\n },\n ...ctx !== void 0 ? [ctx] : []\n );\n };\n let handlerPromise = (async () => {\n try {\n let val = await (handlerOverride ? handlerOverride((ctx) => actualHandler(ctx)) : actualHandler());\n return { type: \"data\", result: val };\n } catch (e) {\n return { type: \"error\", result: e };\n }\n })();\n return Promise.race([handlerPromise, abortPromise]);\n };\n try {\n let handler = match.route[type];\n if (loadRoutePromise) {\n if (handler) {\n let handlerError;\n let [value] = await Promise.all([\n // If the handler throws, don't let it immediately bubble out,\n // since we need to let the lazy() execution finish so we know if this\n // route has a boundary that can handle the error\n runHandler(handler).catch((e) => {\n handlerError = e;\n }),\n loadRoutePromise\n ]);\n if (handlerError !== void 0) {\n throw handlerError;\n }\n result = value;\n } else {\n await loadRoutePromise;\n handler = match.route[type];\n if (handler) {\n result = await runHandler(handler);\n } else if (type === \"action\") {\n let url = new URL(request.url);\n let pathname = url.pathname + url.search;\n throw getInternalRouterError(405, {\n method: request.method,\n pathname,\n routeId: match.route.id\n });\n } else {\n return { type: \"data\" /* data */, result: void 0 };\n }\n }\n } else if (!handler) {\n let url = new URL(request.url);\n let pathname = url.pathname + url.search;\n throw getInternalRouterError(404, {\n pathname\n });\n } else {\n result = await runHandler(handler);\n }\n } catch (e) {\n return { type: \"error\" /* error */, result: e };\n } finally {\n if (onReject) {\n request.signal.removeEventListener(\"abort\", onReject);\n }\n }\n return result;\n}\nasync function convertDataStrategyResultToDataResult(dataStrategyResult) {\n let { result, type } = dataStrategyResult;\n if (isResponse(result)) {\n let data2;\n try {\n let contentType = result.headers.get(\"Content-Type\");\n if (contentType && /\\bapplication\\/json\\b/.test(contentType)) {\n if (result.body == null) {\n data2 = null;\n } else {\n data2 = await result.json();\n }\n } else {\n data2 = await result.text();\n }\n } catch (e) {\n return { type: \"error\" /* error */, error: e };\n }\n if (type === \"error\" /* error */) {\n return {\n type: \"error\" /* error */,\n error: new ErrorResponseImpl(result.status, result.statusText, data2),\n statusCode: result.status,\n headers: result.headers\n };\n }\n return {\n type: \"data\" /* data */,\n data: data2,\n statusCode: result.status,\n headers: result.headers\n };\n }\n if (type === \"error\" /* error */) {\n if (isDataWithResponseInit(result)) {\n if (result.data instanceof Error) {\n return {\n type: \"error\" /* error */,\n error: result.data,\n statusCode: result.init?.status\n };\n }\n result = new ErrorResponseImpl(\n result.init?.status || 500,\n void 0,\n result.data\n );\n }\n return {\n type: \"error\" /* error */,\n error: result,\n statusCode: isRouteErrorResponse(result) ? result.status : void 0\n };\n }\n if (isDataWithResponseInit(result)) {\n return {\n type: \"data\" /* data */,\n data: result.data,\n statusCode: result.init?.status,\n headers: result.init?.headers ? new Headers(result.init.headers) : void 0\n };\n }\n return { type: \"data\" /* data */, data: result };\n}\nfunction normalizeRelativeRoutingRedirectResponse(response, request, routeId, matches, basename) {\n let location = response.headers.get(\"Location\");\n invariant(\n location,\n \"Redirects returned/thrown from loaders/actions must have a Location header\"\n );\n if (!ABSOLUTE_URL_REGEX.test(location)) {\n let trimmedMatches = matches.slice(\n 0,\n matches.findIndex((m) => m.route.id === routeId) + 1\n );\n location = normalizeTo(\n new URL(request.url),\n trimmedMatches,\n basename,\n location\n );\n response.headers.set(\"Location\", location);\n }\n return response;\n}\nfunction normalizeRedirectLocation(location, currentUrl, basename) {\n if (ABSOLUTE_URL_REGEX.test(location)) {\n let normalizedLocation = location;\n let url = normalizedLocation.startsWith(\"//\") ? new URL(currentUrl.protocol + normalizedLocation) : new URL(normalizedLocation);\n let isSameBasename = stripBasename(url.pathname, basename) != null;\n if (url.origin === currentUrl.origin && isSameBasename) {\n return url.pathname + url.search + url.hash;\n }\n }\n return location;\n}\nfunction createClientSideRequest(history, location, signal, submission) {\n let url = history.createURL(stripHashFromPath(location)).toString();\n let init = { signal };\n if (submission && isMutationMethod(submission.formMethod)) {\n let { formMethod, formEncType } = submission;\n init.method = formMethod.toUpperCase();\n if (formEncType === \"application/json\") {\n init.headers = new Headers({ \"Content-Type\": formEncType });\n init.body = JSON.stringify(submission.json);\n } else if (formEncType === \"text/plain\") {\n init.body = submission.text;\n } else if (formEncType === \"application/x-www-form-urlencoded\" && submission.formData) {\n init.body = convertFormDataToSearchParams(submission.formData);\n } else {\n init.body = submission.formData;\n }\n }\n return new Request(url, init);\n}\nfunction convertFormDataToSearchParams(formData) {\n let searchParams = new URLSearchParams();\n for (let [key, value] of formData.entries()) {\n searchParams.append(key, typeof value === \"string\" ? value : value.name);\n }\n return searchParams;\n}\nfunction convertSearchParamsToFormData(searchParams) {\n let formData = new FormData();\n for (let [key, value] of searchParams.entries()) {\n formData.append(key, value);\n }\n return formData;\n}\nfunction processRouteLoaderData(matches, results, pendingActionResult, isStaticHandler = false, skipLoaderErrorBubbling = false) {\n let loaderData = {};\n let errors = null;\n let statusCode;\n let foundError = false;\n let loaderHeaders = {};\n let pendingError = pendingActionResult && isErrorResult(pendingActionResult[1]) ? pendingActionResult[1].error : void 0;\n matches.forEach((match) => {\n if (!(match.route.id in results)) {\n return;\n }\n let id = match.route.id;\n let result = results[id];\n invariant(\n !isRedirectResult(result),\n \"Cannot handle redirect results in processLoaderData\"\n );\n if (isErrorResult(result)) {\n let error = result.error;\n if (pendingError !== void 0) {\n error = pendingError;\n pendingError = void 0;\n }\n errors = errors || {};\n if (skipLoaderErrorBubbling) {\n errors[id] = error;\n } else {\n let boundaryMatch = findNearestBoundary(matches, id);\n if (errors[boundaryMatch.route.id] == null) {\n errors[boundaryMatch.route.id] = error;\n }\n }\n if (!isStaticHandler) {\n loaderData[id] = ResetLoaderDataSymbol;\n }\n if (!foundError) {\n foundError = true;\n statusCode = isRouteErrorResponse(result.error) ? result.error.status : 500;\n }\n if (result.headers) {\n loaderHeaders[id] = result.headers;\n }\n } else {\n loaderData[id] = result.data;\n if (result.statusCode && result.statusCode !== 200 && !foundError) {\n statusCode = result.statusCode;\n }\n if (result.headers) {\n loaderHeaders[id] = result.headers;\n }\n }\n });\n if (pendingError !== void 0 && pendingActionResult) {\n errors = { [pendingActionResult[0]]: pendingError };\n loaderData[pendingActionResult[0]] = void 0;\n }\n return {\n loaderData,\n errors,\n statusCode: statusCode || 200,\n loaderHeaders\n };\n}\nfunction processLoaderData(state, matches, results, pendingActionResult, revalidatingFetchers, fetcherResults) {\n let { loaderData, errors } = processRouteLoaderData(\n matches,\n results,\n pendingActionResult\n );\n revalidatingFetchers.forEach((rf) => {\n let { key, match, controller } = rf;\n let result = fetcherResults[key];\n invariant(result, \"Did not find corresponding fetcher result\");\n if (controller && controller.signal.aborted) {\n return;\n } else if (isErrorResult(result)) {\n let boundaryMatch = findNearestBoundary(state.matches, match?.route.id);\n if (!(errors && errors[boundaryMatch.route.id])) {\n errors = {\n ...errors,\n [boundaryMatch.route.id]: result.error\n };\n }\n state.fetchers.delete(key);\n } else if (isRedirectResult(result)) {\n invariant(false, \"Unhandled fetcher revalidation redirect\");\n } else {\n let doneFetcher = getDoneFetcher(result.data);\n state.fetchers.set(key, doneFetcher);\n }\n });\n return { loaderData, errors };\n}\nfunction mergeLoaderData(loaderData, newLoaderData, matches, errors) {\n let mergedLoaderData = Object.entries(newLoaderData).filter(([, v]) => v !== ResetLoaderDataSymbol).reduce((merged, [k, v]) => {\n merged[k] = v;\n return merged;\n }, {});\n for (let match of matches) {\n let id = match.route.id;\n if (!newLoaderData.hasOwnProperty(id) && loaderData.hasOwnProperty(id) && match.route.loader) {\n mergedLoaderData[id] = loaderData[id];\n }\n if (errors && errors.hasOwnProperty(id)) {\n break;\n }\n }\n return mergedLoaderData;\n}\nfunction getActionDataForCommit(pendingActionResult) {\n if (!pendingActionResult) {\n return {};\n }\n return isErrorResult(pendingActionResult[1]) ? {\n // Clear out prior actionData on errors\n actionData: {}\n } : {\n actionData: {\n [pendingActionResult[0]]: pendingActionResult[1].data\n }\n };\n}\nfunction findNearestBoundary(matches, routeId) {\n let eligibleMatches = routeId ? matches.slice(0, matches.findIndex((m) => m.route.id === routeId) + 1) : [...matches];\n return eligibleMatches.reverse().find((m) => m.route.hasErrorBoundary === true) || matches[0];\n}\nfunction getShortCircuitMatches(routes) {\n let route = routes.length === 1 ? routes[0] : routes.find((r) => r.index || !r.path || r.path === \"/\") || {\n id: `__shim-error-route__`\n };\n return {\n matches: [\n {\n params: {},\n pathname: \"\",\n pathnameBase: \"\",\n route\n }\n ],\n route\n };\n}\nfunction getInternalRouterError(status, {\n pathname,\n routeId,\n method,\n type,\n message\n} = {}) {\n let statusText = \"Unknown Server Error\";\n let errorMessage = \"Unknown @remix-run/router error\";\n if (status === 400) {\n statusText = \"Bad Request\";\n if (method && pathname && routeId) {\n errorMessage = `You made a ${method} request to \"${pathname}\" but did not provide a \\`loader\\` for route \"${routeId}\", so there is no way to handle the request.`;\n } else if (type === \"invalid-body\") {\n errorMessage = \"Unable to encode submission body\";\n }\n } else if (status === 403) {\n statusText = \"Forbidden\";\n errorMessage = `Route \"${routeId}\" does not match URL \"${pathname}\"`;\n } else if (status === 404) {\n statusText = \"Not Found\";\n errorMessage = `No route matches URL \"${pathname}\"`;\n } else if (status === 405) {\n statusText = \"Method Not Allowed\";\n if (method && pathname && routeId) {\n errorMessage = `You made a ${method.toUpperCase()} request to \"${pathname}\" but did not provide an \\`action\\` for route \"${routeId}\", so there is no way to handle the request.`;\n } else if (method) {\n errorMessage = `Invalid request method \"${method.toUpperCase()}\"`;\n }\n }\n return new ErrorResponseImpl(\n status || 500,\n statusText,\n new Error(errorMessage),\n true\n );\n}\nfunction findRedirect(results) {\n let entries = Object.entries(results);\n for (let i = entries.length - 1; i >= 0; i--) {\n let [key, result] = entries[i];\n if (isRedirectResult(result)) {\n return { key, result };\n }\n }\n}\nfunction stripHashFromPath(path) {\n let parsedPath = typeof path === \"string\" ? parsePath(path) : path;\n return createPath({ ...parsedPath, hash: \"\" });\n}\nfunction isHashChangeOnly(a, b) {\n if (a.pathname !== b.pathname || a.search !== b.search) {\n return false;\n }\n if (a.hash === \"\") {\n return b.hash !== \"\";\n } else if (a.hash === b.hash) {\n return true;\n } else if (b.hash !== \"\") {\n return true;\n }\n return false;\n}\nfunction isDataStrategyResult(result) {\n return result != null && typeof result === \"object\" && \"type\" in result && \"result\" in result && (result.type === \"data\" /* data */ || result.type === \"error\" /* error */);\n}\nfunction isRedirectDataStrategyResult(result) {\n return isResponse(result.result) && redirectStatusCodes.has(result.result.status);\n}\nfunction isErrorResult(result) {\n return result.type === \"error\" /* error */;\n}\nfunction isRedirectResult(result) {\n return (result && result.type) === \"redirect\" /* redirect */;\n}\nfunction isDataWithResponseInit(value) {\n return typeof value === \"object\" && value != null && \"type\" in value && \"data\" in value && \"init\" in value && value.type === \"DataWithResponseInit\";\n}\nfunction isResponse(value) {\n return value != null && typeof value.status === \"number\" && typeof value.statusText === \"string\" && typeof value.headers === \"object\" && typeof value.body !== \"undefined\";\n}\nfunction isRedirectStatusCode(statusCode) {\n return redirectStatusCodes.has(statusCode);\n}\nfunction isRedirectResponse(result) {\n return isResponse(result) && isRedirectStatusCode(result.status) && result.headers.has(\"Location\");\n}\nfunction isValidMethod(method) {\n return validRequestMethods.has(method.toUpperCase());\n}\nfunction isMutationMethod(method) {\n return validMutationMethods.has(method.toUpperCase());\n}\nfunction hasNakedIndexQuery(search) {\n return new URLSearchParams(search).getAll(\"index\").some((v) => v === \"\");\n}\nfunction getTargetMatch(matches, location) {\n let search = typeof location === \"string\" ? parsePath(location).search : location.search;\n if (matches[matches.length - 1].route.index && hasNakedIndexQuery(search || \"\")) {\n return matches[matches.length - 1];\n }\n let pathMatches = getPathContributingMatches(matches);\n return pathMatches[pathMatches.length - 1];\n}\nfunction getSubmissionFromNavigation(navigation) {\n let { formMethod, formAction, formEncType, text, formData, json } = navigation;\n if (!formMethod || !formAction || !formEncType) {\n return;\n }\n if (text != null) {\n return {\n formMethod,\n formAction,\n formEncType,\n formData: void 0,\n json: void 0,\n text\n };\n } else if (formData != null) {\n return {\n formMethod,\n formAction,\n formEncType,\n formData,\n json: void 0,\n text: void 0\n };\n } else if (json !== void 0) {\n return {\n formMethod,\n formAction,\n formEncType,\n formData: void 0,\n json,\n text: void 0\n };\n }\n}\nfunction getLoadingNavigation(location, submission) {\n if (submission) {\n let navigation = {\n state: \"loading\",\n location,\n formMethod: submission.formMethod,\n formAction: submission.formAction,\n formEncType: submission.formEncType,\n formData: submission.formData,\n json: submission.json,\n text: submission.text\n };\n return navigation;\n } else {\n let navigation = {\n state: \"loading\",\n location,\n formMethod: void 0,\n formAction: void 0,\n formEncType: void 0,\n formData: void 0,\n json: void 0,\n text: void 0\n };\n return navigation;\n }\n}\nfunction getSubmittingNavigation(location, submission) {\n let navigation = {\n state: \"submitting\",\n location,\n formMethod: submission.formMethod,\n formAction: submission.formAction,\n formEncType: submission.formEncType,\n formData: submission.formData,\n json: submission.json,\n text: submission.text\n };\n return navigation;\n}\nfunction getLoadingFetcher(submission, data2) {\n if (submission) {\n let fetcher = {\n state: \"loading\",\n formMethod: submission.formMethod,\n formAction: submission.formAction,\n formEncType: submission.formEncType,\n formData: submission.formData,\n json: submission.json,\n text: submission.text,\n data: data2\n };\n return fetcher;\n } else {\n let fetcher = {\n state: \"loading\",\n formMethod: void 0,\n formAction: void 0,\n formEncType: void 0,\n formData: void 0,\n json: void 0,\n text: void 0,\n data: data2\n };\n return fetcher;\n }\n}\nfunction getSubmittingFetcher(submission, existingFetcher) {\n let fetcher = {\n state: \"submitting\",\n formMethod: submission.formMethod,\n formAction: submission.formAction,\n formEncType: submission.formEncType,\n formData: submission.formData,\n json: submission.json,\n text: submission.text,\n data: existingFetcher ? existingFetcher.data : void 0\n };\n return fetcher;\n}\nfunction getDoneFetcher(data2) {\n let fetcher = {\n state: \"idle\",\n formMethod: void 0,\n formAction: void 0,\n formEncType: void 0,\n formData: void 0,\n json: void 0,\n text: void 0,\n data: data2\n };\n return fetcher;\n}\nfunction restoreAppliedTransitions(_window, transitions) {\n try {\n let sessionPositions = _window.sessionStorage.getItem(\n TRANSITIONS_STORAGE_KEY\n );\n if (sessionPositions) {\n let json = JSON.parse(sessionPositions);\n for (let [k, v] of Object.entries(json || {})) {\n if (v && Array.isArray(v)) {\n transitions.set(k, new Set(v || []));\n }\n }\n }\n } catch (e) {\n }\n}\nfunction persistAppliedTransitions(_window, transitions) {\n if (transitions.size > 0) {\n let json = {};\n for (let [k, v] of transitions) {\n json[k] = [...v];\n }\n try {\n _window.sessionStorage.setItem(\n TRANSITIONS_STORAGE_KEY,\n JSON.stringify(json)\n );\n } catch (error) {\n warning(\n false,\n `Failed to save applied view transitions in sessionStorage (${error}).`\n );\n }\n }\n}\nfunction createDeferred() {\n let resolve;\n let reject;\n let promise = new Promise((res, rej) => {\n resolve = async (val) => {\n res(val);\n try {\n await promise;\n } catch (e) {\n }\n };\n reject = async (error) => {\n rej(error);\n try {\n await promise;\n } catch (e) {\n }\n };\n });\n return {\n promise,\n //@ts-ignore\n resolve,\n //@ts-ignore\n reject\n };\n}\n\n// lib/components.tsx\nimport * as React3 from \"react\";\n\n// lib/context.ts\nimport * as React from \"react\";\nvar DataRouterContext = React.createContext(null);\nDataRouterContext.displayName = \"DataRouter\";\nvar DataRouterStateContext = React.createContext(null);\nDataRouterStateContext.displayName = \"DataRouterState\";\nvar ViewTransitionContext = React.createContext({\n isTransitioning: false\n});\nViewTransitionContext.displayName = \"ViewTransition\";\nvar FetchersContext = React.createContext(\n /* @__PURE__ */ new Map()\n);\nFetchersContext.displayName = \"Fetchers\";\nvar AwaitContext = React.createContext(null);\nAwaitContext.displayName = \"Await\";\nvar NavigationContext = React.createContext(\n null\n);\nNavigationContext.displayName = \"Navigation\";\nvar LocationContext = React.createContext(\n null\n);\nLocationContext.displayName = \"Location\";\nvar RouteContext = React.createContext({\n outlet: null,\n matches: [],\n isDataRoute: false\n});\nRouteContext.displayName = \"Route\";\nvar RouteErrorContext = React.createContext(null);\nRouteErrorContext.displayName = \"RouteError\";\n\n// lib/hooks.tsx\nimport * as React2 from \"react\";\nvar ENABLE_DEV_WARNINGS = true;\nfunction useHref(to, { relative } = {}) {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useHref() may be used only in the context of a component.`\n );\n let { basename, navigator: navigator2 } = React2.useContext(NavigationContext);\n let { hash, pathname, search } = useResolvedPath(to, { relative });\n let joinedPathname = pathname;\n if (basename !== \"/\") {\n joinedPathname = pathname === \"/\" ? basename : joinPaths([basename, pathname]);\n }\n return navigator2.createHref({ pathname: joinedPathname, search, hash });\n}\nfunction useInRouterContext() {\n return React2.useContext(LocationContext) != null;\n}\nfunction useLocation() {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useLocation() may be used only in the context of a component.`\n );\n return React2.useContext(LocationContext).location;\n}\nfunction useNavigationType() {\n return React2.useContext(LocationContext).navigationType;\n}\nfunction useMatch(pattern) {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useMatch() may be used only in the context of a component.`\n );\n let { pathname } = useLocation();\n return React2.useMemo(\n () => matchPath(pattern, decodePath(pathname)),\n [pathname, pattern]\n );\n}\nvar navigateEffectWarning = `You should call navigate() in a React.useEffect(), not when your component is first rendered.`;\nfunction useIsomorphicLayoutEffect(cb) {\n let isStatic = React2.useContext(NavigationContext).static;\n if (!isStatic) {\n React2.useLayoutEffect(cb);\n }\n}\nfunction useNavigate() {\n let { isDataRoute } = React2.useContext(RouteContext);\n return isDataRoute ? useNavigateStable() : useNavigateUnstable();\n}\nfunction useNavigateUnstable() {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useNavigate() may be used only in the context of a component.`\n );\n let dataRouterContext = React2.useContext(DataRouterContext);\n let { basename, navigator: navigator2 } = React2.useContext(NavigationContext);\n let { matches } = React2.useContext(RouteContext);\n let { pathname: locationPathname } = useLocation();\n let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));\n let activeRef = React2.useRef(false);\n useIsomorphicLayoutEffect(() => {\n activeRef.current = true;\n });\n let navigate = React2.useCallback(\n (to, options = {}) => {\n warning(activeRef.current, navigateEffectWarning);\n if (!activeRef.current) return;\n if (typeof to === \"number\") {\n navigator2.go(to);\n return;\n }\n let path = resolveTo(\n to,\n JSON.parse(routePathnamesJson),\n locationPathname,\n options.relative === \"path\"\n );\n if (dataRouterContext == null && basename !== \"/\") {\n path.pathname = path.pathname === \"/\" ? basename : joinPaths([basename, path.pathname]);\n }\n (!!options.replace ? navigator2.replace : navigator2.push)(\n path,\n options.state,\n options\n );\n },\n [\n basename,\n navigator2,\n routePathnamesJson,\n locationPathname,\n dataRouterContext\n ]\n );\n return navigate;\n}\nvar OutletContext = React2.createContext(null);\nfunction useOutletContext() {\n return React2.useContext(OutletContext);\n}\nfunction useOutlet(context) {\n let outlet = React2.useContext(RouteContext).outlet;\n if (outlet) {\n return /* @__PURE__ */ React2.createElement(OutletContext.Provider, { value: context }, outlet);\n }\n return outlet;\n}\nfunction useParams() {\n let { matches } = React2.useContext(RouteContext);\n let routeMatch = matches[matches.length - 1];\n return routeMatch ? routeMatch.params : {};\n}\nfunction useResolvedPath(to, { relative } = {}) {\n let { matches } = React2.useContext(RouteContext);\n let { pathname: locationPathname } = useLocation();\n let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));\n return React2.useMemo(\n () => resolveTo(\n to,\n JSON.parse(routePathnamesJson),\n locationPathname,\n relative === \"path\"\n ),\n [to, routePathnamesJson, locationPathname, relative]\n );\n}\nfunction useRoutes(routes, locationArg) {\n return useRoutesImpl(routes, locationArg);\n}\nfunction useRoutesImpl(routes, locationArg, dataRouterState, future) {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of the\n // router loaded. We can help them understand how to avoid that.\n `useRoutes() may be used only in the context of a component.`\n );\n let { navigator: navigator2 } = React2.useContext(NavigationContext);\n let { matches: parentMatches } = React2.useContext(RouteContext);\n let routeMatch = parentMatches[parentMatches.length - 1];\n let parentParams = routeMatch ? routeMatch.params : {};\n let parentPathname = routeMatch ? routeMatch.pathname : \"/\";\n let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : \"/\";\n let parentRoute = routeMatch && routeMatch.route;\n if (ENABLE_DEV_WARNINGS) {\n let parentPath = parentRoute && parentRoute.path || \"\";\n warningOnce(\n parentPathname,\n !parentRoute || parentPath.endsWith(\"*\") || parentPath.endsWith(\"*?\"),\n `You rendered descendant (or called \\`useRoutes()\\`) at \"${parentPathname}\" (under ) but the parent route path has no trailing \"*\". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.\n\nPlease change the parent to .`\n );\n }\n let locationFromContext = useLocation();\n let location;\n if (locationArg) {\n let parsedLocationArg = typeof locationArg === \"string\" ? parsePath(locationArg) : locationArg;\n invariant(\n parentPathnameBase === \"/\" || parsedLocationArg.pathname?.startsWith(parentPathnameBase),\n `When overriding the location using \\`\\` or \\`useRoutes(routes, location)\\`, the location pathname must begin with the portion of the URL pathname that was matched by all parent routes. The current pathname base is \"${parentPathnameBase}\" but pathname \"${parsedLocationArg.pathname}\" was given in the \\`location\\` prop.`\n );\n location = parsedLocationArg;\n } else {\n location = locationFromContext;\n }\n let pathname = location.pathname || \"/\";\n let remainingPathname = pathname;\n if (parentPathnameBase !== \"/\") {\n let parentSegments = parentPathnameBase.replace(/^\\//, \"\").split(\"/\");\n let segments = pathname.replace(/^\\//, \"\").split(\"/\");\n remainingPathname = \"/\" + segments.slice(parentSegments.length).join(\"/\");\n }\n let matches = matchRoutes(routes, { pathname: remainingPathname });\n if (ENABLE_DEV_WARNINGS) {\n warning(\n parentRoute || matches != null,\n `No routes matched location \"${location.pathname}${location.search}${location.hash}\" `\n );\n warning(\n matches == null || matches[matches.length - 1].route.element !== void 0 || matches[matches.length - 1].route.Component !== void 0 || matches[matches.length - 1].route.lazy !== void 0,\n `Matched leaf route at location \"${location.pathname}${location.search}${location.hash}\" does not have an element or Component. This means it will render an with a null value by default resulting in an \"empty\" page.`\n );\n }\n let renderedMatches = _renderMatches(\n matches && matches.map(\n (match) => Object.assign({}, match, {\n params: Object.assign({}, parentParams, match.params),\n pathname: joinPaths([\n parentPathnameBase,\n // Re-encode pathnames that were decoded inside matchRoutes\n navigator2.encodeLocation ? navigator2.encodeLocation(match.pathname).pathname : match.pathname\n ]),\n pathnameBase: match.pathnameBase === \"/\" ? parentPathnameBase : joinPaths([\n parentPathnameBase,\n // Re-encode pathnames that were decoded inside matchRoutes\n navigator2.encodeLocation ? navigator2.encodeLocation(match.pathnameBase).pathname : match.pathnameBase\n ])\n })\n ),\n parentMatches,\n dataRouterState,\n future\n );\n if (locationArg && renderedMatches) {\n return /* @__PURE__ */ React2.createElement(\n LocationContext.Provider,\n {\n value: {\n location: {\n pathname: \"/\",\n search: \"\",\n hash: \"\",\n state: null,\n key: \"default\",\n ...location\n },\n navigationType: \"POP\" /* Pop */\n }\n },\n renderedMatches\n );\n }\n return renderedMatches;\n}\nfunction DefaultErrorComponent() {\n let error = useRouteError();\n let message = isRouteErrorResponse(error) ? `${error.status} ${error.statusText}` : error instanceof Error ? error.message : JSON.stringify(error);\n let stack = error instanceof Error ? error.stack : null;\n let lightgrey = \"rgba(200,200,200, 0.5)\";\n let preStyles = { padding: \"0.5rem\", backgroundColor: lightgrey };\n let codeStyles = { padding: \"2px 4px\", backgroundColor: lightgrey };\n let devInfo = null;\n if (ENABLE_DEV_WARNINGS) {\n console.error(\n \"Error handled by React Router default ErrorBoundary:\",\n error\n );\n devInfo = /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(\"p\", null, \"\\u{1F4BF} Hey developer \\u{1F44B}\"), /* @__PURE__ */ React2.createElement(\"p\", null, \"You can provide a way better UX than this when your app throws errors by providing your own \", /* @__PURE__ */ React2.createElement(\"code\", { style: codeStyles }, \"ErrorBoundary\"), \" or\", \" \", /* @__PURE__ */ React2.createElement(\"code\", { style: codeStyles }, \"errorElement\"), \" prop on your route.\"));\n }\n return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(\"h2\", null, \"Unexpected Application Error!\"), /* @__PURE__ */ React2.createElement(\"h3\", { style: { fontStyle: \"italic\" } }, message), stack ? /* @__PURE__ */ React2.createElement(\"pre\", { style: preStyles }, stack) : null, devInfo);\n}\nvar defaultErrorElement = /* @__PURE__ */ React2.createElement(DefaultErrorComponent, null);\nvar RenderErrorBoundary = class extends React2.Component {\n constructor(props) {\n super(props);\n this.state = {\n location: props.location,\n revalidation: props.revalidation,\n error: props.error\n };\n }\n static getDerivedStateFromError(error) {\n return { error };\n }\n static getDerivedStateFromProps(props, state) {\n if (state.location !== props.location || state.revalidation !== \"idle\" && props.revalidation === \"idle\") {\n return {\n error: props.error,\n location: props.location,\n revalidation: props.revalidation\n };\n }\n return {\n error: props.error !== void 0 ? props.error : state.error,\n location: state.location,\n revalidation: props.revalidation || state.revalidation\n };\n }\n componentDidCatch(error, errorInfo) {\n console.error(\n \"React Router caught the following error during render\",\n error,\n errorInfo\n );\n }\n render() {\n return this.state.error !== void 0 ? /* @__PURE__ */ React2.createElement(RouteContext.Provider, { value: this.props.routeContext }, /* @__PURE__ */ React2.createElement(\n RouteErrorContext.Provider,\n {\n value: this.state.error,\n children: this.props.component\n }\n )) : this.props.children;\n }\n};\nfunction RenderedRoute({ routeContext, match, children }) {\n let dataRouterContext = React2.useContext(DataRouterContext);\n if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && (match.route.errorElement || match.route.ErrorBoundary)) {\n dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;\n }\n return /* @__PURE__ */ React2.createElement(RouteContext.Provider, { value: routeContext }, children);\n}\nfunction _renderMatches(matches, parentMatches = [], dataRouterState = null, future = null) {\n if (matches == null) {\n if (!dataRouterState) {\n return null;\n }\n if (dataRouterState.errors) {\n matches = dataRouterState.matches;\n } else if (parentMatches.length === 0 && !dataRouterState.initialized && dataRouterState.matches.length > 0) {\n matches = dataRouterState.matches;\n } else {\n return null;\n }\n }\n let renderedMatches = matches;\n let errors = dataRouterState?.errors;\n if (errors != null) {\n let errorIndex = renderedMatches.findIndex(\n (m) => m.route.id && errors?.[m.route.id] !== void 0\n );\n invariant(\n errorIndex >= 0,\n `Could not find a matching route for errors on route IDs: ${Object.keys(\n errors\n ).join(\",\")}`\n );\n renderedMatches = renderedMatches.slice(\n 0,\n Math.min(renderedMatches.length, errorIndex + 1)\n );\n }\n let renderFallback = false;\n let fallbackIndex = -1;\n if (dataRouterState) {\n for (let i = 0; i < renderedMatches.length; i++) {\n let match = renderedMatches[i];\n if (match.route.HydrateFallback || match.route.hydrateFallbackElement) {\n fallbackIndex = i;\n }\n if (match.route.id) {\n let { loaderData, errors: errors2 } = dataRouterState;\n let needsToRunLoader = match.route.loader && !loaderData.hasOwnProperty(match.route.id) && (!errors2 || errors2[match.route.id] === void 0);\n if (match.route.lazy || needsToRunLoader) {\n renderFallback = true;\n if (fallbackIndex >= 0) {\n renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);\n } else {\n renderedMatches = [renderedMatches[0]];\n }\n break;\n }\n }\n }\n }\n return renderedMatches.reduceRight((outlet, match, index) => {\n let error;\n let shouldRenderHydrateFallback = false;\n let errorElement = null;\n let hydrateFallbackElement = null;\n if (dataRouterState) {\n error = errors && match.route.id ? errors[match.route.id] : void 0;\n errorElement = match.route.errorElement || defaultErrorElement;\n if (renderFallback) {\n if (fallbackIndex < 0 && index === 0) {\n warningOnce(\n \"route-fallback\",\n false,\n \"No `HydrateFallback` element provided to render during initial hydration\"\n );\n shouldRenderHydrateFallback = true;\n hydrateFallbackElement = null;\n } else if (fallbackIndex === index) {\n shouldRenderHydrateFallback = true;\n hydrateFallbackElement = match.route.hydrateFallbackElement || null;\n }\n }\n }\n let matches2 = parentMatches.concat(renderedMatches.slice(0, index + 1));\n let getChildren = () => {\n let children;\n if (error) {\n children = errorElement;\n } else if (shouldRenderHydrateFallback) {\n children = hydrateFallbackElement;\n } else if (match.route.Component) {\n children = /* @__PURE__ */ React2.createElement(match.route.Component, null);\n } else if (match.route.element) {\n children = match.route.element;\n } else {\n children = outlet;\n }\n return /* @__PURE__ */ React2.createElement(\n RenderedRoute,\n {\n match,\n routeContext: {\n outlet,\n matches: matches2,\n isDataRoute: dataRouterState != null\n },\n children\n }\n );\n };\n return dataRouterState && (match.route.ErrorBoundary || match.route.errorElement || index === 0) ? /* @__PURE__ */ React2.createElement(\n RenderErrorBoundary,\n {\n location: dataRouterState.location,\n revalidation: dataRouterState.revalidation,\n component: errorElement,\n error,\n children: getChildren(),\n routeContext: { outlet: null, matches: matches2, isDataRoute: true }\n }\n ) : getChildren();\n }, null);\n}\nfunction getDataRouterConsoleError(hookName) {\n return `${hookName} must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router.`;\n}\nfunction useDataRouterContext(hookName) {\n let ctx = React2.useContext(DataRouterContext);\n invariant(ctx, getDataRouterConsoleError(hookName));\n return ctx;\n}\nfunction useDataRouterState(hookName) {\n let state = React2.useContext(DataRouterStateContext);\n invariant(state, getDataRouterConsoleError(hookName));\n return state;\n}\nfunction useRouteContext(hookName) {\n let route = React2.useContext(RouteContext);\n invariant(route, getDataRouterConsoleError(hookName));\n return route;\n}\nfunction useCurrentRouteId(hookName) {\n let route = useRouteContext(hookName);\n let thisRoute = route.matches[route.matches.length - 1];\n invariant(\n thisRoute.route.id,\n `${hookName} can only be used on routes that contain a unique \"id\"`\n );\n return thisRoute.route.id;\n}\nfunction useRouteId() {\n return useCurrentRouteId(\"useRouteId\" /* UseRouteId */);\n}\nfunction useNavigation() {\n let state = useDataRouterState(\"useNavigation\" /* UseNavigation */);\n return state.navigation;\n}\nfunction useRevalidator() {\n let dataRouterContext = useDataRouterContext(\"useRevalidator\" /* UseRevalidator */);\n let state = useDataRouterState(\"useRevalidator\" /* UseRevalidator */);\n return React2.useMemo(\n () => ({\n async revalidate() {\n await dataRouterContext.router.revalidate();\n },\n state: state.revalidation\n }),\n [dataRouterContext.router, state.revalidation]\n );\n}\nfunction useMatches() {\n let { matches, loaderData } = useDataRouterState(\n \"useMatches\" /* UseMatches */\n );\n return React2.useMemo(\n () => matches.map((m) => convertRouteMatchToUiMatch(m, loaderData)),\n [matches, loaderData]\n );\n}\nfunction useLoaderData() {\n let state = useDataRouterState(\"useLoaderData\" /* UseLoaderData */);\n let routeId = useCurrentRouteId(\"useLoaderData\" /* UseLoaderData */);\n return state.loaderData[routeId];\n}\nfunction useRouteLoaderData(routeId) {\n let state = useDataRouterState(\"useRouteLoaderData\" /* UseRouteLoaderData */);\n return state.loaderData[routeId];\n}\nfunction useActionData() {\n let state = useDataRouterState(\"useActionData\" /* UseActionData */);\n let routeId = useCurrentRouteId(\"useLoaderData\" /* UseLoaderData */);\n return state.actionData ? state.actionData[routeId] : void 0;\n}\nfunction useRouteError() {\n let error = React2.useContext(RouteErrorContext);\n let state = useDataRouterState(\"useRouteError\" /* UseRouteError */);\n let routeId = useCurrentRouteId(\"useRouteError\" /* UseRouteError */);\n if (error !== void 0) {\n return error;\n }\n return state.errors?.[routeId];\n}\nfunction useAsyncValue() {\n let value = React2.useContext(AwaitContext);\n return value?._data;\n}\nfunction useAsyncError() {\n let value = React2.useContext(AwaitContext);\n return value?._error;\n}\nvar blockerId = 0;\nfunction useBlocker(shouldBlock) {\n let { router, basename } = useDataRouterContext(\"useBlocker\" /* UseBlocker */);\n let state = useDataRouterState(\"useBlocker\" /* UseBlocker */);\n let [blockerKey, setBlockerKey] = React2.useState(\"\");\n let blockerFunction = React2.useCallback(\n (arg) => {\n if (typeof shouldBlock !== \"function\") {\n return !!shouldBlock;\n }\n if (basename === \"/\") {\n return shouldBlock(arg);\n }\n let { currentLocation, nextLocation, historyAction } = arg;\n return shouldBlock({\n currentLocation: {\n ...currentLocation,\n pathname: stripBasename(currentLocation.pathname, basename) || currentLocation.pathname\n },\n nextLocation: {\n ...nextLocation,\n pathname: stripBasename(nextLocation.pathname, basename) || nextLocation.pathname\n },\n historyAction\n });\n },\n [basename, shouldBlock]\n );\n React2.useEffect(() => {\n let key = String(++blockerId);\n setBlockerKey(key);\n return () => router.deleteBlocker(key);\n }, [router]);\n React2.useEffect(() => {\n if (blockerKey !== \"\") {\n router.getBlocker(blockerKey, blockerFunction);\n }\n }, [router, blockerKey, blockerFunction]);\n return blockerKey && state.blockers.has(blockerKey) ? state.blockers.get(blockerKey) : IDLE_BLOCKER;\n}\nfunction useNavigateStable() {\n let { router } = useDataRouterContext(\"useNavigate\" /* UseNavigateStable */);\n let id = useCurrentRouteId(\"useNavigate\" /* UseNavigateStable */);\n let activeRef = React2.useRef(false);\n useIsomorphicLayoutEffect(() => {\n activeRef.current = true;\n });\n let navigate = React2.useCallback(\n async (to, options = {}) => {\n warning(activeRef.current, navigateEffectWarning);\n if (!activeRef.current) return;\n if (typeof to === \"number\") {\n router.navigate(to);\n } else {\n await router.navigate(to, { fromRouteId: id, ...options });\n }\n },\n [router, id]\n );\n return navigate;\n}\nvar alreadyWarned = {};\nfunction warningOnce(key, cond, message) {\n if (!cond && !alreadyWarned[key]) {\n alreadyWarned[key] = true;\n warning(false, message);\n }\n}\n\n// lib/server-runtime/warnings.ts\nvar alreadyWarned2 = {};\nfunction warnOnce(condition, message) {\n if (!condition && !alreadyWarned2[message]) {\n alreadyWarned2[message] = true;\n console.warn(message);\n }\n}\n\n// lib/components.tsx\nvar ENABLE_DEV_WARNINGS2 = true;\nfunction mapRouteProperties(route) {\n let updates = {\n // Note: this check also occurs in createRoutesFromChildren so update\n // there if you change this -- please and thank you!\n hasErrorBoundary: route.hasErrorBoundary || route.ErrorBoundary != null || route.errorElement != null\n };\n if (route.Component) {\n if (ENABLE_DEV_WARNINGS2) {\n if (route.element) {\n warning(\n false,\n \"You should not include both `Component` and `element` on your route - `Component` will be used.\"\n );\n }\n }\n Object.assign(updates, {\n element: React3.createElement(route.Component),\n Component: void 0\n });\n }\n if (route.HydrateFallback) {\n if (ENABLE_DEV_WARNINGS2) {\n if (route.hydrateFallbackElement) {\n warning(\n false,\n \"You should not include both `HydrateFallback` and `hydrateFallbackElement` on your route - `HydrateFallback` will be used.\"\n );\n }\n }\n Object.assign(updates, {\n hydrateFallbackElement: React3.createElement(route.HydrateFallback),\n HydrateFallback: void 0\n });\n }\n if (route.ErrorBoundary) {\n if (ENABLE_DEV_WARNINGS2) {\n if (route.errorElement) {\n warning(\n false,\n \"You should not include both `ErrorBoundary` and `errorElement` on your route - `ErrorBoundary` will be used.\"\n );\n }\n }\n Object.assign(updates, {\n errorElement: React3.createElement(route.ErrorBoundary),\n ErrorBoundary: void 0\n });\n }\n return updates;\n}\nfunction createMemoryRouter(routes, opts) {\n return createRouter({\n basename: opts?.basename,\n future: opts?.future,\n history: createMemoryHistory({\n initialEntries: opts?.initialEntries,\n initialIndex: opts?.initialIndex\n }),\n hydrationData: opts?.hydrationData,\n routes,\n mapRouteProperties,\n dataStrategy: opts?.dataStrategy,\n patchRoutesOnNavigation: opts?.patchRoutesOnNavigation\n }).initialize();\n}\nvar Deferred = class {\n constructor() {\n this.status = \"pending\";\n this.promise = new Promise((resolve, reject) => {\n this.resolve = (value) => {\n if (this.status === \"pending\") {\n this.status = \"resolved\";\n resolve(value);\n }\n };\n this.reject = (reason) => {\n if (this.status === \"pending\") {\n this.status = \"rejected\";\n reject(reason);\n }\n };\n });\n }\n};\nfunction RouterProvider({\n router,\n flushSync: reactDomFlushSyncImpl\n}) {\n let [state, setStateImpl] = React3.useState(router.state);\n let [pendingState, setPendingState] = React3.useState();\n let [vtContext, setVtContext] = React3.useState({\n isTransitioning: false\n });\n let [renderDfd, setRenderDfd] = React3.useState();\n let [transition, setTransition] = React3.useState();\n let [interruption, setInterruption] = React3.useState();\n let fetcherData = React3.useRef(/* @__PURE__ */ new Map());\n let setState = React3.useCallback(\n (newState, { deletedFetchers, flushSync, viewTransitionOpts }) => {\n deletedFetchers.forEach((key) => fetcherData.current.delete(key));\n newState.fetchers.forEach((fetcher, key) => {\n if (fetcher.data !== void 0) {\n fetcherData.current.set(key, fetcher.data);\n }\n });\n warnOnce(\n flushSync === false || reactDomFlushSyncImpl != null,\n 'You provided the `flushSync` option to a router update, but you are not using the `` from `react-router/dom` so `ReactDOM.flushSync()` is unavailable. Please update your app to `import { RouterProvider } from \"react-router/dom\"` and ensure you have `react-dom` installed as a dependency to use the `flushSync` option.'\n );\n let isViewTransitionAvailable = router.window != null && router.window.document != null && typeof router.window.document.startViewTransition === \"function\";\n warnOnce(\n viewTransitionOpts == null || isViewTransitionAvailable,\n \"You provided the `viewTransition` option to a router update, but you do not appear to be running in a DOM environment as `window.startViewTransition` is not available.\"\n );\n if (!viewTransitionOpts || !isViewTransitionAvailable) {\n if (reactDomFlushSyncImpl && flushSync) {\n reactDomFlushSyncImpl(() => setStateImpl(newState));\n } else {\n React3.startTransition(() => setStateImpl(newState));\n }\n return;\n }\n if (reactDomFlushSyncImpl && flushSync) {\n reactDomFlushSyncImpl(() => {\n if (transition) {\n renderDfd && renderDfd.resolve();\n transition.skipTransition();\n }\n setVtContext({\n isTransitioning: true,\n flushSync: true,\n currentLocation: viewTransitionOpts.currentLocation,\n nextLocation: viewTransitionOpts.nextLocation\n });\n });\n let t = router.window.document.startViewTransition(() => {\n reactDomFlushSyncImpl(() => setStateImpl(newState));\n });\n t.finished.finally(() => {\n reactDomFlushSyncImpl(() => {\n setRenderDfd(void 0);\n setTransition(void 0);\n setPendingState(void 0);\n setVtContext({ isTransitioning: false });\n });\n });\n reactDomFlushSyncImpl(() => setTransition(t));\n return;\n }\n if (transition) {\n renderDfd && renderDfd.resolve();\n transition.skipTransition();\n setInterruption({\n state: newState,\n currentLocation: viewTransitionOpts.currentLocation,\n nextLocation: viewTransitionOpts.nextLocation\n });\n } else {\n setPendingState(newState);\n setVtContext({\n isTransitioning: true,\n flushSync: false,\n currentLocation: viewTransitionOpts.currentLocation,\n nextLocation: viewTransitionOpts.nextLocation\n });\n }\n },\n [router.window, reactDomFlushSyncImpl, transition, renderDfd]\n );\n React3.useLayoutEffect(() => router.subscribe(setState), [router, setState]);\n React3.useEffect(() => {\n if (vtContext.isTransitioning && !vtContext.flushSync) {\n setRenderDfd(new Deferred());\n }\n }, [vtContext]);\n React3.useEffect(() => {\n if (renderDfd && pendingState && router.window) {\n let newState = pendingState;\n let renderPromise = renderDfd.promise;\n let transition2 = router.window.document.startViewTransition(async () => {\n React3.startTransition(() => setStateImpl(newState));\n await renderPromise;\n });\n transition2.finished.finally(() => {\n setRenderDfd(void 0);\n setTransition(void 0);\n setPendingState(void 0);\n setVtContext({ isTransitioning: false });\n });\n setTransition(transition2);\n }\n }, [pendingState, renderDfd, router.window]);\n React3.useEffect(() => {\n if (renderDfd && pendingState && state.location.key === pendingState.location.key) {\n renderDfd.resolve();\n }\n }, [renderDfd, transition, state.location, pendingState]);\n React3.useEffect(() => {\n if (!vtContext.isTransitioning && interruption) {\n setPendingState(interruption.state);\n setVtContext({\n isTransitioning: true,\n flushSync: false,\n currentLocation: interruption.currentLocation,\n nextLocation: interruption.nextLocation\n });\n setInterruption(void 0);\n }\n }, [vtContext.isTransitioning, interruption]);\n let navigator2 = React3.useMemo(() => {\n return {\n createHref: router.createHref,\n encodeLocation: router.encodeLocation,\n go: (n) => router.navigate(n),\n push: (to, state2, opts) => router.navigate(to, {\n state: state2,\n preventScrollReset: opts?.preventScrollReset\n }),\n replace: (to, state2, opts) => router.navigate(to, {\n replace: true,\n state: state2,\n preventScrollReset: opts?.preventScrollReset\n })\n };\n }, [router]);\n let basename = router.basename || \"/\";\n let dataRouterContext = React3.useMemo(\n () => ({\n router,\n navigator: navigator2,\n static: false,\n basename\n }),\n [router, navigator2, basename]\n );\n return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React3.createElement(DataRouterStateContext.Provider, { value: state }, /* @__PURE__ */ React3.createElement(FetchersContext.Provider, { value: fetcherData.current }, /* @__PURE__ */ React3.createElement(ViewTransitionContext.Provider, { value: vtContext }, /* @__PURE__ */ React3.createElement(\n Router,\n {\n basename,\n location: state.location,\n navigationType: state.historyAction,\n navigator: navigator2\n },\n /* @__PURE__ */ React3.createElement(\n MemoizedDataRoutes,\n {\n routes: router.routes,\n future: router.future,\n state\n }\n )\n ))))), null);\n}\nvar MemoizedDataRoutes = React3.memo(DataRoutes);\nfunction DataRoutes({\n routes,\n future,\n state\n}) {\n return useRoutesImpl(routes, void 0, state, future);\n}\nfunction MemoryRouter({\n basename,\n children,\n initialEntries,\n initialIndex\n}) {\n let historyRef = React3.useRef();\n if (historyRef.current == null) {\n historyRef.current = createMemoryHistory({\n initialEntries,\n initialIndex,\n v5Compat: true\n });\n }\n let history = historyRef.current;\n let [state, setStateImpl] = React3.useState({\n action: history.action,\n location: history.location\n });\n let setState = React3.useCallback(\n (newState) => {\n React3.startTransition(() => setStateImpl(newState));\n },\n [setStateImpl]\n );\n React3.useLayoutEffect(() => history.listen(setState), [history, setState]);\n return /* @__PURE__ */ React3.createElement(\n Router,\n {\n basename,\n children,\n location: state.location,\n navigationType: state.action,\n navigator: history\n }\n );\n}\nfunction Navigate({\n to,\n replace: replace2,\n state,\n relative\n}) {\n invariant(\n useInRouterContext(),\n // TODO: This error is probably because they somehow have 2 versions of\n // the router loaded. We can help them understand how to avoid that.\n ` may be used only in the context of a component.`\n );\n let { static: isStatic } = React3.useContext(NavigationContext);\n warning(\n !isStatic,\n ` must not be used on the initial render in a . This is a no-op, but you should modify your code so the is only ever rendered in response to some user interaction or state change.`\n );\n let { matches } = React3.useContext(RouteContext);\n let { pathname: locationPathname } = useLocation();\n let navigate = useNavigate();\n let path = resolveTo(\n to,\n getResolveToMatches(matches),\n locationPathname,\n relative === \"path\"\n );\n let jsonPath = JSON.stringify(path);\n React3.useEffect(() => {\n navigate(JSON.parse(jsonPath), { replace: replace2, state, relative });\n }, [navigate, jsonPath, relative, replace2, state]);\n return null;\n}\nfunction Outlet(props) {\n return useOutlet(props.context);\n}\nfunction Route(_props) {\n invariant(\n false,\n `A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .`\n );\n}\nfunction Router({\n basename: basenameProp = \"/\",\n children = null,\n location: locationProp,\n navigationType = \"POP\" /* Pop */,\n navigator: navigator2,\n static: staticProp = false\n}) {\n invariant(\n !useInRouterContext(),\n `You cannot render a inside another . You should never have more than one in your app.`\n );\n let basename = basenameProp.replace(/^\\/*/, \"/\");\n let navigationContext = React3.useMemo(\n () => ({\n basename,\n navigator: navigator2,\n static: staticProp,\n future: {}\n }),\n [basename, navigator2, staticProp]\n );\n if (typeof locationProp === \"string\") {\n locationProp = parsePath(locationProp);\n }\n let {\n pathname = \"/\",\n search = \"\",\n hash = \"\",\n state = null,\n key = \"default\"\n } = locationProp;\n let locationContext = React3.useMemo(() => {\n let trailingPathname = stripBasename(pathname, basename);\n if (trailingPathname == null) {\n return null;\n }\n return {\n location: {\n pathname: trailingPathname,\n search,\n hash,\n state,\n key\n },\n navigationType\n };\n }, [basename, pathname, search, hash, state, key, navigationType]);\n warning(\n locationContext != null,\n ` is not able to match the URL \"${pathname}${search}${hash}\" because it does not start with the basename, so the won't render anything.`\n );\n if (locationContext == null) {\n return null;\n }\n return /* @__PURE__ */ React3.createElement(NavigationContext.Provider, { value: navigationContext }, /* @__PURE__ */ React3.createElement(LocationContext.Provider, { children, value: locationContext }));\n}\nfunction Routes({\n children,\n location\n}) {\n return useRoutes(createRoutesFromChildren(children), location);\n}\nfunction Await({\n children,\n errorElement,\n resolve\n}) {\n return /* @__PURE__ */ React3.createElement(AwaitErrorBoundary, { resolve, errorElement }, /* @__PURE__ */ React3.createElement(ResolveAwait, null, children));\n}\nvar AwaitErrorBoundary = class extends React3.Component {\n constructor(props) {\n super(props);\n this.state = { error: null };\n }\n static getDerivedStateFromError(error) {\n return { error };\n }\n componentDidCatch(error, errorInfo) {\n console.error(\n \" caught the following error during render\",\n error,\n errorInfo\n );\n }\n render() {\n let { children, errorElement, resolve } = this.props;\n let promise = null;\n let status = 0 /* pending */;\n if (!(resolve instanceof Promise)) {\n status = 1 /* success */;\n promise = Promise.resolve();\n Object.defineProperty(promise, \"_tracked\", { get: () => true });\n Object.defineProperty(promise, \"_data\", { get: () => resolve });\n } else if (this.state.error) {\n status = 2 /* error */;\n let renderError = this.state.error;\n promise = Promise.reject().catch(() => {\n });\n Object.defineProperty(promise, \"_tracked\", { get: () => true });\n Object.defineProperty(promise, \"_error\", { get: () => renderError });\n } else if (resolve._tracked) {\n promise = resolve;\n status = \"_error\" in promise ? 2 /* error */ : \"_data\" in promise ? 1 /* success */ : 0 /* pending */;\n } else {\n status = 0 /* pending */;\n Object.defineProperty(resolve, \"_tracked\", { get: () => true });\n promise = resolve.then(\n (data2) => Object.defineProperty(resolve, \"_data\", { get: () => data2 }),\n (error) => Object.defineProperty(resolve, \"_error\", { get: () => error })\n );\n }\n if (status === 2 /* error */ && !errorElement) {\n throw promise._error;\n }\n if (status === 2 /* error */) {\n return /* @__PURE__ */ React3.createElement(AwaitContext.Provider, { value: promise, children: errorElement });\n }\n if (status === 1 /* success */) {\n return /* @__PURE__ */ React3.createElement(AwaitContext.Provider, { value: promise, children });\n }\n throw promise;\n }\n};\nfunction ResolveAwait({\n children\n}) {\n let data2 = useAsyncValue();\n let toRender = typeof children === \"function\" ? children(data2) : children;\n return /* @__PURE__ */ React3.createElement(React3.Fragment, null, toRender);\n}\nfunction createRoutesFromChildren(children, parentPath = []) {\n let routes = [];\n React3.Children.forEach(children, (element, index) => {\n if (!React3.isValidElement(element)) {\n return;\n }\n let treePath = [...parentPath, index];\n if (element.type === React3.Fragment) {\n routes.push.apply(\n routes,\n createRoutesFromChildren(element.props.children, treePath)\n );\n return;\n }\n invariant(\n element.type === Route,\n `[${typeof element.type === \"string\" ? element.type : element.type.name}] is not a component. All component children of must be a or `\n );\n invariant(\n !element.props.index || !element.props.children,\n \"An index route cannot have child routes.\"\n );\n let route = {\n id: element.props.id || treePath.join(\"-\"),\n caseSensitive: element.props.caseSensitive,\n element: element.props.element,\n Component: element.props.Component,\n index: element.props.index,\n path: element.props.path,\n loader: element.props.loader,\n action: element.props.action,\n hydrateFallbackElement: element.props.hydrateFallbackElement,\n HydrateFallback: element.props.HydrateFallback,\n errorElement: element.props.errorElement,\n ErrorBoundary: element.props.ErrorBoundary,\n hasErrorBoundary: element.props.hasErrorBoundary === true || element.props.ErrorBoundary != null || element.props.errorElement != null,\n shouldRevalidate: element.props.shouldRevalidate,\n handle: element.props.handle,\n lazy: element.props.lazy\n };\n if (element.props.children) {\n route.children = createRoutesFromChildren(\n element.props.children,\n treePath\n );\n }\n routes.push(route);\n });\n return routes;\n}\nvar createRoutesFromElements = createRoutesFromChildren;\nfunction renderMatches(matches) {\n return _renderMatches(matches);\n}\n\n// lib/dom/lib.tsx\nimport * as React10 from \"react\";\n\n// lib/dom/dom.ts\nvar defaultMethod = \"get\";\nvar defaultEncType = \"application/x-www-form-urlencoded\";\nfunction isHtmlElement(object) {\n return object != null && typeof object.tagName === \"string\";\n}\nfunction isButtonElement(object) {\n return isHtmlElement(object) && object.tagName.toLowerCase() === \"button\";\n}\nfunction isFormElement(object) {\n return isHtmlElement(object) && object.tagName.toLowerCase() === \"form\";\n}\nfunction isInputElement(object) {\n return isHtmlElement(object) && object.tagName.toLowerCase() === \"input\";\n}\nfunction isModifiedEvent(event) {\n return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);\n}\nfunction shouldProcessLinkClick(event, target) {\n return event.button === 0 && // Ignore everything but left clicks\n (!target || target === \"_self\") && // Let browser handle \"target=_blank\" etc.\n !isModifiedEvent(event);\n}\nfunction createSearchParams(init = \"\") {\n return new URLSearchParams(\n typeof init === \"string\" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo2, key) => {\n let value = init[key];\n return memo2.concat(\n Array.isArray(value) ? value.map((v) => [key, v]) : [[key, value]]\n );\n }, [])\n );\n}\nfunction getSearchParamsForLocation(locationSearch, defaultSearchParams) {\n let searchParams = createSearchParams(locationSearch);\n if (defaultSearchParams) {\n defaultSearchParams.forEach((_, key) => {\n if (!searchParams.has(key)) {\n defaultSearchParams.getAll(key).forEach((value) => {\n searchParams.append(key, value);\n });\n }\n });\n }\n return searchParams;\n}\nvar _formDataSupportsSubmitter = null;\nfunction isFormDataSubmitterSupported() {\n if (_formDataSupportsSubmitter === null) {\n try {\n new FormData(\n document.createElement(\"form\"),\n // @ts-expect-error if FormData supports the submitter parameter, this will throw\n 0\n );\n _formDataSupportsSubmitter = false;\n } catch (e) {\n _formDataSupportsSubmitter = true;\n }\n }\n return _formDataSupportsSubmitter;\n}\nvar supportedFormEncTypes = /* @__PURE__ */ new Set([\n \"application/x-www-form-urlencoded\",\n \"multipart/form-data\",\n \"text/plain\"\n]);\nfunction getFormEncType(encType) {\n if (encType != null && !supportedFormEncTypes.has(encType)) {\n warning(\n false,\n `\"${encType}\" is not a valid \\`encType\\` for \\`