var module={}; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod)); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var chunk_QQMNVU3D_exports = {}; __export(chunk_QQMNVU3D_exports, { ParallaxProviderWrapper: () => ParallaxProviderWrapper, ParallaxWrapper: () => ParallaxWrapper }); module.exports = __toCommonJS(chunk_QQMNVU3D_exports); var import_chunk_Q3XEZWH5 = require("./chunk-Q3XEZWH5.js"); var import_chunk_PAVGX5CO = require("./chunk-PAVGX5CO.js"); var import_host = require("@plasmicapp/host"); var import_react = __toESM(require("react")); var import_react2 = __toESM(require("react")); var require_src = (0, import_chunk_PAVGX5CO.__commonJS)({ "node_modules/bezier-easing/src/index.js"(exports, module2) { (0, import_chunk_PAVGX5CO.init_define_import_meta_env)(); var NEWTON_ITERATIONS = 4; var NEWTON_MIN_SLOPE = 1e-3; var SUBDIVISION_PRECISION = 1e-7; var SUBDIVISION_MAX_ITERATIONS = 10; var kSplineTableSize = 11; var kSampleStepSize = 1 / (kSplineTableSize - 1); var float32ArraySupported = typeof Float32Array === "function"; function A(aA1, aA2) { return 1 - 3 * aA2 + 3 * aA1; } function B(aA1, aA2) { return 3 * aA2 - 6 * aA1; } function C(aA1) { return 3 * aA1; } function calcBezier(aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; } function getSlope(aT, aA1, aA2) { return 3 * A(aA1, aA2) * aT * aT + 2 * B(aA1, aA2) * aT + C(aA1); } function binarySubdivide(aX, aA, aB, mX1, mX2) { var currentX, currentT, i = 0; do { currentT = aA + (aB - aA) / 2; currentX = calcBezier(currentT, mX1, mX2) - aX; if (currentX > 0) { aB = currentT; } else { aA = currentT; } } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); return currentT; } function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) { for (var i = 0; i < NEWTON_ITERATIONS; ++i) { var currentSlope = getSlope(aGuessT, mX1, mX2); if (currentSlope === 0) { return aGuessT; } var currentX = calcBezier(aGuessT, mX1, mX2) - aX; aGuessT -= currentX / currentSlope; } return aGuessT; } function LinearEasing(x) { return x; } module2.exports = function bezier2(mX1, mY1, mX2, mY2) { if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { throw new Error("bezier x values must be in [0, 1] range"); } if (mX1 === mY1 && mX2 === mY2) { return LinearEasing; } var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); for (var i = 0; i < kSplineTableSize; ++i) { sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); } function getTForX(aX) { var intervalStart = 0; var currentSample = 1; var lastSample = kSplineTableSize - 1; for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { intervalStart += kSampleStepSize; } --currentSample; var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); var guessForT = intervalStart + dist * kSampleStepSize; var initialSlope = getSlope(guessForT, mX1, mX2); if (initialSlope >= NEWTON_MIN_SLOPE) { return newtonRaphsonIterate(aX, guessForT, mX1, mX2); } else if (initialSlope === 0) { return guessForT; } else { return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); } } return function BezierEasing(x) { if (x === 0) { return 0; } if (x === 1) { return 1; } return calcBezier(getTForX(x), mY1, mY2); }; }; } }); (0, import_chunk_PAVGX5CO.init_define_import_meta_env)(); (0, import_chunk_PAVGX5CO.init_define_import_meta_env)(); (0, import_chunk_PAVGX5CO.init_define_import_meta_env)(); var import_bezier_easing = (0, import_chunk_PAVGX5CO.__toESM)(require_src()); var Limits = function Limits2(properties) { this.startX = properties.startX; this.startY = properties.startY; this.endX = properties.endX; this.endY = properties.endY; this.totalX = this.endX - this.startX; this.totalY = this.endY - this.startY; this.startMultiplierX = properties.startMultiplierX || 1; this.endMultiplierX = properties.endMultiplierX || 1; this.startMultiplierY = properties.startMultiplierY || 1; this.endMultiplierY = properties.endMultiplierY || 1; }; function _extends() { _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } var ValidCSSEffects; (function(ValidCSSEffects2) { ValidCSSEffects2["translateX"] = "translateX"; ValidCSSEffects2["translateY"] = "translateY"; ValidCSSEffects2["rotate"] = "rotate"; ValidCSSEffects2["rotateX"] = "rotateX"; ValidCSSEffects2["rotateY"] = "rotateY"; ValidCSSEffects2["rotateZ"] = "rotateZ"; ValidCSSEffects2["scale"] = "scale"; ValidCSSEffects2["scaleX"] = "scaleX"; ValidCSSEffects2["scaleY"] = "scaleY"; ValidCSSEffects2["scaleZ"] = "scaleZ"; ValidCSSEffects2["opacity"] = "opacity"; })(ValidCSSEffects || (ValidCSSEffects = {})); var Units; (function(Units2) { Units2["px"] = "px"; Units2["%"] = "%"; })(Units || (Units = {})); var RotationUnits; (function(RotationUnits2) { RotationUnits2["deg"] = "deg"; RotationUnits2["turn"] = "turn"; RotationUnits2["rad"] = "rad"; })(RotationUnits || (RotationUnits = {})); var ScaleUnits; (function(ScaleUnits2) { ScaleUnits2[""] = ""; })(ScaleUnits || (ScaleUnits = {})); var ScrollAxis; (function(ScrollAxis2) { ScrollAxis2["vertical"] = "vertical"; ScrollAxis2["horizontal"] = "horizontal"; })(ScrollAxis || (ScrollAxis = {})); var EasingPreset; (function(EasingPreset2) { EasingPreset2["ease"] = "ease"; EasingPreset2["easeIn"] = "easeIn"; EasingPreset2["easeOut"] = "easeOut"; EasingPreset2["easeInOut"] = "easeInOut"; EasingPreset2["easeInQuad"] = "easeInQuad"; EasingPreset2["easeInCubic"] = "easeInCubic"; EasingPreset2["easeInQuart"] = "easeInQuart"; EasingPreset2["easeInQuint"] = "easeInQuint"; EasingPreset2["easeInSine"] = "easeInSine"; EasingPreset2["easeInExpo"] = "easeInExpo"; EasingPreset2["easeInCirc"] = "easeInCirc"; EasingPreset2["easeOutQuad"] = "easeOutQuad"; EasingPreset2["easeOutCubic"] = "easeOutCubic"; EasingPreset2["easeOutQuart"] = "easeOutQuart"; EasingPreset2["easeOutQuint"] = "easeOutQuint"; EasingPreset2["easeOutSine"] = "easeOutSine"; EasingPreset2["easeOutExpo"] = "easeOutExpo"; EasingPreset2["easeOutCirc"] = "easeOutCirc"; EasingPreset2["easeInOutQuad"] = "easeInOutQuad"; EasingPreset2["easeInOutCubic"] = "easeInOutCubic"; EasingPreset2["easeInOutQuart"] = "easeInOutQuart"; EasingPreset2["easeInOutQuint"] = "easeInOutQuint"; EasingPreset2["easeInOutSine"] = "easeInOutSine"; EasingPreset2["easeInOutExpo"] = "easeInOutExpo"; EasingPreset2["easeInOutCirc"] = "easeInOutCirc"; EasingPreset2["easeInBack"] = "easeInBack"; EasingPreset2["easeOutBack"] = "easeOutBack"; EasingPreset2["easeInOutBack"] = "easeInOutBack"; })(EasingPreset || (EasingPreset = {})); var id = 0; function createId() { ++id; return id; } var Rect = /* @__PURE__ */ function() { function Rect2(options) { var rect = options.el.getBoundingClientRect(); if (options.view.scrollContainer) { var scrollRect = options.view.scrollContainer.getBoundingClientRect(); rect = _extends({}, rect, { top: rect.top - scrollRect.top, right: rect.right - scrollRect.left, bottom: rect.bottom - scrollRect.top, left: rect.left - scrollRect.left }); } this.height = options.el.offsetHeight; this.width = options.el.offsetWidth; this.left = rect.left; this.right = rect.right; this.top = rect.top; this.bottom = rect.bottom; if (options.rootMargin) { this._setRectWithRootMargin(options.rootMargin); } } var _proto = Rect2.prototype; _proto._setRectWithRootMargin = function _setRectWithRootMargin(rootMargin) { var totalRootY = rootMargin.top + rootMargin.bottom; var totalRootX = rootMargin.left + rootMargin.right; this.top -= rootMargin.top; this.right += rootMargin.right; this.bottom += rootMargin.bottom; this.left -= rootMargin.left; this.height += totalRootY; this.width += totalRootX; }; return Rect2; }(); var VALID_UNITS = [ScaleUnits[""], Units.px, Units["%"], RotationUnits.deg, RotationUnits.turn, RotationUnits.rad]; function parseValueAndUnit(str, defaultUnit) { if (defaultUnit === void 0) { defaultUnit = Units["%"]; } var out = { value: 0, unit: defaultUnit }; if (typeof str === "undefined") return out; var isValid = typeof str === "number" || typeof str === "string"; if (!isValid) { throw new Error("Invalid value provided. Must provide a value as a string or number"); } str = String(str); out.value = parseFloat(str); out.unit = str.match(/[\d.\-\+]*\s*(.*)/)[1] || defaultUnit; var isValidUnit = VALID_UNITS.includes(out.unit); if (!isValidUnit) { throw new Error("Invalid unit provided."); } return out; } var easingPresets = { ease: [0.25, 0.1, 0.25, 1], easeIn: [0.42, 0, 1, 1], easeOut: [0, 0, 0.58, 1], easeInOut: [0.42, 0, 0.58, 1], easeInQuad: [0.55, 0.085, 0.68, 0.53], easeInCubic: [0.55, 0.055, 0.675, 0.19], easeInQuart: [0.895, 0.03, 0.685, 0.22], easeInQuint: [0.755, 0.05, 0.855, 0.06], easeInSine: [0.47, 0, 0.745, 0.715], easeInExpo: [0.95, 0.05, 0.795, 0.035], easeInCirc: [0.6, 0.04, 0.98, 0.335], easeOutQuad: [0.25, 0.46, 0.45, 0.94], easeOutCubic: [0.215, 0.61, 0.355, 1], easeOutQuart: [0.165, 0.84, 0.44, 1], easeOutQuint: [0.23, 1, 0.32, 1], easeOutSine: [0.39, 0.575, 0.565, 1], easeOutExpo: [0.19, 1, 0.22, 1], easeOutCirc: [0.075, 0.82, 0.165, 1], easeInOutQuad: [0.455, 0.03, 0.515, 0.955], easeInOutCubic: [0.645, 0.045, 0.355, 1], easeInOutQuart: [0.77, 0, 0.175, 1], easeInOutQuint: [0.86, 0, 0.07, 1], easeInOutSine: [0.445, 0.05, 0.55, 0.95], easeInOutExpo: [1, 0, 0, 1], easeInOutCirc: [0.785, 0.135, 0.15, 0.86], easeInBack: [0.6, -0.28, 0.735, 0.045], easeOutBack: [0.175, 0.885, 0.32, 1.275], easeInOutBack: [0.68, -0.55, 0.265, 1.55] }; function createEasingFunction(easing) { if (Array.isArray(easing)) { return (0, import_bezier_easing.default)(easing[0], easing[1], easing[2], easing[3]); } if (typeof easing === "string" && typeof easingPresets[easing] !== "undefined") { var params = easingPresets[easing]; return (0, import_bezier_easing.default)(params[0], params[1], params[2], params[3]); } return; } var PARALLAX_EFFECTS = /* @__PURE__ */ Object.values(ValidCSSEffects); var MAP_EFFECT_TO_DEFAULT_VALUE = { translateX: "%", translateY: "%", rotate: "deg", rotateX: "deg", rotateY: "deg", rotateZ: "deg", scale: "", scaleX: "", scaleY: "", scaleZ: "", opacity: "" }; function parseElementTransitionEffects(props) { var parsedEffects = {}; PARALLAX_EFFECTS.forEach(function(key) { var _props$key, _props$key2; if (typeof (props == null ? void 0 : (_props$key = props[key]) == null ? void 0 : _props$key[0]) !== "undefined" && typeof (props == null ? void 0 : (_props$key2 = props[key]) == null ? void 0 : _props$key2[1]) !== "undefined") { var _props$key3, _props$key4, _props$key5; var defaultValue = MAP_EFFECT_TO_DEFAULT_VALUE[key]; var startParsed = parseValueAndUnit(props == null ? void 0 : (_props$key3 = props[key]) == null ? void 0 : _props$key3[0], defaultValue); var endParsed = parseValueAndUnit(props == null ? void 0 : (_props$key4 = props[key]) == null ? void 0 : _props$key4[1], defaultValue); var easing = createEasingFunction(props == null ? void 0 : (_props$key5 = props[key]) == null ? void 0 : _props$key5[2]); parsedEffects[key] = { start: startParsed.value, end: endParsed.value, unit: startParsed.unit, easing }; if (startParsed.unit !== endParsed.unit) { throw new Error("Must provide matching units for the min and max offset values of each axis."); } } }); return parsedEffects; } function getProgressAmount(start, totalDist, currentScroll, easing) { var startAdjustedScroll = currentScroll - start; var amount = startAdjustedScroll / totalDist; if (easing) { amount = easing(amount); } return amount; } function isElementInView(start, end, scroll) { var isInView = scroll >= start && scroll <= end; return isInView; } function scaleBetween(value, newMin, newMax, oldMin, oldMax) { return (newMax - newMin) * (value - oldMin) / (oldMax - oldMin) + newMin; } function scaleEffectByProgress(effect, progress) { var value = scaleBetween(typeof effect.easing === "function" ? effect.easing(progress) : progress, (effect == null ? void 0 : effect.start) || 0, (effect == null ? void 0 : effect.end) || 0, 0, 1); return { value, unit: effect == null ? void 0 : effect.unit }; } var TRANSFORM_EFFECTS = /* @__PURE__ */ Object.values(ValidCSSEffects).filter(function(v) { return v !== "opacity"; }); function setWillChangeStyles(elInner, effects) { var keys = Object.keys(effects); var hasOpacity = keys.includes("opacity"); var willChange = "transform" + (hasOpacity ? ",opacity" : ""); elInner.style.willChange = willChange; } function setElementStyles(effects, progress, elInner) { if (!elInner) return; var transform = getTransformStyles(effects, progress); var opacity = getOpacityStyles(effects, progress); elInner.style.transform = transform; elInner.style.opacity = opacity; } function getOpacityStyles(effects, progress) { var scaledOpacity = effects["opacity"] && scaleEffectByProgress(effects["opacity"], progress); if (typeof scaledOpacity === "undefined" || typeof scaledOpacity.value === "undefined" || typeof scaledOpacity.unit === "undefined") { return ""; } var styleStr = "" + scaledOpacity.value; return styleStr; } function getTransformStyles(effects, progress) { var transform = TRANSFORM_EFFECTS.reduce(function(acc, key) { var scaledEffect = effects[key] && scaleEffectByProgress(effects[key], progress); if (typeof scaledEffect === "undefined" || typeof scaledEffect.value === "undefined" || typeof scaledEffect.unit === "undefined") { return acc; } var styleStr = key + "(" + scaledEffect.value + scaledEffect.unit + ")"; return acc + styleStr; }, ""); return transform; } function resetStyles(element) { var el = element.elInner; if (!el) return; el.style.transform = ""; } function createLimitsForRelativeElements(rect, view, scroll, shouldStartAnimationInitialInView) { var startY = rect.top - view.height; var startX = rect.left - view.width; var endY = rect.bottom; var endX = rect.right; startX += scroll.x; endX += scroll.x; startY += scroll.y; endY += scroll.y; if (shouldStartAnimationInitialInView) { if (scroll.y + rect.top < view.height) { startY = 0; } if (scroll.x + rect.left < view.width) { startX = 0; } } var limits = new Limits({ startX, startY, endX, endY }); return limits; } function getTranslateScalar(startTranslatePx, endTranslatePx, totalDist) { var slow = endTranslatePx > startTranslatePx; var totalAbsOff = (Math.abs(startTranslatePx) + Math.abs(endTranslatePx)) * (slow ? -1 : 1); var totalDistTrue = totalDist + totalAbsOff; var scale = Math.max(totalDist / totalDistTrue, 1); return scale; } function getStartEndValueInPx(translate, elementSize) { var start = translate.start, end = translate.end, unit = translate.unit; if (unit === "%") { var scale = elementSize / 100; start = start * scale; end = end * scale; } return { start, end }; } var DEFAULT_VALUE = { start: 0, end: 0, unit: "" }; function createLimitsWithTranslationsForRelativeElements(rect, view, effects, scroll, shouldStartAnimationInitialInView) { var translateX = effects.translateX || DEFAULT_VALUE; var translateY = effects.translateY || DEFAULT_VALUE; var _getStartEndValueInPx = getStartEndValueInPx(translateX, rect.width), startTranslateXPx = _getStartEndValueInPx.start, endTranslateXPx = _getStartEndValueInPx.end; var _getStartEndValueInPx2 = getStartEndValueInPx(translateY, rect.height), startTranslateYPx = _getStartEndValueInPx2.start, endTranslateYPx = _getStartEndValueInPx2.end; var startY = rect.top - view.height; var startX = rect.left - view.width; var endY = rect.bottom; var endX = rect.right; var startMultiplierY = getTranslateScalar(startTranslateYPx, endTranslateYPx, view.height + rect.height); var endMultiplierY = startMultiplierY; var startMultiplierX = getTranslateScalar(startTranslateXPx, endTranslateXPx, view.width + rect.width); var endMultiplierX = startMultiplierX; if (startTranslateYPx < 0) { startY = startY + startTranslateYPx * startMultiplierY; } if (endTranslateYPx > 0) { endY = endY + endTranslateYPx * endMultiplierY; } if (startTranslateXPx < 0) { startX = startX + startTranslateXPx * startMultiplierX; } if (endTranslateXPx > 0) { endX = endX + endTranslateXPx * endMultiplierX; } startX += scroll.x; endX += scroll.x; startY += scroll.y; endY += scroll.y; if (shouldStartAnimationInitialInView) { if (scroll.y + rect.top < view.height) { startY = 0; endY = rect.bottom + scroll.y; var totalDist = endY - startY; startMultiplierY = 1; endMultiplierY = getTranslateScalar(startTranslateYPx, endTranslateYPx, totalDist); if (endTranslateYPx > 0) { endY = endY + endTranslateYPx * endMultiplierY; } } if (scroll.x + rect.left < view.width) { startX = 0; endX = rect.right + scroll.x; var _totalDist = endX - startX; startMultiplierX = 1; endMultiplierX = getTranslateScalar(startTranslateXPx, endTranslateXPx, _totalDist); if (endTranslateXPx > 0) { endX = endX + endTranslateXPx * endMultiplierX; } } } var limits = new Limits({ startX, startY, endX, endY, startMultiplierX, endMultiplierX, startMultiplierY, endMultiplierY }); return limits; } function scaleTranslateEffectsForSlowerScroll(effects, limits) { var effectsCopy = _extends({}, effects); if (effectsCopy.translateX) { effectsCopy.translateX = _extends({}, effects.translateX, { start: effectsCopy.translateX.start * limits.startMultiplierX, end: effectsCopy.translateX.end * limits.endMultiplierX }); } if (effectsCopy.translateY) { effectsCopy.translateY = _extends({}, effects.translateY, { start: effectsCopy.translateY.start * limits.startMultiplierY, end: effectsCopy.translateY.end * limits.endMultiplierY }); } return effectsCopy; } function getShouldScaleTranslateEffects(props, effects) { if (props.rootMargin || props.targetElement) { return false; } if (!!effects.translateX || !!effects.translateY) { return true; } return false; } var Element = /* @__PURE__ */ function() { function Element2(options) { this.elInner = options.elInner; this.elOuter = options.elOuter; this.props = options.props; this.scrollAxis = options.scrollAxis; this.id = createId(); this.effects = parseElementTransitionEffects(this.props); this.isInView = null; this.progress = 0; this._setElementEasing(options.props.easing); setWillChangeStyles(options.elInner, this.effects); this.updatePosition = options.scrollAxis === ScrollAxis.vertical ? this._updatePositionVertical : this._updatePositionHorizontal; } var _proto = Element2.prototype; _proto.updateProps = function updateProps(nextProps) { this.props = _extends({}, this.props, nextProps); this.effects = parseElementTransitionEffects(nextProps); this._setElementEasing(nextProps.easing); return this; }; _proto.setCachedAttributes = function setCachedAttributes(view, scroll) { this.rect = new Rect({ el: this.props.targetElement || this.elOuter, rootMargin: this.props.rootMargin, view }); var shouldScaleTranslateEffects = getShouldScaleTranslateEffects(this.props, this.effects); if (typeof this.props.startScroll === "number" && typeof this.props.endScroll === "number") { this.limits = new Limits({ startX: this.props.startScroll, startY: this.props.startScroll, endX: this.props.endScroll, endY: this.props.endScroll }); return this; } if (shouldScaleTranslateEffects) { this.limits = createLimitsWithTranslationsForRelativeElements(this.rect, view, this.effects, scroll, this.props.shouldStartAnimationInitialInView); this.scaledEffects = scaleTranslateEffectsForSlowerScroll(this.effects, this.limits); } else { this.limits = createLimitsForRelativeElements(this.rect, view, scroll, this.props.shouldStartAnimationInitialInView); } return this; }; _proto._updateElementIsInView = function _updateElementIsInView(nextIsInView) { if (nextIsInView !== this.isInView) { if (nextIsInView) { this.props.onEnter && this.props.onEnter(); } else { this._setFinalStylesAndProgress(); this.props.onExit && this.props.onExit(); } } this.isInView = nextIsInView; }; _proto._setFinalStylesAndProgress = function _setFinalStylesAndProgress() { var finalProgress = Math.round(this.progress); this._updateElementProgress(finalProgress); }; _proto._updateElementProgress = function _updateElementProgress(nextProgress) { this.progress = nextProgress; this.props.onProgressChange && this.props.onProgressChange(this.progress); this.props.onChange && this.props.onChange(this); var effects = this.scaledEffects || this.effects; setElementStyles(effects, this.progress, this.elInner); }; _proto._setElementEasing = function _setElementEasing(easing) { this.easing = createEasingFunction(easing); }; _proto._updatePositionHorizontal = function _updatePositionHorizontal(scroll) { if (!this.limits) return this; var nextIsInView = isElementInView(this.limits.startX, this.limits.endX, scroll.x); this._updateElementIsInView(nextIsInView); if (!nextIsInView) return this; var nextProgress = getProgressAmount(this.limits.startX, this.limits.totalX, scroll.x, this.easing); this._updateElementProgress(nextProgress); return this; }; _proto._updatePositionVertical = function _updatePositionVertical(scroll) { if (!this.limits) return this; var nextIsInView = isElementInView(this.limits.startY, this.limits.endY, scroll.y); this._updateElementIsInView(nextIsInView); if (!this.isInView) return this; var nextProgress = getProgressAmount(this.limits.startY, this.limits.totalY, scroll.y, this.easing); this._updateElementProgress(nextProgress); return this; }; return Element2; }(); var View = /* @__PURE__ */ function() { function View2(_ref) { var width = _ref.width, height = _ref.height, scrollContainer = _ref.scrollContainer; this.scrollContainer = scrollContainer; this.width = width; this.height = height; } var _proto = View2.prototype; _proto.setSize = function setSize(width, height) { this.width = width; this.height = height; return this; }; return View2; }(); var Scroll = /* @__PURE__ */ function() { function Scroll2(x, y) { this.x = x; this.y = y; this.dx = 0; this.dy = 0; } var _proto = Scroll2.prototype; _proto.setScroll = function setScroll(x, y) { this.dx = x - this.x; this.dy = y - this.y; this.x = x; this.y = y; return this; }; return Scroll2; }(); function testForPassiveScroll() { var supportsPassiveOption = false; try { var opts = Object.defineProperty({}, "passive", { get: function get() { supportsPassiveOption = true; } }); window.addEventListener("test", null, opts); window.removeEventListener("test", null, opts); } catch (e) { } return supportsPassiveOption; } var ParallaxController = /* @__PURE__ */ function() { function ParallaxController2(_ref) { var _ref$scrollAxis = _ref.scrollAxis, scrollAxis = _ref$scrollAxis === void 0 ? ScrollAxis.vertical : _ref$scrollAxis, scrollContainer = _ref.scrollContainer; this.scrollAxis = scrollAxis; this.elements = []; this._hasScrollContainer = !!scrollContainer; this.viewEl = scrollContainer != null ? scrollContainer : window; var _this$_getScrollPosit = this._getScrollPosition(), x = _this$_getScrollPosit[0], y = _this$_getScrollPosit[1]; this.scroll = new Scroll(x, y); this.view = new View({ width: 0, height: 0, scrollContainer: this._hasScrollContainer ? scrollContainer : void 0 }); this._ticking = false; this._supportsPassive = testForPassiveScroll(); this._bindAllMethods(); this._addListeners(this.viewEl); this._setViewSize(); } ParallaxController2.init = function init(options) { var hasWindow = typeof window !== "undefined"; if (!hasWindow) { throw new Error("Looks like ParallaxController.init() was called on the server. This method must be called on the client."); } return new ParallaxController2(options); }; var _proto = ParallaxController2.prototype; _proto._bindAllMethods = function _bindAllMethods() { var _this = this; ["_addListeners", "_removeListeners", "_getScrollPosition", "_handleScroll", "_handleResize", "_updateAllElements", "_updateElementPosition", "_setViewSize", "getElements", "createElement", "removeElementById", "updateElementPropsById", "resetElementStyles", "update", "updateScrollContainer", "destroy"].forEach(function(method) { _this[method] = _this[method].bind(_this); }); }; _proto._addListeners = function _addListeners(el) { el.addEventListener("scroll", this._handleScroll, this._supportsPassive ? { passive: true } : false); window.addEventListener("resize", this._handleResize, false); }; _proto._removeListeners = function _removeListeners(el) { el.removeEventListener("scroll", this._handleScroll, false); window.removeEventListener("resize", this._handleResize, false); }; _proto._getScrollPosition = function _getScrollPosition() { var nx = this._hasScrollContainer ? this.viewEl.scrollLeft : window.pageXOffset; var ny = this._hasScrollContainer ? this.viewEl.scrollTop : window.pageYOffset; return [nx, ny]; }; _proto._handleScroll = function _handleScroll() { var _this$_getScrollPosit2 = this._getScrollPosition(), nx = _this$_getScrollPosit2[0], ny = _this$_getScrollPosit2[1]; this.scroll.setScroll(nx, ny); if (!this._ticking && this.elements.length > 0) { this._ticking = true; window.requestAnimationFrame(this._updateAllElements); } }; _proto._handleResize = function _handleResize() { this._setViewSize(); this._updateAllElements({ updateCache: true }); }; _proto._updateAllElements = function _updateAllElements(_temp) { var _this2 = this; var _ref2 = _temp === void 0 ? {} : _temp, updateCache = _ref2.updateCache; if (this.elements) { this.elements.forEach(function(element) { _this2._updateElementPosition(element); if (updateCache) { element.setCachedAttributes(_this2.view, _this2.scroll); } }); } this._ticking = false; }; _proto._updateElementPosition = function _updateElementPosition(element) { if (element.props.disabled) return; element.updatePosition(this.scroll); }; _proto._setViewSize = function _setViewSize() { if (this._hasScrollContainer) { var _width = this.viewEl.offsetWidth; var _height = this.viewEl.offsetHeight; return this.view.setSize(_width, _height); } var html = document.documentElement; var width = window.innerWidth || html.clientWidth; var height = window.innerHeight || html.clientHeight; return this.view.setSize(width, height); }; _proto.getElements = function getElements() { return this.elements; }; _proto.createElement = function createElement(options) { var newElement = new Element(_extends({}, options, { scrollAxis: this.scrollAxis })); newElement.setCachedAttributes(this.view, this.scroll); this.elements = this.elements ? [].concat(this.elements, [newElement]) : [newElement]; this._updateElementPosition(newElement); return newElement; }; _proto.removeElementById = function removeElementById(id2) { if (!this.elements) return; this.elements = this.elements.filter(function(el) { return el.id !== id2; }); }; _proto.updateElementPropsById = function updateElementPropsById(id2, props) { if (this.elements) { this.elements = this.elements.map(function(el) { if (el.id === id2) { return el.updateProps(props); } return el; }); } this.update(); }; _proto.resetElementStyles = function resetElementStyles(element) { resetStyles(element); }; _proto.update = function update() { var _this$_getScrollPosit3 = this._getScrollPosition(), nx = _this$_getScrollPosit3[0], ny = _this$_getScrollPosit3[1]; this.scroll.setScroll(nx, ny); this._setViewSize(); this._updateAllElements({ updateCache: true }); }; _proto.updateScrollContainer = function updateScrollContainer(el) { this._removeListeners(this.viewEl); this.viewEl = el; this._hasScrollContainer = !!el; this.view = new View({ width: 0, height: 0, scrollContainer: el }); this._setViewSize(); this._addListeners(this.viewEl); this._updateAllElements({ updateCache: true }); }; _proto.destroy = function destroy() { this._removeListeners(this.viewEl); if (this.elements) { this.elements.forEach(function(element) { return resetStyles(element); }); } this.elements = void 0; }; return ParallaxController2; }(); var ParallaxContext = /* @__PURE__ */ import_react2.default.createContext(null); function useController() { var parallaxController = (0, import_react2.useContext)(ParallaxContext); var isServer = typeof window === "undefined"; if (isServer) { return null; } if (!parallaxController) { throw new Error("Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a "); } return parallaxController; } function removeUndefinedObjectKeys(obj) { Object.keys(obj).forEach(function(key) { return obj[key] === void 0 ? delete obj[key] : {}; }); return obj; } function useVerifyController(controller) { (0, import_react2.useEffect)(function() { var isServer = typeof window === "undefined"; var isInstance = controller instanceof ParallaxController; if (!isServer && !controller && !isInstance) { throw new Error("Must wrap your application's components in a ."); } }, [controller]); } function Parallax(props) { var controller = useController(); var refInner = (0, import_react2.useRef)(); var refOuter = (0, import_react2.useRef)(); useVerifyController(controller); function _getElementOptions() { var useSpeedProp = typeof props.speed !== "undefined"; var isHorizontal = (controller == null ? void 0 : controller.scrollAxis) == "horizontal"; var isVertical = (controller == null ? void 0 : controller.scrollAxis) == "vertical"; var translateX = props.translateX; var translateY = props.translateY; if (useSpeedProp && isHorizontal) { translateX = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"]; } if (useSpeedProp && isVertical) { translateY = [(props.speed || 0) * 10 + "px", (props.speed || 0) * -10 + "px"]; } return { elInner: refInner.current, elOuter: refOuter.current, props: removeUndefinedObjectKeys({ disabled: props.disabled, translateX, translateY, rotate: props.rotate, rotateX: props.rotateX, rotateY: props.rotateY, rotateZ: props.rotateZ, scale: props.scale, scaleX: props.scaleX, scaleY: props.scaleY, scaleZ: props.scaleZ, opacity: props.opacity, easing: props.easing, rootMargin: props.rootMargin, shouldStartAnimationInitialInView: props.shouldStartAnimationInitialInView, onProgressChange: props.onProgressChange, onEnter: props.onEnter, onExit: props.onExit }) }; } var _useState = (0, import_react2.useState)(), element = _useState[0], setElement = _useState[1]; (0, import_react2.useEffect)(function() { var newElement = controller == null ? void 0 : controller.createElement(_getElementOptions()); setElement(newElement); return function() { if (newElement) { controller == null ? void 0 : controller.removeElementById(newElement.id); } }; }, []); (0, import_react2.useEffect)(function() { if (element) { if (props.disabled) { controller == null ? void 0 : controller.resetElementStyles(element); } else { controller == null ? void 0 : controller.updateElementPropsById(element.id, _getElementOptions().props); } } }, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity, props.easing, props.rootMargin, props.onProgressChange, props.onEnter, props.onExit]); var Outer = props.tagOuter; var Inner = props.tagInner; var rootClass = "parallax-outer" + (props.className ? " " + props.className : ""); return import_react2.default.createElement(Outer, { className: rootClass, ref: refOuter, style: props.styleOuter }, import_react2.default.createElement(Inner, { className: "parallax-inner", ref: refInner, style: props.styleInner }, props.children)); } Parallax.defaultProps = { disabled: false, tagInner: "div", tagOuter: "div" }; function _extends2() { _extends2 = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends2.apply(this, arguments); } function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o2, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf2(o3, p2) { o3.__proto__ = p2; return o3; }; return _setPrototypeOf(o2, p); } var containerStyle = { position: "relative", overflow: "hidden", width: "100%", height: "50vh" }; var absoluteStyle = { position: "absolute", top: 0, right: 0, bottom: 0, left: 0 }; var ParallaxBanner = function ParallaxBanner2(_ref) { var children = _ref.children, className = _ref.className, layers = _ref.layers, style = _ref.style, disabled = _ref.disabled; return import_react2.default.createElement("div", { style: _extends2({}, containerStyle, style), className: "parallax-banner" + (className ? " " + className : "") }, layers.map(function(_ref2, i) { var speed = _ref2.speed, layerChildren = _ref2.children, _ref2$expanded = _ref2.expanded, expanded = _ref2$expanded === void 0 ? true : _ref2$expanded, image = _ref2.image, _ref2$props = _ref2.props, props = _ref2$props === void 0 ? {} : _ref2$props; var layerStyle = props.style || {}; var layerClass = props.className || ""; delete props.style; delete props.className; var layerClassMerged = "parallax-banner-layer-" + i + (layerClass ? " " + layerClass : ""); var expandedStyle = expanded ? { top: Math.abs(speed) * 10 * -1 + "px", bottom: Math.abs(speed) * 10 * -1 + "px" } : {}; var imageStyle = image ? { backgroundImage: "url(" + image + ")", backgroundPosition: "center", backgroundSize: "cover" } : {}; return import_react2.default.createElement(Parallax, { key: "layer-" + i, speed, styleInner: absoluteStyle, styleOuter: absoluteStyle, disabled }, import_react2.default.createElement("div", Object.assign({ className: layerClassMerged, style: _extends2({}, imageStyle, absoluteStyle, expandedStyle, layerStyle) }, props), layerChildren)); }), children); }; ParallaxBanner.defaultProps = { disabled: false }; var createController = function createController2(options) { var isServer = typeof window === "undefined"; if (!isServer) { return ParallaxController.init(options); } return null; }; var ParallaxProvider = /* @__PURE__ */ function(_Component) { _inheritsLoose(ParallaxProvider2, _Component); function ParallaxProvider2(props) { var _this; _this = _Component.call(this, props) || this; _this.controller = createController({ scrollAxis: props.scrollAxis, scrollContainer: props.scrollContainer }); return _this; } var _proto = ParallaxProvider2.prototype; _proto.componentDidUpdate = function componentDidUpdate(prevProps) { if (prevProps.scrollContainer !== this.props.scrollContainer) { this.controller.updateScrollContainer(this.props.scrollContainer); } }; _proto.componentWillUnmount = function componentWillUnmount() { this.controller = this.controller.destroy(); }; _proto.render = function render() { var children = this.props.children; return import_react2.default.createElement(ParallaxContext.Provider, { value: this.controller }, children); }; return ParallaxProvider2; }(import_react2.Component); ParallaxProvider.defaultProps = { scrollAxis: ScrollAxis.vertical }; var import_resize_observer_polyfill = (0, import_chunk_PAVGX5CO.__toESM)((0, import_chunk_Q3XEZWH5.require_ResizeObserver)()); function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } function ParallaxWrapper(_ref) { var speed = _ref.speed, disabled = _ref.disabled, previewInEditor = _ref.previewInEditor, children = _ref.children, className = _ref.className; var inEditor = (0, import_react.useContext)(import_host.PlasmicCanvasContext); var hasContext = (0, import_react.useContext)(ParallaxContext) != null; var isServer = typeof window === "undefined"; if (!hasContext && !isServer) { throw new Error("Scroll Parallax can only be instantiated somewhere inside the Parallax Provider"); } return import_react.default.createElement(Parallax, { disabled: disabled || inEditor && !previewInEditor, speed, className }, children); } var _excluded = ["children"]; function ParallaxCacheUpdate(_ref) { var children = _ref.children; var parallaxController = useController(); var ref = (0, import_react.useRef)(null); (0, import_react.useEffect)(function() { var _ref$current; if ((_ref$current = ref.current) != null && _ref$current.parentElement) { var targetNode = ref.current.parentElement; var observer = new import_resize_observer_polyfill.default(function() { if (parallaxController) { parallaxController.update(); } }); observer.observe(targetNode); return function() { observer.disconnect(); }; } return function() { }; }, [ref.current]); return import_react.default.createElement("div", { style: { display: "contents" }, ref }, children); } function ParallaxProviderWrapper(_ref2) { var children = _ref2.children, props = _objectWithoutPropertiesLoose(_ref2, _excluded); return import_react.default.createElement(ParallaxProvider, Object.assign({}, props), import_react.default.createElement(ParallaxCacheUpdate, null, children)); } Object.assign(exports,module.exports);