\n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence() {\n const context = useContext(PresenceContext);\n if (context === null)\n return [true, null];\n const { isPresent, onExitComplete, register } = context;\n // It's safe to call the following hooks conditionally (after an early return) because the context will always\n // either be null or non-null for the lifespan of the component.\n const id = useId();\n useEffect(() => register(id), []);\n const safeToRemove = useCallback(() => onExitComplete && onExitComplete(id), [id, onExitComplete]);\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n * const isPresent = useIsPresent()\n *\n * useEffect(() => {\n * !isPresent && console.log(\"I've been removed!\")\n * }, [isPresent])\n *\n * return

\n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","import { circOut } from '../../easing/circ.mjs';\nimport { progress } from '../../utils/progress.mjs';\nimport { mixNumber } from '../../utils/mix/number.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { percent, px } from '../../value/types/numbers/units.mjs';\n\nconst borders = [\"TopLeft\", \"TopRight\", \"BottomLeft\", \"BottomRight\"];\nconst numBorders = borders.length;\nconst asNumber = (value) => typeof value === \"string\" ? parseFloat(value) : value;\nconst isPx = (value) => typeof value === \"number\" || px.test(value);\nfunction mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) {\n if (shouldCrossfadeOpacity) {\n target.opacity = mixNumber(0, \n // TODO Reinstate this if only child\n lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress));\n target.opacityExit = mixNumber(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress));\n }\n else if (isOnlyMember) {\n target.opacity = mixNumber(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress);\n }\n /**\n * Mix border radius\n */\n for (let i = 0; i < numBorders; i++) {\n const borderLabel = `border${borders[i]}Radius`;\n let followRadius = getRadius(follow, borderLabel);\n let leadRadius = getRadius(lead, borderLabel);\n if (followRadius === undefined && leadRadius === undefined)\n continue;\n followRadius || (followRadius = 0);\n leadRadius || (leadRadius = 0);\n const canMix = followRadius === 0 ||\n leadRadius === 0 ||\n isPx(followRadius) === isPx(leadRadius);\n if (canMix) {\n target[borderLabel] = Math.max(mixNumber(asNumber(followRadius), asNumber(leadRadius), progress), 0);\n if (percent.test(leadRadius) || percent.test(followRadius)) {\n target[borderLabel] += \"%\";\n }\n }\n else {\n target[borderLabel] = leadRadius;\n }\n }\n /**\n * Mix rotation\n */\n if (follow.rotate || lead.rotate) {\n target.rotate = mixNumber(follow.rotate || 0, lead.rotate || 0, progress);\n }\n}\nfunction getRadius(values, radiusName) {\n return values[radiusName] !== undefined\n ? values[radiusName]\n : values.borderRadius;\n}\n// /**\n// * We only want to mix the background color if there's a follow element\n// * that we're not crossfading opacity between. For instance with switch\n// * AnimateSharedLayout animations, this helps the illusion of a continuous\n// * element being animated but also cuts down on the number of paints triggered\n// * for elements where opacity is doing that work for us.\n// */\n// if (\n// !hasFollowElement &&\n// latestLeadValues.backgroundColor &&\n// latestFollowValues.backgroundColor\n// ) {\n// /**\n// * This isn't ideal performance-wise as mixColor is creating a new function every frame.\n// * We could probably create a mixer that runs at the start of the animation but\n// * the idea behind the crossfader is that it runs dynamically between two potentially\n// * changing targets (ie opacity or borderRadius may be animating independently via variants)\n// */\n// leadState.backgroundColor = followState.backgroundColor = mixColor(\n// latestFollowValues.backgroundColor as string,\n// latestLeadValues.backgroundColor as string\n// )(p)\n// }\nconst easeCrossfadeIn = /*@__PURE__*/ compress(0, 0.5, circOut);\nconst easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop);\nfunction compress(min, max, easing) {\n return (p) => {\n // Could replace ifs with clamp\n if (p < min)\n return 0;\n if (p > max)\n return 1;\n return easing(progress(min, max, p));\n };\n}\n\nexport { mixValues };\n","/**\n * Reset an axis to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyAxisInto(axis, originAxis) {\n axis.min = originAxis.min;\n axis.max = originAxis.max;\n}\n/**\n * Reset a box to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyBoxInto(box, originBox) {\n copyAxisInto(box.x, originBox.x);\n copyAxisInto(box.y, originBox.y);\n}\n/**\n * Reset a delta to the provided origin box.\n *\n * This is a mutative operation.\n */\nfunction copyAxisDeltaInto(delta, originDelta) {\n delta.translate = originDelta.translate;\n delta.scale = originDelta.scale;\n delta.originPoint = originDelta.originPoint;\n delta.origin = originDelta.origin;\n}\n\nexport { copyAxisDeltaInto, copyAxisInto, copyBoxInto };\n","import { mixNumber } from '../../utils/mix/number.mjs';\nimport { percent } from '../../value/types/numbers/units.mjs';\nimport { scalePoint } from './delta-apply.mjs';\n\n/**\n * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse\n */\nfunction removePointDelta(point, translate, scale, originPoint, boxScale) {\n point -= translate;\n point = scalePoint(point, 1 / scale, originPoint);\n if (boxScale !== undefined) {\n point = scalePoint(point, 1 / boxScale, originPoint);\n }\n return point;\n}\n/**\n * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse\n */\nfunction removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {\n if (percent.test(translate)) {\n translate = parseFloat(translate);\n const relativeProgress = mixNumber(sourceAxis.min, sourceAxis.max, translate / 100);\n translate = relativeProgress - sourceAxis.min;\n }\n if (typeof translate !== \"number\")\n return;\n let originPoint = mixNumber(originAxis.min, originAxis.max, origin);\n if (axis === originAxis)\n originPoint -= translate;\n axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale);\n axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale);\n}\n/**\n * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse\n * and acts as a bridge between motion values and removeAxisDelta\n */\nfunction removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {\n removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);\n}\n/**\n * The names of the motion values we want to apply as translation, scale and origin.\n */\nconst xKeys = [\"x\", \"scaleX\", \"originX\"];\nconst yKeys = [\"y\", \"scaleY\", \"originY\"];\n/**\n * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse\n * and acts as a bridge between motion values and removeAxisDelta\n */\nfunction removeBoxTransforms(box, transforms, originBox, sourceBox) {\n removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined);\n removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined);\n}\n\nexport { removeAxisDelta, removeAxisTransforms, removeBoxTransforms, removePointDelta };\n","import { calcLength } from './delta-calc.mjs';\n\nfunction isAxisDeltaZero(delta) {\n return delta.translate === 0 && delta.scale === 1;\n}\nfunction isDeltaZero(delta) {\n return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);\n}\nfunction axisEquals(a, b) {\n return a.min === b.min && a.max === b.max;\n}\nfunction boxEquals(a, b) {\n return axisEquals(a.x, b.x) && axisEquals(a.y, b.y);\n}\nfunction axisEqualsRounded(a, b) {\n return (Math.round(a.min) === Math.round(b.min) &&\n Math.round(a.max) === Math.round(b.max));\n}\nfunction boxEqualsRounded(a, b) {\n return axisEqualsRounded(a.x, b.x) && axisEqualsRounded(a.y, b.y);\n}\nfunction aspectRatio(box) {\n return calcLength(box.x) / calcLength(box.y);\n}\nfunction axisDeltaEquals(a, b) {\n return (a.translate === b.translate &&\n a.scale === b.scale &&\n a.originPoint === b.originPoint);\n}\n\nexport { aspectRatio, axisDeltaEquals, axisEquals, axisEqualsRounded, boxEquals, boxEqualsRounded, isDeltaZero };\n","import { addUniqueItem, removeItem } from '../../utils/array.mjs';\n\nclass NodeStack {\n constructor() {\n this.members = [];\n }\n add(node) {\n addUniqueItem(this.members, node);\n node.scheduleRender();\n }\n remove(node) {\n removeItem(this.members, node);\n if (node === this.prevLead) {\n this.prevLead = undefined;\n }\n if (node === this.lead) {\n const prevLead = this.members[this.members.length - 1];\n if (prevLead) {\n this.promote(prevLead);\n }\n }\n }\n relegate(node) {\n const indexOfNode = this.members.findIndex((member) => node === member);\n if (indexOfNode === 0)\n return false;\n /**\n * Find the next projection node that is present\n */\n let prevLead;\n for (let i = indexOfNode; i >= 0; i--) {\n const member = this.members[i];\n if (member.isPresent !== false) {\n prevLead = member;\n break;\n }\n }\n if (prevLead) {\n this.promote(prevLead);\n return true;\n }\n else {\n return false;\n }\n }\n promote(node, preserveFollowOpacity) {\n const prevLead = this.lead;\n if (node === prevLead)\n return;\n this.prevLead = prevLead;\n this.lead = node;\n node.show();\n if (prevLead) {\n prevLead.instance && prevLead.scheduleRender();\n node.scheduleRender();\n node.resumeFrom = prevLead;\n if (preserveFollowOpacity) {\n node.resumeFrom.preserveOpacity = true;\n }\n if (prevLead.snapshot) {\n node.snapshot = prevLead.snapshot;\n node.snapshot.latestValues =\n prevLead.animationValues || prevLead.latestValues;\n }\n if (node.root && node.root.isUpdating) {\n node.isLayoutDirty = true;\n }\n const { crossfade } = node.options;\n if (crossfade === false) {\n prevLead.hide();\n }\n /**\n * TODO:\n * - Test border radius when previous node was deleted\n * - boxShadow mixing\n * - Shared between element A in scrolled container and element B (scroll stays the same or changes)\n * - Shared between element A in transformed container and element B (transform stays the same or changes)\n * - Shared between element A in scrolled page and element B (scroll stays the same or changes)\n * ---\n * - Crossfade opacity of root nodes\n * - layoutId changes after animation\n * - layoutId changes mid animation\n */\n }\n }\n exitAnimationComplete() {\n this.members.forEach((node) => {\n const { options, resumingFrom } = node;\n options.onExitComplete && options.onExitComplete();\n if (resumingFrom) {\n resumingFrom.options.onExitComplete &&\n resumingFrom.options.onExitComplete();\n }\n });\n }\n scheduleRender() {\n this.members.forEach((node) => {\n node.instance && node.scheduleRender(false);\n });\n }\n /**\n * Clear any leads that have been removed this render to prevent them from being\n * used in future animations and to prevent memory leaks\n */\n removeLeadSnapshot() {\n if (this.lead && this.lead.snapshot) {\n this.lead.snapshot = undefined;\n }\n }\n}\n\nexport { NodeStack };\n","const compareByDepth = (a, b) => a.depth - b.depth;\n\nexport { compareByDepth };\n","import { addUniqueItem, removeItem } from '../../utils/array.mjs';\nimport { compareByDepth } from './compare-by-depth.mjs';\n\nclass FlatTree {\n constructor() {\n this.children = [];\n this.isDirty = false;\n }\n add(child) {\n addUniqueItem(this.children, child);\n this.isDirty = true;\n }\n remove(child) {\n removeItem(this.children, child);\n this.isDirty = true;\n }\n forEach(callback) {\n this.isDirty && this.children.sort(compareByDepth);\n this.isDirty = false;\n this.children.forEach(callback);\n }\n}\n\nexport { FlatTree };\n","import { isCustomValue } from '../../utils/resolve-value.mjs';\nimport { isMotionValue } from './is-motion-value.mjs';\n\n/**\n * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself\n *\n * TODO: Remove and move to library\n */\nfunction resolveMotionValue(value) {\n const unwrappedValue = isMotionValue(value) ? value.get() : value;\n return isCustomValue(unwrappedValue)\n ? unwrappedValue.toValue()\n : unwrappedValue;\n}\n\nexport { resolveMotionValue };\n","import { SubscriptionManager } from '../../utils/subscription-manager.mjs';\nimport { mixValues } from '../animation/mix-values.mjs';\nimport { copyBoxInto, copyAxisDeltaInto } from '../geometry/copy.mjs';\nimport { translateAxis, transformBox, applyBoxDelta, applyTreeDeltas } from '../geometry/delta-apply.mjs';\nimport { calcRelativePosition, calcRelativeBox, calcBoxDelta, calcLength, isNear } from '../geometry/delta-calc.mjs';\nimport { removeBoxTransforms } from '../geometry/delta-remove.mjs';\nimport { getValueTransition } from '../../animation/utils/get-value-transition.mjs';\nimport { boxEqualsRounded, isDeltaZero, axisDeltaEquals, aspectRatio, boxEquals } from '../geometry/utils.mjs';\nimport { NodeStack } from '../shared/stack.mjs';\nimport { scaleCorrectors } from '../styles/scale-correction.mjs';\nimport { buildProjectionTransform } from '../styles/transform.mjs';\nimport { eachAxis } from '../utils/each-axis.mjs';\nimport { hasTransform, hasScale, has2DTranslate } from '../utils/has-transform.mjs';\nimport { FlatTree } from '../../render/utils/flat-tree.mjs';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';\nimport { globalProjectionState } from './state.mjs';\nimport { delay } from '../../utils/delay.mjs';\nimport { mixNumber } from '../../utils/mix/number.mjs';\nimport { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';\nimport { animateSingleValue } from '../../animation/animate/single-value.mjs';\nimport { clamp } from '../../utils/clamp.mjs';\nimport { cancelFrame, frameData, frameSteps, frame } from '../../frameloop/frame.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { time } from '../../frameloop/sync-time.mjs';\nimport { microtask } from '../../frameloop/microtask.mjs';\nimport { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';\nimport { createBox, createDelta } from '../geometry/models.mjs';\n\nconst metrics = {\n type: \"projectionFrame\",\n totalNodes: 0,\n resolvedTargetDeltas: 0,\n recalculatedProjection: 0,\n};\nconst isDebug = typeof window !== \"undefined\" && window.MotionDebug !== undefined;\nconst transformAxes = [\"\", \"X\", \"Y\", \"Z\"];\nconst hiddenVisibility = { visibility: \"hidden\" };\n/**\n * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1\n * which has a noticeable difference in spring animations\n */\nconst animationTarget = 1000;\nlet id = 0;\nfunction resetDistortingTransform(key, visualElement, values, sharedAnimationValues) {\n const { latestValues } = visualElement;\n // Record the distorting transform and then temporarily set it to 0\n if (latestValues[key]) {\n values[key] = latestValues[key];\n visualElement.setStaticValue(key, 0);\n if (sharedAnimationValues) {\n sharedAnimationValues[key] = 0;\n }\n }\n}\nfunction cancelTreeOptimisedTransformAnimations(projectionNode) {\n projectionNode.hasCheckedOptimisedAppear = true;\n if (projectionNode.root === projectionNode)\n return;\n const { visualElement } = projectionNode.options;\n if (!visualElement)\n return;\n const appearId = getOptimisedAppearId(visualElement);\n if (window.MotionHasOptimisedAnimation(appearId, \"transform\")) {\n const { layout, layoutId } = projectionNode.options;\n window.MotionCancelOptimisedAnimation(appearId, \"transform\", frame, !(layout || layoutId));\n }\n const { parent } = projectionNode;\n if (parent && !parent.hasCheckedOptimisedAppear) {\n cancelTreeOptimisedTransformAnimations(parent);\n }\n}\nfunction createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {\n return class ProjectionNode {\n constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {\n /**\n * A unique ID generated for every projection node.\n */\n this.id = id++;\n /**\n * An id that represents a unique session instigated by startUpdate.\n */\n this.animationId = 0;\n /**\n * A Set containing all this component's children. This is used to iterate\n * through the children.\n *\n * TODO: This could be faster to iterate as a flat array stored on the root node.\n */\n this.children = new Set();\n /**\n * Options for the node. We use this to configure what kind of layout animations\n * we should perform (if any).\n */\n this.options = {};\n /**\n * We use this to detect when its safe to shut down part of a projection tree.\n * We have to keep projecting children for scale correction and relative projection\n * until all their parents stop performing layout animations.\n */\n this.isTreeAnimating = false;\n this.isAnimationBlocked = false;\n /**\n * Flag to true if we think this layout has been changed. We can't always know this,\n * currently we set it to true every time a component renders, or if it has a layoutDependency\n * if that has changed between renders. Additionally, components can be grouped by LayoutGroup\n * and if one node is dirtied, they all are.\n */\n this.isLayoutDirty = false;\n /**\n * Flag to true if we think the projection calculations for this node needs\n * recalculating as a result of an updated transform or layout animation.\n */\n this.isProjectionDirty = false;\n /**\n * Flag to true if the layout *or* transform has changed. This then gets propagated\n * throughout the projection tree, forcing any element below to recalculate on the next frame.\n */\n this.isSharedProjectionDirty = false;\n /**\n * Flag transform dirty. This gets propagated throughout the whole tree but is only\n * respected by shared nodes.\n */\n this.isTransformDirty = false;\n /**\n * Block layout updates for instant layout transitions throughout the tree.\n */\n this.updateManuallyBlocked = false;\n this.updateBlockedByResize = false;\n /**\n * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate`\n * call.\n */\n this.isUpdating = false;\n /**\n * If this is an SVG element we currently disable projection transforms\n */\n this.isSVG = false;\n /**\n * Flag to true (during promotion) if a node doing an instant layout transition needs to reset\n * its projection styles.\n */\n this.needsReset = false;\n /**\n * Flags whether this node should have its transform reset prior to measuring.\n */\n this.shouldResetTransform = false;\n /**\n * Store whether this node has been checked for optimised appear animations. As\n * effects fire bottom-up, and we want to look up the tree for appear animations,\n * this makes sure we only check each path once, stopping at nodes that\n * have already been checked.\n */\n this.hasCheckedOptimisedAppear = false;\n /**\n * An object representing the calculated contextual/accumulated/tree scale.\n * This will be used to scale calculcated projection transforms, as these are\n * calculated in screen-space but need to be scaled for elements to layoutly\n * make it to their calculated destinations.\n *\n * TODO: Lazy-init\n */\n this.treeScale = { x: 1, y: 1 };\n /**\n *\n */\n this.eventHandlers = new Map();\n this.hasTreeAnimated = false;\n // Note: Currently only running on root node\n this.updateScheduled = false;\n this.scheduleUpdate = () => this.update();\n this.projectionUpdateScheduled = false;\n this.checkUpdateFailed = () => {\n if (this.isUpdating) {\n this.isUpdating = false;\n this.clearAllSnapshots();\n }\n };\n /**\n * This is a multi-step process as shared nodes might be of different depths. Nodes\n * are sorted by depth order, so we need to resolve the entire tree before moving to\n * the next step.\n */\n this.updateProjection = () => {\n this.projectionUpdateScheduled = false;\n /**\n * Reset debug counts. Manually resetting rather than creating a new\n * object each frame.\n */\n if (isDebug) {\n metrics.totalNodes =\n metrics.resolvedTargetDeltas =\n metrics.recalculatedProjection =\n 0;\n }\n this.nodes.forEach(propagateDirtyNodes);\n this.nodes.forEach(resolveTargetDelta);\n this.nodes.forEach(calcProjection);\n this.nodes.forEach(cleanDirtyNodes);\n if (isDebug) {\n window.MotionDebug.record(metrics);\n }\n };\n /**\n * Frame calculations\n */\n this.resolvedRelativeTargetAt = 0.0;\n this.hasProjected = false;\n this.isVisible = true;\n this.animationProgress = 0;\n /**\n * Shared layout\n */\n // TODO Only running on root node\n this.sharedNodes = new Map();\n this.latestValues = latestValues;\n this.root = parent ? parent.root || parent : this;\n this.path = parent ? [...parent.path, parent] : [];\n this.parent = parent;\n this.depth = parent ? parent.depth + 1 : 0;\n for (let i = 0; i < this.path.length; i++) {\n this.path[i].shouldResetTransform = true;\n }\n if (this.root === this)\n this.nodes = new FlatTree();\n }\n addEventListener(name, handler) {\n if (!this.eventHandlers.has(name)) {\n this.eventHandlers.set(name, new SubscriptionManager());\n }\n return this.eventHandlers.get(name).add(handler);\n }\n notifyListeners(name, ...args) {\n const subscriptionManager = this.eventHandlers.get(name);\n subscriptionManager && subscriptionManager.notify(...args);\n }\n hasListeners(name) {\n return this.eventHandlers.has(name);\n }\n /**\n * Lifecycles\n */\n mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {\n if (this.instance)\n return;\n this.isSVG = isSVGElement(instance);\n this.instance = instance;\n const { layoutId, layout, visualElement } = this.options;\n if (visualElement && !visualElement.current) {\n visualElement.mount(instance);\n }\n this.root.nodes.add(this);\n this.parent && this.parent.children.add(this);\n if (isLayoutDirty && (layout || layoutId)) {\n this.isLayoutDirty = true;\n }\n if (attachResizeListener) {\n let cancelDelay;\n const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false);\n attachResizeListener(instance, () => {\n this.root.updateBlockedByResize = true;\n cancelDelay && cancelDelay();\n cancelDelay = delay(resizeUnblockUpdate, 250);\n if (globalProjectionState.hasAnimatedSinceResize) {\n globalProjectionState.hasAnimatedSinceResize = false;\n this.nodes.forEach(finishAnimation);\n }\n });\n }\n if (layoutId) {\n this.root.registerSharedNode(layoutId, this);\n }\n // Only register the handler if it requires layout animation\n if (this.options.animate !== false &&\n visualElement &&\n (layoutId || layout)) {\n this.addEventListener(\"didUpdate\", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => {\n if (this.isTreeAnimationBlocked()) {\n this.target = undefined;\n this.relativeTarget = undefined;\n return;\n }\n // TODO: Check here if an animation exists\n const layoutTransition = this.options.transition ||\n visualElement.getDefaultTransition() ||\n defaultLayoutTransition;\n const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps();\n /**\n * The target layout of the element might stay the same,\n * but its position relative to its parent has changed.\n */\n const targetChanged = !this.targetLayout ||\n !boxEqualsRounded(this.targetLayout, newLayout) ||\n hasRelativeTargetChanged;\n /**\n * If the layout hasn't seemed to have changed, it might be that the\n * element is visually in the same place in the document but its position\n * relative to its parent has indeed changed. So here we check for that.\n */\n const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;\n if (this.options.layoutRoot ||\n (this.resumeFrom && this.resumeFrom.instance) ||\n hasOnlyRelativeTargetChanged ||\n (hasLayoutChanged &&\n (targetChanged || !this.currentAnimation))) {\n if (this.resumeFrom) {\n this.resumingFrom = this.resumeFrom;\n this.resumingFrom.resumingFrom = undefined;\n }\n this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);\n const animationOptions = {\n ...getValueTransition(layoutTransition, \"layout\"),\n onPlay: onLayoutAnimationStart,\n onComplete: onLayoutAnimationComplete,\n };\n if (visualElement.shouldReduceMotion ||\n this.options.layoutRoot) {\n animationOptions.delay = 0;\n animationOptions.type = false;\n }\n this.startAnimation(animationOptions);\n }\n else {\n /**\n * If the layout hasn't changed and we have an animation that hasn't started yet,\n * finish it immediately. Otherwise it will be animating from a location\n * that was probably never commited to screen and look like a jumpy box.\n */\n if (!hasLayoutChanged) {\n finishAnimation(this);\n }\n if (this.isLead() && this.options.onExitComplete) {\n this.options.onExitComplete();\n }\n }\n this.targetLayout = newLayout;\n });\n }\n }\n unmount() {\n this.options.layoutId && this.willUpdate();\n this.root.nodes.remove(this);\n const stack = this.getStack();\n stack && stack.remove(this);\n this.parent && this.parent.children.delete(this);\n this.instance = undefined;\n cancelFrame(this.updateProjection);\n }\n // only on the root\n blockUpdate() {\n this.updateManuallyBlocked = true;\n }\n unblockUpdate() {\n this.updateManuallyBlocked = false;\n }\n isUpdateBlocked() {\n return this.updateManuallyBlocked || this.updateBlockedByResize;\n }\n isTreeAnimationBlocked() {\n return (this.isAnimationBlocked ||\n (this.parent && this.parent.isTreeAnimationBlocked()) ||\n false);\n }\n // Note: currently only running on root node\n startUpdate() {\n if (this.isUpdateBlocked())\n return;\n this.isUpdating = true;\n this.nodes && this.nodes.forEach(resetSkewAndRotation);\n this.animationId++;\n }\n getTransformTemplate() {\n const { visualElement } = this.options;\n return visualElement && visualElement.getProps().transformTemplate;\n }\n willUpdate(shouldNotifyListeners = true) {\n this.root.hasTreeAnimated = true;\n if (this.root.isUpdateBlocked()) {\n this.options.onExitComplete && this.options.onExitComplete();\n return;\n }\n /**\n * If we're running optimised appear animations then these must be\n * cancelled before measuring the DOM. This is so we can measure\n * the true layout of the element rather than the WAAPI animation\n * which will be unaffected by the resetSkewAndRotate step.\n *\n * Note: This is a DOM write. Worst case scenario is this is sandwiched\n * between other snapshot reads which will cause unnecessary style recalculations.\n * This has to happen here though, as we don't yet know which nodes will need\n * snapshots in startUpdate(), but we only want to cancel optimised animations\n * if a layout animation measurement is actually going to be affected by them.\n */\n if (window.MotionCancelOptimisedAnimation &&\n !this.hasCheckedOptimisedAppear) {\n cancelTreeOptimisedTransformAnimations(this);\n }\n !this.root.isUpdating && this.root.startUpdate();\n if (this.isLayoutDirty)\n return;\n this.isLayoutDirty = true;\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n node.shouldResetTransform = true;\n node.updateScroll(\"snapshot\");\n if (node.options.layoutRoot) {\n node.willUpdate(false);\n }\n }\n const { layoutId, layout } = this.options;\n if (layoutId === undefined && !layout)\n return;\n const transformTemplate = this.getTransformTemplate();\n this.prevTransformTemplateValue = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : undefined;\n this.updateSnapshot();\n shouldNotifyListeners && this.notifyListeners(\"willUpdate\");\n }\n update() {\n this.updateScheduled = false;\n const updateWasBlocked = this.isUpdateBlocked();\n // When doing an instant transition, we skip the layout update,\n // but should still clean up the measurements so that the next\n // snapshot could be taken correctly.\n if (updateWasBlocked) {\n this.unblockUpdate();\n this.clearAllSnapshots();\n this.nodes.forEach(clearMeasurements);\n return;\n }\n if (!this.isUpdating) {\n this.nodes.forEach(clearIsLayoutDirty);\n }\n this.isUpdating = false;\n /**\n * Write\n */\n this.nodes.forEach(resetTransformStyle);\n /**\n * Read ==================\n */\n // Update layout measurements of updated children\n this.nodes.forEach(updateLayout);\n /**\n * Write\n */\n // Notify listeners that the layout is updated\n this.nodes.forEach(notifyLayoutUpdate);\n this.clearAllSnapshots();\n /**\n * Manually flush any pending updates. Ideally\n * we could leave this to the following requestAnimationFrame but this seems\n * to leave a flash of incorrectly styled content.\n */\n const now = time.now();\n frameData.delta = clamp(0, 1000 / 60, now - frameData.timestamp);\n frameData.timestamp = now;\n frameData.isProcessing = true;\n frameSteps.update.process(frameData);\n frameSteps.preRender.process(frameData);\n frameSteps.render.process(frameData);\n frameData.isProcessing = false;\n }\n didUpdate() {\n if (!this.updateScheduled) {\n this.updateScheduled = true;\n microtask.read(this.scheduleUpdate);\n }\n }\n clearAllSnapshots() {\n this.nodes.forEach(clearSnapshot);\n this.sharedNodes.forEach(removeLeadSnapshots);\n }\n scheduleUpdateProjection() {\n if (!this.projectionUpdateScheduled) {\n this.projectionUpdateScheduled = true;\n frame.preRender(this.updateProjection, false, true);\n }\n }\n scheduleCheckAfterUnmount() {\n /**\n * If the unmounting node is in a layoutGroup and did trigger a willUpdate,\n * we manually call didUpdate to give a chance to the siblings to animate.\n * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.\n */\n frame.postRender(() => {\n if (this.isLayoutDirty) {\n this.root.didUpdate();\n }\n else {\n this.root.checkUpdateFailed();\n }\n });\n }\n /**\n * Update measurements\n */\n updateSnapshot() {\n if (this.snapshot || !this.instance)\n return;\n this.snapshot = this.measure();\n }\n updateLayout() {\n if (!this.instance)\n return;\n // TODO: Incorporate into a forwarded scroll offset\n this.updateScroll();\n if (!(this.options.alwaysMeasureLayout && this.isLead()) &&\n !this.isLayoutDirty) {\n return;\n }\n /**\n * When a node is mounted, it simply resumes from the prevLead's\n * snapshot instead of taking a new one, but the ancestors scroll\n * might have updated while the prevLead is unmounted. We need to\n * update the scroll again to make sure the layout we measure is\n * up to date.\n */\n if (this.resumeFrom && !this.resumeFrom.instance) {\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n node.updateScroll();\n }\n }\n const prevLayout = this.layout;\n this.layout = this.measure(false);\n this.layoutCorrected = createBox();\n this.isLayoutDirty = false;\n this.projectionDelta = undefined;\n this.notifyListeners(\"measure\", this.layout.layoutBox);\n const { visualElement } = this.options;\n visualElement &&\n visualElement.notify(\"LayoutMeasure\", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined);\n }\n updateScroll(phase = \"measure\") {\n let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);\n if (this.scroll &&\n this.scroll.animationId === this.root.animationId &&\n this.scroll.phase === phase) {\n needsMeasurement = false;\n }\n if (needsMeasurement) {\n const isRoot = checkIsScrollRoot(this.instance);\n this.scroll = {\n animationId: this.root.animationId,\n phase,\n isRoot,\n offset: measureScroll(this.instance),\n wasRoot: this.scroll ? this.scroll.isRoot : isRoot,\n };\n }\n }\n resetTransform() {\n if (!resetTransform)\n return;\n const isResetRequested = this.isLayoutDirty ||\n this.shouldResetTransform ||\n this.options.alwaysMeasureLayout;\n const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);\n const transformTemplate = this.getTransformTemplate();\n const transformTemplateValue = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : undefined;\n const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;\n if (isResetRequested &&\n (hasProjection ||\n hasTransform(this.latestValues) ||\n transformTemplateHasChanged)) {\n resetTransform(this.instance, transformTemplateValue);\n this.shouldResetTransform = false;\n this.scheduleRender();\n }\n }\n measure(removeTransform = true) {\n const pageBox = this.measurePageBox();\n let layoutBox = this.removeElementScroll(pageBox);\n /**\n * Measurements taken during the pre-render stage\n * still have transforms applied so we remove them\n * via calculation.\n */\n if (removeTransform) {\n layoutBox = this.removeTransform(layoutBox);\n }\n roundBox(layoutBox);\n return {\n animationId: this.root.animationId,\n measuredBox: pageBox,\n layoutBox,\n latestValues: {},\n source: this.id,\n };\n }\n measurePageBox() {\n var _a;\n const { visualElement } = this.options;\n if (!visualElement)\n return createBox();\n const box = visualElement.measureViewportBox();\n const wasInScrollRoot = ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot);\n if (!wasInScrollRoot) {\n // Remove viewport scroll to give page-relative coordinates\n const { scroll } = this.root;\n if (scroll) {\n translateAxis(box.x, scroll.offset.x);\n translateAxis(box.y, scroll.offset.y);\n }\n }\n return box;\n }\n removeElementScroll(box) {\n var _a;\n const boxWithoutScroll = createBox();\n copyBoxInto(boxWithoutScroll, box);\n if ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) {\n return boxWithoutScroll;\n }\n /**\n * Performance TODO: Keep a cumulative scroll offset down the tree\n * rather than loop back up the path.\n */\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n const { scroll, options } = node;\n if (node !== this.root && scroll && options.layoutScroll) {\n /**\n * If this is a new scroll root, we want to remove all previous scrolls\n * from the viewport box.\n */\n if (scroll.wasRoot) {\n copyBoxInto(boxWithoutScroll, box);\n }\n translateAxis(boxWithoutScroll.x, scroll.offset.x);\n translateAxis(boxWithoutScroll.y, scroll.offset.y);\n }\n }\n return boxWithoutScroll;\n }\n applyTransform(box, transformOnly = false) {\n const withTransforms = createBox();\n copyBoxInto(withTransforms, box);\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n if (!transformOnly &&\n node.options.layoutScroll &&\n node.scroll &&\n node !== node.root) {\n transformBox(withTransforms, {\n x: -node.scroll.offset.x,\n y: -node.scroll.offset.y,\n });\n }\n if (!hasTransform(node.latestValues))\n continue;\n transformBox(withTransforms, node.latestValues);\n }\n if (hasTransform(this.latestValues)) {\n transformBox(withTransforms, this.latestValues);\n }\n return withTransforms;\n }\n removeTransform(box) {\n const boxWithoutTransform = createBox();\n copyBoxInto(boxWithoutTransform, box);\n for (let i = 0; i < this.path.length; i++) {\n const node = this.path[i];\n if (!node.instance)\n continue;\n if (!hasTransform(node.latestValues))\n continue;\n hasScale(node.latestValues) && node.updateSnapshot();\n const sourceBox = createBox();\n const nodeBox = node.measurePageBox();\n copyBoxInto(sourceBox, nodeBox);\n removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox);\n }\n if (hasTransform(this.latestValues)) {\n removeBoxTransforms(boxWithoutTransform, this.latestValues);\n }\n return boxWithoutTransform;\n }\n setTargetDelta(delta) {\n this.targetDelta = delta;\n this.root.scheduleUpdateProjection();\n this.isProjectionDirty = true;\n }\n setOptions(options) {\n this.options = {\n ...this.options,\n ...options,\n crossfade: options.crossfade !== undefined ? options.crossfade : true,\n };\n }\n clearMeasurements() {\n this.scroll = undefined;\n this.layout = undefined;\n this.snapshot = undefined;\n this.prevTransformTemplateValue = undefined;\n this.targetDelta = undefined;\n this.target = undefined;\n this.isLayoutDirty = false;\n }\n forceRelativeParentToResolveTarget() {\n if (!this.relativeParent)\n return;\n /**\n * If the parent target isn't up-to-date, force it to update.\n * This is an unfortunate de-optimisation as it means any updating relative\n * projection will cause all the relative parents to recalculate back\n * up the tree.\n */\n if (this.relativeParent.resolvedRelativeTargetAt !==\n frameData.timestamp) {\n this.relativeParent.resolveTargetDelta(true);\n }\n }\n resolveTargetDelta(forceRecalculation = false) {\n var _a;\n /**\n * Once the dirty status of nodes has been spread through the tree, we also\n * need to check if we have a shared node of a different depth that has itself\n * been dirtied.\n */\n const lead = this.getLead();\n this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);\n this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);\n this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);\n const isShared = Boolean(this.resumingFrom) || this !== lead;\n /**\n * We don't use transform for this step of processing so we don't\n * need to check whether any nodes have changed transform.\n */\n const canSkip = !(forceRecalculation ||\n (isShared && this.isSharedProjectionDirty) ||\n this.isProjectionDirty ||\n ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||\n this.attemptToResolveRelativeTarget ||\n this.root.updateBlockedByResize);\n if (canSkip)\n return;\n const { layout, layoutId } = this.options;\n /**\n * If we have no layout, we can't perform projection, so early return\n */\n if (!this.layout || !(layout || layoutId))\n return;\n this.resolvedRelativeTargetAt = frameData.timestamp;\n /**\n * If we don't have a targetDelta but do have a layout, we can attempt to resolve\n * a relativeParent. This will allow a component to perform scale correction\n * even if no animation has started.\n */\n if (!this.targetDelta && !this.relativeTarget) {\n const relativeParent = this.getClosestProjectingParent();\n if (relativeParent &&\n relativeParent.layout &&\n this.animationProgress !== 1) {\n this.relativeParent = relativeParent;\n this.forceRelativeParentToResolveTarget();\n this.relativeTarget = createBox();\n this.relativeTargetOrigin = createBox();\n calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);\n copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);\n }\n else {\n this.relativeParent = this.relativeTarget = undefined;\n }\n }\n /**\n * If we have no relative target or no target delta our target isn't valid\n * for this frame.\n */\n if (!this.relativeTarget && !this.targetDelta)\n return;\n /**\n * Lazy-init target data structure\n */\n if (!this.target) {\n this.target = createBox();\n this.targetWithTransforms = createBox();\n }\n /**\n * If we've got a relative box for this component, resolve it into a target relative to the parent.\n */\n if (this.relativeTarget &&\n this.relativeTargetOrigin &&\n this.relativeParent &&\n this.relativeParent.target) {\n this.forceRelativeParentToResolveTarget();\n calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);\n /**\n * If we've only got a targetDelta, resolve it into a target\n */\n }\n else if (this.targetDelta) {\n if (Boolean(this.resumingFrom)) {\n // TODO: This is creating a new object every frame\n this.target = this.applyTransform(this.layout.layoutBox);\n }\n else {\n copyBoxInto(this.target, this.layout.layoutBox);\n }\n applyBoxDelta(this.target, this.targetDelta);\n }\n else {\n /**\n * If no target, use own layout as target\n */\n copyBoxInto(this.target, this.layout.layoutBox);\n }\n /**\n * If we've been told to attempt to resolve a relative target, do so.\n */\n if (this.attemptToResolveRelativeTarget) {\n this.attemptToResolveRelativeTarget = false;\n const relativeParent = this.getClosestProjectingParent();\n if (relativeParent &&\n Boolean(relativeParent.resumingFrom) ===\n Boolean(this.resumingFrom) &&\n !relativeParent.options.layoutScroll &&\n relativeParent.target &&\n this.animationProgress !== 1) {\n this.relativeParent = relativeParent;\n this.forceRelativeParentToResolveTarget();\n this.relativeTarget = createBox();\n this.relativeTargetOrigin = createBox();\n calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);\n copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);\n }\n else {\n this.relativeParent = this.relativeTarget = undefined;\n }\n }\n /**\n * Increase debug counter for resolved target deltas\n */\n if (isDebug) {\n metrics.resolvedTargetDeltas++;\n }\n }\n getClosestProjectingParent() {\n if (!this.parent ||\n hasScale(this.parent.latestValues) ||\n has2DTranslate(this.parent.latestValues)) {\n return undefined;\n }\n if (this.parent.isProjecting()) {\n return this.parent;\n }\n else {\n return this.parent.getClosestProjectingParent();\n }\n }\n isProjecting() {\n return Boolean((this.relativeTarget ||\n this.targetDelta ||\n this.options.layoutRoot) &&\n this.layout);\n }\n calcProjection() {\n var _a;\n const lead = this.getLead();\n const isShared = Boolean(this.resumingFrom) || this !== lead;\n let canSkip = true;\n /**\n * If this is a normal layout animation and neither this node nor its nearest projecting\n * is dirty then we can't skip.\n */\n if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {\n canSkip = false;\n }\n /**\n * If this is a shared layout animation and this node's shared projection is dirty then\n * we can't skip.\n */\n if (isShared &&\n (this.isSharedProjectionDirty || this.isTransformDirty)) {\n canSkip = false;\n }\n /**\n * If we have resolved the target this frame we must recalculate the\n * projection to ensure it visually represents the internal calculations.\n */\n if (this.resolvedRelativeTargetAt === frameData.timestamp) {\n canSkip = false;\n }\n if (canSkip)\n return;\n const { layout, layoutId } = this.options;\n /**\n * If this section of the tree isn't animating we can\n * delete our target sources for the following frame.\n */\n this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) ||\n this.currentAnimation ||\n this.pendingAnimation);\n if (!this.isTreeAnimating) {\n this.targetDelta = this.relativeTarget = undefined;\n }\n if (!this.layout || !(layout || layoutId))\n return;\n /**\n * Reset the corrected box with the latest values from box, as we're then going\n * to perform mutative operations on it.\n */\n copyBoxInto(this.layoutCorrected, this.layout.layoutBox);\n /**\n * Record previous tree scales before updating.\n */\n const prevTreeScaleX = this.treeScale.x;\n const prevTreeScaleY = this.treeScale.y;\n /**\n * Apply all the parent deltas to this box to produce the corrected box. This\n * is the layout box, as it will appear on screen as a result of the transforms of its parents.\n */\n applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);\n /**\n * If this layer needs to perform scale correction but doesn't have a target,\n * use the layout as the target.\n */\n if (lead.layout &&\n !lead.target &&\n (this.treeScale.x !== 1 || this.treeScale.y !== 1)) {\n lead.target = lead.layout.layoutBox;\n lead.targetWithTransforms = createBox();\n }\n const { target } = lead;\n if (!target) {\n /**\n * If we don't have a target to project into, but we were previously\n * projecting, we want to remove the stored transform and schedule\n * a render to ensure the elements reflect the removed transform.\n */\n if (this.prevProjectionDelta) {\n this.createProjectionDeltas();\n this.scheduleRender();\n }\n return;\n }\n if (!this.projectionDelta || !this.prevProjectionDelta) {\n this.createProjectionDeltas();\n }\n else {\n copyAxisDeltaInto(this.prevProjectionDelta.x, this.projectionDelta.x);\n copyAxisDeltaInto(this.prevProjectionDelta.y, this.projectionDelta.y);\n }\n /**\n * Update the delta between the corrected box and the target box before user-set transforms were applied.\n * This will allow us to calculate the corrected borderRadius and boxShadow to compensate\n * for our layout reprojection, but still allow them to be scaled correctly by the user.\n * It might be that to simplify this we may want to accept that user-set scale is also corrected\n * and we wouldn't have to keep and calc both deltas, OR we could support a user setting\n * to allow people to choose whether these styles are corrected based on just the\n * layout reprojection or the final bounding box.\n */\n calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);\n if (this.treeScale.x !== prevTreeScaleX ||\n this.treeScale.y !== prevTreeScaleY ||\n !axisDeltaEquals(this.projectionDelta.x, this.prevProjectionDelta.x) ||\n !axisDeltaEquals(this.projectionDelta.y, this.prevProjectionDelta.y)) {\n this.hasProjected = true;\n this.scheduleRender();\n this.notifyListeners(\"projectionUpdate\", target);\n }\n /**\n * Increase debug counter for recalculated projections\n */\n if (isDebug) {\n metrics.recalculatedProjection++;\n }\n }\n hide() {\n this.isVisible = false;\n // TODO: Schedule render\n }\n show() {\n this.isVisible = true;\n // TODO: Schedule render\n }\n scheduleRender(notifyAll = true) {\n var _a;\n (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();\n if (notifyAll) {\n const stack = this.getStack();\n stack && stack.scheduleRender();\n }\n if (this.resumingFrom && !this.resumingFrom.instance) {\n this.resumingFrom = undefined;\n }\n }\n createProjectionDeltas() {\n this.prevProjectionDelta = createDelta();\n this.projectionDelta = createDelta();\n this.projectionDeltaWithTransform = createDelta();\n }\n setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {\n const snapshot = this.snapshot;\n const snapshotLatestValues = snapshot\n ? snapshot.latestValues\n : {};\n const mixedValues = { ...this.latestValues };\n const targetDelta = createDelta();\n if (!this.relativeParent ||\n !this.relativeParent.options.layoutRoot) {\n this.relativeTarget = this.relativeTargetOrigin = undefined;\n }\n this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;\n const relativeLayout = createBox();\n const snapshotSource = snapshot ? snapshot.source : undefined;\n const layoutSource = this.layout ? this.layout.source : undefined;\n const isSharedLayoutAnimation = snapshotSource !== layoutSource;\n const stack = this.getStack();\n const isOnlyMember = !stack || stack.members.length <= 1;\n const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation &&\n !isOnlyMember &&\n this.options.crossfade === true &&\n !this.path.some(hasOpacityCrossfade));\n this.animationProgress = 0;\n let prevRelativeTarget;\n this.mixTargetDelta = (latest) => {\n const progress = latest / 1000;\n mixAxisDelta(targetDelta.x, delta.x, progress);\n mixAxisDelta(targetDelta.y, delta.y, progress);\n this.setTargetDelta(targetDelta);\n if (this.relativeTarget &&\n this.relativeTargetOrigin &&\n this.layout &&\n this.relativeParent &&\n this.relativeParent.layout) {\n calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);\n mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);\n /**\n * If this is an unchanged relative target we can consider the\n * projection not dirty.\n */\n if (prevRelativeTarget &&\n boxEquals(this.relativeTarget, prevRelativeTarget)) {\n this.isProjectionDirty = false;\n }\n if (!prevRelativeTarget)\n prevRelativeTarget = createBox();\n copyBoxInto(prevRelativeTarget, this.relativeTarget);\n }\n if (isSharedLayoutAnimation) {\n this.animationValues = mixedValues;\n mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember);\n }\n this.root.scheduleUpdateProjection();\n this.scheduleRender();\n this.animationProgress = progress;\n };\n this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0);\n }\n startAnimation(options) {\n this.notifyListeners(\"animationStart\");\n this.currentAnimation && this.currentAnimation.stop();\n if (this.resumingFrom && this.resumingFrom.currentAnimation) {\n this.resumingFrom.currentAnimation.stop();\n }\n if (this.pendingAnimation) {\n cancelFrame(this.pendingAnimation);\n this.pendingAnimation = undefined;\n }\n /**\n * Start the animation in the next frame to have a frame with progress 0,\n * where the target is the same as when the animation started, so we can\n * calculate the relative positions correctly for instant transitions.\n */\n this.pendingAnimation = frame.update(() => {\n globalProjectionState.hasAnimatedSinceResize = true;\n this.currentAnimation = animateSingleValue(0, animationTarget, {\n ...options,\n onUpdate: (latest) => {\n this.mixTargetDelta(latest);\n options.onUpdate && options.onUpdate(latest);\n },\n onComplete: () => {\n options.onComplete && options.onComplete();\n this.completeAnimation();\n },\n });\n if (this.resumingFrom) {\n this.resumingFrom.currentAnimation = this.currentAnimation;\n }\n this.pendingAnimation = undefined;\n });\n }\n completeAnimation() {\n if (this.resumingFrom) {\n this.resumingFrom.currentAnimation = undefined;\n this.resumingFrom.preserveOpacity = undefined;\n }\n const stack = this.getStack();\n stack && stack.exitAnimationComplete();\n this.resumingFrom =\n this.currentAnimation =\n this.animationValues =\n undefined;\n this.notifyListeners(\"animationComplete\");\n }\n finishAnimation() {\n if (this.currentAnimation) {\n this.mixTargetDelta && this.mixTargetDelta(animationTarget);\n this.currentAnimation.stop();\n }\n this.completeAnimation();\n }\n applyTransformsToTarget() {\n const lead = this.getLead();\n let { targetWithTransforms, target, layout, latestValues } = lead;\n if (!targetWithTransforms || !target || !layout)\n return;\n /**\n * If we're only animating position, and this element isn't the lead element,\n * then instead of projecting into the lead box we instead want to calculate\n * a new target that aligns the two boxes but maintains the layout shape.\n */\n if (this !== lead &&\n this.layout &&\n layout &&\n shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {\n target = this.target || createBox();\n const xLength = calcLength(this.layout.layoutBox.x);\n target.x.min = lead.target.x.min;\n target.x.max = target.x.min + xLength;\n const yLength = calcLength(this.layout.layoutBox.y);\n target.y.min = lead.target.y.min;\n target.y.max = target.y.min + yLength;\n }\n copyBoxInto(targetWithTransforms, target);\n /**\n * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.\n * This is the final box that we will then project into by calculating a transform delta and\n * applying it to the corrected box.\n */\n transformBox(targetWithTransforms, latestValues);\n /**\n * Update the delta between the corrected box and the final target box, after\n * user-set transforms are applied to it. This will be used by the renderer to\n * create a transform style that will reproject the element from its layout layout\n * into the desired bounding box.\n */\n calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);\n }\n registerSharedNode(layoutId, node) {\n if (!this.sharedNodes.has(layoutId)) {\n this.sharedNodes.set(layoutId, new NodeStack());\n }\n const stack = this.sharedNodes.get(layoutId);\n stack.add(node);\n const config = node.options.initialPromotionConfig;\n node.promote({\n transition: config ? config.transition : undefined,\n preserveFollowOpacity: config && config.shouldPreserveFollowOpacity\n ? config.shouldPreserveFollowOpacity(node)\n : undefined,\n });\n }\n isLead() {\n const stack = this.getStack();\n return stack ? stack.lead === this : true;\n }\n getLead() {\n var _a;\n const { layoutId } = this.options;\n return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;\n }\n getPrevLead() {\n var _a;\n const { layoutId } = this.options;\n return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;\n }\n getStack() {\n const { layoutId } = this.options;\n if (layoutId)\n return this.root.sharedNodes.get(layoutId);\n }\n promote({ needsReset, transition, preserveFollowOpacity, } = {}) {\n const stack = this.getStack();\n if (stack)\n stack.promote(this, preserveFollowOpacity);\n if (needsReset) {\n this.projectionDelta = undefined;\n this.needsReset = true;\n }\n if (transition)\n this.setOptions({ transition });\n }\n relegate() {\n const stack = this.getStack();\n if (stack) {\n return stack.relegate(this);\n }\n else {\n return false;\n }\n }\n resetSkewAndRotation() {\n const { visualElement } = this.options;\n if (!visualElement)\n return;\n // If there's no detected skew or rotation values, we can early return without a forced render.\n let hasDistortingTransform = false;\n /**\n * An unrolled check for rotation values. Most elements don't have any rotation and\n * skipping the nested loop and new object creation is 50% faster.\n */\n const { latestValues } = visualElement;\n if (latestValues.z ||\n latestValues.rotate ||\n latestValues.rotateX ||\n latestValues.rotateY ||\n latestValues.rotateZ ||\n latestValues.skewX ||\n latestValues.skewY) {\n hasDistortingTransform = true;\n }\n // If there's no distorting values, we don't need to do any more.\n if (!hasDistortingTransform)\n return;\n const resetValues = {};\n if (latestValues.z) {\n resetDistortingTransform(\"z\", visualElement, resetValues, this.animationValues);\n }\n // Check the skew and rotate value of all axes and reset to 0\n for (let i = 0; i < transformAxes.length; i++) {\n resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues, this.animationValues);\n resetDistortingTransform(`skew${transformAxes[i]}`, visualElement, resetValues, this.animationValues);\n }\n // Force a render of this element to apply the transform with all skews and rotations\n // set to 0.\n visualElement.render();\n // Put back all the values we reset\n for (const key in resetValues) {\n visualElement.setStaticValue(key, resetValues[key]);\n if (this.animationValues) {\n this.animationValues[key] = resetValues[key];\n }\n }\n // Schedule a render for the next frame. This ensures we won't visually\n // see the element with the reset rotate value applied.\n visualElement.scheduleRender();\n }\n getProjectionStyles(styleProp) {\n var _a, _b;\n if (!this.instance || this.isSVG)\n return undefined;\n if (!this.isVisible) {\n return hiddenVisibility;\n }\n const styles = {\n visibility: \"\",\n };\n const transformTemplate = this.getTransformTemplate();\n if (this.needsReset) {\n this.needsReset = false;\n styles.opacity = \"\";\n styles.pointerEvents =\n resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || \"\";\n styles.transform = transformTemplate\n ? transformTemplate(this.latestValues, \"\")\n : \"none\";\n return styles;\n }\n const lead = this.getLead();\n if (!this.projectionDelta || !this.layout || !lead.target) {\n const emptyStyles = {};\n if (this.options.layoutId) {\n emptyStyles.opacity =\n this.latestValues.opacity !== undefined\n ? this.latestValues.opacity\n : 1;\n emptyStyles.pointerEvents =\n resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || \"\";\n }\n if (this.hasProjected && !hasTransform(this.latestValues)) {\n emptyStyles.transform = transformTemplate\n ? transformTemplate({}, \"\")\n : \"none\";\n this.hasProjected = false;\n }\n return emptyStyles;\n }\n const valuesToRender = lead.animationValues || lead.latestValues;\n this.applyTransformsToTarget();\n styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);\n if (transformTemplate) {\n styles.transform = transformTemplate(valuesToRender, styles.transform);\n }\n const { x, y } = this.projectionDelta;\n styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;\n if (lead.animationValues) {\n /**\n * If the lead component is animating, assign this either the entering/leaving\n * opacity\n */\n styles.opacity =\n lead === this\n ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1\n : this.preserveOpacity\n ? this.latestValues.opacity\n : valuesToRender.opacityExit;\n }\n else {\n /**\n * Or we're not animating at all, set the lead component to its layout\n * opacity and other components to hidden.\n */\n styles.opacity =\n lead === this\n ? valuesToRender.opacity !== undefined\n ? valuesToRender.opacity\n : \"\"\n : valuesToRender.opacityExit !== undefined\n ? valuesToRender.opacityExit\n : 0;\n }\n /**\n * Apply scale correction\n */\n for (const key in scaleCorrectors) {\n if (valuesToRender[key] === undefined)\n continue;\n const { correct, applyTo } = scaleCorrectors[key];\n /**\n * Only apply scale correction to the value if we have an\n * active projection transform. Otherwise these values become\n * vulnerable to distortion if the element changes size without\n * a corresponding layout animation.\n */\n const corrected = styles.transform === \"none\"\n ? valuesToRender[key]\n : correct(valuesToRender[key], lead);\n if (applyTo) {\n const num = applyTo.length;\n for (let i = 0; i < num; i++) {\n styles[applyTo[i]] = corrected;\n }\n }\n else {\n styles[key] = corrected;\n }\n }\n /**\n * Disable pointer events on follow components. This is to ensure\n * that if a follow component covers a lead component it doesn't block\n * pointer events on the lead.\n */\n if (this.options.layoutId) {\n styles.pointerEvents =\n lead === this\n ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || \"\"\n : \"none\";\n }\n return styles;\n }\n clearSnapshot() {\n this.resumeFrom = this.snapshot = undefined;\n }\n // Only run on root\n resetTree() {\n this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });\n this.root.nodes.forEach(clearMeasurements);\n this.root.sharedNodes.clear();\n }\n };\n}\nfunction updateLayout(node) {\n node.updateLayout();\n}\nfunction notifyLayoutUpdate(node) {\n var _a;\n const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;\n if (node.isLead() &&\n node.layout &&\n snapshot &&\n node.hasListeners(\"didUpdate\")) {\n const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;\n const { animationType } = node.options;\n const isShared = snapshot.source !== node.layout.source;\n // TODO Maybe we want to also resize the layout snapshot so we don't trigger\n // animations for instance if layout=\"size\" and an element has only changed position\n if (animationType === \"size\") {\n eachAxis((axis) => {\n const axisSnapshot = isShared\n ? snapshot.measuredBox[axis]\n : snapshot.layoutBox[axis];\n const length = calcLength(axisSnapshot);\n axisSnapshot.min = layout[axis].min;\n axisSnapshot.max = axisSnapshot.min + length;\n });\n }\n else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {\n eachAxis((axis) => {\n const axisSnapshot = isShared\n ? snapshot.measuredBox[axis]\n : snapshot.layoutBox[axis];\n const length = calcLength(layout[axis]);\n axisSnapshot.max = axisSnapshot.min + length;\n /**\n * Ensure relative target gets resized and rerendererd\n */\n if (node.relativeTarget && !node.currentAnimation) {\n node.isProjectionDirty = true;\n node.relativeTarget[axis].max =\n node.relativeTarget[axis].min + length;\n }\n });\n }\n const layoutDelta = createDelta();\n calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);\n const visualDelta = createDelta();\n if (isShared) {\n calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);\n }\n else {\n calcBoxDelta(visualDelta, layout, snapshot.layoutBox);\n }\n const hasLayoutChanged = !isDeltaZero(layoutDelta);\n let hasRelativeTargetChanged = false;\n if (!node.resumeFrom) {\n const relativeParent = node.getClosestProjectingParent();\n /**\n * If the relativeParent is itself resuming from a different element then\n * the relative snapshot is not relavent\n */\n if (relativeParent && !relativeParent.resumeFrom) {\n const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;\n if (parentSnapshot && parentLayout) {\n const relativeSnapshot = createBox();\n calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);\n const relativeLayout = createBox();\n calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);\n if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {\n hasRelativeTargetChanged = true;\n }\n if (relativeParent.options.layoutRoot) {\n node.relativeTarget = relativeLayout;\n node.relativeTargetOrigin = relativeSnapshot;\n node.relativeParent = relativeParent;\n }\n }\n }\n }\n node.notifyListeners(\"didUpdate\", {\n layout,\n snapshot,\n delta: visualDelta,\n layoutDelta,\n hasLayoutChanged,\n hasRelativeTargetChanged,\n });\n }\n else if (node.isLead()) {\n const { onExitComplete } = node.options;\n onExitComplete && onExitComplete();\n }\n /**\n * Clearing transition\n * TODO: Investigate why this transition is being passed in as {type: false } from Framer\n * and why we need it at all\n */\n node.options.transition = undefined;\n}\nfunction propagateDirtyNodes(node) {\n /**\n * Increase debug counter for nodes encountered this frame\n */\n if (isDebug) {\n metrics.totalNodes++;\n }\n if (!node.parent)\n return;\n /**\n * If this node isn't projecting, propagate isProjectionDirty. It will have\n * no performance impact but it will allow the next child that *is* projecting\n * but *isn't* dirty to just check its parent to see if *any* ancestor needs\n * correcting.\n */\n if (!node.isProjecting()) {\n node.isProjectionDirty = node.parent.isProjectionDirty;\n }\n /**\n * Propagate isSharedProjectionDirty and isTransformDirty\n * throughout the whole tree. A future revision can take another look at\n * this but for safety we still recalcualte shared nodes.\n */\n node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty ||\n node.parent.isProjectionDirty ||\n node.parent.isSharedProjectionDirty));\n node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);\n}\nfunction cleanDirtyNodes(node) {\n node.isProjectionDirty =\n node.isSharedProjectionDirty =\n node.isTransformDirty =\n false;\n}\nfunction clearSnapshot(node) {\n node.clearSnapshot();\n}\nfunction clearMeasurements(node) {\n node.clearMeasurements();\n}\nfunction clearIsLayoutDirty(node) {\n node.isLayoutDirty = false;\n}\nfunction resetTransformStyle(node) {\n const { visualElement } = node.options;\n if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {\n visualElement.notify(\"BeforeLayoutMeasure\");\n }\n node.resetTransform();\n}\nfunction finishAnimation(node) {\n node.finishAnimation();\n node.targetDelta = node.relativeTarget = node.target = undefined;\n node.isProjectionDirty = true;\n}\nfunction resolveTargetDelta(node) {\n node.resolveTargetDelta();\n}\nfunction calcProjection(node) {\n node.calcProjection();\n}\nfunction resetSkewAndRotation(node) {\n node.resetSkewAndRotation();\n}\nfunction removeLeadSnapshots(stack) {\n stack.removeLeadSnapshot();\n}\nfunction mixAxisDelta(output, delta, p) {\n output.translate = mixNumber(delta.translate, 0, p);\n output.scale = mixNumber(delta.scale, 1, p);\n output.origin = delta.origin;\n output.originPoint = delta.originPoint;\n}\nfunction mixAxis(output, from, to, p) {\n output.min = mixNumber(from.min, to.min, p);\n output.max = mixNumber(from.max, to.max, p);\n}\nfunction mixBox(output, from, to, p) {\n mixAxis(output.x, from.x, to.x, p);\n mixAxis(output.y, from.y, to.y, p);\n}\nfunction hasOpacityCrossfade(node) {\n return (node.animationValues && node.animationValues.opacityExit !== undefined);\n}\nconst defaultLayoutTransition = {\n duration: 0.45,\n ease: [0.4, 0, 0.1, 1],\n};\nconst userAgentContains = (string) => typeof navigator !== \"undefined\" &&\n navigator.userAgent &&\n navigator.userAgent.toLowerCase().includes(string);\n/**\n * Measured bounding boxes must be rounded in Safari and\n * left untouched in Chrome, otherwise non-integer layouts within scaled-up elements\n * can appear to jump.\n */\nconst roundPoint = userAgentContains(\"applewebkit/\") && !userAgentContains(\"chrome/\")\n ? Math.round\n : noop;\nfunction roundAxis(axis) {\n // Round to the nearest .5 pixels to support subpixel layouts\n axis.min = roundPoint(axis.min);\n axis.max = roundPoint(axis.max);\n}\nfunction roundBox(box) {\n roundAxis(box.x);\n roundAxis(box.y);\n}\nfunction shouldAnimatePositionOnly(animationType, snapshot, layout) {\n return (animationType === \"position\" ||\n (animationType === \"preserve-aspect\" &&\n !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));\n}\nfunction checkNodeWasScrollRoot(node) {\n var _a;\n return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);\n}\n\nexport { cleanDirtyNodes, createProjectionNode, mixAxis, mixAxisDelta, mixBox, propagateDirtyNodes };\n","function isSVGElement(element) {\n return element instanceof SVGElement && element.tagName !== \"svg\";\n}\n\nexport { isSVGElement };\n","import { time } from '../frameloop/sync-time.mjs';\nimport { secondsToMilliseconds } from './time-conversion.mjs';\nimport { frame, cancelFrame } from '../frameloop/frame.mjs';\n\n/**\n * Timeout defined in ms\n */\nfunction delay(callback, timeout) {\n const start = time.now();\n const checkElapsed = ({ timestamp }) => {\n const elapsed = timestamp - start;\n if (elapsed >= timeout) {\n cancelFrame(checkElapsed);\n callback(elapsed - timeout);\n }\n };\n frame.read(checkElapsed, true);\n return () => cancelFrame(checkElapsed);\n}\nfunction delayInSeconds(callback, timeout) {\n return delay(callback, secondsToMilliseconds(timeout));\n}\n\nexport { delay, delayInSeconds };\n","import { animateMotionValue } from '../interfaces/motion-value.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction animateSingleValue(value, keyframes, options) {\n const motionValue$1 = isMotionValue(value) ? value : motionValue(value);\n motionValue$1.start(animateMotionValue(\"\", motionValue$1, keyframes, options));\n return motionValue$1.animation;\n}\n\nexport { animateSingleValue };\n","function buildProjectionTransform(delta, treeScale, latestTransform) {\n let transform = \"\";\n /**\n * The translations we use to calculate are always relative to the viewport coordinate space.\n * But when we apply scales, we also scale the coordinate space of an element and its children.\n * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need\n * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.\n */\n const xTranslate = delta.x.translate / treeScale.x;\n const yTranslate = delta.y.translate / treeScale.y;\n const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0;\n if (xTranslate || yTranslate || zTranslate) {\n transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;\n }\n /**\n * Apply scale correction for the tree transform.\n * This will apply scale to the screen-orientated axes.\n */\n if (treeScale.x !== 1 || treeScale.y !== 1) {\n transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;\n }\n if (latestTransform) {\n const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } = latestTransform;\n if (transformPerspective)\n transform = `perspective(${transformPerspective}px) ${transform}`;\n if (rotate)\n transform += `rotate(${rotate}deg) `;\n if (rotateX)\n transform += `rotateX(${rotateX}deg) `;\n if (rotateY)\n transform += `rotateY(${rotateY}deg) `;\n if (skewX)\n transform += `skewX(${skewX}deg) `;\n if (skewY)\n transform += `skewY(${skewY}deg) `;\n }\n /**\n * Apply scale to match the size of the element to the size we want it.\n * This will apply scale to the element-orientated axes.\n */\n const elementScaleX = delta.x.scale * treeScale.x;\n const elementScaleY = delta.y.scale * treeScale.y;\n if (elementScaleX !== 1 || elementScaleY !== 1) {\n transform += `scale(${elementScaleX}, ${elementScaleY})`;\n }\n return transform || \"none\";\n}\n\nexport { buildProjectionTransform };\n","import { createProjectionNode } from './create-projection-node.mjs';\nimport { addDomEvent } from '../../events/add-dom-event.mjs';\n\nconst DocumentProjectionNode = createProjectionNode({\n attachResizeListener: (ref, notify) => addDomEvent(ref, \"resize\", notify),\n measureScroll: () => ({\n x: document.documentElement.scrollLeft || document.body.scrollLeft,\n y: document.documentElement.scrollTop || document.body.scrollTop,\n }),\n checkIsScrollRoot: () => true,\n});\n\nexport { DocumentProjectionNode };\n","import { createProjectionNode } from './create-projection-node.mjs';\nimport { DocumentProjectionNode } from './DocumentProjectionNode.mjs';\n\nconst rootProjectionNode = {\n current: undefined,\n};\nconst HTMLProjectionNode = createProjectionNode({\n measureScroll: (instance) => ({\n x: instance.scrollLeft,\n y: instance.scrollTop,\n }),\n defaultParent: () => {\n if (!rootProjectionNode.current) {\n const documentNode = new DocumentProjectionNode({});\n documentNode.mount(window);\n documentNode.setOptions({ layoutScroll: true });\n rootProjectionNode.current = documentNode;\n }\n return rootProjectionNode.current;\n },\n resetTransform: (instance, value) => {\n instance.style.transform = value !== undefined ? value : \"none\";\n },\n checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === \"fixed\"),\n});\n\nexport { HTMLProjectionNode, rootProjectionNode };\n","import { DragGesture } from '../../gestures/drag/index.mjs';\nimport { PanGesture } from '../../gestures/pan/index.mjs';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\nimport { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';\n\nconst drag = {\n pan: {\n Feature: PanGesture,\n },\n drag: {\n Feature: DragGesture,\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n};\n\nexport { drag };\n","import { Feature } from '../../motion/features/Feature.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { VisualElementDragControls } from './VisualElementDragControls.mjs';\n\nclass DragGesture extends Feature {\n constructor(node) {\n super(node);\n this.removeGroupControls = noop;\n this.removeListeners = noop;\n this.controls = new VisualElementDragControls(node);\n }\n mount() {\n // If we've been provided a DragControls for manual control over the drag gesture,\n // subscribe this component to it on mount.\n const { dragControls } = this.node.getProps();\n if (dragControls) {\n this.removeGroupControls = dragControls.subscribe(this.controls);\n }\n this.removeListeners = this.controls.addListeners() || noop;\n }\n unmount() {\n this.removeGroupControls();\n this.removeListeners();\n }\n}\n\nexport { DragGesture };\n","import { addPointerEvent } from '../events/add-pointer-event.mjs';\nimport { pipe } from '../utils/pipe.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\nfunction addHoverEvent(node, isActive) {\n const eventName = isActive ? \"pointerenter\" : \"pointerleave\";\n const callbackName = isActive ? \"onHoverStart\" : \"onHoverEnd\";\n const handleEvent = (event, info) => {\n if (event.pointerType === \"touch\" || isDragActive())\n return;\n const props = node.getProps();\n if (node.animationState && props.whileHover) {\n node.animationState.setActive(\"whileHover\", isActive);\n }\n const callback = props[callbackName];\n if (callback) {\n frame.postRender(() => callback(event, info));\n }\n };\n return addPointerEvent(node.current, eventName, handleEvent, {\n passive: !node.getProps()[callbackName],\n });\n}\nclass HoverGesture extends Feature {\n mount() {\n this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));\n }\n unmount() { }\n}\n\nexport { HoverGesture };\n","/**\n * Recursively traverse up the tree to check whether the provided child node\n * is the parent or a descendant of it.\n *\n * @param parent - Element to find\n * @param child - Element to test against parent\n */\nconst isNodeOrChild = (parent, child) => {\n if (!child) {\n return false;\n }\n else if (parent === child) {\n return true;\n }\n else {\n return isNodeOrChild(parent, child.parentElement);\n }\n};\n\nexport { isNodeOrChild };\n","import { extractEventInfo } from '../events/event-info.mjs';\nimport { addDomEvent } from '../events/add-dom-event.mjs';\nimport { addPointerEvent } from '../events/add-pointer-event.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { pipe } from '../utils/pipe.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { isNodeOrChild } from './utils/is-node-or-child.mjs';\nimport { noop } from '../utils/noop.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\nfunction fireSyntheticPointerEvent(name, handler) {\n if (!handler)\n return;\n const syntheticPointerEvent = new PointerEvent(\"pointer\" + name);\n handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));\n}\nclass PressGesture extends Feature {\n constructor() {\n super(...arguments);\n this.removeStartListeners = noop;\n this.removeEndListeners = noop;\n this.removeAccessibleListeners = noop;\n this.startPointerPress = (startEvent, startInfo) => {\n if (this.isPressing)\n return;\n this.removeEndListeners();\n const props = this.node.getProps();\n const endPointerPress = (endEvent, endInfo) => {\n if (!this.checkPressEnd())\n return;\n const { onTap, onTapCancel, globalTapTarget } = this.node.getProps();\n /**\n * We only count this as a tap gesture if the event.target is the same\n * as, or a child of, this component's element\n */\n const handler = !globalTapTarget &&\n !isNodeOrChild(this.node.current, endEvent.target)\n ? onTapCancel\n : onTap;\n if (handler) {\n frame.update(() => handler(endEvent, endInfo));\n }\n };\n const removePointerUpListener = addPointerEvent(window, \"pointerup\", endPointerPress, {\n passive: !(props.onTap || props[\"onPointerUp\"]),\n });\n const removePointerCancelListener = addPointerEvent(window, \"pointercancel\", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), {\n passive: !(props.onTapCancel ||\n props[\"onPointerCancel\"]),\n });\n this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);\n this.startPress(startEvent, startInfo);\n };\n this.startAccessiblePress = () => {\n const handleKeydown = (keydownEvent) => {\n if (keydownEvent.key !== \"Enter\" || this.isPressing)\n return;\n const handleKeyup = (keyupEvent) => {\n if (keyupEvent.key !== \"Enter\" || !this.checkPressEnd())\n return;\n fireSyntheticPointerEvent(\"up\", (event, info) => {\n const { onTap } = this.node.getProps();\n if (onTap) {\n frame.postRender(() => onTap(event, info));\n }\n });\n };\n this.removeEndListeners();\n this.removeEndListeners = addDomEvent(this.node.current, \"keyup\", handleKeyup);\n fireSyntheticPointerEvent(\"down\", (event, info) => {\n this.startPress(event, info);\n });\n };\n const removeKeydownListener = addDomEvent(this.node.current, \"keydown\", handleKeydown);\n const handleBlur = () => {\n if (!this.isPressing)\n return;\n fireSyntheticPointerEvent(\"cancel\", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo));\n };\n const removeBlurListener = addDomEvent(this.node.current, \"blur\", handleBlur);\n this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);\n };\n }\n startPress(event, info) {\n this.isPressing = true;\n const { onTapStart, whileTap } = this.node.getProps();\n /**\n * Ensure we trigger animations before firing event callback\n */\n if (whileTap && this.node.animationState) {\n this.node.animationState.setActive(\"whileTap\", true);\n }\n if (onTapStart) {\n frame.postRender(() => onTapStart(event, info));\n }\n }\n checkPressEnd() {\n this.removeEndListeners();\n this.isPressing = false;\n const props = this.node.getProps();\n if (props.whileTap && this.node.animationState) {\n this.node.animationState.setActive(\"whileTap\", false);\n }\n return !isDragActive();\n }\n cancelPress(event, info) {\n if (!this.checkPressEnd())\n return;\n const { onTapCancel } = this.node.getProps();\n if (onTapCancel) {\n frame.postRender(() => onTapCancel(event, info));\n }\n }\n mount() {\n const props = this.node.getProps();\n const removePointerListener = addPointerEvent(props.globalTapTarget ? window : this.node.current, \"pointerdown\", this.startPointerPress, {\n passive: !(props.onTapStart ||\n props[\"onPointerStart\"]),\n });\n const removeFocusListener = addDomEvent(this.node.current, \"focus\", this.startAccessiblePress);\n this.removeStartListeners = pipe(removePointerListener, removeFocusListener);\n }\n unmount() {\n this.removeStartListeners();\n this.removeEndListeners();\n this.removeAccessibleListeners();\n }\n}\n\nexport { PressGesture };\n","/**\n * Map an IntersectionHandler callback to an element. We only ever make one handler for one\n * element, so even though these handlers might all be triggered by different\n * observers, we can keep them in the same map.\n */\nconst observerCallbacks = new WeakMap();\n/**\n * Multiple observers can be created for multiple element/document roots. Each with\n * different settings. So here we store dictionaries of observers to each root,\n * using serialised settings (threshold/margin) as lookup keys.\n */\nconst observers = new WeakMap();\nconst fireObserverCallback = (entry) => {\n const callback = observerCallbacks.get(entry.target);\n callback && callback(entry);\n};\nconst fireAllObserverCallbacks = (entries) => {\n entries.forEach(fireObserverCallback);\n};\nfunction initIntersectionObserver({ root, ...options }) {\n const lookupRoot = root || document;\n /**\n * If we don't have an observer lookup map for this root, create one.\n */\n if (!observers.has(lookupRoot)) {\n observers.set(lookupRoot, {});\n }\n const rootObservers = observers.get(lookupRoot);\n const key = JSON.stringify(options);\n /**\n * If we don't have an observer for this combination of root and settings,\n * create one.\n */\n if (!rootObservers[key]) {\n rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });\n }\n return rootObservers[key];\n}\nfunction observeIntersection(element, options, callback) {\n const rootInteresectionObserver = initIntersectionObserver(options);\n observerCallbacks.set(element, callback);\n rootInteresectionObserver.observe(element);\n return () => {\n observerCallbacks.delete(element);\n rootInteresectionObserver.unobserve(element);\n };\n}\n\nexport { observeIntersection };\n","import { Feature } from '../Feature.mjs';\nimport { observeIntersection } from './observers.mjs';\n\nconst thresholdNames = {\n some: 0,\n all: 1,\n};\nclass InViewFeature extends Feature {\n constructor() {\n super(...arguments);\n this.hasEnteredView = false;\n this.isInView = false;\n }\n startObserver() {\n this.unmount();\n const { viewport = {} } = this.node.getProps();\n const { root, margin: rootMargin, amount = \"some\", once } = viewport;\n const options = {\n root: root ? root.current : undefined,\n rootMargin,\n threshold: typeof amount === \"number\" ? amount : thresholdNames[amount],\n };\n const onIntersectionUpdate = (entry) => {\n const { isIntersecting } = entry;\n /**\n * If there's been no change in the viewport state, early return.\n */\n if (this.isInView === isIntersecting)\n return;\n this.isInView = isIntersecting;\n /**\n * Handle hasEnteredView. If this is only meant to run once, and\n * element isn't visible, early return. Otherwise set hasEnteredView to true.\n */\n if (once && !isIntersecting && this.hasEnteredView) {\n return;\n }\n else if (isIntersecting) {\n this.hasEnteredView = true;\n }\n if (this.node.animationState) {\n this.node.animationState.setActive(\"whileInView\", isIntersecting);\n }\n /**\n * Use the latest committed props rather than the ones in scope\n * when this observer is created\n */\n const { onViewportEnter, onViewportLeave } = this.node.getProps();\n const callback = isIntersecting ? onViewportEnter : onViewportLeave;\n callback && callback(entry);\n };\n return observeIntersection(this.node.current, options, onIntersectionUpdate);\n }\n mount() {\n this.startObserver();\n }\n update() {\n if (typeof IntersectionObserver === \"undefined\")\n return;\n const { props, prevProps } = this.node;\n const hasOptionsChanged = [\"amount\", \"margin\", \"root\"].some(hasViewportOptionChanged(props, prevProps));\n if (hasOptionsChanged) {\n this.startObserver();\n }\n }\n unmount() { }\n}\nfunction hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {\n return (name) => viewport[name] !== prevViewport[name];\n}\n\nexport { InViewFeature };\n","import { HoverGesture } from '../../gestures/hover.mjs';\nimport { FocusGesture } from '../../gestures/focus.mjs';\nimport { PressGesture } from '../../gestures/press.mjs';\nimport { InViewFeature } from './viewport/index.mjs';\n\nconst gestureAnimations = {\n inView: {\n Feature: InViewFeature,\n },\n tap: {\n Feature: PressGesture,\n },\n focus: {\n Feature: FocusGesture,\n },\n hover: {\n Feature: HoverGesture,\n },\n};\n\nexport { gestureAnimations };\n","import { addDomEvent } from '../events/add-dom-event.mjs';\nimport { Feature } from '../motion/features/Feature.mjs';\nimport { pipe } from '../utils/pipe.mjs';\n\nclass FocusGesture extends Feature {\n constructor() {\n super(...arguments);\n this.isActive = false;\n }\n onFocus() {\n let isFocusVisible = false;\n /**\n * If this element doesn't match focus-visible then don't\n * apply whileHover. But, if matches throws that focus-visible\n * is not a valid selector then in that browser outline styles will be applied\n * to the element by default and we want to match that behaviour with whileFocus.\n */\n try {\n isFocusVisible = this.node.current.matches(\":focus-visible\");\n }\n catch (e) {\n isFocusVisible = true;\n }\n if (!isFocusVisible || !this.node.animationState)\n return;\n this.node.animationState.setActive(\"whileFocus\", true);\n this.isActive = true;\n }\n onBlur() {\n if (!this.isActive || !this.node.animationState)\n return;\n this.node.animationState.setActive(\"whileFocus\", false);\n this.isActive = false;\n }\n mount() {\n this.unmount = pipe(addDomEvent(this.node.current, \"focus\", () => this.onFocus()), addDomEvent(this.node.current, \"blur\", () => this.onBlur()));\n }\n unmount() { }\n}\n\nexport { FocusGesture };\n","import { HTMLProjectionNode } from '../../projection/node/HTMLProjectionNode.mjs';\nimport { MeasureLayout } from './layout/MeasureLayout.mjs';\n\nconst layout = {\n layout: {\n ProjectionNode: HTMLProjectionNode,\n MeasureLayout,\n },\n};\n\nexport { layout };\n","\"use client\";\nimport { createContext } from 'react';\n\nconst MotionContext = createContext({});\n\nexport { MotionContext };\n","\"use client\";\nimport { createContext } from 'react';\n\nconst LazyContext = createContext({ strict: false });\n\nexport { LazyContext };\n","import { useContext, useRef, useInsertionEffect, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { LazyContext } from '../../context/LazyContext.mjs';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\nimport { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';\nimport { microtask } from '../../frameloop/microtask.mjs';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\nimport { SwitchLayoutGroupContext } from '../../context/SwitchLayoutGroupContext.mjs';\n\nfunction useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {\n var _a, _b;\n const { visualElement: parent } = useContext(MotionContext);\n const lazyContext = useContext(LazyContext);\n const presenceContext = useContext(PresenceContext);\n const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;\n const visualElementRef = useRef();\n /**\n * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n */\n createVisualElement = createVisualElement || lazyContext.renderer;\n if (!visualElementRef.current && createVisualElement) {\n visualElementRef.current = createVisualElement(Component, {\n visualState,\n parent,\n props,\n presenceContext,\n blockInitialAnimation: presenceContext\n ? presenceContext.initial === false\n : false,\n reducedMotionConfig,\n });\n }\n const visualElement = visualElementRef.current;\n /**\n * Load Motion gesture and animation features. These are rendered as renderless\n * components so each feature can optionally make use of React lifecycle methods.\n */\n const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);\n if (visualElement &&\n !visualElement.projection &&\n ProjectionNodeConstructor &&\n (visualElement.type === \"html\" || visualElement.type === \"svg\")) {\n createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);\n }\n useInsertionEffect(() => {\n visualElement && visualElement.update(props, presenceContext);\n });\n /**\n * Cache this value as we want to know whether HandoffAppearAnimations\n * was present on initial render - it will be deleted after this.\n */\n const optimisedAppearId = props[optimizedAppearDataAttribute];\n const wantsHandoff = useRef(Boolean(optimisedAppearId) &&\n !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&\n ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));\n useIsomorphicLayoutEffect(() => {\n if (!visualElement)\n return;\n window.MotionIsMounted = true;\n visualElement.updateFeatures();\n microtask.render(visualElement.render);\n /**\n * Ideally this function would always run in a useEffect.\n *\n * However, if we have optimised appear animations to handoff from,\n * it needs to happen synchronously to ensure there's no flash of\n * incorrect styles in the event of a hydration error.\n *\n * So if we detect a situtation where optimised appear animations\n * are running, we use useLayoutEffect to trigger animations.\n */\n if (wantsHandoff.current && visualElement.animationState) {\n visualElement.animationState.animateChanges();\n }\n });\n useEffect(() => {\n if (!visualElement)\n return;\n if (!wantsHandoff.current && visualElement.animationState) {\n visualElement.animationState.animateChanges();\n }\n if (wantsHandoff.current) {\n // This ensures all future calls to animateChanges() in this component will run in useEffect\n queueMicrotask(() => {\n var _a;\n (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);\n });\n wantsHandoff.current = false;\n }\n });\n return visualElement;\n}\nfunction createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {\n const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = props;\n visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props[\"data-framer-portal-id\"]\n ? undefined\n : getClosestProjectingNode(visualElement.parent));\n visualElement.projection.setOptions({\n layoutId,\n layout,\n alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),\n visualElement,\n /**\n * TODO: Update options in an effect. This could be tricky as it'll be too late\n * to update by the time layout animations run.\n * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,\n * ensuring it gets called if there's no potential layout animations.\n *\n */\n animationType: typeof layout === \"string\" ? layout : \"both\",\n initialPromotionConfig,\n layoutScroll,\n layoutRoot,\n });\n}\nfunction getClosestProjectingNode(visualElement) {\n if (!visualElement)\n return undefined;\n return visualElement.options.allowProjection !== false\n ? visualElement.projection\n : getClosestProjectingNode(visualElement.parent);\n}\n\nexport { useVisualElement };\n","import { useCallback } from 'react';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\n\n/**\n * Creates a ref function that, when called, hydrates the provided\n * external ref and VisualElement.\n */\nfunction useMotionRef(visualState, visualElement, externalRef) {\n return useCallback((instance) => {\n instance && visualState.mount && visualState.mount(instance);\n if (visualElement) {\n if (instance) {\n visualElement.mount(instance);\n }\n else {\n visualElement.unmount();\n }\n }\n if (externalRef) {\n if (typeof externalRef === \"function\") {\n externalRef(instance);\n }\n else if (isRefObject(externalRef)) {\n externalRef.current = instance;\n }\n }\n }, \n /**\n * Only pass a new ref callback to React if we've received a visual element\n * factory. Otherwise we'll be mounting/remounting every time externalRef\n * or other dependencies change.\n */\n [visualElement]);\n}\n\nexport { useMotionRef };\n","import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { isVariantLabel } from './is-variant-label.mjs';\nimport { variantProps } from './variant-props.mjs';\n\nfunction isControllingVariants(props) {\n return (isAnimationControls(props.animate) ||\n variantProps.some((name) => isVariantLabel(props[name])));\n}\nfunction isVariantNode(props) {\n return Boolean(isControllingVariants(props) || props.variants);\n}\n\nexport { isControllingVariants, isVariantNode };\n","import { useContext, useMemo } from 'react';\nimport { MotionContext } from './index.mjs';\nimport { getCurrentTreeVariants } from './utils.mjs';\n\nfunction useCreateMotionContext(props) {\n const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));\n return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);\n}\nfunction variantLabelsAsDependency(prop) {\n return Array.isArray(prop) ? prop.join(\" \") : prop;\n}\n\nexport { useCreateMotionContext };\n","const featureProps = {\n animation: [\n \"animate\",\n \"variants\",\n \"whileHover\",\n \"whileTap\",\n \"exit\",\n \"whileInView\",\n \"whileFocus\",\n \"whileDrag\",\n ],\n exit: [\"exit\"],\n drag: [\"drag\", \"dragControls\"],\n focus: [\"whileFocus\"],\n hover: [\"whileHover\", \"onHoverStart\", \"onHoverEnd\"],\n tap: [\"whileTap\", \"onTap\", \"onTapStart\", \"onTapCancel\"],\n pan: [\"onPan\", \"onPanStart\", \"onPanSessionStart\", \"onPanEnd\"],\n inView: [\"whileInView\", \"onViewportEnter\", \"onViewportLeave\"],\n layout: [\"layout\", \"layoutId\"],\n};\nconst featureDefinitions = {};\nfor (const key in featureProps) {\n featureDefinitions[key] = {\n isEnabled: (props) => featureProps[key].some((name) => !!props[name]),\n };\n}\n\nexport { featureDefinitions };\n","const motionComponentSymbol = Symbol.for(\"motionComponentSymbol\");\n\nexport { motionComponentSymbol };\n","\"use client\";\nimport { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef, useContext } from 'react';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { MotionContext } from '../context/MotionContext/index.mjs';\nimport { useVisualElement } from './utils/use-visual-element.mjs';\nimport { useMotionRef } from './utils/use-motion-ref.mjs';\nimport { useCreateMotionContext } from '../context/MotionContext/create.mjs';\nimport { loadFeatures } from './features/load-features.mjs';\nimport { isBrowser } from '../utils/is-browser.mjs';\nimport { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';\nimport { LazyContext } from '../context/LazyContext.mjs';\nimport { motionComponentSymbol } from './utils/symbol.mjs';\nimport { warning, invariant } from '../utils/errors.mjs';\nimport { featureDefinitions } from './features/definitions.mjs';\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n */\nfunction createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {\n preloadedFeatures && loadFeatures(preloadedFeatures);\n function MotionComponent(props, externalRef) {\n /**\n * If we need to measure the element we load this functionality in a\n * separate class component in order to gain access to getSnapshotBeforeUpdate.\n */\n let MeasureLayout;\n const configAndProps = {\n ...useContext(MotionConfigContext),\n ...props,\n layoutId: useLayoutId(props),\n };\n const { isStatic } = configAndProps;\n const context = useCreateMotionContext(props);\n const visualState = useVisualState(props, isStatic);\n if (!isStatic && isBrowser) {\n useStrictMode(configAndProps, preloadedFeatures);\n const layoutProjection = getProjectionFunctionality(configAndProps);\n MeasureLayout = layoutProjection.MeasureLayout;\n /**\n * Create a VisualElement for this component. A VisualElement provides a common\n * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n * providing a way of rendering to these APIs outside of the React render loop\n * for more performant animations and interactions\n */\n context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);\n }\n /**\n * The mount order and hierarchy is specific to ensure our element ref\n * is hydrated by the time features fire their effects.\n */\n return (jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout && context.visualElement ? (jsx(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] }));\n }\n const ForwardRefMotionComponent = forwardRef(MotionComponent);\n ForwardRefMotionComponent[motionComponentSymbol] = Component;\n return ForwardRefMotionComponent;\n}\nfunction useLayoutId({ layoutId }) {\n const layoutGroupId = useContext(LayoutGroupContext).id;\n return layoutGroupId && layoutId !== undefined\n ? layoutGroupId + \"-\" + layoutId\n : layoutId;\n}\nfunction useStrictMode(configAndProps, preloadedFeatures) {\n const isStrict = useContext(LazyContext).strict;\n /**\n * If we're in development mode, check to make sure we're not rendering a motion component\n * as a child of LazyMotion, as this will break the file-size benefits of using it.\n */\n if (process.env.NODE_ENV !== \"production\" &&\n preloadedFeatures &&\n isStrict) {\n const strictMessage = \"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.\";\n configAndProps.ignoreStrict\n ? warning(false, strictMessage)\n : invariant(false, strictMessage);\n }\n}\nfunction getProjectionFunctionality(props) {\n const { drag, layout } = featureDefinitions;\n if (!drag && !layout)\n return {};\n const combined = { ...drag, ...layout };\n return {\n MeasureLayout: (drag === null || drag === void 0 ? void 0 : drag.isEnabled(props)) || (layout === null || layout === void 0 ? void 0 : layout.isEnabled(props))\n ? combined.MeasureLayout\n : undefined,\n ProjectionNode: combined.ProjectionNode,\n };\n}\n\nexport { createRendererMotionComponent };\n","import { featureDefinitions } from './definitions.mjs';\n\nfunction loadFeatures(features) {\n for (const key in features) {\n featureDefinitions[key] = {\n ...featureDefinitions[key],\n ...features[key],\n };\n }\n}\n\nexport { loadFeatures };\n","import { isVariantLabel } from '../../render/utils/is-variant-label.mjs';\nimport { isControllingVariants } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction getCurrentTreeVariants(props, context) {\n if (isControllingVariants(props)) {\n const { initial, animate } = props;\n return {\n initial: initial === false || isVariantLabel(initial)\n ? initial\n : undefined,\n animate: isVariantLabel(animate) ? animate : undefined,\n };\n }\n return props.inherit !== false ? context : {};\n}\n\nexport { getCurrentTreeVariants };\n","/**\n * We keep these listed separately as we use the lowercase tag names as part\n * of the runtime bundle to detect SVG components\n */\nconst lowercaseSVGElements = [\n \"animate\",\n \"circle\",\n \"defs\",\n \"desc\",\n \"ellipse\",\n \"g\",\n \"image\",\n \"line\",\n \"filter\",\n \"marker\",\n \"mask\",\n \"metadata\",\n \"path\",\n \"pattern\",\n \"polygon\",\n \"polyline\",\n \"rect\",\n \"stop\",\n \"switch\",\n \"symbol\",\n \"svg\",\n \"text\",\n \"tspan\",\n \"use\",\n \"view\",\n];\n\nexport { lowercaseSVGElements };\n","import { lowercaseSVGElements } from '../../svg/lowercase-elements.mjs';\n\nfunction isSVGComponent(Component) {\n if (\n /**\n * If it's not a string, it's a custom React component. Currently we only support\n * HTML custom React components.\n */\n typeof Component !== \"string\" ||\n /**\n * If it contains a dash, the element is a custom HTML webcomponent.\n */\n Component.includes(\"-\")) {\n return false;\n }\n else if (\n /**\n * If it's in our list of lowercase SVG tags, it's an SVG component\n */\n lowercaseSVGElements.indexOf(Component) > -1 ||\n /**\n * If it contains a capital letter, it's an SVG component\n */\n /[A-Z]/u.test(Component)) {\n return true;\n }\n return false;\n}\n\nexport { isSVGComponent };\n","function renderHTML(element, { style, vars }, styleProp, projection) {\n Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));\n // Loop over any CSS variables and assign those.\n for (const key in vars) {\n element.style.setProperty(key, vars[key]);\n }\n}\n\nexport { renderHTML };\n","/**\n * A set of attribute names that are always read/written as camel case.\n */\nconst camelCaseAttributes = new Set([\n \"baseFrequency\",\n \"diffuseConstant\",\n \"kernelMatrix\",\n \"kernelUnitLength\",\n \"keySplines\",\n \"keyTimes\",\n \"limitingConeAngle\",\n \"markerHeight\",\n \"markerWidth\",\n \"numOctaves\",\n \"targetX\",\n \"targetY\",\n \"surfaceScale\",\n \"specularConstant\",\n \"specularExponent\",\n \"stdDeviation\",\n \"tableValues\",\n \"viewBox\",\n \"gradientTransform\",\n \"pathLength\",\n \"startOffset\",\n \"textLength\",\n \"lengthAdjust\",\n]);\n\nexport { camelCaseAttributes };\n","import { camelToDash } from '../../dom/utils/camel-to-dash.mjs';\nimport { renderHTML } from '../../html/utils/render.mjs';\nimport { camelCaseAttributes } from './camel-case-attrs.mjs';\n\nfunction renderSVG(element, renderState, _styleProp, projection) {\n renderHTML(element, renderState, undefined, projection);\n for (const key in renderState.attrs) {\n element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);\n }\n}\n\nexport { renderSVG };\n","import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';\nimport { transformProps } from '../../render/html/utils/transform.mjs';\n\nfunction isForcedMotionValue(key, { layout, layoutId }) {\n return (transformProps.has(key) ||\n key.startsWith(\"origin\") ||\n ((layout || layoutId !== undefined) &&\n (!!scaleCorrectors[key] || key === \"opacity\")));\n}\n\nexport { isForcedMotionValue };\n","import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps, visualElement) {\n var _a;\n const { style } = props;\n const newValues = {};\n for (const key in style) {\n if (isMotionValue(style[key]) ||\n (prevProps.style &&\n isMotionValue(prevProps.style[key])) ||\n isForcedMotionValue(key, props) ||\n ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {\n newValues[key] = style[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\nimport { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';\nimport { transformPropOrder } from '../../html/utils/transform.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps, visualElement) {\n const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);\n for (const key in props) {\n if (isMotionValue(props[key]) ||\n isMotionValue(prevProps[key])) {\n const targetKey = transformPropOrder.indexOf(key) !== -1\n ? \"attr\" + key.charAt(0).toUpperCase() + key.substring(1)\n : key;\n newValues[targetKey] = props[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","import { useContext } from 'react';\nimport { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {\n const state = {\n latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),\n renderState: createRenderState(),\n };\n if (onMount) {\n state.mount = (instance) => onMount(props, instance, state);\n }\n return state;\n}\nconst makeUseVisualState = (config) => (props, isStatic) => {\n const context = useContext(MotionContext);\n const presenceContext = useContext(PresenceContext);\n const make = () => makeState(config, props, context, presenceContext);\n return isStatic ? make() : useConstant(make);\n};\nfunction makeLatestValues(props, context, presenceContext, scrapeMotionValues) {\n const values = {};\n const motionValues = scrapeMotionValues(props, {});\n for (const key in motionValues) {\n values[key] = resolveMotionValue(motionValues[key]);\n }\n let { initial, animate } = props;\n const isControllingVariants$1 = isControllingVariants(props);\n const isVariantNode$1 = isVariantNode(props);\n if (context &&\n isVariantNode$1 &&\n !isControllingVariants$1 &&\n props.inherit !== false) {\n if (initial === undefined)\n initial = context.initial;\n if (animate === undefined)\n animate = context.animate;\n }\n let isInitialAnimationBlocked = presenceContext\n ? presenceContext.initial === false\n : false;\n isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;\n const variantToSet = isInitialAnimationBlocked ? animate : initial;\n if (variantToSet &&\n typeof variantToSet !== \"boolean\" &&\n !isAnimationControls(variantToSet)) {\n const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];\n for (let i = 0; i < list.length; i++) {\n const resolved = resolveVariantFromProps(props, list[i]);\n if (resolved) {\n const { transitionEnd, transition, ...target } = resolved;\n for (const key in target) {\n let valueTarget = target[key];\n if (Array.isArray(valueTarget)) {\n /**\n * Take final keyframe if the initial animation is blocked because\n * we want to initialise at the end of that blocked animation.\n */\n const index = isInitialAnimationBlocked\n ? valueTarget.length - 1\n : 0;\n valueTarget = valueTarget[index];\n }\n if (valueTarget !== null) {\n values[key] = valueTarget;\n }\n }\n for (const key in transitionEnd) {\n values[key] = transitionEnd[key];\n }\n }\n }\n }\n return values;\n}\n\nexport { makeUseVisualState };\n","const createHtmlRenderState = () => ({\n style: {},\n transform: {},\n transformOrigin: {},\n vars: {},\n});\n\nexport { createHtmlRenderState };\n","/**\n * Provided a value and a ValueType, returns the value as that value type.\n */\nconst getValueAsType = (value, type) => {\n return type && typeof value === \"number\"\n ? type.transform(value)\n : value;\n};\n\nexport { getValueAsType };\n","import { transformPropOrder } from './transform.mjs';\nimport { getValueAsType } from '../../dom/value-types/get-as-type.mjs';\nimport { numberValueTypes } from '../../dom/value-types/number.mjs';\n\nconst translateAlias = {\n x: \"translateX\",\n y: \"translateY\",\n z: \"translateZ\",\n transformPerspective: \"perspective\",\n};\nconst numTransforms = transformPropOrder.length;\n/**\n * Build a CSS transform style from individual x/y/scale etc properties.\n *\n * This outputs with a default order of transforms/scales/rotations, this can be customised by\n * providing a transformTemplate function.\n */\nfunction buildTransform(latestValues, transform, transformTemplate) {\n // The transform string we're going to build into.\n let transformString = \"\";\n let transformIsDefault = true;\n /**\n * Loop over all possible transforms in order, adding the ones that\n * are present to the transform string.\n */\n for (let i = 0; i < numTransforms; i++) {\n const key = transformPropOrder[i];\n const value = latestValues[key];\n if (value === undefined)\n continue;\n let valueIsDefault = true;\n if (typeof value === \"number\") {\n valueIsDefault = value === (key.startsWith(\"scale\") ? 1 : 0);\n }\n else {\n valueIsDefault = parseFloat(value) === 0;\n }\n if (!valueIsDefault || transformTemplate) {\n const valueAsType = getValueAsType(value, numberValueTypes[key]);\n if (!valueIsDefault) {\n transformIsDefault = false;\n const transformName = translateAlias[key] || key;\n transformString += `${transformName}(${valueAsType}) `;\n }\n if (transformTemplate) {\n transform[key] = valueAsType;\n }\n }\n }\n transformString = transformString.trim();\n // If we have a custom `transform` template, pass our transform values and\n // generated transformString to that before returning\n if (transformTemplate) {\n transformString = transformTemplate(transform, transformIsDefault ? \"\" : transformString);\n }\n else if (transformIsDefault) {\n transformString = \"none\";\n }\n return transformString;\n}\n\nexport { buildTransform };\n","import { buildTransform } from './build-transform.mjs';\nimport { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';\nimport { transformProps } from './transform.mjs';\nimport { getValueAsType } from '../../dom/value-types/get-as-type.mjs';\nimport { numberValueTypes } from '../../dom/value-types/number.mjs';\n\nfunction buildHTMLStyles(state, latestValues, transformTemplate) {\n const { style, vars, transformOrigin } = state;\n // Track whether we encounter any transform or transformOrigin values.\n let hasTransform = false;\n let hasTransformOrigin = false;\n /**\n * Loop over all our latest animated values and decide whether to handle them\n * as a style or CSS variable.\n *\n * Transforms and transform origins are kept separately for further processing.\n */\n for (const key in latestValues) {\n const value = latestValues[key];\n if (transformProps.has(key)) {\n // If this is a transform, flag to enable further transform processing\n hasTransform = true;\n continue;\n }\n else if (isCSSVariableName(key)) {\n vars[key] = value;\n continue;\n }\n else {\n // Convert the value to its default value type, ie 0 -> \"0px\"\n const valueAsType = getValueAsType(value, numberValueTypes[key]);\n if (key.startsWith(\"origin\")) {\n // If this is a transform origin, flag and enable further transform-origin processing\n hasTransformOrigin = true;\n transformOrigin[key] =\n valueAsType;\n }\n else {\n style[key] = valueAsType;\n }\n }\n }\n if (!latestValues.transform) {\n if (hasTransform || transformTemplate) {\n style.transform = buildTransform(latestValues, state.transform, transformTemplate);\n }\n else if (style.transform) {\n /**\n * If we have previously created a transform but currently don't have any,\n * reset transform style to none.\n */\n style.transform = \"none\";\n }\n }\n /**\n * Build a transformOrigin style. Uses the same defaults as the browser for\n * undefined origins.\n */\n if (hasTransformOrigin) {\n const { originX = \"50%\", originY = \"50%\", originZ = 0, } = transformOrigin;\n style.transformOrigin = `${originX} ${originY} ${originZ}`;\n }\n}\n\nexport { buildHTMLStyles };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nfunction calcOrigin(origin, offset, size) {\n return typeof origin === \"string\"\n ? origin\n : px.transform(offset + size * origin);\n}\n/**\n * The SVG transform origin defaults are different to CSS and is less intuitive,\n * so we use the measured dimensions of the SVG to reconcile these.\n */\nfunction calcSVGTransformOrigin(dimensions, originX, originY) {\n const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);\n const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);\n return `${pxOriginX} ${pxOriginY}`;\n}\n\nexport { calcSVGTransformOrigin };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nconst dashKeys = {\n offset: \"stroke-dashoffset\",\n array: \"stroke-dasharray\",\n};\nconst camelKeys = {\n offset: \"strokeDashoffset\",\n array: \"strokeDasharray\",\n};\n/**\n * Build SVG path properties. Uses the path's measured length to convert\n * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset\n * and stroke-dasharray attributes.\n *\n * This function is mutative to reduce per-frame GC.\n */\nfunction buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {\n // Normalise path length by setting SVG attribute pathLength to 1\n attrs.pathLength = 1;\n // We use dash case when setting attributes directly to the DOM node and camel case\n // when defining props on a React component.\n const keys = useDashCase ? dashKeys : camelKeys;\n // Build the dash offset\n attrs[keys.offset] = px.transform(-offset);\n // Build the dash array\n const pathLength = px.transform(length);\n const pathSpacing = px.transform(spacing);\n attrs[keys.array] = `${pathLength} ${pathSpacing}`;\n}\n\nexport { buildSVGPath };\n","import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';\nimport { calcSVGTransformOrigin } from './transform-origin.mjs';\nimport { buildSVGPath } from './path.mjs';\n\n/**\n * Build SVG visual attrbutes, like cx and style.transform\n */\nfunction buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, \n// This is object creation, which we try to avoid per-frame.\n...latest }, isSVGTag, transformTemplate) {\n buildHTMLStyles(state, latest, transformTemplate);\n /**\n * For svg tags we just want to make sure viewBox is animatable and treat all the styles\n * as normal HTML tags.\n */\n if (isSVGTag) {\n if (state.style.viewBox) {\n state.attrs.viewBox = state.style.viewBox;\n }\n return;\n }\n state.attrs = state.style;\n state.style = {};\n const { attrs, style, dimensions } = state;\n /**\n * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs\n * and copy it into style.\n */\n if (attrs.transform) {\n if (dimensions)\n style.transform = attrs.transform;\n delete attrs.transform;\n }\n // Parse transformOrigin\n if (dimensions &&\n (originX !== undefined || originY !== undefined || style.transform)) {\n style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);\n }\n // Render attrX/attrY/attrScale as attributes\n if (attrX !== undefined)\n attrs.x = attrX;\n if (attrY !== undefined)\n attrs.y = attrY;\n if (attrScale !== undefined)\n attrs.scale = attrScale;\n // Build SVG path if one has been defined\n if (pathLength !== undefined) {\n buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);\n }\n}\n\nexport { buildSVGAttrs };\n","const isSVGTag = (tag) => typeof tag === \"string\" && tag.toLowerCase() === \"svg\";\n\nexport { isSVGTag };\n","import { renderSVG } from './utils/render.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst svgMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createSvgRenderState,\n onMount: (props, instance, { renderState, latestValues }) => {\n frame.read(() => {\n try {\n renderState.dimensions =\n typeof instance.getBBox ===\n \"function\"\n ? instance.getBBox()\n : instance.getBoundingClientRect();\n }\n catch (e) {\n // Most likely trying to measure an unrendered element under Firefox\n renderState.dimensions = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n };\n }\n });\n frame.render(() => {\n buildSVGAttrs(renderState, latestValues, isSVGTag(instance.tagName), props.transformTemplate);\n renderSVG(instance, renderState);\n });\n },\n }),\n};\n\nexport { svgMotionConfig };\n","import { createHtmlRenderState } from '../../html/utils/create-render-state.mjs';\n\nconst createSvgRenderState = () => ({\n ...createHtmlRenderState(),\n attrs: {},\n});\n\nexport { createSvgRenderState };\n","import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nconst htmlMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps,\n createRenderState: createHtmlRenderState,\n }),\n};\n\nexport { htmlMotionConfig };\n","import { useMemo } from 'react';\nimport { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\nimport { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nfunction copyRawValuesOnly(target, source, props) {\n for (const key in source) {\n if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {\n target[key] = source[key];\n }\n }\n}\nfunction useInitialMotionValues({ transformTemplate }, visualState) {\n return useMemo(() => {\n const state = createHtmlRenderState();\n buildHTMLStyles(state, visualState, transformTemplate);\n return Object.assign({}, state.vars, state.style);\n }, [visualState]);\n}\nfunction useStyle(props, visualState) {\n const styleProp = props.style || {};\n const style = {};\n /**\n * Copy non-Motion Values straight into style\n */\n copyRawValuesOnly(style, styleProp, props);\n Object.assign(style, useInitialMotionValues(props, visualState));\n return style;\n}\nfunction useHTMLProps(props, visualState) {\n // The `any` isn't ideal but it is the type of createElement props argument\n const htmlProps = {};\n const style = useStyle(props, visualState);\n if (props.drag && props.dragListener !== false) {\n // Disable the ghost element when a user drags\n htmlProps.draggable = false;\n // Disable text selection\n style.userSelect =\n style.WebkitUserSelect =\n style.WebkitTouchCallout =\n \"none\";\n // Disable scrolling on the draggable direction\n style.touchAction =\n props.drag === true\n ? \"none\"\n : `pan-${props.drag === \"x\" ? \"y\" : \"x\"}`;\n }\n if (props.tabIndex === undefined &&\n (props.onTap || props.onTapStart || props.whileTap)) {\n htmlProps.tabIndex = 0;\n }\n htmlProps.style = style;\n return htmlProps;\n}\n\nexport { copyRawValuesOnly, useHTMLProps };\n","/**\n * A list of all valid MotionProps.\n *\n * @privateRemarks\n * This doesn't throw if a `MotionProp` name is missing - it should.\n */\nconst validMotionProps = new Set([\n \"animate\",\n \"exit\",\n \"variants\",\n \"initial\",\n \"style\",\n \"values\",\n \"variants\",\n \"transition\",\n \"transformTemplate\",\n \"custom\",\n \"inherit\",\n \"onBeforeLayoutMeasure\",\n \"onAnimationStart\",\n \"onAnimationComplete\",\n \"onUpdate\",\n \"onDragStart\",\n \"onDrag\",\n \"onDragEnd\",\n \"onMeasureDragConstraints\",\n \"onDirectionLock\",\n \"onDragTransitionEnd\",\n \"_dragX\",\n \"_dragY\",\n \"onHoverStart\",\n \"onHoverEnd\",\n \"onViewportEnter\",\n \"onViewportLeave\",\n \"globalTapTarget\",\n \"ignoreStrict\",\n \"viewport\",\n]);\n/**\n * Check whether a prop name is a valid `MotionProp` key.\n *\n * @param key - Name of the property to check\n * @returns `true` is key is a valid `MotionProp`.\n *\n * @public\n */\nfunction isValidMotionProp(key) {\n return (key.startsWith(\"while\") ||\n (key.startsWith(\"drag\") && key !== \"draggable\") ||\n key.startsWith(\"layout\") ||\n key.startsWith(\"onTap\") ||\n key.startsWith(\"onPan\") ||\n key.startsWith(\"onLayout\") ||\n validMotionProps.has(key));\n}\n\nexport { isValidMotionProp };\n","import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';\n\nlet shouldForward = (key) => !isValidMotionProp(key);\nfunction loadExternalIsValidProp(isValidProp) {\n if (!isValidProp)\n return;\n // Explicitly filter our events\n shouldForward = (key) => key.startsWith(\"on\") ? !isValidMotionProp(key) : isValidProp(key);\n}\n/**\n * Emotion and Styled Components both allow users to pass through arbitrary props to their components\n * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which\n * of these should be passed to the underlying DOM node.\n *\n * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props\n * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props\n * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of\n * `@emotion/is-prop-valid`, however to fix this problem we need to use it.\n *\n * By making it an optionalDependency we can offer this functionality only in the situations where it's\n * actually required.\n */\ntry {\n /**\n * We attempt to import this package but require won't be defined in esm environments, in that case\n * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed\n * in favour of explicit injection.\n */\n loadExternalIsValidProp(require(\"@emotion/is-prop-valid\").default);\n}\ncatch (_a) {\n // We don't need to actually do anything here - the fallback is the existing `isPropValid`.\n}\nfunction filterProps(props, isDom, forwardMotionProps) {\n const filteredProps = {};\n for (const key in props) {\n /**\n * values is considered a valid prop by Emotion, so if it's present\n * this will be rendered out to the DOM unless explicitly filtered.\n *\n * We check the type as it could be used with the `feColorMatrix`\n * element, which we support.\n */\n if (key === \"values\" && typeof props.values === \"object\")\n continue;\n if (shouldForward(key) ||\n (forwardMotionProps === true && isValidMotionProp(key)) ||\n (!isDom && !isValidMotionProp(key)) ||\n // If trying to use native HTML drag events, forward drag listeners\n (props[\"draggable\"] &&\n key.startsWith(\"onDrag\"))) {\n filteredProps[key] =\n props[key];\n }\n }\n return filteredProps;\n}\n\nexport { filterProps, loadExternalIsValidProp };\n","import { useMemo } from 'react';\nimport { copyRawValuesOnly } from '../html/use-props.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nfunction useSVGProps(props, visualState, _isStatic, Component) {\n const visualProps = useMemo(() => {\n const state = createSvgRenderState();\n buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate);\n return {\n ...state.attrs,\n style: { ...state.style },\n };\n }, [visualState]);\n if (props.style) {\n const rawStyles = {};\n copyRawValuesOnly(rawStyles, props.style, props);\n visualProps.style = { ...rawStyles, ...visualProps.style };\n }\n return visualProps;\n}\n\nexport { useSVGProps };\n","import { Fragment, useMemo, createElement } from 'react';\nimport { useHTMLProps } from '../html/use-props.mjs';\nimport { filterProps } from './utils/filter-props.mjs';\nimport { isSVGComponent } from './utils/is-svg-component.mjs';\nimport { useSVGProps } from '../svg/use-props.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction createUseRender(forwardMotionProps = false) {\n const useRender = (Component, props, ref, { latestValues }, isStatic) => {\n const useVisualProps = isSVGComponent(Component)\n ? useSVGProps\n : useHTMLProps;\n const visualProps = useVisualProps(props, latestValues, isStatic, Component);\n const filteredProps = filterProps(props, typeof Component === \"string\", forwardMotionProps);\n const elementProps = Component !== Fragment\n ? { ...filteredProps, ...visualProps, ref }\n : {};\n /**\n * If component has been handed a motion value as its child,\n * memoise its initial value and render that. Subsequent updates\n * will be handled by the onChange handler\n */\n const { children } = props;\n const renderedChildren = useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);\n return createElement(Component, {\n ...elementProps,\n children: renderedChildren,\n });\n };\n return useRender;\n}\n\nexport { createUseRender };\n","import { createRendererMotionComponent } from '../../motion/index.mjs';\nimport { isSVGComponent } from '../dom/utils/is-svg-component.mjs';\nimport { svgMotionConfig } from '../svg/config-motion.mjs';\nimport { htmlMotionConfig } from '../html/config-motion.mjs';\nimport { createUseRender } from '../dom/use-render.mjs';\n\nfunction createMotionComponentFactory(preloadedFeatures, createVisualElement) {\n return function createMotionComponent(Component, { forwardMotionProps } = { forwardMotionProps: false }) {\n const baseConfig = isSVGComponent(Component)\n ? svgMotionConfig\n : htmlMotionConfig;\n const config = {\n ...baseConfig,\n preloadedFeatures,\n useRender: createUseRender(forwardMotionProps),\n createVisualElement,\n Component,\n };\n return createRendererMotionComponent(config);\n };\n}\n\nexport { createMotionComponentFactory };\n","// Does this device prefer reduced motion? Returns `null` server-side.\nconst prefersReducedMotion = { current: null };\nconst hasReducedMotionListener = { current: false };\n\nexport { hasReducedMotionListener, prefersReducedMotion };\n","const visualElementStore = new WeakMap();\n\nexport { visualElementStore };\n","import { color } from '../../../value/types/color/index.mjs';\nimport { complex } from '../../../value/types/complex/index.mjs';\nimport { dimensionValueTypes } from './dimensions.mjs';\nimport { testValueType } from './test.mjs';\n\n/**\n * A list of all ValueTypes\n */\nconst valueTypes = [...dimensionValueTypes, color, complex];\n/**\n * Tests a value against the list of ValueTypes\n */\nconst findValueType = (v) => valueTypes.find(testValueType(v));\n\nexport { findValueType };\n","import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';\nimport { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';\nimport { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { motionValue } from '../value/index.mjs';\nimport { isMotionValue } from '../value/utils/is-motion-value.mjs';\nimport { transformProps } from './html/utils/transform.mjs';\nimport { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';\nimport { updateMotionValuesFromProps } from './utils/motion-values.mjs';\nimport { resolveVariantFromProps } from './utils/resolve-variants.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\nimport { featureDefinitions } from '../motion/features/definitions.mjs';\nimport { visualElementStore } from './store.mjs';\nimport { KeyframeResolver } from './utils/KeyframesResolver.mjs';\nimport { isNumericalString } from '../utils/is-numerical-string.mjs';\nimport { isZeroValueString } from '../utils/is-zero-value-string.mjs';\nimport { findValueType } from './dom/value-types/find.mjs';\nimport { complex } from '../value/types/complex/index.mjs';\nimport { getAnimatableNone } from './dom/value-types/animatable-none.mjs';\nimport { createBox } from '../projection/geometry/models.mjs';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { frame, cancelFrame } from '../frameloop/frame.mjs';\n\nconst propEventHandlers = [\n \"AnimationStart\",\n \"AnimationComplete\",\n \"Update\",\n \"BeforeLayoutMeasure\",\n \"LayoutMeasure\",\n \"LayoutAnimationStart\",\n \"LayoutAnimationComplete\",\n];\n/**\n * A VisualElement is an imperative abstraction around UI elements such as\n * HTMLElement, SVGElement, Three.Object3D etc.\n */\nclass VisualElement {\n /**\n * This method takes React props and returns found MotionValues. For example, HTML\n * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.\n *\n * This isn't an abstract method as it needs calling in the constructor, but it is\n * intended to be one.\n */\n scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) {\n return {};\n }\n constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }, options = {}) {\n /**\n * A reference to the current underlying Instance, e.g. a HTMLElement\n * or Three.Mesh etc.\n */\n this.current = null;\n /**\n * A set containing references to this VisualElement's children.\n */\n this.children = new Set();\n /**\n * Determine what role this visual element should take in the variant tree.\n */\n this.isVariantNode = false;\n this.isControllingVariants = false;\n /**\n * Decides whether this VisualElement should animate in reduced motion\n * mode.\n *\n * TODO: This is currently set on every individual VisualElement but feels\n * like it could be set globally.\n */\n this.shouldReduceMotion = null;\n /**\n * A map of all motion values attached to this visual element. Motion\n * values are source of truth for any given animated value. A motion\n * value might be provided externally by the component via props.\n */\n this.values = new Map();\n this.KeyframeResolver = KeyframeResolver;\n /**\n * Cleanup functions for active features (hover/tap/exit etc)\n */\n this.features = {};\n /**\n * A map of every subscription that binds the provided or generated\n * motion values onChange listeners to this visual element.\n */\n this.valueSubscriptions = new Map();\n /**\n * A reference to the previously-provided motion values as returned\n * from scrapeMotionValuesFromProps. We use the keys in here to determine\n * if any motion values need to be removed after props are updated.\n */\n this.prevMotionValues = {};\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n /**\n * An object containing an unsubscribe function for each prop event subscription.\n * For example, every \"Update\" event can have multiple subscribers via\n * VisualElement.on(), but only one of those can be defined via the onUpdate prop.\n */\n this.propEventSubscriptions = {};\n this.notifyUpdate = () => this.notify(\"Update\", this.latestValues);\n this.render = () => {\n if (!this.current)\n return;\n this.triggerBuild();\n this.renderInstance(this.current, this.renderState, this.props.style, this.projection);\n };\n this.renderScheduledAt = 0.0;\n this.scheduleRender = () => {\n const now = time.now();\n if (this.renderScheduledAt < now) {\n this.renderScheduledAt = now;\n frame.render(this.render, false, true);\n }\n };\n const { latestValues, renderState } = visualState;\n this.latestValues = latestValues;\n this.baseTarget = { ...latestValues };\n this.initialValues = props.initial ? { ...latestValues } : {};\n this.renderState = renderState;\n this.parent = parent;\n this.props = props;\n this.presenceContext = presenceContext;\n this.depth = parent ? parent.depth + 1 : 0;\n this.reducedMotionConfig = reducedMotionConfig;\n this.options = options;\n this.blockInitialAnimation = Boolean(blockInitialAnimation);\n this.isControllingVariants = isControllingVariants(props);\n this.isVariantNode = isVariantNode(props);\n if (this.isVariantNode) {\n this.variantChildren = new Set();\n }\n this.manuallyAnimateOnMount = Boolean(parent && parent.current);\n /**\n * Any motion values that are provided to the element when created\n * aren't yet bound to the element, as this would technically be impure.\n * However, we iterate through the motion values and set them to the\n * initial values for this component.\n *\n * TODO: This is impure and we should look at changing this to run on mount.\n * Doing so will break some tests but this isn't necessarily a breaking change,\n * more a reflection of the test.\n */\n const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);\n for (const key in initialMotionValues) {\n const value = initialMotionValues[key];\n if (latestValues[key] !== undefined && isMotionValue(value)) {\n value.set(latestValues[key], false);\n }\n }\n }\n mount(instance) {\n this.current = instance;\n visualElementStore.set(instance, this);\n if (this.projection && !this.projection.instance) {\n this.projection.mount(instance);\n }\n if (this.parent && this.isVariantNode && !this.isControllingVariants) {\n this.removeFromVariantTree = this.parent.addVariantChild(this);\n }\n this.values.forEach((value, key) => this.bindToMotionValue(key, value));\n if (!hasReducedMotionListener.current) {\n initPrefersReducedMotion();\n }\n this.shouldReduceMotion =\n this.reducedMotionConfig === \"never\"\n ? false\n : this.reducedMotionConfig === \"always\"\n ? true\n : prefersReducedMotion.current;\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(this.shouldReduceMotion !== true, \"You have Reduced Motion enabled on your device. Animations may not appear as expected.\");\n }\n if (this.parent)\n this.parent.children.add(this);\n this.update(this.props, this.presenceContext);\n }\n unmount() {\n visualElementStore.delete(this.current);\n this.projection && this.projection.unmount();\n cancelFrame(this.notifyUpdate);\n cancelFrame(this.render);\n this.valueSubscriptions.forEach((remove) => remove());\n this.valueSubscriptions.clear();\n this.removeFromVariantTree && this.removeFromVariantTree();\n this.parent && this.parent.children.delete(this);\n for (const key in this.events) {\n this.events[key].clear();\n }\n for (const key in this.features) {\n const feature = this.features[key];\n if (feature) {\n feature.unmount();\n feature.isMounted = false;\n }\n }\n this.current = null;\n }\n bindToMotionValue(key, value) {\n if (this.valueSubscriptions.has(key)) {\n this.valueSubscriptions.get(key)();\n }\n const valueIsTransform = transformProps.has(key);\n const removeOnChange = value.on(\"change\", (latestValue) => {\n this.latestValues[key] = latestValue;\n this.props.onUpdate && frame.preRender(this.notifyUpdate);\n if (valueIsTransform && this.projection) {\n this.projection.isTransformDirty = true;\n }\n });\n const removeOnRenderRequest = value.on(\"renderRequest\", this.scheduleRender);\n let removeSyncCheck;\n if (window.MotionCheckAppearSync) {\n removeSyncCheck = window.MotionCheckAppearSync(this, key, value);\n }\n this.valueSubscriptions.set(key, () => {\n removeOnChange();\n removeOnRenderRequest();\n if (removeSyncCheck)\n removeSyncCheck();\n if (value.owner)\n value.stop();\n });\n }\n sortNodePosition(other) {\n /**\n * If these nodes aren't even of the same type we can't compare their depth.\n */\n if (!this.current ||\n !this.sortInstanceNodePosition ||\n this.type !== other.type) {\n return 0;\n }\n return this.sortInstanceNodePosition(this.current, other.current);\n }\n updateFeatures() {\n let key = \"animation\";\n for (key in featureDefinitions) {\n const featureDefinition = featureDefinitions[key];\n if (!featureDefinition)\n continue;\n const { isEnabled, Feature: FeatureConstructor } = featureDefinition;\n /**\n * If this feature is enabled but not active, make a new instance.\n */\n if (!this.features[key] &&\n FeatureConstructor &&\n isEnabled(this.props)) {\n this.features[key] = new FeatureConstructor(this);\n }\n /**\n * If we have a feature, mount or update it.\n */\n if (this.features[key]) {\n const feature = this.features[key];\n if (feature.isMounted) {\n feature.update();\n }\n else {\n feature.mount();\n feature.isMounted = true;\n }\n }\n }\n }\n triggerBuild() {\n this.build(this.renderState, this.latestValues, this.props);\n }\n /**\n * Measure the current viewport box with or without transforms.\n * Only measures axis-aligned boxes, rotate and skew must be manually\n * removed with a re-render to work.\n */\n measureViewportBox() {\n return this.current\n ? this.measureInstanceViewportBox(this.current, this.props)\n : createBox();\n }\n getStaticValue(key) {\n return this.latestValues[key];\n }\n setStaticValue(key, value) {\n this.latestValues[key] = value;\n }\n /**\n * Update the provided props. Ensure any newly-added motion values are\n * added to our map, old ones removed, and listeners updated.\n */\n update(props, presenceContext) {\n if (props.transformTemplate || this.props.transformTemplate) {\n this.scheduleRender();\n }\n this.prevProps = this.props;\n this.props = props;\n this.prevPresenceContext = this.presenceContext;\n this.presenceContext = presenceContext;\n /**\n * Update prop event handlers ie onAnimationStart, onAnimationComplete\n */\n for (let i = 0; i < propEventHandlers.length; i++) {\n const key = propEventHandlers[i];\n if (this.propEventSubscriptions[key]) {\n this.propEventSubscriptions[key]();\n delete this.propEventSubscriptions[key];\n }\n const listenerName = (\"on\" + key);\n const listener = props[listenerName];\n if (listener) {\n this.propEventSubscriptions[key] = this.on(key, listener);\n }\n }\n this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps, this), this.prevMotionValues);\n if (this.handleChildMotionValue) {\n this.handleChildMotionValue();\n }\n }\n getProps() {\n return this.props;\n }\n /**\n * Returns the variant definition with a given name.\n */\n getVariant(name) {\n return this.props.variants ? this.props.variants[name] : undefined;\n }\n /**\n * Returns the defined default transition on this component.\n */\n getDefaultTransition() {\n return this.props.transition;\n }\n getTransformPagePoint() {\n return this.props.transformPagePoint;\n }\n getClosestVariantNode() {\n return this.isVariantNode\n ? this\n : this.parent\n ? this.parent.getClosestVariantNode()\n : undefined;\n }\n /**\n * Add a child visual element to our set of children.\n */\n addVariantChild(child) {\n const closestVariantNode = this.getClosestVariantNode();\n if (closestVariantNode) {\n closestVariantNode.variantChildren &&\n closestVariantNode.variantChildren.add(child);\n return () => closestVariantNode.variantChildren.delete(child);\n }\n }\n /**\n * Add a motion value and bind it to this visual element.\n */\n addValue(key, value) {\n // Remove existing value if it exists\n const existingValue = this.values.get(key);\n if (value !== existingValue) {\n if (existingValue)\n this.removeValue(key);\n this.bindToMotionValue(key, value);\n this.values.set(key, value);\n this.latestValues[key] = value.get();\n }\n }\n /**\n * Remove a motion value and unbind any active subscriptions.\n */\n removeValue(key) {\n this.values.delete(key);\n const unsubscribe = this.valueSubscriptions.get(key);\n if (unsubscribe) {\n unsubscribe();\n this.valueSubscriptions.delete(key);\n }\n delete this.latestValues[key];\n this.removeValueFromRenderState(key, this.renderState);\n }\n /**\n * Check whether we have a motion value for this key\n */\n hasValue(key) {\n return this.values.has(key);\n }\n getValue(key, defaultValue) {\n if (this.props.values && this.props.values[key]) {\n return this.props.values[key];\n }\n let value = this.values.get(key);\n if (value === undefined && defaultValue !== undefined) {\n value = motionValue(defaultValue === null ? undefined : defaultValue, { owner: this });\n this.addValue(key, value);\n }\n return value;\n }\n /**\n * If we're trying to animate to a previously unencountered value,\n * we need to check for it in our state and as a last resort read it\n * directly from the instance (which might have performance implications).\n */\n readValue(key, target) {\n var _a;\n let value = this.latestValues[key] !== undefined || !this.current\n ? this.latestValues[key]\n : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);\n if (value !== undefined && value !== null) {\n if (typeof value === \"string\" &&\n (isNumericalString(value) || isZeroValueString(value))) {\n // If this is a number read as a string, ie \"0\" or \"200\", convert it to a number\n value = parseFloat(value);\n }\n else if (!findValueType(value) && complex.test(target)) {\n value = getAnimatableNone(key, target);\n }\n this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);\n }\n return isMotionValue(value) ? value.get() : value;\n }\n /**\n * Set the base target to later animate back to. This is currently\n * only hydrated on creation and when we first read a value.\n */\n setBaseTarget(key, value) {\n this.baseTarget[key] = value;\n }\n /**\n * Find the base target for a value thats been removed from all animation\n * props.\n */\n getBaseTarget(key) {\n var _a;\n const { initial } = this.props;\n let valueFromInitial;\n if (typeof initial === \"string\" || typeof initial === \"object\") {\n const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);\n if (variant) {\n valueFromInitial = variant[key];\n }\n }\n /**\n * If this value still exists in the current initial variant, read that.\n */\n if (initial && valueFromInitial !== undefined) {\n return valueFromInitial;\n }\n /**\n * Alternatively, if this VisualElement config has defined a getBaseTarget\n * so we can read the value from an alternative source, try that.\n */\n const target = this.getBaseTargetFromProps(this.props, key);\n if (target !== undefined && !isMotionValue(target))\n return target;\n /**\n * If the value was initially defined on initial, but it doesn't any more,\n * return undefined. Otherwise return the value as initially read from the DOM.\n */\n return this.initialValues[key] !== undefined &&\n valueFromInitial === undefined\n ? undefined\n : this.baseTarget[key];\n }\n on(eventName, callback) {\n if (!this.events[eventName]) {\n this.events[eventName] = new SubscriptionManager();\n }\n return this.events[eventName].add(callback);\n }\n notify(eventName, ...args) {\n if (this.events[eventName]) {\n this.events[eventName].notify(...args);\n }\n }\n}\n\nexport { VisualElement };\n","import { isBrowser } from '../is-browser.mjs';\nimport { hasReducedMotionListener, prefersReducedMotion } from './state.mjs';\n\nfunction initPrefersReducedMotion() {\n hasReducedMotionListener.current = true;\n if (!isBrowser)\n return;\n if (window.matchMedia) {\n const motionMediaQuery = window.matchMedia(\"(prefers-reduced-motion)\");\n const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);\n motionMediaQuery.addListener(setReducedMotionPreferences);\n setReducedMotionPreferences();\n }\n else {\n prefersReducedMotion.current = false;\n }\n}\n\nexport { initPrefersReducedMotion };\n","import { warnOnce } from '../../utils/warn-once.mjs';\nimport { motionValue } from '../../value/index.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction updateMotionValuesFromProps(element, next, prev) {\n for (const key in next) {\n const nextValue = next[key];\n const prevValue = prev[key];\n if (isMotionValue(nextValue)) {\n /**\n * If this is a motion value found in props or style, we want to add it\n * to our visual element's motion value map.\n */\n element.addValue(key, nextValue);\n /**\n * Check the version of the incoming motion value with this version\n * and warn against mismatches.\n */\n if (process.env.NODE_ENV === \"development\") {\n warnOnce(nextValue.version === \"11.11.10\", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.10 may not work as expected.`);\n }\n }\n else if (isMotionValue(prevValue)) {\n /**\n * If we're swapping from a motion value to a static value,\n * create a new motion value from that\n */\n element.addValue(key, motionValue(nextValue, { owner: element }));\n }\n else if (prevValue !== nextValue) {\n /**\n * If this is a flat value that has changed, update the motion value\n * or create one if it doesn't exist. We only want to do this if we're\n * not handling the value with our animation state.\n */\n if (element.hasValue(key)) {\n const existingValue = element.getValue(key);\n if (existingValue.liveStyle === true) {\n existingValue.jump(nextValue);\n }\n else if (!existingValue.hasAnimated) {\n existingValue.set(nextValue);\n }\n }\n else {\n const latestValue = element.getStaticValue(key);\n element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element }));\n }\n }\n }\n // Handle removed values\n for (const key in prev) {\n if (next[key] === undefined)\n element.removeValue(key);\n }\n return next;\n}\n\nexport { updateMotionValuesFromProps };\n","import { VisualElement } from '../VisualElement.mjs';\nimport { DOMKeyframesResolver } from './DOMKeyframesResolver.mjs';\n\nclass DOMVisualElement extends VisualElement {\n constructor() {\n super(...arguments);\n this.KeyframeResolver = DOMKeyframesResolver;\n }\n sortInstanceNodePosition(a, b) {\n /**\n * compareDocumentPosition returns a bitmask, by using the bitwise &\n * we're returning true if 2 in that bitmask is set to true. 2 is set\n * to true if b preceeds a.\n */\n return a.compareDocumentPosition(b) & 2 ? 1 : -1;\n }\n getBaseTargetFromProps(props, key) {\n return props.style\n ? props.style[key]\n : undefined;\n }\n removeValueFromRenderState(key, { vars, style }) {\n delete vars[key];\n delete style[key];\n }\n}\n\nexport { DOMVisualElement };\n","import { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';\nimport { transformProps } from './utils/transform.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { renderHTML } from './utils/render.mjs';\nimport { getDefaultValueType } from '../dom/value-types/defaults.mjs';\nimport { measureViewportBox } from '../../projection/utils/measure.mjs';\nimport { DOMVisualElement } from '../dom/DOMVisualElement.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction getComputedStyle(element) {\n return window.getComputedStyle(element);\n}\nclass HTMLVisualElement extends DOMVisualElement {\n constructor() {\n super(...arguments);\n this.type = \"html\";\n this.renderInstance = renderHTML;\n }\n readValueFromInstance(instance, key) {\n if (transformProps.has(key)) {\n const defaultType = getDefaultValueType(key);\n return defaultType ? defaultType.default || 0 : 0;\n }\n else {\n const computedStyle = getComputedStyle(instance);\n const value = (isCSSVariableName(key)\n ? computedStyle.getPropertyValue(key)\n : computedStyle[key]) || 0;\n return typeof value === \"string\" ? value.trim() : value;\n }\n }\n measureInstanceViewportBox(instance, { transformPagePoint }) {\n return measureViewportBox(instance, transformPagePoint);\n }\n build(renderState, latestValues, props) {\n buildHTMLStyles(renderState, latestValues, props.transformTemplate);\n }\n scrapeMotionValuesFromProps(props, prevProps, visualElement) {\n return scrapeMotionValuesFromProps(props, prevProps, visualElement);\n }\n handleChildMotionValue() {\n if (this.childSubscription) {\n this.childSubscription();\n delete this.childSubscription;\n }\n const { children } = this.props;\n if (isMotionValue(children)) {\n this.childSubscription = children.on(\"change\", (latest) => {\n if (this.current)\n this.current.textContent = `${latest}`;\n });\n }\n }\n}\n\nexport { HTMLVisualElement, getComputedStyle };\n","import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { DOMVisualElement } from '../dom/DOMVisualElement.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { camelToDash } from '../dom/utils/camel-to-dash.mjs';\nimport { camelCaseAttributes } from './utils/camel-case-attrs.mjs';\nimport { transformProps } from '../html/utils/transform.mjs';\nimport { renderSVG } from './utils/render.mjs';\nimport { getDefaultValueType } from '../dom/value-types/defaults.mjs';\nimport { createBox } from '../../projection/geometry/models.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nclass SVGVisualElement extends DOMVisualElement {\n constructor() {\n super(...arguments);\n this.type = \"svg\";\n this.isSVGTag = false;\n this.measureInstanceViewportBox = createBox;\n }\n getBaseTargetFromProps(props, key) {\n return props[key];\n }\n readValueFromInstance(instance, key) {\n if (transformProps.has(key)) {\n const defaultType = getDefaultValueType(key);\n return defaultType ? defaultType.default || 0 : 0;\n }\n key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;\n return instance.getAttribute(key);\n }\n scrapeMotionValuesFromProps(props, prevProps, visualElement) {\n return scrapeMotionValuesFromProps(props, prevProps, visualElement);\n }\n build(renderState, latestValues, props) {\n buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);\n }\n renderInstance(instance, renderState, styleProp, projection) {\n renderSVG(instance, renderState, styleProp, projection);\n }\n mount(instance) {\n this.isSVGTag = isSVGTag(instance.tagName);\n super.mount(instance);\n }\n}\n\nexport { SVGVisualElement };\n","import { Fragment } from 'react';\nimport { HTMLVisualElement } from '../html/HTMLVisualElement.mjs';\nimport { SVGVisualElement } from '../svg/SVGVisualElement.mjs';\nimport { isSVGComponent } from './utils/is-svg-component.mjs';\n\nconst createDomVisualElement = (Component, options) => {\n return isSVGComponent(Component)\n ? new SVGVisualElement(options)\n : new HTMLVisualElement(options, {\n allowProjection: Component !== Fragment,\n });\n};\n\nexport { createDomVisualElement };\n","import { createDOMMotionComponentProxy } from '../create-proxy.mjs';\nimport { createMotionComponent } from './create.mjs';\n\nconst motion = /*@__PURE__*/ createDOMMotionComponentProxy(createMotionComponent);\n\nexport { motion };\n","import { animations } from '../../../motion/features/animations.mjs';\nimport { drag } from '../../../motion/features/drag.mjs';\nimport { gestureAnimations } from '../../../motion/features/gestures.mjs';\nimport { layout } from '../../../motion/features/layout.mjs';\nimport { createMotionComponentFactory } from '../create-factory.mjs';\nimport { createDomVisualElement } from '../../dom/create-visual-element.mjs';\n\nconst createMotionComponent = /*@__PURE__*/ createMotionComponentFactory({\n ...animations,\n ...gestureAnimations,\n ...drag,\n ...layout,\n}, createDomVisualElement);\n\nexport { createMotionComponent };\n","import React, { useCallback, useContext, useEffect, useState } from 'react';\r\nimport * as styles from './Filters.module.scss';\r\nimport { FilterItem, FilterProps} from '../../typings';\r\nimport { fetchfilters } from '../../services/common.service';\r\nimport { motion, AnimatePresence } from 'framer-motion';\r\nimport { TabFilters } from '../../App';\r\nconst { __ } = window.wp.i18n;\r\n\r\nexport interface FilterOptions {\r\n data: FilterProps[];\r\n}\r\n\r\nexport interface SelectedFilters {\r\n experience_level: Set;\r\n professional_communities: Set;\r\n location: Set;\r\n contract_type: Set;\r\n brand: Set;\r\n}\r\n\r\ninterface FilterComponentProps {\r\n initialFilters: SelectedFilters;\r\n settingFilters?: FilterTypes;\r\n onFiltersChange: (newFilters: SelectedFilters) => void;\r\n resetFilters: boolean;\r\n keyword?: string;\r\n}\r\n\r\n// get the filters selected in settings\r\ninterface Window {\r\n cg_jobs_es_var?: { pathName ?: string};\r\n cg_jobs_country_code?: string;\r\n}\r\nconst countryCodeinSettings = (window as Window).cg_jobs_country_code;\r\nconst cCode = countryCodeinSettings ? countryCodeinSettings : (window as Window).cg_jobs_es_var?.pathName;\r\nexport type FilterTypes = 'experience_level' | 'professional_communities' | 'location' | 'contract_type' | 'brand';\r\n\r\nexport const Filters: React.FC = React.memo(({\r\n initialFilters,\r\n onFiltersChange,\r\n settingFilters,\r\n resetFilters,\r\n keyword\r\n}) => {\r\n const [filterOptions, setFilterOptions] = useState(null);\r\n const [selectedFilters, setSelectedFilters] = useState(transformSelectedFilters(initialFilters));\r\n const [loading, setLoading] = useState(true);\r\n const [selectedFilterType, setSelectedFilterType] = useState();\r\n const visibleFilters = settingFilters? settingFilters : ['experience_level', 'professional_communities', 'location', 'contract_type', 'brand']\r\n const [experience_level, setExperience_level] = useState([]);\r\n const [professional_communities, setProfessional_communities] = useState([]);\r\n const [location, setLocation] = useState([]);\r\n const [contract_type, setContract_type] = useState([]);\r\n const [brand, setBrand] = useState([]);\r\n\r\n // Fix the order of Filter Taxonomy\r\n const orderedTypes = ['experience_level', 'professional_communities', 'location', 'contract_type', 'brand'];\r\n const tabFilters = useContext(TabFilters);\r\n\r\n useEffect(() => {\r\n // Fetch filter options from API\r\n const fetchFilterOptions = async () => {\r\n try {\r\n const cleanedFilters = Object.fromEntries(\r\n Object.entries(selectedFilters).filter(([_, value]) => value instanceof Set ? value.size > 0 : Boolean(value))\r\n );\r\n\r\n const response = await fetchfilters({filters: Object.fromEntries(Object.entries(cleanedFilters).map(([key, value]) => [key, Array.from(value)])), countryCode: cCode, filter: selectedFilterType, search: keyword});\r\n const data: FilterOptions = response;\r\n \r\n const orderedData = orderedTypes.map(type => {\r\n return data.data.find(item => item.type === type) as FilterProps;\r\n }).filter(Boolean) as FilterProps[];\r\n \r\n setFilterOptions(orderedData);\r\n setLoading(false);\r\n\r\n } catch (error) {\r\n console.error('Error fetching filter options:', error);\r\n setLoading(false);\r\n }\r\n };\r\n\r\n fetchFilterOptions();\r\n }, [selectedFilters, keyword]);\r\n\r\n useEffect(() => {\r\n setSelectedFilters(initialFilters);\r\n }, [initialFilters]);\r\n\r\n useEffect(() => {\r\n if(resetFilters && Object.keys(selectedFilters).length !== 0 ) document.getElementById('clearAllFilters')?.click();\r\n }, [resetFilters])\r\n\r\n function transformSelectedFilters(selectedFilters: SelectedFilters): SelectedFilters {\r\n // Iterate through the selectedFilters object\r\n for (const [key, valueSet] of Object.entries(selectedFilters)) {\r\n // Create a new Set to hold the transformed values\r\n const transformedSet = new Set();\r\n \r\n // Iterate through each value in the Set\r\n valueSet.forEach((value:string) => {\r\n // Split each string by commas and add individual values to the new Set\r\n value.split(',').forEach(val => transformedSet.add(val.trim()));\r\n });\r\n \r\n // Replace the original Set with the transformed one\r\n selectedFilters[key as keyof SelectedFilters] = transformedSet;\r\n }\r\n return selectedFilters;\r\n }\r\n \r\n const handleCheckboxChange = useCallback((type: FilterTypes, value: string) => { \r\n setSelectedFilters(prevFilters => {\r\n const newSelection = new Set(prevFilters[type]);\r\n if (newSelection.has(value)) {\r\n newSelection.delete(value);\r\n } else {\r\n newSelection.add(value);\r\n }\r\n const updatedFilters = { ...prevFilters, [type]: newSelection };\r\n onFiltersChange(updatedFilters);\r\n\r\n // Check if the new selection is empty\r\n if (newSelection.size === 0) {\r\n setSelectedFilterType(undefined);\r\n }\r\n\r\n // Check if the new selection is empty\r\n if (newSelection.size === 0) {\r\n setSelectedFilterType(undefined);\r\n }\r\n\r\n return updatedFilters;\r\n });\r\n \r\n }, []);\r\n\r\n const clearFilter = useCallback((type: FilterTypes) => {\r\n setSelectedFilters(prevFilters => {\r\n const updatedFilters = { ...prevFilters, [type]: new Set() };\r\n onFiltersChange(updatedFilters);\r\n return updatedFilters;\r\n });\r\n }, []);\r\n\r\n const clearAllFilters = (e: React.MouseEvent) => {\r\n setSelectedFilters({\r\n experience_level: new Set(),\r\n location: new Set(),\r\n brand: new Set(),\r\n professional_communities: new Set(),\r\n contract_type: new Set(),\r\n });\r\n\r\n onFiltersChange({\r\n experience_level: new Set(),\r\n location: new Set(),\r\n brand: new Set(),\r\n professional_communities: new Set(),\r\n contract_type: new Set(),\r\n });\r\n setSelectedFilterType(undefined);\r\n e.preventDefault();\r\n };\r\n\r\n function updateLabel(label:string){\r\n const updatedLabel = label.charAt(0).toUpperCase() + label.slice(1).replace(/_/g, ' ');\r\n return updatedLabel.replace(/,(\\S)/g, ', $1');\r\n }\r\n \r\n return (\r\n \r\n)});","\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./NoResult.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./NoResult.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","import * as styles from './NoResult.module.scss';\r\nconst { __ } = window.wp.i18n;\r\n\r\n// get 'No results' text from settings\r\ninterface Window {\r\n cg_jobs_noresult_text?: string;\r\n}\r\nconst noResultText = (window as Window).cg_jobs_noresult_text;\r\n\r\nexport const NoResult: React.FC = () => { \r\n return (\r\n

\r\n {noResultText ?

: \r\n

\r\n

{ __( 'Oops!', 'cg-jobs' ) }

\r\n

{ __( \"Sorry, we couldn't find what you're looking for...\", 'cg-jobs' ) }

\r\n

{ __( \"Sorry, we couldn't find what you're looking for...\", 'cg-jobs' ) }

\r\n { __( 'Go to the Global site', 'cg-jobs' ) }\r\n

\r\n }\r\n

\r\n \r\n

\r\n

\r\n )\r\n}","\n import API from \"!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../node_modules/sass-loader/dist/cjs.js!./App.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../node_modules/sass-loader/dist/cjs.js!./App.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./MobileFilters.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./MobileFilters.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","import React, { useCallback, useEffect, useState } from 'react';\r\nimport * as styles from './MobileFilters.module.scss';\r\nimport { FilterItem, FilterProps} from '../../typings';\r\nimport { FilterTypes } from '../Filters/Filters';\r\nimport { fetchfilters } from '../../services/common.service';\r\nimport { motion, AnimatePresence } from 'framer-motion';\r\nconst { __ } = window.wp.i18n;\r\n\r\ninterface FilterOptions {\r\n data: FilterProps[];\r\n}\r\n\r\ninterface Window {\r\n cg_jobs_es_var?: { pathName ?: string};\r\n cg_jobs_country_code?: string;\r\n}\r\nconst countryCodeinSettings = (window as Window).cg_jobs_country_code;\r\nconst cCode = countryCodeinSettings ? countryCodeinSettings : (window as Window).cg_jobs_es_var?.pathName;\r\n\r\nexport interface SelectedFilters {\r\n experience_level: Set;\r\n location: Set;\r\n brand: Set;\r\n professional_communities: Set;\r\n contract_type: Set;\r\n}\r\n\r\ninterface FilterComponentProps {\r\n initialFilters: SelectedFilters;\r\n onFiltersChange: (newFilters: SelectedFilters) => void;\r\n totalResult: number; \r\n settingFilters?: FilterTypes;\r\n keyword?: string;\r\n reset?: boolean;\r\n}\r\n\r\nexport const MobileFilters: React.FC = React.memo(({\r\n initialFilters,\r\n onFiltersChange,\r\n totalResult,\r\n settingFilters,\r\n keyword,\r\n reset\r\n}) =>{\r\n const [filterOptions, setFilterOptions] = useState(null);\r\n const [selectedFilters, setSelectedFilters] = useState(initialFilters);\r\n const [selectedFilterType, setSelectedFilterType] = useState();\r\n const [loading, setLoading] = useState(true);\r\n const [experience_level, setExperience_level] = useState([]);\r\n const [professional_communities, setProfessional_communities] = useState([]);\r\n const [location, setLocation] = useState([]);\r\n const [contract_type, setContract_type] = useState([]);\r\n const [brand, setBrand] = useState([]);\r\n const [showMobileFilters, setShowMobileFilters] = useState();\r\n const [loadingFilters, setLoadingFilters] = useState(false);\r\n const [totalResultLoading, setTotalResultLoading] = useState(true);\r\n const [hasActiveFilters, setHasActiveFilters] = useState(Object.values(selectedFilters).some(set => set.size > 0));\r\n const [visibleFilters, setVisibleFilters] = useState<{ [key in FilterTypes]: number }>({\r\n location: 10,\r\n brand: 10,\r\n professional_communities: 10,\r\n contract_type: 10,\r\n experience_level: 10\r\n });\r\n\r\n const [showMoreFilters, setShowMoreFilters] = useState<{ [key in FilterTypes]?: boolean }>({\r\n location: false,\r\n brand: false,\r\n professional_communities: false,\r\n contract_type: false,\r\n });\r\n\r\n const showFilters = settingFilters ? settingFilters : ['location', 'professional_communities', 'contract_type', 'experience_level', 'brand']\r\n\r\n useEffect(() => {\r\n const fetchFilterOptions = async () => {\r\n try {\r\n setLoadingFilters(true);\r\n const cleanedFilters = Object.fromEntries(\r\n Object.entries(selectedFilters).filter(([_, value]) => value instanceof Set ? value.size > 0 : Boolean(value))\r\n );\r\n\r\n const response = await fetchfilters({filters: Object.fromEntries(Object.entries(cleanedFilters).map(([key, value]) => [key, Array.from(value)])), countryCode: cCode, filter: selectedFilterType, search: keyword});\r\n const data: FilterOptions = response;\r\n\r\n // Fix the order of Filter Taxonomy\r\n const orderedTypes = ['experience_level', 'professional_communities', 'location', 'contract_type', 'brand'];\r\n\r\n const orderedData = orderedTypes.map(type => {\r\n return data.data.find(item => item.type === type) as FilterProps;\r\n }).filter(Boolean) as FilterProps[];\r\n\r\n setFilterOptions(orderedData);\r\n setLoading(false);\r\n setLoadingFilters(false);\r\n } catch (error) {\r\n console.error('Error fetching filter options:', error);\r\n setLoading(false);\r\n }\r\n };\r\n\r\n fetchFilterOptions();\r\n }, [selectedFilters, keyword]);\r\n\r\n useEffect(() => {\r\n if(reset && Object.keys(selectedFilters).length !== 0 ) document.getElementById('resetMobileFilters')?.click();\r\n }, [reset])\r\n\r\n useEffect(() => {\r\n setSelectedFilters(initialFilters);\r\n }, [initialFilters]);\r\n\r\n useEffect(() => {\r\n if (!loadingFilters && totalResult !== undefined) {\r\n setTotalResultLoading(false); // Set loading state to false when totalResult is available\r\n }\r\n }, [loadingFilters, totalResult]);\r\n\r\n //Show mobile filters\r\n useEffect(() => {\r\n const showFilters = () => {\r\n \r\n if (window.matchMedia(\"(min-width: 1024px)\").matches) {\r\n setShowMobileFilters(false);\r\n } else {\r\n setShowMobileFilters(true);\r\n }\r\n };\r\n\r\n // Set the initial placeholder\r\n showFilters();\r\n\r\n // Add an event listener for window resize\r\n window.addEventListener('resize', showFilters);\r\n\r\n // Cleanup event listener on component unmount\r\n return () => window.removeEventListener('resize', showFilters);\r\n }, []);\r\n \r\n const handleCheckboxChange = useCallback((type: FilterTypes, value: string) => { \r\n setSelectedFilters(prevFilters => {\r\n const newSelection = new Set(prevFilters[type]);\r\n if (newSelection.has(value)) {\r\n newSelection.delete(value);\r\n } else {\r\n newSelection.add(value);\r\n }\r\n const updatedFilters = { ...prevFilters, [type]: newSelection };\r\n onFiltersChange(updatedFilters);\r\n setHasActiveFilters(true);\r\n return updatedFilters;\r\n });\r\n }, []);\r\n\r\n const clearAllFilters = (e: React.MouseEvent) => {\r\n const clearedFilters: SelectedFilters = {\r\n experience_level: new Set(),\r\n location: new Set(),\r\n brand: new Set(),\r\n professional_communities: new Set(),\r\n contract_type: new Set(),\r\n };\r\n\r\n setSelectedFilters(clearedFilters);\r\n onFiltersChange(clearedFilters);\r\n e.preventDefault();\r\n e.stopPropagation();\r\n };\r\n\r\n if (loading) {\r\n return

{ __( 'Loading...', 'cg-jobs' ) }

;\r\n }\r\n\r\n if (!filterOptions) {\r\n return

{ __( 'No filter options available....', 'cg-jobs' ) }

;\r\n }\r\n \r\n const handleShowMore = (type: FilterTypes) => {\r\n setShowMoreFilters(prev => ({\r\n ...prev,\r\n [type]: !prev[type]\r\n }));\r\n setVisibleFilters(prev => ({\r\n ...prev,\r\n [type]: prev[type] === 10 ? Number.MAX_SAFE_INTEGER : 10\r\n }));\r\n };\r\n \r\n if (!showMobileFilters) {\r\n return null; // Render nothing if showMobileFilters is false\r\n }\r\n\r\n const canvasStyle = {\r\n maxHeight: '84vh',\r\n paddingBottom: hasActiveFilters ? '10.625rem' : '1rem',\r\n };\r\n\r\n function updateLabel(label:string){\r\n const updatedLabel = label.charAt(0).toUpperCase() + label.slice(1).replace(/_/g, ' ');\r\n return updatedLabel.replace(/,(\\S)/g, ', $1');\r\n }\r\n\r\n return (\r\n

\r\n

\r\n \r\n

\r\n

{ __( 'Filter', 'cg-jobs' ) }

\r\n

\r\n {filterOptions.every(obj => Array.isArray(obj.item) && obj.item.length !== 0) \r\n ? filterOptions.map(singleFilter => ( \r\n (singleFilter.type && singleFilter.type !== \"\" && showFilters.includes(singleFilter.type)) &&\r\n

\r\n

{(() => {\r\n switch (singleFilter.type) {\r\n case 'brand':\r\n return 'Brands';\r\n case 'professional_communities':\r\n return 'Professions';\r\n default:\r\n return singleFilter.type.charAt(0).toUpperCase() + singleFilter.type.slice(1).replace(/_/g, ' ');\r\n }\r\n })()}

\r\n \r\n {singleFilter.item.length > 10 && \r\n \r\n } \r\n

\r\n \r\n \r\n \r\n

\r\n )) \r\n :

{ __( 'No filter options available....', 'cg-jobs' ) }

\r\n }\r\n

\r\n\r\n {hasActiveFilters && \r\n

\r\n {/* */}\r\n \r\n \r\n

\r\n }\r\n

\r\n

\r\n)});","\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./Pagination.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./Pagination.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","import React, { useState } from 'react';\r\nimport * as styles from './Pagination.module.scss';\r\nconst { __ } = window.wp.i18n;\r\n\r\ninterface PaginationProps {\r\n totalPages: number;\r\n currentPage: number;\r\n onPageChange: (page: number) => void;\r\n}\r\n\r\nconst Pagination: React.FC = React.memo(({ totalPages, currentPage, onPageChange }) => {\r\n const [displayPages, setDisplayPages] = useState([]);\r\n const [totalDisplayPages, setTotalDisplayPages] = useState(window.innerWidth >= 1024 ? 9 : window.innerWidth >= 430 ? 4 : 2);\r\n\r\n window.addEventListener('resize', function() {\r\n (window.innerWidth >= 1024) ? setTotalDisplayPages(9): window.innerWidth >= 430 ? setTotalDisplayPages(4) : setTotalDisplayPages(2);\r\n })\r\n\r\n // Calculate visible page numbers based on current page and total pages\r\n const calculateDisplayPages = (setTotalDisplayPages:number) => {\r\n let startPage = Math.max(1, currentPage - 2);\r\n let endPage = Math.min(totalPages, startPage + setTotalDisplayPages)\r\n\r\n // Adjust startPage and endPage to always show 5/10 page numbers if possible\r\n if (endPage - startPage < setTotalDisplayPages) {\r\n startPage = Math.max(1, endPage - setTotalDisplayPages);\r\n }\r\n\r\n const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);\r\n setDisplayPages(pages);\r\n };\r\n\r\n // Initialize visible pages on first render\r\n React.useEffect(() => { \r\n calculateDisplayPages(totalDisplayPages) ;\r\n }, [currentPage, totalPages, totalDisplayPages]);\r\n\r\n const handleFirstPage = () => {\r\n onPageChange(1);\r\n };\r\n\r\n const handlePrevPage = () => {\r\n if (currentPage > 1) {\r\n onPageChange(currentPage - 1);\r\n }\r\n };\r\n\r\n const handleNextPage = () => {\r\n if (currentPage < totalPages) {\r\n onPageChange(currentPage + 1);\r\n }\r\n };\r\n\r\n const handleLastPage = () => {\r\n onPageChange(totalPages);\r\n };\r\n\r\n const handlePageClick = (e: React.MouseEvent, page: number) => {\r\n onPageChange(page);\r\n e.preventDefault();\r\n };\r\n\r\n return (\r\n

\r\n \r\n \r\n {displayPages.map((pageNum) => (\r\n \r\n ))}\r\n \r\n \r\n

\r\n );\r\n});\r\n\r\nexport default Pagination;","\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./JobRow.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./JobRow.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","import { useContext, useEffect, useState } from \"react\";\r\nimport { WPSearchResultItem } from '../../typings';\r\nimport * as styles from './JobRow.module.scss';\r\nimport { TabFilters } from \"../../App\";\r\n\r\n// get the tags selected in settings\r\ninterface Window {\r\n cg_jobs_get_tags_data?: string[];\r\n cg_jobs_es_var?: {pathName?: string}\r\n}\r\n\r\ninterface JobRowProps extends WPSearchResultItem {\r\n refId: string;\r\n}\r\nconst selectedTags = (window as Window).cg_jobs_get_tags_data;\r\nconst cgJobsVars = (window as Window).cg_jobs_es_var;\r\n\r\nexport const JobRow: React.FC = (props) => {\r\n const [locations, setLocations] = useState(props.location);\r\n const [experienceText, setExperienceText] = useState(props.experience_level);\r\n const totalLocations = locations.split(\",\"); \r\n const pathName = cgJobsVars?.pathName;\r\n const tabFilters = useContext(TabFilters);\r\n let base_slug = '';\r\n\r\n if (pathName !== '') {\r\n base_slug = '/' + pathName;\r\n }\r\n\r\n const jobLink = (props.refId && props.source) ? `${base_slug}/jobs/${props.refId}+${props.source?.toLowerCase()}` : `${base_slug}/jobs/${props.id}`;\r\n\r\n useEffect(() => {\r\n const updateLocationNumbers = () => {\r\n if (window.matchMedia(\"(max-width: 991px)\").matches) {\r\n (props.experience_level === \"Experienced Professionals\") ? setExperienceText('Experienced') : setExperienceText(props.experience_level);\r\n } else {\r\n setExperienceText(props.experience_level);\r\n }\r\n\r\n if(window.matchMedia(\"(max-width: 429px)\").matches) {\r\n if(totalLocations.length > 3) setLocations(`${totalLocations.slice(0, 3).join(\",\")} + ${totalLocations.length-3}`);\r\n } else if (window.matchMedia(\"(max-width: 991px)\").matches) {\r\n if(totalLocations.length > 4) setLocations(`${totalLocations.slice(0, 4).join(\",\")} + ${totalLocations.length-4}`);\r\n } else {\r\n if(totalLocations.length > 5) setLocations(`${totalLocations.slice(0, 5).join(\",\")} + ${totalLocations.length-5}`);\r\n }\r\n };\r\n \r\n updateLocationNumbers(); \r\n // Add an event listener for window resize\r\n window.addEventListener('resize', updateLocationNumbers); \r\n // Cleanup event listener on component unmount\r\n return () => window.removeEventListener('resize', updateLocationNumbers);\r\n }, []);\r\n \r\n return (\r\n

\r\n \r\n

\r\n

{props.title ? props.title : \"\"}

\r\n

{props.location? locations : \"\"}

\r\n

{props.professional_communities}
{props.department}
{props.sbu}
{props.contract_type}
{experienceText}

\r\n \r\n

\r\n )\r\n}","\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./SimilarOpportunities.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./SimilarOpportunities.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","import { useCallback, useEffect, useState } from 'react';\r\nimport { WPSearchResultItem } from '../../typings';\r\nimport { JobRow } from '../JobRow/JobRow';\r\nimport * as styles from './SimilarOpportunities.module.scss';\r\nimport { searchPosts } from '../../services/common.service';\r\nimport Pagination from '../Pagination/Pagination';\r\n\r\ninterface SimilarOpportunitiesProps {\r\n keyword?: string;\r\n professionalCommunity?: string[];\r\n contractType?: string[];\r\n experienceLevel?: string[];\r\n jobsIdList?: string[];\r\n}\r\n\r\ninterface Window {\r\n cg_jobs_es_var?: { pathName ?: string};\r\n cg_jobs_country_codes?: string;\r\n cg_jobs_country_code?: string;\r\n}\r\nconst countryCodeinSettings = (window as Window).cg_jobs_country_code;\r\nconst cCode = countryCodeinSettings ? countryCodeinSettings : (window as Window).cg_jobs_es_var?.pathName;\r\nconst { __ } = window.wp.i18n;\r\n\r\nexport const SimilarOpportunities: React.FC = (props) => {\r\n const [jobList, setJobList] = useState([]);\r\n const [currentPage, setCurrentPage] = useState(1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const perPage = 6;\r\n\r\n useEffect(() => { \r\n fetchListings(); \r\n }, [currentPage])\r\n \r\n const fetchListings = async () => { \r\n\r\n const currentFilters = {\r\n professional_communities: props.professionalCommunity,\r\n contract_type: props.contractType,\r\n experience_level: props.experienceLevel\r\n }\r\n\r\n searchPosts({ size: perPage, page: currentPage, country_code: cCode, filters: currentFilters })\r\n .then(data => {\r\n if (data.count < 6) {\r\n return searchPosts({ \r\n size: perPage, \r\n page: currentPage, \r\n country_code: cCode, \r\n filters: { professional_communities: props.professionalCommunity } \r\n });\r\n }\r\n return data;\r\n })\r\n .then(data => {\r\n if (data.count < 6) {\r\n return searchPosts({ size: perPage, country_code: cCode });\r\n }\r\n return data;\r\n })\r\n .then(data => {\r\n const newJobs = props.jobsIdList ? data.data.filter(job => props.jobsIdList && !props.jobsIdList.includes(job.id)) : data.data;\r\n // Update the job list with only the new jobs\r\n \r\n setJobList(newJobs);\r\n setTotalPages(Math.ceil(data.count / perPage));\r\n })\r\n .catch(error => {\r\n console.error('Error fetching listings:', error);\r\n });\r\n \r\n };\r\n\r\n const handleSimilarPageChange = useCallback((page: number) => { \r\n setCurrentPage(page); \r\n setTimeout(() => {\r\n const element = document.querySelector('#similar-jobs');\r\n if (element) {\r\n const offsetTop = element.getBoundingClientRect().top + window.scrollY; // Calculate the offset\r\n window.scrollTo(0, offsetTop); \r\n } \r\n }, 0);\r\n }, []);\r\n \r\n return ( \r\n <>\r\n

\r\n { __( 'Explore similar opportunities', 'cg-jobs' ) }\r\n

\r\n

)} \r\n

\r\n

\r\n {totalPages > 1 && } \r\n

\r\n \r\n )\r\n}","\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./JobList.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./JobList.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","import React, { useEffect, useState } from 'react';\r\nimport { JobRow } from './../JobRow/JobRow';\r\nimport { WPSearchResultItem } from './../../typings';\r\nimport * as styles from './JobList.module.scss';\r\n\r\ninterface JobListProps {\r\n jobs: WPSearchResultItem[];\r\n}\r\n\r\nexport const JobList:React.FC = (props) => {\r\n\r\n return (\r\n

\r\n ))}\r\n

\r\n );\r\n}","\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./BannerSearch.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./BannerSearch.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport * as styles from './BannerSearch.module.scss';\r\nconst { __ } = window.wp.i18n;\r\n\r\ninterface SearchComponentProps {\r\n currentKeyword: string;\r\n onSearch: (newKeyword: string) => void; \r\n onTabFilterOpen: (isOpen: boolean) => void; \r\n}\r\n\r\n// get the filters selected in settings\r\ninterface Window {\r\n cg_jobs_banner_text?: string;\r\n cg_jobs_placeholder_text?: string;\r\n cg_jobs_banner_image_option?: string;\r\n }\r\n const bannerText = (window as Window).cg_jobs_banner_text;\r\n const placeholderText = (window as Window).cg_jobs_placeholder_text;\r\n\r\nexport const BannerSearch:React.FC = ({currentKeyword, onSearch, onTabFilterOpen}) => {\r\n const [keyword, setKeyword] = useState(currentKeyword);\r\n const [isFilterClose, setIsFilterClose] = useState(true);\r\n const [placeholder, setPlaceholder] = useState(placeholderText ? placeholderText : `${ __( 'Search jobs by location, profession or keywords', 'cg-jobs' ) }`);\r\n const [isMobileScreen, setIsMobileScreen] = useState(window.matchMedia(\"(max-width: 991px)\").matches);\r\n const [isTabletScreen, setIsTabletScreen] = useState(window.matchMedia(\"(max-width: 1200px)\").matches);\r\n const inputRef = useRef(null);\r\n \r\n // Effect to trigger API callback when inputValue is empty\r\n useEffect(() => {\r\n if (keyword === '') {\r\n onSearch(''); \r\n }\r\n }, [keyword]);\r\n\r\n useEffect(() => {\r\n const changeToMobileLayout = () => {\r\n const wrapper = document.querySelector('#wrapper-cjs') as HTMLElement;\r\n \r\n // For mobile\r\n if (window.matchMedia(\"(min-width: 992px\").matches){\r\n setIsMobileScreen(false);\r\n setPlaceholder(placeholderText ? placeholderText : `${ __( 'Search jobs by location, profession or keywords', 'cg-jobs' ) }`); \r\n if(wrapper) wrapper.removeAttribute('style');\r\n } else {\r\n setIsMobileScreen(true);\r\n setPlaceholder(placeholderText ? placeholderText : `${ __( 'Search for jobs', 'cg-jobs' ) }`);\r\n if(wrapper){\r\n if(isFilterClose) {\r\n wrapper.style.gridTemplateColumns = '1fr';\r\n setIsFilterClose(true)\r\n } else {\r\n wrapper.removeAttribute('style');\r\n }\r\n }\r\n }\r\n\r\n // For tablet\r\n if (window.matchMedia(\"(min-width: 1200px\").matches){\r\n setIsTabletScreen(false);\r\n setIsFilterClose(true);\r\n } else {\r\n setIsTabletScreen(true); \r\n }\r\n };\r\n \r\n changeToMobileLayout();\r\n\r\n // Add an event listener for window resize\r\n window.addEventListener('resize', changeToMobileLayout);\r\n\r\n // Cleanup event listener on component unmount\r\n return () => window.removeEventListener('resize', changeToMobileLayout);\r\n }, []);\r\n\r\n const handleSubmit = (e: React.FormEvent) => { \r\n onSearch((keyword.trim())); \r\n e.preventDefault();\r\n };\r\n\r\n const handleKeyDown = (event:React.KeyboardEvent) => {\r\n // Check if the Enter key was pressed\r\n if (event.key === 'Enter') {\r\n inputRef.current && onSearch((inputRef.current.value.trim())); \r\n event.preventDefault();\r\n // Blur the input field\r\n if (inputRef.current) {\r\n inputRef.current.blur();\r\n }\r\n }\r\n };\r\n\r\n const handleChange = (e: React.ChangeEvent) => {\r\n const value = e.target.value;\r\n setKeyword(decodeURIComponent(value));\r\n\r\n // Trigger search if 3 or more letters are typed\r\n if (value.length >= 3) {\r\n onSearch((value.trim()));\r\n } else if (value.length === 0) {\r\n onSearch(''); // Clear search on empty input\r\n }\r\n };\r\n\r\n // Mobile filters open/close transition\r\n const OpenMobileFilters = () => {\r\n const filters = document.querySelector('.open-filters') as HTMLElement;\r\n filters ? filters.style.display = \"block\" : \"\"\r\n \r\n // Make sure modal scrolls to top when opened\r\n const modal = document.getElementById('offcanvasBottom');\r\n const modalBody = modal && modal.querySelector('.offcanvas-body');\r\n \r\n if (modalBody) {\r\n modalBody.scrollTop = 0; // Scroll the modal body to the top\r\n }\r\n }\r\n\r\n // Tablet filters Open/close transition\r\n const OpenTabletFilters = () => {\r\n const filterWrapper = document.querySelector('#filter-wrapper') as HTMLElement;\r\n const filterContainer = document.querySelector('#filter-container') as HTMLElement;\r\n const wrapper = document.querySelector('#wrapper-cjs') as HTMLElement;\r\n \r\n if (isFilterClose) {\r\n filterWrapper.style.transform = 'translateX(0)';\r\n filterWrapper.style.opacity = '1';\r\n filterContainer.style.display = 'block';\r\n wrapper.style.gridTemplateColumns = '2.99fr 1.01fr';\r\n } else {\r\n filterWrapper.style.transform = 'translateX(100%)';\r\n filterWrapper.style.opacity = '0'; \r\n filterContainer.style.display = 'none'; \r\n wrapper.style.gridTemplateColumns = '1fr';\r\n }\r\n setIsFilterClose(!isFilterClose);\r\n onTabFilterOpen(isFilterClose);\r\n }\r\n\r\n return (\r\n <>\r\n

\r\n

{bannerText ? bannerText : `Job search`}

\r\n

handleSubmit(e)}>\r\n \r\n {__( 'Search jobs by location, profession or keywords', 'cg-jobs' )}\r\n \r\n {\r\n setPlaceholder(\"\");\r\n e.target.select();\r\n }} \r\n onBlur={() => setPlaceholder(placeholderText ? placeholderText : `${ __( 'Search jobs by location, profession or keywords', 'cg-jobs' ) }`)} \r\n placeholder={placeholder}\r\n aria-label={__( 'Search jobs by location, profession or keywords', 'cg-jobs' )}\r\n />\r\n \r\n \r\n

\r\n

\r\n { isTabletScreen && \r\n

\r\n

handleSubmit(e)}> \r\n \r\n {__( 'Search for jobs', 'cg-jobs' )}\r\n \r\n {\r\n setPlaceholder(\"\");\r\n e.target.select();\r\n }} \r\n onKeyDown={handleKeyDown}\r\n onBlur={() => setPlaceholder(placeholderText ? placeholderText : `${ __( 'Search for jobs', 'cg-jobs' ) }`)} \r\n placeholder= {placeholder}\r\n aria-label={__( 'Search for jobs', 'cg-jobs' )}\r\n />\r\n \r\n {isMobileScreen ? \r\n \r\n :\r\n \r\n }\r\n

\r\n

\r\n }\r\n \r\n )\r\n}","\n import API from \"!../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../css-loader/dist/cjs.js!./slick.css\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../css-loader/dist/cjs.js!./slick.css\";\n export default content && content.locals ? content.locals : undefined;\n","\n import API from \"!../../style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../css-loader/dist/cjs.js!./slick-theme.css\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../css-loader/dist/cjs.js!./slick-theme.css\";\n export default content && content.locals ? content.locals : undefined;\n","\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./CarouselFilters.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./CarouselFilters.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","import React, { useCallback, useEffect, useState } from 'react'\r\nimport Slider from 'react-slick';\r\nimport * as styles from './CarouselFilters.module.scss';\r\nimport { FilterOptions, FilterTypes, SelectedFilters } from '../Filters/Filters';\r\nimport { FilterItem, FilterProps } from '../../typings';\r\nimport { fetchfilters } from '../../services/common.service';\r\n\r\ninterface CarouselFiltersProps {\r\n onFilterSelect: (newFilters: Set) => void; \r\n initialFilters: SelectedFilters;\r\n keyword?: string;\r\n reset?: boolean;\r\n}\r\n\r\n// get the filters selected in settings\r\ninterface Window {\r\n cg_jobs_es_var?: { pathName ?: string};\r\n cg_jobs_country_code?: string;\r\n}\r\nconst countryCodeinSettings = (window as Window).cg_jobs_country_code;\r\nconst cCode = countryCodeinSettings ? countryCodeinSettings : (window as Window).cg_jobs_es_var?.pathName;\r\n export const CarouselFilters: React.FC = ({onFilterSelect, initialFilters, keyword, reset}) => { \r\n const [selectedCarouselFilters, setSelectedCarouselFilters] = useState>(new Set(Array.from(initialFilters.experience_level).flatMap(item => item.split(',').map(s => s.trim()))));\r\n const [allExperienceLevels, setAllExperienceLevels]= useState();\r\n const [exploreAllJobs, setExploreAllJobs] = useState(false);\r\n const [experience_level, setExperience_level] = useState();\r\n const [saveExpData, setSaveExpData] = useState([]);\r\n \r\n const settings = {\r\n dots: false,\r\n arrows: false,\r\n infinite: false,\r\n speed: 500,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n variableWidth: true,\r\n };\r\n\r\n useEffect(() => {\r\n const fetchFilterOptions = async () => {\r\n try { \r\n \r\n setExperience_level(allExperienceLevels);\r\n\r\n const cleanedFilters = Object.fromEntries(\r\n Object.entries(initialFilters).filter(([_, value]) => value instanceof Set ? value.size > 0 : Boolean(value))\r\n );\r\n \r\n const response = await fetchfilters({filters: Object.fromEntries(Object.entries(cleanedFilters).map(([key, value]) => [key, Array.from(value)])), countryCode: cCode, search: keyword});\r\n const allFilters: FilterOptions = response;\r\n\r\n allFilters.data.map(filter => {\r\n if(filter.type === \"experience_level\"){\r\n if(saveExpData.length > 0 ) {\r\n setAllExperienceLevels({...filter, item: saveExpData}); \r\n } else {\r\n setAllExperienceLevels(filter);\r\n }\r\n }}); \r\n } catch (error) {\r\n console.error('Error fetching filter options:', error); \r\n }\r\n };\r\n \r\n fetchFilterOptions();\r\n }, [onFilterSelect, initialFilters, keyword]);\r\n\r\n const handleCheckboxChangeCarousel = useCallback((value: string) => {\r\n setSelectedCarouselFilters(prevFilters => {\r\n const updatedFilters = new Set(prevFilters);\r\n \r\n if (updatedFilters.has(value) || initialFilters.experience_level.has(value)) {\r\n updatedFilters.delete(value);\r\n } else {\r\n updatedFilters.add(value);\r\n }\r\n \r\n // Call the onFilterSelect with the updated filters\r\n onFilterSelect(updatedFilters);\r\n\r\n if (updatedFilters.size !== 0) setExploreAllJobs(false);\r\n \r\n return updatedFilters;\r\n });\r\n setAllExperienceLevels(experience_level);\r\n }, [onFilterSelect]);\r\n\r\n useEffect(() => {\r\n setSelectedCarouselFilters(new Set(Array.from(initialFilters.experience_level).flatMap(item => item.split(',').map(s => s.trim()))))\r\n },[initialFilters])\r\n\r\n const container = document.querySelector(\"#cg-jobs-search-root\") as HTMLElement;\r\n if(container) container.style.overflowX = 'hidden'; \r\n \r\n const slickList = document.querySelector(\".slick-list\") as HTMLElement;\r\n if(slickList) slickList.style.overflow = 'visible';\r\n\r\n function updateLabel(label:string){\r\n const updatedLabel = label.charAt(0).toUpperCase() + label.slice(1).replace(/_/g, ' ');\r\n return updatedLabel.replace(/,(\\S)/g, ', $1');\r\n } \r\n\r\n return (\r\n

\r\n

\r\n {allExperienceLevels?.item.sort((a, b) => {\r\n if (a.value.toLowerCase() === 'others') return 1; // Move 'Others' to the end\r\n if (b.value.toLowerCase() === 'others') return -1; // Move 'Others' to the end\r\n return 0; // Otherwise, maintain the original order\r\n }).map((childItem, index) => ( \r\n

\r\n value.split(',')).map(value => value).includes(childItem.value)}\r\n onChange={() => {\r\n handleCheckboxChangeCarousel(childItem.value)\r\n setSaveExpData(allExperienceLevels.item)\r\n }}\r\n />\r\n {updateLabel(childItem.value)}\r\n

\r\n ))}\r\n

\r\n

\r\n );\r\n };","import React, { useCallback, useEffect, useMemo, useState, createContext, useContext } from 'react';\r\nimport { fetchfilters, searchPosts } from './services/common.service';\r\nimport { FilterProps, WPSearchResultItem } from './typings';\r\nimport Loading from './components/Loading';\r\nimport { Filters, FilterTypes, SelectedFilters } from './components/Filters/Filters';\r\nimport { NoResult } from './components/NoResult/NoResult';\r\nimport * as styles from './App.module.scss';\r\nimport { MobileFilters } from './components/MobileFilters/MobileFilters';\r\nimport Pagination from './components/Pagination/Pagination';\r\nimport { SimilarOpportunities } from './components/SimilarOpportunities/SimilarOpportunities';\r\nimport { JobList } from './components/JobList/JobList';\r\nimport { BannerSearch } from './components/BannerSearch/BannerSearch';\r\nimport 'slick-carousel/slick/slick.css';\r\nimport 'slick-carousel/slick/slick-theme.css';\r\nimport { CarouselFilters } from './components/CarouselFilters/CarouselFilters';\r\n\r\nconst { __ } = window.wp.i18n;\r\n\r\n// get the filters selected in settings\r\ninterface Window {\r\n cg_jobs_get_filter_data?: FilterTypes;\r\n cg_jobs_es_var?: { pathName ?: string};\r\n cg_jobs_country_code?: string;\r\n}\r\nconst settingFilters = (window as Window).cg_jobs_get_filter_data;\r\nconst countryCodeinSettings = (window as Window).cg_jobs_country_code;\r\nconst cCode = countryCodeinSettings ? countryCodeinSettings : (window as Window).cg_jobs_es_var?.pathName;\r\n\r\nexport const TabFilters = createContext(false);\r\n\r\nconst App: React.FC = () => {\r\n const [jobList, setJobList] = useState([]);\r\n const [loading, setLoading] = useState(true); \r\n const [queryParams, setQueryParams] = useState(new URLSearchParams(location.search));\r\n const [currentPage, setCurrentPage] = useState(queryParams.get('page') as unknown as number ?? 1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const [totalResult, setTotalResult] = useState(1); \r\n const [keyword, setKeyword] = useState(queryParams.get('keyword'));\r\n const [showMobileFilters, setShowMobileFilters] = useState(window.matchMedia(\"(max-width: 991px)\").matches);\r\n const [showCarouselFilters, setShowCarouselFilters] = useState(window.matchMedia(\"(max-width: 1199px)\").matches);\r\n const [resetFilters, setResetFilters] = useState(false);\r\n const [isTabFilterOpen, setIsTabFilterOpen] = useState(false);\r\n const [filters, setFilters] = useState({ \r\n experience_level: new Set(queryParams.getAll('experience_level')),\r\n location: new Set(queryParams.getAll('location')),\r\n brand: new Set(queryParams.getAll('brand')),\r\n professional_communities: new Set(queryParams.getAll('professional_communities')),\r\n contract_type: new Set(queryParams.getAll('contract_type')), \r\n });\r\n const [jobsIdList, setJobsIdList] = useState([]);\r\n\r\n const perPage = 11; \r\n\r\n const fetchListings = useCallback(async () => { \r\n setLoading(true);\r\n try { \r\n // Clean up filters to only include keys with non-empty values\r\n const cleanedFilters = Object.fromEntries(\r\n Object.entries(filters).filter(([_, value]) => value instanceof Set ? value.size > 0 : Boolean(value))\r\n );\r\n\r\n const filtersWithPagination = { \r\n filters: {\r\n ...Object.fromEntries(Object.entries(cleanedFilters).map(([key, value]) => [key, Array.from(value)])), // Convert Set to Array\r\n },\r\n page: currentPage, \r\n size: perPage, \r\n search: keyword ?? \"\",\r\n country_code: cCode ?? \"\"\r\n };\r\n // Api call to fetch jobs\r\n const data = await searchPosts(filtersWithPagination);\r\n setJobList(data.data);\r\n setTotalPages(Math.ceil(data.count / perPage));\r\n setTotalResult(data.count)\r\n setJobsIdList(data.data.map(job => job.id)); \r\n } catch (error) {\r\n console.error('Error fetching listings:', error);\r\n } finally {\r\n setLoading(false);\r\n }\r\n }, [filters, keyword, currentPage]);\r\n\r\n useEffect(() => { \r\n // running it in timeout for piano sdk to load\r\n window.addEventListener('load', () => {\r\n try {\r\n // const page = queryStringData?.size ? Number(queryStringData.size) / 15 : 1;\r\n if (keyword) {\r\n window.dataLayer = window.dataLayer || [];\r\n window.dataLayer.push({\r\n event: 'internal_search_result.display',\r\n ise_keyword: keyword,\r\n ise_page: currentPage,\r\n ise_engine: 'job_search'\r\n });\r\n }\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n });\r\n\r\n fetchListings();\r\n }, [fetchListings])\r\n\r\n // Add body class in body to change the color of background as per Figma design\r\n useEffect(() => {\r\n document.body.classList.add(styles.body);\r\n return () => {\r\n document.body.classList.remove(styles.body);\r\n };\r\n }, []); \r\n\r\n // update query params and url\r\n useEffect(() => {\r\n // Update query parameters for filters and page size\r\n const params = new URLSearchParams(queryParams);\r\n\r\n // Set filters with values joined by commas\r\n Object.entries(filters).forEach(([key, value]) => {\r\n const joinedValues = Array.from(value).join(',');\r\n if (joinedValues) {\r\n params.set(key, joinedValues);\r\n } else {\r\n params.delete(key);\r\n }\r\n });\r\n \r\n // Set page and size\r\n params.set('page', currentPage.toString());\r\n params.set('size', perPage.toString());\r\n cCode && params.set('country_code', cCode);\r\n\r\n const newUrl = `${window.location.pathname}?${params.toString()}`;\r\n window.history.replaceState({}, '', newUrl);\r\n setQueryParams(params);\r\n }, [filters, currentPage, perPage]);\r\n\r\n //Show mobile filters, hide breadcrumbs in mobile and remove backdrop when mobile filters are open\r\n useEffect(() => {\r\n const breadcrumb = document.querySelector('.sub-navigation-wrapper') as HTMLElement;\r\n const showFilters = () => {\r\n const backdrop = document.querySelector('.offcanvas-backdrop');\r\n if (window.matchMedia(\"(min-width: 991px)\").matches) {\r\n setShowMobileFilters(false);\r\n backdrop && backdrop.classList.remove('show');\r\n backdrop && backdrop.classList.add('hide');\r\n } else {\r\n setShowMobileFilters(true);\r\n }\r\n\r\n if (window.matchMedia(\"(min-width: 1200px)\").matches){\r\n setShowCarouselFilters(false);\r\n breadcrumb && (breadcrumb.style.display = 'block');\r\n } else {\r\n setShowCarouselFilters(true);\r\n breadcrumb && (breadcrumb.style.display = 'none');\r\n }\r\n };\r\n // Set the initial placeholder\r\n showFilters(); \r\n // Add an event listener for window resize\r\n window.addEventListener('resize', showFilters); \r\n // Cleanup event listener on component unmount\r\n return () => window.removeEventListener('resize', showFilters);\r\n }, []); \r\n\r\n const updateQueryParams = useCallback((key:string, value:string) => {\r\n const parameters = new URLSearchParams(queryParams);\r\n parameters.set(key, value);\r\n \r\n //Delete empty parameters\r\n for (const [key, value] of parameters.entries()) {\r\n if (value === \"\") {\r\n parameters.delete(key) \r\n }\r\n }\r\n\r\n const newUrl = `${window.location.pathname}?${parameters.toString()}`;\r\n window.history.replaceState({}, '', newUrl);\r\n setQueryParams(parameters);\r\n }, [queryParams]);\r\n\r\n const handlePageChange = useCallback((page: number) => {\r\n setCurrentPage(page); \r\n updateQueryParams('page', page.toString()); \r\n setTimeout(() => {\r\n const element = document.querySelector('#container-cjs');\r\n if (element) {\r\n const offsetTop = element.getBoundingClientRect().top + window.scrollY; // Calculate the offset\r\n window.scroll({\r\n top: offsetTop,\r\n left: 0,\r\n behavior: 'smooth',\r\n }) \r\n } \r\n }, 0); \r\n }, [updateQueryParams]);\r\n\r\n const handleFiltersChange = useCallback((newFilters: SelectedFilters) => {\r\n setFilters(newFilters);\r\n setCurrentPage(1); \r\n setResetFilters(false); \r\n }, []);\r\n\r\n const handleKeywordUpdate = useCallback((newKeyword: string) => {\r\n (newKeyword === '') ? setKeyword(null) : setKeyword(newKeyword);\r\n updateQueryParams('keyword', (newKeyword));\r\n setCurrentPage(1);\r\n setResetFilters(true);\r\n }, [keyword, updateQueryParams]);\r\n\r\n const handleButtonClick = useCallback((newSelectedFilters: Set) => {\r\n setFilters({...filters, 'experience_level': newSelectedFilters});\r\n setCurrentPage(1); \r\n setResetFilters(false);\r\n }, []);\r\n\r\n const handleTabToggle = (isOpen: boolean) => {\r\n setIsTabFilterOpen(isOpen);\r\n };\r\n\r\n // Memoize filters and callbacks to avoid unnecessary re-renders\r\n const memoizedFilters = useMemo(() => filters, [filters]);\r\n const memoizedHandleFiltersChange = useCallback(handleFiltersChange, []);\r\n const memoizedHandleKeywordUpdate = useCallback(handleKeywordUpdate, [handleKeywordUpdate]);\r\n \r\nreturn (\r\n \r\n

\r\n \r\n {(showCarouselFilters && settingFilters?.includes('experience_level')) && }\r\n

\r\n {/*

*/}\r\n

\r\n {loading ? (\r\n \r\n ) : \r\n <> \r\n {jobList.length === 0 ? (\r\n

\r\n \r\n \r\n

\r\n ) : jobList.length < 6 && totalPages === 1 ? (\r\n

\r\n

\r\n \r\n

\r\n ) : (\r\n \r\n )} \r\n \r\n }\r\n

\r\n { \r\n (showMobileFilters)\r\n ? \r\n : \r\n } \r\n

\r\n

\r\n { __( 'Go to the global site', 'cg-jobs' ) }\r\n {totalPages > 1 ? :

} \r\n

\r\n

\r\n \r\n)};\r\n\r\nexport default React.memo(App);\r\n","\n import API from \"!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\";\n import domAPI from \"!../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\";\n import insertFn from \"!../../../node_modules/style-loader/dist/runtime/insertBySelector.js\";\n import setAttributes from \"!../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\";\n import insertStyleElement from \"!../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\";\n import styleTagTransformFn from \"!../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\";\n import content, * as namedExport from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./CareerBanner.module.scss\";\n \n \n\nvar options = {};\n\noptions.styleTagTransform = styleTagTransformFn;\noptions.setAttributes = setAttributes;\noptions.insert = insertFn.bind(null, \"head\");\noptions.domAPI = domAPI;\noptions.insertStyleElement = insertStyleElement;\n\nvar update = API(content, options);\n\n\n\nexport * from \"!!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../../node_modules/sass-loader/dist/cjs.js!./CareerBanner.module.scss\";\n export default content && content.locals ? content.locals : undefined;\n","function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }\n\n/*!\n * GSAP 3.12.7\n * https://gsap.com\n *\n * @license Copyright 2008-2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license or for\n * Club GSAP members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n\n/* eslint-disable */\nvar _config = {\n autoSleep: 120,\n force3D: \"auto\",\n nullTargetWarn: 1,\n units: {\n lineHeight: \"\"\n }\n},\n _defaults = {\n duration: .5,\n overwrite: false,\n delay: 0\n},\n _suppressOverwrites,\n _reverting,\n _context,\n _bigNum = 1e8,\n _tinyNum = 1 / _bigNum,\n _2PI = Math.PI * 2,\n _HALF_PI = _2PI / 4,\n _gsID = 0,\n _sqrt = Math.sqrt,\n _cos = Math.cos,\n _sin = Math.sin,\n _isString = function _isString(value) {\n return typeof value === \"string\";\n},\n _isFunction = function _isFunction(value) {\n return typeof value === \"function\";\n},\n _isNumber = function _isNumber(value) {\n return typeof value === \"number\";\n},\n _isUndefined = function _isUndefined(value) {\n return typeof value === \"undefined\";\n},\n _isObject = function _isObject(value) {\n return typeof value === \"object\";\n},\n _isNotFalse = function _isNotFalse(value) {\n return value !== false;\n},\n _windowExists = function _windowExists() {\n return typeof window !== \"undefined\";\n},\n _isFuncOrString = function _isFuncOrString(value) {\n return _isFunction(value) || _isString(value);\n},\n _isTypedArray = typeof ArrayBuffer === \"function\" && ArrayBuffer.isView || function () {},\n // note: IE10 has ArrayBuffer, but NOT ArrayBuffer.isView().\n_isArray = Array.isArray,\n _strictNumExp = /(?:-?\\.?\\d|\\.)+/gi,\n //only numbers (including negatives and decimals) but NOT relative values.\n_numExp = /[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,\n //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8.\n_numWithUnitExp = /[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,\n _complexStringNumExp = /[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,\n //duplicate so that while we're looping through matches from exec(), it doesn't contaminate the lastIndex of _numExp which we use to search for colors too.\n_relExp = /[+-]=-?[.\\d]+/,\n _delimitedValueExp = /[^,'\"\\[\\]\\s]+/gi,\n // previously /[#\\-+.]*\\b[a-z\\d\\-=+%.]+/gi but didn't catch special characters.\n_unitExp = /^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,\n _globalTimeline,\n _win,\n _coreInitted,\n _doc,\n _globals = {},\n _installScope = {},\n _coreReady,\n _install = function _install(scope) {\n return (_installScope = _merge(scope, _globals)) && gsap;\n},\n _missingPlugin = function _missingPlugin(property, value) {\n return console.warn(\"Invalid property\", property, \"set to\", value, \"Missing plugin? gsap.registerPlugin()\");\n},\n _warn = function _warn(message, suppress) {\n return !suppress && console.warn(message);\n},\n _addGlobal = function _addGlobal(name, obj) {\n return name && (_globals[name] = obj) && _installScope && (_installScope[name] = obj) || _globals;\n},\n _emptyFunc = function _emptyFunc() {\n return 0;\n},\n _startAtRevertConfig = {\n suppressEvents: true,\n isStart: true,\n kill: false\n},\n _revertConfigNoKill = {\n suppressEvents: true,\n kill: false\n},\n _revertConfig = {\n suppressEvents: true\n},\n _reservedProps = {},\n _lazyTweens = [],\n _lazyLookup = {},\n _lastRenderedFrame,\n _plugins = {},\n _effects = {},\n _nextGCFrame = 30,\n _harnessPlugins = [],\n _callbackNames = \"\",\n _harness = function _harness(targets) {\n var target = targets[0],\n harnessPlugin,\n i;\n _isObject(target) || _isFunction(target) || (targets = [targets]);\n\n if (!(harnessPlugin = (target._gsap || {}).harness)) {\n // find the first target with a harness. We assume targets passed into an animation will be of similar type, meaning the same kind of harness can be used for them all (performance optimization)\n i = _harnessPlugins.length;\n\n while (i-- && !_harnessPlugins[i].targetTest(target)) {}\n\n harnessPlugin = _harnessPlugins[i];\n }\n\n i = targets.length;\n\n while (i--) {\n targets[i] && (targets[i]._gsap || (targets[i]._gsap = new GSCache(targets[i], harnessPlugin))) || targets.splice(i, 1);\n }\n\n return targets;\n},\n _getCache = function _getCache(target) {\n return target._gsap || _harness(toArray(target))[0]._gsap;\n},\n _getProperty = function _getProperty(target, property, v) {\n return (v = target[property]) && _isFunction(v) ? target[property]() : _isUndefined(v) && target.getAttribute && target.getAttribute(property) || v;\n},\n _forEachName = function _forEachName(names, func) {\n return (names = names.split(\",\")).forEach(func) || names;\n},\n //split a comma-delimited list of names into an array, then run a forEach() function and return the split array (this is just a way to consolidate/shorten some code).\n_round = function _round(value) {\n return Math.round(value * 100000) / 100000 || 0;\n},\n _roundPrecise = function _roundPrecise(value) {\n return Math.round(value * 10000000) / 10000000 || 0;\n},\n // increased precision mostly for timing values.\n_parseRelative = function _parseRelative(start, value) {\n var operator = value.charAt(0),\n end = parseFloat(value.substr(2));\n start = parseFloat(start);\n return operator === \"+\" ? start + end : operator === \"-\" ? start - end : operator === \"*\" ? start * end : start / end;\n},\n _arrayContainsAny = function _arrayContainsAny(toSearch, toFind) {\n //searches one array to find matches for any of the items in the toFind array. As soon as one is found, it returns true. It does NOT return all the matches; it's simply a boolean search.\n var l = toFind.length,\n i = 0;\n\n for (; toSearch.indexOf(toFind[i]) < 0 && ++i < l;) {}\n\n return i < l;\n},\n _lazyRender = function _lazyRender() {\n var l = _lazyTweens.length,\n a = _lazyTweens.slice(0),\n i,\n tween;\n\n _lazyLookup = {};\n _lazyTweens.length = 0;\n\n for (i = 0; i < l; i++) {\n tween = a[i];\n tween && tween._lazy && (tween.render(tween._lazy[0], tween._lazy[1], true)._lazy = 0);\n }\n},\n _lazySafeRender = function _lazySafeRender(animation, time, suppressEvents, force) {\n _lazyTweens.length && !_reverting && _lazyRender();\n animation.render(time, suppressEvents, force || _reverting && time < 0 && (animation._initted || animation._startAt));\n _lazyTweens.length && !_reverting && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when someone calls seek() or time() or progress(), they expect an immediate render.\n},\n _numericIfPossible = function _numericIfPossible(value) {\n var n = parseFloat(value);\n return (n || n === 0) && (value + \"\").match(_delimitedValueExp).length < 2 ? n : _isString(value) ? value.trim() : value;\n},\n _passThrough = function _passThrough(p) {\n return p;\n},\n _setDefaults = function _setDefaults(obj, defaults) {\n for (var p in defaults) {\n p in obj || (obj[p] = defaults[p]);\n }\n\n return obj;\n},\n _setKeyframeDefaults = function _setKeyframeDefaults(excludeDuration) {\n return function (obj, defaults) {\n for (var p in defaults) {\n p in obj || p === \"duration\" && excludeDuration || p === \"ease\" || (obj[p] = defaults[p]);\n }\n };\n},\n _merge = function _merge(base, toMerge) {\n for (var p in toMerge) {\n base[p] = toMerge[p];\n }\n\n return base;\n},\n _mergeDeep = function _mergeDeep(base, toMerge) {\n for (var p in toMerge) {\n p !== \"__proto__\" && p !== \"constructor\" && p !== \"prototype\" && (base[p] = _isObject(toMerge[p]) ? _mergeDeep(base[p] || (base[p] = {}), toMerge[p]) : toMerge[p]);\n }\n\n return base;\n},\n _copyExcluding = function _copyExcluding(obj, excluding) {\n var copy = {},\n p;\n\n for (p in obj) {\n p in excluding || (copy[p] = obj[p]);\n }\n\n return copy;\n},\n _inheritDefaults = function _inheritDefaults(vars) {\n var parent = vars.parent || _globalTimeline,\n func = vars.keyframes ? _setKeyframeDefaults(_isArray(vars.keyframes)) : _setDefaults;\n\n if (_isNotFalse(vars.inherit)) {\n while (parent) {\n func(vars, parent.vars.defaults);\n parent = parent.parent || parent._dp;\n }\n }\n\n return vars;\n},\n _arraysMatch = function _arraysMatch(a1, a2) {\n var i = a1.length,\n match = i === a2.length;\n\n while (match && i-- && a1[i] === a2[i]) {}\n\n return i < 0;\n},\n _addLinkedListItem = function _addLinkedListItem(parent, child, firstProp, lastProp, sortBy) {\n if (firstProp === void 0) {\n firstProp = \"_first\";\n }\n\n if (lastProp === void 0) {\n lastProp = \"_last\";\n }\n\n var prev = parent[lastProp],\n t;\n\n if (sortBy) {\n t = child[sortBy];\n\n while (prev && prev[sortBy] > t) {\n prev = prev._prev;\n }\n }\n\n if (prev) {\n child._next = prev._next;\n prev._next = child;\n } else {\n child._next = parent[firstProp];\n parent[firstProp] = child;\n }\n\n if (child._next) {\n child._next._prev = child;\n } else {\n parent[lastProp] = child;\n }\n\n child._prev = prev;\n child.parent = child._dp = parent;\n return child;\n},\n _removeLinkedListItem = function _removeLinkedListItem(parent, child, firstProp, lastProp) {\n if (firstProp === void 0) {\n firstProp = \"_first\";\n }\n\n if (lastProp === void 0) {\n lastProp = \"_last\";\n }\n\n var prev = child._prev,\n next = child._next;\n\n if (prev) {\n prev._next = next;\n } else if (parent[firstProp] === child) {\n parent[firstProp] = next;\n }\n\n if (next) {\n next._prev = prev;\n } else if (parent[lastProp] === child) {\n parent[lastProp] = prev;\n }\n\n child._next = child._prev = child.parent = null; // don't delete the _dp just so we can revert if necessary. But parent should be null to indicate the item isn't in a linked list.\n},\n _removeFromParent = function _removeFromParent(child, onlyIfParentHasAutoRemove) {\n child.parent && (!onlyIfParentHasAutoRemove || child.parent.autoRemoveChildren) && child.parent.remove && child.parent.remove(child);\n child._act = 0;\n},\n _uncache = function _uncache(animation, child) {\n if (animation && (!child || child._end > animation._dur || child._start < 0)) {\n // performance optimization: if a child animation is passed in we should only uncache if that child EXTENDS the animation (its end time is beyond the end)\n var a = animation;\n\n while (a) {\n a._dirty = 1;\n a = a.parent;\n }\n }\n\n return animation;\n},\n _recacheAncestors = function _recacheAncestors(animation) {\n var parent = animation.parent;\n\n while (parent && parent.parent) {\n //sometimes we must force a re-sort of all children and update the duration/totalDuration of all ancestor timelines immediately in case, for example, in the middle of a render loop, one tween alters another tween's timeScale which shoves its startTime before 0, forcing the parent timeline to shift around and shiftChildren() which could affect that next tween's render (startTime). Doesn't matter for the root timeline though.\n parent._dirty = 1;\n parent.totalDuration();\n parent = parent.parent;\n }\n\n return animation;\n},\n _rewindStartAt = function _rewindStartAt(tween, totalTime, suppressEvents, force) {\n return tween._startAt && (_reverting ? tween._startAt.revert(_revertConfigNoKill) : tween.vars.immediateRender && !tween.vars.autoRevert || tween._startAt.render(totalTime, true, force));\n},\n _hasNoPausedAncestors = function _hasNoPausedAncestors(animation) {\n return !animation || animation._ts && _hasNoPausedAncestors(animation.parent);\n},\n _elapsedCycleDuration = function _elapsedCycleDuration(animation) {\n return animation._repeat ? _animationCycle(animation._tTime, animation = animation.duration() + animation._rDelay) * animation : 0;\n},\n // feed in the totalTime and cycleDuration and it'll return the cycle (iteration minus 1) and if the playhead is exactly at the very END, it will NOT bump up to the next cycle.\n_animationCycle = function _animationCycle(tTime, cycleDuration) {\n var whole = Math.floor(tTime = _roundPrecise(tTime / cycleDuration));\n return tTime && whole === tTime ? whole - 1 : whole;\n},\n _parentToChildTotalTime = function _parentToChildTotalTime(parentTime, child) {\n return (parentTime - child._start) * child._ts + (child._ts >= 0 ? 0 : child._dirty ? child.totalDuration() : child._tDur);\n},\n _setEnd = function _setEnd(animation) {\n return animation._end = _roundPrecise(animation._start + (animation._tDur / Math.abs(animation._ts || animation._rts || _tinyNum) || 0));\n},\n _alignPlayhead = function _alignPlayhead(animation, totalTime) {\n // adjusts the animation's _start and _end according to the provided totalTime (only if the parent's smoothChildTiming is true and the animation isn't paused). It doesn't do any rendering or forcing things back into parent timelines, etc. - that's what totalTime() is for.\n var parent = animation._dp;\n\n if (parent && parent.smoothChildTiming && animation._ts) {\n animation._start = _roundPrecise(parent._time - (animation._ts > 0 ? totalTime / animation._ts : ((animation._dirty ? animation.totalDuration() : animation._tDur) - totalTime) / -animation._ts));\n\n _setEnd(animation);\n\n parent._dirty || _uncache(parent, animation); //for performance improvement. If the parent's cache is already dirty, it already took care of marking the ancestors as dirty too, so skip the function call here.\n }\n\n return animation;\n},\n\n/*\n_totalTimeToTime = (clampedTotalTime, duration, repeat, repeatDelay, yoyo) => {\n\tlet cycleDuration = duration + repeatDelay,\n\t\ttime = _round(clampedTotalTime % cycleDuration);\n\tif (time > duration) {\n\t\ttime = duration;\n\t}\n\treturn (yoyo && (~~(clampedTotalTime / cycleDuration) & 1)) ? duration - time : time;\n},\n*/\n_postAddChecks = function _postAddChecks(timeline, child) {\n var t;\n\n if (child._time || !child._dur && child._initted || child._start < timeline._time && (child._dur || !child.add)) {\n // in case, for example, the _start is moved on a tween that has already rendered, or if it's being inserted into a timeline BEFORE where the playhead is currently. Imagine it's at its end state, then the startTime is moved WAY later (after the end of this timeline), it should render at its beginning. Special case: if it's a timeline (has .add() method) and no duration, we can skip rendering because the user may be populating it AFTER adding it to a parent timeline (unconventional, but possible, and we wouldn't want it to get removed if the parent's autoRemoveChildren is true).\n t = _parentToChildTotalTime(timeline.rawTime(), child);\n\n if (!child._dur || _clamp(0, child.totalDuration(), t) - child._tTime > _tinyNum) {\n child.render(t, true);\n }\n } //if the timeline has already ended but the inserted tween/timeline extends the duration, we should enable this timeline again so that it renders properly. We should also align the playhead with the parent timeline's when appropriate.\n\n\n if (_uncache(timeline, child)._dp && timeline._initted && timeline._time >= timeline._dur && timeline._ts) {\n //in case any of the ancestors had completed but should now be enabled...\n if (timeline._dur < timeline.duration()) {\n t = timeline;\n\n while (t._dp) {\n t.rawTime() >= 0 && t.totalTime(t._tTime); //moves the timeline (shifts its startTime) if necessary, and also enables it. If it's currently zero, though, it may not be scheduled to render until later so there's no need to force it to align with the current playhead position. Only move to catch up with the playhead.\n\n t = t._dp;\n }\n }\n\n timeline._zTime = -_tinyNum; // helps ensure that the next render() will be forced (crossingStart = true in render()), even if the duration hasn't changed (we're adding a child which would need to get rendered). Definitely an edge case. Note: we MUST do this AFTER the loop above where the totalTime() might trigger a render() because this _addToTimeline() method gets called from the Animation constructor, BEFORE tweens even record their targets, etc. so we wouldn't want things to get triggered in the wrong order.\n }\n},\n _addToTimeline = function _addToTimeline(timeline, child, position, skipChecks) {\n child.parent && _removeFromParent(child);\n child._start = _roundPrecise((_isNumber(position) ? position : position || timeline !== _globalTimeline ? _parsePosition(timeline, position, child) : timeline._time) + child._delay);\n child._end = _roundPrecise(child._start + (child.totalDuration() / Math.abs(child.timeScale()) || 0));\n\n _addLinkedListItem(timeline, child, \"_first\", \"_last\", timeline._sort ? \"_start\" : 0);\n\n _isFromOrFromStart(child) || (timeline._recent = child);\n skipChecks || _postAddChecks(timeline, child);\n timeline._ts < 0 && _alignPlayhead(timeline, timeline._tTime); // if the timeline is reversed and the new child makes it longer, we may need to adjust the parent's _start (push it back)\n\n return timeline;\n},\n _scrollTrigger = function _scrollTrigger(animation, trigger) {\n return (_globals.ScrollTrigger || _missingPlugin(\"scrollTrigger\", trigger)) && _globals.ScrollTrigger.create(trigger, animation);\n},\n _attemptInitTween = function _attemptInitTween(tween, time, force, suppressEvents, tTime) {\n _initTween(tween, time, tTime);\n\n if (!tween._initted) {\n return 1;\n }\n\n if (!force && tween._pt && !_reverting && (tween._dur && tween.vars.lazy !== false || !tween._dur && tween.vars.lazy) && _lastRenderedFrame !== _ticker.frame) {\n _lazyTweens.push(tween);\n\n tween._lazy = [tTime, suppressEvents];\n return 1;\n }\n},\n _parentPlayheadIsBeforeStart = function _parentPlayheadIsBeforeStart(_ref) {\n var parent = _ref.parent;\n return parent && parent._ts && parent._initted && !parent._lock && (parent.rawTime() < 0 || _parentPlayheadIsBeforeStart(parent));\n},\n // check parent's _lock because when a timeline repeats/yoyos and does its artificial wrapping, we shouldn't force the ratio back to 0\n_isFromOrFromStart = function _isFromOrFromStart(_ref2) {\n var data = _ref2.data;\n return data === \"isFromStart\" || data === \"isStart\";\n},\n _renderZeroDurationTween = function _renderZeroDurationTween(tween, totalTime, suppressEvents, force) {\n var prevRatio = tween.ratio,\n ratio = totalTime < 0 || !totalTime && (!tween._start && _parentPlayheadIsBeforeStart(tween) && !(!tween._initted && _isFromOrFromStart(tween)) || (tween._ts < 0 || tween._dp._ts < 0) && !_isFromOrFromStart(tween)) ? 0 : 1,\n // if the tween or its parent is reversed and the totalTime is 0, we should go to a ratio of 0. Edge case: if a from() or fromTo() stagger tween is placed later in a timeline, the \"startAt\" zero-duration tween could initially render at a time when the parent timeline's playhead is technically BEFORE where this tween is, so make sure that any \"from\" and \"fromTo\" startAt tweens are rendered the first time at a ratio of 1.\n repeatDelay = tween._rDelay,\n tTime = 0,\n pt,\n iteration,\n prevIteration;\n\n if (repeatDelay && tween._repeat) {\n // in case there's a zero-duration tween that has a repeat with a repeatDelay\n tTime = _clamp(0, tween._tDur, totalTime);\n iteration = _animationCycle(tTime, repeatDelay);\n tween._yoyo && iteration & 1 && (ratio = 1 - ratio);\n\n if (iteration !== _animationCycle(tween._tTime, repeatDelay)) {\n // if iteration changed\n prevRatio = 1 - ratio;\n tween.vars.repeatRefresh && tween._initted && tween.invalidate();\n }\n }\n\n if (ratio !== prevRatio || _reverting || force || tween._zTime === _tinyNum || !totalTime && tween._zTime) {\n if (!tween._initted && _attemptInitTween(tween, totalTime, force, suppressEvents, tTime)) {\n // if we render the very beginning (time == 0) of a fromTo(), we must force the render (normal tweens wouldn't need to render at a time of 0 when the prevTime was also 0). This is also mandatory to make sure overwriting kicks in immediately.\n return;\n }\n\n prevIteration = tween._zTime;\n tween._zTime = totalTime || (suppressEvents ? _tinyNum : 0); // when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration tween, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.\n\n suppressEvents || (suppressEvents = totalTime && !prevIteration); // if it was rendered previously at exactly 0 (_zTime) and now the playhead is moving away, DON'T fire callbacks otherwise they'll seem like duplicates.\n\n tween.ratio = ratio;\n tween._from && (ratio = 1 - ratio);\n tween._time = 0;\n tween._tTime = tTime;\n pt = tween._pt;\n\n while (pt) {\n pt.r(ratio, pt.d);\n pt = pt._next;\n }\n\n totalTime < 0 && _rewindStartAt(tween, totalTime, suppressEvents, true);\n tween._onUpdate && !suppressEvents && _callback(tween, \"onUpdate\");\n tTime && tween._repeat && !suppressEvents && tween.parent && _callback(tween, \"onRepeat\");\n\n if ((totalTime >= tween._tDur || totalTime < 0) && tween.ratio === ratio) {\n ratio && _removeFromParent(tween, 1);\n\n if (!suppressEvents && !_reverting) {\n _callback(tween, ratio ? \"onComplete\" : \"onReverseComplete\", true);\n\n tween._prom && tween._prom();\n }\n }\n } else if (!tween._zTime) {\n tween._zTime = totalTime;\n }\n},\n _findNextPauseTween = function _findNextPauseTween(animation, prevTime, time) {\n var child;\n\n if (time > prevTime) {\n child = animation._first;\n\n while (child && child._start <= time) {\n if (child.data === \"isPause\" && child._start > prevTime) {\n return child;\n }\n\n child = child._next;\n }\n } else {\n child = animation._last;\n\n while (child && child._start >= time) {\n if (child.data === \"isPause\" && child._start < prevTime) {\n return child;\n }\n\n child = child._prev;\n }\n }\n},\n _setDuration = function _setDuration(animation, duration, skipUncache, leavePlayhead) {\n var repeat = animation._repeat,\n dur = _roundPrecise(duration) || 0,\n totalProgress = animation._tTime / animation._tDur;\n totalProgress && !leavePlayhead && (animation._time *= dur / animation._dur);\n animation._dur = dur;\n animation._tDur = !repeat ? dur : repeat < 0 ? 1e10 : _roundPrecise(dur * (repeat + 1) + animation._rDelay * repeat);\n totalProgress > 0 && !leavePlayhead && _alignPlayhead(animation, animation._tTime = animation._tDur * totalProgress);\n animation.parent && _setEnd(animation);\n skipUncache || _uncache(animation.parent, animation);\n return animation;\n},\n _onUpdateTotalDuration = function _onUpdateTotalDuration(animation) {\n return animation instanceof Timeline ? _uncache(animation) : _setDuration(animation, animation._dur);\n},\n _zeroPosition = {\n _start: 0,\n endTime: _emptyFunc,\n totalDuration: _emptyFunc\n},\n _parsePosition = function _parsePosition(animation, position, percentAnimation) {\n var labels = animation.labels,\n recent = animation._recent || _zeroPosition,\n clippedDuration = animation.duration() >= _bigNum ? recent.endTime(false) : animation._dur,\n //in case there's a child that infinitely repeats, users almost never intend for the insertion point of a new child to be based on a SUPER long value like that so we clip it and assume the most recently-added child's endTime should be used instead.\n i,\n offset,\n isPercent;\n\n if (_isString(position) && (isNaN(position) || position in labels)) {\n //if the string is a number like \"1\", check to see if there's a label with that name, otherwise interpret it as a number (absolute value).\n offset = position.charAt(0);\n isPercent = position.substr(-1) === \"%\";\n i = position.indexOf(\"=\");\n\n if (offset === \"<\" || offset === \">\") {\n i >= 0 && (position = position.replace(/=/, \"\"));\n return (offset === \"<\" ? recent._start : recent.endTime(recent._repeat >= 0)) + (parseFloat(position.substr(1)) || 0) * (isPercent ? (i < 0 ? recent : percentAnimation).totalDuration() / 100 : 1);\n }\n\n if (i < 0) {\n position in labels || (labels[position] = clippedDuration);\n return labels[position];\n }\n\n offset = parseFloat(position.charAt(i - 1) + position.substr(i + 1));\n\n if (isPercent && percentAnimation) {\n offset = offset / 100 * (_isArray(percentAnimation) ? percentAnimation[0] : percentAnimation).totalDuration();\n }\n\n return i > 1 ? _parsePosition(animation, position.substr(0, i - 1), percentAnimation) + offset : clippedDuration + offset;\n }\n\n return position == null ? clippedDuration : +position;\n},\n _createTweenType = function _createTweenType(type, params, timeline) {\n var isLegacy = _isNumber(params[1]),\n varsIndex = (isLegacy ? 2 : 1) + (type < 2 ? 0 : 1),\n vars = params[varsIndex],\n irVars,\n parent;\n\n isLegacy && (vars.duration = params[1]);\n vars.parent = timeline;\n\n if (type) {\n irVars = vars;\n parent = timeline;\n\n while (parent && !(\"immediateRender\" in irVars)) {\n // inheritance hasn't happened yet, but someone may have set a default in an ancestor timeline. We could do vars.immediateRender = _isNotFalse(_inheritDefaults(vars).immediateRender) but that'd exact a slight performance penalty because _inheritDefaults() also runs in the Tween constructor. We're paying a small kb price here to gain speed.\n irVars = parent.vars.defaults || {};\n parent = _isNotFalse(parent.vars.inherit) && parent.parent;\n }\n\n vars.immediateRender = _isNotFalse(irVars.immediateRender);\n type < 2 ? vars.runBackwards = 1 : vars.startAt = params[varsIndex - 1]; // \"from\" vars\n }\n\n return new Tween(params[0], vars, params[varsIndex + 1]);\n},\n _conditionalReturn = function _conditionalReturn(value, func) {\n return value || value === 0 ? func(value) : func;\n},\n _clamp = function _clamp(min, max, value) {\n return value < min ? min : value > max ? max : value;\n},\n getUnit = function getUnit(value, v) {\n return !_isString(value) || !(v = _unitExp.exec(value)) ? \"\" : v[1];\n},\n // note: protect against padded numbers as strings, like \"100.100\". That shouldn't return \"00\" as the unit. If it's numeric, return no unit.\nclamp = function clamp(min, max, value) {\n return _conditionalReturn(value, function (v) {\n return _clamp(min, max, v);\n });\n},\n _slice = [].slice,\n _isArrayLike = function _isArrayLike(value, nonEmpty) {\n return value && _isObject(value) && \"length\" in value && (!nonEmpty && !value.length || value.length - 1 in value && _isObject(value[0])) && !value.nodeType && value !== _win;\n},\n _flatten = function _flatten(ar, leaveStrings, accumulator) {\n if (accumulator === void 0) {\n accumulator = [];\n }\n\n return ar.forEach(function (value) {\n var _accumulator;\n\n return _isString(value) && !leaveStrings || _isArrayLike(value, 1) ? (_accumulator = accumulator).push.apply(_accumulator, toArray(value)) : accumulator.push(value);\n }) || accumulator;\n},\n //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects.\ntoArray = function toArray(value, scope, leaveStrings) {\n return _context && !scope && _context.selector ? _context.selector(value) : _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call((scope || _doc).querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : [];\n},\n selector = function selector(value) {\n value = toArray(value)[0] || _warn(\"Invalid scope\") || {};\n return function (v) {\n var el = value.current || value.nativeElement || value;\n return toArray(v, el.querySelectorAll ? el : el === value ? _warn(\"Invalid scope\") || _doc.createElement(\"div\") : value);\n };\n},\n shuffle = function shuffle(a) {\n return a.sort(function () {\n return .5 - Math.random();\n });\n},\n // alternative that's a bit faster and more reliably diverse but bigger: for (let j, v, i = a.length; i; j = (Math.random() * i) | 0, v = a[--i], a[i] = a[j], a[j] = v); return a;\n//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following\ndistribute = function distribute(v) {\n if (_isFunction(v)) {\n return v;\n }\n\n var vars = _isObject(v) ? v : {\n each: v\n },\n //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total \"amount\" that's chunked out among them all.\n ease = _parseEase(vars.ease),\n from = vars.from || 0,\n base = parseFloat(vars.base) || 0,\n cache = {},\n isDecimal = from > 0 && from < 1,\n ratios = isNaN(from) || isDecimal,\n axis = vars.axis,\n ratioX = from,\n ratioY = from;\n\n if (_isString(from)) {\n ratioX = ratioY = {\n center: .5,\n edges: .5,\n end: 1\n }[from] || 0;\n } else if (!isDecimal && ratios) {\n ratioX = from[0];\n ratioY = from[1];\n }\n\n return function (i, target, a) {\n var l = (a || vars).length,\n distances = cache[l],\n originX,\n originY,\n x,\n y,\n d,\n j,\n max,\n min,\n wrapAt;\n\n if (!distances) {\n wrapAt = vars.grid === \"auto\" ? 0 : (vars.grid || [1, _bigNum])[1];\n\n if (!wrapAt) {\n max = -_bigNum;\n\n while (max < (max = a[wrapAt++].getBoundingClientRect().left) && wrapAt < l) {}\n\n wrapAt < l && wrapAt--;\n }\n\n distances = cache[l] = [];\n originX = ratios ? Math.min(wrapAt, l) * ratioX - .5 : from % wrapAt;\n originY = wrapAt === _bigNum ? 0 : ratios ? l * ratioY / wrapAt - .5 : from / wrapAt | 0;\n max = 0;\n min = _bigNum;\n\n for (j = 0; j < l; j++) {\n x = j % wrapAt - originX;\n y = originY - (j / wrapAt | 0);\n distances[j] = d = !axis ? _sqrt(x * x + y * y) : Math.abs(axis === \"y\" ? y : x);\n d > max && (max = d);\n d < min && (min = d);\n }\n\n from === \"random\" && shuffle(distances);\n distances.max = max - min;\n distances.min = min;\n distances.v = l = (parseFloat(vars.amount) || parseFloat(vars.each) * (wrapAt > l ? l - 1 : !axis ? Math.max(wrapAt, l / wrapAt) : axis === \"y\" ? l / wrapAt : wrapAt) || 0) * (from === \"edges\" ? -1 : 1);\n distances.b = l < 0 ? base - l : base;\n distances.u = getUnit(vars.amount || vars.each) || 0; //unit\n\n ease = ease && l < 0 ? _invertEase(ease) : ease;\n }\n\n l = (distances[i] - distances.min) / distances.max || 0;\n return _roundPrecise(distances.b + (ease ? ease(l) : l) * distances.v) + distances.u; //round in order to work around floating point errors\n };\n},\n _roundModifier = function _roundModifier(v) {\n //pass in 0.1 get a function that'll round to the nearest tenth, or 5 to round to the closest 5, or 0.001 to the closest 1000th, etc.\n var p = Math.pow(10, ((v + \"\").split(\".\")[1] || \"\").length); //to avoid floating point math errors (like 24 * 0.1 == 2.4000000000000004), we chop off at a specific number of decimal places (much faster than toFixed())\n\n return function (raw) {\n var n = _roundPrecise(Math.round(parseFloat(raw) / v) * v * p);\n\n return (n - n % 1) / p + (_isNumber(raw) ? 0 : getUnit(raw)); // n - n % 1 replaces Math.floor() in order to handle negative values properly. For example, Math.floor(-150.00000000000003) is 151!\n };\n},\n snap = function snap(snapTo, value) {\n var isArray = _isArray(snapTo),\n radius,\n is2D;\n\n if (!isArray && _isObject(snapTo)) {\n radius = isArray = snapTo.radius || _bigNum;\n\n if (snapTo.values) {\n snapTo = toArray(snapTo.values);\n\n if (is2D = !_isNumber(snapTo[0])) {\n radius *= radius; //performance optimization so we don't have to Math.sqrt() in the loop.\n }\n } else {\n snapTo = _roundModifier(snapTo.increment);\n }\n }\n\n return _conditionalReturn(value, !isArray ? _roundModifier(snapTo) : _isFunction(snapTo) ? function (raw) {\n is2D = snapTo(raw);\n return Math.abs(is2D - raw) <= radius ? is2D : raw;\n } : function (raw) {\n var x = parseFloat(is2D ? raw.x : raw),\n y = parseFloat(is2D ? raw.y : 0),\n min = _bigNum,\n closest = 0,\n i = snapTo.length,\n dx,\n dy;\n\n while (i--) {\n if (is2D) {\n dx = snapTo[i].x - x;\n dy = snapTo[i].y - y;\n dx = dx * dx + dy * dy;\n } else {\n dx = Math.abs(snapTo[i] - x);\n }\n\n if (dx < min) {\n min = dx;\n closest = i;\n }\n }\n\n closest = !radius || min <= radius ? snapTo[closest] : raw;\n return is2D || closest === raw || _isNumber(raw) ? closest : closest + getUnit(raw);\n });\n},\n random = function random(min, max, roundingIncrement, returnFunction) {\n return _conditionalReturn(_isArray(min) ? !max : roundingIncrement === true ? !!(roundingIncrement = 0) : !returnFunction, function () {\n return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + \"\").length - 2) : 1) && Math.floor(Math.round((min - roundingIncrement / 2 + Math.random() * (max - min + roundingIncrement * .99)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;\n });\n},\n pipe = function pipe() {\n for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {\n functions[_key] = arguments[_key];\n }\n\n return function (value) {\n return functions.reduce(function (v, f) {\n return f(v);\n }, value);\n };\n},\n unitize = function unitize(func, unit) {\n return function (value) {\n return func(parseFloat(value)) + (unit || getUnit(value));\n };\n},\n normalize = function normalize(min, max, value) {\n return mapRange(min, max, 0, 1, value);\n},\n _wrapArray = function _wrapArray(a, wrapper, value) {\n return _conditionalReturn(value, function (index) {\n return a[~~wrapper(index)];\n });\n},\n wrap = function wrap(min, max, value) {\n // NOTE: wrap() CANNOT be an arrow function! A very odd compiling bug causes problems (unrelated to GSAP).\n var range = max - min;\n return _isArray(min) ? _wrapArray(min, wrap(0, min.length), max) : _conditionalReturn(value, function (value) {\n return (range + (value - min) % range) % range + min;\n });\n},\n wrapYoyo = function wrapYoyo(min, max, value) {\n var range = max - min,\n total = range * 2;\n return _isArray(min) ? _wrapArray(min, wrapYoyo(0, min.length - 1), max) : _conditionalReturn(value, function (value) {\n value = (total + (value - min) % total) % total || 0;\n return min + (value > range ? total - value : value);\n });\n},\n _replaceRandom = function _replaceRandom(value) {\n //replaces all occurrences of random(...) in a string with the calculated random value. can be a range like random(-100, 100, 5) or an array like random([0, 100, 500])\n var prev = 0,\n s = \"\",\n i,\n nums,\n end,\n isArray;\n\n while (~(i = value.indexOf(\"random(\", prev))) {\n end = value.indexOf(\")\", i);\n isArray = value.charAt(i + 7) === \"[\";\n nums = value.substr(i + 7, end - i - 7).match(isArray ? _delimitedValueExp : _strictNumExp);\n s += value.substr(prev, i - prev) + random(isArray ? nums : +nums[0], isArray ? 0 : +nums[1], +nums[2] || 1e-5);\n prev = end + 1;\n }\n\n return s + value.substr(prev, value.length - prev);\n},\n mapRange = function mapRange(inMin, inMax, outMin, outMax, value) {\n var inRange = inMax - inMin,\n outRange = outMax - outMin;\n return _conditionalReturn(value, function (value) {\n return outMin + ((value - inMin) / inRange * outRange || 0);\n });\n},\n interpolate = function interpolate(start, end, progress, mutate) {\n var func = isNaN(start + end) ? 0 : function (p) {\n return (1 - p) * start + p * end;\n };\n\n if (!func) {\n var isString = _isString(start),\n master = {},\n p,\n i,\n interpolators,\n l,\n il;\n\n progress === true && (mutate = 1) && (progress = null);\n\n if (isString) {\n start = {\n p: start\n };\n end = {\n p: end\n };\n } else if (_isArray(start) && !_isArray(end)) {\n interpolators = [];\n l = start.length;\n il = l - 2;\n\n for (i = 1; i < l; i++) {\n interpolators.push(interpolate(start[i - 1], start[i])); //build the interpolators up front as a performance optimization so that when the function is called many times, it can just reuse them.\n }\n\n l--;\n\n func = function func(p) {\n p *= l;\n var i = Math.min(il, ~~p);\n return interpolators[i](p - i);\n };\n\n progress = end;\n } else if (!mutate) {\n start = _merge(_isArray(start) ? [] : {}, start);\n }\n\n if (!interpolators) {\n for (p in end) {\n _addPropTween.call(master, start, p, \"get\", end[p]);\n }\n\n func = function func(p) {\n return _renderPropTweens(p, master) || (isString ? start.p : start);\n };\n }\n }\n\n return _conditionalReturn(progress, func);\n},\n _getLabelInDirection = function _getLabelInDirection(timeline, fromTime, backward) {\n //used for nextLabel() and previousLabel()\n var labels = timeline.labels,\n min = _bigNum,\n p,\n distance,\n label;\n\n for (p in labels) {\n distance = labels[p] - fromTime;\n\n if (distance < 0 === !!backward && distance && min > (distance = Math.abs(distance))) {\n label = p;\n min = distance;\n }\n }\n\n return label;\n},\n _callback = function _callback(animation, type, executeLazyFirst) {\n var v = animation.vars,\n callback = v[type],\n prevContext = _context,\n context = animation._ctx,\n params,\n scope,\n result;\n\n if (!callback) {\n return;\n }\n\n params = v[type + \"Params\"];\n scope = v.callbackScope || animation;\n executeLazyFirst && _lazyTweens.length && _lazyRender(); //in case rendering caused any tweens to lazy-init, we should render them because typically when a timeline finishes, users expect things to have rendered fully. Imagine an onUpdate on a timeline that reports/checks tweened values.\n\n context && (_context = context);\n result = params ? callback.apply(scope, params) : callback.call(scope);\n _context = prevContext;\n return result;\n},\n _interrupt = function _interrupt(animation) {\n _removeFromParent(animation);\n\n animation.scrollTrigger && animation.scrollTrigger.kill(!!_reverting);\n animation.progress() < 1 && _callback(animation, \"onInterrupt\");\n return animation;\n},\n _quickTween,\n _registerPluginQueue = [],\n _createPlugin = function _createPlugin(config) {\n if (!config) return;\n config = !config.name && config[\"default\"] || config; // UMD packaging wraps things oddly, so for example MotionPathHelper becomes {MotionPathHelper:MotionPathHelper, default:MotionPathHelper}.\n\n if (_windowExists() || config.headless) {\n // edge case: some build tools may pass in a null/undefined value\n var name = config.name,\n isFunc = _isFunction(config),\n Plugin = name && !isFunc && config.init ? function () {\n this._props = [];\n } : config,\n //in case someone passes in an object that's not a plugin, like CustomEase\n instanceDefaults = {\n init: _emptyFunc,\n render: _renderPropTweens,\n add: _addPropTween,\n kill: _killPropTweensOf,\n modifier: _addPluginModifier,\n rawVars: 0\n },\n statics = {\n targetTest: 0,\n get: 0,\n getSetter: _getSetter,\n aliases: {},\n register: 0\n };\n\n _wake();\n\n if (config !== Plugin) {\n if (_plugins[name]) {\n return;\n }\n\n _setDefaults(Plugin, _setDefaults(_copyExcluding(config, instanceDefaults), statics)); //static methods\n\n\n _merge(Plugin.prototype, _merge(instanceDefaults, _copyExcluding(config, statics))); //instance methods\n\n\n _plugins[Plugin.prop = name] = Plugin;\n\n if (config.targetTest) {\n _harnessPlugins.push(Plugin);\n\n _reservedProps[name] = 1;\n }\n\n name = (name === \"css\" ? \"CSS\" : name.charAt(0).toUpperCase() + name.substr(1)) + \"Plugin\"; //for the global name. \"motionPath\" should become MotionPathPlugin\n }\n\n _addGlobal(name, Plugin);\n\n config.register && config.register(gsap, Plugin, PropTween);\n } else {\n _registerPluginQueue.push(config);\n }\n},\n\n/*\n * --------------------------------------------------------------------------------------\n * COLORS\n * --------------------------------------------------------------------------------------\n */\n_255 = 255,\n _colorLookup = {\n aqua: [0, _255, _255],\n lime: [0, _255, 0],\n silver: [192, 192, 192],\n black: [0, 0, 0],\n maroon: [128, 0, 0],\n teal: [0, 128, 128],\n blue: [0, 0, _255],\n navy: [0, 0, 128],\n white: [_255, _255, _255],\n olive: [128, 128, 0],\n yellow: [_255, _255, 0],\n orange: [_255, 165, 0],\n gray: [128, 128, 128],\n purple: [128, 0, 128],\n green: [0, 128, 0],\n red: [_255, 0, 0],\n pink: [_255, 192, 203],\n cyan: [0, _255, _255],\n transparent: [_255, _255, _255, 0]\n},\n // possible future idea to replace the hard-coded color name values - put this in the ticker.wake() where we set the _doc:\n// let ctx = _doc.createElement(\"canvas\").getContext(\"2d\");\n// _forEachName(\"aqua,lime,silver,black,maroon,teal,blue,navy,white,olive,yellow,orange,gray,purple,green,red,pink,cyan\", color => {ctx.fillStyle = color; _colorLookup[color] = splitColor(ctx.fillStyle)});\n_hue = function _hue(h, m1, m2) {\n h += h < 0 ? 1 : h > 1 ? -1 : 0;\n return (h * 6 < 1 ? m1 + (m2 - m1) * h * 6 : h < .5 ? m2 : h * 3 < 2 ? m1 + (m2 - m1) * (2 / 3 - h) * 6 : m1) * _255 + .5 | 0;\n},\n splitColor = function splitColor(v, toHSL, forceAlpha) {\n var a = !v ? _colorLookup.black : _isNumber(v) ? [v >> 16, v >> 8 & _255, v & _255] : 0,\n r,\n g,\n b,\n h,\n s,\n l,\n max,\n min,\n d,\n wasHSL;\n\n if (!a) {\n if (v.substr(-1) === \",\") {\n //sometimes a trailing comma is included and we should chop it off (typically from a comma-delimited list of values like a textShadow:\"2px 2px 2px blue, 5px 5px 5px rgb(255,0,0)\" - in this example \"blue,\" has a trailing comma. We could strip it out inside parseComplex() but we'd need to do it to the beginning and ending values plus it wouldn't provide protection from other potential scenarios like if the user passes in a similar value.\n v = v.substr(0, v.length - 1);\n }\n\n if (_colorLookup[v]) {\n a = _colorLookup[v];\n } else if (v.charAt(0) === \"#\") {\n if (v.length < 6) {\n //for shorthand like #9F0 or #9F0F (could have alpha)\n r = v.charAt(1);\n g = v.charAt(2);\n b = v.charAt(3);\n v = \"#\" + r + r + g + g + b + b + (v.length === 5 ? v.charAt(4) + v.charAt(4) : \"\");\n }\n\n if (v.length === 9) {\n // hex with alpha, like #fd5e53ff\n a = parseInt(v.substr(1, 6), 16);\n return [a >> 16, a >> 8 & _255, a & _255, parseInt(v.substr(7), 16) / 255];\n }\n\n v = parseInt(v.substr(1), 16);\n a = [v >> 16, v >> 8 & _255, v & _255];\n } else if (v.substr(0, 3) === \"hsl\") {\n a = wasHSL = v.match(_strictNumExp);\n\n if (!toHSL) {\n h = +a[0] % 360 / 360;\n s = +a[1] / 100;\n l = +a[2] / 100;\n g = l <= .5 ? l * (s + 1) : l + s - l * s;\n r = l * 2 - g;\n a.length > 3 && (a[3] *= 1); //cast as number\n\n a[0] = _hue(h + 1 / 3, r, g);\n a[1] = _hue(h, r, g);\n a[2] = _hue(h - 1 / 3, r, g);\n } else if (~v.indexOf(\"=\")) {\n //if relative values are found, just return the raw strings with the relative prefixes in place.\n a = v.match(_numExp);\n forceAlpha && a.length < 4 && (a[3] = 1);\n return a;\n }\n } else {\n a = v.match(_strictNumExp) || _colorLookup.transparent;\n }\n\n a = a.map(Number);\n }\n\n if (toHSL && !wasHSL) {\n r = a[0] / _255;\n g = a[1] / _255;\n b = a[2] / _255;\n max = Math.max(r, g, b);\n min = Math.min(r, g, b);\n l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0;\n } else {\n d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;\n h *= 60;\n }\n\n a[0] = ~~(h + .5);\n a[1] = ~~(s * 100 + .5);\n a[2] = ~~(l * 100 + .5);\n }\n\n forceAlpha && a.length < 4 && (a[3] = 1);\n return a;\n},\n _colorOrderData = function _colorOrderData(v) {\n // strips out the colors from the string, finds all the numeric slots (with units) and returns an array of those. The Array also has a \"c\" property which is an Array of the index values where the colors belong. This is to help work around issues where there's a mis-matched order of color/numeric data like drop-shadow(#f00 0px 1px 2px) and drop-shadow(0x 1px 2px #f00). This is basically a helper function used in _formatColors()\n var values = [],\n c = [],\n i = -1;\n v.split(_colorExp).forEach(function (v) {\n var a = v.match(_numWithUnitExp) || [];\n values.push.apply(values, a);\n c.push(i += a.length + 1);\n });\n values.c = c;\n return values;\n},\n _formatColors = function _formatColors(s, toHSL, orderMatchData) {\n var result = \"\",\n colors = (s + result).match(_colorExp),\n type = toHSL ? \"hsla(\" : \"rgba(\",\n i = 0,\n c,\n shell,\n d,\n l;\n\n if (!colors) {\n return s;\n }\n\n colors = colors.map(function (color) {\n return (color = splitColor(color, toHSL, 1)) && type + (toHSL ? color[0] + \",\" + color[1] + \"%,\" + color[2] + \"%,\" + color[3] : color.join(\",\")) + \")\";\n });\n\n if (orderMatchData) {\n d = _colorOrderData(s);\n c = orderMatchData.c;\n\n if (c.join(result) !== d.c.join(result)) {\n shell = s.replace(_colorExp, \"1\").split(_numWithUnitExp);\n l = shell.length - 1;\n\n for (; i < l; i++) {\n result += shell[i] + (~c.indexOf(i) ? colors.shift() || type + \"0,0,0,0)\" : (d.length ? d : colors.length ? colors : orderMatchData).shift());\n }\n }\n }\n\n if (!shell) {\n shell = s.split(_colorExp);\n l = shell.length - 1;\n\n for (; i < l; i++) {\n result += shell[i] + colors[i];\n }\n }\n\n return result + shell[l];\n},\n _colorExp = function () {\n var s = \"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\$.+?\\\$)|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\",\n //we'll dynamically build this Regular Expression to conserve file size. After building it, it will be able to find rgb(), rgba(), # (hexadecimal), and named color values like red, blue, purple, etc.,\n p;\n\n for (p in _colorLookup) {\n s += \"|\" + p + \"\\\\b\";\n }\n\n return new RegExp(s + \")\", \"gi\");\n}(),\n _hslExp = /hsl[a]?\\(/,\n _colorStringFilter = function _colorStringFilter(a) {\n var combined = a.join(\" \"),\n toHSL;\n _colorExp.lastIndex = 0;\n\n if (_colorExp.test(combined)) {\n toHSL = _hslExp.test(combined);\n a[1] = _formatColors(a[1], toHSL);\n a[0] = _formatColors(a[0], toHSL, _colorOrderData(a[1])); // make sure the order of numbers/colors match with the END value.\n\n return true;\n }\n},\n\n/*\n * --------------------------------------------------------------------------------------\n * TICKER\n * --------------------------------------------------------------------------------------\n */\n_tickerActive,\n _ticker = function () {\n var _getTime = Date.now,\n _lagThreshold = 500,\n _adjustedLag = 33,\n _startTime = _getTime(),\n _lastUpdate = _startTime,\n _gap = 1000 / 240,\n _nextTime = _gap,\n _listeners = [],\n _id,\n _req,\n _raf,\n _self,\n _delta,\n _i,\n _tick = function _tick(v) {\n var elapsed = _getTime() - _lastUpdate,\n manual = v === true,\n overlap,\n dispatch,\n time,\n frame;\n\n (elapsed > _lagThreshold || elapsed < 0) && (_startTime += elapsed - _adjustedLag);\n _lastUpdate += elapsed;\n time = _lastUpdate - _startTime;\n overlap = time - _nextTime;\n\n if (overlap > 0 || manual) {\n frame = ++_self.frame;\n _delta = time - _self.time * 1000;\n _self.time = time = time / 1000;\n _nextTime += overlap + (overlap >= _gap ? 4 : _gap - overlap);\n dispatch = 1;\n }\n\n manual || (_id = _req(_tick)); //make sure the request is made before we dispatch the \"tick\" event so that timing is maintained. Otherwise, if processing the \"tick\" requires a bunch of time (like 15ms) and we're using a setTimeout() that's based on 16.7ms, it'd technically take 31.7ms between frames otherwise.\n\n if (dispatch) {\n for (_i = 0; _i < _listeners.length; _i++) {\n // use _i and check _listeners.length instead of a variable because a listener could get removed during the loop, and if that happens to an element less than the current index, it'd throw things off in the loop.\n _listeners[_i](time, _delta, frame, v);\n }\n }\n };\n\n _self = {\n time: 0,\n frame: 0,\n tick: function tick() {\n _tick(true);\n },\n deltaRatio: function deltaRatio(fps) {\n return _delta / (1000 / (fps || 60));\n },\n wake: function wake() {\n if (_coreReady) {\n if (!_coreInitted && _windowExists()) {\n _win = _coreInitted = window;\n _doc = _win.document || {};\n _globals.gsap = gsap;\n (_win.gsapVersions || (_win.gsapVersions = [])).push(gsap.version);\n\n _install(_installScope || _win.GreenSockGlobals || !_win.gsap && _win || {});\n\n _registerPluginQueue.forEach(_createPlugin);\n }\n\n _raf = typeof requestAnimationFrame !== \"undefined\" && requestAnimationFrame;\n _id && _self.sleep();\n\n _req = _raf || function (f) {\n return setTimeout(f, _nextTime - _self.time * 1000 + 1 | 0);\n };\n\n _tickerActive = 1;\n\n _tick(2);\n }\n },\n sleep: function sleep() {\n (_raf ? cancelAnimationFrame : clearTimeout)(_id);\n _tickerActive = 0;\n _req = _emptyFunc;\n },\n lagSmoothing: function lagSmoothing(threshold, adjustedLag) {\n _lagThreshold = threshold || Infinity; // zero should be interpreted as basically unlimited\n\n _adjustedLag = Math.min(adjustedLag || 33, _lagThreshold);\n },\n fps: function fps(_fps) {\n _gap = 1000 / (_fps || 240);\n _nextTime = _self.time * 1000 + _gap;\n },\n add: function add(callback, once, prioritize) {\n var func = once ? function (t, d, f, v) {\n callback(t, d, f, v);\n\n _self.remove(func);\n } : callback;\n\n _self.remove(callback);\n\n _listeners[prioritize ? \"unshift\" : \"push\"](func);\n\n _wake();\n\n return func;\n },\n remove: function remove(callback, i) {\n ~(i = _listeners.indexOf(callback)) && _listeners.splice(i, 1) && _i >= i && _i--;\n },\n _listeners: _listeners\n };\n return _self;\n}(),\n _wake = function _wake() {\n return !_tickerActive && _ticker.wake();\n},\n //also ensures the core classes are initialized.\n\n/*\n* -------------------------------------------------\n* EASING\n* -------------------------------------------------\n*/\n_easeMap = {},\n _customEaseExp = /^[\\d.\\-M][\\d.\\-,\\s]/,\n _quotesExp = /[\"']/g,\n _parseObjectInString = function _parseObjectInString(value) {\n //takes a string like \"{wiggles:10, type:anticipate})\" and turns it into a real object. Notice it ends in \")\" and includes the {} wrappers. This is because we only use this function for parsing ease configs and prioritized optimization rather than reusability.\n var obj = {},\n split = value.substr(1, value.length - 3).split(\":\"),\n key = split[0],\n i = 1,\n l = split.length,\n index,\n val,\n parsedVal;\n\n for (; i < l; i++) {\n val = split[i];\n index = i !== l - 1 ? val.lastIndexOf(\",\") : val.length;\n parsedVal = val.substr(0, index);\n obj[key] = isNaN(parsedVal) ? parsedVal.replace(_quotesExp, \"\").trim() : +parsedVal;\n key = val.substr(index + 1).trim();\n }\n\n return obj;\n},\n _valueInParentheses = function _valueInParentheses(value) {\n var open = value.indexOf(\"(\") + 1,\n close = value.indexOf(\")\"),\n nested = value.indexOf(\"(\", open);\n return value.substring(open, ~nested && nested < close ? value.indexOf(\")\", close + 1) : close);\n},\n _configEaseFromString = function _configEaseFromString(name) {\n //name can be a string like \"elastic.out(1,0.5)\", and pass in _easeMap as obj and it'll parse it out and call the actual function like _easeMap.Elastic.easeOut.config(1,0.5). It will also parse custom ease strings as long as CustomEase is loaded and registered (internally as _easeMap._CE).\n var split = (name + \"\").split(\"(\"),\n ease = _easeMap[split[0]];\n return ease && split.length > 1 && ease.config ? ease.config.apply(null, ~name.indexOf(\"{\") ? [_parseObjectInString(split[1])] : _valueInParentheses(name).split(\",\").map(_numericIfPossible)) : _easeMap._CE && _customEaseExp.test(name) ? _easeMap._CE(\"\", name) : ease;\n},\n _invertEase = function _invertEase(ease) {\n return function (p) {\n return 1 - ease(1 - p);\n };\n},\n // allow yoyoEase to be set in children and have those affected when the parent/ancestor timeline yoyos.\n_propagateYoyoEase = function _propagateYoyoEase(timeline, isYoyo) {\n var child = timeline._first,\n ease;\n\n while (child) {\n if (child instanceof Timeline) {\n _propagateYoyoEase(child, isYoyo);\n } else if (child.vars.yoyoEase && (!child._yoyo || !child._repeat) && child._yoyo !== isYoyo) {\n if (child.timeline) {\n _propagateYoyoEase(child.timeline, isYoyo);\n } else {\n ease = child._ease;\n child._ease = child._yEase;\n child._yEase = ease;\n child._yoyo = isYoyo;\n }\n }\n\n child = child._next;\n }\n},\n _parseEase = function _parseEase(ease, defaultEase) {\n return !ease ? defaultEase : (_isFunction(ease) ? ease : _easeMap[ease] || _configEaseFromString(ease)) || defaultEase;\n},\n _insertEase = function _insertEase(names, easeIn, easeOut, easeInOut) {\n if (easeOut === void 0) {\n easeOut = function easeOut(p) {\n return 1 - easeIn(1 - p);\n };\n }\n\n if (easeInOut === void 0) {\n easeInOut = function easeInOut(p) {\n return p < .5 ? easeIn(p * 2) / 2 : 1 - easeIn((1 - p) * 2) / 2;\n };\n }\n\n var ease = {\n easeIn: easeIn,\n easeOut: easeOut,\n easeInOut: easeInOut\n },\n lowercaseName;\n\n _forEachName(names, function (name) {\n _easeMap[name] = _globals[name] = ease;\n _easeMap[lowercaseName = name.toLowerCase()] = easeOut;\n\n for (var p in ease) {\n _easeMap[lowercaseName + (p === \"easeIn\" ? \".in\" : p === \"easeOut\" ? \".out\" : \".inOut\")] = _easeMap[name + \".\" + p] = ease[p];\n }\n });\n\n return ease;\n},\n _easeInOutFromOut = function _easeInOutFromOut(easeOut) {\n return function (p) {\n return p < .5 ? (1 - easeOut(1 - p * 2)) / 2 : .5 + easeOut((p - .5) * 2) / 2;\n };\n},\n _configElastic = function _configElastic(type, amplitude, period) {\n var p1 = amplitude >= 1 ? amplitude : 1,\n //note: if amplitude is < 1, we simply adjust the period for a more natural feel. Otherwise the math doesn't work right and the curve starts at 1.\n p2 = (period || (type ? .3 : .45)) / (amplitude < 1 ? amplitude : 1),\n p3 = p2 / _2PI * (Math.asin(1 / p1) || 0),\n easeOut = function easeOut(p) {\n return p === 1 ? 1 : p1 * Math.pow(2, -10 * p) * _sin((p - p3) * p2) + 1;\n },\n ease = type === \"out\" ? easeOut : type === \"in\" ? function (p) {\n return 1 - easeOut(1 - p);\n } : _easeInOutFromOut(easeOut);\n\n p2 = _2PI / p2; //precalculate to optimize\n\n ease.config = function (amplitude, period) {\n return _configElastic(type, amplitude, period);\n };\n\n return ease;\n},\n _configBack = function _configBack(type, overshoot) {\n if (overshoot === void 0) {\n overshoot = 1.70158;\n }\n\n var easeOut = function easeOut(p) {\n return p ? --p * p * ((overshoot + 1) * p + overshoot) + 1 : 0;\n },\n ease = type === \"out\" ? easeOut : type === \"in\" ? function (p) {\n return 1 - easeOut(1 - p);\n } : _easeInOutFromOut(easeOut);\n\n ease.config = function (overshoot) {\n return _configBack(type, overshoot);\n };\n\n return ease;\n}; // a cheaper (kb and cpu) but more mild way to get a parameterized weighted ease by feeding in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.\n// _weightedEase = ratio => {\n// \tlet y = 0.5 + ratio / 2;\n// \treturn p => (2 * (1 - p) * p * y + p * p);\n// },\n// a stronger (but more expensive kb/cpu) parameterized weighted ease that lets you feed in a value between -1 (easeIn) and 1 (easeOut) where 0 is linear.\n// _weightedEaseStrong = ratio => {\n// \tratio = .5 + ratio / 2;\n// \tlet o = 1 / 3 * (ratio < .5 ? ratio : 1 - ratio),\n// \t\tb = ratio - o,\n// \t\tc = ratio + o;\n// \treturn p => p === 1 ? p : 3 * b * (1 - p) * (1 - p) * p + 3 * c * (1 - p) * p * p + p * p * p;\n// };\n\n\n_forEachName(\"Linear,Quad,Cubic,Quart,Quint,Strong\", function (name, i) {\n var power = i < 5 ? i + 1 : i;\n\n _insertEase(name + \",Power\" + (power - 1), i ? function (p) {\n return Math.pow(p, power);\n } : function (p) {\n return p;\n }, function (p) {\n return 1 - Math.pow(1 - p, power);\n }, function (p) {\n return p < .5 ? Math.pow(p * 2, power) / 2 : 1 - Math.pow((1 - p) * 2, power) / 2;\n });\n});\n\n_easeMap.Linear.easeNone = _easeMap.none = _easeMap.Linear.easeIn;\n\n_insertEase(\"Elastic\", _configElastic(\"in\"), _configElastic(\"out\"), _configElastic());\n\n(function (n, c) {\n var n1 = 1 / c,\n n2 = 2 * n1,\n n3 = 2.5 * n1,\n easeOut = function easeOut(p) {\n return p < n1 ? n * p * p : p < n2 ? n * Math.pow(p - 1.5 / c, 2) + .75 : p < n3 ? n * (p -= 2.25 / c) * p + .9375 : n * Math.pow(p - 2.625 / c, 2) + .984375;\n };\n\n _insertEase(\"Bounce\", function (p) {\n return 1 - easeOut(1 - p);\n }, easeOut);\n})(7.5625, 2.75);\n\n_insertEase(\"Expo\", function (p) {\n return Math.pow(2, 10 * (p - 1)) * p + p * p * p * p * p * p * (1 - p);\n}); // previously 2 ** (10 * (p - 1)) but that doesn't end up with the value quite at the right spot so we do a blended ease to ensure it lands where it should perfectly.\n\n\n_insertEase(\"Circ\", function (p) {\n return -(_sqrt(1 - p * p) - 1);\n});\n\n_insertEase(\"Sine\", function (p) {\n return p === 1 ? 1 : -_cos(p * _HALF_PI) + 1;\n});\n\n_insertEase(\"Back\", _configBack(\"in\"), _configBack(\"out\"), _configBack());\n\n_easeMap.SteppedEase = _easeMap.steps = _globals.SteppedEase = {\n config: function config(steps, immediateStart) {\n if (steps === void 0) {\n steps = 1;\n }\n\n var p1 = 1 / steps,\n p2 = steps + (immediateStart ? 0 : 1),\n p3 = immediateStart ? 1 : 0,\n max = 1 - _tinyNum;\n return function (p) {\n return ((p2 * _clamp(0, max, p) | 0) + p3) * p1;\n };\n }\n};\n_defaults.ease = _easeMap[\"quad.out\"];\n\n_forEachName(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\", function (name) {\n return _callbackNames += name + \",\" + name + \"Params,\";\n});\n/*\n * --------------------------------------------------------------------------------------\n * CACHE\n * --------------------------------------------------------------------------------------\n */\n\n\nexport var GSCache = function GSCache(target, harness) {\n this.id = _gsID++;\n target._gsap = this;\n this.target = target;\n this.harness = harness;\n this.get = harness ? harness.get : _getProperty;\n this.set = harness ? harness.getSetter : _getSetter;\n};\n/*\n * --------------------------------------------------------------------------------------\n * ANIMATION\n * --------------------------------------------------------------------------------------\n */\n\nexport var Animation = /*#__PURE__*/function () {\n function Animation(vars) {\n this.vars = vars;\n this._delay = +vars.delay || 0;\n\n if (this._repeat = vars.repeat === Infinity ? -2 : vars.repeat || 0) {\n // TODO: repeat: Infinity on a timeline's children must flag that timeline internally and affect its totalDuration, otherwise it'll stop in the negative direction when reaching the start.\n this._rDelay = vars.repeatDelay || 0;\n this._yoyo = !!vars.yoyo || !!vars.yoyoEase;\n }\n\n this._ts = 1;\n\n _setDuration(this, +vars.duration, 1, 1);\n\n this.data = vars.data;\n\n if (_context) {\n this._ctx = _context;\n\n _context.data.push(this);\n }\n\n _tickerActive || _ticker.wake();\n }\n\n var _proto = Animation.prototype;\n\n _proto.delay = function delay(value) {\n if (value || value === 0) {\n this.parent && this.parent.smoothChildTiming && this.startTime(this._start + value - this._delay);\n this._delay = value;\n return this;\n }\n\n return this._delay;\n };\n\n _proto.duration = function duration(value) {\n return arguments.length ? this.totalDuration(this._repeat > 0 ? value + (value + this._rDelay) * this._repeat : value) : this.totalDuration() && this._dur;\n };\n\n _proto.totalDuration = function totalDuration(value) {\n if (!arguments.length) {\n return this._tDur;\n }\n\n this._dirty = 0;\n return _setDuration(this, this._repeat < 0 ? value : (value - this._repeat * this._rDelay) / (this._repeat + 1));\n };\n\n _proto.totalTime = function totalTime(_totalTime, suppressEvents) {\n _wake();\n\n if (!arguments.length) {\n return this._tTime;\n }\n\n var parent = this._dp;\n\n if (parent && parent.smoothChildTiming && this._ts) {\n _alignPlayhead(this, _totalTime);\n\n !parent._dp || parent.parent || _postAddChecks(parent, this); // edge case: if this is a child of a timeline that already completed, for example, we must re-activate the parent.\n //in case any of the ancestor timelines had completed but should now be enabled, we should reset their totalTime() which will also ensure that they're lined up properly and enabled. Skip for animations that are on the root (wasteful). Example: a TimelineLite.exportRoot() is performed when there's a paused tween on the root, the export will not complete until that tween is unpaused, but imagine a child gets restarted later, after all [unpaused] tweens have completed. The start of that child would get pushed out, but one of the ancestors may have completed.\n\n while (parent && parent.parent) {\n if (parent.parent._time !== parent._start + (parent._ts >= 0 ? parent._tTime / parent._ts : (parent.totalDuration() - parent._tTime) / -parent._ts)) {\n parent.totalTime(parent._tTime, true);\n }\n\n parent = parent.parent;\n }\n\n if (!this.parent && this._dp.autoRemoveChildren && (this._ts > 0 && _totalTime < this._tDur || this._ts < 0 && _totalTime > 0 || !this._tDur && !_totalTime)) {\n //if the animation doesn't have a parent, put it back into its last parent (recorded as _dp for exactly cases like this). Limit to parents with autoRemoveChildren (like globalTimeline) so that if the user manually removes an animation from a timeline and then alters its playhead, it doesn't get added back in.\n _addToTimeline(this._dp, this, this._start - this._delay);\n }\n }\n\n if (this._tTime !== _totalTime || !this._dur && !suppressEvents || this._initted && Math.abs(this._zTime) === _tinyNum || !_totalTime && !this._initted && (this.add || this._ptLookup)) {\n // check for _ptLookup on a Tween instance to ensure it has actually finished being instantiated, otherwise if this.reverse() gets called in the Animation constructor, it could trigger a render() here even though the _targets weren't populated, thus when _init() is called there won't be any PropTweens (it'll act like the tween is non-functional)\n this._ts || (this._pTime = _totalTime); // otherwise, if an animation is paused, then the playhead is moved back to zero, then resumed, it'd revert back to the original time at the pause\n //if (!this._lock) { // avoid endless recursion (not sure we need this yet or if it's worth the performance hit)\n // this._lock = 1;\n\n _lazySafeRender(this, _totalTime, suppressEvents); // this._lock = 0;\n //}\n\n }\n\n return this;\n };\n\n _proto.time = function time(value, suppressEvents) {\n return arguments.length ? this.totalTime(Math.min(this.totalDuration(), value + _elapsedCycleDuration(this)) % (this._dur + this._rDelay) || (value ? this._dur : 0), suppressEvents) : this._time; // note: if the modulus results in 0, the playhead could be exactly at the end or the beginning, and we always defer to the END with a non-zero value, otherwise if you set the time() to the very end (duration()), it would render at the START!\n };\n\n _proto.totalProgress = function totalProgress(value, suppressEvents) {\n return arguments.length ? this.totalTime(this.totalDuration() * value, suppressEvents) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : this.rawTime() >= 0 && this._initted ? 1 : 0;\n };\n\n _proto.progress = function progress(value, suppressEvents) {\n return arguments.length ? this.totalTime(this.duration() * (this._yoyo && !(this.iteration() & 1) ? 1 - value : value) + _elapsedCycleDuration(this), suppressEvents) : this.duration() ? Math.min(1, this._time / this._dur) : this.rawTime() > 0 ? 1 : 0;\n };\n\n _proto.iteration = function iteration(value, suppressEvents) {\n var cycleDuration = this.duration() + this._rDelay;\n\n return arguments.length ? this.totalTime(this._time + (value - 1) * cycleDuration, suppressEvents) : this._repeat ? _animationCycle(this._tTime, cycleDuration) + 1 : 1;\n } // potential future addition:\n // isPlayingBackwards() {\n // \tlet animation = this,\n // \t\torientation = 1; // 1 = forward, -1 = backward\n // \twhile (animation) {\n // \t\torientation *= animation.reversed() || (animation.repeat() && !(animation.iteration() & 1)) ? -1 : 1;\n // \t\tanimation = animation.parent;\n // \t}\n // \treturn orientation < 0;\n // }\n ;\n\n _proto.timeScale = function timeScale(value, suppressEvents) {\n if (!arguments.length) {\n return this._rts === -_tinyNum ? 0 : this._rts; // recorded timeScale. Special case: if someone calls reverse() on an animation with timeScale of 0, we assign it -_tinyNum to remember it's reversed.\n }\n\n if (this._rts === value) {\n return this;\n }\n\n var tTime = this.parent && this._ts ? _parentToChildTotalTime(this.parent._time, this) : this._tTime; // make sure to do the parentToChildTotalTime() BEFORE setting the new _ts because the old one must be used in that calculation.\n // future addition? Up side: fast and minimal file size. Down side: only works on this animation; if a timeline is reversed, for example, its childrens' onReverse wouldn't get called.\n //(+value < 0 && this._rts >= 0) && _callback(this, \"onReverse\", true);\n // prioritize rendering where the parent's playhead lines up instead of this._tTime because there could be a tween that's animating another tween's timeScale in the same rendering loop (same parent), thus if the timeScale tween renders first, it would alter _start BEFORE _tTime was set on that tick (in the rendering loop), effectively freezing it until the timeScale tween finishes.\n\n this._rts = +value || 0;\n this._ts = this._ps || value === -_tinyNum ? 0 : this._rts; // _ts is the functional timeScale which would be 0 if the animation is paused.\n\n this.totalTime(_clamp(-Math.abs(this._delay), this._tDur, tTime), suppressEvents !== false);\n\n _setEnd(this); // if parent.smoothChildTiming was false, the end time didn't get updated in the _alignPlayhead() method, so do it here.\n\n\n return _recacheAncestors(this);\n };\n\n _proto.paused = function paused(value) {\n if (!arguments.length) {\n return this._ps;\n } // possible future addition - if an animation is removed from its parent and then .restart() or .play() or .resume() is called, perhaps we should force it back into the globalTimeline but be careful because what if it's already at its end? We don't want it to just persist forever and not get released for GC.\n // !this.parent && !value && this._tTime < this._tDur && this !== _globalTimeline && _globalTimeline.add(this);\n\n\n if (this._ps !== value) {\n this._ps = value;\n\n if (value) {\n this._pTime = this._tTime || Math.max(-this._delay, this.rawTime()); // if the pause occurs during the delay phase, make sure that's factored in when resuming.\n\n this._ts = this._act = 0; // _ts is the functional timeScale, so a paused tween would effectively have a timeScale of 0. We record the \"real\" timeScale as _rts (recorded time scale)\n } else {\n _wake();\n\n this._ts = this._rts; //only defer to _pTime (pauseTime) if tTime is zero. Remember, someone could pause() an animation, then scrub the playhead and resume(). If the parent doesn't have smoothChildTiming, we render at the rawTime() because the startTime won't get updated.\n\n this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, this.progress() === 1 && Math.abs(this._zTime) !== _tinyNum && (this._tTime -= _tinyNum)); // edge case: animation.progress(1).pause().play() wouldn't render again because the playhead is already at the end, but the call to totalTime() below will add it back to its parent...and not remove it again (since removing only happens upon rendering at a new time). Offsetting the _tTime slightly is done simply to cause the final render in totalTime() that'll pop it off its timeline (if autoRemoveChildren is true, of course). Check to make sure _zTime isn't -_tinyNum to avoid an edge case where the playhead is pushed to the end but INSIDE a tween/callback, the timeline itself is paused thus halting rendering and leaving a few unrendered. When resuming, it wouldn't render those otherwise.\n }\n }\n\n return this;\n };\n\n _proto.startTime = function startTime(value) {\n if (arguments.length) {\n this._start = value;\n var parent = this.parent || this._dp;\n parent && (parent._sort || !this.parent) && _addToTimeline(parent, this, value - this._delay);\n return this;\n }\n\n return this._start;\n };\n\n _proto.endTime = function endTime(includeRepeats) {\n return this._start + (_isNotFalse(includeRepeats) ? this.totalDuration() : this.duration()) / Math.abs(this._ts || 1);\n };\n\n _proto.rawTime = function rawTime(wrapRepeats) {\n var parent = this.parent || this._dp; // _dp = detached parent\n\n return !parent ? this._tTime : wrapRepeats && (!this._ts || this._repeat && this._time && this.totalProgress() < 1) ? this._tTime % (this._dur + this._rDelay) : !this._ts ? this._tTime : _parentToChildTotalTime(parent.rawTime(wrapRepeats), this);\n };\n\n _proto.revert = function revert(config) {\n if (config === void 0) {\n config = _revertConfig;\n }\n\n var prevIsReverting = _reverting;\n _reverting = config;\n\n if (this._initted || this._startAt) {\n this.timeline && this.timeline.revert(config);\n this.totalTime(-0.01, config.suppressEvents);\n }\n\n this.data !== \"nested\" && config.kill !== false && this.kill();\n _reverting = prevIsReverting;\n return this;\n };\n\n _proto.globalTime = function globalTime(rawTime) {\n var animation = this,\n time = arguments.length ? rawTime : animation.rawTime();\n\n while (animation) {\n time = animation._start + time / (Math.abs(animation._ts) || 1);\n animation = animation._dp;\n }\n\n return !this.parent && this._sat ? this._sat.globalTime(rawTime) : time; // the _startAt tweens for .fromTo() and .from() that have immediateRender should always be FIRST in the timeline (important for context.revert()). \"_sat\" stands for _startAtTween, referring to the parent tween that created the _startAt. We must discern if that tween had immediateRender so that we can know whether or not to prioritize it in revert().\n };\n\n _proto.repeat = function repeat(value) {\n if (arguments.length) {\n this._repeat = value === Infinity ? -2 : value;\n return _onUpdateTotalDuration(this);\n }\n\n return this._repeat === -2 ? Infinity : this._repeat;\n };\n\n _proto.repeatDelay = function repeatDelay(value) {\n if (arguments.length) {\n var time = this._time;\n this._rDelay = value;\n\n _onUpdateTotalDuration(this);\n\n return time ? this.time(time) : this;\n }\n\n return this._rDelay;\n };\n\n _proto.yoyo = function yoyo(value) {\n if (arguments.length) {\n this._yoyo = value;\n return this;\n }\n\n return this._yoyo;\n };\n\n _proto.seek = function seek(position, suppressEvents) {\n return this.totalTime(_parsePosition(this, position), _isNotFalse(suppressEvents));\n };\n\n _proto.restart = function restart(includeDelay, suppressEvents) {\n this.play().totalTime(includeDelay ? -this._delay : 0, _isNotFalse(suppressEvents));\n this._dur || (this._zTime = -_tinyNum); // ensures onComplete fires on a zero-duration animation that gets restarted.\n\n return this;\n };\n\n _proto.play = function play(from, suppressEvents) {\n from != null && this.seek(from, suppressEvents);\n return this.reversed(false).paused(false);\n };\n\n _proto.reverse = function reverse(from, suppressEvents) {\n from != null && this.seek(from || this.totalDuration(), suppressEvents);\n return this.reversed(true).paused(false);\n };\n\n _proto.pause = function pause(atTime, suppressEvents) {\n atTime != null && this.seek(atTime, suppressEvents);\n return this.paused(true);\n };\n\n _proto.resume = function resume() {\n return this.paused(false);\n };\n\n _proto.reversed = function reversed(value) {\n if (arguments.length) {\n !!value !== this.reversed() && this.timeScale(-this._rts || (value ? -_tinyNum : 0)); // in case timeScale is zero, reversing would have no effect so we use _tinyNum.\n\n return this;\n }\n\n return this._rts < 0;\n };\n\n _proto.invalidate = function invalidate() {\n this._initted = this._act = 0;\n this._zTime = -_tinyNum;\n return this;\n };\n\n _proto.isActive = function isActive() {\n var parent = this.parent || this._dp,\n start = this._start,\n rawTime;\n return !!(!parent || this._ts && this._initted && parent.isActive() && (rawTime = parent.rawTime(true)) >= start && rawTime < this.endTime(true) - _tinyNum);\n };\n\n _proto.eventCallback = function eventCallback(type, callback, params) {\n var vars = this.vars;\n\n if (arguments.length > 1) {\n if (!callback) {\n delete vars[type];\n } else {\n vars[type] = callback;\n params && (vars[type + \"Params\"] = params);\n type === \"onUpdate\" && (this._onUpdate = callback);\n }\n\n return this;\n }\n\n return vars[type];\n };\n\n _proto.then = function then(onFulfilled) {\n var self = this;\n return new Promise(function (resolve) {\n var f = _isFunction(onFulfilled) ? onFulfilled : _passThrough,\n _resolve = function _resolve() {\n var _then = self.then;\n self.then = null; // temporarily null the then() method to avoid an infinite loop (see https://github.com/greensock/GSAP/issues/322)\n\n _isFunction(f) && (f = f(self)) && (f.then || f === self) && (self.then = _then);\n resolve(f);\n self.then = _then;\n };\n\n if (self._initted && self.totalProgress() === 1 && self._ts >= 0 || !self._tTime && self._ts < 0) {\n _resolve();\n } else {\n self._prom = _resolve;\n }\n });\n };\n\n _proto.kill = function kill() {\n _interrupt(this);\n };\n\n return Animation;\n}();\n\n_setDefaults(Animation.prototype, {\n _time: 0,\n _start: 0,\n _end: 0,\n _tTime: 0,\n _tDur: 0,\n _dirty: 0,\n _repeat: 0,\n _yoyo: false,\n parent: null,\n _initted: false,\n _rDelay: 0,\n _ts: 1,\n _dp: 0,\n ratio: 0,\n _zTime: -_tinyNum,\n _prom: 0,\n _ps: false,\n _rts: 1\n});\n/*\n * -------------------------------------------------\n * TIMELINE\n * -------------------------------------------------\n */\n\n\nexport var Timeline = /*#__PURE__*/function (_Animation) {\n _inheritsLoose(Timeline, _Animation);\n\n function Timeline(vars, position) {\n var _this;\n\n if (vars === void 0) {\n vars = {};\n }\n\n _this = _Animation.call(this, vars) || this;\n _this.labels = {};\n _this.smoothChildTiming = !!vars.smoothChildTiming;\n _this.autoRemoveChildren = !!vars.autoRemoveChildren;\n _this._sort = _isNotFalse(vars.sortChildren);\n _globalTimeline && _addToTimeline(vars.parent || _globalTimeline, _assertThisInitialized(_this), position);\n vars.reversed && _this.reverse();\n vars.paused && _this.paused(true);\n vars.scrollTrigger && _scrollTrigger(_assertThisInitialized(_this), vars.scrollTrigger);\n return _this;\n }\n\n var _proto2 = Timeline.prototype;\n\n _proto2.to = function to(targets, vars, position) {\n _createTweenType(0, arguments, this);\n\n return this;\n };\n\n _proto2.from = function from(targets, vars, position) {\n _createTweenType(1, arguments, this);\n\n return this;\n };\n\n _proto2.fromTo = function fromTo(targets, fromVars, toVars, position) {\n _createTweenType(2, arguments, this);\n\n return this;\n };\n\n _proto2.set = function set(targets, vars, position) {\n vars.duration = 0;\n vars.parent = this;\n _inheritDefaults(vars).repeatDelay || (vars.repeat = 0);\n vars.immediateRender = !!vars.immediateRender;\n new Tween(targets, vars, _parsePosition(this, position), 1);\n return this;\n };\n\n _proto2.call = function call(callback, params, position) {\n return _addToTimeline(this, Tween.delayedCall(0, callback, params), position);\n } //ONLY for backward compatibility! Maybe delete?\n ;\n\n _proto2.staggerTo = function staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {\n vars.duration = duration;\n vars.stagger = vars.stagger || stagger;\n vars.onComplete = onCompleteAll;\n vars.onCompleteParams = onCompleteAllParams;\n vars.parent = this;\n new Tween(targets, vars, _parsePosition(this, position));\n return this;\n };\n\n _proto2.staggerFrom = function staggerFrom(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams) {\n vars.runBackwards = 1;\n _inheritDefaults(vars).immediateRender = _isNotFalse(vars.immediateRender);\n return this.staggerTo(targets, duration, vars, stagger, position, onCompleteAll, onCompleteAllParams);\n };\n\n _proto2.staggerFromTo = function staggerFromTo(targets, duration, fromVars, toVars, stagger, position, onCompleteAll, onCompleteAllParams) {\n toVars.startAt = fromVars;\n _inheritDefaults(toVars).immediateRender = _isNotFalse(toVars.immediateRender);\n return this.staggerTo(targets, duration, toVars, stagger, position, onCompleteAll, onCompleteAllParams);\n };\n\n _proto2.render = function render(totalTime, suppressEvents, force) {\n var prevTime = this._time,\n tDur = this._dirty ? this.totalDuration() : this._tDur,\n dur = this._dur,\n tTime = totalTime <= 0 ? 0 : _roundPrecise(totalTime),\n // if a paused timeline is resumed (or its _start is updated for another reason...which rounds it), that could result in the playhead shifting a **tiny** amount and a zero-duration child at that spot may get rendered at a different ratio, like its totalTime in render() may be 1e-17 instead of 0, for example.\n crossingStart = this._zTime < 0 !== totalTime < 0 && (this._initted || !dur),\n time,\n child,\n next,\n iteration,\n cycleDuration,\n prevPaused,\n pauseTween,\n timeScale,\n prevStart,\n prevIteration,\n yoyo,\n isYoyo;\n this !== _globalTimeline && tTime > tDur && totalTime >= 0 && (tTime = tDur);\n\n if (tTime !== this._tTime || force || crossingStart) {\n if (prevTime !== this._time && dur) {\n //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).\n tTime += this._time - prevTime;\n totalTime += this._time - prevTime;\n }\n\n time = tTime;\n prevStart = this._start;\n timeScale = this._ts;\n prevPaused = !timeScale;\n\n if (crossingStart) {\n dur || (prevTime = this._zTime); //when the playhead arrives at EXACTLY time 0 (right on top) of a zero-duration timeline, we need to discern if events are suppressed so that when the playhead moves again (next time), it'll trigger the callback. If events are NOT suppressed, obviously the callback would be triggered in this render. Basically, the callback should fire either when the playhead ARRIVES or LEAVES this exact spot, not both. Imagine doing a timeline.seek(0) and there's a callback that sits at 0. Since events are suppressed on that seek() by default, nothing will fire, but when the playhead moves off of that position, the callback should fire. This behavior is what people intuitively expect.\n\n (totalTime || !suppressEvents) && (this._zTime = totalTime);\n }\n\n if (this._repeat) {\n //adjust the time for repeats and yoyos\n yoyo = this._yoyo;\n cycleDuration = dur + this._rDelay;\n\n if (this._repeat < -1 && totalTime < 0) {\n return this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);\n }\n\n time = _roundPrecise(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)\n\n if (tTime === tDur) {\n // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)\n iteration = this._repeat;\n time = dur;\n } else {\n prevIteration = _roundPrecise(tTime / cycleDuration); // full decimal version of iterations, not the previous iteration (we're reusing prevIteration variable for efficiency)\n\n iteration = ~~prevIteration;\n\n if (iteration && iteration === prevIteration) {\n time = dur;\n iteration--;\n }\n\n time > dur && (time = dur);\n }\n\n prevIteration = _animationCycle(this._tTime, cycleDuration);\n !prevTime && this._tTime && prevIteration !== iteration && this._tTime - prevIteration * cycleDuration - this._dur <= 0 && (prevIteration = iteration); // edge case - if someone does addPause() at the very beginning of a repeating timeline, that pause is technically at the same spot as the end which causes this._time to get set to 0 when the totalTime would normally place the playhead at the end. See https://gsap.com/forums/topic/23823-closing-nav-animation-not-working-on-ie-and-iphone-6-maybe-other-older-browser/?tab=comments#comment-113005 also, this._tTime - prevIteration * cycleDuration - this._dur <= 0 just checks to make sure it wasn't previously in the \"repeatDelay\" portion\n\n if (yoyo && iteration & 1) {\n time = dur - time;\n isYoyo = 1;\n }\n /*\n make sure children at the end/beginning of the timeline are rendered properly. If, for example,\n a 3-second long timeline rendered at 2.9 seconds previously, and now renders at 3.2 seconds (which\n would get translated to 2.8 seconds if the timeline yoyos or 0.2 seconds if it just repeats), there\n could be a callback or a short tween that's at 2.95 or 3 seconds in which wouldn't render. So\n we need to push the timeline to the end (and/or beginning depending on its yoyo value). Also we must\n ensure that zero-duration tweens at the very beginning or end of the Timeline work.\n */\n\n\n if (iteration !== prevIteration && !this._lock) {\n var rewinding = yoyo && prevIteration & 1,\n doesWrap = rewinding === (yoyo && iteration & 1);\n iteration < prevIteration && (rewinding = !rewinding);\n prevTime = rewinding ? 0 : tTime % dur ? dur : tTime; // if the playhead is landing exactly at the end of an iteration, use that totalTime rather than only the duration, otherwise it'll skip the 2nd render since it's effectively at the same time.\n\n this._lock = 1;\n this.render(prevTime || (isYoyo ? 0 : _roundPrecise(iteration * cycleDuration)), suppressEvents, !dur)._lock = 0;\n this._tTime = tTime; // if a user gets the iteration() inside the onRepeat, for example, it should be accurate.\n\n !suppressEvents && this.parent && _callback(this, \"onRepeat\");\n this.vars.repeatRefresh && !isYoyo && (this.invalidate()._lock = 1);\n\n if (prevTime && prevTime !== this._time || prevPaused !== !this._ts || this.vars.onRepeat && !this.parent && !this._act) {\n // if prevTime is 0 and we render at the very end, _time will be the end, thus won't match. So in this edge case, prevTime won't match _time but that's okay. If it gets killed in the onRepeat, eject as well.\n return this;\n }\n\n dur = this._dur; // in case the duration changed in the onRepeat\n\n tDur = this._tDur;\n\n if (doesWrap) {\n this._lock = 2;\n prevTime = rewinding ? dur : -0.0001;\n this.render(prevTime, true);\n this.vars.repeatRefresh && !isYoyo && this.invalidate();\n }\n\n this._lock = 0;\n\n if (!this._ts && !prevPaused) {\n return this;\n } //in order for yoyoEase to work properly when there's a stagger, we must swap out the ease in each sub-tween.\n\n\n _propagateYoyoEase(this, isYoyo);\n }\n }\n\n if (this._hasPause && !this._forcing && this._lock < 2) {\n pauseTween = _findNextPauseTween(this, _roundPrecise(prevTime), _roundPrecise(time));\n\n if (pauseTween) {\n tTime -= time - (time = pauseTween._start);\n }\n }\n\n this._tTime = tTime;\n this._time = time;\n this._act = !timeScale; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.\n\n if (!this._initted) {\n this._onUpdate = this.vars.onUpdate;\n this._initted = 1;\n this._zTime = totalTime;\n prevTime = 0; // upon init, the playhead should always go forward; someone could invalidate() a completed timeline and then if they restart(), that would make child tweens render in reverse order which could lock in the wrong starting values if they build on each other, like tl.to(obj, {x: 100}).to(obj, {x: 0}).\n }\n\n if (!prevTime && time && !suppressEvents && !iteration) {\n _callback(this, \"onStart\");\n\n if (this._tTime !== tTime) {\n // in case the onStart triggered a render at a different spot, eject. Like if someone did animation.pause(0.5) or something inside the onStart.\n return this;\n }\n }\n\n if (time >= prevTime && totalTime >= 0) {\n child = this._first;\n\n while (child) {\n next = child._next;\n\n if ((child._act || time >= child._start) && child._ts && pauseTween !== child) {\n if (child.parent !== this) {\n // an extreme edge case - the child's render could do something like kill() the \"next\" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.\n return this.render(totalTime, suppressEvents, force);\n }\n\n child.render(child._ts > 0 ? (time - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (time - child._start) * child._ts, suppressEvents, force);\n\n if (time !== this._time || !this._ts && !prevPaused) {\n //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete\n pauseTween = 0;\n next && (tTime += this._zTime = -_tinyNum); // it didn't finish rendering, so flag zTime as negative so that the next time render() is called it'll be forced (to render any remaining children)\n\n break;\n }\n }\n\n child = next;\n }\n } else {\n child = this._last;\n var adjustedTime = totalTime < 0 ? totalTime : time; //when the playhead goes backward beyond the start of this timeline, we must pass that information down to the child animations so that zero-duration tweens know whether to render their starting or ending values.\n\n while (child) {\n next = child._prev;\n\n if ((child._act || adjustedTime <= child._end) && child._ts && pauseTween !== child) {\n if (child.parent !== this) {\n // an extreme edge case - the child's render could do something like kill() the \"next\" one in the linked list, or reparent it. In that case we must re-initiate the whole render to be safe.\n return this.render(totalTime, suppressEvents, force);\n }\n\n child.render(child._ts > 0 ? (adjustedTime - child._start) * child._ts : (child._dirty ? child.totalDuration() : child._tDur) + (adjustedTime - child._start) * child._ts, suppressEvents, force || _reverting && (child._initted || child._startAt)); // if reverting, we should always force renders of initted tweens (but remember that .fromTo() or .from() may have a _startAt but not _initted yet). If, for example, a .fromTo() tween with a stagger (which creates an internal timeline) gets reverted BEFORE some of its child tweens render for the first time, it may not properly trigger them to revert.\n\n if (time !== this._time || !this._ts && !prevPaused) {\n //in case a tween pauses or seeks the timeline when rendering, like inside of an onUpdate/onComplete\n pauseTween = 0;\n next && (tTime += this._zTime = adjustedTime ? -_tinyNum : _tinyNum); // it didn't finish rendering, so adjust zTime so that so that the next time render() is called it'll be forced (to render any remaining children)\n\n break;\n }\n }\n\n child = next;\n }\n }\n\n if (pauseTween && !suppressEvents) {\n this.pause();\n pauseTween.render(time >= prevTime ? 0 : -_tinyNum)._zTime = time >= prevTime ? 1 : -1;\n\n if (this._ts) {\n //the callback resumed playback! So since we may have held back the playhead due to where the pause is positioned, go ahead and jump to where it's SUPPOSED to be (if no pause happened).\n this._start = prevStart; //if the pause was at an earlier time and the user resumed in the callback, it could reposition the timeline (changing its startTime), throwing things off slightly, so we make sure the _start doesn't shift.\n\n _setEnd(this);\n\n return this.render(totalTime, suppressEvents, force);\n }\n }\n\n this._onUpdate && !suppressEvents && _callback(this, \"onUpdate\", true);\n if (tTime === tDur && this._tTime >= this.totalDuration() || !tTime && prevTime) if (prevStart === this._start || Math.abs(timeScale) !== Math.abs(this._ts)) if (!this._lock) {\n // remember, a child's callback may alter this timeline's playhead or timeScale which is why we need to add some of these checks.\n (totalTime || !dur) && (tTime === tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.\n\n if (!suppressEvents && !(totalTime < 0 && !prevTime) && (tTime || prevTime || !tDur)) {\n _callback(this, tTime === tDur && totalTime >= 0 ? \"onComplete\" : \"onReverseComplete\", true);\n\n this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();\n }\n }\n }\n\n return this;\n };\n\n _proto2.add = function add(child, position) {\n var _this2 = this;\n\n _isNumber(position) || (position = _parsePosition(this, position, child));\n\n if (!(child instanceof Animation)) {\n if (_isArray(child)) {\n child.forEach(function (obj) {\n return _this2.add(obj, position);\n });\n return this;\n }\n\n if (_isString(child)) {\n return this.addLabel(child, position);\n }\n\n if (_isFunction(child)) {\n child = Tween.delayedCall(0, child);\n } else {\n return this;\n }\n }\n\n return this !== child ? _addToTimeline(this, child, position) : this; //don't allow a timeline to be added to itself as a child!\n };\n\n _proto2.getChildren = function getChildren(nested, tweens, timelines, ignoreBeforeTime) {\n if (nested === void 0) {\n nested = true;\n }\n\n if (tweens === void 0) {\n tweens = true;\n }\n\n if (timelines === void 0) {\n timelines = true;\n }\n\n if (ignoreBeforeTime === void 0) {\n ignoreBeforeTime = -_bigNum;\n }\n\n var a = [],\n child = this._first;\n\n while (child) {\n if (child._start >= ignoreBeforeTime) {\n if (child instanceof Tween) {\n tweens && a.push(child);\n } else {\n timelines && a.push(child);\n nested && a.push.apply(a, child.getChildren(true, tweens, timelines));\n }\n }\n\n child = child._next;\n }\n\n return a;\n };\n\n _proto2.getById = function getById(id) {\n var animations = this.getChildren(1, 1, 1),\n i = animations.length;\n\n while (i--) {\n if (animations[i].vars.id === id) {\n return animations[i];\n }\n }\n };\n\n _proto2.remove = function remove(child) {\n if (_isString(child)) {\n return this.removeLabel(child);\n }\n\n if (_isFunction(child)) {\n return this.killTweensOf(child);\n }\n\n child.parent === this && _removeLinkedListItem(this, child);\n\n if (child === this._recent) {\n this._recent = this._last;\n }\n\n return _uncache(this);\n };\n\n _proto2.totalTime = function totalTime(_totalTime2, suppressEvents) {\n if (!arguments.length) {\n return this._tTime;\n }\n\n this._forcing = 1;\n\n if (!this._dp && this._ts) {\n //special case for the global timeline (or any other that has no parent or detached parent).\n this._start = _roundPrecise(_ticker.time - (this._ts > 0 ? _totalTime2 / this._ts : (this.totalDuration() - _totalTime2) / -this._ts));\n }\n\n _Animation.prototype.totalTime.call(this, _totalTime2, suppressEvents);\n\n this._forcing = 0;\n return this;\n };\n\n _proto2.addLabel = function addLabel(label, position) {\n this.labels[label] = _parsePosition(this, position);\n return this;\n };\n\n _proto2.removeLabel = function removeLabel(label) {\n delete this.labels[label];\n return this;\n };\n\n _proto2.addPause = function addPause(position, callback, params) {\n var t = Tween.delayedCall(0, callback || _emptyFunc, params);\n t.data = \"isPause\";\n this._hasPause = 1;\n return _addToTimeline(this, t, _parsePosition(this, position));\n };\n\n _proto2.removePause = function removePause(position) {\n var child = this._first;\n position = _parsePosition(this, position);\n\n while (child) {\n if (child._start === position && child.data === \"isPause\") {\n _removeFromParent(child);\n }\n\n child = child._next;\n }\n };\n\n _proto2.killTweensOf = function killTweensOf(targets, props, onlyActive) {\n var tweens = this.getTweensOf(targets, onlyActive),\n i = tweens.length;\n\n while (i--) {\n _overwritingTween !== tweens[i] && tweens[i].kill(targets, props);\n }\n\n return this;\n };\n\n _proto2.getTweensOf = function getTweensOf(targets, onlyActive) {\n var a = [],\n parsedTargets = toArray(targets),\n child = this._first,\n isGlobalTime = _isNumber(onlyActive),\n // a number is interpreted as a global time. If the animation spans\n children;\n\n while (child) {\n if (child instanceof Tween) {\n if (_arrayContainsAny(child._targets, parsedTargets) && (isGlobalTime ? (!_overwritingTween || child._initted && child._ts) && child.globalTime(0) <= onlyActive && child.globalTime(child.totalDuration()) > onlyActive : !onlyActive || child.isActive())) {\n // note: if this is for overwriting, it should only be for tweens that aren't paused and are initted.\n a.push(child);\n }\n } else if ((children = child.getTweensOf(parsedTargets, onlyActive)).length) {\n a.push.apply(a, children);\n }\n\n child = child._next;\n }\n\n return a;\n } // potential future feature - targets() on timelines\n // targets() {\n // \tlet result = [];\n // \tthis.getChildren(true, true, false).forEach(t => result.push(...t.targets()));\n // \treturn result.filter((v, i) => result.indexOf(v) === i);\n // }\n ;\n\n _proto2.tweenTo = function tweenTo(position, vars) {\n vars = vars || {};\n\n var tl = this,\n endTime = _parsePosition(tl, position),\n _vars = vars,\n startAt = _vars.startAt,\n _onStart = _vars.onStart,\n onStartParams = _vars.onStartParams,\n immediateRender = _vars.immediateRender,\n initted,\n tween = Tween.to(tl, _setDefaults({\n ease: vars.ease || \"none\",\n lazy: false,\n immediateRender: false,\n time: endTime,\n overwrite: \"auto\",\n duration: vars.duration || Math.abs((endTime - (startAt && \"time\" in startAt ? startAt.time : tl._time)) / tl.timeScale()) || _tinyNum,\n onStart: function onStart() {\n tl.pause();\n\n if (!initted) {\n var duration = vars.duration || Math.abs((endTime - (startAt && \"time\" in startAt ? startAt.time : tl._time)) / tl.timeScale());\n tween._dur !== duration && _setDuration(tween, duration, 0, 1).render(tween._time, true, true);\n initted = 1;\n }\n\n _onStart && _onStart.apply(tween, onStartParams || []); //in case the user had an onStart in the vars - we don't want to overwrite it.\n }\n }, vars));\n\n return immediateRender ? tween.render(0) : tween;\n };\n\n _proto2.tweenFromTo = function tweenFromTo(fromPosition, toPosition, vars) {\n return this.tweenTo(toPosition, _setDefaults({\n startAt: {\n time: _parsePosition(this, fromPosition)\n }\n }, vars));\n };\n\n _proto2.recent = function recent() {\n return this._recent;\n };\n\n _proto2.nextLabel = function nextLabel(afterTime) {\n if (afterTime === void 0) {\n afterTime = this._time;\n }\n\n return _getLabelInDirection(this, _parsePosition(this, afterTime));\n };\n\n _proto2.previousLabel = function previousLabel(beforeTime) {\n if (beforeTime === void 0) {\n beforeTime = this._time;\n }\n\n return _getLabelInDirection(this, _parsePosition(this, beforeTime), 1);\n };\n\n _proto2.currentLabel = function currentLabel(value) {\n return arguments.length ? this.seek(value, true) : this.previousLabel(this._time + _tinyNum);\n };\n\n _proto2.shiftChildren = function shiftChildren(amount, adjustLabels, ignoreBeforeTime) {\n if (ignoreBeforeTime === void 0) {\n ignoreBeforeTime = 0;\n }\n\n var child = this._first,\n labels = this.labels,\n p;\n\n while (child) {\n if (child._start >= ignoreBeforeTime) {\n child._start += amount;\n child._end += amount;\n }\n\n child = child._next;\n }\n\n if (adjustLabels) {\n for (p in labels) {\n if (labels[p] >= ignoreBeforeTime) {\n labels[p] += amount;\n }\n }\n }\n\n return _uncache(this);\n };\n\n _proto2.invalidate = function invalidate(soft) {\n var child = this._first;\n this._lock = 0;\n\n while (child) {\n child.invalidate(soft);\n child = child._next;\n }\n\n return _Animation.prototype.invalidate.call(this, soft);\n };\n\n _proto2.clear = function clear(includeLabels) {\n if (includeLabels === void 0) {\n includeLabels = true;\n }\n\n var child = this._first,\n next;\n\n while (child) {\n next = child._next;\n this.remove(child);\n child = next;\n }\n\n this._dp && (this._time = this._tTime = this._pTime = 0);\n includeLabels && (this.labels = {});\n return _uncache(this);\n };\n\n _proto2.totalDuration = function totalDuration(value) {\n var max = 0,\n self = this,\n child = self._last,\n prevStart = _bigNum,\n prev,\n start,\n parent;\n\n if (arguments.length) {\n return self.timeScale((self._repeat < 0 ? self.duration() : self.totalDuration()) / (self.reversed() ? -value : value));\n }\n\n if (self._dirty) {\n parent = self.parent;\n\n while (child) {\n prev = child._prev; //record it here in case the tween changes position in the sequence...\n\n child._dirty && child.totalDuration(); //could change the tween._startTime, so make sure the animation's cache is clean before analyzing it.\n\n start = child._start;\n\n if (start > prevStart && self._sort && child._ts && !self._lock) {\n //in case one of the tweens shifted out of order, it needs to be re-inserted into the correct position in the sequence\n self._lock = 1; //prevent endless recursive calls - there are methods that get triggered that check duration/totalDuration when we add().\n\n _addToTimeline(self, child, start - child._delay, 1)._lock = 0;\n } else {\n prevStart = start;\n }\n\n if (start < 0 && child._ts) {\n //children aren't allowed to have negative startTimes unless smoothChildTiming is true, so adjust here if one is found.\n max -= start;\n\n if (!parent && !self._dp || parent && parent.smoothChildTiming) {\n self._start += start / self._ts;\n self._time -= start;\n self._tTime -= start;\n }\n\n self.shiftChildren(-start, false, -1e999);\n prevStart = 0;\n }\n\n child._end > max && child._ts && (max = child._end);\n child = prev;\n }\n\n _setDuration(self, self === _globalTimeline && self._time > max ? self._time : max, 1, 1);\n\n self._dirty = 0;\n }\n\n return self._tDur;\n };\n\n Timeline.updateRoot = function updateRoot(time) {\n if (_globalTimeline._ts) {\n _lazySafeRender(_globalTimeline, _parentToChildTotalTime(time, _globalTimeline));\n\n _lastRenderedFrame = _ticker.frame;\n }\n\n if (_ticker.frame >= _nextGCFrame) {\n _nextGCFrame += _config.autoSleep || 120;\n var child = _globalTimeline._first;\n if (!child || !child._ts) if (_config.autoSleep && _ticker._listeners.length < 2) {\n while (child && !child._ts) {\n child = child._next;\n }\n\n child || _ticker.sleep();\n }\n }\n };\n\n return Timeline;\n}(Animation);\n\n_setDefaults(Timeline.prototype, {\n _lock: 0,\n _hasPause: 0,\n _forcing: 0\n});\n\nvar _addComplexStringPropTween = function _addComplexStringPropTween(target, prop, start, end, setter, stringFilter, funcParam) {\n //note: we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus \"this\" would refer to the plugin.\n var pt = new PropTween(this._pt, target, prop, 0, 1, _renderComplexString, null, setter),\n index = 0,\n matchIndex = 0,\n result,\n startNums,\n color,\n endNum,\n chunk,\n startNum,\n hasRandom,\n a;\n pt.b = start;\n pt.e = end;\n start += \"\"; //ensure values are strings\n\n end += \"\";\n\n if (hasRandom = ~end.indexOf(\"random(\")) {\n end = _replaceRandom(end);\n }\n\n if (stringFilter) {\n a = [start, end];\n stringFilter(a, target, prop); //pass an array with the starting and ending values and let the filter do whatever it needs to the values.\n\n start = a[0];\n end = a[1];\n }\n\n startNums = start.match(_complexStringNumExp) || [];\n\n while (result = _complexStringNumExp.exec(end)) {\n endNum = result[0];\n chunk = end.substring(index, result.index);\n\n if (color) {\n color = (color + 1) % 5;\n } else if (chunk.substr(-5) === \"rgba(\") {\n color = 1;\n }\n\n if (endNum !== startNums[matchIndex++]) {\n startNum = parseFloat(startNums[matchIndex - 1]) || 0; //these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.\n\n pt._pt = {\n _next: pt._pt,\n p: chunk || matchIndex === 1 ? chunk : \",\",\n //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.\n s: startNum,\n c: endNum.charAt(1) === \"=\" ? _parseRelative(startNum, endNum) - startNum : parseFloat(endNum) - startNum,\n m: color && color < 4 ? Math.round : 0\n };\n index = _complexStringNumExp.lastIndex;\n }\n }\n\n pt.c = index < end.length ? end.substring(index, end.length) : \"\"; //we use the \"c\" of the PropTween to store the final part of the string (after the last number)\n\n pt.fp = funcParam;\n\n if (_relExp.test(end) || hasRandom) {\n pt.e = 0; //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).\n }\n\n this._pt = pt; //start the linked list with this new PropTween. Remember, we call _addComplexStringPropTween.call(tweenInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus \"this\" would refer to the plugin.\n\n return pt;\n},\n _addPropTween = function _addPropTween(target, prop, start, end, index, targets, modifier, stringFilter, funcParam, optional) {\n _isFunction(end) && (end = end(index || 0, target, targets));\n var currentValue = target[prop],\n parsedStart = start !== \"get\" ? start : !_isFunction(currentValue) ? currentValue : funcParam ? target[prop.indexOf(\"set\") || !_isFunction(target[\"get\" + prop.substr(3)]) ? prop : \"get\" + prop.substr(3)](funcParam) : target[prop](),\n setter = !_isFunction(currentValue) ? _setterPlain : funcParam ? _setterFuncWithParam : _setterFunc,\n pt;\n\n if (_isString(end)) {\n if (~end.indexOf(\"random(\")) {\n end = _replaceRandom(end);\n }\n\n if (end.charAt(1) === \"=\") {\n pt = _parseRelative(parsedStart, end) + (getUnit(parsedStart) || 0);\n\n if (pt || pt === 0) {\n // to avoid isNaN, like if someone passes in a value like \"!= whatever\"\n end = pt;\n }\n }\n }\n\n if (!optional || parsedStart !== end || _forceAllPropTweens) {\n if (!isNaN(parsedStart * end) && end !== \"\") {\n // fun fact: any number multiplied by \"\" is evaluated as the number 0!\n pt = new PropTween(this._pt, target, prop, +parsedStart || 0, end - (parsedStart || 0), typeof currentValue === \"boolean\" ? _renderBoolean : _renderPlain, 0, setter);\n funcParam && (pt.fp = funcParam);\n modifier && pt.modifier(modifier, this, target);\n return this._pt = pt;\n }\n\n !currentValue && !(prop in target) && _missingPlugin(prop, end);\n return _addComplexStringPropTween.call(this, target, prop, parsedStart, end, setter, stringFilter || _config.stringFilter, funcParam);\n }\n},\n //creates a copy of the vars object and processes any function-based values (putting the resulting values directly into the copy) as well as strings with \"random()\" in them. It does NOT process relative values.\n_processVars = function _processVars(vars, index, target, targets, tween) {\n _isFunction(vars) && (vars = _parseFuncOrString(vars, tween, index, target, targets));\n\n if (!_isObject(vars) || vars.style && vars.nodeType || _isArray(vars) || _isTypedArray(vars)) {\n return _isString(vars) ? _parseFuncOrString(vars, tween, index, target, targets) : vars;\n }\n\n var copy = {},\n p;\n\n for (p in vars) {\n copy[p] = _parseFuncOrString(vars[p], tween, index, target, targets);\n }\n\n return copy;\n},\n _checkPlugin = function _checkPlugin(property, vars, tween, index, target, targets) {\n var plugin, pt, ptLookup, i;\n\n if (_plugins[property] && (plugin = new _plugins[property]()).init(target, plugin.rawVars ? vars[property] : _processVars(vars[property], index, target, targets, tween), tween, index, targets) !== false) {\n tween._pt = pt = new PropTween(tween._pt, target, property, 0, 1, plugin.render, plugin, 0, plugin.priority);\n\n if (tween !== _quickTween) {\n ptLookup = tween._ptLookup[tween._targets.indexOf(target)]; //note: we can't use tween._ptLookup[index] because for staggered tweens, the index from the fullTargets array won't match what it is in each individual tween that spawns from the stagger.\n\n i = plugin._props.length;\n\n while (i--) {\n ptLookup[plugin._props[i]] = pt;\n }\n }\n }\n\n return plugin;\n},\n _overwritingTween,\n //store a reference temporarily so we can avoid overwriting itself.\n_forceAllPropTweens,\n _initTween = function _initTween(tween, time, tTime) {\n var vars = tween.vars,\n ease = vars.ease,\n startAt = vars.startAt,\n immediateRender = vars.immediateRender,\n lazy = vars.lazy,\n onUpdate = vars.onUpdate,\n runBackwards = vars.runBackwards,\n yoyoEase = vars.yoyoEase,\n keyframes = vars.keyframes,\n autoRevert = vars.autoRevert,\n dur = tween._dur,\n prevStartAt = tween._startAt,\n targets = tween._targets,\n parent = tween.parent,\n fullTargets = parent && parent.data === \"nested\" ? parent.vars.targets : targets,\n autoOverwrite = tween._overwrite === \"auto\" && !_suppressOverwrites,\n tl = tween.timeline,\n cleanVars,\n i,\n p,\n pt,\n target,\n hasPriority,\n gsData,\n harness,\n plugin,\n ptLookup,\n index,\n harnessVars,\n overwritten;\n tl && (!keyframes || !ease) && (ease = \"none\");\n tween._ease = _parseEase(ease, _defaults.ease);\n tween._yEase = yoyoEase ? _invertEase(_parseEase(yoyoEase === true ? ease : yoyoEase, _defaults.ease)) : 0;\n\n if (yoyoEase && tween._yoyo && !tween._repeat) {\n //there must have been a parent timeline with yoyo:true that is currently in its yoyo phase, so flip the eases.\n yoyoEase = tween._yEase;\n tween._yEase = tween._ease;\n tween._ease = yoyoEase;\n }\n\n tween._from = !tl && !!vars.runBackwards; //nested timelines should never run backwards - the backwards-ness is in the child tweens.\n\n if (!tl || keyframes && !vars.stagger) {\n //if there's an internal timeline, skip all the parsing because we passed that task down the chain.\n harness = targets[0] ? _getCache(targets[0]).harness : 0;\n harnessVars = harness && vars[harness.prop]; //someone may need to specify CSS-specific values AND non-CSS values, like if the element has an \"x\" property plus it's a standard DOM element. We allow people to distinguish by wrapping plugin-specific stuff in a css:{} object for example.\n\n cleanVars = _copyExcluding(vars, _reservedProps);\n\n if (prevStartAt) {\n prevStartAt._zTime < 0 && prevStartAt.progress(1); // in case it's a lazy startAt that hasn't rendered yet.\n\n time < 0 && runBackwards && immediateRender && !autoRevert ? prevStartAt.render(-1, true) : prevStartAt.revert(runBackwards && dur ? _revertConfigNoKill : _startAtRevertConfig); // if it's a \"startAt\" (not \"from()\" or runBackwards: true), we only need to do a shallow revert (keep transforms cached in CSSPlugin)\n // don't just _removeFromParent(prevStartAt.render(-1, true)) because that'll leave inline styles. We're creating a new _startAt for \"startAt\" tweens that re-capture things to ensure that if the pre-tween values changed since the tween was created, they're recorded.\n\n prevStartAt._lazy = 0;\n }\n\n if (startAt) {\n _removeFromParent(tween._startAt = Tween.set(targets, _setDefaults({\n data: \"isStart\",\n overwrite: false,\n parent: parent,\n immediateRender: true,\n lazy: !prevStartAt && _isNotFalse(lazy),\n startAt: null,\n delay: 0,\n onUpdate: onUpdate && function () {\n return _callback(tween, \"onUpdate\");\n },\n stagger: 0\n }, startAt))); //copy the properties/values into a new object to avoid collisions, like var to = {x:0}, from = {x:500}; timeline.fromTo(e, from, to).fromTo(e, to, from);\n\n\n tween._startAt._dp = 0; // don't allow it to get put back into root timeline! Like when revert() is called and totalTime() gets set.\n\n tween._startAt._sat = tween; // used in globalTime(). _sat stands for _startAtTween\n\n time < 0 && (_reverting || !immediateRender && !autoRevert) && tween._startAt.revert(_revertConfigNoKill); // rare edge case, like if a render is forced in the negative direction of a non-initted tween.\n\n if (immediateRender) {\n if (dur && time <= 0 && tTime <= 0) {\n // check tTime here because in the case of a yoyo tween whose playhead gets pushed to the end like tween.progress(1), we should allow it through so that the onComplete gets fired properly.\n time && (tween._zTime = time);\n return; //we skip initialization here so that overwriting doesn't occur until the tween actually begins. Otherwise, if you create several immediateRender:true tweens of the same target/properties to drop into a Timeline, the last one created would overwrite the first ones because they didn't get placed into the timeline yet before the first render occurs and kicks in overwriting.\n }\n }\n } else if (runBackwards && dur) {\n //from() tweens must be handled uniquely: their beginning values must be rendered but we don't want overwriting to occur yet (when time is still 0). Wait until the tween actually begins before doing all the routines like overwriting. At that time, we should render at the END of the tween to ensure that things initialize correctly (remember, from() tweens go backwards)\n if (!prevStartAt) {\n time && (immediateRender = false); //in rare cases (like if a from() tween runs and then is invalidate()-ed), immediateRender could be true but the initial forced-render gets skipped, so there's no need to force the render in this context when the _time is greater than 0\n\n p = _setDefaults({\n overwrite: false,\n data: \"isFromStart\",\n //we tag the tween with as \"isFromStart\" so that if [inside a plugin] we need to only do something at the very END of a tween, we have a way of identifying this tween as merely the one that's setting the beginning values for a \"from()\" tween. For example, clearProps in CSSPlugin should only get applied at the very END of a tween and without this tag, from(...{height:100, clearProps:\"height\", delay:1}) would wipe the height at the beginning of the tween and after 1 second, it'd kick back in.\n lazy: immediateRender && !prevStartAt && _isNotFalse(lazy),\n immediateRender: immediateRender,\n //zero-duration tweens render immediately by default, but if we're not specifically instructed to render this tween immediately, we should skip this and merely _init() to record the starting values (rendering them immediately would push them to completion which is wasteful in that case - we'd have to render(-1) immediately after)\n stagger: 0,\n parent: parent //ensures that nested tweens that had a stagger are handled properly, like gsap.from(\".class\", {y: gsap.utils.wrap([-100,100]), stagger: 0.5})\n\n }, cleanVars);\n harnessVars && (p[harness.prop] = harnessVars); // in case someone does something like .from(..., {css:{}})\n\n _removeFromParent(tween._startAt = Tween.set(targets, p));\n\n tween._startAt._dp = 0; // don't allow it to get put back into root timeline!\n\n tween._startAt._sat = tween; // used in globalTime()\n\n time < 0 && (_reverting ? tween._startAt.revert(_revertConfigNoKill) : tween._startAt.render(-1, true));\n tween._zTime = time;\n\n if (!immediateRender) {\n _initTween(tween._startAt, _tinyNum, _tinyNum); //ensures that the initial values are recorded\n\n } else if (!time) {\n return;\n }\n }\n }\n\n tween._pt = tween._ptCache = 0;\n lazy = dur && _isNotFalse(lazy) || lazy && !dur;\n\n for (i = 0; i < targets.length; i++) {\n target = targets[i];\n gsData = target._gsap || _harness(targets)[i]._gsap;\n tween._ptLookup[i] = ptLookup = {};\n _lazyLookup[gsData.id] && _lazyTweens.length && _lazyRender(); //if other tweens of the same target have recently initted but haven't rendered yet, we've got to force the render so that the starting values are correct (imagine populating a timeline with a bunch of sequential tweens and then jumping to the end)\n\n index = fullTargets === targets ? i : fullTargets.indexOf(target);\n\n if (harness && (plugin = new harness()).init(target, harnessVars || cleanVars, tween, index, fullTargets) !== false) {\n tween._pt = pt = new PropTween(tween._pt, target, plugin.name, 0, 1, plugin.render, plugin, 0, plugin.priority);\n\n plugin._props.forEach(function (name) {\n ptLookup[name] = pt;\n });\n\n plugin.priority && (hasPriority = 1);\n }\n\n if (!harness || harnessVars) {\n for (p in cleanVars) {\n if (_plugins[p] && (plugin = _checkPlugin(p, cleanVars, tween, index, target, fullTargets))) {\n plugin.priority && (hasPriority = 1);\n } else {\n ptLookup[p] = pt = _addPropTween.call(tween, target, p, \"get\", cleanVars[p], index, fullTargets, 0, vars.stringFilter);\n }\n }\n }\n\n tween._op && tween._op[i] && tween.kill(target, tween._op[i]);\n\n if (autoOverwrite && tween._pt) {\n _overwritingTween = tween;\n\n _globalTimeline.killTweensOf(target, ptLookup, tween.globalTime(time)); // make sure the overwriting doesn't overwrite THIS tween!!!\n\n\n overwritten = !tween.parent;\n _overwritingTween = 0;\n }\n\n tween._pt && lazy && (_lazyLookup[gsData.id] = 1);\n }\n\n hasPriority && _sortPropTweensByPriority(tween);\n tween._onInit && tween._onInit(tween); //plugins like RoundProps must wait until ALL of the PropTweens are instantiated. In the plugin's init() function, it sets the _onInit on the tween instance. May not be pretty/intuitive, but it's fast and keeps file size down.\n }\n\n tween._onUpdate = onUpdate;\n tween._initted = (!tween._op || tween._pt) && !overwritten; // if overwrittenProps resulted in the entire tween being killed, do NOT flag it as initted or else it may render for one tick.\n\n keyframes && time <= 0 && tl.render(_bigNum, true, true); // if there's a 0% keyframe, it'll render in the \"before\" state for any staggered/delayed animations thus when the following tween initializes, it'll use the \"before\" state instead of the \"after\" state as the initial values.\n},\n _updatePropTweens = function _updatePropTweens(tween, property, value, start, startIsRelative, ratio, time, skipRecursion) {\n var ptCache = (tween._pt && tween._ptCache || (tween._ptCache = {}))[property],\n pt,\n rootPT,\n lookup,\n i;\n\n if (!ptCache) {\n ptCache = tween._ptCache[property] = [];\n lookup = tween._ptLookup;\n i = tween._targets.length;\n\n while (i--) {\n pt = lookup[i][property];\n\n if (pt && pt.d && pt.d._pt) {\n // it's a plugin, so find the nested PropTween\n pt = pt.d._pt;\n\n while (pt && pt.p !== property && pt.fp !== property) {\n // \"fp\" is functionParam for things like setting CSS variables which require .setProperty(\"--var-name\", value)\n pt = pt._next;\n }\n }\n\n if (!pt) {\n // there is no PropTween associated with that property, so we must FORCE one to be created and ditch out of this\n // if the tween has other properties that already rendered at new positions, we'd normally have to rewind to put them back like tween.render(0, true) before forcing an _initTween(), but that can create another edge case like tweening a timeline's progress would trigger onUpdates to fire which could move other things around. It's better to just inform users that .resetTo() should ONLY be used for tweens that already have that property. For example, you can't gsap.to(...{ y: 0 }) and then tween.restTo(\"x\", 200) for example.\n _forceAllPropTweens = 1; // otherwise, when we _addPropTween() and it finds no change between the start and end values, it skips creating a PropTween (for efficiency...why tween when there's no difference?) but in this case we NEED that PropTween created so we can edit it.\n\n tween.vars[property] = \"+=0\";\n\n _initTween(tween, time);\n\n _forceAllPropTweens = 0;\n return skipRecursion ? _warn(property + \" not eligible for reset\") : 1; // if someone tries to do a quickTo() on a special property like borderRadius which must get split into 4 different properties, that's not eligible for .resetTo().\n }\n\n ptCache.push(pt);\n }\n }\n\n i = ptCache.length;\n\n while (i--) {\n rootPT = ptCache[i];\n pt = rootPT._pt || rootPT; // complex values may have nested PropTweens. We only accommodate the FIRST value.\n\n pt.s = (start || start === 0) && !startIsRelative ? start : pt.s + (start || 0) + ratio * pt.c;\n pt.c = value - pt.s;\n rootPT.e && (rootPT.e = _round(value) + getUnit(rootPT.e)); // mainly for CSSPlugin (end value)\n\n rootPT.b && (rootPT.b = pt.s + getUnit(rootPT.b)); // (beginning value)\n }\n},\n _addAliasesToVars = function _addAliasesToVars(targets, vars) {\n var harness = targets[0] ? _getCache(targets[0]).harness : 0,\n propertyAliases = harness && harness.aliases,\n copy,\n p,\n i,\n aliases;\n\n if (!propertyAliases) {\n return vars;\n }\n\n copy = _merge({}, vars);\n\n for (p in propertyAliases) {\n if (p in copy) {\n aliases = propertyAliases[p].split(\",\");\n i = aliases.length;\n\n while (i--) {\n copy[aliases[i]] = copy[p];\n }\n }\n }\n\n return copy;\n},\n // parses multiple formats, like {\"0%\": {x: 100}, {\"50%\": {x: -20}} and { x: {\"0%\": 100, \"50%\": -20} }, and an \"ease\" can be set on any object. We populate an \"allProps\" object with an Array for each property, like {x: [{}, {}], y:[{}, {}]} with data for each property tween. The objects have a \"t\" (time), \"v\", (value), and \"e\" (ease) property. This allows us to piece together a timeline later.\n_parseKeyframe = function _parseKeyframe(prop, obj, allProps, easeEach) {\n var ease = obj.ease || easeEach || \"power1.inOut\",\n p,\n a;\n\n if (_isArray(obj)) {\n a = allProps[prop] || (allProps[prop] = []); // t = time (out of 100), v = value, e = ease\n\n obj.forEach(function (value, i) {\n return a.push({\n t: i / (obj.length - 1) * 100,\n v: value,\n e: ease\n });\n });\n } else {\n for (p in obj) {\n a = allProps[p] || (allProps[p] = []);\n p === \"ease\" || a.push({\n t: parseFloat(prop),\n v: obj[p],\n e: ease\n });\n }\n }\n},\n _parseFuncOrString = function _parseFuncOrString(value, tween, i, target, targets) {\n return _isFunction(value) ? value.call(tween, i, target, targets) : _isString(value) && ~value.indexOf(\"random(\") ? _replaceRandom(value) : value;\n},\n _staggerTweenProps = _callbackNames + \"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",\n _staggerPropsToSkip = {};\n\n_forEachName(_staggerTweenProps + \",id,stagger,delay,duration,paused,scrollTrigger\", function (name) {\n return _staggerPropsToSkip[name] = 1;\n});\n/*\n * --------------------------------------------------------------------------------------\n * TWEEN\n * --------------------------------------------------------------------------------------\n */\n\n\nexport var Tween = /*#__PURE__*/function (_Animation2) {\n _inheritsLoose(Tween, _Animation2);\n\n function Tween(targets, vars, position, skipInherit) {\n var _this3;\n\n if (typeof vars === \"number\") {\n position.duration = vars;\n vars = position;\n position = null;\n }\n\n _this3 = _Animation2.call(this, skipInherit ? vars : _inheritDefaults(vars)) || this;\n var _this3$vars = _this3.vars,\n duration = _this3$vars.duration,\n delay = _this3$vars.delay,\n immediateRender = _this3$vars.immediateRender,\n stagger = _this3$vars.stagger,\n overwrite = _this3$vars.overwrite,\n keyframes = _this3$vars.keyframes,\n defaults = _this3$vars.defaults,\n scrollTrigger = _this3$vars.scrollTrigger,\n yoyoEase = _this3$vars.yoyoEase,\n parent = vars.parent || _globalTimeline,\n parsedTargets = (_isArray(targets) || _isTypedArray(targets) ? _isNumber(targets[0]) : \"length\" in vars) ? [targets] : toArray(targets),\n tl,\n i,\n copy,\n l,\n p,\n curTarget,\n staggerFunc,\n staggerVarsToMerge;\n _this3._targets = parsedTargets.length ? _harness(parsedTargets) : _warn(\"GSAP target \" + targets + \" not found. https://gsap.com\", !_config.nullTargetWarn) || [];\n _this3._ptLookup = []; //PropTween lookup. An array containing an object for each target, having keys for each tweening property\n\n _this3._overwrite = overwrite;\n\n if (keyframes || stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {\n vars = _this3.vars;\n tl = _this3.timeline = new Timeline({\n data: \"nested\",\n defaults: defaults || {},\n targets: parent && parent.data === \"nested\" ? parent.vars.targets : parsedTargets\n }); // we need to store the targets because for staggers and keyframes, we end up creating an individual tween for each but function-based values need to know the index and the whole Array of targets.\n\n tl.kill();\n tl.parent = tl._dp = _assertThisInitialized(_this3);\n tl._start = 0;\n\n if (stagger || _isFuncOrString(duration) || _isFuncOrString(delay)) {\n l = parsedTargets.length;\n staggerFunc = stagger && distribute(stagger);\n\n if (_isObject(stagger)) {\n //users can pass in callbacks like onStart/onComplete in the stagger object. These should fire with each individual tween.\n for (p in stagger) {\n if (~_staggerTweenProps.indexOf(p)) {\n staggerVarsToMerge || (staggerVarsToMerge = {});\n staggerVarsToMerge[p] = stagger[p];\n }\n }\n }\n\n for (i = 0; i < l; i++) {\n copy = _copyExcluding(vars, _staggerPropsToSkip);\n copy.stagger = 0;\n yoyoEase && (copy.yoyoEase = yoyoEase);\n staggerVarsToMerge && _merge(copy, staggerVarsToMerge);\n curTarget = parsedTargets[i]; //don't just copy duration or delay because if they're a string or function, we'd end up in an infinite loop because _isFuncOrString() would evaluate as true in the child tweens, entering this loop, etc. So we parse the value straight from vars and default to 0.\n\n copy.duration = +_parseFuncOrString(duration, _assertThisInitialized(_this3), i, curTarget, parsedTargets);\n copy.delay = (+_parseFuncOrString(delay, _assertThisInitialized(_this3), i, curTarget, parsedTargets) || 0) - _this3._delay;\n\n if (!stagger && l === 1 && copy.delay) {\n // if someone does delay:\"random(1, 5)\", repeat:-1, for example, the delay shouldn't be inside the repeat.\n _this3._delay = delay = copy.delay;\n _this3._start += delay;\n copy.delay = 0;\n }\n\n tl.to(curTarget, copy, staggerFunc ? staggerFunc(i, curTarget, parsedTargets) : 0);\n tl._ease = _easeMap.none;\n }\n\n tl.duration() ? duration = delay = 0 : _this3.timeline = 0; // if the timeline's duration is 0, we don't need a timeline internally!\n } else if (keyframes) {\n _inheritDefaults(_setDefaults(tl.vars.defaults, {\n ease: \"none\"\n }));\n\n tl._ease = _parseEase(keyframes.ease || vars.ease || \"none\");\n var time = 0,\n a,\n kf,\n v;\n\n if (_isArray(keyframes)) {\n keyframes.forEach(function (frame) {\n return tl.to(parsedTargets, frame, \">\");\n });\n tl.duration(); // to ensure tl._dur is cached because we tap into it for performance purposes in the render() method.\n } else {\n copy = {};\n\n for (p in keyframes) {\n p === \"ease\" || p === \"easeEach\" || _parseKeyframe(p, keyframes[p], copy, keyframes.easeEach);\n }\n\n for (p in copy) {\n a = copy[p].sort(function (a, b) {\n return a.t - b.t;\n });\n time = 0;\n\n for (i = 0; i < a.length; i++) {\n kf = a[i];\n v = {\n ease: kf.e,\n duration: (kf.t - (i ? a[i - 1].t : 0)) / 100 * duration\n };\n v[p] = kf.v;\n tl.to(parsedTargets, v, time);\n time += v.duration;\n }\n }\n\n tl.duration() < duration && tl.to({}, {\n duration: duration - tl.duration()\n }); // in case keyframes didn't go to 100%\n }\n }\n\n duration || _this3.duration(duration = tl.duration());\n } else {\n _this3.timeline = 0; //speed optimization, faster lookups (no going up the prototype chain)\n }\n\n if (overwrite === true && !_suppressOverwrites) {\n _overwritingTween = _assertThisInitialized(_this3);\n\n _globalTimeline.killTweensOf(parsedTargets);\n\n _overwritingTween = 0;\n }\n\n _addToTimeline(parent, _assertThisInitialized(_this3), position);\n\n vars.reversed && _this3.reverse();\n vars.paused && _this3.paused(true);\n\n if (immediateRender || !duration && !keyframes && _this3._start === _roundPrecise(parent._time) && _isNotFalse(immediateRender) && _hasNoPausedAncestors(_assertThisInitialized(_this3)) && parent.data !== \"nested\") {\n _this3._tTime = -_tinyNum; //forces a render without having to set the render() \"force\" parameter to true because we want to allow lazying by default (using the \"force\" parameter always forces an immediate full render)\n\n _this3.render(Math.max(0, -delay) || 0); //in case delay is negative\n\n }\n\n scrollTrigger && _scrollTrigger(_assertThisInitialized(_this3), scrollTrigger);\n return _this3;\n }\n\n var _proto3 = Tween.prototype;\n\n _proto3.render = function render(totalTime, suppressEvents, force) {\n var prevTime = this._time,\n tDur = this._tDur,\n dur = this._dur,\n isNegative = totalTime < 0,\n tTime = totalTime > tDur - _tinyNum && !isNegative ? tDur : totalTime < _tinyNum ? 0 : totalTime,\n time,\n pt,\n iteration,\n cycleDuration,\n prevIteration,\n isYoyo,\n ratio,\n timeline,\n yoyoEase;\n\n if (!dur) {\n _renderZeroDurationTween(this, totalTime, suppressEvents, force);\n } else if (tTime !== this._tTime || !totalTime || force || !this._initted && this._tTime || this._startAt && this._zTime < 0 !== isNegative || this._lazy) {\n // this senses if we're crossing over the start time, in which case we must record _zTime and force the render, but we do it in this lengthy conditional way for performance reasons (usually we can skip the calculations): this._initted && (this._zTime < 0) !== (totalTime < 0)\n time = tTime;\n timeline = this.timeline;\n\n if (this._repeat) {\n //adjust the time for repeats and yoyos\n cycleDuration = dur + this._rDelay;\n\n if (this._repeat < -1 && isNegative) {\n return this.totalTime(cycleDuration * 100 + totalTime, suppressEvents, force);\n }\n\n time = _roundPrecise(tTime % cycleDuration); //round to avoid floating point errors. (4 % 0.8 should be 0 but some browsers report it as 0.79999999!)\n\n if (tTime === tDur) {\n // the tDur === tTime is for edge cases where there's a lengthy decimal on the duration and it may reach the very end but the time is rendered as not-quite-there (remember, tDur is rounded to 4 decimals whereas dur isn't)\n iteration = this._repeat;\n time = dur;\n } else {\n prevIteration = _roundPrecise(tTime / cycleDuration); // full decimal version of iterations, not the previous iteration (we're reusing prevIteration variable for efficiency)\n\n iteration = ~~prevIteration;\n\n if (iteration && iteration === prevIteration) {\n time = dur;\n iteration--;\n } else if (time > dur) {\n time = dur;\n }\n }\n\n isYoyo = this._yoyo && iteration & 1;\n\n if (isYoyo) {\n yoyoEase = this._yEase;\n time = dur - time;\n }\n\n prevIteration = _animationCycle(this._tTime, cycleDuration);\n\n if (time === prevTime && !force && this._initted && iteration === prevIteration) {\n //could be during the repeatDelay part. No need to render and fire callbacks.\n this._tTime = tTime;\n return this;\n }\n\n if (iteration !== prevIteration) {\n timeline && this._yEase && _propagateYoyoEase(timeline, isYoyo); //repeatRefresh functionality\n\n if (this.vars.repeatRefresh && !isYoyo && !this._lock && time !== cycleDuration && this._initted) {\n // this._time will === cycleDuration when we render at EXACTLY the end of an iteration. Without this condition, it'd often do the repeatRefresh render TWICE (again on the very next tick).\n this._lock = force = 1; //force, otherwise if lazy is true, the _attemptInitTween() will return and we'll jump out and get caught bouncing on each tick.\n\n this.render(_roundPrecise(cycleDuration * iteration), true).invalidate()._lock = 0;\n }\n }\n }\n\n if (!this._initted) {\n if (_attemptInitTween(this, isNegative ? totalTime : time, force, suppressEvents, tTime)) {\n this._tTime = 0; // in constructor if immediateRender is true, we set _tTime to -_tinyNum to have the playhead cross the starting point but we can't leave _tTime as a negative number.\n\n return this;\n }\n\n if (prevTime !== this._time && !(force && this.vars.repeatRefresh && iteration !== prevIteration)) {\n // rare edge case - during initialization, an onUpdate in the _startAt (.fromTo()) might force this tween to render at a different spot in which case we should ditch this render() call so that it doesn't revert the values. But we also don't want to dump if we're doing a repeatRefresh render!\n return this;\n }\n\n if (dur !== this._dur) {\n // while initting, a plugin like InertiaPlugin might alter the duration, so rerun from the start to ensure everything renders as it should.\n return this.render(totalTime, suppressEvents, force);\n }\n }\n\n this._tTime = tTime;\n this._time = time;\n\n if (!this._act && this._ts) {\n this._act = 1; //as long as it's not paused, force it to be active so that if the user renders independent of the parent timeline, it'll be forced to re-render on the next tick.\n\n this._lazy = 0;\n }\n\n this.ratio = ratio = (yoyoEase || this._ease)(time / dur);\n\n if (this._from) {\n this.ratio = ratio = 1 - ratio;\n }\n\n if (time && !prevTime && !suppressEvents && !iteration) {\n _callback(this, \"onStart\");\n\n if (this._tTime !== tTime) {\n // in case the onStart triggered a render at a different spot, eject. Like if someone did animation.pause(0.5) or something inside the onStart.\n return this;\n }\n }\n\n pt = this._pt;\n\n while (pt) {\n pt.r(ratio, pt.d);\n pt = pt._next;\n }\n\n timeline && timeline.render(totalTime < 0 ? totalTime : timeline._dur * timeline._ease(time / this._dur), suppressEvents, force) || this._startAt && (this._zTime = totalTime);\n\n if (this._onUpdate && !suppressEvents) {\n isNegative && _rewindStartAt(this, totalTime, suppressEvents, force); //note: for performance reasons, we tuck this conditional logic inside less traveled areas (most tweens don't have an onUpdate). We'd just have it at the end before the onComplete, but the values should be updated before any onUpdate is called, so we ALSO put it here and then if it's not called, we do so later near the onComplete.\n\n _callback(this, \"onUpdate\");\n }\n\n this._repeat && iteration !== prevIteration && this.vars.onRepeat && !suppressEvents && this.parent && _callback(this, \"onRepeat\");\n\n if ((tTime === this._tDur || !tTime) && this._tTime === tTime) {\n isNegative && !this._onUpdate && _rewindStartAt(this, totalTime, true, true);\n (totalTime || !dur) && (tTime === this._tDur && this._ts > 0 || !tTime && this._ts < 0) && _removeFromParent(this, 1); // don't remove if we're rendering at exactly a time of 0, as there could be autoRevert values that should get set on the next tick (if the playhead goes backward beyond the startTime, negative totalTime). Don't remove if the timeline is reversed and the playhead isn't at 0, otherwise tl.progress(1).reverse() won't work. Only remove if the playhead is at the end and timeScale is positive, or if the playhead is at 0 and the timeScale is negative.\n\n if (!suppressEvents && !(isNegative && !prevTime) && (tTime || prevTime || isYoyo)) {\n // if prevTime and tTime are zero, we shouldn't fire the onReverseComplete. This could happen if you gsap.to(... {paused:true}).play();\n _callback(this, tTime === tDur ? \"onComplete\" : \"onReverseComplete\", true);\n\n this._prom && !(tTime < tDur && this.timeScale() > 0) && this._prom();\n }\n }\n }\n\n return this;\n };\n\n _proto3.targets = function targets() {\n return this._targets;\n };\n\n _proto3.invalidate = function invalidate(soft) {\n // \"soft\" gives us a way to clear out everything EXCEPT the recorded pre-\"from\" portion of from() tweens. Otherwise, for example, if you tween.progress(1).render(0, true true).invalidate(), the \"from\" values would persist and then on the next render, the from() tweens would initialize and the current value would match the \"from\" values, thus animate from the same value to the same value (no animation). We tap into this in ScrollTrigger's refresh() where we must push a tween to completion and then back again but honor its init state in case the tween is dependent on another tween further up on the page.\n (!soft || !this.vars.runBackwards) && (this._startAt = 0);\n this._pt = this._op = this._onUpdate = this._lazy = this.ratio = 0;\n this._ptLookup = [];\n this.timeline && this.timeline.invalidate(soft);\n return _Animation2.prototype.invalidate.call(this, soft);\n };\n\n _proto3.resetTo = function resetTo(property, value, start, startIsRelative, skipRecursion) {\n _tickerActive || _ticker.wake();\n this._ts || this.play();\n var time = Math.min(this._dur, (this._dp._time - this._start) * this._ts),\n ratio;\n this._initted || _initTween(this, time);\n ratio = this._ease(time / this._dur); // don't just get tween.ratio because it may not have rendered yet.\n // possible future addition to allow an object with multiple values to update, like tween.resetTo({x: 100, y: 200}); At this point, it doesn't seem worth the added kb given the fact that most users will likely opt for the convenient gsap.quickTo() way of interacting with this method.\n // if (_isObject(property)) { // performance optimization\n // \tfor (p in property) {\n // \t\tif (_updatePropTweens(this, p, property[p], value ? value[p] : null, start, ratio, time)) {\n // \t\t\treturn this.resetTo(property, value, start, startIsRelative); // if a PropTween wasn't found for the property, it'll get forced with a re-initialization so we need to jump out and start over again.\n // \t\t}\n // \t}\n // } else {\n\n if (_updatePropTweens(this, property, value, start, startIsRelative, ratio, time, skipRecursion)) {\n return this.resetTo(property, value, start, startIsRelative, 1); // if a PropTween wasn't found for the property, it'll get forced with a re-initialization so we need to jump out and start over again.\n } //}\n\n\n _alignPlayhead(this, 0);\n\n this.parent || _addLinkedListItem(this._dp, this, \"_first\", \"_last\", this._dp._sort ? \"_start\" : 0);\n return this.render(0);\n };\n\n _proto3.kill = function kill(targets, vars) {\n if (vars === void 0) {\n vars = \"all\";\n }\n\n if (!targets && (!vars || vars === \"all\")) {\n this._lazy = this._pt = 0;\n this.parent ? _interrupt(this) : this.scrollTrigger && this.scrollTrigger.kill(!!_reverting);\n return this;\n }\n\n if (this.timeline) {\n var tDur = this.timeline.totalDuration();\n this.timeline.killTweensOf(targets, vars, _overwritingTween && _overwritingTween.vars.overwrite !== true)._first || _interrupt(this); // if nothing is left tweening, interrupt.\n\n this.parent && tDur !== this.timeline.totalDuration() && _setDuration(this, this._dur * this.timeline._tDur / tDur, 0, 1); // if a nested tween is killed that changes the duration, it should affect this tween's duration. We must use the ratio, though, because sometimes the internal timeline is stretched like for keyframes where they don't all add up to whatever the parent tween's duration was set to.\n\n return this;\n }\n\n var parsedTargets = this._targets,\n killingTargets = targets ? toArray(targets) : parsedTargets,\n propTweenLookup = this._ptLookup,\n firstPT = this._pt,\n overwrittenProps,\n curLookup,\n curOverwriteProps,\n props,\n p,\n pt,\n i;\n\n if ((!vars || vars === \"all\") && _arraysMatch(parsedTargets, killingTargets)) {\n vars === \"all\" && (this._pt = 0);\n return _interrupt(this);\n }\n\n overwrittenProps = this._op = this._op || [];\n\n if (vars !== \"all\") {\n //so people can pass in a comma-delimited list of property names\n if (_isString(vars)) {\n p = {};\n\n _forEachName(vars, function (name) {\n return p[name] = 1;\n });\n\n vars = p;\n }\n\n vars = _addAliasesToVars(parsedTargets, vars);\n }\n\n i = parsedTargets.length;\n\n while (i--) {\n if (~killingTargets.indexOf(parsedTargets[i])) {\n curLookup = propTweenLookup[i];\n\n if (vars === \"all\") {\n overwrittenProps[i] = vars;\n props = curLookup;\n curOverwriteProps = {};\n } else {\n curOverwriteProps = overwrittenProps[i] = overwrittenProps[i] || {};\n props = vars;\n }\n\n for (p in props) {\n pt = curLookup && curLookup[p];\n\n if (pt) {\n if (!(\"kill\" in pt.d) || pt.d.kill(p) === true) {\n _removeLinkedListItem(this, pt, \"_pt\");\n }\n\n delete curLookup[p];\n }\n\n if (curOverwriteProps !== \"all\") {\n curOverwriteProps[p] = 1;\n }\n }\n }\n }\n\n this._initted && !this._pt && firstPT && _interrupt(this); //if all tweening properties are killed, kill the tween. Without this line, if there's a tween with multiple targets and then you killTweensOf() each target individually, the tween would technically still remain active and fire its onComplete even though there aren't any more properties tweening.\n\n return this;\n };\n\n Tween.to = function to(targets, vars) {\n return new Tween(targets, vars, arguments[2]);\n };\n\n Tween.from = function from(targets, vars) {\n return _createTweenType(1, arguments);\n };\n\n Tween.delayedCall = function delayedCall(delay, callback, params, scope) {\n return new Tween(callback, 0, {\n immediateRender: false,\n lazy: false,\n overwrite: false,\n delay: delay,\n onComplete: callback,\n onReverseComplete: callback,\n onCompleteParams: params,\n onReverseCompleteParams: params,\n callbackScope: scope\n }); // we must use onReverseComplete too for things like timeline.add(() => {...}) which should be triggered in BOTH directions (forward and reverse)\n };\n\n Tween.fromTo = function fromTo(targets, fromVars, toVars) {\n return _createTweenType(2, arguments);\n };\n\n Tween.set = function set(targets, vars) {\n vars.duration = 0;\n vars.repeatDelay || (vars.repeat = 0);\n return new Tween(targets, vars);\n };\n\n Tween.killTweensOf = function killTweensOf(targets, props, onlyActive) {\n return _globalTimeline.killTweensOf(targets, props, onlyActive);\n };\n\n return Tween;\n}(Animation);\n\n_setDefaults(Tween.prototype, {\n _targets: [],\n _lazy: 0,\n _startAt: 0,\n _op: 0,\n _onInit: 0\n}); //add the pertinent timeline methods to Tween instances so that users can chain conveniently and create a timeline automatically. (removed due to concerns that it'd ultimately add to more confusion especially for beginners)\n// _forEachName(\"to,from,fromTo,set,call,add,addLabel,addPause\", name => {\n// \tTween.prototype[name] = function() {\n// \t\tlet tl = new Timeline();\n// \t\treturn _addToTimeline(tl, this)[name].apply(tl, toArray(arguments));\n// \t}\n// });\n//for backward compatibility. Leverage the timeline calls.\n\n\n_forEachName(\"staggerTo,staggerFrom,staggerFromTo\", function (name) {\n Tween[name] = function () {\n var tl = new Timeline(),\n params = _slice.call(arguments, 0);\n\n params.splice(name === \"staggerFromTo\" ? 5 : 4, 0, 0);\n return tl[name].apply(tl, params);\n };\n});\n/*\n * --------------------------------------------------------------------------------------\n * PROPTWEEN\n * --------------------------------------------------------------------------------------\n */\n\n\nvar _setterPlain = function _setterPlain(target, property, value) {\n return target[property] = value;\n},\n _setterFunc = function _setterFunc(target, property, value) {\n return target[property](value);\n},\n _setterFuncWithParam = function _setterFuncWithParam(target, property, value, data) {\n return target[property](data.fp, value);\n},\n _setterAttribute = function _setterAttribute(target, property, value) {\n return target.setAttribute(property, value);\n},\n _getSetter = function _getSetter(target, property) {\n return _isFunction(target[property]) ? _setterFunc : _isUndefined(target[property]) && target.setAttribute ? _setterAttribute : _setterPlain;\n},\n _renderPlain = function _renderPlain(ratio, data) {\n return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 1000000) / 1000000, data);\n},\n _renderBoolean = function _renderBoolean(ratio, data) {\n return data.set(data.t, data.p, !!(data.s + data.c * ratio), data);\n},\n _renderComplexString = function _renderComplexString(ratio, data) {\n var pt = data._pt,\n s = \"\";\n\n if (!ratio && data.b) {\n //b = beginning string\n s = data.b;\n } else if (ratio === 1 && data.e) {\n //e = ending string\n s = data.e;\n } else {\n while (pt) {\n s = pt.p + (pt.m ? pt.m(pt.s + pt.c * ratio) : Math.round((pt.s + pt.c * ratio) * 10000) / 10000) + s; //we use the \"p\" property for the text inbetween (like a suffix). And in the context of a complex string, the modifier (m) is typically just Math.round(), like for RGB colors.\n\n pt = pt._next;\n }\n\n s += data.c; //we use the \"c\" of the PropTween to store the final chunk of non-numeric text.\n }\n\n data.set(data.t, data.p, s, data);\n},\n _renderPropTweens = function _renderPropTweens(ratio, data) {\n var pt = data._pt;\n\n while (pt) {\n pt.r(ratio, pt.d);\n pt = pt._next;\n }\n},\n _addPluginModifier = function _addPluginModifier(modifier, tween, target, property) {\n var pt = this._pt,\n next;\n\n while (pt) {\n next = pt._next;\n pt.p === property && pt.modifier(modifier, tween, target);\n pt = next;\n }\n},\n _killPropTweensOf = function _killPropTweensOf(property) {\n var pt = this._pt,\n hasNonDependentRemaining,\n next;\n\n while (pt) {\n next = pt._next;\n\n if (pt.p === property && !pt.op || pt.op === property) {\n _removeLinkedListItem(this, pt, \"_pt\");\n } else if (!pt.dep) {\n hasNonDependentRemaining = 1;\n }\n\n pt = next;\n }\n\n return !hasNonDependentRemaining;\n},\n _setterWithModifier = function _setterWithModifier(target, property, value, data) {\n data.mSet(target, property, data.m.call(data.tween, value, data.mt), data);\n},\n _sortPropTweensByPriority = function _sortPropTweensByPriority(parent) {\n var pt = parent._pt,\n next,\n pt2,\n first,\n last; //sorts the PropTween linked list in order of priority because some plugins need to do their work after ALL of the PropTweens were created (like RoundPropsPlugin and ModifiersPlugin)\n\n while (pt) {\n next = pt._next;\n pt2 = first;\n\n while (pt2 && pt2.pr > pt.pr) {\n pt2 = pt2._next;\n }\n\n if (pt._prev = pt2 ? pt2._prev : last) {\n pt._prev._next = pt;\n } else {\n first = pt;\n }\n\n if (pt._next = pt2) {\n pt2._prev = pt;\n } else {\n last = pt;\n }\n\n pt = next;\n }\n\n parent._pt = first;\n}; //PropTween key: t = target, p = prop, r = renderer, d = data, s = start, c = change, op = overwriteProperty (ONLY populated when it's different than p), pr = priority, _next/_prev for the linked list siblings, set = setter, m = modifier, mSet = modifierSetter (the original setter, before a modifier was added)\n\n\nexport var PropTween = /*#__PURE__*/function () {\n function PropTween(next, target, prop, start, change, renderer, data, setter, priority) {\n this.t = target;\n this.s = start;\n this.c = change;\n this.p = prop;\n this.r = renderer || _renderPlain;\n this.d = data || this;\n this.set = setter || _setterPlain;\n this.pr = priority || 0;\n this._next = next;\n\n if (next) {\n next._prev = this;\n }\n }\n\n var _proto4 = PropTween.prototype;\n\n _proto4.modifier = function modifier(func, tween, target) {\n this.mSet = this.mSet || this.set; //in case it was already set (a PropTween can only have one modifier)\n\n this.set = _setterWithModifier;\n this.m = func;\n this.mt = target; //modifier target\n\n this.tween = tween;\n };\n\n return PropTween;\n}(); //Initialization tasks\n\n_forEachName(_callbackNames + \"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\", function (name) {\n return _reservedProps[name] = 1;\n});\n\n_globals.TweenMax = _globals.TweenLite = Tween;\n_globals.TimelineLite = _globals.TimelineMax = Timeline;\n_globalTimeline = new Timeline({\n sortChildren: false,\n defaults: _defaults,\n autoRemoveChildren: true,\n id: \"root\",\n smoothChildTiming: true\n});\n_config.stringFilter = _colorStringFilter;\n\nvar _media = [],\n _listeners = {},\n _emptyArray = [],\n _lastMediaTime = 0,\n _contextID = 0,\n _dispatch = function _dispatch(type) {\n return (_listeners[type] || _emptyArray).map(function (f) {\n return f();\n });\n},\n _onMediaChange = function _onMediaChange() {\n var time = Date.now(),\n matches = [];\n\n if (time - _lastMediaTime > 2) {\n _dispatch(\"matchMediaInit\");\n\n _media.forEach(function (c) {\n var queries = c.queries,\n conditions = c.conditions,\n match,\n p,\n anyMatch,\n toggled;\n\n for (p in queries) {\n match = _win.matchMedia(queries[p]).matches; // Firefox doesn't update the \"matches\" property of the MediaQueryList object correctly - it only does so as it calls its change handler - so we must re-create a media query here to ensure it's accurate.\n\n match && (anyMatch = 1);\n\n if (match !== conditions[p]) {\n conditions[p] = match;\n toggled = 1;\n }\n }\n\n if (toggled) {\n c.revert();\n anyMatch && matches.push(c);\n }\n });\n\n _dispatch(\"matchMediaRevert\");\n\n matches.forEach(function (c) {\n return c.onMatch(c, function (func) {\n return c.add(null, func);\n });\n });\n _lastMediaTime = time;\n\n _dispatch(\"matchMedia\");\n }\n};\n\nvar Context = /*#__PURE__*/function () {\n function Context(func, scope) {\n this.selector = scope && selector(scope);\n this.data = [];\n this._r = []; // returned/cleanup functions\n\n this.isReverted = false;\n this.id = _contextID++; // to work around issues that frameworks like Vue cause by making things into Proxies which make it impossible to do something like _media.indexOf(this) because \"this\" would no longer refer to the Context instance itself - it'd refer to a Proxy! We needed a way to identify the context uniquely\n\n func && this.add(func);\n }\n\n var _proto5 = Context.prototype;\n\n _proto5.add = function add(name, func, scope) {\n // possible future addition if we need the ability to add() an animation to a context and for whatever reason cannot create that animation inside of a context.add(() => {...}) function.\n // if (name && _isFunction(name.revert)) {\n // \tthis.data.push(name);\n // \treturn (name._ctx = this);\n // }\n if (_isFunction(name)) {\n scope = func;\n func = name;\n name = _isFunction;\n }\n\n var self = this,\n f = function f() {\n var prev = _context,\n prevSelector = self.selector,\n result;\n prev && prev !== self && prev.data.push(self);\n scope && (self.selector = selector(scope));\n _context = self;\n result = func.apply(self, arguments);\n _isFunction(result) && self._r.push(result);\n _context = prev;\n self.selector = prevSelector;\n self.isReverted = false;\n return result;\n };\n\n self.last = f;\n return name === _isFunction ? f(self, function (func) {\n return self.add(null, func);\n }) : name ? self[name] = f : f;\n };\n\n _proto5.ignore = function ignore(func) {\n var prev = _context;\n _context = null;\n func(this);\n _context = prev;\n };\n\n _proto5.getTweens = function getTweens() {\n var a = [];\n this.data.forEach(function (e) {\n return e instanceof Context ? a.push.apply(a, e.getTweens()) : e instanceof Tween && !(e.parent && e.parent.data === \"nested\") && a.push(e);\n });\n return a;\n };\n\n _proto5.clear = function clear() {\n this._r.length = this.data.length = 0;\n };\n\n _proto5.kill = function kill(revert, matchMedia) {\n var _this4 = this;\n\n if (revert) {\n (function () {\n var tweens = _this4.getTweens(),\n i = _this4.data.length,\n t;\n\n while (i--) {\n // Flip plugin tweens are very different in that they should actually be pushed to their end. The plugin replaces the timeline's .revert() method to do exactly that. But we also need to remove any of those nested tweens inside the flip timeline so that they don't get individually reverted.\n t = _this4.data[i];\n\n if (t.data === \"isFlip\") {\n t.revert();\n t.getChildren(true, true, false).forEach(function (tween) {\n return tweens.splice(tweens.indexOf(tween), 1);\n });\n }\n } // save as an object so that we can cache the globalTime for each tween to optimize performance during the sort\n\n\n tweens.map(function (t) {\n return {\n g: t._dur || t._delay || t._sat && !t._sat.vars.immediateRender ? t.globalTime(0) : -Infinity,\n t: t\n };\n }).sort(function (a, b) {\n return b.g - a.g || -Infinity;\n }).forEach(function (o) {\n return o.t.revert(revert);\n }); // note: all of the _startAt tweens should be reverted in reverse order that they were created, and they'll all have the same globalTime (-1) so the \" || -1\" in the sort keeps the order properly.\n\n i = _this4.data.length;\n\n while (i--) {\n // make sure we loop backwards so that, for example, SplitTexts that were created later on the same element get reverted first\n t = _this4.data[i];\n\n if (t instanceof Timeline) {\n if (t.data !== \"nested\") {\n t.scrollTrigger && t.scrollTrigger.revert();\n t.kill(); // don't revert() the timeline because that's duplicating efforts since we already reverted all the tweens\n }\n } else {\n !(t instanceof Tween) && t.revert && t.revert(revert);\n }\n }\n\n _this4._r.forEach(function (f) {\n return f(revert, _this4);\n });\n\n _this4.isReverted = true;\n })();\n } else {\n this.data.forEach(function (e) {\n return e.kill && e.kill();\n });\n }\n\n this.clear();\n\n if (matchMedia) {\n var i = _media.length;\n\n while (i--) {\n // previously, we checked _media.indexOf(this), but some frameworks like Vue enforce Proxy objects that make it impossible to get the proper result that way, so we must use a unique ID number instead.\n _media[i].id === this.id && _media.splice(i, 1);\n }\n }\n } // killWithCleanup() {\n // \tthis.kill();\n // \tthis._r.forEach(f => f(false, this));\n // }\n ;\n\n _proto5.revert = function revert(config) {\n this.kill(config || {});\n };\n\n return Context;\n}();\n\nvar MatchMedia = /*#__PURE__*/function () {\n function MatchMedia(scope) {\n this.contexts = [];\n this.scope = scope;\n _context && _context.data.push(this);\n }\n\n var _proto6 = MatchMedia.prototype;\n\n _proto6.add = function add(conditions, func, scope) {\n _isObject(conditions) || (conditions = {\n matches: conditions\n });\n var context = new Context(0, scope || this.scope),\n cond = context.conditions = {},\n mq,\n p,\n active;\n _context && !context.selector && (context.selector = _context.selector); // in case a context is created inside a context. Like a gsap.matchMedia() that's inside a scoped gsap.context()\n\n this.contexts.push(context);\n func = context.add(\"onMatch\", func);\n context.queries = conditions;\n\n for (p in conditions) {\n if (p === \"all\") {\n active = 1;\n } else {\n mq = _win.matchMedia(conditions[p]);\n\n if (mq) {\n _media.indexOf(context) < 0 && _media.push(context);\n (cond[p] = mq.matches) && (active = 1);\n mq.addListener ? mq.addListener(_onMediaChange) : mq.addEventListener(\"change\", _onMediaChange);\n }\n }\n }\n\n active && func(context, function (f) {\n return context.add(null, f);\n });\n return this;\n } // refresh() {\n // \tlet time = _lastMediaTime,\n // \t\tmedia = _media;\n // \t_lastMediaTime = -1;\n // \t_media = this.contexts;\n // \t_onMediaChange();\n // \t_lastMediaTime = time;\n // \t_media = media;\n // }\n ;\n\n _proto6.revert = function revert(config) {\n this.kill(config || {});\n };\n\n _proto6.kill = function kill(revert) {\n this.contexts.forEach(function (c) {\n return c.kill(revert, true);\n });\n };\n\n return MatchMedia;\n}();\n/*\n * --------------------------------------------------------------------------------------\n * GSAP\n * --------------------------------------------------------------------------------------\n */\n\n\nvar _gsap = {\n registerPlugin: function registerPlugin() {\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n args.forEach(function (config) {\n return _createPlugin(config);\n });\n },\n timeline: function timeline(vars) {\n return new Timeline(vars);\n },\n getTweensOf: function getTweensOf(targets, onlyActive) {\n return _globalTimeline.getTweensOf(targets, onlyActive);\n },\n getProperty: function getProperty(target, property, unit, uncache) {\n _isString(target) && (target = toArray(target)[0]); //in case selector text or an array is passed in\n\n var getter = _getCache(target || {}).get,\n format = unit ? _passThrough : _numericIfPossible;\n\n unit === \"native\" && (unit = \"\");\n return !target ? target : !property ? function (property, unit, uncache) {\n return format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));\n } : format((_plugins[property] && _plugins[property].get || getter)(target, property, unit, uncache));\n },\n quickSetter: function quickSetter(target, property, unit) {\n target = toArray(target);\n\n if (target.length > 1) {\n var setters = target.map(function (t) {\n return gsap.quickSetter(t, property, unit);\n }),\n l = setters.length;\n return function (value) {\n var i = l;\n\n while (i--) {\n setters[i](value);\n }\n };\n }\n\n target = target[0] || {};\n\n var Plugin = _plugins[property],\n cache = _getCache(target),\n p = cache.harness && (cache.harness.aliases || {})[property] || property,\n // in case it's an alias, like \"rotate\" for \"rotation\".\n setter = Plugin ? function (value) {\n var p = new Plugin();\n _quickTween._pt = 0;\n p.init(target, unit ? value + unit : value, _quickTween, 0, [target]);\n p.render(1, p);\n _quickTween._pt && _renderPropTweens(1, _quickTween);\n } : cache.set(target, p);\n\n return Plugin ? setter : function (value) {\n return setter(target, p, unit ? value + unit : value, cache, 1);\n };\n },\n quickTo: function quickTo(target, property, vars) {\n var _setDefaults2;\n\n var tween = gsap.to(target, _setDefaults((_setDefaults2 = {}, _setDefaults2[property] = \"+=0.1\", _setDefaults2.paused = true, _setDefaults2.stagger = 0, _setDefaults2), vars || {})),\n func = function func(value, start, startIsRelative) {\n return tween.resetTo(property, value, start, startIsRelative);\n };\n\n func.tween = tween;\n return func;\n },\n isTweening: function isTweening(targets) {\n return _globalTimeline.getTweensOf(targets, true).length > 0;\n },\n defaults: function defaults(value) {\n value && value.ease && (value.ease = _parseEase(value.ease, _defaults.ease));\n return _mergeDeep(_defaults, value || {});\n },\n config: function config(value) {\n return _mergeDeep(_config, value || {});\n },\n registerEffect: function registerEffect(_ref3) {\n var name = _ref3.name,\n effect = _ref3.effect,\n plugins = _ref3.plugins,\n defaults = _ref3.defaults,\n extendTimeline = _ref3.extendTimeline;\n (plugins || \"\").split(\",\").forEach(function (pluginName) {\n return pluginName && !_plugins[pluginName] && !_globals[pluginName] && _warn(name + \" effect requires \" + pluginName + \" plugin.\");\n });\n\n _effects[name] = function (targets, vars, tl) {\n return effect(toArray(targets), _setDefaults(vars || {}, defaults), tl);\n };\n\n if (extendTimeline) {\n Timeline.prototype[name] = function (targets, vars, position) {\n return this.add(_effects[name](targets, _isObject(vars) ? vars : (position = vars) && {}, this), position);\n };\n }\n },\n registerEase: function registerEase(name, ease) {\n _easeMap[name] = _parseEase(ease);\n },\n parseEase: function parseEase(ease, defaultEase) {\n return arguments.length ? _parseEase(ease, defaultEase) : _easeMap;\n },\n getById: function getById(id) {\n return _globalTimeline.getById(id);\n },\n exportRoot: function exportRoot(vars, includeDelayedCalls) {\n if (vars === void 0) {\n vars = {};\n }\n\n var tl = new Timeline(vars),\n child,\n next;\n tl.smoothChildTiming = _isNotFalse(vars.smoothChildTiming);\n\n _globalTimeline.remove(tl);\n\n tl._dp = 0; //otherwise it'll get re-activated when adding children and be re-introduced into _globalTimeline's linked list (then added to itself).\n\n tl._time = tl._tTime = _globalTimeline._time;\n child = _globalTimeline._first;\n\n while (child) {\n next = child._next;\n\n if (includeDelayedCalls || !(!child._dur && child instanceof Tween && child.vars.onComplete === child._targets[0])) {\n _addToTimeline(tl, child, child._start - child._delay);\n }\n\n child = next;\n }\n\n _addToTimeline(_globalTimeline, tl, 0);\n\n return tl;\n },\n context: function context(func, scope) {\n return func ? new Context(func, scope) : _context;\n },\n matchMedia: function matchMedia(scope) {\n return new MatchMedia(scope);\n },\n matchMediaRefresh: function matchMediaRefresh() {\n return _media.forEach(function (c) {\n var cond = c.conditions,\n found,\n p;\n\n for (p in cond) {\n if (cond[p]) {\n cond[p] = false;\n found = 1;\n }\n }\n\n found && c.revert();\n }) || _onMediaChange();\n },\n addEventListener: function addEventListener(type, callback) {\n var a = _listeners[type] || (_listeners[type] = []);\n ~a.indexOf(callback) || a.push(callback);\n },\n removeEventListener: function removeEventListener(type, callback) {\n var a = _listeners[type],\n i = a && a.indexOf(callback);\n i >= 0 && a.splice(i, 1);\n },\n utils: {\n wrap: wrap,\n wrapYoyo: wrapYoyo,\n distribute: distribute,\n random: random,\n snap: snap,\n normalize: normalize,\n getUnit: getUnit,\n clamp: clamp,\n splitColor: splitColor,\n toArray: toArray,\n selector: selector,\n mapRange: mapRange,\n pipe: pipe,\n unitize: unitize,\n interpolate: interpolate,\n shuffle: shuffle\n },\n install: _install,\n effects: _effects,\n ticker: _ticker,\n updateRoot: Timeline.updateRoot,\n plugins: _plugins,\n globalTimeline: _globalTimeline,\n core: {\n PropTween: PropTween,\n globals: _addGlobal,\n Tween: Tween,\n Timeline: Timeline,\n Animation: Animation,\n getCache: _getCache,\n _removeLinkedListItem: _removeLinkedListItem,\n reverting: function reverting() {\n return _reverting;\n },\n context: function context(toAdd) {\n if (toAdd && _context) {\n _context.data.push(toAdd);\n\n toAdd._ctx = _context;\n }\n\n return _context;\n },\n suppressOverwrites: function suppressOverwrites(value) {\n return _suppressOverwrites = value;\n }\n }\n};\n\n_forEachName(\"to,from,fromTo,delayedCall,set,killTweensOf\", function (name) {\n return _gsap[name] = Tween[name];\n});\n\n_ticker.add(Timeline.updateRoot);\n\n_quickTween = _gsap.to({}, {\n duration: 0\n}); // ---- EXTRA PLUGINS --------------------------------------------------------\n\nvar _getPluginPropTween = function _getPluginPropTween(plugin, prop) {\n var pt = plugin._pt;\n\n while (pt && pt.p !== prop && pt.op !== prop && pt.fp !== prop) {\n pt = pt._next;\n }\n\n return pt;\n},\n _addModifiers = function _addModifiers(tween, modifiers) {\n var targets = tween._targets,\n p,\n i,\n pt;\n\n for (p in modifiers) {\n i = targets.length;\n\n while (i--) {\n pt = tween._ptLookup[i][p];\n\n if (pt && (pt = pt.d)) {\n if (pt._pt) {\n // is a plugin\n pt = _getPluginPropTween(pt, p);\n }\n\n pt && pt.modifier && pt.modifier(modifiers[p], tween, targets[i], p);\n }\n }\n }\n},\n _buildModifierPlugin = function _buildModifierPlugin(name, modifier) {\n return {\n name: name,\n rawVars: 1,\n //don't pre-process function-based values or \"random()\" strings.\n init: function init(target, vars, tween) {\n tween._onInit = function (tween) {\n var temp, p;\n\n if (_isString(vars)) {\n temp = {};\n\n _forEachName(vars, function (name) {\n return temp[name] = 1;\n }); //if the user passes in a comma-delimited list of property names to roundProps, like \"x,y\", we round to whole numbers.\n\n\n vars = temp;\n }\n\n if (modifier) {\n temp = {};\n\n for (p in vars) {\n temp[p] = modifier(vars[p]);\n }\n\n vars = temp;\n }\n\n _addModifiers(tween, vars);\n };\n }\n };\n}; //register core plugins\n\n\nexport var gsap = _gsap.registerPlugin({\n name: \"attr\",\n init: function init(target, vars, tween, index, targets) {\n var p, pt, v;\n this.tween = tween;\n\n for (p in vars) {\n v = target.getAttribute(p) || \"\";\n pt = this.add(target, \"setAttribute\", (v || 0) + \"\", vars[p], index, targets, 0, 0, p);\n pt.op = p;\n pt.b = v; // record the beginning value so we can revert()\n\n this._props.push(p);\n }\n },\n render: function render(ratio, data) {\n var pt = data._pt;\n\n while (pt) {\n _reverting ? pt.set(pt.t, pt.p, pt.b, pt) : pt.r(ratio, pt.d); // if reverting, go back to the original (pt.b)\n\n pt = pt._next;\n }\n }\n}, {\n name: \"endArray\",\n init: function init(target, value) {\n var i = value.length;\n\n while (i--) {\n this.add(target, i, target[i] || 0, value[i], 0, 0, 0, 0, 0, 1);\n }\n }\n}, _buildModifierPlugin(\"roundProps\", _roundModifier), _buildModifierPlugin(\"modifiers\"), _buildModifierPlugin(\"snap\", snap)) || _gsap; //to prevent the core plugins from being dropped via aggressive tree shaking, we must include them in the variable declaration in this way.\n\nTween.version = Timeline.version = gsap.version = \"3.12.7\";\n_coreReady = 1;\n_windowExists() && _wake();\nvar Power0 = _easeMap.Power0,\n Power1 = _easeMap.Power1,\n Power2 = _easeMap.Power2,\n Power3 = _easeMap.Power3,\n Power4 = _easeMap.Power4,\n Linear = _easeMap.Linear,\n Quad = _easeMap.Quad,\n Cubic = _easeMap.Cubic,\n Quart = _easeMap.Quart,\n Quint = _easeMap.Quint,\n Strong = _easeMap.Strong,\n Elastic = _easeMap.Elastic,\n Back = _easeMap.Back,\n SteppedEase = _easeMap.SteppedEase,\n Bounce = _easeMap.Bounce,\n Sine = _easeMap.Sine,\n Expo = _easeMap.Expo,\n Circ = _easeMap.Circ;\nexport { Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ };\nexport { Tween as TweenMax, Tween as TweenLite, Timeline as TimelineMax, Timeline as TimelineLite, gsap as default, wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, selector, mapRange, pipe, unitize, interpolate, shuffle }; //export some internal methods/orojects for use in CSSPlugin so that we can externalize that file and allow custom builds that exclude it.\n\nexport { _getProperty, _numExp, _numWithUnitExp, _isString, _isUndefined, _renderComplexString, _relExp, _setDefaults, _removeLinkedListItem, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _replaceRandom, _checkPlugin, _plugins, _ticker, _config, _roundModifier, _round, _missingPlugin, _getSetter, _getCache, _colorExp, _parseRelative };","/*!\n * CSSPlugin 3.12.7\n * https://gsap.com\n *\n * Copyright 2008-2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license or for\n * Club GSAP members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n\n/* eslint-disable */\nimport { gsap, _getProperty, _numExp, _numWithUnitExp, getUnit, _isString, _isUndefined, _renderComplexString, _relExp, _forEachName, _sortPropTweensByPriority, _colorStringFilter, _checkPlugin, _replaceRandom, _plugins, GSCache, PropTween, _config, _ticker, _round, _missingPlugin, _getSetter, _getCache, _colorExp, _parseRelative, _setDefaults, _removeLinkedListItem //for the commented-out className feature.\n} from \"./gsap-core.js\";\n\nvar _win,\n _doc,\n _docElement,\n _pluginInitted,\n _tempDiv,\n _tempDivStyler,\n _recentSetterPlugin,\n _reverting,\n _windowExists = function _windowExists() {\n return typeof window !== \"undefined\";\n},\n _transformProps = {},\n _RAD2DEG = 180 / Math.PI,\n _DEG2RAD = Math.PI / 180,\n _atan2 = Math.atan2,\n _bigNum = 1e8,\n _capsExp = /([A-Z])/g,\n _horizontalExp = /(left|right|width|margin|padding|x)/i,\n _complexExp = /[\\s,\\(]\\S/,\n _propertyAliases = {\n autoAlpha: \"opacity,visibility\",\n scale: \"scaleX,scaleY\",\n alpha: \"opacity\"\n},\n _renderCSSProp = function _renderCSSProp(ratio, data) {\n return data.set(data.t, data.p, Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);\n},\n _renderPropWithEnd = function _renderPropWithEnd(ratio, data) {\n return data.set(data.t, data.p, ratio === 1 ? data.e : Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u, data);\n},\n _renderCSSPropWithBeginning = function _renderCSSPropWithBeginning(ratio, data) {\n return data.set(data.t, data.p, ratio ? Math.round((data.s + data.c * ratio) * 10000) / 10000 + data.u : data.b, data);\n},\n //if units change, we need a way to render the original unit/value when the tween goes all the way back to the beginning (ratio:0)\n_renderRoundedCSSProp = function _renderRoundedCSSProp(ratio, data) {\n var value = data.s + data.c * ratio;\n data.set(data.t, data.p, ~~(value + (value < 0 ? -.5 : .5)) + data.u, data);\n},\n _renderNonTweeningValue = function _renderNonTweeningValue(ratio, data) {\n return data.set(data.t, data.p, ratio ? data.e : data.b, data);\n},\n _renderNonTweeningValueOnlyAtEnd = function _renderNonTweeningValueOnlyAtEnd(ratio, data) {\n return data.set(data.t, data.p, ratio !== 1 ? data.b : data.e, data);\n},\n _setterCSSStyle = function _setterCSSStyle(target, property, value) {\n return target.style[property] = value;\n},\n _setterCSSProp = function _setterCSSProp(target, property, value) {\n return target.style.setProperty(property, value);\n},\n _setterTransform = function _setterTransform(target, property, value) {\n return target._gsap[property] = value;\n},\n _setterScale = function _setterScale(target, property, value) {\n return target._gsap.scaleX = target._gsap.scaleY = value;\n},\n _setterScaleWithRender = function _setterScaleWithRender(target, property, value, data, ratio) {\n var cache = target._gsap;\n cache.scaleX = cache.scaleY = value;\n cache.renderTransform(ratio, cache);\n},\n _setterTransformWithRender = function _setterTransformWithRender(target, property, value, data, ratio) {\n var cache = target._gsap;\n cache[property] = value;\n cache.renderTransform(ratio, cache);\n},\n _transformProp = \"transform\",\n _transformOriginProp = _transformProp + \"Origin\",\n _saveStyle = function _saveStyle(property, isNotCSS) {\n var _this = this;\n\n var target = this.target,\n style = target.style,\n cache = target._gsap;\n\n if (property in _transformProps && style) {\n this.tfm = this.tfm || {};\n\n if (property !== \"transform\") {\n property = _propertyAliases[property] || property;\n ~property.indexOf(\",\") ? property.split(\",\").forEach(function (a) {\n return _this.tfm[a] = _get(target, a);\n }) : this.tfm[property] = cache.x ? cache[property] : _get(target, property); // note: scale would map to \"scaleX,scaleY\", thus we loop and apply them both.\n\n property === _transformOriginProp && (this.tfm.zOrigin = cache.zOrigin);\n } else {\n return _propertyAliases.transform.split(\",\").forEach(function (p) {\n return _saveStyle.call(_this, p, isNotCSS);\n });\n }\n\n if (this.props.indexOf(_transformProp) >= 0) {\n return;\n }\n\n if (cache.svg) {\n this.svgo = target.getAttribute(\"data-svg-origin\");\n this.props.push(_transformOriginProp, isNotCSS, \"\");\n }\n\n property = _transformProp;\n }\n\n (style || isNotCSS) && this.props.push(property, isNotCSS, style[property]);\n},\n _removeIndependentTransforms = function _removeIndependentTransforms(style) {\n if (style.translate) {\n style.removeProperty(\"translate\");\n style.removeProperty(\"scale\");\n style.removeProperty(\"rotate\");\n }\n},\n _revertStyle = function _revertStyle() {\n var props = this.props,\n target = this.target,\n style = target.style,\n cache = target._gsap,\n i,\n p;\n\n for (i = 0; i < props.length; i += 3) {\n // stored like this: property, isNotCSS, value\n if (!props[i + 1]) {\n props[i + 2] ? style[props[i]] = props[i + 2] : style.removeProperty(props[i].substr(0, 2) === \"--\" ? props[i] : props[i].replace(_capsExp, \"-$1\").toLowerCase());\n } else if (props[i + 1] === 2) {\n // non-CSS value (function-based)\n target[props[i]](props[i + 2]);\n } else {\n // non-CSS value (not function-based)\n target[props[i]] = props[i + 2];\n }\n }\n\n if (this.tfm) {\n for (p in this.tfm) {\n cache[p] = this.tfm[p];\n }\n\n if (cache.svg) {\n cache.renderTransform();\n target.setAttribute(\"data-svg-origin\", this.svgo || \"\");\n }\n\n i = _reverting();\n\n if ((!i || !i.isStart) && !style[_transformProp]) {\n _removeIndependentTransforms(style);\n\n if (cache.zOrigin && style[_transformOriginProp]) {\n style[_transformOriginProp] += \" \" + cache.zOrigin + \"px\"; // since we're uncaching, we must put the zOrigin back into the transformOrigin so that we can pull it out accurately when we parse again. Otherwise, we'd lose the z portion of the origin since we extract it to protect from Safari bugs.\n\n cache.zOrigin = 0;\n cache.renderTransform();\n }\n\n cache.uncache = 1; // if it's a startAt that's being reverted in the _initTween() of the core, we don't need to uncache transforms. This is purely a performance optimization.\n }\n }\n},\n _getStyleSaver = function _getStyleSaver(target, properties) {\n var saver = {\n target: target,\n props: [],\n revert: _revertStyle,\n save: _saveStyle\n };\n target._gsap || gsap.core.getCache(target); // just make sure there's a _gsap cache defined because we read from it in _saveStyle() and it's more efficient to just check it here once.\n\n properties && target.style && target.nodeType && properties.split(\",\").forEach(function (p) {\n return saver.save(p);\n }); // make sure it's a DOM node too.\n\n return saver;\n},\n _supports3D,\n _createElement = function _createElement(type, ns) {\n var e = _doc.createElementNS ? _doc.createElementNS((ns || \"http://www.w3.org/1999/xhtml\").replace(/^https/, \"http\"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making \"style\" inaccessible.\n\n return e && e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://gsap.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).\n},\n _getComputedProperty = function _getComputedProperty(target, property, skipPrefixFallback) {\n var cs = getComputedStyle(target);\n return cs[property] || cs.getPropertyValue(property.replace(_capsExp, \"-$1\").toLowerCase()) || cs.getPropertyValue(property) || !skipPrefixFallback && _getComputedProperty(target, _checkPropPrefix(property) || property, 1) || \"\"; //css variables may not need caps swapped out for dashes and lowercase.\n},\n _prefixes = \"O,Moz,ms,Ms,Webkit\".split(\",\"),\n _checkPropPrefix = function _checkPropPrefix(property, element, preferPrefix) {\n var e = element || _tempDiv,\n s = e.style,\n i = 5;\n\n if (property in s && !preferPrefix) {\n return property;\n }\n\n property = property.charAt(0).toUpperCase() + property.substr(1);\n\n while (i-- && !(_prefixes[i] + property in s)) {}\n\n return i < 0 ? null : (i === 3 ? \"ms\" : i >= 0 ? _prefixes[i] : \"\") + property;\n},\n _initCore = function _initCore() {\n if (_windowExists() && window.document) {\n _win = window;\n _doc = _win.document;\n _docElement = _doc.documentElement;\n _tempDiv = _createElement(\"div\") || {\n style: {}\n };\n _tempDivStyler = _createElement(\"div\");\n _transformProp = _checkPropPrefix(_transformProp);\n _transformOriginProp = _transformProp + \"Origin\";\n _tempDiv.style.cssText = \"border-width:0;line-height:0;position:absolute;padding:0\"; //make sure to override certain properties that may contaminate measurements, in case the user has overreaching style sheets.\n\n _supports3D = !!_checkPropPrefix(\"perspective\");\n _reverting = gsap.core.reverting;\n _pluginInitted = 1;\n }\n},\n _getReparentedCloneBBox = function _getReparentedCloneBBox(target) {\n //works around issues in some browsers (like Firefox) that don't correctly report getBBox() on SVG elements inside a element and/or . We try creating an SVG, adding it to the documentElement and toss the element in there so that it's definitely part of the rendering tree, then grab the bbox and if it works, we actually swap out the original getBBox() method for our own that does these extra steps whenever getBBox is needed. This helps ensure that performance is optimal (only do all these extra steps when absolutely necessary...most elements don't need it).\n var owner = target.ownerSVGElement,\n svg = _createElement(\"svg\", owner && owner.getAttribute(\"xmlns\") || \"http://www.w3.org/2000/svg\"),\n clone = target.cloneNode(true),\n bbox;\n\n clone.style.display = \"block\";\n svg.appendChild(clone);\n\n _docElement.appendChild(svg);\n\n try {\n bbox = clone.getBBox();\n } catch (e) {}\n\n svg.removeChild(clone);\n\n _docElement.removeChild(svg);\n\n return bbox;\n},\n _getAttributeFallbacks = function _getAttributeFallbacks(target, attributesArray) {\n var i = attributesArray.length;\n\n while (i--) {\n if (target.hasAttribute(attributesArray[i])) {\n return target.getAttribute(attributesArray[i]);\n }\n }\n},\n _getBBox = function _getBBox(target) {\n var bounds, cloned;\n\n try {\n bounds = target.getBBox(); //Firefox throws errors if you try calling getBBox() on an SVG element that's not rendered (like in a or ). https://bugzilla.mozilla.org/show_bug.cgi?id=612118\n } catch (error) {\n bounds = _getReparentedCloneBBox(target);\n cloned = 1;\n }\n\n bounds && (bounds.width || bounds.height) || cloned || (bounds = _getReparentedCloneBBox(target)); //some browsers (like Firefox) misreport the bounds if the element has zero width and height (it just assumes it's at x:0, y:0), thus we need to manually grab the position in that case.\n\n return bounds && !bounds.width && !bounds.x && !bounds.y ? {\n x: +_getAttributeFallbacks(target, [\"x\", \"cx\", \"x1\"]) || 0,\n y: +_getAttributeFallbacks(target, [\"y\", \"cy\", \"y1\"]) || 0,\n width: 0,\n height: 0\n } : bounds;\n},\n _isSVG = function _isSVG(e) {\n return !!(e.getCTM && (!e.parentNode || e.ownerSVGElement) && _getBBox(e));\n},\n //reports if the element is an SVG on which getBBox() actually works\n_removeProperty = function _removeProperty(target, property) {\n if (property) {\n var style = target.style,\n first2Chars;\n\n if (property in _transformProps && property !== _transformOriginProp) {\n property = _transformProp;\n }\n\n if (style.removeProperty) {\n first2Chars = property.substr(0, 2);\n\n if (first2Chars === \"ms\" || property.substr(0, 6) === \"webkit\") {\n //Microsoft and some Webkit browsers don't conform to the standard of capitalizing the first prefix character, so we adjust so that when we prefix the caps with a dash, it's correct (otherwise it'd be \"ms-transform\" instead of \"-ms-transform\" for IE9, for example)\n property = \"-\" + property;\n }\n\n style.removeProperty(first2Chars === \"--\" ? property : property.replace(_capsExp, \"-$1\").toLowerCase());\n } else {\n //note: old versions of IE use \"removeAttribute()\" instead of \"removeProperty()\"\n style.removeAttribute(property);\n }\n }\n},\n _addNonTweeningPT = function _addNonTweeningPT(plugin, target, property, beginning, end, onlySetAtEnd) {\n var pt = new PropTween(plugin._pt, target, property, 0, 1, onlySetAtEnd ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue);\n plugin._pt = pt;\n pt.b = beginning;\n pt.e = end;\n\n plugin._props.push(property);\n\n return pt;\n},\n _nonConvertibleUnits = {\n deg: 1,\n rad: 1,\n turn: 1\n},\n _nonStandardLayouts = {\n grid: 1,\n flex: 1\n},\n //takes a single value like 20px and converts it to the unit specified, like \"%\", returning only the numeric amount.\n_convertToUnit = function _convertToUnit(target, property, value, unit) {\n var curValue = parseFloat(value) || 0,\n curUnit = (value + \"\").trim().substr((curValue + \"\").length) || \"px\",\n // some browsers leave extra whitespace at the beginning of CSS variables, hence the need to trim()\n style = _tempDiv.style,\n horizontal = _horizontalExp.test(property),\n isRootSVG = target.tagName.toLowerCase() === \"svg\",\n measureProperty = (isRootSVG ? \"client\" : \"offset\") + (horizontal ? \"Width\" : \"Height\"),\n amount = 100,\n toPixels = unit === \"px\",\n toPercent = unit === \"%\",\n px,\n parent,\n cache,\n isSVG;\n\n if (unit === curUnit || !curValue || _nonConvertibleUnits[unit] || _nonConvertibleUnits[curUnit]) {\n return curValue;\n }\n\n curUnit !== \"px\" && !toPixels && (curValue = _convertToUnit(target, property, value, \"px\"));\n isSVG = target.getCTM && _isSVG(target);\n\n if ((toPercent || curUnit === \"%\") && (_transformProps[property] || ~property.indexOf(\"adius\"))) {\n px = isSVG ? target.getBBox()[horizontal ? \"width\" : \"height\"] : target[measureProperty];\n return _round(toPercent ? curValue / px * amount : curValue / 100 * px);\n }\n\n style[horizontal ? \"width\" : \"height\"] = amount + (toPixels ? curUnit : unit);\n parent = unit !== \"rem\" && ~property.indexOf(\"adius\") || unit === \"em\" && target.appendChild && !isRootSVG ? target : target.parentNode;\n\n if (isSVG) {\n parent = (target.ownerSVGElement || {}).parentNode;\n }\n\n if (!parent || parent === _doc || !parent.appendChild) {\n parent = _doc.body;\n }\n\n cache = parent._gsap;\n\n if (cache && toPercent && cache.width && horizontal && cache.time === _ticker.time && !cache.uncache) {\n return _round(curValue / cache.width * amount);\n } else {\n if (toPercent && (property === \"height\" || property === \"width\")) {\n // if we're dealing with width/height that's inside a container with padding and/or it's a flexbox/grid container, we must apply it to the target itself rather than the _tempDiv in order to ensure complete accuracy, factoring in the parent's padding.\n var v = target.style[property];\n target.style[property] = amount + unit;\n px = target[measureProperty];\n v ? target.style[property] = v : _removeProperty(target, property);\n } else {\n (toPercent || curUnit === \"%\") && !_nonStandardLayouts[_getComputedProperty(parent, \"display\")] && (style.position = _getComputedProperty(target, \"position\"));\n parent === target && (style.position = \"static\"); // like for borderRadius, if it's a % we must have it relative to the target itself but that may not have position: relative or position: absolute in which case it'd go up the chain until it finds its offsetParent (bad). position: static protects against that.\n\n parent.appendChild(_tempDiv);\n px = _tempDiv[measureProperty];\n parent.removeChild(_tempDiv);\n style.position = \"absolute\";\n }\n\n if (horizontal && toPercent) {\n cache = _getCache(parent);\n cache.time = _ticker.time;\n cache.width = parent[measureProperty];\n }\n }\n\n return _round(toPixels ? px * curValue / amount : px && curValue ? amount / px * curValue : 0);\n},\n _get = function _get(target, property, unit, uncache) {\n var value;\n _pluginInitted || _initCore();\n\n if (property in _propertyAliases && property !== \"transform\") {\n property = _propertyAliases[property];\n\n if (~property.indexOf(\",\")) {\n property = property.split(\",\")[0];\n }\n }\n\n if (_transformProps[property] && property !== \"transform\") {\n value = _parseTransform(target, uncache);\n value = property !== \"transformOrigin\" ? value[property] : value.svg ? value.origin : _firstTwoOnly(_getComputedProperty(target, _transformOriginProp)) + \" \" + value.zOrigin + \"px\";\n } else {\n value = target.style[property];\n\n if (!value || value === \"auto\" || uncache || ~(value + \"\").indexOf(\"calc(\")) {\n value = _specialProps[property] && _specialProps[property](target, property, unit) || _getComputedProperty(target, property) || _getProperty(target, property) || (property === \"opacity\" ? 1 : 0); // note: some browsers, like Firefox, don't report borderRadius correctly! Instead, it only reports every corner like borderTopLeftRadius\n }\n }\n\n return unit && !~(value + \"\").trim().indexOf(\" \") ? _convertToUnit(target, property, value, unit) + unit : value;\n},\n _tweenComplexCSSString = function _tweenComplexCSSString(target, prop, start, end) {\n // note: we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within a plugin too, thus \"this\" would refer to the plugin.\n if (!start || start === \"none\") {\n // some browsers like Safari actually PREFER the prefixed property and mis-report the unprefixed value like clipPath (BUG). In other words, even though clipPath exists in the style (\"clipPath\" in target.style) and it's set in the CSS properly (along with -webkit-clip-path), Safari reports clipPath as \"none\" whereas WebkitClipPath reports accurately like \"ellipse(100% 0% at 50% 0%)\", so in this case we must SWITCH to using the prefixed property instead. See https://gsap.com/forums/topic/18310-clippath-doesnt-work-on-ios/\n var p = _checkPropPrefix(prop, target, 1),\n s = p && _getComputedProperty(target, p, 1);\n\n if (s && s !== start) {\n prop = p;\n start = s;\n } else if (prop === \"borderColor\") {\n start = _getComputedProperty(target, \"borderTopColor\"); // Firefox bug: always reports \"borderColor\" as \"\", so we must fall back to borderTopColor. See https://gsap.com/forums/topic/24583-how-to-return-colors-that-i-had-after-reverse/\n }\n }\n\n var pt = new PropTween(this._pt, target.style, prop, 0, 1, _renderComplexString),\n index = 0,\n matchIndex = 0,\n a,\n result,\n startValues,\n startNum,\n color,\n startValue,\n endValue,\n endNum,\n chunk,\n endUnit,\n startUnit,\n endValues;\n pt.b = start;\n pt.e = end;\n start += \"\"; // ensure values are strings\n\n end += \"\";\n\n if (end === \"auto\") {\n startValue = target.style[prop];\n target.style[prop] = end;\n end = _getComputedProperty(target, prop) || end;\n startValue ? target.style[prop] = startValue : _removeProperty(target, prop);\n }\n\n a = [start, end];\n\n _colorStringFilter(a); // pass an array with the starting and ending values and let the filter do whatever it needs to the values. If colors are found, it returns true and then we must match where the color shows up order-wise because for things like boxShadow, sometimes the browser provides the computed values with the color FIRST, but the user provides it with the color LAST, so flip them if necessary. Same for drop-shadow().\n\n\n start = a[0];\n end = a[1];\n startValues = start.match(_numWithUnitExp) || [];\n endValues = end.match(_numWithUnitExp) || [];\n\n if (endValues.length) {\n while (result = _numWithUnitExp.exec(end)) {\n endValue = result[0];\n chunk = end.substring(index, result.index);\n\n if (color) {\n color = (color + 1) % 5;\n } else if (chunk.substr(-5) === \"rgba(\" || chunk.substr(-5) === \"hsla(\") {\n color = 1;\n }\n\n if (endValue !== (startValue = startValues[matchIndex++] || \"\")) {\n startNum = parseFloat(startValue) || 0;\n startUnit = startValue.substr((startNum + \"\").length);\n endValue.charAt(1) === \"=\" && (endValue = _parseRelative(startNum, endValue) + startUnit);\n endNum = parseFloat(endValue);\n endUnit = endValue.substr((endNum + \"\").length);\n index = _numWithUnitExp.lastIndex - endUnit.length;\n\n if (!endUnit) {\n //if something like \"perspective:300\" is passed in and we must add a unit to the end\n endUnit = endUnit || _config.units[prop] || startUnit;\n\n if (index === end.length) {\n end += endUnit;\n pt.e += endUnit;\n }\n }\n\n if (startUnit !== endUnit) {\n startNum = _convertToUnit(target, prop, startValue, endUnit) || 0;\n } // these nested PropTweens are handled in a special way - we'll never actually call a render or setter method on them. We'll just loop through them in the parent complex string PropTween's render method.\n\n\n pt._pt = {\n _next: pt._pt,\n p: chunk || matchIndex === 1 ? chunk : \",\",\n //note: SVG spec allows omission of comma/space when a negative sign is wedged between two numbers, like 2.5-5.3 instead of 2.5,-5.3 but when tweening, the negative value may switch to positive, so we insert the comma just in case.\n s: startNum,\n c: endNum - startNum,\n m: color && color < 4 || prop === \"zIndex\" ? Math.round : 0\n };\n }\n }\n\n pt.c = index < end.length ? end.substring(index, end.length) : \"\"; //we use the \"c\" of the PropTween to store the final part of the string (after the last number)\n } else {\n pt.r = prop === \"display\" && end === \"none\" ? _renderNonTweeningValueOnlyAtEnd : _renderNonTweeningValue;\n }\n\n _relExp.test(end) && (pt.e = 0); //if the end string contains relative values or dynamic random(...) values, delete the end it so that on the final render we don't actually set it to the string with += or -= characters (forces it to use the calculated value).\n\n this._pt = pt; //start the linked list with this new PropTween. Remember, we call _tweenComplexCSSString.call(pluginInstance...) to ensure that it's scoped properly. We may call it from within another plugin too, thus \"this\" would refer to the plugin.\n\n return pt;\n},\n _keywordToPercent = {\n top: \"0%\",\n bottom: \"100%\",\n left: \"0%\",\n right: \"100%\",\n center: \"50%\"\n},\n _convertKeywordsToPercentages = function _convertKeywordsToPercentages(value) {\n var split = value.split(\" \"),\n x = split[0],\n y = split[1] || \"50%\";\n\n if (x === \"top\" || x === \"bottom\" || y === \"left\" || y === \"right\") {\n //the user provided them in the wrong order, so flip them\n value = x;\n x = y;\n y = value;\n }\n\n split[0] = _keywordToPercent[x] || x;\n split[1] = _keywordToPercent[y] || y;\n return split.join(\" \");\n},\n _renderClearProps = function _renderClearProps(ratio, data) {\n if (data.tween && data.tween._time === data.tween._dur) {\n var target = data.t,\n style = target.style,\n props = data.u,\n cache = target._gsap,\n prop,\n clearTransforms,\n i;\n\n if (props === \"all\" || props === true) {\n style.cssText = \"\";\n clearTransforms = 1;\n } else {\n props = props.split(\",\");\n i = props.length;\n\n while (--i > -1) {\n prop = props[i];\n\n if (_transformProps[prop]) {\n clearTransforms = 1;\n prop = prop === \"transformOrigin\" ? _transformOriginProp : _transformProp;\n }\n\n _removeProperty(target, prop);\n }\n }\n\n if (clearTransforms) {\n _removeProperty(target, _transformProp);\n\n if (cache) {\n cache.svg && target.removeAttribute(\"transform\");\n style.scale = style.rotate = style.translate = \"none\";\n\n _parseTransform(target, 1); // force all the cached values back to \"normal\"/identity, otherwise if there's another tween that's already set to render transforms on this element, it could display the wrong values.\n\n\n cache.uncache = 1;\n\n _removeIndependentTransforms(style);\n }\n }\n }\n},\n // note: specialProps should return 1 if (and only if) they have a non-zero priority. It indicates we need to sort the linked list.\n_specialProps = {\n clearProps: function clearProps(plugin, target, property, endValue, tween) {\n if (tween.data !== \"isFromStart\") {\n var pt = plugin._pt = new PropTween(plugin._pt, target, property, 0, 0, _renderClearProps);\n pt.u = endValue;\n pt.pr = -10;\n pt.tween = tween;\n\n plugin._props.push(property);\n\n return 1;\n }\n }\n /* className feature (about 0.4kb gzipped).\n , className(plugin, target, property, endValue, tween) {\n \tlet _renderClassName = (ratio, data) => {\n \t\t\tdata.css.render(ratio, data.css);\n \t\t\tif (!ratio || ratio === 1) {\n \t\t\t\tlet inline = data.rmv,\n \t\t\t\t\ttarget = data.t,\n \t\t\t\t\tp;\n \t\t\t\ttarget.setAttribute(\"class\", ratio ? data.e : data.b);\n \t\t\t\tfor (p in inline) {\n \t\t\t\t\t_removeProperty(target, p);\n \t\t\t\t}\n \t\t\t}\n \t\t},\n \t\t_getAllStyles = (target) => {\n \t\t\tlet styles = {},\n \t\t\t\tcomputed = getComputedStyle(target),\n \t\t\t\tp;\n \t\t\tfor (p in computed) {\n \t\t\t\tif (isNaN(p) && p !== \"cssText\" && p !== \"length\") {\n \t\t\t\t\tstyles[p] = computed[p];\n \t\t\t\t}\n \t\t\t}\n \t\t\t_setDefaults(styles, _parseTransform(target, 1));\n \t\t\treturn styles;\n \t\t},\n \t\tstartClassList = target.getAttribute(\"class\"),\n \t\tstyle = target.style,\n \t\tcssText = style.cssText,\n \t\tcache = target._gsap,\n \t\tclassPT = cache.classPT,\n \t\tinlineToRemoveAtEnd = {},\n \t\tdata = {t:target, plugin:plugin, rmv:inlineToRemoveAtEnd, b:startClassList, e:(endValue.charAt(1) !== \"=\") ? endValue : startClassList.replace(new RegExp(\"(?:\\\\s|^)\" + endValue.substr(2) + \"(?![\\\\w-])\"), \"\") + ((endValue.charAt(0) === \"+\") ? \" \" + endValue.substr(2) : \"\")},\n \t\tchangingVars = {},\n \t\tstartVars = _getAllStyles(target),\n \t\ttransformRelated = /(transform|perspective)/i,\n \t\tendVars, p;\n \tif (classPT) {\n \t\tclassPT.r(1, classPT.d);\n \t\t_removeLinkedListItem(classPT.d.plugin, classPT, \"_pt\");\n \t}\n \ttarget.setAttribute(\"class\", data.e);\n \tendVars = _getAllStyles(target, true);\n \ttarget.setAttribute(\"class\", startClassList);\n \tfor (p in endVars) {\n \t\tif (endVars[p] !== startVars[p] && !transformRelated.test(p)) {\n \t\t\tchangingVars[p] = endVars[p];\n \t\t\tif (!style[p] && style[p] !== \"0\") {\n \t\t\t\tinlineToRemoveAtEnd[p] = 1;\n \t\t\t}\n \t\t}\n \t}\n \tcache.classPT = plugin._pt = new PropTween(plugin._pt, target, \"className\", 0, 0, _renderClassName, data, 0, -11);\n \tif (style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://gsap.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.\n \t\tstyle.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).\n \t}\n \t_parseTransform(target, true); //to clear the caching of transforms\n \tdata.css = new gsap.plugins.css();\n \tdata.css.init(target, changingVars, tween);\n \tplugin._props.push(...data.css._props);\n \treturn 1;\n }\n */\n\n},\n\n/*\n * --------------------------------------------------------------------------------------\n * TRANSFORMS\n * --------------------------------------------------------------------------------------\n */\n_identity2DMatrix = [1, 0, 0, 1, 0, 0],\n _rotationalProperties = {},\n _isNullTransform = function _isNullTransform(value) {\n return value === \"matrix(1, 0, 0, 1, 0, 0)\" || value === \"none\" || !value;\n},\n _getComputedTransformMatrixAsArray = function _getComputedTransformMatrixAsArray(target) {\n var matrixString = _getComputedProperty(target, _transformProp);\n\n return _isNullTransform(matrixString) ? _identity2DMatrix : matrixString.substr(7).match(_numExp).map(_round);\n},\n _getMatrix = function _getMatrix(target, force2D) {\n var cache = target._gsap || _getCache(target),\n style = target.style,\n matrix = _getComputedTransformMatrixAsArray(target),\n parent,\n nextSibling,\n temp,\n addedToDOM;\n\n if (cache.svg && target.getAttribute(\"transform\")) {\n temp = target.transform.baseVal.consolidate().matrix; //ensures that even complex values like \"translate(50,60) rotate(135,0,0)\" are parsed because it mashes it into a matrix.\n\n matrix = [temp.a, temp.b, temp.c, temp.d, temp.e, temp.f];\n return matrix.join(\",\") === \"1,0,0,1,0,0\" ? _identity2DMatrix : matrix;\n } else if (matrix === _identity2DMatrix && !target.offsetParent && target !== _docElement && !cache.svg) {\n //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397\n //browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not \"none\". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px).\n temp = style.display;\n style.display = \"block\";\n parent = target.parentNode;\n\n if (!parent || !target.offsetParent && !target.getBoundingClientRect().width) {\n // note: in 3.3.0 we switched target.offsetParent to _doc.body.contains(target) to avoid [sometimes unnecessary] MutationObserver calls but that wasn't adequate because there are edge cases where nested position: fixed elements need to get reparented to accurately sense transforms. See https://github.com/greensock/GSAP/issues/388 and https://github.com/greensock/GSAP/issues/375. Note: position: fixed elements report a null offsetParent but they could also be invisible because they're in an ancestor with display: none, so we check getBoundingClientRect(). We only want to alter the DOM if we absolutely have to because it can cause iframe content to reload, like a Vimeo video.\n addedToDOM = 1; //flag\n\n nextSibling = target.nextElementSibling;\n\n _docElement.appendChild(target); //we must add it to the DOM in order to get values properly\n\n }\n\n matrix = _getComputedTransformMatrixAsArray(target);\n temp ? style.display = temp : _removeProperty(target, \"display\");\n\n if (addedToDOM) {\n nextSibling ? parent.insertBefore(target, nextSibling) : parent ? parent.appendChild(target) : _docElement.removeChild(target);\n }\n }\n\n return force2D && matrix.length > 6 ? [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]] : matrix;\n},\n _applySVGOrigin = function _applySVGOrigin(target, origin, originIsAbsolute, smooth, matrixArray, pluginToAddPropTweensTo) {\n var cache = target._gsap,\n matrix = matrixArray || _getMatrix(target, true),\n xOriginOld = cache.xOrigin || 0,\n yOriginOld = cache.yOrigin || 0,\n xOffsetOld = cache.xOffset || 0,\n yOffsetOld = cache.yOffset || 0,\n a = matrix[0],\n b = matrix[1],\n c = matrix[2],\n d = matrix[3],\n tx = matrix[4],\n ty = matrix[5],\n originSplit = origin.split(\" \"),\n xOrigin = parseFloat(originSplit[0]) || 0,\n yOrigin = parseFloat(originSplit[1]) || 0,\n bounds,\n determinant,\n x,\n y;\n\n if (!originIsAbsolute) {\n bounds = _getBBox(target);\n xOrigin = bounds.x + (~originSplit[0].indexOf(\"%\") ? xOrigin / 100 * bounds.width : xOrigin);\n yOrigin = bounds.y + (~(originSplit[1] || originSplit[0]).indexOf(\"%\") ? yOrigin / 100 * bounds.height : yOrigin); // if (!(\"xOrigin\" in cache) && (xOrigin || yOrigin)) { // added in 3.12.3, reverted in 3.12.4; requires more exploration\n // \txOrigin -= bounds.x;\n // \tyOrigin -= bounds.y;\n // }\n } else if (matrix !== _identity2DMatrix && (determinant = a * d - b * c)) {\n //if it's zero (like if scaleX and scaleY are zero), skip it to avoid errors with dividing by zero.\n x = xOrigin * (d / determinant) + yOrigin * (-c / determinant) + (c * ty - d * tx) / determinant;\n y = xOrigin * (-b / determinant) + yOrigin * (a / determinant) - (a * ty - b * tx) / determinant;\n xOrigin = x;\n yOrigin = y; // theory: we only had to do this for smoothing and it assumes that the previous one was not originIsAbsolute.\n }\n\n if (smooth || smooth !== false && cache.smooth) {\n tx = xOrigin - xOriginOld;\n ty = yOrigin - yOriginOld;\n cache.xOffset = xOffsetOld + (tx * a + ty * c) - tx;\n cache.yOffset = yOffsetOld + (tx * b + ty * d) - ty;\n } else {\n cache.xOffset = cache.yOffset = 0;\n }\n\n cache.xOrigin = xOrigin;\n cache.yOrigin = yOrigin;\n cache.smooth = !!smooth;\n cache.origin = origin;\n cache.originIsAbsolute = !!originIsAbsolute;\n target.style[_transformOriginProp] = \"0px 0px\"; //otherwise, if someone sets an origin via CSS, it will likely interfere with the SVG transform attribute ones (because remember, we're baking the origin into the matrix() value).\n\n if (pluginToAddPropTweensTo) {\n _addNonTweeningPT(pluginToAddPropTweensTo, cache, \"xOrigin\", xOriginOld, xOrigin);\n\n _addNonTweeningPT(pluginToAddPropTweensTo, cache, \"yOrigin\", yOriginOld, yOrigin);\n\n _addNonTweeningPT(pluginToAddPropTweensTo, cache, \"xOffset\", xOffsetOld, cache.xOffset);\n\n _addNonTweeningPT(pluginToAddPropTweensTo, cache, \"yOffset\", yOffsetOld, cache.yOffset);\n }\n\n target.setAttribute(\"data-svg-origin\", xOrigin + \" \" + yOrigin);\n},\n _parseTransform = function _parseTransform(target, uncache) {\n var cache = target._gsap || new GSCache(target);\n\n if (\"x\" in cache && !uncache && !cache.uncache) {\n return cache;\n }\n\n var style = target.style,\n invertedScaleX = cache.scaleX < 0,\n px = \"px\",\n deg = \"deg\",\n cs = getComputedStyle(target),\n origin = _getComputedProperty(target, _transformOriginProp) || \"0\",\n x,\n y,\n z,\n scaleX,\n scaleY,\n rotation,\n rotationX,\n rotationY,\n skewX,\n skewY,\n perspective,\n xOrigin,\n yOrigin,\n matrix,\n angle,\n cos,\n sin,\n a,\n b,\n c,\n d,\n a12,\n a22,\n t1,\n t2,\n t3,\n a13,\n a23,\n a33,\n a42,\n a43,\n a32;\n x = y = z = rotation = rotationX = rotationY = skewX = skewY = perspective = 0;\n scaleX = scaleY = 1;\n cache.svg = !!(target.getCTM && _isSVG(target));\n\n if (cs.translate) {\n // accommodate independent transforms by combining them into normal ones.\n if (cs.translate !== \"none\" || cs.scale !== \"none\" || cs.rotate !== \"none\") {\n style[_transformProp] = (cs.translate !== \"none\" ? \"translate3d(\" + (cs.translate + \" 0 0\").split(\" \").slice(0, 3).join(\", \") + \") \" : \"\") + (cs.rotate !== \"none\" ? \"rotate(\" + cs.rotate + \") \" : \"\") + (cs.scale !== \"none\" ? \"scale(\" + cs.scale.split(\" \").join(\",\") + \") \" : \"\") + (cs[_transformProp] !== \"none\" ? cs[_transformProp] : \"\");\n }\n\n style.scale = style.rotate = style.translate = \"none\";\n }\n\n matrix = _getMatrix(target, cache.svg);\n\n if (cache.svg) {\n if (cache.uncache) {\n // if cache.uncache is true (and maybe if origin is 0,0), we need to set element.style.transformOrigin = (cache.xOrigin - bbox.x) + \"px \" + (cache.yOrigin - bbox.y) + \"px\". Previously we let the data-svg-origin stay instead, but when introducing revert(), it complicated things.\n t2 = target.getBBox();\n origin = cache.xOrigin - t2.x + \"px \" + (cache.yOrigin - t2.y) + \"px\";\n t1 = \"\";\n } else {\n t1 = !uncache && target.getAttribute(\"data-svg-origin\"); // Remember, to work around browser inconsistencies we always force SVG elements' transformOrigin to 0,0 and offset the translation accordingly.\n }\n\n _applySVGOrigin(target, t1 || origin, !!t1 || cache.originIsAbsolute, cache.smooth !== false, matrix);\n }\n\n xOrigin = cache.xOrigin || 0;\n yOrigin = cache.yOrigin || 0;\n\n if (matrix !== _identity2DMatrix) {\n a = matrix[0]; //a11\n\n b = matrix[1]; //a21\n\n c = matrix[2]; //a31\n\n d = matrix[3]; //a41\n\n x = a12 = matrix[4];\n y = a22 = matrix[5]; //2D matrix\n\n if (matrix.length === 6) {\n scaleX = Math.sqrt(a * a + b * b);\n scaleY = Math.sqrt(d * d + c * c);\n rotation = a || b ? _atan2(b, a) * _RAD2DEG : 0; //note: if scaleX is 0, we cannot accurately measure rotation. Same for skewX with a scaleY of 0. Therefore, we default to the previously recorded value (or zero if that doesn't exist).\n\n skewX = c || d ? _atan2(c, d) * _RAD2DEG + rotation : 0;\n skewX && (scaleY *= Math.abs(Math.cos(skewX * _DEG2RAD)));\n\n if (cache.svg) {\n x -= xOrigin - (xOrigin * a + yOrigin * c);\n y -= yOrigin - (xOrigin * b + yOrigin * d);\n } //3D matrix\n\n } else {\n a32 = matrix[6];\n a42 = matrix[7];\n a13 = matrix[8];\n a23 = matrix[9];\n a33 = matrix[10];\n a43 = matrix[11];\n x = matrix[12];\n y = matrix[13];\n z = matrix[14];\n angle = _atan2(a32, a33);\n rotationX = angle * _RAD2DEG; //rotationX\n\n if (angle) {\n cos = Math.cos(-angle);\n sin = Math.sin(-angle);\n t1 = a12 * cos + a13 * sin;\n t2 = a22 * cos + a23 * sin;\n t3 = a32 * cos + a33 * sin;\n a13 = a12 * -sin + a13 * cos;\n a23 = a22 * -sin + a23 * cos;\n a33 = a32 * -sin + a33 * cos;\n a43 = a42 * -sin + a43 * cos;\n a12 = t1;\n a22 = t2;\n a32 = t3;\n } //rotationY\n\n\n angle = _atan2(-c, a33);\n rotationY = angle * _RAD2DEG;\n\n if (angle) {\n cos = Math.cos(-angle);\n sin = Math.sin(-angle);\n t1 = a * cos - a13 * sin;\n t2 = b * cos - a23 * sin;\n t3 = c * cos - a33 * sin;\n a43 = d * sin + a43 * cos;\n a = t1;\n b = t2;\n c = t3;\n } //rotationZ\n\n\n angle = _atan2(b, a);\n rotation = angle * _RAD2DEG;\n\n if (angle) {\n cos = Math.cos(angle);\n sin = Math.sin(angle);\n t1 = a * cos + b * sin;\n t2 = a12 * cos + a22 * sin;\n b = b * cos - a * sin;\n a22 = a22 * cos - a12 * sin;\n a = t1;\n a12 = t2;\n }\n\n if (rotationX && Math.abs(rotationX) + Math.abs(rotation) > 359.9) {\n //when rotationY is set, it will often be parsed as 180 degrees different than it should be, and rotationX and rotation both being 180 (it looks the same), so we adjust for that here.\n rotationX = rotation = 0;\n rotationY = 180 - rotationY;\n }\n\n scaleX = _round(Math.sqrt(a * a + b * b + c * c));\n scaleY = _round(Math.sqrt(a22 * a22 + a32 * a32));\n angle = _atan2(a12, a22);\n skewX = Math.abs(angle) > 0.0002 ? angle * _RAD2DEG : 0;\n perspective = a43 ? 1 / (a43 < 0 ? -a43 : a43) : 0;\n }\n\n if (cache.svg) {\n //sense if there are CSS transforms applied on an SVG element in which case we must overwrite them when rendering. The transform attribute is more reliable cross-browser, but we can't just remove the CSS ones because they may be applied in a CSS rule somewhere (not just inline).\n t1 = target.getAttribute(\"transform\");\n cache.forceCSS = target.setAttribute(\"transform\", \"\") || !_isNullTransform(_getComputedProperty(target, _transformProp));\n t1 && target.setAttribute(\"transform\", t1);\n }\n }\n\n if (Math.abs(skewX) > 90 && Math.abs(skewX) < 270) {\n if (invertedScaleX) {\n scaleX *= -1;\n skewX += rotation <= 0 ? 180 : -180;\n rotation += rotation <= 0 ? 180 : -180;\n } else {\n scaleY *= -1;\n skewX += skewX <= 0 ? 180 : -180;\n }\n }\n\n uncache = uncache || cache.uncache;\n cache.x = x - ((cache.xPercent = x && (!uncache && cache.xPercent || (Math.round(target.offsetWidth / 2) === Math.round(-x) ? -50 : 0))) ? target.offsetWidth * cache.xPercent / 100 : 0) + px;\n cache.y = y - ((cache.yPercent = y && (!uncache && cache.yPercent || (Math.round(target.offsetHeight / 2) === Math.round(-y) ? -50 : 0))) ? target.offsetHeight * cache.yPercent / 100 : 0) + px;\n cache.z = z + px;\n cache.scaleX = _round(scaleX);\n cache.scaleY = _round(scaleY);\n cache.rotation = _round(rotation) + deg;\n cache.rotationX = _round(rotationX) + deg;\n cache.rotationY = _round(rotationY) + deg;\n cache.skewX = skewX + deg;\n cache.skewY = skewY + deg;\n cache.transformPerspective = perspective + px;\n\n if (cache.zOrigin = parseFloat(origin.split(\" \")[2]) || !uncache && cache.zOrigin || 0) {\n style[_transformOriginProp] = _firstTwoOnly(origin);\n }\n\n cache.xOffset = cache.yOffset = 0;\n cache.force3D = _config.force3D;\n cache.renderTransform = cache.svg ? _renderSVGTransforms : _supports3D ? _renderCSSTransforms : _renderNon3DTransforms;\n cache.uncache = 0;\n return cache;\n},\n _firstTwoOnly = function _firstTwoOnly(value) {\n return (value = value.split(\" \"))[0] + \" \" + value[1];\n},\n //for handling transformOrigin values, stripping out the 3rd dimension\n_addPxTranslate = function _addPxTranslate(target, start, value) {\n var unit = getUnit(start);\n return _round(parseFloat(start) + parseFloat(_convertToUnit(target, \"x\", value + \"px\", unit))) + unit;\n},\n _renderNon3DTransforms = function _renderNon3DTransforms(ratio, cache) {\n cache.z = \"0px\";\n cache.rotationY = cache.rotationX = \"0deg\";\n cache.force3D = 0;\n\n _renderCSSTransforms(ratio, cache);\n},\n _zeroDeg = \"0deg\",\n _zeroPx = \"0px\",\n _endParenthesis = \") \",\n _renderCSSTransforms = function _renderCSSTransforms(ratio, cache) {\n var _ref = cache || this,\n xPercent = _ref.xPercent,\n yPercent = _ref.yPercent,\n x = _ref.x,\n y = _ref.y,\n z = _ref.z,\n rotation = _ref.rotation,\n rotationY = _ref.rotationY,\n rotationX = _ref.rotationX,\n skewX = _ref.skewX,\n skewY = _ref.skewY,\n scaleX = _ref.scaleX,\n scaleY = _ref.scaleY,\n transformPerspective = _ref.transformPerspective,\n force3D = _ref.force3D,\n target = _ref.target,\n zOrigin = _ref.zOrigin,\n transforms = \"\",\n use3D = force3D === \"auto\" && ratio && ratio !== 1 || force3D === true; // Safari has a bug that causes it not to render 3D transform-origin values properly, so we force the z origin to 0, record it in the cache, and then do the math here to offset the translate values accordingly (basically do the 3D transform-origin part manually)\n\n\n if (zOrigin && (rotationX !== _zeroDeg || rotationY !== _zeroDeg)) {\n var angle = parseFloat(rotationY) * _DEG2RAD,\n a13 = Math.sin(angle),\n a33 = Math.cos(angle),\n cos;\n\n angle = parseFloat(rotationX) * _DEG2RAD;\n cos = Math.cos(angle);\n x = _addPxTranslate(target, x, a13 * cos * -zOrigin);\n y = _addPxTranslate(target, y, -Math.sin(angle) * -zOrigin);\n z = _addPxTranslate(target, z, a33 * cos * -zOrigin + zOrigin);\n }\n\n if (transformPerspective !== _zeroPx) {\n transforms += \"perspective(\" + transformPerspective + _endParenthesis;\n }\n\n if (xPercent || yPercent) {\n transforms += \"translate(\" + xPercent + \"%, \" + yPercent + \"%) \";\n }\n\n if (use3D || x !== _zeroPx || y !== _zeroPx || z !== _zeroPx) {\n transforms += z !== _zeroPx || use3D ? \"translate3d(\" + x + \", \" + y + \", \" + z + \") \" : \"translate(\" + x + \", \" + y + _endParenthesis;\n }\n\n if (rotation !== _zeroDeg) {\n transforms += \"rotate(\" + rotation + _endParenthesis;\n }\n\n if (rotationY !== _zeroDeg) {\n transforms += \"rotateY(\" + rotationY + _endParenthesis;\n }\n\n if (rotationX !== _zeroDeg) {\n transforms += \"rotateX(\" + rotationX + _endParenthesis;\n }\n\n if (skewX !== _zeroDeg || skewY !== _zeroDeg) {\n transforms += \"skew(\" + skewX + \", \" + skewY + _endParenthesis;\n }\n\n if (scaleX !== 1 || scaleY !== 1) {\n transforms += \"scale(\" + scaleX + \", \" + scaleY + _endParenthesis;\n }\n\n target.style[_transformProp] = transforms || \"translate(0, 0)\";\n},\n _renderSVGTransforms = function _renderSVGTransforms(ratio, cache) {\n var _ref2 = cache || this,\n xPercent = _ref2.xPercent,\n yPercent = _ref2.yPercent,\n x = _ref2.x,\n y = _ref2.y,\n rotation = _ref2.rotation,\n skewX = _ref2.skewX,\n skewY = _ref2.skewY,\n scaleX = _ref2.scaleX,\n scaleY = _ref2.scaleY,\n target = _ref2.target,\n xOrigin = _ref2.xOrigin,\n yOrigin = _ref2.yOrigin,\n xOffset = _ref2.xOffset,\n yOffset = _ref2.yOffset,\n forceCSS = _ref2.forceCSS,\n tx = parseFloat(x),\n ty = parseFloat(y),\n a11,\n a21,\n a12,\n a22,\n temp;\n\n rotation = parseFloat(rotation);\n skewX = parseFloat(skewX);\n skewY = parseFloat(skewY);\n\n if (skewY) {\n //for performance reasons, we combine all skewing into the skewX and rotation values. Remember, a skewY of 10 degrees looks the same as a rotation of 10 degrees plus a skewX of 10 degrees.\n skewY = parseFloat(skewY);\n skewX += skewY;\n rotation += skewY;\n }\n\n if (rotation || skewX) {\n rotation *= _DEG2RAD;\n skewX *= _DEG2RAD;\n a11 = Math.cos(rotation) * scaleX;\n a21 = Math.sin(rotation) * scaleX;\n a12 = Math.sin(rotation - skewX) * -scaleY;\n a22 = Math.cos(rotation - skewX) * scaleY;\n\n if (skewX) {\n skewY *= _DEG2RAD;\n temp = Math.tan(skewX - skewY);\n temp = Math.sqrt(1 + temp * temp);\n a12 *= temp;\n a22 *= temp;\n\n if (skewY) {\n temp = Math.tan(skewY);\n temp = Math.sqrt(1 + temp * temp);\n a11 *= temp;\n a21 *= temp;\n }\n }\n\n a11 = _round(a11);\n a21 = _round(a21);\n a12 = _round(a12);\n a22 = _round(a22);\n } else {\n a11 = scaleX;\n a22 = scaleY;\n a21 = a12 = 0;\n }\n\n if (tx && !~(x + \"\").indexOf(\"px\") || ty && !~(y + \"\").indexOf(\"px\")) {\n tx = _convertToUnit(target, \"x\", x, \"px\");\n ty = _convertToUnit(target, \"y\", y, \"px\");\n }\n\n if (xOrigin || yOrigin || xOffset || yOffset) {\n tx = _round(tx + xOrigin - (xOrigin * a11 + yOrigin * a12) + xOffset);\n ty = _round(ty + yOrigin - (xOrigin * a21 + yOrigin * a22) + yOffset);\n }\n\n if (xPercent || yPercent) {\n //The SVG spec doesn't support percentage-based translation in the \"transform\" attribute, so we merge it into the translation to simulate it.\n temp = target.getBBox();\n tx = _round(tx + xPercent / 100 * temp.width);\n ty = _round(ty + yPercent / 100 * temp.height);\n }\n\n temp = \"matrix(\" + a11 + \",\" + a21 + \",\" + a12 + \",\" + a22 + \",\" + tx + \",\" + ty + \")\";\n target.setAttribute(\"transform\", temp);\n forceCSS && (target.style[_transformProp] = temp); //some browsers prioritize CSS transforms over the transform attribute. When we sense that the user has CSS transforms applied, we must overwrite them this way (otherwise some browser simply won't render the transform attribute changes!)\n},\n _addRotationalPropTween = function _addRotationalPropTween(plugin, target, property, startNum, endValue) {\n var cap = 360,\n isString = _isString(endValue),\n endNum = parseFloat(endValue) * (isString && ~endValue.indexOf(\"rad\") ? _RAD2DEG : 1),\n change = endNum - startNum,\n finalValue = startNum + change + \"deg\",\n direction,\n pt;\n\n if (isString) {\n direction = endValue.split(\"_\")[1];\n\n if (direction === \"short\") {\n change %= cap;\n\n if (change !== change % (cap / 2)) {\n change += change < 0 ? cap : -cap;\n }\n }\n\n if (direction === \"cw\" && change < 0) {\n change = (change + cap * _bigNum) % cap - ~~(change / cap) * cap;\n } else if (direction === \"ccw\" && change > 0) {\n change = (change - cap * _bigNum) % cap - ~~(change / cap) * cap;\n }\n }\n\n plugin._pt = pt = new PropTween(plugin._pt, target, property, startNum, change, _renderPropWithEnd);\n pt.e = finalValue;\n pt.u = \"deg\";\n\n plugin._props.push(property);\n\n return pt;\n},\n _assign = function _assign(target, source) {\n // Internet Explorer doesn't have Object.assign(), so we recreate it here.\n for (var p in source) {\n target[p] = source[p];\n }\n\n return target;\n},\n _addRawTransformPTs = function _addRawTransformPTs(plugin, transforms, target) {\n //for handling cases where someone passes in a whole transform string, like transform: \"scale(2, 3) rotate(20deg) translateY(30em)\"\n var startCache = _assign({}, target._gsap),\n exclude = \"perspective,force3D,transformOrigin,svgOrigin\",\n style = target.style,\n endCache,\n p,\n startValue,\n endValue,\n startNum,\n endNum,\n startUnit,\n endUnit;\n\n if (startCache.svg) {\n startValue = target.getAttribute(\"transform\");\n target.setAttribute(\"transform\", \"\");\n style[_transformProp] = transforms;\n endCache = _parseTransform(target, 1);\n\n _removeProperty(target, _transformProp);\n\n target.setAttribute(\"transform\", startValue);\n } else {\n startValue = getComputedStyle(target)[_transformProp];\n style[_transformProp] = transforms;\n endCache = _parseTransform(target, 1);\n style[_transformProp] = startValue;\n }\n\n for (p in _transformProps) {\n startValue = startCache[p];\n endValue = endCache[p];\n\n if (startValue !== endValue && exclude.indexOf(p) < 0) {\n //tweening to no perspective gives very unintuitive results - just keep the same perspective in that case.\n startUnit = getUnit(startValue);\n endUnit = getUnit(endValue);\n startNum = startUnit !== endUnit ? _convertToUnit(target, p, startValue, endUnit) : parseFloat(startValue);\n endNum = parseFloat(endValue);\n plugin._pt = new PropTween(plugin._pt, endCache, p, startNum, endNum - startNum, _renderCSSProp);\n plugin._pt.u = endUnit || 0;\n\n plugin._props.push(p);\n }\n }\n\n _assign(endCache, startCache);\n}; // handle splitting apart padding, margin, borderWidth, and borderRadius into their 4 components. Firefox, for example, won't report borderRadius correctly - it will only do borderTopLeftRadius and the other corners. We also want to handle paddingTop, marginLeft, borderRightWidth, etc.\n\n\n_forEachName(\"padding,margin,Width,Radius\", function (name, index) {\n var t = \"Top\",\n r = \"Right\",\n b = \"Bottom\",\n l = \"Left\",\n props = (index < 3 ? [t, r, b, l] : [t + l, t + r, b + r, b + l]).map(function (side) {\n return index < 2 ? name + side : \"border\" + side + name;\n });\n\n _specialProps[index > 1 ? \"border\" + name : name] = function (plugin, target, property, endValue, tween) {\n var a, vars;\n\n if (arguments.length < 4) {\n // getter, passed target, property, and unit (from _get())\n a = props.map(function (prop) {\n return _get(plugin, prop, property);\n });\n vars = a.join(\" \");\n return vars.split(a[0]).length === 5 ? a[0] : vars;\n }\n\n a = (endValue + \"\").split(\" \");\n vars = {};\n props.forEach(function (prop, i) {\n return vars[prop] = a[i] = a[i] || a[(i - 1) / 2 | 0];\n });\n plugin.init(target, vars, tween);\n };\n});\n\nexport var CSSPlugin = {\n name: \"css\",\n register: _initCore,\n targetTest: function targetTest(target) {\n return target.style && target.nodeType;\n },\n init: function init(target, vars, tween, index, targets) {\n var props = this._props,\n style = target.style,\n startAt = tween.vars.startAt,\n startValue,\n endValue,\n endNum,\n startNum,\n type,\n specialProp,\n p,\n startUnit,\n endUnit,\n relative,\n isTransformRelated,\n transformPropTween,\n cache,\n smooth,\n hasPriority,\n inlineProps;\n _pluginInitted || _initCore(); // we may call init() multiple times on the same plugin instance, like when adding special properties, so make sure we don't overwrite the revert data or inlineProps\n\n this.styles = this.styles || _getStyleSaver(target);\n inlineProps = this.styles.props;\n this.tween = tween;\n\n for (p in vars) {\n if (p === \"autoRound\") {\n continue;\n }\n\n endValue = vars[p];\n\n if (_plugins[p] && _checkPlugin(p, vars, tween, index, target, targets)) {\n // plugins\n continue;\n }\n\n type = typeof endValue;\n specialProp = _specialProps[p];\n\n if (type === \"function\") {\n endValue = endValue.call(tween, index, target, targets);\n type = typeof endValue;\n }\n\n if (type === \"string\" && ~endValue.indexOf(\"random(\")) {\n endValue = _replaceRandom(endValue);\n }\n\n if (specialProp) {\n specialProp(this, target, p, endValue, tween) && (hasPriority = 1);\n } else if (p.substr(0, 2) === \"--\") {\n //CSS variable\n startValue = (getComputedStyle(target).getPropertyValue(p) + \"\").trim();\n endValue += \"\";\n _colorExp.lastIndex = 0;\n\n if (!_colorExp.test(startValue)) {\n // colors don't have units\n startUnit = getUnit(startValue);\n endUnit = getUnit(endValue);\n }\n\n endUnit ? startUnit !== endUnit && (startValue = _convertToUnit(target, p, startValue, endUnit) + endUnit) : startUnit && (endValue += startUnit);\n this.add(style, \"setProperty\", startValue, endValue, index, targets, 0, 0, p);\n props.push(p);\n inlineProps.push(p, 0, style[p]);\n } else if (type !== \"undefined\") {\n if (startAt && p in startAt) {\n // in case someone hard-codes a complex value as the start, like top: \"calc(2vh / 2)\". Without this, it'd use the computed value (always in px)\n startValue = typeof startAt[p] === \"function\" ? startAt[p].call(tween, index, target, targets) : startAt[p];\n _isString(startValue) && ~startValue.indexOf(\"random(\") && (startValue = _replaceRandom(startValue));\n getUnit(startValue + \"\") || startValue === \"auto\" || (startValue += _config.units[p] || getUnit(_get(target, p)) || \"\"); // for cases when someone passes in a unitless value like {x: 100}; if we try setting translate(100, 0px) it won't work.\n\n (startValue + \"\").charAt(1) === \"=\" && (startValue = _get(target, p)); // can't work with relative values\n } else {\n startValue = _get(target, p);\n }\n\n startNum = parseFloat(startValue);\n relative = type === \"string\" && endValue.charAt(1) === \"=\" && endValue.substr(0, 2);\n relative && (endValue = endValue.substr(2));\n endNum = parseFloat(endValue);\n\n if (p in _propertyAliases) {\n if (p === \"autoAlpha\") {\n //special case where we control the visibility along with opacity. We still allow the opacity value to pass through and get tweened.\n if (startNum === 1 && _get(target, \"visibility\") === \"hidden\" && endNum) {\n //if visibility is initially set to \"hidden\", we should interpret that as intent to make opacity 0 (a convenience)\n startNum = 0;\n }\n\n inlineProps.push(\"visibility\", 0, style.visibility);\n\n _addNonTweeningPT(this, style, \"visibility\", startNum ? \"inherit\" : \"hidden\", endNum ? \"inherit\" : \"hidden\", !endNum);\n }\n\n if (p !== \"scale\" && p !== \"transform\") {\n p = _propertyAliases[p];\n ~p.indexOf(\",\") && (p = p.split(\",\")[0]);\n }\n }\n\n isTransformRelated = p in _transformProps; //--- TRANSFORM-RELATED ---\n\n if (isTransformRelated) {\n this.styles.save(p);\n\n if (!transformPropTween) {\n cache = target._gsap;\n cache.renderTransform && !vars.parseTransform || _parseTransform(target, vars.parseTransform); // if, for example, gsap.set(... {transform:\"translateX(50vw)\"}), the _get() call doesn't parse the transform, thus cache.renderTransform won't be set yet so force the parsing of the transform here.\n\n smooth = vars.smoothOrigin !== false && cache.smooth;\n transformPropTween = this._pt = new PropTween(this._pt, style, _transformProp, 0, 1, cache.renderTransform, cache, 0, -1); //the first time through, create the rendering PropTween so that it runs LAST (in the linked list, we keep adding to the beginning)\n\n transformPropTween.dep = 1; //flag it as dependent so that if things get killed/overwritten and this is the only PropTween left, we can safely kill the whole tween.\n }\n\n if (p === \"scale\") {\n this._pt = new PropTween(this._pt, cache, \"scaleY\", cache.scaleY, (relative ? _parseRelative(cache.scaleY, relative + endNum) : endNum) - cache.scaleY || 0, _renderCSSProp);\n this._pt.u = 0;\n props.push(\"scaleY\", p);\n p += \"X\";\n } else if (p === \"transformOrigin\") {\n inlineProps.push(_transformOriginProp, 0, style[_transformOriginProp]);\n endValue = _convertKeywordsToPercentages(endValue); //in case something like \"left top\" or \"bottom right\" is passed in. Convert to percentages.\n\n if (cache.svg) {\n _applySVGOrigin(target, endValue, 0, smooth, 0, this);\n } else {\n endUnit = parseFloat(endValue.split(\" \")[2]) || 0; //handle the zOrigin separately!\n\n endUnit !== cache.zOrigin && _addNonTweeningPT(this, cache, \"zOrigin\", cache.zOrigin, endUnit);\n\n _addNonTweeningPT(this, style, p, _firstTwoOnly(startValue), _firstTwoOnly(endValue));\n }\n\n continue;\n } else if (p === \"svgOrigin\") {\n _applySVGOrigin(target, endValue, 1, smooth, 0, this);\n\n continue;\n } else if (p in _rotationalProperties) {\n _addRotationalPropTween(this, cache, p, startNum, relative ? _parseRelative(startNum, relative + endValue) : endValue);\n\n continue;\n } else if (p === \"smoothOrigin\") {\n _addNonTweeningPT(this, cache, \"smooth\", cache.smooth, endValue);\n\n continue;\n } else if (p === \"force3D\") {\n cache[p] = endValue;\n continue;\n } else if (p === \"transform\") {\n _addRawTransformPTs(this, endValue, target);\n\n continue;\n }\n } else if (!(p in style)) {\n p = _checkPropPrefix(p) || p;\n }\n\n if (isTransformRelated || (endNum || endNum === 0) && (startNum || startNum === 0) && !_complexExp.test(endValue) && p in style) {\n startUnit = (startValue + \"\").substr((startNum + \"\").length);\n endNum || (endNum = 0); // protect against NaN\n\n endUnit = getUnit(endValue) || (p in _config.units ? _config.units[p] : startUnit);\n startUnit !== endUnit && (startNum = _convertToUnit(target, p, startValue, endUnit));\n this._pt = new PropTween(this._pt, isTransformRelated ? cache : style, p, startNum, (relative ? _parseRelative(startNum, relative + endNum) : endNum) - startNum, !isTransformRelated && (endUnit === \"px\" || p === \"zIndex\") && vars.autoRound !== false ? _renderRoundedCSSProp : _renderCSSProp);\n this._pt.u = endUnit || 0;\n\n if (startUnit !== endUnit && endUnit !== \"%\") {\n //when the tween goes all the way back to the beginning, we need to revert it to the OLD/ORIGINAL value (with those units). We record that as a \"b\" (beginning) property and point to a render method that handles that. (performance optimization)\n this._pt.b = startValue;\n this._pt.r = _renderCSSPropWithBeginning;\n }\n } else if (!(p in style)) {\n if (p in target) {\n //maybe it's not a style - it could be a property added directly to an element in which case we'll try to animate that.\n this.add(target, p, startValue || target[p], relative ? relative + endValue : endValue, index, targets);\n } else if (p !== \"parseTransform\") {\n _missingPlugin(p, endValue);\n\n continue;\n }\n } else {\n _tweenComplexCSSString.call(this, target, p, startValue, relative ? relative + endValue : endValue);\n }\n\n isTransformRelated || (p in style ? inlineProps.push(p, 0, style[p]) : typeof target[p] === \"function\" ? inlineProps.push(p, 2, target[p]()) : inlineProps.push(p, 1, startValue || target[p]));\n props.push(p);\n }\n }\n\n hasPriority && _sortPropTweensByPriority(this);\n },\n render: function render(ratio, data) {\n if (data.tween._time || !_reverting()) {\n var pt = data._pt;\n\n while (pt) {\n pt.r(ratio, pt.d);\n pt = pt._next;\n }\n } else {\n data.styles.revert();\n }\n },\n get: _get,\n aliases: _propertyAliases,\n getSetter: function getSetter(target, property, plugin) {\n //returns a setter function that accepts target, property, value and applies it accordingly. Remember, properties like \"x\" aren't as simple as target.style.property = value because they've got to be applied to a proxy object and then merged into a transform string in a renderer.\n var p = _propertyAliases[property];\n p && p.indexOf(\",\") < 0 && (property = p);\n return property in _transformProps && property !== _transformOriginProp && (target._gsap.x || _get(target, \"x\")) ? plugin && _recentSetterPlugin === plugin ? property === \"scale\" ? _setterScale : _setterTransform : (_recentSetterPlugin = plugin || {}) && (property === \"scale\" ? _setterScaleWithRender : _setterTransformWithRender) : target.style && !_isUndefined(target.style[property]) ? _setterCSSStyle : ~property.indexOf(\"-\") ? _setterCSSProp : _getSetter(target, property);\n },\n core: {\n _removeProperty: _removeProperty,\n _getMatrix: _getMatrix\n }\n};\ngsap.utils.checkPrefix = _checkPropPrefix;\ngsap.core.getStyleSaver = _getStyleSaver;\n\n(function (positionAndScale, rotation, others, aliases) {\n var all = _forEachName(positionAndScale + \",\" + rotation + \",\" + others, function (name) {\n _transformProps[name] = 1;\n });\n\n _forEachName(rotation, function (name) {\n _config.units[name] = \"deg\";\n _rotationalProperties[name] = 1;\n });\n\n _propertyAliases[all[13]] = positionAndScale + \",\" + rotation;\n\n _forEachName(aliases, function (name) {\n var split = name.split(\":\");\n _propertyAliases[split[1]] = all[split[0]];\n });\n})(\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\", \"rotation,rotationX,rotationY,skewX,skewY\", \"transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\", \"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\");\n\n_forEachName(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\", function (name) {\n _config.units[name] = \"px\";\n});\n\ngsap.registerPlugin(CSSPlugin);\nexport { CSSPlugin as default, _getBBox, _createElement, _checkPropPrefix as checkPrefix };","import { gsap, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, TweenLite, TimelineLite, TimelineMax } from \"./gsap-core.js\";\nimport { CSSPlugin } from \"./CSSPlugin.js\";\nvar gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap,\n // to protect from tree shaking\nTweenMaxWithCSS = gsapWithCSS.core.Tween;\nexport { gsapWithCSS as gsap, gsapWithCSS as default, CSSPlugin, TweenMaxWithCSS as TweenMax, TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ };","export default __webpack_public_path__ + \"875065695b66c2e843360a77348936b2.jpg\";","export default __webpack_public_path__ + \"d3bd2c68db354f6c0823be0392e3fd2f.jpg\";","export default __webpack_public_path__ + \"9ccf44a2b0af75fcb1f2218eb29fdb5f.jpg\";","export default __webpack_public_path__ + \"79a20a339475aad1e207ed4d2e16c30b.jpg\";","/**\r\n * Change the logo color to blue or white by swaping the img src\r\n * @param logoColor\r\n */\r\nexport const changeCgLogoDesktop = (logoColor:string) => {\r\n\r\n /**\r\n * Initialize null logoImgEle\r\n * @type {HTMLElement}\r\n */\r\n let logoImgEle = null;\r\n\r\n /**\r\n * Get the headerBottom element\r\n * @type {HTMLElement}\r\n */\r\n const headerBottom = document.querySelector('.header-bottom');\r\n if(headerBottom) {\r\n /**\r\n * Get the logoImgEle\r\n * @type {HTMLImageElement}\r\n */\r\n logoImgEle = headerBottom.querySelector('.logo img') as HTMLImageElement;\r\n }\r\n\r\n if(logoImgEle && logoImgEle.dataset && logoImgEle.dataset.whiteLogoSrc && logoImgEle.dataset.blueLogoSrc) {\r\n\r\n switch (logoColor) {\r\n case 'white':\r\n logoImgEle.src = logoImgEle.dataset.whiteLogoSrc;\r\n return;\r\n case 'blue':\r\n logoImgEle.src = logoImgEle.dataset.blueLogoSrc;\r\n return;\r\n default:\r\n logoImgEle.src = logoImgEle.dataset.blueLogoSrc;\r\n }\r\n }\r\n};\r\n\r\n\r\n/**\r\n * Change logo color for mobile\r\n * @param logoColor\r\n */\r\nexport const changeCgLogoMobile = (logoColor:string) => {\r\n\r\n /**\r\n * Initialize null logoImgEle\r\n * @type {HTMLElement}\r\n */\r\n let logoImgEle = null;\r\n\r\n /**\r\n * Get the headerBottom element\r\n * @type {HTMLElement}\r\n */\r\n const headerMobile = document.querySelector('.header-mobile');\r\n if(headerMobile) {\r\n /**\r\n * Get the logoImgEle\r\n * @type {HTMLImageElement}\r\n */\r\n logoImgEle = headerMobile.querySelector('.logo img') as HTMLImageElement;\r\n }\r\n\r\n if(logoImgEle && logoImgEle.dataset && logoImgEle.dataset.whiteLogoSrc && logoImgEle.dataset.blueLogoSrc) {\r\n\r\n switch (logoColor) {\r\n case 'white':\r\n logoImgEle.src = logoImgEle.dataset.whiteLogoSrc;\r\n return;\r\n case 'blue':\r\n logoImgEle.src = logoImgEle.dataset.blueLogoSrc;\r\n return;\r\n default:\r\n logoImgEle.src = logoImgEle.dataset.blueLogoSrc;\r\n }\r\n }\r\n};\r\n\r\nexport const changeCgGlobalLangIcon = (logoColor:string) => {\r\n\r\n /**\r\n * Get the headerBottom element\r\n * @type {HTMLElement}\r\n */\r\n const langIconEle = document.querySelector('.language-icon') as HTMLImageElement;\r\n\r\n if(langIconEle && langIconEle.dataset && langIconEle.dataset.whiteGlobalIconSrc && langIconEle.dataset.blackGlobalIconSrc) {\r\n\r\n switch (logoColor) {\r\n case 'white':\r\n langIconEle.src = langIconEle.dataset.whiteGlobalIconSrc;\r\n return;\r\n case 'black':\r\n langIconEle.src = langIconEle.dataset.blackGlobalIconSrc;\r\n return;\r\n default:\r\n langIconEle.src = langIconEle.dataset.blackGlobalIconSrc;\r\n }\r\n }\r\n};","import React, { useEffect, useRef, useState, useContext } from 'react';\r\nimport * as styles from './CareerBanner.module.scss';\r\nimport { gsap } from 'gsap';\r\nimport bannerImageLargeDesktop from './images/career-banner-large-desktop.jpg';\r\nimport bannerImageSmallDesktop from './images/career-banner-small-desktop.jpg';\r\nimport bannerImageTablet from './images/career-banner-tablet.jpg';\r\nimport bannerImageMobile from './images/career-banner-mobile.jpg';\r\nimport {headerWithCareerBanner} from '../../utils/headerWithCareerBanner';\r\nimport { TabFilters } from '../../AppLanding';\r\n\r\nconst { __ } = window.wp.i18n; \r\n\r\ninterface SearchComponentProps {\r\n currentKeyword: string;\r\n onSearch: (newKeyword: string) => void; \r\n onTabFilterOpen: (isOpen: boolean) => void; \r\n results: (isVisible: boolean) => void; \r\n}\r\n\r\n// get the filters selected in settings\r\ninterface Window {\r\n cg_jobs_banner_strikeout_text?: string;\r\n cg_jobs_banner_handwritten_text?: string;\r\n cg_jobs_placeholder_text?: string;\r\n cg_jobs_banner_image_large_desktop?: string;\r\n cg_jobs_banner_image_small_desktop?: string;\r\n cg_jobs_banner_image_tablet?: string;\r\n cg_jobs_banner_image_mobile?: string;\r\n cg_jobs_explore_all_jobs_button_text?: string;\r\n cg_jobs_explore_all_jobs_url?: string;\r\n }\r\n const bannerStrikeOutText = (window as Window).cg_jobs_banner_strikeout_text;\r\n const bannerHandWrittenText = (window as Window).cg_jobs_banner_handwritten_text;\r\n const placeholderText = (window as Window).cg_jobs_placeholder_text;\r\n const bannerbgImageLargeDesktop = (window as Window).cg_jobs_banner_image_large_desktop;\r\n const bannerbgImageSmallDesktop = (window as Window).cg_jobs_banner_image_small_desktop;\r\n const bannerbgImageTablet = (window as Window).cg_jobs_banner_image_tablet;\r\n const bannerbgImageMobile = (window as Window).cg_jobs_banner_image_mobile;\r\n const exploreAllJobsButtonText = (window as Window).cg_jobs_explore_all_jobs_button_text;\r\n const exploreAllJobsLink = (window as Window).cg_jobs_explore_all_jobs_url;\r\n \r\n\r\nexport const CareerBanner:React.FC = ({currentKeyword, onSearch, onTabFilterOpen, results}) => {\r\n const [keyword, setKeyword] = useState(currentKeyword);\r\n //const [isFilterClose, setIsFilterClose] = useState(true);\r\n const [placeholder, setPlaceholder] = useState(placeholderText ? placeholderText : `${ __( 'Search jobs by location, profession or keywords', 'cg-jobs' ) }`);\r\n const [isMobileScreen, setIsMobileScreen] = useState(window.matchMedia(\"(max-width: 991px)\").matches);\r\n const [isTabletScreen, setIsTabletScreen] = useState(window.matchMedia(\"(max-width: 1200px)\").matches);\r\n const inputRef = useRef(null);\r\n const tabFilters = useContext(TabFilters);\r\n \r\n const textRef = useRef(null);\r\n const svgRef = useRef(null);\r\n const svgRefElement = useRef(null);\r\n const textRef2 = useRef(null);\r\n\r\n // Update `keyword` with `currentKeyword` prop\r\n useEffect(() => {\r\n setKeyword(currentKeyword);\r\n }, [currentKeyword]);\r\n \r\n // Effect to trigger API callback when inputValue is empty\r\n useEffect(() => {\r\n if (keyword === '') {\r\n onSearch(''); \r\n }\r\n }, [keyword]);\r\n\r\n useEffect(() => { \r\n const changeToMobileLayout = () => { \r\n const wrapper = document.querySelector('#wrapper-cjs') as HTMLElement; \r\n\r\n // For mobile\r\n if (window.matchMedia(\"(min-width: 992px\").matches){\r\n setIsMobileScreen(false);\r\n setPlaceholder(placeholderText ? placeholderText : `${ __( 'Search jobs by location, profession or keywords', 'cg-jobs' ) }`); \r\n if(wrapper) wrapper.removeAttribute('style'); \r\n } else {\r\n setIsMobileScreen(true);\r\n setPlaceholder(placeholderText ? placeholderText : `${ __( 'Search for jobs', 'cg-jobs' ) }`);\r\n if(wrapper) {\r\n if(!tabFilters){\r\n wrapper.style.gridTemplateColumns = '1fr';\r\n //setIsFilterClose(true); \r\n } else {\r\n wrapper.removeAttribute('style');\r\n } \r\n } \r\n }\r\n\r\n // For tablet\r\n if (window.matchMedia(\"(min-width: 1200px\").matches){\r\n setIsTabletScreen(false);\r\n //setIsFilterClose(true);\r\n } else {\r\n setIsTabletScreen(true); \r\n }\r\n \r\n headerWithCareerBanner(); \r\n };\r\n\r\n // Set the initial placeholder\r\n changeToMobileLayout();\r\n\r\n // Add an event listener for window resize\r\n window.addEventListener('resize', changeToMobileLayout); \r\n\r\n // Cleanup event listener on component unmount\r\n return () => window.removeEventListener('resize', changeToMobileLayout);\r\n }, []);\r\n\r\n const handleSubmit = (e: React.FormEvent) => { \r\n if (keyword.length >= 3) { \r\n onSearch((keyword.trim()));\r\n results(true); \r\n } \r\n e.preventDefault();\r\n };\r\n\r\n const handleKeyDown = (e:React.KeyboardEvent) => { \r\n const inputElement = e.target as HTMLInputElement; \r\n const value = inputElement.value;\r\n // Check if the Enter key was pressed\r\n if (e.key === 'Enter' && value.length >= 3) {\r\n inputRef.current && onSearch((inputRef.current.value.trim())); \r\n e.preventDefault();\r\n // Blur the input field\r\n if (inputRef.current) {\r\n inputRef.current.blur();\r\n }\r\n }\r\n\r\n if(value.length >= 3) results(true);\r\n };\r\n\r\n const handleChange = (e: React.ChangeEvent) => {\r\n const value = e.target.value;\r\n setKeyword(decodeURIComponent(value));\r\n \r\n // Trigger search if 3 or more letters are typed\r\n if (value.length >= 3) {\r\n onSearch((value.trim()));\r\n results(true);\r\n } else if (value.length === 0) {\r\n onSearch(''); // Clear search on empty input\r\n results(false);\r\n }\r\n };\r\n\r\n // \r\n const OpenMobileFilters = () => {\r\n const filters = document.querySelector('.open-filters') as HTMLElement;\r\n filters ? filters.style.display = \"block\" : \"\";\r\n\r\n // Make sure modal scrolls to top when opened\r\n const modal = document.getElementById('offcanvasBottom');\r\n const modalBody = modal && modal.querySelector('.offcanvas-body');\r\n if (modalBody) { \r\n modalBody.scrollTop = 0; // Scroll the modal body to the top\r\n }\r\n }\r\n\r\n const OpenTabletFilters = () => {\r\n const filterWrapper = document.querySelector('#filter-wrapper') as HTMLElement;\r\n const filterContainer = document.querySelector('#filter-container') as HTMLElement;\r\n const wrapper = document.querySelector('#wrapper-cjs') as HTMLElement;\r\n \r\n if (!tabFilters) {\r\n filterWrapper.style.transform = 'translateX(0)';\r\n filterWrapper.style.opacity = '1';\r\n filterContainer.style.display = 'block';\r\n wrapper.style.gridTemplateColumns = '2.99fr 1.01fr';\r\n } else {\r\n filterWrapper.style.transform = 'translateX(100%)';\r\n filterWrapper.style.opacity = '0'; \r\n filterContainer.style.display = 'none'; \r\n wrapper.style.gridTemplateColumns = '1fr';\r\n }\r\n //setIsFilterClose(!isFilterClose);\r\n onTabFilterOpen(!tabFilters);\r\n }\r\n \r\n // To Animate text\r\n useEffect(() => {\r\n const animateText = () => { \r\n if(textRef.current) textRef.current.style.opacity = '0'; \r\n if(svgRefElement.current) svgRefElement.current.style.opacity = '0'; \r\n\r\n // Animation for the handwritten text\r\n if (textRef.current) {\r\n const text = textRef.current;\r\n const textContent = text.innerText;\r\n\r\n //Hide the original text and create an empty span for each letter\r\n text.innerHTML = '';\r\n textContent.split('').forEach((char, index) => {\r\n const span = document.createElement('span');\r\n span.innerText = char;\r\n text.appendChild(span);\r\n });\r\n\r\n //Animate the text\r\n gsap.delayedCall(1, () => {\r\n gsap.fromTo(\r\n text,\r\n {\r\n opacity: 0,\r\n },\r\n {\r\n opacity: 1,\r\n duration: 1,\r\n }\r\n );\r\n })\r\n\r\n\r\n // After the text is written, draw the line-through SVG path\r\n gsap.delayedCall(1.5, () => {\r\n if (svgRef.current) {\r\n svgRefElement.current && (svgRefElement.current.style.opacity = '1');\r\n gsap.to(svgRef.current, {\r\n strokeDashoffset: 0,\r\n duration: 2,\r\n ease: 'power2.out',\r\n });\r\n }\r\n });\r\n } \r\n\r\n if (textRef2.current) {\r\n const text = textRef2.current;\r\n const textContent = text.innerText;\r\n\r\n // Hide the original text and create an empty span for each letter\r\n text.innerHTML = '';\r\n textContent.split('').forEach((char, index) => {\r\n const span = document.createElement('span');\r\n span.innerText = char;\r\n text.appendChild(span);\r\n });\r\n\r\n // Animate the text\r\n gsap.delayedCall(2, () => {\r\n text.style.opacity = '1';\r\n gsap.fromTo(\r\n text.querySelectorAll('span'),\r\n {\r\n opacity: 0,\r\n x: -10,\r\n },\r\n {\r\n opacity: 1,\r\n x: 0,\r\n stagger: 0.1, // Stagger the animation for each letter\r\n duration: 0.2,\r\n }\r\n );\r\n });\r\n }\r\n };\r\n \r\n // Run animation on mount\r\n animateText();\r\n\r\n // Run animation on resize\r\n const handleResize = () => {\r\n animateText();\r\n };\r\n\r\n // Add resize event listener\r\n window.addEventListener('resize', handleResize);\r\n\r\n // Cleanup the resize event listener\r\n return () => {\r\n window.removeEventListener('resize', handleResize);\r\n };\r\n }, []);\r\n\r\n const content = document.querySelector('#cg-jobs-search-root-landing') as HTMLElement;\r\n if(content) content.style.overflowX = 'clip';\r\n\r\n // Banner Images from settings or default images\r\n const heroLargeDesktopImgURL = bannerbgImageLargeDesktop ? bannerbgImageLargeDesktop : bannerImageLargeDesktop;\r\n const heroSmallDesktopImgURL = bannerbgImageSmallDesktop ? bannerbgImageSmallDesktop : bannerImageSmallDesktop;\r\n const heroTabImgURL = bannerbgImageTablet ? bannerbgImageTablet : bannerImageTablet;\r\n const heroMobImgURL = bannerbgImageMobile ? bannerbgImageMobile : bannerImageMobile;\r\n\r\n return (\r\n <>\r\n

\r\n

\r\n \r\n

\r\n {isMobileScreen ? \r\n

\r\n {bannerHandWrittenText ? bannerHandWrittenText : \"Rewrite your future\"}\r\n

\r\n : <>\r\n

\r\n
\r\n
\r\n {bannerStrikeOutText ? bannerStrikeOutText : \"Wait for change\"}\r\n
\r\n\r\n {/* SVG line-through animation */}\r\n \r\n \r\n \r\n \r\n
\r\n {bannerHandWrittenText ? bannerHandWrittenText : \"Rewrite your future\"}\r\n
\r\n
\r\n

\r\n {exploreAllJobsButtonText ? exploreAllJobsButtonText : 'Explore all jobs'}\r\n

\r\n

\r\n \r\n } \r\n

\r\n

\r\n { isTabletScreen && \r\n

\r\n

handleSubmit(e)}> \r\n {\r\n setPlaceholder(\"\");\r\n e.target.select();\r\n }} \r\n onKeyDown={handleKeyDown}\r\n onBlur={() => setPlaceholder(placeholderText ? placeholderText : `${ __( 'Search for jobs', 'cg-jobs' ) }`)} \r\n placeholder= {placeholder}\r\n aria-label={placeholder}\r\n />\r\n \r\n { isMobileScreen ? \r\n \r\n : \r\n \r\n }\r\n

\r\n

\r\n }\r\n \r\n )\r\n}","import { changeCgGlobalLangIcon, changeCgLogoDesktop, changeCgLogoMobile } from './logoChanger';\r\n//import {changeCgGlobalLangIcon} from \"cg-frontend-utilities/js/utils\";\r\n\r\nexport const headerWithCareerBanner = () => {\r\n\r\n const darkGradientClass = 'dark-gradient';\r\n\r\n /**\r\n * Get the headerTopBarWrapper element. We will be changing the CSS variables for this\r\n * element by passing the attribute values. Default CSS variables are already defined\r\n * in the SCSS file. See header.scss\r\n * @type {HTMLElement}\r\n */\r\n const headerTopBarWrapper = document.querySelector('.header-topbar-wrapper') as HTMLElement;\r\n const subNavigationWrapper = document.querySelector('.sub-navigation') as HTMLElement; \r\n\r\n /**\r\n *\r\n * @type {HTMLElement}\r\n */\r\n const headerMobile = document.querySelector('.header-mobile') as HTMLElement;\r\n\r\n\r\n /**\r\n * Make header-nav-position css variable\r\n * @param property\r\n */\r\n const makeCssVarNavPos = (property: string) => {\r\n if(headerTopBarWrapper){\r\n (headerTopBarWrapper).style.setProperty( '--header-nav-position', property);\r\n }\r\n };\r\n\r\n /**\r\n * Make header-nav-menu-text-color css variable\r\n * @param textColor\r\n */\r\n const makeCssVarMenuTextColor = (textColor:string) => {\r\n if(headerTopBarWrapper){\r\n headerTopBarWrapper.style.setProperty( '--header-nav-menu-text-color', textColor);\r\n }\r\n if(headerMobile){\r\n headerMobile.style.setProperty('--header-mobile-menu-text-color', textColor);\r\n }\r\n };\r\n\r\n /**\r\n * Make header-nav-menu-text-color css variable\r\n * @param textColor\r\n */\r\n const makeCssVarSubMenuTextColor = (textColor: string) => {\r\n if(subNavigationWrapper){\r\n subNavigationWrapper.style.setProperty( '--header-subnav-menu-text-color', textColor);\r\n }\r\n };\r\n\r\n /**\r\n * Add gradient classes to nav headers for both mobile, desktop.\r\n * @param classListToAdd\r\n */\r\n const addGradientClassesToNavHeaders = (classListToAdd: string[]) => {\r\n if(headerTopBarWrapper) {\r\n headerTopBarWrapper.classList.add(...classListToAdd);\r\n }\r\n if(headerMobile) {\r\n headerMobile.classList.add(...classListToAdd);\r\n }\r\n };\r\n\r\n /**\r\n * Add gradient classes to nav headers for both mobile, desktop.\r\n * @param classListToAdd\r\n */\r\n const addGradientClassesToSubnavHeaders = (classListToAdd: string[]) => {\r\n if(subNavigationWrapper) {\r\n subNavigationWrapper.classList.add(...classListToAdd);\r\n }\r\n };\r\n\r\n\r\n /**\r\n * Get the careerBanner element from the id\r\n * @type {HTMLElement}\r\n */\r\n const careerBannerEle = document.querySelector('#career-banner');\r\n\r\n /**\r\n * Get the attributes passed from the save function to the data attribute\r\n * @type {string}\r\n */\r\nif(careerBannerEle){\r\n if(window.matchMedia(\"(min-width: 1200px)\").matches){\r\n /**\r\n * Parse and get the career banner attributes.\r\n * @type {CareerBannerAttributesType}\r\n /**\r\n * If menu should overlays the banner then the nav menu should start as position relative\r\n */\r\n makeCssVarNavPos('relative');\r\n\r\n /**\r\n * Pass the NavMenuTextColor from attributes to set the appropriate color\r\n * for menu text color CSS variable.\r\n */\r\n\r\n makeCssVarMenuTextColor('white');\r\n makeCssVarSubMenuTextColor('white');\r\n\r\n /**\r\n * Add class to identify dark gradient\r\n */\r\n addGradientClassesToNavHeaders([darkGradientClass]);\r\n addGradientClassesToSubnavHeaders([darkGradientClass]);\r\n\r\n /**\r\n * Change logo to white\r\n */\r\n changeCgLogoDesktop('white');\r\n changeCgLogoMobile('white');\r\n changeCgGlobalLangIcon('white');\r\n\r\n } else {\r\n makeCssVarNavPos('relative');\r\n\r\n makeCssVarMenuTextColor('#15011D');\r\n makeCssVarSubMenuTextColor('#15011D');\r\n\r\n /**\r\n * Change logo to blue\r\n */\r\n changeCgLogoDesktop('blue');\r\n changeCgLogoMobile('blue');\r\n changeCgGlobalLangIcon('black');\r\n }}\r\n};","import React, { useCallback, useEffect, useMemo, useState, createContext, useContext } from 'react';\r\nimport { fetchfilters, searchPosts } from './services/common.service';\r\nimport { FilterProps, WPSearchResultItem } from './typings';\r\nimport Loading from './components/Loading';\r\nimport { Filters, FilterTypes, SelectedFilters } from './components/Filters/Filters';\r\nimport { NoResult } from './components/NoResult/NoResult';\r\nimport * as styles from './App.module.scss';\r\nimport { MobileFilters } from './components/MobileFilters/MobileFilters';\r\nimport Pagination from './components/Pagination/Pagination';\r\nimport { SimilarOpportunities } from './components/SimilarOpportunities/SimilarOpportunities';\r\nimport { JobList } from './components/JobList/JobList';\r\nimport 'slick-carousel/slick/slick.css';\r\nimport 'slick-carousel/slick/slick-theme.css';\r\nimport { CarouselFilters } from './components/CarouselFilters/CarouselFilters';\r\nimport { CareerBanner } from './components/CareerBanner/CareerBanner';\r\n\r\nconst { __ } = window.wp.i18n;\r\n\r\n// get the filters selected in settings\r\ninterface Window {\r\n cg_jobs_get_filter_data?: FilterTypes;\r\n cg_jobs_es_var?: { pathName ?: string};\r\n cg_jobs_country_code?: string;\r\n}\r\nconst settingFilters = (window as Window).cg_jobs_get_filter_data;\r\nconst countryCodeinSettings = (window as Window).cg_jobs_country_code;\r\nconst cCode = countryCodeinSettings ? countryCodeinSettings : (window as Window).cg_jobs_es_var?.pathName;\r\n\r\nexport const TabFilters = createContext(false);\r\n\r\nconst AppLanding: React.FC = () => {\r\n const [jobList, setJobList] = useState([]);\r\n const [loading, setLoading] = useState(true); \r\n const [queryParams, setQueryParams] = useState(new URLSearchParams(location.search));\r\n const [currentPage, setCurrentPage] = useState(queryParams.get('page') as unknown as number ?? 1);\r\n const [totalPages, setTotalPages] = useState(1);\r\n const [totalResult, setTotalResult] = useState(); \r\n const [keyword, setKeyword] = useState(queryParams.get('keyword'));\r\n const [showMobileFilters, setShowMobileFilters] = useState(window.matchMedia(\"(max-width: 991px)\").matches);\r\n const [showCarouselFilters, setShowCarouselFilters] = useState(window.matchMedia(\"(max-width: 991px)\").matches);\r\n const [showResults, setShowResults] = useState((keyword && keyword?.length >= 3) ? true : false);\r\n const [resetFilters, setResetFilters] = useState(false);\r\n const [isTabFilterOpen, setIsTabFilterOpen] = useState(false);\r\n const [filters, setFilters] = useState({ \r\n experience_level: new Set(queryParams.getAll('experience_level')),\r\n location: new Set(queryParams.getAll('location')),\r\n brand: new Set(queryParams.getAll('brand')),\r\n professional_communities: new Set(queryParams.getAll('professional_communities')),\r\n contract_type: new Set(queryParams.getAll('contract_type')), \r\n });\r\n const [jobsIdList, setJobsIdList] = useState([]);\r\n const perPage = 11; \r\n\r\n const fetchListings = useCallback(async () => { \r\n setLoading(true);\r\n try { \r\n // Clean up filters to only include keys with non-empty values\r\n const cleanedFilters = Object.fromEntries(\r\n Object.entries(filters).filter(([_, value]) => value instanceof Set ? value.size > 0 : Boolean(value))\r\n );\r\n\r\n const filtersWithPagination = { \r\n filters: {\r\n ...Object.fromEntries(Object.entries(cleanedFilters).map(([key, value]) => [key, Array.from(value)])), // Convert Set to Array\r\n },\r\n page: currentPage, \r\n size: perPage, \r\n search: keyword ?? \"\",\r\n country_code: cCode ?? \"\"\r\n };\r\n //Api call to fetch job\r\n const data = await searchPosts(filtersWithPagination);\r\n setJobList(data.data);\r\n setTotalPages(Math.ceil(data.count / perPage));\r\n setTotalResult(data.count);\r\n setJobsIdList(data.data.map(job => job.id)); \r\n } catch (error) {\r\n console.error('Error fetching listings:', error);\r\n } finally {\r\n setLoading(false);\r\n }\r\n }, [filters, currentPage, keyword, perPage]);\r\n\r\n useEffect(() => { \r\n // running it in timeout for piano sdk to load\r\n window.addEventListener('load', () => {\r\n try { \r\n if (keyword) {\r\n window.dataLayer = window.dataLayer || [];\r\n window.dataLayer.push({\r\n event: 'internal_search_result.display',\r\n ise_keyword: keyword,\r\n ise_page: currentPage,\r\n ise_engine: 'job_search'\r\n });\r\n }\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n });\r\n\r\n fetchListings();\r\n \r\n }, [fetchListings])\r\n\r\n // Add body class in body element to change bg to FEFEFE\r\n useEffect(() => {\r\n document.body.classList.add(styles.body);\r\n \r\n return () => {\r\n document.body.classList.remove(styles.body);\r\n };\r\n }, []);\r\n\r\n const updateQueryParams = useCallback((key:string, value:string) => {\r\n const parameters = new URLSearchParams(queryParams);\r\n parameters.set(key, value);\r\n \r\n //Delete empty parameters\r\n for (const [key, value] of parameters.entries()) {\r\n if (value === \"\") {\r\n parameters.delete(key) \r\n }\r\n }\r\n\r\n const newUrl = `${window.location.pathname}?${parameters.toString()}`;\r\n window.history.replaceState({}, '', newUrl);\r\n setQueryParams(parameters);\r\n }, [queryParams]);\r\n\r\n function smoothScrollTo(targetOffsetTop: number, duration = 500) {\r\n const start = window.pageYOffset;\r\n const startTime = performance.now();\r\n \r\n function scroll() {\r\n const currentTime = performance.now();\r\n const elapsedTime = currentTime - startTime;\r\n const progress = Math.min(elapsedTime / duration, 1);\r\n const scrollPosition = start + (targetOffsetTop - start) * easeInOutQuad(progress);\r\n \r\n window.scrollTo(0, scrollPosition);\r\n \r\n if (elapsedTime < duration) {\r\n requestAnimationFrame(scroll);\r\n }\r\n }\r\n \r\n function easeInOutQuad(t:number) {\r\n return t < 0.5\r\n ? 2 * t * t\r\n : -1 + (4 - 2 * t) * t;\r\n }\r\n \r\n requestAnimationFrame(scroll);\r\n }\r\n\r\n const handlePageChange = useCallback((page: number) => {\r\n setCurrentPage(page); \r\n updateQueryParams('page', page.toString()); \r\n setTimeout(() => {\r\n const element = document.querySelector('#container-cjs');\r\n if (element) {\r\n const offsetTop = element.getBoundingClientRect().top + window.scrollY; // Calculate the offset\r\n smoothScrollTo(offsetTop); \r\n } \r\n }, 0);\r\n \r\n }, [updateQueryParams]);\r\n\r\n useEffect(() => {\r\n // Update query parameters for filters and page size\r\n const params = new URLSearchParams(queryParams);\r\n\r\n // Set filters with values joined by commas\r\n Object.entries(filters).forEach(([key, value]) => {\r\n const joinedValues = Array.from(value).join(',');\r\n if (joinedValues) {\r\n params.set(key, joinedValues);\r\n } else {\r\n params.delete(key);\r\n }\r\n });\r\n \r\n // Set page and size\r\n params.set('page', currentPage.toString());\r\n params.set('size', perPage.toString());\r\n cCode && params.set('country_code', cCode);\r\n\r\n const newUrl = `${window.location.pathname}?${params.toString()}`;\r\n window.history.replaceState({}, '', newUrl);\r\n setQueryParams(params);\r\n }, [filters, currentPage, perPage]);\r\n\r\n //Show mobile filters\r\n useEffect(() => {\r\n const breadcrumb = document.querySelector('.sub-navigation-wrapper') as HTMLElement;\r\n const showFilters = () => {\r\n const backdrop = document.querySelector('.offcanvas-backdrop');\r\n if (window.matchMedia(\"(min-width: 992px)\").matches) {\r\n setShowMobileFilters(false);\r\n setShowCarouselFilters(false);\r\n backdrop && backdrop.classList.remove('show');\r\n backdrop && backdrop.classList.add('hide');\r\n } else {\r\n setShowMobileFilters(true);\r\n setShowCarouselFilters(true);\r\n }\r\n\r\n if (window.matchMedia(\"(min-width: 1200px)\").matches){ \r\n breadcrumb && (breadcrumb.style.display = 'block');\r\n } else { \r\n breadcrumb && (breadcrumb.style.display = 'none');\r\n }\r\n };\r\n // Set the initial placeholder\r\n showFilters(); \r\n // Add an event listener for window resize\r\n window.addEventListener('resize', showFilters); \r\n // Cleanup event listener on component unmount\r\n return () => window.removeEventListener('resize', showFilters);\r\n }, []);\r\n\r\n const handleFiltersChange = useCallback((newFilters: SelectedFilters) => {\r\n setFilters(newFilters);\r\n setCurrentPage(1); \r\n setResetFilters(false); \r\n }, []);\r\n\r\n const handleKeywordUpdate = useCallback((newKeyword: string) => {\r\n (newKeyword === '') ? setKeyword(null) : setKeyword(newKeyword);\r\n updateQueryParams('keyword', newKeyword);\r\n setCurrentPage(1);\r\n setResetFilters(true); \r\n }, [keyword, updateQueryParams]);\r\n\r\n const handleButtonClick = useCallback((newSelectedFilters: Set) => {\r\n setFilters({...filters, 'experience_level': newSelectedFilters});\r\n setCurrentPage(1);\r\n setResetFilters(false); \r\n }, []);\r\n\r\n const handleTabToggle = (isOpen: boolean) => {\r\n setIsTabFilterOpen(isOpen);\r\n };\r\n\r\n const handleShowResults = useCallback((isVisible: boolean) => {\r\n setShowResults(isVisible);\r\n }, []);\r\n\r\n const handleCloseResults = useCallback(() => {\r\n setShowResults(false);\r\n setKeyword(\"\");\r\n setFilters({\r\n experience_level: new Set(),\r\n location: new Set(),\r\n brand: new Set(),\r\n professional_communities: new Set(),\r\n contract_type: new Set(),\r\n });\r\n setIsTabFilterOpen(false);\r\n }, []);\r\n\r\n // Memoize filters and callbacks to avoid unnecessary re-renders\r\n const memoizedFilters = useMemo(() => filters, [filters]);\r\n const memoizedHandleFiltersChange = useCallback(handleFiltersChange, []);\r\n const memoizedHandleKeywordUpdate = useCallback(handleKeywordUpdate, [handleKeywordUpdate]);\r\n\r\nreturn (\r\n \r\n

\r\n \r\n {showResults &&

\r\n {((showCarouselFilters && settingFilters?.includes('experience_level'))) && }\r\n {(totalResult && totalResult > 0) ? (\r\n showMobileFilters ? \r\n

\r\n

We found {totalResult} results

\r\n \r\n

\r\n :\r\n

\r\n

We found {totalResult} results matching your search

\r\n \r\n

\r\n ): ''}\r\n

\r\n

\r\n {loading ? (\r\n \r\n ) : \r\n <> \r\n {jobList.length === 0 ? (\r\n

\r\n \r\n \r\n

\r\n ) : jobList.length < 6 && totalPages === 1 ? (\r\n

\r\n

\r\n \r\n

\r\n ) : (\r\n \r\n )} \r\n \r\n }\r\n

\r\n { \r\n (showMobileFilters) \r\n ? \r\n : \r\n }\r\n \r\n

\r\n

\r\n { __( 'Go to the global site', 'cg-jobs' ) }\r\n {totalPages > 1 ? :

} \r\n

\r\n

\r\n }\r\n

\r\n \r\n );\r\n}\r\n\r\nexport default React.memo(AppLanding);\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom/client';\r\nimport App from './App';\r\nimport AppLanding from './AppLanding';\r\n// import reportWebVitals from './reportWebVitals';\r\n\r\n// React 18 version\r\n\r\n/**\r\n * Wrapping in a DOMContentLoaded event to prevent react from executing\r\n * first and to make it independent of wp_enqueue_scripts load order (header / footer).\r\n */\r\ndocument.addEventListener(\"DOMContentLoaded\", function(event) {\r\n const rootElement = document.getElementById('cg-jobs-search-root');\r\n const rootLandingElement = document.getElementById('cg-jobs-search-root-landing');\r\n if(rootElement){\r\n const root = ReactDOM.createRoot(\r\n rootElement as HTMLElement\r\n );\r\n root.render(\r\n \r\n \r\n ,\r\n );\r\n } else if(rootLandingElement){\r\n const rootLanding = ReactDOM.createRoot(\r\n rootLandingElement as HTMLElement\r\n );\r\n rootLanding.render(\r\n \r\n \r\n ,\r\n );\r\n }\r\n});\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\n// reportWebVitals();\r\n"],"names":["___CSS_LOADER_URL_IMPORT_0___","URL","___CSS_LOADER_URL_IMPORT_1___","___CSS_LOADER_URL_IMPORT_2___","___CSS_LOADER_URL_IMPORT_3___","___CSS_LOADER_URL_IMPORT_4___","___CSS_LOADER_EXPORT___","___CSS_LOADER_URL_REPLACEMENT_0___","___CSS_LOADER_URL_REPLACEMENT_1___","___CSS_LOADER_URL_REPLACEMENT_2___","hash","___CSS_LOADER_URL_REPLACEMENT_3___","___CSS_LOADER_URL_REPLACEMENT_4___","___CSS_LOADER_URL_REPLACEMENT_5___","push","module","id","body","_1","_2","_3","_4","empty","_5","_6","_7","_8","_9","svgLine","rewrite","_a","_b","_c","mb2","tabFilterOpen","title","location","features","pagination","previous","next","exports","cssWithMappingToString","list","toString","this","map","item","content","needLayer","concat","length","join","i","modules","media","dedupe","supports","layer","undefined","alreadyImportedModules","k","_k","url","options","String","__esModule","default","test","slice","needQuotes","replace","cssMapping","btoa","base64","unescape","encodeURIComponent","JSON","stringify","data","sourceMapping","QueryHandler","each","MediaQuery","query","isUnconditional","handlers","mql","window","matchMedia","self","listener","currentTarget","assess","addListener","prototype","constuctor","addHandler","handler","qh","matches","on","removeHandler","h","equals","destroy","splice","clear","removeListener","action","Util","isFunction","isArray","MediaQueryDispatch","Error","queries","browserIsIncapable","constructor","register","q","shouldDegrade","match","unregister","deferSetup","setup","initialised","off","unmatch","target","Object","apply","collection","fn","reactIs","REACT_STATICS","childContextTypes","contextType","contextTypes","defaultProps","displayName","getDefaultProps","getDerivedStateFromError","getDerivedStateFromProps","mixins","propTypes","type","KNOWN_STATICS","name","caller","callee","arguments","arity","MEMO_STATICS","compare","TYPE_STATICS","getStatics","component","isMemo","ForwardRef","render","Memo","defineProperty","getOwnPropertyNames","getOwnPropertySymbols","getOwnPropertyDescriptor","getPrototypeOf","objectPrototype","hoistNonReactStatics","targetComponent","sourceComponent","blacklist","inheritedComponent","keys","targetStatics","sourceStatics","key","descriptor","e","b","Symbol","for","c","d","f","g","l","m","n","p","r","t","v","w","x","y","z","a","u","$$typeof","A","AsyncMode","ConcurrentMode","ContextConsumer","ContextProvider","Element","Fragment","Lazy","Portal","Profiler","StrictMode","Suspense","isAsyncMode","isConcurrentMode","isContextConsumer","isContextProvider","isElement","isForwardRef","isFragment","isLazy","isPortal","isProfiler","isStrictMode","isSuspense","isValidElementType","typeOf","camel2hyphen","obj2mq","obj","mq","forEach","feature","index","value","isDimension","Array","reTrim","reIsBadHex","reIsBinary","reIsOctal","freeParseInt","parseInt","freeGlobal","freeSelf","root","Function","objectToString","nativeMax","Math","max","nativeMin","min","now","Date","isObject","toNumber","isObjectLike","call","isSymbol","other","valueOf","isBinary","func","wait","lastArgs","lastThis","maxWait","result","timerId","lastCallTime","lastInvokeTime","leading","maxing","trailing","TypeError","invokeFunc","time","args","thisArg","shouldInvoke","timeSinceLastCall","timerExpired","trailingEdge","setTimeout","remainingWait","debounced","isInvoking","leadingEdge","cancel","clearTimeout","flush","createRoot","hydrateRoot","_typeof","o","iterator","PrevArrow","NextArrow","_react","_interopRequireDefault","_classnames","_innerSliderUtils","_extends","assign","bind","source","hasOwnProperty","ownKeys","filter","enumerable","_objectSpread","_toPropertyKey","configurable","writable","getOwnPropertyDescriptors","defineProperties","_classCallCheck","instance","Constructor","_defineProperties","props","_createClass","protoProps","staticProps","toPrimitive","_toPrimitive","_inherits","subClass","superClass","create","_setPrototypeOf","setPrototypeOf","__proto__","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","Super","_getPrototypeOf","NewTarget","Reflect","construct","ReferenceError","_assertThisInitialized","_possibleConstructorReturn","Boolean","_React$PureComponent","_super","preventDefault","clickHandler","prevClasses","prevHandler","message","infinite","currentSlide","slideCount","slidesToShow","prevArrowProps","className","style","display","onClick","customProps","prevArrow","cloneElement","createElement","PureComponent","_React$PureComponent2","_super2","nextClasses","nextHandler","canGoNext","nextArrowProps","nextArrow","accessibility","adaptiveHeight","afterChange","appendDots","dots","arrows","autoplay","autoplaySpeed","beforeChange","centerMode","centerPadding","cssEase","customPaging","dotsClass","draggable","easing","edgeFriction","fade","focusOnSelect","initialSlide","lazyLoad","onEdge","onInit","onLazyLoadError","onReInit","pauseOnDotsHover","pauseOnFocus","pauseOnHover","responsive","rows","rtl","slide","slidesPerRow","slidesToScroll","speed","swipe","swipeEvent","swipeToSlide","touchMove","touchThreshold","useCSS","useTransform","variableWidth","vertical","waitForAnimate","asNavFor","Dots","spec","_this$props","onMouseEnter","onMouseOver","onMouseLeave","dotCount","ceil","mouseEvents","_rightBound","rightBound","clamp","_leftBound","leftBound","dotOptions","_slider","animating","autoplaying","currentDirection","currentLeft","direction","dragging","edgeDragged","initialized","lazyLoadedList","listHeight","listWidth","scrolling","slideHeight","slideWidth","swipeLeft","swiped","swiping","touchObject","startX","startY","curX","curY","trackStyle","trackWidth","targetSlide","InnerSlider","_initialState","_lodash","_track","_dots","_arrows","_resizeObserverPolyfill","_defineProperty","_React$Component","_this","ref","track","elem","querySelector","state","height","getHeight","slidesToLoad","getOnDemandLazySlides","setState","prevState","onLazyLoad","listRef","trackRef","updateState","adaptHeight","autoPlay","lazyLoadTimer","setInterval","progressiveLazyLoad","ro","onWindowResized","callbackTimers","observe","document","querySelectorAll","onfocus","onSlideFocus","onblur","onSlideBlur","addEventListener","attachEvent","animationEndCallback","clearInterval","timer","removeEventListener","detachEvent","autoplayTimer","disconnect","prevProps","checkImagesLoad","setTrackStyle","didPropsChange","Children","count","children","changeSlide","pause","debouncedResize","resizeWindow","node","callback","updatedState","initializedState","slideIndex","targetLeft","getTrackLeft","left","getTrackCSS","_trackWidth","_trackLeft","childrenWidths","preClones","getPreClones","postClones","getPostClones","child","width","_i","_i2","_trackStyle","currentWidth","childrenCount","trackLeft","images","imagesCount","loadedCount","image","onclick","prevClickHandler","parentNode","focus","onload","onerror","indexOf","_index","dontAnimate","_slideHandler","slideHandler","nextState","asNavForIndex","innerSlider","firstBatch","excluded","sourceKeys","_objectWithoutPropertiesLoose","sourceSymbolKeys","propertyIsEnumerable","_objectWithoutProperties","nodes","clickable","stopPropagation","dir","keyHandler","ontouchmove","event","returnValue","verticalSwiping","disableBodyScroll","swipeStart","swipeMove","swipeEnd","triggerSlideHandler","enableBodyScroll","Number","isNaN","nextIndex","playType","play","pauseType","trackProps","extractObject","onTrackOver","onTrackLeave","selectHandler","dotProps","onDotsLeave","onDotsOver","arrowProps","verticalHeightStyle","centerPaddingStyle","padding","listStyle","listProps","onMouseDown","onMouseMove","onMouseUp","onTouchStart","onTouchMove","onTouchEnd","touchEnd","onTouchCancel","onKeyDown","innerSliderProps","unslick","listRefHandler","Track","trackRefHandler","ssrState","ssrInit","_i3","_Object$keys","Component","_innerSlider","_json2mq","_defaultProps","enquire","canUseDOM","Slider","slickPrev","slickNext","slickGoTo","breakpoint","_responsiveMediaHandlers","_this2","breakpoints","breakpt","sort","bQuery","minWidth","maxWidth","settings","newProps","_this3","resp","toArray","trim","console","warn","newChildren","newSlide","j","row","tabIndex","innerSliderRefHandler","filterSettings","getSlideClasses","slickActive","slickCenter","slickCloned","centerOffset","floor","getKey","fallbackKey","_len","_key","slides","preCloneSlides","postCloneSlides","startIndex","lazyStartIndex","endIndex","lazyEndIndex","childOnClickOptions","childStyle","position","top","opacity","zIndex","transition","getSlideStyle","slideClass","slideClasses","outline","preCloneNo","reverse","renderSlides","handleRef","checkSpecKeys","checkNavigable","validSettings","reduce","acc","settingName","slidesOnRight","slidesOnLeft","siblingDirection","safePreventDefault","lazySlidesOnRight","lazySlidesOnLeft","getWidth","getTrackAnimateCSS","getTotalSlides","getSwipeDirection","getSlideCount","getRequiredLazySlides","getNavigableIndexes","number","lowerBound","upperBound","includes","_reactName","onDemandSlides","requiredSlides","offsetWidth","offsetHeight","xDist","yDist","swipeAngle","atan2","round","PI","abs","canGo","newObject","listNode","trackNode","centerPaddingAdj","finalSlide","animationLeft","finalLeft","animationSlide","indexOffset","previousInt","slideOffset","previousTargetSlide","tagName","keyCode","touches","pageX","clientX","pageY","clientY","curLeft","swipeLength","sqrt","pow","verticalSwipeLength","positionOffset","swipeDirection","touchSwipeLength","onSwipe","minSwipe","activeSlide","counter","indexes","navigables","prevNavigable","swipedSlide","slickList","from","every","offsetTop","offsetLeft","currentIndex","dataset","keysArray","error","trackHeight","trackChildren","WebkitTransition","WebkitTransform","transform","msTransform","marginTop","marginLeft","slidesToOffset","targetSlideIndex","trackElem","childNodes","_ref","right","_ref2","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentOwner","__self","__source","_owner","current","jsx","jsxs","MapShim","Map","getIndex","arr","some","entry","class_1","__entries__","get","set","delete","entries","has","ctx","isBrowser","global$1","requestAnimationFrame$1","requestAnimationFrame","transitionKeys","mutationObserverSupported","MutationObserver","ResizeObserverController","connected_","mutationEventsAdded_","mutationsObserver_","observers_","onTransitionEnd_","refresh","leadingCall","trailingCall","resolvePending","proxy","timeoutCallback","timeStamp","throttle","addObserver","observer","connect_","removeObserver","observers","disconnect_","updateObservers_","activeObservers","gatherActive","hasActive","broadcastActive","attributes","childList","characterData","subtree","propertyName","getInstance","instance_","defineConfigurable","getWindowOf","ownerDocument","defaultView","emptyRect","createRectInit","toFloat","parseFloat","getBordersSize","styles","positions","size","isSVGGraphicsElement","SVGGraphicsElement","SVGElement","getBBox","getContentRect","bbox","getSVGContentRect","clientWidth","clientHeight","getComputedStyle","paddings","positions_1","getPaddings","horizPad","vertPad","bottom","boxSizing","documentElement","isDocumentElement","vertScrollbar","horizScrollbar","getHTMLElementContentRect","ResizeObservation","broadcastWidth","broadcastHeight","contentRect_","isActive","rect","broadcastRect","ResizeObserverEntry","rectInit","Constr","contentRect","DOMRectReadOnly","ResizeObserverSPI","controller","callbackCtx","activeObservations_","observations_","callback_","controller_","callbackCtx_","observations","unobserve","clearActive","observation","WeakMap","ResizeObserver","method","str","toLowerCase","stylesInDOM","getIndexByIdentifier","identifier","modulesToDom","idCountMap","identifiers","base","indexByIdentifier","css","sourceMap","references","updater","addElementStyle","byIndex","api","domAPI","update","newObj","remove","lastIdentifiers","newList","newLastIdentifiers","memo","insert","styleTarget","HTMLIFrameElement","contentDocument","head","getTarget","appendChild","element","setAttributes","styleElement","nonce","setAttribute","insertStyleElement","styleTagTransform","removeChild","removeStyleElement","styleSheet","cssText","firstChild","createTextNode","React","ReactDOM","hasOwn","classNames","classes","arg","appendClass","parseValue","newClass","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","getter","definition","globalThis","prop","toStringTag","scriptUrl","importScripts","currentScript","toUpperCase","src","scripts","getElementsByTagName","baseURI","href","nc","kindOf","cache","thing","kindOfTest","typeOfTest","isUndefined","isArrayBuffer","isString","isNumber","isPlainObject","val","isDate","isFile","isBlob","isFileList","isURLSearchParams","isReadableStream","isRequest","isResponse","isHeaders","allOwnKeys","len","findKey","_global","global","isContextDefined","context","isTypedArray","TypedArray","Uint8Array","isHTMLForm","isRegExp","reduceDescriptors","reducer","descriptors","reducedDescriptors","ret","ALPHA","DIGIT","ALPHABET","ALPHA_DIGIT","isAsyncFn","_setImmediate","setImmediateSupported","setImmediate","postMessageSupported","postMessage","token","callbacks","shift","cb","random","asap","queueMicrotask","process","nextTick","isBuffer","isFormData","kind","FormData","append","isArrayBufferView","ArrayBuffer","isView","buffer","isBoolean","isStream","pipe","merge","caseless","assignValue","targetKey","extend","stripBOM","charCodeAt","inherits","superConstructor","toFlatObject","sourceObj","destObj","propFilter","merged","endsWith","searchString","lastIndex","forEachEntry","done","pair","matchAll","regExp","exec","hasOwnProp","freezeMethods","toObjectSet","arrayOrString","delimiter","define","split","toCamelCase","p1","p2","noop","toFiniteNumber","defaultValue","isFinite","generateString","alphabet","isSpecCompliantForm","toJSONObject","stack","visit","reducedValue","isThenable","then","catch","AxiosError","code","config","request","response","captureStackTrace","status","utils","toJSON","description","fileName","lineNumber","columnNumber","axiosError","cause","isVisitable","removeBrackets","renderKey","path","predicates","formData","metaTokens","option","visitor","defaultVisitor","useBlob","Blob","convertValue","toISOString","Buffer","isFlatArray","el","exposedHelpers","build","pop","encode","charMap","AxiosURLSearchParams","params","_pairs","encoder","_encode","buildURL","serializeFn","serialize","serializedParams","hashmarkIndex","use","fulfilled","rejected","synchronous","runWhen","eject","silentJSONParsing","forcedJSONParsing","clarifyTimeoutError","URLSearchParams","protocols","hasBrowserEnv","_navigator","navigator","hasStandardBrowserEnv","product","hasStandardBrowserWebWorkerEnv","WorkerGlobalScope","origin","buildPath","isNumericKey","isLast","arrayToObject","parsePropPath","defaults","transitional","adapter","transformRequest","headers","contentType","getContentType","hasJSONContentType","isObjectPayload","setContentType","platform","helpers","isNode","toURLEncodedForm","formSerializer","_FormData","env","rawValue","parse","stringifySafely","transformResponse","JSONRequested","responseType","strictJSONParsing","ERR_BAD_RESPONSE","timeout","xsrfCookieName","xsrfHeaderName","maxContentLength","maxBodyLength","validateStatus","common","ignoreDuplicateOf","$internals","normalizeHeader","header","normalizeValue","matchHeaderValue","isHeaderNameFilter","AxiosHeaders","valueOrRewrite","setHeader","_value","_header","_rewrite","lHeader","setHeaders","rawHeaders","parsed","line","substring","parseHeaders","parser","tokens","tokensRE","parseTokens","matcher","deleted","deleteHeader","normalize","format","normalized","char","formatHeader","targets","asStrings","first","computed","accessor","accessors","defineAccessor","accessorName","methodName","arg1","arg2","arg3","buildAccessors","mapped","headerValue","transformData","fns","isCancel","__CANCEL__","CanceledError","ERR_CANCELED","settle","resolve","reject","ERR_BAD_REQUEST","progressEventReducer","isDownloadStream","freq","bytesNotified","_speedometer","samplesCount","bytes","timestamps","firstSampleTS","tail","chunkLength","startedAt","bytesCount","passed","timestamp","threshold","invoke","loaded","total","lengthComputable","progressBytes","rate","progress","estimated","progressEventDecorator","throttled","asyncDecorator","msie","userAgent","urlParsingNode","originURL","resolveURL","protocol","host","search","hostname","port","pathname","charAt","requestURL","write","expires","domain","secure","cookie","toGMTString","read","RegExp","decodeURIComponent","buildFullPath","baseURL","requestedURL","relativeURL","combineURLs","headersToObject","mergeConfig","config1","config2","getMergedValue","mergeDeepProperties","valueFromConfig2","defaultToConfig2","mergeDirectKeys","mergeMap","paramsSerializer","timeoutMessage","withCredentials","withXSRFToken","onUploadProgress","onDownloadProgress","decompress","beforeRedirect","transport","httpAgent","httpsAgent","cancelToken","socketPath","responseEncoding","configValue","newConfig","auth","username","password","isURLSameOrigin","xsrfValue","cookies","XMLHttpRequest","Promise","_config","resolveConfig","requestData","requestHeaders","onCanceled","uploadThrottled","downloadThrottled","flushUpload","flushDownload","unsubscribe","signal","onloadend","responseHeaders","getAllResponseHeaders","err","responseText","statusText","open","onreadystatechange","readyState","responseURL","onabort","ECONNABORTED","ERR_NETWORK","ontimeout","timeoutErrorMessage","ETIMEDOUT","setRequestHeader","upload","abort","subscribe","aborted","parseProtocol","send","signals","AbortController","reason","streamChunk","chunk","chunkSize","byteLength","end","pos","trackStream","stream","onProgress","onFinish","async","iterable","asyncIterator","reader","getReader","readStream","readBytes","_onFinish","ReadableStream","pull","close","loadedBytes","enqueue","return","highWaterMark","isFetchSupported","fetch","Request","Response","isReadableStreamSupported","encodeText","TextEncoder","arrayBuffer","supportsRequestStream","duplexAccessed","hasContentType","duplex","supportsResponseStream","resolvers","res","_","ERR_NOT_SUPPORT","fetchOptions","composedSignal","toAbortSignal","requestContentLength","getContentLength","_request","getBodyLength","resolveBodyLength","contentTypeHeader","isCredentialsSupported","credentials","isStreamResponse","responseContentLength","responseData","knownAdapters","http","xhr","renderReason","isResolvedHandle","adapters","nameOrAdapter","rejectedReasons","reasons","s","throwIfCancellationRequested","throwIfRequested","dispatchRequest","validators","deprecatedWarnings","validator","version","formatMessage","opt","desc","opts","ERR_DEPRECATED","assertOptions","schema","allowUnknown","ERR_BAD_OPTION_VALUE","ERR_BAD_OPTION","Axios","instanceConfig","interceptors","configOrUrl","dummy","boolean","function","contextHeaders","requestInterceptorChain","synchronousRequestInterceptors","interceptor","unshift","responseInterceptorChain","promise","chain","onFulfilled","onRejected","getUri","generateHTTPMethod","isForm","CancelToken","executor","resolvePromise","_listeners","onfulfilled","_resolve","HttpStatusCode","Continue","SwitchingProtocols","Processing","EarlyHints","Ok","Created","Accepted","NonAuthoritativeInformation","NoContent","ResetContent","PartialContent","MultiStatus","AlreadyReported","ImUsed","MultipleChoices","MovedPermanently","Found","SeeOther","NotModified","UseProxy","Unused","TemporaryRedirect","PermanentRedirect","BadRequest","Unauthorized","PaymentRequired","Forbidden","NotFound","MethodNotAllowed","NotAcceptable","ProxyAuthenticationRequired","RequestTimeout","Conflict","Gone","LengthRequired","PreconditionFailed","PayloadTooLarge","UriTooLong","UnsupportedMediaType","RangeNotSatisfiable","ExpectationFailed","ImATeapot","MisdirectedRequest","UnprocessableEntity","Locked","FailedDependency","TooEarly","UpgradeRequired","PreconditionRequired","TooManyRequests","RequestHeaderFieldsTooLarge","UnavailableForLegalReasons","InternalServerError","NotImplemented","BadGateway","ServiceUnavailable","GatewayTimeout","HttpVersionNotSupported","VariantAlsoNegotiates","InsufficientStorage","LoopDetected","NotExtended","NetworkAuthenticationRequired","axios","createInstance","defaultConfig","VERSION","toFormData","Cancel","all","promises","spread","isAxiosError","payload","formToJSON","getAdapter","wp","i18n","namespaceTrimmed","endpointTrimmed","namespace","endpoint","normalizePath","splitted","localeCompare","safeDecodeURIComponent","uriComponent","uriComponentError","getQueryArgs","getQueryString","accumulator","keyValue","object","isNextKeyArrayIndex","setPath","buildQueryString","string","valuePairs","member","memberValue","substr","addQueryArgs","baseUrl","queryStringIndex","prepareResponse","modifyQuery","queryArgs","parseResponse","json","getNextPageUrl","linkHeader","parseLinkHeader","pathIsUnbounded","urlIsUnbounded","requestContainsUnboundedQuery","per_page","results","nextPage","mergedResults","nextResponse","nextResults","OVERRIDE_METHODS","Set","DEFAULT_METHOD","getQueryArg","hasQueryArg","parseResponseAndNormalizeError","shouldParseResponse","parseAndThrowError","invalidJsonError","__","parseJsonAndNormalizeError","unknownError","removeQueryArgs","queryString","DEFAULT_HEADERS","Accept","DEFAULT_OPTIONS","middlewares","_locale","checkStatus","fetchHandler","nextOptions","remainingOptions","enhancedHandler","reduceRight","middleware","workingOptions","nonceEndpoint","text","nonceMiddleware","setFetchHandler","newFetchHandler","createNonceMiddleware","headerName","createPreloadingMiddleware","preloadedData","fromEntries","rawPath","rest_route","pathFromQuery","cacheData","createRootURLMiddleware","rootURL","optionsWithPath","apiRoot","fetchAllMiddleware","mediaUploadMiddleware","isCreateMethod","isMediaUploadRequest","retries","postProcess","attachmentId","createThemePreviewMiddleware","themePath","wpThemePreview","wp_theme_preview","BASE_URL","cg_jobs_jobstream_url","searchPosts","queryParams","filters","page","country_code","fetchfilters","countryCode","memoize","reactPropsRegex","isPropValid","StyleSheet","_insertTag","tag","before","tags","insertionPoint","nextSibling","prepend","container","insertBefore","isSpeedy","speedy","ctr","_proto","hydrate","rule","createStyleElement","sheet","styleSheets","ownerNode","sheetForTag","insertRule","cssRules","_tag$parentNode","fromCharCode","pattern","replacement","indexof","begin","array","column","character","characters","parent","prev","peek","caret","alloc","dealloc","delimit","whitespace","escaping","commenter","COMMENT","output","compile","rules","rulesets","pseudo","points","declarations","offset","atrule","property","variable","scanning","ampersand","reference","comment","declaration","ruleset","post","identifierWithPointTracking","fixedElements","compat","isImplicitRule","toRules","getRules","parentRules","removeLabel","defaultStylisPlugins","createCache","ssrStyles","getAttribute","_insert","stylisPlugins","inserted","nodesToHydrate","attrib","currentSheet","finalizingPlugins","serializer","selector","serialized","shouldCache","registered","unitlessKeys","animationIterationCount","aspectRatio","borderImageOutset","borderImageSlice","borderImageWidth","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","columns","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridRow","gridRowEnd","gridRowSpan","gridRowStart","gridColumn","gridColumnEnd","gridColumnSpan","gridColumnStart","msGridRow","msGridRowSpan","msGridColumn","msGridColumnSpan","fontWeight","lineHeight","order","orphans","scale","tabSize","widows","zoom","WebkitLineClamp","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth","hyphenateRegex","animationRegex","isCustomProperty","isProcessableValue","processStyleName","styleName","processStyleValue","cursor","handleInterpolation","mergedProps","interpolation","componentSelector","__emotion_styles","keyframes","anim","serializedStyles","asString","interpolated","createStringFromObject","previousCursor","cached","labelPattern","stringMode","strings","raw","identifierName","useInsertionEffect","EmotionCacheContext","HTMLElement","Provider","forwardRef","useContext","isStringTag","testOmitPropsOnStringTag","testOmitPropsOnComponent","getDefaultShouldForwardProp","composeShouldForwardProps","isReal","shouldForwardProp","optionsShouldForwardProp","__emotion_forwardProp","propName","newStyled","createStyled","targetClassName","__emotion_real","baseTag","__emotion_base","label","defaultShouldForwardProp","shouldUseAs","Styled","registeredStyles","rawClassName","FinalTag","as","classInterpolations","theme","finalShouldForwardProp","withComponent","nextTag","bounce","insertable","LoadingWrapper","styled","div","Loading","locals","createContext","useConstant","init","useRef","MotionConfigContext","transformPagePoint","isStatic","reducedMotion","PopChildMeasure","getSnapshotBeforeUpdate","childRef","isPresent","sizeRef","componentDidUpdate","PopChild","useId","motionPopId","PresenceChild","initial","onExitComplete","custom","presenceAffectsLayout","mode","presenceChildren","newChildrenMap","memoizedOnExitComplete","useCallback","childId","isComplete","values","useMemo","LayoutGroupContext","any","warning","invariant","getChildKey","onlyElements","filtered","isValidElement","useIsomorphicLayoutEffect","useLayoutEffect","useEffect","AnimatePresence","exitBeforeEnter","presentChildren","presentKeys","isInitialRender","pendingPresentChildren","exitComplete","diffedChildren","setDiffedChildren","useState","renderedChildren","setRenderedChildren","exitingChildren","nextChildren","forceRender","isEveryExitComplete","isExitComplete","createDOMMotionComponentProxy","componentFactory","Proxy","componentCache","_target","isAnimationControls","start","isKeyframesTarget","shallowCompare","prevLength","isVariantLabel","getValueState","visualElement","getVelocity","resolveVariantFromProps","velocity","variants","resolveVariant","getProps","variantPriorityOrder","variantProps","transformPropOrder","transformProps","seconds","millisecondsToSeconds","milliseconds","underDampedSpring","stiffness","damping","restSpeed","keyframesTransition","duration","ease","getDefaultTransition","valueKey","startsWith","getValueTransition","isNotNull","getFinalKeyframe","repeat","repeatType","finalKeyframe","resolvedKeyframes","stepsOrder","createRenderBatcher","scheduleNextBatch","allowKeepAlive","runNextFrame","useDefaultElapsed","delta","isProcessing","flagRunNextFrame","steps","thisFrame","nextFrame","flushNextFrame","toKeepAlive","WeakSet","latestFrameData","triggerCallback","step","schedule","keepAlive","immediate","queue","add","frameData","createRenderStep","resolveKeyframes","preRender","postRender","processBatch","performance","cancelFrame","frameSteps","calcBezier","a1","a2","cubicBezier","mX1","mY1","mX2","mY2","currentX","currentT","binarySubdivide","mirrorEasing","reverseEasing","backOut","backIn","backInOut","anticipate","circIn","sin","acos","circOut","circInOut","isZeroValueString","isNumericalString","checkStringStartsWith","isCSSVariableName","startsAsVariableToken","isCSSVariableToken","singleCssVariableRegex","splitCSSVariableRegex","getVariableValue","depth","fallback","token1","token2","parseCSSVariable","resolved","getPropertyValue","trimmed","alpha","createUnitType","unit","degrees","percent","px","vh","vw","progressPercentage","positionalKeys","isNumOrPxType","getPosFromMatrix","matrix","getTranslateFromMatrix","pos2","pos3","_bbox","matrix3d","transformKeys","nonTranslationalTransformKeys","positionalValues","paddingLeft","paddingRight","paddingTop","paddingBottom","translateX","translateY","testValueType","dimensionValueTypes","findDimensionValueType","find","toResolve","isScheduled","anyNeedsMeasurement","measureAllKeyframes","resolversToMeasure","resolver","needsMeasurement","elementsToMeasure","transformsToRestore","removedTransforms","getValue","removeNonTranslationalTransform","measureInitialState","restore","measureEndState","suspendedScrollY","scrollTo","complete","readAllKeyframes","readKeyframes","KeyframeResolver","unresolvedKeyframes","onComplete","motionValue","isAsync","scheduleResolve","currentValue","valueAsRead","readValue","setFinalKeyframe","renderEndStyles","resume","sanitize","floatRegex","singleColorRegex","isColorString","testProp","isNullish","splitColor","aName","bName","cName","rgbUnit","clampRgbUnit","rgba","red","green","blue","alpha$1","hex","hsla","hue","saturation","lightness","color","colorRegex","NUMBER_TOKEN","COLOR_TOKEN","complexRegex","analyseComplexValue","originalValue","var","types","parsedValue","parseComplexValue","createTransformer","numSections","convertNumbersToZero","complex","getAnimatableNone","transformer","maxDefaults","applyDefaultFilter","functionRegex","functions","browserNumberValueTypes","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderRadius","radius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","maxHeight","margin","marginRight","marginBottom","backgroundPositionX","backgroundPositionY","transformValueTypes","rotate","rotateX","rotateY","rotateZ","scaleX","scaleY","scaleZ","skew","skewX","skewY","distance","translateZ","perspective","transformPerspective","originX","originY","originZ","numberValueTypes","numOctaves","defaultValueTypes","backgroundColor","outlineColor","fill","stroke","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","WebkitFilter","getDefaultValueType","defaultValueType","invalidTemplates","DOMKeyframesResolver","super","keyframe","resolveNoneKeyframes","originType","targetType","noneKeyframeIndexes","animatableTemplate","noneIndex","makeNoneKeyframesAnimatable","pageYOffset","measuredOrigin","measureViewportBox","measureKeyframe","jump","finalKeyframeIndex","unsetTransformName","unsetTransformValue","isGenerator","clearTime","newTime","isAnimatable","canAnimate","originKeyframe","targetKeyframe","isOriginAnimatable","isTargetAnimatable","hasKeyframesChanged","BaseAnimation","delay","repeatDelay","isStopped","hasAttemptedResolve","createdAt","updateFinishedPromise","calcStartTime","resolvedAt","_resolved","onKeyframesResolved","onUpdate","resolveFinishedPromise","resolvedAnimation","initPlayback","onPostResolved","currentFinishedPromise","velocityPerSecond","frameDuration","calcGeneratorVelocity","resolveValue","prevT","rootIterations","calcAngularFreq","undampedFreq","dampingRatio","durationKeys","physicsKeys","isSpringType","spring","restDelta","mass","isResolvedFromDuration","springOptions","derived","envelope","derivative","exponentialDecay","exp","initialGuess","approximateRoot","findSpring","getSpringOptions","initialVelocity","initialDelta","undampedAngularFreq","isGranularScale","resolveSpring","angularFreq","cos","dampedAngularFreq","freqForT","sinh","cosh","calculatedDuration","currentVelocity","isBelowVelocityThreshold","isBelowDisplacementThreshold","inertia","power","timeConstant","bounceDamping","bounceStiffness","modifyTarget","nearestBoundary","amplitude","ideal","calcDelta","calcLatest","applyFriction","latest","timeReachedBoundary","spring$1","checkCatchBoundary","hasUpdatedFrame","easeIn","easeOut","easeInOut","isBezierDefinition","easingLookup","linear","easingDefinitionToFunction","x1","y1","x2","y2","combineFunctions","transformers","to","toFromDifference","mixNumber","hueToRgb","mixImmediate","mixLinearColor","fromExpo","expo","colorTypes","asRGBA","model","hslaToRgba","mixColor","fromRGBA","toRGBA","blended","invisibleValues","getMixer","mixComplex","mixArray","mixObject","numValues","blendValue","template","originStats","targetStats","mixVisibility","orderedOrigin","pointers","originIndex","originValue","matchOrder","mix","mixer","keyframeValues","times","easingFunctions","isEasingArray","absoluteTimes","convertOffsetToTimes","remaining","offsetProgress","fillOffset","defaultOffset","mapTimeToKeyframe","input","isClamp","inputLength","mixers","customMixer","mixerFactory","numMixers","easingFunction","createMixers","interpolator","progressInRange","interpolate","frameloopDriver","passTimestamp","stop","generators","decay","tween","percentToProgress","MainThreadAnimation","holdTime","cancelTime","currentTime","playbackSpeed","pendingPlayState","startTime","teardown","onStop","KeyframeResolver$1","keyframes$1","generatorFactory","mapPercentToKeyframes","mirroredGenerator","generator","Infinity","calcGeneratorDuration","resolvedDuration","totalDuration","tick","sample","timeWithoutDelay","isInDelayPhase","elapsed","frameGenerator","currentIteration","iterationProgress","isAnimationFinished","finish","driver","newSpeed","hasChanged","onPlay","stopDriver","acceleratedValues","supportsFlags","linearEasing","memoSupports","supportsFlag","memoized","supportsLinearEasing","animate","isWaapiSupportedEasing","supportedWaapiEasing","cubicBezierAsString","mapEasingToNativeEasing","numPoints","generateLinearEasing","segmentEasing","attachTimeline","animation","timeline","onfinish","supportsWaapi","unsupportedEasingFunctions","AcceleratedAnimation","owner","requiresPregeneratedKeyframes","pregeneratedAnimation","sampleAnimation","pregeneratedKeyframes","pregenerateKeyframes","valueName","keyframeOptions","iterations","startWaapiAnimation","pendingTimeline","playbackRate","playState","sampleTime","setWithVelocity","supportsScrollTimeline","ScrollTimeline","GroupPlaybackControls","animations","runAll","onResolve","onReject","getAll","setAll","newValue","subscriptions","controls","animateMotionValue","isHandoff","valueTransition","when","_delay","delayChildren","staggerChildren","staggerDirection","isTransitionDefined","shouldSkip","addUniqueItem","removeItem","SubscriptionManager","notify","numSubscriptions","getSize","collectMotionValues","MotionValue","canTrackVelocity","events","updateAndNotify","updatedAt","setPrevFrameValue","setCurrent","change","renderRequest","hasAnimated","prevFrameValue","prevUpdatedAt","onChange","subscription","eventName","clearListeners","eventManagers","attach","passiveEffect","stopPassiveEffect","endAnimation","getPrevious","startAnimation","animationStart","animationComplete","clearAnimation","animationCancel","isAnimating","setMotionValue","hasValue","addValue","camelToDash","optimizedAppearDataAttribute","getOptimisedAppearId","isMotionValue","addValueToWillChange","willChange","shouldBlockAnimation","protectedKeys","needsAnimating","shouldBlock","animateTarget","targetAndTransition","transitionOverride","transitionEnd","animationTypeState","animationState","getState","latestValues","valueTarget","MotionHandoffAnimation","appearId","shouldReduceMotion","setTarget","animateVariant","variant","presenceContext","getAnimation","getChildAnimations","variantChildren","forwardDelay","maxStaggerDuration","generateStaggerDuration","sortByTreeOrder","animateChildren","last","sortNodePosition","numVariantProps","getVariantContext","isControllingVariants","reversePriorityOrder","numAnimationTypes","createAnimationState","resolvedDefinition","animateVisualElement","animateList","createState","buildResolvedTypeValues","animateChanges","changedActiveType","removedKeys","encounteredKeys","removedVariantIndex","typeState","propIsVariant","activeDelta","isInherited","manuallyAnimateOnMount","prevProp","variantDidChange","checkVariantsDidChange","shouldAnimateType","handledRemovedValues","definitionList","resolvedValues","prevResolvedValues","allKeys","markToAnimate","liveStyle","valueHasChanged","blockInitialAnimation","fallbackAnimation","fallbackTarget","getBaseTarget","shouldAnimate","setActive","setAnimateFunction","makeAnimator","reset","createTypeState","whileInView","whileHover","whileTap","whileDrag","whileFocus","exit","Feature","isMounted","updateAnimationControlsSubscription","unmountControls","mount","prevAnimate","unmount","prevIsPresent","prevPresenceContext","exitAnimation","isPrimaryPointer","pointerType","button","isPrimary","extractEventInfo","pointType","point","addDomEvent","passive","addPointerEvent","addPointerInfo","PanSession","contextWindow","dragSnapToOrigin","startEvent","lastMoveEvent","lastMoveEventInfo","updatePoint","info","getPanInfo","history","isPanStarted","isDistancePastThreshold","xDelta","yDelta","distance2D","onStart","onMove","handlePointerMove","transformPoint","handlePointerUp","onEnd","onSessionEnd","resumeAnimation","panInfo","initialInfo","onSessionStart","removeListeners","updateHandlers","subtractPoint","lastDevicePoint","startDevicePoint","timeDelta","timestampedPoint","lastPoint","createLock","lock","globalHorizontalLock","globalVerticalLock","getGlobalLock","drag","openHorizontal","openVertical","isDragActive","openGestureLock","isRefObject","calcLength","axis","calcAxisDelta","originPoint","translate","calcBoxDelta","calcRelativeAxis","relative","calcRelativeAxisPosition","layout","calcRelativePosition","calcRelativeAxisConstraints","calcViewportAxisConstraints","layoutAxis","constraintsAxis","defaultElastic","resolveAxisElastic","dragElastic","minLabel","maxLabel","resolvePointElastic","createBox","eachAxis","convertBoundingBoxToBox","isIdentityScale","hasScale","hasTransform","has2DTranslate","is2DTranslate","scalePoint","applyPointDelta","boxScale","applyAxisDelta","applyBoxDelta","box","TREE_SCALE_SNAP_MIN","TREE_SCALE_SNAP_MAX","translateAxis","transformAxis","axisTranslate","axisScale","axisOrigin","transformBox","topLeft","bottomRight","transformBoxPoints","getBoundingClientRect","getContextWindow","elementDragControls","VisualElementDragControls","openGlobalLock","isDragging","constraints","hasMutatedConstraints","elastic","originEvent","snapToCursor","panSession","pauseAnimation","stopAnimation","dragPropagation","onDragStart","resolveConstraints","projection","isAnimationBlocked","getAxisMotionValue","measuredAxis","layoutBox","dragDirectionLock","onDirectionLock","onDrag","lockThreshold","getCurrentDirection","updateAxis","getAnimationState","getTransformPagePoint","onDragEnd","_point","shouldDrag","axisValue","applyConstraints","dragConstraints","measure","prevConstraints","resolveRefConstraints","calcRelativeConstraints","resolveDragElastic","relativeConstraints","rebaseAxisConstraints","onMeasureDragConstraints","constraintsElement","constraintsBox","rootProjectionNode","viewportBox","scroll","measurePageBox","measuredConstraints","calcViewportConstraints","userConstraints","convertBoxToBoundingBox","dragMomentum","dragTransition","onDragTransitionEnd","momentumAnimations","startAxisValueAnimation","dragKey","scalePositionWithinConstraints","boxProgress","sourceLength","targetLength","calcOrigin","transformTemplate","updateScroll","updateLayout","addListeners","stopPointerListener","dragListener","measureDragConstraints","stopMeasureLayoutListener","stopResizeListener","stopLayoutUpdateListener","hasLayoutChanged","asyncHandler","SwitchLayoutGroupContext","globalProjectionState","hasAnimatedSinceResize","hasEverUpdated","pixelsToPercent","pixels","correctBorderRadius","correct","correctBoxShadow","treeScale","projectionDelta","original","shadow","xScale","yScale","averageScale","scaleCorrectors","microtask","cancelMicrotask","MeasureLayoutWithContext","componentDidMount","layoutGroup","switchLayoutGroup","layoutId","correctors","defaultScaleCorrectors","group","didUpdate","safeToRemove","setOptions","layoutDependency","willUpdate","promote","relegate","getStack","members","currentAnimation","isLead","componentWillUnmount","promoteContext","scheduleCheckAfterUnmount","deregister","MeasureLayout","usePresence","applyTo","boxShadow","borders","numBorders","asNumber","isPx","getRadius","radiusName","easeCrossfadeIn","compress","easeCrossfadeOut","copyAxisInto","originAxis","copyBoxInto","originBox","copyAxisDeltaInto","originDelta","removePointDelta","removeAxisTransforms","transforms","scaleKey","originKey","sourceAxis","removeAxisDelta","xKeys","yKeys","removeBoxTransforms","sourceBox","isAxisDeltaZero","isDeltaZero","axisEquals","axisEqualsRounded","boxEqualsRounded","axisDeltaEquals","NodeStack","scheduleRender","prevLead","lead","indexOfNode","findIndex","preserveFollowOpacity","show","resumeFrom","preserveOpacity","snapshot","animationValues","isUpdating","isLayoutDirty","crossfade","hide","exitAnimationComplete","resumingFrom","removeLeadSnapshot","compareByDepth","FlatTree","isDirty","resolveMotionValue","unwrappedValue","toValue","metrics","totalNodes","resolvedTargetDeltas","recalculatedProjection","isDebug","MotionDebug","transformAxes","hiddenVisibility","visibility","resetDistortingTransform","sharedAnimationValues","setStaticValue","cancelTreeOptimisedTransformAnimations","projectionNode","hasCheckedOptimisedAppear","MotionHasOptimisedAnimation","MotionCancelOptimisedAnimation","createProjectionNode","attachResizeListener","defaultParent","measureScroll","checkIsScrollRoot","resetTransform","animationId","isTreeAnimating","isProjectionDirty","isSharedProjectionDirty","isTransformDirty","updateManuallyBlocked","updateBlockedByResize","isSVG","needsReset","shouldResetTransform","eventHandlers","hasTreeAnimated","updateScheduled","scheduleUpdate","projectionUpdateScheduled","checkUpdateFailed","clearAllSnapshots","updateProjection","propagateDirtyNodes","resolveTargetDelta","calcProjection","cleanDirtyNodes","record","resolvedRelativeTargetAt","hasProjected","isVisible","animationProgress","sharedNodes","notifyListeners","subscriptionManager","hasListeners","cancelDelay","resizeUnblockUpdate","checkElapsed","finishAnimation","registerSharedNode","hasRelativeTargetChanged","newLayout","isTreeAnimationBlocked","relativeTarget","layoutTransition","defaultLayoutTransition","onLayoutAnimationStart","onLayoutAnimationComplete","targetChanged","targetLayout","hasOnlyRelativeTargetChanged","layoutRoot","setAnimationOrigin","animationOptions","blockUpdate","unblockUpdate","isUpdateBlocked","startUpdate","resetSkewAndRotation","getTransformTemplate","shouldNotifyListeners","prevTransformTemplateValue","updateSnapshot","clearMeasurements","clearIsLayoutDirty","resetTransformStyle","notifyLayoutUpdate","clearSnapshot","removeLeadSnapshots","scheduleUpdateProjection","alwaysMeasureLayout","prevLayout","layoutCorrected","phase","layoutScroll","isRoot","wasRoot","isResetRequested","hasProjection","transformTemplateValue","transformTemplateHasChanged","removeTransform","pageBox","removeElementScroll","roundAxis","measuredBox","checkNodeWasScrollRoot","boxWithoutScroll","applyTransform","transformOnly","withTransforms","boxWithoutTransform","setTargetDelta","targetDelta","forceRelativeParentToResolveTarget","relativeParent","forceRecalculation","getLead","isShared","attemptToResolveRelativeTarget","getClosestProjectingParent","relativeTargetOrigin","targetWithTransforms","isProjecting","canSkip","pendingAnimation","prevTreeScaleX","prevTreeScaleY","treePath","isSharedTransition","treeLength","applyTreeDeltas","prevProjectionDelta","createProjectionDeltas","notifyAll","projectionDeltaWithTransform","snapshotLatestValues","mixedValues","relativeLayout","isSharedLayoutAnimation","isOnlyMember","shouldCrossfadeOpacity","hasOpacityCrossfade","prevRelativeTarget","mixTargetDelta","mixAxisDelta","mixAxis","follow","opacityExit","borderLabel","followRadius","leadRadius","mixValues","motionValue$1","animateSingleValue","completeAnimation","applyTransformsToTarget","shouldAnimatePositionOnly","animationType","xLength","yLength","initialPromotionConfig","shouldPreserveFollowOpacity","getPrevLead","hasDistortingTransform","resetValues","getProjectionStyles","styleProp","pointerEvents","emptyStyles","valuesToRender","latestTransform","xTranslate","yTranslate","zTranslate","elementScaleX","elementScaleY","buildProjectionTransform","transformOrigin","corrected","num","resetTree","measuredLayout","axisSnapshot","layoutDelta","visualDelta","parentSnapshot","parentLayout","relativeSnapshot","onBeforeLayoutMeasure","userAgentContains","roundPoint","DocumentProjectionNode","scrollLeft","scrollTop","HTMLProjectionNode","documentNode","pan","removePointerDownListener","onPointerDown","pointerDownEvent","session","createPanHandlers","onPanSessionStart","onPanStart","onPan","onPanEnd","removeGroupControls","dragControls","ProjectionNode","addHoverEvent","callbackName","isNodeOrChild","parentElement","fireSyntheticPointerEvent","syntheticPointerEvent","PointerEvent","observerCallbacks","fireObserverCallback","fireAllObserverCallbacks","thresholdNames","gestureAnimations","inView","hasEnteredView","isInView","startObserver","viewport","rootMargin","amount","once","rootInteresectionObserver","lookupRoot","rootObservers","IntersectionObserver","initIntersectionObserver","observeIntersection","isIntersecting","onViewportEnter","onViewportLeave","prevViewport","hasViewportOptionChanged","tap","removeStartListeners","removeEndListeners","removeAccessibleListeners","startPointerPress","startInfo","isPressing","removePointerUpListener","endEvent","endInfo","checkPressEnd","onTap","onTapCancel","globalTapTarget","removePointerCancelListener","cancelEvent","cancelInfo","cancelPress","startPress","startAccessiblePress","removeKeydownListener","keydownEvent","keyupEvent","removeBlurListener","onTapStart","removePointerListener","removeFocusListener","onFocus","isFocusVisible","onBlur","hover","MotionContext","LazyContext","strict","useVisualElement","visualState","createVisualElement","ProjectionNodeConstructor","lazyContext","reducedMotionConfig","visualElementRef","renderer","initialLayoutGroupConfig","getClosestProjectingNode","optimisedAppearId","wantsHandoff","MotionHandoffIsComplete","MotionIsMounted","updateFeatures","MotionHandoffMarkAsComplete","allowProjection","useMotionRef","externalRef","isVariantNode","variantLabelsAsDependency","featureProps","featureDefinitions","isEnabled","motionComponentSymbol","createRendererMotionComponent","preloadedFeatures","useRender","useVisualState","loadFeatures","ForwardRefMotionComponent","configAndProps","useLayoutId","inherit","getCurrentTreeVariants","useCreateMotionContext","layoutProjection","combined","getProjectionFunctionality","layoutGroupId","lowercaseSVGElements","isSVGComponent","renderHTML","vars","setProperty","camelCaseAttributes","renderSVG","renderState","_styleProp","attrs","isForcedMotionValue","scrapeMotionValuesFromProps","newValues","makeUseVisualState","make","createRenderState","onMount","makeLatestValues","makeState","scrapeMotionValues","motionValues","isControllingVariants$1","isVariantNode$1","isInitialAnimationBlocked","variantToSet","getValueAsType","translateAlias","numTransforms","buildHTMLStyles","hasTransformOrigin","valueAsType","transformString","transformIsDefault","valueIsDefault","buildTransform","dashKeys","camelKeys","buildSVGAttrs","attrX","attrY","attrScale","pathLength","pathSpacing","pathOffset","isSVGTag","viewBox","dimensions","calcSVGTransformOrigin","spacing","useDashCase","buildSVGPath","svgMotionConfig","htmlMotionConfig","copyRawValuesOnly","useHTMLProps","htmlProps","useInitialMotionValues","useStyle","userSelect","WebkitUserSelect","WebkitTouchCallout","touchAction","validMotionProps","isValidMotionProp","shouldForward","isValidProp","require","useSVGProps","_isStatic","visualProps","rawStyles","createUseRender","forwardMotionProps","filteredProps","isDom","filterProps","elementProps","createMotionComponentFactory","prefersReducedMotion","hasReducedMotionListener","visualElementStore","valueTypes","propEventHandlers","VisualElement","_props","_prevProps","_visualElement","valueSubscriptions","prevMotionValues","propEventSubscriptions","notifyUpdate","triggerBuild","renderInstance","renderScheduledAt","baseTarget","initialValues","initialMotionValues","removeFromVariantTree","addVariantChild","bindToMotionValue","motionMediaQuery","setReducedMotionPreferences","initPrefersReducedMotion","valueIsTransform","removeOnChange","latestValue","removeOnRenderRequest","removeSyncCheck","MotionCheckAppearSync","sortInstanceNodePosition","featureDefinition","FeatureConstructor","measureInstanceViewportBox","getStaticValue","nextValue","prevValue","existingValue","removeValue","updateMotionValuesFromProps","handleChildMotionValue","getVariant","getClosestVariantNode","closestVariantNode","removeValueFromRenderState","getBaseTargetFromProps","readValueFromInstance","setBaseTarget","valueFromInitial","DOMVisualElement","compareDocumentPosition","HTMLVisualElement","defaultType","computedStyle","childSubscription","textContent","SVGVisualElement","createDomVisualElement","motion","cCode","cg_jobs_country_code","cg_jobs_es_var","pathName","Filters","initialFilters","onFiltersChange","settingFilters","resetFilters","keyword","filterOptions","setFilterOptions","selectedFilters","setSelectedFilters","valueSet","transformedSet","transformSelectedFilters","loading","setLoading","selectedFilterType","setSelectedFilterType","visibleFilters","experience_level","setExperience_level","professional_communities","setProfessional_communities","setLocation","contract_type","setContract_type","brand","setBrand","orderedTypes","tabFilters","TabFilters","cleanedFilters","_ref3","orderedData","fetchFilterOptions","getElementById","click","handleCheckboxChange","prevFilters","newSelection","updatedFilters","clearFilter","_ref4","clearAllFilters","singleFilter","ul","childItem","li","checked","htmlFor","noResultText","cg_jobs_noresult_text","NoResult","dangerouslySetInnerHTML","__html","role","xmlns","MobileFilters","totalResult","showMobileFilters","setShowMobileFilters","loadingFilters","setLoadingFilters","totalResultLoading","setTotalResultLoading","hasActiveFilters","setHasActiveFilters","setVisibleFilters","showMoreFilters","setShowMoreFilters","showFilters","canvasStyle","handleShowMore","MAX_SAFE_INTEGER","flatMap","clearedFilters","totalPages","currentPage","onPageChange","displayPages","setDisplayPages","totalDisplayPages","setTotalDisplayPages","innerWidth","startPage","endPage","pages","calculateDisplayPages","handleFirstPage","disabled","handlePrevPage","pageNum","handlePageClick","handleNextPage","handleLastPage","selectedTags","cg_jobs_get_tags_data","cgJobsVars","JobRow","locations","setLocations","experienceText","setExperienceText","totalLocations","base_slug","jobLink","refId","updateLocationNumbers","department","sbu","SimilarOpportunities","jobList","setJobList","setCurrentPage","setTotalPages","fetchListings","currentFilters","professionalCommunity","contractType","experienceLevel","newJobs","jobsIdList","job","handleSimilarPageChange","scrollY","Pagination","JobList","jobs","bannerText","cg_jobs_banner_text","placeholderText","cg_jobs_placeholder_text","BannerSearch","currentKeyword","onSearch","onTabFilterOpen","setKeyword","isFilterClose","setIsFilterClose","placeholder","setPlaceholder","isMobileScreen","setIsMobileScreen","isTabletScreen","setIsTabletScreen","inputRef","changeToMobileLayout","wrapper","removeAttribute","gridTemplateColumns","handleSubmit","handleKeyDown","blur","handleChange","onSubmit","select","OpenMobileFilters","modal","modalBody","OpenTabletFilters","filterWrapper","filterContainer","CarouselFilters","onFilterSelect","selectedCarouselFilters","setSelectedCarouselFilters","allExperienceLevels","setAllExperienceLevels","exploreAllJobs","setExploreAllJobs","saveExpData","setSaveExpData","handleCheckboxChangeCarousel","overflowX","overflow","cg_jobs_get_filter_data","App","setQueryParams","setTotalResult","showCarouselFilters","setShowCarouselFilters","setResetFilters","isTabFilterOpen","setIsTabFilterOpen","setFilters","setJobsIdList","filtersWithPagination","dataLayer","ise_keyword","ise_page","ise_engine","log","classList","joinedValues","newUrl","replaceState","breadcrumb","backdrop","updateQueryParams","parameters","handlePageChange","behavior","handleFiltersChange","newFilters","handleKeywordUpdate","newKeyword","handleButtonClick","newSelectedFilters","memoizedFilters","memoizedHandleFiltersChange","memoizedHandleKeywordUpdate","isOpen","_inheritsLoose","_suppressOverwrites","_reverting","_context","_globalTimeline","_win","_coreInitted","_doc","_coreReady","_lastRenderedFrame","_quickTween","_tickerActive","autoSleep","force3D","nullTargetWarn","units","_defaults","overwrite","_bigNum","_tinyNum","_2PI","_HALF_PI","_gsID","_sqrt","_cos","_sin","_isString","_isFunction","_isNumber","_isUndefined","_isObject","_isNotFalse","_windowExists","_isFuncOrString","_isTypedArray","_isArray","_strictNumExp","_numExp","_numWithUnitExp","_complexStringNumExp","_relExp","_delimitedValueExp","_unitExp","_globals","_installScope","_install","scope","_merge","gsap","_missingPlugin","_warn","suppress","_addGlobal","_emptyFunc","_startAtRevertConfig","suppressEvents","isStart","kill","_revertConfigNoKill","_revertConfig","_reservedProps","_lazyTweens","_lazyLookup","_plugins","_effects","_nextGCFrame","_harnessPlugins","_callbackNames","_harness","harnessPlugin","_gsap","harness","targetTest","GSCache","_getCache","_getProperty","_forEachName","names","_round","_roundPrecise","_parseRelative","operator","_arrayContainsAny","toSearch","toFind","_lazyRender","_lazy","_lazySafeRender","force","_initted","_startAt","_numericIfPossible","_passThrough","_setDefaults","toMerge","_mergeDeep","_copyExcluding","excluding","copy","_inheritDefaults","excludeDuration","_dp","_addLinkedListItem","firstProp","lastProp","sortBy","_prev","_next","_removeLinkedListItem","_removeFromParent","onlyIfParentHasAutoRemove","autoRemoveChildren","_act","_uncache","_end","_dur","_start","_dirty","_rewindStartAt","totalTime","revert","immediateRender","autoRevert","_hasNoPausedAncestors","_ts","_elapsedCycleDuration","_repeat","_animationCycle","_tTime","_rDelay","tTime","cycleDuration","whole","_parentToChildTotalTime","parentTime","_tDur","_setEnd","_rts","_alignPlayhead","smoothChildTiming","_time","_postAddChecks","rawTime","_clamp","_zTime","_addToTimeline","skipChecks","_parsePosition","timeScale","_sort","_isFromOrFromStart","_recent","_scrollTrigger","trigger","ScrollTrigger","_attemptInitTween","_initTween","_pt","lazy","_ticker","frame","_parentPlayheadIsBeforeStart","_lock","_setDuration","skipUncache","leavePlayhead","dur","totalProgress","_onUpdateTotalDuration","Timeline","_zeroPosition","endTime","percentAnimation","isPercent","labels","recent","clippedDuration","_createTweenType","irVars","isLegacy","varsIndex","runBackwards","startAt","Tween","_conditionalReturn","getUnit","_slice","_isArrayLike","nonEmpty","nodeType","leaveStrings","_wake","ar","_accumulator","_flatten","nativeElement","shuffle","distribute","_parseEase","isDecimal","ratios","ratioX","ratioY","center","edges","wrapAt","distances","grid","_invertEase","_roundModifier","snap","snapTo","is2D","increment","dx","dy","closest","roundingIncrement","returnFunction","_wrapArray","_replaceRandom","nums","mapRange","inMin","inMax","outMin","outMax","inRange","outRange","_getLabelInDirection","fromTime","backward","_callback","executeLazyFirst","prevContext","_ctx","callbackScope","_interrupt","scrollTrigger","_registerPluginQueue","_createPlugin","headless","isFunc","Plugin","instanceDefaults","_renderPropTweens","_addPropTween","_killPropTweensOf","modifier","_addPluginModifier","rawVars","statics","getSetter","_getSetter","aliases","PropTween","_255","_colorLookup","aqua","lime","silver","black","maroon","teal","navy","white","olive","yellow","orange","gray","purple","pink","cyan","transparent","_hue","m1","m2","toHSL","forceAlpha","wasHSL","_colorOrderData","_colorExp","_formatColors","orderMatchData","shell","colors","_hslExp","_colorStringFilter","_id","_req","_raf","_self","_delta","_getTime","_lagThreshold","_adjustedLag","_startTime","_lastUpdate","_gap","_nextTime","_tick","overlap","dispatch","manual","deltaRatio","fps","wake","gsapVersions","GreenSockGlobals","sleep","cancelAnimationFrame","lagSmoothing","adjustedLag","_fps","prioritize","_easeMap","_customEaseExp","_quotesExp","_parseObjectInString","parsedVal","lastIndexOf","_propagateYoyoEase","isYoyo","_first","yoyoEase","_yoyo","_ease","_yEase","defaultEase","nested","_CE","_configEaseFromString","_insertEase","lowercaseName","_easeInOutFromOut","_configElastic","period","p3","asin","_configBack","overshoot","Linear","easeNone","none","n1","n2","n3","SteppedEase","immediateStart","Animation","yoyo","_totalTime","_ptLookup","_pTime","iteration","_ps","_recacheAncestors","paused","includeRepeats","wrapRepeats","prevIsReverting","globalTime","_sat","seek","restart","includeDelay","reversed","atTime","invalidate","eventCallback","_onUpdate","_then","_prom","ratio","_Animation","sortChildren","_proto2","fromTo","fromVars","toVars","delayedCall","staggerTo","stagger","onCompleteAll","onCompleteAllParams","onCompleteParams","staggerFrom","staggerFromTo","prevPaused","pauseTween","prevStart","prevIteration","prevTime","tDur","crossingStart","rewinding","doesWrap","repeatRefresh","onRepeat","_hasPause","_forcing","_last","_findNextPauseTween","adjustedTime","addLabel","getChildren","tweens","timelines","ignoreBeforeTime","getById","killTweensOf","_totalTime2","addPause","removePause","onlyActive","getTweensOf","_overwritingTween","parsedTargets","isGlobalTime","_targets","tweenTo","initted","tl","_vars","_onStart","onStartParams","tweenFromTo","fromPosition","toPosition","nextLabel","afterTime","previousLabel","beforeTime","currentLabel","shiftChildren","adjustLabels","soft","includeLabels","updateRoot","_forceAllPropTweens","_addComplexStringPropTween","setter","stringFilter","funcParam","startNums","endNum","startNum","hasRandom","pt","_renderComplexString","matchIndex","fp","optional","parsedStart","_setterFuncWithParam","_setterFunc","_setterPlain","_renderBoolean","_renderPlain","_checkPlugin","plugin","ptLookup","_parseFuncOrString","_processVars","priority","cleanVars","hasPriority","gsData","harnessVars","overwritten","prevStartAt","fullTargets","autoOverwrite","_overwrite","_from","_ptCache","_op","_sortPropTweensByPriority","_onInit","_parseKeyframe","allProps","easeEach","_staggerTweenProps","_staggerPropsToSkip","_Animation2","skipInherit","curTarget","staggerFunc","staggerVarsToMerge","_this3$vars","kf","_proto3","isNegative","prevRatio","_renderZeroDurationTween","resetTo","startIsRelative","skipRecursion","rootPT","lookup","ptCache","_updatePropTweens","overwrittenProps","curLookup","curOverwriteProps","killingTargets","propTweenLookup","firstPT","_arraysMatch","propertyAliases","_addAliasesToVars","onReverseComplete","onReverseCompleteParams","_setterAttribute","hasNonDependentRemaining","op","dep","_setterWithModifier","mSet","mt","pt2","pr","TweenMax","TweenLite","TimelineLite","TimelineMax","_media","_emptyArray","_lastMediaTime","_contextID","_dispatch","_onMediaChange","anyMatch","toggled","conditions","onMatch","Context","_r","isReverted","_proto5","prevSelector","ignore","getTweens","_this4","MatchMedia","contexts","_proto6","active","cond","registerPlugin","_len2","_key2","getProperty","uncache","quickSetter","setters","quickTo","_setDefaults2","isTweening","registerEffect","effect","plugins","extendTimeline","pluginName","registerEase","parseEase","exportRoot","includeDelayedCalls","matchMediaRefresh","found","wrap","range","wrapYoyo","unitize","mutate","interpolators","il","master","install","effects","ticker","globalTimeline","core","globals","getCache","reverting","toAdd","suppressOverwrites","_getPluginPropTween","_buildModifierPlugin","temp","modifiers","_addModifiers","Power0","Power1","Power2","Power3","Power4","Quad","Cubic","Quart","Quint","Strong","Elastic","Back","Bounce","Sine","Expo","Circ","_docElement","_pluginInitted","_tempDiv","_recentSetterPlugin","_supports3D","_transformProps","_RAD2DEG","_DEG2RAD","_atan2","_capsExp","_horizontalExp","_complexExp","_propertyAliases","autoAlpha","_renderCSSProp","_renderPropWithEnd","_renderCSSPropWithBeginning","_renderRoundedCSSProp","_renderNonTweeningValue","_renderNonTweeningValueOnlyAtEnd","_setterCSSStyle","_setterCSSProp","_setterTransform","_setterScale","_setterScaleWithRender","renderTransform","_setterTransformWithRender","_transformProp","_transformOriginProp","_saveStyle","isNotCSS","tfm","_get","zOrigin","svg","svgo","_removeIndependentTransforms","removeProperty","_revertStyle","_getStyleSaver","properties","saver","save","_createElement","ns","createElementNS","_getComputedProperty","skipPrefixFallback","cs","_checkPropPrefix","_prefixes","preferPrefix","_initCore","_getReparentedCloneBBox","ownerSVGElement","clone","cloneNode","_getAttributeFallbacks","attributesArray","hasAttribute","_getBBox","bounds","cloned","_isSVG","getCTM","_removeProperty","first2Chars","_addNonTweeningPT","beginning","onlySetAtEnd","_nonConvertibleUnits","deg","rad","turn","_nonStandardLayouts","_convertToUnit","curValue","curUnit","horizontal","isRootSVG","measureProperty","toPixels","toPercent","_parseTransform","_firstTwoOnly","_specialProps","_tweenComplexCSSString","startValues","startValue","endValue","endUnit","startUnit","_keywordToPercent","_renderClearProps","clearTransforms","clearProps","_identity2DMatrix","_rotationalProperties","_isNullTransform","_getComputedTransformMatrixAsArray","matrixString","_getMatrix","force2D","addedToDOM","baseVal","consolidate","offsetParent","nextElementSibling","_applySVGOrigin","originIsAbsolute","smooth","matrixArray","pluginToAddPropTweensTo","determinant","xOriginOld","xOrigin","yOriginOld","yOrigin","xOffsetOld","xOffset","yOffsetOld","yOffset","tx","ty","originSplit","rotation","rotationX","rotationY","angle","a12","a22","t1","t2","t3","a13","a23","a33","a42","a43","a32","invertedScaleX","forceCSS","xPercent","yPercent","_renderSVGTransforms","_renderCSSTransforms","_renderNon3DTransforms","_addPxTranslate","_zeroDeg","_zeroPx","_endParenthesis","use3D","a11","a21","tan","_addRotationalPropTween","cap","finalValue","_assign","_addRawTransformPTs","endCache","startCache","side","CSSPlugin","specialProp","isTransformRelated","transformPropTween","inlineProps","parseTransform","smoothOrigin","autoRound","checkPrefix","getStyleSaver","positionAndScale","gsapWithCSS","changeCgLogoDesktop","logoColor","logoImgEle","headerBottom","whiteLogoSrc","blueLogoSrc","changeCgLogoMobile","headerMobile","changeCgGlobalLangIcon","langIconEle","whiteGlobalIconSrc","blackGlobalIconSrc","bannerStrikeOutText","cg_jobs_banner_strikeout_text","bannerHandWrittenText","cg_jobs_banner_handwritten_text","bannerbgImageLargeDesktop","cg_jobs_banner_image_large_desktop","bannerbgImageSmallDesktop","cg_jobs_banner_image_small_desktop","bannerbgImageTablet","cg_jobs_banner_image_tablet","bannerbgImageMobile","cg_jobs_banner_image_mobile","exploreAllJobsButtonText","cg_jobs_explore_all_jobs_button_text","exploreAllJobsLink","cg_jobs_explore_all_jobs_url","CareerBanner","textRef","svgRef","svgRefElement","textRef2","headerWithCareerBanner","darkGradientClass","headerTopBarWrapper","subNavigationWrapper","makeCssVarNavPos","makeCssVarMenuTextColor","textColor","makeCssVarSubMenuTextColor","classListToAdd","addGradientClassesToSubnavHeaders","animateText","innerText","innerHTML","span","handleResize","heroLargeDesktopImgURL","bannerImageLargeDesktop","heroSmallDesktopImgURL","bannerImageSmallDesktop","heroTabImgURL","bannerImageTablet","heroMobImgURL","bannerImageMobile","srcSet","alt","textAlign","AppLanding","showResults","setShowResults","targetOffsetTop","elapsedTime","scrollPosition","smoothScrollTo","handleShowResults","handleCloseResults","rootElement","rootLandingElement"],"sourceRoot":""}

{ __( 'Filters', 'cg-jobs' ) }

{(() => {\r\n switch (singleFilter.type) {\r\n case 'professional_communities':\r\n return 'Professions';\r\n case 'brand':\r\n return 'Brands';\r\n default:\r\n return singleFilter.type.charAt(0).toUpperCase() + singleFilter.type.slice(1).replace(/_/g, ' ');\r\n }\r\n })()}

{ __( 'Oops!', 'cg-jobs' ) }

{ __( \"Sorry, we couldn't find what you're looking for...\", 'cg-jobs' ) }

{(() => {\r\n switch (singleFilter.type) {\r\n case 'brand':\r\n return 'Brands';\r\n case 'professional_communities':\r\n return 'Professions';\r\n default:\r\n return singleFilter.type.charAt(0).toUpperCase() + singleFilter.type.slice(1).replace(/_/g, ' ');\r\n }\r\n })()}

{bannerText ? bannerText : `Job search`}

\r\n
\r\n
\r\n {bannerStrikeOutText ? bannerStrikeOutText : \"Wait for change\"}\r\n
\r\n\r\n {/* SVG line-through animation */}\r\n \r\n \r\n \r\n \r\n
\r\n {bannerHandWrittenText ? bannerHandWrittenText : \"Rewrite your future\"}\r\n
\r\n
\r\n

{ __( 'Filters', 'cg-jobs' ) }

{(() => {\r\n switch (singleFilter.type) {\r\n case 'professional_communities':\r\n return 'Professions';\r\n case 'brand':\r\n return 'Brands';\r\n default:\r\n return singleFilter.type.charAt(0).toUpperCase() + singleFilter.type.slice(1).replace(/_/g, ' ');\r\n }\r\n })()}

{ __( 'Oops!', 'cg-jobs' ) }

{ __( \"Sorry, we couldn't find what you're looking for...\", 'cg-jobs' ) }

{(() => {\r\n switch (singleFilter.type) {\r\n case 'brand':\r\n return 'Brands';\r\n case 'professional_communities':\r\n return 'Professions';\r\n default:\r\n return singleFilter.type.charAt(0).toUpperCase() + singleFilter.type.slice(1).replace(/_/g, ' ');\r\n }\r\n })()}

{bannerText ? bannerText : `Job search`}

\r\n \r\n \r\n {bannerStrikeOutText ? bannerStrikeOutText : \"Wait for change\"}\r\n \r\n\r\n {/* SVG line-through animation */}\r\n \r\n \r\n \r\n \r\n \r\n {bannerHandWrittenText ? bannerHandWrittenText : \"Rewrite your future\"}\r\n \r\n \r\n

\r\n
\r\n
\r\n {bannerStrikeOutText ? bannerStrikeOutText : \"Wait for change\"}\r\n
\r\n\r\n {/* SVG line-through animation */}\r\n \r\n \r\n \r\n \r\n
\r\n {bannerHandWrittenText ? bannerHandWrittenText : \"Rewrite your future\"}\r\n
\r\n
\r\n