\n \n \n \n \n Financiamiento\n \n \n ¿Qué ofrecemos a nuestros solicitantes?\n \n \n \n \n \n
\n )\n}\n","import React from \"react\"\nimport PropTypes from \"prop-types\"\nimport { Typography, Box } from \"@material-ui/core\"\nconst DisplayChild = ({ func, text }) => {\n return (\n Missing numeric value
,\n text: \"No value provided\"\n}\n\nDisplayChild.propTypes = {\n func: PropTypes.object.isRequired,\n text: PropTypes.string.isRequired\n}\n\nexport default DisplayChild\n","import React from \"react\"\nimport { Typography, Box } from \"@material-ui/core\"\nimport DisplayChild from \"./DisplayChild\"\n\nfunction Display({ name, interest, amount, years }) {\n const formatter = new Intl.NumberFormat(\"es-MX\", {\n style: \"currency\",\n currency: \"MXN\",\n minimumFractionDigits: 0,\n })\n\n const calculateMonthlyRepayment = () => {\n const potencial = [\"UNO\", \"MERCADO\"].includes(name) ? 365 : 1\n const monthlyRepayment =\n amount * (1 + interest / 100 / 365) ** (years * potencial)\n return (\n\n \n \n \n \n \n ¿Te gustaría conocer más?\n \n \n Un profesional de CFL estará encantado de responder cualquier\n pregunta que pueda tener sobre nuestras ofertas y productos.\n \n \n \n \n \n Los primeros pasos son
\n los más importantes\n \n \n \n \n Regístrate como inversor\n \n \n \n \n \n \n El resultado de \"Calcula tu inversión\", es un estimado que se\n basa exclusivamente en la información que incorporaste en el\n formulario. Tu capital está en riesgo y no está protegido por\n ningún esquema de compensación gubernamental de servicios\n financieros.\n \n \n \n \n \n \n
\n )\n}\n","import _toConsumableArray from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\";\nvar updateQueue = makeQueue();\n\nvar raf = function raf(fn) {\n return schedule(fn, updateQueue);\n};\n\nvar writeQueue = makeQueue();\n\nraf.write = function (fn) {\n return schedule(fn, writeQueue);\n};\n\nvar onStartQueue = makeQueue();\n\nraf.onStart = function (fn) {\n return schedule(fn, onStartQueue);\n};\n\nvar onFrameQueue = makeQueue();\n\nraf.onFrame = function (fn) {\n return schedule(fn, onFrameQueue);\n};\n\nvar onFinishQueue = makeQueue();\n\nraf.onFinish = function (fn) {\n return schedule(fn, onFinishQueue);\n};\n\nvar timeouts = [];\n\nraf.setTimeout = function (handler, ms) {\n var time = raf.now() + ms;\n\n var cancel = function cancel() {\n var i = timeouts.findIndex(function (t) {\n return t.cancel == cancel;\n });\n if (~i) timeouts.splice(i, 1);\n pendingCount -= ~i ? 1 : 0;\n };\n\n var timeout = {\n time: time,\n handler: handler,\n cancel: cancel\n };\n timeouts.splice(findTimeout(time), 0, timeout);\n pendingCount += 1;\n start();\n return timeout;\n};\n\nvar findTimeout = function findTimeout(time) {\n return ~(~timeouts.findIndex(function (t) {\n return t.time > time;\n }) || ~timeouts.length);\n};\n\nraf.cancel = function (fn) {\n onStartQueue.delete(fn);\n onFrameQueue.delete(fn);\n updateQueue.delete(fn);\n writeQueue.delete(fn);\n onFinishQueue.delete(fn);\n};\n\nraf.sync = function (fn) {\n sync = true;\n raf.batchedUpdates(fn);\n sync = false;\n};\n\nraf.throttle = function (fn) {\n var lastArgs;\n\n function queuedFn() {\n try {\n fn.apply(void 0, _toConsumableArray(lastArgs));\n } finally {\n lastArgs = null;\n }\n }\n\n function throttled() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n lastArgs = args;\n raf.onStart(queuedFn);\n }\n\n throttled.handler = fn;\n\n throttled.cancel = function () {\n onStartQueue.delete(queuedFn);\n lastArgs = null;\n };\n\n return throttled;\n};\n\nvar nativeRaf = typeof window != 'undefined' ? window.requestAnimationFrame : function () {};\n\nraf.use = function (impl) {\n return nativeRaf = impl;\n};\n\nraf.now = typeof performance != 'undefined' ? function () {\n return performance.now();\n} : Date.now;\n\nraf.batchedUpdates = function (fn) {\n return fn();\n};\n\nraf.catch = console.error;\nraf.frameLoop = 'always';\n\nraf.advance = function () {\n if (raf.frameLoop !== 'demand') {\n console.warn('Cannot call the manual advancement of rafz whilst frameLoop is not set as demand');\n } else {\n update();\n }\n};\n\nvar ts = -1;\nvar pendingCount = 0;\nvar sync = false;\n\nfunction schedule(fn, queue) {\n if (sync) {\n queue.delete(fn);\n fn(0);\n } else {\n queue.add(fn);\n start();\n }\n}\n\nfunction start() {\n if (ts < 0) {\n ts = 0;\n\n if (raf.frameLoop !== 'demand') {\n nativeRaf(loop);\n }\n }\n}\n\nfunction stop() {\n ts = -1;\n}\n\nfunction loop() {\n if (~ts) {\n nativeRaf(loop);\n raf.batchedUpdates(update);\n }\n}\n\nfunction update() {\n var prevTs = ts;\n ts = raf.now();\n var count = findTimeout(ts);\n\n if (count) {\n eachSafely(timeouts.splice(0, count), function (t) {\n return t.handler();\n });\n pendingCount -= count;\n }\n\n onStartQueue.flush();\n updateQueue.flush(prevTs ? Math.min(64, ts - prevTs) : 16.667);\n onFrameQueue.flush();\n writeQueue.flush();\n onFinishQueue.flush();\n\n if (!pendingCount) {\n stop();\n }\n}\n\nfunction makeQueue() {\n var next = new Set();\n var current = next;\n return {\n add: function add(fn) {\n pendingCount += current == next && !next.has(fn) ? 1 : 0;\n next.add(fn);\n },\n delete: function _delete(fn) {\n pendingCount -= current == next && next.has(fn) ? 1 : 0;\n return next.delete(fn);\n },\n flush: function flush(arg) {\n if (current.size) {\n next = new Set();\n pendingCount -= current.size;\n eachSafely(current, function (fn) {\n return fn(arg) && next.add(fn);\n });\n pendingCount += next.size;\n current = next;\n }\n }\n };\n}\n\nfunction eachSafely(values, each) {\n values.forEach(function (value) {\n try {\n each(value);\n } catch (e) {\n raf.catch(e);\n }\n });\n}\n\nvar __raf = {\n count: function count() {\n return pendingCount;\n },\n isRunning: function isRunning() {\n return ts >= 0;\n },\n clear: function clear() {\n ts = -1;\n timeouts = [];\n onStartQueue = makeQueue();\n updateQueue = makeQueue();\n onFrameQueue = makeQueue();\n writeQueue = makeQueue();\n onFinishQueue = makeQueue();\n pendingCount = 0;\n }\n};\nexport { __raf, raf };","import _slicedToArray from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";\nimport _createClass from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/createClass.js\";\nimport _classCallCheck from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/classCallCheck.js\";\nimport { raf } from '@react-spring/rafz';\nexport { raf } from '@react-spring/rafz';\nimport * as React from 'react';\nimport { useEffect, useState, useRef } from 'react';\n\nfunction noop() {}\n\nvar defineHidden = function defineHidden(obj, key, value) {\n return Object.defineProperty(obj, key, {\n value: value,\n writable: true,\n configurable: true\n });\n};\n\nvar is = {\n arr: Array.isArray,\n obj: function obj(a) {\n return !!a && a.constructor.name === 'Object';\n },\n fun: function fun(a) {\n return typeof a === 'function';\n },\n str: function str(a) {\n return typeof a === 'string';\n },\n num: function num(a) {\n return typeof a === 'number';\n },\n und: function und(a) {\n return a === undefined;\n }\n};\n\nfunction isEqual(a, b) {\n if (is.arr(a)) {\n if (!is.arr(b) || a.length !== b.length) return false;\n\n for (var i = 0; i < a.length; i++) {\n if (a[i] !== b[i]) return false;\n }\n\n return true;\n }\n\n return a === b;\n}\n\nvar each = function each(obj, fn) {\n return obj.forEach(fn);\n};\n\nfunction eachProp(obj, fn, ctx) {\n if (is.arr(obj)) {\n for (var i = 0; i < obj.length; i++) {\n fn.call(ctx, obj[i], \"\".concat(i));\n }\n\n return;\n }\n\n for (var key in obj) {\n if (obj.hasOwnProperty(key)) {\n fn.call(ctx, obj[key], key);\n }\n }\n}\n\nvar toArray = function toArray(a) {\n return is.und(a) ? [] : is.arr(a) ? a : [a];\n};\n\nfunction flush(queue, iterator) {\n if (queue.size) {\n var items = Array.from(queue);\n queue.clear();\n each(items, iterator);\n }\n}\n\nvar flushCalls = function flushCalls(queue) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return flush(queue, function (fn) {\n return fn.apply(void 0, args);\n });\n};\n\nvar isSSR = function isSSR() {\n return typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\\//.test(window.navigator.userAgent);\n};\n\nvar createStringInterpolator$1;\nvar to;\nvar colors$1 = null;\nvar skipAnimation = false;\nvar willAdvance = noop;\n\nvar assign = function assign(globals) {\n if (globals.to) to = globals.to;\n if (globals.now) raf.now = globals.now;\n if (globals.colors !== undefined) colors$1 = globals.colors;\n if (globals.skipAnimation != null) skipAnimation = globals.skipAnimation;\n if (globals.createStringInterpolator) createStringInterpolator$1 = globals.createStringInterpolator;\n if (globals.requestAnimationFrame) raf.use(globals.requestAnimationFrame);\n if (globals.batchedUpdates) raf.batchedUpdates = globals.batchedUpdates;\n if (globals.willAdvance) willAdvance = globals.willAdvance;\n if (globals.frameLoop) raf.frameLoop = globals.frameLoop;\n};\n\nvar globals = /*#__PURE__*/Object.freeze({\n __proto__: null,\n\n get createStringInterpolator() {\n return createStringInterpolator$1;\n },\n\n get to() {\n return to;\n },\n\n get colors() {\n return colors$1;\n },\n\n get skipAnimation() {\n return skipAnimation;\n },\n\n get willAdvance() {\n return willAdvance;\n },\n\n assign: assign\n});\nvar startQueue = new Set();\nvar currentFrame = [];\nvar prevFrame = [];\nvar priority = 0;\nvar frameLoop = {\n get idle() {\n return !startQueue.size && !currentFrame.length;\n },\n\n start: function start(animation) {\n if (priority > animation.priority) {\n startQueue.add(animation);\n raf.onStart(flushStartQueue);\n } else {\n startSafely(animation);\n raf(advance);\n }\n },\n advance: advance,\n sort: function sort(animation) {\n if (priority) {\n raf.onFrame(function () {\n return frameLoop.sort(animation);\n });\n } else {\n var prevIndex = currentFrame.indexOf(animation);\n\n if (~prevIndex) {\n currentFrame.splice(prevIndex, 1);\n startUnsafely(animation);\n }\n }\n },\n clear: function clear() {\n currentFrame = [];\n startQueue.clear();\n }\n};\n\nfunction flushStartQueue() {\n startQueue.forEach(startSafely);\n startQueue.clear();\n raf(advance);\n}\n\nfunction startSafely(animation) {\n if (!currentFrame.includes(animation)) startUnsafely(animation);\n}\n\nfunction startUnsafely(animation) {\n currentFrame.splice(findIndex(currentFrame, function (other) {\n return other.priority > animation.priority;\n }), 0, animation);\n}\n\nfunction advance(dt) {\n var nextFrame = prevFrame;\n\n for (var i = 0; i < currentFrame.length; i++) {\n var animation = currentFrame[i];\n priority = animation.priority;\n\n if (!animation.idle) {\n willAdvance(animation);\n animation.advance(dt);\n\n if (!animation.idle) {\n nextFrame.push(animation);\n }\n }\n }\n\n priority = 0;\n prevFrame = currentFrame;\n prevFrame.length = 0;\n currentFrame = nextFrame;\n return currentFrame.length > 0;\n}\n\nfunction findIndex(arr, test) {\n var index = arr.findIndex(test);\n return index < 0 ? arr.length : index;\n}\n\nvar colors = {\n transparent: 0x00000000,\n aliceblue: 0xf0f8ffff,\n antiquewhite: 0xfaebd7ff,\n aqua: 0x00ffffff,\n aquamarine: 0x7fffd4ff,\n azure: 0xf0ffffff,\n beige: 0xf5f5dcff,\n bisque: 0xffe4c4ff,\n black: 0x000000ff,\n blanchedalmond: 0xffebcdff,\n blue: 0x0000ffff,\n blueviolet: 0x8a2be2ff,\n brown: 0xa52a2aff,\n burlywood: 0xdeb887ff,\n burntsienna: 0xea7e5dff,\n cadetblue: 0x5f9ea0ff,\n chartreuse: 0x7fff00ff,\n chocolate: 0xd2691eff,\n coral: 0xff7f50ff,\n cornflowerblue: 0x6495edff,\n cornsilk: 0xfff8dcff,\n crimson: 0xdc143cff,\n cyan: 0x00ffffff,\n darkblue: 0x00008bff,\n darkcyan: 0x008b8bff,\n darkgoldenrod: 0xb8860bff,\n darkgray: 0xa9a9a9ff,\n darkgreen: 0x006400ff,\n darkgrey: 0xa9a9a9ff,\n darkkhaki: 0xbdb76bff,\n darkmagenta: 0x8b008bff,\n darkolivegreen: 0x556b2fff,\n darkorange: 0xff8c00ff,\n darkorchid: 0x9932ccff,\n darkred: 0x8b0000ff,\n darksalmon: 0xe9967aff,\n darkseagreen: 0x8fbc8fff,\n darkslateblue: 0x483d8bff,\n darkslategray: 0x2f4f4fff,\n darkslategrey: 0x2f4f4fff,\n darkturquoise: 0x00ced1ff,\n darkviolet: 0x9400d3ff,\n deeppink: 0xff1493ff,\n deepskyblue: 0x00bfffff,\n dimgray: 0x696969ff,\n dimgrey: 0x696969ff,\n dodgerblue: 0x1e90ffff,\n firebrick: 0xb22222ff,\n floralwhite: 0xfffaf0ff,\n forestgreen: 0x228b22ff,\n fuchsia: 0xff00ffff,\n gainsboro: 0xdcdcdcff,\n ghostwhite: 0xf8f8ffff,\n gold: 0xffd700ff,\n goldenrod: 0xdaa520ff,\n gray: 0x808080ff,\n green: 0x008000ff,\n greenyellow: 0xadff2fff,\n grey: 0x808080ff,\n honeydew: 0xf0fff0ff,\n hotpink: 0xff69b4ff,\n indianred: 0xcd5c5cff,\n indigo: 0x4b0082ff,\n ivory: 0xfffff0ff,\n khaki: 0xf0e68cff,\n lavender: 0xe6e6faff,\n lavenderblush: 0xfff0f5ff,\n lawngreen: 0x7cfc00ff,\n lemonchiffon: 0xfffacdff,\n lightblue: 0xadd8e6ff,\n lightcoral: 0xf08080ff,\n lightcyan: 0xe0ffffff,\n lightgoldenrodyellow: 0xfafad2ff,\n lightgray: 0xd3d3d3ff,\n lightgreen: 0x90ee90ff,\n lightgrey: 0xd3d3d3ff,\n lightpink: 0xffb6c1ff,\n lightsalmon: 0xffa07aff,\n lightseagreen: 0x20b2aaff,\n lightskyblue: 0x87cefaff,\n lightslategray: 0x778899ff,\n lightslategrey: 0x778899ff,\n lightsteelblue: 0xb0c4deff,\n lightyellow: 0xffffe0ff,\n lime: 0x00ff00ff,\n limegreen: 0x32cd32ff,\n linen: 0xfaf0e6ff,\n magenta: 0xff00ffff,\n maroon: 0x800000ff,\n mediumaquamarine: 0x66cdaaff,\n mediumblue: 0x0000cdff,\n mediumorchid: 0xba55d3ff,\n mediumpurple: 0x9370dbff,\n mediumseagreen: 0x3cb371ff,\n mediumslateblue: 0x7b68eeff,\n mediumspringgreen: 0x00fa9aff,\n mediumturquoise: 0x48d1ccff,\n mediumvioletred: 0xc71585ff,\n midnightblue: 0x191970ff,\n mintcream: 0xf5fffaff,\n mistyrose: 0xffe4e1ff,\n moccasin: 0xffe4b5ff,\n navajowhite: 0xffdeadff,\n navy: 0x000080ff,\n oldlace: 0xfdf5e6ff,\n olive: 0x808000ff,\n olivedrab: 0x6b8e23ff,\n orange: 0xffa500ff,\n orangered: 0xff4500ff,\n orchid: 0xda70d6ff,\n palegoldenrod: 0xeee8aaff,\n palegreen: 0x98fb98ff,\n paleturquoise: 0xafeeeeff,\n palevioletred: 0xdb7093ff,\n papayawhip: 0xffefd5ff,\n peachpuff: 0xffdab9ff,\n peru: 0xcd853fff,\n pink: 0xffc0cbff,\n plum: 0xdda0ddff,\n powderblue: 0xb0e0e6ff,\n purple: 0x800080ff,\n rebeccapurple: 0x663399ff,\n red: 0xff0000ff,\n rosybrown: 0xbc8f8fff,\n royalblue: 0x4169e1ff,\n saddlebrown: 0x8b4513ff,\n salmon: 0xfa8072ff,\n sandybrown: 0xf4a460ff,\n seagreen: 0x2e8b57ff,\n seashell: 0xfff5eeff,\n sienna: 0xa0522dff,\n silver: 0xc0c0c0ff,\n skyblue: 0x87ceebff,\n slateblue: 0x6a5acdff,\n slategray: 0x708090ff,\n slategrey: 0x708090ff,\n snow: 0xfffafaff,\n springgreen: 0x00ff7fff,\n steelblue: 0x4682b4ff,\n tan: 0xd2b48cff,\n teal: 0x008080ff,\n thistle: 0xd8bfd8ff,\n tomato: 0xff6347ff,\n turquoise: 0x40e0d0ff,\n violet: 0xee82eeff,\n wheat: 0xf5deb3ff,\n white: 0xffffffff,\n whitesmoke: 0xf5f5f5ff,\n yellow: 0xffff00ff,\n yellowgreen: 0x9acd32ff\n};\nvar NUMBER = '[-+]?\\\\d*\\\\.?\\\\d+';\nvar PERCENTAGE = NUMBER + '%';\n\nfunction call() {\n for (var _len2 = arguments.length, parts = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n parts[_key2] = arguments[_key2];\n }\n\n return '\\\\(\\\\s*(' + parts.join(')\\\\s*,\\\\s*(') + ')\\\\s*\\\\)';\n}\n\nvar rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));\nvar rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));\nvar hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));\nvar hsla = new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));\nvar hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;\nvar hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;\nvar hex6 = /^#([0-9a-fA-F]{6})$/;\nvar hex8 = /^#([0-9a-fA-F]{8})$/;\n\nfunction normalizeColor(color) {\n var match;\n\n if (typeof color === 'number') {\n return color >>> 0 === color && color >= 0 && color <= 0xffffffff ? color : null;\n }\n\n if (match = hex6.exec(color)) return parseInt(match[1] + 'ff', 16) >>> 0;\n\n if (colors$1 && colors$1[color] !== undefined) {\n return colors$1[color];\n }\n\n if (match = rgb.exec(color)) {\n return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 0x000000ff) >>> 0;\n }\n\n if (match = rgba.exec(color)) {\n return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;\n }\n\n if (match = hex3.exec(color)) {\n return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + 'ff', 16) >>> 0;\n }\n\n if (match = hex8.exec(color)) return parseInt(match[1], 16) >>> 0;\n\n if (match = hex4.exec(color)) {\n return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;\n }\n\n if (match = hsl.exec(color)) {\n return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 0x000000ff) >>> 0;\n }\n\n if (match = hsla.exec(color)) {\n return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;\n }\n\n return null;\n}\n\nfunction hue2rgb(p, q, t) {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1 / 6) return p + (q - p) * 6 * t;\n if (t < 1 / 2) return q;\n if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n return p;\n}\n\nfunction hslToRgb(h, s, l) {\n var q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n var p = 2 * l - q;\n var r = hue2rgb(p, q, h + 1 / 3);\n var g = hue2rgb(p, q, h);\n var b = hue2rgb(p, q, h - 1 / 3);\n return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;\n}\n\nfunction parse255(str) {\n var int = parseInt(str, 10);\n if (int < 0) return 0;\n if (int > 255) return 255;\n return int;\n}\n\nfunction parse360(str) {\n var int = parseFloat(str);\n return (int % 360 + 360) % 360 / 360;\n}\n\nfunction parse1(str) {\n var num = parseFloat(str);\n if (num < 0) return 0;\n if (num > 1) return 255;\n return Math.round(num * 255);\n}\n\nfunction parsePercentage(str) {\n var int = parseFloat(str);\n if (int < 0) return 0;\n if (int > 100) return 1;\n return int / 100;\n}\n\nfunction colorToRgba(input) {\n var int32Color = normalizeColor(input);\n if (int32Color === null) return input;\n int32Color = int32Color || 0;\n var r = (int32Color & 0xff000000) >>> 24;\n var g = (int32Color & 0x00ff0000) >>> 16;\n var b = (int32Color & 0x0000ff00) >>> 8;\n var a = (int32Color & 0x000000ff) / 255;\n return \"rgba(\".concat(r, \", \").concat(g, \", \").concat(b, \", \").concat(a, \")\");\n}\n\nvar createInterpolator = function createInterpolator(range, output, extrapolate) {\n if (is.fun(range)) {\n return range;\n }\n\n if (is.arr(range)) {\n return createInterpolator({\n range: range,\n output: output,\n extrapolate: extrapolate\n });\n }\n\n if (is.str(range.output[0])) {\n return createStringInterpolator$1(range);\n }\n\n var config = range;\n var outputRange = config.output;\n var inputRange = config.range || [0, 1];\n var extrapolateLeft = config.extrapolateLeft || config.extrapolate || 'extend';\n var extrapolateRight = config.extrapolateRight || config.extrapolate || 'extend';\n\n var easing = config.easing || function (t) {\n return t;\n };\n\n return function (input) {\n var range = findRange(input, inputRange);\n return interpolate(input, inputRange[range], inputRange[range + 1], outputRange[range], outputRange[range + 1], easing, extrapolateLeft, extrapolateRight, config.map);\n };\n};\n\nfunction interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {\n var result = map ? map(input) : input;\n\n if (result < inputMin) {\n if (extrapolateLeft === 'identity') return result;else if (extrapolateLeft === 'clamp') result = inputMin;\n }\n\n if (result > inputMax) {\n if (extrapolateRight === 'identity') return result;else if (extrapolateRight === 'clamp') result = inputMax;\n }\n\n if (outputMin === outputMax) return outputMin;\n if (inputMin === inputMax) return input <= inputMin ? outputMin : outputMax;\n if (inputMin === -Infinity) result = -result;else if (inputMax === Infinity) result = result - inputMin;else result = (result - inputMin) / (inputMax - inputMin);\n result = easing(result);\n if (outputMin === -Infinity) result = -result;else if (outputMax === Infinity) result = result + outputMin;else result = result * (outputMax - outputMin) + outputMin;\n return result;\n}\n\nfunction findRange(input, inputRange) {\n for (var i = 1; i < inputRange.length - 1; ++i) {\n if (inputRange[i] >= input) break;\n }\n\n return i - 1;\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nvar $get = Symbol.for('FluidValue.get');\nvar $observers = Symbol.for('FluidValue.observers');\n\nvar hasFluidValue = function hasFluidValue(arg) {\n return Boolean(arg && arg[$get]);\n};\n\nvar getFluidValue = function getFluidValue(arg) {\n return arg && arg[$get] ? arg[$get]() : arg;\n};\n\nvar getFluidObservers = function getFluidObservers(target) {\n return target[$observers] || null;\n};\n\nfunction callFluidObserver(observer, event) {\n if (observer.eventObserved) {\n observer.eventObserved(event);\n } else {\n observer(event);\n }\n}\n\nfunction callFluidObservers(target, event) {\n var observers = target[$observers];\n\n if (observers) {\n observers.forEach(function (observer) {\n callFluidObserver(observer, event);\n });\n }\n}\n\nvar FluidValue = /*#__PURE__*/_createClass(function FluidValue(get) {\n _classCallCheck(this, FluidValue);\n\n this[$get] = void 0;\n this[$observers] = void 0;\n\n if (!get && !(get = this.get)) {\n throw Error('Unknown getter');\n }\n\n setFluidGetter(this, get);\n});\n\nvar setFluidGetter = function setFluidGetter(target, get) {\n return setHidden(target, $get, get);\n};\n\nfunction addFluidObserver(target, observer) {\n if (target[$get]) {\n var observers = target[$observers];\n\n if (!observers) {\n setHidden(target, $observers, observers = new Set());\n }\n\n if (!observers.has(observer)) {\n observers.add(observer);\n\n if (target.observerAdded) {\n target.observerAdded(observers.size, observer);\n }\n }\n }\n\n return observer;\n}\n\nfunction removeFluidObserver(target, observer) {\n var observers = target[$observers];\n\n if (observers && observers.has(observer)) {\n var count = observers.size - 1;\n\n if (count) {\n observers.delete(observer);\n } else {\n target[$observers] = null;\n }\n\n if (target.observerRemoved) {\n target.observerRemoved(count, observer);\n }\n }\n}\n\nvar setHidden = function setHidden(target, key, value) {\n return Object.defineProperty(target, key, {\n value: value,\n writable: true,\n configurable: true\n });\n};\n\nvar numberRegex = /[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?/g;\nvar colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\\((-?\\d+%?[,\\s]+){2,3}\\s*[\\d\\.]+%?\\))/gi;\nvar unitRegex = new RegExp(\"(\".concat(numberRegex.source, \")(%|[a-z]+)\"), 'i');\nvar rgbaRegex = /rgba\\(([0-9\\.-]+), ([0-9\\.-]+), ([0-9\\.-]+), ([0-9\\.-]+)\\)/gi;\nvar cssVariableRegex = /var\\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\\)/;\n\nvar variableToRgba = function variableToRgba(input) {\n var _parseCSSVariable = parseCSSVariable(input),\n _parseCSSVariable2 = _slicedToArray(_parseCSSVariable, 2),\n token = _parseCSSVariable2[0],\n fallback = _parseCSSVariable2[1];\n\n if (!token || isSSR()) {\n return input;\n }\n\n var value = window.getComputedStyle(document.documentElement).getPropertyValue(token);\n\n if (value) {\n return value.trim();\n } else if (fallback && fallback.startsWith('--')) {\n var _value = window.getComputedStyle(document.documentElement).getPropertyValue(fallback);\n\n if (_value) {\n return _value;\n } else {\n return input;\n }\n } else if (fallback && cssVariableRegex.test(fallback)) {\n return variableToRgba(fallback);\n } else if (fallback) {\n return fallback;\n }\n\n return input;\n};\n\nvar parseCSSVariable = function parseCSSVariable(current) {\n var match = cssVariableRegex.exec(current);\n if (!match) return [,];\n\n var _match = _slicedToArray(match, 3),\n token = _match[1],\n fallback = _match[2];\n\n return [token, fallback];\n};\n\nvar namedColorRegex;\n\nvar rgbaRound = function rgbaRound(_, p1, p2, p3, p4) {\n return \"rgba(\".concat(Math.round(p1), \", \").concat(Math.round(p2), \", \").concat(Math.round(p3), \", \").concat(p4, \")\");\n};\n\nvar createStringInterpolator = function createStringInterpolator(config) {\n if (!namedColorRegex) namedColorRegex = colors$1 ? new RegExp(\"(\".concat(Object.keys(colors$1).join('|'), \")(?!\\\\w)\"), 'g') : /^\\b$/;\n var output = config.output.map(function (value) {\n return getFluidValue(value).replace(cssVariableRegex, variableToRgba).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba);\n });\n var keyframes = output.map(function (value) {\n return value.match(numberRegex).map(Number);\n });\n var outputRanges = keyframes[0].map(function (_, i) {\n return keyframes.map(function (values) {\n if (!(i in values)) {\n throw Error('The arity of each \"output\" value must be equal');\n }\n\n return values[i];\n });\n });\n var interpolators = outputRanges.map(function (output) {\n return createInterpolator(_extends({}, config, {\n output: output\n }));\n });\n return function (input) {\n var _output$find;\n\n var missingUnit = !unitRegex.test(output[0]) && ((_output$find = output.find(function (value) {\n return unitRegex.test(value);\n })) == null ? void 0 : _output$find.replace(numberRegex, ''));\n var i = 0;\n return output[0].replace(numberRegex, function () {\n return \"\".concat(interpolators[i++](input)).concat(missingUnit || '');\n }).replace(rgbaRegex, rgbaRound);\n };\n};\n\nvar prefix = 'react-spring: ';\n\nvar once = function once(fn) {\n var func = fn;\n var called = false;\n\n if (typeof func != 'function') {\n throw new TypeError(\"\".concat(prefix, \"once requires a function parameter\"));\n }\n\n return function () {\n if (!called) {\n func.apply(void 0, arguments);\n called = true;\n }\n };\n};\n\nvar warnInterpolate = once(console.warn);\n\nfunction deprecateInterpolate() {\n warnInterpolate(\"\".concat(prefix, \"The \\\"interpolate\\\" function is deprecated in v9 (use \\\"to\\\" instead)\"));\n}\n\nvar warnDirectCall = once(console.warn);\n\nfunction deprecateDirectCall() {\n warnDirectCall(\"\".concat(prefix, \"Directly calling start instead of using the api object is deprecated in v9 (use \\\".start\\\" instead), this will be removed in later 0.X.0 versions\"));\n}\n\nfunction isAnimatedString(value) {\n return is.str(value) && (value[0] == '#' || /\\d/.test(value) || !isSSR() && cssVariableRegex.test(value) || value in (colors$1 || {}));\n}\n\nvar useOnce = function useOnce(effect) {\n return useEffect(effect, emptyDeps);\n};\n\nvar emptyDeps = [];\n\nfunction useForceUpdate() {\n var update = useState()[1];\n var mounted = useState(makeMountedRef)[0];\n useOnce(mounted.unmount);\n return function () {\n if (mounted.current) {\n update({});\n }\n };\n}\n\nfunction makeMountedRef() {\n var mounted = {\n current: true,\n unmount: function unmount() {\n return function () {\n mounted.current = false;\n };\n }\n };\n return mounted;\n}\n\nfunction useMemoOne(getResult, inputs) {\n var _useState = useState(function () {\n return {\n inputs: inputs,\n result: getResult()\n };\n }),\n _useState2 = _slicedToArray(_useState, 1),\n initial = _useState2[0];\n\n var committed = useRef();\n var prevCache = committed.current;\n var cache = prevCache;\n\n if (cache) {\n var useCache = Boolean(inputs && cache.inputs && areInputsEqual(inputs, cache.inputs));\n\n if (!useCache) {\n cache = {\n inputs: inputs,\n result: getResult()\n };\n }\n } else {\n cache = initial;\n }\n\n useEffect(function () {\n committed.current = cache;\n\n if (prevCache == initial) {\n initial.inputs = initial.result = undefined;\n }\n }, [cache]);\n return cache.result;\n}\n\nfunction areInputsEqual(next, prev) {\n if (next.length !== prev.length) {\n return false;\n }\n\n for (var i = 0; i < next.length; i++) {\n if (next[i] !== prev[i]) {\n return false;\n }\n }\n\n return true;\n}\n\nfunction usePrev(value) {\n var prevRef = useRef();\n useEffect(function () {\n prevRef.current = value;\n });\n return prevRef.current;\n}\n\nvar useLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;\nexport { FluidValue, globals as Globals, addFluidObserver, callFluidObserver, callFluidObservers, colorToRgba, colors, createInterpolator, createStringInterpolator, defineHidden, deprecateDirectCall, deprecateInterpolate, each, eachProp, flush, flushCalls, frameLoop, getFluidObservers, getFluidValue, hasFluidValue, hex3, hex4, hex6, hex8, hsl, hsla, is, isAnimatedString, isEqual, isSSR, noop, removeFluidObserver, rgb, rgba, setFluidGetter, toArray, useForceUpdate, useLayoutEffect, useMemoOne, useOnce, usePrev };","import _slicedToArray from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";\nimport _get from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/get.js\";\nimport _inherits from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/inherits.js\";\nimport _possibleConstructorReturn from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js\";\nimport _getPrototypeOf from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js\";\nimport _classCallCheck from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/classCallCheck.js\";\nimport _createClass from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/createClass.js\";\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nimport { defineHidden, is, createInterpolator, eachProp, hasFluidValue, getFluidValue, each, isAnimatedString, useForceUpdate, useLayoutEffect, addFluidObserver, removeFluidObserver, raf, useOnce } from '@react-spring/shared';\nimport * as React from 'react';\nimport { forwardRef, useRef, useCallback, useEffect } from 'react';\nvar $node = Symbol.for('Animated:node');\n\nvar isAnimated = function isAnimated(value) {\n return !!value && value[$node] === value;\n};\n\nvar getAnimated = function getAnimated(owner) {\n return owner && owner[$node];\n};\n\nvar setAnimated = function setAnimated(owner, node) {\n return defineHidden(owner, $node, node);\n};\n\nvar getPayload = function getPayload(owner) {\n return owner && owner[$node] && owner[$node].getPayload();\n};\n\nvar Animated = /*#__PURE__*/function () {\n function Animated() {\n _classCallCheck(this, Animated);\n\n this.payload = void 0;\n setAnimated(this, this);\n }\n\n _createClass(Animated, [{\n key: \"getPayload\",\n value: function getPayload() {\n return this.payload || [];\n }\n }]);\n\n return Animated;\n}();\n\nvar AnimatedValue = /*#__PURE__*/function (_Animated) {\n _inherits(AnimatedValue, _Animated);\n\n var _super = _createSuper(AnimatedValue);\n\n function AnimatedValue(_value) {\n var _this;\n\n _classCallCheck(this, AnimatedValue);\n\n _this = _super.call(this);\n _this.done = true;\n _this.elapsedTime = void 0;\n _this.lastPosition = void 0;\n _this.lastVelocity = void 0;\n _this.v0 = void 0;\n _this.durationProgress = 0;\n _this._value = _value;\n\n if (is.num(_this._value)) {\n _this.lastPosition = _this._value;\n }\n\n return _this;\n }\n\n _createClass(AnimatedValue, [{\n key: \"getPayload\",\n value: function getPayload() {\n return [this];\n }\n }, {\n key: \"getValue\",\n value: function getValue() {\n return this._value;\n }\n }, {\n key: \"setValue\",\n value: function setValue(value, step) {\n if (is.num(value)) {\n this.lastPosition = value;\n\n if (step) {\n value = Math.round(value / step) * step;\n\n if (this.done) {\n this.lastPosition = value;\n }\n }\n }\n\n if (this._value === value) {\n return false;\n }\n\n this._value = value;\n return true;\n }\n }, {\n key: \"reset\",\n value: function reset() {\n var done = this.done;\n this.done = false;\n\n if (is.num(this._value)) {\n this.elapsedTime = 0;\n this.durationProgress = 0;\n this.lastPosition = this._value;\n if (done) this.lastVelocity = null;\n this.v0 = null;\n }\n }\n }], [{\n key: \"create\",\n value: function create(value) {\n return new AnimatedValue(value);\n }\n }]);\n\n return AnimatedValue;\n}(Animated);\n\nvar AnimatedString = /*#__PURE__*/function (_AnimatedValue) {\n _inherits(AnimatedString, _AnimatedValue);\n\n var _super2 = _createSuper(AnimatedString);\n\n function AnimatedString(value) {\n var _this2;\n\n _classCallCheck(this, AnimatedString);\n\n _this2 = _super2.call(this, 0);\n _this2._string = null;\n _this2._toString = void 0;\n _this2._toString = createInterpolator({\n output: [value, value]\n });\n return _this2;\n }\n\n _createClass(AnimatedString, [{\n key: \"getValue\",\n value: function getValue() {\n var value = this._string;\n return value == null ? this._string = this._toString(this._value) : value;\n }\n }, {\n key: \"setValue\",\n value: function setValue(value) {\n if (is.str(value)) {\n if (value == this._string) {\n return false;\n }\n\n this._string = value;\n this._value = 1;\n } else if (_get(_getPrototypeOf(AnimatedString.prototype), \"setValue\", this).call(this, value)) {\n this._string = null;\n } else {\n return false;\n }\n\n return true;\n }\n }, {\n key: \"reset\",\n value: function reset(goal) {\n if (goal) {\n this._toString = createInterpolator({\n output: [this.getValue(), goal]\n });\n }\n\n this._value = 0;\n\n _get(_getPrototypeOf(AnimatedString.prototype), \"reset\", this).call(this);\n }\n }], [{\n key: \"create\",\n value: function create(value) {\n return new AnimatedString(value);\n }\n }]);\n\n return AnimatedString;\n}(AnimatedValue);\n\nvar TreeContext = {\n dependencies: null\n};\n\nvar AnimatedObject = /*#__PURE__*/function (_Animated2) {\n _inherits(AnimatedObject, _Animated2);\n\n var _super3 = _createSuper(AnimatedObject);\n\n function AnimatedObject(source) {\n var _this3;\n\n _classCallCheck(this, AnimatedObject);\n\n _this3 = _super3.call(this);\n _this3.source = source;\n\n _this3.setValue(source);\n\n return _this3;\n }\n\n _createClass(AnimatedObject, [{\n key: \"getValue\",\n value: function getValue(animated) {\n var values = {};\n eachProp(this.source, function (source, key) {\n if (isAnimated(source)) {\n values[key] = source.getValue(animated);\n } else if (hasFluidValue(source)) {\n values[key] = getFluidValue(source);\n } else if (!animated) {\n values[key] = source;\n }\n });\n return values;\n }\n }, {\n key: \"setValue\",\n value: function setValue(source) {\n this.source = source;\n this.payload = this._makePayload(source);\n }\n }, {\n key: \"reset\",\n value: function reset() {\n if (this.payload) {\n each(this.payload, function (node) {\n return node.reset();\n });\n }\n }\n }, {\n key: \"_makePayload\",\n value: function _makePayload(source) {\n if (source) {\n var payload = new Set();\n eachProp(source, this._addToPayload, payload);\n return Array.from(payload);\n }\n }\n }, {\n key: \"_addToPayload\",\n value: function _addToPayload(source) {\n var _this4 = this;\n\n if (TreeContext.dependencies && hasFluidValue(source)) {\n TreeContext.dependencies.add(source);\n }\n\n var payload = getPayload(source);\n\n if (payload) {\n each(payload, function (node) {\n return _this4.add(node);\n });\n }\n }\n }]);\n\n return AnimatedObject;\n}(Animated);\n\nvar AnimatedArray = /*#__PURE__*/function (_AnimatedObject) {\n _inherits(AnimatedArray, _AnimatedObject);\n\n var _super4 = _createSuper(AnimatedArray);\n\n function AnimatedArray(source) {\n _classCallCheck(this, AnimatedArray);\n\n return _super4.call(this, source);\n }\n\n _createClass(AnimatedArray, [{\n key: \"getValue\",\n value: function getValue() {\n return this.source.map(function (node) {\n return node.getValue();\n });\n }\n }, {\n key: \"setValue\",\n value: function setValue(source) {\n var payload = this.getPayload();\n\n if (source.length == payload.length) {\n return payload.map(function (node, i) {\n return node.setValue(source[i]);\n }).some(Boolean);\n }\n\n _get(_getPrototypeOf(AnimatedArray.prototype), \"setValue\", this).call(this, source.map(makeAnimated));\n\n return true;\n }\n }], [{\n key: \"create\",\n value: function create(source) {\n return new AnimatedArray(source);\n }\n }]);\n\n return AnimatedArray;\n}(AnimatedObject);\n\nfunction makeAnimated(value) {\n var nodeType = isAnimatedString(value) ? AnimatedString : AnimatedValue;\n return nodeType.create(value);\n}\n\nfunction getAnimatedType(value) {\n var parentNode = getAnimated(value);\n return parentNode ? parentNode.constructor : is.arr(value) ? AnimatedArray : isAnimatedString(value) ? AnimatedString : AnimatedValue;\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nvar withAnimated = function withAnimated(Component, host) {\n var hasInstance = !is.fun(Component) || Component.prototype && Component.prototype.isReactComponent;\n return forwardRef(function (givenProps, givenRef) {\n var instanceRef = useRef(null);\n var ref = hasInstance && useCallback(function (value) {\n instanceRef.current = updateRef(givenRef, value);\n }, [givenRef]);\n\n var _getAnimatedState = getAnimatedState(givenProps, host),\n _getAnimatedState2 = _slicedToArray(_getAnimatedState, 2),\n props = _getAnimatedState2[0],\n deps = _getAnimatedState2[1];\n\n var forceUpdate = useForceUpdate();\n\n var callback = function callback() {\n var instance = instanceRef.current;\n\n if (hasInstance && !instance) {\n return;\n }\n\n var didUpdate = instance ? host.applyAnimatedValues(instance, props.getValue(true)) : false;\n\n if (didUpdate === false) {\n forceUpdate();\n }\n };\n\n var observer = new PropsObserver(callback, deps);\n var observerRef = useRef();\n useLayoutEffect(function () {\n var lastObserver = observerRef.current;\n observerRef.current = observer;\n each(deps, function (dep) {\n return addFluidObserver(dep, observer);\n });\n\n if (lastObserver) {\n each(lastObserver.deps, function (dep) {\n return removeFluidObserver(dep, lastObserver);\n });\n raf.cancel(lastObserver.update);\n }\n });\n useEffect(callback, []);\n useOnce(function () {\n return function () {\n var observer = observerRef.current;\n each(observer.deps, function (dep) {\n return removeFluidObserver(dep, observer);\n });\n };\n });\n var usedProps = host.getComponentProps(props.getValue());\n return React.createElement(Component, _extends({}, usedProps, {\n ref: ref\n }));\n });\n};\n\nvar PropsObserver = /*#__PURE__*/function () {\n function PropsObserver(update, deps) {\n _classCallCheck(this, PropsObserver);\n\n this.update = update;\n this.deps = deps;\n }\n\n _createClass(PropsObserver, [{\n key: \"eventObserved\",\n value: function eventObserved(event) {\n if (event.type == 'change') {\n raf.write(this.update);\n }\n }\n }]);\n\n return PropsObserver;\n}();\n\nfunction getAnimatedState(props, host) {\n var dependencies = new Set();\n TreeContext.dependencies = dependencies;\n if (props.style) props = _extends({}, props, {\n style: host.createAnimatedStyle(props.style)\n });\n props = new AnimatedObject(props);\n TreeContext.dependencies = null;\n return [props, dependencies];\n}\n\nfunction updateRef(ref, value) {\n if (ref) {\n if (is.fun(ref)) ref(value);else ref.current = value;\n }\n\n return value;\n}\n\nvar cacheKey = Symbol.for('AnimatedComponent');\n\nvar createHost = function createHost(components) {\n var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},\n _ref$applyAnimatedVal = _ref.applyAnimatedValues,\n _applyAnimatedValues = _ref$applyAnimatedVal === void 0 ? function () {\n return false;\n } : _ref$applyAnimatedVal,\n _ref$createAnimatedSt = _ref.createAnimatedStyle,\n _createAnimatedStyle = _ref$createAnimatedSt === void 0 ? function (style) {\n return new AnimatedObject(style);\n } : _ref$createAnimatedSt,\n _ref$getComponentProp = _ref.getComponentProps,\n _getComponentProps = _ref$getComponentProp === void 0 ? function (props) {\n return props;\n } : _ref$getComponentProp;\n\n var hostConfig = {\n applyAnimatedValues: _applyAnimatedValues,\n createAnimatedStyle: _createAnimatedStyle,\n getComponentProps: _getComponentProps\n };\n\n var animated = function animated(Component) {\n var displayName = getDisplayName(Component) || 'Anonymous';\n\n if (is.str(Component)) {\n Component = animated[Component] || (animated[Component] = withAnimated(Component, hostConfig));\n } else {\n Component = Component[cacheKey] || (Component[cacheKey] = withAnimated(Component, hostConfig));\n }\n\n Component.displayName = \"Animated(\".concat(displayName, \")\");\n return Component;\n };\n\n eachProp(components, function (Component, key) {\n if (is.arr(components)) {\n key = getDisplayName(Component);\n }\n\n animated[key] = animated(Component);\n });\n return {\n animated: animated\n };\n};\n\nvar getDisplayName = function getDisplayName(arg) {\n return is.str(arg) ? arg : arg && is.str(arg.displayName) ? arg.displayName : is.fun(arg) && arg.name || null;\n};\n\nexport { Animated, AnimatedArray, AnimatedObject, AnimatedString, AnimatedValue, createHost, getAnimated, getAnimatedType, getPayload, isAnimated, setAnimated };","import _assertThisInitialized from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js\";\nimport _toConsumableArray from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js\";\nimport _slicedToArray from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";\nimport _get from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/get.js\";\nimport _inherits from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/inherits.js\";\nimport _possibleConstructorReturn from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js\";\nimport _getPrototypeOf from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js\";\nimport _wrapNativeSuper from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js\";\nimport _asyncToGenerator from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\";\nimport _createClass from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/createClass.js\";\nimport _classCallCheck from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/classCallCheck.js\";\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nimport _regeneratorRuntime from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/regenerator/index.js\";\n\nfunction _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nimport { eachProp, is, toArray, isAnimatedString, Globals, getFluidValue, useLayoutEffect, each, raf, flush, FluidValue, deprecateInterpolate, callFluidObservers, frameLoop, hasFluidValue, flushCalls, isEqual, getFluidObservers, addFluidObserver, removeFluidObserver, noop, useMemoOne, deprecateDirectCall, useForceUpdate, usePrev, useOnce, createInterpolator, createStringInterpolator } from '@react-spring/shared';\nexport { Globals, createInterpolator } from '@react-spring/shared';\nimport * as React from 'react';\nimport { useContext, useMemo, useRef, useState } from 'react';\nimport { getAnimated, AnimatedValue, getPayload, AnimatedString, getAnimatedType, setAnimated } from '@react-spring/animated';\nexport * from '@react-spring/types/animated';\nexport * from '@react-spring/types/interpolation';\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction callProp(value) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return is.fun(value) ? value.apply(void 0, args) : value;\n}\n\nvar matchProp = function matchProp(value, key) {\n return value === true || !!(key && value && (is.fun(value) ? value(key) : toArray(value).includes(key)));\n};\n\nvar resolveProp = function resolveProp(prop, key) {\n return is.obj(prop) ? key && prop[key] : prop;\n};\n\nvar getDefaultProp = function getDefaultProp(props, key) {\n return props.default === true ? props[key] : props.default ? props.default[key] : undefined;\n};\n\nvar noopTransform = function noopTransform(value) {\n return value;\n};\n\nvar getDefaultProps = function getDefaultProps(props) {\n var transform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noopTransform;\n var keys = DEFAULT_PROPS;\n\n if (props.default && props.default !== true) {\n props = props.default;\n keys = Object.keys(props);\n }\n\n var defaults = {};\n\n var _iterator = _createForOfIteratorHelper(keys),\n _step;\n\n try {\n for (_iterator.s(); !(_step = _iterator.n()).done;) {\n var key = _step.value;\n var value = transform(props[key], key);\n\n if (!is.und(value)) {\n defaults[key] = value;\n }\n }\n } catch (err) {\n _iterator.e(err);\n } finally {\n _iterator.f();\n }\n\n return defaults;\n};\n\nvar DEFAULT_PROPS = ['config', 'onProps', 'onStart', 'onChange', 'onPause', 'onResume', 'onRest'];\nvar RESERVED_PROPS = {\n config: 1,\n from: 1,\n to: 1,\n ref: 1,\n loop: 1,\n reset: 1,\n pause: 1,\n cancel: 1,\n reverse: 1,\n immediate: 1,\n default: 1,\n delay: 1,\n onProps: 1,\n onStart: 1,\n onChange: 1,\n onPause: 1,\n onResume: 1,\n onRest: 1,\n onResolve: 1,\n items: 1,\n trail: 1,\n sort: 1,\n expires: 1,\n initial: 1,\n enter: 1,\n update: 1,\n leave: 1,\n children: 1,\n onDestroyed: 1,\n keys: 1,\n callId: 1,\n parentId: 1\n};\n\nfunction getForwardProps(props) {\n var forward = {};\n var count = 0;\n eachProp(props, function (value, prop) {\n if (!RESERVED_PROPS[prop]) {\n forward[prop] = value;\n count++;\n }\n });\n\n if (count) {\n return forward;\n }\n}\n\nfunction inferTo(props) {\n var to = getForwardProps(props);\n\n if (to) {\n var out = {\n to: to\n };\n eachProp(props, function (val, key) {\n return key in to || (out[key] = val);\n });\n return out;\n }\n\n return _extends({}, props);\n}\n\nfunction computeGoal(value) {\n value = getFluidValue(value);\n return is.arr(value) ? value.map(computeGoal) : isAnimatedString(value) ? Globals.createStringInterpolator({\n range: [0, 1],\n output: [value, value]\n })(1) : value;\n}\n\nfunction hasProps(props) {\n for (var _ in props) {\n return true;\n }\n\n return false;\n}\n\nfunction isAsyncTo(to) {\n return is.fun(to) || is.arr(to) && is.obj(to[0]);\n}\n\nfunction detachRefs(ctrl, ref) {\n var _ctrl$ref;\n\n (_ctrl$ref = ctrl.ref) == null ? void 0 : _ctrl$ref.delete(ctrl);\n ref == null ? void 0 : ref.delete(ctrl);\n}\n\nfunction replaceRef(ctrl, ref) {\n if (ref && ctrl.ref !== ref) {\n var _ctrl$ref2;\n\n (_ctrl$ref2 = ctrl.ref) == null ? void 0 : _ctrl$ref2.delete(ctrl);\n ref.add(ctrl);\n ctrl.ref = ref;\n }\n}\n\nfunction useChain(refs, timeSteps) {\n var timeFrame = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1000;\n useLayoutEffect(function () {\n if (timeSteps) {\n var prevDelay = 0;\n each(refs, function (ref, i) {\n var controllers = ref.current;\n\n if (controllers.length) {\n var delay = timeFrame * timeSteps[i];\n if (isNaN(delay)) delay = prevDelay;else prevDelay = delay;\n each(controllers, function (ctrl) {\n each(ctrl.queue, function (props) {\n var memoizedDelayProp = props.delay;\n\n props.delay = function (key) {\n return delay + callProp(memoizedDelayProp || 0, key);\n };\n });\n });\n ref.start();\n }\n });\n } else {\n var p = Promise.resolve();\n each(refs, function (ref) {\n var controllers = ref.current;\n\n if (controllers.length) {\n var queues = controllers.map(function (ctrl) {\n var q = ctrl.queue;\n ctrl.queue = [];\n return q;\n });\n p = p.then(function () {\n each(controllers, function (ctrl, i) {\n return each(queues[i] || [], function (update) {\n return ctrl.queue.push(update);\n });\n });\n return Promise.all(ref.start());\n });\n }\n });\n }\n });\n}\n\nvar config = {\n default: {\n tension: 170,\n friction: 26\n },\n gentle: {\n tension: 120,\n friction: 14\n },\n wobbly: {\n tension: 180,\n friction: 12\n },\n stiff: {\n tension: 210,\n friction: 20\n },\n slow: {\n tension: 280,\n friction: 60\n },\n molasses: {\n tension: 280,\n friction: 120\n }\n};\nvar c1 = 1.70158;\nvar c2 = c1 * 1.525;\nvar c3 = c1 + 1;\nvar c4 = 2 * Math.PI / 3;\nvar c5 = 2 * Math.PI / 4.5;\n\nvar bounceOut = function bounceOut(x) {\n var n1 = 7.5625;\n var d1 = 2.75;\n\n if (x < 1 / d1) {\n return n1 * x * x;\n } else if (x < 2 / d1) {\n return n1 * (x -= 1.5 / d1) * x + 0.75;\n } else if (x < 2.5 / d1) {\n return n1 * (x -= 2.25 / d1) * x + 0.9375;\n } else {\n return n1 * (x -= 2.625 / d1) * x + 0.984375;\n }\n};\n\nvar easings = {\n linear: function linear(x) {\n return x;\n },\n easeInQuad: function easeInQuad(x) {\n return x * x;\n },\n easeOutQuad: function easeOutQuad(x) {\n return 1 - (1 - x) * (1 - x);\n },\n easeInOutQuad: function easeInOutQuad(x) {\n return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;\n },\n easeInCubic: function easeInCubic(x) {\n return x * x * x;\n },\n easeOutCubic: function easeOutCubic(x) {\n return 1 - Math.pow(1 - x, 3);\n },\n easeInOutCubic: function easeInOutCubic(x) {\n return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;\n },\n easeInQuart: function easeInQuart(x) {\n return x * x * x * x;\n },\n easeOutQuart: function easeOutQuart(x) {\n return 1 - Math.pow(1 - x, 4);\n },\n easeInOutQuart: function easeInOutQuart(x) {\n return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;\n },\n easeInQuint: function easeInQuint(x) {\n return x * x * x * x * x;\n },\n easeOutQuint: function easeOutQuint(x) {\n return 1 - Math.pow(1 - x, 5);\n },\n easeInOutQuint: function easeInOutQuint(x) {\n return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;\n },\n easeInSine: function easeInSine(x) {\n return 1 - Math.cos(x * Math.PI / 2);\n },\n easeOutSine: function easeOutSine(x) {\n return Math.sin(x * Math.PI / 2);\n },\n easeInOutSine: function easeInOutSine(x) {\n return -(Math.cos(Math.PI * x) - 1) / 2;\n },\n easeInExpo: function easeInExpo(x) {\n return x === 0 ? 0 : Math.pow(2, 10 * x - 10);\n },\n easeOutExpo: function easeOutExpo(x) {\n return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);\n },\n easeInOutExpo: function easeInOutExpo(x) {\n return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2;\n },\n easeInCirc: function easeInCirc(x) {\n return 1 - Math.sqrt(1 - Math.pow(x, 2));\n },\n easeOutCirc: function easeOutCirc(x) {\n return Math.sqrt(1 - Math.pow(x - 1, 2));\n },\n easeInOutCirc: function easeInOutCirc(x) {\n return x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;\n },\n easeInBack: function easeInBack(x) {\n return c3 * x * x * x - c1 * x * x;\n },\n easeOutBack: function easeOutBack(x) {\n return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);\n },\n easeInOutBack: function easeInOutBack(x) {\n return x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;\n },\n easeInElastic: function easeInElastic(x) {\n return x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4);\n },\n easeOutElastic: function easeOutElastic(x) {\n return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;\n },\n easeInOutElastic: function easeInOutElastic(x) {\n return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;\n },\n easeInBounce: function easeInBounce(x) {\n return 1 - bounceOut(1 - x);\n },\n easeOutBounce: bounceOut,\n easeInOutBounce: function easeInOutBounce(x) {\n return x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2;\n }\n};\n\nvar defaults = _extends({}, config.default, {\n mass: 1,\n damping: 1,\n easing: easings.linear,\n clamp: false\n});\n\nvar AnimationConfig = /*#__PURE__*/_createClass(function AnimationConfig() {\n _classCallCheck(this, AnimationConfig);\n\n this.tension = void 0;\n this.friction = void 0;\n this.frequency = void 0;\n this.damping = void 0;\n this.mass = void 0;\n this.velocity = 0;\n this.restVelocity = void 0;\n this.precision = void 0;\n this.progress = void 0;\n this.duration = void 0;\n this.easing = void 0;\n this.clamp = void 0;\n this.bounce = void 0;\n this.decay = void 0;\n this.round = void 0;\n Object.assign(this, defaults);\n});\n\nfunction mergeConfig(config, newConfig, defaultConfig) {\n if (defaultConfig) {\n defaultConfig = _extends({}, defaultConfig);\n sanitizeConfig(defaultConfig, newConfig);\n newConfig = _extends({}, defaultConfig, newConfig);\n }\n\n sanitizeConfig(config, newConfig);\n Object.assign(config, newConfig);\n\n for (var key in defaults) {\n if (config[key] == null) {\n config[key] = defaults[key];\n }\n }\n\n var mass = config.mass,\n frequency = config.frequency,\n damping = config.damping;\n\n if (!is.und(frequency)) {\n if (frequency < 0.01) frequency = 0.01;\n if (damping < 0) damping = 0;\n config.tension = Math.pow(2 * Math.PI / frequency, 2) * mass;\n config.friction = 4 * Math.PI * damping * mass / frequency;\n }\n\n return config;\n}\n\nfunction sanitizeConfig(config, props) {\n if (!is.und(props.decay)) {\n config.duration = undefined;\n } else {\n var isTensionConfig = !is.und(props.tension) || !is.und(props.friction);\n\n if (isTensionConfig || !is.und(props.frequency) || !is.und(props.damping) || !is.und(props.mass)) {\n config.duration = undefined;\n config.decay = undefined;\n }\n\n if (isTensionConfig) {\n config.frequency = undefined;\n }\n }\n}\n\nvar emptyArray = [];\n\nvar Animation = /*#__PURE__*/_createClass(function Animation() {\n _classCallCheck(this, Animation);\n\n this.changed = false;\n this.values = emptyArray;\n this.toValues = null;\n this.fromValues = emptyArray;\n this.to = void 0;\n this.from = void 0;\n this.config = new AnimationConfig();\n this.immediate = false;\n});\n\nfunction scheduleProps(callId, _ref2) {\n var key = _ref2.key,\n props = _ref2.props,\n defaultProps = _ref2.defaultProps,\n state = _ref2.state,\n actions = _ref2.actions;\n return new Promise(function (resolve, reject) {\n var _props$cancel;\n\n var delay;\n var timeout;\n var cancel = matchProp((_props$cancel = props.cancel) != null ? _props$cancel : defaultProps == null ? void 0 : defaultProps.cancel, key);\n\n if (cancel) {\n onStart();\n } else {\n if (!is.und(props.pause)) {\n state.paused = matchProp(props.pause, key);\n }\n\n var pause = defaultProps == null ? void 0 : defaultProps.pause;\n\n if (pause !== true) {\n pause = state.paused || matchProp(pause, key);\n }\n\n delay = callProp(props.delay || 0, key);\n\n if (pause) {\n state.resumeQueue.add(onResume);\n actions.pause();\n } else {\n actions.resume();\n onResume();\n }\n }\n\n function onPause() {\n state.resumeQueue.add(onResume);\n state.timeouts.delete(timeout);\n timeout.cancel();\n delay = timeout.time - raf.now();\n }\n\n function onResume() {\n if (delay > 0 && !Globals.skipAnimation) {\n state.delayed = true;\n timeout = raf.setTimeout(onStart, delay);\n state.pauseQueue.add(onPause);\n state.timeouts.add(timeout);\n } else {\n onStart();\n }\n }\n\n function onStart() {\n if (state.delayed) {\n state.delayed = false;\n }\n\n state.pauseQueue.delete(onPause);\n state.timeouts.delete(timeout);\n\n if (callId <= (state.cancelId || 0)) {\n cancel = true;\n }\n\n try {\n actions.start(_extends({}, props, {\n callId: callId,\n cancel: cancel\n }), resolve);\n } catch (err) {\n reject(err);\n }\n }\n });\n}\n\nvar getCombinedResult = function getCombinedResult(target, results) {\n return results.length == 1 ? results[0] : results.some(function (result) {\n return result.cancelled;\n }) ? getCancelledResult(target.get()) : results.every(function (result) {\n return result.noop;\n }) ? getNoopResult(target.get()) : getFinishedResult(target.get(), results.every(function (result) {\n return result.finished;\n }));\n};\n\nvar getNoopResult = function getNoopResult(value) {\n return {\n value: value,\n noop: true,\n finished: true,\n cancelled: false\n };\n};\n\nvar getFinishedResult = function getFinishedResult(value, finished) {\n var cancelled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;\n return {\n value: value,\n finished: finished,\n cancelled: cancelled\n };\n};\n\nvar getCancelledResult = function getCancelledResult(value) {\n return {\n value: value,\n cancelled: true,\n finished: false\n };\n};\n\nfunction runAsync(to, props, state, target) {\n var callId = props.callId,\n parentId = props.parentId,\n onRest = props.onRest;\n var prevTo = state.asyncTo,\n prevPromise = state.promise;\n\n if (!parentId && to === prevTo && !props.reset) {\n return prevPromise;\n }\n\n return state.promise = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {\n var defaultProps, preventBail, bail, bailPromise, bailIfEnded, animate, result, animating;\n return _regeneratorRuntime.wrap(function _callee3$(_context3) {\n while (1) {\n switch (_context3.prev = _context3.next) {\n case 0:\n state.asyncId = callId;\n state.asyncTo = to;\n defaultProps = getDefaultProps(props, function (value, key) {\n return key === 'onRest' ? undefined : value;\n });\n bailPromise = new Promise(function (resolve, reject) {\n return preventBail = resolve, bail = reject;\n });\n\n bailIfEnded = function bailIfEnded(bailSignal) {\n var bailResult = callId <= (state.cancelId || 0) && getCancelledResult(target) || callId !== state.asyncId && getFinishedResult(target, false);\n\n if (bailResult) {\n bailSignal.result = bailResult;\n bail(bailSignal);\n throw bailSignal;\n }\n };\n\n animate = function animate(arg1, arg2) {\n var bailSignal = new BailSignal();\n var skipAnimationSignal = new SkipAniamtionSignal();\n return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {\n var props, result;\n return _regeneratorRuntime.wrap(function _callee$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n if (!Globals.skipAnimation) {\n _context.next = 5;\n break;\n }\n\n stopAsync(state);\n skipAnimationSignal.result = getFinishedResult(target, false);\n bail(skipAnimationSignal);\n throw skipAnimationSignal;\n\n case 5:\n bailIfEnded(bailSignal);\n props = is.obj(arg1) ? _extends({}, arg1) : _extends({}, arg2, {\n to: arg1\n });\n props.parentId = callId;\n eachProp(defaultProps, function (value, key) {\n if (is.und(props[key])) {\n props[key] = value;\n }\n });\n _context.next = 11;\n return target.start(props);\n\n case 11:\n result = _context.sent;\n bailIfEnded(bailSignal);\n\n if (!state.paused) {\n _context.next = 16;\n break;\n }\n\n _context.next = 16;\n return new Promise(function (resume) {\n state.resumeQueue.add(resume);\n });\n\n case 16:\n return _context.abrupt(\"return\", result);\n\n case 17:\n case \"end\":\n return _context.stop();\n }\n }\n }, _callee);\n }))();\n };\n\n if (!Globals.skipAnimation) {\n _context3.next = 9;\n break;\n }\n\n stopAsync(state);\n return _context3.abrupt(\"return\", getFinishedResult(target, false));\n\n case 9:\n _context3.prev = 9;\n\n if (is.arr(to)) {\n animating = function () {\n var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(queue) {\n var _iterator2, _step2, _props;\n\n return _regeneratorRuntime.wrap(function _callee2$(_context2) {\n while (1) {\n switch (_context2.prev = _context2.next) {\n case 0:\n _iterator2 = _createForOfIteratorHelper(queue);\n _context2.prev = 1;\n\n _iterator2.s();\n\n case 3:\n if ((_step2 = _iterator2.n()).done) {\n _context2.next = 9;\n break;\n }\n\n _props = _step2.value;\n _context2.next = 7;\n return animate(_props);\n\n case 7:\n _context2.next = 3;\n break;\n\n case 9:\n _context2.next = 14;\n break;\n\n case 11:\n _context2.prev = 11;\n _context2.t0 = _context2[\"catch\"](1);\n\n _iterator2.e(_context2.t0);\n\n case 14:\n _context2.prev = 14;\n\n _iterator2.f();\n\n return _context2.finish(14);\n\n case 17:\n case \"end\":\n return _context2.stop();\n }\n }\n }, _callee2, null, [[1, 11, 14, 17]]);\n }));\n\n return function (_x) {\n return _ref5.apply(this, arguments);\n };\n }()(to);\n } else {\n animating = Promise.resolve(to(animate, target.stop.bind(target)));\n }\n\n _context3.next = 13;\n return Promise.all([animating.then(preventBail), bailPromise]);\n\n case 13:\n result = getFinishedResult(target.get(), true, false);\n _context3.next = 27;\n break;\n\n case 16:\n _context3.prev = 16;\n _context3.t0 = _context3[\"catch\"](9);\n\n if (!(_context3.t0 instanceof BailSignal)) {\n _context3.next = 22;\n break;\n }\n\n result = _context3.t0.result;\n _context3.next = 27;\n break;\n\n case 22:\n if (!(_context3.t0 instanceof SkipAniamtionSignal)) {\n _context3.next = 26;\n break;\n }\n\n result = _context3.t0.result;\n _context3.next = 27;\n break;\n\n case 26:\n throw _context3.t0;\n\n case 27:\n _context3.prev = 27;\n\n if (callId == state.asyncId) {\n state.asyncId = parentId;\n state.asyncTo = parentId ? prevTo : undefined;\n state.promise = parentId ? prevPromise : undefined;\n }\n\n return _context3.finish(27);\n\n case 30:\n if (is.fun(onRest)) {\n raf.batchedUpdates(function () {\n onRest(result, target, target.item);\n });\n }\n\n return _context3.abrupt(\"return\", result);\n\n case 32:\n case \"end\":\n return _context3.stop();\n }\n }\n }, _callee3, null, [[9, 16, 27, 30]]);\n }))();\n}\n\nfunction stopAsync(state, cancelId) {\n flush(state.timeouts, function (t) {\n return t.cancel();\n });\n state.pauseQueue.clear();\n state.resumeQueue.clear();\n state.asyncId = state.asyncTo = state.promise = undefined;\n if (cancelId) state.cancelId = cancelId;\n}\n\nvar BailSignal = /*#__PURE__*/function (_Error) {\n _inherits(BailSignal, _Error);\n\n var _super = _createSuper(BailSignal);\n\n function BailSignal() {\n var _this;\n\n _classCallCheck(this, BailSignal);\n\n _this = _super.call(this, 'An async animation has been interrupted. You see this error because you ' + 'forgot to use `await` or `.catch(...)` on its returned promise.');\n _this.result = void 0;\n return _this;\n }\n\n return _createClass(BailSignal);\n}( /*#__PURE__*/_wrapNativeSuper(Error));\n\nvar SkipAniamtionSignal = /*#__PURE__*/function (_Error2) {\n _inherits(SkipAniamtionSignal, _Error2);\n\n var _super2 = _createSuper(SkipAniamtionSignal);\n\n function SkipAniamtionSignal() {\n var _this2;\n\n _classCallCheck(this, SkipAniamtionSignal);\n\n _this2 = _super2.call(this, 'SkipAnimationSignal');\n _this2.result = void 0;\n return _this2;\n }\n\n return _createClass(SkipAniamtionSignal);\n}( /*#__PURE__*/_wrapNativeSuper(Error));\n\nvar isFrameValue = function isFrameValue(value) {\n return value instanceof FrameValue;\n};\n\nvar nextId$1 = 1;\n\nvar FrameValue = /*#__PURE__*/function (_FluidValue) {\n _inherits(FrameValue, _FluidValue);\n\n var _super3 = _createSuper(FrameValue);\n\n function FrameValue() {\n var _this3;\n\n _classCallCheck(this, FrameValue);\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n _this3 = _super3.call.apply(_super3, [this].concat(args));\n _this3.id = nextId$1++;\n _this3.key = void 0;\n _this3._priority = 0;\n return _this3;\n }\n\n _createClass(FrameValue, [{\n key: \"priority\",\n get: function get() {\n return this._priority;\n },\n set: function set(priority) {\n if (this._priority != priority) {\n this._priority = priority;\n\n this._onPriorityChange(priority);\n }\n }\n }, {\n key: \"get\",\n value: function get() {\n var node = getAnimated(this);\n return node && node.getValue();\n }\n }, {\n key: \"to\",\n value: function to() {\n for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n args[_key3] = arguments[_key3];\n }\n\n return Globals.to(this, args);\n }\n }, {\n key: \"interpolate\",\n value: function interpolate() {\n deprecateInterpolate();\n\n for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {\n args[_key4] = arguments[_key4];\n }\n\n return Globals.to(this, args);\n }\n }, {\n key: \"toJSON\",\n value: function toJSON() {\n return this.get();\n }\n }, {\n key: \"observerAdded\",\n value: function observerAdded(count) {\n if (count == 1) this._attach();\n }\n }, {\n key: \"observerRemoved\",\n value: function observerRemoved(count) {\n if (count == 0) this._detach();\n }\n }, {\n key: \"_attach\",\n value: function _attach() {}\n }, {\n key: \"_detach\",\n value: function _detach() {}\n }, {\n key: \"_onChange\",\n value: function _onChange(value) {\n var idle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n callFluidObservers(this, {\n type: 'change',\n parent: this,\n value: value,\n idle: idle\n });\n }\n }, {\n key: \"_onPriorityChange\",\n value: function _onPriorityChange(priority) {\n if (!this.idle) {\n frameLoop.sort(this);\n }\n\n callFluidObservers(this, {\n type: 'priority',\n parent: this,\n priority: priority\n });\n }\n }]);\n\n return FrameValue;\n}(FluidValue);\n\nvar $P = Symbol.for('SpringPhase');\nvar HAS_ANIMATED = 1;\nvar IS_ANIMATING = 2;\nvar IS_PAUSED = 4;\n\nvar hasAnimated = function hasAnimated(target) {\n return (target[$P] & HAS_ANIMATED) > 0;\n};\n\nvar isAnimating = function isAnimating(target) {\n return (target[$P] & IS_ANIMATING) > 0;\n};\n\nvar isPaused = function isPaused(target) {\n return (target[$P] & IS_PAUSED) > 0;\n};\n\nvar setActiveBit = function setActiveBit(target, active) {\n return active ? target[$P] |= IS_ANIMATING | HAS_ANIMATED : target[$P] &= ~IS_ANIMATING;\n};\n\nvar setPausedBit = function setPausedBit(target, paused) {\n return paused ? target[$P] |= IS_PAUSED : target[$P] &= ~IS_PAUSED;\n};\n\nvar SpringValue = /*#__PURE__*/function (_FrameValue) {\n _inherits(SpringValue, _FrameValue);\n\n var _super4 = _createSuper(SpringValue);\n\n function SpringValue(arg1, arg2) {\n var _this4;\n\n _classCallCheck(this, SpringValue);\n\n _this4 = _super4.call(this);\n _this4.key = void 0;\n _this4.animation = new Animation();\n _this4.queue = void 0;\n _this4.defaultProps = {};\n _this4._state = {\n paused: false,\n delayed: false,\n pauseQueue: new Set(),\n resumeQueue: new Set(),\n timeouts: new Set()\n };\n _this4._pendingCalls = new Set();\n _this4._lastCallId = 0;\n _this4._lastToId = 0;\n _this4._memoizedDuration = 0;\n\n if (!is.und(arg1) || !is.und(arg2)) {\n var props = is.obj(arg1) ? _extends({}, arg1) : _extends({}, arg2, {\n from: arg1\n });\n\n if (is.und(props.default)) {\n props.default = true;\n }\n\n _this4.start(props);\n }\n\n return _this4;\n }\n\n _createClass(SpringValue, [{\n key: \"idle\",\n get: function get() {\n return !(isAnimating(this) || this._state.asyncTo) || isPaused(this);\n }\n }, {\n key: \"goal\",\n get: function get() {\n return getFluidValue(this.animation.to);\n }\n }, {\n key: \"velocity\",\n get: function get() {\n var node = getAnimated(this);\n return node instanceof AnimatedValue ? node.lastVelocity || 0 : node.getPayload().map(function (node) {\n return node.lastVelocity || 0;\n });\n }\n }, {\n key: \"hasAnimated\",\n get: function get() {\n return hasAnimated(this);\n }\n }, {\n key: \"isAnimating\",\n get: function get() {\n return isAnimating(this);\n }\n }, {\n key: \"isPaused\",\n get: function get() {\n return isPaused(this);\n }\n }, {\n key: \"isDelayed\",\n get: function get() {\n return this._state.delayed;\n }\n }, {\n key: \"advance\",\n value: function advance(dt) {\n var _this5 = this;\n\n var idle = true;\n var changed = false;\n var anim = this.animation;\n var config = anim.config,\n toValues = anim.toValues;\n var payload = getPayload(anim.to);\n\n if (!payload && hasFluidValue(anim.to)) {\n toValues = toArray(getFluidValue(anim.to));\n }\n\n anim.values.forEach(function (node, i) {\n if (node.done) return;\n var to = node.constructor == AnimatedString ? 1 : payload ? payload[i].lastPosition : toValues[i];\n var finished = anim.immediate;\n var position = to;\n\n if (!finished) {\n position = node.lastPosition;\n\n if (config.tension <= 0) {\n node.done = true;\n return;\n }\n\n var elapsed = node.elapsedTime += dt;\n var from = anim.fromValues[i];\n var v0 = node.v0 != null ? node.v0 : node.v0 = is.arr(config.velocity) ? config.velocity[i] : config.velocity;\n var velocity;\n\n if (!is.und(config.duration)) {\n var p = 1;\n\n if (config.duration > 0) {\n if (_this5._memoizedDuration !== config.duration) {\n _this5._memoizedDuration = config.duration;\n\n if (node.durationProgress > 0) {\n node.elapsedTime = config.duration * node.durationProgress;\n elapsed = node.elapsedTime += dt;\n }\n }\n\n p = (config.progress || 0) + elapsed / _this5._memoizedDuration;\n p = p > 1 ? 1 : p < 0 ? 0 : p;\n node.durationProgress = p;\n }\n\n position = from + config.easing(p) * (to - from);\n velocity = (position - node.lastPosition) / dt;\n finished = p == 1;\n } else if (config.decay) {\n var decay = config.decay === true ? 0.998 : config.decay;\n var e = Math.exp(-(1 - decay) * elapsed);\n position = from + v0 / (1 - decay) * (1 - e);\n finished = Math.abs(node.lastPosition - position) < 0.1;\n velocity = v0 * e;\n } else {\n velocity = node.lastVelocity == null ? v0 : node.lastVelocity;\n var precision = config.precision || (from == to ? 0.005 : Math.min(1, Math.abs(to - from) * 0.001));\n var restVelocity = config.restVelocity || precision / 10;\n var bounceFactor = config.clamp ? 0 : config.bounce;\n var canBounce = !is.und(bounceFactor);\n var isGrowing = from == to ? node.v0 > 0 : from < to;\n var isMoving;\n var isBouncing = false;\n var step = 1;\n var numSteps = Math.ceil(dt / step);\n\n for (var n = 0; n < numSteps; ++n) {\n isMoving = Math.abs(velocity) > restVelocity;\n\n if (!isMoving) {\n finished = Math.abs(to - position) <= precision;\n\n if (finished) {\n break;\n }\n }\n\n if (canBounce) {\n isBouncing = position == to || position > to == isGrowing;\n\n if (isBouncing) {\n velocity = -velocity * bounceFactor;\n position = to;\n }\n }\n\n var springForce = -config.tension * 0.000001 * (position - to);\n var dampingForce = -config.friction * 0.001 * velocity;\n var acceleration = (springForce + dampingForce) / config.mass;\n velocity = velocity + acceleration * step;\n position = position + velocity * step;\n }\n }\n\n node.lastVelocity = velocity;\n\n if (Number.isNaN(position)) {\n console.warn(\"Got NaN while animating:\", _this5);\n finished = true;\n }\n }\n\n if (payload && !payload[i].done) {\n finished = false;\n }\n\n if (finished) {\n node.done = true;\n } else {\n idle = false;\n }\n\n if (node.setValue(position, config.round)) {\n changed = true;\n }\n });\n var node = getAnimated(this);\n var currVal = node.getValue();\n\n if (idle) {\n var finalVal = getFluidValue(anim.to);\n\n if ((currVal !== finalVal || changed) && !config.decay) {\n node.setValue(finalVal);\n\n this._onChange(finalVal);\n } else if (changed && config.decay) {\n this._onChange(currVal);\n }\n\n this._stop();\n } else if (changed) {\n this._onChange(currVal);\n }\n }\n }, {\n key: \"set\",\n value: function set(value) {\n var _this6 = this;\n\n raf.batchedUpdates(function () {\n _this6._stop();\n\n _this6._focus(value);\n\n _this6._set(value);\n });\n return this;\n }\n }, {\n key: \"pause\",\n value: function pause() {\n this._update({\n pause: true\n });\n }\n }, {\n key: \"resume\",\n value: function resume() {\n this._update({\n pause: false\n });\n }\n }, {\n key: \"finish\",\n value: function finish() {\n var _this7 = this;\n\n if (isAnimating(this)) {\n var _this$animation = this.animation,\n _to = _this$animation.to,\n _config = _this$animation.config;\n raf.batchedUpdates(function () {\n _this7._onStart();\n\n if (!_config.decay) {\n _this7._set(_to, false);\n }\n\n _this7._stop();\n });\n }\n\n return this;\n }\n }, {\n key: \"update\",\n value: function update(props) {\n var queue = this.queue || (this.queue = []);\n queue.push(props);\n return this;\n }\n }, {\n key: \"start\",\n value: function start(to, arg2) {\n var _this8 = this;\n\n var queue;\n\n if (!is.und(to)) {\n queue = [is.obj(to) ? to : _extends({}, arg2, {\n to: to\n })];\n } else {\n queue = this.queue || [];\n this.queue = [];\n }\n\n return Promise.all(queue.map(function (props) {\n var up = _this8._update(props);\n\n return up;\n })).then(function (results) {\n return getCombinedResult(_this8, results);\n });\n }\n }, {\n key: \"stop\",\n value: function stop(cancel) {\n var _this9 = this;\n\n var to = this.animation.to;\n\n this._focus(this.get());\n\n stopAsync(this._state, cancel && this._lastCallId);\n raf.batchedUpdates(function () {\n return _this9._stop(to, cancel);\n });\n return this;\n }\n }, {\n key: \"reset\",\n value: function reset() {\n this._update({\n reset: true\n });\n }\n }, {\n key: \"eventObserved\",\n value: function eventObserved(event) {\n if (event.type == 'change') {\n this._start();\n } else if (event.type == 'priority') {\n this.priority = event.priority + 1;\n }\n }\n }, {\n key: \"_prepareNode\",\n value: function _prepareNode(props) {\n var key = this.key || '';\n var to = props.to,\n from = props.from;\n to = is.obj(to) ? to[key] : to;\n\n if (to == null || isAsyncTo(to)) {\n to = undefined;\n }\n\n from = is.obj(from) ? from[key] : from;\n\n if (from == null) {\n from = undefined;\n }\n\n var range = {\n to: to,\n from: from\n };\n\n if (!hasAnimated(this)) {\n if (props.reverse) {\n var _ref6 = [from, to];\n to = _ref6[0];\n from = _ref6[1];\n }\n\n from = getFluidValue(from);\n\n if (!is.und(from)) {\n this._set(from);\n } else if (!getAnimated(this)) {\n this._set(to);\n }\n }\n\n return range;\n }\n }, {\n key: \"_update\",\n value: function _update(_ref, isLoop) {\n var _this10 = this;\n\n var props = _extends({}, _ref);\n\n var key = this.key,\n defaultProps = this.defaultProps;\n if (props.default) Object.assign(defaultProps, getDefaultProps(props, function (value, prop) {\n return /^on/.test(prop) ? resolveProp(value, key) : value;\n }));\n mergeActiveFn(this, props, 'onProps');\n sendEvent(this, 'onProps', props, this);\n\n var range = this._prepareNode(props);\n\n if (Object.isFrozen(this)) {\n throw Error('Cannot animate a `SpringValue` object that is frozen. ' + 'Did you forget to pass your component to `animated(...)` before animating its props?');\n }\n\n var state = this._state;\n return scheduleProps(++this._lastCallId, {\n key: key,\n props: props,\n defaultProps: defaultProps,\n state: state,\n actions: {\n pause: function pause() {\n if (!isPaused(_this10)) {\n setPausedBit(_this10, true);\n flushCalls(state.pauseQueue);\n sendEvent(_this10, 'onPause', getFinishedResult(_this10, checkFinished(_this10, _this10.animation.to)), _this10);\n }\n },\n resume: function resume() {\n if (isPaused(_this10)) {\n setPausedBit(_this10, false);\n\n if (isAnimating(_this10)) {\n _this10._resume();\n }\n\n flushCalls(state.resumeQueue);\n sendEvent(_this10, 'onResume', getFinishedResult(_this10, checkFinished(_this10, _this10.animation.to)), _this10);\n }\n },\n start: this._merge.bind(this, range)\n }\n }).then(function (result) {\n if (props.loop && result.finished && !(isLoop && result.noop)) {\n var nextProps = createLoopUpdate(props);\n\n if (nextProps) {\n return _this10._update(nextProps, true);\n }\n }\n\n return result;\n });\n }\n }, {\n key: \"_merge\",\n value: function _merge(range, props, resolve) {\n var _this11 = this;\n\n if (props.cancel) {\n this.stop(true);\n return resolve(getCancelledResult(this));\n }\n\n var hasToProp = !is.und(range.to);\n var hasFromProp = !is.und(range.from);\n\n if (hasToProp || hasFromProp) {\n if (props.callId > this._lastToId) {\n this._lastToId = props.callId;\n } else {\n return resolve(getCancelledResult(this));\n }\n }\n\n var key = this.key,\n defaultProps = this.defaultProps,\n anim = this.animation;\n var prevTo = anim.to,\n prevFrom = anim.from;\n var _range$to = range.to,\n to = _range$to === void 0 ? prevTo : _range$to,\n _range$from = range.from,\n from = _range$from === void 0 ? prevFrom : _range$from;\n\n if (hasFromProp && !hasToProp && (!props.default || is.und(to))) {\n to = from;\n }\n\n if (props.reverse) {\n var _ref7 = [from, to];\n to = _ref7[0];\n from = _ref7[1];\n }\n\n var hasFromChanged = !isEqual(from, prevFrom);\n\n if (hasFromChanged) {\n anim.from = from;\n }\n\n from = getFluidValue(from);\n var hasToChanged = !isEqual(to, prevTo);\n\n if (hasToChanged) {\n this._focus(to);\n }\n\n var hasAsyncTo = isAsyncTo(props.to);\n var config = anim.config;\n var decay = config.decay,\n velocity = config.velocity;\n\n if (hasToProp || hasFromProp) {\n config.velocity = 0;\n }\n\n if (props.config && !hasAsyncTo) {\n mergeConfig(config, callProp(props.config, key), props.config !== defaultProps.config ? callProp(defaultProps.config, key) : void 0);\n }\n\n var node = getAnimated(this);\n\n if (!node || is.und(to)) {\n return resolve(getFinishedResult(this, true));\n }\n\n var reset = is.und(props.reset) ? hasFromProp && !props.default : !is.und(from) && matchProp(props.reset, key);\n var value = reset ? from : this.get();\n var goal = computeGoal(to);\n var isAnimatable = is.num(goal) || is.arr(goal) || isAnimatedString(goal);\n var immediate = !hasAsyncTo && (!isAnimatable || matchProp(defaultProps.immediate || props.immediate, key));\n\n if (hasToChanged) {\n var nodeType = getAnimatedType(to);\n\n if (nodeType !== node.constructor) {\n if (immediate) {\n node = this._set(goal);\n } else throw Error(\"Cannot animate between \".concat(node.constructor.name, \" and \").concat(nodeType.name, \", as the \\\"to\\\" prop suggests\"));\n }\n }\n\n var goalType = node.constructor;\n var started = hasFluidValue(to);\n var finished = false;\n\n if (!started) {\n var hasValueChanged = reset || !hasAnimated(this) && hasFromChanged;\n\n if (hasToChanged || hasValueChanged) {\n finished = isEqual(computeGoal(value), goal);\n started = !finished;\n }\n\n if (!isEqual(anim.immediate, immediate) && !immediate || !isEqual(config.decay, decay) || !isEqual(config.velocity, velocity)) {\n started = true;\n }\n }\n\n if (finished && isAnimating(this)) {\n if (anim.changed && !reset) {\n started = true;\n } else if (!started) {\n this._stop(prevTo);\n }\n }\n\n if (!hasAsyncTo) {\n if (started || hasFluidValue(prevTo)) {\n anim.values = node.getPayload();\n anim.toValues = hasFluidValue(to) ? null : goalType == AnimatedString ? [1] : toArray(goal);\n }\n\n if (anim.immediate != immediate) {\n anim.immediate = immediate;\n\n if (!immediate && !reset) {\n this._set(prevTo);\n }\n }\n\n if (started) {\n var onRest = anim.onRest;\n each(ACTIVE_EVENTS, function (type) {\n return mergeActiveFn(_this11, props, type);\n });\n var result = getFinishedResult(this, checkFinished(this, prevTo));\n flushCalls(this._pendingCalls, result);\n\n this._pendingCalls.add(resolve);\n\n if (anim.changed) raf.batchedUpdates(function () {\n anim.changed = !reset;\n onRest == null ? void 0 : onRest(result, _this11);\n\n if (reset) {\n callProp(defaultProps.onRest, result);\n } else {\n anim.onStart == null ? void 0 : anim.onStart(result, _this11);\n }\n });\n }\n }\n\n if (reset) {\n this._set(value);\n }\n\n if (hasAsyncTo) {\n resolve(runAsync(props.to, props, this._state, this));\n } else if (started) {\n this._start();\n } else if (isAnimating(this) && !hasToChanged) {\n this._pendingCalls.add(resolve);\n } else {\n resolve(getNoopResult(value));\n }\n }\n }, {\n key: \"_focus\",\n value: function _focus(value) {\n var anim = this.animation;\n\n if (value !== anim.to) {\n if (getFluidObservers(this)) {\n this._detach();\n }\n\n anim.to = value;\n\n if (getFluidObservers(this)) {\n this._attach();\n }\n }\n }\n }, {\n key: \"_attach\",\n value: function _attach() {\n var priority = 0;\n var to = this.animation.to;\n\n if (hasFluidValue(to)) {\n addFluidObserver(to, this);\n\n if (isFrameValue(to)) {\n priority = to.priority + 1;\n }\n }\n\n this.priority = priority;\n }\n }, {\n key: \"_detach\",\n value: function _detach() {\n var to = this.animation.to;\n\n if (hasFluidValue(to)) {\n removeFluidObserver(to, this);\n }\n }\n }, {\n key: \"_set\",\n value: function _set(arg) {\n var _this12 = this;\n\n var idle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;\n var value = getFluidValue(arg);\n\n if (!is.und(value)) {\n var oldNode = getAnimated(this);\n\n if (!oldNode || !isEqual(value, oldNode.getValue())) {\n var nodeType = getAnimatedType(value);\n\n if (!oldNode || oldNode.constructor != nodeType) {\n setAnimated(this, nodeType.create(value));\n } else {\n oldNode.setValue(value);\n }\n\n if (oldNode) {\n raf.batchedUpdates(function () {\n _this12._onChange(value, idle);\n });\n }\n }\n }\n\n return getAnimated(this);\n }\n }, {\n key: \"_onStart\",\n value: function _onStart() {\n var anim = this.animation;\n\n if (!anim.changed) {\n anim.changed = true;\n sendEvent(this, 'onStart', getFinishedResult(this, checkFinished(this, anim.to)), this);\n }\n }\n }, {\n key: \"_onChange\",\n value: function _onChange(value, idle) {\n if (!idle) {\n this._onStart();\n\n callProp(this.animation.onChange, value, this);\n }\n\n callProp(this.defaultProps.onChange, value, this);\n\n _get(_getPrototypeOf(SpringValue.prototype), \"_onChange\", this).call(this, value, idle);\n }\n }, {\n key: \"_start\",\n value: function _start() {\n var anim = this.animation;\n getAnimated(this).reset(getFluidValue(anim.to));\n\n if (!anim.immediate) {\n anim.fromValues = anim.values.map(function (node) {\n return node.lastPosition;\n });\n }\n\n if (!isAnimating(this)) {\n setActiveBit(this, true);\n\n if (!isPaused(this)) {\n this._resume();\n }\n }\n }\n }, {\n key: \"_resume\",\n value: function _resume() {\n if (Globals.skipAnimation) {\n this.finish();\n } else {\n frameLoop.start(this);\n }\n }\n }, {\n key: \"_stop\",\n value: function _stop(goal, cancel) {\n if (isAnimating(this)) {\n setActiveBit(this, false);\n var anim = this.animation;\n each(anim.values, function (node) {\n node.done = true;\n });\n\n if (anim.toValues) {\n anim.onChange = anim.onPause = anim.onResume = undefined;\n }\n\n callFluidObservers(this, {\n type: 'idle',\n parent: this\n });\n var result = cancel ? getCancelledResult(this.get()) : getFinishedResult(this.get(), checkFinished(this, goal != null ? goal : anim.to));\n flushCalls(this._pendingCalls, result);\n\n if (anim.changed) {\n anim.changed = false;\n sendEvent(this, 'onRest', result, this);\n }\n }\n }\n }]);\n\n return SpringValue;\n}(FrameValue);\n\nfunction checkFinished(target, to) {\n var goal = computeGoal(to);\n var value = computeGoal(target.get());\n return isEqual(value, goal);\n}\n\nfunction createLoopUpdate(props) {\n var loop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : props.loop;\n var to = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : props.to;\n var loopRet = callProp(loop);\n\n if (loopRet) {\n var overrides = loopRet !== true && inferTo(loopRet);\n var reverse = (overrides || props).reverse;\n var reset = !overrides || overrides.reset;\n return createUpdate(_extends({}, props, {\n loop: loop,\n default: false,\n pause: undefined,\n to: !reverse || isAsyncTo(to) ? to : undefined,\n from: reset ? props.from : undefined,\n reset: reset\n }, overrides));\n }\n}\n\nfunction createUpdate(props) {\n var _props2 = props = inferTo(props),\n to = _props2.to,\n from = _props2.from;\n\n var keys = new Set();\n if (is.obj(to)) findDefined(to, keys);\n if (is.obj(from)) findDefined(from, keys);\n props.keys = keys.size ? Array.from(keys) : null;\n return props;\n}\n\nfunction declareUpdate(props) {\n var update = createUpdate(props);\n\n if (is.und(update.default)) {\n update.default = getDefaultProps(update);\n }\n\n return update;\n}\n\nfunction findDefined(values, keys) {\n eachProp(values, function (value, key) {\n return value != null && keys.add(key);\n });\n}\n\nvar ACTIVE_EVENTS = ['onStart', 'onRest', 'onChange', 'onPause', 'onResume'];\n\nfunction mergeActiveFn(target, props, type) {\n target.animation[type] = props[type] !== getDefaultProp(props, type) ? resolveProp(props[type], target.key) : undefined;\n}\n\nfunction sendEvent(target, type) {\n var _target$animation$typ2, _target$defaultProps$2;\n\n var _target$animation$typ, _target$animation, _target$defaultProps$, _target$defaultProps;\n\n for (var _len5 = arguments.length, args = new Array(_len5 > 2 ? _len5 - 2 : 0), _key5 = 2; _key5 < _len5; _key5++) {\n args[_key5 - 2] = arguments[_key5];\n }\n\n (_target$animation$typ = (_target$animation = target.animation)[type]) == null ? void 0 : (_target$animation$typ2 = _target$animation$typ).call.apply(_target$animation$typ2, [_target$animation].concat(args));\n (_target$defaultProps$ = (_target$defaultProps = target.defaultProps)[type]) == null ? void 0 : (_target$defaultProps$2 = _target$defaultProps$).call.apply(_target$defaultProps$2, [_target$defaultProps].concat(args));\n}\n\nvar BATCHED_EVENTS = ['onStart', 'onChange', 'onRest'];\nvar nextId = 1;\n\nvar Controller = /*#__PURE__*/function () {\n function Controller(props, flush) {\n _classCallCheck(this, Controller);\n\n this.id = nextId++;\n this.springs = {};\n this.queue = [];\n this.ref = void 0;\n this._flush = void 0;\n this._initialProps = void 0;\n this._lastAsyncId = 0;\n this._active = new Set();\n this._changed = new Set();\n this._started = false;\n this._item = void 0;\n this._state = {\n paused: false,\n pauseQueue: new Set(),\n resumeQueue: new Set(),\n timeouts: new Set()\n };\n this._events = {\n onStart: new Map(),\n onChange: new Map(),\n onRest: new Map()\n };\n this._onFrame = this._onFrame.bind(this);\n\n if (flush) {\n this._flush = flush;\n }\n\n if (props) {\n this.start(_extends({\n default: true\n }, props));\n }\n }\n\n _createClass(Controller, [{\n key: \"idle\",\n get: function get() {\n return !this._state.asyncTo && Object.values(this.springs).every(function (spring) {\n return spring.idle && !spring.isDelayed && !spring.isPaused;\n });\n }\n }, {\n key: \"item\",\n get: function get() {\n return this._item;\n },\n set: function set(item) {\n this._item = item;\n }\n }, {\n key: \"get\",\n value: function get() {\n var values = {};\n this.each(function (spring, key) {\n return values[key] = spring.get();\n });\n return values;\n }\n }, {\n key: \"set\",\n value: function set(values) {\n for (var key in values) {\n var value = values[key];\n\n if (!is.und(value)) {\n this.springs[key].set(value);\n }\n }\n }\n }, {\n key: \"update\",\n value: function update(props) {\n if (props) {\n this.queue.push(createUpdate(props));\n }\n\n return this;\n }\n }, {\n key: \"start\",\n value: function start(props) {\n var queue = this.queue;\n\n if (props) {\n queue = toArray(props).map(createUpdate);\n } else {\n this.queue = [];\n }\n\n if (this._flush) {\n return this._flush(this, queue);\n }\n\n prepareKeys(this, queue);\n return flushUpdateQueue(this, queue);\n }\n }, {\n key: \"stop\",\n value: function stop(arg, keys) {\n if (arg !== !!arg) {\n keys = arg;\n }\n\n if (keys) {\n var springs = this.springs;\n each(toArray(keys), function (key) {\n return springs[key].stop(!!arg);\n });\n } else {\n stopAsync(this._state, this._lastAsyncId);\n this.each(function (spring) {\n return spring.stop(!!arg);\n });\n }\n\n return this;\n }\n }, {\n key: \"pause\",\n value: function pause(keys) {\n if (is.und(keys)) {\n this.start({\n pause: true\n });\n } else {\n var springs = this.springs;\n each(toArray(keys), function (key) {\n return springs[key].pause();\n });\n }\n\n return this;\n }\n }, {\n key: \"resume\",\n value: function resume(keys) {\n if (is.und(keys)) {\n this.start({\n pause: false\n });\n } else {\n var springs = this.springs;\n each(toArray(keys), function (key) {\n return springs[key].resume();\n });\n }\n\n return this;\n }\n }, {\n key: \"each\",\n value: function each(iterator) {\n eachProp(this.springs, iterator);\n }\n }, {\n key: \"_onFrame\",\n value: function _onFrame() {\n var _this13 = this;\n\n var _this$_events = this._events,\n onStart = _this$_events.onStart,\n onChange = _this$_events.onChange,\n onRest = _this$_events.onRest;\n var active = this._active.size > 0;\n var changed = this._changed.size > 0;\n\n if (active && !this._started || changed && !this._started) {\n this._started = true;\n flush(onStart, function (_ref8) {\n var _ref9 = _slicedToArray(_ref8, 2),\n onStart = _ref9[0],\n result = _ref9[1];\n\n result.value = _this13.get();\n onStart(result, _this13, _this13._item);\n });\n }\n\n var idle = !active && this._started;\n var values = changed || idle && onRest.size ? this.get() : null;\n\n if (changed && onChange.size) {\n flush(onChange, function (_ref10) {\n var _ref11 = _slicedToArray(_ref10, 2),\n onChange = _ref11[0],\n result = _ref11[1];\n\n result.value = values;\n onChange(result, _this13, _this13._item);\n });\n }\n\n if (idle) {\n this._started = false;\n flush(onRest, function (_ref12) {\n var _ref13 = _slicedToArray(_ref12, 2),\n onRest = _ref13[0],\n result = _ref13[1];\n\n result.value = values;\n onRest(result, _this13, _this13._item);\n });\n }\n }\n }, {\n key: \"eventObserved\",\n value: function eventObserved(event) {\n if (event.type == 'change') {\n this._changed.add(event.parent);\n\n if (!event.idle) {\n this._active.add(event.parent);\n }\n } else if (event.type == 'idle') {\n this._active.delete(event.parent);\n } else return;\n\n raf.onFrame(this._onFrame);\n }\n }]);\n\n return Controller;\n}();\n\nfunction flushUpdateQueue(ctrl, queue) {\n return Promise.all(queue.map(function (props) {\n return flushUpdate(ctrl, props);\n })).then(function (results) {\n return getCombinedResult(ctrl, results);\n });\n}\n\nfunction flushUpdate(_x2, _x3, _x4) {\n return _flushUpdate.apply(this, arguments);\n}\n\nfunction _flushUpdate() {\n _flushUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(ctrl, props, isLoop) {\n var keys, to, from, loop, onRest, onResolve, defaults, asyncTo, state, promises, cancel, result, nextProps;\n return _regeneratorRuntime.wrap(function _callee4$(_context4) {\n while (1) {\n switch (_context4.prev = _context4.next) {\n case 0:\n keys = props.keys, to = props.to, from = props.from, loop = props.loop, onRest = props.onRest, onResolve = props.onResolve;\n defaults = is.obj(props.default) && props.default;\n\n if (loop) {\n props.loop = false;\n }\n\n if (to === false) props.to = null;\n if (from === false) props.from = null;\n asyncTo = is.arr(to) || is.fun(to) ? to : undefined;\n\n if (asyncTo) {\n props.to = undefined;\n props.onRest = undefined;\n\n if (defaults) {\n defaults.onRest = undefined;\n }\n } else {\n each(BATCHED_EVENTS, function (key) {\n var handler = props[key];\n\n if (is.fun(handler)) {\n var queue = ctrl['_events'][key];\n\n props[key] = function (_ref20) {\n var finished = _ref20.finished,\n cancelled = _ref20.cancelled;\n var result = queue.get(handler);\n\n if (result) {\n if (!finished) result.finished = false;\n if (cancelled) result.cancelled = true;\n } else {\n queue.set(handler, {\n value: null,\n finished: finished || false,\n cancelled: cancelled || false\n });\n }\n };\n\n if (defaults) {\n defaults[key] = props[key];\n }\n }\n });\n }\n\n state = ctrl['_state'];\n\n if (props.pause === !state.paused) {\n state.paused = props.pause;\n flushCalls(props.pause ? state.pauseQueue : state.resumeQueue);\n } else if (state.paused) {\n props.pause = true;\n }\n\n promises = (keys || Object.keys(ctrl.springs)).map(function (key) {\n return ctrl.springs[key].start(props);\n });\n cancel = props.cancel === true || getDefaultProp(props, 'cancel') === true;\n\n if (asyncTo || cancel && state.asyncId) {\n promises.push(scheduleProps(++ctrl['_lastAsyncId'], {\n props: props,\n state: state,\n actions: {\n pause: noop,\n resume: noop,\n start: function start(props, resolve) {\n if (cancel) {\n stopAsync(state, ctrl['_lastAsyncId']);\n resolve(getCancelledResult(ctrl));\n } else {\n props.onRest = onRest;\n resolve(runAsync(asyncTo, props, state, ctrl));\n }\n }\n }\n }));\n }\n\n if (!state.paused) {\n _context4.next = 15;\n break;\n }\n\n _context4.next = 15;\n return new Promise(function (resume) {\n state.resumeQueue.add(resume);\n });\n\n case 15:\n _context4.t0 = getCombinedResult;\n _context4.t1 = ctrl;\n _context4.next = 19;\n return Promise.all(promises);\n\n case 19:\n _context4.t2 = _context4.sent;\n result = (0, _context4.t0)(_context4.t1, _context4.t2);\n\n if (!(loop && result.finished && !(isLoop && result.noop))) {\n _context4.next = 26;\n break;\n }\n\n nextProps = createLoopUpdate(props, loop, to);\n\n if (!nextProps) {\n _context4.next = 26;\n break;\n }\n\n prepareKeys(ctrl, [nextProps]);\n return _context4.abrupt(\"return\", flushUpdate(ctrl, nextProps, true));\n\n case 26:\n if (onResolve) {\n raf.batchedUpdates(function () {\n return onResolve(result, ctrl, ctrl.item);\n });\n }\n\n return _context4.abrupt(\"return\", result);\n\n case 28:\n case \"end\":\n return _context4.stop();\n }\n }\n }, _callee4);\n }));\n return _flushUpdate.apply(this, arguments);\n}\n\nfunction getSprings(ctrl, props) {\n var springs = _extends({}, ctrl.springs);\n\n if (props) {\n each(toArray(props), function (props) {\n if (is.und(props.keys)) {\n props = createUpdate(props);\n }\n\n if (!is.obj(props.to)) {\n props = _extends({}, props, {\n to: undefined\n });\n }\n\n prepareSprings(springs, props, function (key) {\n return createSpring(key);\n });\n });\n }\n\n setSprings(ctrl, springs);\n return springs;\n}\n\nfunction setSprings(ctrl, springs) {\n eachProp(springs, function (spring, key) {\n if (!ctrl.springs[key]) {\n ctrl.springs[key] = spring;\n addFluidObserver(spring, ctrl);\n }\n });\n}\n\nfunction createSpring(key, observer) {\n var spring = new SpringValue();\n spring.key = key;\n\n if (observer) {\n addFluidObserver(spring, observer);\n }\n\n return spring;\n}\n\nfunction prepareSprings(springs, props, create) {\n if (props.keys) {\n each(props.keys, function (key) {\n var spring = springs[key] || (springs[key] = create(key));\n spring['_prepareNode'](props);\n });\n }\n}\n\nfunction prepareKeys(ctrl, queue) {\n each(queue, function (props) {\n prepareSprings(ctrl.springs, props, function (key) {\n return createSpring(key, ctrl);\n });\n });\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nvar _excluded$3 = [\"children\"];\n\nvar SpringContext = function SpringContext(_ref) {\n var children = _ref.children,\n props = _objectWithoutPropertiesLoose(_ref, _excluded$3);\n\n var inherited = useContext(ctx);\n var pause = props.pause || !!inherited.pause,\n immediate = props.immediate || !!inherited.immediate;\n props = useMemoOne(function () {\n return {\n pause: pause,\n immediate: immediate\n };\n }, [pause, immediate]);\n var Provider = ctx.Provider;\n return React.createElement(Provider, {\n value: props\n }, children);\n};\n\nvar ctx = makeContext(SpringContext, {});\nSpringContext.Provider = ctx.Provider;\nSpringContext.Consumer = ctx.Consumer;\n\nfunction makeContext(target, init) {\n Object.assign(target, React.createContext(init));\n target.Provider._context = target;\n target.Consumer._context = target;\n return target;\n}\n\nvar SpringRef = function SpringRef() {\n var current = [];\n\n var SpringRef = function SpringRef(props) {\n deprecateDirectCall();\n var results = [];\n each(current, function (ctrl, i) {\n if (is.und(props)) {\n results.push(ctrl.start());\n } else {\n var _update2 = _getProps(props, ctrl, i);\n\n if (_update2) {\n results.push(ctrl.start(_update2));\n }\n }\n });\n return results;\n };\n\n SpringRef.current = current;\n\n SpringRef.add = function (ctrl) {\n if (!current.includes(ctrl)) {\n current.push(ctrl);\n }\n };\n\n SpringRef.delete = function (ctrl) {\n var i = current.indexOf(ctrl);\n if (~i) current.splice(i, 1);\n };\n\n SpringRef.pause = function () {\n var _arguments = arguments;\n each(current, function (ctrl) {\n return ctrl.pause.apply(ctrl, _toConsumableArray(_arguments));\n });\n return this;\n };\n\n SpringRef.resume = function () {\n var _arguments2 = arguments;\n each(current, function (ctrl) {\n return ctrl.resume.apply(ctrl, _toConsumableArray(_arguments2));\n });\n return this;\n };\n\n SpringRef.set = function (values) {\n each(current, function (ctrl) {\n return ctrl.set(values);\n });\n };\n\n SpringRef.start = function (props) {\n var _this14 = this;\n\n var results = [];\n each(current, function (ctrl, i) {\n if (is.und(props)) {\n results.push(ctrl.start());\n } else {\n var _update3 = _this14._getProps(props, ctrl, i);\n\n if (_update3) {\n results.push(ctrl.start(_update3));\n }\n }\n });\n return results;\n };\n\n SpringRef.stop = function () {\n var _arguments3 = arguments;\n each(current, function (ctrl) {\n return ctrl.stop.apply(ctrl, _toConsumableArray(_arguments3));\n });\n return this;\n };\n\n SpringRef.update = function (props) {\n var _this15 = this;\n\n each(current, function (ctrl, i) {\n return ctrl.update(_this15._getProps(props, ctrl, i));\n });\n return this;\n };\n\n var _getProps = function _getProps(arg, ctrl, index) {\n return is.fun(arg) ? arg(index, ctrl) : arg;\n };\n\n SpringRef._getProps = _getProps;\n return SpringRef;\n};\n\nfunction useSprings(length, props, deps) {\n var _arguments4 = arguments;\n var propsFn = is.fun(props) && props;\n if (propsFn && !deps) deps = [];\n var ref = useMemo(function () {\n return propsFn || _arguments4.length == 3 ? SpringRef() : void 0;\n }, []);\n var layoutId = useRef(0);\n var forceUpdate = useForceUpdate();\n var state = useMemo(function () {\n return {\n ctrls: [],\n queue: [],\n flush: function flush(ctrl, updates) {\n var springs = getSprings(ctrl, updates);\n var canFlushSync = layoutId.current > 0 && !state.queue.length && !Object.keys(springs).some(function (key) {\n return !ctrl.springs[key];\n });\n return canFlushSync ? flushUpdateQueue(ctrl, updates) : new Promise(function (resolve) {\n setSprings(ctrl, springs);\n state.queue.push(function () {\n resolve(flushUpdateQueue(ctrl, updates));\n });\n forceUpdate();\n });\n }\n };\n }, []);\n var ctrls = useRef(_toConsumableArray(state.ctrls));\n var updates = [];\n var prevLength = usePrev(length) || 0;\n useMemo(function () {\n each(ctrls.current.slice(length, prevLength), function (ctrl) {\n detachRefs(ctrl, ref);\n ctrl.stop(true);\n });\n ctrls.current.length = length;\n declareUpdates(prevLength, length);\n }, [length]);\n useMemo(function () {\n declareUpdates(0, Math.min(prevLength, length));\n }, deps);\n\n function declareUpdates(startIndex, endIndex) {\n for (var i = startIndex; i < endIndex; i++) {\n var ctrl = ctrls.current[i] || (ctrls.current[i] = new Controller(null, state.flush));\n\n var _update4 = propsFn ? propsFn(i, ctrl) : props[i];\n\n if (_update4) {\n updates[i] = declareUpdate(_update4);\n }\n }\n }\n\n var springs = ctrls.current.map(function (ctrl, i) {\n return getSprings(ctrl, updates[i]);\n });\n var context = useContext(SpringContext);\n var prevContext = usePrev(context);\n var hasContext = context !== prevContext && hasProps(context);\n useLayoutEffect(function () {\n layoutId.current++;\n state.ctrls = ctrls.current;\n var queue = state.queue;\n\n if (queue.length) {\n state.queue = [];\n each(queue, function (cb) {\n return cb();\n });\n }\n\n each(ctrls.current, function (ctrl, i) {\n ref == null ? void 0 : ref.add(ctrl);\n\n if (hasContext) {\n ctrl.start({\n default: context\n });\n }\n\n var update = updates[i];\n\n if (update) {\n replaceRef(ctrl, update.ref);\n\n if (ctrl.ref) {\n ctrl.queue.push(update);\n } else {\n ctrl.start(update);\n }\n }\n });\n });\n useOnce(function () {\n return function () {\n each(state.ctrls, function (ctrl) {\n return ctrl.stop(true);\n });\n };\n });\n var values = springs.map(function (x) {\n return _extends({}, x);\n });\n return ref ? [values, ref] : values;\n}\n\nfunction useSpring(props, deps) {\n var isFn = is.fun(props);\n\n var _useSprings = useSprings(1, isFn ? props : [props], isFn ? deps || [] : deps),\n _useSprings2 = _slicedToArray(_useSprings, 2),\n _useSprings2$ = _slicedToArray(_useSprings2[0], 1),\n values = _useSprings2$[0],\n ref = _useSprings2[1];\n\n return isFn || arguments.length == 2 ? [values, ref] : values;\n}\n\nvar initSpringRef = function initSpringRef() {\n return SpringRef();\n};\n\nvar useSpringRef = function useSpringRef() {\n return useState(initSpringRef)[0];\n};\n\nfunction useTrail(length, propsArg, deps) {\n var _passedRef;\n\n var propsFn = is.fun(propsArg) && propsArg;\n if (propsFn && !deps) deps = [];\n var reverse = true;\n var passedRef = undefined;\n var result = useSprings(length, function (i, ctrl) {\n var props = propsFn ? propsFn(i, ctrl) : propsArg;\n passedRef = props.ref;\n reverse = reverse && props.reverse;\n return props;\n }, deps || [{}]);\n var ref = (_passedRef = passedRef) != null ? _passedRef : result[1];\n useLayoutEffect(function () {\n each(ref.current, function (ctrl, i) {\n var parent = ref.current[i + (reverse ? 1 : -1)];\n\n if (parent) {\n ctrl.start({\n to: parent.springs\n });\n } else {\n ctrl.start();\n }\n });\n }, deps);\n\n if (propsFn || arguments.length == 3) {\n ref['_getProps'] = function (propsArg, ctrl, i) {\n var props = is.fun(propsArg) ? propsArg(i, ctrl) : propsArg;\n\n if (props) {\n var parent = ref.current[i + (props.reverse ? 1 : -1)];\n if (parent) props.to = parent.springs;\n return props;\n }\n };\n\n return result;\n }\n\n ref['start'] = function (propsArg) {\n var results = [];\n each(ref.current, function (ctrl, i) {\n var props = is.fun(propsArg) ? propsArg(i, ctrl) : propsArg;\n var parent = ref.current[i + (reverse ? 1 : -1)];\n\n if (parent) {\n results.push(ctrl.start(_extends({}, props, {\n to: parent.springs\n })));\n } else {\n results.push(ctrl.start(_extends({}, props)));\n }\n });\n return results;\n };\n\n return result[0];\n}\n\nvar TransitionPhase;\n\n(function (TransitionPhase) {\n TransitionPhase[\"MOUNT\"] = \"mount\";\n TransitionPhase[\"ENTER\"] = \"enter\";\n TransitionPhase[\"UPDATE\"] = \"update\";\n TransitionPhase[\"LEAVE\"] = \"leave\";\n})(TransitionPhase || (TransitionPhase = {}));\n\nfunction useTransition(data, props, deps) {\n var _arguments5 = arguments;\n var propsFn = is.fun(props) && props;\n\n var _ref14 = propsFn ? propsFn() : props,\n reset = _ref14.reset,\n sort = _ref14.sort,\n _ref14$trail = _ref14.trail,\n trail = _ref14$trail === void 0 ? 0 : _ref14$trail,\n _ref14$expires = _ref14.expires,\n expires = _ref14$expires === void 0 ? true : _ref14$expires,\n _ref14$exitBeforeEnte = _ref14.exitBeforeEnter,\n exitBeforeEnter = _ref14$exitBeforeEnte === void 0 ? false : _ref14$exitBeforeEnte,\n onDestroyed = _ref14.onDestroyed,\n propsRef = _ref14.ref,\n propsConfig = _ref14.config;\n\n var ref = useMemo(function () {\n return propsFn || _arguments5.length == 3 ? SpringRef() : void 0;\n }, []);\n var items = toArray(data);\n var transitions = [];\n var usedTransitions = useRef(null);\n var prevTransitions = reset ? null : usedTransitions.current;\n useLayoutEffect(function () {\n usedTransitions.current = transitions;\n });\n useOnce(function () {\n return function () {\n each(usedTransitions.current, function (t) {\n if (t.expired) {\n clearTimeout(t.expirationId);\n }\n\n detachRefs(t.ctrl, ref);\n t.ctrl.stop(true);\n });\n };\n });\n var keys = getKeys(items, propsFn ? propsFn() : props, prevTransitions);\n var expired = reset && usedTransitions.current || [];\n useLayoutEffect(function () {\n return each(expired, function (_ref15) {\n var ctrl = _ref15.ctrl,\n item = _ref15.item,\n key = _ref15.key;\n detachRefs(ctrl, ref);\n callProp(onDestroyed, item, key);\n });\n });\n var reused = [];\n if (prevTransitions) each(prevTransitions, function (t, i) {\n if (t.expired) {\n clearTimeout(t.expirationId);\n expired.push(t);\n } else {\n i = reused[i] = keys.indexOf(t.key);\n if (~i) transitions[i] = t;\n }\n });\n each(items, function (item, i) {\n if (!transitions[i]) {\n transitions[i] = {\n key: keys[i],\n item: item,\n phase: TransitionPhase.MOUNT,\n ctrl: new Controller()\n };\n transitions[i].ctrl.item = item;\n }\n });\n\n if (reused.length) {\n var i = -1;\n\n var _ref16 = propsFn ? propsFn() : props,\n leave = _ref16.leave;\n\n each(reused, function (keyIndex, prevIndex) {\n var t = prevTransitions[prevIndex];\n\n if (~keyIndex) {\n i = transitions.indexOf(t);\n transitions[i] = _extends({}, t, {\n item: items[keyIndex]\n });\n } else if (leave) {\n transitions.splice(++i, 0, t);\n }\n });\n }\n\n if (is.fun(sort)) {\n transitions.sort(function (a, b) {\n return sort(a.item, b.item);\n });\n }\n\n var delay = -trail;\n var forceUpdate = useForceUpdate();\n var defaultProps = getDefaultProps(props);\n var changes = new Map();\n var exitingTransitions = useRef(new Map());\n var forceChange = useRef(false);\n each(transitions, function (t, i) {\n var key = t.key;\n var prevPhase = t.phase;\n var p = propsFn ? propsFn() : props;\n var to;\n var phase;\n var propsDelay = callProp(p.delay || 0, key);\n\n if (prevPhase == TransitionPhase.MOUNT) {\n to = p.enter;\n phase = TransitionPhase.ENTER;\n } else {\n var isLeave = keys.indexOf(key) < 0;\n\n if (prevPhase != TransitionPhase.LEAVE) {\n if (isLeave) {\n to = p.leave;\n phase = TransitionPhase.LEAVE;\n } else if (to = p.update) {\n phase = TransitionPhase.UPDATE;\n } else return;\n } else if (!isLeave) {\n to = p.enter;\n phase = TransitionPhase.ENTER;\n } else return;\n }\n\n to = callProp(to, t.item, i);\n to = is.obj(to) ? inferTo(to) : {\n to: to\n };\n\n if (!to.config) {\n var _config2 = propsConfig || defaultProps.config;\n\n to.config = callProp(_config2, t.item, i, phase);\n }\n\n delay += trail;\n\n var payload = _extends({}, defaultProps, {\n delay: propsDelay + delay,\n ref: propsRef,\n immediate: p.immediate,\n reset: false\n }, to);\n\n if (phase == TransitionPhase.ENTER && is.und(payload.from)) {\n var _p = propsFn ? propsFn() : props;\n\n var from = is.und(_p.initial) || prevTransitions ? _p.from : _p.initial;\n payload.from = callProp(from, t.item, i);\n }\n\n var onResolve = payload.onResolve;\n\n payload.onResolve = function (result) {\n callProp(onResolve, result);\n var transitions = usedTransitions.current;\n var t = transitions.find(function (t) {\n return t.key === key;\n });\n if (!t) return;\n\n if (result.cancelled && t.phase != TransitionPhase.UPDATE) {\n return;\n }\n\n if (t.ctrl.idle) {\n var idle = transitions.every(function (t) {\n return t.ctrl.idle;\n });\n\n if (t.phase == TransitionPhase.LEAVE) {\n var expiry = callProp(expires, t.item);\n\n if (expiry !== false) {\n var expiryMs = expiry === true ? 0 : expiry;\n t.expired = true;\n\n if (!idle && expiryMs > 0) {\n if (expiryMs <= 0x7fffffff) t.expirationId = setTimeout(forceUpdate, expiryMs);\n return;\n }\n }\n }\n\n if (idle && transitions.some(function (t) {\n return t.expired;\n })) {\n exitingTransitions.current.delete(t);\n\n if (exitBeforeEnter) {\n forceChange.current = true;\n }\n\n forceUpdate();\n }\n }\n };\n\n var springs = getSprings(t.ctrl, payload);\n\n if (phase === TransitionPhase.LEAVE && exitBeforeEnter) {\n exitingTransitions.current.set(t, {\n phase: phase,\n springs: springs,\n payload: payload\n });\n } else {\n changes.set(t, {\n phase: phase,\n springs: springs,\n payload: payload\n });\n }\n });\n var context = useContext(SpringContext);\n var prevContext = usePrev(context);\n var hasContext = context !== prevContext && hasProps(context);\n useLayoutEffect(function () {\n if (hasContext) {\n each(transitions, function (t) {\n t.ctrl.start({\n default: context\n });\n });\n }\n }, [context]);\n each(changes, function (_, t) {\n if (exitingTransitions.current.size) {\n var ind = transitions.findIndex(function (state) {\n return state.key === t.key;\n });\n transitions.splice(ind, 1);\n }\n });\n useLayoutEffect(function () {\n each(exitingTransitions.current.size ? exitingTransitions.current : changes, function (_ref17, t) {\n var phase = _ref17.phase,\n payload = _ref17.payload;\n var ctrl = t.ctrl;\n t.phase = phase;\n ref == null ? void 0 : ref.add(ctrl);\n\n if (hasContext && phase == TransitionPhase.ENTER) {\n ctrl.start({\n default: context\n });\n }\n\n if (payload) {\n replaceRef(ctrl, payload.ref);\n\n if (ctrl.ref && !forceChange.current) {\n ctrl.update(payload);\n } else {\n ctrl.start(payload);\n\n if (forceChange.current) {\n forceChange.current = false;\n }\n }\n }\n });\n }, reset ? void 0 : deps);\n\n var renderTransitions = function renderTransitions(render) {\n return React.createElement(React.Fragment, null, transitions.map(function (t, i) {\n var _ref18 = changes.get(t) || t.ctrl,\n springs = _ref18.springs;\n\n var elem = render(_extends({}, springs), t.item, t, i);\n return elem && elem.type ? React.createElement(elem.type, _extends({}, elem.props, {\n key: is.str(t.key) || is.num(t.key) ? t.key : t.ctrl.id,\n ref: elem.ref\n })) : elem;\n }));\n };\n\n return ref ? [renderTransitions, ref] : renderTransitions;\n}\n\nvar nextKey = 1;\n\nfunction getKeys(items, _ref19, prevTransitions) {\n var key = _ref19.key,\n _ref19$keys = _ref19.keys,\n keys = _ref19$keys === void 0 ? key : _ref19$keys;\n\n if (keys === null) {\n var reused = new Set();\n return items.map(function (item) {\n var t = prevTransitions && prevTransitions.find(function (t) {\n return t.item === item && t.phase !== TransitionPhase.LEAVE && !reused.has(t);\n });\n\n if (t) {\n reused.add(t);\n return t.key;\n }\n\n return nextKey++;\n });\n }\n\n return is.und(keys) ? items : is.fun(keys) ? items.map(keys) : toArray(keys);\n}\n\nvar _excluded$2 = [\"children\"];\n\nfunction Spring(_ref) {\n var children = _ref.children,\n props = _objectWithoutPropertiesLoose(_ref, _excluded$2);\n\n return children(useSpring(props));\n}\n\nvar _excluded$1 = [\"items\", \"children\"];\n\nfunction Trail(_ref) {\n var items = _ref.items,\n children = _ref.children,\n props = _objectWithoutPropertiesLoose(_ref, _excluded$1);\n\n var trails = useTrail(items.length, props);\n return items.map(function (item, index) {\n var result = children(item, index);\n return is.fun(result) ? result(trails[index]) : result;\n });\n}\n\nvar _excluded = [\"items\", \"children\"];\n\nfunction Transition(_ref) {\n var items = _ref.items,\n children = _ref.children,\n props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n return useTransition(items, props)(children);\n}\n\nvar Interpolation = /*#__PURE__*/function (_FrameValue2) {\n _inherits(Interpolation, _FrameValue2);\n\n var _super5 = _createSuper(Interpolation);\n\n function Interpolation(source, args) {\n var _this16;\n\n _classCallCheck(this, Interpolation);\n\n _this16 = _super5.call(this);\n _this16.key = void 0;\n _this16.idle = true;\n _this16.calc = void 0;\n _this16._active = new Set();\n _this16.source = source;\n _this16.calc = createInterpolator.apply(void 0, _toConsumableArray(args));\n\n var value = _this16._get();\n\n var nodeType = getAnimatedType(value);\n setAnimated(_assertThisInitialized(_this16), nodeType.create(value));\n return _this16;\n }\n\n _createClass(Interpolation, [{\n key: \"advance\",\n value: function advance(_dt) {\n var value = this._get();\n\n var oldValue = this.get();\n\n if (!isEqual(value, oldValue)) {\n getAnimated(this).setValue(value);\n\n this._onChange(value, this.idle);\n }\n\n if (!this.idle && checkIdle(this._active)) {\n becomeIdle(this);\n }\n }\n }, {\n key: \"_get\",\n value: function _get() {\n var inputs = is.arr(this.source) ? this.source.map(getFluidValue) : toArray(getFluidValue(this.source));\n return this.calc.apply(this, _toConsumableArray(inputs));\n }\n }, {\n key: \"_start\",\n value: function _start() {\n var _this17 = this;\n\n if (this.idle && !checkIdle(this._active)) {\n this.idle = false;\n each(getPayload(this), function (node) {\n node.done = false;\n });\n\n if (Globals.skipAnimation) {\n raf.batchedUpdates(function () {\n return _this17.advance();\n });\n becomeIdle(this);\n } else {\n frameLoop.start(this);\n }\n }\n }\n }, {\n key: \"_attach\",\n value: function _attach() {\n var _this18 = this;\n\n var priority = 1;\n each(toArray(this.source), function (source) {\n if (hasFluidValue(source)) {\n addFluidObserver(source, _this18);\n }\n\n if (isFrameValue(source)) {\n if (!source.idle) {\n _this18._active.add(source);\n }\n\n priority = Math.max(priority, source.priority + 1);\n }\n });\n this.priority = priority;\n\n this._start();\n }\n }, {\n key: \"_detach\",\n value: function _detach() {\n var _this19 = this;\n\n each(toArray(this.source), function (source) {\n if (hasFluidValue(source)) {\n removeFluidObserver(source, _this19);\n }\n });\n\n this._active.clear();\n\n becomeIdle(this);\n }\n }, {\n key: \"eventObserved\",\n value: function eventObserved(event) {\n if (event.type == 'change') {\n if (event.idle) {\n this.advance();\n } else {\n this._active.add(event.parent);\n\n this._start();\n }\n } else if (event.type == 'idle') {\n this._active.delete(event.parent);\n } else if (event.type == 'priority') {\n this.priority = toArray(this.source).reduce(function (highest, parent) {\n return Math.max(highest, (isFrameValue(parent) ? parent.priority : 0) + 1);\n }, 0);\n }\n }\n }]);\n\n return Interpolation;\n}(FrameValue);\n\nfunction isIdle(source) {\n return source.idle !== false;\n}\n\nfunction checkIdle(active) {\n return !active.size || Array.from(active).every(isIdle);\n}\n\nfunction becomeIdle(self) {\n if (!self.idle) {\n self.idle = true;\n each(getPayload(self), function (node) {\n node.done = true;\n });\n callFluidObservers(self, {\n type: 'idle',\n parent: self\n });\n }\n}\n\nvar to = function to(source) {\n for (var _len6 = arguments.length, args = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {\n args[_key6 - 1] = arguments[_key6];\n }\n\n return new Interpolation(source, args);\n};\n\nvar interpolate = function interpolate(source) {\n for (var _len7 = arguments.length, args = new Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {\n args[_key7 - 1] = arguments[_key7];\n }\n\n return deprecateInterpolate(), new Interpolation(source, args);\n};\n\nGlobals.assign({\n createStringInterpolator: createStringInterpolator,\n to: function to(source, args) {\n return new Interpolation(source, args);\n }\n});\nvar update = frameLoop.advance;\nexport { BailSignal, Controller, FrameValue, Interpolation, Spring, SpringContext, SpringRef, SpringValue, Trail, Transition, config, easings, inferTo, interpolate, to, update, useChain, useSpring, useSpringRef, useSprings, useTrail, useTransition };","import _slicedToArray from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";\nimport _createClass from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/createClass.js\";\nimport _classCallCheck from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/classCallCheck.js\";\nimport _inherits from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/inherits.js\";\nimport _possibleConstructorReturn from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js\";\nimport _getPrototypeOf from \"/codebuild/output/src2600951983/src/cfl-betty/node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js\";\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nimport { Globals } from '@react-spring/core';\nexport * from '@react-spring/core';\nimport { unstable_batchedUpdates } from 'react-dom';\nimport { eachProp, is, toArray, FluidValue, each, getFluidValue, hasFluidValue, addFluidObserver, removeFluidObserver, callFluidObservers, createStringInterpolator, colors } from '@react-spring/shared';\nimport { AnimatedObject, createHost } from '@react-spring/animated';\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nvar _excluded$2 = [\"style\", \"children\", \"scrollTop\", \"scrollLeft\"];\nvar isCustomPropRE = /^--/;\n\nfunction dangerousStyleValue(name, value) {\n if (value == null || typeof value === 'boolean' || value === '') return '';\n if (typeof value === 'number' && value !== 0 && !isCustomPropRE.test(name) && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) return value + 'px';\n return ('' + value).trim();\n}\n\nvar attributeCache = {};\n\nfunction applyAnimatedValues(instance, props) {\n if (!instance.nodeType || !instance.setAttribute) {\n return false;\n }\n\n var isFilterElement = instance.nodeName === 'filter' || instance.parentNode && instance.parentNode.nodeName === 'filter';\n\n var _ref = props,\n style = _ref.style,\n children = _ref.children,\n scrollTop = _ref.scrollTop,\n scrollLeft = _ref.scrollLeft,\n attributes = _objectWithoutPropertiesLoose(_ref, _excluded$2);\n\n var values = Object.values(attributes);\n var names = Object.keys(attributes).map(function (name) {\n return isFilterElement || instance.hasAttribute(name) ? name : attributeCache[name] || (attributeCache[name] = name.replace(/([A-Z])/g, function (n) {\n return '-' + n.toLowerCase();\n }));\n });\n\n if (children !== void 0) {\n instance.textContent = children;\n }\n\n for (var name in style) {\n if (style.hasOwnProperty(name)) {\n var value = dangerousStyleValue(name, style[name]);\n\n if (isCustomPropRE.test(name)) {\n instance.style.setProperty(name, value);\n } else {\n instance.style[name] = value;\n }\n }\n }\n\n names.forEach(function (name, i) {\n instance.setAttribute(name, values[i]);\n });\n\n if (scrollTop !== void 0) {\n instance.scrollTop = scrollTop;\n }\n\n if (scrollLeft !== void 0) {\n instance.scrollLeft = scrollLeft;\n }\n}\n\nvar isUnitlessNumber = {\n animationIterationCount: true,\n borderImageOutset: true,\n borderImageSlice: true,\n borderImageWidth: true,\n boxFlex: true,\n boxFlexGroup: true,\n boxOrdinalGroup: true,\n columnCount: true,\n columns: true,\n flex: true,\n flexGrow: true,\n flexPositive: true,\n flexShrink: true,\n flexNegative: true,\n flexOrder: true,\n gridRow: true,\n gridRowEnd: true,\n gridRowSpan: true,\n gridRowStart: true,\n gridColumn: true,\n gridColumnEnd: true,\n gridColumnSpan: true,\n gridColumnStart: true,\n fontWeight: true,\n lineClamp: true,\n lineHeight: true,\n opacity: true,\n order: true,\n orphans: true,\n tabSize: true,\n widows: true,\n zIndex: true,\n zoom: true,\n fillOpacity: true,\n floodOpacity: true,\n stopOpacity: true,\n strokeDasharray: true,\n strokeDashoffset: true,\n strokeMiterlimit: true,\n strokeOpacity: true,\n strokeWidth: true\n};\n\nvar prefixKey = function prefixKey(prefix, key) {\n return prefix + key.charAt(0).toUpperCase() + key.substring(1);\n};\n\nvar prefixes = ['Webkit', 'Ms', 'Moz', 'O'];\nisUnitlessNumber = Object.keys(isUnitlessNumber).reduce(function (acc, prop) {\n prefixes.forEach(function (prefix) {\n return acc[prefixKey(prefix, prop)] = acc[prop];\n });\n return acc;\n}, isUnitlessNumber);\nvar _excluded$1 = [\"x\", \"y\", \"z\"];\nvar domTransforms = /^(matrix|translate|scale|rotate|skew)/;\nvar pxTransforms = /^(translate)/;\nvar degTransforms = /^(rotate|skew)/;\n\nvar addUnit = function addUnit(value, unit) {\n return is.num(value) && value !== 0 ? value + unit : value;\n};\n\nvar isValueIdentity = function isValueIdentity(value, id) {\n return is.arr(value) ? value.every(function (v) {\n return isValueIdentity(v, id);\n }) : is.num(value) ? value === id : parseFloat(value) === id;\n};\n\nvar AnimatedStyle = /*#__PURE__*/function (_AnimatedObject) {\n _inherits(AnimatedStyle, _AnimatedObject);\n\n var _super = _createSuper(AnimatedStyle);\n\n function AnimatedStyle(_ref) {\n _classCallCheck(this, AnimatedStyle);\n\n var x = _ref.x,\n y = _ref.y,\n z = _ref.z,\n style = _objectWithoutPropertiesLoose(_ref, _excluded$1);\n\n var inputs = [];\n var transforms = [];\n\n if (x || y || z) {\n inputs.push([x || 0, y || 0, z || 0]);\n transforms.push(function (xyz) {\n return [\"translate3d(\".concat(xyz.map(function (v) {\n return addUnit(v, 'px');\n }).join(','), \")\"), isValueIdentity(xyz, 0)];\n });\n }\n\n eachProp(style, function (value, key) {\n if (key === 'transform') {\n inputs.push([value || '']);\n transforms.push(function (transform) {\n return [transform, transform === ''];\n });\n } else if (domTransforms.test(key)) {\n delete style[key];\n if (is.und(value)) return;\n var unit = pxTransforms.test(key) ? 'px' : degTransforms.test(key) ? 'deg' : '';\n inputs.push(toArray(value));\n transforms.push(key === 'rotate3d' ? function (_ref2) {\n var _ref3 = _slicedToArray(_ref2, 4),\n x = _ref3[0],\n y = _ref3[1],\n z = _ref3[2],\n deg = _ref3[3];\n\n return [\"rotate3d(\".concat(x, \",\").concat(y, \",\").concat(z, \",\").concat(addUnit(deg, unit), \")\"), isValueIdentity(deg, 0)];\n } : function (input) {\n return [\"\".concat(key, \"(\").concat(input.map(function (v) {\n return addUnit(v, unit);\n }).join(','), \")\"), isValueIdentity(input, key.startsWith('scale') ? 1 : 0)];\n });\n }\n });\n\n if (inputs.length) {\n style.transform = new FluidTransform(inputs, transforms);\n }\n\n return _super.call(this, style);\n }\n\n return _createClass(AnimatedStyle);\n}(AnimatedObject);\n\nvar FluidTransform = /*#__PURE__*/function (_FluidValue) {\n _inherits(FluidTransform, _FluidValue);\n\n var _super2 = _createSuper(FluidTransform);\n\n function FluidTransform(inputs, transforms) {\n var _this;\n\n _classCallCheck(this, FluidTransform);\n\n _this = _super2.call(this);\n _this._value = null;\n _this.inputs = inputs;\n _this.transforms = transforms;\n return _this;\n }\n\n _createClass(FluidTransform, [{\n key: \"get\",\n value: function get() {\n return this._value || (this._value = this._get());\n }\n }, {\n key: \"_get\",\n value: function _get() {\n var _this2 = this;\n\n var transform = '';\n var identity = true;\n each(this.inputs, function (input, i) {\n var arg1 = getFluidValue(input[0]);\n\n var _this2$transforms$i = _this2.transforms[i](is.arr(arg1) ? arg1 : input.map(getFluidValue)),\n _this2$transforms$i2 = _slicedToArray(_this2$transforms$i, 2),\n t = _this2$transforms$i2[0],\n id = _this2$transforms$i2[1];\n\n transform += ' ' + t;\n identity = identity && id;\n });\n return identity ? 'none' : transform;\n }\n }, {\n key: \"observerAdded\",\n value: function observerAdded(count) {\n var _this3 = this;\n\n if (count == 1) each(this.inputs, function (input) {\n return each(input, function (value) {\n return hasFluidValue(value) && addFluidObserver(value, _this3);\n });\n });\n }\n }, {\n key: \"observerRemoved\",\n value: function observerRemoved(count) {\n var _this4 = this;\n\n if (count == 0) each(this.inputs, function (input) {\n return each(input, function (value) {\n return hasFluidValue(value) && removeFluidObserver(value, _this4);\n });\n });\n }\n }, {\n key: \"eventObserved\",\n value: function eventObserved(event) {\n if (event.type == 'change') {\n this._value = null;\n }\n\n callFluidObservers(this, event);\n }\n }]);\n\n return FluidTransform;\n}(FluidValue);\n\nvar primitives = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', 'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];\nvar _excluded = [\"scrollTop\", \"scrollLeft\"];\nGlobals.assign({\n batchedUpdates: unstable_batchedUpdates,\n createStringInterpolator: createStringInterpolator,\n colors: colors\n});\nvar host = createHost(primitives, {\n applyAnimatedValues: applyAnimatedValues,\n createAnimatedStyle: function createAnimatedStyle(style) {\n return new AnimatedStyle(style);\n },\n getComponentProps: function getComponentProps(_ref) {\n var props = _objectWithoutPropertiesLoose(_ref, _excluded);\n\n return props;\n }\n});\nvar animated = host.animated;\nexport { animated as a, animated };","import React, {useRef, useState, useEffect, useCallback} from \"react\"\nimport {useTransition, animated} from \"react-spring\"\nimport \"./title.css\"\nimport {Typography} from \"@material-ui/core\"\n\nfunction Title() {\n const ref = useRef([])\n const [items, set] = useState([])\n const transitions = useTransition(items, {\n from: {\n opacity: 0,\n height: 0,\n innerHeight: 0,\n transform: \"perspective(600px) rotateX(0deg)\",\n color: \"#8fa5b6\"\n },\n enter: [\n {opacity: 1, height: 60, innerHeight: 60},\n {transform: \"perspective(600px) rotateX(180deg)\", color: \"white\"},\n {transform: \"perspective(600px) rotateX(0deg)\"}\n ],\n leave: [\n {color: \"#37DFA1\"},\n {innerHeight: 0},\n {opacity: 0, height: 0}\n ],\n update: {color: \"white\", fontWeight: 900}\n })\n\n const reset = useCallback(() => {\n ref.current.map(clearTimeout)\n ref.current = []\n set([])\n ref.current.push(\n setTimeout(\n () => set([\"Invierte en préstamos\", \"con garantías reales\"]),\n 2000\n )\n )\n ref.current.push(\n setTimeout(\n () => set([\"Ponemos en contacto a \", \"inversionistas y solicitantes \", \"de crédito.\"]),\n 7000\n )\n )\n // Ponemos en contacto a inversionistas y solicitantes de crédito\n }, [])\n\n useEffect(() => void reset(), [])\n\n return (\n \n \n Email:\n
\n \n info@capitalfundinglab.com\n \n \n
\n \n \n info@capitalfundinglab.com\n \n
\n los más importantes\n
\n {transitions(({innerHeight, ...rest}, item) => (\n \n \n {item} \n \n \n ))}\n
\n )\n}\n\nexport default Title\n","export default __webpack_public_path__ + \"static/Hero-77d064c4e8970362bc96a761d06fac19.png\";","import React, {useEffect, useState} from \"react\"\nimport {makeStyles} from \"@material-ui/core/styles\"\nimport {Typography, Grid, Button, Container} from \"@material-ui/core\"\nimport Title from \"./Title\"\n\nimport Hero from \"../assets/Hero/Hero.png\"\n\nimport \"../../src/assets/Styles/Home.css\"\n\nconst useStyles = makeStyles(theme => ({\n root: {\n minHeight: \"100vh\"\n }, container: {\n // position: \"relative\",\n width: '100%'\n }, tryButton: {\n borderRadius: '8px',\n color: 'white',\n borderColor: 'white',\n marginLeft: \"1em\",\n '@media (max-width: 499px)': {margin: '0', width: '100%'},\n '&:hover': {backgroundColor: '#ffffff', color: 'black'}\n }, investButton: {\n borderRadius: '8px',\n background: 'white',\n color: 'black',\n marginTop: 0,\n marginRight: \"1em\",\n '@media (max-width: 499px)': {margin: '0 0 20px 0', width: '100%'},\n '&:hover': {color: '#ffffff', backgroundColor: 'transparent', border: '1px white solid'}\n }, buttonsContainer: {\n marginTop: theme.spacing(3), textAlign: \"start\"\n }, textContainer: {\n margin: theme.spacing(3, 0)\n }, titleContainer: {\n margin: theme.spacing(8, 0, 0, 0), color: '#FFFFFF',\n }, mainTitle: {\n margin: '30px 0 60px 0', fontWeigth: 800, fontsize: '1.8rem'\n }, subTitle: {\n marginBottom: '60px'\n }, title: {\n position: \"relative\", '@media (max-width: 470px)': {width: '90%'}\n }, bgTopNavCircle: {\n position: \"absolute\", top: 0, right: \"-10%\", zIndex: \"-1\"\n }, bgSideCircle: {\n position: \"absolute\", top: \"30%\", left: \"-15%\", width: \"300px\", zIndex: \"-1\"\n }, bgCitySkyline: {\n background: `url(${Hero}) `,\n backgroundPosition: 'bottom right',\n backgroundRepeat: \"no-repeat\",\n backgroundSize: \"cover\",\n overflowX: \"hidden\",\n marginTop: '125px',\n '@media (max-width: 799px)': {backgroundPosition: '80% 80%'}\n },\n}))\n\nconst Buttons = () => {\n const classes = useStyles()\n\n\n return (\n \n Invierte tu dinero\n \n \n Solicita un crédito\n \n
)\n}\n\nconst Home = () => {\n const classes = useStyles()\n return (\n \n \n \n \n <Typography gutterBottom variant=\"h4\" align=\"start\" className={classes.mainTitle}>\n Capital Funding Lab es una plataforma de financiamiento colectivo con presencia en México\n que está conectando a inversionistas con solicitantes rigurosamente seleccionados.\n {/* <br /><br />\n Todos los financiamientos generados a través de nuestra plataforma están respaldados con garantías reales. */}\n </Typography>\n <Typography gutterBottom variant=\"h5\" align=\"start\" className={classes.subTitle}>\n Todos los financiamientos generados a través de nuestra plataforma están respaldados con\n garantías reales.\n </Typography>\n <Buttons/>\n </Grid>\n {/* <img alt=\"Grafica\" src={Grafica} className={\"grafica\"} /> */}\n {/* <img src={TopNavCircle} className={classes.bgTopNavCircle} alt=\"\" />\n <img src={SideCircle} className={classes.bgSideCircle} alt=\"\" /> */}\n </Grid>\n </Container>\n </div>)\n}\n\nHome.propTypes = {}\n\nexport default Home\n\n\n","import React, { useState, useEffect } from \"react\"\nimport PropTypes from \"prop-types\"\nimport { Typography, Box } from \"@material-ui/core\"\nimport DisplayChild from \"./DisplayChild\"\nimport Finance from \"./utils/finance\"\n\nconst creditScoreFees = {\n AA: 0.1,\n A: 0.2,\n B: 0.35,\n C: 0.5,\n D: 0.65,\n E: 0.8,\n F: 0.95\n}\n\nconst openningFees = {\n AA: [3.5, 4.5, 5.5, 7.0, 8.5, 10.0, 11.5, 13.0, 15.0, 17.5, 20.0, 23.0],\n A: [4.5, 5.5, 6.5, 8.0, 9.5, 11.0, 12.5, 14.0, 16.0, 18.5, 21.0, 24.0],\n B: [5.5, 6.5, 7.5, 9.0, 10.5, 12.0, 13.5, 15.0, 17.0, 19.5, 22.0, 25.0],\n C: [6.5, 7.5, 8.5, 10.0, 11.5, 13.0, 14.5, 16.0, 18.0, 20.5, 23.0, 26.0],\n D: [7.5, 8.5, 9.5, 11.0, 12.5, 14.0, 15.5, 17.0, 19.0, 21.5, 24.0, 27.0],\n E: [8.5, 9.5, 10.5, 12.0, 13.5, 15.0, 16.5, 18.0, 20.0, 22.5, 25.0, 28.0],\n F: [9.5, 10.5, 11.5, 13.0, 14.5, 16.0, 17.5, 19.0, 21.0, 23.5, 26.0, 29.0]\n}\n\nconst tnaFees = {\n AA: [7.0, 8.0, 9.0, 10.0, 11.0, 11.5, 12.0, 12.5, 13.0, 13.5, 14.0, 14.5],\n A: [8.5, 9.5, 10.5, 11.5, 12.5, 13.0, 13.5, 14.0, 14.5, 15.0, 15.5, 16.0],\n B: [10.0, 11.0, 12.0, 13.0, 14.0, 14.5, 15.0, 15.5, 16.0, 16.5, 17.0, 17.5],\n C: [13.0, 14.0, 15.0, 16.0, 17.0, 17.5, 18.0, 18.5, 19.0, 19.5, 20.0, 20.5],\n D: [15.5, 16.5, 17.5, 18.5, 19.5, 20.0, 20.5, 21.0, 21.5, 22.0, 22.5, 23.0],\n E: [18.5, 19.5, 20.5, 21.5, 22.5, 23.0, 23.5, 24.0, 24.5, 25.0, 25.5, 26.0],\n F: [24.5, 25.5, 26.5, 27.5, 28.5, 29.0, 29.5, 30.0, 30.5, 31.0, 31.5, 32.0]\n}\nconst arrayHasValues = value =>\n value && Array.isArray(value) && value.length > 0\n\nconst average = arr => {\n if (arrayHasValues(arr)) {\n if (arr.length) {\n var sum = arr.reduce(function(a, b) {\n return a + b\n })\n return sum / arr.length\n }\n }\n\n return 0\n}\n\nconst roundNumber = (number, length) => {\n return parseFloat(number.toFixed(length))\n}\n\nlet finance = new Finance()\n\nconst Display = ({ years, amount, score, destiny }) => {\n const [NTERMS, setNTERMS] = useState(null)\n const [TNM, setTNM] = useState(0)\n const [TNA, setTNA] = useState()\n const [A, setA] = useState(0)\n const [B, setB] = useState(0)\n const [QUOTE, setQUOTE] = useState(0)\n const [realComision, setRealComision] = useState(0)\n const [totalRequest, setTotalRequest] = useState(0)\n const [TABLA, setTABLA] = useState([])\n\n const calculateCreditScoreFee = () => {\n setTNA((creditScoreFees[score] * years * amount) / 100)\n }\n\n const calculateComission = () => {\n setRealComision((openningFees[score][NTERMS] * amount) / 100)\n }\n\n const calculateTotalRequest = () => {\n setTotalRequest(realComision + amount)\n }\n\n const formatter = new Intl.NumberFormat('es-MX', {\n style: 'currency',\n currency: 'MXN',\n minimumFractionDigits: 0\n })\n\n const calculateOpenningFee = () => {\n return (\n <Typography variant=\"h4\">\n <strong>{(formatter.format(totalRequest))}</strong>\n </Typography>\n )\n }\n\n const calculateTnaFee = () => {\n return tnaFees[score][NTERMS]\n }\n\n const percentageTNA = () => {\n return (\n <Typography variant=\"h4\">\n <strong>{calculateTnaFee()}%</strong>\n </Typography>\n )\n }\n\n const solicitadedAmmount = () => {\n return (\n <Typography variant=\"h4\">\n <strong>{formatter.format(amount)}</strong>\n </Typography>\n )\n }\n\n const calculateA = () => {\n setA(((amount + realComision) * TNM) / 100)\n }\n\n const calculateB = () => {\n setB(1 - (1 + TNM / 100) ** -years)\n }\n\n const calculateQuote = () => {\n setQUOTE((A / B).toFixed(2))\n }\n\n const calculateTNM = () => {\n setTNM(calculateTnaFee() / 12)\n }\n\n const calculateTablaDeAmortizacion = () => {\n let tabla = {\n period: new Array(years),\n debt: new Array(years),\n payment: new Array(years),\n interest: new Array(years),\n managementFee: new Array(years),\n iva: new Array(years),\n catIva: new Array(years),\n catsIva: new Array(years)\n }\n\n let interest = (TNM * totalRequest) / 100\n let payment = QUOTE - interest\n\n let managementFee = TNA / years\n let iva = (managementFee + interest) * (16 / 100)\n let catIva = interest + payment + managementFee + iva\n let catsIva = interest + payment + managementFee\n\n let debt = totalRequest\n\n for (let i = 0; i < years; i++) {\n debt = debt - payment\n\n tabla[\"period\"][i] = i\n tabla[\"debt\"][i] = debt\n tabla[\"interest\"][i] = interest\n tabla[\"payment\"][i] = payment\n tabla[\"managementFee\"][i] = managementFee\n tabla[\"iva\"][i] = iva\n tabla[\"catIva\"][i] = roundNumber(catIva, 2)\n tabla[\"catsIva\"][i] = roundNumber(catsIva, 2)\n\n interest = (TNM * debt) / 100\n payment = QUOTE - interest\n managementFee = TNA / years\n iva = (managementFee + interest) * (16 / 100)\n catIva = interest + payment + managementFee + iva\n catsIva = interest + payment + managementFee\n }\n setTABLA(tabla)\n }\n\n const calculateAverage = () => {\n let averageQuota = average(TABLA[\"catIva\"])\n averageQuota = Number(averageQuota.toFixed(2))\n return (\n <Typography variant=\"h4\">\n <strong>{(formatter.format(averageQuota))}</strong>\n </Typography>\n )\n }\n\n const calculatePaltformCommision = () => {\n return (\n <Typography variant=\"h4\">\n <strong>{(formatter.format(realComision))}</strong>\n </Typography>\n )\n }\n\n const calculateFinancialCost = () => {\n let catIvas = [-amount]\n let catIVA = TABLA[\"catIva\"]\n if (arrayHasValues(catIVA)) {\n catIvas = catIvas.concat(catIVA.slice(0))\n let catIvaPercent = finance.IRR(catIvas, 0.0001)\n let costAfterTaxes = (1 + catIvaPercent) ** 12 - 1\n costAfterTaxes = costAfterTaxes * 100\n costAfterTaxes = Number(costAfterTaxes.toFixed(2))\n return (\n <Typography variant=\"h4\">\n <strong>{costAfterTaxes}%</strong>\n </Typography>\n )\n }\n return (\n <Typography variant=\"h4\">\n <strong>0%</strong>\n </Typography>\n )\n }\n/*\n const calculateFinancialCostS = () => {\n let catsIvas = [-amount]\n let catsIVA = TABLA[\"catsIva\"]\n if (arrayHasValues(catsIVA)) {\n catsIvas = catsIvas.concat(TABLA[\"catsIva\"].slice(0))\n let catsIvaPercent = finance.IRR(catsIvas, 0.0001)\n let costBeforeTaxes = (1 + catsIvaPercent) ** 12 - 1\n costBeforeTaxes = costBeforeTaxes * 100\n costBeforeTaxes = Number(costBeforeTaxes.toFixed(2))\n return (\n <Typography variant=\"h4\">\n <strong>{costBeforeTaxes}%</strong>\n </Typography>\n )\n }\n return (\n <Typography variant=\"h4\">\n <strong>0%</strong>\n </Typography>\n )\n }\n*/\n const calculateTerms = (callback) => {\n let tmpTrms = 0;\n if (6 < years && years < 12) {\n tmpTrms = 0;\n } else if (11 < years && years < 18) {\n tmpTrms = 1\n } else if (17 < years && years < 24) {\n tmpTrms = 2\n } else if (23 < years && years < 36) {\n tmpTrms = 3\n } else if (35 < years && years < 48) {\n tmpTrms = 4\n } else if (47 < years && years < 60) {\n tmpTrms = 5\n } else if (59 < years && years < 72) {\n tmpTrms = 6\n } else if (71 < years && years < 84) {\n tmpTrms = 7\n } else if (83 < years && years < 96) {\n tmpTrms = 8\n } else if (95 < years && years < 108) {\n tmpTrms = 9\n } else if (107 < years && years < 120) {\n tmpTrms = 10\n } else if (119 < years && years < 132) {\n tmpTrms = 11\n } else if (131 < years && years < 144) {\n tmpTrms = 12\n } else if (1443 < years && years < 156) {\n tmpTrms = 13\n } else if (155 < years && years < 168) {\n tmpTrms = 14\n } else if (167 < years && years < 180) {\n tmpTrms = 15\n } else if (179 < years && years < 192) {\n tmpTrms = 16\n } else if (191 < years && years < 204) {\n tmpTrms = 17\n } else if (203 < years && years < 216) {\n tmpTrms = 18\n } else if (215 < years && years < 228) {\n tmpTrms = 19\n } else if (227 < years && years < 240) {\n tmpTrms = 20\n }\n\n setNTERMS(tmpTrms)\n }\n\n useEffect(() => {\n calculateTerms();\n calculateComission();\n calculateTotalRequest()\n calculateTNM()\n calculateCreditScoreFee()\n calculateA()\n calculateB()\n calculateQuote()\n calculateTablaDeAmortizacion()\n calculateAverage()\n calculateFinancialCost()\n //calculateFinancialCostS()\n }, [NTERMS, realComision, totalRequest, TNM, TNA, A, B, QUOTE, years, amount, score])\n\n return (\n <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gridTemplateRows: 'repeat(3, 1fr)'}}>\n <Box >\n <DisplayChild func={calculateOpenningFee()} text=\"Monto Solicitado\" />\n </Box>\n <Box >\n <DisplayChild func={solicitadedAmmount()} text=\"Monto a acreditar\" />\n </Box>\n <Box >\n <DisplayChild func={calculateAverage()} text=\"Promedio de cuotas\" />\n </Box>\n <Box >\n <DisplayChild\n func={calculatePaltformCommision()}\n text=\"Uso de plataforma\"\n />\n </Box>\n <Box >\n <DisplayChild func={percentageTNA()} text=\"TNA\" />\n </Box>\n <Box >\n <DisplayChild func={calculateFinancialCost()} text=\"CAT 'Sin IVA'\" />\n </Box>\n </Box>\n )\n}\n\nDisplay.propTypes = {\n years: PropTypes.number.isRequired,\n amount: PropTypes.number.isRequired\n}\n\nexport default Display\n","import React from \"react\"\nimport { TextField,MenuItem, makeStyles } from \"@material-ui/core\"\n\nconst useStyles = makeStyles(theme => ({\n formControl: {\n margin: theme.spacing(1),\n minWidth: 120,\n width: \"100%\"\n },\n selectEmpty: {\n marginTop: theme.spacing(2)\n }\n}))\n\nexport default function Selector({data, id, label, helper, value, setValue}) {\n const classes = useStyles();\n \n \n const handleChange = (event) => {\n setValue(event.target.value);\n };\n return (\n <div style={{width:'100%'}}>\n <TextField\n id={id}\n select\n fullwidth\n label={label}\n value={value}\n onChange={handleChange}\n helperText={helper}\n variant=\"outlined\"\n className={classes.formControl}\n >\n {data.map((option) => (\n <MenuItem key={option.value} value={option.value}>\n {option.label}\n </MenuItem>\n ))}\n </TextField>\n </div>\n )\n}\n","import React, { useState } from \"react\"\nimport DisplayFinace from \"./DisplayFinace\"\nimport { Typography, Button, Card, Slider, Box } from \"@material-ui/core\"\nimport { withStyles } from \"@material-ui/core/styles\"\nimport Select from \"./Select\"\nimport \"./CalculatorFinance.css\"\nimport \"react-input-range/lib/css/index.css\"\n\nconst CalculatorButton = withStyles({\n root: {\n marginRight: 8,\n borderRadius: 4\n }\n})(Button)\n\nconst CalculatorSlider = withStyles({\n root: {\n color: \"#05A2A7\",\n height: 10,\n padding: \"8px 0\",\n width: \"100%\"\n },\n thumb: {\n height: 20,\n width: 20,\n marginTop: -8,\n marginLeft: -12\n },\n active: {},\n valueLabel: {\n left: \"calc(-50% + 6px)\",\n top: 32,\n textAlign: \"center\",\n fontSize: \"18px !important\",\n fontWeight: 600,\n \"& *\": {\n background: \"transparent\",\n color: \"#000\"\n }\n },\n track: {\n height: 4\n },\n rail: {\n height: 4,\n opacity: 0.5,\n backgroundColor: \"#bfbfbf\"\n },\n mark: {\n backgroundColor: \"#bfbfbf\",\n height: 8,\n width: 1,\n marginTop: -3\n },\n markActive: {\n opacity: 1,\n backgroundColor: \"currentColor\"\n }\n})(Slider)\n\nconst dataScore = [\n { value: \"AA\", label: \"AA - Sobresaliente\" },\n { value: \"A\", label: \"A - Excelente\" },\n { value: \"B\", label: \"B - Superior\" },\n { value: \"C\", label: \"C - Muy Bueno\" },\n { value: \"D\", label: \"D - Bueno\" },\n { value: \"E\", label: \"E - Adecuado\" },\n { value: \"F\", label: \"F - Aceptable\" }\n]\nconst dataDestiny = [\n { value: 9, label: \"Refinanciamiento de deudas anteriores\" },\n { value: 7, label: \"Remodelación\" },\n { value: 4, label: \"Invertir en Educación\" },\n { value: 2, label: \"Cambio de vehículo\" },\n { value: 3, label: \"Gastos médicos\" },\n { value: 10, label: \"Refinanciamiento tarjetas de crédito\" },\n { value: 6, label: \"Viaje\" },\n { value: 5, label: \"Gastos de boda\" },\n { value: 12, label: \"Gastos de celebración\" },\n { value: 1, label: \"Decoración\" },\n { value: 11, label: \"Gastos de mudanza\" },\n { value: 100, label: \"Otros destinos\" }\n]\nconst CalculatorFinace = () => {\n const [amountValue, setAmountValue] = useState(100000)\n const [yearsValue, setYearsValue] = useState(12)\n const [persontype, handlePersonChange] = useState(0)\n const [value, setValue] = useState(\"AA\")\n const [valueDestiny, setValueDestiny] = useState(1)\n\n const handleChangeAmount = (event, amountValue) => {\n setAmountValue(amountValue)\n }\n\n const handleChangeYears = (event, yearsValue) => {\n setYearsValue(yearsValue)\n }\n\n return (\n <Card raised style={{ marginBottom: \"16px\" }}>\n <Box py={4} px={4}>\n <Typography variant=\"h3\" align=\"center\" gutterBottom>\n Calcula <strong>tu crédito</strong>\n </Typography>\n\n <Typography\n variant=\"body2\"\n id=\"years-value\"\n gutterBottom\n style={{ paddingTop: 24 }}\n >\n ¿Cuál producto te interesa?\n </Typography>\n <Box display=\"flex\" justifyContent=\"center\">\n <CalculatorButton\n size=\"small\"\n variant=\"outlined\"\n color=\"secondary\"\n value={0}\n onClick={() => handlePersonChange(0)}\n >\n PERSONAL\n </CalculatorButton>\n <CalculatorButton\n size=\"small\"\n variant=\"outlined\"\n color=\"secondary\"\n value={1}\n onClick={() => handlePersonChange(1)}\n >\n COMERCIAL\n </CalculatorButton>\n </Box>\n <Typography\n variant=\"body2\"\n id=\"amount-value\"\n gutterBottom\n style={{ paddingTop: 16 }}\n >\n ¿Qué monto deseas financiar?\n </Typography>\n {persontype === 0 ? (\n <CalculatorSlider\n value={amountValue}\n defaultValue={200}\n aria-labelledby=\"amount-value\"\n step={100}\n min={100000}\n max={300000}\n marks={[{ value: 300000, label: \"MXN\" }]}\n valueLabelDisplay=\"on\"\n onChange={handleChangeAmount}\n />\n ) : (\n <CalculatorSlider\n defaultValue={200}\n value={amountValue}\n aria-labelledby=\"amount-value\"\n step={100}\n min={100000}\n max={10000000}\n marks={[{ value: 10000000, label: \"MXN\" }]}\n valueLabelDisplay=\"on\"\n onChange={handleChangeAmount}\n />\n )}\n <Typography\n variant=\"body2\"\n id=\"years-value\"\n gutterBottom\n style={{ paddingTop: 24 }}\n >\n ¿Por cuánto tiempo?\n </Typography>\n {persontype === 0 ? (\n <CalculatorSlider\n value={yearsValue}\n defaultValue={1}\n aria-labelledby=\"years-value\"\n step={1}\n min={6}\n max={120}\n marks={[{ value: 120, label: \"Meses\" }]}\n valueLabelDisplay=\"on\"\n onChange={handleChangeYears}\n />\n ) : (\n <CalculatorSlider\n value={yearsValue}\n defaultValue={1}\n aria-labelledby=\"years-value\"\n step={1}\n min={12}\n max={240}\n marks={[{ value: 240, label: \"Meses\" }]}\n valueLabelDisplay=\"on\"\n onChange={handleChangeYears}\n />\n )}\n <Box display=\"flex\" justifyContent=\"center\">\n <Select\n data={dataScore}\n id={1}\n label={\"¿Cuál es tu perfil crediticio?\"}\n value={value}\n setValue={setValue}\n />\n </Box>\n <Box display=\"flex\" justifyContent=\"center\" pb={1}>\n <Select\n data={dataDestiny}\n id={1}\n label={\"¿Cuál es el destino de tu crédito?\"}\n value={valueDestiny}\n setValue={setValueDestiny}\n />\n </Box>\n <DisplayFinace years={yearsValue} amount={amountValue} score={value} destiny={valueDestiny} />\n <Typography\n variant=\"body2\"\n gutterBottom\n style={{ fontSize: 9, paddingTop: 10 }}\n >\n * El Coste Anual Total (CAT) es una medida estandarizada del costo de financiamiento, expresado en términos porcentuales anuales que, para fines informativos y de comparación, incorpora la totalidad de los costos y gastos inherentes a los créditos que otorgan las instituciones.\n </Typography>\n </Box>\n </Card>\n )\n}\n\nexport default CalculatorFinace\n","import React from \"react\"\nimport { makeStyles } from \"@material-ui/core/styles\"\nimport { Typography, Grid, Box, Container, Button } from \"@material-ui/core\"\nimport CalculatorFinace from \"./CalculatorFinace\"\n\nconst useStyles = makeStyles(theme => ({\n root: {\n backgroundImage:\n \"linear-gradient(to bottom, #E0F7FA 5%, #ffffff 95%) !important\",\n margin: 0,\n padding: theme.spacing(6, 0)\n },\n textMargin: {\n padding: \"10px 2rem\",\n maxWidth: \"480px\"\n },\n textStyle2: {\n padding: theme.spacing(6, 0)\n },\n buttonR: {\n borderRadius: \"50px\",\n margin: theme.spacing(6, 0),\n color: theme.palette.common.white,\n \"&:hover\": {\n color: theme.palette.common.black,\n background: theme.palette.common.white\n }\n },\n container: {\n padding: theme.spacing(0, 6)\n },\n paddingB: {\n paddingBottom: theme.spacing(6)\n },\n resText: {\n [theme.breakpoints.down('md')]: {\n textAlign: 'center'\n },\n },\n containerButton: {\n [theme.breakpoints.down('md')]: {\n justifyContent: 'center',\n alignItems: 'center'\n },\n }\n}))\n\nexport default function Finance() {\n const classes = useStyles()\n return (\n <div className={classes.root}>\n <Container maxWidth=\"lg\">\n <Grid container justify=\"center\">\n <Grid\n container\n spacing={4}\n justify=\"space-between\"\n lg={10}\n md={5}\n item\n >\n <Grid item xs={12} lg={6}>\n <Typography variant=\"h4\" className={classes.resText}>\n <strong>Beneficios</strong>\n </Typography>\n <Typography className={classes.paddingB + ' ' + classes.resText}>\n Bajos costos de mantenimiento.\n <br />\n Tasa diferencial por buen comportamiento.\n <br />\n Cancelación total o parcial.\n <br />\n Te damos respuesta inmediata.\n </Typography>\n <Grid>\n <div>\n <Typography variant=\"h4\" className={classes.resText}>\n <strong>Requisitos para solicitante</strong>\n </Typography>\n <Typography variant=\"body1\" className={classes.paddingB + ' ' + classes.resText}>\n Ser mexicano, con residencia permanente en el país.\n <br />\n Mayor de 18 años.\n <br />\n Ingreso mensual neto de $6,250.\n <br />\n Tener cuenta en un banco, e-mail y celular.\n </Typography>\n </div>\n </Grid>\n <Grid>\n <div>\n <Typography variant=\"h4\" className={classes.resText}>\n <strong>Comisiones para solicitantes</strong>\n </Typography>\n <Typography variant=\"body1\" className={classes.paddingB + ' ' + classes.resText}>\n Comisión por apertura:\n <br />\n Del 3.5% al 30% dependiendo de la calificación crediticia y el plazo de financiamiento\n <br />\n Gastos de Administración:\n <br />\n 2.5% de forma anual sobre la línea del crédito o pagadero mensual de forma proporcional.\n </Typography>\n </div>\n </Grid>\n <Grid>\n <div>\n <Typography variant=\"h4\" className={classes.resText}>\n <strong>Comisiones para inversionistas</strong>\n </Typography>\n <Typography variant=\"body1\" className={classes.paddingB + ' ' + classes.resText}>\n Comisión por éxito:\n <br />\n Diferencia entre la tasa de interés pagada por el acreditado y la rentabilidad esperada por el acreditante.\n </Typography>\n </div>\n </Grid>\n <Grid>\n <Typography variant=\"h2\" className={classes.typStyle + ' ' + classes.resText}>\n Los primeros pasos son <br /> los{\" \"}\n <strong>más importantes</strong>\n </Typography>\n </Grid>\n <Grid container className={classes.containerButton}>\n <Button\n variant=\"contained\"\n color=\"secondary\"\n className={classes.buttonR}\n href='/Registro'\n >\n Solicita un crédito\n </Button>\n </Grid>\n </Grid>\n <Grid item xs={12} lg={\"auto\"}>\n <Box maxWidth=\"350px\">\n <CalculatorFinace />\n <Typography variant=\"body2\" className={classes.resText}>\n El resultado de \"Calcula tu crédito\", se basa exclusivamente en la información crediticia incorporada en el formulario. Te informaremos de la tasa de interés del préstamo y el valor de cuota promedio que te podamos ofrecer una vez que finalices la Solicitud de Crédito. Las mismas podrán ser diferentes al resultado de \"Calcula tu crédito\".\n </Typography>\n </Box>\n </Grid>\n </Grid>\n </Grid>\n </Container>\n </div>\n )\n}\n","import React, {useState} from \"react\"\nimport \"./DataVoice.css\"\nimport BotonChat from \"../../assets/DataVoice/Vector.png\"\nimport {Button} from \"@material-ui/core\";\n\n\nfunction DataVoice() {\n const [open, setOpen] = useState(false);\n\n const openChat = () => {\n setOpen(true)\n }\n\n const closeChat = () => {\n setOpen(false)\n }\n\n return (\n <>\n {\" \"}\n {open ? (\n <div className=\"form-box open\" id=\"divChat\">\n <a className=\"close\" onClick={closeChat}></a>\n <iframe\n className=\"frameChat\"\n src={process.env.GATSBY_DATA_VOICE_ENDPOINT}\n />\n </div>\n ) : (\n <Button\n className=\"floating-btn clicked\"\n data-toggle=\"tooltip\"\n data-placement=\"left\"\n style={{\n position: \"fixed\",\n cursor: \"pointer\",\n background: '#07212E',\n color: 'white',\n fontSize: '15px',\n padding: '8px 22px',\n bottom: '70px',\n }}\n onClick={openChat}\n >\n ¿Necesitas ayuda?\n <img\n src={BotonChat}\n alt={'img'}\n style={{\n left: '10%',\n right: '10%',\n top: '15%',\n bottom: '15%',\n }}\n />\n </Button>\n )}\n </>\n )\n}\n\nexport default DataVoice\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD9SURBVHgBrVSBEYIwDEw9B2ADcQJwAhmBDcQNHMUNcAPdAJwAnIBuIE4Q02sKEZFD4O+ecg/9a5q/KBgAIvq0hESPJW2olNIwFmTiEU/EDH+jICZjzEJiheNRcRW9ZjHxif/D7Im6Zj5OM5OmvjS84nxkxkuxcwXLYLemR9wR77xuiD6xJj5YC8BGSGp7sTcy5Z7luaG9hgtLudAy1lKhSaQraEO7BF6m5JJ4kKfg15DXoEeLhCahTVPMTwUsg21zKpyPW2OLNthz0AR75e4EpsNE6PgxgXB6yRXaHoA0C/mjRpu9hFkOGOVoR9xX5FyX676hyffi6MorhwbsG5ZYl40radlKAAAAAElFTkSuQmCC\"","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Typography from '../Typography';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n margin: 0,\n padding: '16px 24px',\n flex: '0 0 auto'\n }\n};\nvar DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$disableTypogra = props.disableTypography,\n disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"disableTypography\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, className),\n ref: ref\n }, other), disableTypography ? children : /*#__PURE__*/React.createElement(Typography, {\n component: \"h2\",\n variant: \"h6\"\n }, children));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiDialogTitle'\n})(DialogTitle);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport capitalize from '../utils/capitalize';\nimport deprecatedPropType from '../utils/deprecatedPropType';\nimport Modal from '../Modal';\nimport Backdrop from '../Backdrop';\nimport Fade from '../Fade';\nimport { duration } from '../styles/transitions';\nimport Paper from '../Paper';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n '@media print': {\n // Use !important to override the Modal inline-style.\n position: 'absolute !important'\n }\n },\n\n /* Styles applied to the container element if `scroll=\"paper\"`. */\n scrollPaper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n\n /* Styles applied to the container element if `scroll=\"body\"`. */\n scrollBody: {\n overflowY: 'auto',\n overflowX: 'hidden',\n textAlign: 'center',\n '&:after': {\n content: '\"\"',\n display: 'inline-block',\n verticalAlign: 'middle',\n height: '100%',\n width: '0'\n }\n },\n\n /* Styles applied to the container element. */\n container: {\n height: '100%',\n '@media print': {\n height: 'auto'\n },\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0\n },\n\n /* Styles applied to the `Paper` component. */\n paper: {\n margin: 32,\n position: 'relative',\n overflowY: 'auto',\n // Fix IE 11 issue, to remove at some point.\n '@media print': {\n overflowY: 'visible',\n boxShadow: 'none'\n }\n },\n\n /* Styles applied to the `Paper` component if `scroll=\"paper\"`. */\n paperScrollPaper: {\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 'calc(100% - 64px)'\n },\n\n /* Styles applied to the `Paper` component if `scroll=\"body\"`. */\n paperScrollBody: {\n display: 'inline-block',\n verticalAlign: 'middle',\n textAlign: 'left' // 'initial' doesn't work on IE 11\n\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=false`. */\n paperWidthFalse: {\n maxWidth: 'calc(100% - 64px)'\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"xs\"`. */\n paperWidthXs: {\n maxWidth: Math.max(theme.breakpoints.values.xs, 444),\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"sm\"`. */\n paperWidthSm: {\n maxWidth: theme.breakpoints.values.sm,\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.sm + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"md\"`. */\n paperWidthMd: {\n maxWidth: theme.breakpoints.values.md,\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.md + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"lg\"`. */\n paperWidthLg: {\n maxWidth: theme.breakpoints.values.lg,\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.lg + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"xl\"`. */\n paperWidthXl: {\n maxWidth: theme.breakpoints.values.xl,\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.xl + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `fullWidth={true}`. */\n paperFullWidth: {\n width: 'calc(100% - 64px)'\n },\n\n /* Styles applied to the `Paper` component if `fullScreen={true}`. */\n paperFullScreen: {\n margin: 0,\n width: '100%',\n maxWidth: '100%',\n height: '100%',\n maxHeight: 'none',\n borderRadius: 0,\n '&$paperScrollBody': {\n margin: 0,\n maxWidth: '100%'\n }\n }\n };\n};\nvar defaultTransitionDuration = {\n enter: duration.enteringScreen,\n exit: duration.leavingScreen\n};\n/**\n * Dialogs are overlaid modal paper based components with a backdrop.\n */\n\nvar Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {\n var BackdropProps = props.BackdropProps,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$disableBackdro = props.disableBackdropClick,\n disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,\n _props$disableEscapeK = props.disableEscapeKeyDown,\n disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,\n _props$fullScreen = props.fullScreen,\n fullScreen = _props$fullScreen === void 0 ? false : _props$fullScreen,\n _props$fullWidth = props.fullWidth,\n fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,\n _props$maxWidth = props.maxWidth,\n maxWidth = _props$maxWidth === void 0 ? 'sm' : _props$maxWidth,\n onBackdropClick = props.onBackdropClick,\n onClose = props.onClose,\n onEnter = props.onEnter,\n onEntered = props.onEntered,\n onEntering = props.onEntering,\n onEscapeKeyDown = props.onEscapeKeyDown,\n onExit = props.onExit,\n onExited = props.onExited,\n onExiting = props.onExiting,\n open = props.open,\n _props$PaperComponent = props.PaperComponent,\n PaperComponent = _props$PaperComponent === void 0 ? Paper : _props$PaperComponent,\n _props$PaperProps = props.PaperProps,\n PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,\n _props$scroll = props.scroll,\n scroll = _props$scroll === void 0 ? 'paper' : _props$scroll,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,\n _props$transitionDura = props.transitionDuration,\n transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,\n TransitionProps = props.TransitionProps,\n ariaDescribedby = props['aria-describedby'],\n ariaLabelledby = props['aria-labelledby'],\n other = _objectWithoutProperties(props, [\"BackdropProps\", \"children\", \"classes\", \"className\", \"disableBackdropClick\", \"disableEscapeKeyDown\", \"fullScreen\", \"fullWidth\", \"maxWidth\", \"onBackdropClick\", \"onClose\", \"onEnter\", \"onEntered\", \"onEntering\", \"onEscapeKeyDown\", \"onExit\", \"onExited\", \"onExiting\", \"open\", \"PaperComponent\", \"PaperProps\", \"scroll\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\", \"aria-describedby\", \"aria-labelledby\"]);\n\n var mouseDownTarget = React.useRef();\n\n var handleMouseDown = function handleMouseDown(event) {\n mouseDownTarget.current = event.target;\n };\n\n var handleBackdropClick = function handleBackdropClick(event) {\n // Ignore the events not coming from the \"backdrop\"\n // We don't want to close the dialog when clicking the dialog content.\n if (event.target !== event.currentTarget) {\n return;\n } // Make sure the event starts and ends on the same DOM element.\n\n\n if (event.target !== mouseDownTarget.current) {\n return;\n }\n\n mouseDownTarget.current = null;\n\n if (onBackdropClick) {\n onBackdropClick(event);\n }\n\n if (!disableBackdropClick && onClose) {\n onClose(event, 'backdropClick');\n }\n };\n\n return /*#__PURE__*/React.createElement(Modal, _extends({\n className: clsx(classes.root, className),\n BackdropComponent: Backdrop,\n BackdropProps: _extends({\n transitionDuration: transitionDuration\n }, BackdropProps),\n closeAfterTransition: true\n }, disableBackdropClick ? {\n disableBackdropClick: disableBackdropClick\n } : {}, {\n disableEscapeKeyDown: disableEscapeKeyDown,\n onEscapeKeyDown: onEscapeKeyDown,\n onClose: onClose,\n open: open,\n ref: ref\n }, other), /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n appear: true,\n in: open,\n timeout: transitionDuration,\n onEnter: onEnter,\n onEntering: onEntering,\n onEntered: onEntered,\n onExit: onExit,\n onExiting: onExiting,\n onExited: onExited,\n role: \"none presentation\"\n }, TransitionProps), /*#__PURE__*/React.createElement(\"div\", {\n className: clsx(classes.container, classes[\"scroll\".concat(capitalize(scroll))]),\n onMouseUp: handleBackdropClick,\n onMouseDown: handleMouseDown\n }, /*#__PURE__*/React.createElement(PaperComponent, _extends({\n elevation: 24,\n role: \"dialog\",\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby\n }, PaperProps, {\n className: clsx(classes.paper, classes[\"paperScroll\".concat(capitalize(scroll))], classes[\"paperWidth\".concat(capitalize(String(maxWidth)))], PaperProps.className, fullScreen && classes.paperFullScreen, fullWidth && classes.paperFullWidth)\n }), children))));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiDialog'\n})(Dialog);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n flex: '1 1 auto',\n WebkitOverflowScrolling: 'touch',\n // Add iOS momentum scrolling.\n overflowY: 'auto',\n padding: '8px 24px',\n '&:first-child': {\n // dialog without title\n paddingTop: 20\n }\n },\n\n /* Styles applied to the root element if `dividers={true}`. */\n dividers: {\n padding: '16px 24px',\n borderTop: \"1px solid \".concat(theme.palette.divider),\n borderBottom: \"1px solid \".concat(theme.palette.divider)\n }\n };\n};\nvar DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$dividers = props.dividers,\n dividers = _props$dividers === void 0 ? false : _props$dividers,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"dividers\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, className, dividers && classes.dividers),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiDialogContent'\n})(DialogContent);","import React, { useState } from \"react\"\nimport {\n Dialog,\n DialogContent,\n DialogTitle,\n IconButton,\n} from \"@material-ui/core\"\nimport CloseIcon from \"@material-ui/icons/Close\"\nimport { withStyles } from \"@material-ui/core/styles\"\nimport { BodyNoticeClient, HeaderNoticeClient } from \"./NoticeClient\"\n\nconst styles = theme => ({\n root: {\n margin: 0,\n padding: theme.spacing(2),\n },\n closeButton: {\n position: \"absolute\",\n right: theme.spacing(1),\n top: theme.spacing(1),\n color: theme.palette.grey[500],\n },\n})\n\nconst CustomDialogTitle = withStyles(styles)(props => {\n const { children, classes, onClose, ...other } = props\n return (\n <DialogTitle disableTypography className={classes.root} {...other}>\n <>{children}</>\n {onClose ? (\n <IconButton\n aria-label=\"close\"\n className={classes.closeButton}\n onClick={onClose}\n >\n <CloseIcon />\n </IconButton>\n ) : null}\n </DialogTitle>\n )\n})\n\nconst ModalNotice = () => {\n const [open, setOpen] = useState(true) // modal is off\n const [scroll, setScroll] = React.useState(\"paper\")\n const handleOnOpen = () => {\n setOpen(true)\n }\n const handleOnClose = () => {\n setOpen(false)\n }\n return (\n <Dialog\n open={open}\n aria-labelledby=\"customized-dialog-title\"\n onClose={handleOnOpen}\n scroll={scroll}\n >\n <CustomDialogTitle id=\"customized-dialog-title\" onClose={handleOnClose}>\n <HeaderNoticeClient />\n </CustomDialogTitle>\n <DialogContent>\n <BodyNoticeClient />\n </DialogContent>\n </Dialog>\n )\n}\n\nexport { ModalNotice }\n","import React from \"react\"\nimport { Helmet } from \"react-helmet\"\nimport Layout from \"../components/layout\"\nimport HowItWorks from \"../components/HowItWorks\"\nimport Ofrecemos from \"../components/Ofecemos\"\nimport OfrecemosSol from \"../components/OfrecemosSol\"\nimport Investment from \"../components/Investment\"\nimport Home from \"../components/Home\"\nimport Finance from \"../components/Finance\"\nimport DataVoice from \"../components/DataVoice\"\nimport \"./index.css\"\nimport { ModalNotice } from \"../components/NoticeClient/ModalNotice\"\n\nexport default function Index() {\n return (\n <Layout>\n <Helmet>\n <meta charSet=\"utf-8\" />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')\"\n rel=\"stylesheet\"\n />\n <title>CFL \n \n \n \n \n \n \n