g(x,C)?(a[d]=x,a[n]=c,d=n):(a[d]=C,a[m]=c,d=m);else if(ng(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","/**\n * This file automatically generated from `pre-publish.js`.\n * Do not manually edit.\n */\n\nmodule.exports = {\n \"area\": true,\n \"base\": true,\n \"br\": true,\n \"col\": true,\n \"embed\": true,\n \"hr\": true,\n \"img\": true,\n \"input\": true,\n \"link\": true,\n \"meta\": true,\n \"param\": true,\n \"source\": true,\n \"track\": true,\n \"wbr\": true\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","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\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 + \".\" + \"3b195129\" + \".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 = \"kuku-site:\";\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\t179: 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[\"webpackChunkkuku_site\"] = self[\"webpackChunkkuku_site\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","__webpack_require__.nc = undefined;","export type ColorModeScriptProps = {\n type?: \"localStorage\" | \"cookie\"\n initialColorMode?: \"light\" | \"dark\" | \"system\"\n storageKey?: string\n nonce?: string\n}\n\nconst VALID_VALUES = new Set([\"dark\", \"light\", \"system\"])\n\n/**\n * runtime safe-guard against invalid color mode values\n */\nfunction normalize(initialColorMode: \"light\" | \"dark\" | \"system\") {\n let value = initialColorMode\n if (!VALID_VALUES.has(value)) value = \"light\"\n return value\n}\n\nexport function getScriptSrc(props: ColorModeScriptProps = {}) {\n const {\n initialColorMode = \"light\",\n type = \"localStorage\",\n storageKey: key = \"chakra-ui-color-mode\",\n } = props\n\n // runtime safe-guard against invalid color mode values\n const init = normalize(initialColorMode)\n\n const isCookie = type === \"cookie\"\n\n const cookieScript = `(function(){try{var a=function(o){var l=\"(prefers-color-scheme: dark)\",v=window.matchMedia(l).matches?\"dark\":\"light\",e=o===\"system\"?v:o,d=document.documentElement,m=document.body,i=\"chakra-ui-light\",n=\"chakra-ui-dark\",s=e===\"dark\";return m.classList.add(s?n:i),m.classList.remove(s?i:n),d.style.colorScheme=e,d.dataset.theme=e,e},u=a,h=\"${init}\",r=\"${key}\",t=document.cookie.match(new RegExp(\"(^| )\".concat(r,\"=([^;]+)\"))),c=t?t[2]:null;c?a(c):document.cookie=\"\".concat(r,\"=\").concat(a(h),\"; max-age=31536000; path=/\")}catch(a){}})();\n `\n\n const localStorageScript = `(function(){try{var a=function(c){var v=\"(prefers-color-scheme: dark)\",h=window.matchMedia(v).matches?\"dark\":\"light\",r=c===\"system\"?h:c,o=document.documentElement,s=document.body,l=\"chakra-ui-light\",d=\"chakra-ui-dark\",i=r===\"dark\";return s.classList.add(i?d:l),s.classList.remove(i?l:d),o.style.colorScheme=r,o.dataset.theme=r,r},n=a,m=\"${init}\",e=\"${key}\",t=localStorage.getItem(e);t?a(t):localStorage.setItem(e,a(m))}catch(a){}})();\n `\n\n const fn = isCookie ? cookieScript : localStorageScript\n return `!${fn}`.trim()\n}\n\nexport function ColorModeScript(props: ColorModeScriptProps = {}) {\n const { nonce } = props\n\n return (\n \n )\n}\n","export default function _taggedTemplateLiteral(strings, raw) {\n if (!raw) {\n raw = strings.slice(0);\n }\n return Object.freeze(Object.defineProperties(strings, {\n raw: {\n value: Object.freeze(raw)\n }\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// $FlowFixMe\nfunction sheetForTag(tag) {\n if (tag.sheet) {\n // $FlowFixMe\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 // $FlowFixMe\n return document.styleSheets[i];\n }\n }\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 ? process.env.NODE_ENV === 'production' : 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 (process.env.NODE_ENV !== 'production') {\n var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;\n\n if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {\n // this would only cause problem in speedy mode\n // but we don't want enabling speedy to affect the observable behavior\n // so we report this error at all times\n console.error(\"You're attempting to insert the following rule:\\n\" + rule + '\\n\\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');\n }\n this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;\n }\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 if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(rule)) {\n console.error(\"There was a problem inserting the following rule: \\\"\" + rule + \"\\\"\", e);\n }\n }\n } else {\n tag.appendChild(document.createTextNode(rule));\n }\n\n this.ctr++;\n };\n\n _proto.flush = function flush() {\n // $FlowFixMe\n this.tags.forEach(function (tag) {\n return tag.parentNode && tag.parentNode.removeChild(tag);\n });\n this.tags = [];\n this.ctr = 0;\n\n if (process.env.NODE_ENV !== 'production') {\n this._alreadyInsertedOrderInsensitiveRule = false;\n }\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 {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","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, COMMENT, 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};\nvar ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';\n\nvar isIgnoringComment = function isIgnoringComment(element) {\n return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;\n};\n\nvar createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {\n return function (element, index, children) {\n if (element.type !== 'rule' || cache.compat) return;\n var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);\n\n if (unsafePseudoClasses) {\n var isNested = !!element.parent; // in nested rules comments become children of the \"auto-inserted\" rule and that's always the `element.parent`\n //\n // considering this input:\n // .a {\n // .b /* comm */ {}\n // color: hotpink;\n // }\n // we get output corresponding to this:\n // .a {\n // & {\n // /* comm */\n // color: hotpink;\n // }\n // .b {}\n // }\n\n var commentContainer = isNested ? element.parent.children : // global rule at the root level\n children;\n\n for (var i = commentContainer.length - 1; i >= 0; i--) {\n var node = commentContainer[i];\n\n if (node.line < element.line) {\n break;\n } // it is quite weird but comments are *usually* put at `column: element.column - 1`\n // so we seek *from the end* for the node that is earlier than the rule's `element` and check that\n // this will also match inputs like this:\n // .a {\n // /* comm */\n // .b {}\n // }\n //\n // but that is fine\n //\n // it would be the easiest to change the placement of the comment to be the first child of the rule:\n // .a {\n // .b { /* comm */ }\n // }\n // with such inputs we wouldn't have to search for the comment at all\n // TODO: consider changing this comment placement in the next major version\n\n\n if (node.column < element.column) {\n if (isIgnoringComment(node)) {\n return;\n }\n\n break;\n }\n }\n\n unsafePseudoClasses.forEach(function (unsafePseudoClass) {\n console.error(\"The pseudo class \\\"\" + unsafePseudoClass + \"\\\" is potentially unsafe when doing server-side rendering. Try changing it to \\\"\" + unsafePseudoClass.split('-child')[0] + \"-of-type\\\".\");\n });\n }\n };\n};\n\nvar isImportRule = function isImportRule(element) {\n return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;\n};\n\nvar isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {\n for (var i = index - 1; i >= 0; i--) {\n if (!isImportRule(children[i])) {\n return true;\n }\n }\n\n return false;\n}; // use this to remove incorrect elements from further processing\n// so they don't get handed to the `sheet` (or anything else)\n// as that could potentially lead to additional logs which in turn could be overhelming to the user\n\n\nvar nullifyElement = function nullifyElement(element) {\n element.type = '';\n element.value = '';\n element[\"return\"] = '';\n element.children = '';\n element.props = '';\n};\n\nvar incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {\n if (!isImportRule(element)) {\n return;\n }\n\n if (element.parent) {\n console.error(\"`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.\");\n nullifyElement(element);\n } else if (isPrependedWithRegularRules(index, children)) {\n console.error(\"`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.\");\n nullifyElement(element);\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 createCache(options) {\n var key = options.key;\n\n if (process.env.NODE_ENV !== 'production' && !key) {\n throw new Error(\"You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\\n\" + \"If multiple caches share the same key they might \\\"fight\\\" for each other's style elements.\");\n }\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 // 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 document.head.appendChild(node);\n node.setAttribute('data-s', '');\n });\n }\n\n var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe\n if (/[^a-z-]/.test(key)) {\n throw new Error(\"Emotion key must only contain lower case alphabetical characters and - but \\\"\" + key + \"\\\" was passed\");\n }\n }\n\n var inserted = {};\n var container;\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 var attrib = node.getAttribute(\"data-emotion\").split(' '); // $FlowFixMe\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 var omnipresentPlugins = [compat, removeLabel];\n\n if (process.env.NODE_ENV !== 'production') {\n omnipresentPlugins.push(createUnsafeSelectorsAlarm({\n get compat() {\n return cache.compat;\n }\n\n }), incorrectImportAlarm);\n }\n\n {\n var currentSheet;\n var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {\n if (!element.root) {\n if (element[\"return\"]) {\n currentSheet.insert(element[\"return\"]);\n } else if (element.value && element.type !== COMMENT) {\n // insert empty rule in non-production environments\n // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet\n currentSheet.insert(element.value + \"{}\");\n }\n }\n } : 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 insert(selector, serialized, sheet, shouldCache) {\n currentSheet = sheet;\n\n if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {\n currentSheet = {\n insert: function insert(rule) {\n sheet.insert(rule + serialized.map);\n }\n };\n }\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 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","export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","var weakMemoize = function weakMemoize(func) {\n // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps\n var cache = new WeakMap();\n return function (arg) {\n if (cache.has(arg)) {\n // $FlowFixMe\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 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 ILLEGAL_ESCAPE_SEQUENCE_ERROR = \"You have illegal escape sequence in your template literal, most likely inside content's property value.\\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \\\"content: '\\\\00d7';\\\" should become \\\"content: '\\\\\\\\00d7';\\\".\\nYou can read more about this here:\\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences\";\nvar UNDEFINED_AS_OBJECT_KEY_ERROR = \"You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).\";\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\nif (process.env.NODE_ENV !== 'production') {\n var contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\\(|(no-)?(open|close)-quote/;\n var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];\n var oldProcessStyleValue = processStyleValue;\n var msPattern = /^-ms-/;\n var hyphenPattern = /-(.)/g;\n var hyphenatedCache = {};\n\n processStyleValue = function processStyleValue(key, value) {\n if (key === 'content') {\n if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '\"' && value.charAt(0) !== \"'\")) {\n throw new Error(\"You seem to be using a value for 'content' without quotes, try replacing it with `content: '\\\"\" + value + \"\\\"'`\");\n }\n }\n\n var processed = oldProcessStyleValue(key, value);\n\n if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {\n hyphenatedCache[key] = true;\n console.error(\"Using kebab-case for css properties in objects is not supported. Did you mean \" + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {\n return _char.toUpperCase();\n }) + \"?\");\n }\n\n return processed;\n };\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 if (interpolation.__emotion_styles !== undefined) {\n if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {\n throw new Error(noComponentSelectorMessage);\n }\n\n return interpolation;\n }\n\n switch (typeof interpolation) {\n case 'boolean':\n {\n return '';\n }\n\n case 'object':\n {\n if (interpolation.anim === 1) {\n cursor = {\n name: interpolation.name,\n styles: interpolation.styles,\n next: cursor\n };\n return interpolation.name;\n }\n\n if (interpolation.styles !== undefined) {\n var next = interpolation.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 = interpolation.styles + \";\";\n\n if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {\n styles += interpolation.map;\n }\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 } else if (process.env.NODE_ENV !== 'production') {\n console.error('Functions that are interpolated in css calls will be stringified.\\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\\n' + 'It can be called directly with props or interpolated in a styled call like this\\n' + \"let SomeComponent = styled('div')`${dynamicStyle}`\");\n }\n\n break;\n }\n\n case 'string':\n if (process.env.NODE_ENV !== 'production') {\n var matched = [];\n var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {\n var fakeVarName = \"animation\" + matched.length;\n matched.push(\"const \" + fakeVarName + \" = keyframes`\" + p2.replace(/^@keyframes animation-\\w+/, '') + \"`\");\n return \"${\" + fakeVarName + \"}\";\n });\n\n if (matched.length) {\n console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\\n\\n' + 'Instead of doing this:\\n\\n' + [].concat(matched, [\"`\" + replaced + \"`\"]).join('\\n') + '\\n\\nYou should wrap it with `css` like this:\\n\\n' + (\"css`\" + replaced + \"`\"));\n }\n }\n\n break;\n } // finalize string values (regular strings and functions interpolated into css calls)\n\n\n if (registered == null) {\n return interpolation;\n }\n\n var cached = registered[interpolation];\n return cached !== undefined ? cached : interpolation;\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 if (registered != null && registered[value] !== undefined) {\n string += _key + \"{\" + registered[value] + \"}\";\n } else if (isProcessableValue(value)) {\n string += processStyleName(_key) + \":\" + processStyleValue(_key, value) + \";\";\n }\n } else {\n if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {\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 if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {\n console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);\n }\n\n string += _key + \"{\" + interpolated + \"}\";\n }\n }\n }\n }\n }\n }\n\n return string;\n}\n\nvar labelPattern = /label:\\s*([^\\s;\\n{]+)\\s*(;|$)/g;\nvar sourceMapPattern;\n\nif (process.env.NODE_ENV !== 'production') {\n sourceMapPattern = /\\/\\*#\\ssourceMappingURL=data:application\\/json;\\S+\\s+\\*\\//g;\n} // this is the cursor for keyframes\n// keyframes are stored on the SerializedStyles object as a linked list\n\n\nvar cursor;\nvar serializeStyles = function 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 if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n }\n\n styles += strings[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 if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n }\n\n styles += strings[i];\n }\n }\n\n var sourceMap;\n\n if (process.env.NODE_ENV !== 'production') {\n styles = styles.replace(sourceMapPattern, function (match) {\n sourceMap = match;\n return '';\n });\n } // using a global regex with .exec is stateful so lastIndex has to be reset each time\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 += '-' + // $FlowFixMe we know it's not null\n match[1];\n }\n\n var name = hashString(styles) + identifierName;\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)\n return {\n name: name,\n styles: styles,\n map: sourceMap,\n next: cursor,\n toString: function toString() {\n return \"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).\";\n }\n };\n }\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 isBrowser = \"object\" !== 'undefined';\nvar hasOwnProperty = {}.hasOwnProperty;\n\nvar EmotionCacheContext = /* #__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\nif (process.env.NODE_ENV !== 'production') {\n EmotionCacheContext.displayName = 'EmotionCacheContext';\n}\n\nvar CacheProvider = EmotionCacheContext.Provider;\nvar __unsafe_useEmotionCache = function useEmotionCache() {\n return useContext(EmotionCacheContext);\n};\n\nvar withEmotionCache = function withEmotionCache(func) {\n // $FlowFixMe\n return /*#__PURE__*/forwardRef(function (props, ref) {\n // the cache will never be null in the browser\n var cache = useContext(EmotionCacheContext);\n return func(props, cache, ref);\n });\n};\n\nif (!isBrowser) {\n withEmotionCache = function withEmotionCache(func) {\n return function (props) {\n var cache = useContext(EmotionCacheContext);\n\n if (cache === null) {\n // yes, we're potentially creating this on every render\n // it doesn't actually matter though since it's only on the server\n // so there will only every be a single render\n // that could change in the future because of suspense and etc. but for now,\n // this works and i don't want to optimise for a future thing that we aren't sure about\n cache = createCache({\n key: 'css'\n });\n return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {\n value: cache\n }, func(props, cache));\n } else {\n return func(props, cache);\n }\n };\n };\n}\n\nvar ThemeContext = /* #__PURE__ */React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n ThemeContext.displayName = 'EmotionThemeContext';\n}\n\nvar useTheme = function useTheme() {\n return React.useContext(ThemeContext);\n};\n\nvar getTheme = function getTheme(outerTheme, theme) {\n if (typeof theme === 'function') {\n var mergedTheme = theme(outerTheme);\n\n if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {\n throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');\n }\n\n return mergedTheme;\n }\n\n if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {\n throw new Error('[ThemeProvider] Please make your theme prop a plain object');\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});\nvar ThemeProvider = function ThemeProvider(props) {\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(Component) {\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 }; // $FlowFixMe\n\n\n var WithTheme = /*#__PURE__*/React.forwardRef(render);\n WithTheme.displayName = \"WithTheme(\" + componentName + \")\";\n return hoistNonReactStatics(WithTheme, Component);\n}\n\nvar getLastPart = function getLastPart(functionName) {\n // The match may be something like 'Object.createEmotionProps' or\n // 'Loader.prototype.render'\n var parts = functionName.split('.');\n return parts[parts.length - 1];\n};\n\nvar getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {\n // V8\n var match = /^\\s+at\\s+([A-Za-z0-9$.]+)\\s/.exec(line);\n if (match) return getLastPart(match[1]); // Safari / Firefox\n\n match = /^([A-Za-z0-9$.]+)@/.exec(line);\n if (match) return getLastPart(match[1]);\n return undefined;\n};\n\nvar internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS\n// identifiers, thus we only need to replace what is a valid character for JS,\n// but not for CSS.\n\nvar sanitizeIdentifier = function sanitizeIdentifier(identifier) {\n return identifier.replace(/\\$/g, '-');\n};\n\nvar getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {\n if (!stackTrace) return undefined;\n var lines = stackTrace.split('\\n');\n\n for (var i = 0; i < lines.length; i++) {\n var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just \"Error\"\n\n if (!functionName) continue; // If we reach one of these, we have gone too far and should quit\n\n if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an\n // uppercase letter\n\n if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);\n }\n\n return undefined;\n};\n\nvar typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';\nvar labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';\nvar createEmotionProps = function createEmotionProps(type, props) {\n if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration\n props.css.indexOf(':') !== -1) {\n throw new Error(\"Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`\" + props.css + \"`\");\n }\n\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key)) {\n newProps[key] = props[key];\n }\n }\n\n newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when\n // the label hasn't already been computed\n\n if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {\n var label = getLabelFromStackTrace(new Error().stack);\n if (label) newProps[labelPropName] = label;\n }\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(function (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 if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {\n var labelFromStack = props[labelPropName];\n\n if (labelFromStack) {\n serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);\n }\n }\n\n className += cache.key + \"-\" + serialized.name;\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {\n newProps[key] = props[key];\n }\n }\n\n newProps.ref = ref;\n newProps.className = className;\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\nif (process.env.NODE_ENV !== 'production') {\n Emotion.displayName = 'EmotionCssPropInternal';\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, hasOwnProperty as h, isBrowser as i, useTheme as u, withEmotionCache as w };\n","var isBrowser = \"object\" !== 'undefined';\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 {\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 hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isBrowser$1 } from './emotion-element-c39617d8.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-c39617d8.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 pkg = {\n\tname: \"@emotion/react\",\n\tversion: \"11.11.3\",\n\tmain: \"dist/emotion-react.cjs.js\",\n\tmodule: \"dist/emotion-react.esm.js\",\n\tbrowser: {\n\t\t\"./dist/emotion-react.esm.js\": \"./dist/emotion-react.browser.esm.js\"\n\t},\n\texports: {\n\t\t\".\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./dist/emotion-react.worker.esm.js\",\n\t\t\t\tbrowser: \"./dist/emotion-react.browser.esm.js\",\n\t\t\t\t\"default\": \"./dist/emotion-react.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./dist/emotion-react.cjs.mjs\",\n\t\t\t\"default\": \"./dist/emotion-react.cjs.js\"\n\t\t},\n\t\t\"./jsx-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js\"\n\t\t},\n\t\t\"./_isolated-hnrs\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js\",\n\t\t\t\tbrowser: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js\",\n\t\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs\",\n\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js\"\n\t\t},\n\t\t\"./jsx-dev-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js\"\n\t\t},\n\t\t\"./package.json\": \"./package.json\",\n\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\"./macro\": {\n\t\t\ttypes: {\n\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t},\n\t\t\t\"default\": \"./macro.js\"\n\t\t}\n\t},\n\ttypes: \"types/index.d.ts\",\n\tfiles: [\n\t\t\"src\",\n\t\t\"dist\",\n\t\t\"jsx-runtime\",\n\t\t\"jsx-dev-runtime\",\n\t\t\"_isolated-hnrs\",\n\t\t\"types/*.d.ts\",\n\t\t\"macro.*\"\n\t],\n\tsideEffects: false,\n\tauthor: \"Emotion Contributors\",\n\tlicense: \"MIT\",\n\tscripts: {\n\t\t\"test:typescript\": \"dtslint types\"\n\t},\n\tdependencies: {\n\t\t\"@babel/runtime\": \"^7.18.3\",\n\t\t\"@emotion/babel-plugin\": \"^11.11.0\",\n\t\t\"@emotion/cache\": \"^11.11.0\",\n\t\t\"@emotion/serialize\": \"^1.1.3\",\n\t\t\"@emotion/use-insertion-effect-with-fallbacks\": \"^1.0.1\",\n\t\t\"@emotion/utils\": \"^1.2.1\",\n\t\t\"@emotion/weak-memoize\": \"^0.3.1\",\n\t\t\"hoist-non-react-statics\": \"^3.3.1\"\n\t},\n\tpeerDependencies: {\n\t\treact: \">=16.8.0\"\n\t},\n\tpeerDependenciesMeta: {\n\t\t\"@types/react\": {\n\t\t\toptional: true\n\t\t}\n\t},\n\tdevDependencies: {\n\t\t\"@definitelytyped/dtslint\": \"0.0.112\",\n\t\t\"@emotion/css\": \"11.11.2\",\n\t\t\"@emotion/css-prettifier\": \"1.1.3\",\n\t\t\"@emotion/server\": \"11.11.0\",\n\t\t\"@emotion/styled\": \"11.11.0\",\n\t\t\"html-tag-names\": \"^1.1.2\",\n\t\treact: \"16.14.0\",\n\t\t\"svg-tag-names\": \"^1.1.1\",\n\t\ttypescript: \"^4.5.5\"\n\t},\n\trepository: \"https://github.com/emotion-js/emotion/tree/main/packages/react\",\n\tpublishConfig: {\n\t\taccess: \"public\"\n\t},\n\t\"umd:main\": \"dist/emotion-react.umd.min.js\",\n\tpreconstruct: {\n\t\tentrypoints: [\n\t\t\t\"./index.js\",\n\t\t\t\"./jsx-runtime.js\",\n\t\t\t\"./jsx-dev-runtime.js\",\n\t\t\t\"./_isolated-hnrs.js\"\n\t\t],\n\t\tumdName: \"emotionReact\",\n\t\texports: {\n\t\t\tenvConditions: [\n\t\t\t\t\"browser\",\n\t\t\t\t\"worker\"\n\t\t\t],\n\t\t\textra: {\n\t\t\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\t\t\"./macro\": {\n\t\t\t\t\ttypes: {\n\t\t\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t\t\t},\n\t\t\t\t\t\"default\": \"./macro.js\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar jsx = function jsx(type, props) {\n var args = arguments;\n\n if (props == null || !hasOwnProperty.call(props, 'css')) {\n // $FlowFixMe\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 } // $FlowFixMe\n\n\n return React.createElement.apply(null, createElementArgArray);\n};\n\nvar warnedAboutCssPropForGlobal = false; // maintain place over rerenders.\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 = /* #__PURE__ */withEmotionCache(function (props, cache) {\n if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is\n // probably using the custom createElement which\n // means it will be turned into a className prop\n // $FlowFixMe I don't really want to add it to the type since it shouldn't be used\n props.className || props.css)) {\n console.error(\"It looks like you're using the css prop on Global, did you mean to use the styles prop instead?\");\n warnedAboutCssPropForGlobal = true;\n }\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));\n\n if (!isBrowser$1) {\n var _ref;\n\n var serializedNames = serialized.name;\n var serializedStyles = serialized.styles;\n var next = serialized.next;\n\n while (next !== undefined) {\n serializedNames += ' ' + next.name;\n serializedStyles += next.styles;\n next = next.next;\n }\n\n var shouldCache = cache.compat === true;\n var rules = cache.insert(\"\", {\n name: serializedNames,\n styles: serializedStyles\n }, cache.sheet, shouldCache);\n\n if (shouldCache) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(\"style\", (_ref = {}, _ref[\"data-emotion\"] = cache.key + \"-global \" + serializedNames, _ref.dangerouslySetInnerHTML = {\n __html: rules\n }, _ref.nonce = cache.sheet.nonce, _ref));\n } // yes, i know these hooks are used conditionally\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; // $FlowFixMe\n\n var node = 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\nif (process.env.NODE_ENV !== 'production') {\n Global.displayName = 'EmotionGlobal';\n}\n\nfunction css() {\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\nvar keyframes = function keyframes() {\n var insertable = css.apply(void 0, arguments);\n var name = \"animation-\" + insertable.name; // $FlowFixMe\n\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\nvar classnames = function classnames(args) {\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 if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {\n console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from component.');\n }\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, css, className) {\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\nvar ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {\n var hasRendered = false;\n var serializedArr = [];\n\n var css = function css() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\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 && process.env.NODE_ENV !== 'production') {\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\nif (process.env.NODE_ENV !== 'production') {\n ClassNames.displayName = 'EmotionClassNames';\n}\n\nif (process.env.NODE_ENV !== 'production') {\n var isBrowser = \"object\" !== 'undefined'; // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked\n\n var isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined';\n\n if (isBrowser && !isTestEnv) {\n // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later\n var globalContext = // $FlowIgnore\n typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef\n : isBrowser ? window : global;\n var globalKey = \"__EMOTION_REACT_\" + pkg.version.split('.')[0] + \"__\";\n\n if (globalContext[globalKey]) {\n console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');\n }\n\n globalContext[globalKey] = true;\n }\n}\n\nexport { ClassNames, Global, jsx as createElement, css, jsx, keyframes };\n","import { Global } from \"@emotion/react\"\n\nconst css = String.raw\n\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`\n\nexport const CSSPolyfill = () => \n\nexport type CSSResetProps = {\n /**\n * The selector to scope the css reset styles to.\n */\n scope?: string\n}\n\nexport const CSSReset = ({ scope = \"\" }: CSSResetProps) => (\n \n)\n\nexport default CSSReset\n","import {\n createContext as createReactContext,\n useContext as useReactContext,\n} from \"react\"\n\nexport interface CreateContextOptions {\n strict?: boolean\n hookName?: string\n providerName?: string\n errorMessage?: string\n name?: string\n defaultValue?: T\n}\n\nexport type CreateContextReturn = [\n React.Provider,\n () => T,\n React.Context,\n]\n\nfunction getErrorMessage(hook: string, provider: string) {\n return `${hook} returned \\`undefined\\`. Seems you forgot to wrap component within ${provider}`\n}\n\nexport function createContext(options: CreateContextOptions = {}) {\n const {\n name,\n strict = true,\n hookName = \"useContext\",\n providerName = \"Provider\",\n errorMessage,\n defaultValue,\n } = options\n\n const Context = createReactContext(defaultValue)\n\n Context.displayName = name\n\n function useContext() {\n const context = useReactContext(Context)\n\n if (!context && strict) {\n const error = new Error(\n errorMessage ?? getErrorMessage(hookName, providerName),\n )\n error.name = \"ContextError\"\n Error.captureStackTrace?.(error, useContext)\n throw error\n }\n\n return context\n }\n\n return [Context.Provider, useContext, Context] as CreateContextReturn\n}\n","import { createContext } from \"@chakra-ui/react-context\"\n\ninterface PortalManagerContext {\n zIndex?: number\n}\n\nconst [PortalManagerContextProvider, usePortalManager] =\n createContext({\n strict: false,\n name: \"PortalManagerContext\",\n })\n\nexport { usePortalManager }\n\nexport interface PortalManagerProps {\n children?: React.ReactNode\n /**\n * [Z-Index war] If your has multiple elements\n * with z-index clashing, you might need to apply a z-index to the Portal manager\n */\n zIndex?: number\n}\n\nexport function PortalManager(props: PortalManagerProps) {\n const { children, zIndex } = props\n return (\n \n {children}\n \n )\n}\n\nPortalManager.displayName = \"PortalManager\"\n","import { createContext, useContext } from \"react\"\nimport { ColorModeContextType } from \"./color-mode-types\"\n\nexport const ColorModeContext = createContext({} as ColorModeContextType)\n\nColorModeContext.displayName = \"ColorModeContext\"\n\n/**\n * React hook that reads from `ColorModeProvider` context\n * Returns the color mode and function to toggle it\n */\nexport function useColorMode() {\n const context = useContext(ColorModeContext)\n if (context === undefined) {\n throw new Error(\"useColorMode must be used within a ColorModeProvider\")\n }\n return context\n}\n\n/**\n * Change value based on color mode.\n *\n * @param light the light mode value\n * @param dark the dark mode value\n *\n * @example\n *\n * ```js\n * const Icon = useColorModeValue(MoonIcon, SunIcon)\n * ```\n */\nexport function useColorModeValue(\n light: TLight,\n dark: TDark,\n) {\n const { colorMode } = useColorMode()\n return colorMode === \"dark\" ? dark : light\n}\n","// src/index.ts\nvar cx = (...classNames) => classNames.filter(Boolean).join(\" \");\nfunction isDev() {\n return process.env.NODE_ENV !== \"production\";\n}\nfunction isObject(value) {\n const type = typeof value;\n return value != null && (type === \"object\" || type === \"function\") && !Array.isArray(value);\n}\nvar warn = (options) => {\n const { condition, message } = options;\n if (condition && isDev()) {\n console.warn(message);\n }\n};\nfunction runIfFn(valueOrFn, ...args) {\n return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;\n}\nvar isFunction = (value) => typeof value === \"function\";\nvar dataAttr = (condition) => condition ? \"\" : void 0;\nvar ariaAttr = (condition) => condition ? true : void 0;\nfunction callAllHandlers(...fns) {\n return function func(event) {\n fns.some((fn) => {\n fn == null ? void 0 : fn(event);\n return event == null ? void 0 : event.defaultPrevented;\n });\n };\n}\nfunction callAll(...fns) {\n return function mergedFn(arg) {\n fns.forEach((fn) => {\n fn == null ? void 0 : fn(arg);\n });\n };\n}\nexport {\n ariaAttr,\n callAll,\n callAllHandlers,\n cx,\n dataAttr,\n isObject,\n runIfFn,\n warn\n};\n","// src/utils/create-transform.ts\nimport { isObject } from \"@chakra-ui/shared-utils\";\nvar isImportant = (value) => /!(important)?$/.test(value);\nvar withoutImportant = (value) => typeof value === \"string\" ? value.replace(/!(important)?$/, \"\").trim() : value;\nvar 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: transform2, compose } = options;\n const fn = (value, theme) => {\n var _a;\n const _value = tokenToCSSVar(scale, value)(theme);\n let result = (_a = transform2 == null ? void 0 : transform2(_value, theme)) != null ? _a : _value;\n if (compose) {\n result = compose(result, theme);\n }\n return result;\n };\n return fn;\n}\n\n// src/utils/pipe.ts\nvar pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);\n\n// src/utils/prop-config.ts\nfunction toConfig(scale, transform2) {\n return (property) => {\n const result = { property, scale };\n result.transform = createTransform({\n scale,\n transform: transform2\n });\n return result;\n };\n}\nvar getRtl = ({ rtl, ltr }) => (theme) => theme.direction === \"rtl\" ? rtl : ltr;\nfunction logical(options) {\n const { property, scale, transform: transform2 } = options;\n return {\n scale,\n property: getRtl(property),\n transform: scale ? createTransform({\n scale,\n compose: transform2\n }) : transform2\n };\n}\n\n// src/utils/templates.ts\nvar 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}\nvar 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};\nvar 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}\nvar 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\n// src/utils/parse-gradient.ts\nvar 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};\nvar valueSet = new Set(Object.values(directionMap));\nvar globalSet = /* @__PURE__ */ new Set([\n \"none\",\n \"-moz-initial\",\n \"inherit\",\n \"initial\",\n \"revert\",\n \"unset\"\n]);\nvar 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 == null ? void 0 : results[1];\n const values = results == null ? void 0 : 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 == null ? void 0 : 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 color2 = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color;\n return _stopOrFunc ? [\n color2,\n ...Array.isArray(_stopOrFunc) ? _stopOrFunc : [_stopOrFunc]\n ].join(\" \") : color2;\n });\n return `${_type}(${_values.join(\", \")})`;\n}\nvar isCSSFunction = (value) => {\n return typeof value === \"string\" && value.includes(\"(\") && value.includes(\")\");\n};\nvar gradientTransform = (value, theme) => parseGradient(value, theme != null ? theme : {});\n\n// src/utils/transform-functions.ts\nfunction isCssVar(value) {\n return /^var\\(--.+\\)$/.test(value);\n}\nvar analyzeCSSValue = (value) => {\n const num = parseFloat(value.toString());\n const unit = value.toString().replace(String(num), \"\");\n return { unitless: !unit, value: num, unit };\n};\nvar wrap = (str) => (value) => `${str}(${value})`;\nvar 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 var _a;\n const { space: space2, divide: divide2 } = (_a = flexDirectionTemplate[value]) != null ? _a : {};\n const result = { flexDirection: value };\n if (space2)\n result[space2] = 1;\n if (divide2)\n result[divide2] = 1;\n return result;\n }\n};\n\n// src/utils/index.ts\nvar 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, transform2) {\n return {\n property,\n scale,\n ...scale && {\n transform: createTransform({ scale, transform: transform2 })\n }\n };\n },\n propT(property, transform2) {\n return { property, transform: transform2 };\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\n// src/config/background.ts\nvar 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\n// src/config/border.ts\nvar 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\n// src/config/color.ts\nvar color = {\n color: t.colors(\"color\"),\n textColor: t.colors(\"color\"),\n fill: t.colors(\"fill\"),\n stroke: t.colors(\"stroke\")\n};\n\n// src/config/effect.ts\nvar 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\n// src/config/filter.ts\nvar 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\n// src/config/flexbox.ts\nvar 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\n// src/config/grid.ts\nvar 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\n// src/config/interactivity.ts\nvar 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\n// src/config/layout.ts\nvar 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 var _a, _b, _c;\n const breakpoint = (_c = (_b = (_a = theme.__breakpoints) == null ? void 0 : _a.get(value)) == null ? void 0 : _b.minW) != null ? _c : 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 var _a, _b, _c;\n const breakpoint = (_c = (_b = (_a = theme.__breakpoints) == null ? void 0 : _a.get(value)) == null ? void 0 : _b._minW) != null ? _c : 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\n// src/config/list.ts\nvar list = {\n listStyleType: true,\n listStylePosition: true,\n listStylePos: t.prop(\"listStylePosition\"),\n listStyleImage: true,\n listStyleImg: t.prop(\"listStyleImage\")\n};\n\n// src/get.ts\nfunction 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}\nvar 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};\nvar memoizedGet = memoize(get);\n\n// src/config/others.ts\nvar 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};\nvar 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};\nvar 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};\nvar 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\n// src/config/position.ts\nvar 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\n// src/config/ring.ts\nvar 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\n// src/config/space.ts\nvar 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\n// src/config/text-decoration.ts\nvar 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\n// src/config/transform.ts\nvar 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\n// src/config/transition.ts\nvar 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\n// src/config/typography.ts\nvar 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\n// src/config/scroll.ts\nvar 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\n// src/create-theme-vars/calc.ts\nimport { isObject as isObject2 } from \"@chakra-ui/shared-utils\";\nfunction resolveReference(operand) {\n if (isObject2(operand) && operand.reference) {\n return operand.reference;\n }\n return String(operand);\n}\nvar toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(/calc/g, \"\");\nvar add = (...operands) => `calc(${toExpression(\"+\", ...operands)})`;\nvar subtract = (...operands) => `calc(${toExpression(\"-\", ...operands)})`;\nvar multiply = (...operands) => `calc(${toExpression(\"*\", ...operands)})`;\nvar divide = (...operands) => `calc(${toExpression(\"/\", ...operands)})`;\nvar 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};\nvar 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\n// src/create-theme-vars/css-var.ts\nfunction 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, keys2) {\n const vars = {};\n for (const key of keys2) {\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\n// ../../utilities/breakpoint-utils/src/breakpoint.ts\nimport { isObject as isObject3 } from \"@chakra-ui/shared-utils\";\nfunction getLastItem(array) {\n const length = array == null ? 0 : array.length;\n return length ? array[length - 1] : void 0;\n}\nfunction analyzeCSSValue2(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 } = analyzeCSSValue2(value);\n return unitless || typeof value === \"number\" ? `${value}px` : value;\n}\nvar sortByBreakpointValue = (a, b) => parseInt(a[1], 10) > parseInt(b[1], 10) ? 1 : -1;\nvar 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 subtract2(value) {\n var _a;\n if (!value)\n return value;\n value = (_a = px(value)) != null ? _a : 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 var _a;\n if (!breakpoints)\n return null;\n breakpoints.base = (_a = breakpoints.base) != null ? _a : \"0px\";\n const normalized = normalize(breakpoints);\n const queries = Object.entries(breakpoints).sort(sortByBreakpointValue).map(([breakpoint, minW], index, entry) => {\n var _a2;\n let [, maxW] = (_a2 = entry[index + 1]) != null ? _a2 : [];\n maxW = parseFloat(maxW) > 0 ? subtract2(maxW) : void 0;\n return {\n _minW: subtract2(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 (!isObject3(test)) {\n throw new Error(\"toArrayValue: value must be an object\");\n }\n const result = _keysArr.map((bp) => {\n var _a2;\n return (_a2 = test[bp]) != null ? _a2 : null;\n });\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((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// src/create-theme-vars/create-theme-vars.ts\nimport { isObject as isObject4 } from \"@chakra-ui/shared-utils\";\n\n// src/pseudos.ts\nvar state = {\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};\nvar toGroup = (fn) => merge((v) => fn(v, \"&\"), \"[role=group]\", \"[data-group]\", \".group\");\nvar toPeer = (fn) => merge((v) => fn(v, \"~ &\"), \"[data-peer]\", \".peer\");\nvar merge = (fn, ...selectors) => selectors.map(fn).join(\", \");\nvar 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\",\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\",\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]\",\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]\",\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]\",\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\",\n /**\n * Styles for CSS Selector `&:placeholder-shown`.\n */\n _placeholderShown: \"&:placeholder-shown\",\n /**\n * Styles for CSS Selector `&:fullscreen`.\n */\n _fullScreen: \"&: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};\nvar pseudoPropNames = Object.keys(\n pseudoSelectors\n);\n\n// src/create-theme-vars/create-theme-vars.ts\nimport mergeWith from \"lodash.mergewith\";\nfunction tokenToCssVar(token, prefix) {\n return cssVar(String(token).replace(/\\./g, \"-\"), void 0, prefix);\n}\nfunction createThemeVars(flatTokens, options) {\n let cssVars = {};\n const cssMap = {};\n for (const [token, tokenValue] of Object.entries(flatTokens)) {\n const { isSemantic, value } = tokenValue;\n const { variable, reference } = tokenToCssVar(token, options == null ? void 0 : options.cssVarPrefix);\n if (!isSemantic) {\n if (token.startsWith(\"space\")) {\n const keys2 = token.split(\".\");\n const [firstKey, ...referenceKeys] = keys2;\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 lookupToken = (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: reference2 } = tokenToCssVar(withScale, options == null ? void 0 : options.cssVarPrefix);\n return reference2;\n };\n const normalizedValue = isObject4(value) ? value : { default: value };\n cssVars = mergeWith(\n cssVars,\n Object.entries(normalizedValue).reduce(\n (acc, [conditionAlias, conditionValue]) => {\n var _a, _b;\n if (!conditionValue)\n return acc;\n const tokenReference = lookupToken(`${conditionValue}`);\n if (conditionAlias === \"default\") {\n acc[variable] = tokenReference;\n return acc;\n }\n const conditionSelector = (_b = (_a = pseudoSelectors) == null ? void 0 : _a[conditionAlias]) != null ? _b : 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\n// ../../utilities/object-utils/src/omit.ts\nfunction 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\n// ../../utilities/object-utils/src/pick.ts\nfunction 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\n// ../../utilities/object-utils/src/walk-object.ts\nfunction isObject5(value) {\n return typeof value === \"object\" && value != null && !Array.isArray(value);\n}\nfunction walkObject(target, predicate, options = {}) {\n const { stop, getKey } = options;\n function inner(value, path = []) {\n var _a;\n if (isObject5(value) || Array.isArray(value)) {\n const result = {};\n for (const [prop, child] of Object.entries(value)) {\n const key = (_a = getKey == null ? void 0 : getKey(prop)) != null ? _a : prop;\n const childPath = [...path, key];\n if (stop == null ? void 0 : 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\n// src/create-theme-vars/theme-tokens.ts\nvar 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\n// src/create-theme-vars/flatten-tokens.ts\nvar isSemanticCondition = (key) => pseudoPropNames.includes(key) || \"default\" === key;\nfunction flattenTokens({\n tokens: tokens2,\n semanticTokens\n}) {\n const result = {};\n walkObject(tokens2, (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\n// src/create-theme-vars/to-css-var.ts\nfunction toCSSVar(rawTheme) {\n var _a;\n const theme = omitVars(rawTheme);\n const tokens2 = extractTokens(theme);\n const semanticTokens = extractSemanticTokens(theme);\n const flatTokens = flattenTokens({ tokens: tokens2, semanticTokens });\n const cssVarPrefix = (_a = theme.config) == null ? void 0 : _a.cssVarPrefix;\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(flatTokens, { cssVarPrefix });\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\n// src/css.ts\nimport { isObject as isObject7, runIfFn as runIfFn2 } from \"@chakra-ui/shared-utils\";\nimport mergeWith3 from \"lodash.mergewith\";\n\n// src/system.ts\nimport mergeWith2 from \"lodash.mergewith\";\nvar systemProps = mergeWith2(\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);\nvar layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);\nvar layoutPropNames = Object.keys(\n layoutSystem\n);\nvar propNames = [...Object.keys(systemProps), ...pseudoPropNames];\nvar styleProps = { ...systemProps, ...pseudoSelectors };\nvar isStyleProp = (prop) => prop in styleProps;\n\n// src/utils/expand-responsive.ts\nimport { isObject as isObject6, runIfFn } from \"@chakra-ui/shared-utils\";\nvar 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 = isObject6(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 == null ? void 0 : 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\n// src/utils/split-by-comma.ts\nfunction 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\n// src/css.ts\nfunction isCssVar2(value) {\n return /^var\\(--.+\\)$/.test(value);\n}\nvar isCSSVariableTokenValue = (key, value) => key.startsWith(\"--\") && typeof value === \"string\" && !isCssVar2(value);\nvar resolveTokenValue = (theme, value) => {\n var _a, _b;\n if (value == null)\n return value;\n const getVar = (val) => {\n var _a2, _b2;\n return (_b2 = (_a2 = theme.__cssMap) == null ? void 0 : _a2[val]) == null ? void 0 : _b2.varRef;\n };\n const getValue = (val) => {\n var _a2;\n return (_a2 = getVar(val)) != null ? _a2 : val;\n };\n const [tokenValue, fallbackValue] = splitByComma(value);\n value = (_b = (_a = getVar(tokenValue)) != null ? _a : getValue(fallbackValue)) != null ? _b : getValue(value);\n return value;\n};\nfunction getCss(options) {\n const { configs = {}, pseudos = {}, theme } = options;\n const css2 = (stylesOrFn, nested = false) => {\n var _a, _b, _c;\n const _styles = runIfFn2(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 = runIfFn2(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 (isObject7(value)) {\n computedStyles[key] = (_a = computedStyles[key]) != null ? _a : {};\n computedStyles[key] = mergeWith3(\n {},\n computedStyles[key],\n css2(value, true)\n );\n continue;\n }\n let rawValue = (_c = (_b = config == null ? void 0 : config.transform) == null ? void 0 : _b.call(config, value, theme, _styles)) != null ? _c : value;\n rawValue = (config == null ? void 0 : config.processResult) ? css2(rawValue, true) : rawValue;\n const configProperty = runIfFn2(config == null ? void 0 : config.property, theme);\n if (!nested && (config == null ? void 0 : config.static)) {\n const staticStyles = runIfFn2(config.static, theme);\n computedStyles = mergeWith3({}, 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 === \"&\" && isObject7(rawValue)) {\n computedStyles = mergeWith3({}, computedStyles, rawValue);\n } else {\n computedStyles[configProperty] = rawValue;\n }\n continue;\n }\n if (isObject7(rawValue)) {\n computedStyles = mergeWith3({}, computedStyles, rawValue);\n continue;\n }\n computedStyles[key] = rawValue;\n }\n return computedStyles;\n };\n return css2;\n}\nvar css = (styles) => (theme) => {\n const cssFn = getCss({\n theme,\n pseudos: pseudoSelectors,\n configs: systemProps\n });\n return cssFn(styles);\n};\n\n// src/define-styles.ts\nfunction 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\n// src/style-config.ts\nimport { runIfFn as runIfFn3, isObject as isObject8 } from \"@chakra-ui/shared-utils\";\nimport mergeWith4 from \"lodash.mergewith\";\nfunction normalize2(value, toArray) {\n if (Array.isArray(value))\n return value;\n if (isObject8(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 var _a, _b;\n if (!breakpointUtil)\n return;\n const result = {};\n const normalized = normalize2(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 == null ? void 0 : nextKey._minW);\n const styles = runIfFn3((_a = config[prop]) == null ? void 0 : _a[normalized[i]], props);\n if (!styles)\n continue;\n if (isMultipart) {\n (_b = config.parts) == null ? void 0 : _b.forEach((part) => {\n mergeWith4(result, {\n [part]: isSingle ? styles[part] : { [query]: styles[part] }\n });\n });\n continue;\n }\n if (!isMultipart) {\n if (isSingle)\n mergeWith4(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 var _a;\n const { variant, size, theme } = props;\n const recipe = createResolver(theme);\n return mergeWith4(\n {},\n runIfFn3((_a = config.baseStyle) != null ? _a : {}, props),\n recipe(config, \"sizes\", size, props),\n recipe(config, \"variants\", variant, props)\n );\n };\n}\n\n// src/get-css-var.ts\nfunction getCSSVar(theme, scale, value) {\n var _a, _b, _c;\n return (_c = (_b = (_a = theme.__cssMap) == null ? void 0 : _a[`${scale}.${value}`]) == null ? void 0 : _b.varRef) != null ? _c : value;\n}\n\n// src/theming-props.ts\nfunction omitThemingProps(props) {\n return omit(props, [\"styleConfig\", \"size\", \"variant\", \"colorScheme\"]);\n}\nexport {\n addPrefix,\n background,\n border,\n calc,\n color,\n createMultiStyleConfigHelpers,\n css,\n cssVar,\n defineCssVars,\n defineStyle,\n defineStyleConfig,\n effect,\n filter,\n flattenTokens,\n flexbox,\n getCSSVar,\n getCss,\n grid,\n interactivity,\n isStyleProp,\n layout,\n layoutPropNames,\n list,\n omitThemingProps,\n others,\n position,\n propNames,\n pseudoPropNames,\n pseudoSelectors,\n resolveStyleConfig,\n ring,\n scroll,\n space,\n systemProps,\n textDecoration,\n toCSSVar,\n toVarDefinition,\n toVarReference,\n tokenToCSSVar,\n transform,\n transition,\n typography\n};\n","// src/object.ts\nimport { default as default2 } from \"lodash.mergewith\";\nfunction omit(object, keys) {\n const result = {};\n Object.keys(object).forEach((key) => {\n if (keys.includes(key))\n return;\n result[key] = object[key];\n });\n return result;\n}\nfunction pick(object, keys) {\n const result = {};\n keys.forEach((key) => {\n if (key in object) {\n result[key] = object[key];\n }\n });\n return result;\n}\nfunction split(object, keys) {\n const picked = {};\n const omitted = {};\n Object.keys(object).forEach((key) => {\n if (keys.includes(key)) {\n picked[key] = object[key];\n } else {\n omitted[key] = object[key];\n }\n });\n return [picked, omitted];\n}\nfunction 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}\nvar 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};\nvar memoizedGet = memoize(get);\nfunction getWithDefault(path, scale) {\n return memoizedGet(scale, path, path);\n}\nfunction objectFilter(object, fn) {\n const result = {};\n Object.keys(object).forEach((key) => {\n const value = object[key];\n const shouldPass = fn(value, key, object);\n if (shouldPass) {\n result[key] = value;\n }\n });\n return result;\n}\nvar filterUndefined = (object) => objectFilter(object, (val) => val !== null && val !== void 0);\nvar objectKeys = (obj) => Object.keys(obj);\nvar fromEntries = (entries) => entries.reduce((carry, [key, value]) => {\n carry[key] = value;\n return carry;\n}, {});\nvar getCSSVar = (theme, scale, value) => {\n var _a, _b, _c;\n return (_c = (_b = (_a = theme.__cssMap) == null ? void 0 : _a[`${scale}.${value}`]) == null ? void 0 : _b.varRef) != null ? _c : value;\n};\n\nexport {\n omit,\n pick,\n split,\n get,\n memoize,\n memoizedGet,\n getWithDefault,\n objectFilter,\n filterUndefined,\n objectKeys,\n fromEntries,\n getCSSVar,\n default2 as default\n};\n","import {\n __DEV__,\n isFunction,\n isNumber\n} from \"./chunk-Y5FGD7DM.mjs\";\n\n// src/function.ts\nfunction runIfFn(valueOrFn, ...args) {\n return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;\n}\nfunction callAllHandlers(...fns) {\n return function func(event) {\n fns.some((fn) => {\n fn == null ? void 0 : fn(event);\n return event == null ? void 0 : event.defaultPrevented;\n });\n };\n}\nfunction callAll(...fns) {\n return function mergedFn(arg) {\n fns.forEach((fn) => {\n fn == null ? void 0 : fn(arg);\n });\n };\n}\nvar compose = (fn1, ...fns) => fns.reduce(\n (f1, f2) => (...args) => f1(f2(...args)),\n fn1\n);\nfunction once(fn) {\n let result;\n return function func(...args) {\n if (fn) {\n result = fn.apply(this, args);\n fn = null;\n }\n return result;\n };\n}\nvar noop = () => {\n};\nvar warn = /* @__PURE__ */ once((options) => () => {\n const { condition, message } = options;\n if (condition && __DEV__) {\n console.warn(message);\n }\n});\nvar error = /* @__PURE__ */ once((options) => () => {\n const { condition, message } = options;\n if (condition && __DEV__) {\n console.error(message);\n }\n});\nvar pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);\nvar distance1D = (a, b) => Math.abs(a - b);\nvar isPoint = (point) => \"x\" in point && \"y\" in point;\nfunction distance(a, b) {\n if (isNumber(a) && isNumber(b)) {\n return distance1D(a, b);\n }\n if (isPoint(a) && isPoint(b)) {\n const xDelta = distance1D(a.x, b.x);\n const yDelta = distance1D(a.y, b.y);\n return Math.sqrt(xDelta ** 2 + yDelta ** 2);\n }\n return 0;\n}\n\nexport {\n runIfFn,\n callAllHandlers,\n callAll,\n compose,\n once,\n noop,\n warn,\n error,\n pipe,\n distance\n};\n","// src/assertion.ts\nfunction 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 isNotEmptyObject(value) {\n return value && !isEmptyObject(value);\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}\nvar __DEV__ = process.env.NODE_ENV !== \"production\";\nvar __TEST__ = process.env.NODE_ENV === \"test\";\nfunction isRefObject(val) {\n return \"current\" in val;\n}\nfunction isInputEvent(value) {\n return value && isObject(value) && isObject(value.target);\n}\n\nexport {\n isNumber,\n isNotNumber,\n isNumeric,\n isArray,\n isEmptyArray,\n isFunction,\n isDefined,\n isUndefined,\n isObject,\n isEmptyObject,\n isNotEmptyObject,\n isNull,\n isString,\n isCssVar,\n isEmpty,\n __DEV__,\n __TEST__,\n isRefObject,\n isInputEvent\n};\n","import { useColorMode } from \"@chakra-ui/color-mode\"\nimport { createContext, CreateContextReturn } from \"@chakra-ui/react-utils\"\nimport { css, toCSSVar, SystemStyleObject } from \"@chakra-ui/styled-system\"\nimport { memoizedGet as get, runIfFn } from \"@chakra-ui/utils\"\nimport {\n Global,\n Interpolation,\n ThemeProvider as EmotionThemeProvider,\n ThemeProviderProps as EmotionThemeProviderProps,\n} from \"@emotion/react\"\nimport { useMemo } from \"react\"\n\nexport interface ThemeProviderProps extends EmotionThemeProviderProps {\n cssVarsRoot?: string\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): JSX.Element {\n const { cssVarsRoot, theme, children } = props\n const computedTheme = useMemo(() => toCSSVar(theme), [theme])\n return (\n \n \n {children}\n \n )\n}\n\nexport interface CSSVarsProps {\n /**\n * The element to attach the CSS custom properties to.\n * @default \":host, :root\"\n */\n root?: string\n}\n\nexport function CSSVars({ root = \":host, :root\" }: CSSVarsProps): JSX.Element {\n /**\n * Append color mode selector to allow semantic tokens to change according to the color mode\n */\n const selector = [root, `[data-theme]`].join(\",\")\n return ({ [selector]: theme.__cssVars })} />\n}\n\n/**\n * @deprecated - Prefer to use `createStylesContext` to provide better error messages\n *\n * @example\n *\n * ```jsx\n * import { createStylesContext } from \"@chakra-ui/react\"\n *\n * const [StylesProvider, useStyles] = createStylesContext(\"Component\")\n * ```\n */\nconst [StylesProvider, useStyles] = createContext<\n Record\n>({\n name: \"StylesContext\",\n errorMessage:\n \"useStyles: `styles` is undefined. Seems you forgot to wrap the components in `` \",\n})\n\nexport { StylesProvider, useStyles }\n\n/**\n * Helper function that creates context with a standardized errorMessage related to the component\n * @param componentName\n * @returns [StylesProvider, useStyles]\n */\nexport function createStylesContext(\n componentName: string,\n): CreateStyleContextReturn {\n return createContext>({\n name: `${componentName}StylesContext`,\n errorMessage: `useStyles: \"styles\" is undefined. Seems you forgot to wrap the components in \"<${componentName} />\" `,\n })\n}\n\nexport type CreateStyleContextReturn = CreateContextReturn<\n Record\n>\n\n/**\n * Applies styles defined in `theme.styles.global` globally\n * using emotion's `Global` component\n */\nexport function GlobalStyle(): JSX.Element {\n const { colorMode } = useColorMode()\n return (\n {\n const styleObjectOrFn = get(theme, \"styles.global\")\n const globalStyles = runIfFn(styleObjectOrFn, { theme, colorMode })\n if (!globalStyles) return undefined\n const styles = css(globalStyles)(theme)\n return styles as Interpolation<{}>\n }}\n />\n )\n}\n","// src/context.ts\nimport {\n createContext as createReactContext,\n useContext as useReactContext\n} from \"react\";\nfunction createContext(options = {}) {\n const {\n strict = true,\n errorMessage = \"useContext: `context` is undefined. Seems you forgot to wrap component within the Provider\",\n name\n } = options;\n const Context = createReactContext(void 0);\n Context.displayName = name;\n function useContext() {\n var _a;\n const context = useReactContext(Context);\n if (!context && strict) {\n const error = new Error(errorMessage);\n error.name = \"ContextError\";\n (_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext);\n throw error;\n }\n return context;\n }\n return [\n Context.Provider,\n useContext,\n Context\n ];\n}\n\nexport {\n createContext\n};\n","import { ColorMode } from \"./color-mode-types\"\n\nconst classNames = {\n light: \"chakra-ui-light\",\n dark: \"chakra-ui-dark\",\n}\n\ntype UtilOptions = {\n preventTransition?: boolean\n}\n\nexport function getColorModeUtils(options: UtilOptions = {}) {\n const { preventTransition = true } = options\n\n const utils = {\n setDataset: (value: ColorMode) => {\n const cleanup = preventTransition ? utils.preventTransition() : undefined\n document.documentElement.dataset.theme = value\n document.documentElement.style.colorScheme = value\n cleanup?.()\n },\n setClassName(dark: boolean) {\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?: ColorMode) {\n const dark = utils.query().matches ?? fallback === \"dark\"\n return dark ? \"dark\" : \"light\"\n },\n addListener(fn: (cm: ColorMode) => unknown) {\n const mql = utils.query()\n const listener = (e: MediaQueryListEvent) => {\n fn(e.matches ? \"dark\" : \"light\")\n }\n\n if (typeof mql.addListener === \"function\") mql.addListener(listener)\n else mql.addEventListener(\"change\", listener)\n\n return () => {\n if (typeof mql.removeListener === \"function\")\n mql.removeListener(listener)\n else 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 document.head.appendChild(css)\n\n return () => {\n // force a reflow\n ;(() => window.getComputedStyle(document.body))()\n\n // wait for next tick\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n document.head.removeChild(css)\n })\n })\n }\n },\n }\n\n return utils\n}\n","import { ColorMode } from \"./color-mode-types\"\n\nexport const STORAGE_KEY = \"chakra-ui-color-mode\"\n\ntype MaybeColorMode = ColorMode | undefined\n\nexport interface StorageManager {\n type: \"cookie\" | \"localStorage\"\n ssr?: boolean\n get(init?: ColorMode): MaybeColorMode\n set(value: ColorMode | \"system\"): void\n}\n\nexport function createLocalStorageManager(key: string): StorageManager {\n return {\n ssr: false,\n type: \"localStorage\",\n get(init?) {\n if (!globalThis?.document) return init\n let value: any\n try {\n value = localStorage.getItem(key) || init\n } catch (e) {\n // no op\n }\n\n return value || init\n },\n set(value) {\n try {\n localStorage.setItem(key, value)\n } catch (e) {\n // no op\n }\n },\n }\n}\n\nexport const localStorageManager = createLocalStorageManager(STORAGE_KEY)\n\nfunction parseCookie(cookie: string, key: string): MaybeColorMode {\n const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`))\n return match?.[2] as MaybeColorMode\n}\n\nexport function createCookieStorageManager(\n key: string,\n cookie?: string,\n): StorageManager {\n return {\n ssr: !!cookie,\n type: \"cookie\",\n get(init?): MaybeColorMode {\n if (cookie) return parseCookie(cookie, key)\n if (!globalThis?.document) 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}\n\nexport const cookieStorageManager = createCookieStorageManager(STORAGE_KEY)\n\nexport const cookieStorageManagerSSR = (cookie: string) =>\n createCookieStorageManager(STORAGE_KEY, cookie)\n","import { useEffect, useLayoutEffect } from \"react\"\n\nexport const useSafeLayoutEffect = Boolean(globalThis?.document)\n ? useLayoutEffect\n : useEffect\n","import { useSafeLayoutEffect } from \"@chakra-ui/react-use-safe-layout-effect\"\nimport { useCallback, useEffect, useMemo, useState } from \"react\"\nimport { ColorModeContext } from \"./color-mode-context\"\nimport {\n ColorMode,\n ColorModeContextType,\n ColorModeOptions,\n} from \"./color-mode-types\"\nimport { getColorModeUtils } from \"./color-mode.utils\"\nimport { localStorageManager, StorageManager } from \"./storage-manager\"\n\nconst noop = () => {}\n\nexport interface ColorModeProviderProps {\n value?: ColorMode\n children?: React.ReactNode\n options?: ColorModeOptions\n colorModeManager?: StorageManager\n}\n\nfunction getTheme(manager: StorageManager, fallback?: ColorMode) {\n return manager.type === \"cookie\" && manager.ssr\n ? manager.get(fallback)\n : fallback\n}\n\n/**\n * Provides context for the color mode based on config in `theme`\n * Returns the color mode and function to toggle the color mode\n */\nexport function ColorModeProvider(props: ColorModeProviderProps) {\n const {\n value,\n children,\n options: {\n useSystemColorMode,\n initialColorMode,\n disableTransitionOnChange,\n } = {},\n colorModeManager = localStorageManager,\n } = props\n\n const defaultColorMode = initialColorMode === \"dark\" ? \"dark\" : \"light\"\n\n const [colorMode, rawSetColorMode] = useState(() =>\n getTheme(colorModeManager, defaultColorMode),\n )\n\n const [resolvedColorMode, setResolvedColorMode] = useState(() =>\n getTheme(colorModeManager),\n )\n\n const { getSystemTheme, setClassName, setDataset, addListener } = useMemo(\n () => getColorModeUtils({ preventTransition: disableTransitionOnChange }),\n [disableTransitionOnChange],\n )\n\n const resolvedValue =\n initialColorMode === \"system\" && !colorMode ? resolvedColorMode : colorMode\n\n const setColorMode = useCallback(\n (value: ColorMode | \"system\") => {\n //\n const resolved = value === \"system\" ? getSystemTheme() : value\n rawSetColorMode(resolved)\n\n setClassName(resolved === \"dark\")\n setDataset(resolved)\n\n colorModeManager.set(resolved)\n },\n [colorModeManager, getSystemTheme, setClassName, setDataset],\n )\n\n useSafeLayoutEffect(() => {\n if (initialColorMode === \"system\") {\n setResolvedColorMode(getSystemTheme())\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n useEffect(() => {\n const managerValue = colorModeManager.get()\n\n if (managerValue) {\n setColorMode(managerValue)\n return\n }\n\n if (initialColorMode === \"system\") {\n setColorMode(\"system\")\n return\n }\n\n setColorMode(defaultColorMode)\n }, [colorModeManager, defaultColorMode, initialColorMode, setColorMode])\n\n const toggleColorMode = useCallback(() => {\n setColorMode(resolvedValue === \"dark\" ? \"light\" : \"dark\")\n }, [resolvedValue, setColorMode])\n\n useEffect(() => {\n if (!useSystemColorMode) return\n return addListener(setColorMode)\n }, [useSystemColorMode, addListener, setColorMode])\n\n // presence of `value` indicates a controlled context\n const context = useMemo(\n () => ({\n colorMode: value ?? (resolvedValue as ColorMode),\n toggleColorMode: value ? noop : toggleColorMode,\n setColorMode: value ? noop : setColorMode,\n forced: value !== undefined,\n }),\n [resolvedValue, toggleColorMode, setColorMode, value],\n )\n\n return (\n \n {children}\n \n )\n}\n\nColorModeProvider.displayName = \"ColorModeProvider\"\n\n/**\n * Locks the color mode to `dark`, without any way to change it.\n */\nexport function DarkMode(props: React.PropsWithChildren<{}>) {\n const context = useMemo(\n () => ({\n colorMode: \"dark\",\n toggleColorMode: noop,\n setColorMode: noop,\n forced: true,\n }),\n [],\n )\n\n return \n}\n\nDarkMode.displayName = \"DarkMode\"\n\n/**\n * Locks the color mode to `light` without any way to change it.\n */\nexport function LightMode(props: React.PropsWithChildren<{}>) {\n const context = useMemo(\n () => ({\n colorMode: \"light\",\n toggleColorMode: noop,\n setColorMode: noop,\n forced: true,\n }),\n [],\n )\n\n return \n}\n\nLightMode.displayName = \"LightMode\"\n","import { useSafeLayoutEffect } from \"@chakra-ui/react-use-safe-layout-effect\"\nimport { createContext, useContext, useMemo, useReducer, useRef } from \"react\"\n\ninterface Environment {\n getWindow: () => Window\n getDocument: () => Document\n}\n\nconst EnvironmentContext = createContext({\n getDocument() {\n return document\n },\n getWindow() {\n return window\n },\n})\n\nEnvironmentContext.displayName = \"EnvironmentContext\"\n\nexport function useEnvironment({ defer }: { defer?: boolean } = {}) {\n const [, forceUpdate] = useReducer((c) => c + 1, 0)\n\n useSafeLayoutEffect(() => {\n if (!defer) return\n forceUpdate()\n }, [defer])\n\n return useContext(EnvironmentContext)\n}\n\nexport interface EnvironmentProviderProps {\n children: React.ReactNode\n disabled?: boolean\n environment?: Environment\n}\n\nexport function EnvironmentProvider(props: EnvironmentProviderProps) {\n const { children, environment: environmentProp, disabled } = props\n const ref = useRef(null)\n\n const context = useMemo(() => {\n if (environmentProp) return environmentProp\n return {\n getDocument: () => ref.current?.ownerDocument ?? document,\n getWindow: () => ref.current?.ownerDocument.defaultView ?? window,\n }\n }, [environmentProp])\n\n const showSpan = !disabled || !environmentProp\n\n return (\n \n {children}\n {showSpan && }\n \n )\n}\n\nEnvironmentProvider.displayName = \"EnvironmentProvider\"\n","import { CSSReset, CSSPolyfill } from \"@chakra-ui/css-reset\"\nimport { PortalManager } from \"@chakra-ui/portal\"\nimport {\n ColorModeProvider,\n ColorModeProviderProps,\n GlobalStyle,\n ThemeProvider,\n ThemeProviderProps,\n} from \"@chakra-ui/system\"\nimport { Dict } from \"@chakra-ui/utils\"\nimport {\n EnvironmentProvider,\n EnvironmentProviderProps,\n} from \"@chakra-ui/react-env\"\n\nexport interface ChakraProviderProps\n extends Pick {\n /**\n * a theme. if omitted, uses the default theme provided by chakra\n */\n theme?: Dict\n /**\n * Common z-index to use for `Portal`\n *\n * @default undefined\n */\n portalZIndex?: number\n /**\n * If `true`, `CSSReset` component will be mounted to help\n * you reset browser styles\n *\n * @default true\n */\n resetCSS?: boolean\n /**\n * The selector to scope the css reset styles to.\n */\n resetScope?: string\n /**\n * manager to persist a users color mode preference in\n *\n * omit if you don't render server-side\n * for SSR: choose `cookieStorageManager`\n *\n * @default localStorageManager\n */\n colorModeManager?: ColorModeProviderProps[\"colorModeManager\"]\n /**\n * Your application content\n */\n children?: React.ReactNode\n /**\n * The environment (`window` and `document`) to be used by\n * all components and hooks.\n *\n * By default, we smartly determine the ownerDocument and defaultView\n * based on where `ChakraProvider` is rendered.\n */\n environment?: EnvironmentProviderProps[\"environment\"]\n /**\n * Disabled the use of automatic window and document detection.\n * This removed the injected `` element\n */\n disableEnvironment?: boolean\n /**\n * If `true`, Chakra will not mount the global styles defined in the theme.\n */\n disableGlobalStyle?: boolean\n}\n\n/**\n * The global provider that must be added to make all Chakra components\n * work correctly\n */\nexport const ChakraProvider: React.FC = (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\n const _children = (\n \n {children}\n \n )\n\n return (\n \n \n {resetCSS ? : }\n {!disableGlobalStyle && }\n {portalZIndex ? (\n {_children}\n ) : (\n _children\n )}\n \n \n )\n}\n","const transitionProperty = {\n common:\n \"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}\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}\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}\n\nconst transition = {\n property: transitionProperty,\n easing: transitionTimingFunction,\n duration: transitionDuration,\n}\n\nexport default transition\n","const zIndices = {\n hide: -1,\n auto: \"auto\",\n base: 0,\n docked: 10,\n dropdown: 1000,\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 default zIndices\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 default borders\n","const breakpoints = {\n base: \"0em\",\n sm: \"30em\",\n md: \"48em\",\n lg: \"62em\",\n xl: \"80em\",\n \"2xl\": \"96em\",\n}\n\nexport default breakpoints\n","const colors = {\n transparent: \"transparent\",\n current: \"currentColor\",\n black: \"#000000\",\n white: \"#FFFFFF\",\n\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\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\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\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\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\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\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\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\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\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\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\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 linkedin: {\n 50: \"#E8F4F9\",\n 100: \"#CFEDFB\",\n 200: \"#9BDAF3\",\n 300: \"#68C7EC\",\n 400: \"#34B3E4\",\n 500: \"#00A0DC\",\n 600: \"#008CC9\",\n 700: \"#0077B5\",\n 800: \"#005E93\",\n 900: \"#004471\",\n },\n\n facebook: {\n 50: \"#E8F4F9\",\n 100: \"#D9DEE9\",\n 200: \"#B7C2DA\",\n 300: \"#6482C0\",\n 400: \"#4267B2\",\n 500: \"#385898\",\n 600: \"#314E89\",\n 700: \"#29487D\",\n 800: \"#223B67\",\n 900: \"#1E355B\",\n },\n\n messenger: {\n 50: \"#D0E6FF\",\n 100: \"#B9DAFF\",\n 200: \"#A2CDFF\",\n 300: \"#7AB8FF\",\n 400: \"#2E90FF\",\n 500: \"#0078FF\",\n 600: \"#0063D1\",\n 700: \"#0052AC\",\n 800: \"#003C7E\",\n 900: \"#002C5C\",\n },\n\n whatsapp: {\n 50: \"#dffeec\",\n 100: \"#b9f5d0\",\n 200: \"#90edb3\",\n 300: \"#65e495\",\n 400: \"#3cdd78\",\n 500: \"#22c35e\",\n 600: \"#179848\",\n 700: \"#0c6c33\",\n 800: \"#01421c\",\n 900: \"#001803\",\n },\n\n twitter: {\n 50: \"#E5F4FD\",\n 100: \"#C8E9FB\",\n 200: \"#A8DCFA\",\n 300: \"#83CDF7\",\n 400: \"#57BBF5\",\n 500: \"#1DA1F2\",\n 600: \"#1A94DA\",\n 700: \"#1681BF\",\n 800: \"#136B9E\",\n 900: \"#0D4D71\",\n },\n\n telegram: {\n 50: \"#E3F2F9\",\n 100: \"#C5E4F3\",\n 200: \"#A2D4EC\",\n 300: \"#7AC1E4\",\n 400: \"#47A9DA\",\n 500: \"#0088CC\",\n 600: \"#007AB8\",\n 700: \"#006BA1\",\n 800: \"#005885\",\n 900: \"#003F5E\",\n },\n}\n\nexport default colors\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 default radii\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\":\n \"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 default shadows\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 default blur\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\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\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\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\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 default typography\n","export 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","import { spacing } from \"./spacing\"\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}\n\nconst container = {\n sm: \"640px\",\n md: \"768px\",\n lg: \"1024px\",\n xl: \"1280px\",\n}\n\nconst sizes = {\n ...spacing,\n ...largeSizes,\n container,\n}\n\nexport default sizes\n","import borders from \"./borders\"\nimport breakpoints from \"./breakpoints\"\nimport colors from \"./colors\"\nimport radii from \"./radius\"\nimport shadows from \"./shadows\"\nimport sizes from \"./sizes\"\nimport { spacing } from \"./spacing\"\nimport transition from \"./transition\"\nimport typography from \"./typography\"\nimport zIndices from \"./z-index\"\nimport blur from \"./blur\"\n\nexport const 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","import { createMultiStyleConfigHelpers, cssVar } from \"@chakra-ui/styled-system\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers([\n \"stepper\",\n \"step\",\n \"title\",\n \"description\",\n \"indicator\",\n \"separator\",\n \"icon\",\n \"number\",\n ])\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\")\n\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}))\n\nexport const 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","/**\n * Used to define the anatomy/parts of a component in a way that provides\n * a consistent API for `className`, css selector and `theming`.\n */\nexport function anatomy(\n name: string,\n map = {} as Record,\n): Anatomy {\n let called = false\n\n /**\n * Prevents user from calling `.parts` multiple times.\n * It should only be called once.\n */\n function assert() {\n if (!called) {\n called = true\n return\n }\n\n throw new Error(\n \"[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?\",\n )\n }\n\n /**\n * Add the core parts of the components\n */\n function parts(...values: V[]) {\n assert()\n for (const part of values) {\n ;(map as any)[part] = toPart(part)\n }\n return anatomy(name, map) as unknown as Omit, \"parts\">\n }\n\n /**\n * Extend the component anatomy to includes new parts\n */\n function extend(...parts: U[]) {\n for (const part of parts) {\n if (part in map) continue\n ;(map as any)[part] = toPart(part)\n }\n return anatomy(name, map) as unknown as Omit, \"parts\">\n }\n\n /**\n * Get all selectors for the component anatomy\n */\n function selectors() {\n const value = Object.fromEntries(\n Object.entries(map).map(([key, part]) => [key, (part as any).selector]),\n )\n return value as Record\n }\n\n /**\n * Get all classNames for the component anatomy\n */\n function classnames() {\n const value = Object.fromEntries(\n Object.entries(map).map(([key, part]) => [key, (part as any).className]),\n )\n return value as Record\n }\n\n /**\n * Creates the part object for the given part\n */\n function toPart(part: string) {\n const el = [\"container\", \"root\"].includes(part ?? \"\")\n ? [name]\n : [name, part]\n const attr = el.filter(Boolean).join(\"__\")\n const className = `chakra-${attr}`\n\n const partObj = {\n className,\n selector: `.${className}`,\n toString: () => part,\n }\n\n return partObj as typeof partObj & string\n }\n\n /**\n * Used to get the derived type of the anatomy\n */\n const __type = {} as T\n\n return {\n parts,\n toPart,\n extend,\n selectors,\n classnames,\n get keys(): T[] {\n return Object.keys(map) as T[]\n },\n __type,\n }\n}\n\ntype Part = {\n className: string\n selector: string\n toString: () => string\n}\n\ntype Anatomy = {\n parts: (...values: V[]) => Omit, \"parts\">\n toPart: (part: string) => Part\n extend: (...parts: U[]) => Omit, \"parts\">\n selectors: () => Record\n classnames: () => Record\n keys: T[]\n __type: T\n}\n","import { anatomy } from \"./anatomy\"\n\n/**\n * **Accordion anatomy**\n * - Root: the root container of the accordion\n * - Container: the accordion item contains the button and panel\n * - Button: the button is the trigger for the panel\n * - Panel: the panel is the content of the accordion item\n * - Icon: the expanded/collapsed icon\n */\nexport const accordionAnatomy = anatomy(\"accordion\")\n .parts(\"root\", \"container\", \"button\", \"panel\")\n .extend(\"icon\")\n\n/**\n * **Alert anatomy**\n * - Title: the alert's title\n * - Description: the alert's description\n * - Icon: the alert's icon\n */\nexport const alertAnatomy = anatomy(\"alert\")\n .parts(\"title\", \"description\", \"container\")\n .extend(\"icon\", \"spinner\")\n\n/**\n * **Avatar anatomy**\n * - Container: the container for the avatar\n * - Label: the avatar initials text\n * - Excess Label: the label or text that represents excess avatar count.\n * Typically used in avatar groups.\n * - Group: the container for the avatar group\n */\nexport const avatarAnatomy = anatomy(\"avatar\")\n .parts(\"label\", \"badge\", \"container\")\n .extend(\"excessLabel\", \"group\")\n\n/**\n * **Breadcrumb anatomy**\n * - Item: the container for a breadcrumb item\n * - Link: the element that represents the breadcrumb link\n * - Container: the container for the breadcrumb items\n * - Separator: the separator between breadcrumb items\n */\nexport const breadcrumbAnatomy = anatomy(\"breadcrumb\")\n .parts(\"link\", \"item\", \"container\")\n .extend(\"separator\")\n\nexport const buttonAnatomy = anatomy(\"button\").parts()\n\nexport const checkboxAnatomy = anatomy(\"checkbox\")\n .parts(\"control\", \"icon\", \"container\")\n .extend(\"label\")\n\nexport const circularProgressAnatomy = anatomy(\"progress\")\n .parts(\"track\", \"filledTrack\")\n .extend(\"label\")\n\nexport const drawerAnatomy = anatomy(\"drawer\")\n .parts(\"overlay\", \"dialogContainer\", \"dialog\")\n .extend(\"header\", \"closeButton\", \"body\", \"footer\")\n\nexport const editableAnatomy = anatomy(\"editable\").parts(\n \"preview\",\n \"input\",\n \"textarea\",\n)\n\nexport const formAnatomy = anatomy(\"form\").parts(\n \"container\",\n \"requiredIndicator\",\n \"helperText\",\n)\n\nexport const formErrorAnatomy = anatomy(\"formError\").parts(\"text\", \"icon\")\n\nexport const inputAnatomy = anatomy(\"input\").parts(\n \"addon\",\n \"field\",\n \"element\",\n \"group\",\n)\n\nexport const listAnatomy = anatomy(\"list\").parts(\"container\", \"item\", \"icon\")\n\nexport const menuAnatomy = anatomy(\"menu\")\n .parts(\"button\", \"list\", \"item\")\n .extend(\"groupTitle\", \"icon\", \"command\", \"divider\")\n\nexport const modalAnatomy = anatomy(\"modal\")\n .parts(\"overlay\", \"dialogContainer\", \"dialog\")\n .extend(\"header\", \"closeButton\", \"body\", \"footer\")\n\nexport const numberInputAnatomy = anatomy(\"numberinput\").parts(\n \"root\",\n \"field\",\n \"stepperGroup\",\n \"stepper\",\n)\n\nexport const pinInputAnatomy = anatomy(\"pininput\").parts(\"field\")\n\nexport const popoverAnatomy = anatomy(\"popover\")\n .parts(\"content\", \"header\", \"body\", \"footer\")\n .extend(\"popper\", \"arrow\", \"closeButton\")\n\nexport const progressAnatomy = anatomy(\"progress\").parts(\n \"label\",\n \"filledTrack\",\n \"track\",\n)\n\nexport const radioAnatomy = anatomy(\"radio\").parts(\n \"container\",\n \"control\",\n \"label\",\n)\n\nexport const selectAnatomy = anatomy(\"select\").parts(\"field\", \"icon\")\n\nexport const sliderAnatomy = anatomy(\"slider\").parts(\n \"container\",\n \"track\",\n \"thumb\",\n \"filledTrack\",\n \"mark\",\n)\n\nexport const statAnatomy = anatomy(\"stat\").parts(\n \"container\",\n \"label\",\n \"helpText\",\n \"number\",\n \"icon\",\n)\n\nexport const switchAnatomy = anatomy(\"switch\").parts(\n \"container\",\n \"track\",\n \"thumb\",\n \"label\",\n)\n\nexport const tableAnatomy = anatomy(\"table\").parts(\n \"table\",\n \"thead\",\n \"tbody\",\n \"tr\",\n \"th\",\n \"td\",\n \"tfoot\",\n \"caption\",\n)\n\nexport const tabsAnatomy = anatomy(\"tabs\").parts(\n \"root\",\n \"tab\",\n \"tablist\",\n \"tabpanel\",\n \"tabpanels\",\n \"indicator\",\n)\n\n/**\n * **Tag anatomy**\n * - Container: the container for the tag\n * - Label: the text content of the tag\n * - closeButton: the close button for the tag\n */\nexport const tagAnatomy = anatomy(\"tag\").parts(\n \"container\",\n \"label\",\n \"closeButton\",\n)\n\nexport const cardAnatomy = anatomy(\"card\").parts(\n \"container\",\n \"header\",\n \"body\",\n \"footer\",\n)\n\nexport const stepperAnatomy = anatomy(\"stepper\").parts(\n \"stepper\",\n \"step\",\n \"title\",\n \"description\",\n \"indicator\",\n \"separator\",\n \"icon\",\n \"number\",\n)\n","export function isDecimal(value: any) {\n return !Number.isInteger(parseFloat(value.toString()))\n}\n\nfunction replaceWhiteSpace(value: string, replaceValue = \"-\") {\n return value.replace(/\\s+/g, replaceValue)\n}\n\nfunction escape(value: string | number) {\n const valueStr = replaceWhiteSpace(value.toString())\n if (valueStr.includes(\"\\\\.\")) return value\n return isDecimal(value) ? valueStr.replace(\".\", `\\\\.`) : value\n}\n\nexport function addPrefix(value: string, prefix = \"\") {\n return [prefix, escape(value)].filter(Boolean).join(\"-\")\n}\n\nexport function toVarRef(name: string, fallback?: string) {\n return `var(${escape(name)}${fallback ? `, ${fallback}` : \"\"})`\n}\n\nexport function toVar(value: string, prefix = \"\") {\n return `--${addPrefix(value, prefix)}`\n}\n\nexport type CSSVar = {\n variable: string\n reference: string\n}\n\nexport type CSSVarOptions = {\n fallback?: string | CSSVar\n prefix?: string\n}\n\nexport function cssVar(name: string, options?: CSSVarOptions) {\n const cssVariable = toVar(name, options?.prefix)\n return {\n variable: cssVariable,\n reference: toVarRef(cssVariable, getFallback(options?.fallback)),\n }\n}\n\nfunction getFallback(fallback?: string | CSSVar) {\n if (typeof fallback === \"string\") return fallback\n return fallback?.reference\n}\n","import { isObject } from \"@chakra-ui/shared-utils\"\nimport { CSSVar } from \"./css-var\"\n\nexport type Operand = string | number | CSSVar\ntype Operands = Operand[]\n\ntype Operator = \"+\" | \"-\" | \"*\" | \"/\"\n\nfunction toRef(operand: Operand): string {\n if (isObject(operand) && operand.reference) {\n return operand.reference\n }\n return String(operand)\n}\n\nconst toExpr = (operator: Operator, ...operands: Operands) =>\n operands.map(toRef).join(` ${operator} `).replace(/calc/g, \"\")\n\nconst add = (...operands: Operands) => `calc(${toExpr(\"+\", ...operands)})`\n\nconst subtract = (...operands: Operands) => `calc(${toExpr(\"-\", ...operands)})`\n\nconst multiply = (...operands: Operands) => `calc(${toExpr(\"*\", ...operands)})`\n\nconst divide = (...operands: Operands) => `calc(${toExpr(\"/\", ...operands)})`\n\nconst negate = (x: Operand) => {\n const value = toRef(x)\n\n if (value != null && !Number.isNaN(parseFloat(value))) {\n return String(value).startsWith(\"-\") ? String(value).slice(1) : `-${value}`\n }\n\n return multiply(value, -1)\n}\n\nexport interface CalcChain {\n add: (...operands: Operands) => CalcChain\n subtract: (...operands: Operands) => CalcChain\n multiply: (...operands: Operands) => CalcChain\n divide: (...operands: Operands) => CalcChain\n negate: () => CalcChain\n toString: () => string\n}\n\nexport const calc = Object.assign(\n (x: Operand): CalcChain => ({\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","import { switchAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { calc, cssVar } from \"@chakra-ui/theme-tools\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\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\")\n\nconst baseStyleTrack = defineStyle((props) => {\n const { colorScheme: c } = props\n\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})\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})\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}))\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}\n\nexport const switchTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\",\n },\n})\n","import type {\n SystemStyleObject,\n StyleFunctionProps,\n SystemStyleInterpolation,\n} from \"@chakra-ui/styled-system\"\n\nexport type {\n StyleConfig,\n MultiStyleConfig,\n SystemStyleObject,\n // StyleFunctionProps,\n SystemStyleFunction,\n SystemStyleInterpolation,\n PartsStyleObject,\n PartsStyleFunction,\n PartsStyleInterpolation,\n} from \"@chakra-ui/styled-system\"\n\n/* -----------------------------------------------------------------------------\n * Global Style object definitions\n * -----------------------------------------------------------------------------*/\n\nexport type GlobalStyleProps = StyleFunctionProps\n\nexport type GlobalStyles = {\n global?: SystemStyleInterpolation\n}\n\nexport type JSXElementStyles = {\n [K in keyof JSX.IntrinsicElements]?: SystemStyleObject\n}\n\nexport type Styles = GlobalStyles & JSXElementStyles\n\nexport function mode(light: T, dark: T) {\n return (props: Record | StyleFunctionProps) =>\n props.colorMode === \"dark\" ? dark : light\n}\n\nexport function orient(options: {\n orientation?: \"vertical\" | \"horizontal\"\n vertical: T\n horizontal: T\n}) {\n const { orientation, vertical, horizontal } = options\n if (!orientation) return {}\n return orientation === \"vertical\" ? vertical : horizontal\n}\n\nexport type { StyleFunctionProps }\n","import { tableAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { mode } from \"@chakra-ui/theme-tools\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\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})\n\nconst numericStyles = defineStyle({\n \"&[data-is-numeric=true]\": {\n textAlign: \"end\",\n },\n})\n\nconst variantSimple = definePartsStyle((props) => {\n const { colorScheme: c } = props\n\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})\n\nconst variantStripe = definePartsStyle((props) => {\n const { colorScheme: c } = props\n\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})\n\nconst variants = {\n simple: variantSimple,\n striped: variantStripe,\n unstyled: defineStyle({}),\n}\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}\n\nexport const tableTheme = defineMultiStyleConfig({\n baseStyle,\n variants,\n sizes,\n defaultProps: {\n variant: \"simple\",\n size: \"md\",\n colorScheme: \"gray\",\n },\n})\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 {\n toHex,\n parseToRgba,\n transparentize as setTransparency,\n mix,\n darken as reduceLightness,\n lighten as increaseLightness,\n getContrast,\n parseToHsla,\n hsla,\n getLuminance,\n} from \"color2k\"\n\nimport get from \"dlv\"\n\ntype Dict = { [key: string]: any }\nconst isEmptyObject = (obj: any) => Object.keys(obj).length === 0\n\n/**\n * Get the color raw value from theme\n * @param theme - the theme object\n * @param color - the color path (\"green.200\")\n * @param fallback - the fallback color\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const getColor = (theme: Dict, color: string, fallback?: string) => {\n const hex = get(theme, `colors.${color}`, color)\n try {\n toHex(hex)\n return hex\n } catch {\n // returning black to stay consistent with TinyColor behaviour so as to prevent breaking change\n return fallback ?? \"#000000\"\n }\n}\n\n/**\n * Get the color css variable from theme\n */\nexport const getColorVar = (theme: Dict, color: string, fallback?: string) => {\n return getCSSVar(theme, \"colors\", color) ?? fallback\n}\n\nconst getBrightness = (color: string) => {\n const [r, g, b] = parseToRgba(color)\n // http://www.w3.org/TR/AERT#color-contrast\n return (r * 299 + g * 587 + b * 114) / 1000\n}\n\n/**\n * Determines if the tone of given color is \"light\" or \"dark\"\n * @param color - the color in hex, rgb, or hsl\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const tone = (color: string) => (theme: Dict) => {\n const hex = getColor(theme, color)\n const brightness = getBrightness(hex)\n const isDark = brightness < 128\n return isDark ? \"dark\" : \"light\"\n}\n\n/**\n * Determines if a color tone is \"dark\"\n * @param color - the color in hex, rgb, or hsl\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const isDark = (color: string) => (theme: Dict) =>\n tone(color)(theme) === \"dark\"\n\n/**\n * Determines if a color tone is \"light\"\n * @param color - the color in hex, rgb, or hsl\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const isLight = (color: string) => (theme: Dict) =>\n tone(color)(theme) === \"light\"\n\n/**\n * Make a color transparent\n * @param color - the color in hex, rgb, or hsl\n * @param opacity - the amount of opacity the color should have (0-1)\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const transparentize =\n (color: string, opacity: number) => (theme: Dict) => {\n const raw = getColor(theme, color)\n return setTransparency(raw, 1 - opacity)\n }\n\n/**\n * Add white to a color\n * @param color - the color in hex, rgb, or hsl\n * @param amount - the amount white to add (0-100)\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const whiten = (color: string, amount: number) => (theme: Dict) => {\n const raw = getColor(theme, color)\n return toHex(mix(raw, \"#fff\", amount))\n}\n\n/**\n * Add black to a color\n * @param color - the color in hex, rgb, or hsl\n * @param amount - the amount black to add (0-100)\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const blacken = (color: string, amount: number) => (theme: Dict) => {\n const raw = getColor(theme, color)\n return toHex(mix(raw, \"#000\", amount / 100))\n}\n\n/**\n * Darken a specified color\n * @param color - the color in hex, rgb, or hsl\n * @param amount - the amount to darken (0-100)\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const darken = (color: string, amount: number) => (theme: Dict) => {\n const raw = getColor(theme, color)\n return toHex(reduceLightness(raw, amount / 100))\n}\n\n/**\n * Lighten a specified color\n * @param color - the color in hex, rgb, or hsl\n * @param amount - the amount to lighten (0-100)\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const lighten = (color: string, amount: number) => (theme: Dict) => {\n const raw = getColor(theme, color)\n toHex(increaseLightness(raw, amount / 100))\n}\n\n/**\n * Checks the contract ratio of between 2 colors,\n * based on the Web Content Accessibility Guidelines (Version 2.0).\n *\n * @param fg - the foreground or text color\n * @param bg - the background color\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const contrast = (fg: string, bg: string) => (theme: Dict) =>\n getContrast(getColor(theme, bg), getColor(theme, fg))\n\ninterface WCAG2Params {\n level?: \"AA\" | \"AAA\"\n size?: \"large\" | \"small\"\n}\n\n/**\n * Checks if a color meets the Web Content Accessibility\n * Guidelines (Version 2.0) for contrast ratio.\n *\n * @param textColor - the foreground or text color\n * @param bgColor - the background color\n * @param options\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const isAccessible =\n (textColor: string, bgColor: string, options?: WCAG2Params) =>\n (theme: Dict) =>\n isReadable(getColor(theme, bgColor), getColor(theme, textColor), options)\n\nexport function isReadable(\n color1: string,\n color2: string,\n wcag2: WCAG2Params = { level: \"AA\", size: \"small\" },\n): boolean {\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}\n\nexport function readability(color1: string, color2: string): number {\n return (\n (Math.max(getLuminance(color1), getLuminance(color2)) + 0.05) /\n (Math.min(getLuminance(color1), getLuminance(color2)) + 0.05)\n )\n}\n/**\n *\n * @deprecated This will be removed in the next major release.\n */\nexport const complementary = (color: string) => (theme: Dict) => {\n const raw = getColor(theme, color)\n const hsl = parseToHsla(raw)\n const complementHsl: [number, number, number, number] = Object.assign(hsl, [\n (hsl[0] + 180) % 360,\n ])\n return toHex(hsla(...complementHsl))\n}\n\nexport function generateStripe(\n size = \"1rem\",\n color = \"rgba(255, 255, 255, 0.15)\",\n) {\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}\n\ninterface RandomColorOptions {\n /**\n * If passed, string will be used to generate\n * random color\n */\n string?: string\n /**\n * List of colors to pick from at random\n */\n colors?: string[]\n}\n\nconst randomHex = () =>\n `#${Math.floor(Math.random() * 0xffffff)\n .toString(16)\n .padEnd(6, \"0\")}`\n\nexport function randomColor(opts?: RandomColorOptions) {\n const fallback = randomHex()\n\n if (!opts || isEmptyObject(opts)) {\n return fallback\n }\n\n if (opts.string && opts.colors) {\n return randomColorFromList(opts.string, opts.colors)\n }\n\n if (opts.string && !opts.colors) {\n return randomColorFromString(opts.string)\n }\n\n if (opts.colors && !opts.string) {\n return randomFromList(opts.colors)\n }\n\n return fallback\n}\n\nfunction randomColorFromString(str: string) {\n let hash = 0\n if (str.length === 0) 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}\n\nfunction randomColorFromList(str: string, list: string[]) {\n let index = 0\n if (str.length === 0) 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}\n\nfunction randomFromList(list: string[]) {\n return list[Math.floor(Math.random() * list.length)]\n}\n","export default function dlv(obj, key, def, p, undef) {\n\tkey = key.split ? key.split('.') : key;\n\tfor (p = 0; p < key.length; p++) {\n\t\tobj = obj ? obj[key[p]] : undef;\n\t}\n\treturn obj === undef ? def : obj;\n}\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 { tabsAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} 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\")\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst baseStyleRoot = defineStyle((props) => {\n const { orientation } = props\n return {\n display: orientation === \"vertical\" ? \"flex\" : \"block\",\n }\n})\n\nconst baseStyleTab = defineStyle((props) => {\n const { isFitted } = props\n\n return {\n flex: isFitted ? 1 : undefined,\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})\n\nconst baseStyleTablist = defineStyle((props) => {\n const { align = \"start\", orientation } = props\n\n const alignments: Record = {\n end: \"flex-end\",\n center: \"center\",\n start: \"flex-start\",\n }\n\n return {\n justifyContent: alignments[align],\n flexDirection: orientation === \"vertical\" ? \"column\" : \"row\",\n }\n})\n\nconst baseStyleTabpanel = defineStyle({\n p: 4,\n})\n\nconst baseStyle = definePartsStyle((props) => ({\n root: baseStyleRoot(props),\n tab: baseStyleTab(props),\n tablist: baseStyleTablist(props),\n tabpanel: baseStyleTabpanel,\n}))\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}\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\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})\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})\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})\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})\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})\n\nconst variantUnstyled = definePartsStyle({})\n\nconst variants = {\n line: variantLine,\n enclosed: variantEnclosed,\n \"enclosed-colored\": variantEnclosedColored,\n \"soft-rounded\": variantSoftRounded,\n \"solid-rounded\": variantSolidRounded,\n unstyled: variantUnstyled,\n}\n\nexport const tabsTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n variants,\n defaultProps: {\n size: \"md\",\n variant: \"line\",\n colorScheme: \"blue\",\n },\n})\n","import {\n defineCssVars,\n defineStyle,\n defineStyleConfig,\n} from \"@chakra-ui/styled-system\"\nimport { transparentize } from \"@chakra-ui/theme-tools\"\n\nconst vars = defineCssVars(\"badge\", [\"bg\", \"color\", \"shadow\"])\n\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})\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})\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})\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})\n\nconst variants = {\n solid: variantSolid,\n subtle: variantSubtle,\n outline: variantOutline,\n}\n\nexport const badgeTheme = defineStyleConfig({\n baseStyle,\n variants,\n defaultProps: {\n variant: \"subtle\",\n colorScheme: \"gray\",\n },\n})\n\nexport { vars as badgeVars }\n","import { tagAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { badgeTheme, badgeVars } from \"./badge\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\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\")\n\nconst baseStyleContainer = defineStyle({\n fontWeight: \"medium\",\n lineHeight: 1.2,\n outline: 0,\n [$color.variable]: badgeVars.color.reference,\n [$bg.variable]: badgeVars.bg.reference,\n [$shadow.variable]: badgeVars.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})\n\nconst baseStyleLabel = defineStyle({\n lineHeight: 1.2,\n overflow: \"visible\",\n})\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})\n\nconst baseStyle = definePartsStyle({\n container: baseStyleContainer,\n label: baseStyleLabel,\n closeButton: baseStyleCloseButton,\n})\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}\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}\n\nexport const tagTheme = defineMultiStyleConfig({\n variants,\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n variant: \"subtle\",\n colorScheme: \"gray\",\n },\n})\n","import { inputAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { getColor, mode } from \"@chakra-ui/theme-tools\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $height = cssVar(\"input-height\")\nconst $fontSize = cssVar(\"input-font-size\")\nconst $padding = cssVar(\"input-padding\")\nconst $borderRadius = cssVar(\"input-border-radius\")\n\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})\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}\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}\n\nfunction getDefaults(props: Record) {\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}\n\nconst variantOutline = definePartsStyle((props) => {\n const { theme } = props\n const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)\n\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})\n\nconst variantFilled = definePartsStyle((props) => {\n const { theme } = props\n const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)\n\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})\n\nconst variantFlushed = definePartsStyle((props) => {\n const { theme } = props\n const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)\n\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})\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})\n\nconst variants = {\n outline: variantOutline,\n filled: variantFilled,\n flushed: variantFlushed,\n unstyled: variantUnstyled,\n}\n\nexport const inputTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n variants,\n defaultProps: {\n size: \"md\",\n variant: \"outline\",\n },\n})\n","import { defineStyle, defineStyleConfig } from \"@chakra-ui/styled-system\"\nimport { inputTheme } from \"./input\"\n\nconst baseStyle = defineStyle({\n ...inputTheme.baseStyle?.field,\n paddingY: \"2\",\n minHeight: \"20\",\n lineHeight: \"short\",\n verticalAlign: \"top\",\n})\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}\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}\n\nexport const textareaTheme = defineStyleConfig({\n baseStyle,\n sizes,\n variants,\n defaultProps: {\n size: \"md\",\n variant: \"outline\",\n },\n})\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\")\n\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})\n\nexport const tooltipTheme = defineStyleConfig({\n baseStyle,\n})\n","import { progressAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { generateStripe, getColor, mode } from \"@chakra-ui/theme-tools\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst filledStyle = defineStyle((props) => {\n const { colorScheme: c, theme: t, isIndeterminate, hasStripe } = props\n\n const stripeStyle = mode(\n generateStripe(),\n generateStripe(\"1rem\", \"rgba(0,0,0,0.1)\"),\n )(props)\n\n const bgColor = mode(`${c}.500`, `${c}.200`)(props)\n\n const gradient = `linear-gradient(\n to right,\n transparent 0%,\n ${getColor(t, bgColor)} 50%,\n transparent 100%\n )`\n\n const addStripe = !isIndeterminate && hasStripe\n\n return {\n ...(addStripe && stripeStyle),\n ...(isIndeterminate ? { bgImage: gradient } : { bgColor }),\n }\n})\n\nconst baseStyleLabel = defineStyle({\n lineHeight: \"1\",\n fontSize: \"0.25em\",\n fontWeight: \"bold\",\n color: \"white\",\n})\n\nconst baseStyleTrack = defineStyle((props) => {\n return {\n bg: mode(\"gray.100\", \"whiteAlpha.300\")(props),\n }\n})\n\nconst baseStyleFilledTrack = defineStyle((props) => {\n return {\n transitionProperty: \"common\",\n transitionDuration: \"slow\",\n ...filledStyle(props),\n }\n})\n\nconst baseStyle = definePartsStyle((props) => ({\n label: baseStyleLabel,\n filledTrack: baseStyleFilledTrack(props),\n track: baseStyleTrack(props),\n}))\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}\n\nexport const progressTheme = defineMultiStyleConfig({\n sizes,\n baseStyle,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\",\n },\n})\n","const isFunction = (value: any): value is Function =>\n typeof value === \"function\"\n\nexport function runIfFn(\n valueOrFn: T | ((...fnArgs: U[]) => T),\n ...args: U[]\n): T {\n return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn\n}\n","import { checkboxAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { mode } from \"@chakra-ui/theme-tools\"\nimport { runIfFn } from \"../utils/run-if-fn\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $size = cssVar(\"checkbox-size\")\n\nconst baseStyleControl = defineStyle((props) => {\n const { colorScheme: c } = props\n\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\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\n _hover: {\n bg: mode(`${c}.600`, `${c}.300`)(props),\n borderColor: mode(`${c}.600`, `${c}.300`)(props),\n },\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\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\n _disabled: {\n bg: mode(\"gray.100\", \"whiteAlpha.100\")(props),\n borderColor: mode(\"gray.100\", \"transparent\")(props),\n },\n\n _focusVisible: {\n boxShadow: \"outline\",\n },\n\n _invalid: {\n borderColor: mode(\"red.500\", \"red.300\")(props),\n },\n }\n})\n\nconst baseStyleContainer = defineStyle({\n _disabled: { cursor: \"not-allowed\" },\n})\n\nconst baseStyleLabel = defineStyle({\n userSelect: \"none\",\n _disabled: { opacity: 0.4 },\n})\n\nconst baseStyleIcon = defineStyle({\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n})\n\nconst baseStyle = definePartsStyle((props) => ({\n icon: baseStyleIcon,\n container: baseStyleContainer,\n control: runIfFn(baseStyleControl, props),\n label: baseStyleLabel,\n}))\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}\n\nexport const checkboxTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\",\n },\n})\n","import { selectAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { inputTheme } from \"./input\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $bg = cssVar(\"select-bg\")\n\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})\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})\n\nconst baseStyle = definePartsStyle({\n field: baseStyleField,\n icon: baseStyleIcon,\n})\n\nconst iconSpacing = defineStyle({\n paddingInlineEnd: \"8\",\n})\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}\n\nexport const selectTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n variants: inputTheme.variants,\n defaultProps: inputTheme.defaultProps,\n})\n","import { radioAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { runIfFn } from \"../utils/run-if-fn\"\nimport { checkboxTheme } from \"./checkbox\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst baseStyleControl = defineStyle((props) => {\n const controlStyle = runIfFn(checkboxTheme.baseStyle, props)?.control\n\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})\n\nconst baseStyle = definePartsStyle((props) => ({\n label: checkboxTheme.baseStyle?.(props).label,\n container: checkboxTheme.baseStyle?.(props).container,\n control: baseStyleControl(props),\n}))\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}\n\nexport const radioTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\",\n },\n})\n","import {\n cssVar,\n defineStyle,\n defineStyleConfig,\n} from \"@chakra-ui/styled-system\"\n\nconst $startColor = cssVar(\"skeleton-start-color\")\nconst $endColor = cssVar(\"skeleton-end-color\")\n\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})\n\nexport const skeletonTheme = defineStyleConfig({\n baseStyle,\n})\n","import {\n cssVar,\n defineStyle,\n defineStyleConfig,\n} from \"@chakra-ui/styled-system\"\n\nconst $bg = cssVar(\"skip-link-bg\")\n\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})\n\nexport const skipLinkTheme = defineStyleConfig({\n baseStyle,\n})\n","import { sliderAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { orient } from \"@chakra-ui/theme-tools\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $thumbSize = cssVar(\"slider-thumb-size\")\nconst $trackSize = cssVar(\"slider-track-size\")\nconst $bg = cssVar(\"slider-bg\")\n\nconst baseStyleContainer = defineStyle((props) => {\n const { orientation } = props\n\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: { h: \"100%\" },\n horizontal: { w: \"100%\" },\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\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})\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\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})\n\nconst baseStyleFilledTrack = defineStyle((props) => {\n const { colorScheme: c } = props\n\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})\n\nconst baseStyle = definePartsStyle((props) => ({\n container: baseStyleContainer(props),\n track: baseStyleTrack(props),\n thumb: baseStyleThumb(props),\n filledTrack: baseStyleFilledTrack(props),\n}))\n\nconst sizeLg = definePartsStyle({\n container: {\n [$thumbSize.variable]: `sizes.4`,\n [$trackSize.variable]: `sizes.1`,\n },\n})\n\nconst sizeMd = definePartsStyle({\n container: {\n [$thumbSize.variable]: `sizes.3.5`,\n [$trackSize.variable]: `sizes.1`,\n },\n})\n\nconst sizeSm = definePartsStyle({\n container: {\n [$thumbSize.variable]: `sizes.2.5`,\n [$trackSize.variable]: `sizes.0.5`,\n },\n})\n\nconst sizes = {\n lg: sizeLg,\n md: sizeMd,\n sm: sizeSm,\n}\n\nexport const sliderTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n colorScheme: \"blue\",\n },\n})\n","import { defineStyle, defineStyleConfig } from \"@chakra-ui/styled-system\"\nimport { cssVar } from \"@chakra-ui/theme-tools\"\n\nconst $size = cssVar(\"spinner-size\")\n\nconst baseStyle = defineStyle({\n width: [$size.reference],\n height: [$size.reference],\n})\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}\n\nexport const spinnerTheme = defineStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n },\n})\n","import { statAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst baseStyleLabel = defineStyle({\n fontWeight: \"medium\",\n})\n\nconst baseStyleHelpText = defineStyle({\n opacity: 0.8,\n marginBottom: \"2\",\n})\n\nconst baseStyleNumber = defineStyle({\n verticalAlign: \"baseline\",\n fontWeight: \"semibold\",\n})\n\nconst baseStyleIcon = defineStyle({\n marginEnd: 1,\n w: \"3.5\",\n h: \"3.5\",\n verticalAlign: \"middle\",\n})\n\nconst baseStyle = definePartsStyle({\n container: {},\n label: baseStyleLabel,\n helpText: baseStyleHelpText,\n number: baseStyleNumber,\n icon: baseStyleIcon,\n})\n\nconst sizes = {\n md: definePartsStyle({\n label: { fontSize: \"sm\" },\n helpText: { fontSize: \"sm\" },\n number: { fontSize: \"2xl\" },\n }),\n}\n\nexport const statTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n },\n})\n","import {\n cssVar,\n defineStyle,\n defineStyleConfig,\n} from \"@chakra-ui/styled-system\"\n\nconst $bg = cssVar(\"kbd-bg\")\n\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})\n\nexport const kbdTheme = defineStyleConfig({\n baseStyle,\n})\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})\n\nexport const linkTheme = defineStyleConfig({\n baseStyle,\n})\n","import { listAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst baseStyleIcon = defineStyle({\n marginEnd: \"2\",\n display: \"inline\",\n verticalAlign: \"text-bottom\",\n})\n\nconst baseStyle = definePartsStyle({\n icon: baseStyleIcon,\n})\n\nexport const listTheme = defineMultiStyleConfig({\n baseStyle,\n})\n","import { menuAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $bg = cssVar(\"menu-bg\")\nconst $shadow = cssVar(\"menu-shadow\")\n\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: 1,\n borderRadius: \"md\",\n borderWidth: \"1px\",\n bg: $bg.reference,\n boxShadow: $shadow.reference,\n})\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})\n\nconst baseStyleGroupTitle = defineStyle({\n mx: 4,\n my: 2,\n fontWeight: \"semibold\",\n fontSize: \"sm\",\n})\n\nconst baseStyleIcon = defineStyle({\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n flexShrink: 0,\n})\n\nconst baseStyleCommand = defineStyle({\n opacity: 0.6,\n})\n\nconst baseStyleDivider = defineStyle({\n border: 0,\n borderBottom: \"1px solid\",\n borderColor: \"inherit\",\n my: \"2\",\n opacity: 0.6,\n})\n\nconst baseStyleButton = defineStyle({\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n})\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})\n\nexport const menuTheme = defineMultiStyleConfig({\n baseStyle,\n})\n","import { modalAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { runIfFn } from \"../utils/run-if-fn\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $bg = cssVar(\"modal-bg\")\nconst $shadow = cssVar(\"modal-shadow\")\n\nconst baseStyleOverlay = defineStyle({\n bg: \"blackAlpha.600\",\n zIndex: \"modal\",\n})\n\nconst baseStyleDialogContainer = defineStyle((props) => {\n const { isCentered, scrollBehavior } = props\n\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})\n\nconst baseStyleDialog = defineStyle((props) => {\n const { isCentered, scrollBehavior } = props\n\n return {\n borderRadius: \"md\",\n color: \"inherit\",\n my: isCentered ? \"auto\" : \"16\",\n mx: isCentered ? \"auto\" : undefined,\n zIndex: \"modal\",\n maxH: scrollBehavior === \"inside\" ? \"calc(100% - 7.5rem)\" : undefined,\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})\n\nconst baseStyleHeader = defineStyle({\n px: \"6\",\n py: \"4\",\n fontSize: \"xl\",\n fontWeight: \"semibold\",\n})\n\nconst baseStyleCloseButton = defineStyle({\n position: \"absolute\",\n top: \"2\",\n insetEnd: \"3\",\n})\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\" : undefined,\n }\n})\n\nconst baseStyleFooter = defineStyle({\n px: \"6\",\n py: \"4\",\n})\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}))\n\n/**\n * Since the `maxWidth` prop references theme.sizes internally,\n * we can leverage that to size our modals.\n */\nfunction getSize(value: string) {\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}\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}\n\nexport const modalTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: { size: \"md\" },\n})\n","import { numberInputAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { calc, cssVar } from \"@chakra-ui/theme-tools\"\nimport typography from \"../foundations/typography\"\nimport { inputTheme } from \"./input\"\nimport { runIfFn } from \"../utils/run-if-fn\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $stepperWidth = cssVar(\"number-input-stepper-width\")\n\nconst $inputPadding = cssVar(\"number-input-input-padding\")\nconst inputPaddingValue = calc($stepperWidth).add(\"0.5rem\").toString()\n\nconst $bg = cssVar(\"number-input-bg\")\nconst $fg = cssVar(\"number-input-color\")\nconst $border = cssVar(\"number-input-border-color\")\n\nconst baseStyleRoot = defineStyle({\n [$stepperWidth.variable]: \"sizes.6\",\n [$inputPadding.variable]: inputPaddingValue,\n})\n\nconst baseStyleField = defineStyle(\n (props) => runIfFn(inputTheme.baseStyle, props)?.field ?? {},\n)\n\nconst baseStyleStepperGroup = defineStyle({\n width: $stepperWidth.reference,\n})\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})\n\nconst baseStyle = definePartsStyle((props) => ({\n root: baseStyleRoot,\n field: runIfFn(baseStyleField, props) ?? {},\n stepperGroup: baseStyleStepperGroup,\n stepper: baseStyleStepper,\n}))\n\ntype FontSize = keyof typeof typography.fontSizes\n\nfunction getSize(size: FontSize) {\n //@ts-expect-error\n const sizeStyle = inputTheme.sizes?.[size]\n\n const radius: Partial> = {\n lg: \"md\",\n md: \"md\",\n sm: \"sm\",\n xs: \"sm\",\n }\n\n const _fontSize = (sizeStyle.field?.fontSize ?? \"md\") as FontSize\n const fontSize = typography.fontSizes[_fontSize]\n\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}\n\nconst sizes = {\n xs: getSize(\"xs\"),\n sm: getSize(\"sm\"),\n md: getSize(\"md\"),\n lg: getSize(\"lg\"),\n}\n\nexport const numberInputTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n variants: inputTheme.variants,\n defaultProps: inputTheme.defaultProps,\n})\n","import { defineStyle, defineStyleConfig } from \"@chakra-ui/styled-system\"\nimport { inputTheme } from \"./input\"\nimport { runIfFn } from \"../utils/run-if-fn\"\n\nconst baseStyle = defineStyle({\n ...inputTheme.baseStyle?.field,\n textAlign: \"center\",\n})\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}\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}\n\nexport const pinInputTheme = defineStyleConfig({\n baseStyle,\n sizes,\n variants,\n defaultProps: inputTheme.defaultProps,\n})\n","import { popoverAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { cssVar } from \"@chakra-ui/theme-tools\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $popperBg = cssVar(\"popper-bg\")\nconst $arrowBg = cssVar(\"popper-arrow-bg\")\nconst $arrowShadowColor = cssVar(\"popper-arrow-shadow-color\")\n\nconst baseStylePopper = defineStyle({ zIndex: 10 })\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})\n\nconst baseStyleHeader = defineStyle({\n px: 3,\n py: 2,\n borderBottomWidth: \"1px\",\n})\n\nconst baseStyleBody = defineStyle({\n px: 3,\n py: 2,\n})\n\nconst baseStyleFooter = defineStyle({\n px: 3,\n py: 2,\n borderTopWidth: \"1px\",\n})\n\nconst baseStyleCloseButton = defineStyle({\n position: \"absolute\",\n borderRadius: \"md\",\n top: 1,\n insetEnd: 2,\n padding: 2,\n})\n\nconst baseStyle = definePartsStyle({\n popper: baseStylePopper,\n content: baseStyleContent,\n header: baseStyleHeader,\n body: baseStyleBody,\n footer: baseStyleFooter,\n closeButton: baseStyleCloseButton,\n})\n\nexport const popoverTheme = defineMultiStyleConfig({\n baseStyle,\n})\n","import { drawerAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { runIfFn } from \"../utils/run-if-fn\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $bg = cssVar(\"drawer-bg\")\nconst $bs = cssVar(\"drawer-box-shadow\")\n\n/**\n * Since the `maxWidth` prop references theme.sizes internally,\n * we can leverage that to size our modals.\n */\nfunction getSize(value: string) {\n if (value === \"full\") {\n return definePartsStyle({\n dialog: { maxW: \"100vw\", h: \"100vh\" },\n })\n }\n return definePartsStyle({\n dialog: { maxW: value },\n })\n}\n\nconst baseStyleOverlay = defineStyle({\n bg: \"blackAlpha.600\",\n zIndex: \"modal\",\n})\n\nconst baseStyleDialogContainer = defineStyle({\n display: \"flex\",\n zIndex: \"modal\",\n justifyContent: \"center\",\n})\n\nconst baseStyleDialog = defineStyle((props) => {\n const { isFullHeight } = props\n\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})\n\nconst baseStyleHeader = defineStyle({\n px: \"6\",\n py: \"4\",\n fontSize: \"xl\",\n fontWeight: \"semibold\",\n})\n\nconst baseStyleCloseButton = defineStyle({\n position: \"absolute\",\n top: \"2\",\n insetEnd: \"3\",\n})\n\nconst baseStyleBody = defineStyle({\n px: \"6\",\n py: \"2\",\n flex: \"1\",\n overflow: \"auto\",\n})\n\nconst baseStyleFooter = defineStyle({\n px: \"6\",\n py: \"4\",\n})\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}))\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}\n\nexport const drawerTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"xs\",\n },\n})\n","import { editableAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst baseStylePreview = defineStyle({\n borderRadius: \"md\",\n py: \"1\",\n transitionProperty: \"common\",\n transitionDuration: \"normal\",\n})\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})\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})\n\nconst baseStyle = definePartsStyle({\n preview: baseStylePreview,\n input: baseStyleInput,\n textarea: baseStyleTextarea,\n})\n\nexport const editableTheme = defineMultiStyleConfig({\n baseStyle,\n})\n","import { formAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $fg = cssVar(\"form-control-color\")\n\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})\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})\n\nconst baseStyle = definePartsStyle({\n container: {\n width: \"100%\",\n position: \"relative\",\n },\n requiredIndicator: baseStyleRequiredIndicator,\n helperText: baseStyleHelperText,\n})\n\nexport const formTheme = defineMultiStyleConfig({\n baseStyle,\n})\n","import { formErrorAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $fg = cssVar(\"form-error-color\")\n\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})\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})\n\nconst baseStyle = definePartsStyle({\n text: baseStyleText,\n icon: baseStyleIcon,\n})\n\nexport const formErrorTheme = defineMultiStyleConfig({\n baseStyle,\n})\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})\n\nexport const formLabelTheme = defineStyleConfig({\n baseStyle,\n})\n","import { defineStyle, defineStyleConfig } from \"@chakra-ui/styled-system\"\n\nconst baseStyle = defineStyle({\n fontFamily: \"heading\",\n fontWeight: \"bold\",\n})\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}\n\nexport const headingTheme = defineStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"xl\",\n },\n})\n","import { breadcrumbAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\n\nconst { defineMultiStyleConfig, definePartsStyle } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $decor = cssVar(\"breadcrumb-link-decor\")\n\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})\n\nconst baseStyle = definePartsStyle({\n link: baseStyleLink,\n})\n\nexport const breadcrumbTheme = defineMultiStyleConfig({\n baseStyle,\n})\n","import { defineStyle, defineStyleConfig } from \"@chakra-ui/styled-system\"\nimport { mode, transparentize } from \"@chakra-ui/theme-tools\"\nimport { runIfFn } from \"../utils/run-if-fn\"\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})\n\nconst variantGhost = defineStyle((props) => {\n const { colorScheme: c, theme } = props\n\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\n const darkHoverBg = transparentize(`${c}.200`, 0.12)(theme)\n const darkActiveBg = transparentize(`${c}.200`, 0.24)(theme)\n\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})\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)\":\n { marginEnd: \"-1px\" },\n \".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)\":\n { marginBottom: \"-1px\" },\n ...runIfFn(variantGhost, props),\n }\n})\n\ntype AccessibleColor = {\n bg?: string\n color?: string\n hoverBg?: string\n activeBg?: string\n}\n\n/** Accessible color overrides for less accessible colors. */\nconst accessibleColorMap: { [key: string]: AccessibleColor } = {\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}\n\nconst variantSolid = defineStyle((props) => {\n const { colorScheme: c } = props\n\n if (c === \"gray\") {\n const bg = mode(`gray.100`, `whiteAlpha.200`)(props)\n\n return {\n bg,\n color: mode(`gray.800`, `whiteAlpha.900`)(props),\n _hover: {\n bg: mode(`gray.200`, `whiteAlpha.300`)(props),\n _disabled: {\n bg,\n },\n },\n _active: { bg: mode(`gray.300`, `whiteAlpha.400`)(props) },\n }\n }\n\n const {\n bg = `${c}.500`,\n color = \"white\",\n hoverBg = `${c}.600`,\n activeBg = `${c}.700`,\n } = accessibleColorMap[c] ?? {}\n\n const background = mode(bg, `${c}.200`)(props)\n\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})\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})\n\nconst variantUnstyled = defineStyle({\n bg: \"none\",\n color: \"inherit\",\n display: \"inline\",\n lineHeight: \"inherit\",\n m: \"0\",\n p: \"0\",\n})\n\nconst variants = {\n ghost: variantGhost,\n outline: variantOutline,\n solid: variantSolid,\n link: variantLink,\n unstyled: variantUnstyled,\n}\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}\n\nexport const buttonTheme = defineStyleConfig({\n baseStyle,\n variants,\n sizes,\n defaultProps: {\n variant: \"solid\",\n size: \"md\",\n colorScheme: \"gray\",\n },\n})\n","import { cardAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport { createMultiStyleConfigHelpers, cssVar } from \"@chakra-ui/styled-system\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\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\")\n\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})\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}\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}\n\nexport const cardTheme = defineMultiStyleConfig({\n baseStyle,\n variants,\n sizes,\n defaultProps: {\n variant: \"elevated\",\n size: \"md\",\n },\n})\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\")\n\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})\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}\n\nexport const closeButtonTheme = defineStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n },\n})\n","import { defineStyle, defineStyleConfig } from \"@chakra-ui/styled-system\"\nimport { badgeTheme, badgeVars as vars } from \"./badge\"\n\nconst { variants, defaultProps } = badgeTheme\n\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})\n\nexport const codeTheme = defineStyleConfig({\n baseStyle,\n variants,\n defaultProps,\n})\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})\n\nexport const containerTheme = defineStyleConfig({\n baseStyle,\n})\n","import { defineStyle, defineStyleConfig } from \"@chakra-ui/styled-system\"\n\nconst baseStyle = defineStyle({\n opacity: 0.6,\n borderColor: \"inherit\",\n})\n\nconst variantSolid = defineStyle({\n borderStyle: \"solid\",\n})\n\nconst variantDashed = defineStyle({\n borderStyle: \"dashed\",\n})\n\nconst variants = {\n solid: variantSolid,\n dashed: variantDashed,\n}\n\nexport const dividerTheme = defineStyleConfig({\n baseStyle,\n variants,\n defaultProps: {\n variant: \"solid\",\n },\n})\n","import { accordionAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst baseStyleContainer = defineStyle({\n borderTopWidth: \"1px\",\n borderColor: \"inherit\",\n _last: {\n borderBottomWidth: \"1px\",\n },\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})\n\nconst baseStylePanel = defineStyle({\n pt: \"2\",\n px: \"4\",\n pb: \"5\",\n})\n\nconst baseStyleIcon = defineStyle({\n fontSize: \"1.25em\",\n})\n\nconst baseStyle = definePartsStyle({\n container: baseStyleContainer,\n button: baseStyleButton,\n panel: baseStylePanel,\n icon: baseStyleIcon,\n})\n\nexport const accordionTheme = defineMultiStyleConfig({ baseStyle })\n","import { alertAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n StyleFunctionProps,\n} from \"@chakra-ui/styled-system\"\nimport { transparentize } from \"@chakra-ui/theme-tools\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $fg = cssVar(\"alert-fg\")\nconst $bg = cssVar(\"alert-bg\")\n\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})\n\nfunction getBg(props: StyleFunctionProps) {\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}\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})\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})\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})\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})\n\nconst variants = {\n subtle: variantSubtle,\n \"left-accent\": variantLeftAccent,\n \"top-accent\": variantTopAccent,\n solid: variantSolid,\n}\n\nexport const alertTheme = defineMultiStyleConfig({\n baseStyle,\n variants,\n defaultProps: {\n variant: \"subtle\",\n colorScheme: \"blue\",\n },\n})\n","import { avatarAnatomy as parts } from \"@chakra-ui/anatomy\"\nimport {\n createMultiStyleConfigHelpers,\n cssVar,\n defineStyle,\n} from \"@chakra-ui/styled-system\"\nimport { isDark, randomColor } from \"@chakra-ui/theme-tools\"\nimport themeSizes from \"../foundations/sizes\"\nimport { runIfFn } from \"../utils/run-if-fn\"\n\nconst { definePartsStyle, defineMultiStyleConfig } =\n createMultiStyleConfigHelpers(parts.keys)\n\nconst $border = cssVar(\"avatar-border-color\")\nconst $bg = cssVar(\"avatar-bg\")\nconst $fs = cssVar(\"avatar-font-size\")\nconst $size = cssVar(\"avatar-size\")\n\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})\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})\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\n let color = \"white\"\n if (!isBgDark) color = \"gray.800\"\n\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})\n\nconst baseStyleLabel = defineStyle({\n fontSize: $fs.reference,\n lineHeight: \"1\",\n})\n\nconst baseStyle = definePartsStyle((props) => ({\n badge: runIfFn(baseStyleBadge, props),\n excessLabel: runIfFn(baseStyleExcessLabel, props),\n container: runIfFn(baseStyleContainer, props),\n label: baseStyleLabel,\n}))\n\nfunction getSize(size: keyof typeof themeSizes | \"100%\") {\n const themeSize = size !== \"100%\" ? themeSizes[size] : undefined\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}\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}\n\nexport const avatarTheme = defineMultiStyleConfig({\n baseStyle,\n sizes,\n defaultProps: {\n size: \"md\",\n },\n})\n","import { accordionTheme } from \"./accordion\"\nimport { alertTheme } from \"./alert\"\nimport { avatarTheme } from \"./avatar\"\nimport { badgeTheme } from \"./badge\"\nimport { breadcrumbTheme } from \"./breadcrumb\"\nimport { buttonTheme } from \"./button\"\nimport { cardTheme } from \"./card\"\nimport { checkboxTheme } from \"./checkbox\"\nimport { closeButtonTheme } from \"./close-button\"\nimport { codeTheme } from \"./code\"\nimport { containerTheme } from \"./container\"\nimport { dividerTheme } from \"./divider\"\nimport { drawerTheme } from \"./drawer\"\nimport { editableTheme } from \"./editable\"\nimport { formTheme } from \"./form-control\"\nimport { formErrorTheme } from \"./form-error\"\nimport { formLabelTheme } from \"./form-label\"\nimport { headingTheme } from \"./heading\"\nimport { inputTheme } from \"./input\"\nimport { kbdTheme } from \"./kbd\"\nimport { linkTheme } from \"./link\"\nimport { listTheme } from \"./list\"\nimport { menuTheme } from \"./menu\"\nimport { modalTheme } from \"./modal\"\nimport { numberInputTheme } from \"./number-input\"\nimport { pinInputTheme } from \"./pin-input\"\nimport { popoverTheme } from \"./popover\"\nimport { progressTheme } from \"./progress\"\nimport { radioTheme } from \"./radio\"\nimport { selectTheme } from \"./select\"\nimport { skeletonTheme } from \"./skeleton\"\nimport { skipLinkTheme } from \"./skip-link\"\nimport { sliderTheme } from \"./slider\"\nimport { spinnerTheme } from \"./spinner\"\nimport { statTheme } from \"./stat\"\nimport { stepperTheme } from \"./stepper\"\nimport { switchTheme } from \"./switch\"\nimport { tableTheme } from \"./table\"\nimport { tabsTheme } from \"./tabs\"\nimport { tagTheme } from \"./tag\"\nimport { textareaTheme } from \"./textarea\"\nimport { tooltipTheme } from \"./tooltip\"\n\nexport { accordionTheme as Accordion } from \"./accordion\"\nexport { alertTheme as Alert } from \"./alert\"\nexport { avatarTheme as Avatar } from \"./avatar\"\nexport { badgeTheme as Badge } from \"./badge\"\nexport { breadcrumbTheme as Breadcrumb } from \"./breadcrumb\"\nexport { buttonTheme as Button } from \"./button\"\nexport { checkboxTheme as Checkbox } from \"./checkbox\"\nexport { closeButtonTheme as CloseButton } from \"./close-button\"\nexport { codeTheme as Code } from \"./code\"\nexport { containerTheme as Container } from \"./container\"\nexport { dividerTheme as Divider } from \"./divider\"\nexport { drawerTheme as Drawer } from \"./drawer\"\nexport { editableTheme as Editable } from \"./editable\"\nexport { formTheme as Form } from \"./form-control\"\nexport { formErrorTheme as FormError } from \"./form-error\"\nexport { formLabelTheme as FormLabel } from \"./form-label\"\nexport { headingTheme as Heading } from \"./heading\"\nexport { inputTheme as Input } from \"./input\"\nexport { kbdTheme as Kbd } from \"./kbd\"\nexport { linkTheme as Link } from \"./link\"\nexport { listTheme as List } from \"./list\"\nexport { menuTheme as Menu } from \"./menu\"\nexport { modalTheme as Modal } from \"./modal\"\nexport { numberInputTheme as NumberInput } from \"./number-input\"\nexport { pinInputTheme as PinInput } from \"./pin-input\"\nexport { popoverTheme as Popover } from \"./popover\"\nexport { progressTheme as Progress } from \"./progress\"\nexport { radioTheme as Radio } from \"./radio\"\nexport { selectTheme as Select } from \"./select\"\nexport { skeletonTheme as Skeleton } from \"./skeleton\"\nexport { skipLinkTheme as SkipLink } from \"./skip-link\"\nexport { sliderTheme as Slider } from \"./slider\"\nexport { spinnerTheme as Spinner } from \"./spinner\"\nexport { statTheme as Stat } from \"./stat\"\nexport { stepperTheme as Stepper } from \"./stepper\"\nexport { switchTheme as Switch } from \"./switch\"\nexport { tableTheme as Table } from \"./table\"\nexport { tabsTheme as Tabs } from \"./tabs\"\nexport { tagTheme as Tag } from \"./tag\"\nexport { textareaTheme as Textarea } from \"./textarea\"\nexport { tooltipTheme as Tooltip } from \"./tooltip\"\n\nexport const 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","export 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","import { Styles } from \"@chakra-ui/theme-tools\"\n\nexport const styles: 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","import { components } from \"./components\"\nimport { foundations } from \"./foundations\"\nimport { semanticTokens } from \"./semantic-tokens\"\nimport { styles } from \"./styles\"\nimport type { ThemeConfig, ThemeDirection } from \"./theme.types\"\n\nconst direction: ThemeDirection = \"ltr\"\n\nconst config: ThemeConfig = {\n useSystemColorMode: false,\n initialColorMode: \"light\",\n cssVarPrefix: \"chakra\",\n}\n\nexport const theme = {\n semanticTokens,\n direction,\n ...foundations,\n components,\n styles,\n config,\n}\n\nexport type Theme = typeof theme\n\nexport * from \"./theme.types\"\nexport * from \"./utils/is-chakra-theme\"\n\nexport const baseTheme = {\n semanticTokens,\n direction,\n components: {},\n ...foundations,\n styles,\n config,\n}\n","import type { ToastPosition } from \"./toast.placement\"\nimport type { ToastId, ToastOptions, ToastState } from \"./toast.types\"\n\n/**\n * Given an array of toasts for a specific position.\n * It returns the toast that matches the `id` passed\n */\nexport const findById = (arr: ToastOptions[], id: ToastId) =>\n arr.find((toast) => toast.id === id)\n\n/**\n * Given the toast manager state, finds the toast that matches\n * the id and return its position and index\n */\nexport function findToast(toasts: ToastState, id: ToastId) {\n const position = getToastPosition(toasts, id)\n\n const index = position\n ? toasts[position].findIndex((toast) => toast.id === id)\n : -1\n\n return {\n position,\n index,\n }\n}\n\n/**\n * Given the toast manager state, finds the position of the toast that\n * matches the `id`\n */\nexport function getToastPosition(toasts: ToastState, id: ToastId) {\n for (const [position, values] of Object.entries(toasts)) {\n if (findById(values, id)) {\n return position as ToastPosition\n }\n }\n}\n\n/**\n * Given the toast manager state, checks if a specific toast is\n * still in the state, which means it is still visible on screen.\n */\nexport const isVisible = (toasts: ToastState, id: ToastId) =>\n !!getToastPosition(toasts, id)\n\n/**\n * Gets the styles to be applied to a toast's container\n * based on its position in the manager\n */\nexport function getToastStyle(position: ToastPosition): React.CSSProperties {\n const isRighty = position.includes(\"right\")\n const isLefty = position.includes(\"left\")\n\n let alignItems = \"center\"\n if (isRighty) alignItems = \"flex-end\"\n if (isLefty) alignItems = \"flex-start\"\n\n return {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems,\n }\n}\n\n/**\n * Compute the style of a toast based on its position\n */\nexport function getToastListStyle(\n position: ToastPosition,\n): React.CSSProperties {\n const isTopOrBottom = position === \"top\" || position === \"bottom\"\n const margin = isTopOrBottom ? \"0 auto\" : undefined\n\n const top = position.includes(\"top\")\n ? \"env(safe-area-inset-top, 0px)\"\n : undefined\n const bottom = position.includes(\"bottom\")\n ? \"env(safe-area-inset-bottom, 0px)\"\n : undefined\n const right = !position.includes(\"left\")\n ? \"env(safe-area-inset-right, 0px)\"\n : undefined\n const left = !position.includes(\"right\")\n ? \"env(safe-area-inset-left, 0px)\"\n : undefined\n\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","import { useCallback, useEffect, useRef } from \"react\"\n\nexport function useCallbackRef any>(\n callback: T | undefined,\n deps: React.DependencyList = [],\n) {\n const callbackRef = useRef(callback)\n\n useEffect(() => {\n callbackRef.current = callback\n })\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return useCallback(((...args) => callbackRef.current?.(...args)) as T, deps)\n}\n","import { useEffect, useRef } from \"react\"\n\nexport function useUpdateEffect(\n callback: React.EffectCallback,\n deps: React.DependencyList,\n) {\n const renderCycleRef = useRef(false)\n const effectCycleRef = useRef(false)\n\n useEffect(() => {\n const mounted = renderCycleRef.current\n const run = mounted && effectCycleRef.current\n if (run) {\n return callback()\n }\n effectCycleRef.current = true\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps)\n\n useEffect(() => {\n renderCycleRef.current = true\n return () => {\n renderCycleRef.current = false\n }\n }, [])\n}\n","import { createContext } from 'react';\n\n/**\n * @public\n */\nvar 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 var ref = useRef(null);\n if (ref.current === null) {\n ref.current = init();\n }\n return ref.current;\n}\n\nexport { useConstant };\n","import { useConstant } from './use-constant.mjs';\n\nvar counter = 0;\nvar incrementId = function () { return counter++; };\nvar useId = function () { return useConstant(incrementId); };\n/**\n * Ideally we'd use the following code to support React 18 optionally.\n * But this fairly fails in Webpack (otherwise treeshaking wouldn't work at all).\n * Need to come up with a different way of figuring this out.\n */\n// export const useId = (React as any).useId\n// ? (React as any).useId\n// : () => useConstant(incrementId)\n\nexport { useId };\n","import { useContext, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useId } from '../../utils/use-id.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 var context = useContext(PresenceContext);\n if (context === null)\n return [true, null];\n var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;\n // It's safe to call the following hooks conditionally (after an early return) because the context will always\n // either be null or non-null for the lifespan of the component.\n // Replace with useId when released in React\n var id = useId();\n useEffect(function () { return register(id); }, []);\n var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n * const isPresent = useIsPresent()\n *\n * useEffect(() => {\n * !isPresent && console.log(\"I've been removed!\")\n * }, [isPresent])\n *\n * return \n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n function next() {\n while (env.stack.length) {\n var rec = env.stack.pop();\n try {\n var result = rec.dispose && rec.dispose.call(rec.value);\n if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n catch (e) {\n fail(e);\n }\n }\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n};\n","/**\n * Browser-safe usage of process\n */\nvar defaultEnvironment = \"production\";\nvar env = typeof process === \"undefined\" || process.env === undefined\n ? defaultEnvironment\n : process.env.NODE_ENV || defaultEnvironment;\n\nexport { env };\n","var createDefinition = function (propNames) { return ({\n isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); },\n}); };\nvar featureDefinitions = {\n measureLayout: createDefinition([\"layout\", \"layoutId\", \"drag\"]),\n animation: createDefinition([\n \"animate\",\n \"exit\",\n \"variants\",\n \"whileHover\",\n \"whileTap\",\n \"whileFocus\",\n \"whileDrag\",\n \"whileInView\",\n ]),\n exit: createDefinition([\"exit\"]),\n drag: createDefinition([\"drag\", \"dragControls\"]),\n focus: createDefinition([\"whileFocus\"]),\n hover: createDefinition([\"whileHover\", \"onHoverStart\", \"onHoverEnd\"]),\n tap: createDefinition([\"whileTap\", \"onTap\", \"onTapStart\", \"onTapCancel\"]),\n pan: createDefinition([\n \"onPan\",\n \"onPanStart\",\n \"onPanSessionStart\",\n \"onPanEnd\",\n ]),\n inView: createDefinition([\n \"whileInView\",\n \"onViewportEnter\",\n \"onViewportLeave\",\n ]),\n};\nfunction loadFeatures(features) {\n for (var key in features) {\n if (features[key] === null)\n continue;\n if (key === \"projectionNodeConstructor\") {\n featureDefinitions.projectionNodeConstructor = features[key];\n }\n else {\n featureDefinitions[key].Component = features[key];\n }\n }\n}\n\nexport { featureDefinitions, loadFeatures };\n","var warning = function () { };\r\nvar invariant = function () { };\r\nif (process.env.NODE_ENV !== 'production') {\r\n warning = function (check, message) {\r\n if (!check && typeof console !== 'undefined') {\r\n console.warn(message);\r\n }\r\n };\r\n invariant = function (check, message) {\r\n if (!check) {\r\n throw new Error(message);\r\n }\r\n };\r\n}\n\nexport { invariant, warning };\n","import { createContext } from 'react';\n\nvar LazyContext = createContext({ strict: false });\n\nexport { LazyContext };\n","import { __assign } from 'tslib';\nimport * as React from 'react';\nimport { useContext } from 'react';\nimport { env } from '../../utils/process.mjs';\nimport { featureDefinitions } from './definitions.mjs';\nimport { invariant } from 'hey-listen';\nimport { LazyContext } from '../../context/LazyContext.mjs';\n\nvar featureNames = Object.keys(featureDefinitions);\nvar numFeatures = featureNames.length;\n/**\n * Load features via renderless components based on the provided MotionProps.\n */\nfunction useFeatures(props, visualElement, preloadedFeatures) {\n var features = [];\n var lazyContext = useContext(LazyContext);\n if (!visualElement)\n return null;\n /**\n * If we're in development mode, check to make sure we're not rendering a motion component\n * as a child of LazyMotion, as this will break the file-size benefits of using it.\n */\n if (env !== \"production\" && preloadedFeatures && lazyContext.strict) {\n invariant(false, \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\");\n }\n for (var i = 0; i < numFeatures; i++) {\n var name_1 = featureNames[i];\n var _a = featureDefinitions[name_1], isEnabled = _a.isEnabled, Component = _a.Component;\n /**\n * It might be possible in the future to use this moment to\n * dynamically request functionality. In initial tests this\n * was producing a lot of duplication amongst bundles.\n */\n if (isEnabled(props) && Component) {\n features.push(React.createElement(Component, __assign({ key: name_1 }, props, { visualElement: visualElement })));\n }\n }\n return features;\n}\n\nexport { useFeatures };\n","import { createContext } from 'react';\n\n/**\n * @public\n */\nvar MotionConfigContext = createContext({\n transformPagePoint: function (p) { return p; },\n isStatic: false,\n reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","import { createContext, useContext } from 'react';\n\nvar MotionContext = createContext({});\nfunction useVisualElementContext() {\n return useContext(MotionContext).visualElement;\n}\n\nexport { MotionContext, useVisualElementContext };\n","var isBrowser = typeof document !== \"undefined\";\n\nexport { isBrowser };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nvar useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","import { __read } from 'tslib';\nimport { useState, useContext } from 'react';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { isBrowser } from './is-browser.mjs';\n\n// Does this device prefer reduced motion? Returns `null` server-side.\nvar prefersReducedMotion = { current: null };\nvar hasDetected = false;\nfunction initPrefersReducedMotion() {\n hasDetected = true;\n if (!isBrowser)\n return;\n if (window.matchMedia) {\n var motionMediaQuery_1 = window.matchMedia(\"(prefers-reduced-motion)\");\n var setReducedMotionPreferences = function () {\n return (prefersReducedMotion.current = motionMediaQuery_1.matches);\n };\n motionMediaQuery_1.addListener(setReducedMotionPreferences);\n setReducedMotionPreferences();\n }\n else {\n prefersReducedMotion.current = false;\n }\n}\n/**\n * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.\n *\n * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing\n * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.\n *\n * It will actively respond to changes and re-render your components with the latest setting.\n *\n * ```jsx\n * export function Sidebar({ isOpen }) {\n * const shouldReduceMotion = useReducedMotion()\n * const closedX = shouldReduceMotion ? 0 : \"-100%\"\n *\n * return (\n * \n * )\n * }\n * ```\n *\n * @return boolean\n *\n * @public\n */\nfunction useReducedMotion() {\n /**\n * Lazy initialisation of prefersReducedMotion\n */\n !hasDetected && initPrefersReducedMotion();\n var _a = __read(useState(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0];\n /**\n * TODO See if people miss automatically updating shouldReduceMotion setting\n */\n return shouldReduceMotion;\n}\nfunction useReducedMotionConfig() {\n var reducedMotionPreference = useReducedMotion();\n var reducedMotion = useContext(MotionConfigContext).reducedMotion;\n if (reducedMotion === \"never\") {\n return false;\n }\n else if (reducedMotion === \"always\") {\n return true;\n }\n else {\n return reducedMotionPreference;\n }\n}\n\nexport { useReducedMotion, useReducedMotionConfig };\n","import { useContext, useRef, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useVisualElementContext } from '../../context/MotionContext/index.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { LazyContext } from '../../context/LazyContext.mjs';\nimport { useReducedMotionConfig } from '../../utils/use-reduced-motion.mjs';\n\nfunction useVisualElement(Component, visualState, props, createVisualElement) {\n var lazyContext = useContext(LazyContext);\n var parent = useVisualElementContext();\n var presenceContext = useContext(PresenceContext);\n var shouldReduceMotion = useReducedMotionConfig();\n var visualElementRef = useRef(undefined);\n /**\n * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n */\n if (!createVisualElement)\n createVisualElement = lazyContext.renderer;\n if (!visualElementRef.current && createVisualElement) {\n visualElementRef.current = createVisualElement(Component, {\n visualState: visualState,\n parent: parent,\n props: props,\n presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,\n blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,\n shouldReduceMotion: shouldReduceMotion,\n });\n }\n var visualElement = visualElementRef.current;\n useIsomorphicLayoutEffect(function () {\n visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender();\n });\n useEffect(function () {\n var _a;\n (_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges();\n });\n useIsomorphicLayoutEffect(function () { return function () { return visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount(); }; }, []);\n return visualElement;\n}\n\nexport { useVisualElement };\n","function isRefObject(ref) {\n return (typeof ref === \"object\" &&\n Object.prototype.hasOwnProperty.call(ref, \"current\"));\n}\n\nexport { isRefObject };\n","/**\n * Decides if the supplied variable is an array of variant labels\n */\nfunction isVariantLabels(v) {\n return Array.isArray(v);\n}\n/**\n * Decides if the supplied variable is variant label\n */\nfunction isVariantLabel(v) {\n return typeof v === \"string\" || isVariantLabels(v);\n}\n/**\n * Creates an object containing the latest state of every MotionValue on a VisualElement\n */\nfunction getCurrent(visualElement) {\n var current = {};\n visualElement.forEachValue(function (value, key) { return (current[key] = value.get()); });\n return current;\n}\n/**\n * Creates an object containing the latest velocity of every MotionValue on a VisualElement\n */\nfunction getVelocity(visualElement) {\n var velocity = {};\n visualElement.forEachValue(function (value, key) { return (velocity[key] = value.getVelocity()); });\n return velocity;\n}\nfunction resolveVariantFromProps(props, definition, custom, currentValues, currentVelocity) {\n var _a;\n if (currentValues === void 0) { currentValues = {}; }\n if (currentVelocity === void 0) { currentVelocity = {}; }\n /**\n * If the variant definition is a function, resolve.\n */\n if (typeof definition === \"function\") {\n definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);\n }\n /**\n * If the variant definition is a variant label, or\n * the function returned a variant label, resolve.\n */\n if (typeof definition === \"string\") {\n definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];\n }\n /**\n * At this point we've resolved both functions and variant labels,\n * but the resolved variant label might itself have been a function.\n * If so, resolve. This can only have returned a valid target object.\n */\n if (typeof definition === \"function\") {\n definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);\n }\n return definition;\n}\nfunction resolveVariant(visualElement, definition, custom) {\n var props = visualElement.getProps();\n return resolveVariantFromProps(props, definition, custom !== null && custom !== void 0 ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement));\n}\nfunction checkIfControllingVariants(props) {\n var _a;\n return (typeof ((_a = props.animate) === null || _a === void 0 ? void 0 : _a.start) === \"function\" ||\n isVariantLabel(props.initial) ||\n isVariantLabel(props.animate) ||\n isVariantLabel(props.whileHover) ||\n isVariantLabel(props.whileDrag) ||\n isVariantLabel(props.whileTap) ||\n isVariantLabel(props.whileFocus) ||\n isVariantLabel(props.exit));\n}\nfunction checkIfVariantNode(props) {\n return Boolean(checkIfControllingVariants(props) || props.variants);\n}\n\nexport { checkIfControllingVariants, checkIfVariantNode, isVariantLabel, isVariantLabels, resolveVariant, resolveVariantFromProps };\n","import { useMemo, useContext } from 'react';\nimport { MotionContext } from './index.mjs';\nimport { getCurrentTreeVariants } from './utils.mjs';\n\nfunction useCreateMotionContext(props) {\n var _a = getCurrentTreeVariants(props, useContext(MotionContext)), initial = _a.initial, animate = _a.animate;\n return useMemo(function () { return ({ initial: initial, animate: animate }); }, [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);\n}\nfunction variantLabelsAsDependency(prop) {\n return Array.isArray(prop) ? prop.join(\" \") : prop;\n}\n\nexport { useCreateMotionContext };\n","import { checkIfControllingVariants, isVariantLabel } from '../../render/utils/variants.mjs';\n\nfunction getCurrentTreeVariants(props, context) {\n if (checkIfControllingVariants(props)) {\n var initial = props.initial, animate = props.animate;\n return {\n initial: initial === false || isVariantLabel(initial)\n ? initial\n : undefined,\n animate: isVariantLabel(animate) ? animate : undefined,\n };\n }\n return props.inherit !== false ? context : {};\n}\n\nexport { getCurrentTreeVariants };\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 */\nvar 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 { useConstant } from '../../utils/use-constant.mjs';\nimport { globalProjectionState } from './state.mjs';\n\nvar id = 1;\nfunction useProjectionId() {\n return useConstant(function () {\n if (globalProjectionState.hasEverUpdated) {\n return id++;\n }\n });\n}\n\nexport { useProjectionId };\n","import { createContext } from 'react';\n\nvar LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","import { createContext } from 'react';\n\n/**\n * Internal, exported only for usage in Framer\n */\nvar SwitchLayoutGroupContext = createContext({});\n\nexport { SwitchLayoutGroupContext };\n","import { __extends } from 'tslib';\nimport React__default from 'react';\n\nvar VisualElementHandler = /** @class */ (function (_super) {\n __extends(VisualElementHandler, _super);\n function VisualElementHandler() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Update visual element props as soon as we know this update is going to be commited.\n */\n VisualElementHandler.prototype.getSnapshotBeforeUpdate = function () {\n this.updateProps();\n return null;\n };\n VisualElementHandler.prototype.componentDidUpdate = function () { };\n VisualElementHandler.prototype.updateProps = function () {\n var _a = this.props, visualElement = _a.visualElement, props = _a.props;\n if (visualElement)\n visualElement.setProps(props);\n };\n VisualElementHandler.prototype.render = function () {\n return this.props.children;\n };\n return VisualElementHandler;\n}(React__default.Component));\n\nexport { VisualElementHandler };\n","import { __assign } from 'tslib';\nimport * as React from 'react';\nimport { forwardRef, useContext } from 'react';\nimport { useFeatures } from './features/use-features.mjs';\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, featureDefinitions } from './features/definitions.mjs';\nimport { isBrowser } from '../utils/is-browser.mjs';\nimport { useProjectionId } from '../projection/node/id.mjs';\nimport { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';\nimport { useProjection } from './features/use-projection.mjs';\nimport { VisualElementHandler } from './utils/VisualElementHandler.mjs';\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n */\nfunction createMotionComponent(_a) {\n var preloadedFeatures = _a.preloadedFeatures, createVisualElement = _a.createVisualElement, projectionNodeConstructor = _a.projectionNodeConstructor, useRender = _a.useRender, useVisualState = _a.useVisualState, Component = _a.Component;\n preloadedFeatures && loadFeatures(preloadedFeatures);\n function MotionComponent(props, externalRef) {\n var layoutId = useLayoutId(props);\n props = __assign(__assign({}, props), { layoutId: layoutId });\n /**\n * If we're rendering in a static environment, we only visually update the component\n * as a result of a React-rerender rather than interactions or animations. This\n * means we don't need to load additional memory structures like VisualElement,\n * or any gesture/animation features.\n */\n var config = useContext(MotionConfigContext);\n var features = null;\n var context = useCreateMotionContext(props);\n /**\n * Create a unique projection ID for this component. If a new component is added\n * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing\n * us to measure it as soon as any layout effect flushes pending layout animations.\n *\n * Performance note: It'd be better not to have to search the DOM for these elements.\n * For newly-entering components it could be enough to only correct treeScale, in which\n * case we could mount in a scale-correction mode. This wouldn't be enough for\n * shared element transitions however. Perhaps for those we could revert to a root node\n * that gets forceRendered and layout animations are triggered on its layout effect.\n */\n var projectionId = config.isStatic ? undefined : useProjectionId();\n /**\n *\n */\n var visualState = useVisualState(props, config.isStatic);\n if (!config.isStatic && isBrowser) {\n /**\n * Create a VisualElement for this component. A VisualElement provides a common\n * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n * providing a way of rendering to these APIs outside of the React render loop\n * for more performant animations and interactions\n */\n context.visualElement = useVisualElement(Component, visualState, __assign(__assign({}, config), props), createVisualElement);\n useProjection(projectionId, props, context.visualElement, projectionNodeConstructor ||\n featureDefinitions.projectionNodeConstructor);\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 features = useFeatures(props, context.visualElement, preloadedFeatures);\n }\n /**\n * The mount order and hierarchy is specific to ensure our element ref\n * is hydrated by the time features fire their effects.\n */\n return (React.createElement(VisualElementHandler, { visualElement: context.visualElement, props: __assign(__assign({}, config), props) },\n features,\n React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));\n }\n return forwardRef(MotionComponent);\n}\nfunction useLayoutId(_a) {\n var _b;\n var layoutId = _a.layoutId;\n var layoutGroupId = (_b = useContext(LayoutGroupContext)) === null || _b === void 0 ? void 0 : _b.id;\n return layoutGroupId && layoutId !== undefined\n ? layoutGroupId + \"-\" + layoutId\n : layoutId;\n}\n\nexport { createMotionComponent };\n","import { isRefObject } from '../../utils/is-ref-object.mjs';\nimport { useContext } from 'react';\nimport { SwitchLayoutGroupContext } from '../../context/SwitchLayoutGroupContext.mjs';\n\nfunction useProjection(projectionId, _a, visualElement, ProjectionNodeConstructor) {\n var _b;\n var layoutId = _a.layoutId, layout = _a.layout, drag = _a.drag, dragConstraints = _a.dragConstraints, layoutScroll = _a.layoutScroll;\n var initialPromotionConfig = useContext(SwitchLayoutGroupContext);\n if (!ProjectionNodeConstructor ||\n !visualElement ||\n (visualElement === null || visualElement === void 0 ? void 0 : visualElement.projection)) {\n return;\n }\n visualElement.projection = new ProjectionNodeConstructor(projectionId, visualElement.getLatestValues(), (_b = visualElement.parent) === null || _b === void 0 ? void 0 : _b.projection);\n visualElement.projection.setOptions({\n layoutId: layoutId,\n layout: layout,\n alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),\n visualElement: visualElement,\n scheduleRender: function () { return visualElement.scheduleRender(); },\n /**\n * TODO: Update options in an effect. This could be tricky as it'll be too late\n * to update by the time layout animations run.\n * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,\n * ensuring it gets called if there's no potential layout animations.\n *\n */\n animationType: typeof layout === \"string\" ? layout : \"both\",\n initialPromotionConfig: initialPromotionConfig,\n layoutScroll: layoutScroll,\n });\n}\n\nexport { useProjection };\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(function (instance) {\n var _a;\n instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));\n if (visualElement) {\n instance\n ? visualElement.mount(instance)\n : visualElement.unmount();\n }\n if (externalRef) {\n if (typeof externalRef === \"function\") {\n externalRef(instance);\n }\n else if (isRefObject(externalRef)) {\n externalRef.current = instance;\n }\n }\n }, \n /**\n * Only pass a new ref callback to React if we've received a visual element\n * factory. Otherwise we'll be mounting/remounting every time externalRef\n * or other dependencies change.\n */\n [visualElement]);\n}\n\nexport { useMotionRef };\n","import { createMotionComponent } from '../../motion/index.mjs';\n\n/**\n * Convert any React component into a `motion` component. The provided component\n * **must** use `React.forwardRef` to the underlying DOM component you want to animate.\n *\n * ```jsx\n * const Component = React.forwardRef((props, ref) => {\n * return \n * })\n *\n * const MotionComponent = motion(Component)\n * ```\n *\n * @public\n */\nfunction createMotionProxy(createConfig) {\n function custom(Component, customMotionComponentConfig) {\n if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }\n return createMotionComponent(createConfig(Component, customMotionComponentConfig));\n }\n if (typeof Proxy === \"undefined\") {\n return custom;\n }\n /**\n * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.\n * Rather than generating them anew every render.\n */\n var componentCache = new Map();\n return new Proxy(custom, {\n /**\n * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.\n * The prop name is passed through as `key` and we can use that to generate a `motion`\n * DOM component with that name.\n */\n get: function (_target, key) {\n /**\n * If this element doesn't exist in the component cache, create it and cache.\n */\n if (!componentCache.has(key)) {\n componentCache.set(key, custom(key));\n }\n return componentCache.get(key);\n },\n });\n}\n\nexport { createMotionProxy };\n","/**\n * We keep these listed seperately as we use the lowercase tag names as part\n * of the runtime bundle to detect SVG components\n */\nvar lowercaseSVGElements = [\n \"animate\",\n \"circle\",\n \"defs\",\n \"desc\",\n \"ellipse\",\n \"g\",\n \"image\",\n \"line\",\n \"filter\",\n \"marker\",\n \"mask\",\n \"metadata\",\n \"path\",\n \"pattern\",\n \"polygon\",\n \"polyline\",\n \"rect\",\n \"stop\",\n \"svg\",\n \"switch\",\n \"symbol\",\n \"text\",\n \"tspan\",\n \"use\",\n \"view\",\n];\n\nexport { lowercaseSVGElements };\n","import { lowercaseSVGElements } from '../../svg/lowercase-elements.mjs';\n\nfunction isSVGComponent(Component) {\n if (\n /**\n * If it's not a string, it's a custom React component. Currently we only support\n * HTML custom React components.\n */\n typeof Component !== \"string\" ||\n /**\n * If it contains a dash, the element is a custom HTML webcomponent.\n */\n Component.includes(\"-\")) {\n return false;\n }\n else if (\n /**\n * If it's in our list of lowercase SVG tags, it's an SVG component\n */\n lowercaseSVGElements.indexOf(Component) > -1 ||\n /**\n * If it contains a capital letter, it's an SVG component\n */\n /[A-Z]/.test(Component)) {\n return true;\n }\n return false;\n}\n\nexport { isSVGComponent };\n","var scaleCorrectors = {};\nfunction addScaleCorrector(correctors) {\n Object.assign(scaleCorrectors, correctors);\n}\n\nexport { addScaleCorrector, scaleCorrectors };\n","/**\n * A list of all transformable axes. We'll use this list to generated a version\n * of each axes for each transform.\n */\nvar transformAxes = [\"\", \"X\", \"Y\", \"Z\"];\n/**\n * An ordered array of each transformable value. By default, transform values\n * will be sorted to this order.\n */\nvar order = [\"translate\", \"scale\", \"rotate\", \"skew\"];\n/**\n * Generate a list of every possible transform key.\n */\nvar transformProps = [\"transformPerspective\", \"x\", \"y\", \"z\"];\norder.forEach(function (operationKey) {\n return transformAxes.forEach(function (axesKey) {\n return transformProps.push(operationKey + axesKey);\n });\n});\n/**\n * A function to use with Array.sort to sort transform keys by their default order.\n */\nfunction sortTransformProps(a, b) {\n return transformProps.indexOf(a) - transformProps.indexOf(b);\n}\n/**\n * A quick lookup for transform props.\n */\nvar transformPropSet = new Set(transformProps);\nfunction isTransformProp(key) {\n return transformPropSet.has(key);\n}\n/**\n * A quick lookup for transform origin props\n */\nvar transformOriginProps = new Set([\"originX\", \"originY\", \"originZ\"]);\nfunction isTransformOriginProp(key) {\n return transformOriginProps.has(key);\n}\n\nexport { isTransformOriginProp, isTransformProp, sortTransformProps, transformAxes, transformProps };\n","import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';\nimport { isTransformProp, isTransformOriginProp } from '../../render/html/utils/transform.mjs';\n\nfunction isForcedMotionValue(key, _a) {\n var layout = _a.layout, layoutId = _a.layoutId;\n return (isTransformProp(key) ||\n isTransformOriginProp(key) ||\n ((layout || layoutId !== undefined) &&\n (!!scaleCorrectors[key] || key === \"opacity\")));\n}\n\nexport { isForcedMotionValue };\n","var isMotionValue = function (value) {\n return Boolean(value !== null && typeof value === \"object\" && value.getVelocity);\n};\n\nexport { isMotionValue };\n","import { sortTransformProps } from './transform.mjs';\n\nvar translateAlias = {\n x: \"translateX\",\n y: \"translateY\",\n z: \"translateZ\",\n transformPerspective: \"perspective\",\n};\n/**\n * Build a CSS transform style from individual x/y/scale etc properties.\n *\n * This outputs with a default order of transforms/scales/rotations, this can be customised by\n * providing a transformTemplate function.\n */\nfunction buildTransform(_a, _b, transformIsDefault, transformTemplate) {\n var transform = _a.transform, transformKeys = _a.transformKeys;\n var _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.allowTransformNone, allowTransformNone = _d === void 0 ? true : _d;\n // The transform string we're going to build into.\n var transformString = \"\";\n // Transform keys into their default order - this will determine the output order.\n transformKeys.sort(sortTransformProps);\n // Track whether the defined transform has a defined z so we don't add a\n // second to enable hardware acceleration\n var transformHasZ = false;\n // Loop over each transform and build them into transformString\n var numTransformKeys = transformKeys.length;\n for (var i = 0; i < numTransformKeys; i++) {\n var key = transformKeys[i];\n transformString += \"\".concat(translateAlias[key] || key, \"(\").concat(transform[key], \") \");\n if (key === \"z\")\n transformHasZ = true;\n }\n if (!transformHasZ && enableHardwareAcceleration) {\n transformString += \"translateZ(0)\";\n }\n else {\n transformString = transformString.trim();\n }\n // If we have a custom `transform` template, pass our transform values and\n // generated transformString to that before returning\n if (transformTemplate) {\n transformString = transformTemplate(transform, transformIsDefault ? \"\" : transformString);\n }\n else if (allowTransformNone && transformIsDefault) {\n transformString = \"none\";\n }\n return transformString;\n}\n/**\n * Build a transformOrigin style. Uses the same defaults as the browser for\n * undefined origins.\n */\nfunction buildTransformOrigin(_a) {\n var _b = _a.originX, originX = _b === void 0 ? \"50%\" : _b, _c = _a.originY, originY = _c === void 0 ? \"50%\" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;\n return \"\".concat(originX, \" \").concat(originY, \" \").concat(originZ);\n}\n\nexport { buildTransform, buildTransformOrigin };\n","/**\n * Returns true if the provided key is a CSS variable\n */\nfunction isCSSVariable(key) {\n return key.startsWith(\"--\");\n}\n\nexport { isCSSVariable };\n","/**\n * Provided a value and a ValueType, returns the value as that value type.\n */\nvar getValueAsType = function (value, type) {\n return type && typeof value === \"number\"\n ? type.transform(value)\n : value;\n};\n\nexport { getValueAsType };\n","const clamp = (min, max) => (v) => Math.max(Math.min(v, max), min);\nconst sanitize = (v) => (v % 1 ? Number(v.toFixed(5)) : v);\nconst floatRegex = /(-)?([\\d]*\\.?[\\d])+/g;\nconst colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2,3}\\s*\\/*\\s*[\\d\\.]+%?\\))/gi;\nconst singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2,3}\\s*\\/*\\s*[\\d\\.]+%?\\))$/i;\nfunction isString(v) {\n return typeof v === 'string';\n}\n\nexport { clamp, colorRegex, floatRegex, isString, sanitize, singleColorRegex };\n","import { isString } from '../utils.mjs';\n\nconst createUnitType = (unit) => ({\n test: (v) => isString(v) && v.endsWith(unit) && v.split(' ').length === 1,\n parse: parseFloat,\n transform: (v) => `${v}${unit}`,\n});\nconst degrees = createUnitType('deg');\nconst percent = createUnitType('%');\nconst px = createUnitType('px');\nconst vh = createUnitType('vh');\nconst vw = createUnitType('vw');\nconst progressPercentage = Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });\n\nexport { degrees, percent, progressPercentage, px, vh, vw };\n","import { clamp } from '../utils.mjs';\n\nconst number = {\n test: (v) => typeof v === 'number',\n parse: parseFloat,\n transform: (v) => v,\n};\nconst alpha = Object.assign(Object.assign({}, number), { transform: clamp(0, 1) });\nconst scale = Object.assign(Object.assign({}, number), { default: 1 });\n\nexport { alpha, number, scale };\n","import { __assign } from 'tslib';\nimport { number } from 'style-value-types';\n\nvar int = __assign(__assign({}, number), { transform: Math.round });\n\nexport { int };\n","import { px, degrees, scale, alpha, progressPercentage } from 'style-value-types';\nimport { int } from './type-int.mjs';\n\nvar numberValueTypes = {\n // Border props\n borderWidth: px,\n borderTopWidth: px,\n borderRightWidth: px,\n borderBottomWidth: px,\n borderLeftWidth: px,\n borderRadius: px,\n radius: px,\n borderTopLeftRadius: px,\n borderTopRightRadius: px,\n borderBottomRightRadius: px,\n borderBottomLeftRadius: px,\n // Positioning props\n width: px,\n maxWidth: px,\n height: px,\n maxHeight: px,\n size: px,\n top: px,\n right: px,\n bottom: px,\n left: px,\n // Spacing props\n padding: px,\n paddingTop: px,\n paddingRight: px,\n paddingBottom: px,\n paddingLeft: px,\n margin: px,\n marginTop: px,\n marginRight: px,\n marginBottom: px,\n marginLeft: px,\n // Transform props\n rotate: degrees,\n rotateX: degrees,\n rotateY: degrees,\n rotateZ: degrees,\n scale: scale,\n scaleX: scale,\n scaleY: scale,\n scaleZ: scale,\n skew: degrees,\n skewX: degrees,\n skewY: degrees,\n distance: px,\n translateX: px,\n translateY: px,\n translateZ: px,\n x: px,\n y: px,\n z: px,\n perspective: px,\n transformPerspective: px,\n opacity: alpha,\n originX: progressPercentage,\n originY: progressPercentage,\n originZ: px,\n // Misc\n zIndex: int,\n // SVG\n fillOpacity: alpha,\n strokeOpacity: alpha,\n numOctaves: int,\n};\n\nexport { numberValueTypes };\n","import { buildTransform, buildTransformOrigin } from './build-transform.mjs';\nimport { isCSSVariable } from '../../dom/utils/is-css-variable.mjs';\nimport { isTransformProp, isTransformOriginProp } from './transform.mjs';\nimport { getValueAsType } from '../../dom/value-types/get-as-type.mjs';\nimport { numberValueTypes } from '../../dom/value-types/number.mjs';\n\nfunction buildHTMLStyles(state, latestValues, options, transformTemplate) {\n var _a;\n var style = state.style, vars = state.vars, transform = state.transform, transformKeys = state.transformKeys, transformOrigin = state.transformOrigin;\n // Empty the transformKeys array. As we're throwing out refs to its items\n // this might not be as cheap as suspected. Maybe using the array as a buffer\n // with a manual incrementation would be better.\n transformKeys.length = 0;\n // Track whether we encounter any transform or transformOrigin values.\n var hasTransform = false;\n var hasTransformOrigin = false;\n // Does the calculated transform essentially equal \"none\"?\n var transformIsNone = true;\n /**\n * Loop over all our latest animated values and decide whether to handle them\n * as a style or CSS variable.\n *\n * Transforms and transform origins are kept seperately for further processing.\n */\n for (var key in latestValues) {\n var value = latestValues[key];\n /**\n * If this is a CSS variable we don't do any further processing.\n */\n if (isCSSVariable(key)) {\n vars[key] = value;\n continue;\n }\n // Convert the value to its default value type, ie 0 -> \"0px\"\n var valueType = numberValueTypes[key];\n var valueAsType = getValueAsType(value, valueType);\n if (isTransformProp(key)) {\n // If this is a transform, flag to enable further transform processing\n hasTransform = true;\n transform[key] = valueAsType;\n transformKeys.push(key);\n // If we already know we have a non-default transform, early return\n if (!transformIsNone)\n continue;\n // Otherwise check to see if this is a default transform\n if (value !== ((_a = valueType.default) !== null && _a !== void 0 ? _a : 0))\n transformIsNone = false;\n }\n else if (isTransformOriginProp(key)) {\n transformOrigin[key] = valueAsType;\n // If this is a transform origin, flag and enable further transform-origin processing\n hasTransformOrigin = true;\n }\n else {\n style[key] = valueAsType;\n }\n }\n if (hasTransform) {\n style.transform = buildTransform(state, options, transformIsNone, transformTemplate);\n }\n else if (transformTemplate) {\n style.transform = transformTemplate({}, \"\");\n }\n else if (!latestValues.transform && style.transform) {\n style.transform = \"none\";\n }\n if (hasTransformOrigin) {\n style.transformOrigin = buildTransformOrigin(transformOrigin);\n }\n}\n\nexport { buildHTMLStyles };\n","var createHtmlRenderState = function () { return ({\n style: {},\n transform: {},\n transformKeys: [],\n transformOrigin: {},\n vars: {},\n}); };\n\nexport { createHtmlRenderState };\n","import { __assign } from 'tslib';\nimport { 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 (var key in source) {\n if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {\n target[key] = source[key];\n }\n }\n}\nfunction useInitialMotionValues(_a, visualState, isStatic) {\n var transformTemplate = _a.transformTemplate;\n return useMemo(function () {\n var state = createHtmlRenderState();\n buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);\n var vars = state.vars, style = state.style;\n return __assign(__assign({}, vars), style);\n }, [visualState]);\n}\nfunction useStyle(props, visualState, isStatic) {\n var styleProp = props.style || {};\n var style = {};\n /**\n * Copy non-Motion Values straight into style\n */\n copyRawValuesOnly(style, styleProp, props);\n Object.assign(style, useInitialMotionValues(props, visualState, isStatic));\n if (props.transformValues) {\n style = props.transformValues(style);\n }\n return style;\n}\nfunction useHTMLProps(props, visualState, isStatic) {\n // The `any` isn't ideal but it is the type of createElement props argument\n var htmlProps = {};\n var style = useStyle(props, visualState, isStatic);\n if (Boolean(props.drag) && 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-\".concat(props.drag === \"x\" ? \"y\" : \"x\");\n }\n htmlProps.style = style;\n return htmlProps;\n}\n\nexport { copyRawValuesOnly, useHTMLProps, useStyle };\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 */\nvar validMotionProps = new Set([\n \"initial\",\n \"animate\",\n \"exit\",\n \"style\",\n \"variants\",\n \"transition\",\n \"transformTemplate\",\n \"transformValues\",\n \"custom\",\n \"inherit\",\n \"layout\",\n \"layoutId\",\n \"layoutDependency\",\n \"onLayoutAnimationStart\",\n \"onLayoutAnimationComplete\",\n \"onLayoutMeasure\",\n \"onBeforeLayoutMeasure\",\n \"onAnimationStart\",\n \"onAnimationComplete\",\n \"onUpdate\",\n \"onDragStart\",\n \"onDrag\",\n \"onDragEnd\",\n \"onMeasureDragConstraints\",\n \"onDirectionLock\",\n \"onDragTransitionEnd\",\n \"drag\",\n \"dragControls\",\n \"dragListener\",\n \"dragConstraints\",\n \"dragDirectionLock\",\n \"dragSnapToOrigin\",\n \"_dragX\",\n \"_dragY\",\n \"dragElastic\",\n \"dragMomentum\",\n \"dragPropagation\",\n \"dragTransition\",\n \"whileDrag\",\n \"onPan\",\n \"onPanStart\",\n \"onPanEnd\",\n \"onPanSessionStart\",\n \"onTap\",\n \"onTapStart\",\n \"onTapCancel\",\n \"onHoverStart\",\n \"onHoverEnd\",\n \"whileFocus\",\n \"whileTap\",\n \"whileHover\",\n \"whileInView\",\n \"onViewportEnter\",\n \"onViewportLeave\",\n \"viewport\",\n \"layoutScroll\",\n]);\n/**\n * Check whether a prop name is a valid `MotionProp` key.\n *\n * @param key - Name of the property to check\n * @returns `true` is key is a valid `MotionProp`.\n *\n * @public\n */\nfunction isValidMotionProp(key) {\n return validMotionProps.has(key);\n}\n\nexport { isValidMotionProp };\n","import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';\n\nvar shouldForward = function (key) { return !isValidMotionProp(key); };\nfunction loadExternalIsValidProp(isValidProp) {\n if (!isValidProp)\n return;\n // Explicitly filter our events\n shouldForward = function (key) {\n return key.startsWith(\"on\") ? !isValidMotionProp(key) : isValidProp(key);\n };\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 var filteredProps = {};\n for (var key in props) {\n if (shouldForward(key) ||\n (forwardMotionProps === true && isValidMotionProp(key)) ||\n (!isDom && !isValidMotionProp(key)) ||\n // If trying to use native HTML drag events, forward drag listeners\n (props[\"draggable\"] && key.startsWith(\"onDrag\"))) {\n filteredProps[key] = props[key];\n }\n }\n return filteredProps;\n}\n\nexport { filterProps, loadExternalIsValidProp };\n","import { px } from 'style-value-types';\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 var pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);\n var pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);\n return \"\".concat(pxOriginX, \" \").concat(pxOriginY);\n}\n\nexport { calcSVGTransformOrigin };\n","import { px } from 'style-value-types';\n\nvar dashKeys = {\n offset: \"stroke-dashoffset\",\n array: \"stroke-dasharray\",\n};\nvar camelKeys = {\n offset: \"strokeDashoffset\",\n array: \"strokeDasharray\",\n};\n/**\n * Build SVG path properties. Uses the path's measured length to convert\n * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset\n * and stroke-dasharray attributes.\n *\n * This function is mutative to reduce per-frame GC.\n */\nfunction buildSVGPath(attrs, length, spacing, offset, useDashCase) {\n if (spacing === void 0) { spacing = 1; }\n if (offset === void 0) { offset = 0; }\n if (useDashCase === void 0) { useDashCase = true; }\n // 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 var keys = useDashCase ? dashKeys : camelKeys;\n // Build the dash offset\n attrs[keys.offset] = px.transform(-offset);\n // Build the dash array\n var pathLength = px.transform(length);\n var pathSpacing = px.transform(spacing);\n attrs[keys.array] = \"\".concat(pathLength, \" \").concat(pathSpacing);\n}\n\nexport { buildSVGPath };\n","import { __rest } from 'tslib';\nimport { 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, _a, options, transformTemplate) {\n var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, \n // This is object creation, which we try to avoid per-frame.\n latest = __rest(_a, [\"attrX\", \"attrY\", \"originX\", \"originY\", \"pathLength\", \"pathSpacing\", \"pathOffset\"]);\n buildHTMLStyles(state, latest, options, transformTemplate);\n state.attrs = state.style;\n state.style = {};\n var attrs = state.attrs, style = state.style, dimensions = state.dimensions;\n /**\n * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs\n * and copy it into style.\n */\n if (attrs.transform) {\n if (dimensions)\n style.transform = attrs.transform;\n delete attrs.transform;\n }\n // Parse transformOrigin\n if (dimensions &&\n (originX !== undefined || originY !== undefined || style.transform)) {\n style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);\n }\n // Treat x/y not as shortcuts but as actual attributes\n if (attrX !== undefined)\n attrs.x = attrX;\n if (attrY !== undefined)\n attrs.y = attrY;\n // Build SVG path if one has been defined\n if (pathLength !== undefined) {\n buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);\n }\n}\n\nexport { buildSVGAttrs };\n","import { __assign } from 'tslib';\nimport { createHtmlRenderState } from '../../html/utils/create-render-state.mjs';\n\nvar createSvgRenderState = function () { return (__assign(__assign({}, createHtmlRenderState()), { attrs: {} })); };\n\nexport { createSvgRenderState };\n","import { __assign } from 'tslib';\nimport { 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';\n\nfunction useSVGProps(props, visualState) {\n var visualProps = useMemo(function () {\n var state = createSvgRenderState();\n buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);\n return __assign(__assign({}, state.attrs), { style: __assign({}, state.style) });\n }, [visualState]);\n if (props.style) {\n var rawStyles = {};\n copyRawValuesOnly(rawStyles, props.style, props);\n visualProps.style = __assign(__assign({}, rawStyles), visualProps.style);\n }\n return visualProps;\n}\n\nexport { useSVGProps };\n","import { __assign } from 'tslib';\nimport { 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';\n\nfunction createUseRender(forwardMotionProps) {\n if (forwardMotionProps === void 0) { forwardMotionProps = false; }\n var useRender = function (Component, props, projectionId, ref, _a, isStatic) {\n var latestValues = _a.latestValues;\n var useVisualProps = isSVGComponent(Component)\n ? useSVGProps\n : useHTMLProps;\n var visualProps = useVisualProps(props, latestValues, isStatic);\n var filteredProps = filterProps(props, typeof Component === \"string\", forwardMotionProps);\n var elementProps = __assign(__assign(__assign({}, filteredProps), visualProps), { ref: ref });\n if (projectionId) {\n elementProps[\"data-projection-id\"] = projectionId;\n }\n return createElement(Component, elementProps);\n };\n return useRender;\n}\n\nexport { createUseRender };\n","var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;\nvar REPLACE_TEMPLATE = \"$1-$2\";\n/**\n * Convert camelCase to dash-case properties.\n */\nvar camelToDash = function (str) {\n return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();\n};\n\nexport { camelToDash };\n","function renderHTML(element, _a, styleProp, projection) {\n var style = _a.style, vars = _a.vars;\n Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));\n // Loop over any CSS variables and assign those.\n for (var key in vars) {\n element.style.setProperty(key, vars[key]);\n }\n}\n\nexport { renderHTML };\n","/**\n * A set of attribute names that are always read/written as camel case.\n */\nvar camelCaseAttributes = new Set([\n \"baseFrequency\",\n \"diffuseConstant\",\n \"kernelMatrix\",\n \"kernelUnitLength\",\n \"keySplines\",\n \"keyTimes\",\n \"limitingConeAngle\",\n \"markerHeight\",\n \"markerWidth\",\n \"numOctaves\",\n \"targetX\",\n \"targetY\",\n \"surfaceScale\",\n \"specularConstant\",\n \"specularExponent\",\n \"stdDeviation\",\n \"tableValues\",\n \"viewBox\",\n \"gradientTransform\",\n \"pathLength\",\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 (var key in renderState.attrs) {\n element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);\n }\n}\n\nexport { renderSVG };\n","import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\n\nfunction scrapeMotionValuesFromProps(props) {\n var style = props.style;\n var newValues = {};\n for (var key in style) {\n if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) {\n newValues[key] = style[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\nimport { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';\n\nfunction scrapeMotionValuesFromProps(props) {\n var newValues = scrapeMotionValuesFromProps$1(props);\n for (var key in props) {\n if (isMotionValue(props[key])) {\n var targetKey = key === \"x\" || key === \"y\" ? \"attr\" + key.toUpperCase() : key;\n newValues[targetKey] = props[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","function isAnimationControls(v) {\n return typeof v === \"object\" && typeof v.start === \"function\";\n}\n\nexport { isAnimationControls };\n","var isKeyframesTarget = function (v) {\n return Array.isArray(v);\n};\n\nexport { isKeyframesTarget };\n","import { isKeyframesTarget } from '../animation/utils/is-keyframes-target.mjs';\n\nvar isCustomValue = function (v) {\n return Boolean(v && typeof v === \"object\" && v.mix && v.toValue);\n};\nvar resolveFinalValueInKeyframes = function (v) {\n // TODO maybe throw if v.length - 1 is placeholder token?\n return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;\n};\n\nexport { isCustomValue, resolveFinalValueInKeyframes };\n","import { isCustomValue } from '../../utils/resolve-value.mjs';\nimport { isMotionValue } from './is-motion-value.mjs';\n\n/**\n * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself\n *\n * TODO: Remove and move to library\n */\nfunction resolveMotionValue(value) {\n var unwrappedValue = isMotionValue(value) ? value.get() : value;\n return isCustomValue(unwrappedValue)\n ? unwrappedValue.toValue()\n : unwrappedValue;\n}\n\nexport { resolveMotionValue };\n","import { __rest } from 'tslib';\nimport { useContext } from 'react';\nimport { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { checkIfControllingVariants, checkIfVariantNode, resolveVariantFromProps } from '../../render/utils/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';\n\nfunction makeState(_a, props, context, presenceContext) {\n var scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps, createRenderState = _a.createRenderState, onMount = _a.onMount;\n var state = {\n latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),\n renderState: createRenderState(),\n };\n if (onMount) {\n state.mount = function (instance) { return onMount(props, instance, state); };\n }\n return state;\n}\nvar makeUseVisualState = function (config) {\n return function (props, isStatic) {\n var context = useContext(MotionContext);\n var presenceContext = useContext(PresenceContext);\n return isStatic\n ? makeState(config, props, context, presenceContext)\n : useConstant(function () {\n return makeState(config, props, context, presenceContext);\n });\n };\n};\nfunction makeLatestValues(props, context, presenceContext, scrapeMotionValues) {\n var values = {};\n var blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false;\n var motionValues = scrapeMotionValues(props);\n for (var key in motionValues) {\n values[key] = resolveMotionValue(motionValues[key]);\n }\n var initial = props.initial, animate = props.animate;\n var isControllingVariants = checkIfControllingVariants(props);\n var isVariantNode = checkIfVariantNode(props);\n if (context &&\n isVariantNode &&\n !isControllingVariants &&\n props.inherit !== false) {\n initial !== null && initial !== void 0 ? initial : (initial = context.initial);\n animate !== null && animate !== void 0 ? animate : (animate = context.animate);\n }\n var initialAnimationIsBlocked = blockInitialAnimation || initial === false;\n var variantToSet = initialAnimationIsBlocked ? animate : initial;\n if (variantToSet &&\n typeof variantToSet !== \"boolean\" &&\n !isAnimationControls(variantToSet)) {\n var list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];\n list.forEach(function (definition) {\n var resolved = resolveVariantFromProps(props, definition);\n if (!resolved)\n return;\n var transitionEnd = resolved.transitionEnd; resolved.transition; var target = __rest(resolved, [\"transitionEnd\", \"transition\"]);\n for (var key in target) {\n var 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 var index = initialAnimationIsBlocked\n ? valueTarget.length - 1\n : 0;\n valueTarget = valueTarget[index];\n }\n if (valueTarget !== null) {\n values[key] = valueTarget;\n }\n }\n for (var key in transitionEnd)\n values[key] = transitionEnd[key];\n });\n }\n return values;\n}\n\nexport { makeUseVisualState };\n","import { renderSVG } from './utils/render.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\n\nvar svgMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createSvgRenderState,\n onMount: function (props, instance, _a) {\n var renderState = _a.renderState, latestValues = _a.latestValues;\n try {\n renderState.dimensions =\n typeof instance.getBBox ===\n \"function\"\n ? instance.getBBox()\n : instance.getBoundingClientRect();\n }\n catch (e) {\n // Most likely trying to measure an unrendered element under Firefox\n renderState.dimensions = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n };\n }\n buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, props.transformTemplate);\n renderSVG(instance, renderState);\n },\n }),\n};\n\nexport { svgMotionConfig };\n","var AnimationType;\n(function (AnimationType) {\n AnimationType[\"Animate\"] = \"animate\";\n AnimationType[\"Hover\"] = \"whileHover\";\n AnimationType[\"Tap\"] = \"whileTap\";\n AnimationType[\"Drag\"] = \"whileDrag\";\n AnimationType[\"Focus\"] = \"whileFocus\";\n AnimationType[\"InView\"] = \"whileInView\";\n AnimationType[\"Exit\"] = \"exit\";\n})(AnimationType || (AnimationType = {}));\n\nexport { AnimationType };\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\nvar htmlMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createHtmlRenderState,\n }),\n};\n\nexport { htmlMotionConfig };\n","import { useEffect } from 'react';\n\nfunction addDomEvent(target, eventName, handler, options) {\n if (options === void 0) { options = { passive: true }; }\n target.addEventListener(eventName, handler, options);\n return function () { return target.removeEventListener(eventName, handler); };\n}\n/**\n * Attaches an event listener directly to the provided DOM element.\n *\n * Bypassing React's event system can be desirable, for instance when attaching non-passive\n * event handlers.\n *\n * ```jsx\n * const ref = useRef(null)\n *\n * useDomEvent(ref, 'wheel', onWheel, { passive: false })\n *\n * return \n * ```\n *\n * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.\n * @param eventName - Name of the event you want listen for.\n * @param handler - Function to fire when receiving the event.\n * @param options - Options to pass to `Event.addEventListener`.\n *\n * @public\n */\nfunction useDomEvent(ref, eventName, handler, options) {\n useEffect(function () {\n var element = ref.current;\n if (handler && element) {\n return addDomEvent(element, eventName, handler, options);\n }\n }, [ref, eventName, handler, options]);\n}\n\nexport { addDomEvent, useDomEvent };\n","function isMouseEvent(event) {\n // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.\n if (typeof PointerEvent !== \"undefined\" && event instanceof PointerEvent) {\n return !!(event.pointerType === \"mouse\");\n }\n return event instanceof MouseEvent;\n}\nfunction isTouchEvent(event) {\n var hasTouches = !!event.touches;\n return hasTouches;\n}\n\nexport { isMouseEvent, isTouchEvent };\n","import { isTouchEvent } from '../gestures/utils/event-type.mjs';\n\n/**\n * Filters out events not attached to the primary pointer (currently left mouse button)\n * @param eventHandler\n */\nfunction filterPrimaryPointer(eventHandler) {\n return function (event) {\n var isMouseEvent = event instanceof MouseEvent;\n var isPrimaryPointer = !isMouseEvent ||\n (isMouseEvent && event.button === 0);\n if (isPrimaryPointer) {\n eventHandler(event);\n }\n };\n}\nvar defaultPagePoint = { pageX: 0, pageY: 0 };\nfunction pointFromTouch(e, pointType) {\n if (pointType === void 0) { pointType = \"page\"; }\n var primaryTouch = e.touches[0] || e.changedTouches[0];\n var point = primaryTouch || defaultPagePoint;\n return {\n x: point[pointType + \"X\"],\n y: point[pointType + \"Y\"],\n };\n}\nfunction pointFromMouse(point, pointType) {\n if (pointType === void 0) { pointType = \"page\"; }\n return {\n x: point[pointType + \"X\"],\n y: point[pointType + \"Y\"],\n };\n}\nfunction extractEventInfo(event, pointType) {\n if (pointType === void 0) { pointType = \"page\"; }\n return {\n point: isTouchEvent(event)\n ? pointFromTouch(event, pointType)\n : pointFromMouse(event, pointType),\n };\n}\nvar wrapHandler = function (handler, shouldFilterPrimaryPointer) {\n if (shouldFilterPrimaryPointer === void 0) { shouldFilterPrimaryPointer = false; }\n var listener = function (event) {\n return handler(event, extractEventInfo(event));\n };\n return shouldFilterPrimaryPointer\n ? filterPrimaryPointer(listener)\n : listener;\n};\n\nexport { extractEventInfo, wrapHandler };\n","import { isBrowser } from '../utils/is-browser.mjs';\n\n// We check for event support via functions in case they've been mocked by a testing suite.\nvar supportsPointerEvents = function () {\n return isBrowser && window.onpointerdown === null;\n};\nvar supportsTouchEvents = function () {\n return isBrowser && window.ontouchstart === null;\n};\nvar supportsMouseEvents = function () {\n return isBrowser && window.onmousedown === null;\n};\n\nexport { supportsMouseEvents, supportsPointerEvents, supportsTouchEvents };\n","import { addDomEvent, useDomEvent } from './use-dom-event.mjs';\nimport { wrapHandler } from './event-info.mjs';\nimport { supportsPointerEvents, supportsTouchEvents, supportsMouseEvents } from './utils.mjs';\n\nvar mouseEventNames = {\n pointerdown: \"mousedown\",\n pointermove: \"mousemove\",\n pointerup: \"mouseup\",\n pointercancel: \"mousecancel\",\n pointerover: \"mouseover\",\n pointerout: \"mouseout\",\n pointerenter: \"mouseenter\",\n pointerleave: \"mouseleave\",\n};\nvar touchEventNames = {\n pointerdown: \"touchstart\",\n pointermove: \"touchmove\",\n pointerup: \"touchend\",\n pointercancel: \"touchcancel\",\n};\nfunction getPointerEventName(name) {\n if (supportsPointerEvents()) {\n return name;\n }\n else if (supportsTouchEvents()) {\n return touchEventNames[name];\n }\n else if (supportsMouseEvents()) {\n return mouseEventNames[name];\n }\n return name;\n}\nfunction addPointerEvent(target, eventName, handler, options) {\n return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === \"pointerdown\"), options);\n}\nfunction usePointerEvent(ref, eventName, handler, options) {\n return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === \"pointerdown\"), options);\n}\n\nexport { addPointerEvent, usePointerEvent };\n","function createLock(name) {\n var lock = null;\n return function () {\n var openLock = function () {\n lock = null;\n };\n if (lock === null) {\n lock = name;\n return openLock;\n }\n return false;\n };\n}\nvar globalHorizontalLock = createLock(\"dragHorizontal\");\nvar globalVerticalLock = createLock(\"dragVertical\");\nfunction getGlobalLock(drag) {\n var lock = false;\n if (drag === \"y\") {\n lock = globalVerticalLock();\n }\n else if (drag === \"x\") {\n lock = globalHorizontalLock();\n }\n else {\n var openHorizontal_1 = globalHorizontalLock();\n var openVertical_1 = globalVerticalLock();\n if (openHorizontal_1 && openVertical_1) {\n lock = function () {\n openHorizontal_1();\n openVertical_1();\n };\n }\n else {\n // Release the locks because we don't use them\n if (openHorizontal_1)\n openHorizontal_1();\n if (openVertical_1)\n openVertical_1();\n }\n }\n return lock;\n}\nfunction isDragActive() {\n // Check the gesture lock - if we get it, it means no drag gesture is active\n // and we can safely fire the tap gesture.\n var openGestureLock = getGlobalLock(true);\n if (!openGestureLock)\n return true;\n openGestureLock();\n return false;\n}\n\nexport { createLock, getGlobalLock, isDragActive };\n","import { isMouseEvent } from './utils/event-type.mjs';\nimport { AnimationType } from '../render/utils/types.mjs';\nimport { usePointerEvent } from '../events/use-pointer-event.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\n\nfunction createHoverEvent(visualElement, isActive, callback) {\n return function (event, info) {\n var _a;\n if (!isMouseEvent(event) || isDragActive())\n return;\n /**\n * Ensure we trigger animations before firing event callback\n */\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, isActive);\n callback === null || callback === void 0 ? void 0 : callback(event, info);\n };\n}\nfunction useHoverGesture(_a) {\n var onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, whileHover = _a.whileHover, visualElement = _a.visualElement;\n usePointerEvent(visualElement, \"pointerenter\", onHoverStart || whileHover\n ? createHoverEvent(visualElement, true, onHoverStart)\n : undefined, { passive: !onHoverStart });\n usePointerEvent(visualElement, \"pointerleave\", onHoverEnd || whileHover\n ? createHoverEvent(visualElement, false, onHoverEnd)\n : undefined, { passive: !onHoverEnd });\n}\n\nexport { useHoverGesture };\n","/**\n * Recursively traverse up the tree to check whether the provided child node\n * is the parent or a descendant of it.\n *\n * @param parent - Element to find\n * @param child - Element to test against parent\n */\nvar isNodeOrChild = function (parent, child) {\n if (!child) {\n return false;\n }\n else if (parent === child) {\n return true;\n }\n else {\n return isNodeOrChild(parent, child.parentElement);\n }\n};\n\nexport { isNodeOrChild };\n","import { useEffect } from 'react';\n\nfunction useUnmountEffect(callback) {\n return useEffect(function () { return function () { return callback(); }; }, []);\n}\n\nexport { useUnmountEffect };\n","const combineFunctions = (a, b) => (v) => b(a(v));\nconst pipe = (...transformers) => transformers.reduce(combineFunctions);\n\nexport { pipe };\n","var warned = new Set();\nfunction warnOnce(condition, message, element) {\n if (condition || warned.has(message))\n return;\n console.warn(message);\n if (element)\n console.warn(element);\n warned.add(message);\n}\n\nexport { warnOnce };\n","import { __rest, __assign } from 'tslib';\n\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 */\nvar 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 */\nvar observers = new WeakMap();\nvar fireObserverCallback = function (entry) {\n var _a;\n (_a = observerCallbacks.get(entry.target)) === null || _a === void 0 ? void 0 : _a(entry);\n};\nvar fireAllObserverCallbacks = function (entries) {\n entries.forEach(fireObserverCallback);\n};\nfunction initIntersectionObserver(_a) {\n var root = _a.root, options = __rest(_a, [\"root\"]);\n var 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 var rootObservers = observers.get(lookupRoot);\n var 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, __assign({ root: root }, options));\n }\n return rootObservers[key];\n}\nfunction observeIntersection(element, options, callback) {\n var rootInteresectionObserver = initIntersectionObserver(options);\n observerCallbacks.set(element, callback);\n rootInteresectionObserver.observe(element);\n return function () {\n observerCallbacks.delete(element);\n rootInteresectionObserver.unobserve(element);\n };\n}\n\nexport { observeIntersection };\n","import { env } from '../../../utils/process.mjs';\nimport { useRef, useEffect } from 'react';\nimport { AnimationType } from '../../../render/utils/types.mjs';\nimport { warnOnce } from '../../../utils/warn-once.mjs';\nimport { observeIntersection } from './observers.mjs';\n\nfunction useViewport(_a) {\n var visualElement = _a.visualElement, whileInView = _a.whileInView, onViewportEnter = _a.onViewportEnter, onViewportLeave = _a.onViewportLeave, _b = _a.viewport, viewport = _b === void 0 ? {} : _b;\n var state = useRef({\n hasEnteredView: false,\n isInView: false,\n });\n var shouldObserve = Boolean(whileInView || onViewportEnter || onViewportLeave);\n if (viewport.once && state.current.hasEnteredView)\n shouldObserve = false;\n var useObserver = typeof IntersectionObserver === \"undefined\"\n ? useMissingIntersectionObserver\n : useIntersectionObserver;\n useObserver(shouldObserve, state.current, visualElement, viewport);\n}\nvar thresholdNames = {\n some: 0,\n all: 1,\n};\nfunction useIntersectionObserver(shouldObserve, state, visualElement, _a) {\n var root = _a.root, rootMargin = _a.margin, _b = _a.amount, amount = _b === void 0 ? \"some\" : _b, once = _a.once;\n useEffect(function () {\n if (!shouldObserve)\n return;\n var options = {\n root: root === null || root === void 0 ? void 0 : root.current,\n rootMargin: rootMargin,\n threshold: typeof amount === \"number\" ? amount : thresholdNames[amount],\n };\n var intersectionCallback = function (entry) {\n var _a;\n var isIntersecting = entry.isIntersecting;\n /**\n * If there's been no change in the viewport state, early return.\n */\n if (state.isInView === isIntersecting)\n return;\n state.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 && state.hasEnteredView) {\n return;\n }\n else if (isIntersecting) {\n state.hasEnteredView = true;\n }\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, isIntersecting);\n /**\n * Use the latest committed props rather than the ones in scope\n * when this observer is created\n */\n var props = visualElement.getProps();\n var callback = isIntersecting\n ? props.onViewportEnter\n : props.onViewportLeave;\n callback === null || callback === void 0 ? void 0 : callback(entry);\n };\n return observeIntersection(visualElement.getInstance(), options, intersectionCallback);\n }, [shouldObserve, root, rootMargin, amount]);\n}\n/**\n * If IntersectionObserver is missing, we activate inView and fire onViewportEnter\n * on mount. This way, the page will be in the state the author expects users\n * to see it in for everyone.\n */\nfunction useMissingIntersectionObserver(shouldObserve, state, visualElement, _a) {\n var _b = _a.fallback, fallback = _b === void 0 ? true : _b;\n useEffect(function () {\n if (!shouldObserve || !fallback)\n return;\n if (env !== \"production\") {\n warnOnce(false, \"IntersectionObserver not available on this device. whileInView animations will trigger on mount.\");\n }\n /**\n * Fire this in an rAF because, at this point, the animation state\n * won't have flushed for the first time and there's certain logic in\n * there that behaves differently on the initial animation.\n *\n * This hook should be quite rarely called so setting this in an rAF\n * is preferred to changing the behaviour of the animation state.\n */\n requestAnimationFrame(function () {\n var _a;\n state.hasEnteredView = true;\n var onViewportEnter = visualElement.getProps().onViewportEnter;\n onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null);\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true);\n });\n }, [shouldObserve]);\n}\n\nexport { useViewport };\n","var makeRenderlessComponent = function (hook) { return function (props) {\n hook(props);\n return null;\n}; };\n\nexport { makeRenderlessComponent };\n","import { useFocusGesture } from '../../gestures/use-focus-gesture.mjs';\nimport { useHoverGesture } from '../../gestures/use-hover-gesture.mjs';\nimport { useTapGesture } from '../../gestures/use-tap-gesture.mjs';\nimport { useViewport } from './viewport/use-viewport.mjs';\nimport { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';\n\nvar gestureAnimations = {\n inView: makeRenderlessComponent(useViewport),\n tap: makeRenderlessComponent(useTapGesture),\n focus: makeRenderlessComponent(useFocusGesture),\n hover: makeRenderlessComponent(useHoverGesture),\n};\n\nexport { gestureAnimations };\n","import { useRef } from 'react';\nimport { isNodeOrChild } from './utils/is-node-or-child.mjs';\nimport { usePointerEvent, addPointerEvent } from '../events/use-pointer-event.mjs';\nimport { useUnmountEffect } from '../utils/use-unmount-effect.mjs';\nimport { pipe } from 'popmotion';\nimport { AnimationType } from '../render/utils/types.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\n\n/**\n * @param handlers -\n * @internal\n */\nfunction useTapGesture(_a) {\n var onTap = _a.onTap, onTapStart = _a.onTapStart, onTapCancel = _a.onTapCancel, whileTap = _a.whileTap, visualElement = _a.visualElement;\n var hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;\n var isPressing = useRef(false);\n var cancelPointerEndListeners = useRef(null);\n /**\n * Only set listener to passive if there are no external listeners.\n */\n var eventOptions = {\n passive: !(onTapStart || onTap || onTapCancel || onPointerDown),\n };\n function removePointerEndListener() {\n var _a;\n (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);\n cancelPointerEndListeners.current = null;\n }\n function checkPointerEnd() {\n var _a;\n removePointerEndListener();\n isPressing.current = false;\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, false);\n return !isDragActive();\n }\n function onPointerUp(event, info) {\n if (!checkPointerEnd())\n return;\n /**\n * We only count this as a tap gesture if the event.target is the same\n * as, or a child of, this component's element\n */\n !isNodeOrChild(visualElement.getInstance(), event.target)\n ? onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info)\n : onTap === null || onTap === void 0 ? void 0 : onTap(event, info);\n }\n function onPointerCancel(event, info) {\n if (!checkPointerEnd())\n return;\n onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info);\n }\n function onPointerDown(event, info) {\n var _a;\n removePointerEndListener();\n if (isPressing.current)\n return;\n isPressing.current = true;\n cancelPointerEndListeners.current = pipe(addPointerEvent(window, \"pointerup\", onPointerUp, eventOptions), addPointerEvent(window, \"pointercancel\", onPointerCancel, eventOptions));\n /**\n * Ensure we trigger animations before firing event callback\n */\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true);\n onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);\n }\n usePointerEvent(visualElement, \"pointerdown\", hasPressListeners ? onPointerDown : undefined, eventOptions);\n useUnmountEffect(removePointerEndListener);\n}\n\nexport { useTapGesture };\n","import { AnimationType } from '../render/utils/types.mjs';\nimport { useDomEvent } from '../events/use-dom-event.mjs';\n\n/**\n *\n * @param props\n * @param ref\n * @internal\n */\nfunction useFocusGesture(_a) {\n var whileFocus = _a.whileFocus, visualElement = _a.visualElement;\n var onFocus = function () {\n var _a;\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, true);\n };\n var onBlur = function () {\n var _a;\n (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, false);\n };\n useDomEvent(visualElement, \"focus\", whileFocus ? onFocus : undefined);\n useDomEvent(visualElement, \"blur\", whileFocus ? onBlur : undefined);\n}\n\nexport { useFocusGesture };\n","function shallowCompare(next, prev) {\n if (!Array.isArray(prev))\n return false;\n var prevLength = prev.length;\n if (prevLength !== next.length)\n return false;\n for (var i = 0; i < prevLength; i++) {\n if (prev[i] !== next[i])\n return false;\n }\n return true;\n}\n\nexport { shallowCompare };\n","/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n function next() {\n while (env.stack.length) {\n var rec = env.stack.pop();\n try {\n var result = rec.dispose && rec.dispose.call(rec.value);\n if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n catch (e) {\n fail(e);\n }\n }\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n};\n","const clamp = (min, max, v) => Math.min(Math.max(v, min), max);\n\nexport { clamp };\n","import { warning } from 'hey-listen';\nimport { clamp } from '../../utils/clamp.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 <= maxDuration * 1000, \"Spring duration must be 10 seconds or less\");\n let dampingRatio = 1 - bounce;\n dampingRatio = clamp(minDamping, maxDamping, dampingRatio);\n duration = clamp(minDuration, maxDuration, duration / 1000);\n if (dampingRatio < 1) {\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 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 = duration * 1000;\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 { __rest } from 'tslib';\nimport { findSpring, calcAngularFreq } from '../utils/find-spring.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 = Object.assign({ velocity: 0.0, stiffness: 100, damping: 10, mass: 1.0, isResolvedFromDuration: false }, options);\n if (!isSpringType(options, physicsKeys) &&\n isSpringType(options, durationKeys)) {\n const derived = findSpring(options);\n springOptions = Object.assign(Object.assign(Object.assign({}, springOptions), derived), { velocity: 0.0, mass: 1.0 });\n springOptions.isResolvedFromDuration = true;\n }\n return springOptions;\n}\nfunction spring(_a) {\n var { from = 0.0, to = 1.0, restSpeed = 2, restDelta } = _a, options = __rest(_a, [\"from\", \"to\", \"restSpeed\", \"restDelta\"]);\n const state = { done: false, value: from };\n let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options);\n let resolveSpring = zero;\n let resolveVelocity = zero;\n function createSpring() {\n const initialVelocity = velocity ? -(velocity / 1000) : 0.0;\n const initialDelta = to - from;\n const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));\n const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000;\n if (restDelta === undefined) {\n restDelta = Math.min(Math.abs(to - from) / 100, 0.4);\n }\n if (dampingRatio < 1) {\n const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return (to -\n envelope *\n (((initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) /\n angularFreq) *\n Math.sin(angularFreq * t) +\n initialDelta * Math.cos(angularFreq * t)));\n };\n resolveVelocity = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return (dampingRatio *\n undampedAngularFreq *\n envelope *\n ((Math.sin(angularFreq * t) *\n (initialVelocity +\n dampingRatio *\n undampedAngularFreq *\n initialDelta)) /\n angularFreq +\n initialDelta * Math.cos(angularFreq * t)) -\n envelope *\n (Math.cos(angularFreq * t) *\n (initialVelocity +\n dampingRatio *\n undampedAngularFreq *\n initialDelta) -\n angularFreq *\n initialDelta *\n Math.sin(angularFreq * t)));\n };\n }\n else if (dampingRatio === 1) {\n resolveSpring = (t) => to -\n Math.exp(-undampedAngularFreq * t) *\n (initialDelta +\n (initialVelocity + undampedAngularFreq * initialDelta) *\n t);\n }\n else {\n const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n const freqForT = Math.min(dampedAngularFreq * t, 300);\n return (to -\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 }\n createSpring();\n return {\n next: (t) => {\n const current = resolveSpring(t);\n if (!isResolvedFromDuration) {\n const currentVelocity = resolveVelocity(t) * 1000;\n const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;\n const isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta;\n state.done =\n isBelowVelocityThreshold && isBelowDisplacementThreshold;\n }\n else {\n state.done = t >= duration;\n }\n state.value = state.done ? to : current;\n return state;\n },\n flipTarget: () => {\n velocity = -velocity;\n [from, to] = [to, from];\n createSpring();\n },\n };\n}\nspring.needsInterpolation = (a, b) => typeof a === \"string\" || typeof b === \"string\";\nconst zero = (_t) => 0;\n\nexport { spring };\n","const progress = (from, to, value) => {\n const toFromDifference = to - from;\n return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;\n};\n\nexport { progress };\n","const mix = (from, to, progress) => -progress * from + progress * to + from;\n\nexport { mix };\n","import { isString, singleColorRegex, floatRegex } from '../utils.mjs';\n\nconst isColorString = (type, testProp) => (v) => {\n return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||\n (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));\n};\nconst splitColor = (aName, bName, cName) => (v) => {\n if (!isString(v))\n return v;\n const [a, b, c, alpha] = v.match(floatRegex);\n return {\n [aName]: parseFloat(a),\n [bName]: parseFloat(b),\n [cName]: parseFloat(c),\n alpha: alpha !== undefined ? parseFloat(alpha) : 1,\n };\n};\n\nexport { isColorString, splitColor };\n","import { number, alpha } from '../numbers/index.mjs';\nimport { sanitize, clamp } from '../utils.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst clampRgbUnit = clamp(0, 255);\nconst rgbUnit = Object.assign(Object.assign({}, number), { transform: (v) => Math.round(clampRgbUnit(v)) });\nconst rgba = {\n test: isColorString('rgb', 'red'),\n parse: splitColor('red', 'green', 'blue'),\n transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => 'rgba(' +\n rgbUnit.transform(red) +\n ', ' +\n rgbUnit.transform(green) +\n ', ' +\n rgbUnit.transform(blue) +\n ', ' +\n sanitize(alpha.transform(alpha$1)) +\n ')',\n};\n\nexport { rgbUnit, rgba };\n","import { rgba } from './rgba.mjs';\nimport { isColorString } from './utils.mjs';\n\nfunction parseHex(v) {\n let r = '';\n let g = '';\n let b = '';\n let a = '';\n if (v.length > 5) {\n r = v.substr(1, 2);\n g = v.substr(3, 2);\n b = v.substr(5, 2);\n a = v.substr(7, 2);\n }\n else {\n r = v.substr(1, 1);\n g = v.substr(2, 1);\n b = v.substr(3, 1);\n a = v.substr(4, 1);\n r += r;\n g += g;\n b += b;\n a += a;\n }\n return {\n red: parseInt(r, 16),\n green: parseInt(g, 16),\n blue: parseInt(b, 16),\n alpha: a ? parseInt(a, 16) / 255 : 1,\n };\n}\nconst hex = {\n test: isColorString('#'),\n parse: parseHex,\n transform: rgba.transform,\n};\n\nexport { hex };\n","import { alpha } from '../numbers/index.mjs';\nimport { percent } from '../numbers/units.mjs';\nimport { sanitize } from '../utils.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst hsla = {\n test: isColorString('hsl', 'hue'),\n parse: splitColor('hue', 'saturation', 'lightness'),\n transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {\n return ('hsla(' +\n Math.round(hue) +\n ', ' +\n percent.transform(sanitize(saturation)) +\n ', ' +\n percent.transform(sanitize(lightness)) +\n ', ' +\n sanitize(alpha.transform(alpha$1)) +\n ')');\n },\n};\n\nexport { hsla };\n","function hueToRgb(p, q, t) {\n if (t < 0)\n t += 1;\n if (t > 1)\n t -= 1;\n if (t < 1 / 6)\n return p + (q - p) * 6 * t;\n if (t < 1 / 2)\n return q;\n if (t < 2 / 3)\n return p + (q - p) * (2 / 3 - t) * 6;\n return p;\n}\nfunction hslaToRgba({ hue, saturation, lightness, alpha }) {\n hue /= 360;\n saturation /= 100;\n lightness /= 100;\n let red = 0;\n let green = 0;\n let blue = 0;\n if (!saturation) {\n red = green = blue = lightness;\n }\n else {\n const q = lightness < 0.5\n ? lightness * (1 + saturation)\n : lightness + saturation - lightness * saturation;\n const p = 2 * lightness - q;\n red = hueToRgb(p, q, hue + 1 / 3);\n green = hueToRgb(p, q, hue);\n blue = hueToRgb(p, q, hue - 1 / 3);\n }\n return {\n red: Math.round(red * 255),\n green: Math.round(green * 255),\n blue: Math.round(blue * 255),\n alpha,\n };\n}\n\nexport { hslaToRgba };\n","import { mix } from './mix.mjs';\nimport { hsla, rgba, hex } from 'style-value-types';\nimport { invariant } from 'hey-listen';\nimport { hslaToRgba } from './hsla-to-rgba.mjs';\n\nconst mixLinearColor = (from, to, v) => {\n const fromExpo = from * from;\n const toExpo = to * to;\n return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));\n};\nconst colorTypes = [hex, rgba, hsla];\nconst getColorType = (v) => colorTypes.find((type) => type.test(v));\nconst notAnimatable = (color) => `'${color}' is not an animatable color. Use the equivalent color code instead.`;\nconst mixColor = (from, to) => {\n let fromColorType = getColorType(from);\n let toColorType = getColorType(to);\n invariant(!!fromColorType, notAnimatable(from));\n invariant(!!toColorType, notAnimatable(to));\n let fromColor = fromColorType.parse(from);\n let toColor = toColorType.parse(to);\n if (fromColorType === hsla) {\n fromColor = hslaToRgba(fromColor);\n fromColorType = rgba;\n }\n if (toColorType === hsla) {\n toColor = hslaToRgba(toColor);\n toColorType = rgba;\n }\n const blended = Object.assign({}, fromColor);\n return (v) => {\n for (const key in blended) {\n if (key !== \"alpha\") {\n blended[key] = mixLinearColor(fromColor[key], toColor[key], v);\n }\n }\n blended.alpha = mix(fromColor.alpha, toColor.alpha, v);\n return fromColorType.transform(blended);\n };\n};\n\nexport { mixColor, mixLinearColor };\n","import { isString } from '../utils.mjs';\nimport { hex } from './hex.mjs';\nimport { hsla } from './hsla.mjs';\nimport { rgba } from './rgba.mjs';\n\nconst color = {\n test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),\n parse: (v) => {\n if (rgba.test(v)) {\n return rgba.parse(v);\n }\n else if (hsla.test(v)) {\n return hsla.parse(v);\n }\n else {\n return hex.parse(v);\n }\n },\n transform: (v) => {\n return isString(v)\n ? v\n : v.hasOwnProperty('red')\n ? rgba.transform(v)\n : hsla.transform(v);\n },\n};\n\nexport { color };\n","import { color } from '../color/index.mjs';\nimport { number } from '../numbers/index.mjs';\nimport { isString, floatRegex, colorRegex, sanitize } from '../utils.mjs';\n\nconst colorToken = '${c}';\nconst numberToken = '${n}';\nfunction test(v) {\n var _a, _b, _c, _d;\n return (isNaN(v) &&\n isString(v) &&\n ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0);\n}\nfunction analyse(v) {\n if (typeof v === 'number')\n v = `${v}`;\n const values = [];\n let numColors = 0;\n const colors = v.match(colorRegex);\n if (colors) {\n numColors = colors.length;\n v = v.replace(colorRegex, colorToken);\n values.push(...colors.map(color.parse));\n }\n const numbers = v.match(floatRegex);\n if (numbers) {\n v = v.replace(floatRegex, numberToken);\n values.push(...numbers.map(number.parse));\n }\n return { values, numColors, tokenised: v };\n}\nfunction parse(v) {\n return analyse(v).values;\n}\nfunction createTransformer(v) {\n const { values, numColors, tokenised } = analyse(v);\n const numValues = values.length;\n return (v) => {\n let output = tokenised;\n for (let i = 0; i < numValues; i++) {\n output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v[i]) : sanitize(v[i]));\n }\n return output;\n };\n}\nconst convertNumbersToZero = (v) => typeof v === 'number' ? 0 : v;\nfunction getAnimatableNone(v) {\n const parsed = parse(v);\n const transformer = createTransformer(v);\n return transformer(parsed.map(convertNumbersToZero));\n}\nconst complex = { test, parse, createTransformer, getAnimatableNone };\n\nexport { complex };\n","const zeroPoint = {\n x: 0,\n y: 0,\n z: 0\n};\nconst isNum = (v) => typeof v === 'number';\n\nexport { isNum, zeroPoint };\n","import { complex, color } from 'style-value-types';\nimport { mix } from './mix.mjs';\nimport { mixColor } from './mix-color.mjs';\nimport { isNum } from './inc.mjs';\nimport { pipe } from './pipe.mjs';\nimport { warning } from 'hey-listen';\n\nfunction getMixer(origin, target) {\n if (isNum(origin)) {\n return (v) => mix(origin, target, v);\n }\n else if (color.test(origin)) {\n return mixColor(origin, target);\n }\n else {\n return mixComplex(origin, target);\n }\n}\nconst mixArray = (from, to) => {\n const output = [...from];\n const numValues = output.length;\n const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));\n return (v) => {\n for (let i = 0; i < numValues; i++) {\n output[i] = blendValue[i](v);\n }\n return output;\n };\n};\nconst mixObject = (origin, target) => {\n const output = Object.assign(Object.assign({}, origin), target);\n const blendValue = {};\n for (const key in output) {\n if (origin[key] !== undefined && target[key] !== undefined) {\n blendValue[key] = getMixer(origin[key], target[key]);\n }\n }\n return (v) => {\n for (const key in blendValue) {\n output[key] = blendValue[key](v);\n }\n return output;\n };\n};\nfunction analyse(value) {\n const parsed = complex.parse(value);\n const numValues = parsed.length;\n let numNumbers = 0;\n let numRGB = 0;\n let numHSL = 0;\n for (let i = 0; i < numValues; i++) {\n if (numNumbers || typeof parsed[i] === \"number\") {\n numNumbers++;\n }\n else {\n if (parsed[i].hue !== undefined) {\n numHSL++;\n }\n else {\n numRGB++;\n }\n }\n }\n return { parsed, numNumbers, numRGB, numHSL };\n}\nconst mixComplex = (origin, target) => {\n const template = complex.createTransformer(target);\n const originStats = analyse(origin);\n const targetStats = analyse(target);\n const canInterpolate = originStats.numHSL === targetStats.numHSL &&\n originStats.numRGB === targetStats.numRGB &&\n originStats.numNumbers >= targetStats.numNumbers;\n if (canInterpolate) {\n return pipe(mixArray(originStats.parsed, targetStats.parsed), 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 (p) => `${p > 0 ? target : origin}`;\n }\n};\n\nexport { mixArray, mixComplex, mixObject };\n","import { progress } from './progress.mjs';\nimport { mix } from './mix.mjs';\nimport { mixColor } from './mix-color.mjs';\nimport { mixComplex, mixArray, mixObject } from './mix-complex.mjs';\nimport { color } from 'style-value-types';\nimport { clamp } from './clamp.mjs';\nimport { pipe } from './pipe.mjs';\nimport { invariant } from 'hey-listen';\n\nconst mixNumber = (from, to) => (p) => mix(from, to, p);\nfunction detectMixerFactory(v) {\n if (typeof v === 'number') {\n return mixNumber;\n }\n else if (typeof v === 'string') {\n if (color.test(v)) {\n return mixColor;\n }\n else {\n return mixComplex;\n }\n }\n else if (Array.isArray(v)) {\n return mixArray;\n }\n else if (typeof v === 'object') {\n return mixObject;\n }\n}\nfunction createMixers(output, ease, customMixer) {\n const mixers = [];\n const mixerFactory = customMixer || detectMixerFactory(output[0]);\n const numMixers = output.length - 1;\n for (let i = 0; i < numMixers; i++) {\n let mixer = mixerFactory(output[i], output[i + 1]);\n if (ease) {\n const easingFunction = Array.isArray(ease) ? ease[i] : ease;\n mixer = pipe(easingFunction, mixer);\n }\n mixers.push(mixer);\n }\n return mixers;\n}\nfunction fastInterpolate([from, to], [mixer]) {\n return (v) => mixer(progress(from, to, v));\n}\nfunction slowInterpolate(input, mixers) {\n const inputLength = input.length;\n const lastInputIndex = inputLength - 1;\n return (v) => {\n let mixerIndex = 0;\n let foundMixerIndex = false;\n if (v <= input[0]) {\n foundMixerIndex = true;\n }\n else if (v >= input[lastInputIndex]) {\n mixerIndex = lastInputIndex - 1;\n foundMixerIndex = true;\n }\n if (!foundMixerIndex) {\n let i = 1;\n for (; i < inputLength; i++) {\n if (input[i] > v || i === lastInputIndex) {\n break;\n }\n }\n mixerIndex = i - 1;\n }\n const progressInRange = progress(input[mixerIndex], input[mixerIndex + 1], v);\n return mixers[mixerIndex](progressInRange);\n };\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 invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, 'Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.');\n if (input[0] > input[inputLength - 1]) {\n input = [].concat(input);\n output = [].concat(output);\n input.reverse();\n output.reverse();\n }\n const mixers = createMixers(output, ease, mixer);\n const interpolator = inputLength === 2\n ? fastInterpolate(input, mixers)\n : slowInterpolate(input, mixers);\n return isClamp\n ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))\n : interpolator;\n}\n\nexport { interpolate };\n","const reverseEasing = easing => p => 1 - easing(1 - p);\nconst mirrorEasing = easing => p => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;\nconst createExpoIn = (power) => p => Math.pow(p, power);\nconst createBackIn = (power) => p => p * p * ((power + 1) * p - power);\nconst createAnticipate = (power) => {\n const backEasing = createBackIn(power);\n return p => (p *= 2) < 1\n ? 0.5 * backEasing(p)\n : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));\n};\n\nexport { createAnticipate, createBackIn, createExpoIn, mirrorEasing, reverseEasing };\n","import { createExpoIn, reverseEasing, mirrorEasing, createBackIn, createAnticipate } from './utils.mjs';\n\nconst DEFAULT_OVERSHOOT_STRENGTH = 1.525;\nconst BOUNCE_FIRST_THRESHOLD = 4.0 / 11.0;\nconst BOUNCE_SECOND_THRESHOLD = 8.0 / 11.0;\nconst BOUNCE_THIRD_THRESHOLD = 9.0 / 10.0;\nconst linear = p => p;\nconst easeIn = createExpoIn(2);\nconst easeOut = reverseEasing(easeIn);\nconst easeInOut = mirrorEasing(easeIn);\nconst circIn = p => 1 - Math.sin(Math.acos(p));\nconst circOut = reverseEasing(circIn);\nconst circInOut = mirrorEasing(circOut);\nconst backIn = createBackIn(DEFAULT_OVERSHOOT_STRENGTH);\nconst backOut = reverseEasing(backIn);\nconst backInOut = mirrorEasing(backIn);\nconst anticipate = createAnticipate(DEFAULT_OVERSHOOT_STRENGTH);\nconst ca = 4356.0 / 361.0;\nconst cb = 35442.0 / 1805.0;\nconst cc = 16061.0 / 1805.0;\nconst bounceOut = (p) => {\n if (p === 1 || p === 0)\n return p;\n const p2 = p * p;\n return p < BOUNCE_FIRST_THRESHOLD\n ? 7.5625 * p2\n : p < BOUNCE_SECOND_THRESHOLD\n ? 9.075 * p2 - 9.9 * p + 3.4\n : p < BOUNCE_THIRD_THRESHOLD\n ? ca * p2 - cb * p + cc\n : 10.8 * p * p - 20.52 * p + 10.72;\n};\nconst bounceIn = reverseEasing(bounceOut);\nconst bounceInOut = (p) => p < 0.5\n ? 0.5 * (1.0 - bounceOut(1.0 - p * 2.0))\n : 0.5 * bounceOut(p * 2.0 - 1.0) + 0.5;\n\nexport { anticipate, backIn, backInOut, backOut, bounceIn, bounceInOut, bounceOut, circIn, circInOut, circOut, easeIn, easeInOut, easeOut, linear };\n","import { interpolate } from '../../utils/interpolate.mjs';\nimport { easeInOut } from '../../easing/index.mjs';\n\nfunction defaultEasing(values, easing) {\n return values.map(() => easing || easeInOut).splice(0, values.length - 1);\n}\nfunction defaultOffset(values) {\n const numValues = values.length;\n return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);\n}\nfunction convertOffsetToTimes(offset, duration) {\n return offset.map((o) => o * duration);\n}\nfunction keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) {\n const state = { done: false, value: from };\n const values = Array.isArray(to) ? to : [from, to];\n const times = convertOffsetToTimes(offset && offset.length === values.length\n ? offset\n : defaultOffset(values), duration);\n function createInterpolator() {\n return interpolate(times, values, {\n ease: Array.isArray(ease) ? ease : defaultEasing(values, ease),\n });\n }\n let interpolator = createInterpolator();\n return {\n next: (t) => {\n state.value = interpolator(t);\n state.done = t >= duration;\n return state;\n },\n flipTarget: () => {\n values.reverse();\n interpolator = createInterpolator();\n },\n };\n}\n\nexport { convertOffsetToTimes, defaultEasing, defaultOffset, keyframes };\n","import { spring } from '../generators/spring.mjs';\nimport { keyframes } from '../generators/keyframes.mjs';\nimport { decay } from '../generators/decay.mjs';\n\nconst types = { keyframes, spring, decay };\nfunction detectAnimationFromOptions(config) {\n if (Array.isArray(config.to)) {\n return keyframes;\n }\n else if (types[config.type]) {\n return types[config.type];\n }\n const keys = new Set(Object.keys(config));\n if (keys.has(\"ease\") ||\n (keys.has(\"duration\") && !keys.has(\"dampingRatio\"))) {\n return keyframes;\n }\n else if (keys.has(\"dampingRatio\") ||\n keys.has(\"stiffness\") ||\n keys.has(\"mass\") ||\n keys.has(\"damping\") ||\n keys.has(\"restSpeed\") ||\n keys.has(\"restDelta\")) {\n return spring;\n }\n return keyframes;\n}\n\nexport { detectAnimationFromOptions };\n","function decay({ velocity = 0, from = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) {\n const state = { done: false, value: from };\n let amplitude = power * velocity;\n const ideal = from + amplitude;\n const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);\n if (target !== ideal)\n amplitude = target - from;\n return {\n next: (t) => {\n const delta = -amplitude * Math.exp(-t / timeConstant);\n state.done = !(delta > restDelta || delta < -restDelta);\n state.value = state.done ? target : target + delta;\n return state;\n },\n flipTarget: () => { },\n };\n}\n\nexport { decay };\n","const defaultTimestep = (1 / 60) * 1000;\nconst getCurrentTime = typeof performance !== \"undefined\"\n ? () => performance.now()\n : () => Date.now();\nconst onNextFrame = typeof window !== \"undefined\"\n ? (callback) => window.requestAnimationFrame(callback)\n : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);\n\nexport { defaultTimestep, onNextFrame };\n","import { onNextFrame, defaultTimestep } from './on-next-frame.mjs';\nimport { createRenderStep } from './create-render-step.mjs';\n\nconst maxElapsed = 40;\nlet useDefaultElapsed = true;\nlet runNextFrame = false;\nlet isProcessing = false;\nconst frame = {\n delta: 0,\n timestamp: 0,\n};\nconst stepsOrder = [\n \"read\",\n \"update\",\n \"preRender\",\n \"render\",\n \"postRender\",\n];\nconst steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(() => (runNextFrame = true));\n return acc;\n}, {});\nconst sync = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n startLoop();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n}, {});\nconst cancelSync = stepsOrder.reduce((acc, key) => {\n acc[key] = steps[key].cancel;\n return acc;\n}, {});\nconst flushSync = stepsOrder.reduce((acc, key) => {\n acc[key] = () => steps[key].process(frame);\n return acc;\n}, {});\nconst processStep = (stepId) => steps[stepId].process(frame);\nconst processFrame = (timestamp) => {\n runNextFrame = false;\n frame.delta = useDefaultElapsed\n ? defaultTimestep\n : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);\n frame.timestamp = timestamp;\n isProcessing = true;\n stepsOrder.forEach(processStep);\n isProcessing = false;\n if (runNextFrame) {\n useDefaultElapsed = false;\n onNextFrame(processFrame);\n }\n};\nconst startLoop = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!isProcessing)\n onNextFrame(processFrame);\n};\nconst getFrameData = () => frame;\n\nexport default sync;\nexport { cancelSync, flushSync, getFrameData };\n","function createRenderStep(runNextFrame) {\n let toRun = [];\n let toRunNextFrame = [];\n let numToRun = 0;\n let isProcessing = false;\n let flushNextFrame = false;\n const toKeepAlive = new WeakSet();\n const step = {\n schedule: (callback, keepAlive = false, immediate = false) => {\n const addToCurrentFrame = immediate && isProcessing;\n const buffer = addToCurrentFrame ? toRun : toRunNextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n if (buffer.indexOf(callback) === -1) {\n buffer.push(callback);\n if (addToCurrentFrame && isProcessing)\n numToRun = toRun.length;\n }\n return callback;\n },\n cancel: (callback) => {\n const index = toRunNextFrame.indexOf(callback);\n if (index !== -1)\n toRunNextFrame.splice(index, 1);\n toKeepAlive.delete(callback);\n },\n process: (frameData) => {\n if (isProcessing) {\n flushNextFrame = true;\n return;\n }\n isProcessing = true;\n [toRun, toRunNextFrame] = [toRunNextFrame, toRun];\n toRunNextFrame.length = 0;\n numToRun = toRun.length;\n if (numToRun) {\n for (let i = 0; i < numToRun; i++) {\n const callback = toRun[i];\n callback(frameData);\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n }\n }\n isProcessing = false;\n if (flushNextFrame) {\n flushNextFrame = false;\n step.process(frameData);\n }\n },\n };\n return step;\n}\n\nexport { createRenderStep };\n","function loopElapsed(elapsed, duration, delay = 0) {\n return elapsed - duration - delay;\n}\nfunction reverseElapsed(elapsed, duration, delay = 0, isForwardPlayback = true) {\n return isForwardPlayback\n ? loopElapsed(duration + -elapsed, duration, delay)\n : duration - (elapsed - duration) + delay;\n}\nfunction hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {\n return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;\n}\n\nexport { hasRepeatDelayElapsed, loopElapsed, reverseElapsed };\n","import { __rest } from 'tslib';\nimport { detectAnimationFromOptions } from './utils/detect-animation-from-options.mjs';\nimport sync, { cancelSync } from 'framesync';\nimport { interpolate } from '../utils/interpolate.mjs';\nimport { hasRepeatDelayElapsed, reverseElapsed, loopElapsed } from './utils/elapsed.mjs';\n\nconst framesync = (update) => {\n const passTimestamp = ({ delta }) => update(delta);\n return {\n start: () => sync.update(passTimestamp, true),\n stop: () => cancelSync.update(passTimestamp),\n };\n};\nfunction animate(_a) {\n var _b, _c;\n var { from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = \"loop\", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate } = _a, options = __rest(_a, [\"from\", \"autoplay\", \"driver\", \"elapsed\", \"repeat\", \"repeatType\", \"repeatDelay\", \"onPlay\", \"onStop\", \"onComplete\", \"onRepeat\", \"onUpdate\"]);\n let { to } = options;\n let driverControls;\n let repeatCount = 0;\n let computedDuration = options.duration;\n let latest;\n let isComplete = false;\n let isForwardPlayback = true;\n let interpolateFromNumber;\n const animator = detectAnimationFromOptions(options);\n if ((_c = (_b = animator).needsInterpolation) === null || _c === void 0 ? void 0 : _c.call(_b, from, to)) {\n interpolateFromNumber = interpolate([0, 100], [from, to], {\n clamp: false,\n });\n from = 0;\n to = 100;\n }\n const animation = animator(Object.assign(Object.assign({}, options), { from, to }));\n function repeat() {\n repeatCount++;\n if (repeatType === \"reverse\") {\n isForwardPlayback = repeatCount % 2 === 0;\n elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);\n }\n else {\n elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);\n if (repeatType === \"mirror\")\n animation.flipTarget();\n }\n isComplete = false;\n onRepeat && onRepeat();\n }\n function complete() {\n driverControls.stop();\n onComplete && onComplete();\n }\n function update(delta) {\n if (!isForwardPlayback)\n delta = -delta;\n elapsed += delta;\n if (!isComplete) {\n const state = animation.next(Math.max(0, elapsed));\n latest = state.value;\n if (interpolateFromNumber)\n latest = interpolateFromNumber(latest);\n isComplete = isForwardPlayback ? state.done : elapsed <= 0;\n }\n onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);\n if (isComplete) {\n if (repeatCount === 0)\n computedDuration !== null && computedDuration !== void 0 ? computedDuration : (computedDuration = elapsed);\n if (repeatCount < repeatMax) {\n hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();\n }\n else {\n complete();\n }\n }\n }\n function play() {\n onPlay === null || onPlay === void 0 ? void 0 : onPlay();\n driverControls = driver(update);\n driverControls.start();\n }\n autoplay && play();\n return {\n stop: () => {\n onStop === null || onStop === void 0 ? void 0 : onStop();\n driverControls.stop();\n },\n };\n}\n\nexport { animate };\n","function velocityPerSecond(velocity, frameDuration) {\n return frameDuration ? velocity * (1000 / frameDuration) : 0;\n}\n\nexport { velocityPerSecond };\n","/**\n * Converts seconds to milliseconds\n *\n * @param seconds - Time in seconds.\n * @return milliseconds - Converted time in milliseconds.\n */\nvar secondsToMilliseconds = function (seconds) { return seconds * 1000; };\n\nexport { secondsToMilliseconds };\n","import { linear } from './index.mjs';\n\nconst a = (a1, a2) => 1.0 - 3.0 * a2 + 3.0 * a1;\nconst b = (a1, a2) => 3.0 * a2 - 6.0 * a1;\nconst c = (a1) => 3.0 * a1;\nconst calcBezier = (t, a1, a2) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;\nconst getSlope = (t, a1, a2) => 3.0 * a(a1, a2) * t * t + 2.0 * b(a1, a2) * t + c(a1);\nconst subdivisionPrecision = 0.0000001;\nconst subdivisionMaxIterations = 10;\nfunction binarySubdivide(aX, aA, aB, mX1, mX2) {\n let currentX;\n let currentT;\n let i = 0;\n do {\n currentT = aA + (aB - aA) / 2.0;\n currentX = calcBezier(currentT, mX1, mX2) - aX;\n if (currentX > 0.0) {\n aB = currentT;\n }\n else {\n aA = currentT;\n }\n } while (Math.abs(currentX) > subdivisionPrecision &&\n ++i < subdivisionMaxIterations);\n return currentT;\n}\nconst newtonIterations = 8;\nconst newtonMinSlope = 0.001;\nfunction newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {\n for (let i = 0; i < newtonIterations; ++i) {\n const currentSlope = getSlope(aGuessT, mX1, mX2);\n if (currentSlope === 0.0) {\n return aGuessT;\n }\n const currentX = calcBezier(aGuessT, mX1, mX2) - aX;\n aGuessT -= currentX / currentSlope;\n }\n return aGuessT;\n}\nconst kSplineTableSize = 11;\nconst kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);\nfunction cubicBezier(mX1, mY1, mX2, mY2) {\n if (mX1 === mY1 && mX2 === mY2)\n return linear;\n const sampleValues = new Float32Array(kSplineTableSize);\n for (let i = 0; i < kSplineTableSize; ++i) {\n sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);\n }\n function getTForX(aX) {\n let intervalStart = 0.0;\n let currentSample = 1;\n const lastSample = kSplineTableSize - 1;\n for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {\n intervalStart += kSampleStepSize;\n }\n --currentSample;\n const dist = (aX - sampleValues[currentSample]) /\n (sampleValues[currentSample + 1] - sampleValues[currentSample]);\n const guessForT = intervalStart + dist * kSampleStepSize;\n const initialSlope = getSlope(guessForT, mX1, mX2);\n if (initialSlope >= newtonMinSlope) {\n return newtonRaphsonIterate(aX, guessForT, mX1, mX2);\n }\n else if (initialSlope === 0.0) {\n return guessForT;\n }\n else {\n return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);\n }\n }\n return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);\n}\n\nexport { cubicBezier };\n","import { __read } from 'tslib';\nimport { invariant } from 'hey-listen';\nimport { cubicBezier, linear, easeIn, easeInOut, easeOut, circIn, circInOut, circOut, backIn, backInOut, backOut, anticipate, bounceIn, bounceInOut, bounceOut } from 'popmotion';\n\nvar easingLookup = {\n linear: linear,\n easeIn: easeIn,\n easeInOut: easeInOut,\n easeOut: easeOut,\n circIn: circIn,\n circInOut: circInOut,\n circOut: circOut,\n backIn: backIn,\n backInOut: backInOut,\n backOut: backOut,\n anticipate: anticipate,\n bounceIn: bounceIn,\n bounceInOut: bounceInOut,\n bounceOut: bounceOut,\n};\nvar easingDefinitionToFunction = function (definition) {\n if (Array.isArray(definition)) {\n // If cubic bezier definition, create bezier curve\n invariant(definition.length === 4, \"Cubic bezier arrays must contain four numerical values.\");\n var _a = __read(definition, 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];\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 '\".concat(definition, \"'\"));\n return easingLookup[definition];\n }\n return definition;\n};\nvar isEasingArray = function (ease) {\n return Array.isArray(ease) && typeof ease[0] !== \"number\";\n};\n\nexport { easingDefinitionToFunction, isEasingArray };\n","import { complex } from 'style-value-types';\n\n/**\n * Check if a value is animatable. Examples:\n *\n * ✅: 100, \"100px\", \"#fff\"\n * ❌: \"block\", \"url(2.jpg)\"\n * @param value\n *\n * @internal\n */\nvar isAnimatable = function (key, value) {\n // If the list of keys tat might be non-animatable grows, replace with Set\n if (key === \"zIndex\")\n return false;\n // If it's a number or a keyframes array, we can animate it. We might at some point\n // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,\n // but for now lets leave it like this for performance reasons\n if (typeof value === \"number\" || Array.isArray(value))\n return true;\n if (typeof value === \"string\" && // It's animatable if we have a string\n complex.test(value) && // And it contains numbers and/or colors\n !value.startsWith(\"url(\") // Unless it starts with \"url(\"\n ) {\n return true;\n }\n return false;\n};\n\nexport { isAnimatable };\n","import { __assign } from 'tslib';\nimport { isKeyframesTarget } from './is-keyframes-target.mjs';\n\nvar underDampedSpring = function () { return ({\n type: \"spring\",\n stiffness: 500,\n damping: 25,\n restSpeed: 10,\n}); };\nvar criticallyDampedSpring = function (to) { return ({\n type: \"spring\",\n stiffness: 550,\n damping: to === 0 ? 2 * Math.sqrt(550) : 30,\n restSpeed: 10,\n}); };\nvar linearTween = function () { return ({\n type: \"keyframes\",\n ease: \"linear\",\n duration: 0.3,\n}); };\nvar keyframes = function (values) { return ({\n type: \"keyframes\",\n duration: 0.8,\n values: values,\n}); };\nvar defaultTransitions = {\n x: underDampedSpring,\n y: underDampedSpring,\n z: underDampedSpring,\n rotate: underDampedSpring,\n rotateX: underDampedSpring,\n rotateY: underDampedSpring,\n rotateZ: underDampedSpring,\n scaleX: criticallyDampedSpring,\n scaleY: criticallyDampedSpring,\n scale: criticallyDampedSpring,\n opacity: linearTween,\n backgroundColor: linearTween,\n color: linearTween,\n default: criticallyDampedSpring,\n};\nvar getDefaultTransition = function (valueKey, to) {\n var transitionFactory;\n if (isKeyframesTarget(to)) {\n transitionFactory = keyframes;\n }\n else {\n transitionFactory =\n defaultTransitions[valueKey] || defaultTransitions.default;\n }\n return __assign({ to: to }, transitionFactory(to));\n};\n\nexport { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };\n","import { complex } from './index.mjs';\nimport { floatRegex } from '../utils.mjs';\n\nconst maxDefaults = new Set(['brightness', 'contrast', 'saturate', 'opacity']);\nfunction applyDefaultFilter(v) {\n let [name, value] = v.slice(0, -1).split('(');\n if (name === 'drop-shadow')\n return v;\n const [number] = value.match(floatRegex) || [];\n if (!number)\n return v;\n const unit = value.replace(number, '');\n let defaultValue = maxDefaults.has(name) ? 1 : 0;\n if (number !== value)\n defaultValue *= 100;\n return name + '(' + defaultValue + unit + ')';\n}\nconst functionRegex = /([a-z-]*)\\(.*?\\)/g;\nconst filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v) => {\n const functions = v.match(functionRegex);\n return functions ? functions.map(applyDefaultFilter).join(' ') : v;\n } });\n\nexport { filter };\n","import { __assign } from 'tslib';\nimport { color, filter } from 'style-value-types';\nimport { numberValueTypes } from './number.mjs';\n\n/**\n * A map of default value types for common values\n */\nvar defaultValueTypes = __assign(__assign({}, numberValueTypes), { \n // Color props\n color: color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, \n // Border props\n borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter: filter, WebkitFilter: filter });\n/**\n * Gets the default ValueType for the provided value key\n */\nvar getDefaultValueType = function (key) { return defaultValueTypes[key]; };\n\nexport { defaultValueTypes, getDefaultValueType };\n","import { filter, complex } from 'style-value-types';\nimport { getDefaultValueType } from './defaults.mjs';\n\nfunction getAnimatableNone(key, value) {\n var _a;\n var 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 (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value);\n}\n\nexport { getAnimatableNone };\n","var instantAnimationState = {\n current: false,\n};\n\nexport { instantAnimationState };\n","import { __assign, __rest, __spreadArray, __read } from 'tslib';\nimport { inertia, animate } from 'popmotion';\nimport { secondsToMilliseconds } from '../../utils/time-conversion.mjs';\nimport { isEasingArray, easingDefinitionToFunction } from './easing.mjs';\nimport { isAnimatable } from './is-animatable.mjs';\nimport { getDefaultTransition } from './default-transitions.mjs';\nimport { warning } from 'hey-listen';\nimport { getAnimatableNone } from '../../render/dom/value-types/animatable-none.mjs';\nimport { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';\nimport { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';\n\n/**\n * Decide whether a transition is defined on a given Transition.\n * This filters out orchestration options and returns true\n * if any options are left.\n */\nfunction isTransitionDefined(_a) {\n _a.when; _a.delay; _a.delayChildren; _a.staggerChildren; _a.staggerDirection; _a.repeat; _a.repeatType; _a.repeatDelay; _a.from; var transition = __rest(_a, [\"when\", \"delay\", \"delayChildren\", \"staggerChildren\", \"staggerDirection\", \"repeat\", \"repeatType\", \"repeatDelay\", \"from\"]);\n return !!Object.keys(transition).length;\n}\nvar legacyRepeatWarning = false;\n/**\n * Convert Framer Motion's Transition type into Popmotion-compatible options.\n */\nfunction convertTransitionToAnimationOptions(_a) {\n var ease = _a.ease, times = _a.times, yoyo = _a.yoyo, flip = _a.flip, loop = _a.loop, transition = __rest(_a, [\"ease\", \"times\", \"yoyo\", \"flip\", \"loop\"]);\n var options = __assign({}, transition);\n if (times)\n options[\"offset\"] = times;\n /**\n * Convert any existing durations from seconds to milliseconds\n */\n if (transition.duration)\n options[\"duration\"] = secondsToMilliseconds(transition.duration);\n if (transition.repeatDelay)\n options.repeatDelay = secondsToMilliseconds(transition.repeatDelay);\n /**\n * Map easing names to Popmotion's easing functions\n */\n if (ease) {\n options[\"ease\"] = isEasingArray(ease)\n ? ease.map(easingDefinitionToFunction)\n : easingDefinitionToFunction(ease);\n }\n /**\n * Support legacy transition API\n */\n if (transition.type === \"tween\")\n options.type = \"keyframes\";\n /**\n * TODO: These options are officially removed from the API.\n */\n if (yoyo || loop || flip) {\n warning(!legacyRepeatWarning, \"yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.\");\n legacyRepeatWarning = true;\n if (yoyo) {\n options.repeatType = \"reverse\";\n }\n else if (loop) {\n options.repeatType = \"loop\";\n }\n else if (flip) {\n options.repeatType = \"mirror\";\n }\n options.repeat = loop || yoyo || flip || transition.repeat;\n }\n /**\n * TODO: Popmotion 9 has the ability to automatically detect whether to use\n * a keyframes or spring animation, but does so by detecting velocity and other spring options.\n * It'd be good to introduce a similar thing here.\n */\n if (transition.type !== \"spring\")\n options.type = \"keyframes\";\n return options;\n}\n/**\n * Get the delay for a value by checking Transition with decreasing specificity.\n */\nfunction getDelayFromTransition(transition, key) {\n var _a, _b;\n var valueTransition = getValueTransition(transition, key) || {};\n return (_b = (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : transition.delay) !== null && _b !== void 0 ? _b : 0;\n}\nfunction hydrateKeyframes(options) {\n if (Array.isArray(options.to) && options.to[0] === null) {\n options.to = __spreadArray([], __read(options.to), false);\n options.to[0] = options.from;\n }\n return options;\n}\nfunction getPopmotionAnimationOptions(transition, options, key) {\n var _a;\n if (Array.isArray(options.to)) {\n (_a = transition.duration) !== null && _a !== void 0 ? _a : (transition.duration = 0.8);\n }\n hydrateKeyframes(options);\n /**\n * Get a default transition if none is determined to be defined.\n */\n if (!isTransitionDefined(transition)) {\n transition = __assign(__assign({}, transition), getDefaultTransition(key, options.to));\n }\n return __assign(__assign({}, options), convertTransitionToAnimationOptions(transition));\n}\n/**\n *\n */\nfunction getAnimation(key, value, target, transition, onComplete) {\n var _a;\n var valueTransition = getValueTransition(transition, key);\n var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();\n var isTargetAnimatable = isAnimatable(key, target);\n if (origin === \"none\" && isTargetAnimatable && typeof target === \"string\") {\n /**\n * If we're trying to animate from \"none\", try and get an animatable version\n * of the target. This could be improved to work both ways.\n */\n origin = getAnimatableNone(key, target);\n }\n else if (isZero(origin) && typeof target === \"string\") {\n origin = getZeroUnit(target);\n }\n else if (!Array.isArray(target) &&\n isZero(target) &&\n typeof origin === \"string\") {\n target = getZeroUnit(origin);\n }\n var isOriginAnimatable = isAnimatable(key, origin);\n warning(isOriginAnimatable === isTargetAnimatable, \"You are trying to animate \".concat(key, \" from \\\"\").concat(origin, \"\\\" to \\\"\").concat(target, \"\\\". \").concat(origin, \" is not an animatable value - to enable this animation set \").concat(origin, \" to a value animatable to \").concat(target, \" via the `style` property.\"));\n function start() {\n var options = {\n from: origin,\n to: target,\n velocity: value.getVelocity(),\n onComplete: onComplete,\n onUpdate: function (v) { return value.set(v); },\n };\n return valueTransition.type === \"inertia\" ||\n valueTransition.type === \"decay\"\n ? inertia(__assign(__assign({}, options), valueTransition))\n : animate(__assign(__assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: function (v) {\n var _a;\n options.onUpdate(v);\n (_a = valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, v);\n }, onComplete: function () {\n var _a;\n options.onComplete();\n (_a = valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);\n } }));\n }\n function set() {\n var _a, _b;\n var finalTarget = resolveFinalValueInKeyframes(target);\n value.set(finalTarget);\n onComplete();\n (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, finalTarget);\n (_b = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _b === void 0 ? void 0 : _b.call(valueTransition);\n return { stop: function () { } };\n }\n return !isOriginAnimatable ||\n !isTargetAnimatable ||\n valueTransition.type === false\n ? set\n : start;\n}\nfunction isZero(value) {\n return (value === 0 ||\n (typeof value === \"string\" &&\n parseFloat(value) === 0 &&\n value.indexOf(\" \") === -1));\n}\nfunction getZeroUnit(potentialUnitType) {\n return typeof potentialUnitType === \"number\"\n ? 0\n : getAnimatableNone(\"\", potentialUnitType);\n}\nfunction getValueTransition(transition, key) {\n return transition[key] || transition[\"default\"] || transition;\n}\n/**\n * Start animation on a MotionValue. This function is an interface between\n * Framer Motion and Popmotion\n */\nfunction startAnimation(key, value, target, transition) {\n if (transition === void 0) { transition = {}; }\n if (instantAnimationState.current) {\n transition = { type: false };\n }\n return value.start(function (onComplete) {\n var delayTimer;\n var controls;\n var animation = getAnimation(key, value, target, transition, onComplete);\n var delay = getDelayFromTransition(transition, key);\n var start = function () { return (controls = animation()); };\n if (delay) {\n delayTimer = window.setTimeout(start, secondsToMilliseconds(delay));\n }\n else {\n start();\n }\n return function () {\n clearTimeout(delayTimer);\n controls === null || controls === void 0 ? void 0 : controls.stop();\n };\n });\n}\n\nexport { convertTransitionToAnimationOptions, getDelayFromTransition, getPopmotionAnimationOptions, getValueTransition, getZeroUnit, hydrateKeyframes, isTransitionDefined, isZero, startAnimation };\n","import { animate } from './index.mjs';\nimport { velocityPerSecond } from '../utils/velocity-per-second.mjs';\nimport { getFrameData } from 'framesync';\n\nfunction inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {\n let currentAnimation;\n function isOutOfBounds(v) {\n return (min !== undefined && v < min) || (max !== undefined && v > max);\n }\n function boundaryNearest(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 function startAnimation(options) {\n currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();\n currentAnimation = animate(Object.assign(Object.assign({}, options), { driver, onUpdate: (v) => {\n var _a;\n onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v);\n (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);\n }, onComplete,\n onStop }));\n }\n function startSpring(options) {\n startAnimation(Object.assign({ type: \"spring\", stiffness: bounceStiffness, damping: bounceDamping, restDelta }, options));\n }\n if (isOutOfBounds(from)) {\n startSpring({ from, velocity, to: boundaryNearest(from) });\n }\n else {\n let target = power * velocity + from;\n if (typeof modifyTarget !== \"undefined\")\n target = modifyTarget(target);\n const boundary = boundaryNearest(target);\n const heading = boundary === min ? -1 : 1;\n let prev;\n let current;\n const checkBoundary = (v) => {\n prev = current;\n current = v;\n velocity = velocityPerSecond(v - prev, getFrameData().delta);\n if ((heading === 1 && v > boundary) ||\n (heading === -1 && v < boundary)) {\n startSpring({ from: v, to: boundary, velocity });\n }\n };\n startAnimation({\n type: \"decay\",\n from,\n velocity,\n timeConstant,\n power,\n restDelta,\n modifyTarget,\n onUpdate: isOutOfBounds(target) ? checkBoundary : undefined,\n });\n }\n return {\n stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(),\n };\n}\n\nexport { inertia };\n","/**\n * Check if value is a numerical string, ie a string that is purely a number eg \"100\" or \"-100.1\"\n */\nvar isNumericalString = function (v) { return /^\\-?\\d*\\.?\\d+$/.test(v); };\n\nexport { isNumericalString };\n","/**\n * Check if the value is a zero value string like \"0px\" or \"0%\"\n */\nvar isZeroValueString = function (v) { return /^0[^.\\s]+$/.test(v); };\n\nexport { isZeroValueString };\n","const defaultTimestep = (1 / 60) * 1000;\nconst getCurrentTime = typeof performance !== \"undefined\"\n ? () => performance.now()\n : () => Date.now();\nconst onNextFrame = typeof window !== \"undefined\"\n ? (callback) => window.requestAnimationFrame(callback)\n : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);\n\nexport { defaultTimestep, onNextFrame };\n","import { onNextFrame, defaultTimestep } from './on-next-frame.mjs';\nimport { createRenderStep } from './create-render-step.mjs';\n\nconst maxElapsed = 40;\nlet useDefaultElapsed = true;\nlet runNextFrame = false;\nlet isProcessing = false;\nconst frame = {\n delta: 0,\n timestamp: 0,\n};\nconst stepsOrder = [\n \"read\",\n \"update\",\n \"preRender\",\n \"render\",\n \"postRender\",\n];\nconst steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(() => (runNextFrame = true));\n return acc;\n}, {});\nconst sync = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n startLoop();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n}, {});\nconst cancelSync = stepsOrder.reduce((acc, key) => {\n acc[key] = steps[key].cancel;\n return acc;\n}, {});\nconst flushSync = stepsOrder.reduce((acc, key) => {\n acc[key] = () => steps[key].process(frame);\n return acc;\n}, {});\nconst processStep = (stepId) => steps[stepId].process(frame);\nconst processFrame = (timestamp) => {\n runNextFrame = false;\n frame.delta = useDefaultElapsed\n ? defaultTimestep\n : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);\n frame.timestamp = timestamp;\n isProcessing = true;\n stepsOrder.forEach(processStep);\n isProcessing = false;\n if (runNextFrame) {\n useDefaultElapsed = false;\n onNextFrame(processFrame);\n }\n};\nconst startLoop = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!isProcessing)\n onNextFrame(processFrame);\n};\nconst getFrameData = () => frame;\n\nexport default sync;\nexport { cancelSync, flushSync, getFrameData };\n","function createRenderStep(runNextFrame) {\n let toRun = [];\n let toRunNextFrame = [];\n let numToRun = 0;\n let isProcessing = false;\n let flushNextFrame = false;\n const toKeepAlive = new WeakSet();\n const step = {\n schedule: (callback, keepAlive = false, immediate = false) => {\n const addToCurrentFrame = immediate && isProcessing;\n const buffer = addToCurrentFrame ? toRun : toRunNextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n if (buffer.indexOf(callback) === -1) {\n buffer.push(callback);\n if (addToCurrentFrame && isProcessing)\n numToRun = toRun.length;\n }\n return callback;\n },\n cancel: (callback) => {\n const index = toRunNextFrame.indexOf(callback);\n if (index !== -1)\n toRunNextFrame.splice(index, 1);\n toKeepAlive.delete(callback);\n },\n process: (frameData) => {\n if (isProcessing) {\n flushNextFrame = true;\n return;\n }\n isProcessing = true;\n [toRun, toRunNextFrame] = [toRunNextFrame, toRun];\n toRunNextFrame.length = 0;\n numToRun = toRun.length;\n if (numToRun) {\n for (let i = 0; i < numToRun; i++) {\n const callback = toRun[i];\n callback(frameData);\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n }\n }\n isProcessing = false;\n if (flushNextFrame) {\n flushNextFrame = false;\n step.process(frameData);\n }\n },\n };\n return step;\n}\n\nexport { createRenderStep };\n","import { __read } from 'tslib';\n\nfunction addUniqueItem(arr, item) {\n arr.indexOf(item) === -1 && arr.push(item);\n}\nfunction removeItem(arr, item) {\n var index = arr.indexOf(item);\n index > -1 && arr.splice(index, 1);\n}\n// Adapted from array-move\nfunction moveItem(_a, fromIndex, toIndex) {\n var _b = __read(_a), arr = _b.slice(0);\n var startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;\n if (startIndex >= 0 && startIndex < arr.length) {\n var endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;\n var _c = __read(arr.splice(fromIndex, 1), 1), item = _c[0];\n arr.splice(endIndex, 0, item);\n }\n return arr;\n}\n\nexport { addUniqueItem, moveItem, removeItem };\n","import { addUniqueItem, removeItem } from './array.mjs';\n\nvar SubscriptionManager = /** @class */ (function () {\n function SubscriptionManager() {\n this.subscriptions = [];\n }\n SubscriptionManager.prototype.add = function (handler) {\n var _this = this;\n addUniqueItem(this.subscriptions, handler);\n return function () { return removeItem(_this.subscriptions, handler); };\n };\n SubscriptionManager.prototype.notify = function (a, b, c) {\n var numSubscriptions = this.subscriptions.length;\n if (!numSubscriptions)\n return;\n if (numSubscriptions === 1) {\n /**\n * If there's only a single handler we can just call it without invoking a loop.\n */\n this.subscriptions[0](a, b, c);\n }\n else {\n for (var i = 0; i < numSubscriptions; i++) {\n /**\n * Check whether the handler exists before firing as it's possible\n * the subscriptions were modified during this loop running.\n */\n var handler = this.subscriptions[i];\n handler && handler(a, b, c);\n }\n }\n };\n SubscriptionManager.prototype.getSize = function () {\n return this.subscriptions.length;\n };\n SubscriptionManager.prototype.clear = function () {\n this.subscriptions.length = 0;\n };\n return SubscriptionManager;\n}());\n\nexport { SubscriptionManager };\n","import sync, { getFrameData } from 'framesync';\nimport { velocityPerSecond } from 'popmotion';\nimport { SubscriptionManager } from '../utils/subscription-manager.mjs';\n\nvar isFloat = function (value) {\n return !isNaN(parseFloat(value));\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nvar MotionValue = /** @class */ (function () {\n /**\n * @param init - The initiating value\n * @param config - Optional configuration options\n *\n * - `transformer`: A function to transform incoming values with.\n *\n * @internal\n */\n function MotionValue(init) {\n var _this = this;\n /**\n * 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 = \"6.5.1\";\n /**\n * Duration, in milliseconds, since last updating frame.\n *\n * @internal\n */\n this.timeDelta = 0;\n /**\n * Timestamp of the last time this `MotionValue` was updated.\n *\n * @internal\n */\n this.lastUpdated = 0;\n /**\n * Functions to notify when the `MotionValue` updates.\n *\n * @internal\n */\n this.updateSubscribers = new SubscriptionManager();\n /**\n * Functions to notify when the velocity updates.\n *\n * @internal\n */\n this.velocityUpdateSubscribers = new SubscriptionManager();\n /**\n * Functions to notify when the `MotionValue` updates and `render` is set to `true`.\n *\n * @internal\n */\n this.renderSubscribers = new SubscriptionManager();\n /**\n * Tracks whether this value can output a velocity. Currently this is only true\n * if the value is numerical, but we might be able to widen the scope here and support\n * other value types.\n *\n * @internal\n */\n this.canTrackVelocity = false;\n this.updateAndNotify = function (v, render) {\n if (render === void 0) { render = true; }\n _this.prev = _this.current;\n _this.current = v;\n // Update timestamp\n var _a = getFrameData(), delta = _a.delta, timestamp = _a.timestamp;\n if (_this.lastUpdated !== timestamp) {\n _this.timeDelta = delta;\n _this.lastUpdated = timestamp;\n sync.postRender(_this.scheduleVelocityCheck);\n }\n // Update update subscribers\n if (_this.prev !== _this.current) {\n _this.updateSubscribers.notify(_this.current);\n }\n // Update velocity subscribers\n if (_this.velocityUpdateSubscribers.getSize()) {\n _this.velocityUpdateSubscribers.notify(_this.getVelocity());\n }\n // Update render subscribers\n if (render) {\n _this.renderSubscribers.notify(_this.current);\n }\n };\n /**\n * Schedule a velocity check for the next frame.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.scheduleVelocityCheck = function () { return sync.postRender(_this.velocityCheck); };\n /**\n * Updates `prev` with `current` if the value hasn't been updated this frame.\n * This ensures velocity calculations return `0`.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.velocityCheck = function (_a) {\n var timestamp = _a.timestamp;\n if (timestamp !== _this.lastUpdated) {\n _this.prev = _this.current;\n _this.velocityUpdateSubscribers.notify(_this.getVelocity());\n }\n };\n this.hasAnimated = false;\n this.prev = this.current = init;\n this.canTrackVelocity = isFloat(this.current);\n }\n /**\n * Adds a function that will be notified when the `MotionValue` is updated.\n *\n * It returns a function that, when called, will cancel the subscription.\n *\n * When calling `onChange` inside a React component, it should be wrapped with the\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.onChange(updateOpacity)\n * const unsubscribeY = y.onChange(updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return \n * }\n * ```\n *\n * @privateRemarks\n *\n * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.\n *\n * ```jsx\n * useOnChange(x, () => {})\n * ```\n *\n * @param subscriber - A function that receives the latest value.\n * @returns A function that, when called, will cancel this subscription.\n *\n * @public\n */\n MotionValue.prototype.onChange = function (subscription) {\n return this.updateSubscribers.add(subscription);\n };\n MotionValue.prototype.clearListeners = function () {\n this.updateSubscribers.clear();\n };\n /**\n * Adds a function that will be notified when the `MotionValue` requests a render.\n *\n * @param subscriber - A function that's provided the latest value.\n * @returns A function that, when called, will cancel this subscription.\n *\n * @internal\n */\n MotionValue.prototype.onRenderRequest = function (subscription) {\n // Render immediately\n subscription(this.get());\n return this.renderSubscribers.add(subscription);\n };\n /**\n * Attaches a passive effect to the `MotionValue`.\n *\n * @internal\n */\n MotionValue.prototype.attach = function (passiveEffect) {\n this.passiveEffect = passiveEffect;\n };\n /**\n * Sets the state of the `MotionValue`.\n *\n * @remarks\n *\n * ```jsx\n * const x = useMotionValue(0)\n * x.set(10)\n * ```\n *\n * @param latest - Latest value to set.\n * @param render - Whether to notify render subscribers. Defaults to `true`\n *\n * @public\n */\n MotionValue.prototype.set = function (v, render) {\n if (render === void 0) { render = true; }\n if (!render || !this.passiveEffect) {\n this.updateAndNotify(v, render);\n }\n else {\n this.passiveEffect(v, this.updateAndNotify);\n }\n };\n /**\n * Returns the latest state of `MotionValue`\n *\n * @returns - The latest state of `MotionValue`\n *\n * @public\n */\n MotionValue.prototype.get = function () {\n return this.current;\n };\n /**\n * @public\n */\n MotionValue.prototype.getPrevious = function () {\n return this.prev;\n };\n /**\n * Returns the latest velocity of `MotionValue`\n *\n * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.\n *\n * @public\n */\n MotionValue.prototype.getVelocity = function () {\n // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful\n return this.canTrackVelocity\n ? // These casts could be avoided if parseFloat would be typed better\n velocityPerSecond(parseFloat(this.current) -\n parseFloat(this.prev), this.timeDelta)\n : 0;\n };\n /**\n * Registers a new animation to control this `MotionValue`. Only one\n * animation can drive a `MotionValue` at one time.\n *\n * ```jsx\n * value.start()\n * ```\n *\n * @param animation - A function that starts the provided animation\n *\n * @internal\n */\n MotionValue.prototype.start = function (animation) {\n var _this = this;\n this.stop();\n return new Promise(function (resolve) {\n _this.hasAnimated = true;\n _this.stopAnimation = animation(resolve);\n }).then(function () { return _this.clearAnimation(); });\n };\n /**\n * Stop the currently active animation.\n *\n * @public\n */\n MotionValue.prototype.stop = function () {\n if (this.stopAnimation)\n this.stopAnimation();\n this.clearAnimation();\n };\n /**\n * Returns `true` if this value is currently animating.\n *\n * @public\n */\n MotionValue.prototype.isAnimating = function () {\n return !!this.stopAnimation;\n };\n MotionValue.prototype.clearAnimation = function () {\n this.stopAnimation = null;\n };\n /**\n * Destroy and clean up subscribers to this `MotionValue`.\n *\n * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically\n * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually\n * created a `MotionValue` via the `motionValue` function.\n *\n * @public\n */\n MotionValue.prototype.destroy = function () {\n this.updateSubscribers.clear();\n this.renderSubscribers.clear();\n this.stop();\n };\n return MotionValue;\n}());\nfunction motionValue(init) {\n return new MotionValue(init);\n}\n\nexport { MotionValue, motionValue };\n","/**\n * Tests a provided value against a ValueType\n */\nvar testValueType = function (v) { return function (type) { return type.test(v); }; };\n\nexport { testValueType };\n","import { number, px, percent, degrees, vw, vh } from 'style-value-types';\nimport { testValueType } from './test.mjs';\nimport { auto } from './type-auto.mjs';\n\n/**\n * A list of value types commonly used for dimensions\n */\nvar dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];\n/**\n * Tests a dimensional value against the list of dimension ValueTypes\n */\nvar findDimensionValueType = function (v) {\n return dimensionValueTypes.find(testValueType(v));\n};\n\nexport { dimensionValueTypes, findDimensionValueType };\n","/**\n * ValueType for \"auto\"\n */\nvar auto = {\n test: function (v) { return v === \"auto\"; },\n parse: function (v) { return v; },\n};\n\nexport { auto };\n","import { __spreadArray, __read } from 'tslib';\nimport { color, complex } from 'style-value-types';\nimport { dimensionValueTypes } from './dimensions.mjs';\nimport { testValueType } from './test.mjs';\n\n/**\n * A list of all ValueTypes\n */\nvar valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes), false), [color, complex], false);\n/**\n * Tests a value against the list of ValueTypes\n */\nvar findValueType = function (v) { return valueTypes.find(testValueType(v)); };\n\nexport { findValueType };\n","import { __rest, __assign, __spreadArray, __read } from 'tslib';\nimport { complex } from 'style-value-types';\nimport { isNumericalString } from '../../utils/is-numerical-string.mjs';\nimport { isZeroValueString } from '../../utils/is-zero-value-string.mjs';\nimport { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { getAnimatableNone } from '../dom/value-types/animatable-none.mjs';\nimport { findValueType } from '../dom/value-types/find.mjs';\nimport { resolveVariant } from './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 var resolved = resolveVariant(visualElement, definition);\n var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = __rest(_a, [\"transitionEnd\", \"transition\"]);\n target = __assign(__assign({}, target), transitionEnd);\n for (var key in target) {\n var value = resolveFinalValueInKeyframes(target[key]);\n setMotionValue(visualElement, key, value);\n }\n}\nfunction setVariants(visualElement, variantLabels) {\n var reversedLabels = __spreadArray([], __read(variantLabels), false).reverse();\n reversedLabels.forEach(function (key) {\n var _a;\n var variant = visualElement.getVariant(key);\n variant && setTarget(visualElement, variant);\n (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) {\n setVariants(child, variantLabels);\n });\n });\n}\nfunction setValues(visualElement, definition) {\n if (Array.isArray(definition)) {\n return setVariants(visualElement, definition);\n }\n else if (typeof definition === \"string\") {\n return setVariants(visualElement, [definition]);\n }\n else {\n setTarget(visualElement, definition);\n }\n}\nfunction checkTargetForNewValues(visualElement, target, origin) {\n var _a, _b, _c;\n var _d;\n var newValueKeys = Object.keys(target).filter(function (key) { return !visualElement.hasValue(key); });\n var numNewValues = newValueKeys.length;\n if (!numNewValues)\n return;\n for (var i = 0; i < numNewValues; i++) {\n var key = newValueKeys[i];\n var targetValue = target[key];\n var value = null;\n /**\n * If the target is a series of keyframes, we can use the first value\n * in the array. If this first value is null, we'll still need to read from the DOM.\n */\n if (Array.isArray(targetValue)) {\n value = targetValue[0];\n }\n /**\n * If the target isn't keyframes, or the first keyframe was null, we need to\n * first check if an origin value was explicitly defined in the transition as \"from\",\n * if not read the value from the DOM. As an absolute fallback, take the defined target value.\n */\n if (value === null) {\n value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key];\n }\n /**\n * If value is still undefined or null, ignore it. Preferably this would throw,\n * but this was causing issues in Framer.\n */\n if (value === undefined || value === null)\n continue;\n if (typeof value === \"string\" &&\n (isNumericalString(value) || isZeroValueString(value))) {\n // If this is a number read as a string, ie \"0\" or \"200\", convert it to a number\n value = parseFloat(value);\n }\n else if (!findValueType(value) && complex.test(targetValue)) {\n value = getAnimatableNone(key, targetValue);\n }\n visualElement.addValue(key, motionValue(value));\n (_c = (_d = origin)[key]) !== null && _c !== void 0 ? _c : (_d[key] = value);\n visualElement.setBaseTarget(key, value);\n }\n}\nfunction getOriginFromTransition(key, transition) {\n if (!transition)\n return;\n var valueTransition = transition[key] || transition[\"default\"] || transition;\n return valueTransition.from;\n}\nfunction getOrigin(target, transition, visualElement) {\n var _a, _b;\n var origin = {};\n for (var key in target) {\n origin[key] =\n (_a = getOriginFromTransition(key, transition)) !== null && _a !== void 0 ? _a : (_b = visualElement.getValue(key)) === null || _b === void 0 ? void 0 : _b.get();\n }\n return origin;\n}\n\nexport { checkTargetForNewValues, getOrigin, getOriginFromTransition, setTarget, setValues };\n","import { __read, __rest, __assign } from 'tslib';\nimport { startAnimation } from '../../animation/utils/transitions.mjs';\nimport { setTarget } from './setters.mjs';\nimport { resolveVariant } from './variants.mjs';\nimport { isTransformProp } from '../html/utils/transform.mjs';\n\nfunction animateVisualElement(visualElement, definition, options) {\n if (options === void 0) { options = {}; }\n visualElement.notifyAnimationStart(definition);\n var animation;\n if (Array.isArray(definition)) {\n var animations = definition.map(function (variant) {\n return animateVariant(visualElement, variant, options);\n });\n animation = Promise.all(animations);\n }\n else if (typeof definition === \"string\") {\n animation = animateVariant(visualElement, definition, options);\n }\n else {\n var resolvedDefinition = typeof definition === \"function\"\n ? resolveVariant(visualElement, definition, options.custom)\n : definition;\n animation = animateTarget(visualElement, resolvedDefinition, options);\n }\n return animation.then(function () {\n return visualElement.notifyAnimationComplete(definition);\n });\n}\nfunction animateVariant(visualElement, variant, options) {\n var _a;\n if (options === void 0) { options = {}; }\n var resolved = resolveVariant(visualElement, variant, options.custom);\n var _b = (resolved || {}).transition, transition = _b === void 0 ? visualElement.getDefaultTransition() || {} : _b;\n if (options.transitionOverride) {\n transition = options.transitionOverride;\n }\n /**\n * If we have a variant, create a callback that runs it as an animation.\n * Otherwise, we resolve a Promise immediately for a composable no-op.\n */\n var getAnimation = resolved\n ? function () { return animateTarget(visualElement, resolved, options); }\n : function () { return Promise.resolve(); };\n /**\n * If we have children, create a callback that runs all their animations.\n * Otherwise, we resolve a Promise immediately for a composable no-op.\n */\n var getChildAnimations = ((_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.size)\n ? function (forwardDelay) {\n if (forwardDelay === void 0) { forwardDelay = 0; }\n var _a = transition.delayChildren, delayChildren = _a === void 0 ? 0 : _a, staggerChildren = transition.staggerChildren, staggerDirection = transition.staggerDirection;\n return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);\n }\n : function () { return Promise.resolve(); };\n /**\n * If the transition explicitly defines a \"when\" option, we need to resolve either\n * this animation or all children animations before playing the other.\n */\n var when = transition.when;\n if (when) {\n var _c = __read(when === \"beforeChildren\"\n ? [getAnimation, getChildAnimations]\n : [getChildAnimations, getAnimation], 2), first = _c[0], last = _c[1];\n return first().then(last);\n }\n else {\n return Promise.all([getAnimation(), getChildAnimations(options.delay)]);\n }\n}\n/**\n * @internal\n */\nfunction animateTarget(visualElement, definition, _a) {\n var _b;\n var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type;\n var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = __rest(_e, [\"transition\", \"transitionEnd\"]);\n if (transitionOverride)\n transition = transitionOverride;\n var animations = [];\n var animationTypeState = type && ((_b = visualElement.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]);\n for (var key in target) {\n var value = visualElement.getValue(key);\n var valueTarget = target[key];\n if (!value ||\n valueTarget === undefined ||\n (animationTypeState &&\n shouldBlockAnimation(animationTypeState, key))) {\n continue;\n }\n var valueTransition = __assign({ delay: delay }, transition);\n /**\n * Make animation instant if this is a transform prop and we should reduce motion.\n */\n if (visualElement.shouldReduceMotion && isTransformProp(key)) {\n valueTransition = __assign(__assign({}, valueTransition), { type: false, delay: 0 });\n }\n var animation = startAnimation(key, value, valueTarget, valueTransition);\n animations.push(animation);\n }\n return Promise.all(animations).then(function () {\n transitionEnd && setTarget(visualElement, transitionEnd);\n });\n}\nfunction animateChildren(visualElement, variant, delayChildren, staggerChildren, staggerDirection, options) {\n if (delayChildren === void 0) { delayChildren = 0; }\n if (staggerChildren === void 0) { staggerChildren = 0; }\n if (staggerDirection === void 0) { staggerDirection = 1; }\n var animations = [];\n var maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;\n var generateStaggerDuration = staggerDirection === 1\n ? function (i) {\n if (i === void 0) { i = 0; }\n return i * staggerChildren;\n }\n : function (i) {\n if (i === void 0) { i = 0; }\n return maxStaggerDuration - i * staggerChildren;\n };\n Array.from(visualElement.variantChildren)\n .sort(sortByTreeOrder)\n .forEach(function (child, i) {\n animations.push(animateVariant(child, variant, __assign(__assign({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function () { return child.notifyAnimationComplete(variant); }));\n });\n return Promise.all(animations);\n}\nfunction stopAnimation(visualElement) {\n visualElement.forEachValue(function (value) { return value.stop(); });\n}\nfunction sortByTreeOrder(a, b) {\n return a.sortNodePosition(b);\n}\n/**\n * Decide whether we should block this animation. Previously, we achieved this\n * just by checking whether the key was listed in protectedKeys, but this\n * posed problems if an animation was triggered by afterChildren and protectedKeys\n * had been set to true in the meantime.\n */\nfunction shouldBlockAnimation(_a, key) {\n var protectedKeys = _a.protectedKeys, needsAnimating = _a.needsAnimating;\n var shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;\n needsAnimating[key] = false;\n return shouldBlock;\n}\n\nexport { animateVisualElement, sortByTreeOrder, stopAnimation };\n","import { __spreadArray, __read, __assign, __rest } from 'tslib';\nimport { 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 { animateVisualElement } from './animation.mjs';\nimport { AnimationType } from './types.mjs';\nimport { isVariantLabels, resolveVariant, isVariantLabel } from './variants.mjs';\n\nvar variantPriorityOrder = [\n AnimationType.Animate,\n AnimationType.InView,\n AnimationType.Focus,\n AnimationType.Hover,\n AnimationType.Tap,\n AnimationType.Drag,\n AnimationType.Exit,\n];\nvar reversePriorityOrder = __spreadArray([], __read(variantPriorityOrder), false).reverse();\nvar numAnimationTypes = variantPriorityOrder.length;\nfunction animateList(visualElement) {\n return function (animations) {\n return Promise.all(animations.map(function (_a) {\n var animation = _a.animation, options = _a.options;\n return animateVisualElement(visualElement, animation, options);\n }));\n };\n}\nfunction createAnimationState(visualElement) {\n var animate = animateList(visualElement);\n var state = createState();\n var allAnimatedKeys = {};\n var isInitialRender = true;\n /**\n * This function will be used to reduce the animation definitions for\n * each active animation type into an object of resolved values for it.\n */\n var buildResolvedTypeValues = function (acc, definition) {\n var resolved = resolveVariant(visualElement, definition);\n if (resolved) {\n resolved.transition; var transitionEnd = resolved.transitionEnd, target = __rest(resolved, [\"transition\", \"transitionEnd\"]);\n acc = __assign(__assign(__assign({}, acc), target), transitionEnd);\n }\n return acc;\n };\n function isAnimated(key) {\n return allAnimatedKeys[key] !== undefined;\n }\n /**\n * This just allows us to inject mocked animation functions\n * @internal\n */\n function setAnimateFunction(makeAnimator) {\n animate = makeAnimator(visualElement);\n }\n /**\n * When we receive new props, we need to:\n * 1. Create a list of protected keys for each type. This is a directory of\n * value keys that are currently being \"handled\" by types of a higher priority\n * so that whenever an animation is played of a given type, these values are\n * protected from being animated.\n * 2. Determine if an animation type needs animating.\n * 3. Determine if any values have been removed from a type and figure out\n * what to animate those to.\n */\n function animateChanges(options, changedActiveType) {\n var _a;\n var props = visualElement.getProps();\n var context = visualElement.getVariantContext(true) || {};\n /**\n * A list of animations that we'll build into as we iterate through the animation\n * types. This will get executed at the end of the function.\n */\n var animations = [];\n /**\n * Keep track of which values have been removed. Then, as we hit lower priority\n * animation types, we can check if they contain removed values and animate to that.\n */\n var removedKeys = new Set();\n /**\n * A dictionary of all encountered keys. This is an object to let us build into and\n * copy it without iteration. Each time we hit an animation type we set its protected\n * keys - the keys its not allowed to animate - to the latest version of this object.\n */\n var encounteredKeys = {};\n /**\n * If a variant has been removed at a given index, and this component is controlling\n * variant animations, we want to ensure lower-priority variants are forced to animate.\n */\n var removedVariantIndex = Infinity;\n var _loop_1 = function (i) {\n var type = reversePriorityOrder[i];\n var typeState = state[type];\n var prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type];\n var propIsVariant = isVariantLabel(prop);\n /**\n * If this type has *just* changed isActive status, set activeDelta\n * to that status. Otherwise set to null.\n */\n var activeDelta = type === changedActiveType ? typeState.isActive : null;\n if (activeDelta === false)\n removedVariantIndex = i;\n /**\n * If this prop is an inherited variant, rather than been set directly on the\n * component itself, we want to make sure we allow the parent to trigger animations.\n *\n * TODO: Can probably change this to a !isControllingVariants check\n */\n var isInherited = prop === context[type] && prop !== props[type] && propIsVariant;\n /**\n *\n */\n if (isInherited &&\n isInitialRender &&\n visualElement.manuallyAnimateOnMount) {\n isInherited = false;\n }\n /**\n * Set all encountered keys so far as the protected keys for this type. This will\n * be any key that has been animated or otherwise handled by active, higher-priortiy types.\n */\n typeState.protectedKeys = __assign({}, encounteredKeys);\n // Check if we can skip analysing this prop early\n if (\n // If it isn't active and hasn't *just* been set as inactive\n (!typeState.isActive && activeDelta === null) ||\n // If we didn't and don't have any defined prop for this animation type\n (!prop && !typeState.prevProp) ||\n // Or if the prop doesn't define an animation\n isAnimationControls(prop) ||\n typeof prop === \"boolean\") {\n return \"continue\";\n }\n /**\n * As we go look through the values defined on this type, if we detect\n * a changed value or a value that was removed in a higher priority, we set\n * this to true and add this prop to the animation list.\n */\n var variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);\n var shouldAnimateType = variantDidChange ||\n // If we're making this variant active, we want to always make it active\n (type === changedActiveType &&\n typeState.isActive &&\n !isInherited &&\n propIsVariant) ||\n // If we removed a higher-priority variant (i is in reverse order)\n (i > removedVariantIndex && propIsVariant);\n /**\n * As animations can be set as variant lists, variants or target objects, we\n * coerce everything to an array if it isn't one already\n */\n var definitionList = Array.isArray(prop) ? prop : [prop];\n /**\n * Build an object of all the resolved values. We'll use this in the subsequent\n * animateChanges calls to determine whether a value has changed.\n */\n var resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});\n if (activeDelta === false)\n resolvedValues = {};\n /**\n * Now we need to loop through all the keys in the prev prop and this prop,\n * and decide:\n * 1. If the value has changed, and needs animating\n * 2. If it has been removed, and needs adding to the removedKeys set\n * 3. If it has been removed in a higher priority type and needs animating\n * 4. If it hasn't been removed in a higher priority but hasn't changed, and\n * needs adding to the type's protectedKeys list.\n */\n var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;\n var allKeys = __assign(__assign({}, prevResolvedValues), resolvedValues);\n var markToAnimate = function (key) {\n shouldAnimateType = true;\n removedKeys.delete(key);\n typeState.needsAnimating[key] = true;\n };\n for (var key in allKeys) {\n var next = resolvedValues[key];\n var prev = prevResolvedValues[key];\n // If we've already handled this we can just skip ahead\n if (encounteredKeys.hasOwnProperty(key))\n continue;\n /**\n * If the value has changed, we probably want to animate it.\n */\n if (next !== prev) {\n /**\n * If both values are keyframes, we need to shallow compare them to\n * detect whether any value has changed. If it has, we animate it.\n */\n if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {\n if (!shallowCompare(next, prev) || variantDidChange) {\n markToAnimate(key);\n }\n else {\n /**\n * If it hasn't changed, we want to ensure it doesn't animate by\n * adding it to the list of protected keys.\n */\n typeState.protectedKeys[key] = true;\n }\n }\n else if (next !== undefined) {\n // If next is defined and doesn't equal prev, it needs animating\n markToAnimate(key);\n }\n else {\n // If it's undefined, it's been removed.\n removedKeys.add(key);\n }\n }\n else if (next !== undefined && removedKeys.has(key)) {\n /**\n * If next hasn't changed and it isn't undefined, we want to check if it's\n * been removed by a higher priority\n */\n markToAnimate(key);\n }\n else {\n /**\n * If it hasn't changed, we add it to the list of protected values\n * to ensure it doesn't get animated.\n */\n typeState.protectedKeys[key] = true;\n }\n }\n /**\n * Update the typeState so next time animateChanges is called we can compare the\n * latest prop and resolvedValues to these.\n */\n typeState.prevProp = prop;\n typeState.prevResolvedValues = resolvedValues;\n /**\n *\n */\n if (typeState.isActive) {\n encounteredKeys = __assign(__assign({}, encounteredKeys), resolvedValues);\n }\n if (isInitialRender && visualElement.blockInitialAnimation) {\n shouldAnimateType = false;\n }\n /**\n * If this is an inherited prop we want to hard-block animations\n * TODO: Test as this should probably still handle animations triggered\n * by removed values?\n */\n if (shouldAnimateType && !isInherited) {\n animations.push.apply(animations, __spreadArray([], __read(definitionList.map(function (animation) { return ({\n animation: animation,\n options: __assign({ type: type }, options),\n }); })), false));\n }\n };\n /**\n * Iterate through all animation types in reverse priority order. For each, we want to\n * detect which values it's handling and whether or not they've changed (and therefore\n * need to be animated). If any values have been removed, we want to detect those in\n * lower priority props and flag for animation.\n */\n for (var i = 0; i < numAnimationTypes; i++) {\n _loop_1(i);\n }\n allAnimatedKeys = __assign({}, encounteredKeys);\n /**\n * If there are some removed value that haven't been dealt with,\n * we need to create a new animation that falls back either to the value\n * defined in the style prop, or the last read value.\n */\n if (removedKeys.size) {\n var fallbackAnimation_1 = {};\n removedKeys.forEach(function (key) {\n var fallbackTarget = visualElement.getBaseTarget(key);\n if (fallbackTarget !== undefined) {\n fallbackAnimation_1[key] = fallbackTarget;\n }\n });\n animations.push({ animation: fallbackAnimation_1 });\n }\n var shouldAnimate = Boolean(animations.length);\n if (isInitialRender &&\n props.initial === false &&\n !visualElement.manuallyAnimateOnMount) {\n shouldAnimate = false;\n }\n isInitialRender = false;\n return shouldAnimate ? animate(animations) : Promise.resolve();\n }\n /**\n * Change whether a certain animation type is active.\n */\n function setActive(type, isActive, options) {\n var _a;\n // If the active state hasn't changed, we can safely do nothing here\n if (state[type].isActive === isActive)\n return Promise.resolve();\n // Propagate active change to children\n (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });\n state[type].isActive = isActive;\n var animations = animateChanges(options, type);\n for (var key in state) {\n state[key].protectedKeys = {};\n }\n return animations;\n }\n return {\n isAnimated: isAnimated,\n animateChanges: animateChanges,\n setActive: setActive,\n setAnimateFunction: setAnimateFunction,\n getState: function () { return state; },\n };\n}\nfunction checkVariantsDidChange(prev, next) {\n if (typeof next === \"string\") {\n return next !== prev;\n }\n else if (isVariantLabels(next)) {\n return !shallowCompare(next, prev);\n }\n return false;\n}\nfunction createTypeState(isActive) {\n if (isActive === void 0) { isActive = false; }\n return {\n isActive: isActive,\n protectedKeys: {},\n needsAnimating: {},\n prevResolvedValues: {},\n };\n}\nfunction createState() {\n var _a;\n return _a = {},\n _a[AnimationType.Animate] = createTypeState(true),\n _a[AnimationType.InView] = createTypeState(),\n _a[AnimationType.Hover] = createTypeState(),\n _a[AnimationType.Tap] = createTypeState(),\n _a[AnimationType.Drag] = createTypeState(),\n _a[AnimationType.Focus] = createTypeState(),\n _a[AnimationType.Exit] = createTypeState(),\n _a;\n}\n\nexport { checkVariantsDidChange, createAnimationState, variantPriorityOrder };\n","import { __read } from 'tslib';\nimport { useEffect, useContext } from 'react';\nimport { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { usePresence } from '../../components/AnimatePresence/use-presence.mjs';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { createAnimationState } from '../../render/utils/animation-state.mjs';\nimport { AnimationType } from '../../render/utils/types.mjs';\nimport { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';\n\nvar animations = {\n animation: makeRenderlessComponent(function (_a) {\n var visualElement = _a.visualElement, animate = _a.animate;\n /**\n * We dynamically generate the AnimationState manager as it contains a reference\n * to the underlying animation library. We only want to load that if we load this,\n * so people can optionally code split it out using the `m` component.\n */\n visualElement.animationState || (visualElement.animationState = createAnimationState(visualElement));\n /**\n * Subscribe any provided AnimationControls to the component's VisualElement\n */\n if (isAnimationControls(animate)) {\n useEffect(function () { return animate.subscribe(visualElement); }, [animate]);\n }\n }),\n exit: makeRenderlessComponent(function (props) {\n var custom = props.custom, visualElement = props.visualElement;\n var _a = __read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];\n var presenceContext = useContext(PresenceContext);\n useEffect(function () {\n var _a, _b;\n visualElement.isPresent = isPresent;\n var animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom });\n !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(safeToRemove));\n }, [isPresent]);\n }),\n};\n\nexport { animations };\n","const isPoint = (point) => point.hasOwnProperty('x') && point.hasOwnProperty('y');\n\nexport { isPoint };\n","import { isPoint } from './is-point.mjs';\n\nconst isPoint3D = (point) => isPoint(point) && point.hasOwnProperty('z');\n\nexport { isPoint3D };\n","import { isPoint } from './is-point.mjs';\nimport { isPoint3D } from './is-point-3d.mjs';\nimport { isNum } from './inc.mjs';\n\nconst distance1D = (a, b) => Math.abs(a - b);\nfunction distance(a, b) {\n if (isNum(a) && isNum(b)) {\n return distance1D(a, b);\n }\n else if (isPoint(a) && isPoint(b)) {\n const xDelta = distance1D(a.x, b.x);\n const yDelta = distance1D(a.y, b.y);\n const zDelta = isPoint3D(a) && isPoint3D(b) ? distance1D(a.z, b.z) : 0;\n return Math.sqrt(Math.pow(xDelta, 2) + Math.pow(yDelta, 2) + Math.pow(zDelta, 2));\n }\n}\n\nexport { distance };\n","import { __assign } from 'tslib';\nimport { isMouseEvent, isTouchEvent } from './utils/event-type.mjs';\nimport { extractEventInfo } from '../events/event-info.mjs';\nimport sync, { getFrameData, cancelSync } from 'framesync';\nimport { secondsToMilliseconds } from '../utils/time-conversion.mjs';\nimport { addPointerEvent } from '../events/use-pointer-event.mjs';\nimport { distance, pipe } from 'popmotion';\n\n/**\n * @internal\n */\nvar PanSession = /** @class */ (function () {\n function PanSession(event, handlers, _a) {\n var _this = this;\n var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint;\n /**\n * @internal\n */\n this.startEvent = null;\n /**\n * @internal\n */\n this.lastMoveEvent = null;\n /**\n * @internal\n */\n this.lastMoveEventInfo = null;\n /**\n * @internal\n */\n this.handlers = {};\n this.updatePoint = function () {\n if (!(_this.lastMoveEvent && _this.lastMoveEventInfo))\n return;\n var info = getPanInfo(_this.lastMoveEventInfo, _this.history);\n var isPanStarted = _this.startEvent !== null;\n // Only start panning if the offset is larger than 3 pixels. If we make it\n // any larger than this we'll want to reset the pointer history\n // on the first update to avoid visual snapping to the cursoe.\n var isDistancePastThreshold = distance(info.offset, { x: 0, y: 0 }) >= 3;\n if (!isPanStarted && !isDistancePastThreshold)\n return;\n var point = info.point;\n var timestamp = getFrameData().timestamp;\n _this.history.push(__assign(__assign({}, point), { timestamp: timestamp }));\n var _a = _this.handlers, onStart = _a.onStart, onMove = _a.onMove;\n if (!isPanStarted) {\n onStart && onStart(_this.lastMoveEvent, info);\n _this.startEvent = _this.lastMoveEvent;\n }\n onMove && onMove(_this.lastMoveEvent, info);\n };\n this.handlePointerMove = function (event, info) {\n _this.lastMoveEvent = event;\n _this.lastMoveEventInfo = transformPoint(info, _this.transformPagePoint);\n // Because Safari doesn't trigger mouseup events when it's above a `