1(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([[5830],{ 2 3/***/ 79205: 4/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 5 6"use strict"; 7 8// EXPORTS 9__webpack_require__.d(__webpack_exports__, { 10 Z: function() { return /* binding */ createLucideIcon; } 11}); 12 13// EXTERNAL MODULE: ./node_modules/next/dist/compiled/react/index.js 14var react = __webpack_require__(2265); 15;// CONCATENATED MODULE: ./node_modules/lucide-react/dist/esm/shared/src/utils.js 16/** 17 * @license lucide-react v0.441.0 - ISC 18 * 19 * This source code is licensed under the ISC license. 20 * See the LICENSE file in the root directory of this source tree. 21 */ const toKebabCase = (string)=>string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(); 22const mergeClasses = function() { 23 for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){ 24 classes[_key] = arguments[_key]; 25 } 26 return classes.filter((className, index, array)=>{ 27 return Boolean(className) && array.indexOf(className) === index; 28 }).join(" "); 29}; 30 //# sourceMappingURL=utils.js.map 31 32;// CONCATENATED MODULE: ./node_modules/lucide-react/dist/esm/defaultAttributes.js 33/** 34 * @license lucide-react v0.441.0 - ISC 35 * 36 * This source code is licensed under the ISC license. 37 * See the LICENSE file in the root directory of this source tree. 38 */ var defaultAttributes = { 39 xmlns: "http://www.w3.org/2000/svg", 40 width: 24, 41 height: 24, 42 viewBox: "0 0 24 24", 43 fill: "none", 44 stroke: "currentColor", 45 strokeWidth: 2, 46 strokeLinecap: "round", 47 strokeLinejoin: "round" 48}; 49 //# sourceMappingURL=defaultAttributes.js.map 50 51;// CONCATENATED MODULE: ./node_modules/lucide-react/dist/esm/Icon.js 52/** 53 * @license lucide-react v0.441.0 - ISC 54 * 55 * This source code is licensed under the ISC license. 56 * See the LICENSE file in the root directory of this source tree. 57 */ 58 59 60const Icon = /*#__PURE__*/ (0,react.forwardRef)((param, ref)=>{ 61 let { color = "currentColor", size = 24, strokeWidth = 2, absoluteStrokeWidth, className = "", children, iconNode, ...rest } = param; 62 return /*#__PURE__*/ (0,react.createElement)("svg", { 63 ref, 64 ...defaultAttributes, 65 width: size, 66 height: size, 67 stroke: color, 68 strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth, 69 className: mergeClasses("lucide", className), 70 ...rest 71 }, [ 72 ...iconNode.map((param)=>{ 73 let [tag, attrs] = param; 74 return /*#__PURE__*/ (0,react.createElement)(tag, attrs); 75 }), 76 ...Array.isArray(children) ? children : [ 77 children 78 ] 79 ]); 80}); 81 //# sourceMappingURL=Icon.js.map 82 83;// CONCATENATED MODULE: ./node_modules/lucide-react/dist/esm/createLucideIcon.js 84/** 85 * @license lucide-react v0.441.0 - ISC 86 * 87 * This source code is licensed under the ISC license. 88 * See the LICENSE file in the root directory of this source tree. 89 */ 90 91 92const createLucideIcon = (iconName, iconNode)=>{ 93 const Component = /*#__PURE__*/ (0,react.forwardRef)((param, ref)=>{ 94 let { className, ...props } = param; 95 return /*#__PURE__*/ (0,react.createElement)(Icon, { 96 ref, 97 iconNode, 98 className: mergeClasses("lucide-".concat(toKebabCase(iconName)), className), 99 ...props 100 }); 101 }); 102 Component.displayName = "".concat(iconName); 103 return Component; 104}; 105 //# sourceMappingURL=createLucideIcon.js.map 106 107 108/***/ }), 109 110/***/ 40257: 111/***/ (function(module, __unused_webpack_exports, __webpack_require__) { 112 113"use strict"; 114 115var _global_process, _global_process1; 116module.exports = ((_global_process = __webpack_require__.g.process) == null ? void 0 : _global_process.env) && typeof ((_global_process1 = __webpack_require__.g.process) == null ? void 0 : _global_process1.env) === "object" ? __webpack_require__.g.process : __webpack_require__(44227); 117 118//# sourceMappingURL=process.js.map 119 120/***/ }), 121 122/***/ 44227: 123/***/ (function(module) { 124 125var __dirname = "/"; 126(function(){var e={229:function(e){var t=e.exports={};var r;var n;function defaultSetTimout(){throw new Error("setTimeout has not been defined")}function defaultClearTimeout(){throw new Error("clearTimeout has not been defined")}(function(){try{if(typeof setTimeout==="function"){r=setTimeout}else{r=defaultSetTimout}}catch(e){r=defaultSetTimout}try{if(typeof clearTimeout==="function"){n=clearTimeout}else{n=defaultClearTimeout}}catch(e){n=defaultClearTimeout}})();function runTimeout(e){if(r===setTimeout){return setTimeout(e,0)}if((r===defaultSetTimout||!r)&&setTimeout){r=setTimeout;return setTimeout(e,0)}try{return r(e,0)}catch(t){try{return r.call(null,e,0)}catch(t){return r.call(this,e,0)}}}function runClearTimeout(e){if(n===clearTimeout){return clearTimeout(e)}if((n===defaultClearTimeout||!n)&&clearTimeout){n=clearTimeout;return clearTimeout(e)}try{return n(e)}catch(t){try{return n.call(null,e)}catch(t){return n.call(this,e)}}}var i=[];var o=false;var u;var a=-1;function cleanUpNextTick(){if(!o||!u){return}o=false;if(u.length){i=u.concat(i)}else{a=-1}if(i.length){drainQueue()}}function drainQueue(){if(o){return}var e=runTimeout(cleanUpNextTick);o=true;var t=i.length;while(t){u=i;i=[];while(++a<t){if(u){u[a].run()}}a=-1;t=i.length}u=null;o=false;runClearTimeout(e)}t.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1){for(var r=1;r<arguments.length;r++){t[r-1]=arguments[r]}}i.push(new Item(e,t));if(i.length===1&&!o){runTimeout(drainQueue)}};function Item(e,t){this.fun=e;this.array=t}Item.prototype.run=function(){this.fun.apply(null,this.array)};t.title="browser";t.browser=true;t.env={};t.argv=[];t.version="";t.versions={};function noop(){}t.on=noop;t.addListener=noop;t.once=noop;t.off=noop;t.removeListener=noop;t.removeAllListeners=noop;t.emit=noop;t.prependListener=noop;t.prependOnceListener=noop;t.listeners=function(e){return[]};t.binding=function(e){throw new Error("process.binding is not supported")};t.cwd=function(){return"/"};t.chdir=function(e){throw new Error("process.chdir is not supported")};t.umask=function(){return 0}}};var t={};function __nccwpck_require__(r){var n=t[r];
126if(n!==undefined){return n.exports}var i=t[r]={exports:{}};var o=true;try{e[r](i,i.exports,__nccwpck_require__);o=false}finally{if(o)delete t[r]}return i.exports}if(typeof __nccwpck_require__!=="undefined")__nccwpck_require__.ab=__dirname+"/";var r=__nccwpck_require__(229);module.exports=r})(); 127 128/***/ }), 129 130/***/ 49637: 131/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 132 133"use strict"; 134/* harmony export */ __webpack_require__.d(__webpack_exports__, { 135/* harmony export */ oO: function() { return /* binding */ usePresence; } 136/* harmony export */ }); 137/* unused harmony exports isPresent, useIsPresent */ 138/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2265); 139/* harmony import */ var _context_PresenceContext_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(64252); 140/* __next_internal_client_entry_do_not_use__ isPresent,useIsPresent,usePresence auto */ 141 142/** 143 * When a component is the child of `AnimatePresence`, it can use `usePresence` 144 * to access information about whether it's still present in the React tree. 145 * 146 * ```jsx 147 * import { usePresence } from "framer-motion" 148 * 149 * export const Component = () => { 150 * const [isPresent, safeToRemove] = usePresence() 151 * 152 * useEffect(() => { 153 * !isPresent && setTimeout(safeToRemove, 1000) 154 * }, [isPresent]) 155 * 156 * return <div /> 157 * } 158 * ``` 159 * 160 * If `isPresent` is `false`, it means that a component has been removed from the tree, 161 * but `AnimatePresence` won't really remove it until `safeToRemove` has been called. 162 * 163 * @public 164 */ function usePresence() { 165 let subscribe = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true; 166 const context = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context_PresenceContext_mjs__WEBPACK_IMPORTED_MODULE_1__/* .PresenceContext */ .O); 167 if (context === null) return [ 168 true, 169 null 170 ]; 171 const { isPresent, onExitComplete, register } = context; 172 // It's safe to call the following hooks conditionally (after an early return) because the context will always 173 // either be null or non-null for the lifespan of the component. 174 const id = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)(); 175 (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(()=>{ 176 if (subscribe) { 177 return register(id); 178 } 179 }, [ 180 subscribe 181 ]); 182 const safeToRemove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(()=>subscribe && onExitComplete && onExitComplete(id), [ 183 id, 184 onExitComplete, 185 subscribe 186 ]); 187 return !isPresent && onExitComplete ? [ 188 false, 189 safeToRemove 190 ] : [ 191 true 192 ]; 193} 194/** 195 * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present. 196 * There is no `safeToRemove` function. 197 * 198 * ```jsx 199 * import { useIsPresent } from "framer-motion" 200 * 201 * export const Component = () => { 202 * const isPresent = useIsPresent() 203 * 204 * useEffect(() => { 205 * !isPresent && console.log("I've been removed!") 206 * }, [isPresent]) 207 * 208 * return <div /> 209 * } 210 * ``` 211 * 212 * @public 213 */ function useIsPresent() { 214 return isPresent(useContext(PresenceContext)); 215} 216function isPresent(context) {
217 return context === null ? true : context.isPresent; 218} 219 //# sourceMappingURL=use-presence.mjs.map 220 221 222/***/ }), 223 224/***/ 58881: 225/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 226 227"use strict"; 228/* harmony export */ __webpack_require__.d(__webpack_exports__, { 229/* harmony export */ p: function() { return /* binding */ LayoutGroupContext; } 230/* harmony export */ }); 231/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2265); 232/* __next_internal_client_entry_do_not_use__ LayoutGroupContext auto */ 233const LayoutGroupContext = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)({}); 234 //# sourceMappingURL=LayoutGroupContext.mjs.map 235 236 237/***/ }), 238 239/***/ 45750: 240/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 241 242"use strict"; 243/* harmony export */ __webpack_require__.d(__webpack_exports__, { 244/* harmony export */ _: function() { return /* binding */ MotionConfigContext; } 245/* harmony export */ }); 246/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2265); 247/* __next_internal_client_entry_do_not_use__ MotionConfigContext auto */ 248/** 249 * @public 250 */ const MotionConfigContext = /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)({ 251 transformPagePoint: (p)=>p, 252 isStatic: false, 253 reducedMotion: "never" 254}); 255 //# sourceMappingURL=MotionConfigContext.mjs.map 256 257 258/***/ }), 259 260/***/ 64252: 261/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 262 263"use strict"; 264/* harmony export */ __webpack_require__.d(__webpack_exports__, { 265/* harmony export */ O: function() { return /* binding */ PresenceContext; } 266/* harmony export */ }); 267/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2265); 268/* __next_internal_client_entry_do_not_use__ PresenceContext auto */ 269/** 270 * @public 271 */ const PresenceContext = /* @__PURE__ */ /*#__PURE__*/ (0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null); 272 //# sourceMappingURL=PresenceContext.mjs.map 273 274 275/***/ }), 276 277/***/ 89867: 278/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 279 280"use strict"; 281 282// EXPORTS 283__webpack_require__.d(__webpack_exports__, { 284 E: function() { return /* binding */ motion; } 285}); 286 287;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/keys-transform.mjs 288/** 289 * Generate a list of every possible transform key. 290 */ 291const transformPropOrder = [ 292 "transformPerspective", 293 "x", 294 "y", 295 "z", 296 "translateX", 297 "translateY", 298 "translateZ", 299 "scale", 300 "scaleX", 301 "scaleY", 302 "rotate", 303 "rotateX", 304 "rotateY", 305 "rotateZ", 306 "skew", 307 "skewX", 308 "skewY", 309]; 310/** 311 * A quick lookup for transform props. 312 * 313 * `pathRotation` is a transform for routing purposes (skipped from raw 314 * style application, wired to the transform composite, flags transform 315 * dirty) but is intentionally NOT in `transformPropOrder` â it is 316 * composed onto `rotate` at the build sites, not serialized in its own 317 * slot, and must stay out of the order-array consumers (parse-transform, 318 * unit-conversion, keys-position). 319 */ 320const transformProps = /*@__PURE__*/ (() => new Set([...transformPropOrder, "pathRotation"]))(); 321 322 323//# sourceMappingURL=keys-transform.mjs.map 324 325// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/color/index.mjs 326var color = __webpack_require__(7537); 327// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/complex/index.mjs + 1 modules 328var complex = __webpack_require__(65050); 329// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/float-regex.mjs 330var float_regex = __webpack_require__(3855); 331;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/complex/filter.mjs 332 333 334 335/** 336 * Properties that should default to 1 or 100% 337 */ 338const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]); 339function applyDefaultFilter(v) { 340 const [name, value] = v.slice(0, -1).split("("); 341 if (name === "drop-shadow") 342 return v; 343 const [number] = value.match(float_regex/* floatRegex */.K) || []; 344 if (!number) 345 return v; 346 const unit = value.replace(number, ""); 347 let defaultValue = maxDefaults.has(name) ? 1 : 0; 348 if (number !== value) 349 defaultValue *= 100; 350 return name + "(" + defaultValue + unit + ")"; 351} 352const functionRegex = /\b([a-z-]*)\(.*?\)/gu; 353const filter = { 354 ...complex/* complex */.P, 355 getAnimatableNone: (v) => { 356 const functions = v.match(functionRegex); 357 return functions ? functions.map(applyDefaultFilter).join(" ") : v; 358 }, 359}; 360 361 362//# sourceMappingURL=filter.mjs.map 363 364;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/complex/mask.mjs 365 366 367const mask = { 368 ...complex/* complex */.P, 369 getAnimatableNone: (v) => { 370 const parsed = complex/* complex */.P.parse(v); 371 const transformer = complex/* complex */.P.createTransformer(v); 372 return transformer(parsed.map((v) => typeof v === "number" ? 0 : typeof v === "object" ? { ...v, alpha: 1 } : v)); 373 }, 374}; 375 376 377//# sourceMappingURL=mask.mjs.map 378 379// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/numbers/index.mjs 380var numbers = __webpack_require__(61799); 381;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/int.mjs 382 383 384const int_int = { 385 ...numbers/* number */.Rx, 386 transform: Math.round, 387}; 388 389 390//# sourceMappingURL=int.mjs.map 391 392// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/numbers/units.mjs 393var units = __webpack_require__(92854); 394;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/maps/transform.mjs 395 396 397 398const transformValueTypes = { 399 rotate: units/* degrees */.RW, 400 /**
401 * Internal channel for `transition.path` orientToPath. Composed onto 402 * `rotate` at the transform-build sites so the user's `rotate` is 403 * never read or overwritten. Not part of `transformPropOrder`. 404 */ 405 pathRotation: units/* degrees */.RW, 406 rotateX: units/* degrees */.RW, 407 rotateY: units/* degrees */.RW, 408 rotateZ: units/* degrees */.RW, 409 scale: numbers/* scale */.bA, 410 scaleX: numbers/* scale */.bA, 411 scaleY: numbers/* scale */.bA, 412 scaleZ: numbers/* scale */.bA, 413 skew: units/* degrees */.RW, 414 skewX: units/* degrees */.RW, 415 skewY: units/* degrees */.RW, 416 distance: units.px, 417 translateX: units.px, 418 translateY: units.px, 419 translateZ: units.px, 420 x: units.px, 421 y: units.px, 422 z: units.px, 423 perspective: units.px, 424 transformPerspective: units.px, 425 opacity: numbers/* alpha */.Fq, 426 originX: units/* progressPercentage */.$C, 427 originY: units/* progressPercentage */.$C, 428 originZ: units.px, 429}; 430 431 432//# sourceMappingURL=transform.mjs.map 433 434;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/maps/number.mjs 435 436 437 438 439 440const numberValueTypes = { 441 // Border props 442 borderWidth: units.px, 443 borderTopWidth: units.px, 444 borderRightWidth: units.px, 445 borderBottomWidth: units.px, 446 borderLeftWidth: units.px, 447 borderRadius: units.px, 448 borderTopLeftRadius: units.px, 449 borderTopRightRadius: units.px, 450 borderBottomRightRadius: units.px, 451 borderBottomLeftRadius: units.px, 452 // Positioning props 453 width: units.px, 454 maxWidth: units.px, 455 height: units.px, 456 maxHeight: units.px, 457 top: units.px, 458 right: units.px, 459 bottom: units.px, 460 left: units.px, 461 inset: units.px, 462 insetBlock: units.px, 463 insetBlockStart: units.px, 464 insetBlockEnd: units.px, 465 insetInline: units.px, 466 insetInlineStart: units.px, 467 insetInlineEnd: units.px, 468 // Spacing props 469 padding: units.px, 470 paddingTop: units.px, 471 paddingRight: units.px, 472 paddingBottom: units.px, 473 paddingLeft: units.px, 474 paddingBlock: units.px, 475 paddingBlockStart: units.px, 476 paddingBlockEnd: units.px, 477 paddingInline: units.px, 478 paddingInlineStart: units.px, 479 paddingInlineEnd: units.px, 480 margin: units.px, 481 marginTop: units.px, 482 marginRight: units.px, 483 marginBottom: units.px, 484 marginLeft: units.px, 485 marginBlock: units.px, 486 marginBlockStart: units.px, 487 marginBlockEnd: units.px, 488 marginInline: units.px, 489 marginInlineStart: units.px, 490 marginInlineEnd: units.px, 491 // Typography 492 fontSize: units.px, 493 // Misc 494 backgroundPositionX: units.px, 495 backgroundPositionY: units.px, 496 ...transformValueTypes, 497 zIndex: int_int, 498 // SVG 499 fillOpacity: numbers/* alpha */.Fq, 500 strokeOpacity: numbers/* alpha */.Fq, 501 numOctaves: int_int, 502}; 503 504 505//# sourceMappingURL=number.mjs.map 506 507;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/maps/defaults.mjs 508 509 510 511 512 513/** 514 * A map of default value types for common values 515 */ 516const defaultValueTypes = { 517 ...numberValueTypes, 518 // Color props 519 color: color/* color */.$, 520 backgroundColor: color/* color */.$, 521 outlineColor: color/* color */.$, 522 fill: color/* color */.$, 523 stroke: color/* color */.$, 524 // Border props 525 borderColor: color/* color */.$, 526 borderTopColor: color/* color */.$, 527 borderRightColor: color/* color */.$, 528 borderBottomColor: color/* color */.$, 529 borderLeftColor: color/* color */.$, 530 filter: filter, 531 WebkitFilter: filter, 532 mask: mask, 533 WebkitMask: mask, 534}; 535/** 536 * Gets the default ValueType for the provided value key 537 */ 538const getDefaultValueType = (key) => defaultValueTypes[key]; 539 540 541//# sourceMappingURL=defaults.mjs.map 542 543;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/geometry/models.mjs 544const createAxisDelta = () => ({ 545 translate: 0, 546 scale: 1, 547 origin: 0, 548 originPoint: 0, 549}); 550const createDelta = () => ({ 551 x: createAxisDelta(), 552 y: createAxisDelta(), 553}); 554const createAxis = () => ({ min: 0, max: 0 }); 555const createBox = () => ({ 556 x: createAxis(), 557 y: createAxis(), 558}); 559 560 561//# sourceMappingURL=models.mjs.map 562 563// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/utils/is-motion-value.mjs 564var is_motion_value = __webpack_require__(87493); 565;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/keys-position.mjs 566 567 568const positionalKeys = new Set([ 569 "width", 570 "height", 571 "top", 572 "left", 573 "right", 574 "bottom", 575 ...transformPropOrder, 576]); 577 578 579//# sourceMappingURL=keys-position.mjs.map 580 581;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/auto.mjs 582/** 583 * ValueType for "auto" 584 */ 585const auto = { 586 test: (v) => v === "auto", 587 parse: (v) => v, 588}; 589 590 591//# sourceMappingURL=auto.mjs.map 592 593;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/test.mjs 594/** 595 * Tests a provided value against a ValueType 596 */ 597const testValueType = (v) => (type) => type.test(v); 598 599 600//# sourceMappingURL=test.mjs.map 601 602;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/dimensions.mjs 603 604 605 606 607 608/** 609 * A list of value types commonly used for dimensions 610 */ 611const dimensionValueTypes = [numbers/* number */.Rx, units.px, units/* percent */.aQ, units/* degrees */.RW, units.vw, units.vh, auto]; 612/** 613 * Tests a dimensional value against the list of dimension ValueTypes 614 */ 615const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v)); 616 617 618//# sourceMappingURL=dimensions.mjs.map 619 620// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/errors.mjs 621var errors = __webpack_require__(62035); 622;// CONCATENATED MODULE: ./node_modules/motion-utils/dist/es/is-numerical-string.mjs 623/** 624 * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1" 625 */ 626const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v); 627 628 629//# sourceMappingURL=is-numerical-string.mjs.map 630 631// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/utils/is-css-variable.mjs 632var is_css_variable = __webpack_require__(38596); 633;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/utils/css-variables-conversion.mjs 634 635 636 637/** 638 * Parse Framer's special CSS variable format into a CSS token and a fallback. 639 * 640 * ``` 641 * `var(--foo, #fff)` => [`--foo`, '#fff'] 642 * ``` 643 * 644 * @param current 645 */ 646const splitCSSVariableRegex = 647// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words 648/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u; 649function parseCSSVariable(current) { 650 const match = splitCSSVariableRegex.exec(current); 651 if (!match) 652 return [,]; 653 const [, token1, token2, fallback] = match; 654 return [`--${token1 ?? token2}`, fallback]; 655} 656const maxDepth = 4; 657function getVariableValue(current, element, depth = 1) { 658 (0,errors/* invariant */.k)(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`, "max-css-var-depth"); 659 const [token, fallback] = parseCSSVariable(current); 660 // No CSS variable detected 661 if (!token) 662 return; 663 // Attempt to read this CSS variable off the element 664 const resolved = window.getComputedStyle(element).getPropertyValue(token); 665 if (resolved) { 666 const trimmed = resolved.trim(); 667 return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed; 668 } 669 return (0,is_css_variable/* isCSSVariableToken */.tm)(fallback) 670 ? getVariableValue(fallback, element, depth + 1) 671 : fallback; 672} 673 674 675//# sourceMappingURL=css-variables-conversion.mjs.map 676 677;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/utils/fill-wildcards.mjs 678function fillWildcards(keyframes) { 679 for (let i = 1; i < keyframes.length; i++) { 680 keyframes[i] ?? (keyframes[i] = keyframes[i - 1]); 681 } 682} 683 684 685//# sourceMappingURL=fill-wildcards.mjs.map 686 687;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/dom/parse-transform.mjs 688const radToDeg = (rad) => (rad * 180) / Math.PI; 689const rotate = (v) => { 690 const angle = radToDeg(Math.atan2(v[1], v[0])); 691 return rebaseAngle(angle); 692}; 693const matrix2dParsers = { 694 x: 4, 695 y: 5, 696 translateX: 4, 697 translateY: 5, 698 scaleX: 0, 699 scaleY: 3, 700 scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2, 701 rotate, 702 rotateZ: rotate, 703 skewX: (v) => radToDeg(Math.atan(v[1])), 704 skewY: (v) => radToDeg(Math.atan(v[2])), 705 skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2, 706}; 707const rebaseAngle = (angle) => { 708 angle = angle % 360; 709 if (angle < 0)
vendor: 10,131 bytes, lines 710-1011
710 angle += 360; 711 return angle; 712}; 713const rotateZ = rotate; 714const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]); 715const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]); 716const matrix3dParsers = { 717 x: 12, 718 y: 13, 719 z: 14, 720 translateX: 12, 721 translateY: 13, 722 translateZ: 14, 723 scaleX, 724 scaleY, 725 scale: (v) => (scaleX(v) + scaleY(v)) / 2, 726 rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))), 727 rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))), 728 rotateZ, 729 rotate: rotateZ, 730 skewX: (v) => radToDeg(Math.atan(v[4])), 731 skewY: (v) => radToDeg(Math.atan(v[1])), 732 skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2, 733}; 734function defaultTransformValue(name) { 735 return name.includes("scale") ? 1 : 0; 736} 737function parseValueFromTransform(transform, name) { 738 if (!transform || transform === "none") { 739 return defaultTransformValue(name); 740 } 741 const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u); 742 let parsers; 743 let match; 744 if (matrix3dMatch) { 745 parsers = matrix3dParsers; 746 match = matrix3dMatch; 747 } 748 else { 749 const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u); 750 parsers = matrix2dParsers; 751 match = matrix2dMatch; 752 } 753 if (!match) { 754 return defaultTransformValue(name); 755 } 756 const valueParser = parsers[name]; 757 const values = match[1].split(",").map(convertTransformToNumber); 758 return typeof valueParser === "function" 759 ? valueParser(values) 760 : values[valueParser]; 761} 762const readTransformValue = (instance, name) => { 763 const { transform = "none" } = getComputedStyle(instance); 764 return parseValueFromTransform(transform, name); 765}; 766function convertTransformToNumber(value) { 767 return parseFloat(value.trim()); 768} 769 770 771//# sourceMappingURL=parse-transform.mjs.map 772 773;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/utils/unit-conversion.mjs 774 775 776 777 778 779const isNumOrPxType = (v) => v === numbers/* number */.Rx || v === units.px; 780const transformKeys = new Set(["x", "y", "z"]); 781const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key)); 782function removeNonTranslationalTransform(visualElement) { 783 const removedTransforms = []; 784 nonTranslationalTransformKeys.forEach((key) => { 785 const value = visualElement.getValue(key); 786 if (value !== undefined) { 787 removedTransforms.push([key, value.get()]); 788 value.set(key.startsWith("scale") ? 1 : 0); 789 } 790 }); 791 return removedTransforms; 792} 793const positionalValues = { 794 // Dimensions 795 width: ({ x }, { paddingLeft = "0", paddingRight = "0", boxSizing }) => { 796 const width = x.max - x.min; 797 return boxSizing === "border-box" 798 ? width 799 : width - parseFloat(paddingLeft) - parseFloat(paddingRight); 800 }, 801 height: ({ y }, { paddingTop = "0", paddingBottom = "0", boxSizing }) => { 802 const height = y.max - y.min; 803 return boxSizing === "border-box" 804 ? height 805 : height - parseFloat(paddingTop) - parseFloat(paddingBottom); 806 }, 807 top: (_bbox, { top }) => parseFloat(top), 808 left: (_bbox, { left }) => parseFloat(left), 809 bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min), 810 right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min), 811 // Transform 812 x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"), 813 y: (_bbox, { transform }) => parseValueFromTransform(transform, "y"), 814}; 815// Alias translate longform names 816positionalValues.translateX = positionalValues.x; 817positionalValues.translateY = positionalValues.y; 818 819 820//# sourceMappingURL=unit-conversion.mjs.map 821 822// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/frameloop/frame.mjs 823var frameloop_frame = __webpack_require__(26147); 824;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/KeyframesResolver.mjs 825 826 827 828 829const toResolve = new Set(); 830let isScheduled = false; 831let anyNeedsMeasurement = false; 832let isForced = false; 833function measureAllKeyframes() { 834 if (anyNeedsMeasurement) { 835 const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement); 836 const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element)); 837 const transformsToRestore = new Map(); 838 /** 839 * Write pass 840 * If we're measuring elements we want to remove bounding box-changing transforms. 841 */ 842 elementsToMeasure.forEach((element) => { 843 const removedTransforms = removeNonTranslationalTransform(element); 844 if (!removedTransforms.length) 845 return; 846 transformsToRestore.set(element, removedTransforms); 847 element.render(); 848 }); 849 // Read 850 resolversToMeasure.forEach((resolver) => resolver.measureInitialState()); 851 // Write 852 elementsToMeasure.forEach((element) => { 853 element.render(); 854 const restore = transformsToRestore.get(element); 855 if (restore) { 856 restore.forEach(([key, value]) => { 857 element.getValue(key)?.set(value); 858 }); 859 } 860 }); 861 // Read 862 resolversToMeasure.forEach((resolver) => resolver.measureEndState()); 863 // Write 864 resolversToMeasure.forEach((resolver) => { 865 if (resolver.suspendedScrollY !== undefined) { 866 window.scrollTo(0, resolver.suspendedScrollY); 867 } 868 }); 869 } 870 anyNeedsMeasurement = false; 871 isScheduled = false; 872 toResolve.forEach((resolver) => resolver.complete(isForced)); 873 toResolve.clear(); 874} 875function readAllKeyframes() { 876 toResolve.forEach((resolver) => { 877 resolver.readKeyframes(); 878 if (resolver.needsMeasurement) { 879 anyNeedsMeasurement = true; 880 } 881 }); 882} 883function flushKeyframeResolvers() { 884 isForced = true; 885 readAllKeyframes(); 886 measureAllKeyframes(); 887 isForced = false; 888} 889class KeyframeResolver { 890 constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) { 891 this.state = "pending"; 892 /** 893 * Track whether this resolver is async. If it is, it'll be added to the 894 * resolver queue and flushed in the next frame. Resolvers that aren't going 895 * to trigger read/write thrashing don't need to be async. 896 */ 897 this.isAsync = false; 898 /** 899 * Track whether this resolver needs to perform a measurement 900 * to resolve its keyframes. 901 */ 902 this.needsMeasurement = false; 903 this.unresolvedKeyframes = [...unresolvedKeyframes]; 904 this.onComplete = onComplete; 905 this.name = name; 906 this.motionValue = motionValue; 907 this.element = element; 908 this.isAsync = isAsync; 909 } 910 scheduleResolve() { 911 this.state = "scheduled"; 912 if (this.isAsync) { 913 toResolve.add(this); 914 if (!isScheduled) { 915 isScheduled = true; 916 frameloop_frame/* frame */.Wi.read(readAllKeyframes); 917 frameloop_frame/* frame */.Wi.resolveKeyframes(measureAllKeyframes); 918 } 919 } 920 else { 921 this.readKeyframes(); 922 this.complete(); 923 } 924 } 925 readKeyframes() { 926 const { unresolvedKeyframes, name, element, motionValue } = this; 927 // If initial keyframe is null we need to read it from the DOM 928 if (unresolvedKeyframes[0] === null) { 929 const currentValue = motionValue?.get(); 930 // TODO: This doesn't work if the final keyframe is a wildcard 931 const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1]; 932 if (currentValue !== undefined) { 933 unresolvedKeyframes[0] = currentValue; 934 } 935 else if (element && name) { 936 const valueAsRead = element.readValue(name, finalKeyframe); 937 if (valueAsRead !== undefined && valueAsRead !== null) { 938 unresolvedKeyframes[0] = valueAsRead; 939 } 940 } 941 if (unresolvedKeyframes[0] === undefined) { 942 unresolvedKeyframes[0] = finalKeyframe; 943 } 944 if (motionValue && currentValue === undefined) { 945 motionValue.set(unresolvedKeyframes[0]); 946 } 947 } 948 fillWildcards(unresolvedKeyframes); 949 } 950 setFinalKeyframe() { } 951 measureInitialState() { } 952 renderEndStyles() { } 953 measureEndState() { } 954 complete(isForcedComplete = false) { 955 this.state = "complete"; 956 this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, isForcedComplete); 957 toResolve.delete(this); 958 } 959 cancel() { 960 if (this.state === "scheduled") { 961 toResolve.delete(this); 962 this.state = "pending"; 963 } 964 } 965 resume() { 966 if (this.state === "pending") 967 this.scheduleResolve(); 968 } 969} 970 971 972//# sourceMappingURL=KeyframesResolver.mjs.map 973 974;// CONCATENATED MODULE: ./node_modules/motion-utils/dist/es/is-zero-value-string.mjs 975/** 976 * Check if the value is a zero value string like "0px" or "0%" 977 */ 978const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v); 979 980 981//# sourceMappingURL=is-zero-value-string.mjs.map 982 983;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/utils/is-none.mjs 984 985 986function isNone(value) { 987 if (typeof value === "number") { 988 return value === 0; 989 } 990 else if (value !== null) { 991 return value === "none" || value === "0" || isZeroValueString(value); 992 } 993 else { 994 return true; 995 } 996} 997 998 999//# sourceMappingURL=is-none.mjs.map 1000 1001;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/animatable-none.mjs 1002 1003 1004 1005 1006 1007const customTypes = /*@__PURE__*/ new Set([filter, mask]); 1008function getAnimatableNone(key, value) { 1009 let defaultValueType = getDefaultValueType(key); 1010 if (!customTypes.has(defaultValueType)) 1011 defaultValueType = complex/* complex */.P;
1012 // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target 1013 return defaultValueType.getAnimatableNone 1014 ? defaultValueType.getAnimatableNone(value) 1015 : undefined; 1016} 1017 1018 1019//# sourceMappingURL=animatable-none.mjs.map 1020 1021;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/utils/make-none-animatable.mjs 1022 1023 1024 1025/** 1026 * If we encounter keyframes like "none" or "0" and we also have keyframes like 1027 * "#fff" or "200px 200px" we want to find a keyframe to serve as a template for 1028 * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into 1029 * zero equivalents, i.e. "#fff0" or "0px 0px". 1030 */ 1031const invalidTemplates = new Set(["auto", "none", "0"]); 1032function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) { 1033 let i = 0; 1034 let animatableTemplate = undefined; 1035 while (i < unresolvedKeyframes.length && !animatableTemplate) { 1036 const keyframe = unresolvedKeyframes[i]; 1037 if (typeof keyframe === "string" && 1038 !invalidTemplates.has(keyframe) && 1039 (0,complex/* analyseComplexValue */.V)(keyframe).values.length) { 1040 animatableTemplate = unresolvedKeyframes[i]; 1041 } 1042 i++; 1043 } 1044 if (animatableTemplate && name) { 1045 for (const noneIndex of noneKeyframeIndexes) { 1046 unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate); 1047 } 1048 } 1049} 1050 1051 1052//# sourceMappingURL=make-none-animatable.mjs.map 1053 1054;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/DOMKeyframesResolver.mjs 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064class DOMKeyframesResolver extends KeyframeResolver { 1065 constructor(unresolvedKeyframes, onComplete, name, motionValue, element) { 1066 super(unresolvedKeyframes, onComplete, name, motionValue, element, true); 1067 } 1068 readKeyframes() { 1069 const { unresolvedKeyframes, element, name } = this; 1070 if (!element || !element.current) 1071 return; 1072 super.readKeyframes(); 1073 /** 1074 * If any keyframe is a CSS variable, we need to find its value by sampling the element 1075 */ 1076 for (let i = 0; i < unresolvedKeyframes.length; i++) { 1077 let keyframe = unresolvedKeyframes[i]; 1078 if (typeof keyframe === "string") { 1079 keyframe = keyframe.trim(); 1080 if ((0,is_css_variable/* isCSSVariableToken */.tm)(keyframe)) { 1081 const resolved = getVariableValue(keyframe, element.current); 1082 if (resolved !== undefined) { 1083 unresolvedKeyframes[i] = resolved; 1084 } 1085 if (i === unresolvedKeyframes.length - 1) { 1086 this.finalKeyframe = keyframe; 1087 } 1088 } 1089 } 1090 } 1091 /** 1092 * Resolve "none" values. We do this potentially twice - once before and once after measuring keyframes. 1093 * This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which 1094 * have a far bigger performance impact. 1095 */ 1096 this.resolveNoneKeyframes(); 1097 /** 1098 * Check to see if unit type has changed. If so schedule jobs that will 1099 * temporarily set styles to the destination keyframes. 1100 * Skip if we have more than two keyframes or this isn't a positional value. 1101 * TODO: We can throw if there are multiple keyframes and the value type changes. 1102 */ 1103 if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) { 1104 return; 1105 } 1106 const [origin, target] = unresolvedKeyframes; 1107 const originType = findDimensionValueType(origin); 1108 const targetType = findDimensionValueType(target); 1109 /** 1110 * If one keyframe contains embedded CSS variables (e.g. in calc()) and the other 1111 * doesn't, we need to measure to convert to pixels. This handles GitHub issue #3410. 1112 */ 1113 const originHasVar = (0,is_css_variable/* containsCSSVariable */.V3)(origin); 1114 const targetHasVar = (0,is_css_variable/* containsCSSVariable */.V3)(target); 1115 if (originHasVar !== targetHasVar && positionalValues[name]) { 1116 this.needsMeasurement = true; 1117 return; 1118 } 1119 /** 1120 * Either we don't recognise these value types or we can animate between them. 1121 */ 1122 if (originType === targetType) 1123 return; 1124 /** 1125 * If both values are numbers or pixels, we can animate between them by
vendor: 2,619 bytes, lines 1126-1184
1126 * converting them to numbers. 1127 */ 1128 if (isNumOrPxType(originType) && isNumOrPxType(targetType)) { 1129 for (let i = 0; i < unresolvedKeyframes.length; i++) { 1130 const value = unresolvedKeyframes[i]; 1131 if (typeof value === "string") { 1132 unresolvedKeyframes[i] = parseFloat(value); 1133 } 1134 } 1135 } 1136 else if (positionalValues[name]) { 1137 /** 1138 * Else, the only way to resolve this is by measuring the element. 1139 */ 1140 this.needsMeasurement = true; 1141 } 1142 } 1143 resolveNoneKeyframes() { 1144 const { unresolvedKeyframes, name } = this; 1145 const noneKeyframeIndexes = []; 1146 for (let i = 0; i < unresolvedKeyframes.length; i++) { 1147 if (unresolvedKeyframes[i] === null || 1148 isNone(unresolvedKeyframes[i])) { 1149 noneKeyframeIndexes.push(i); 1150 } 1151 } 1152 if (noneKeyframeIndexes.length) { 1153 makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name); 1154 } 1155 } 1156 measureInitialState() { 1157 const { element, unresolvedKeyframes, name } = this; 1158 if (!element || !element.current) 1159 return; 1160 if (name === "height") { 1161 this.suspendedScrollY = window.pageYOffset; 1162 } 1163 this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)); 1164 unresolvedKeyframes[0] = this.measuredOrigin; 1165 // Set final key frame to measure after next render 1166 const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1]; 1167 if (measureKeyframe !== undefined) { 1168 element.getValue(name, measureKeyframe).jump(measureKeyframe, false); 1169 } 1170 } 1171 measureEndState() { 1172 const { element, name, unresolvedKeyframes } = this; 1173 if (!element || !element.current) 1174 return; 1175 const value = element.getValue(name); 1176 value && value.jump(this.measuredOrigin, false); 1177 const finalKeyframeIndex = unresolvedKeyframes.length - 1; 1178 const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex]; 1179 unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current)); 1180 if (finalKeyframe !== null && this.finalKeyframe === undefined) { 1181 this.finalKeyframe = finalKeyframe; 1182 } 1183 // If we removed transform values, reapply them before the next render 1184 if (this.removedTransforms?.length) {
1185 this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => { 1186 element 1187 .getValue(unsetTransformName) 1188 .set(unsetTransformValue); 1189 }); 1190 } 1191 this.resolveNoneKeyframes(); 1192 } 1193} 1194 1195 1196//# sourceMappingURL=DOMKeyframesResolver.mjs.map 1197 1198// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/time-conversion.mjs 1199var time_conversion = __webpack_require__(29711); 1200// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/subscription-manager.mjs 1201var subscription_manager = __webpack_require__(94513); 1202// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/noop.mjs 1203var noop = __webpack_require__(56277); 1204;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/dom/is-css-var.mjs 1205const isCSSVar = (name) => name.startsWith("--"); 1206 1207 1208//# sourceMappingURL=is-css-var.mjs.map 1209 1210;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/dom/style-set.mjs 1211 1212 1213function setStyle(element, name, value) { 1214 isCSSVar(name) 1215 ? element.style.setProperty(name, value) 1216 : (element.style[name] = value); 1217} 1218 1219 1220//# sourceMappingURL=style-set.mjs.map 1221 1222// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/supports/scroll-timeline.mjs 1223var scroll_timeline = __webpack_require__(9339); 1224// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/get-final.mjs 1225var get_final = __webpack_require__(69118); 1226// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/utils/WithPromise.mjs 1227var WithPromise = __webpack_require__(9868); 1228// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/stats/animation-count.mjs 1229var animation_count = __webpack_require__(35818); 1230// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/stats/buffer.mjs 1231var buffer = __webpack_require__(20557); 1232// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/easing/utils/is-bezier-definition.mjs 1233var is_bezier_definition = __webpack_require__(53857); 1234// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/supports/memo.mjs + 1 modules 1235var memo = __webpack_require__(13740); 1236;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/supports/linear-easing.mjs 1237 1238 1239const supportsLinearEasing = /*@__PURE__*/ (0,memo/* memoSupports */.p)(() => { 1240 try { 1241 document 1242 .createElement("div") 1243 .animate({ opacity: 0 }, { easing: "linear(0, 1)" }); 1244 } 1245 catch (e) { 1246 return false; 1247 } 1248 return true; 1249}, "linearEasing"); 1250 1251 1252//# sourceMappingURL=linear-easing.mjs.map 1253 1254// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/utils/linear.mjs 1255var linear = __webpack_require__(96092); 1256;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/easing/cubic-bezier.mjs 1257const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`; 1258 1259 1260//# sourceMappingURL=cubic-bezier.mjs.map 1261 1262;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/easing/supported.mjs 1263 1264 1265const supportedWaapiEasing = { 1266 linear: "linear", 1267 ease: "ease", 1268 easeIn: "ease-in", 1269 easeOut: "ease-out", 1270 easeInOut: "ease-in-out", 1271 circIn: /*@__PURE__*/ cubicBezierAsString([0, 0.65, 0.55, 1]), 1272 circOut: /*@__PURE__*/ cubicBezierAsString([0.55, 0, 1, 0.45]), 1273 backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]), 1274 backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]), 1275}; 1276 1277 1278//# sourceMappingURL=supported.mjs.map 1279 1280;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/easing/map-easing.mjs 1281 1282 1283 1284 1285 1286 1287function mapEasingToNativeEasing(easing, duration) { 1288 if (!easing) { 1289 return undefined; 1290 } 1291 else if (typeof easing === "function") { 1292 return supportsLinearEasing() 1293 ? (0,linear/* generateLinearEasing */.w)(easing, duration) 1294 : "ease-out"; 1295 } 1296 else if ((0,is_bezier_definition/* isBezierDefinition */.q)(easing)) { 1297 return cubicBezierAsString(easing); 1298 } 1299 else if (Array.isArray(easing)) { 1300 return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || 1301 supportedWaapiEasing.easeOut); 1302 } 1303 else { 1304 return supportedWaapiEasing[easing]; 1305 } 1306} 1307 1308 1309//# sourceMappingURL=map-easing.mjs.map 1310 1311;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs 1312 1313 1314 1315 1316function startWaapiAnimation(element, valueName, keyframes, { delay
1316= 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeOut", times, } = {}, pseudoElement = undefined) { 1317 const keyframeOptions = { 1318 [valueName]: keyframes, 1319 }; 1320 if (times) 1321 keyframeOptions.offset = times; 1322 const easing = mapEasingToNativeEasing(ease, duration); 1323 /** 1324 * If this is an easing array, apply to keyframes, not animation as a whole 1325 */ 1326 if (Array.isArray(easing)) 1327 keyframeOptions.easing = easing; 1328 if (buffer/* statsBuffer */.f.value) { 1329 animation_count/* activeAnimations */.P.waapi++; 1330 } 1331 const options = { 1332 delay, 1333 duration, 1334 easing: !Array.isArray(easing) ? easing : "linear", 1335 fill: "both", 1336 iterations: repeat + 1, 1337 direction: repeatType === "reverse" ? "alternate" : "normal", 1338 }; 1339 if (pseudoElement) 1340 options.pseudoElement = pseudoElement; 1341 const animation = element.animate(keyframeOptions, options); 1342 if (buffer/* statsBuffer */.f.value) { 1343 animation.finished.finally(() => { 1344 animation_count/* activeAnimations */.P.waapi--; 1345 }); 1346 } 1347 return animation; 1348} 1349 1350 1351//# sourceMappingURL=start-waapi-animation.mjs.map 1352 1353;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/generators/utils/is-generator.mjs 1354function isGenerator(type) { 1355 return typeof type === "function" && "applyToOptions" in type; 1356} 1357 1358 1359//# sourceMappingURL=is-generator.mjs.map 1360 1361;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/utils/apply-generator.mjs 1362 1363 1364 1365function applyGeneratorOptions({ type, ...options }) { 1366 if (isGenerator(type) && supportsLinearEasing()) { 1367 return type.applyToOptions(options); 1368 } 1369 else { 1370 options.duration ?? (options.duration = 300); 1371 options.ease ?? (options.ease = "easeOut"); 1372 } 1373 return options; 1374} 1375 1376 1377//# sourceMappingURL=apply-generator.mjs.map 1378 1379;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/NativeAnimation.mjs 1380 1381 1382 1383 1384 1385 1386 1387 1388/** 1389 * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API. 1390 */ 1391class NativeAnimation extends WithPromise/* WithPromise */.T { 1392 constructor(options) { 1393 super(); 1394 this.finishedTime = null; 1395 this.isStopped = false; 1396 /** 1397 * Tracks a manually-set start time that takes precedence over WAAPI's 1398 * dynamic startTime. This is cleared when play() or time setter is called, 1399 * allowing WAAPI to take over timing. 1400 */ 1401 this.manualStartTime = null; 1402 if (!options) 1403 return; 1404 const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options; 1405 this.isPseudoElement = Boolean(pseudoElement); 1406 this.allowFlatten = allowFlatten; 1407 this.options = options; 1408 (0,errors/* invariant */.k)(typeof options.type !== "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring"); 1409 const transition = applyGeneratorOptions(options); 1410 this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement); 1411 if (transition.autoplay === false) { 1412 this.animation.pause(); 1413 } 1414 this.animation.onfinish = () => { 1415 this.finishedTime = this.time; 1416 if (!pseudoElement) { 1417 const keyframe = (0,get_final/* getFinalKeyframe */.$)(keyframes, this.options, finalKeyframe, this.speed); 1418 if (this.updateMotionValue) { 1419 this.updateMotionValue(keyframe); 1420 } 1421 /** 1422 * If we can, we want to commit the final style as set by the user, 1423 * rather than the computed keyframe value supplied by the animation. 1424 * We always do this, even when a motion value is present, to prevent 1425 * a visual flash in Firefox where the WAAPI animation's fill is removed 1426 * during cancel() before the scheduled render can apply the correct value. 1427 */ 1428 setStyle(element, name, keyframe); 1429 this.animation.cancel(); 1430 } 1431 onComplete?.(); 1432 this.notifyFinished(); 1433 }; 1434 } 1435 play() { 1436 if (this.isStopped) 1437 return; 1438 this.manualStartTime = null; 1439 this.animation.play(); 1440 if (this.state === "finished") { 1441 this.updateFinished(); 1442 } 1443 } 1444 pause() { 1445 this.animation.pause(); 1446 } 1447 complete() { 1448 this.animation.finish?.(); 1449 } 1450 cancel() { 1451 try { 1452 this.animation.cancel(); 1453 } 1454 catch (e) { } 1455 } 1456 stop() { 1457 if (this.isStopped) 1458 return; 1459 this.isStopped = true; 1460 const { state } = this;
1461 if (state === "idle" || state === "finished") { 1462 return; 1463 } 1464 if (this.updateMotionValue) { 1465 this.updateMotionValue(); 1466 } 1467 else { 1468 this.commitStyles(); 1469 } 1470 if (!this.isPseudoElement) 1471 this.cancel(); 1472 } 1473 /** 1474 * WAAPI doesn't natively have any interruption capabilities. 1475 * 1476 * In this method, we commit styles back to the DOM before cancelling 1477 * the animation. 1478 * 1479 * This is designed to be overridden by NativeAnimationExtended, which 1480 * will create a renderless JS animation and sample it twice to calculate 1481 * its current value, "previous" value, and therefore allow 1482 * Motion to also correctly calculate velocity for any subsequent animation 1483 * while deferring the commit until the next animation frame. 1484 */ 1485 commitStyles() { 1486 const element = this.options?.element; 1487 if (!this.isPseudoElement && element?.isConnected) { 1488 this.animation.commitStyles?.(); 1489 } 1490 } 1491 get duration() { 1492 const duration = this.animation.effect?.getComputedTiming?.().duration || 0; 1493 return (0,time_conversion/* millisecondsToSeconds */.X)(Number(duration)); 1494 } 1495 get iterationDuration() { 1496 const { delay = 0 } = this.options || {}; 1497 return this.duration + (0,time_conversion/* millisecondsToSeconds */.X)(delay); 1498 } 1499 get time() { 1500 return (0,time_conversion/* millisecondsToSeconds */.X)(Number(this.animation.currentTime) || 0); 1501 } 1502 set time(newTime) { 1503 const wasFinished = this.finishedTime !== null; 1504 this.manualStartTime = null; 1505 this.finishedTime = null; 1506 this.animation.currentTime = (0,time_conversion/* secondsToMilliseconds */.w)(newTime); 1507 if (wasFinished) { 1508 this.animation.pause(); 1509 } 1510 } 1511 /** 1512 * The playback speed of the animation. 1513 * 1 = normal speed, 2 = double speed, 0.5 = half speed. 1514 */ 1515 get speed() { 1516 return this.animation.playbackRate; 1517 } 1518 set speed(newSpeed) { 1519 // Allow backwards playback after finishing 1520 if (newSpeed < 0) 1521 this.finishedTime = null; 1522 this.animation.playbackRate = newSpeed; 1523 } 1524 get state() { 1525 return this.finishedTime !== null 1526 ? "finished" 1527 : this.animation.playState; 1528 } 1529 get startTime() { 1530 return this.manualStartTime ?? Number(this.animation.startTime); 1531 } 1532 set startTime(newStartTime) { 1533 this.manualStartTime = this.animation.startTime = newStartTime; 1534 } 1535 /** 1536 * Attaches a timeline to the animation, for instance the `ScrollTimeline`. 1537 */ 1538 attachTimeline({ timeline, rangeStart, rangeEnd, observe, }) { 1539 if (this.allowFlatten) { 1540 this.animation.effect?.updateTiming({ easing: "linear" }); 1541 } 1542 this.animation.onfinish = null; 1543 if (timeline && (0,scroll_timeline/* supportsScrollTimeline */.t)()) { 1544 this.animation.timeline = timeline; 1545 if (rangeStart) 1546 this.animation.rangeStart = rangeStart; 1547 if (rangeEnd) 1548 this.animation.rangeEnd = rangeEnd; 1549 return noop/* noop */.Z; 1550 } 1551 else { 1552 return observe(this); 1553 } 1554 } 1555} 1556 1557 1558//# sourceMappingURL=NativeAnimation.mjs.map 1559 1560;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/utils/accelerated-values.mjs 1561/** 1562 * A list of values that can be hardware-accelerated. 1563 */ 1564const acceleratedValues = new Set([ 1565 "opacity", 1566 "clipPath", 1567 "filter", 1568 "transform", 1569 // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved 1570 // or until we implement support for linear() easing. 1571 // "background-color" 1572]); 1573 1574 1575//# sourceMappingURL=accelerated-values.mjs.map 1576 1577// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/frameloop/microtask.mjs 1578var microtask = __webpack_require__(3697); 1579// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/frameloop/sync-time.mjs 1580var sync_time = __webpack_require__(41927); 1581// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/index.mjs 1582var es_value = __webpack_require__(94357); 1583;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/find.mjs 1584 1585 1586 1587 1588 1589/** 1590 * A list of all ValueTypes 1591 */ 1592const valueTypes = [...dimensionValueTypes, color/* color */.$, complex/* complex */.P]; 1593/** 1594 * Tests a value against the list of ValueTypes 1595 */ 1596const findValueType = (v) => valueTypes.find(testValueType(v)); 1597 1598 1599//# sourceMappingURL=find.mjs.map 1600 1601;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/store.mjs 1602const visualElementStore = new WeakMap(); 1603 1604 1605//# sourceMappingURL=store.mjs.map 1606 1607;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/is-animation-controls.mjs 1608function isAnimationControls(v) { 1609 return (v !== null && 1610 typeof v === "object" && 1611 typeof v.start === "function"); 1612} 1613 1614 1615//# sourceMappingURL=is-animation-controls.mjs.map 1616 1617;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/is-variant-label.mjs 1618/** 1619 * Decides if the supplied variable is variant label 1620 */ 1621function isVariantLabel(v) { 1622 return typeof v === "string" || Array.isArray(v); 1623} 1624 1625 1626//# sourceMappingURL=is-variant-label.mjs.map 1627 1628;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/variant-props.mjs 1629const variantPriorityOrder = [ 1630 "animate", 1631 "whileInView", 1632 "whileFocus", 1633 "whileHover", 1634 "whileTap", 1635 "whileDrag", 1636 "exit", 1637]; 1638const variantProps = ["initial", ...variantPriorityOrder]; 1639 1640 1641//# sourceMappingURL=variant-props.mjs.map 1642 1643;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/is-controlling-variants.mjs 1644 1645 1646 1647 1648function isControllingVariants(props) { 1649 return (isAnimationControls(props.animate) || 1650 variantProps.some((name) => isVariantLabel(props[name]))); 1651} 1652function isVariantNode(props) { 1653 return Boolean(isControllingVariants(props) || props.variants); 1654} 1655 1656 1657//# sourceMappingURL=is-controlling-variants.mjs.map 1658 1659;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/motion-values.mjs 1660 1661 1662 1663/** 1664 * Updates motion values from props changes. 1665 * Uses `any` type for element to avoid circular dependencies with VisualElement. 1666 */ 1667function updateMotionValuesFromProps(element, next, prev) { 1668 for (const key in next) { 1669 const nextValue = next[key]; 1670 const prevValue = prev[key]; 1671 if ((0,is_motion_value/* isMotionValue */.i)(nextValue)) { 1672 /** 1673 * If this is a motion value found in props or style, we want to add it 1674 * to our visual element's motion value map. 1675 */ 1676 element.addValue(key, nextValue); 1677 } 1678 else if ((0,is_motion_value/* isMotionValue */.i)(prevValue)) { 1679 /** 1680 * If we're swapping from a motion value to a static value, 1681 * create a new motion value from that 1682 */ 1683 element.addValue(key, (0,es_value/* motionValue */.BX)(nextValue, { owner: element })); 1684 } 1685 else if (prevValue !== nextValue) { 1686 /** 1687 * If this is a flat value that has changed, update the motion value 1688 * or create one if it doesn't exist. We only want to do this if we're 1689 * not handling the value with our animation state. 1690 */ 1691 if (element.hasValue(key)) {
vendor: 15,209 bytes, lines 1692-2095
1692 const existingValue = element.getValue(key); 1693 if (existingValue.liveStyle === true) { 1694 existingValue.jump(nextValue); 1695 } 1696 else if (!existingValue.hasAnimated) { 1697 existingValue.set(nextValue); 1698 } 1699 } 1700 else { 1701 const latestValue = element.getStaticValue(key); 1702 element.addValue(key, (0,es_value/* motionValue */.BX)(latestValue !== undefined ? latestValue : nextValue, { owner: element })); 1703 } 1704 } 1705 } 1706 // Handle removed values 1707 for (const key in prev) { 1708 if (next[key] === undefined) 1709 element.removeValue(key); 1710 } 1711 return next; 1712} 1713 1714 1715//# sourceMappingURL=motion-values.mjs.map 1716 1717// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/render/utils/reduced-motion/index.mjs 1718var reduced_motion = __webpack_require__(4662); 1719;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/resolve-variants.mjs 1720function getValueState(visualElement) { 1721 const state = [{}, {}]; 1722 visualElement?.values.forEach((value, key) => { 1723 state[0][key] = value.get(); 1724 state[1][key] = value.getVelocity(); 1725 }); 1726 return state; 1727} 1728function resolveVariantFromProps(props, definition, custom, visualElement) { 1729 /** 1730 * If the variant definition is a function, resolve. 1731 */ 1732 if (typeof definition === "function") { 1733 const [current, velocity] = getValueState(visualElement); 1734 definition = definition(custom !== undefined ? custom : props.custom, current, velocity); 1735 } 1736 /** 1737 * If the variant definition is a variant label, or 1738 * the function returned a variant label, resolve. 1739 */ 1740 if (typeof definition === "string") { 1741 definition = props.variants && props.variants[definition]; 1742 } 1743 /** 1744 * At this point we've resolved both functions and variant labels, 1745 * but the resolved variant label might itself have been a function. 1746 * If so, resolve. This can only have returned a valid target object. 1747 */ 1748 if (typeof definition === "function") { 1749 const [current, velocity] = getValueState(visualElement); 1750 definition = definition(custom !== undefined ? custom : props.custom, current, velocity); 1751 } 1752 return definition; 1753} 1754 1755 1756//# sourceMappingURL=resolve-variants.mjs.map 1757 1758// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/render/utils/reduced-motion/state.mjs 1759var state = __webpack_require__(47435); 1760;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/VisualElement.mjs 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782const propEventHandlers = [ 1783 "AnimationStart", 1784 "AnimationComplete", 1785 "Update", 1786 "BeforeLayoutMeasure", 1787 "LayoutMeasure", 1788 "LayoutAnimationStart", 1789 "LayoutAnimationComplete", 1790]; 1791/** 1792 * Static feature definitions - can be injected by framework layer 1793 */ 1794let featureDefinitions = {}; 1795/** 1796 * Set feature definitions for all VisualElements. 1797 * This should be called by the framework layer (e.g., framer-motion) during initialization. 1798 */ 1799function setFeatureDefinitions(definitions) { 1800 featureDefinitions = definitions; 1801} 1802/** 1803 * Get the current feature definitions 1804 */ 1805function getFeatureDefinitions() { 1806 return featureDefinitions; 1807} 1808/** 1809 * A VisualElement is an imperative abstraction around UI elements such as 1810 * HTMLElement, SVGElement, Three.Object3D etc. 1811 */ 1812class VisualElement { 1813 /** 1814 * This method takes React props and returns found MotionValues. For example, HTML 1815 * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays. 1816 * 1817 * This isn't an abstract method as it needs calling in the constructor, but it is 1818 * intended to be one. 1819 */ 1820 scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) { 1821 return {}; 1822 } 1823 constructor({ parent, props, presenceContext, reducedMotionConfig, skipAnimations, blockInitialAnimation, visualState, }, options = {}) { 1824 /** 1825 * A reference to the current underlying Instance, e.g. a HTMLElement 1826 * or Three.Mesh etc. 1827 */ 1828 this.current = null; 1829 /** 1830 * A set containing references to this VisualElement's children. 1831 */ 1832 this.children = new Set(); 1833 /** 1834 * Determine what role this visual element should take in the variant tree. 1835 */ 1836 this.isVariantNode = false; 1837 this.isControllingVariants = false; 1838 /** 1839 * Decides whether this VisualElement should animate in reduced motion 1840 * mode. 1841 * 1842 * TODO: This is currently set on every individual VisualElement but feels 1843 * like it could be set globally. 1844 */ 1845 this.shouldReduceMotion = null; 1846 /** 1847 * Decides whether animations should be skipped for this VisualElement. 1848 * Useful for E2E tests and visual regression testing. 1849 */ 1850 this.shouldSkipAnimations = false; 1851 /** 1852 * A map of all motion values attached to this visual element. Motion 1853 * values are source of truth for any given animated value. A motion 1854 * value might be provided externally by the component via props. 1855 */ 1856 this.values = new Map(); 1857 this.KeyframeResolver = KeyframeResolver; 1858 /** 1859 * Cleanup functions for active features (hover/tap/exit etc) 1860 */ 1861 this.features = {}; 1862 /** 1863 * A map of every subscription that binds the provided or generated 1864 * motion values onChange listeners to this visual element. 1865 */ 1866 this.valueSubscriptions = new Map(); 1867 /** 1868 * A reference to the previously-provided motion values as returned 1869 * from scrapeMotionValuesFromProps. We use the keys in here to determine 1870 * if any motion values need to be removed after props are updated. 1871 */ 1872 this.prevMotionValues = {}; 1873 /** 1874 * Track whether this element has been mounted before, to detect 1875 * remounts after Suspense unmount/remount cycles. 1876 */ 1877 this.hasBeenMounted = false; 1878 /** 1879 * An object containing a SubscriptionManager for each active event. 1880 */ 1881 this.events = {}; 1882 /** 1883 * An object containing an unsubscribe function for each prop event subscription. 1884 * For example, every "Update" event can have multiple subscribers via 1885 * VisualElement.on(), but only one of those can be defined via the onUpdate prop. 1886 */ 1887 this.propEventSubscriptions = {}; 1888 this.notifyUpdate = () => this.notify("Update", this.latestValues); 1889 this.render = () => { 1890 if (!this.current) 1891 return; 1892 this.triggerBuild(); 1893 this.renderInstance(this.current, this.renderState, this.props.style, this.projection); 1894 }; 1895 this.renderScheduledAt = 0.0; 1896 this.scheduleRender = () => { 1897 const now = sync_time/* time */.X.now(); 1898 if (this.renderScheduledAt < now) { 1899 this.renderScheduledAt = now; 1900 frameloop_frame/* frame */.Wi.render(this.render, false, true); 1901 } 1902 }; 1903 const { latestValues, renderState } = visualState; 1904 this.latestValues = latestValues; 1905 this.baseTarget = { ...latestValues }; 1906 this.initialValues = props.initial ? { ...latestValues } : {}; 1907 this.renderState = renderState; 1908 this.parent = parent; 1909 this.props = props; 1910 this.presenceContext = presenceContext; 1911 this.depth = parent ? parent.depth + 1 : 0; 1912 this.reducedMotionConfig = reducedMotionConfig; 1913 this.skipAnimationsConfig = skipAnimations; 1914 this.options = options; 1915 this.blockInitialAnimation = Boolean(blockInitialAnimation); 1916 this.isControllingVariants = isControllingVariants(props); 1917 this.isVariantNode = isVariantNode(props); 1918 if (this.isVariantNode) { 1919 this.variantChildren = new Set(); 1920 } 1921 this.manuallyAnimateOnMount = Boolean(parent && parent.current); 1922 /** 1923 * Any motion values that are provided to the element when created 1924 * aren't yet bound to the element, as this would technically be impure. 1925 * However, we iterate through the motion values and set them to the 1926 * initial values for this component. 1927 * 1928 * TODO: This is impure and we should look at changing this to run on mount. 1929 * Doing so will break some tests but this isn't necessarily a breaking change, 1930 * more a reflection of the test. 1931 */ 1932 const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this); 1933 for (const key in initialMotionValues) { 1934 const value = initialMotionValues[key]; 1935 if (latestValues[key] !== undefined && (0,is_motion_value/* isMotionValue */.i)(value)) { 1936 value.set(latestValues[key]); 1937 } 1938 } 1939 } 1940 mount(instance) { 1941 /** 1942 * If this element has been mounted before (e.g. after a Suspense 1943 * unmount/remount), reset motion values to their initial state 1944 * so animations replay correctly from initial â animate. 1945 */ 1946 if (this.hasBeenMounted) { 1947 for (const key in this.initialValues) { 1948 this.values.get(key)?.jump(this.initialValues[key]); 1949 this.latestValues[key] = this.initialValues[key]; 1950 } 1951 } 1952 this.current = instance; 1953 visualElementStore.set(instance, this); 1954 if (this.projection && !this.projection.instance) { 1955 this.projection.mount(instance); 1956 } 1957 if (this.parent && this.isVariantNode && !this.isControllingVariants) { 1958 this.removeFromVariantTree = this.parent.addVariantChild(this); 1959 } 1960 this.values.forEach((value, key) => this.bindToMotionValue(key, value)); 1961 /** 1962 * Determine reduced motion preference. Only initialize the matchMedia 1963 * listener if we actually need the dynamic value (i.e., when config 1964 * is neither "never" nor "always"). 1965 */ 1966 if (this.reducedMotionConfig === "never") { 1967 this.shouldReduceMotion = false; 1968 } 1969 else if (this.reducedMotionConfig === "always") { 1970 this.shouldReduceMotion = true; 1971 } 1972 else { 1973 if (!state/* hasReducedMotionListener */.O.current) { 1974 (0,reduced_motion/* initPrefersReducedMotion */.Ad)(); 1975 } 1976 this.shouldReduceMotion = state/* prefersReducedMotion */.n.current; 1977 } 1978 if (false) {} 1979 /** 1980 * Set whether animations should be skipped based on the config. 1981 */ 1982 this.shouldSkipAnimations = this.skipAnimationsConfig ?? false; 1983 this.parent?.addChild(this); 1984 this.update(this.props, this.presenceContext); 1985 this.hasBeenMounted = true; 1986 } 1987 unmount() { 1988 this.projection && this.projection.unmount(); 1989 (0,frameloop_frame/* cancelFrame */.Pn)(this.notifyUpdate); 1990 (0,frameloop_frame/* cancelFrame */.Pn)(this.render); 1991 this.valueSubscriptions.forEach((remove) => remove()); 1992 this.valueSubscriptions.clear(); 1993 this.removeFromVariantTree && this.removeFromVariantTree(); 1994 this.parent?.removeChild(this); 1995 for (const key in this.events) { 1996 this.events[key].clear(); 1997 } 1998 for (const key in this.features) { 1999 const feature = this.features[key]; 2000 if (feature) { 2001 feature.unmount(); 2002 feature.isMounted = false; 2003 } 2004 } 2005 this.current = null; 2006 } 2007 addChild(child) { 2008 this.children.add(child); 2009 this.enteringChildren ?? (this.enteringChildren = new Set()); 2010 this.enteringChildren.add(child); 2011 } 2012 removeChild(child) { 2013 this.children.delete(child); 2014 this.enteringChildren && this.enteringChildren.delete(child); 2015 } 2016 bindToMotionValue(key, value) { 2017 if (this.valueSubscriptions.has(key)) { 2018 this.valueSubscriptions.get(key)(); 2019 } 2020 if (value.accelerate && 2021 acceleratedValues.has(key) && 2022 this.current instanceof HTMLElement) { 2023 const { factory, keyframes, times, ease, duration } = value.accelerate; 2024 const animation = new NativeAnimation({ 2025 element: this.current, 2026 name: key, 2027 keyframes, 2028 times, 2029 ease, 2030 duration: (0,time_conversion/* secondsToMilliseconds */.w)(duration), 2031 }); 2032 const cleanup = factory(animation); 2033 this.valueSubscriptions.set(key, () => { 2034 cleanup(); 2035 animation.cancel(); 2036 }); 2037 return; 2038 } 2039 const valueIsTransform = transformProps.has(key); 2040 if (valueIsTransform && this.onBindTransform) { 2041 this.onBindTransform(); 2042 } 2043 const removeOnChange = value.on("change", (latestValue) => { 2044 this.latestValues[key] = latestValue; 2045 this.props.onUpdate && frameloop_frame/* frame */.Wi.preRender(this.notifyUpdate); 2046 if (valueIsTransform && this.projection) { 2047 this.projection.isTransformDirty = true; 2048 } 2049 this.scheduleRender(); 2050 }); 2051 let removeSyncCheck; 2052 if (typeof window !== "undefined" && 2053 window.MotionCheckAppearSync) { 2054 removeSyncCheck = window.MotionCheckAppearSync(this, key, value); 2055 } 2056 this.valueSubscriptions.set(key, () => { 2057 removeOnChange(); 2058 if (removeSyncCheck) 2059 removeSyncCheck(); 2060 // Defer to MotionValue.on("change") auto-stop so React 19 remounts 2061 // can resubscribe before the animation is cancelled (#3315). 2062 }); 2063 } 2064 sortNodePosition(other) { 2065 /** 2066 * If these nodes aren't even of the same type we can't compare their depth. 2067 */ 2068 if (!this.current || 2069 !this.sortInstanceNodePosition || 2070 this.type !== other.type) { 2071 return 0; 2072 } 2073 return this.sortInstanceNodePosition(this.current, other.current); 2074 } 2075 updateFeatures() { 2076 let key = "animation"; 2077 for (key in featureDefinitions) { 2078 const featureDefinition = featureDefinitions[key]; 2079 if (!featureDefinition) 2080 continue; 2081 const { isEnabled, Feature: FeatureConstructor } = featureDefinition; 2082 /** 2083 * If this feature is enabled but not active, make a new instance. 2084 */ 2085 if (!this.features[key] && 2086 FeatureConstructor && 2087 isEnabled(this.props)) { 2088 this.features[key] = new FeatureConstructor(this); 2089 } 2090 /** 2091 * If we have a feature, mount or update it. 2092 */ 2093 if (this.features[key]) { 2094 const feature = this.features[key]; 2095 if (feature.isMounted) {
vendor: 9,490 bytes, lines 2096-2365
2096 feature.update(); 2097 } 2098 else { 2099 feature.mount(); 2100 feature.isMounted = true; 2101 } 2102 } 2103 } 2104 } 2105 triggerBuild() { 2106 this.build(this.renderState, this.latestValues, this.props); 2107 } 2108 /** 2109 * Measure the current viewport box with or without transforms. 2110 * Only measures axis-aligned boxes, rotate and skew must be manually 2111 * removed with a re-render to work. 2112 */ 2113 measureViewportBox() { 2114 return this.current 2115 ? this.measureInstanceViewportBox(this.current, this.props) 2116 : createBox(); 2117 } 2118 getStaticValue(key) { 2119 return this.latestValues[key]; 2120 } 2121 setStaticValue(key, value) { 2122 this.latestValues[key] = value; 2123 } 2124 /** 2125 * Update the provided props. Ensure any newly-added motion values are 2126 * added to our map, old ones removed, and listeners updated. 2127 */ 2128 update(props, presenceContext) { 2129 if (props.transformTemplate || this.props.transformTemplate) { 2130 this.scheduleRender(); 2131 } 2132 this.prevProps = this.props; 2133 this.props = props; 2134 this.prevPresenceContext = this.presenceContext; 2135 this.presenceContext = presenceContext; 2136 /** 2137 * Update prop event handlers ie onAnimationStart, onAnimationComplete 2138 */ 2139 for (let i = 0; i < propEventHandlers.length; i++) { 2140 const key = propEventHandlers[i]; 2141 if (this.propEventSubscriptions[key]) { 2142 this.propEventSubscriptions[key](); 2143 delete this.propEventSubscriptions[key]; 2144 } 2145 const listenerName = ("on" + key); 2146 const listener = props[listenerName]; 2147 if (listener) { 2148 this.propEventSubscriptions[key] = this.on(key, listener); 2149 } 2150 } 2151 this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps || {}, this), this.prevMotionValues); 2152 if (this.handleChildMotionValue) { 2153 this.handleChildMotionValue(); 2154 } 2155 } 2156 getProps() { 2157 return this.props; 2158 } 2159 /** 2160 * Returns the variant definition with a given name. 2161 */ 2162 getVariant(name) { 2163 return this.props.variants ? this.props.variants[name] : undefined; 2164 } 2165 /** 2166 * Returns the defined default transition on this component. 2167 */ 2168 getDefaultTransition() { 2169 return this.props.transition; 2170 } 2171 getTransformPagePoint() { 2172 return this.props.transformPagePoint; 2173 } 2174 getClosestVariantNode() { 2175 return this.isVariantNode 2176 ? this 2177 : this.parent 2178 ? this.parent.getClosestVariantNode() 2179 : undefined; 2180 } 2181 /** 2182 * Add a child visual element to our set of children. 2183 */ 2184 addVariantChild(child) { 2185 const closestVariantNode = this.getClosestVariantNode(); 2186 if (closestVariantNode) { 2187 closestVariantNode.variantChildren && 2188 closestVariantNode.variantChildren.add(child); 2189 return () => closestVariantNode.variantChildren.delete(child); 2190 } 2191 } 2192 /** 2193 * Add a motion value and bind it to this visual element. 2194 */ 2195 addValue(key, value) { 2196 // Remove existing value if it exists 2197 const existingValue = this.values.get(key); 2198 if (value !== existingValue) { 2199 if (existingValue) 2200 this.removeValue(key); 2201 this.bindToMotionValue(key, value); 2202 this.values.set(key, value); 2203 this.latestValues[key] = value.get(); 2204 } 2205 } 2206 /** 2207 * Remove a motion value and unbind any active subscriptions. 2208 */ 2209 removeValue(key) { 2210 this.values.delete(key); 2211 const unsubscribe = this.valueSubscriptions.get(key); 2212 if (unsubscribe) { 2213 unsubscribe(); 2214 this.valueSubscriptions.delete(key); 2215 } 2216 delete this.latestValues[key]; 2217 this.removeValueFromRenderState(key, this.renderState); 2218 } 2219 /** 2220 * Check whether we have a motion value for this key 2221 */ 2222 hasValue(key) { 2223 return this.values.has(key); 2224 } 2225 getValue(key, defaultValue) { 2226 if (this.props.values && this.props.values[key]) { 2227 return this.props.values[key]; 2228 } 2229 let value = this.values.get(key); 2230 if (value === undefined && defaultValue !== undefined) { 2231 value = (0,es_value/* motionValue */.BX)(defaultValue === null ? undefined : defaultValue, { owner: this }); 2232 this.addValue(key, value); 2233 } 2234 return value; 2235 } 2236 /** 2237 * If we're trying to animate to a previously unencountered value, 2238 * we need to check for it in our state and as a last resort read it 2239 * directly from the instance (which might have performance implications). 2240 */ 2241 readValue(key, target) { 2242 let value = this.latestValues[key] !== undefined || !this.current 2243 ? this.latestValues[key] 2244 : this.getBaseTargetFromProps(this.props, key) ?? 2245 this.readValueFromInstance(this.current, key, this.options); 2246 if (value !== undefined && value !== null) { 2247 if (typeof value === "string" && 2248 (isNumericalString(value) || isZeroValueString(value))) { 2249 // If this is a number read as a string, ie "0" or "200", convert it to a number 2250 value = parseFloat(value); 2251 } 2252 else if (!findValueType(value) && complex/* complex */.P.test(target)) { 2253 value = getAnimatableNone(key, target); 2254 } 2255 this.setBaseTarget(key, (0,is_motion_value/* isMotionValue */.i)(value) ? value.get() : value); 2256 } 2257 return (0,is_motion_value/* isMotionValue */.i)(value) ? value.get() : value; 2258 } 2259 /** 2260 * Set the base target to later animate back to. This is currently 2261 * only hydrated on creation and when we first read a value. 2262 */ 2263 setBaseTarget(key, value) { 2264 this.baseTarget[key] = value; 2265 } 2266 /** 2267 * Find the base target for a value thats been removed from all animation 2268 * props. 2269 */ 2270 getBaseTarget(key) { 2271 const { initial } = this.props; 2272 let valueFromInitial; 2273 if (typeof initial === "string" || typeof initial === "object") { 2274 const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom); 2275 if (variant) { 2276 valueFromInitial = variant[key]; 2277 } 2278 } 2279 /** 2280 * If this value still exists in the current initial variant, read that. 2281 */ 2282 if (initial && valueFromInitial !== undefined) { 2283 return valueFromInitial; 2284 } 2285 /** 2286 * Alternatively, if this VisualElement config has defined a getBaseTarget 2287 * so we can read the value from an alternative source, try that. 2288 */ 2289 const target = this.getBaseTargetFromProps(this.props, key); 2290 if (target !== undefined && !(0,is_motion_value/* isMotionValue */.i)(target)) 2291 return target; 2292 /** 2293 * If the value was initially defined on initial, but it doesn't any more, 2294 * return undefined. Otherwise return the value as initially read from the DOM. 2295 */ 2296 return this.initialValues[key] !== undefined && 2297 valueFromInitial === undefined 2298 ? undefined 2299 : this.baseTarget[key]; 2300 } 2301 on(eventName, callback) { 2302 if (!this.events[eventName]) { 2303 this.events[eventName] = new subscription_manager/* SubscriptionManager */.L(); 2304 } 2305 return this.events[eventName].add(callback); 2306 } 2307 notify(eventName, ...args) { 2308 if (this.events[eventName]) { 2309 this.events[eventName].notify(...args); 2310 } 2311 } 2312 scheduleRenderMicrotask() { 2313 microtask/* microtask */.g.render(this.render); 2314 } 2315} 2316 2317 2318//# sourceMappingURL=VisualElement.mjs.map 2319 2320;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/dom/DOMVisualElement.mjs 2321 2322 2323 2324 2325class DOMVisualElement extends VisualElement { 2326 constructor() { 2327 super(...arguments); 2328 this.KeyframeResolver = DOMKeyframesResolver; 2329 } 2330 sortInstanceNodePosition(a, b) { 2331 /** 2332 * compareDocumentPosition returns a bitmask, by using the bitwise & 2333 * we're returning true if 2 in that bitmask is set to true. 2 is set 2334 * to true if b preceeds a. 2335 */ 2336 return a.compareDocumentPosition(b) & 2 ? 1 : -1; 2337 } 2338 getBaseTargetFromProps(props, key) { 2339 const style = props.style; 2340 return style ? style[key] : undefined; 2341 } 2342 removeValueFromRenderState(key, { vars, style }) { 2343 delete vars[key]; 2344 delete style[key]; 2345 } 2346 handleChildMotionValue() { 2347 if (this.childSubscription) { 2348 this.childSubscription(); 2349 delete this.childSubscription; 2350 } 2351 const { children } = this.props; 2352 if ((0,is_motion_value/* isMotionValue */.i)(children)) { 2353 this.childSubscription = children.on("change", (latest) => { 2354 if (this.current) { 2355 this.current.textContent = `${latest}`; 2356 } 2357 }); 2358 } 2359 } 2360} 2361 2362 2363//# sourceMappingURL=DOMVisualElement.mjs.map 2364 2365;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/dom/ut
2365ils/camel-to-dash.mjs 2366function camelToDash(str) { 2367 return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`); 2368} 2369 2370 2371//# sourceMappingURL=camel-to-dash.mjs.map 2372 2373;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/get-as-type.mjs 2374/** 2375 * Provided a value and a ValueType, returns the value as that value type. 2376 */ 2377const getValueAsType = (value, type) => { 2378 return type && typeof value === "number" 2379 ? type.transform(value) 2380 : value; 2381}; 2382 2383 2384//# sourceMappingURL=get-as-type.mjs.map 2385 2386;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/html/utils/build-transform.mjs 2387 2388 2389 2390 2391const translateAlias = { 2392 x: "translateX", 2393 y: "translateY", 2394 z: "translateZ", 2395 transformPerspective: "perspective", 2396}; 2397const numTransforms = transformPropOrder.length; 2398/** 2399 * Build a CSS transform style from individual x/y/scale etc properties. 2400 * 2401 * This outputs with a default order of transforms/scales/rotations, this can be customised by 2402 * providing a transformTemplate function. 2403 */ 2404function buildTransform(latestValues, transform, transformTemplate) { 2405 // The transform string we're going to build into. 2406 let transformString = ""; 2407 let transformIsDefault = true; 2408 /** 2409 * Loop over all possible transforms in order, adding the ones that 2410 * are present to the transform string. 2411 */ 2412 for (let i = 0; i < numTransforms; i++) { 2413 const key = transformPropOrder[i]; 2414 const value = latestValues[key]; 2415 if (value === undefined) 2416 continue; 2417 let valueIsDefault = true; 2418 if (typeof value === "number") { 2419 valueIsDefault = value === (key.startsWith("scale") ? 1 : 0); 2420 } 2421 else { 2422 const parsed = parseFloat(value); 2423 valueIsDefault = key.startsWith("scale") ? parsed === 1 : parsed === 0; 2424 } 2425 if (!valueIsDefault || transformTemplate) { 2426 const valueAsType = getValueAsType(value, numberValueTypes[key]); 2427 if (!valueIsDefault) { 2428 transformIsDefault = false;
vendor: 4,425 bytes, lines 2429-2551
2429 const transformName = translateAlias[key] || key; 2430 transformString += `${transformName}(${valueAsType}) `; 2431 } 2432 if (transformTemplate) { 2433 transform[key] = valueAsType; 2434 } 2435 } 2436 } 2437 // `pathRotation` composes onto `rotate` as a separate additive term so 2438 // the user's `rotate` is never clobbered. Deliberately not a slot in 2439 // `transformPropOrder`. 2440 const pathRotation = latestValues.pathRotation; 2441 if (pathRotation) { 2442 transformIsDefault = false; 2443 transformString += `rotate(${getValueAsType(pathRotation, numberValueTypes.pathRotation)}) `; 2444 } 2445 transformString = transformString.trim(); 2446 // If we have a custom `transform` template, pass our transform values and 2447 // generated transformString to that before returning 2448 if (transformTemplate) { 2449 transformString = transformTemplate(transform, transformIsDefault ? "" : transformString); 2450 } 2451 else if (transformIsDefault) { 2452 transformString = "none"; 2453 } 2454 return transformString; 2455} 2456 2457 2458//# sourceMappingURL=build-transform.mjs.map 2459 2460;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/html/utils/build-styles.mjs 2461 2462 2463 2464 2465 2466 2467function buildHTMLStyles(state, latestValues, transformTemplate) { 2468 const { style, vars, transformOrigin } = state; 2469 // Track whether we encounter any transform or transformOrigin values. 2470 let hasTransform = false; 2471 let hasTransformOrigin = false; 2472 /** 2473 * Loop over all our latest animated values and decide whether to handle them 2474 * as a style or CSS variable. 2475 * 2476 * Transforms and transform origins are kept separately for further processing. 2477 */ 2478 for (const key in latestValues) { 2479 const value = latestValues[key]; 2480 if (transformProps.has(key)) { 2481 // If this is a transform, flag to enable further transform processing 2482 hasTransform = true; 2483 continue; 2484 } 2485 else if ((0,is_css_variable/* isCSSVariableName */.f9)(key)) { 2486 vars[key] = value; 2487 continue; 2488 } 2489 else { 2490 // Convert the value to its default value type, ie 0 -> "0px" 2491 const valueAsType = getValueAsType(value, numberValueTypes[key]); 2492 if (key.startsWith("origin")) { 2493 // If this is a transform origin, flag and enable further transform-origin processing 2494 hasTransformOrigin = true; 2495 transformOrigin[key] = 2496 valueAsType; 2497 } 2498 else { 2499 style[key] = valueAsType; 2500 } 2501 } 2502 } 2503 if (!latestValues.transform) { 2504 if (hasTransform || transformTemplate) { 2505 style.transform = buildTransform(latestValues, state.transform, transformTemplate); 2506 } 2507 else if (style.transform) { 2508 /** 2509 * If we have previously created a transform but currently don't have any, 2510 * reset transform style to none. 2511 */ 2512 style.transform = "none"; 2513 } 2514 } 2515 /** 2516 * Build a transformOrigin style. Uses the same defaults as the browser for 2517 * undefined origins. 2518 */ 2519 if (hasTransformOrigin) { 2520 const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin; 2521 style.transformOrigin = `${originX} ${originY} ${originZ}`; 2522 } 2523} 2524 2525 2526//# sourceMappingURL=build-styles.mjs.map 2527 2528;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/svg/utils/path.mjs 2529const dashKeys = { 2530 offset: "stroke-dashoffset", 2531 array: "stroke-dasharray", 2532}; 2533const camelKeys = { 2534 offset: "strokeDashoffset", 2535 array: "strokeDasharray", 2536}; 2537/** 2538 * Build SVG path properties. Uses the path's measured length to convert 2539 * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset 2540 * and stroke-dasharray attributes. 2541 * 2542 * This function is mutative to reduce per-frame GC. 2543 * 2544 * Note: We use unitless values for stroke-dasharray and stroke-dashoffset 2545 * because Safari incorrectly scales px values when the page is zoomed. 2546 */ 2547function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) { 2548 // Normalise path length by setting SVG attribute pathLength to 1 2549 attrs.pathLength = 1; 2550 // We use dash case when setting attributes directly to the DOM node and camel case 2551 // when defining props on a React component.
2552 const keys = useDashCase ? dashKeys : camelKeys; 2553 // Build the dash offset (unitless to avoid Safari zoom bug) 2554 attrs[keys.offset] = `${-offset}`; 2555 // Build the dash array (unitless to avoid Safari zoom bug) 2556 attrs[keys.array] = `${length} ${spacing}`; 2557} 2558 2559 2560//# sourceMappingURL=path.mjs.map 2561 2562;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/svg/utils/build-attrs.mjs 2563 2564 2565 2566/** 2567 * CSS Motion Path properties that should remain as CSS styles on SVG elements. 2568 */ 2569const cssMotionPathProperties = [ 2570 "offsetDistance", 2571 "offsetPath", 2572 "offsetRotate", 2573 "offsetAnchor", 2574]; 2575/** 2576 * Build SVG visual attributes, like cx and style.transform 2577 */ 2578function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 2579// This is object creation, which we try to avoid per-frame. 2580...latest }, isSVGTag, transformTemplate, styleProp) { 2581 buildHTMLStyles(state, latest, transformTemplate); 2582 /** 2583 * For svg tags we just want to make sure viewBox is animatable and treat all the styles 2584 * as normal HTML tags. 2585 */ 2586 if (isSVGTag) { 2587 if (state.style.viewBox) { 2588 state.attrs.viewBox = state.style.viewBox; 2589 } 2590 return; 2591 } 2592 state.attrs = state.style; 2593 state.style = {}; 2594 const { attrs, style } = state; 2595 /** 2596 * However, we apply transforms as CSS transforms. 2597 * So if we detect a transform, transformOrigin we take it from attrs and copy it into style. 2598 */ 2599 if (attrs.transform) { 2600 style.transform = attrs.transform; 2601 delete attrs.transform; 2602 } 2603 if (style.transform || attrs.transformOrigin) { 2604 style.transformOrigin = attrs.transformOrigin ?? "50% 50%"; 2605 delete attrs.transformOrigin; 2606 } 2607 if (style.transform) { 2608 /** 2609 * SVG's element transform-origin uses its own median as a reference. 2610 * Therefore, transformBox becomes a fill-box 2611 */ 2612 style.transformBox = styleProp?.transformBox ?? "fill-box"; 2613 delete attrs.transformBox; 2614 } 2615 for (const key of cssMotionPathProperties) { 2616 if (attrs[key] !== undefined) { 2617 style[key] = attrs[key]; 2618 delete attrs[key]; 2619 } 2620 } 2621 // Render attrX/attrY/attrScale as attributes 2622 if (attrX !== undefined) 2623 attrs.x = attrX; 2624 if (attrY !== undefined) 2625 attrs.y = attrY; 2626 if (attrScale !== undefined) 2627 attrs.scale = attrScale; 2628 // Build SVG path if one has been defined 2629 if (pathLength !== undefined) { 2630 buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false); 2631 } 2632} 2633 2634 2635//# sourceMappingURL=build-attrs.mjs.map 2636 2637;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/svg/utils/camel-case-attrs.mjs 2638/** 2639 * A set of attribute names that are always read/written as camel case. 2640 */ 2641const camelCaseAttributes = new Set([ 2642 "baseFrequency", 2643 "diffuseConstant", 2644 "kernelMatrix", 2645 "kernelUnitLength", 2646 "keySplines", 2647 "keyTimes", 2648 "limitingConeAngle", 2649 "markerHeight", 2650 "markerWidth", 2651 "numOctaves", 2652 "targetX", 2653 "targetY", 2654 "surfaceScale", 2655 "specularConstant", 2656 "specularExponent", 2657 "stdDeviation", 2658 "tableValues", 2659 "viewBox", 2660 "gradientTransform", 2661 "pathLength", 2662 "startOffset", 2663 "textLength", 2664 "lengthAdjust", 2665]); 2666 2667 2668//# sourceMappingURL=camel-case-attrs.mjs.map 2669 2670;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/svg/utils/is-svg-tag.mjs 2671const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg"; 2672 2673 2674//# sourceMappingURL=is-svg-tag.mjs.map 2675 2676;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/html/utils/render.mjs 2677function renderHTML(element, { style, vars }, styleProp, projection) { 2678 const elementStyle = element.style; 2679 let key; 2680 for (key in style) { 2681 // CSSStyleDeclaration has [index: number]: string; in the types, so we use that as key type. 2682 elementStyle[key] = style[key]; 2683 } 2684 // Write projection styles directly to element style 2685 projection?.applyProjectionStyles(elementStyle, styleProp); 2686 for (key in vars) { 2687 // Loop over any CSS variables and assign those. 2688 // They can only be assigned using `setProperty`. 2689 elementStyle.setProperty(key, vars[key]); 2690 } 2691} 2692 2693 2694//# sourceMappingURL=render.mjs.map 2695 2696;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/svg/utils/render.mjs 2697 2698 2699 2700
2701function renderSVG(element, renderState, _styleProp, projection) { 2702 renderHTML(element, renderState, undefined, projection); 2703 for (const key in renderState.attrs) { 2704 element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]); 2705 } 2706} 2707 2708 2709//# sourceMappingURL=render.mjs.map 2710 2711;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/styles/scale-border-radius.mjs 2712 2713 2714function pixelsToPercent(pixels, axis) { 2715 if (axis.max === axis.min) 2716 return 0; 2717 return (pixels / (axis.max - axis.min)) * 100; 2718} 2719/** 2720 * We always correct borderRadius as a percentage rather than pixels to reduce paints. 2721 * For example, if you are projecting a box that is 100px wide with a 10px borderRadius 2722 * into a box that is 200px wide with a 20px borderRadius, that is actually a 10% 2723 * borderRadius in both states. If we animate between the two in pixels that will trigger 2724 * a paint each time. If we animate between the two in percentage we'll avoid a paint. 2725 */ 2726const correctBorderRadius = { 2727 correct: (latest, node) => { 2728 if (!node.target) 2729 return latest; 2730 /** 2731 * If latest is a string, if it's a percentage we can return immediately as it's 2732 * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number. 2733 */ 2734 if (typeof latest === "string") { 2735 if (units.px.test(latest)) { 2736 latest = parseFloat(latest); 2737 } 2738 else { 2739 return latest; 2740 } 2741 } 2742 /** 2743 * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that 2744 * pixel value as a percentage of each axis 2745 */ 2746 const x = pixelsToPercent(latest, node.target.x); 2747 const y = pixelsToPercent(latest, node.target.y); 2748 return `${x}% ${y}%`; 2749 }, 2750}; 2751 2752 2753//# sourceMappingURL=scale-border-radius.mjs.map 2754 2755// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/mix/number.mjs 2756var number = __webpack_require__(33811); 2757;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/styles/scale-box-shadow.mjs 2758 2759 2760 2761const correctBoxShadow = { 2762 correct: (latest, { treeScale, projectionDelta }) => { 2763 const original = latest; 2764 const shadow = complex/* complex */.P.parse(latest); 2765 // TODO: Doesn't support multiple shadows 2766 if (shadow.length > 5) 2767 return original; 2768 const template = complex/* complex */.P.createTransformer(latest); 2769 const offset = typeof shadow[0] !== "number" ? 1 : 0; 2770 // Calculate the overall context scale 2771 const xScale = projectionDelta.x.scale * treeScale.x; 2772 const yScale = projectionDelta.y.scale * treeScale.y; 2773 shadow[0 + offset] /= xScale; 2774 shadow[1 + offset] /= yScale; 2775 /** 2776 * Ideally we'd correct x and y scales individually, but because blur and 2777 * spread apply to both we have to take a scale average and apply that instead. 2778 * We could potentially improve the outcome of this by incorporating the ratio between 2779 * the two scales. 2780 */ 2781 const averageScale = (0,number/* mixNumber */.t)(xScale, yScale, 0.5); 2782 // Blur 2783 if (typeof shadow[2 + offset] === "number") 2784 shadow[2 + offset] /= averageScale; 2785 // Spread 2786 if (typeof shadow[3 + offset] === "number") 2787 shadow[3 + offset] /= averageScale; 2788 return template(shadow); 2789 }, 2790}; 2791 2792 2793//# sourceMappingURL=scale-box-shadow.mjs.map 2794 2795;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/styles/scale-correction.mjs 2796 2797 2798 2799 2800const scaleCorrectors = { 2801 borderRadius: { 2802 ...correctBorderRadius, 2803 applyTo: [ 2804 "borderTopLeftRadius", 2805 "borderTopRightRadius", 2806 "borderBottomLeftRadius", 2807 "borderBottomRightRadius", 2808 ], 2809 }, 2810 borderTopLeftRadius: correctBorderRadius, 2811 borderTopRightRadius: correctBorderRadius, 2812 borderBottomLeftRadius: correctBorderRadius, 2813 borderBottomRightRadius: correctBorderRadius, 2814 boxShadow: correctBoxShadow, 2815}; 2816function addScaleCorrector(correctors) { 2817 for (const key in correctors) { 2818 scaleCorrectors[key] = correctors[key]; 2819 if (isCSSVariableName(key)) { 2820 scaleCorrectors[key].isCSSVariable = true; 2821 } 2822 } 2823} 2824 2825 2826//# sourceMappingURL=scale-correction.mjs.map 2827 2828;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/is-forced-motion-value.mjs 2829 2830 2831 2832 2833function isForcedMotionValue(key, { layout, layoutId }) { 2834 return (transformProps.has(key) || 2835 key.startsWith("origin") || 2836 ((layout || layoutId !== undefined) && 2837 (!!scaleCorrectors[key] || key === "opacity"))); 2838} 2839 2840 2841//# sourceMappingURL=is-forced-motion-value.mjs.map 2842 2843;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/html/utils/scrape-motion-values.mjs 2844 2845 2846 2847function scrapeMotionValuesFromProps(props, prevProps, visualElement) { 2848 const style = props.style; 2849 const prevStyle = prevProps?.style; 2850 const newValues = {}; 2851 if (!style) 2852 return newValues; 2853 for (const key in style) { 2854 if ((0,is_motion_value/* isMotionValue */.i)(style[key]) || 2855 (prevStyle && (0,is_motion_value/* isMotionValue */.i)(prevStyle[key])) || 2856 isForcedMotionValue(key, props) || 2857 visualElement?.getValue(key)?.liveStyle !== undefined) { 2858 newValues[key] = style[key]; 2859 } 2860 } 2861 return newValues; 2862} 2863 2864
vendor: 6,592 bytes, lines 2865-3068
2865//# sourceMappingURL=scrape-motion-values.mjs.map 2866 2867;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/svg/utils/scrape-motion-values.mjs 2868 2869 2870 2871 2872function scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps, visualElement) { 2873 const newValues = scrapeMotionValuesFromProps(props, prevProps, visualElement); 2874 for (const key in props) { 2875 if ((0,is_motion_value/* isMotionValue */.i)(props[key]) || 2876 (0,is_motion_value/* isMotionValue */.i)(prevProps[key])) { 2877 const targetKey = transformPropOrder.indexOf(key) !== -1 2878 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1) 2879 : key; 2880 newValues[targetKey] = props[key]; 2881 } 2882 } 2883 return newValues; 2884} 2885 2886 2887//# sourceMappingURL=scrape-motion-values.mjs.map 2888 2889;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/svg/SVGVisualElement.mjs 2890 2891 2892 2893 2894 2895 2896 2897 2898 2899 2900 2901class SVGVisualElement extends DOMVisualElement { 2902 constructor() { 2903 super(...arguments); 2904 this.type = "svg"; 2905 this.isSVGTag = false; 2906 this.measureInstanceViewportBox = createBox; 2907 } 2908 getBaseTargetFromProps(props, key) { 2909 return props[key]; 2910 } 2911 readValueFromInstance(instance, key) { 2912 if (transformProps.has(key)) { 2913 const defaultType = getDefaultValueType(key); 2914 return defaultType ? defaultType.default || 0 : 0; 2915 } 2916 key = !camelCaseAttributes.has(key) ? camelToDash(key) : key; 2917 return instance.getAttribute(key); 2918 } 2919 scrapeMotionValuesFromProps(props, prevProps, visualElement) { 2920 return scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps, visualElement); 2921 } 2922 build(renderState, latestValues, props) { 2923 buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate, props.style); 2924 } 2925 renderInstance(instance, renderState, styleProp, projection) { 2926 renderSVG(instance, renderState, styleProp, projection); 2927 } 2928 mount(instance) { 2929 this.isSVGTag = isSVGTag(instance.tagName); 2930 super.mount(instance); 2931 } 2932} 2933 2934 2935//# sourceMappingURL=SVGVisualElement.mjs.map 2936 2937;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/geometry/conversion.mjs 2938/** 2939 * Bounding boxes tend to be defined as top, left, right, bottom. For various operations 2940 * it's easier to consider each axis individually. This function returns a bounding box 2941 * as a map of single-axis min/max values. 2942 */ 2943function convertBoundingBoxToBox({ top, left, right, bottom, }) { 2944 return { 2945 x: { min: left, max: right }, 2946 y: { min: top, max: bottom }, 2947 }; 2948} 2949function convertBoxToBoundingBox({ x, y }) { 2950 return { top: y.min, right: x.max, bottom: y.max, left: x.min }; 2951} 2952/** 2953 * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function 2954 * provided by Framer to allow measured points to be corrected for device scaling. This is used 2955 * when measuring DOM elements and DOM event points. 2956 */ 2957function transformBoxPoints(point, transformPoint) { 2958 if (!transformPoint) 2959 return point; 2960 const topLeft = transformPoint({ x: point.left, y: point.top }); 2961 const bottomRight = transformPoint({ x: point.right, y: point.bottom }); 2962 return { 2963 top: topLeft.y, 2964 left: topLeft.x, 2965 bottom: bottomRight.y, 2966 right: bottomRight.x, 2967 }; 2968} 2969 2970 2971//# sourceMappingURL=conversion.mjs.map 2972 2973;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/utils/has-transform.mjs 2974function isIdentityScale(scale) { 2975 return scale === undefined || scale === 1; 2976} 2977function hasScale({ scale, scaleX, scaleY }) { 2978 return (!isIdentityScale(scale) || 2979 !isIdentityScale(scaleX) || 2980 !isIdentityScale(scaleY)); 2981} 2982function hasTransform(values) { 2983 return (hasScale(values) || 2984 has2DTranslate(values) || 2985 values.z || 2986 values.rotate || 2987 values.rotateX || 2988 values.rotateY || 2989 values.skewX || 2990 values.skewY); 2991} 2992function has2DTranslate(values) { 2993 return is2DTranslate(values.x) || is2DTranslate(values.y); 2994} 2995function is2DTranslate(value) { 2996 return value && value !== "0%"; 2997} 2998 2999 3000//# sourceMappingURL=has-transform.mjs.map 3001 3002;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/geometry/delta-apply.mjs 3003 3004 3005 3006/** 3007 * Scales a point based on a factor and an originPoint 3008 */ 3009function scalePoint(point, scale, originPoint) { 3010 const distanceFromOrigin = point - originPoint; 3011 const scaled = scale * distanceFromOrigin; 3012 return originPoint + scaled; 3013} 3014/** 3015 * Applies a translate/scale delta to a point 3016 */ 3017function applyPointDelta(point, translate, scale, originPoint, boxScale) { 3018 if (boxScale !== undefined) { 3019 point = scalePoint(point, boxScale, originPoint); 3020 } 3021 return scalePoint(point, scale, originPoint) + translate; 3022} 3023/** 3024 * Applies a translate/scale delta to an axis 3025 */ 3026function applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) { 3027 axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale); 3028 axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale); 3029} 3030/** 3031 * Applies a translate/scale delta to a box 3032 */ 3033function applyBoxDelta(box, { x, y }) { 3034 applyAxisDelta(box.x, x.translate, x.scale, x.originPoint); 3035 applyAxisDelta(box.y, y.translate, y.scale, y.originPoint); 3036} 3037const TREE_SCALE_SNAP_MIN = 0.999999999999; 3038const TREE_SCALE_SNAP_MAX = 1.0000000000001; 3039/** 3040 * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms 3041 * in a tree upon our box before then calculating how to project it into our desired viewport-relative box 3042 * 3043 * This is the final nested loop within updateLayoutDelta for future refactoring 3044 */ 3045function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) { 3046 const treeLength = treePath.length; 3047 if (!treeLength) 3048 return; 3049 // Reset the treeScale 3050 treeScale.x = treeScale.y = 1; 3051 let node; 3052 let delta; 3053 for (let i = 0; i < treeLength; i++) { 3054 node = treePath[i]; 3055 delta = node.projectionDelta; 3056 /** 3057 * TODO: Prefer to remove this, but currently we have motion components with 3058 * display: contents in Framer. 3059 */ 3060 const { visualElement } = node.options; 3061 if (visualElement && 3062 visualElement.props.style && 3063 visualElement.props.style.display === "contents") { 3064 continue; 3065 } 3066 if (isSharedTransition && 3067 node.options.layoutScroll && 3068 node.scroll &&
vendor: 5,195 bytes, lines 3069-3234
3069 node !== node.root) { 3070 translateAxis(box.x, -node.scroll.offset.x); 3071 translateAxis(box.y, -node.scroll.offset.y); 3072 } 3073 if (delta) { 3074 // Incoporate each ancestor's scale into a cumulative treeScale for this component 3075 treeScale.x *= delta.x.scale; 3076 treeScale.y *= delta.y.scale; 3077 // Apply each ancestor's calculated delta into this component's recorded layout box 3078 applyBoxDelta(box, delta); 3079 } 3080 if (isSharedTransition && hasTransform(node.latestValues)) { 3081 transformBox(box, node.latestValues, node.layout?.layoutBox); 3082 } 3083 } 3084 /** 3085 * Snap tree scale back to 1 if it's within a non-perceivable threshold. 3086 * This will help reduce useless scales getting rendered. 3087 */ 3088 if (treeScale.x < TREE_SCALE_SNAP_MAX && 3089 treeScale.x > TREE_SCALE_SNAP_MIN) { 3090 treeScale.x = 1.0; 3091 } 3092 if (treeScale.y < TREE_SCALE_SNAP_MAX && 3093 treeScale.y > TREE_SCALE_SNAP_MIN) { 3094 treeScale.y = 1.0; 3095 } 3096} 3097function translateAxis(axis, distance) { 3098 axis.min += distance; 3099 axis.max += distance; 3100} 3101/** 3102 * Apply a transform to an axis from the latest resolved motion values. 3103 * This function basically acts as a bridge between a flat motion value map 3104 * and applyAxisDelta 3105 */ 3106function transformAxis(axis, axisTranslate, axisScale, boxScale, axisOrigin = 0.5) { 3107 const originPoint = (0,number/* mixNumber */.t)(axis.min, axis.max, axisOrigin); 3108 // Apply the axis delta to the final axis 3109 applyAxisDelta(axis, axisTranslate, axisScale, originPoint, boxScale); 3110} 3111function resolveAxisTranslate(value, axis) { 3112 if (typeof value === "string") { 3113 return (parseFloat(value) / 100) * (axis.max - axis.min); 3114 } 3115 return value; 3116} 3117/** 3118 * Apply a transform to a box from the latest resolved motion values. 3119 */ 3120function transformBox(box, transform, sourceBox) { 3121 const resolveBox = sourceBox ?? box; 3122 transformAxis(box.x, resolveAxisTranslate(transform.x, resolveBox.x), transform.scaleX, transform.scale, transform.originX); 3123 transformAxis(box.y, resolveAxisTranslate(transform.y, resolveBox.y), transform.scaleY, transform.scale, transform.originY); 3124} 3125 3126 3127//# sourceMappingURL=delta-apply.mjs.map 3128 3129;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/utils/measure.mjs 3130 3131 3132 3133function measureViewportBox(instance, transformPoint) { 3134 return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint)); 3135} 3136function measurePageBox(element, rootProjectionNode, transformPagePoint) { 3137 const viewportBox = measureViewportBox(element, transformPagePoint); 3138 const { scroll } = rootProjectionNode; 3139 if (scroll) { 3140 translateAxis(viewportBox.x, scroll.offset.x); 3141 translateAxis(viewportBox.y, scroll.offset.y); 3142 } 3143 return viewportBox; 3144} 3145 3146 3147//# sourceMappingURL=measure.mjs.map 3148 3149;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/html/HTMLVisualElement.mjs 3150 3151 3152 3153 3154 3155 3156 3157 3158 3159function HTMLVisualElement_getComputedStyle(element) { 3160 return window.getComputedStyle(element); 3161} 3162class HTMLVisualElement extends DOMVisualElement { 3163 constructor() { 3164 super(...arguments); 3165 this.type = "html"; 3166 this.renderInstance = renderHTML; 3167 } 3168 readValueFromInstance(instance, key) { 3169 if (transformProps.has(key)) { 3170 return this.projection?.isProjecting 3171 ? defaultTransformValue(key) 3172 : readTransformValue(instance, key); 3173 } 3174 else { 3175 const computedStyle = HTMLVisualElement_getComputedStyle(instance); 3176 const value = ((0,is_css_variable/* isCSSVariableName */.f9)(key) 3177 ? computedStyle.getPropertyValue(key) 3178 : computedStyle[key]) || 0; 3179 return typeof value === "string" ? value.trim() : value; 3180 } 3181 } 3182 measureInstanceViewportBox(instance, { transformPagePoint }) { 3183 return measureViewportBox(instance, transformPagePoint); 3184 } 3185 build(renderState, latestValues, props) { 3186 buildHTMLStyles(renderState, latestValues, props.transformTemplate); 3187 } 3188 scrapeMotionValuesFromProps(props, prevProps, visualElement) { 3189 return scrapeMotionValuesFromProps(props, prevProps, visualElement); 3190 } 3191} 3192 3193 3194//# sourceMappingURL=HTMLVisualElement.mjs.map 3195 3196// EXTERNAL MODULE: ./node_modules/next/dist/compiled/react/index.js 3197var react = __webpack_require__(2265); 3198;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs 3199/** 3200 * We keep these listed separately as we use the lowercase tag names as part 3201 * of the runtime bundle to detect SVG components 3202 */ 3203const lowercaseSVGElements = [ 3204 "animate", 3205 "circle", 3206 "defs", 3207 "desc", 3208 "ellipse", 3209 "g", 3210 "image", 3211 "line", 3212 "filter", 3213 "marker", 3214 "mask", 3215 "metadata", 3216 "path", 3217 "pattern", 3218 "polygon", 3219 "polyline", 3220 "rect", 3221 "stop", 3222 "switch", 3223 "symbol", 3224 "svg", 3225 "text", 3226 "tspan", 3227 "use", 3228 "view", 3229]; 3230 3231 3232//# sourceMappingURL=lowercase-elements.mjs.map 3233 3234;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/ut
3234ils/is-svg-component.mjs 3235 3236 3237function isSVGComponent(Component) { 3238 if ( 3239 /** 3240 * If it's not a string, it's a custom React component. Currently we only support 3241 * HTML custom React components. 3242 */ 3243 typeof Component !== "string" || 3244 /** 3245 * If it contains a dash, the element is a custom HTML webcomponent. 3246 */ 3247 Component.includes("-")) { 3248 return false; 3249 } 3250 else if ( 3251 /** 3252 * If it's in our list of lowercase SVG tags, it's an SVG component 3253 */ 3254 lowercaseSVGElements.indexOf(Component) > -1 || 3255 /** 3256 * If it contains a capital letter, it's an SVG component 3257 */ 3258 /[A-Z]/u.test(Component)) { 3259 return true; 3260 } 3261 return false; 3262} 3263 3264 3265//# sourceMappingURL=is-svg-component.mjs.map 3266 3267;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs 3268 3269 3270 3271 3272const createDomVisualElement = (Component, options) => { 3273 /** 3274 * Use explicit isSVG override if provided, otherwise auto-detect 3275 */ 3276 const isSVG = options.isSVG ?? isSVGComponent(Component); 3277 return isSVG 3278 ? new SVGVisualElement(options) 3279 : new HTMLVisualElement(options, { 3280 allowProjection: Component !== react.Fragment, 3281 }); 3282}; 3283 3284 3285//# sourceMappingURL=create-visual-element.mjs.map 3286 3287// EXTERNAL MODULE: ./node_modules/next/dist/compiled/react/jsx-runtime.js 3288var jsx_runtime = __webpack_require__(57437); 3289// EXTERNAL MODULE: ./node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs 3290var LayoutGroupContext = __webpack_require__(58881); 3291;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/LazyContext.mjs 3292/* __next_internal_client_entry_do_not_use__ LazyContext auto */ 3293const LazyContext = /*#__PURE__*/ (0,react.createContext)({ 3294 strict: false 3295}); 3296 //# sourceMappingURL=LazyContext.mjs.map 3297 3298// EXTERNAL MODULE: ./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs 3299var MotionConfigContext = __webpack_require__(45750); 3300;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/index.mjs 3301/* __next_internal_client_entry_do_not_use__ MotionContext auto */ 3302const MotionContext = /* @__PURE__ */ /*#__PURE__*/ (0,react.createContext)({}); 3303 //# sourceMappingURL=index.mjs.map 3304 3305;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs 3306 3307 3308function getCurrentTreeVariants(props, context) { 3309 if (isControllingVariants(props)) { 3310 const { initial, animate } = props; 3311 return { 3312 initial: initial === false || isVariantLabel(initial) 3313 ? initial 3314 : undefined, 3315 animate: isVariantLabel(animate) ? animate : undefined, 3316 }; 3317 } 3318 return props.inherit !== false ? context : {}; 3319} 3320 3321 3322//# sourceMappingURL=utils.mjs.map 3323 3324;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/create.mjs 3325/* __next_internal_client_entry_do_not_use__ useCreateMotionContext auto */ 3326 3327 3328function useCreateMotionContext(props) { 3329 const { initial, animate } = getCurrentTreeVariants(props, (0,react.useContext)(MotionContext)); 3330 return (0,react.useMemo)(()=>({ 3331 initial, 3332 animate 3333 }), [ 3334 variantLabelsAsDependency(initial), 3335 variantLabelsAsDependency(animate) 3336 ]); 3337} 3338function variantLabelsAsDependency(prop) { 3339 return Array.isArray(prop) ? prop.join(" ") : prop; 3340} 3341 //# sourceMappingURL=create.mjs.map 3342 3343;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs 3344const createHtmlRenderState = () => ({ 3345 style: {}, 3346 transform: {}, 3347 transformOrigin: {}, 3348 vars: {}, 3349}); 3350 3351 3352//# sourceMappingURL=create-render-state.mjs.map 3353 3354;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/use-props.mjs 3355/* __next_internal_client_entry_do_not_use__ copyRawValuesOnly,useHTMLProps auto */ 3356 3357 3358function copyRawValuesOnly(target, source, props) { 3359 for(const key in source){ 3360 if (!(0,is_motion_value/* isMotionValue */.i)(source[key]) && !isForcedMotionValue(key, props)) { 3361 target[key] = source[key]; 3362 } 3363 } 3364} 3365function useInitialMotionValues(param, visualState) { 3366 let { transformTemplate } = param; 3367 return (0,react.useMemo)(()=>{ 3368 const state = createHtmlRenderState(); 3369 buildHTMLStyles(state, visualState, transformTemplate); 3370 return Object.assign({}, state.vars, state.style); 3371 }, [ 3372 visualState 3373 ]); 3374} 3375function useStyle(props, visualState) { 3376 const styleProp = props.style || {}; 3377 const style = {}; 3378 /** 3379 * Copy non-Motion Values straight into style 3380 */ copyRawValuesOnly(style, styleProp, props);
3381 Object.assign(style, useInitialMotionValues(props, visualState)); 3382 return style; 3383} 3384function useHTMLProps(props, visualState) { 3385 // The `any` isn't ideal but it is the type of createElement props argument 3386 const htmlProps = {}; 3387 const style = useStyle(props, visualState); 3388 if (props.drag && props.dragListener !== false) { 3389 // Disable the ghost element when a user drags 3390 htmlProps.draggable = false; 3391 // Disable text selection 3392 style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout = "none"; 3393 // Disable scrolling on the draggable direction 3394 style.touchAction = props.drag === true ? "none" : "pan-".concat(props.drag === "x" ? "y" : "x"); 3395 } 3396 if (props.tabIndex === undefined && (props.onTap || props.onTapStart || props.whileTap)) { 3397 htmlProps.tabIndex = 0; 3398 } 3399 htmlProps.style = style; 3400 return htmlProps; 3401} 3402 //# sourceMappingURL=use-props.mjs.map 3403 3404;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs 3405 3406 3407const createSvgRenderState = () => ({ 3408 ...createHtmlRenderState(), 3409 attrs: {}, 3410}); 3411 3412 3413//# sourceMappingURL=create-render-state.mjs.map 3414 3415;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/use-props.mjs 3416/* __next_internal_client_entry_do_not_use__ useSVGProps auto */ 3417 3418 3419 3420function useSVGProps(props, visualState, _isStatic, Component) { 3421 const visualProps = (0,react.useMemo)(()=>{ 3422 const state = createSvgRenderState(); 3423 buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style); 3424 return { 3425 ...state.attrs, 3426 style: { 3427 ...state.style 3428 } 3429 }; 3430 }, [ 3431 visualState 3432 ]); 3433 if (props.style) { 3434 const rawStyles = {}; 3435 copyRawValuesOnly(rawStyles, props.style, props); 3436 visualProps.style = { 3437 ...rawStyles, 3438 ...visualProps.style 3439 }; 3440 } 3441 return visualProps; 3442} 3443 //# sourceMappingURL=use-props.mjs.map 3444 3445;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs 3446/** 3447 * A list of all valid MotionProps. 3448 * 3449 * @privateRemarks 3450 * This doesn't throw if a `MotionProp` name is missing - it should. 3451 */ 3452const validMotionProps = new Set([ 3453 "animate", 3454 "exit", 3455 "variants", 3456 "initial", 3457 "style", 3458 "values", 3459 "variants", 3460 "transition", 3461 "transformTemplate", 3462 "custom", 3463 "inherit", 3464 "onBeforeLayoutMeasure", 3465 "onAnimationStart", 3466 "onAnimationComplete", 3467 "onUpdate", 3468 "onDragStart", 3469 "onDrag", 3470 "onDragEnd", 3471 "onMeasureDragConstraints", 3472 "onDirectionLock", 3473 "onDragTransitionEnd", 3474 "_dragX", 3475 "_dragY", 3476 "onHoverStart", 3477 "onHoverEnd", 3478 "onViewportEnter", 3479 "onViewportLeave", 3480 "globalTapTarget", 3481 "propagate", 3482 "ignoreStrict", 3483 "viewport", 3484]); 3485/** 3486 * Check whether a prop name is a valid `MotionProp` key. 3487 * 3488 * @param key - Name of the property to check 3489 * @returns `true` is key is a valid `MotionProp`. 3490 * 3491 * @public 3492 */ 3493function isValidMotionProp(key) { 3494 return (key.startsWith("while") || 3495 (key.startsWith("drag") && key !== "draggable") || 3496 key.startsWith("layout") || 3497 key.startsWith("onTap") || 3498 key.startsWith("onPan") || 3499 key.startsWith("onLayout") || 3500 validMotionProps.has(key)); 3501} 3502 3503 3504//# sourceMappingURL=valid-prop.mjs.map 3505 3506;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs 3507 3508 3509 3510let shouldForward = (key) => !isValidMotionProp(key); 3511function loadExternalIsValidProp(isValidProp) { 3512 if (typeof isValidProp !== "function") 3513 return; 3514 // Explicitly filter our events 3515 shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key); 3516} 3517/** 3518 * Emotion and Styled Components both allow users to pass through arbitrary props to their components 3519 * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which 3520 * of these should be passed to the underlying DOM node. 3521 * 3522 * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props 3523 * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props 3524 * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of 3525 * `@emotion/is-prop-valid`, however to fix this problem we need to use it. 3526 * 3527 * By making it an optionalDependency we can offer this functionality only in the situations where it's 3528 * actually required. 3529 */ 3530try { 3531 /** 3532 * We attempt to import this package but require won't be defined in esm environments, in that case 3533 * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this
3533should probably be removed 3534 * in favour of explicit injection. 3535 * 3536 * String concatenation prevents bundlers like webpack (e.g. Storybook) 3537 * from statically resolving this optional dependency at build time. 3538 */ 3539 const emotionPkg = "@emotion/is-prop-" + "valid"; 3540 loadExternalIsValidProp(require(emotionPkg).default); 3541} 3542catch { 3543 // We don't need to actually do anything here - the fallback is the existing `isPropValid`. 3544} 3545function filterProps(props, isDom, forwardMotionProps) { 3546 const filteredProps = {}; 3547 for (const key in props) { 3548 /** 3549 * values is considered a valid prop by Emotion, so if it's present 3550 * this will be rendered out to the DOM unless explicitly filtered. 3551 * 3552 * We check the type as it could be used with the `feColorMatrix` 3553 * element, which we support. 3554 */ 3555 if (key === "values" && typeof props.values === "object") 3556 continue; 3557 if ((0,is_motion_value/* isMotionValue */.i)(props[key])) 3558 continue; 3559 if (shouldForward(key) || 3560 (forwardMotionProps === true && isValidMotionProp(key)) || 3561 (!isDom && !isValidMotionProp(key)) || 3562 // If trying to use native HTML drag events, forward drag listeners 3563 (props["draggable"] && 3564 key.startsWith("onDrag"))) { 3565 filteredProps[key] = 3566 props[key]; 3567 } 3568 } 3569 return filteredProps; 3570} 3571 3572 3573//# sourceMappingURL=filter-props.mjs.map 3574 3575;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/use-render.mjs 3576/* __next_internal_client_entry_do_not_use__ useRender auto */ 3577 3578 3579 3580 3581 3582function useRender(Component, props, ref, param, isStatic) { 3583 let { latestValues } = param, forwardMotionProps = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false, isSVG = arguments.length > 6 ? arguments[6] : void 0; 3584 const useVisualProps = (isSVG !== null && isSVG !== void 0 ? isSVG : isSVGComponent(Component)) ? useSVGProps : useHTMLProps; 3585 const visualProps = useVisualProps(props, latestValues, isStatic, Component); 3586 const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps); 3587 const elementProps = Component !== react.Fragment ? { 3588 ...filteredProps, 3589 ...visualProps, 3590 ref 3591 } : {}; 3592 /** 3593 * If component has been handed a motion value as its child, 3594 * memoise its initial value and render that. Subsequent updates 3595 * will be handled by the onChange handler 3596 */ const { children } = props; 3597 const renderedChildren = (0,react.useMemo)(()=>(0,is_motion_value/* isMotionValue */.i)(children) ? children.get() : children, [ 3598 children 3599 ]); 3600 return /*#__PURE__*/ (0,react.createElement)(Component, { 3601 ...elementProps, 3602 children: renderedChildren 3603 }); 3604} 3605 //# sourceMappingURL=use-render.mjs.map 3606 3607;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/utils/resolve-motion-value.mjs 3608 3609 3610/** 3611 * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself 3612 */ 3613function resolveMotionValue(value) { 3614 return (0,is_motion_value/* isMotionValue */.i)(value) ? value.get() : value; 3615} 3616 3617 3618//# sourceMappingURL=resolve-motion-value.mjs.map 3619 3620// EXTERNAL MODULE: ./node_modules/framer-motion/dist/es/context/PresenceContext.mjs 3621var PresenceContext = __webpack_require__(64252); 3622// EXTERNAL MODULE: ./node_modules/framer-motion/dist/es/utils/use-constant.mjs 3623var use_constant = __webpack_require__(53576); 3624;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs 3625/* __next_internal_client_entry_do_not_use__ makeUseVisualState auto */ 3626 3627 3628 3629 3630function makeState(param, props, context, presenceContext) { 3631 let { scrapeMotionValuesFromProps, createRenderState } = param; 3632 const state = { 3633 latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps), 3634 renderState: createRenderState() 3635 }; 3636 return state; 3637} 3638function makeLatestValues(props, context, presenceContext, scrapeMotionValues) { 3639 const values = {}; 3640 const motionValues = scrapeMotionValues(props, {}); 3641 for(const key in motionValues){ 3642 values[key] = resolveMotionValue(motionValues[key]); 3643 } 3644 let { initial, animate } = props; 3645 const isControllingVariants$1 = isControllingVariants(props); 3646 const isVariantNode$1 = isVariantNode(props); 3647 if (context && isVariantNode$1 && !isControllingVariants$1 && props.inherit !== false) {
3648 if (initial === undefined) initial = context.initial; 3649 if (animate === undefined) animate = context.animate; 3650 } 3651 let isInitialAnimationBlocked = presenceContext ? presenceContext.initial === false : false; 3652 isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false; 3653 const variantToSet = isInitialAnimationBlocked ? animate : initial; 3654 if (variantToSet && typeof variantToSet !== "boolean" && !isAnimationControls(variantToSet)) { 3655 const list = Array.isArray(variantToSet) ? variantToSet : [ 3656 variantToSet 3657 ]; 3658 for(let i = 0; i < list.length; i++){ 3659 const resolved = resolveVariantFromProps(props, list[i]); 3660 if (resolved) { 3661 const { transitionEnd, transition, ...target } = resolved; 3662 for(const key in target){ 3663 let valueTarget = target[key]; 3664 if (Array.isArray(valueTarget)) { 3665 /** 3666 * Take final keyframe if the initial animation is blocked because 3667 * we want to initialise at the end of that blocked animation. 3668 */ const index = isInitialAnimationBlocked ? valueTarget.length - 1 : 0; 3669 valueTarget = valueTarget[index]; 3670 } 3671 if (valueTarget !== null) { 3672 values[key] = valueTarget; 3673 } 3674 } 3675 for(const key in transitionEnd){ 3676 values[key] = transitionEnd[key]; 3677 } 3678 } 3679 } 3680 } 3681 return values; 3682} 3683const makeUseVisualState = (config)=>(props, isStatic)=>{ 3684 const context = (0,react.useContext)(MotionContext); 3685 const presenceContext = (0,react.useContext)(PresenceContext/* PresenceContext */.O); 3686 const make = ()=>makeState(config, props, context, presenceContext); 3687 return isStatic ? make() : (0,use_constant/* useConstant */.h)(make); 3688 }; 3689 //# sourceMappingURL=use-visual-state.mjs.map 3690 3691;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/use-html-visual-state.mjs 3692/* __next_internal_client_entry_do_not_use__ useHTMLVisualState auto */ 3693 3694 3695const useHTMLVisualState = /*@__PURE__*/ makeUseVisualState({ 3696 scrapeMotionValuesFromProps: scrapeMotionValuesFromProps, 3697 createRenderState: createHtmlRenderState 3698}); 3699 //# sourceMappingURL=use-html-visual-state.mjs.map 3700 3701;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/use-svg-visual-state.mjs 3702/* __next_internal_client_entry_do_not_use__ useSVGVisualState auto */ 3703 3704 3705const useSVGVisualState = /*@__PURE__*/ makeUseVisualState({ 3706 scrapeMotionValuesFromProps: scrape_motion_values_scrapeMotionValuesFromProps, 3707 createRenderState: createSvgRenderState 3708}); 3709 //# sourceMappingURL=use-svg-visual-state.mjs.map 3710 3711;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/definitions.mjs 3712 3713 3714const featureProps = { 3715 animation: [ 3716 "animate", 3717 "variants", 3718 "whileHover", 3719 "whileTap", 3720 "exit", 3721 "whileInView", 3722 "whileFocus", 3723 "whileDrag", 3724 ], 3725 exit: ["exit"], 3726 drag: ["drag", "dragControls"], 3727 focus: ["whileFocus"], 3728 hover: ["whileHover", "onHoverStart", "onHoverEnd"], 3729 tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"], 3730 pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"], 3731 inView: ["whileInView", "onViewportEnter", "onViewportLeave"], 3732 layout: ["layout", "layoutId"], 3733}; 3734let isInitialized = false; 3735/** 3736 * Initialize feature definitions with isEnabled checks. 3737 * This must be called before any motion components are rendered. 3738 */ 3739function initFeatureDefinitions() { 3740 if (isInitialized) 3741 return; 3742 const initialFeatureDefinitions = {}; 3743 for (const key in featureProps) { 3744 initialFeatureDefinitions[key] = { 3745 isEnabled: (props) => featureProps[key].some((name) => !!props[name]), 3746 }; 3747 } 3748 setFeatureDefinitions(initialFeatureDefinitions); 3749 isInitialized = true; 3750} 3751/** 3752 * Get the current feature definitions, initializing if needed. 3753 */ 3754function getInitializedFeatureDefinitions() { 3755 initFeatureDefinitions(); 3756 return getFeatureDefinitions(); 3757} 3758 3759 3760//# sourceMappingURL=definitions.mjs.map 3761 3762;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/load-features.mjs 3763 3764 3765 3766function loadFeatures(features) { 3767 const featureDefinitions = getInitializedFeatureDefinitions(); 3768 for (const key in features) { 3769 featureDefinitions[key] = { 3770 ...featureDefinitions[key], 3771 ...features[key], 3772 }; 3773 } 3774 setFeatureDefinitions(featureDefinitions); 3775} 3776 3777 3778//# sourceMappingURL=load-features.mjs.map 3779 3780;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/symbol.mjs 3781const motionComponentSymbol = Symbol.for("motionComponentSymbol"); 3782 3783 3784//# sourceMappingURL=symbol.mjs.map 3785 3786;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs 3787/* __next_internal_client_entry_do_not_use__ useMotionRef auto */ 3788/** 3789 * Creates a ref function that, when called, hydrates the provided 3790 * external ref and VisualElement. 3791 */ function useMotionRef(visualState, visualElement, externalRef) { 3792 /** 3793 * Store externalRef in a ref to avoid including it in the useCallback 3794 * dependency array. Including externalRef in dependencies causes issues 3795 * with libraries like Radix UI that create new callback refs on each render 3796 * when using asChild - this would cause the callback to be recreated,
3797 * triggering element remounts and breaking AnimatePresence exit animations. 3798 */ const externalRefContainer = (0,react.useRef)(externalRef); 3799 (0,react.useInsertionEffect)(()=>{ 3800 externalRefContainer.current = externalRef; 3801 }); 3802 // Store cleanup function returned by callback refs (React 19 feature) 3803 const refCleanup = (0,react.useRef)(null); 3804 return (0,react.useCallback)((instance)=>{ 3805 if (instance) { 3806 var _visualState_onMount; 3807 (_visualState_onMount = visualState.onMount) === null || _visualState_onMount === void 0 ? void 0 : _visualState_onMount.call(visualState, instance); 3808 } 3809 if (visualElement) { 3810 instance ? visualElement.mount(instance) : visualElement.unmount(); 3811 } 3812 const ref = externalRefContainer.current; 3813 if (typeof ref === "function") { 3814 if (instance) { 3815 const cleanup = ref(instance); 3816 if (typeof cleanup === "function") { 3817 refCleanup.current = cleanup; 3818 } 3819 } else if (refCleanup.current) { 3820 refCleanup.current(); 3821 refCleanup.current = null; 3822 } else { 3823 ref(instance); 3824 } 3825 } else if (ref) { 3826 ref.current = instance; 3827 } 3828 }, [ 3829 visualElement 3830 ]); 3831} 3832 //# sourceMappingURL=use-motion-ref.mjs.map 3833 3834;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/optimized-appear/data-id.mjs 3835 3836 3837const optimizedAppearDataId = "framerAppearId"; 3838const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId); 3839 3840 3841//# sourceMappingURL=data-id.mjs.map 3842 3843;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs 3844/* __next_internal_client_entry_do_not_use__ SwitchLayoutGroupContext auto */ 3845/** 3846 * Internal, exported only for usage in Framer 3847 */ const SwitchLayoutGroupContext = /*#__PURE__*/ (0,react.createContext)({}); 3848 //# sourceMappingURL=SwitchLayoutGroupContext.mjs.map 3849 3850;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-ref-object.mjs 3851function isRefObject(ref) { 3852 return (ref && 3853 typeof ref === "object" && 3854 Object.prototype.hasOwnProperty.call(ref, "current")); 3855} 3856 3857 3858//# sourceMappingURL=is-ref-object.mjs.map 3859 3860// EXTERNAL MODULE: ./node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs + 1 modules 3861var use_isomorphic_effect = __webpack_require__(12014); 3862;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs 3863/* __next_internal_client_entry_do_not_use__ useVisualElement auto */ 3864 3865 3866 3867 3868 3869 3870 3871 3872function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor, isSVG) { 3873 var _window_MotionHandoffIsComplete, _window, _window_MotionHasOptimisedAnimation, _window1; 3874 const { visualElement: parent } = (0,react.useContext)(MotionContext); 3875 const lazyContext = (0,react.useContext)(LazyContext); 3876 const presenceContext = (0,react.useContext)(PresenceContext/* PresenceContext */.O); 3877 const motionConfig = (0,react.useContext)(MotionConfigContext/* MotionConfigContext */._); 3878 const reducedMotionConfig = motionConfig.reducedMotion; 3879 const skipAnimations = motionConfig.skipAnimations; 3880 const visualElementRef = (0,react.useRef)(null); 3881 /** 3882 * Track whether the component has been through React's commit phase.
3883 * Used to detect when LazyMotion features load after the component has mounted. 3884 */ const hasMountedOnce = (0,react.useRef)(false); 3885 /** 3886 * If we haven't preloaded a renderer, check to see if we have one lazy-loaded 3887 */ createVisualElement = createVisualElement || lazyContext.renderer; 3888 if (!visualElementRef.current && createVisualElement) { 3889 visualElementRef.current = createVisualElement(Component, { 3890 visualState, 3891 parent, 3892 props, 3893 presenceContext, 3894 blockInitialAnimation: presenceContext ? presenceContext.initial === false : false, 3895 reducedMotionConfig, 3896 skipAnimations, 3897 isSVG 3898 }); 3899 /** 3900 * If the component has already mounted before features loaded (e.g. via 3901 * LazyMotion with async feature loading), we need to force the initial 3902 * animation to run. Otherwise state changes that occurred before features 3903 * loaded will be lost and the element will snap to its final state. 3904 */ if (hasMountedOnce.current && visualElementRef.current) { 3905 visualElementRef.current.manuallyAnimateOnMount = true; 3906 } 3907 } 3908 const visualElement = visualElementRef.current; 3909 /** 3910 * Load Motion gesture and animation features. These are rendered as renderless 3911 * components so each feature can optionally make use of React lifecycle methods. 3912 */ const initialLayoutGroupConfig = (0,react.useContext)(SwitchLayoutGroupContext); 3913 if (visualElement && !visualElement.projection && ProjectionNodeConstructor && (visualElement.type === "html" || visualElement.type === "svg")) { 3914 createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig); 3915 } 3916 const isMounted = (0,react.useRef)(false); 3917 (0,react.useInsertionEffect)(()=>{ 3918 /** 3919 * Check the component has already mounted before calling 3920 * `update` unnecessarily. This ensures we skip the initial update. 3921 */ if (visualElement && isMounted.current) { 3922 visualElement.update(props, presenceContext); 3923 } 3924 }); 3925 /** 3926 * Cache this value as we want to know whether HandoffAppearAnimations 3927 * was present on initial render - it will be deleted after this. 3928 */ const optimisedAppearId = props[optimizedAppearDataAttribute]; 3929 const wantsHandoff = (0,react.useRef)(Boolean(optimisedAppearId) && typeof window !== "undefined" && !((_window_MotionHandoffIsComplete = (_window = window).MotionHandoffIsComplete) === null || _window_MotionHandoffIsComplete === void 0 ? void 0 : _window_MotionHandoffIsComplete.call(_window, optimisedAppearId)) && ((_window_MotionHasOptimisedAnimation = (_window1 = window).MotionHasOptimisedAnimation) === null || _window_MotionHasOptimisedAnimation === void 0 ? void 0 : _window_MotionHasOptimisedAnimation.call(_window1, optimisedAppearId))); 3930 (0,use_isomorphic_effect/* useIsomorphicLayoutEffect */.L)(()=>{ 3931 /** 3932 * Track that this component has mounted. This is used to detect when 3933 * LazyMotion features load after the component has already committed. 3934 */ hasMountedOnce.current = true; 3935 if (!visualElement) return; 3936 isMounted.current = true; 3937 window.MotionIsMounted = true; 3938 visualElement.updateFeatures(); 3939 visualElement.scheduleRenderMicrotask(); 3940 /** 3941 * Ideally this function would always run in a useEffect. 3942 * 3943 * However, if we have optimised appear animations to handoff from, 3944 * it needs to happen synchronously to ensure there's no flash of 3945 * incorrect styles in the event of a hydration error. 3946 * 3947 * So if we detect a situtation where optimised appear animations 3948 * are running, we use useLayoutEffect to trigger animations. 3949 */ if (wantsHandoff.current && visualElement.animationState) { 3950 visualElement.animationState.animateChanges(); 3951 } 3952 }); 3953 (0,react.useEffect)(()=>{ 3954 if (!visualElement) return; 3955 if (!wantsHandoff.current && visualElement.animationState) { 3956 visualElement.animationState.animateChanges(); 3957 } 3958 if (wantsHandoff.current) { 3959 // This ensures all future calls to animateChanges() in this component will run in useEffect 3960 queueMicrotask(()=>{ 3961 var _window_MotionHandoffMarkAsComplete, _window; 3962 (_window_MotionHandoffMarkAsComplete = (_window = window).MotionHandoffMarkAsComplete) === null || _window_MotionHandoffMarkAsComplete === void 0 ? void 0 : _window_MotionHandoffMarkAsComplete.call(_window, optimisedAppearId); 3963 }); 3964 wantsHandoff.current = false;
3965 } 3966 /** 3967 * Now we've finished triggering animations for this element we 3968 * can wipe the enteringChildren set for the next render. 3969 */ visualElement.enteringChildren = undefined; 3970 }); 3971 return visualElement; 3972} 3973function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) { 3974 const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, layoutAnchor, layoutCrossfade } = props; 3975 visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? undefined : getClosestProjectingNode(visualElement.parent)); 3976 visualElement.projection.setOptions({ 3977 layoutId, 3978 layout, 3979 alwaysMeasureLayout: Boolean(drag) || dragConstraints && isRefObject(dragConstraints), 3980 visualElement, 3981 /** 3982 * TODO: Update options in an effect. This could be tricky as it'll be too late 3983 * to update by the time layout animations run. 3984 * We also need to fix this safeToRemove by linking it up to the one returned by usePresence, 3985 * ensuring it gets called if there's no potential layout animations. 3986 * 3987 */ animationType: typeof layout === "string" ? layout : "both", 3988 initialPromotionConfig, 3989 crossfade: layoutCrossfade, 3990 layoutScroll, 3991 layoutRoot, 3992 layoutAnchor 3993 }); 3994} 3995function getClosestProjectingNode(visualElement) { 3996 if (!visualElement) return undefined; 3997 return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent); 3998} 3999 //# sourceMappingURL=use-visual-element.mjs.map 4000 4001;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/index.mjs 4002/* __next_internal_client_entry_do_not_use__ createMotionComponent auto */ 4003 4004 4005 4006 4007 4008 4009 4010 4011 4012 4013 4014 4015 4016 4017 4018 4019/** 4020 * Create a `motion` component. 4021 * 4022 * This function accepts a Component argument, which can be either a string (ie "div" 4023 * for `motion.div`), or an actual React component. 4024 * 4025 * Alongside this is a config option which provides a way of rendering the provided 4026 * component "offline", or outside the React render cycle. 4027 */ function createMotionComponent(Component) { 4028 let { forwardMotionProps = false, type } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, preloadedFeatures = arguments.length > 2 ? arguments[2] : void 0, createVisualElement = arguments.length > 3 ? arguments[3] : void 0; 4029 preloadedFeatures && loadFeatures(preloadedFeatures); 4030 /** 4031 * Determine whether to use SVG or HTML rendering based on: 4032 * 1. Explicit `type` option (highest priority) 4033 * 2. Auto-detection via `isSVGComponent` 4034 */ const isSVG = type ? type === "svg" : isSVGComponent(Component); 4035 const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState; 4036 function MotionDOMComponent(props, externalRef) { 4037 /** 4038 * If we need to measure the element we load this functionality in a 4039 * separate class component in order to gain access to getSnapshotBeforeUpdate. 4040 */ let MeasureLayout; 4041 const configAndProps = { 4042 ...(0,react.useContext)(MotionConfigContext/* MotionConfigContext */._), 4043 ...props, 4044 layoutId: useLayoutId(props) 4045 }; 4046 const { isStatic } = configAndProps; 4047 const context = useCreateMotionContext(props); 4048 const visualState = useVisualState(props, isStatic); 4049 if (!isStatic && typeof window !== "undefined") { 4050 useStrictMode(configAndProps, preloadedFeatures); 4051 const layoutProjection = getProjectionFunctionality(configAndProps); 4052 MeasureLayout = layoutProjection.MeasureLayout; 4053 /** 4054 * Create a VisualElement for this component. A VisualElement provides a common 4055 * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as 4056 * providing a way of rendering to these APIs outside of the React render loop 4057 * for more performant animations and interactions 4058 */ context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode, isSVG); 4059 } 4060 /** 4061 * The mount order and hierarchy is specific to ensure our element ref 4062 * is hydrated by the time features fire their effects. 4063 */ return (0,jsx_runtime.jsxs)(MotionContext.Provider, { 4064 value: context, 4065 children: [ 4066 MeasureLayout && context.visualElement ? (0,jsx_runtime.jsx)(MeasureLayout, { 4067 visualElement: context.visualElement, 4068 ...configAndProps 4069 }) : null, 4070 useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps, isSVG) 4071 ] 4072 }); 4073 } 4074 var _Component_displayName, _ref; 4075 MotionDOMComponent.displayName = "motion.".concat(typeof Component === "string" ? Component : "create(".concat((_ref = (_Component_displayName = Component.displayName) !== null && _Component_displayName !== void 0 ? _Component_displayName : Component.name) !== null && _ref !== void 0 ? _ref : "", ")")); 4076 const ForwardRefMotionComponent = /*#__PURE__*/ (0,react.forwardRef)(MotionDOMComponent); 4077 ForwardRefMotionComponent[motionComponentSymbol] = Component; 4078 return ForwardRefMotionComponent; 4079} 4080function useLayoutId(param) { 4081 let { layoutId } = param; 4082 const layoutGroupId = (0,react.useContext)(LayoutGroupContext/* LayoutGroupContext */.p).id; 4083 return layoutGroupId && layoutId !== undefined ? layoutGroupId + "-" + layoutId : layoutId; 4084} 4085function useStrictMode(configAndProps, preloadedFeatures) { 4086 const isStrict = (0,react.useContext)(LazyContext).strict; 4087 /** 4088 * If we're in development mode, check to make sure we're not rendering a motion component 4089 * as a child of LazyMotion, as this will break the file-size benefits of using it. 4090 */ if (false) {} 4091} 4092function getProjectionFunctionality(props) { 4093 const featureDefinitions = getInitializedFeatureDefinitions(); 4094 const { drag, layout } = featureDefinitions; 4095 if (!drag && !layout) return {}; 4096 const combined = { 4097 ...drag, 4098 ...layout 4099 }; 4100 return { 4101 MeasureLayout: (drag === null || drag === void 0 ? void 0 : drag.isEnabled(props)) || (layout === null || layout === void 0 ? void 0 : layout.isEnabled(props)) ? combined.MeasureLayout : undefined, 4102 ProjectionNode: combined.ProjectionNode 4103 }; 4104} 4105 //# sourceMappingURL=index.mjs.map 4106 4107;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/components/create-proxy.mjs 4108 4109 4110 4111function createMotionProxy(preloadedFeatures, createVisualElement) { 4112 if (typeof Proxy === "undefined") { 4113 return createMotionComponent; 4114 } 4115 /** 4116 * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc. 4117 * Rather than generating them anew every render. 4118 */ 4119 const componentCache = new Map(); 4120 const factory = (Component, options) => { 4121 return createMotionComponent(Component, options, preloadedFeatures, createVisualElement); 4122 }; 4123 /** 4124 * Support for deprecated`motion(Component)` pattern 4125 */ 4126 const deprecatedFactoryFunction = (Component, options) => { 4127 if (false) {} 4128 return factory(Component, options); 4129 }; 4130 return new Proxy(deprecatedFactoryFunction, { 4131 /** 4132 * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
4133 * The prop name is passed through as `key` and we can use that to generate a `motion` 4134 * DOM component with that name. 4135 */ 4136 get: (_target, key) => { 4137 if (key === "create") 4138 return factory; 4139 /** 4140 * If this element doesn't exist in the component cache, create it and cache. 4141 */ 4142 if (!componentCache.has(key)) { 4143 componentCache.set(key, createMotionComponent(key, undefined, preloadedFeatures, createVisualElement)); 4144 } 4145 return componentCache.get(key); 4146 }, 4147 }); 4148} 4149 4150 4151//# sourceMappingURL=create-proxy.mjs.map 4152 4153;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/Feature.mjs 4154/** 4155 * Feature base class for extending VisualElement functionality. 4156 * Features are plugins that can be mounted/unmounted to add behavior 4157 * like gestures, animations, or layout tracking. 4158 */ 4159class Feature { 4160 constructor(node) { 4161 this.isMounted = false; 4162 this.node = node; 4163 } 4164 update() { } 4165} 4166 4167 4168//# sourceMappingURL=Feature.mjs.map 4169 4170;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/resolve-dynamic-variants.mjs 4171 4172 4173function resolveVariant(visualElement, definition, custom) { 4174 const props = visualElement.getProps(); 4175 return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement); 4176} 4177 4178 4179//# sourceMappingURL=resolve-dynamic-variants.mjs.map 4180 4181;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/utils/resolve-transition.mjs 4182/** 4183 * If `transition` has `inherit: true`, shallow-merge it with 4184 * `parentTransition` (child keys win) and strip the `inherit` key. 4185 * Otherwise return `transition` unchanged. 4186 */ 4187function resolveTransition(transition, parentTransition) { 4188 if (transition?.inherit && parentTransition) { 4189 const { inherit: _, ...rest } = transition; 4190 return { ...parentTransition, ...rest }; 4191 } 4192 return transition; 4193} 4194 4195 4196//# sourceMappingURL=resolve-transition.mjs.map 4197 4198;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/utils/get-value-transition.mjs 4199 4200 4201function getValueTransition(transition, key) { 4202 const valueTransition = transition?.[key] ?? 4203 transition?.["default"] ?? 4204 transition; 4205 if (valueTransition !== transition) { 4206 return resolveTransition(valueTransition, transition); 4207 } 4208 return valueTransition; 4209} 4210 4211 4212//# sourceMappingURL=get-value-transition.mjs.map 4213 4214;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/is-keyframes-target.mjs 4215const isKeyframesTarget = (v) => { 4216 return Array.isArray(v); 4217}; 4218 4219 4220//# sourceMappingURL=is-keyframes-target.mjs.map 4221 4222;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/setters.mjs 4223 4224 4225 4226 4227/** 4228 * Set VisualElement's MotionValue, creating a new MotionValue for it if 4229 * it doesn't exist. 4230 */ 4231function setMotionValue(visualElement, key, value) { 4232 if (visualElement.hasValue(key)) { 4233 visualElement.getValue(key).set(value); 4234 } 4235 else { 4236 visualElement.addValue(key, (0,es_value/* motionValue */.BX)(value)); 4237 } 4238} 4239function resolveFinalValueInKeyframes(v) { 4240 // TODO maybe throw if v.length - 1 is placeholder token? 4241 return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v; 4242} 4243function setTarget(visualElement, definition) { 4244 const resolved = resolveVariant(visualElement, definition); 4245 let { transitionEnd = {}, transition = {}, ...target } = resolved || {}; 4246 target = { ...target, ...transitionEnd }; 4247 for (const key in target) { 4248 const value = resolveFinalValueInKeyframes(target[key]); 4249 setMotionValue(visualElement, key, value); 4250 } 4251} 4252 4253 4254//# sourceMappingURL=setters.mjs.map 4255 4256// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/global-config.mjs 4257var global_config = __webpack_require__(21457); 4258;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/will-change/is.mjs 4259 4260 4261function isWillChangeMotionValue(value) { 4262 return Boolean((0,is_motion_value/* isMotionValue */.i)(value) && value.add); 4263} 4264 4265 4266//# sourceMappingURL=is.mjs.map 4267 4268;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/will-change/add-will-change.mjs 4269 4270 4271 4272function addValueToWillChange(visualElement, key) { 4273 const willChange = visualElement.getValue("willChange"); 4274 /** 4275 * It could be that a user has set willChange to a regular MotionValue, 4276 * in which case we can't add the value to it. 4277 */ 4278 if (isWillChangeMotionValue(willChange)) { 4279 return willChange.add(key); 4280 } 4281 else if (!willChange && global_config/* MotionGlobalConfig */.c.WillChange) { 4282 const newWillChange = new global_config/* MotionGlobalConfig */.c.WillChange("auto"); 4283 visualElement.addValue("willChange", newWillChange); 4284 newWillChange.add(key); 4285 } 4286} 4287 4288 4289//# sourceMappingURL=add-will-change.mjs.map 4290 4291;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/optimized-appear/get-appear-id.mjs 4292 4293 4294function getOptimisedAppearId(visualElement) { 4295 return visualElement.props[optimizedAppearDataAttribute]; 4296} 4297 4298 4299//# sourceMappingURL=get-appear-id.mjs.map 4300 4301// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/JSAnimation.mjs + 1 modules 4302var JSAnimation = __webpack_require__(28441); 4303// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/clamp.mjs 4304var clamp = __webpack_require__(21865); 4305// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/utils/replace-transition-type.mjs 4306var replace_transition_type = __webpack_require__(98133); 4307// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/easing/anticipate.mjs 4308var anticipate = __webpack_require__(43273); 4309// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/easing/back.mjs 4310var back = __webpack_require__(75567); 4311// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/easing/circ.mjs 4312var circ = __webpack_require__(52927); 4313;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/utils/unsupported-easing.mjs 4314 4315 4316const unsupportedEasingFunctions = { 4317 anticipate: anticipate/* anticipate */.L,
4318 backInOut: back/* backInOut */.XL, 4319 circInOut: circ/* circInOut */.X7, 4320}; 4321function isUnsupportedEase(key) { 4322 return key in unsupportedEasingFunctions; 4323} 4324function replaceStringEasing(transition) { 4325 if (typeof transition.ease === "string" && 4326 isUnsupportedEase(transition.ease)) { 4327 transition.ease = unsupportedEasingFunctions[transition.ease]; 4328 } 4329} 4330 4331 4332//# sourceMappingURL=unsupported-easing.mjs.map 4333 4334;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/NativeAnimationExtended.mjs 4335 4336 4337 4338 4339 4340 4341 4342 4343/** 4344 * 10ms is chosen here as it strikes a balance between smooth 4345 * results (more than one keyframe per frame at 60fps) and 4346 * keyframe quantity. 4347 */ 4348const sampleDelta = 10; //ms 4349class NativeAnimationExtended extends NativeAnimation { 4350 constructor(options) { 4351 /** 4352 * The base NativeAnimation function only supports a subset 4353 * of Motion easings, and WAAPI also only supports some 4354 * easing functions via string/cubic-bezier definitions. 4355 * 4356 * This function replaces those unsupported easing functions 4357 * with a JS easing function. This will later get compiled 4358 * to a linear() easing function. 4359 */ 4360 replaceStringEasing(options); 4361 /** 4362 * Ensure we replace the transition type with a generator function 4363 * before passing to WAAPI. 4364 * 4365 * TODO: Does this have a better home? It could be shared with 4366 * JSAnimation. 4367 */ 4368 (0,replace_transition_type/* replaceTransitionType */.f)(options); 4369 super(options); 4370 /** 4371 * Only set startTime when the animation should autoplay. 4372 * Setting startTime on a paused WAAPI animation unpauses it 4373 * (per the WAAPI spec), which breaks autoplay: false. 4374 */ 4375 if (options.startTime !== undefined && options.autoplay !== false) { 4376 this.startTime = options.startTime; 4377 } 4378 this.options = options; 4379 } 4380 /** 4381 * WAAPI doesn't natively have any interruption capabilities. 4382 * 4383 * Rather than read committed styles back out of the DOM, we can 4384 * create a renderless JS animation and sample it twice to calculate 4385 * its current value, "previous" value, and therefore allow 4386 * Motion to calculate velocity for any subsequent animation. 4387 */ 4388 updateMotionValue(value) { 4389 const { motionValue, onUpdate, onComplete, element, ...options } = this.options; 4390 if (!motionValue) 4391 return; 4392 if (value !== undefined) { 4393 motionValue.set(value); 4394 return; 4395 } 4396 const sampleAnimation = new JSAnimation/* JSAnimation */.L({ 4397 ...options, 4398 autoplay: false, 4399 }); 4400 /** 4401 * Use wall-clock elapsed time for sampling. 4402 * Under CPU load, WAAPI's currentTime may not reflect actual 4403 * elapsed time, causing incorrect sampling and visual jumps. 4404 */ 4405 const sampleTime = Math.max(sampleDelta, sync_time/* time */.X.now() - this.startTime); 4406 const delta = (0,clamp/* clamp */.u)(0, sampleDelta, sampleTime - sampleDelta); 4407 const current = sampleAnimation.sample(sampleTime).value; 4408 /** 4409 * Write the estimated value to inline style so it persists 4410 * after cancel(), covering the async gap before the next 4411 * animation starts. 4412 */ 4413 const { name } = this.options; 4414 if (element && name) 4415 setStyle(element, name, current); 4416 motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, current, delta); 4417 sampleAnimation.stop(); 4418 } 4419} 4420 4421 4422//# sourceMappingURL=NativeAnimationExtended.mjs.map 4423 4424;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/utils/is-animatable.mjs 4425 4426 4427/** 4428 * Check if a value is animatable. Examples: 4429 * 4430 * â : 100, "100px", "#fff" 4431 * â: "block", "url(2.jpg)" 4432 * @param value 4433 * 4434 * @internal 4435 */ 4436const isAnimatable = (value, name) => { 4437 // If the list of keys that might be non-animatable grows, replace with Set 4438 if (name === "zIndex") 4439 return false;
4440 // If it's a number or a keyframes array, we can animate it. We might at some point 4441 // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this, 4442 // but for now lets leave it like this for performance reasons 4443 if (typeof value === "number" || Array.isArray(value)) 4444 return true; 4445 if (typeof value === "string" && // It's animatable if we have a string 4446 (complex/* complex */.P.test(value) || value === "0") && // And it contains numbers and/or colors 4447 !value.startsWith("url(") // Unless it starts with "url(" 4448 ) { 4449 return true; 4450 } 4451 return false; 4452}; 4453 4454 4455//# sourceMappingURL=is-animatable.mjs.map 4456 4457;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/utils/can-animate.mjs 4458 4459 4460 4461 4462function hasKeyframesChanged(keyframes) { 4463 const current = keyframes[0]; 4464 if (keyframes.length === 1) 4465 return true; 4466 for (let i = 0; i < keyframes.length; i++) { 4467 if (keyframes[i] !== current) 4468 return true; 4469 } 4470} 4471function canAnimate(keyframes, name, type, velocity) { 4472 /** 4473 * Check if we're able to animate between the start and end keyframes, 4474 * and throw a warning if we're attempting to animate between one that's 4475 * animatable and another that isn't. 4476 */ 4477 const originKeyframe = keyframes[0]; 4478 if (originKeyframe === null) { 4479 return false; 4480 } 4481 /** 4482 * These aren't traditionally animatable but we do support them. 4483 * In future we could look into making this more generic or replacing 4484 * this function with mix() === mixImmediate 4485 */ 4486 if (name === "display" || name === "visibility") 4487 return true; 4488 const targetKeyframe = keyframes[keyframes.length - 1]; 4489 const isOriginAnimatable = isAnimatable(originKeyframe, name); 4490 const isTargetAnimatable = isAnimatable(targetKeyframe, name); 4491 (0,errors/* warning */.K)(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${isOriginAnimatable ? targetKeyframe : originKeyframe}" is not an animatable value.`, "value-not-animatable"); 4492 // Always skip if any of these are true 4493 if (!isOriginAnimatable || !isTargetAnimatable) { 4494 return false; 4495 } 4496 return (hasKeyframesChanged(keyframes) || 4497 ((type === "spring" || isGenerator(type)) && velocity)); 4498} 4499 4500 4501//# sourceMappingURL=can-animate.mjs.map 4502 4503;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/utils/make-animation-instant.mjs 4504function makeAnimationInstant(options) { 4505 options.duration = 0; 4506 options.type = "keyframes"; 4507} 4508 4509 4510//# sourceMappingURL=make-animation-instant.mjs.map 4511 4512// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/memo.mjs 4513var es_memo = __webpack_require__(90107); 4514;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/utils/is-browser-color.mjs 4515const browserColorFunctions = /^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/; 4516function hasBrowserOnlyColors(keyframes) { 4517 for (let i = 0; i < keyframes.length; i++) { 4518 if (typeof keyframes[i] === "string" && 4519 browserColorFunctions.test(keyframes[i])) { 4520 return true; 4521 } 4522 } 4523 return false; 4524} 4525 4526 4527//# sourceMappingURL=is-browser-color.mjs.map 4528 4529;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/supports/waapi.mjs 4530 4531 4532 4533 4534const colorProperties = new Set([ 4535 "color", 4536 "backgroundColor", 4537 "outlineColor", 4538 "fill", 4539 "stroke", 4540 "borderColor", 4541 "borderTopColor", 4542 "borderRightColor", 4543 "borderBottomColor", 4544 "borderLeftColor", 4545]); 4546const supportsWaapi = /*@__PURE__*/ (0,es_memo/* memo */.X)(() => Object.hasOwnProperty.call(Element.prototype, "animate")); 4547function supportsBrowserAnimation(options) { 4548 const { motionValue, name, repeatDelay, repeatType, damping, type, keyframes, } = options; 4549 const subject = motionValue?.owner?.current; 4550 /** 4551 * We use this check instead of isHTMLElement() because we explicitly 4552 * **don't** want elements in different timing contexts (i.e. popups) 4553 * to be accelerated, as it's not possible to sync these animations 4554 * properly with those driven from the main window frameloop. 4555 */ 4556 if (!(subject instanceof HTMLElement)) { 4557 return false;
4558 } 4559 const { onUpdate, transformTemplate } = motionValue.owner.getProps(); 4560 return (supportsWaapi() && 4561 name && 4562 /** 4563 * Force WAAPI for color properties with browser-only color formats 4564 * (oklch, oklab, lab, lch, etc.) that the JS animation path can't parse. 4565 */ 4566 (acceleratedValues.has(name) || 4567 (colorProperties.has(name) && 4568 hasBrowserOnlyColors(keyframes))) && 4569 (name !== "transform" || !transformTemplate) && 4570 /** 4571 * If we're outputting values to onUpdate then we can't use WAAPI as there's 4572 * no way to read the value from WAAPI every frame. 4573 */ 4574 !onUpdate && 4575 !repeatDelay && 4576 repeatType !== "mirror" && 4577 damping !== 0 && 4578 type !== "inertia"); 4579} 4580 4581 4582//# sourceMappingURL=waapi.mjs.map 4583 4584;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/AsyncMotionValueAnimation.mjs 4585 4586 4587 4588 4589 4590 4591 4592 4593 4594 4595 4596/** 4597 * Maximum time allowed between an animation being created and it being 4598 * resolved for us to use the latter as the start time. 4599 * 4600 * This is to ensure that while we prefer to "start" an animation as soon 4601 * as it's triggered, we also want to avoid a visual jump if there's a big delay 4602 * between these two moments. 4603 */ 4604const MAX_RESOLVE_DELAY = 40; 4605class AsyncMotionValueAnimation extends WithPromise/* WithPromise */.T { 4606 constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", keyframes, name, motionValue, element, ...options }) { 4607 super(); 4608 /** 4609 * Bound to support return animation.stop pattern 4610 */ 4611 this.stop = () => { 4612 if (this._animation) { 4613 this._animation.stop(); 4614 this.stopTimeline?.(); 4615 } 4616 this.keyframeResolver?.cancel(); 4617 }; 4618 this.createdAt = sync_time/* time */.X.now(); 4619 const optionsWithDefaults = { 4620 autoplay, 4621 delay, 4622 type, 4623 repeat, 4624 repeatDelay, 4625 repeatType, 4626 name, 4627 motionValue, 4628 element, 4629 ...options, 4630 }; 4631 const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver; 4632 this.keyframeResolver = new KeyframeResolver$1(keyframes, (resolvedKeyframes, finalKeyframe, forced) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe, optionsWithDefaults, !forced), name, motionValue, element); 4633 this.keyframeResolver?.scheduleResolve(); 4634 } 4635 onKeyframesResolved(keyframes, finalKeyframe, options, sync) { 4636 this.keyframeResolver = undefined; 4637 const { name, type, velocity, delay, isHandoff, onUpdate } = options; 4638 this.resolvedAt = sync_time/* time */.X.now(); 4639 /** 4640 * If we can't animate this value with the resolved keyframes 4641 * then we should complete it immediately. 4642 */ 4643 let canAnimateValue = true; 4644 if (!canAnimate(keyframes, name, type, velocity)) { 4645 canAnimateValue = false; 4646 if (global_config/* MotionGlobalConfig */.c.instantAnimations || !delay) { 4647 onUpdate?.((0,get_final/* getFinalKeyframe */.$)(keyframes, options, finalKeyframe)); 4648 } 4649 keyframes[0] = keyframes[keyframes.length - 1]; 4650 makeAnimationInstant(options); 4651 options.repeat = 0; 4652 } 4653 /** 4654 * Resolve startTime for the animation. 4655 * 4656 * This method uses the createdAt and resolvedAt to calculate the 4657 * animation startTime. *Ideally*, we would use the createdAt time as t=0 4658 * as the following frame would then be the first frame of the animation in 4659 * progress, which would feel snappier. 4660 * 4661 * However, if there's a delay (main thread work) between the creation of 4662 * the animation and the first committed frame, we prefer to use resolvedAt 4663 * to avoid a sudden jump into the animation. 4664 */ 4665 const startTime = sync 4666 ? !this.resolvedAt 4667 ? this.createdAt 4668 : this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY 4669 ? this.resolvedAt 4670 : this.createdAt 4671 : undefined; 4672 const resolvedOptions = { 4673 startTime, 4674 finalKeyframe, 4675 ...options, 4676 keyframes, 4677 }; 4678 /** 4679 * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via 4680 * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the 4681 * optimised animation. 4682 * 4683 * Also skip WAAPI when keyframes aren't animatable, as the resolved 4684 * values may not be valid CSS and would trigger browser warnings. 4685 */ 4686 const useWaapi = canAnimateValue && 4687 !isHandoff && 4688 supportsBrowserAnimation(resolvedOptions); 4689 const element = resolvedOptions.motionValue?.owner?.current; 4690 let animation; 4691 if (useWaapi) { 4692 try { 4693 animation = new NativeAnimationExtended({ 4694 ...resolvedOptions, 4695 element, 4696 }); 4697 } 4698 catch { 4699 animation = new JSAnimation/* JSAnimation */.L(resolvedOptions); 4700 } 4701 } 4702 else { 4703 animation = new JSAnimation/* JSAnimation */.L(resolvedOptions); 4704 } 4705 animation.finished.then(() => { 4706 this.notifyFinished(); 4707 }).catch(noop/* noop */.Z); 4708 if (this.pendingTimeline) { 4709 this.stopTimeline = animation.attachTimeline(this.pendingTimeline); 4710 this.pendingTimeline = undefined; 4711 } 4712 this._animation = animation; 4713 } 4714 get finished() { 4715 if (!this._animation) { 4716 return this._finished; 4717 } 4718 else { 4719 return this.animation.finished; 4720 } 4721 } 4722 then(onResolve, _onReject) { 4723 return this.finished.finally(onResolve).then(() => { }); 4724 } 4725 get animation() { 4726 if (!this._animation) { 4727 this.keyframeResolver?.resume(); 4728 flushKeyframeResolvers(); 4729 } 4730 return this._animation; 4731 } 4732 get duration() { 4733 return this.animation.duration; 4734 } 4735 get iterationDuration() { 4736 return this.animation.iterationDuration; 4737 } 4738 get time() { 4739 return this.animation.time; 4740 } 4741 set time(newTime) { 4742 this.animation.time = newTime; 4743 } 4744 get speed() { 4745 return this.animation.speed; 4746 } 4747 get state() { 4748 return this.animation.state; 4749 } 4750 set speed(newSpeed) { 4751 this.animation.speed = newSpeed; 4752 } 4753 get startTime() { 4754 return this.animation.startTime; 4755 } 4756 attachTimeline(timeline) { 4757 if (this._animation) { 4758 this.stopTimeline = this.animation.attachTimeline(timeline); 4759 } 4760 else { 4761 this.pendingTimeline = timeline; 4762 } 4763 return () => this.stop(); 4764 } 4765 play() { 4766 this.animation.play(); 4767 } 4768 pause() { 4769 this.animation.pause(); 4770 } 4771 complete() { 4772 this.animation.complete(); 4773 } 4774 cancel() { 4775 if (this._animation) { 4776 this.animation.cancel(); 4777 } 4778 this.keyframeResolver?.cancel(); 4779 } 4780} 4781 4782 4783//# sourceMappingURL=AsyncMotionValueAnimation.mjs.map 4784 4785;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/utils/default-transitions.mjs 4786 4787 4788const underDampedSpring = { 4789 type: "spring", 4790 stiffness: 500, 4791 damping: 25, 4792 restSpeed: 10, 4793}; 4794const criticallyDampedSpring = (target) => ({ 4795 type: "spring", 4796 stiffness: 550, 4797 damping: target === 0 ? 2 * Math.sqrt(550) : 30, 4798 restSpeed: 10, 4799}); 4800const keyframesTransition = { 4801 type: "keyframes", 4802 duration: 0.8, 4803}; 4804/** 4805 * Default easing curve is a slightly shallower version of 4806 * the default browser easing curve. 4807 */ 4808const ease = { 4809 type: "keyframes", 4810 ease: [0.25, 0.1, 0.35, 1], 4811 duration: 0.3, 4812}; 4813const getDefaultTransition = (valueKey, { keyframes }) => { 4814 if (keyframes.length > 2) { 4815 return keyframesTransition; 4816 } 4817 else if (transformProps.has(valueKey)) { 4818 return valueKey.startsWith("scale") 4819 ? criticallyDampedSpring(keyframes[1]) 4820 : underDampedSpring; 4821 } 4822 return ease; 4823}; 4824 4825 4826//# sourceMappingURL=default-transitions.mjs.map 4827 4828;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/utils/is-transition-defined.mjs 4829const orchestrationKeys = new Set([ 4830 "when", 4831 "delay", 4832 "delayChildren", 4833 "staggerChildren", 4834 "staggerDirection", 4835 "repeat", 4836 "repeatType", 4837 "repeatDelay", 4838 "from", 4839 "elapsed", 4840]); 4841/** 4842 * Decide whether a transition is defined on a given Transition. 4843 * This filters out orchestration options and returns true 4844 * if any options are left. 4845 */ 4846function isTransitionDefined(transition) { 4847 for (const key in transition) { 4848 if (!orchestrationKeys.has(key)) 4849 return true; 4850 } 4851 return false;
vendor: 4,589 bytes, lines 4852-4982
4852} 4853 4854 4855//# sourceMappingURL=is-transition-defined.mjs.map 4856 4857;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/interfaces/motion-value.mjs 4858 4859 4860 4861 4862 4863 4864 4865 4866 4867 4868const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => { 4869 const valueTransition = getValueTransition(transition, name) || {}; 4870 /** 4871 * Most transition values are currently completely overwritten by value-specific 4872 * transitions. In the future it'd be nicer to blend these transitions. But for now 4873 * delay actually does inherit from the root transition if not value-specific. 4874 */ 4875 const delay = valueTransition.delay || transition.delay || 0; 4876 /** 4877 * Elapsed isn't a public transition option but can be passed through from 4878 * optimized appear effects in milliseconds. 4879 */ 4880 let { elapsed = 0 } = transition; 4881 elapsed = elapsed - (0,time_conversion/* secondsToMilliseconds */.w)(delay); 4882 const options = { 4883 keyframes: Array.isArray(target) ? target : [null, target], 4884 ease: "easeOut", 4885 velocity: value.getVelocity(), 4886 ...valueTransition, 4887 delay: -elapsed, 4888 onUpdate: (v) => { 4889 value.set(v); 4890 valueTransition.onUpdate && valueTransition.onUpdate(v); 4891 }, 4892 onComplete: () => { 4893 onComplete(); 4894 valueTransition.onComplete && valueTransition.onComplete(); 4895 }, 4896 name, 4897 motionValue: value, 4898 element: isHandoff ? undefined : element, 4899 }; 4900 /** 4901 * If there's no transition defined for this value, we can generate 4902 * unique transition settings for this value. 4903 */ 4904 if (!isTransitionDefined(valueTransition)) { 4905 Object.assign(options, getDefaultTransition(name, options)); 4906 } 4907 /** 4908 * Both WAAPI and our internal animation functions use durations 4909 * as defined by milliseconds, while our external API defines them 4910 * as seconds. 4911 */ 4912 options.duration && (options.duration = (0,time_conversion/* secondsToMilliseconds */.w)(options.duration)); 4913 options.repeatDelay && (options.repeatDelay = (0,time_conversion/* secondsToMilliseconds */.w)(options.repeatDelay)); 4914 /** 4915 * Support deprecated way to set initial value. Prefer keyframe syntax. 4916 */ 4917 if (options.from !== undefined) { 4918 options.keyframes[0] = options.from; 4919 } 4920 let shouldSkip = false; 4921 if (options.type === false || 4922 (options.duration === 0 && !options.repeatDelay)) { 4923 makeAnimationInstant(options); 4924 if (options.delay === 0) { 4925 shouldSkip = true; 4926 } 4927 } 4928 if (global_config/* MotionGlobalConfig */.c.instantAnimations || 4929 global_config/* MotionGlobalConfig */.c.skipAnimations || 4930 element?.shouldSkipAnimations || 4931 valueTransition.skipAnimations) { 4932 shouldSkip = true; 4933 makeAnimationInstant(options); 4934 options.delay = 0; 4935 } 4936 /** 4937 * If the transition type or easing has been explicitly set by the user 4938 * then we don't want to allow flattening the animation. 4939 */ 4940 options.allowFlatten = !valueTransition.type && !valueTransition.ease; 4941 /** 4942 * If we can or must skip creating the animation, and apply only 4943 * the final keyframe, do so. We also check once keyframes are resolved but 4944 * this early check prevents the need to create an animation at all. 4945 */ 4946 if (shouldSkip && !isHandoff && value.get() !== undefined) { 4947 const finalKeyframe = (0,get_final/* getFinalKeyframe */.$)(options.keyframes, valueTransition); 4948 if (finalKeyframe !== undefined) { 4949 frameloop_frame/* frame */.Wi.update(() => { 4950 options.onUpdate(finalKeyframe); 4951 options.onComplete(); 4952 }); 4953 return; 4954 } 4955 } 4956 return valueTransition.isSync 4957 ? new JSAnimation/* JSAnimation */.L(options) 4958 : new AsyncMotionValueAnimation(options); 4959}; 4960 4961 4962//# sourceMappingURL=motion-value.mjs.map 4963 4964;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/interfaces/visual-element-target.mjs 4965 4966 4967 4968 4969 4970 4971 4972 4973 4974/** 4975 * Decide whether we should block this animation. Previously, we achieved this 4976 * just by checking whether the key was listed in protectedKeys, but this 4977 * posed problems if an animation was triggered by afterChildren and protectedKeys 4978 * had been set to true in the meantime. 4979 */ 4980function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) { 4981 const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true; 4982 needsAnimating[key] = false;
vendor: 8,622 bytes, lines 4983-5199
4983 return shouldBlock; 4984} 4985function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) { 4986 let { transition, transitionEnd, ...target } = targetAndTransition; 4987 const defaultTransition = visualElement.getDefaultTransition(); 4988 transition = transition 4989 ? resolveTransition(transition, defaultTransition) 4990 : defaultTransition; 4991 const reduceMotion = transition?.reduceMotion; 4992 const skipAnimations = transition?.skipAnimations; 4993 if (transitionOverride) 4994 transition = transitionOverride; 4995 const animations = []; 4996 const animationTypeState = type && 4997 visualElement.animationState && 4998 visualElement.animationState.getState()[type]; 4999 const path = transition?.path; 5000 if (path) { 5001 // path mutates `target` to claim x/y; loop below skips them. 5002 path.animateVisualElement(visualElement, target, transition, delay, animations); 5003 } 5004 for (const key in target) { 5005 const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null); 5006 const valueTarget = target[key]; 5007 if (valueTarget === undefined || 5008 (animationTypeState && 5009 shouldBlockAnimation(animationTypeState, key))) { 5010 continue; 5011 } 5012 const valueTransition = { 5013 delay, 5014 ...getValueTransition(transition || {}, key), 5015 }; 5016 if (skipAnimations) 5017 valueTransition.skipAnimations = true; 5018 /** 5019 * If the value is already at the defined target, skip the animation. 5020 * We still re-assert the value via frame.update to take precedence 5021 * over any stale transitionEnd callbacks from previous animations. 5022 */ 5023 const currentValue = value.get(); 5024 if (currentValue !== undefined && 5025 !value.isAnimating() && 5026 !Array.isArray(valueTarget) && 5027 valueTarget === currentValue && 5028 !valueTransition.velocity) { 5029 frameloop_frame/* frame */.Wi.update(() => value.set(valueTarget)); 5030 continue; 5031 } 5032 /** 5033 * If this is the first time a value is being animated, check 5034 * to see if we're handling off from an existing animation. 5035 */ 5036 let isHandoff = false; 5037 if (window.MotionHandoffAnimation) { 5038 const appearId = getOptimisedAppearId(visualElement); 5039 if (appearId) { 5040 const startTime = window.MotionHandoffAnimation(appearId, key, frameloop_frame/* frame */.Wi); 5041 if (startTime !== null) { 5042 valueTransition.startTime = startTime; 5043 isHandoff = true; 5044 } 5045 } 5046 } 5047 addValueToWillChange(visualElement, key); 5048 const shouldReduceMotion = reduceMotion ?? visualElement.shouldReduceMotion; 5049 value.start(animateMotionValue(key, value, valueTarget, shouldReduceMotion && positionalKeys.has(key) 5050 ? { type: false } 5051 : valueTransition, visualElement, isHandoff)); 5052 const animation = value.animation; 5053 if (animation) { 5054 animations.push(animation); 5055 } 5056 } 5057 if (transitionEnd) { 5058 const applyTransitionEnd = () => frameloop_frame/* frame */.Wi.update(() => { 5059 transitionEnd && setTarget(visualElement, transitionEnd); 5060 }); 5061 if (animations.length) { 5062 Promise.all(animations).then(applyTransitionEnd); 5063 } 5064 else { 5065 applyTransitionEnd(); 5066 } 5067 } 5068 return animations; 5069} 5070 5071 5072//# sourceMappingURL=visual-element-target.mjs.map 5073 5074;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/utils/calc-child-stagger.mjs 5075function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) { 5076 const index = Array.from(children) 5077 .sort((a, b) => a.sortNodePosition(b)) 5078 .indexOf(child); 5079 const numChildren = children.size; 5080 const maxStaggerDuration = (numChildren - 1) * staggerChildren; 5081 const delayIsFunction = typeof delayChildren === "function"; 5082 return delayIsFunction 5083 ? delayChildren(index, numChildren) 5084 : staggerDirection === 1 5085 ? index * staggerChildren 5086 : maxStaggerDuration - index * staggerChildren; 5087} 5088 5089 5090//# sourceMappingURL=calc-child-stagger.mjs.map 5091 5092;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/interfaces/visual-element-variant.mjs 5093 5094 5095 5096 5097function animateVariant(visualElement, variant, options = {}) { 5098 const resolved = resolveVariant(visualElement, variant, options.type === "exit" 5099 ? visualElement.presenceContext?.custom 5100 : undefined); 5101 let { transition = visualElement.getDefaultTransition() || {} } = resolved || {}; 5102 if (options.transitionOverride) { 5103 transition = options.transitionOverride; 5104 } 5105 /** 5106 * If we have a variant, create a callback that runs it as an animation. 5107 * Otherwise, we resolve a Promise immediately for a composable no-op. 5108 */ 5109 const getAnimation = resolved 5110 ? () => Promise.all(animateTarget(visualElement, resolved, options)) 5111 : () => Promise.resolve(); 5112 /** 5113 * If we have children, create a callback that runs all their animations. 5114 * Otherwise, we resolve a Promise immediately for a composable no-op. 5115 */ 5116 const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size 5117 ? (forwardDelay = 0) => { 5118 const { delayChildren = 0, staggerChildren, staggerDirection, } = transition; 5119 return animateChildren(visualElement, variant, forwardDelay, delayChildren, staggerChildren, staggerDirection, options); 5120 } 5121 : () => Promise.resolve(); 5122 /** 5123 * If the transition explicitly defines a "when" option, we need to resolve either 5124 * this animation or all children animations before playing the other. 5125 */ 5126 const { when } = transition; 5127 if (when) { 5128 const [first, last] = when === "beforeChildren" 5129 ? [getAnimation, getChildAnimations] 5130 : [getChildAnimations, getAnimation]; 5131 return first().then(() => last()); 5132 } 5133 else { 5134 return Promise.all([getAnimation(), getChildAnimations(options.delay)]); 5135 } 5136} 5137function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) { 5138 const animations = []; 5139 for (const child of visualElement.variantChildren) { 5140 child.notify("AnimationStart", variant); 5141 animations.push(animateVariant(child, variant, { 5142 ...options, 5143 delay: delay + 5144 (typeof delayChildren === "function" ? 0 : delayChildren) + 5145 calcChildStagger(visualElement.variantChildren, child, delayChildren, staggerChildren, staggerDirection), 5146 }).then(() => child.notify("AnimationComplete", variant))); 5147 } 5148 return Promise.all(animations); 5149} 5150 5151 5152//# sourceMappingURL=visual-element-variant.mjs.map 5153 5154;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/interfaces/visual-element.mjs 5155 5156 5157 5158 5159function animateVisualElement(visualElement, definition, options = {}) { 5160 visualElement.notify("AnimationStart", definition); 5161 let animation; 5162 if (Array.isArray(definition)) { 5163 const animations = definition.map((variant) => animateVariant(visualElement, variant, options)); 5164 animation = Promise.all(animations); 5165 } 5166 else if (typeof definition === "string") { 5167 animation = animateVariant(visualElement, definition, options); 5168 } 5169 else { 5170 const resolvedDefinition = typeof definition === "function" 5171 ? resolveVariant(visualElement, definition, options.custom) 5172 : definition; 5173 animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options)); 5174 } 5175 return animation.then(() => { 5176 visualElement.notify("AnimationComplete", definition); 5177 }); 5178} 5179 5180 5181//# sourceMappingURL=visual-element.mjs.map 5182 5183;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/get-variant-context.mjs 5184 5185 5186 5187const numVariantProps = variantProps.length; 5188/** 5189 * Get variant context from a visual element's parent chain. 5190 * Uses `any` type for visualElement to avoid circular dependencies. 5191 */ 5192function getVariantContext(visualElement) { 5193 if (!visualElement) 5194 return undefined; 5195 if (!visualElement.isControllingVariants) { 5196 const context = visualElement.parent 5197 ? getVariantContext(visualElement.parent) || {} 5198 : {}; 5199 if (visualElement.props.initial !== undefined) {
5200 context.initial = visualElement.props.initial; 5201 } 5202 return context; 5203 } 5204 const context = {}; 5205 for (let i = 0; i < numVariantProps; i++) { 5206 const name = variantProps[i]; 5207 const prop = visualElement.props[name]; 5208 if (isVariantLabel(prop) || prop === false) { 5209 context[name] = prop; 5210 } 5211 } 5212 return context; 5213} 5214 5215 5216//# sourceMappingURL=get-variant-context.mjs.map 5217 5218;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/shallow-compare.mjs 5219function shallowCompare(next, prev) { 5220 if (!Array.isArray(prev)) 5221 return false; 5222 const prevLength = prev.length; 5223 if (prevLength !== next.length) 5224 return false; 5225 for (let i = 0; i < prevLength; i++) { 5226 if (prev[i] !== next[i]) 5227 return false; 5228 } 5229 return true; 5230} 5231 5232 5233//# sourceMappingURL=shallow-compare.mjs.map 5234 5235;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/render/utils/animation-state.mjs 5236 5237 5238 5239 5240 5241 5242 5243
vendor: 9,282 bytes, lines 5244-5436
5244 5245 5246const reversePriorityOrder = [...variantPriorityOrder].reverse(); 5247const numAnimationTypes = variantPriorityOrder.length; 5248function createAnimateFunction(visualElement) { 5249 return (animations) => { 5250 return Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options))); 5251 }; 5252} 5253function createAnimationState(visualElement) { 5254 let animate = createAnimateFunction(visualElement); 5255 let state = createState(); 5256 let isInitialRender = true; 5257 /** 5258 * Track whether the animation state has been reset (e.g. via StrictMode 5259 * double-invocation or Suspense unmount/remount). On the first 5260 * animateChanges() call after a reset we need to behave like the initial 5261 * render for variant-inheritance checks, even though isInitialRender is 5262 * already false. 5263 */ 5264 let wasReset = false; 5265 /** 5266 * This function will be used to reduce the animation definitions for 5267 * each active animation type into an object of resolved values for it. 5268 */ 5269 const buildResolvedTypeValues = (type) => (acc, definition) => { 5270 const resolved = resolveVariant(visualElement, definition, type === "exit" 5271 ? visualElement.presenceContext?.custom 5272 : undefined); 5273 if (resolved) { 5274 const { transition, transitionEnd, ...target } = resolved; 5275 acc = { ...acc, ...target, ...transitionEnd }; 5276 } 5277 return acc; 5278 }; 5279 /** 5280 * This just allows us to inject mocked animation functions 5281 * @internal 5282 */ 5283 function setAnimateFunction(makeAnimator) { 5284 animate = makeAnimator(visualElement); 5285 } 5286 /** 5287 * When we receive new props, we need to: 5288 * 1. Create a list of protected keys for each type. This is a directory of 5289 * value keys that are currently being "handled" by types of a higher priority 5290 * so that whenever an animation is played of a given type, these values are 5291 * protected from being animated. 5292 * 2. Determine if an animation type needs animating. 5293 * 3. Determine if any values have been removed from a type and figure out 5294 * what to animate those to. 5295 */ 5296 function animateChanges(changedActiveType) { 5297 const { props } = visualElement; 5298 const context = getVariantContext(visualElement.parent) || {}; 5299 /** 5300 * A list of animations that we'll build into as we iterate through the animation 5301 * types. This will get executed at the end of the function. 5302 */ 5303 const animations = []; 5304 /** 5305 * Keep track of which values have been removed. Then, as we hit lower priority 5306 * animation types, we can check if they contain removed values and animate to that. 5307 */ 5308 const removedKeys = new Set(); 5309 /** 5310 * A dictionary of all encountered keys. This is an object to let us build into and 5311 * copy it without iteration. Each time we hit an animation type we set its protected 5312 * keys - the keys its not allowed to animate - to the latest version of this object. 5313 */ 5314 let encounteredKeys = {}; 5315 /** 5316 * If a variant has been removed at a given index, and this component is controlling 5317 * variant animations, we want to ensure lower-priority variants are forced to animate. 5318 */ 5319 let removedVariantIndex = Infinity; 5320 /** 5321 * Iterate through all animation types in reverse priority order. For each, we want to 5322 * detect which values it's handling and whether or not they've changed (and therefore 5323 * need to be animated). If any values have been removed, we want to detect those in 5324 * lower priority props and flag for animation. 5325 */ 5326 for (let i = 0; i < numAnimationTypes; i++) { 5327 const type = reversePriorityOrder[i]; 5328 const typeState = state[type]; 5329 const prop = props[type] !== undefined 5330 ? props[type] 5331 : context[type]; 5332 const propIsVariant = isVariantLabel(prop); 5333 /** 5334 * If this type has *just* changed isActive status, set activeDelta 5335 * to that status. Otherwise set to null. 5336 */ 5337 const activeDelta = type === changedActiveType ? typeState.isActive : null; 5338 if (activeDelta === false) 5339 removedVariantIndex = i; 5340 /** 5341 * If this prop is an inherited variant, rather than been set directly on the 5342 * component itself, we want to make sure we allow the parent to trigger animations. 5343 * 5344 * TODO: Can probably change this to a !isControllingVariants check 5345 */ 5346 let isInherited = prop === context[type] && 5347 prop !== props[type] && 5348 propIsVariant; 5349 if (isInherited && 5350 (isInitialRender || wasReset) && 5351 visualElement.manuallyAnimateOnMount) { 5352 isInherited = false; 5353 } 5354 /** 5355 * Set all encountered keys so far as the protected keys for this type. This will 5356 * be any key that has been animated or otherwise handled by active, higher-priortiy types. 5357 */ 5358 typeState.protectedKeys = { ...encounteredKeys }; 5359 // Check if we can skip analysing this prop early 5360 if ( 5361 // If it isn't active and hasn't *just* been set as inactive 5362 (!typeState.isActive && activeDelta === null) || 5363 // If we didn't and don't have any defined prop for this animation type 5364 (!prop && !typeState.prevProp) || 5365 // Or if the prop doesn't define an animation 5366 isAnimationControls(prop) || 5367 typeof prop === "boolean") { 5368 continue; 5369 } 5370 /** 5371 * If exit is already active and wasn't just activated, skip 5372 * re-processing to prevent interrupting running exit animations. 5373 * Re-resolving exit with a changed custom value can start new 5374 * value animations that stop the originals, leaving the exit 5375 * animation promise unresolved and the component stuck in the DOM. 5376 */ 5377 if (type === "exit" && typeState.isActive && activeDelta !== true) { 5378 if (typeState.prevResolvedValues) { 5379 encounteredKeys = { 5380 ...encounteredKeys, 5381 ...typeState.prevResolvedValues, 5382 }; 5383 } 5384 continue; 5385 } 5386 /** 5387 * As we go look through the values defined on this type, if we detect 5388 * a changed value or a value that was removed in a higher priority, we set 5389 * this to true and add this prop to the animation list. 5390 */ 5391 const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop); 5392 let shouldAnimateType = variantDidChange || 5393 // If we're making this variant active, we want to always make it active 5394 (type === changedActiveType && 5395 typeState.isActive && 5396 !isInherited && 5397 propIsVariant) || 5398 // If we removed a higher-priority variant (i is in reverse order) 5399 (i > removedVariantIndex && propIsVariant); 5400 let handledRemovedValues = false; 5401 /** 5402 * As animations can be set as variant lists, variants or target objects, we 5403 * coerce everything to an array if it isn't one already 5404 */ 5405 const definitionList = Array.isArray(prop) ? prop : [prop]; 5406 /** 5407 * Build an object of all the resolved values. We'll use this in the subsequent 5408 * animateChanges calls to determine whether a value has changed. 5409 */ 5410 let resolvedValues = definitionList.reduce(buildResolvedTypeValues(type), {}); 5411 if (activeDelta === false) 5412 resolvedValues = {}; 5413 /** 5414 * Now we need to loop through all the keys in the prev prop and this prop, 5415 * and decide: 5416 * 1. If the value has changed, and needs animating 5417 * 2. If it has been removed, and needs adding to the removedKeys set 5418 * 3. If it has been removed in a higher priority type and needs animating 5419 * 4. If it hasn't been removed in a higher priority but hasn't changed, and 5420 * needs adding to the type's protectedKeys list. 5421 */ 5422 const { prevResolvedValues = {} } = typeState; 5423 const allKeys = { 5424 ...prevResolvedValues, 5425 ...resolvedValues, 5426 }; 5427 const markToAnimate = (key) => { 5428 shouldAnimateType = true; 5429 if (removedKeys.has(key)) { 5430 handledRemovedValues = true; 5431 removedKeys.delete(key); 5432 } 5433 typeState.needsAnimating[key] = true; 5434 const motionValue = visualElement.getValue(key); 5435 if (motionValue) 5436 motionValue.liveStyle = false;
vendor: 7,553 bytes, lines 5437-5620
5437 }; 5438 for (const key in allKeys) { 5439 const next = resolvedValues[key]; 5440 const prev = prevResolvedValues[key]; 5441 // If we've already handled this we can just skip ahead 5442 if (encounteredKeys.hasOwnProperty(key)) 5443 continue; 5444 /** 5445 * If the value has changed, we probably want to animate it. 5446 */ 5447 let valueHasChanged = false; 5448 if (isKeyframesTarget(next) && isKeyframesTarget(prev)) { 5449 valueHasChanged = 5450 !shallowCompare(next, prev) || variantDidChange; 5451 } 5452 else { 5453 valueHasChanged = next !== prev; 5454 } 5455 if (valueHasChanged) { 5456 if (next !== undefined && next !== null) { 5457 // If next is defined and doesn't equal prev, it needs animating 5458 markToAnimate(key); 5459 } 5460 else { 5461 // If it's undefined, it's been removed. 5462 removedKeys.add(key); 5463 } 5464 } 5465 else if (next !== undefined && removedKeys.has(key)) { 5466 /** 5467 * If next hasn't changed and it isn't undefined, we want to check if it's 5468 * been removed by a higher priority 5469 */ 5470 markToAnimate(key); 5471 } 5472 else { 5473 /** 5474 * If it hasn't changed, we add it to the list of protected values 5475 * to ensure it doesn't get animated. 5476 */ 5477 typeState.protectedKeys[key] = true; 5478 } 5479 } 5480 /** 5481 * Update the typeState so next time animateChanges is called we can compare the 5482 * latest prop and resolvedValues to these. 5483 */ 5484 typeState.prevProp = prop; 5485 typeState.prevResolvedValues = resolvedValues; 5486 if (typeState.isActive) { 5487 encounteredKeys = { ...encounteredKeys, ...resolvedValues }; 5488 } 5489 if ((isInitialRender || wasReset) && 5490 visualElement.blockInitialAnimation) { 5491 shouldAnimateType = false; 5492 } 5493 /** 5494 * If this is an inherited prop we want to skip this animation 5495 * unless the inherited variants haven't changed on this render. 5496 */ 5497 const willAnimateViaParent = isInherited && variantDidChange; 5498 const needsAnimating = !willAnimateViaParent || handledRemovedValues; 5499 if (shouldAnimateType && needsAnimating) { 5500 animations.push(...definitionList.map((animation) => { 5501 const options = { type }; 5502 /** 5503 * If we're performing the initial animation, but we're not 5504 * rendering at the same time as the variant-controlling parent, 5505 * we want to use the parent's transition to calculate the stagger. 5506 */ 5507 if (typeof animation === "string" && 5508 (isInitialRender || wasReset) && 5509 !willAnimateViaParent && 5510 visualElement.manuallyAnimateOnMount && 5511 visualElement.parent) { 5512 const { parent } = visualElement; 5513 const parentVariant = resolveVariant(parent, animation); 5514 if (parent.enteringChildren && parentVariant) { 5515 const { delayChildren } = parentVariant.transition || {}; 5516 options.delay = calcChildStagger(parent.enteringChildren, visualElement, delayChildren); 5517 } 5518 } 5519 return { 5520 animation: animation, 5521 options, 5522 }; 5523 })); 5524 } 5525 } 5526 /** 5527 * If there are some removed value that haven't been dealt with, 5528 * we need to create a new animation that falls back either to the value 5529 * defined in the style prop, or the last read value. 5530 */ 5531 if (removedKeys.size) { 5532 const fallbackAnimation = {}; 5533 /** 5534 * If the initial prop contains a transition we can use that, otherwise 5535 * allow the animation function to use the visual element's default. 5536 */ 5537 if (typeof props.initial !== "boolean") { 5538 const initialTransition = resolveVariant(visualElement, Array.isArray(props.initial) 5539 ? props.initial[0] 5540 : props.initial); 5541 if (initialTransition && initialTransition.transition) { 5542 fallbackAnimation.transition = initialTransition.transition; 5543 } 5544 } 5545 removedKeys.forEach((key) => { 5546 const fallbackTarget = visualElement.getBaseTarget(key); 5547 const motionValue = visualElement.getValue(key); 5548 if (motionValue) 5549 motionValue.liveStyle = true; 5550 // @ts-expect-error - @mattgperry to figure if we should do something here 5551 fallbackAnimation[key] = fallbackTarget ?? null; 5552 }); 5553 animations.push({ animation: fallbackAnimation }); 5554 } 5555 let shouldAnimate = Boolean(animations.length); 5556 if (isInitialRender && 5557 (props.initial === false || props.initial === props.animate) && 5558 !visualElement.manuallyAnimateOnMount) { 5559 shouldAnimate = false; 5560 } 5561 isInitialRender = false; 5562 wasReset = false; 5563 return shouldAnimate ? animate(animations) : Promise.resolve(); 5564 } 5565 /** 5566 * Change whether a certain animation type is active. 5567 */ 5568 function setActive(type, isActive) { 5569 // If the active state hasn't changed, we can safely do nothing here 5570 if (state[type].isActive === isActive) 5571 return Promise.resolve(); 5572 // Propagate active change to children 5573 visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive)); 5574 state[type].isActive = isActive; 5575 const animations = animateChanges(type); 5576 for (const key in state) { 5577 state[key].protectedKeys = {}; 5578 } 5579 return animations; 5580 } 5581 return { 5582 animateChanges, 5583 setActive, 5584 setAnimateFunction, 5585 getState: () => state, 5586 reset: () => { 5587 state = createState(); 5588 wasReset = true; 5589 }, 5590 }; 5591} 5592function checkVariantsDidChange(prev, next) { 5593 if (typeof next === "string") { 5594 return next !== prev; 5595 } 5596 else if (Array.isArray(next)) { 5597 return !shallowCompare(next, prev); 5598 } 5599 return false; 5600} 5601function createTypeState(isActive = false) { 5602 return { 5603 isActive, 5604 protectedKeys: {}, 5605 needsAnimating: {}, 5606 prevResolvedValues: {}, 5607 }; 5608} 5609function createState() { 5610 return { 5611 animate: createTypeState(true), 5612 whileInView: createTypeState(), 5613 whileHover: createTypeState(), 5614 whileTap: createTypeState(), 5615 whileDrag: createTypeState(), 5616 whileFocus: createTypeState(), 5617 exit: createTypeState(), 5618 }; 5619} 5620
vendor: 34,356 bytes, lines 5621-6577
5621 5622//# sourceMappingURL=animation-state.mjs.map 5623 5624;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animation/index.mjs 5625 5626 5627class AnimationFeature extends Feature { 5628 /** 5629 * We dynamically generate the AnimationState manager as it contains a reference 5630 * to the underlying animation library. We only want to load that if we load this, 5631 * so people can optionally code split it out using the `m` component. 5632 */ 5633 constructor(node) { 5634 super(node); 5635 node.animationState || (node.animationState = createAnimationState(node)); 5636 } 5637 updateAnimationControlsSubscription() { 5638 const { animate } = this.node.getProps(); 5639 if (isAnimationControls(animate)) { 5640 this.unmountControls = animate.subscribe(this.node); 5641 } 5642 } 5643 /** 5644 * Subscribe any provided AnimationControls to the component's VisualElement 5645 */ 5646 mount() { 5647 this.updateAnimationControlsSubscription(); 5648 } 5649 update() { 5650 const { animate } = this.node.getProps(); 5651 const { animate: prevAnimate } = this.node.prevProps || {}; 5652 if (animate !== prevAnimate) { 5653 this.updateAnimationControlsSubscription(); 5654 } 5655 } 5656 unmount() { 5657 this.node.animationState.reset(); 5658 this.unmountControls?.(); 5659 } 5660} 5661 5662 5663//# sourceMappingURL=index.mjs.map 5664 5665;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animation/exit.mjs 5666 5667 5668let id = 0; 5669class ExitAnimationFeature extends Feature { 5670 constructor() { 5671 super(...arguments); 5672 this.id = id++; 5673 this.isExitComplete = false; 5674 } 5675 update() { 5676 if (!this.node.presenceContext) 5677 return; 5678 const { isPresent, onExitComplete } = this.node.presenceContext; 5679 const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {}; 5680 if (!this.node.animationState || isPresent === prevIsPresent) { 5681 return; 5682 } 5683 if (isPresent && prevIsPresent === false) { 5684 /** 5685 * When re-entering, if the exit animation already completed 5686 * (element is at rest), reset to initial values so the enter 5687 * animation replays from the correct position. 5688 */ 5689 if (this.isExitComplete) { 5690 const { initial, custom } = this.node.getProps(); 5691 if (typeof initial === "string" || 5692 (typeof initial === "object" && 5693 initial !== null && 5694 !Array.isArray(initial))) { 5695 const resolved = resolveVariant(this.node, initial, custom); 5696 if (resolved) { 5697 const { transition, transitionEnd, ...target } = resolved; 5698 for (const key in target) { 5699 this.node 5700 .getValue(key) 5701 ?.jump(target[key]); 5702 } 5703 } 5704 } 5705 this.node.animationState.reset(); 5706 this.node.animationState.animateChanges(); 5707 } 5708 else { 5709 this.node.animationState.setActive("exit", false); 5710 } 5711 this.isExitComplete = false; 5712 return; 5713 } 5714 const exitAnimation = this.node.animationState.setActive("exit", !isPresent); 5715 if (onExitComplete && !isPresent) { 5716 exitAnimation.then(() => { 5717 this.isExitComplete = true; 5718 onExitComplete(this.id); 5719 }); 5720 } 5721 } 5722 mount() { 5723 const { register, onExitComplete } = this.node.presenceContext || {}; 5724 if (onExitComplete) { 5725 onExitComplete(this.id); 5726 } 5727 if (register) { 5728 this.unmount = register(this.id); 5729 } 5730 } 5731 unmount() { } 5732} 5733 5734 5735//# sourceMappingURL=exit.mjs.map 5736 5737;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animations.mjs 5738 5739 5740 5741const animations = { 5742 animation: { 5743 Feature: AnimationFeature, 5744 }, 5745 exit: { 5746 Feature: ExitAnimationFeature, 5747 }, 5748}; 5749 5750 5751//# sourceMappingURL=animations.mjs.map 5752 5753;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/drag/state/is-active.mjs 5754const isDragging = { 5755 x: false, 5756 y: false, 5757}; 5758function isDragActive() { 5759 return isDragging.x || isDragging.y; 5760} 5761 5762 5763//# sourceMappingURL=is-active.mjs.map 5764 5765;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/drag/state/set-active.mjs 5766 5767 5768function setDragLock(axis) { 5769 if (axis === "x" || axis === "y") { 5770 if (isDragging[axis]) { 5771 return null; 5772 } 5773 else { 5774 isDragging[axis] = true; 5775 return () => { 5776 isDragging[axis] = false; 5777 }; 5778 } 5779 } 5780 else { 5781 if (isDragging.x || isDragging.y) { 5782 return null; 5783 } 5784 else { 5785 isDragging.x = isDragging.y = true; 5786 return () => { 5787 isDragging.x = isDragging.y = false; 5788 }; 5789 } 5790 } 5791} 5792 5793 5794//# sourceMappingURL=set-active.mjs.map 5795 5796;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/utils/each-axis.mjs 5797function eachAxis(callback) { 5798 return [callback("x"), callback("y")]; 5799} 5800 5801 5802//# sourceMappingURL=each-axis.mjs.map 5803 5804;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/geometry/delta-calc.mjs 5805 5806 5807const SCALE_PRECISION = 0.0001; 5808const SCALE_MIN = 1 - SCALE_PRECISION; 5809const SCALE_MAX = 1 + SCALE_PRECISION; 5810const TRANSLATE_PRECISION = 0.01; 5811const TRANSLATE_MIN = 0 - TRANSLATE_PRECISION; 5812const TRANSLATE_MAX = 0 + TRANSLATE_PRECISION; 5813function calcLength(axis) { 5814 return axis.max - axis.min; 5815} 5816function isNear(value, target, maxDistance) { 5817 return Math.abs(value - target) <= maxDistance; 5818} 5819function calcAxisDelta(delta, source, target, origin = 0.5) { 5820 delta.origin = origin; 5821 delta.originPoint = (0,number/* mixNumber */.t)(source.min, source.max, delta.origin); 5822 delta.scale = calcLength(target) / calcLength(source); 5823 delta.translate = 5824 (0,number/* mixNumber */.t)(target.min, target.max, delta.origin) - delta.originPoint; 5825 if ((delta.scale >= SCALE_MIN && delta.scale <= SCALE_MAX) || 5826 isNaN(delta.scale)) { 5827 delta.scale = 1.0; 5828 } 5829 if ((delta.translate >= TRANSLATE_MIN && 5830 delta.translate <= TRANSLATE_MAX) || 5831 isNaN(delta.translate)) { 5832 delta.translate = 0.0; 5833 } 5834} 5835function calcBoxDelta(delta, source, target, origin) { 5836 calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined); 5837 calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined); 5838} 5839function calcRelativeAxis(target, relative, parent, anchor = 0) { 5840 const anchorPoint = anchor 5841 ? (0,number/* mixNumber */.t)(parent.min, parent.max, anchor) 5842 : parent.min; 5843 target.min = anchorPoint + relative.min; 5844 target.max = target.min + calcLength(relative); 5845} 5846function calcRelativeBox(target, relative, parent, anchor) { 5847 calcRelativeAxis(target.x, relative.x, parent.x, anchor?.x); 5848 calcRelativeAxis(target.y, relative.y, parent.y, anchor?.y); 5849} 5850function calcRelativeAxisPosition(target, layout, parent, anchor = 0) { 5851 const anchorPoint = anchor 5852 ? (0,number/* mixNumber */.t)(parent.min, parent.max, anchor) 5853 : parent.min; 5854 target.min = layout.min - anchorPoint; 5855 target.max = target.min + calcLength(layout); 5856} 5857function calcRelativePosition(target, layout, parent, anchor) { 5858 calcRelativeAxisPosition(target.x, layout.x, parent.x, anchor?.x); 5859 calcRelativeAxisPosition(target.y, layout.y, parent.y, anchor?.y); 5860} 5861 5862 5863//# sourceMappingURL=delta-calc.mjs.map 5864 5865;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/press/utils/is-keyboard-accessible.mjs 5866const keyboardAccessibleElements = new Set([ 5867 "BUTTON", 5868 "INPUT", 5869 "SELECT", 5870 "TEXTAREA", 5871 "A", 5872]); 5873/** 5874 * Checks if an element is natively keyboard accessible (focusable). 5875 * Used by the press gesture to determine if we need to add tabIndex. 5876 */ 5877function isElementKeyboardAccessible(element) { 5878 return (keyboardAccessibleElements.has(element.tagName) || 5879 element.isContentEditable === true); 5880} 5881const textInputElements = new Set(["INPUT", "SELECT", "TEXTAREA"]); 5882/** 5883 * Checks if an element has text selection or direct interaction behavior 5884 * that should block drag gestures from starting. 5885 * 5886 * This specifically targets form controls where the user might want to select 5887 * text or interact with the control (e.g., sliders, dropdowns). 5888 * 5889 * Buttons and links are NOT included because they don't have click-and-move 5890 * actions of their own - they only respond to click events, so dragging 5891 * should still work when initiated from these elements. 5892 */ 5893function isElementTextInput(element) { 5894 return (textInputElements.has(element.tagName) || 5895 element.isContentEditable === true); 5896} 5897 5898 5899//# sourceMappingURL=is-keyboard-accessible.mjs.map 5900 5901;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/events/add-dom-event.mjs 5902function addDomEvent(target, eventName, handler, options = { passive: true }) { 5903 target.addEventListener(eventName, handler, options); 5904 return () => target.removeEventListener(eventName, handler); 5905} 5906 5907 5908//# sourceMappingURL=add-dom-event.mjs.map 5909 5910// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/resize/index.mjs + 2 modules 5911var resize = __webpack_require__(38392); 5912;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs 5913const isPrimaryPointer = (event) => { 5914 if (event.pointerType === "mouse") { 5915 return typeof event.button !== "number" || event.button <= 0; 5916 } 5917 else { 5918 /** 5919 * isPrimary is true for all mice buttons, whereas every touch point 5920 * is regarded as its own input. So subsequent concurrent touch points 5921 * will be false. 5922 * 5923 * Specifically match against false here as incomplete versions of 5924 * PointerEvents in very old browser might have it set as undefined. 5925 */ 5926 return event.isPrimary !== false; 5927 } 5928}; 5929 5930 5931//# sourceMappingURL=is-primary-pointer.mjs.map 5932 5933;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/event-info.mjs 5934 5935 5936function extractEventInfo(event) { 5937 return { 5938 point: { 5939 x: event.pageX, 5940 y: event.pageY, 5941 }, 5942 }; 5943} 5944const addPointerInfo = (handler) => (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event)); 5945 5946 5947//# sourceMappingURL=event-info.mjs.map 5948 5949;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/add-pointer-event.mjs 5950 5951 5952 5953function addPointerEvent(target, eventName, handler, options) { 5954 return addDomEvent(target, eventName, addPointerInfo(handler), options); 5955} 5956 5957 5958//# sourceMappingURL=add-pointer-event.mjs.map 5959 5960;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/get-context-window.mjs 5961// Fixes https://github.com/motiondivision/motion/issues/2270 5962const getContextWindow = ({ current }) => { 5963 return current ? current.ownerDocument.defaultView : null; 5964}; 5965 5966 5967//# sourceMappingURL=get-context-window.mjs.map 5968 5969// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/pipe.mjs 5970var pipe = __webpack_require__(24750); 5971;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/distance.mjs 5972const distance = (a, b) => Math.abs(a - b); 5973function distance2D(a, b) { 5974 // Multi-dimensional 5975 const xDelta = distance(a.x, b.x); 5976 const yDelta = distance(a.y, b.y); 5977 return Math.sqrt(xDelta ** 2 + yDelta ** 2); 5978} 5979 5980 5981//# sourceMappingURL=distance.mjs.map 5982 5983;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs 5984 5985 5986 5987 5988 5989 5990const overflowStyles = /*#__PURE__*/ new Set(["auto", "scroll"]); 5991/** 5992 * @internal 5993 */ 5994class PanSession { 5995 constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, element, } = {}) { 5996 /** 5997 * @internal 5998 */ 5999 this.startEvent = null; 6000 /** 6001 * @internal 6002 */ 6003 this.lastMoveEvent = null; 6004 /** 6005 * @internal 6006 */ 6007 this.lastMoveEventInfo = null; 6008 /** 6009 * Raw (untransformed) event info, re-transformed each frame 6010 * so transformPagePoint sees the current parent matrix. 6011 * @internal 6012 */ 6013 this.lastRawMoveEventInfo = null; 6014 /** 6015 * @internal 6016 */ 6017 this.handlers = {}; 6018 /** 6019 * @internal 6020 */ 6021 this.contextWindow = window; 6022 /** 6023 * Scroll positions of scrollable ancestors and window. 6024 * @internal 6025 */ 6026 this.scrollPositions = new Map(); 6027 /** 6028 * Cleanup function for scroll listeners. 6029 * @internal 6030 */ 6031 this.removeScrollListeners = null; 6032 this.onElementScroll = (event) => { 6033 this.handleScroll(event.target); 6034 }; 6035 this.onWindowScroll = () => { 6036 this.handleScroll(window); 6037 }; 6038 this.updatePoint = () => { 6039 if (!(this.lastMoveEvent && this.lastMoveEventInfo)) 6040 return; 6041 // Re-transform raw point through current transformPagePoint so 6042 // animated parent transforms (e.g. rotation) are picked up each frame 6043 if (this.lastRawMoveEventInfo) { 6044 this.lastMoveEventInfo = transformPoint(this.lastRawMoveEventInfo, this.transformPagePoint); 6045 } 6046 const info = getPanInfo(this.lastMoveEventInfo, this.history); 6047 const isPanStarted = this.startEvent !== null; 6048 // Only start panning if the offset is larger than 3 pixels. If we make it 6049 // any larger than this we'll want to reset the pointer history 6050 // on the first update to avoid visual snapping to the cursor. 6051 const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= this.distanceThreshold; 6052 if (!isPanStarted && !isDistancePastThreshold) 6053 return; 6054 const { point } = info; 6055 const { timestamp } = frameloop_frame.frameData; 6056 this.history.push({ ...point, timestamp }); 6057 const { onStart, onMove } = this.handlers; 6058 if (!isPanStarted) { 6059 onStart && onStart(this.lastMoveEvent, info); 6060 this.startEvent = this.lastMoveEvent; 6061 } 6062 onMove && onMove(this.lastMoveEvent, info); 6063 }; 6064 this.handlePointerMove = (event, info) => { 6065 this.lastMoveEvent = event; 6066 this.lastRawMoveEventInfo = info; 6067 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint); 6068 // Throttle mouse move event to once per frame 6069 frameloop_frame/* frame */.Wi.update(this.updatePoint, true); 6070 }; 6071 this.handlePointerUp = (event, info) => { 6072 this.end(); 6073 const { onEnd, onSessionEnd, resumeAnimation } = this.handlers; 6074 // Resume animation if dragSnapToOrigin is set OR if no drag started (user just clicked) 6075 // This ensures constraint animations continue when interrupted by a click 6076 if (this.dragSnapToOrigin || !this.startEvent) { 6077 resumeAnimation && resumeAnimation(); 6078 } 6079 if (!(this.lastMoveEvent && this.lastMoveEventInfo)) 6080 return; 6081 const panInfo = getPanInfo(event.type === "pointercancel" 6082 ? this.lastMoveEventInfo 6083 : transformPoint(info, this.transformPagePoint), this.history); 6084 if (this.startEvent && onEnd) { 6085 onEnd(event, panInfo); 6086 } 6087 onSessionEnd && onSessionEnd(event, panInfo); 6088 }; 6089 // If we have more than one touch, don't start detecting this gesture 6090 if (!isPrimaryPointer(event)) 6091 return; 6092 this.dragSnapToOrigin = dragSnapToOrigin; 6093 this.handlers = handlers; 6094 this.transformPagePoint = transformPagePoint; 6095 this.distanceThreshold = distanceThreshold; 6096 this.contextWindow = contextWindow || window; 6097 const info = extractEventInfo(event); 6098 const initialInfo = transformPoint(info, this.transformPagePoint); 6099 const { point } = initialInfo; 6100 const { timestamp } = frameloop_frame.frameData; 6101 this.history = [{ ...point, timestamp }]; 6102 const { onSessionStart } = handlers; 6103 onSessionStart && 6104 onSessionStart(event, getPanInfo(initialInfo, this.history)); 6105 this.removeListeners = (0,pipe/* pipe */.z)(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp)); 6106 // Start scroll tracking if element provided 6107 if (element) { 6108 this.startScrollTracking(element); 6109 } 6110 } 6111 /** 6112 * Start tracking scroll on ancestors and window. 6113 */ 6114 startScrollTracking(element) { 6115 // Store initial scroll positions for scrollable ancestors 6116 let current = element.parentElement; 6117 while (current) { 6118 const style = getComputedStyle(current); 6119 if (overflowStyles.has(style.overflowX) || 6120 overflowStyles.has(style.overflowY)) { 6121 this.scrollPositions.set(current, { 6122 x: current.scrollLeft, 6123 y: current.scrollTop, 6124 }); 6125 } 6126 current = current.parentElement; 6127 } 6128 // Track window scroll 6129 this.scrollPositions.set(window, { 6130 x: window.scrollX, 6131 y: window.scrollY, 6132 }); 6133 // Capture listener catches element scroll events as they bubble 6134 window.addEventListener("scroll", this.onElementScroll, { 6135 capture: true, 6136 }); 6137 // Direct window scroll listener (window scroll doesn't bubble) 6138 window.addEventListener("scroll", this.onWindowScroll); 6139 this.removeScrollListeners = () => { 6140 window.removeEventListener("scroll", this.onElementScroll, { 6141 capture: true, 6142 }); 6143 window.removeEventListener("scroll", this.onWindowScroll); 6144 }; 6145 } 6146 /** 6147 * Handle scroll compensation during drag. 6148 * 6149 * For element scroll: adjusts history origin since pageX/pageY doesn't change. 6150 * For window scroll: adjusts lastMoveEventInfo since pageX/pageY would change. 6151 */ 6152 handleScroll(target) { 6153 const initial = this.scrollPositions.get(target); 6154 if (!initial) 6155 return; 6156 const isWindow = target === window; 6157 const current = isWindow 6158 ? { x: window.scrollX, y: window.scrollY } 6159 : { 6160 x: target.scrollLeft, 6161 y: target.scrollTop, 6162 }; 6163 const delta = { x: current.x - initial.x, y: current.y - initial.y }; 6164 if (delta.x === 0 && delta.y === 0) 6165 return; 6166 if (isWindow) { 6167 // Window scroll: pageX/pageY changes, so update lastMoveEventInfo 6168 if (this.lastMoveEventInfo) { 6169 this.lastMoveEventInfo.point.x += delta.x; 6170 this.lastMoveEventInfo.point.y += delta.y; 6171 } 6172 } 6173 else { 6174 // Element scroll: pageX/pageY unchanged, so adjust history origin 6175 if (this.history.length > 0) { 6176 this.history[0].x -= delta.x; 6177 this.history[0].y -= delta.y; 6178 } 6179 } 6180 this.scrollPositions.set(target, current); 6181 frameloop_frame/* frame */.Wi.update(this.updatePoint, true); 6182 } 6183 updateHandlers(handlers) { 6184 this.handlers = handlers; 6185 } 6186 end() { 6187 this.removeListeners && this.removeListeners(); 6188 this.removeScrollListeners && this.removeScrollListeners(); 6189 this.scrollPositions.clear(); 6190 (0,frameloop_frame/* cancelFrame */.Pn)(this.updatePoint); 6191 } 6192} 6193function transformPoint(info, transformPagePoint) { 6194 return transformPagePoint ? { point: transformPagePoint(info.point) } : info; 6195} 6196function subtractPoint(a, b) { 6197 return { x: a.x - b.x, y: a.y - b.y }; 6198} 6199function getPanInfo({ point }, history) { 6200 return { 6201 point, 6202 delta: subtractPoint(point, lastDevicePoint(history)), 6203 offset: subtractPoint(point, startDevicePoint(history)), 6204 velocity: getVelocity(history, 0.1), 6205 }; 6206} 6207function startDevicePoint(history) { 6208 return history[0]; 6209} 6210function lastDevicePoint(history) { 6211 return history[history.length - 1]; 6212} 6213function getVelocity(history, timeDelta) { 6214 if (history.length < 2) { 6215 return { x: 0, y: 0 }; 6216 } 6217 let i = history.length - 1; 6218 let timestampedPoint = null; 6219 const lastPoint = lastDevicePoint(history); 6220 while (i >= 0) { 6221 timestampedPoint = history[i]; 6222 if (lastPoint.timestamp - timestampedPoint.timestamp > 6223 (0,time_conversion/* secondsToMilliseconds */.w)(timeDelta)) { 6224 break; 6225 } 6226 i--; 6227 } 6228 if (!timestampedPoint) { 6229 return { x: 0, y: 0 }; 6230 } 6231 /** 6232 * If the selected point is the pointer-down origin (history[0]), 6233 * there are better movement points available, and the time gap 6234 * is suspiciously large (>2x timeDelta), use the next point instead. 6235 * This prevents stale pointer-down points from diluting velocity 6236 * in hold-then-flick gestures. 6237 */ 6238 if (timestampedPoint === history[0] && 6239 history.length > 2 && 6240 lastPoint.timestamp - timestampedPoint.timestamp > 6241 (0,time_conversion/* secondsToMilliseconds */.w)(timeDelta) * 2) { 6242 timestampedPoint = history[1]; 6243 } 6244 const time = (0,time_conversion/* millisecondsToSeconds */.X)(lastPoint.timestamp - timestampedPoint.timestamp); 6245 if (time === 0) { 6246 return { x: 0, y: 0 }; 6247 } 6248 const currentVelocity = { 6249 x: (lastPoint.x - timestampedPoint.x) / time, 6250 y: (lastPoint.y - timestampedPoint.y) / time, 6251 }; 6252 if (currentVelocity.x === Infinity) { 6253 currentVelocity.x = 0; 6254 } 6255 if (currentVelocity.y === Infinity) { 6256 currentVelocity.y = 0; 6257 } 6258 return currentVelocity; 6259} 6260 6261 6262//# sourceMappingURL=PanSession.mjs.map 6263 6264// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/progress.mjs 6265var progress = __webpack_require__(81645); 6266;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs 6267 6268 6269 6270/** 6271 * Apply constraints to a point. These constraints are both physical along an 6272 * axis, and an elastic factor that determines how much to constrain the point 6273 * by if it does lie outside the defined parameters. 6274 */ 6275function applyConstraints(point, { min, max }, elastic) { 6276 if (min !== undefined && point < min) { 6277 // If we have a min point defined, and this is outside of that, constrain 6278 point = elastic 6279 ? (0,number/* mixNumber */.t)(min, point, elastic.min) 6280 : Math.max(point, min); 6281 } 6282 else if (max !== undefined && point > max) { 6283 // If we have a max point defined, and this is outside of that, constrain 6284 point = elastic 6285 ? (0,number/* mixNumber */.t)(max, point, elastic.max) 6286 : Math.min(point, max); 6287 } 6288 return point; 6289} 6290/** 6291 * Calculate constraints in terms of the viewport when defined relatively to the 6292 * measured axis. This is measured from the nearest edge, so a max constraint of 200 6293 * on an axis with a max value of 300 would return a constraint of 500 - axis length 6294 */ 6295function calcRelativeAxisConstraints(axis, min, max) { 6296 return { 6297 min: min !== undefined ? axis.min + min : undefined, 6298 max: max !== undefined 6299 ? axis.max + max - (axis.max - axis.min) 6300 : undefined, 6301 }; 6302} 6303/** 6304 * Calculate constraints in terms of the viewport when 6305 * defined relatively to the measured bounding box. 6306 */ 6307function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) { 6308 return { 6309 x: calcRelativeAxisConstraints(layoutBox.x, left, right), 6310 y: calcRelativeAxisConstraints(layoutBox.y, top, bottom), 6311 }; 6312} 6313/** 6314 * Calculate viewport constraints when defined as another viewport-relative axis 6315 */ 6316function calcViewportAxisConstraints(layoutAxis, constraintsAxis) { 6317 let min = constraintsAxis.min - layoutAxis.min; 6318 let max = constraintsAxis.max - layoutAxis.max; 6319 // If the constraints axis is actually smaller than the layout axis then we can 6320 // flip the constraints 6321 if (constraintsAxis.max - constraintsAxis.min < 6322 layoutAxis.max - layoutAxis.min) { 6323 [min, max] = [max, min]; 6324 } 6325 return { min, max }; 6326} 6327/** 6328 * Calculate viewport constraints when defined as another viewport-relative box 6329 */ 6330function calcViewportConstraints(layoutBox, constraintsBox) { 6331 return { 6332 x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x), 6333 y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y), 6334 }; 6335} 6336/** 6337 * Calculate a transform origin relative to the source axis, between 0-1, that results 6338 * in an asthetically pleasing scale/transform needed to project from source to target. 6339 */ 6340function calcOrigin(source, target) { 6341 let origin = 0.5; 6342 const sourceLength = calcLength(source); 6343 const targetLength = calcLength(target); 6344 if (targetLength > sourceLength) { 6345 origin = (0,progress/* progress */.Y)(target.min, target.max - sourceLength, source.min); 6346 } 6347 else if (sourceLength > targetLength) { 6348 origin = (0,progress/* progress */.Y)(source.min, source.max - targetLength, target.min); 6349 } 6350 return (0,clamp/* clamp */.u)(0, 1, origin); 6351} 6352/** 6353 * Rebase the calculated viewport constraints relative to the layout.min point. 6354 */ 6355function rebaseAxisConstraints(layout, constraints) { 6356 const relativeConstraints = {}; 6357 if (constraints.min !== undefined) { 6358 relativeConstraints.min = constraints.min - layout.min; 6359 } 6360 if (constraints.max !== undefined) { 6361 relativeConstraints.max = constraints.max - layout.min; 6362 } 6363 return relativeConstraints; 6364} 6365const defaultElastic = 0.35; 6366/** 6367 * Accepts a dragElastic prop and returns resolved elastic values for each axis. 6368 */ 6369function resolveDragElastic(dragElastic = defaultElastic) { 6370 if (dragElastic === false) { 6371 dragElastic = 0; 6372 } 6373 else if (dragElastic === true) { 6374 dragElastic = defaultElastic; 6375 } 6376 return { 6377 x: resolveAxisElastic(dragElastic, "left", "right"), 6378 y: resolveAxisElastic(dragElastic, "top", "bottom"), 6379 }; 6380} 6381function resolveAxisElastic(dragElastic, minLabel, maxLabel) { 6382 return { 6383 min: resolvePointElastic(dragElastic, minLabel), 6384 max: resolvePointElastic(dragElastic, maxLabel), 6385 }; 6386} 6387function resolvePointElastic(dragElastic, label) { 6388 return typeof dragElastic === "number" 6389 ? dragElastic 6390 : dragElastic[label] || 0; 6391} 6392 6393 6394//# sourceMappingURL=constraints.mjs.map 6395 6396;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs 6397 6398 6399 6400 6401 6402 6403 6404 6405 6406const elementDragControls = new WeakMap(); 6407class VisualElementDragControls { 6408 constructor(visualElement) { 6409 this.openDragLock = null; 6410 this.isDragging = false; 6411 this.currentDirection = null; 6412 this.originPoint = { x: 0, y: 0 }; 6413 /** 6414 * The permitted boundaries of travel, in pixels. 6415 */ 6416 this.constraints = false; 6417 this.hasMutatedConstraints = false; 6418 /** 6419 * The per-axis resolved elastic values. 6420 */ 6421 this.elastic = createBox(); 6422 /** 6423 * The latest pointer event. Used as fallback when the `cancel` and `stop` functions are called without arguments. 6424 */ 6425 this.latestPointerEvent = null; 6426 /** 6427 * The latest pan info. Used as fallback when the `cancel` and `stop` functions are called without arguments. 6428 */ 6429 this.latestPanInfo = null; 6430 this.visualElement = visualElement; 6431 } 6432 start(originEvent, { snapToCursor = false, distanceThreshold } = {}) { 6433 /** 6434 * Don't start dragging if this component is exiting 6435 */ 6436 const { presenceContext } = this.visualElement; 6437 if (presenceContext && presenceContext.isPresent === false) 6438 return; 6439 const onSessionStart = (event) => { 6440 if (snapToCursor) { 6441 this.snapToCursor(extractEventInfo(event).point); 6442 } 6443 this.stopAnimation(); 6444 }; 6445 const onStart = (event, info) => { 6446 // Attempt to grab the global drag gesture lock - maybe make this part of PanSession 6447 const { drag, dragPropagation, onDragStart } = this.getProps(); 6448 if (drag && !dragPropagation) { 6449 if (this.openDragLock) 6450 this.openDragLock(); 6451 this.openDragLock = setDragLock(drag); 6452 // If we don 't have the lock, don't start dragging 6453 if (!this.openDragLock) 6454 return; 6455 } 6456 this.latestPointerEvent = event; 6457 this.latestPanInfo = info; 6458 this.isDragging = true; 6459 this.currentDirection = null; 6460 this.resolveConstraints(); 6461 if (this.visualElement.projection) { 6462 this.visualElement.projection.isAnimationBlocked = true; 6463 this.visualElement.projection.target = undefined; 6464 } 6465 /** 6466 * Record gesture origin and pointer offset 6467 */ 6468 eachAxis((axis) => { 6469 let current = this.getAxisMotionValue(axis).get() || 0; 6470 /** 6471 * If the MotionValue is a percentage value convert to px 6472 */ 6473 if (units/* percent */.aQ.test(current)) { 6474 const { projection } = this.visualElement; 6475 if (projection && projection.layout) { 6476 const measuredAxis = projection.layout.layoutBox[axis]; 6477 if (measuredAxis) { 6478 const length = calcLength(measuredAxis); 6479 current = length * (parseFloat(current) / 100); 6480 } 6481 } 6482 } 6483 this.originPoint[axis] = current; 6484 }); 6485 // Fire onDragStart event 6486 if (onDragStart) { 6487 frameloop_frame/* frame */.Wi.update(() => onDragStart(event, info), false, true); 6488 } 6489 addValueToWillChange(this.visualElement, "transform"); 6490 const { animationState } = this.visualElement; 6491 animationState && animationState.setActive("whileDrag", true); 6492 }; 6493 const onMove = (event, info) => { 6494 this.latestPointerEvent = event; 6495 this.latestPanInfo = info; 6496 const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps(); 6497 // If we didn't successfully receive the gesture lock, early return. 6498 if (!dragPropagation && !this.openDragLock) 6499 return; 6500 const { offset } = info; 6501 // Attempt to detect drag direction if directionLock is true 6502 if (dragDirectionLock && this.currentDirection === null) { 6503 this.currentDirection = getCurrentDirection(offset); 6504 // If we've successfully set a direction, notify listener 6505 if (this.currentDirection !== null) { 6506 onDirectionLock && onDirectionLock(this.currentDirection); 6507 } 6508 return; 6509 } 6510 // Update each point with the latest position 6511 this.updateAxis("x", info.point, offset); 6512 this.updateAxis("y", info.point, offset); 6513 /** 6514 * Ideally we would leave the renderer to fire naturally at the end of 6515 * this frame but if the element is about to change layout as the result 6516 * of a re-render we want to ensure the browser can read the latest 6517 * bounding box to ensure the pointer and element don't fall out of sync. 6518 */ 6519 this.visualElement.render(); 6520 /** 6521 * This must fire after the render call as it might trigger a state 6522 * change which itself might trigger a layout update. 6523 */ 6524 if (onDrag) { 6525 frameloop_frame/* frame */.Wi.update(() => onDrag(event, info), false, true); 6526 } 6527 }; 6528 const onSessionEnd = (event, info) => { 6529 this.latestPointerEvent = event; 6530 this.latestPanInfo = info; 6531 this.stop(event, info); 6532 this.latestPointerEvent = null; 6533 this.latestPanInfo = null; 6534 }; 6535 const resumeAnimation = () => { 6536 const { dragSnapToOrigin: snap } = this.getProps(); 6537 if (snap || this.constraints) { 6538 this.startAnimation({ x: 0, y: 0 }); 6539 } 6540 }; 6541 const { dragSnapToOrigin } = this.getProps(); 6542 this.panSession = new PanSession(originEvent, { 6543 onSessionStart, 6544 onStart, 6545 onMove, 6546 onSessionEnd, 6547 resumeAnimation, 6548 }, { 6549 transformPagePoint: this.visualElement.getTransformPagePoint(), 6550 dragSnapToOrigin, 6551 distanceThreshold, 6552 contextWindow: getContextWindow(this.visualElement), 6553 element: this.visualElement.current, 6554 }); 6555 } 6556 /** 6557 * @internal 6558 */ 6559 stop(event, panInfo) { 6560 const finalEvent = event || this.latestPointerEvent; 6561 const finalPanInfo = panInfo || this.latestPanInfo; 6562 const isDragging = this.isDragging; 6563 this.cancel(); 6564 if (!isDragging || !finalPanInfo || !finalEvent) 6565 return; 6566 const { velocity } = finalPanInfo; 6567 this.startAnimation(velocity); 6568 const { onDragEnd } = this.getProps(); 6569 if (onDragEnd) { 6570 frameloop_frame/* frame */.Wi.postRender(() => onDragEnd(finalEvent, finalPanInfo)); 6571 } 6572 } 6573 /** 6574 * @internal 6575 */ 6576 cancel() { 6577 this.isDragging = false;
vendor: 4,707 bytes, lines 6578-6680
6578 const { projection, animationState } = this.visualElement; 6579 if (projection) { 6580 projection.isAnimationBlocked = false; 6581 } 6582 this.endPanSession(); 6583 const { dragPropagation } = this.getProps(); 6584 if (!dragPropagation && this.openDragLock) { 6585 this.openDragLock(); 6586 this.openDragLock = null; 6587 } 6588 animationState && animationState.setActive("whileDrag", false); 6589 } 6590 /** 6591 * Clean up the pan session without modifying other drag state. 6592 * This is used during unmount to ensure event listeners are removed 6593 * without affecting projection animations or drag locks. 6594 * @internal 6595 */ 6596 endPanSession() { 6597 this.panSession && this.panSession.end(); 6598 this.panSession = undefined; 6599 } 6600 updateAxis(axis, _point, offset) { 6601 const { drag } = this.getProps(); 6602 // If we're not dragging this axis, do an early return. 6603 if (!offset || !shouldDrag(axis, drag, this.currentDirection)) 6604 return; 6605 const axisValue = this.getAxisMotionValue(axis); 6606 let next = this.originPoint[axis] + offset[axis]; 6607 // Apply constraints 6608 if (this.constraints && this.constraints[axis]) { 6609 next = applyConstraints(next, this.constraints[axis], this.elastic[axis]); 6610 } 6611 axisValue.set(next); 6612 } 6613 resolveConstraints() { 6614 const { dragConstraints, dragElastic } = this.getProps(); 6615 const layout = this.visualElement.projection && 6616 !this.visualElement.projection.layout 6617 ? this.visualElement.projection.measure(false) 6618 : this.visualElement.projection?.layout; 6619 const prevConstraints = this.constraints; 6620 if (dragConstraints && isRefObject(dragConstraints)) { 6621 if (!this.constraints) { 6622 this.constraints = this.resolveRefConstraints(); 6623 } 6624 } 6625 else { 6626 if (dragConstraints && layout) { 6627 this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints); 6628 } 6629 else { 6630 this.constraints = false; 6631 } 6632 } 6633 this.elastic = resolveDragElastic(dragElastic); 6634 /** 6635 * If we're outputting to external MotionValues, we want to rebase the measured constraints 6636 * from viewport-relative to component-relative. This only applies to relative (non-ref) 6637 * constraints, as ref-based constraints from calcViewportConstraints are already in the 6638 * correct coordinate space for the motion value transform offset. 6639 */ 6640 if (prevConstraints !== this.constraints && 6641 !isRefObject(dragConstraints) && 6642 layout && 6643 this.constraints && 6644 !this.hasMutatedConstraints) { 6645 eachAxis((axis) => { 6646 if (this.constraints !== false && 6647 this.getAxisMotionValue(axis)) { 6648 this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]); 6649 } 6650 }); 6651 } 6652 } 6653 resolveRefConstraints() { 6654 const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps(); 6655 if (!constraints || !isRefObject(constraints)) 6656 return false; 6657 const constraintsElement = constraints.current; 6658 (0,errors/* invariant */.k)(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.", "drag-constraints-ref"); 6659 const { projection } = this.visualElement; 6660 // TODO 6661 if (!projection || !projection.layout) 6662 return false; 6663 /** 6664 * Refresh the root scroll offset so the constraint's viewport box 6665 * translates to correct page coordinates. The scroll captured at 6666 * drag mount can be stale if the document was scrolled afterwards â 6667 * e.g. via the browser restoring scroll on refresh, or an ancestor 6668 * layout effect running after this element's mount (#2829). 6669 * 6670 * Clear the cached scroll first so `updateScroll` bypasses its 6671 * per-animationId cache and re-reads the live value. 6672 */ 6673 if (projection.root) { 6674 projection.root.scroll = undefined; 6675 projection.root.updateScroll(); 6676 } 6677 const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint()); 6678 let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox); 6679 /** 6680 * If there's an onMeasureDragConstraints listener we call it and
vendor: 6,096 bytes, lines 6681-6811
6681 * if different constraints are returned, set constraints to that 6682 */ 6683 if (onMeasureDragConstraints) { 6684 const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints)); 6685 this.hasMutatedConstraints = !!userConstraints; 6686 if (userConstraints) { 6687 measuredConstraints = convertBoundingBoxToBox(userConstraints); 6688 } 6689 } 6690 return measuredConstraints; 6691 } 6692 startAnimation(velocity) { 6693 const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps(); 6694 const constraints = this.constraints || {}; 6695 const momentumAnimations = eachAxis((axis) => { 6696 if (!shouldDrag(axis, drag, this.currentDirection)) { 6697 return; 6698 } 6699 let transition = (constraints && constraints[axis]) || {}; 6700 if (dragSnapToOrigin === true || 6701 dragSnapToOrigin === axis) 6702 transition = { min: 0, max: 0 }; 6703 /** 6704 * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame 6705 * of spring animations so we should look into adding a disable spring option to `inertia`. 6706 * We could do something here where we affect the `bounceStiffness` and `bounceDamping` 6707 * using the value of `dragElastic`. 6708 */ 6709 const bounceStiffness = dragElastic ? 200 : 1000000; 6710 const bounceDamping = dragElastic ? 40 : 10000000; 6711 const inertia = { 6712 type: "inertia", 6713 velocity: dragMomentum ? velocity[axis] : 0, 6714 bounceStiffness, 6715 bounceDamping, 6716 timeConstant: 750, 6717 restDelta: 1, 6718 restSpeed: 10, 6719 ...dragTransition, 6720 ...transition, 6721 }; 6722 // If we're not animating on an externally-provided `MotionValue` we can use the 6723 // component's animation controls which will handle interactions with whileHover (etc), 6724 // otherwise we just have to animate the `MotionValue` itself. 6725 return this.startAxisValueAnimation(axis, inertia); 6726 }); 6727 // Run all animations and then resolve the new drag constraints. 6728 return Promise.all(momentumAnimations).then(onDragTransitionEnd); 6729 } 6730 startAxisValueAnimation(axis, transition) { 6731 const axisValue = this.getAxisMotionValue(axis); 6732 addValueToWillChange(this.visualElement, axis); 6733 return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false)); 6734 } 6735 stopAnimation() { 6736 eachAxis((axis) => this.getAxisMotionValue(axis).stop()); 6737 } 6738 /** 6739 * Drag works differently depending on which props are provided. 6740 * 6741 * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values. 6742 * - Otherwise, we apply the delta to the x/y motion values. 6743 */ 6744 getAxisMotionValue(axis) { 6745 const dragKey = `_drag${axis.toUpperCase()}`; 6746 const props = this.visualElement.getProps(); 6747 const externalMotionValue = props[dragKey]; 6748 return externalMotionValue 6749 ? externalMotionValue 6750 : this.visualElement.getValue(axis, this.visualElement.latestValues[axis] ?? 0); 6751 } 6752 snapToCursor(point) { 6753 eachAxis((axis) => { 6754 const { drag } = this.getProps(); 6755 // If we're not dragging this axis, do an early return. 6756 if (!shouldDrag(axis, drag, this.currentDirection)) 6757 return; 6758 const { projection } = this.visualElement; 6759 const axisValue = this.getAxisMotionValue(axis); 6760 if (projection && projection.layout) { 6761 const { min, max } = projection.layout.layoutBox[axis]; 6762 /** 6763 * The layout measurement includes the current transform value, 6764 * so we need to add it back to get the correct snap position. 6765 * This fixes an issue where elements with initial coordinates 6766 * would snap to the wrong position on the first drag. 6767 */ 6768 const current = axisValue.get() || 0; 6769 axisValue.set(point[axis] - (0,number/* mixNumber */.t)(min, max, 0.5) + current); 6770 } 6771 }); 6772 } 6773 /** 6774 * When the viewport resizes we want to check if the measured constraints 6775 * have changed and, if so, reposition the element within those new constraints 6776 * relative to where it was before the resize. 6777 */ 6778 scalePositionWithinConstraints() { 6779 if (!this.visualElement.current) 6780 return; 6781 const { drag, dragConstraints } = this.getProps(); 6782 const { projection } = this.visualElement; 6783 if (!isRefObject(dragConstraints) || !projection || !this.constraints) 6784 return; 6785 /** 6786 * Stop current animations as there can be visual glitching if we try to do 6787 * this mid-animation 6788 */ 6789 this.stopAnimation(); 6790 /** 6791 * Record the relative position of the dragged element relative to the 6792 * constraints box and save as a progress value. 6793 */ 6794 const boxProgress = { x: 0, y: 0 }; 6795 eachAxis((axis) => { 6796 const axisValue = this.getAxisMotionValue(axis); 6797 if (axisValue && this.constraints !== false) { 6798 const latest = axisValue.get(); 6799 boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]); 6800 } 6801 }); 6802 /** 6803 * Update the layout of this element and resolve the latest drag constraints 6804 */ 6805 const { transformTemplate } = this.visualElement.getProps(); 6806 this.visualElement.current.style.transform = transformTemplate 6807 ? transformTemplate({}, "") 6808 : "none"; 6809 projection.root && projection.root.updateScroll(); 6810 projection.updateLayout(); 6811 /**
vendor: 5,285 bytes, lines 6812-6932
6812 * Reset constraints so resolveConstraints() will recalculate them 6813 * with the freshly measured layout rather than returning the cached value. 6814 */ 6815 this.constraints = false; 6816 this.resolveConstraints(); 6817 /** 6818 * For each axis, calculate the current progress of the layout axis 6819 * within the new constraints. 6820 */ 6821 eachAxis((axis) => { 6822 if (!shouldDrag(axis, drag, null)) 6823 return; 6824 /** 6825 * Calculate a new transform based on the previous box progress 6826 */ 6827 const axisValue = this.getAxisMotionValue(axis); 6828 const { min, max } = this.constraints[axis]; 6829 axisValue.set((0,number/* mixNumber */.t)(min, max, boxProgress[axis])); 6830 }); 6831 /** 6832 * Flush the updated transform to the DOM synchronously to prevent 6833 * a visual flash at the element's CSS layout position (0,0) when 6834 * the transform was stripped for measurement. 6835 */ 6836 this.visualElement.render(); 6837 } 6838 addListeners() { 6839 if (!this.visualElement.current) 6840 return; 6841 elementDragControls.set(this.visualElement, this); 6842 const element = this.visualElement.current; 6843 /** 6844 * Attach a pointerdown event listener on this DOM element to initiate drag tracking. 6845 */ 6846 const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => { 6847 const { drag, dragListener = true } = this.getProps(); 6848 const target = event.target; 6849 /** 6850 * Only block drag if clicking on a text input child element 6851 * (input, textarea, select, contenteditable) where users might 6852 * want to select text or interact with the control. 6853 * 6854 * Buttons and links don't block drag since they don't have 6855 * click-and-move actions of their own. 6856 */ 6857 const isClickingTextInputChild = target !== element && isElementTextInput(target); 6858 if (drag && dragListener && !isClickingTextInputChild) { 6859 this.start(event); 6860 } 6861 }); 6862 /** 6863 * If using ref-based constraints, observe both the draggable element 6864 * and the constraint container for size changes via ResizeObserver. 6865 * Setup is deferred because dragConstraints.current is null when 6866 * addListeners first runs (React hasn't committed the ref yet). 6867 */ 6868 let stopResizeObservers; 6869 const measureDragConstraints = () => { 6870 const { dragConstraints } = this.getProps(); 6871 if (isRefObject(dragConstraints) && dragConstraints.current) { 6872 this.constraints = this.resolveRefConstraints(); 6873 if (!stopResizeObservers) { 6874 stopResizeObservers = startResizeObservers(element, dragConstraints.current, () => this.scalePositionWithinConstraints()); 6875 } 6876 } 6877 }; 6878 const { projection } = this.visualElement; 6879 const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints); 6880 if (projection && !projection.layout) { 6881 projection.root && projection.root.updateScroll(); 6882 projection.updateLayout(); 6883 } 6884 frameloop_frame/* frame */.Wi.read(measureDragConstraints); 6885 /** 6886 * Attach a window resize listener to scale the draggable target within its defined 6887 * constraints as the window resizes. 6888 */ 6889 const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints()); 6890 /** 6891 * If the element's layout changes, calculate the delta and apply that to 6892 * the drag gesture's origin point. 6893 */ 6894 const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => { 6895 if (this.isDragging && hasLayoutChanged) { 6896 eachAxis((axis) => { 6897 const motionValue = this.getAxisMotionValue(axis); 6898 if (!motionValue) 6899 return; 6900 this.originPoint[axis] += delta[axis].translate; 6901 motionValue.set(motionValue.get() + delta[axis].translate); 6902 }); 6903 this.visualElement.render(); 6904 } 6905 })); 6906 return () => { 6907 stopResizeListener(); 6908 stopPointerListener(); 6909 stopMeasureLayoutListener(); 6910 stopLayoutUpdateListener && stopLayoutUpdateListener(); 6911 stopResizeObservers && stopResizeObservers(); 6912 }; 6913 } 6914 getProps() { 6915 const props = this.visualElement.getProps(); 6916 const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props; 6917 return { 6918 ...props, 6919 drag, 6920 dragDirectionLock, 6921 dragPropagation, 6922 dragConstraints, 6923 dragElastic, 6924 dragMomentum, 6925 }; 6926 } 6927} 6928function skipFirstCall(callback) { 6929 let isFirst = true; 6930 return () => { 6931 if (isFirst) { 6932 isFirst = false;
vendor: 5,698 bytes, lines 6933-7107
6933 return; 6934 } 6935 callback(); 6936 }; 6937} 6938function startResizeObservers(element, constraintsElement, onResize) { 6939 const stopElement = (0,resize/* resize */.S)(element, skipFirstCall(onResize)); 6940 const stopContainer = (0,resize/* resize */.S)(constraintsElement, skipFirstCall(onResize)); 6941 return () => { 6942 stopElement(); 6943 stopContainer(); 6944 }; 6945} 6946function shouldDrag(direction, drag, currentDirection) { 6947 return ((drag === true || drag === direction) && 6948 (currentDirection === null || currentDirection === direction)); 6949} 6950/** 6951 * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower 6952 * than the provided threshold, return `null`. 6953 * 6954 * @param offset - The x/y offset from origin. 6955 * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction. 6956 */ 6957function getCurrentDirection(offset, lockThreshold = 10) { 6958 let direction = null; 6959 if (Math.abs(offset.y) > lockThreshold) { 6960 direction = "y"; 6961 } 6962 else if (Math.abs(offset.x) > lockThreshold) { 6963 direction = "x"; 6964 } 6965 return direction; 6966} 6967 6968 6969//# sourceMappingURL=VisualElementDragControls.mjs.map 6970 6971;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/index.mjs 6972 6973 6974 6975 6976class DragGesture extends Feature { 6977 constructor(node) { 6978 super(node); 6979 this.removeGroupControls = noop/* noop */.Z; 6980 this.removeListeners = noop/* noop */.Z; 6981 this.controls = new VisualElementDragControls(node); 6982 } 6983 mount() { 6984 // If we've been provided a DragControls for manual control over the drag gesture, 6985 // subscribe this component to it on mount. 6986 const { dragControls } = this.node.getProps(); 6987 if (dragControls) { 6988 this.removeGroupControls = dragControls.subscribe(this.controls); 6989 } 6990 this.removeListeners = this.controls.addListeners() || noop/* noop */.Z; 6991 } 6992 update() { 6993 const { dragControls } = this.node.getProps(); 6994 const { dragControls: prevDragControls } = this.node.prevProps || {}; 6995 if (dragControls !== prevDragControls) { 6996 this.removeGroupControls(); 6997 if (dragControls) { 6998 this.removeGroupControls = dragControls.subscribe(this.controls); 6999 } 7000 } 7001 } 7002 unmount() { 7003 this.removeGroupControls(); 7004 this.removeListeners(); 7005 /** 7006 * In React 19, during list reorder reconciliation, components may 7007 * briefly unmount and remount while the drag is still active. If we're 7008 * actively dragging, we should NOT end the pan session - it will 7009 * continue tracking pointer events via its window-level listeners. 7010 * 7011 * The pan session will be properly cleaned up when: 7012 * 1. The drag ends naturally (pointerup/pointercancel) 7013 * 2. The component is truly removed from the DOM 7014 */ 7015 if (!this.controls.isDragging) { 7016 this.controls.endPanSession(); 7017 } 7018 } 7019} 7020 7021 7022//# sourceMappingURL=index.mjs.map 7023 7024;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/pan/index.mjs 7025 7026 7027 7028 7029 7030 7031const asyncHandler = (handler) => (event, info) => { 7032 if (handler) { 7033 frameloop_frame/* frame */.Wi.update(() => handler(event, info), false, true); 7034 } 7035}; 7036class PanGesture extends Feature { 7037 constructor() { 7038 super(...arguments); 7039 this.removePointerDownListener = noop/* noop */.Z; 7040 } 7041 onPointerDown(pointerDownEvent) { 7042 this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { 7043 transformPagePoint: this.node.getTransformPagePoint(), 7044 contextWindow: getContextWindow(this.node), 7045 }); 7046 } 7047 createPanHandlers() { 7048 const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps(); 7049 return { 7050 onSessionStart: asyncHandler(onPanSessionStart), 7051 onStart: asyncHandler(onPanStart), 7052 onMove: asyncHandler(onPan), 7053 onEnd: (event, info) => { 7054 delete this.session; 7055 if (onPanEnd) { 7056 frameloop_frame/* frame */.Wi.postRender(() => onPanEnd(event, info)); 7057 } 7058 }, 7059 }; 7060 } 7061 mount() { 7062 this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event)); 7063 } 7064 update() { 7065 this.session && this.session.updateHandlers(this.createPanHandlers()); 7066 } 7067 unmount() { 7068 this.removePointerDownListener(); 7069 this.session && this.session.end(); 7070 } 7071} 7072 7073 7074//# sourceMappingURL=index.mjs.map 7075 7076;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/node/state.mjs 7077/** 7078 * This should only ever be modified on the client otherwise it'll 7079 * persist through server requests. If we need instanced states we 7080 * could lazy-init via root. 7081 */ 7082const globalProjectionState = { 7083 /** 7084 * Global flag as to whether the tree has animated since the last time 7085 * we resized the window 7086 */ 7087 hasAnimatedSinceResize: true, 7088 /** 7089 * We set this to true once, on the first update. Any nodes added to the tree beyond that 7090 * update will be given a `data-projection-id` attribute. 7091 */ 7092 hasEverUpdated: false, 7093}; 7094 7095 7096//# sourceMappingURL=state.mjs.map 7097 7098// EXTERNAL MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs 7099var use_presence = __webpack_require__(49637); 7100;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs 7101/* __next_internal_client_entry_do_not_use__ MeasureLayout auto */ 7102 7103 7104 7105 7106 7107/**
7108 * Track whether we've taken any snapshots yet. If not, 7109 * we can safely skip notification of didUpdate. 7110 * 7111 * Difficult to capture in a test but to prevent flickering 7112 * we must set this to true either on update or unmount. 7113 * Running `next-env/layout-id` in Safari will show this behaviour if broken. 7114 */ let hasTakenAnySnapshot = false; 7115class MeasureLayoutWithContext extends react.Component { 7116 /** 7117 * This only mounts projection nodes for components that 7118 * need measuring, we might want to do it for all components 7119 * in order to incorporate transforms 7120 */ componentDidMount() { 7121 const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props; 7122 const { projection } = visualElement; 7123 if (projection) { 7124 if (layoutGroup.group) layoutGroup.group.add(projection); 7125 if (switchLayoutGroup && switchLayoutGroup.register && layoutId) { 7126 switchLayoutGroup.register(projection); 7127 } 7128 if (hasTakenAnySnapshot) { 7129 projection.root.didUpdate(); 7130 } 7131 projection.addEventListener("animationComplete", ()=>{ 7132 this.safeToRemove(); 7133 }); 7134 projection.setOptions({ 7135 ...projection.options, 7136 layoutDependency: this.props.layoutDependency, 7137 onExitComplete: ()=>this.safeToRemove() 7138 }); 7139 } 7140 globalProjectionState.hasEverUpdated = true; 7141 } 7142 getSnapshotBeforeUpdate(prevProps) { 7143 const { layoutDependency, visualElement, drag, isPresent } = this.props; 7144 const { projection } = visualElement; 7145 if (!projection) return null; 7146 /** 7147 * TODO: We use this data in relegate to determine whether to 7148 * promote a previous element. There's no guarantee its presence data 7149 * will have updated by this point - if a bug like this arises it will 7150 * have to be that we markForRelegation and then find a new lead some other way, 7151 * perhaps in didUpdate 7152 */ projection.isPresent = isPresent; 7153 if (prevProps.layoutDependency !== layoutDependency) { 7154 projection.setOptions({ 7155 ...projection.options, 7156 layoutDependency 7157 }); 7158 } 7159 hasTakenAnySnapshot = true; 7160 if (drag || prevProps.layoutDependency !== layoutDependency || layoutDependency === undefined || prevProps.isPresent !== isPresent) { 7161 projection.willUpdate(); 7162 } else { 7163 this.safeToRemove(); 7164 } 7165 if (prevProps.isPresent !== isPresent) { 7166 if (isPresent) { 7167 projection.promote(); 7168 } else if (!projection.relegate()) { 7169 /** 7170 * If there's another stack member taking over from this one, 7171 * it's in charge of the exit animation and therefore should 7172 * be in charge of the safe to remove. Otherwise we call it here. 7173 */ frameloop_frame/* frame */.Wi.postRender(()=>{ 7174 const stack = projection.getStack(); 7175 if (!stack || !stack.members.length) { 7176 this.safeToRemove(); 7177 } 7178 }); 7179 } 7180 } 7181 return null; 7182 } 7183 componentDidUpdate() { 7184 const { visualElement, layoutAnchor } = this.props; 7185 const { projection } = visualElement; 7186 if (projection) { 7187 projection.options.layoutAnchor = layoutAnchor; 7188 projection.root.didUpdate(); 7189 microtask/* microtask */.g.postRender(()=>{ 7190 if (!projection.currentAnimation && projection.isLead()) { 7191 this.safeToRemove(); 7192 } 7193 }); 7194 } 7195 } 7196 componentWillUnmount() { 7197 const { visualElement, layoutGroup, switchLayoutGroup: promoteContext } = this.props; 7198 const { projection } = visualElement; 7199 hasTakenAnySnapshot = true; 7200 if (projection) { 7201 projection.scheduleCheckAfterUnmount(); 7202 if (layoutGroup && layoutGroup.group) layoutGroup.group.remove(projection); 7203 if (promoteContext && promoteContext.deregister) promoteContext.deregister(projection); 7204 } 7205 } 7206 safeToRemove() { 7207 const { safeToRemove } = this.props; 7208 safeToRemove && safeToRemove(); 7209 } 7210 render() { 7211 return null; 7212 } 7213} 7214function MeasureLayout(props) { 7215 const [isPresent, safeToRemove] = (0,use_presence/* usePresence */.oO)(); 7216 const layoutGroup = (0,react.useContext)(LayoutGroupContext/* LayoutGroupContext */.p); 7217 return (0,jsx_runtime.jsx)(MeasureLayoutWithContext, { 7218 ...props, 7219 layoutGroup: layoutGroup, 7220 switchLayoutGroup: (0,react.useContext)(SwitchLayoutGroupContext), 7221 isPresent: isPresent, 7222 safeToRemove: safeToRemove 7223 }); 7224} 7225 //# sourceMappingURL=MeasureLayout.mjs.map 7226 7227;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/animate/single-value.mjs 7228 7229 7230 7231 7232function animateSingleValue(value, keyframes, options) { 7233 const motionValue$1 = (0,is_motion_value/* isMotionValue */.i)(value) ? value : (0,es_value/* motionValue */.BX)(value); 7234 motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options)); 7235 return motionValue$1.animation; 7236} 7237 7238 7239//# sourceMappingURL=single-value.mjs.map 7240 7241;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/delay.mjs 7242 7243 7244 7245 7246/** 7247 * Timeout defined in ms 7248 */ 7249function delay(callback, timeout) { 7250 const start = sync_time/* time */.X.now(); 7251 const checkElapsed = ({ timestamp }) => {
7252 const elapsed = timestamp - start; 7253 if (elapsed >= timeout) { 7254 (0,frameloop_frame/* cancelFrame */.Pn)(checkElapsed); 7255 callback(elapsed - timeout); 7256 } 7257 }; 7258 frameloop_frame/* frame */.Wi.setup(checkElapsed, true); 7259 return () => (0,frameloop_frame/* cancelFrame */.Pn)(checkElapsed); 7260} 7261function delayInSeconds(callback, timeout) { 7262 return delay(callback, secondsToMilliseconds(timeout)); 7263} 7264 7265 7266//# sourceMappingURL=delay.mjs.map 7267 7268// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/is-svg-element.mjs 7269var is_svg_element = __webpack_require__(51413); 7270;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/is-svg-svg-element.mjs 7271 7272 7273/** 7274 * Checks if an element is specifically an SVGSVGElement (the root SVG element) 7275 * in a way that works across iframes 7276 */ 7277function isSVGSVGElement(element) { 7278 return (0,is_svg_element/* isSVGElement */.v)(element) && element.tagName === "svg"; 7279} 7280 7281 7282//# sourceMappingURL=is-svg-svg-element.mjs.map 7283 7284;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/animation/mix-values.mjs 7285 7286 7287 7288 7289const borderLabels = [ 7290 "borderTopLeftRadius", 7291 "borderTopRightRadius", 7292 "borderBottomLeftRadius", 7293 "borderBottomRightRadius", 7294]; 7295const numBorders = borderLabels.length; 7296const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value; 7297const isPx = (value) => typeof value === "number" || units.px.test(value); 7298function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) { 7299 if (shouldCrossfadeOpacity) { 7300 target.opacity = (0,number/* mixNumber */.t)(0, lead.opacity ?? 1, easeCrossfadeIn(progress)); 7301 target.opacityExit = (0,number/* mixNumber */.t)(follow.opacity ?? 1, 0, easeCrossfadeOut(progress)); 7302 } 7303 else if (isOnlyMember) { 7304 target.opacity = (0,number/* mixNumber */.t)(follow.opacity ?? 1, lead.opacity ?? 1, progress); 7305 } 7306 /** 7307 * Mix border radius 7308 */ 7309 for (let i = 0; i < numBorders; i++) { 7310 const borderLabel = borderLabels[i]; 7311 let followRadius = getRadius(follow, borderLabel); 7312 let leadRadius = getRadius(lead, borderLabel); 7313 if (followRadius === undefined && leadRadius === undefined) 7314 continue; 7315 followRadius || (followRadius = 0); 7316 leadRadius || (leadRadius = 0); 7317 const canMix = followRadius === 0 || 7318 leadRadius === 0 || 7319 isPx(followRadius) === isPx(leadRadius); 7320 if (canMix) { 7321 target[borderLabel] = Math.max((0,number/* mixNumber */.t)(asNumber(followRadius), asNumber(leadRadius), progress), 0); 7322 if (units/* percent */.aQ.test(leadRadius) || units/* percent */.aQ.test(followRadius)) { 7323 target[borderLabel] += "%"; 7324 } 7325 } 7326 else { 7327 target[borderLabel] = leadRadius; 7328 } 7329 } 7330 /** 7331 * Mix rotation 7332 */ 7333 if (follow.rotate || lead.rotate) { 7334 target.rotate = (0,number/* mixNumber */.t)(follow.rotate || 0, lead.rotate || 0, progress); 7335 } 7336} 7337function getRadius(values, radiusName) { 7338 return values[radiusName] !== undefined 7339 ? values[radiusName] 7340 : values.borderRadius; 7341} 7342const easeCrossfadeIn = /*@__PURE__*/ compress(0, 0.5, circ/* circOut */.Bn); 7343const easeCrossfadeOut = /*@__PURE__*/ compress(0.5, 0.95, noop/* noop */.Z); 7344function compress(min, max, easing) { 7345 return (p) => { 7346 // Could replace ifs with clamp 7347 if (p < min) 7348 return 0; 7349 if (p > max) 7350 return 1; 7351 return easing((0,progress/* progress */.Y)(min, max, p)); 7352 }; 7353} 7354 7355 7356//# sourceMappingURL=mix-values.mjs.map 7357 7358;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/geometry/copy.mjs 7359/** 7360 * Reset an axis to the provided origin box. 7361 * 7362 * This is a mutative operation. 7363 */ 7364function copyAxisInto(axis, originAxis) { 7365 axis.min = originAxis.min; 7366 axis.max = originAxis.max; 7367} 7368/** 7369 * Reset a box to the provided origin box. 7370 * 7371 * This is a mutative operation. 7372 */ 7373function copyBoxInto(box, originBox) { 7374 copyAxisInto(box.x, originBox.x); 7375 copyAxisInto(box.y, originBox.y); 7376} 7377/** 7378 * Reset a delta to the provided origin box. 7379 * 7380 * This is a mutative operation. 7381 */ 7382function copyAxisDeltaInto(delta, originDelta) { 7383 delta.translate = originDelta.translate; 7384 delta.scale = originDelta.scale; 7385 delta.originPoint = originDelta.originPoint; 7386 delta.origin = originDelta.origin; 7387} 7388 7389 7390//# sourceMappingURL=copy.mjs.map 7391 7392;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/geometry/delta-remove.mjs 7393 7394 7395 7396 7397/** 7398 * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse 7399 */ 7400function removePointDelta(point, translate, scale, originPoint, boxScale) { 7401 point -= translate; 7402 point = scalePoint(point, 1 / scale, originPoint); 7403 if (boxScale !== undefined) { 7404 point = scalePoint(point, 1 / boxScale, originPoint); 7405 } 7406 return point; 7407} 7408/** 7409 * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse 7410 */ 7411function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) { 7412 if (units/* percent */.aQ.test(translate)) { 7413 translate = parseFloat(translate); 7414 const relativeProgress = (0,number/* mixNumber */.t)(sourceAxis.min, sourceAxis.max, translate / 100); 7415 translate = relativeProgress - sourceAxis.min; 7416 }
vendor: 4,854 bytes, lines 7417-7546
7417 if (typeof translate !== "number") 7418 return; 7419 let originPoint = (0,number/* mixNumber */.t)(originAxis.min, originAxis.max, origin); 7420 if (axis === originAxis) 7421 originPoint -= translate; 7422 axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale); 7423 axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale); 7424} 7425/** 7426 * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse 7427 * and acts as a bridge between motion values and removeAxisDelta 7428 */ 7429function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) { 7430 removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis); 7431} 7432/** 7433 * The names of the motion values we want to apply as translation, scale and origin. 7434 */ 7435const xKeys = ["x", "scaleX", "originX"]; 7436const yKeys = ["y", "scaleY", "originY"]; 7437/** 7438 * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse 7439 * and acts as a bridge between motion values and removeAxisDelta 7440 */ 7441function removeBoxTransforms(box, transforms, originBox, sourceBox) { 7442 removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined); 7443 removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined); 7444} 7445 7446 7447//# sourceMappingURL=delta-remove.mjs.map 7448 7449;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/geometry/utils.mjs 7450 7451 7452function isAxisDeltaZero(delta) { 7453 return delta.translate === 0 && delta.scale === 1; 7454} 7455function isDeltaZero(delta) { 7456 return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y); 7457} 7458function axisEquals(a, b) { 7459 return a.min === b.min && a.max === b.max; 7460} 7461function boxEquals(a, b) { 7462 return axisEquals(a.x, b.x) && axisEquals(a.y, b.y); 7463} 7464function axisEqualsRounded(a, b) { 7465 return (Math.round(a.min) === Math.round(b.min) && 7466 Math.round(a.max) === Math.round(b.max)); 7467} 7468function boxEqualsRounded(a, b) { 7469 return axisEqualsRounded(a.x, b.x) && axisEqualsRounded(a.y, b.y); 7470} 7471function aspectRatio(box) { 7472 return calcLength(box.x) / calcLength(box.y); 7473} 7474function axisDeltaEquals(a, b) { 7475 return (a.translate === b.translate && 7476 a.scale === b.scale && 7477 a.originPoint === b.originPoint); 7478} 7479 7480 7481//# sourceMappingURL=utils.mjs.map 7482 7483// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/array.mjs 7484var array = __webpack_require__(98425); 7485;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/shared/stack.mjs 7486 7487 7488class NodeStack { 7489 constructor() { 7490 this.members = []; 7491 } 7492 add(node) { 7493 (0,array/* addUniqueItem */.y4)(this.members, node); 7494 for (let i = this.members.length - 1; i >= 0; i--) { 7495 const member = this.members[i]; 7496 if (member === node || member === this.lead || member === this.prevLead) 7497 continue; 7498 const inst = member.instance; 7499 if ((!inst || inst.isConnected === false) && !member.snapshot) { 7500 (0,array/* removeItem */.cl)(this.members, member); 7501 member.unmount(); 7502 } 7503 } 7504 node.scheduleRender(); 7505 } 7506 remove(node) { 7507 (0,array/* removeItem */.cl)(this.members, node); 7508 if (node === this.prevLead) 7509 this.prevLead = undefined; 7510 if (node === this.lead) { 7511 const prevLead = this.members[this.members.length - 1]; 7512 if (prevLead) 7513 this.promote(prevLead); 7514 } 7515 } 7516 relegate(node) { 7517 for (let i = this.members.indexOf(node) - 1; i >= 0; i--) { 7518 const member = this.members[i]; 7519 if (member.isPresent !== false && member.instance?.isConnected !== false) { 7520 this.promote(member); 7521 return true; 7522 } 7523 } 7524 return false; 7525 } 7526 promote(node, preserveFollowOpacity) { 7527 const prevLead = this.lead; 7528 if (node === prevLead) 7529 return; 7530 this.prevLead = prevLead; 7531 this.lead = node; 7532 node.show(); 7533 if (prevLead) { 7534 prevLead.updateSnapshot(); 7535 node.scheduleRender(); 7536 const { layoutDependency: prevDep } = prevLead.options; 7537 const { layoutDependency: nextDep } = node.options; 7538 if (prevDep === undefined || prevDep !== nextDep) { 7539 node.resumeFrom = prevLead; 7540 if (preserveFollowOpacity) 7541 prevLead.preserveOpacity = true; 7542 if (prevLead.snapshot) { 7543 node.snapshot = prevLead.snapshot; 7544 node.snapshot.latestValues = 7545 prevLead.animationValues || prevLead.latestValues; 7546 }
vendor: 8,356 bytes, lines 7547-7787
7547 if (node.root?.isUpdating) 7548 node.isLayoutDirty = true; 7549 } 7550 if (node.options.crossfade === false) 7551 prevLead.hide(); 7552 } 7553 } 7554 exitAnimationComplete() { 7555 this.members.forEach((member) => { 7556 member.options.onExitComplete?.(); 7557 member.resumingFrom?.options.onExitComplete?.(); 7558 }); 7559 } 7560 scheduleRender() { 7561 this.members.forEach((member) => member.instance && member.scheduleRender(false)); 7562 } 7563 removeLeadSnapshot() { 7564 if (this.lead?.snapshot) 7565 this.lead.snapshot = undefined; 7566 } 7567} 7568 7569 7570//# sourceMappingURL=stack.mjs.map 7571 7572;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/styles/transform.mjs 7573function buildProjectionTransform(delta, treeScale, latestTransform) { 7574 let transform = ""; 7575 /** 7576 * The translations we use to calculate are always relative to the viewport coordinate space. 7577 * But when we apply scales, we also scale the coordinate space of an element and its children. 7578 * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need 7579 * to move an element 100 pixels, we actually need to move it 200 in within that scaled space. 7580 */ 7581 const xTranslate = delta.x.translate / treeScale.x; 7582 const yTranslate = delta.y.translate / treeScale.y; 7583 const zTranslate = latestTransform?.z || 0; 7584 if (xTranslate || yTranslate || zTranslate) { 7585 transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `; 7586 } 7587 /** 7588 * Apply scale correction for the tree transform. 7589 * This will apply scale to the screen-orientated axes. 7590 */ 7591 if (treeScale.x !== 1 || treeScale.y !== 1) { 7592 transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `; 7593 } 7594 if (latestTransform) { 7595 const { transformPerspective, rotate, pathRotation, rotateX, rotateY, skewX, skewY, } = latestTransform; 7596 if (transformPerspective) 7597 transform = `perspective(${transformPerspective}px) ${transform}`; 7598 if (rotate) 7599 transform += `rotate(${rotate}deg) `; 7600 // Additive `rotate()` so user `rotate` isn't clobbered. 7601 if (pathRotation) 7602 transform += `rotate(${pathRotation}deg) `; 7603 if (rotateX) 7604 transform += `rotateX(${rotateX}deg) `; 7605 if (rotateY) 7606 transform += `rotateY(${rotateY}deg) `; 7607 if (skewX) 7608 transform += `skewX(${skewX}deg) `; 7609 if (skewY) 7610 transform += `skewY(${skewY}deg) `; 7611 } 7612 /** 7613 * Apply scale to match the size of the element to the size we want it. 7614 * This will apply scale to the element-orientated axes. 7615 */ 7616 const elementScaleX = delta.x.scale * treeScale.x; 7617 const elementScaleY = delta.y.scale * treeScale.y; 7618 if (elementScaleX !== 1 || elementScaleY !== 1) { 7619 transform += `scale(${elementScaleX}, ${elementScaleY})`; 7620 } 7621 return transform || "none"; 7622} 7623 7624 7625//# sourceMappingURL=transform.mjs.map 7626 7627;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/utils/compare-by-depth.mjs 7628const compareByDepth = (a, b) => a.depth - b.depth; 7629 7630 7631//# sourceMappingURL=compare-by-depth.mjs.map 7632 7633;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/utils/flat-tree.mjs 7634 7635 7636 7637class FlatTree { 7638 constructor() { 7639 this.children = []; 7640 this.isDirty = false; 7641 } 7642 add(child) { 7643 (0,array/* addUniqueItem */.y4)(this.children, child); 7644 this.isDirty = true; 7645 } 7646 remove(child) { 7647 (0,array/* removeItem */.cl)(this.children, child); 7648 this.isDirty = true; 7649 } 7650 forEach(callback) { 7651 this.isDirty && this.children.sort(compareByDepth); 7652 this.isDirty = false; 7653 this.children.forEach(callback); 7654 } 7655} 7656 7657 7658//# sourceMappingURL=flat-tree.mjs.map 7659 7660;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/node/create-projection-node.mjs 7661 7662 7663 7664 7665 7666 7667 7668 7669 7670 7671 7672 7673 7674 7675 7676 7677 7678 7679 7680 7681 7682 7683 7684 7685 7686 7687 7688 7689 7690 7691const metrics = { 7692 nodes: 0, 7693 calculatedTargetDeltas: 0, 7694 calculatedProjections: 0, 7695}; 7696const transformAxes = ["", "X", "Y", "Z"]; 7697/** 7698 * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1 7699 * which has a noticeable difference in spring animations 7700 */ 7701const animationTarget = 1000; 7702let create_projection_node_id = 0; 7703function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) { 7704 const { latestValues } = visualElement; 7705 // Record the distorting transform and then temporarily set it to 0 7706 if (latestValues[key]) { 7707 values[key] = latestValues[key]; 7708 visualElement.setStaticValue(key, 0); 7709 if (sharedAnimationValues) { 7710 sharedAnimationValues[key] = 0; 7711 } 7712 } 7713} 7714function cancelTreeOptimisedTransformAnimations(projectionNode) { 7715 projectionNode.hasCheckedOptimisedAppear = true; 7716 if (projectionNode.root === projectionNode) 7717 return; 7718 const { visualElement } = projectionNode.options; 7719 if (!visualElement) 7720 return; 7721 const appearId = getOptimisedAppearId(visualElement); 7722 if (window.MotionHasOptimisedAnimation(appearId, "transform")) { 7723 const { layout, layoutId } = projectionNode.options; 7724 window.MotionCancelOptimisedAnimation(appearId, "transform", frameloop_frame/* frame */.Wi, !(layout || layoutId)); 7725 } 7726 const { parent } = projectionNode; 7727 if (parent && !parent.hasCheckedOptimisedAppear) { 7728 cancelTreeOptimisedTransformAnimations(parent); 7729 } 7730} 7731function create_projection_node_createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) { 7732 return class ProjectionNode { 7733 constructor(latestValues = {}, parent = defaultParent?.()) { 7734 /** 7735 * A unique ID generated for every projection node. 7736 */ 7737 this.id = create_projection_node_id++; 7738 /** 7739 * An id that represents a unique session instigated by startUpdate. 7740 */ 7741 this.animationId = 0; 7742 this.animationCommitId = 0; 7743 /** 7744 * A Set containing all this component's children. This is used to iterate 7745 * through the children. 7746 * 7747 * TODO: This could be faster to iterate as a flat array stored on the root node. 7748 */ 7749 this.children = new Set(); 7750 /** 7751 * Options for the node. We use this to configure what kind of layout animations 7752 * we should perform (if any). 7753 */ 7754 this.options = {}; 7755 /** 7756 * We use this to detect when its safe to shut down part of a projection tree. 7757 * We have to keep projecting children for scale correction and relative projection 7758 * until all their parents stop performing layout animations. 7759 */ 7760 this.isTreeAnimating = false; 7761 this.isAnimationBlocked = false; 7762 /** 7763 * Flag to true if we think this layout has been changed. We can't always know this, 7764 * currently we set it to true every time a component renders, or if it has a layoutDependency 7765 * if that has changed between renders. Additionally, components can be grouped by LayoutGroup 7766 * and if one node is dirtied, they all are. 7767 */ 7768 this.isLayoutDirty = false; 7769 /** 7770 * Flag to true if we think the projection calculations for this node needs 7771 * recalculating as a result of an updated transform or layout animation. 7772 */ 7773 this.isProjectionDirty = false; 7774 /** 7775 * Flag to true if the layout *or* transform has changed. This then gets propagated 7776 * throughout the projection tree, forcing any element below to recalculate on the next frame. 7777 */ 7778 this.isSharedProjectionDirty = false; 7779 /** 7780 * Flag transform dirty. This gets propagated throughout the whole tree but is only 7781 * respected by shared nodes. 7782 */ 7783 this.isTransformDirty = false; 7784 /** 7785 * Block layout updates for instant layout transitions throughout the tree. 7786 */ 7787 this.updateManuallyBlocked = false;
vendor: 5,858 bytes, lines 7788-7923
7788 this.updateBlockedByResize = false; 7789 /** 7790 * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate` 7791 * call. 7792 */ 7793 this.isUpdating = false; 7794 /** 7795 * If this is an SVG element we currently disable projection transforms 7796 */ 7797 this.isSVG = false; 7798 /** 7799 * Flag to true (during promotion) if a node doing an instant layout transition needs to reset 7800 * its projection styles. 7801 */ 7802 this.needsReset = false; 7803 /** 7804 * Flags whether this node should have its transform reset prior to measuring. 7805 */ 7806 this.shouldResetTransform = false; 7807 /** 7808 * Store whether this node has been checked for optimised appear animations. As 7809 * effects fire bottom-up, and we want to look up the tree for appear animations, 7810 * this makes sure we only check each path once, stopping at nodes that 7811 * have already been checked. 7812 */ 7813 this.hasCheckedOptimisedAppear = false; 7814 /** 7815 * An object representing the calculated contextual/accumulated/tree scale. 7816 * This will be used to scale calculcated projection transforms, as these are 7817 * calculated in screen-space but need to be scaled for elements to layoutly 7818 * make it to their calculated destinations. 7819 * 7820 * TODO: Lazy-init 7821 */ 7822 this.treeScale = { x: 1, y: 1 }; 7823 /** 7824 * 7825 */ 7826 this.eventHandlers = new Map(); 7827 this.hasTreeAnimated = false; 7828 this.layoutVersion = 0; 7829 // Note: Currently only running on root node 7830 this.updateScheduled = false; 7831 this.scheduleUpdate = () => this.update(); 7832 this.projectionUpdateScheduled = false; 7833 this.checkUpdateFailed = () => { 7834 if (this.isUpdating) { 7835 this.isUpdating = false; 7836 this.clearAllSnapshots(); 7837 } 7838 }; 7839 /** 7840 * This is a multi-step process as shared nodes might be of different depths. Nodes 7841 * are sorted by depth order, so we need to resolve the entire tree before moving to 7842 * the next step. 7843 */ 7844 this.updateProjection = () => { 7845 this.projectionUpdateScheduled = false; 7846 /** 7847 * Reset debug counts. Manually resetting rather than creating a new 7848 * object each frame. 7849 */ 7850 if (buffer/* statsBuffer */.f.value) { 7851 metrics.nodes = 7852 metrics.calculatedTargetDeltas = 7853 metrics.calculatedProjections = 7854 0; 7855 } 7856 this.nodes.forEach(propagateDirtyNodes); 7857 this.nodes.forEach(resolveTargetDelta); 7858 this.nodes.forEach(calcProjection); 7859 this.nodes.forEach(cleanDirtyNodes); 7860 if (buffer/* statsBuffer */.f.addProjectionMetrics) { 7861 buffer/* statsBuffer */.f.addProjectionMetrics(metrics); 7862 } 7863 }; 7864 /** 7865 * Frame calculations 7866 */ 7867 this.resolvedRelativeTargetAt = 0.0; 7868 this.linkedParentVersion = 0; 7869 this.hasProjected = false; 7870 this.isVisible = true; 7871 this.animationProgress = 0; 7872 /** 7873 * Shared layout 7874 */ 7875 // TODO Only running on root node 7876 this.sharedNodes = new Map(); 7877 this.latestValues = latestValues; 7878 this.root = parent ? parent.root || parent : this; 7879 this.path = parent ? [...parent.path, parent] : []; 7880 this.parent = parent; 7881 this.depth = parent ? parent.depth + 1 : 0; 7882 for (let i = 0; i < this.path.length; i++) { 7883 this.path[i].shouldResetTransform = true; 7884 } 7885 if (this.root === this) 7886 this.nodes = new FlatTree(); 7887 } 7888 addEventListener(name, handler) { 7889 if (!this.eventHandlers.has(name)) { 7890 this.eventHandlers.set(name, new subscription_manager/* SubscriptionManager */.L()); 7891 } 7892 return this.eventHandlers.get(name).add(handler); 7893 } 7894 notifyListeners(name, ...args) { 7895 const subscriptionManager = this.eventHandlers.get(name); 7896 subscriptionManager && subscriptionManager.notify(...args); 7897 } 7898 hasListeners(name) { 7899 return this.eventHandlers.has(name); 7900 } 7901 /** 7902 * Lifecycles 7903 */ 7904 mount(instance) { 7905 if (this.instance) 7906 return; 7907 this.isSVG = (0,is_svg_element/* isSVGElement */.v)(instance) && !isSVGSVGElement(instance); 7908 this.instance = instance; 7909 const { layoutId, layout, visualElement } = this.options; 7910 if (visualElement && !visualElement.current) { 7911 visualElement.mount(instance); 7912 } 7913 this.root.nodes.add(this); 7914 this.parent && this.parent.children.add(this); 7915 if (this.root.hasTreeAnimated && (layout || layoutId)) { 7916 this.isLayoutDirty = true; 7917 } 7918 if (attachResizeListener) { 7919 let cancelDelay; 7920 let innerWidth = 0; 7921 const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false); 7922 // Set initial innerWidth in a frame.read callback to batch the read 7923 frameloop_frame/* frame */.Wi
vendor: 4,300 bytes, lines 7923-8000
7923.read(() => { 7924 innerWidth = window.innerWidth; 7925 }); 7926 attachResizeListener(instance, () => { 7927 const newInnerWidth = window.innerWidth; 7928 if (newInnerWidth === innerWidth) 7929 return; 7930 innerWidth = newInnerWidth; 7931 this.root.updateBlockedByResize = true; 7932 cancelDelay && cancelDelay(); 7933 cancelDelay = delay(resizeUnblockUpdate, 250); 7934 if (globalProjectionState.hasAnimatedSinceResize) { 7935 globalProjectionState.hasAnimatedSinceResize = false; 7936 this.nodes.forEach(finishAnimation); 7937 } 7938 }); 7939 } 7940 if (layoutId) { 7941 this.root.registerSharedNode(layoutId, this); 7942 } 7943 // Only register the handler if it requires layout animation 7944 if (this.options.animate !== false && 7945 visualElement && 7946 (layoutId || layout)) { 7947 this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeLayoutChanged, layout: newLayout, }) => { 7948 if (this.isTreeAnimationBlocked()) { 7949 this.target = undefined; 7950 this.relativeTarget = undefined; 7951 return; 7952 } 7953 // TODO: Check here if an animation exists 7954 const layoutTransition = this.options.transition || 7955 visualElement.getDefaultTransition() || 7956 defaultLayoutTransition; 7957 const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps(); 7958 /** 7959 * The target layout of the element might stay the same, 7960 * but its position relative to its parent has changed. 7961 */ 7962 const hasTargetChanged = !this.targetLayout || 7963 !boxEqualsRounded(this.targetLayout, newLayout); 7964 /* 7965 * Note: Disabled to fix relative animations always triggering new 7966 * layout animations. If this causes further issues, we can try 7967 * a different approach to detecting relative target changes. 7968 */ 7969 // || hasRelativeLayoutChanged 7970 /** 7971 * If the layout hasn't seemed to have changed, it might be that the 7972 * element is visually in the same place in the document but its position 7973 * relative to its parent has indeed changed. So here we check for that. 7974 */ 7975 const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeLayoutChanged; 7976 if (this.options.layoutRoot || 7977 this.resumeFrom || 7978 hasOnlyRelativeTargetChanged || 7979 (hasLayoutChanged && 7980 (hasTargetChanged || !this.currentAnimation))) { 7981 if (this.resumeFrom) { 7982 this.resumingFrom = this.resumeFrom; 7983 this.resumingFrom.resumingFrom = undefined; 7984 } 7985 const animationOptions = { 7986 ...getValueTransition(layoutTransition, "layout"), 7987 onPlay: onLayoutAnimationStart, 7988 onComplete: onLayoutAnimationComplete, 7989 }; 7990 if (visualElement.shouldReduceMotion || 7991 this.options.layoutRoot) { 7992 animationOptions.delay = 0; 7993 animationOptions.type = false; 7994 } 7995 this.startAnimation(animationOptions); 7996 /** 7997 * Set animation origin after starting animation to avoid layout jump 7998 * caused by stopping previous layout animation 7999 */ 8000 this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged
vendor: 4,905 bytes, lines 8000-8110
8000, animationOptions 8001 .path); 8002 } 8003 else { 8004 /** 8005 * If the layout hasn't changed and we have an animation that hasn't started yet, 8006 * finish it immediately. Otherwise it will be animating from a location 8007 * that was probably never committed to screen and look like a jumpy box. 8008 */ 8009 if (!hasLayoutChanged) { 8010 finishAnimation(this); 8011 } 8012 if (this.isLead() && this.options.onExitComplete) { 8013 this.options.onExitComplete(); 8014 } 8015 } 8016 this.targetLayout = newLayout; 8017 }); 8018 } 8019 } 8020 unmount() { 8021 this.options.layoutId && this.willUpdate(); 8022 this.root.nodes.remove(this); 8023 const stack = this.getStack(); 8024 stack && stack.remove(this); 8025 this.parent && this.parent.children.delete(this); 8026 this.instance = undefined; 8027 this.eventHandlers.clear(); 8028 (0,frameloop_frame/* cancelFrame */.Pn)(this.updateProjection); 8029 } 8030 // only on the root 8031 blockUpdate() { 8032 this.updateManuallyBlocked = true; 8033 } 8034 unblockUpdate() { 8035 this.updateManuallyBlocked = false; 8036 } 8037 isUpdateBlocked() { 8038 return this.updateManuallyBlocked || this.updateBlockedByResize; 8039 } 8040 isTreeAnimationBlocked() { 8041 return (this.isAnimationBlocked || 8042 (this.parent && this.parent.isTreeAnimationBlocked()) || 8043 false); 8044 } 8045 // Note: currently only running on root node 8046 startUpdate() { 8047 if (this.isUpdateBlocked()) 8048 return; 8049 this.isUpdating = true; 8050 this.nodes && this.nodes.forEach(resetSkewAndRotation); 8051 this.animationId++; 8052 } 8053 getTransformTemplate() { 8054 const { visualElement } = this.options; 8055 return visualElement && visualElement.getProps().transformTemplate; 8056 } 8057 willUpdate(shouldNotifyListeners = true) { 8058 this.root.hasTreeAnimated = true; 8059 if (this.root.isUpdateBlocked()) { 8060 this.options.onExitComplete && this.options.onExitComplete(); 8061 return; 8062 } 8063 /** 8064 * If we're running optimised appear animations then these must be 8065 * cancelled before measuring the DOM. This is so we can measure 8066 * the true layout of the element rather than the WAAPI animation 8067 * which will be unaffected by the resetSkewAndRotate step. 8068 * 8069 * Note: This is a DOM write. Worst case scenario is this is sandwiched 8070 * between other snapshot reads which will cause unnecessary style recalculations. 8071 * This has to happen here though, as we don't yet know which nodes will need 8072 * snapshots in startUpdate(), but we only want to cancel optimised animations 8073 * if a layout animation measurement is actually going to be affected by them. 8074 */ 8075 if (window.MotionCancelOptimisedAnimation && 8076 !this.hasCheckedOptimisedAppear) { 8077 cancelTreeOptimisedTransformAnimations(this); 8078 } 8079 !this.root.isUpdating && this.root.startUpdate(); 8080 if (this.isLayoutDirty) 8081 return; 8082 this.isLayoutDirty = true; 8083 for (let i = 0; i < this.path.length; i++) { 8084 const node = this.path[i]; 8085 node.shouldResetTransform = true; 8086 /** 8087 * Percentage translates resolve against layoutBox dimensions, 8088 * so ancestors with them must be re-measured after transform reset. 8089 */ 8090 if (typeof node.latestValues.x === "string" || 8091 typeof node.latestValues.y === "string") { 8092 node.isLayoutDirty = true; 8093 } 8094 node.updateScroll("snapshot"); 8095 if (node.options.layoutRoot) { 8096 node.willUpdate(false); 8097 } 8098 } 8099 const { layoutId, layout } = this.options; 8100 if (layoutId === undefined && !layout) 8101 return; 8102 const transformTemplate = this.getTransformTemplate(); 8103 this.prevTransformTemplateValue = transformTemplate 8104 ? transformTemplate(this.latestValues, "") 8105 : undefined; 8106 this.updateSnapshot(); 8107 shouldNotifyListeners && this.notifyListeners("willUpdate"); 8108 } 8109 update() { 8110 this.updateScheduled = false;
8111 const updateWasBlocked = this.isUpdateBlocked(); 8112 // When doing an instant transition, we skip the layout update, 8113 // but should still clean up the measurements so that the next 8114 // snapshot could be taken correctly. 8115 if (updateWasBlocked) { 8116 const wasBlockedByResize = this.updateBlockedByResize; 8117 this.unblockUpdate(); 8118 this.updateBlockedByResize = false; 8119 this.clearAllSnapshots(); 8120 /** 8121 * When blocked by resize, still measure layouts so 8122 * callbacks like onLayoutMeasure fire (e.g. Reorder). 8123 * Skip notifyLayoutUpdate to prevent animations. 8124 */ 8125 if (wasBlockedByResize) { 8126 this.nodes.forEach(forceLayoutMeasure); 8127 } 8128 this.nodes.forEach(clearMeasurements); 8129 return; 8130 } 8131 /** 8132 * If this is a repeat of didUpdate then ignore the animation. 8133 */ 8134 if (this.animationId <= this.animationCommitId) { 8135 this.nodes.forEach(clearIsLayoutDirty); 8136 return; 8137 } 8138 this.animationCommitId = this.animationId; 8139 if (!this.isUpdating) { 8140 this.nodes.forEach(clearIsLayoutDirty); 8141 } 8142 else { 8143 this.isUpdating = false; 8144 /** 8145 * Ensure animation-blocked nodes (e.g. during drag) 8146 * get measured even when memoized (willUpdate skipped). 8147 */ 8148 this.nodes.forEach(ensureDraggedNodesSnapshotted); 8149 /** 8150 * Write 8151 */ 8152 this.nodes.forEach(resetTransformStyle); 8153 /** 8154 * Read ================== 8155 */ 8156 // Update layout measurements of updated children 8157 this.nodes.forEach(updateLayout); 8158 /** 8159 * Write 8160 */ 8161 // Notify listeners that the layout is updated 8162 this.nodes.forEach(notifyLayoutUpdate); 8163 } 8164 this.clearAllSnapshots(); 8165 /** 8166 * Manually flush any pending updates. Ideally 8167 * we could leave this to the following requestAnimationFrame but this seems 8168 * to leave a flash of incorrectly styled content. 8169 */ 8170 const now = sync_time/* time */.X.now(); 8171 frameloop_frame.frameData.delta = (0,clamp/* clamp */.u)(0, 1000 / 60, now - frameloop_frame.frameData.timestamp); 8172 frameloop_frame.frameData.timestamp = now; 8173 frameloop_frame.frameData.isProcessing = true; 8174 frameloop_frame/* frameSteps */.yL.update.process(frameloop_frame.frameData); 8175 frameloop_frame/* frameSteps */.yL.preRender.process(frameloop_frame.frameData); 8176 frameloop_frame/* frameSteps */.yL.render.process(frameloop_frame.frameData); 8177 frameloop_frame.frameData.isProcessing = false; 8178 } 8179 didUpdate() { 8180 if (!this.updateScheduled) { 8181 this.updateScheduled = true; 8182 microtask/* microtask */.g.read(this.scheduleUpdate); 8183 } 8184 } 8185 clearAllSnapshots() { 8186 this.nodes.forEach(clearSnapshot); 8187 this.sharedNodes.forEach(removeLeadSnapshots); 8188 } 8189 scheduleUpdateProjection() { 8190 if (!this.projectionUpdateScheduled) { 8191 this.projectionUpdateScheduled = true; 8192 frameloop_frame/* frame */.Wi.preRender(this.updateProjection, false, true); 8193 } 8194 } 8195 scheduleCheckAfterUnmount() { 8196 /** 8197 * If the unmounting node is in a layoutGroup and did trigger a willUpdate, 8198 * we manually call didUpdate to give a chance to the siblings to animate. 8199 * Otherwise, cleanup all snapshots to prevents future nodes from reusing them. 8200 */ 8201 frameloop_frame/* frame */.Wi
vendor: 9,615 bytes, lines 8201-8431
8201.postRender(() => { 8202 if (this.isLayoutDirty) { 8203 this.root.didUpdate(); 8204 } 8205 else { 8206 this.root.checkUpdateFailed(); 8207 } 8208 }); 8209 } 8210 /** 8211 * Update measurements 8212 */ 8213 updateSnapshot() { 8214 if (this.snapshot || !this.instance) 8215 return; 8216 this.snapshot = this.measure(); 8217 if (this.snapshot && 8218 !calcLength(this.snapshot.measuredBox.x) && 8219 !calcLength(this.snapshot.measuredBox.y)) { 8220 this.snapshot = undefined; 8221 } 8222 } 8223 updateLayout() { 8224 if (!this.instance) 8225 return; 8226 this.updateScroll(); 8227 if (!(this.options.alwaysMeasureLayout && this.isLead()) && 8228 !this.isLayoutDirty) { 8229 return; 8230 } 8231 /** 8232 * When a node is mounted, it simply resumes from the prevLead's 8233 * snapshot instead of taking a new one, but the ancestors scroll 8234 * might have updated while the prevLead is unmounted. We need to 8235 * update the scroll again to make sure the layout we measure is 8236 * up to date. 8237 */ 8238 if (this.resumeFrom && !this.resumeFrom.instance) { 8239 for (let i = 0; i < this.path.length; i++) { 8240 const node = this.path[i]; 8241 node.updateScroll(); 8242 } 8243 } 8244 const prevLayout = this.layout; 8245 this.layout = this.measure(false); 8246 this.layoutVersion++; 8247 if (!this.layoutCorrected) 8248 this.layoutCorrected = createBox(); 8249 this.isLayoutDirty = false; 8250 this.projectionDelta = undefined; 8251 this.notifyListeners("measure", this.layout.layoutBox); 8252 const { visualElement } = this.options; 8253 visualElement && 8254 visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined); 8255 } 8256 updateScroll(phase = "measure") { 8257 let needsMeasurement = Boolean(this.options.layoutScroll && this.instance); 8258 if (this.scroll && 8259 this.scroll.animationId === this.root.animationId && 8260 this.scroll.phase === phase) { 8261 needsMeasurement = false; 8262 } 8263 if (needsMeasurement && this.instance) { 8264 const isRoot = checkIsScrollRoot(this.instance); 8265 this.scroll = { 8266 animationId: this.root.animationId, 8267 phase, 8268 isRoot, 8269 offset: measureScroll(this.instance), 8270 wasRoot: this.scroll ? this.scroll.isRoot : isRoot, 8271 }; 8272 } 8273 } 8274 resetTransform() { 8275 if (!resetTransform) 8276 return; 8277 const isResetRequested = this.isLayoutDirty || 8278 this.shouldResetTransform || 8279 this.options.alwaysMeasureLayout; 8280 const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta); 8281 const transformTemplate = this.getTransformTemplate(); 8282 const transformTemplateValue = transformTemplate 8283 ? transformTemplate(this.latestValues, "") 8284 : undefined; 8285 const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue; 8286 if (isResetRequested && 8287 this.instance && 8288 (hasProjection || 8289 hasTransform(this.latestValues) || 8290 transformTemplateHasChanged)) { 8291 resetTransform(this.instance, transformTemplateValue); 8292 this.shouldResetTransform = false; 8293 this.scheduleRender(); 8294 } 8295 } 8296 measure(removeTransform = true) { 8297 const pageBox = this.measurePageBox(); 8298 let layoutBox = this.removeElementScroll(pageBox); 8299 /** 8300 * Measurements taken during the pre-render stage 8301 * still have transforms applied so we remove them 8302 * via calculation. 8303 */ 8304 if (removeTransform) { 8305 layoutBox = this.removeTransform(layoutBox); 8306 } 8307 roundBox(layoutBox); 8308 return { 8309 animationId: this.root.animationId, 8310 measuredBox: pageBox, 8311 layoutBox, 8312 latestValues: {}, 8313 source: this.id, 8314 }; 8315 } 8316 measurePageBox() { 8317 const { visualElement } = this.options; 8318 if (!visualElement) 8319 return createBox(); 8320 const box = visualElement.measureViewportBox(); 8321 const wasInScrollRoot = this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot); 8322 if (!wasInScrollRoot) { 8323 // Remove viewport scroll to give page-relative coordinates 8324 const { scroll } = this.root; 8325 if (scroll) { 8326 translateAxis(box.x, scroll.offset.x); 8327 translateAxis(box.y, scroll.offset.y); 8328 } 8329 } 8330 return box; 8331 } 8332 removeElementScroll(box) { 8333 const boxWithoutScroll = createBox(); 8334 copyBoxInto(boxWithoutScroll, box); 8335 if (this.scroll?.wasRoot) { 8336 return boxWithoutScroll; 8337 } 8338 /** 8339 * Performance TODO: Keep a cumulative scroll offset down the tree 8340 * rather than loop back up the path. 8341 */ 8342 for (let i = 0; i < this.path.length; i++) { 8343 const node = this.path[i]; 8344 const { scroll, options } = node; 8345 if (node !== this.root && scroll && options.layoutScroll) { 8346 /** 8347 * If this is a new scroll root, we want to remove all previous scrolls 8348 * from the viewport box. 8349 */ 8350 if (scroll.wasRoot) { 8351 copyBoxInto(boxWithoutScroll, box); 8352 } 8353 translateAxis(boxWithoutScroll.x, scroll.offset.x); 8354 translateAxis(boxWithoutScroll.y, scroll.offset.y); 8355 } 8356 } 8357 return boxWithoutScroll; 8358 } 8359 applyTransform(box, transformOnly = false, output) { 8360 const withTransforms = output || createBox(); 8361 copyBoxInto(withTransforms, box); 8362 for (let i = 0; i < this.path.length; i++) { 8363 const node = this.path[i]; 8364 if (!transformOnly && 8365 node.options.layoutScroll && 8366 node.scroll && 8367 node !== node.root) { 8368 translateAxis(withTransforms.x, -node.scroll.offset.x); 8369 translateAxis(withTransforms.y, -node.scroll.offset.y); 8370 } 8371 if (!hasTransform(node.latestValues)) 8372 continue; 8373 transformBox(withTransforms, node.latestValues, node.layout?.layoutBox); 8374 } 8375 if (hasTransform(this.latestValues)) { 8376 transformBox(withTransforms, this.latestValues, this.layout?.layoutBox); 8377 } 8378 return withTransforms; 8379 } 8380 removeTransform(box) { 8381 const boxWithoutTransform = createBox(); 8382 copyBoxInto(boxWithoutTransform, box); 8383 for (let i = 0; i < this.path.length; i++) { 8384 const node = this.path[i]; 8385 if (!hasTransform(node.latestValues)) 8386 continue; 8387 let sourceBox; 8388 if (node.instance) { 8389 hasScale(node.latestValues) && node.updateSnapshot(); 8390 sourceBox = createBox(); 8391 copyBoxInto(sourceBox, node.measurePageBox()); 8392 } 8393 removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot?.layoutBox, sourceBox); 8394 } 8395 if (hasTransform(this.latestValues)) { 8396 removeBoxTransforms(boxWithoutTransform, this.latestValues); 8397 } 8398 return boxWithoutTransform; 8399 } 8400 setTargetDelta(delta) { 8401 this.targetDelta = delta; 8402 this.root.scheduleUpdateProjection(); 8403 this.isProjectionDirty = true; 8404 } 8405 setOptions(options) { 8406 this.options = { 8407 ...this.options, 8408 ...options, 8409 crossfade: options.crossfade !== undefined ? options.crossfade : true, 8410 }; 8411 } 8412 clearMeasurements() { 8413 this.scroll = undefined; 8414 this.layout = undefined; 8415 this.snapshot = undefined; 8416 this.prevTransformTemplateValue = undefined; 8417 this.targetDelta = undefined; 8418 this.target = undefined; 8419 this.isLayoutDirty = false; 8420 } 8421 forceRelativeParentToResolveTarget() { 8422 if (!this.relativeParent) 8423 return; 8424 /** 8425 * If the parent target isn't up-to-date, force it to update. 8426 * This is an unfortunate de-optimisation as it means any updating relative 8427 * projection will cause all the relative parents to recalculate back 8428 * up the tree. 8429 */ 8430 if (this.relativeParent.resolvedRelativeTargetAt !== 8431 frame
vendor: 18,919 bytes, lines 8431-8826
8431loop_frame.frameData.timestamp) { 8432 this.relativeParent.resolveTargetDelta(true); 8433 } 8434 } 8435 resolveTargetDelta(forceRecalculation = false) { 8436 /** 8437 * Once the dirty status of nodes has been spread through the tree, we also 8438 * need to check if we have a shared node of a different depth that has itself 8439 * been dirtied. 8440 */ 8441 const lead = this.getLead(); 8442 this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty); 8443 this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty); 8444 this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty); 8445 const isShared = Boolean(this.resumingFrom) || this !== lead; 8446 /** 8447 * We don't use transform for this step of processing so we don't 8448 * need to check whether any nodes have changed transform. 8449 */ 8450 const canSkip = !(forceRecalculation || 8451 (isShared && this.isSharedProjectionDirty) || 8452 this.isProjectionDirty || 8453 this.parent?.isProjectionDirty || 8454 this.attemptToResolveRelativeTarget || 8455 this.root.updateBlockedByResize); 8456 if (canSkip) 8457 return; 8458 const { layout, layoutId } = this.options; 8459 /** 8460 * If we have no layout, we can't perform projection, so early return 8461 */ 8462 if (!this.layout || !(layout || layoutId)) 8463 return; 8464 this.resolvedRelativeTargetAt = frameloop_frame.frameData.timestamp; 8465 const relativeParent = this.getClosestProjectingParent(); 8466 if (relativeParent && 8467 this.linkedParentVersion !== relativeParent.layoutVersion && 8468 !relativeParent.options.layoutRoot) { 8469 this.removeRelativeTarget(); 8470 } 8471 /** 8472 * If we don't have a targetDelta but do have a layout, we can attempt to resolve 8473 * a relativeParent. This will allow a component to perform scale correction 8474 * even if no animation has started. 8475 */ 8476 if (!this.targetDelta && !this.relativeTarget) { 8477 if (this.options.layoutAnchor !== false && 8478 relativeParent && 8479 relativeParent.layout) { 8480 this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox); 8481 } 8482 else { 8483 this.removeRelativeTarget(); 8484 } 8485 } 8486 /** 8487 * If we have no relative target or no target delta our target isn't valid 8488 * for this frame. 8489 */ 8490 if (!this.relativeTarget && !this.targetDelta) 8491 return; 8492 /** 8493 * Lazy-init target data structure 8494 */ 8495 if (!this.target) { 8496 this.target = createBox(); 8497 this.targetWithTransforms = createBox(); 8498 } 8499 /** 8500 * If we've got a relative box for this component, resolve it into a target relative to the parent. 8501 */ 8502 if (this.relativeTarget && 8503 this.relativeTargetOrigin && 8504 this.relativeParent && 8505 this.relativeParent.target) { 8506 this.forceRelativeParentToResolveTarget(); 8507 calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target, this.options.layoutAnchor || undefined); 8508 /** 8509 * If we've only got a targetDelta, resolve it into a target 8510 */ 8511 } 8512 else if (this.targetDelta) { 8513 if (Boolean(this.resumingFrom)) { 8514 this.applyTransform(this.layout.layoutBox, false, this.target); 8515 } 8516 else { 8517 copyBoxInto(this.target, this.layout.layoutBox); 8518 } 8519 applyBoxDelta(this.target, this.targetDelta); 8520 } 8521 else { 8522 /** 8523 * If no target, use own layout as target 8524 */ 8525 copyBoxInto(this.target, this.layout.layoutBox); 8526 } 8527 /** 8528 * If we've been told to attempt to resolve a relative target, do so. 8529 */ 8530 if (this.attemptToResolveRelativeTarget) { 8531 this.attemptToResolveRelativeTarget = false; 8532 if (this.options.layoutAnchor !== false && 8533 relativeParent && 8534 Boolean(relativeParent.resumingFrom) === 8535 Boolean(this.resumingFrom) && 8536 !relativeParent.options.layoutScroll && 8537 relativeParent.target && 8538 this.animationProgress !== 1) { 8539 this.createRelativeTarget(relativeParent, this.target, relativeParent.target); 8540 } 8541 else { 8542 this.relativeParent = this.relativeTarget = undefined; 8543 } 8544 } 8545 /** 8546 * Increase debug counter for resolved target deltas 8547 */ 8548 if (buffer/* statsBuffer */.f.value) { 8549 metrics.calculatedTargetDeltas++; 8550 } 8551 } 8552 getClosestProjectingParent() { 8553 if (!this.parent || 8554 hasScale(this.parent.latestValues) || 8555 has2DTranslate(this.parent.latestValues)) { 8556 return undefined; 8557 } 8558 if (this.parent.isProjecting()) { 8559 return this.parent; 8560 } 8561 else { 8562 return this.parent.getClosestProjectingParent(); 8563 } 8564 } 8565 isProjecting() { 8566 return Boolean((this.relativeTarget || 8567 this.targetDelta || 8568 this.options.layoutRoot) && 8569 this.layout); 8570 } 8571 createRelativeTarget(relativeParent, layout, parentLayout) { 8572 this.relativeParent = relativeParent; 8573 this.linkedParentVersion = relativeParent.layoutVersion; 8574 this.forceRelativeParentToResolveTarget(); 8575 this.relativeTarget = createBox(); 8576 this.relativeTargetOrigin = createBox(); 8577 calcRelativePosition(this.relativeTargetOrigin, layout, parentLayout, this.options.layoutAnchor || undefined); 8578 copyBoxInto(this.relativeTarget, this.relativeTargetOrigin); 8579 } 8580 removeRelativeTarget() { 8581 this.relativeParent = this.relativeTarget = undefined; 8582 } 8583 calcProjection() { 8584 const lead = this.getLead(); 8585 const isShared = Boolean(this.resumingFrom) || this !== lead; 8586 let canSkip = true; 8587 /** 8588 * If this is a normal layout animation and neither this node nor its nearest projecting 8589 * is dirty then we can't skip. 8590 */ 8591 if (this.isProjectionDirty || this.parent?.isProjectionDirty) { 8592 canSkip = false; 8593 } 8594 /** 8595 * If this is a shared layout animation and this node's shared projection is dirty then 8596 * we can't skip. 8597 */ 8598 if (isShared && 8599 (this.isSharedProjectionDirty || this.isTransformDirty)) { 8600 canSkip = false; 8601 } 8602 /** 8603 * If we have resolved the target this frame we must recalculate the 8604 * projection to ensure it visually represents the internal calculations. 8605 */ 8606 if (this.resolvedRelativeTargetAt === frameloop_frame.frameData.timestamp) { 8607 canSkip = false; 8608 } 8609 if (canSkip) 8610 return; 8611 const { layout, layoutId } = this.options; 8612 /** 8613 * If this section of the tree isn't animating we can 8614 * delete our target sources for the following frame. 8615 */ 8616 this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) || 8617 this.currentAnimation || 8618 this.pendingAnimation); 8619 if (!this.isTreeAnimating) { 8620 this.targetDelta = this.relativeTarget = undefined; 8621 } 8622 if (!this.layout || !(layout || layoutId)) 8623 return; 8624 /** 8625 * Reset the corrected box with the latest values from box, as we're then going 8626 * to perform mutative operations on it. 8627 */ 8628 copyBoxInto(this.layoutCorrected, this.layout.layoutBox); 8629 /** 8630 * Record previous tree scales before updating. 8631 */ 8632 const prevTreeScaleX = this.treeScale.x; 8633 const prevTreeScaleY = this.treeScale.y; 8634 /** 8635 * Apply all the parent deltas to this box to produce the corrected box. This 8636 * is the layout box, as it will appear on screen as a result of the transforms of its parents. 8637 */ 8638 applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared); 8639 /** 8640 * If this layer needs to perform scale correction but doesn't have a target, 8641 * use the layout as the target. 8642 */ 8643 if (lead.layout && 8644 !lead.target && 8645 (this.treeScale.x !== 1 || this.treeScale.y !== 1)) { 8646 lead.target = lead.layout.layoutBox; 8647 lead.targetWithTransforms = createBox(); 8648 } 8649 const { target } = lead; 8650 if (!target) { 8651 /** 8652 * If we don't have a target to project into, but we were previously 8653 * projecting, we want to remove the stored transform and schedule 8654 * a render to ensure the elements reflect the removed transform. 8655 */ 8656 if (this.prevProjectionDelta) { 8657 this.createProjectionDeltas(); 8658 this.scheduleRender(); 8659 } 8660 return; 8661 } 8662 if (!this.projectionDelta || !this.prevProjectionDelta) { 8663 this.createProjectionDeltas(); 8664 } 8665 else { 8666 copyAxisDeltaInto(this.prevProjectionDelta.x, this.projectionDelta.x); 8667 copyAxisDeltaInto(this.prevProjectionDelta.y, this.projectionDelta.y); 8668 } 8669 /** 8670 * Update the delta between the corrected box and the target box before user-set transforms were applied. 8671 * This will allow us to calculate the corrected borderRadius and boxShadow to compensate 8672 * for our layout reprojection, but still allow them to be scaled correctly by the user. 8673 * It might be that to simplify this we may want to accept that user-set scale is also corrected 8674 * and we wouldn't have to keep and calc both deltas, OR we could support a user setting 8675 * to allow people to choose whether these styles are corrected based on just the 8676 * layout reprojection or the final bounding box. 8677 */ 8678 calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues); 8679 if (this.treeScale.x !== prevTreeScaleX || 8680 this.treeScale.y !== prevTreeScaleY || 8681 !axisDeltaEquals(this.projectionDelta.x, this.prevProjectionDelta.x) || 8682 !axisDeltaEquals(this.projectionDelta.y, this.prevProjectionDelta.y)) { 8683 this.hasProjected = true; 8684 this.scheduleRender(); 8685 this.notifyListeners("projectionUpdate", target); 8686 } 8687 /** 8688 * Increase debug counter for recalculated projections 8689 */ 8690 if (buffer/* statsBuffer */.f.value) { 8691 metrics.calculatedProjections++; 8692 } 8693 } 8694 hide() { 8695 this.isVisible = false; 8696 // TODO: Schedule render 8697 } 8698 show() { 8699 this.isVisible = true; 8700 // TODO: Schedule render 8701 } 8702 scheduleRender(notifyAll = true) { 8703 this.options.visualElement?.scheduleRender(); 8704 if (notifyAll) { 8705 const stack = this.getStack(); 8706 stack && stack.scheduleRender(); 8707 } 8708 if (this.resumingFrom && !this.resumingFrom.instance) { 8709 this.resumingFrom = undefined; 8710 } 8711 } 8712 createProjectionDeltas() { 8713 this.prevProjectionDelta = createDelta(); 8714 this.projectionDelta = createDelta(); 8715 this.projectionDeltaWithTransform = createDelta(); 8716 } 8717 setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false, pathFn) { 8718 const snapshot = this.snapshot; 8719 const snapshotLatestValues = snapshot ? snapshot.latestValues : {}; 8720 const mixedValues = { ...this.latestValues }; 8721 const targetDelta = createDelta(); 8722 if (!this.relativeParent || 8723 !this.relativeParent.options.layoutRoot) { 8724 this.relativeTarget = this.relativeTargetOrigin = undefined; 8725 } 8726 this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged; 8727 const relativeLayout = createBox(); 8728 const snapshotSource = snapshot ? snapshot.source : undefined; 8729 const layoutSource = this.layout ? this.layout.source : undefined; 8730 const isSharedLayoutAnimation = snapshotSource !== layoutSource; 8731 const stack = this.getStack(); 8732 const isOnlyMember = !stack || stack.members.length <= 1; 8733 const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation && 8734 !isOnlyMember && 8735 this.options.crossfade === true && 8736 !this.path.some(hasOpacityCrossfade)); 8737 this.animationProgress = 0; 8738 let prevRelativeTarget; 8739 // The path decides whether the layout shift is worth curving 8740 // (distance floor) and resolves the interpolator from the delta. 8741 const interpolate = pathFn?.interpolateProjection(delta); 8742 this.mixTargetDelta = (latest) => { 8743 const progress = latest / 1000; 8744 const point = interpolate?.(progress); 8745 if (point) { 8746 targetDelta.x.translate = point.x; 8747 targetDelta.x.scale = (0,number/* mixNumber */.t)(delta.x.scale, 1, progress); 8748 targetDelta.x.origin = delta.x.origin; 8749 targetDelta.x.originPoint = delta.x.originPoint; 8750 targetDelta.y.translate = point.y; 8751 targetDelta.y.scale = (0,number/* mixNumber */.t)(delta.y.scale, 1, progress); 8752 targetDelta.y.origin = delta.y.origin; 8753 targetDelta.y.originPoint = delta.y.originPoint; 8754 } 8755 else { 8756 mixAxisDeltaLinear(targetDelta.x, delta.x, progress); 8757 mixAxisDeltaLinear(targetDelta.y, delta.y, progress); 8758 } 8759 this.setTargetDelta(targetDelta); 8760 if (this.relativeTarget && 8761 this.relativeTargetOrigin && 8762 this.layout && 8763 this.relativeParent && 8764 this.relativeParent.layout) { 8765 calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox, this.options.layoutAnchor || undefined); 8766 mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress); 8767 /** 8768 * If this is an unchanged relative target we can consider the 8769 * projection not dirty. 8770 */ 8771 if (prevRelativeTarget && 8772 boxEquals(this.relativeTarget, prevRelativeTarget)) { 8773 this.isProjectionDirty = false; 8774 } 8775 if (!prevRelativeTarget) 8776 prevRelativeTarget = createBox(); 8777 copyBoxInto(prevRelativeTarget, this.relativeTarget); 8778 } 8779 if (isSharedLayoutAnimation) { 8780 this.animationValues = mixedValues; 8781 mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember); 8782 } 8783 if (point && point.rotate !== undefined) { 8784 // Dedicated `pathRotation` channel, not `rotate`, so an 8785 // animating `rotate` is composed with, never clobbered. 8786 if (!this.animationValues) 8787 this.animationValues = mixedValues; 8788 this.animationValues.pathRotation = point.rotate; 8789 } 8790 this.root.scheduleUpdateProjection(); 8791 this.scheduleRender(); 8792 this.animationProgress = progress; 8793 }; 8794 this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0); 8795 } 8796 startAnimation(options) { 8797 this.notifyListeners("animationStart"); 8798 this.currentAnimation?.stop(); 8799 this.resumingFrom?.currentAnimation?.stop(); 8800 if (this.pendingAnimation) { 8801 (0,frameloop_frame/* cancelFrame */.Pn)(this.pendingAnimation); 8802 this.pendingAnimation = undefined; 8803 } 8804 /** 8805 * Start the animation in the next frame to have a frame with progress 0, 8806 * where the target is the same as when the animation started, so we can 8807 * calculate the relative positions correctly for instant transitions. 8808 */ 8809 this.pendingAnimation = frameloop_frame/* frame */.Wi.update(() => { 8810 globalProjectionState.hasAnimatedSinceResize = true; 8811 animation_count/* activeAnimations */.P.layout++; 8812 this.motionValue || (this.motionValue = (0,es_value/* motionValue */.BX)(0)); 8813 this.motionValue.jump(0, false); 8814 this.currentAnimation = animateSingleValue(this.motionValue, [0, 1000], { 8815 ...options, 8816 velocity: 0, 8817 isSync: true, 8818 onUpdate: (latest) => { 8819 this.mixTargetDelta(latest); 8820 options.onUpdate && options.onUpdate(latest); 8821 }, 8822 onStop: () => { 8823 animation_count/* activeAnimations */.P.layout--; 8824 }, 8825 onComplete: () => { 8826 animation_count/* activeAnimations */.P.layout--;
vendor: 4,849 bytes, lines 8826-8936
8826 8827 options.onComplete && options.onComplete(); 8828 this.completeAnimation(); 8829 }, 8830 }); 8831 if (this.resumingFrom) { 8832 this.resumingFrom.currentAnimation = this.currentAnimation; 8833 } 8834 this.pendingAnimation = undefined; 8835 }); 8836 } 8837 completeAnimation() { 8838 if (this.resumingFrom) { 8839 this.resumingFrom.currentAnimation = undefined; 8840 this.resumingFrom.preserveOpacity = undefined; 8841 } 8842 const stack = this.getStack(); 8843 stack && stack.exitAnimationComplete(); 8844 this.resumingFrom = 8845 this.currentAnimation = 8846 this.animationValues = 8847 undefined; 8848 this.notifyListeners("animationComplete"); 8849 } 8850 finishAnimation() { 8851 if (this.currentAnimation) { 8852 this.mixTargetDelta && this.mixTargetDelta(animationTarget); 8853 this.currentAnimation.stop(); 8854 } 8855 this.completeAnimation(); 8856 } 8857 applyTransformsToTarget() { 8858 const lead = this.getLead(); 8859 let { targetWithTransforms, target, layout, latestValues } = lead; 8860 if (!targetWithTransforms || !target || !layout) 8861 return; 8862 /** 8863 * If we're only animating position, and this element isn't the lead element, 8864 * then instead of projecting into the lead box we instead want to calculate 8865 * a new target that aligns the two boxes but maintains the layout shape. 8866 */ 8867 if (this !== lead && 8868 this.layout && 8869 layout && 8870 shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) { 8871 target = this.target || createBox(); 8872 const xLength = calcLength(this.layout.layoutBox.x); 8873 target.x.min = lead.target.x.min; 8874 target.x.max = target.x.min + xLength; 8875 const yLength = calcLength(this.layout.layoutBox.y); 8876 target.y.min = lead.target.y.min; 8877 target.y.max = target.y.min + yLength; 8878 } 8879 copyBoxInto(targetWithTransforms, target); 8880 /** 8881 * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal. 8882 * This is the final box that we will then project into by calculating a transform delta and 8883 * applying it to the corrected box. 8884 */ 8885 transformBox(targetWithTransforms, latestValues); 8886 /** 8887 * Update the delta between the corrected box and the final target box, after 8888 * user-set transforms are applied to it. This will be used by the renderer to 8889 * create a transform style that will reproject the element from its layout layout 8890 * into the desired bounding box. 8891 */ 8892 calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues); 8893 } 8894 registerSharedNode(layoutId, node) { 8895 if (!this.sharedNodes.has(layoutId)) { 8896 this.sharedNodes.set(layoutId, new NodeStack()); 8897 } 8898 const stack = this.sharedNodes.get(layoutId); 8899 stack.add(node); 8900 const config = node.options.initialPromotionConfig; 8901 node.promote({ 8902 transition: config ? config.transition : undefined, 8903 preserveFollowOpacity: config && config.shouldPreserveFollowOpacity 8904 ? config.shouldPreserveFollowOpacity(node) 8905 : undefined, 8906 }); 8907 } 8908 isLead() { 8909 const stack = this.getStack(); 8910 return stack ? stack.lead === this : true; 8911 } 8912 getLead() { 8913 const { layoutId } = this.options; 8914 return layoutId ? this.getStack()?.lead || this : this; 8915 } 8916 getPrevLead() { 8917 const { layoutId } = this.options; 8918 return layoutId ? this.getStack()?.prevLead : undefined; 8919 } 8920 getStack() { 8921 const { layoutId } = this.options; 8922 if (layoutId) 8923 return this.root.sharedNodes.get(layoutId); 8924 } 8925 promote({ needsReset, transition, preserveFollowOpacity, } = {}) { 8926 const stack = this.getStack(); 8927 if (stack) 8928 stack.promote(this, preserveFollowOpacity); 8929 if (needsReset) { 8930 this.projectionDelta = undefined; 8931 this.needsReset = true; 8932 } 8933 if (transition) 8934 this.setOptions({ transition }); 8935 } 8936 relegate() {
vendor: 12,979 bytes, lines 8937-9231
8937 const stack = this.getStack(); 8938 if (stack) { 8939 return stack.relegate(this); 8940 } 8941 else { 8942 return false; 8943 } 8944 } 8945 resetSkewAndRotation() { 8946 const { visualElement } = this.options; 8947 if (!visualElement) 8948 return; 8949 // If there's no detected skew or rotation values, we can early return without a forced render. 8950 let hasDistortingTransform = false; 8951 /** 8952 * An unrolled check for rotation values. Most elements don't have any rotation and 8953 * skipping the nested loop and new object creation is 50% faster. 8954 */ 8955 const { latestValues } = visualElement; 8956 if (latestValues.z || 8957 latestValues.rotate || 8958 latestValues.rotateX || 8959 latestValues.rotateY || 8960 latestValues.rotateZ || 8961 latestValues.skewX || 8962 latestValues.skewY) { 8963 hasDistortingTransform = true; 8964 } 8965 // If there's no distorting values, we don't need to do any more. 8966 if (!hasDistortingTransform) 8967 return; 8968 const resetValues = {}; 8969 if (latestValues.z) { 8970 resetDistortingTransform("z", visualElement, resetValues, this.animationValues); 8971 } 8972 // Check the skew and rotate value of all axes and reset to 0 8973 for (let i = 0; i < transformAxes.length; i++) { 8974 resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues, this.animationValues); 8975 resetDistortingTransform(`skew${transformAxes[i]}`, visualElement, resetValues, this.animationValues); 8976 } 8977 // Force a render of this element to apply the transform with all skews and rotations 8978 // set to 0. 8979 visualElement.render(); 8980 // Put back all the values we reset 8981 for (const key in resetValues) { 8982 visualElement.setStaticValue(key, resetValues[key]); 8983 if (this.animationValues) { 8984 this.animationValues[key] = resetValues[key]; 8985 } 8986 } 8987 // Schedule a render for the next frame. This ensures we won't visually 8988 // see the element with the reset rotate value applied. 8989 visualElement.scheduleRender(); 8990 } 8991 applyProjectionStyles(targetStyle, // CSSStyleDeclaration - doesn't allow numbers to be assigned to properties 8992 styleProp) { 8993 if (!this.instance || this.isSVG) 8994 return; 8995 if (!this.isVisible) { 8996 targetStyle.visibility = "hidden"; 8997 return; 8998 } 8999 const transformTemplate = this.getTransformTemplate(); 9000 if (this.needsReset) { 9001 this.needsReset = false; 9002 targetStyle.visibility = ""; 9003 targetStyle.opacity = ""; 9004 targetStyle.pointerEvents = 9005 resolveMotionValue(styleProp?.pointerEvents) || ""; 9006 targetStyle.transform = transformTemplate 9007 ? transformTemplate(this.latestValues, "") 9008 : "none"; 9009 return; 9010 } 9011 const lead = this.getLead(); 9012 if (!this.projectionDelta || !this.layout || !lead.target) { 9013 if (this.options.layoutId) { 9014 targetStyle.opacity = 9015 this.latestValues.opacity !== undefined 9016 ? this.latestValues.opacity 9017 : 1; 9018 targetStyle.pointerEvents = 9019 resolveMotionValue(styleProp?.pointerEvents) || ""; 9020 } 9021 if (this.hasProjected && !hasTransform(this.latestValues)) { 9022 targetStyle.transform = transformTemplate 9023 ? transformTemplate({}, "") 9024 : "none"; 9025 this.hasProjected = false; 9026 } 9027 return; 9028 } 9029 targetStyle.visibility = ""; 9030 const valuesToRender = lead.animationValues || lead.latestValues; 9031 this.applyTransformsToTarget(); 9032 let transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender); 9033 if (transformTemplate) { 9034 transform = transformTemplate(valuesToRender, transform); 9035 } 9036 targetStyle.transform = transform; 9037 const { x, y } = this.projectionDelta; 9038 targetStyle.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`; 9039 if (lead.animationValues) { 9040 /** 9041 * If the lead component is animating, assign this either the entering/leaving 9042 * opacity 9043 */ 9044 targetStyle.opacity = 9045 lead === this 9046 ? valuesToRender.opacity ?? 9047 this.latestValues.opacity ?? 9048 1 9049 : this.preserveOpacity 9050 ? this.latestValues.opacity 9051 : valuesToRender.opacityExit; 9052 } 9053 else { 9054 /** 9055 * Or we're not animating at all, set the lead component to its layout 9056 * opacity and other components to hidden. 9057 */ 9058 targetStyle.opacity = 9059 lead === this 9060 ? valuesToRender.opacity !== undefined 9061 ? valuesToRender.opacity 9062 : "" 9063 : valuesToRender.opacityExit !== undefined 9064 ? valuesToRender.opacityExit 9065 : 0; 9066 } 9067 /** 9068 * Apply scale correction 9069 */ 9070 for (const key in scaleCorrectors) { 9071 if (valuesToRender[key] === undefined) 9072 continue; 9073 const { correct, applyTo, isCSSVariable } = scaleCorrectors[key]; 9074 /** 9075 * Only apply scale correction to the value if we have an 9076 * active projection transform. Otherwise these values become 9077 * vulnerable to distortion if the element changes size without 9078 * a corresponding layout animation. 9079 */ 9080 const corrected = transform === "none" 9081 ? valuesToRender[key] 9082 : correct(valuesToRender[key], lead); 9083 if (applyTo) { 9084 const num = applyTo.length; 9085 for (let i = 0; i < num; i++) { 9086 targetStyle[applyTo[i]] = corrected; 9087 } 9088 } 9089 else { 9090 // If this is a CSS variable, set it directly on the instance. 9091 // Replacing this function from creating styles to setting them 9092 // would be a good place to remove per frame object creation 9093 if (isCSSVariable) { 9094 this.options.visualElement.renderState.vars[key] = corrected; 9095 } 9096 else { 9097 targetStyle[key] = corrected; 9098 } 9099 } 9100 } 9101 /** 9102 * Disable pointer events on follow components. This is to ensure 9103 * that if a follow component covers a lead component it doesn't block 9104 * pointer events on the lead. 9105 */ 9106 if (this.options.layoutId) { 9107 targetStyle.pointerEvents = 9108 lead === this 9109 ? resolveMotionValue(styleProp?.pointerEvents) || "" 9110 : "none"; 9111 } 9112 } 9113 clearSnapshot() { 9114 this.resumeFrom = this.snapshot = undefined; 9115 } 9116 // Only run on root 9117 resetTree() { 9118 this.root.nodes.forEach((node) => node.currentAnimation?.stop()); 9119 this.root.nodes.forEach(clearMeasurements); 9120 this.root.sharedNodes.clear(); 9121 } 9122 }; 9123} 9124function updateLayout(node) { 9125 node.updateLayout(); 9126} 9127function notifyLayoutUpdate(node) { 9128 const snapshot = node.resumeFrom?.snapshot || node.snapshot; 9129 if (node.isLead() && 9130 node.layout && 9131 snapshot && 9132 node.hasListeners("didUpdate")) { 9133 const { layoutBox: layout, measuredBox: measuredLayout } = node.layout; 9134 const { animationType } = node.options; 9135 const isShared = snapshot.source !== node.layout.source; 9136 // TODO Maybe we want to also resize the layout snapshot so we don't trigger 9137 // animations for instance if layout="size" and an element has only changed position 9138 if (animationType === "size") { 9139 eachAxis((axis) => { 9140 const axisSnapshot = isShared 9141 ? snapshot.measuredBox[axis] 9142 : snapshot.layoutBox[axis]; 9143 const length = calcLength(axisSnapshot); 9144 axisSnapshot.min = layout[axis].min; 9145 axisSnapshot.max = axisSnapshot.min + length; 9146 }); 9147 } 9148 else if (animationType === "x" || animationType === "y") { 9149 const snapAxis = animationType === "x" ? "y" : "x"; 9150 copyAxisInto(isShared 9151 ? snapshot.measuredBox[snapAxis] 9152 : snapshot.layoutBox[snapAxis], layout[snapAxis]); 9153 } 9154 else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) { 9155 eachAxis((axis) => { 9156 const axisSnapshot = isShared 9157 ? snapshot.measuredBox[axis] 9158 : snapshot.layoutBox[axis]; 9159 const length = calcLength(layout[axis]); 9160 axisSnapshot.max = axisSnapshot.min + length; 9161 /** 9162 * Ensure relative target gets resized and rerendererd 9163 */ 9164 if (node.relativeTarget && !node.currentAnimation) { 9165 node.isProjectionDirty = true; 9166 node.relativeTarget[axis].max = 9167 node.relativeTarget[axis].min + length; 9168 } 9169 }); 9170 } 9171 const layoutDelta = createDelta(); 9172 calcBoxDelta(layoutDelta, layout, snapshot.layoutBox); 9173 const visualDelta = createDelta(); 9174 if (isShared) { 9175 calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox); 9176 } 9177 else { 9178 calcBoxDelta(visualDelta, layout, snapshot.layoutBox); 9179 } 9180 const hasLayoutChanged = !isDeltaZero(layoutDelta); 9181 let hasRelativeLayoutChanged = false; 9182 if (!node.resumeFrom) { 9183 const relativeParent = node.getClosestProjectingParent(); 9184 /** 9185 * If the relativeParent is itself resuming from a different element then 9186 * the relative snapshot is not relavent 9187 */ 9188 if (relativeParent && !relativeParent.resumeFrom) { 9189 const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent; 9190 if (parentSnapshot && parentLayout) { 9191 const anchor = node.options.layoutAnchor || undefined; 9192 const relativeSnapshot = createBox(); 9193 calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox, anchor); 9194 const relativeLayout = createBox(); 9195 calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox, anchor); 9196 if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) { 9197 hasRelativeLayoutChanged = true; 9198 } 9199 if (relativeParent.options.layoutRoot) { 9200 node.relativeTarget = relativeLayout; 9201 node.relativeTargetOrigin = relativeSnapshot; 9202 node.relativeParent = relativeParent; 9203 } 9204 } 9205 } 9206 } 9207 node.notifyListeners("didUpdate", { 9208 layout, 9209 snapshot, 9210 delta: visualDelta, 9211 layoutDelta, 9212 hasLayoutChanged, 9213 hasRelativeLayoutChanged, 9214 }); 9215 } 9216 else if (node.isLead()) { 9217 const { onExitComplete } = node.options; 9218 onExitComplete && onExitComplete(); 9219 } 9220 /** 9221 * Clearing transition 9222 * TODO: Investigate why this transition is being passed in as {type: false } from Framer 9223 * and why we need it at all 9224 */ 9225 node.options.transition = undefined; 9226} 9227function propagateDirtyNodes(node) { 9228 /** 9229 * Increase debug counter for nodes encountered this frame 9230 */ 9231 if (
vendor: 1,429 bytes, lines 9231-9272
9231buffer/* statsBuffer */.f.value) { 9232 metrics.nodes++; 9233 } 9234 if (!node.parent) 9235 return; 9236 /** 9237 * If this node isn't projecting, propagate isProjectionDirty. It will have 9238 * no performance impact but it will allow the next child that *is* projecting 9239 * but *isn't* dirty to just check its parent to see if *any* ancestor needs 9240 * correcting. 9241 */ 9242 if (!node.isProjecting()) { 9243 node.isProjectionDirty = node.parent.isProjectionDirty; 9244 } 9245 /** 9246 * Propagate isSharedProjectionDirty and isTransformDirty 9247 * throughout the whole tree. A future revision can take another look at 9248 * this but for safety we still recalcualte shared nodes. 9249 */ 9250 node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty || 9251 node.parent.isProjectionDirty || 9252 node.parent.isSharedProjectionDirty)); 9253 node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty); 9254} 9255function cleanDirtyNodes(node) { 9256 node.isProjectionDirty = 9257 node.isSharedProjectionDirty = 9258 node.isTransformDirty = 9259 false; 9260} 9261function clearSnapshot(node) { 9262 node.clearSnapshot(); 9263} 9264function clearMeasurements(node) { 9265 node.clearMeasurements(); 9266} 9267function forceLayoutMeasure(node) { 9268 node.isLayoutDirty = true; 9269 node.updateLayout(); 9270} 9271function clearIsLayoutDirty(node) { 9272 node.isLayoutDirty = false;
vendor: 6,196 bytes, lines 9273-9464
9273} 9274/** 9275 * When a node is animation-blocked (e.g. during drag) and its component 9276 * didn't re-render (memoized), willUpdate() is never called so there's 9277 * no snapshot. Use the previous layout as a snapshot and mark dirty so 9278 * resetTransform/updateLayout/notifyLayoutUpdate process it normally. 9279 */ 9280function ensureDraggedNodesSnapshotted(node) { 9281 if (node.isAnimationBlocked && node.layout && !node.isLayoutDirty) { 9282 node.snapshot = node.layout; 9283 node.isLayoutDirty = true; 9284 } 9285} 9286function resetTransformStyle(node) { 9287 const { visualElement } = node.options; 9288 if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) { 9289 visualElement.notify("BeforeLayoutMeasure"); 9290 } 9291 node.resetTransform(); 9292} 9293function finishAnimation(node) { 9294 node.finishAnimation(); 9295 node.targetDelta = node.relativeTarget = node.target = undefined; 9296 node.isProjectionDirty = true; 9297} 9298function resolveTargetDelta(node) { 9299 node.resolveTargetDelta(); 9300} 9301function calcProjection(node) { 9302 node.calcProjection(); 9303} 9304function resetSkewAndRotation(node) { 9305 node.resetSkewAndRotation(); 9306} 9307function removeLeadSnapshots(stack) { 9308 stack.removeLeadSnapshot(); 9309} 9310function mixAxisDeltaLinear(output, delta, p) { 9311 output.translate = (0,number/* mixNumber */.t)(delta.translate, 0, p); 9312 output.scale = (0,number/* mixNumber */.t)(delta.scale, 1, p); 9313 output.origin = delta.origin; 9314 output.originPoint = delta.originPoint; 9315} 9316function mixAxis(output, from, to, p) { 9317 output.min = (0,number/* mixNumber */.t)(from.min, to.min, p); 9318 output.max = (0,number/* mixNumber */.t)(from.max, to.max, p); 9319} 9320function mixBox(output, from, to, p) { 9321 mixAxis(output.x, from.x, to.x, p); 9322 mixAxis(output.y, from.y, to.y, p); 9323} 9324function hasOpacityCrossfade(node) { 9325 return (node.animationValues && node.animationValues.opacityExit !== undefined); 9326} 9327const defaultLayoutTransition = { 9328 duration: 0.45, 9329 ease: [0.4, 0, 0.1, 1], 9330}; 9331const userAgentContains = (string) => typeof navigator !== "undefined" && 9332 navigator.userAgent && 9333 navigator.userAgent.toLowerCase().includes(string); 9334/** 9335 * Measured bounding boxes must be rounded in Safari and 9336 * left untouched in Chrome, otherwise non-integer layouts within scaled-up elements 9337 * can appear to jump. 9338 */ 9339const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/") 9340 ? Math.round 9341 : noop/* noop */.Z; 9342function roundAxis(axis) { 9343 // Round to the nearest .5 pixels to support subpixel layouts 9344 axis.min = roundPoint(axis.min); 9345 axis.max = roundPoint(axis.max); 9346} 9347function roundBox(box) { 9348 roundAxis(box.x); 9349 roundAxis(box.y); 9350} 9351function shouldAnimatePositionOnly(animationType, snapshot, layout) { 9352 return (animationType === "position" || 9353 (animationType === "preserve-aspect" && 9354 !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2))); 9355} 9356function checkNodeWasScrollRoot(node) { 9357 return node !== node.root && node.scroll?.wasRoot; 9358} 9359 9360 9361//# sourceMappingURL=create-projection-node.mjs.map 9362 9363;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/node/DocumentProjectionNode.mjs 9364 9365 9366 9367const DocumentProjectionNode = create_projection_node_createProjectionNode({ 9368 attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify), 9369 measureScroll: () => ({ 9370 x: document.documentElement.scrollLeft || document.body?.scrollLeft || 0, 9371 y: document.documentElement.scrollTop || document.body?.scrollTop || 0, 9372 }), 9373 checkIsScrollRoot: () => true, 9374}); 9375 9376 9377//# sourceMappingURL=DocumentProjectionNode.mjs.map 9378 9379;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/projection/node/HTMLProjectionNode.mjs 9380 9381 9382 9383const rootProjectionNode = { 9384 current: undefined, 9385}; 9386const HTMLProjectionNode = create_projection_node_createProjectionNode({ 9387 measureScroll: (instance) => ({ 9388 x: instance.scrollLeft, 9389 y: instance.scrollTop, 9390 }), 9391 defaultParent: () => { 9392 if (!rootProjectionNode.current) { 9393 const documentNode = new DocumentProjectionNode({}); 9394 documentNode.mount(window); 9395 documentNode.setOptions({ layoutScroll: true }); 9396 rootProjectionNode.current = documentNode; 9397 } 9398 return rootProjectionNode.current; 9399 }, 9400 resetTransform: (instance, value) => { 9401 instance.style.transform = value !== undefined ? value : "none"; 9402 }, 9403 checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"), 9404}); 9405 9406 9407//# sourceMappingURL=HTMLProjectionNode.mjs.map 9408 9409;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/drag.mjs 9410 9411 9412 9413 9414 9415const drag = { 9416 pan: { 9417 Feature: PanGesture, 9418 }, 9419 drag: { 9420 Feature: DragGesture, 9421 ProjectionNode: HTMLProjectionNode, 9422 MeasureLayout: MeasureLayout, 9423 }, 9424}; 9425 9426 9427//# sourceMappingURL=drag.mjs.map 9428 9429// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/resolve-elements.mjs 9430var resolve_elements = __webpack_require__(59960); 9431;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/utils/setup.mjs 9432 9433 9434function setupGesture(elementOrSelector, options) { 9435 const elements = (0,resolve_elements/* resolveElements */.I)(elementOrSelector); 9436 const gestureAbortController = new AbortController(); 9437 const eventOptions = { 9438 passive: true, 9439 ...options, 9440 signal: gestureAbortController.signal, 9441 }; 9442 const cancel = () => gestureAbortController.abort(); 9443 return [elements, eventOptions, cancel]; 9444} 9445 9446 9447//# sourceMappingURL=setup.mjs.map 9448 9449;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/hover.mjs 9450 9451 9452 9453function isValidHover(event) { 9454 return !(event.pointerType === "touch" || isDragActive()); 9455} 9456/** 9457 * Create a hover gesture. hover() is different to .addEventListener("pointerenter") 9458 * in that it has an easier syntax, filters out polyfilled touch events, interoperates 9459 * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends. 9460 * 9461 * @public 9462 */ 9463function hover(elementOrSelector, onHoverStart, options = {}) { 9464 const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
vendor: 4,821 bytes, lines 9465-9607
9465 elements.forEach((element) => { 9466 let isPressed = false; 9467 let deferredHoverEnd = false; 9468 let hoverEndCallback; 9469 const removePointerLeave = () => { 9470 element.removeEventListener("pointerleave", onPointerLeave); 9471 }; 9472 const endHover = (event) => { 9473 if (hoverEndCallback) { 9474 hoverEndCallback(event); 9475 hoverEndCallback = undefined; 9476 } 9477 removePointerLeave(); 9478 }; 9479 const onPointerUp = (event) => { 9480 isPressed = false; 9481 window.removeEventListener("pointerup", onPointerUp); 9482 window.removeEventListener("pointercancel", onPointerUp); 9483 if (deferredHoverEnd) { 9484 deferredHoverEnd = false; 9485 endHover(event); 9486 } 9487 }; 9488 const onPointerDown = () => { 9489 isPressed = true; 9490 window.addEventListener("pointerup", onPointerUp, eventOptions); 9491 window.addEventListener("pointercancel", onPointerUp, eventOptions); 9492 }; 9493 const onPointerLeave = (leaveEvent) => { 9494 if (leaveEvent.pointerType === "touch") 9495 return; 9496 if (isPressed) { 9497 deferredHoverEnd = true; 9498 return; 9499 } 9500 endHover(leaveEvent); 9501 }; 9502 const onPointerEnter = (enterEvent) => { 9503 if (!isValidHover(enterEvent)) 9504 return; 9505 deferredHoverEnd = false; 9506 const onHoverEnd = onHoverStart(element, enterEvent); 9507 if (typeof onHoverEnd !== "function") 9508 return; 9509 hoverEndCallback = onHoverEnd; 9510 element.addEventListener("pointerleave", onPointerLeave, eventOptions); 9511 }; 9512 element.addEventListener("pointerenter", onPointerEnter, eventOptions); 9513 element.addEventListener("pointerdown", onPointerDown, eventOptions); 9514 }); 9515 return cancel; 9516} 9517 9518 9519//# sourceMappingURL=hover.mjs.map 9520 9521;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/hover.mjs 9522 9523 9524 9525function handleHoverEvent(node, event, lifecycle) { 9526 const { props } = node; 9527 if (node.animationState && props.whileHover) { 9528 node.animationState.setActive("whileHover", lifecycle === "Start"); 9529 } 9530 const eventName = ("onHover" + lifecycle); 9531 const callback = props[eventName]; 9532 if (callback) { 9533 frameloop_frame/* frame */.Wi.postRender(() => callback(event, extractEventInfo(event))); 9534 } 9535} 9536class HoverGesture extends Feature { 9537 mount() { 9538 const { current } = this.node; 9539 if (!current) 9540 return; 9541 this.unmount = hover(current, (_element, startEvent) => { 9542 handleHoverEvent(this.node, startEvent, "Start"); 9543 return (endEvent) => handleHoverEvent(this.node, endEvent, "End"); 9544 }); 9545 } 9546 unmount() { } 9547} 9548 9549 9550//# sourceMappingURL=hover.mjs.map 9551 9552;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/focus.mjs 9553 9554 9555 9556class FocusGesture extends Feature { 9557 constructor() { 9558 super(...arguments); 9559 this.isActive = false; 9560 } 9561 onFocus() { 9562 let isFocusVisible = false; 9563 /** 9564 * If this element doesn't match focus-visible then don't 9565 * apply whileHover. But, if matches throws that focus-visible 9566 * is not a valid selector then in that browser outline styles will be applied 9567 * to the element by default and we want to match that behaviour with whileFocus. 9568 */ 9569 try { 9570 isFocusVisible = this.node.current.matches(":focus-visible"); 9571 } 9572 catch (e) { 9573 isFocusVisible = true; 9574 } 9575 if (!isFocusVisible || !this.node.animationState) 9576 return; 9577 this.node.animationState.setActive("whileFocus", true); 9578 this.isActive = true; 9579 } 9580 onBlur() { 9581 if (!this.isActive || !this.node.animationState) 9582 return; 9583 this.node.animationState.setActive("whileFocus", false); 9584 this.isActive = false; 9585 } 9586 mount() { 9587 this.unmount = (0,pipe/* pipe */.z)(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur())); 9588 } 9589 unmount() { } 9590} 9591 9592 9593//# sourceMappingURL=focus.mjs.map 9594 9595// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/is-html-element.mjs 9596var is_html_element = __webpack_require__(13537); 9597;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/utils/is-node-or-child.mjs 9598/** 9599 * Recursively traverse up the tree to check whether the provided child node 9600 * is the parent or a descendant of it. 9601 * 9602 * @param parent - Element to find 9603 * @param child - Element to test against parent 9604 */ 9605const isNodeOrChild = (parent, child) => { 9606 if (!child) { 9607 return false;
vendor: 4,369 bytes, lines 9608-9741
9608 } 9609 else if (parent === child) { 9610 return true; 9611 } 9612 else { 9613 return isNodeOrChild(parent, child.parentElement); 9614 } 9615}; 9616 9617 9618//# sourceMappingURL=is-node-or-child.mjs.map 9619 9620;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/press/utils/state.mjs 9621const isPressing = new WeakSet(); 9622 9623 9624//# sourceMappingURL=state.mjs.map 9625 9626;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/press/utils/keyboard.mjs 9627 9628 9629/** 9630 * Filter out events that are not "Enter" keys. 9631 */ 9632function filterEvents(callback) { 9633 return (event) => { 9634 if (event.key !== "Enter") 9635 return; 9636 callback(event); 9637 }; 9638} 9639function firePointerEvent(target, type) { 9640 target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true })); 9641} 9642const enableKeyboardPress = (focusEvent, eventOptions) => { 9643 const element = focusEvent.currentTarget; 9644 if (!element) 9645 return; 9646 const handleKeydown = filterEvents(() => { 9647 if (isPressing.has(element)) 9648 return; 9649 firePointerEvent(element, "down"); 9650 const handleKeyup = filterEvents(() => { 9651 firePointerEvent(element, "up"); 9652 }); 9653 const handleBlur = () => firePointerEvent(element, "cancel"); 9654 element.addEventListener("keyup", handleKeyup, eventOptions); 9655 element.addEventListener("blur", handleBlur, eventOptions); 9656 }); 9657 element.addEventListener("keydown", handleKeydown, eventOptions); 9658 /** 9659 * Add an event listener that fires on blur to remove the keydown events. 9660 */ 9661 element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions); 9662}; 9663 9664 9665//# sourceMappingURL=keyboard.mjs.map 9666 9667;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/gestures/press/index.mjs 9668 9669 9670 9671 9672 9673 9674 9675 9676 9677/** 9678 * Filter out events that are not primary pointer events, or are triggering 9679 * while a Motion gesture is active. 9680 */ 9681function isValidPressEvent(event) { 9682 return isPrimaryPointer(event) && !isDragActive(); 9683} 9684const claimedPointerDownEvents = new WeakSet(); 9685/** 9686 * Create a press gesture. 9687 * 9688 * Press is different to `"pointerdown"`, `"pointerup"` in that it 9689 * automatically filters out secondary pointer events like right 9690 * click and multitouch. 9691 * 9692 * It also adds accessibility support for keyboards, where 9693 * an element with a press gesture will receive focus and 9694 * trigger on Enter `"keydown"` and `"keyup"` events. 9695 * 9696 * This is different to a browser's `"click"` event, which does 9697 * respond to keyboards but only for the `"click"` itself, rather 9698 * than the press start and end/cancel. The element also needs 9699 * to be focusable for this to work, whereas a press gesture will 9700 * make an element focusable by default. 9701 * 9702 * @public 9703 */ 9704function press(targetOrSelector, onPressStart, options = {}) { 9705 const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options); 9706 const startPress = (startEvent) => { 9707 const target = startEvent.currentTarget; 9708 if (!isValidPressEvent(startEvent)) 9709 return; 9710 if (claimedPointerDownEvents.has(startEvent)) 9711 return; 9712 isPressing.add(target); 9713 if (options.stopPropagation) { 9714 claimedPointerDownEvents.add(startEvent); 9715 } 9716 const onPressEnd = onPressStart(target, startEvent); 9717 const onPointerEnd = (endEvent, success) => { 9718 window.removeEventListener("pointerup", onPointerUp); 9719 window.removeEventListener("pointercancel", onPointerCancel); 9720 if (isPressing.has(target)) { 9721 isPressing.delete(target); 9722 } 9723 if (!isValidPressEvent(endEvent)) { 9724 return; 9725 } 9726 if (typeof onPressEnd === "function") { 9727 onPressEnd(endEvent, { success }); 9728 } 9729 }; 9730 const onPointerUp = (upEvent) => { 9731 onPointerEnd(upEvent, target === window || 9732 target === document || 9733 options.useGlobalTarget || 9734 isNodeOrChild(target, upEvent.target)); 9735 }; 9736 const onPointerCancel = (cancelEvent) => { 9737 onPointerEnd(cancelEvent, false); 9738 }; 9739 window.addEventListener("pointerup", onPointerUp, eventOptions); 9740 window.addEventListener("pointercancel", onPointerCancel, eventOptions); 9741 };
vendor: 6,276 bytes, lines 9742-9917
9742 targets.forEach((target) => { 9743 const pointerDownTarget = options.useGlobalTarget ? window : target; 9744 pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions); 9745 if ((0,is_html_element/* isHTMLElement */.R)(target)) { 9746 target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions)); 9747 if (!isElementKeyboardAccessible(target) && 9748 !target.hasAttribute("tabindex")) { 9749 target.tabIndex = 0; 9750 } 9751 } 9752 }); 9753 return cancelEvents; 9754} 9755 9756 9757//# sourceMappingURL=index.mjs.map 9758 9759;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/press.mjs 9760 9761 9762 9763function handlePressEvent(node, event, lifecycle) { 9764 const { props } = node; 9765 if (node.current instanceof HTMLButtonElement && node.current.disabled) { 9766 return; 9767 } 9768 if (node.animationState && props.whileTap) { 9769 node.animationState.setActive("whileTap", lifecycle === "Start"); 9770 } 9771 const eventName = ("onTap" + (lifecycle === "End" ? "" : lifecycle)); 9772 const callback = props[eventName]; 9773 if (callback) { 9774 frameloop_frame/* frame */.Wi.postRender(() => callback(event, extractEventInfo(event))); 9775 } 9776} 9777class PressGesture extends Feature { 9778 mount() { 9779 const { current } = this.node; 9780 if (!current) 9781 return; 9782 const { globalTapTarget, propagate } = this.node.props; 9783 this.unmount = press(current, (_element, startEvent) => { 9784 handlePressEvent(this.node, startEvent, "Start"); 9785 return (endEvent, { success }) => handlePressEvent(this.node, endEvent, success ? "End" : "Cancel"); 9786 }, { 9787 useGlobalTarget: globalTapTarget, 9788 stopPropagation: propagate?.tap === false, 9789 }); 9790 } 9791 unmount() { } 9792} 9793 9794 9795//# sourceMappingURL=press.mjs.map 9796 9797;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs 9798/** 9799 * Map an IntersectionHandler callback to an element. We only ever make one handler for one 9800 * element, so even though these handlers might all be triggered by different 9801 * observers, we can keep them in the same map. 9802 */ 9803const observerCallbacks = new WeakMap(); 9804/** 9805 * Multiple observers can be created for multiple element/document roots. Each with 9806 * different settings. So here we store dictionaries of observers to each root, 9807 * using serialised settings (threshold/margin) as lookup keys. 9808 */ 9809const observers = new WeakMap(); 9810const fireObserverCallback = (entry) => { 9811 const callback = observerCallbacks.get(entry.target); 9812 callback && callback(entry); 9813}; 9814const fireAllObserverCallbacks = (entries) => { 9815 entries.forEach(fireObserverCallback); 9816}; 9817function initIntersectionObserver({ root, ...options }) { 9818 const lookupRoot = root || document; 9819 /** 9820 * If we don't have an observer lookup map for this root, create one. 9821 */ 9822 if (!observers.has(lookupRoot)) { 9823 observers.set(lookupRoot, {}); 9824 } 9825 const rootObservers = observers.get(lookupRoot); 9826 const key = JSON.stringify(options); 9827 /** 9828 * If we don't have an observer for this combination of root and settings, 9829 * create one. 9830 */ 9831 if (!rootObservers[key]) { 9832 rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options }); 9833 } 9834 return rootObservers[key]; 9835} 9836function observeIntersection(element, options, callback) { 9837 const rootInteresectionObserver = initIntersectionObserver(options); 9838 observerCallbacks.set(element, callback); 9839 rootInteresectionObserver.observe(element); 9840 return () => { 9841 observerCallbacks.delete(element); 9842 rootInteresectionObserver.unobserve(element); 9843 }; 9844} 9845 9846 9847//# sourceMappingURL=observers.mjs.map 9848 9849;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/viewport/index.mjs 9850 9851 9852 9853const thresholdNames = { 9854 some: 0, 9855 all: 1, 9856}; 9857class InViewFeature extends Feature { 9858 constructor() { 9859 super(...arguments); 9860 this.hasEnteredView = false; 9861 this.isInView = false; 9862 } 9863 startObserver() { 9864 this.stopObserver?.(); 9865 const { viewport = {} } = this.node.getProps(); 9866 const { root, margin: rootMargin, amount = "some", once } = viewport; 9867 const options = { 9868 root: root ? root.current : undefined, 9869 rootMargin, 9870 threshold: typeof amount === "number" ? amount : thresholdNames[amount], 9871 }; 9872 const onIntersectionUpdate = (entry) => { 9873 const { isIntersecting } = entry; 9874 /** 9875 * If there's been no change in the viewport state, early return. 9876 */ 9877 if (this.isInView === isIntersecting) 9878 return; 9879 this.isInView = isIntersecting; 9880 /** 9881 * Handle hasEnteredView. If this is only meant to run once, and 9882 * element isn't visible, early return. Otherwise set hasEnteredView to true. 9883 */ 9884 if (once && !isIntersecting && this.hasEnteredView) { 9885 return; 9886 } 9887 else if (isIntersecting) { 9888 this.hasEnteredView = true; 9889 } 9890 if (this.node.animationState) { 9891 this.node.animationState.setActive("whileInView", isIntersecting); 9892 } 9893 /** 9894 * Use the latest committed props rather than the ones in scope 9895 * when this observer is created 9896 */ 9897 const { onViewportEnter, onViewportLeave } = this.node.getProps(); 9898 const callback = isIntersecting ? onViewportEnter : onViewportLeave; 9899 callback && callback(entry); 9900 }; 9901 this.stopObserver = observeIntersection(this.node.current, options, onIntersectionUpdate); 9902 } 9903 mount() { 9904 this.startObserver(); 9905 } 9906 update() { 9907 if (typeof IntersectionObserver === "undefined") 9908 return; 9909 const { props, prevProps } = this.node; 9910 const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps)); 9911 if (hasOptionsChanged) { 9912 this.startObserver(); 9913 } 9914 } 9915 unmount() { 9916 this.stopObserver?.(); 9917 this.hasEnteredView = false;
9918 this.isInView = false; 9919 } 9920} 9921function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) { 9922 return (name) => viewport[name] !== prevViewport[name]; 9923} 9924 9925 9926//# sourceMappingURL=index.mjs.map 9927 9928;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/gestures.mjs 9929 9930 9931 9932 9933 9934const gestureAnimations = { 9935 inView: { 9936 Feature: InViewFeature, 9937 }, 9938 tap: { 9939 Feature: PressGesture, 9940 }, 9941 focus: { 9942 Feature: FocusGesture, 9943 }, 9944 hover: { 9945 Feature: HoverGesture, 9946 }, 9947}; 9948 9949 9950//# sourceMappingURL=gestures.mjs.map 9951 9952;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/layout.mjs 9953 9954 9955 9956const layout = { 9957 layout: { 9958 ProjectionNode: HTMLProjectionNode, 9959 MeasureLayout: MeasureLayout, 9960 }, 9961}; 9962 9963 9964//# sourceMappingURL=layout.mjs.map 9965 9966;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/components/motion/feature-bundle.mjs 9967 9968 9969 9970 9971 9972const featureBundle = { 9973 ...animations, 9974 ...gestureAnimations, 9975 ...drag, 9976 ...layout, 9977}; 9978 9979 9980//# sourceMappingURL=feature-bundle.mjs.map 9981 9982;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs 9983 9984 9985 9986 9987const motion = /*@__PURE__*/ createMotionProxy(featureBundle, createDomVisualElement); 9988 9989 9990//# sourceMappingURL=proxy.mjs.map 9991 9992 9993/***/ }), 9994 9995/***/ 53576: 9996/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 9997 9998"use strict"; 9999/* harmony export */ __webpack_require__.d(__webpack_exports__, { 10000/* harmony export */ h: function() { return /* binding */ useConstant; } 10001/* harmony export */ }); 10002/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2265); 10003/* __next_internal_client_entry_do_not_use__ useConstant auto */ 10004/** 10005 * Creates a constant value over the lifecycle of a component. 10006 * 10007 * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer 10008 * a guarantee that it won't re-run for performance reasons later on. By using `useConstant` 10009 * you can ensure that initialisers don't execute twice or more. 10010 */ function useConstant(init) { 10011 const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null); 10012 if (ref.current === null) { 10013 ref.current = init(); 10014 } 10015 return ref.current; 10016} 10017 //# sourceMappingURL=use-constant.mjs.map 10018 10019 10020/***/ }), 10021 10022/***/ 12014: 10023/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 10024 10025"use strict"; 10026 10027// EXPORTS 10028__webpack_require__.d(__webpack_exports__, { 10029 L: function() { return /* binding */ useIsomorphicLayoutEffect; } 10030}); 10031 10032// EXTERNAL MODULE: ./node_modules/next/dist/compiled/react/index.js 10033var react = __webpack_require__(2265); 10034;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-browser.mjs 10035const isBrowser = typeof window !== "undefined"; 10036 10037 10038//# sourceMappingURL=is-browser.mjs.map 10039 10040;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs 10041/* __next_internal_client_entry_do_not_use__ useIsomorphicLayoutEffect auto */ 10042 10043const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect; 10044 //# sourceMappingURL=use-isomorphic-effect.mjs.map 10045 10046 10047/***/ }), 10048 10049/***/ 28441: 10050/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 10051 10052"use strict"; 10053 10054// EXPORTS 10055__webpack_require__.d(__webpack_exports__, { 10056 L: function() { return /* binding */ JSAnimation; } 10057}); 10058 10059// UNUSED EXPORTS: animateValue 10060 10061// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/pipe.mjs 10062var pipe = __webpack_require__(24750); 10063// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/clamp.mjs 10064var clamp = __webpack_require__(21865); 10065// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/time-conversion.mjs 10066var time_conversion = __webpack_require__(29711); 10067// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/frameloop/sync-time.mjs 10068var sync_time = __webpack_require__(41927); 10069// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/stats/animation-count.mjs 10070var animation_count = __webpack_require__(35818); 10071// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/mix/index.mjs + 5 modules 10072var mix = __webpack_require__(63723); 10073// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/frameloop/frame.mjs 10074var frameloop_frame = __webpack_require__(26147); 10075;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/drivers/frame.mjs 10076 10077 10078 10079const frameloopDriver = (update) => { 10080 const passTimestamp = ({ timestamp }) => update(timestamp); 10081 return { 10082 start: (keepAlive = true) => frameloop_frame/* frame */.Wi.update(passTimestamp, keepAlive), 10083 stop: () => (0,frameloop_frame/* cancelFrame */.Pn)(passTimestamp), 10084 /** 10085 * If we're processing this frame we can use the 10086 * framelocked timestamp to keep things in sync. 10087 */ 10088 now: () => (frameloop_frame.frameData.isProcessing ? frameloop_frame.frameData.timestamp : sync_time/* time */.X.now()), 10089 }; 10090}; 10091 10092 10093//# sourceMappingURL=frame.mjs.map 10094 10095// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/generators/inertia.mjs 10096var inertia = __webpack_require__(85898); 10097// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/generators/keyframes.mjs + 4 modules 10098var keyframes = __webpack_require__(77638); 10099// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/generators/utils/calc-duration.mjs 10100var calc_duration = __webpack_require__(44013); 10101// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/generators/utils/velocity.mjs 10102var velocity = __webpack_require__(59989); 10103// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/get-final.mjs 10104var get_final = __webpack_require__(69118); 10105// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/utils/replace-transition-type.mjs 10106var replace_transition_type = __webpack_require__(98133); 10107// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/utils/WithProm
10107ise.mjs 10108var WithPromise = __webpack_require__(9868); 10109;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/JSAnimation.mjs 10110 10111 10112 10113 10114 10115 10116 10117 10118 10119 10120 10121 10122 10123const percentToProgress = (percent) => percent / 100; 10124class JSAnimation extends WithPromise/* WithPromise */.T { 10125 constructor(options) { 10126 super(); 10127 this.state = "idle"; 10128 this.startTime = null; 10129 this.isStopped = false; 10130 /** 10131 * The current time of the animation. 10132 */ 10133 this.currentTime = 0; 10134 /** 10135 * The time at which the animation was paused. 10136 */ 10137 this.holdTime = null; 10138 /** 10139 * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed. 10140 */ 10141 this.playbackSpeed = 1; 10142 /** 10143 * Reusable state object for the delay phase to avoid 10144 * allocating a new object every frame. 10145 */ 10146 this.delayState = { 10147 done: false, 10148 value: undefined, 10149 }; 10150 /** 10151 * This method is bound to the instance to fix a pattern where 10152 * animation.stop is returned as a reference from a useEffect. 10153 */ 10154 this.stop = () => { 10155 const { motionValue } = this.options; 10156 if (motionValue && motionValue.updatedAt !== sync_time/* time */.X.now()) { 10157 this.tick(sync_time/* time */.X.now()); 10158 } 10159 this.isStopped = true; 10160 if (this.state === "idle") 10161 return; 10162 this.teardown(); 10163 this.options.onStop?.(); 10164 }; 10165 animation_count/* activeAnimations */.P.mainThread++; 10166 this.options = options; 10167 this.initAnimation(); 10168 this.play(); 10169 if (options.autoplay === false) 10170 this.pause(); 10171 } 10172 initAnimation() { 10173 const { options } = this; 10174 (0,replace_transition_type/* replaceTransitionType */.f)(options); 10175 const { type = keyframes/* keyframes */.F, repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = options; 10176 let { keyframes: keyframes$1 } = options; 10177 const generatorFactory = type || keyframes/* keyframes */.F; 10178 if (false) {} 10179 if (generatorFactory !== keyframes/* keyframes */.F && 10180 typeof keyframes$1[0] !== "number") { 10181 this.mixKeyframes = (0,pipe/* pipe */.z)(percentToProgress, (0,mix/* mix */.C)(keyframes$1[0], keyframes$1[1])); 10182 keyframes$1 = [0, 100]; 10183 } 10184 const generator = generatorFactory({ ...options, keyframes: keyframes$1 }); 10185 /** 10186 * If we have a mirror repeat type we need to create a second generator that outputs the 10187 * mirrored (not reversed) animation and later ping pong between the two generators. 10188 */ 10189 if (repeatType === "mirror") { 10190 this.mirroredGenerator = generatorFactory({ 10191 ...options, 10192 keyframes: [...keyframes$1].reverse(), 10193 velocity: -velocity, 10194 }); 10195 } 10196 /** 10197 * If duration is undefined and we have repeat options, 10198 * we need to calculate a duration from the generator. 10199 * 10200 * We set it to the generator itself to cache the duration. 10201 * Any timeline resolver will need to have already precalculated 10202 * the duration by this step. 10203 */ 10204 if (generator.calculatedDuration === null) { 10205 generator.calculatedDuration = (0,calc_duration/* calcGeneratorDuration */.i)(generator); 10206 } 10207 const { calculatedDuration } = generator; 10208 this.calculatedDuration = calculatedDuration; 10209 this.resolvedDuration = calculatedDuration + repeatDelay; 10210 this.totalDuration = this.resolvedDuration * (repeat + 1) - repeatDelay; 10211 this.generator = generator; 10212 } 10213 updateTime(timestamp) { 10214 const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed; 10215 // Update currentTime 10216 if (this.holdTime !== null) { 10217 this.currentTime = this.holdTime; 10218 } 10219 else { 10220 // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 = 10221 // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for 10222 // example. 10223 this.currentTime = animationTime; 10224 } 10225 } 10226 tick(timestamp, sample = false) { 10227 const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, calculatedDuration, } = this; 10228 if (this.startTime === null) 10229 return generator.next(0);
vendor: 5,056 bytes, lines 10230-10352
10230 const { delay = 0, keyframes, repeat, repeatType, repeatDelay, type, onUpdate, finalKeyframe, } = this.options; 10231 /** 10232 * requestAnimationFrame timestamps can come through as lower than 10233 * the startTime as set by performance.now(). Here we prevent this, 10234 * though in the future it could be possible to make setting startTime 10235 * a pending operation that gets resolved here. 10236 */ 10237 if (this.speed > 0) { 10238 this.startTime = Math.min(this.startTime, timestamp); 10239 } 10240 else if (this.speed < 0) { 10241 this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime); 10242 } 10243 if (sample) { 10244 this.currentTime = timestamp; 10245 } 10246 else { 10247 this.updateTime(timestamp); 10248 } 10249 // Rebase on delay 10250 const timeWithoutDelay = this.currentTime - delay * (this.playbackSpeed >= 0 ? 1 : -1); 10251 const isInDelayPhase = this.playbackSpeed >= 0 10252 ? timeWithoutDelay < 0 10253 : timeWithoutDelay > totalDuration; 10254 this.currentTime = Math.max(timeWithoutDelay, 0); 10255 // If this animation has finished, set the current time to the total duration. 10256 if (this.state === "finished" && this.holdTime === null) { 10257 this.currentTime = totalDuration; 10258 } 10259 let elapsed = this.currentTime; 10260 let frameGenerator = generator; 10261 if (repeat) { 10262 /** 10263 * Get the current progress (0-1) of the animation. If t is > 10264 * than duration we'll get values like 2.5 (midway through the 10265 * third iteration) 10266 */ 10267 const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration; 10268 /** 10269 * Get the current iteration (0 indexed). For instance the floor of 10270 * 2.5 is 2. 10271 */ 10272 let currentIteration = Math.floor(progress); 10273 /** 10274 * Get the current progress of the iteration by taking the remainder 10275 * so 2.5 is 0.5 through iteration 2 10276 */ 10277 let iterationProgress = progress % 1.0; 10278 /** 10279 * If iteration progress is 1 we count that as the end 10280 * of the previous iteration. 10281 */ 10282 if (!iterationProgress && progress >= 1) { 10283 iterationProgress = 1; 10284 } 10285 iterationProgress === 1 && currentIteration--; 10286 currentIteration = Math.min(currentIteration, repeat + 1); 10287 /** 10288 * Reverse progress if we're not running in "normal" direction 10289 */ 10290 const isOddIteration = Boolean(currentIteration % 2); 10291 if (isOddIteration) { 10292 if (repeatType === "reverse") { 10293 iterationProgress = 1 - iterationProgress; 10294 if (repeatDelay) { 10295 iterationProgress -= repeatDelay / resolvedDuration; 10296 } 10297 } 10298 else if (repeatType === "mirror") { 10299 frameGenerator = mirroredGenerator; 10300 } 10301 } 10302 elapsed = (0,clamp/* clamp */.u)(0, 1, iterationProgress) * resolvedDuration; 10303 } 10304 /** 10305 * If we're in negative time, set state as the initial keyframe. 10306 * This prevents delay: x, duration: 0 animations from finishing 10307 * instantly. 10308 */ 10309 let state; 10310 if (isInDelayPhase) { 10311 this.delayState.value = keyframes[0]; 10312 state = this.delayState; 10313 } 10314 else { 10315 state = frameGenerator.next(elapsed); 10316 } 10317 if (mixKeyframes && !isInDelayPhase) { 10318 state.value = mixKeyframes(state.value); 10319 } 10320 let { done } = state; 10321 if (!isInDelayPhase && calculatedDuration !== null) { 10322 done = 10323 this.playbackSpeed >= 0 10324 ? this.currentTime >= totalDuration 10325 : this.currentTime <= 0; 10326 } 10327 const isAnimationFinished = this.holdTime === null && 10328 (this.state === "finished" || (this.state === "running" && done)); 10329 // TODO: The exception for inertia could be cleaner here 10330 if (isAnimationFinished && type !== inertia/* inertia */.I) { 10331 state.value = (0,get_final/* getFinalKeyframe */.$)(keyframes, this.options, finalKeyframe, this.speed); 10332 } 10333 if (onUpdate) { 10334 onUpdate(state.value); 10335 } 10336 if (isAnimationFinished) { 10337 this.finish(); 10338 } 10339 return state; 10340 } 10341 /** 10342 * Allows the returned animation to be awaited or promise-chained. Currently 10343 * resolves when the animation finishes at all but in a future update could/should 10344 * reject if its cancels. 10345 */ 10346 then(resolve, reject) { 10347 return this.finished.then(resolve, reject); 10348 } 10349 get duration() { 10350 return (0,time_conversion/* millisecondsToSeconds */.X)(this.calculatedDuration); 10351 } 10352 get iterationDuration() {
10353 const { delay = 0 } = this.options || {}; 10354 return this.duration + (0,time_conversion/* millisecondsToSeconds */.X)(delay); 10355 } 10356 get time() { 10357 return (0,time_conversion/* millisecondsToSeconds */.X)(this.currentTime); 10358 } 10359 set time(newTime) { 10360 newTime = (0,time_conversion/* secondsToMilliseconds */.w)(newTime); 10361 this.currentTime = newTime; 10362 if (this.startTime === null || 10363 this.holdTime !== null || 10364 this.playbackSpeed === 0) { 10365 this.holdTime = newTime; 10366 } 10367 else if (this.driver) { 10368 this.startTime = this.driver.now() - newTime / this.playbackSpeed; 10369 } 10370 if (this.driver) { 10371 this.driver.start(false); 10372 } 10373 else { 10374 this.startTime = 0; 10375 this.state = "paused"; 10376 this.holdTime = newTime; 10377 this.tick(newTime); 10378 } 10379 } 10380 /** 10381 * Returns the generator's velocity at the current time in units/second. 10382 * Uses the analytical derivative when available (springs), avoiding 10383 * the MotionValue's frame-dependent velocity estimation. 10384 */ 10385 getGeneratorVelocity() { 10386 const t = this.currentTime; 10387 if (t <= 0) 10388 return this.options.velocity || 0; 10389 if (this.generator.velocity) { 10390 return this.generator.velocity(t); 10391 } 10392 // Fallback: finite difference 10393 const current = this.generator.next(t).value; 10394 return (0,velocity/* getGeneratorVelocity */.e)((s) => this.generator.next(s).value, t, current); 10395 } 10396 get speed() { 10397 return this.playbackSpeed; 10398 } 10399 set speed(newSpeed) { 10400 const hasChanged = this.playbackSpeed !== newSpeed; 10401 if (hasChanged && this.driver) { 10402 this.updateTime(sync_time/* time */.X.now()); 10403 } 10404 this.playbackSpeed = newSpeed; 10405 if (hasChanged && this.driver) { 10406 this.time = (0,time_conversion/* millisecondsToSeconds */.X)(this.currentTime); 10407 } 10408 } 10409 play() { 10410 if (this.isStopped) 10411 return; 10412 const { driver = frameloopDriver, startTime } = this.options; 10413 if (!this.driver) { 10414 this.driver = driver((timestamp) => this.tick(timestamp)); 10415 } 10416 this.options.onPlay?.(); 10417 const now = this.driver.now(); 10418 if (this.state === "finished") { 10419 this.updateFinished(); 10420 this.startTime = now; 10421 } 10422 else if (this.holdTime !== null) { 10423 this.startTime = now - this.holdTime; 10424 } 10425 else if (!this.startTime) { 10426 this.startTime = startTime ?? now; 10427 } 10428 if (this.state === "finished" && this.speed < 0) { 10429 this.startTime += this.calculatedDuration; 10430 } 10431 this.holdTime = null; 10432 /** 10433 * Set playState to running only after we've used it in 10434 * the previous logic. 10435 */ 10436 this.state = "running"; 10437 this.driver.start(); 10438 } 10439 pause() { 10440 this.state = "paused"; 10441 this.updateTime(sync_time/* time */.X.now()); 10442 this.holdTime = this.currentTime; 10443 } 10444 complete() { 10445 if (this.state !== "running") { 10446 this.play(); 10447 } 10448 this.state = "finished"; 10449 this.holdTime = null; 10450 } 10451 finish() { 10452 this.notifyFinished(); 10453 this.teardown(); 10454 this.state = "finished"; 10455 this.options.onComplete?.(); 10456 } 10457 cancel() { 10458 this.holdTime = null; 10459 this.startTime = 0; 10460 this.tick(0); 10461 this.teardown(); 10462 this.options.onCancel?.(); 10463 } 10464 teardown() { 10465 this.state = "idle"; 10466 this.stopDriver(); 10467 this.startTime = this.holdTime = null; 10468 animation_count/* activeAnimations */.P.mainThread--; 10469 } 10470 stopDriver() { 10471 if (!this.driver) 10472 return; 10473 this.driver.stop(); 10474 this.driver = undefined; 10475 } 10476 sample(sampleTime) { 10477 this.startTime = 0; 10478 return this.tick(sampleTime, true); 10479 } 10480 attachTimeline(timeline) { 10481 if (this.options.allowFlatten) { 10482 this.options.type = "keyframes"; 10483 this.options.ease = "linear"; 10484 this.initAnimation(); 10485 } 10486 this.driver?.stop(); 10487 return timeline.observe(this); 10488 } 10489} 10490// Legacy function support 10491function animateValue(options) { 10492 return new JSAnimation(options); 10493} 10494 10495 10496//# sourceMappingURL=JSAnimation.mjs.map 10497 10498 10499/***/ }), 10500 10501/***/ 85898: 10502/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 10503 10504"use strict"; 10505/* harmony export */ __webpack_require__.d(__webpack_exports__, { 10506/* harmony export */ I: function() { return /* binding */ inertia; } 10507/* harmony export */ }); 10508/* harmony import */ var _spring_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(82699); 10509/* harmony import */ var _utils_velocity_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(59989); 10510 10511 10512 10513function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) { 10514 const origin = keyframes[0]; 10515 const state = { 10516 done: false, 10517 value: origin, 10518 }; 10519 const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max); 10520 const nearestBoundary = (v) => { 10521 if (min === undefined) 10522 return max; 10523 if (max === undefined) 10524 return min; 10525 return Math.abs(min - v) < Math.abs(max - v) ? min : max; 10526 }; 10527 let amplitude = power * velocity; 10528 const ideal = origin + amplitude; 10529 const target = modifyTarget === undefined ? ideal : modifyTarget(ideal); 10530 /** 10531 * If the target has changed we need to re-calculate the amplitude, otherwise 10532 * the animation will start from the wrong position. 10533 */ 10534 if (target !== ideal) 10535 amplitude = target - origin; 10536 const calcDelta = (t) =>
10536 -amplitude * Math.exp(-t / timeConstant); 10537 const calcLatest = (t) => target + calcDelta(t); 10538 const applyFriction = (t) => { 10539 const delta = calcDelta(t); 10540 const latest = calcLatest(t); 10541 state.done = Math.abs(delta) <= restDelta; 10542 state.value = state.done ? target : latest; 10543 }; 10544 /** 10545 * Ideally this would resolve for t in a stateless way, we could 10546 * do that by always precalculating the animation but as we know 10547 * this will be done anyway we can assume that spring will 10548 * be discovered during that. 10549 */ 10550 let timeReachedBoundary; 10551 let spring$1; 10552 const checkCatchBoundary = (t) => { 10553 if (!isOutOfBounds(state.value)) 10554 return; 10555 timeReachedBoundary = t; 10556 spring$1 = (0,_spring_mjs__WEBPACK_IMPORTED_MODULE_0__/* .spring */ .S)({ 10557 keyframes: [state.value, nearestBoundary(state.value)], 10558 velocity: (0,_utils_velocity_mjs__WEBPACK_IMPORTED_MODULE_1__/* .getGeneratorVelocity */ .e)(calcLatest, t, state.value), // TODO: This should be passing * 1000 10559 damping: bounceDamping, 10560 stiffness: bounceStiffness, 10561 restDelta, 10562 restSpeed, 10563 }); 10564 }; 10565 checkCatchBoundary(0); 10566 return { 10567 calculatedDuration: null, 10568 next: (t) => { 10569 /** 10570 * We need to resolve the friction to figure out if we need a 10571 * spring but we don't want to do this twice per frame. So here 10572 * we flag if we updated for this frame and later if we did 10573 * we can skip doing it again. 10574 */ 10575 let hasUpdatedFrame = false; 10576 if (!spring$1 && timeReachedBoundary === undefined) { 10577 hasUpdatedFrame = true; 10578 applyFriction(t); 10579 checkCatchBoundary(t); 10580 } 10581 /** 10582 * If we have a spring and the provided t is beyond the moment the friction 10583 * animation crossed the min/max boundary, use the spring. 10584 */ 10585 if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) { 10586 return spring$1.next(t - timeReachedBoundary); 10587 } 10588 else { 10589 !hasUpdatedFrame && applyFriction(t); 10590 return state; 10591 } 10592 }, 10593 }; 10594} 10595 10596 10597//# sourceMappingURL=inertia.mjs.map 10598 10599 10600/***/ }), 10601 10602/***/ 77638: 10603/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 10604 10605"use strict"; 10606 10607// EXPORTS 10608__webpack_require__.d(__webpack_exports__, { 10609 F: function() { return /* binding */ keyframes; } 10610}); 10611 10612// UNUSED EXPORTS: defaultEasing 10613 10614// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/easing/cubic-bezier.mjs 10615var cubic_bezier = __webpack_require__(60068); 10616;// CONCATENATED MODULE: ./node_modules/motion-utils/dist/es/easing/ease.mjs 10617 10618 10619const easeIn = /*@__PURE__*/ (0,cubic_bezier/* cubicBezier */._)(0.42, 0, 1, 1); 10620const easeOut = /*@__PURE__*/ (0,cubic_bezier/* cubicBezier */._)(0, 0, 0.58, 1); 10621const easeInOut = /*@__PURE__*/ (0,cubic_bezier/* cubicBezier */._)(0.42, 0, 0.58, 1); 10622 10623 10624//# sourceMappingURL=ease.mjs.map 10625 10626;// CONCATENATED MODULE: ./node_modules/motion-utils/dist/es/easing/utils/is-easing-array.mjs 10627/*#__NO_SIDE_EFFECTS__*/ 10628const isEasingArray = (ease) => { 10629 return Array.isArray(ease) && typeof ease[0] !== "number"; 10630}; 10631 10632 10633//# sourceMappingURL=is-easing-array.mjs.map 10634 10635// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/errors.mjs 10636var errors = __webpack_require__(62035); 10637// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/noop.mjs 10638var noop = __webpack_require__(56277); 10639// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/easing/anticipate.mjs 10640var anticipate = __webpack_require__(43273); 10641// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/easing/back.mjs 10642var back = __webpack_require__(75567); 10643// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/easing/circ.mjs 10644var circ = __webpack_require__(52927); 10645// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/easing/utils/is-bezier-definition.mjs 10646var is_bezier_definition = __webpack_require__(53857); 10647;// CONCATENATED MODULE: ./node_modules/motion-utils/dist/es/easing/utils/map.mjs 10648 10649 10650 10651 10652 10653 10654 10655 10656 10657const easingLookup = { 10658 linear: noop/* noop */.Z, 10659 easeIn: easeIn, 10660 easeInOut: easeInOut, 10661 easeOut: easeOut,
10662 circIn: circ/* circIn */.Z7, 10663 circInOut: circ/* circInOut */.X7, 10664 circOut: circ/* circOut */.Bn, 10665 backIn: back/* backIn */.G2, 10666 backInOut: back/* backInOut */.XL, 10667 backOut: back/* backOut */.CG, 10668 anticipate: anticipate/* anticipate */.L, 10669}; 10670const isValidEasing = (easing) => { 10671 return typeof easing === "string"; 10672}; 10673const easingDefinitionToFunction = (definition) => { 10674 if ((0,is_bezier_definition/* isBezierDefinition */.q)(definition)) { 10675 // If cubic bezier definition, create bezier curve 10676 (0,errors/* invariant */.k)(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`, "cubic-bezier-length"); 10677 const [x1, y1, x2, y2] = definition; 10678 return (0,cubic_bezier/* cubicBezier */._)(x1, y1, x2, y2); 10679 } 10680 else if (isValidEasing(definition)) { 10681 // Else lookup from table 10682 (0,errors/* invariant */.k)(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`, "invalid-easing-type"); 10683 return easingLookup[definition]; 10684 } 10685 return definition; 10686}; 10687 10688 10689//# sourceMappingURL=map.mjs.map 10690 10691// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/interpolate.mjs 10692var interpolate = __webpack_require__(28460); 10693// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/offsets/default.mjs + 1 modules 10694var offsets_default = __webpack_require__(42880); 10695;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/offsets/time.mjs 10696function convertOffsetToTimes(offset, duration) { 10697 return offset.map((o) => o * duration); 10698} 10699 10700 10701//# sourceMappingURL=time.mjs.map 10702 10703;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/generators/keyframes.mjs 10704 10705 10706 10707 10708 10709function defaultEasing(values, easing) { 10710 return values.map(() => easing || easeInOut).splice(0, values.length - 1); 10711} 10712function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) { 10713 /** 10714 * Easing functions can be externally defined as strings. Here we convert them 10715 * into actual functions. 10716 */ 10717 const easingFunctions = isEasingArray(ease) 10718 ? ease.map(easingDefinitionToFunction) 10719 : easingDefinitionToFunction(ease); 10720 /** 10721 * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator 10722 * to reduce GC during animation. 10723 */ 10724 const state = { 10725 done: false, 10726 value: keyframeValues[0], 10727 }; 10728 /** 10729 * Create a times array based on the provided 0-1 offsets 10730 */ 10731 const absoluteTimes = convertOffsetToTimes( 10732 // Only use the provided offsets if they're the correct length 10733 // TODO Maybe we should warn here if there's a length mismatch 10734 times && times.length === keyframeValues.length 10735 ? times 10736 : (0,offsets_default/* defaultOffset */.Y)(keyframeValues), duration); 10737 const mapTimeToKeyframe = (0,interpolate/* interpolate */.s)(absoluteTimes, keyframeValues, { 10738 ease: Array.isArray(easingFunctions) 10739 ? easingFunctions 10740 : defaultEasing(keyframeValues, easingFunctions), 10741 }); 10742 return { 10743 calculatedDuration: duration, 10744 next: (t) => { 10745 state.value = mapTimeToKeyframe(t); 10746 state.done = t >= duration; 10747 return state; 10748 }, 10749 }; 10750} 10751 10752 10753//# sourceMappingURL=keyframes.mjs.map 10754 10755 10756/***/ }), 10757 10758/***/ 82699: 10759/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 10760 10761"use strict"; 10762 10763// EXPORTS 10764__webpack_require__.d(__webpack_exports__, { 10765 S: function() { return /* binding */ spring; } 10766}); 10767 10768// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/errors.mjs 10769var errors = __webpack_require__(62035); 10770// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/time-conversion.mjs 10771var time_conversion = __webpack_require__(29711); 10772// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/clamp.mjs 10773var clamp = __webpack_require__(21865); 10774// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/waapi/utils/linear.mjs 10775var linear = __webpack_require__(96092); 10776// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/generators/utils/calc-duration.mjs 10777var calc_duration = __webpack_require__(44013); 10778;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs 10779 10780 10781 10782/** 10783 * Create a progress => progress easing function from a generator. 10784 */ 10785function createGeneratorEasing(options, scale = 100, createGenerator) { 10786 const generator = createGenerator({ ...options, keyframes: [0, scale] }); 10787 const duration = Math.min((0,calc_duration/* calcGeneratorDuration */.i)(generator), calc_duration/* maxGeneratorDuration */.E); 10788 return { 10789 type: "keyframes", 10790 ease: (progress) => { 10791 return generator.next(duration * progress).value / scale; 10792 }, 10793 duration: (0,time_conversion/* millisecondsToSeconds */.X)(duration), 10794 }; 10795} 10796 10797 10798//# sourceMappingURL=create-generator-easing.mjs.map 10799 10800;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/generators/spring.mjs 10801 10802 10803 10804 10805 10806const springDefaults = { 10807 // Default spring physics 10808 stiffness: 100, 10809 damping: 10, 10810 mass: 1.0, 10811 velocity: 0.0, 10812 // Default duration/bounce-based options
10813 duration: 800, // in ms 10814 bounce: 0.3, 10815 visualDuration: 0.3, // in seconds 10816 // Rest thresholds 10817 restSpeed: { 10818 granular: 0.01, 10819 default: 2, 10820 }, 10821 restDelta: { 10822 granular: 0.005, 10823 default: 0.5, 10824 }, 10825 // Limits 10826 minDuration: 0.01, // in seconds 10827 maxDuration: 10.0, // in seconds 10828 minDamping: 0.05, 10829 maxDamping: 1, 10830}; 10831function calcAngularFreq(undampedFreq, dampingRatio) { 10832 return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio); 10833} 10834const rootIterations = 12; 10835function approximateRoot(envelope, derivative, initialGuess) { 10836 let result = initialGuess; 10837 for (let i = 1; i < rootIterations; i++) { 10838 result = result - envelope(result) / derivative(result); 10839 } 10840 return result; 10841} 10842/** 10843 * This is ported from the Framer implementation of duration-based spring resolution. 10844 */ 10845const safeMin = 0.001; 10846function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) { 10847 let envelope; 10848 let derivative; 10849 (0,errors/* warning */.K)(duration <= (0,time_conversion/* secondsToMilliseconds */.w)(springDefaults.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit"); 10850 let dampingRatio = 1 - bounce; 10851 /** 10852 * Restrict dampingRatio and duration to within acceptable ranges. 10853 */ 10854 dampingRatio = (0,clamp/* clamp */.u)(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio); 10855 duration = (0,clamp/* clamp */.u)(springDefaults.minDuration, springDefaults.maxDuration, (0,time_conversion/* millisecondsToSeconds */.X)(duration)); 10856 if (dampingRatio < 1) { 10857 /** 10858 * Underdamped spring 10859 */ 10860 envelope = (undampedFreq) => { 10861 const exponentialDecay = undampedFreq * dampingRatio; 10862 const delta = exponentialDecay * duration; 10863 const a = exponentialDecay - velocity; 10864 const b = calcAngularFreq(undampedFreq, dampingRatio); 10865 const c = Math.exp(-delta); 10866 return safeMin - (a / b) * c; 10867 }; 10868 derivative = (undampedFreq) => { 10869 const exponentialDecay = undampedFreq * dampingRatio; 10870 const delta = exponentialDecay * duration; 10871 const d = delta * velocity + velocity; 10872 const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration; 10873 const f = Math.exp(-delta); 10874 const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio); 10875 const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1; 10876 return (factor * ((d - e) * f)) / g; 10877 }; 10878 } 10879 else { 10880 /** 10881 * Critically-damped spring 10882 */ 10883 envelope = (undampedFreq) => { 10884 const a = Math.exp(-undampedFreq * duration); 10885 const b = (undampedFreq - velocity) * duration + 1; 10886 return -safeMin + a * b; 10887 }; 10888 derivative = (undampedFreq) => { 10889 const a = Math.exp(-undampedFreq * duration); 10890 const b = (velocity - undampedFreq) * (duration * duration); 10891 return a * b; 10892 }; 10893 } 10894 const initialGuess = 5 / duration; 10895 const undampedFreq = approximateRoot(envelope, derivative, initialGuess); 10896 duration = (0,time_conversion/* secondsToMilliseconds */.w)(duration); 10897 if (isNaN(undampedFreq)) { 10898 return { 10899 stiffness: springDefaults.stiffness, 10900 damping: springDefaults.damping, 10901 duration, 10902 }; 10903 } 10904 else { 10905 const stiffness = Math.pow(undampedFreq, 2) * mass; 10906 return { 10907 stiffness, 10908 damping: dampingRatio * 2 * Math.sqrt(mass * stiffness), 10909 duration, 10910 }; 10911 } 10912} 10913const durationKeys = ["duration", "bounce"]; 10914const physicsKeys = ["stiffness", "damping", "mass"]; 10915function isSpringType(options, keys) { 10916 return keys.some((key) => options[key] !== undefined); 10917} 10918function getSpringOptions(options) { 10919 let springOptions = { 10920 velocity: springDefaults.velocity, 10921 stiffness: springDefaults.stiffness, 10922 damping: springDefaults.damping, 10923 mass: springDefaults.mass, 10924 isResolvedFromDuration: false, 10925 ...options, 10926 }; 10927 // stiffness/damping/mass overrides duration/bounce 10928 if (!isSpringType(options, physicsKeys) && 10929 isSpringType(options, durationKeys)) { 10930 // Time-defined springs should ignore inherited velocity. 10931 // Velocity from interrupted animations can cause findSpring() 10932 // to compute wildly different spring parameters, leading to 10933 // massive oscillation on small-range animations. 10934 springOptions.velocity = 0; 10935 if (options.visualDuration) { 10936 const visualDuration = options.visualDuration; 10937 const root = (2 * Math.PI) / (visualDuration * 1.2); 10938 const stiffness = root * root; 10939 const damping = 2 * 10940 (0,clamp/* clamp */.u)(0.05, 1, 1 - (options.bounce || 0)) * 10941 Math.sqrt(stiffness); 10942 springOptions = { 10943 ...springOptions, 10944 mass: springDefaults.mass, 10945 stiffness, 10946 damping, 10947 }; 10948 } 10949 else { 10950 const derived = findSpring({ ...options, velocity: 0 }); 10951 springOptions = { 10952 ...springOptions, 10953 ...derived, 10954 mass: springDefaults.mass, 10955 }; 10956 springOptions.isResolvedFromDuration = true; 10957 } 10958 } 10959 return springOptions; 10960} 10961function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) { 10962 const options = typeof optionsOrVisualDuration !== "object" 10963 ? { 10964 visualDuration: optionsOrVisualDuration, 10965 keyframes: [0, 1], 10966 bounce, 10967 } 10968 : optionsOrVisualDuration; 10969 let { restSpeed, restDelta } = options; 10970 const origin = options.keyframes[0]; 10971 const target = options.keyframes[options.keyframes.length - 1]; 10972 /** 10973 * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator 10974 * to reduce GC during animation. 10975 */ 10976 const state = { done: false, value: origin }; 10977 const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, } = getSpringOptions({ 10978 ...options, 10979 velocity: -(0,time_conversion/* millisecondsToSeconds */.X)(options.velocity || 0), 10980 }); 10981 const initialVelocity = velocity || 0.0; 10982 const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass)); 10983 const initialDelta = target - origin; 10984 const undampedAngularFreq = (0,time_conversion/* millisecondsToSeconds */.X)(Math.sqrt(stiffness / mass)); 10985 /** 10986 * If we're working on a granular scale, use smaller defaults for determining 10987 * when the spring is finished. 10988 * 10989 * These defaults have been selected emprically based on what strikes a good 10990 * ratio between feeling good and finishing as soon as changes are imperceptible. 10991 */ 10992 const isGranularScale = Math.abs(initialDelta) < 5; 10993 restSpeed || (restSpeed = isGranularScale 10994 ? springDefaults.restSpeed.granular 10995 : springDefaults.restSpeed.default); 10996 restDelta || (restDelta = isGranularScale 10997 ? springDefaults.restDelta.granular 10998 : springDefaults.restDelta.default); 10999 let resolveSpring; 11000 let resolveVelocity; 11001 // Underdamped coefficients, hoisted for use in the inlined next() hot path 11002 let angularFreq; 11003 let A; 11004 let sinCoeff;
11005 let cosCoeff; 11006 if (dampingRatio < 1) { 11007 angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio); 11008 A = 11009 (initialVelocity + 11010 dampingRatio * undampedAngularFreq * initialDelta) / 11011 angularFreq; 11012 // Underdamped spring 11013 resolveSpring = (t) => { 11014 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 11015 return (target - 11016 envelope * 11017 (A * Math.sin(angularFreq * t) + 11018 initialDelta * Math.cos(angularFreq * t))); 11019 }; 11020 // Analytical derivative of underdamped spring (px/ms) 11021 sinCoeff = 11022 dampingRatio * undampedAngularFreq * A + initialDelta * angularFreq; 11023 cosCoeff = 11024 dampingRatio * undampedAngularFreq * initialDelta - A * angularFreq; 11025 resolveVelocity = (t) => { 11026 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 11027 return envelope * 11028 (sinCoeff * Math.sin(angularFreq * t) + 11029 cosCoeff * Math.cos(angularFreq * t)); 11030 }; 11031 } 11032 else if (dampingRatio === 1) { 11033 // Critically damped spring 11034 resolveSpring = (t) => target - 11035 Math.exp(-undampedAngularFreq * t) * 11036 (initialDelta + 11037 (initialVelocity + undampedAngularFreq * initialDelta) * t); 11038 // Analytical derivative of critically damped spring (px/ms) 11039 const C = initialVelocity + undampedAngularFreq * initialDelta; 11040 resolveVelocity = (t) => Math.exp(-undampedAngularFreq * t) * 11041 (undampedAngularFreq * C * t - initialVelocity); 11042 } 11043 else { 11044 // Overdamped spring 11045 const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1); 11046 resolveSpring = (t) => { 11047 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 11048 // When performing sinh or cosh values can hit Infinity so we cap them here 11049 const freqForT = Math.min(dampedAngularFreq * t, 300); 11050 return (target - 11051 (envelope * 11052 ((initialVelocity + 11053 dampingRatio * undampedAngularFreq * initialDelta) * 11054 Math.sinh(freqForT) + 11055 dampedAngularFreq * 11056 initialDelta * 11057 Math.cosh(freqForT))) / 11058 dampedAngularFreq); 11059 }; 11060 // Analytical derivative of overdamped spring (px/ms) 11061 const P = (initialVelocity + 11062 dampingRatio * undampedAngularFreq * initialDelta) / 11063 dampedAngularFreq; 11064 const sinhCoeff = dampingRatio * undampedAngularFreq * P - initialDelta * dampedAngularFreq; 11065 const coshCoeff = dampingRatio * undampedAngularFreq * initialDelta - P * dampedAngularFreq; 11066 resolveVelocity = (t) => { 11067 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 11068 const freqForT = Math.min(dampedAngularFreq * t, 300); 11069 return envelope * 11070 (sinhCoeff * Math.sinh(freqForT) + 11071 coshCoeff * Math.cosh(freqForT)); 11072 }; 11073 } 11074 const generator = { 11075 calculatedDuration: isResolvedFromDuration ? duration || null : null, 11076 velocity: (t) => (0,time_conversion/* secondsToMilliseconds */.w)(resolveVelocity(t)), 11077 next: (t) => { 11078 /** 11079 * For underdamped physics springs we need both position and 11080 * velocity each tick. Compute shared trig values once to avoid 11081 * duplicate Math.exp/sin/cos calls on the hot path. 11082 */ 11083 if (!isResolvedFromDuration && dampingRatio < 1) { 11084 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 11085 const sin = Math.sin(angularFreq * t); 11086 const cos = Math.cos(angularFreq * t); 11087 const current = target - 11088 envelope * 11089 (A * sin + initialDelta * cos); 11090 const currentVelocity = (0,time_conversion/* secondsToMilliseconds */.w)(envelope * 11091 (sinCoeff * sin + cosCoeff * cos)); 11092 state.done = 11093 Math.abs(currentVelocity) <= restSpeed && 11094 Math.abs(target - current) <= restDelta; 11095 state.value = state.done ? target : current; 11096 return state; 11097 } 11098 const current = resolveSpring(t); 11099 if (!isResolvedFromDuration) { 11100 const currentVelocity = (0,time_conversion/* secondsToMilliseconds */.w)(resolveVelocity(t)); 11101 state.done = 11102 Math.abs(currentVelocity) <= restSpeed && 11103 Math.abs(target - current) <= restDelta; 11104 } 11105 else { 11106 state.done = t >= duration; 11107 } 11108 state.value = state.done ? target : current; 11109 return state; 11110 }, 11111 toString: () => { 11112 const calculatedDuration = Math.min((0,calc_duration/* calcGeneratorDuration */.i)(generator), calc_duration/* maxGeneratorDuration */.E); 11113 const easing = (0,linear/* generateLinearEasing */.w)((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30); 11114 return calculatedDuration + "ms " + easing; 11115 }, 11116 toTransition: () => { }, 11117 }; 11118 return generator; 11119} 11120spring.applyToOptions = (options) => { 11121 const generatorOptions = createGeneratorEasing(options, 100, spring); 11122 options.ease = generatorOptions.ease; 11123 options.duration = (0,time_conversion/* secondsToMilliseconds */.w)(generatorOptions.duration); 11124 options.type = "keyframes"; 11125 return options; 11126}; 11127 11128 11129//# sourceMappingURL=spring.mjs.map 11130 11131 11132/***/ }), 11133 11134/***/ 44013: 11135/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11136 11137"use strict"; 11138/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11139/* harmony export */ E: function() { return /* binding */ maxGeneratorDuration; }, 11140/* harmony export */ i: function() { return /* binding */ calcGeneratorDuration; } 11141/* harmony export */ }); 11142/** 11143 * Implement a practical max duration for keyframe generation 11144 * to prevent infinite loops 11145 */ 11146const maxGeneratorDuration = 20000; 11147function calcGeneratorDuration(generator) { 11148 let duration = 0; 11149 const timeStep = 50; 11150 let state = generator.next(duration); 11151 while (!state.done && duration < maxGeneratorDuration) { 11152 duration += timeStep; 11153 state = generator.next(duration); 11154 } 11155 return duration >= maxGeneratorDuration ? Infinity : duration; 11156} 11157 11158 11159//# sourceMappingURL=calc-duration.mjs.map 11160 11161 11162/***/ }), 11163 11164/***/ 59989: 11165/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11166 11167"use strict"; 11168/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11169/* harmony export */ e: function() { return /* binding */ getGeneratorVelocity; } 11170/* harmony export */ }); 11171/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(88294); 11172 11173 11174const velocitySampleDuration = 5; // ms 11175function getGeneratorVelocity(resolveValue, t, current) { 11176 const prevT = Math.max(t - velocitySampleDuration, 0); 11177 return (0,motion_utils__WEBPACK_IMPORTED_MODULE_0__/* .velocityPerSecond */ .R)(current - resolveValue(prevT), t - prevT); 11178} 11179 11180 11181//# sourceMappingURL=velocity.mjs.map 11182 11183 11184/***/ }), 11185 11186/***/ 69118: 11187/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11188 11189"use strict"; 11190/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11191/* harmony export */ $: function() { return /* binding */ getFinalKeyframe; } 11192/* harmony export */ }); 11193const isNotNull = (value) => value !== null; 11194function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) { 11195 const resolvedKeyframes = keyframes.filter(isNotNull); 11196 const useFirstKeyframe = speed < 0 || (repeat && repeatType !== "loop" && repeat % 2 === 1); 11197 const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1; 11198 return !index || finalKeyframe === undefined 11199 ? resolvedKeyframes[index] 11200 : finalKeyframe; 11201} 11202 11203 11204//# sourceMappingURL=get-final.mjs.map 11205 11206 11207/***/ }), 11208 11209/***/ 42880: 11210/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11211 11212"use strict"; 11213 11214// EXPORTS 11215__webpack_require__.d(__webpack_exports__, { 11216 Y: function() { return /* binding */ defaultOffset; } 11217}); 11218 11219// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/progress.mjs 11220var progress = __webpack_require__(81645); 11221// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/mix/number.mjs 11222var number = __webpack_require__(33811); 11223;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/offsets/fill.mjs 11224 11225 11226
11227function fillOffset(offset, remaining) { 11228 const min = offset[offset.length - 1]; 11229 for (let i = 1; i <= remaining; i++) { 11230 const offsetProgress = (0,progress/* progress */.Y)(0, remaining, i); 11231 offset.push((0,number/* mixNumber */.t)(min, 1, offsetProgress)); 11232 } 11233} 11234 11235 11236//# sourceMappingURL=fill.mjs.map 11237 11238;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/animation/keyframes/offsets/default.mjs 11239 11240 11241function defaultOffset(arr) { 11242 const offset = [0]; 11243 fillOffset(offset, arr.length - 1); 11244 return offset; 11245} 11246 11247 11248//# sourceMappingURL=default.mjs.map 11249 11250 11251/***/ }), 11252 11253/***/ 9868: 11254/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11255 11256"use strict"; 11257/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11258/* harmony export */ T: function() { return /* binding */ WithPromise; } 11259/* harmony export */ }); 11260class WithPromise { 11261 constructor() { 11262 this.updateFinished(); 11263 } 11264 get finished() { 11265 return this._finished; 11266 } 11267 updateFinished() { 11268 this._finished = new Promise((resolve) => { 11269 this.resolve = resolve; 11270 }); 11271 } 11272 notifyFinished() { 11273 this.resolve(); 11274 } 11275 /** 11276 * Allows the animation to be awaited. 11277 * 11278 * @deprecated Use `finished` instead. 11279 */ 11280 then(onResolve, onReject) { 11281 return this.finished.then(onResolve, onReject); 11282 } 11283} 11284 11285 11286//# sourceMappingURL=WithPromise.mjs.map 11287 11288 11289/***/ }), 11290 11291/***/ 38596: 11292/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11293 11294"use strict"; 11295/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11296/* harmony export */ V3: function() { return /* binding */ containsCSSVariable; }, 11297/* harmony export */ f9: function() { return /* binding */ isCSSVariableName; }, 11298/* harmony export */ tm: function() { return /* binding */ isCSSVariableToken; } 11299/* harmony export */ }); 11300const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token); 11301const isCSSVariableName = 11302/*@__PURE__*/ checkStringStartsWith("--"); 11303const startsAsVariableToken = 11304/*@__PURE__*/ checkStringStartsWith("var(--"); 11305const isCSSVariableToken = (value) => { 11306 const startsWithToken = startsAsVariableToken(value); 11307 if (!startsWithToken) 11308 return false; 11309 // Ensure any comments are stripped from the value as this can harm performance of the regex. 11310 return singleCssVariableRegex.test(value.split("/*")[0].trim()); 11311}; 11312const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu; 11313/** 11314 * Check if a value contains a CSS variable anywhere (e.g. inside calc()). 11315 * Unlike isCSSVariableToken which checks if the value IS a var() token, 11316 * this checks if the value CONTAINS var() somewhere in the string. 11317 */ 11318function containsCSSVariable(value) { 11319 if (typeof value !== "string") 11320 return false; 11321 // Strip comments to avoid false positives 11322 return value.split("/*")[0].includes("var(--"); 11323} 11324 11325 11326//# sourceMappingURL=is-css-variable.mjs.map 11327 11328 11329/***/ }), 11330 11331/***/ 98133: 11332/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11333 11334"use strict"; 11335/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11336/* harmony export */ f: function() { return /* binding */ replaceTransitionType; } 11337/* harmony export */ }); 11338/* harmony import */ var _generators_inertia_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(85898); 11339/* harmony import */ var _generators_keyframes_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(77638); 11340/* harmony import */ var _generators_spring_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(82699); 11341 11342 11343 11344 11345const transitionTypeMap = { 11346 decay: _generators_inertia_mjs__WEBPACK_IMPORTED_MODULE_0__/* .inertia */ .I, 11347 inertia: _generators_inertia_mjs__WEBPACK_IMPORTED_MODULE_0__/* .inertia */ .I, 11348 tween: _generators_keyframes_mjs__WEBPACK_IMPORTED_MODULE_1__/* .keyframes */ .F, 11349 keyframes: _generators_keyframes_mjs__WEBPACK_IMPORTED_MODULE_1__/* .keyframes */ .F, 11350 spring: _generators_spring_mjs__WEBPACK_IMPORTED_MODULE_2__/* .spring */ .S, 11351}; 11352function replaceTransitionType(transition) { 11353 if (typeof transition.type === "string") { 11354 transition.type = transitionTypeMap[transition.type]; 11355 } 11356} 11357 11358 11359//# sourceMappingURL=replace-transition-type.mjs.map 11360 11361 11362/***/ }), 11363 11364/***/ 96092: 11365/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11366 11367"use strict"; 11368/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11369/* harmony export */ w: function() { return /* binding */ generateLinearEasing; } 11370/* harmony export */ }); 11371const generateLinearEasing = (easing, duration, // as milliseconds 11372resolution = 10 // as milliseconds 11373) => { 11374 let points = ""; 11375 const numPoints = Math.max(Math.round(duration / resolution), 2); 11376 for (let i = 0; i < numPoints; i++) { 11377 points += Math.round(easing(i / (numPoints - 1)) * 10000) / 10000 + ", "; 11378 } 11379 return `linear(${points.substring(0, points.length - 2)})`; 11380}; 11381 11382 11383//# sourceMappingURL=linear.mjs.map 11384 11385 11386/***/ }), 11387 11388/***/ 62862: 11389/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11390 11391"use strict"; 11392 11393// EXPORTS 11394__webpack_require__.d(__webpack_exports__, { 11395 Z: function() { return /* binding */ createRenderBatcher; } 11396}); 11397 11398// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/global-config.mjs 11399var global_config = __webpack_require__(21457); 11400;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/frameloop/order.mjs 11401const stepsOrder = [ 11402 "setup", // Compute 11403 "read", // Read 11404 "resolveKeyframes", // Write/Read/Write/Read 11405 "preUpdate", // Compute 11406 "update", // Compute 11407 "preRender", // Compute 11408 "render", // Write 11409 "postRender", // Compute 11410]; 11411 11412 11413//# sourceMappingURL=order.mjs.map 11414 11415// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/stats/buffer.mjs 11416var buffer = __webpack_require__(20557); 11417;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/frameloop/render-step.mjs 11418 11419 11420function createRenderStep(runNextFrame, stepName) { 11421 /** 11422 * We create and reuse two queues, one to queue jobs for the current frame 11423 * and one for the next. We reuse to avoid triggering GC after x frames. 11424 */ 11425 let thisFrame = new Set(); 11426 let nextFrame = new Set(); 11427 /**
11428 * Track whether we're currently processing jobs in this step. This way 11429 * we can decide whether to schedule new jobs for this frame or next. 11430 */ 11431 let isProcessing = false; 11432 let flushNextFrame = false; 11433 /** 11434 * A set of processes which were marked keepAlive when scheduled. 11435 */ 11436 const toKeepAlive = new WeakSet(); 11437 let latestFrameData = { 11438 delta: 0.0, 11439 timestamp: 0.0, 11440 isProcessing: false, 11441 }; 11442 let numCalls = 0; 11443 function triggerCallback(callback) { 11444 if (toKeepAlive.has(callback)) { 11445 step.schedule(callback); 11446 runNextFrame(); 11447 } 11448 numCalls++; 11449 callback(latestFrameData); 11450 } 11451 const step = { 11452 /** 11453 * Schedule a process to run on the next frame. 11454 */ 11455 schedule: (callback, keepAlive = false, immediate = false) => { 11456 const addToCurrentFrame = immediate && isProcessing; 11457 const queue = addToCurrentFrame ? thisFrame : nextFrame; 11458 if (keepAlive) 11459 toKeepAlive.add(callback); 11460 queue.add(callback); 11461 return callback; 11462 }, 11463 /** 11464 * Cancel the provided callback from running on the next frame. 11465 */ 11466 cancel: (callback) => { 11467 nextFrame.delete(callback); 11468 toKeepAlive.delete(callback); 11469 }, 11470 /** 11471 * Execute all schedule callbacks. 11472 */ 11473 process: (frameData) => { 11474 latestFrameData = frameData; 11475 /** 11476 * If we're already processing we've probably been triggered by a flushSync 11477 * inside an existing process. Instead of executing, mark flushNextFrame 11478 * as true and ensure we flush the following frame at the end of this one. 11479 */ 11480 if (isProcessing) { 11481 flushNextFrame = true; 11482 return; 11483 } 11484 isProcessing = true; 11485 // Swap this frame and the next to avoid GC 11486 const prevFrame = thisFrame; 11487 thisFrame = nextFrame; 11488 nextFrame = prevFrame; 11489 // Execute this frame 11490 thisFrame.forEach(triggerCallback); 11491 /** 11492 * If we're recording stats then 11493 */ 11494 if (stepName && buffer/* statsBuffer */.f.value) { 11495 buffer/* statsBuffer */.f.value.frameloop[stepName].push(numCalls); 11496 } 11497 numCalls = 0; 11498 // Clear the frame so no callbacks remain. This is to avoid 11499 // memory leaks should this render step not run for a while. 11500 thisFrame.clear(); 11501 isProcessing = false; 11502 if (flushNextFrame) { 11503 flushNextFrame = false; 11504 step.process(frameData); 11505 } 11506 }, 11507 }; 11508 return step; 11509} 11510 11511 11512//# sourceMappingURL=render-step.mjs.map 11513 11514;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/frameloop/batcher.mjs 11515 11516 11517 11518 11519const maxElapsed = 40; 11520function createRenderBatcher(scheduleNextBatch, allowKeepAlive) { 11521 let runNextFrame = false; 11522 let useDefaultElapsed = true; 11523 const state = { 11524 delta: 0.0, 11525 timestamp: 0.0, 11526 isProcessing: false, 11527 }; 11528 const flagRunNextFrame = () => (runNextFrame = true); 11529 const steps = stepsOrder.reduce((acc, key) => { 11530 acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined); 11531 return acc; 11532 }, {}); 11533 const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps; 11534 const processBatch = () => { 11535 const useManualTiming = global_config/* MotionGlobalConfig */.c.useManualTiming; 11536 const timestamp = useManualTiming 11537 ? state.timestamp 11538 : performance.now(); 11539 runNextFrame = false; 11540 if (!useManualTiming) { 11541 state.delta = useDefaultElapsed 11542 ? 1000 / 60 11543 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1); 11544 } 11545 state.timestamp = timestamp; 11546 state.isProcessing = true; 11547 // Unrolled render loop for better per-frame performance 11548 setup.process(state); 11549 read.process(state); 11550 resolveKeyframes.process(state); 11551 preUpdate.process(state); 11552 update.process(state); 11553 preRender.process(state); 11554 render.process(state); 11555 postRender.process(state); 11556 state.isProcessing = false;
11557 if (runNextFrame && allowKeepAlive) { 11558 useDefaultElapsed = false; 11559 scheduleNextBatch(processBatch); 11560 } 11561 }; 11562 const wake = () => { 11563 runNextFrame = true; 11564 useDefaultElapsed = true; 11565 if (!state.isProcessing) { 11566 scheduleNextBatch(processBatch); 11567 } 11568 }; 11569 const schedule = stepsOrder.reduce((acc, key) => { 11570 const step = steps[key]; 11571 acc[key] = (process, keepAlive = false, immediate = false) => { 11572 if (!runNextFrame) 11573 wake(); 11574 return step.schedule(process, keepAlive, immediate); 11575 }; 11576 return acc; 11577 }, {}); 11578 const cancel = (process) => { 11579 for (let i = 0; i < stepsOrder.length; i++) { 11580 steps[stepsOrder[i]].cancel(process); 11581 } 11582 }; 11583 return { schedule, cancel, state, steps }; 11584} 11585 11586 11587//# sourceMappingURL=batcher.mjs.map 11588 11589 11590/***/ }), 11591 11592/***/ 26147: 11593/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11594 11595"use strict"; 11596/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11597/* harmony export */ Pn: function() { return /* binding */ cancelFrame; }, 11598/* harmony export */ Wi: function() { return /* binding */ frame; }, 11599/* harmony export */ frameData: function() { return /* binding */ frameData; }, 11600/* harmony export */ yL: function() { return /* binding */ frameSteps; } 11601/* harmony export */ }); 11602/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(56277); 11603/* harmony import */ var _batcher_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(62862); 11604 11605 11606 11607const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ (0,_batcher_mjs__WEBPACK_IMPORTED_MODULE_0__/* .createRenderBatcher */ .Z)(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : motion_utils__WEBPACK_IMPORTED_MODULE_1__/* .noop */ .Z, true); 11608 11609 11610//# sourceMappingURL=frame.mjs.map 11611 11612 11613/***/ }), 11614 11615/***/ 3697: 11616/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11617 11618"use strict"; 11619/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11620/* harmony export */ $: function() { return /* binding */ cancelMicrotask; }, 11621/* harmony export */ g: function() { return /* binding */ microtask; } 11622/* harmony export */ }); 11623/* harmony import */ var _batcher_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(62862); 11624 11625 11626const { schedule: microtask, cancel: cancelMicrotask } = 11627/* @__PURE__ */ (0,_batcher_mjs__WEBPACK_IMPORTED_MODULE_0__/* .createRenderBatcher */ .Z)(queueMicrotask, false); 11628 11629 11630//# sourceMappingURL=microtask.mjs.map 11631 11632 11633/***/ }), 11634 11635/***/ 41927: 11636/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11637 11638"use strict"; 11639/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11640/* harmony export */ X: function() { return /* binding */ time; } 11641/* harmony export */ }); 11642/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(21457); 11643/* harmony import */ var _frame_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(26147); 11644 11645 11646 11647let now; 11648function clearTime() { 11649 now = undefined; 11650} 11651/** 11652 * An eventloop-synchronous alternative to performance.now(). 11653 * 11654 * Ensures that time measurements remain consistent within a synchronous context. 11655 * Usually calling performance.now() twice within the same synchronous context 11656 * will return different values which isn't useful for animations when we're usually 11657 * trying to sync animations to the same frame. 11658 */ 11659const time = { 11660 now: () => { 11661 if (now === undefined) { 11662 time.set(_frame_mjs__WEBPACK_IMPORTED_MODULE_0__.frameData.isProcessing || motion_utils__WEBPACK_IMPORTED_MODULE_1__/* .MotionGlobalConfig */ .c.useManualTiming 11663 ? _frame_mjs__WEBPACK_IMPORTED_MODULE_0__.frameData.timestamp 11664 : performance.now()); 11665 } 11666 return now; 11667 }, 11668 set: (newTime) => { 11669 now = newTime; 11670 queueMicrotask(clearTime); 11671 }, 11672}; 11673 11674 11675//# sourceMappingURL=sync-time.mjs.map 11676 11677 11678/***/ }), 11679 11680/***/ 4662: 11681/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11682 11683"use strict"; 11684/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11685/* harmony export */ Ad: function() { return /* binding */ initPrefersReducedMotion; } 11686/* harmony export */ }); 11687/* harmony import */ var _state_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(47435); 11688 11689 11690const isBrowser = typeof window !== "undefined"; 11691function initPrefersReducedMotion() { 11692 _state_mjs__WEBPACK_IMPORTED_MODULE_0__/* .hasReducedMotionListener */ .O.current = true; 11693 if (!isBrowser) 11694 return; 11695 if (window.matchMedia) { 11696 const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)"); 11697 const setReducedMotionPreferences = () => (_state_mjs__WEBPACK_IMPORTED_MODULE_0__/* .prefersReducedMotion */ .n.current = motionMediaQuery.matches); 11698 motionMediaQuery.addEventListener("change", setReducedMotionPreferences); 11699 setReducedMotionPreferences(); 11700 } 11701 else { 11702 _state_mjs__WEBPACK_IMPORTED_MODULE_0__/* .prefersReducedMotion */ .n.current = false;
11703 } 11704} 11705 11706 11707//# sourceMappingURL=index.mjs.map 11708 11709 11710/***/ }), 11711 11712/***/ 47435: 11713/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11714 11715"use strict"; 11716/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11717/* harmony export */ O: function() { return /* binding */ hasReducedMotionListener; }, 11718/* harmony export */ n: function() { return /* binding */ prefersReducedMotion; } 11719/* harmony export */ }); 11720// Does this device prefer reduced motion? Returns `null` server-side. 11721const prefersReducedMotion = { current: null }; 11722const hasReducedMotionListener = { current: false }; 11723 11724 11725//# sourceMappingURL=state.mjs.map 11726 11727 11728/***/ }), 11729 11730/***/ 38392: 11731/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11732 11733"use strict"; 11734 11735// EXPORTS 11736__webpack_require__.d(__webpack_exports__, { 11737 S: function() { return /* binding */ resize; } 11738}); 11739 11740// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/is-svg-element.mjs 11741var is_svg_element = __webpack_require__(51413); 11742// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/resolve-elements.mjs 11743var resolve_elements = __webpack_require__(59960); 11744;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/resize/handle-element.mjs 11745 11746 11747 11748const resizeHandlers = new WeakMap(); 11749let observer; 11750const getSize = (borderBoxAxis, svgAxis, htmlAxis) => (target, borderBoxSize) => { 11751 if (borderBoxSize && borderBoxSize[0]) { 11752 return borderBoxSize[0][(borderBoxAxis + "Size")]; 11753 } 11754 else if ((0,is_svg_element/* isSVGElement */.v)(target) && "getBBox" in target) { 11755 return target.getBBox()[svgAxis]; 11756 } 11757 else { 11758 return target[htmlAxis]; 11759 } 11760}; 11761const getWidth = /*@__PURE__*/ getSize("inline", "width", "offsetWidth"); 11762const getHeight = /*@__PURE__*/ getSize("block", "height", "offsetHeight"); 11763function notifyTarget({ target, borderBoxSize }) { 11764 resizeHandlers.get(target)?.forEach((handler) => { 11765 handler(target, { 11766 get width() { 11767 return getWidth(target, borderBoxSize); 11768 }, 11769 get height() { 11770 return getHeight(target, borderBoxSize); 11771 }, 11772 }); 11773 }); 11774} 11775function notifyAll(entries) { 11776 entries.forEach(notifyTarget); 11777} 11778function createResizeObserver() { 11779 if (typeof ResizeObserver === "undefined") 11780 return; 11781 observer = new ResizeObserver(notifyAll); 11782} 11783function resizeElement(target, handler) { 11784 if (!observer) 11785 createResizeObserver(); 11786 const elements = (0,resolve_elements/* resolveElements */.I)(target); 11787 elements.forEach((element) => { 11788 let elementHandlers = resizeHandlers.get(element); 11789 if (!elementHandlers) { 11790 elementHandlers = new Set(); 11791 resizeHandlers.set(element, elementHandlers); 11792 } 11793 elementHandlers.add(handler); 11794 observer?.observe(element); 11795 }); 11796 return () => { 11797 elements.forEach((element) => { 11798 const elementHandlers = resizeHandlers.get(element); 11799 elementHandlers?.delete(handler); 11800 if (!elementHandlers?.size) { 11801 observer?.unobserve(element); 11802 } 11803 }); 11804 }; 11805} 11806 11807 11808//# sourceMappingURL=handle-element.mjs.map 11809 11810;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/resize/handle-window.mjs 11811const windowCallbacks = new Set(); 11812let windowResizeHandler; 11813function createWindowResizeHandler() { 11814 windowResizeHandler = () => { 11815 const info = { 11816 get width() { 11817 return window.innerWidth; 11818 }, 11819 get height() { 11820 return window.innerHeight; 11821 }, 11822 }; 11823 windowCallbacks.forEach((callback) => callback(info)); 11824 }; 11825 window.addEventListener("resize", windowResizeHandler); 11826} 11827function resizeWindow(callback) { 11828 windowCallbacks.add(callback); 11829 if (!windowResizeHandler) 11830 createWindowResizeHandler(); 11831 return () => { 11832 windowCallbacks.delete(callback); 11833 if (!windowCallbacks.size && 11834 typeof windowResizeHandler === "function") { 11835 window.removeEventListener("resize", windowResizeHandler); 11836 windowResizeHandler = undefined; 11837 } 11838 }; 11839} 11840 11841 11842//# sourceMappingURL=handle-window.mjs.map 11843 11844;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/resize/index.mjs 11845 11846 11847 11848function resize(a, b) { 11849 return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b); 11850} 11851 11852 11853//# sourceMappingURL=index.mjs.map 11854 11855 11856/***/ }), 11857 11858/***/ 35818: 11859/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11860 11861"use strict"; 11862/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11863/* harmony export */ P: function() { return /* binding */ activeAnimations; } 11864/* harmony export */ }); 11865const activeAnimations = { 11866 layout: 0, 11867 mainThread: 0, 11868 waapi: 0, 11869}; 11870 11871 11872//# sourceMappingURL=animation-count.mjs.map 11873 11874 11875/***/ }), 11876 11877/***/ 20557: 11878/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11879 11880"use strict"; 11881/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11882/* harmony export */ f: function() { return /* binding */ statsBuffer; } 11883/* harmony export */ }); 11884const statsBuffer = { 11885 value: null, 11886 addProjectionMetrics: null, 11887}; 11888 11889 11890//# sourceMappingURL=buffer.mjs.map 11891 11892 11893/***/ }), 11894 11895/***/ 28460: 11896/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11897 11898"use strict"; 11899/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11900/* harmony export */ s: function() { return /* binding */ interpolate; } 11901/* harmony export */ }); 11902/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(21457); 11903/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(56277); 11904/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24750); 11905/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(62035); 11906/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(81645); 11907/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(21865); 11908/* harmony import */ var _mix_index_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(63723); 11909 11910 11911 11912function createMixers(output, ease, customMixer) { 11913 const mixers = []; 11914 const mixerFactory = customMixer || motion_utils__WEBPACK_IMPORTED_MODULE_0__/* .MotionGlobalConfig */ .c.mix || _mix_index_mjs__WEBPACK_IMPORTED_MODULE_1__/* .mix */ .C; 11915 const numMixers = output.length - 1; 11916 for (let i = 0; i < numMixers; i++) { 11917 let mixer = mixerFactory(output[i], output[i + 1]); 11918 if (ease) { 11919 const easingFunction = Array.isArray(ease) ? ease[i] || motion_utils__WEBPACK_IMPORTED_MODULE_2__/* .noop */ .Z : ease; 11920 mixer = (0,motion_utils__WEBPACK_IMPORTED_MODULE_3__/* .pipe */ .z)(easingFunction, mixer); 11921 } 11922 mixers.push(mixer); 11923 } 11924 return mixers; 11925} 11926/** 11927 * Create a function that maps from a numerical input array to a generic output array. 11928 * 11929 * Accepts: 11930 * - Numbers 11931 * - Colors (hex, hsl, hsla, rgb, rgba) 11932 * - Complex (combinations of one or more numbers or strings) 11933 * 11934 * ```jsx 11935 * const mixColor = interpolate([0, 1], ['#fff', '#000']) 11936 * 11937 * mixColor(0.5) // 'rgba(128, 128, 128, 1)' 11938 * ``` 11939 * 11940 * TODO Revisit this approach once we've moved to data models for values, 11941 * probably not needed to pregenerate mixer functions. 11942 * 11943 * @public 11944 */ 11945function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) { 11946 const inputLength = input.length; 11947 (0,motion_utils__WEBPACK_IMPORTED_MODULE_4__/* .invariant */ .k)(inputLength === output.length, "Both input and output ranges must be the same length", "range-length"); 11948 /** 11949 * If we're only provided a single input, we can just make a function 11950 * that returns the output. 11951 */ 11952 if (inputLength === 1) 11953 return () => output[0]; 11954 if (inputLength === 2 && output[0] === output[1]) 11955 return () => output[1]; 11956 const isZeroDeltaRange = input[0] === input[1]; 11957 // If input runs highest -> lowest, reverse both arrays 11958 if (input[0] >
11958 input[inputLength - 1]) { 11959 input = [...input].reverse(); 11960 output = [...output].reverse(); 11961 } 11962 const mixers = createMixers(output, ease, mixer); 11963 const numMixers = mixers.length; 11964 const interpolator = (v) => { 11965 if (isZeroDeltaRange && v < input[0]) 11966 return output[0]; 11967 let i = 0; 11968 if (numMixers > 1) { 11969 for (; i < input.length - 2; i++) { 11970 if (v < input[i + 1]) 11971 break; 11972 } 11973 } 11974 const progressInRange = (0,motion_utils__WEBPACK_IMPORTED_MODULE_5__/* .progress */ .Y)(input[i], input[i + 1], v); 11975 return mixers[i](progressInRange); 11976 }; 11977 return isClamp 11978 ? (v) => interpolator((0,motion_utils__WEBPACK_IMPORTED_MODULE_6__/* .clamp */ .u)(input[0], input[inputLength - 1], v)) 11979 : interpolator; 11980} 11981 11982 11983//# sourceMappingURL=interpolate.mjs.map 11984 11985 11986/***/ }), 11987 11988/***/ 13537: 11989/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 11990 11991"use strict"; 11992/* harmony export */ __webpack_require__.d(__webpack_exports__, { 11993/* harmony export */ R: function() { return /* binding */ isHTMLElement; } 11994/* harmony export */ }); 11995/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(41464); 11996 11997 11998/** 11999 * Checks if an element is an HTML element in a way 12000 * that works across iframes 12001 */ 12002function isHTMLElement(element) { 12003 return ((0,motion_utils__WEBPACK_IMPORTED_MODULE_0__/* .isObject */ .K)(element) && 12004 "offsetHeight" in element && 12005 !("ownerSVGElement" in element)); 12006} 12007 12008 12009//# sourceMappingURL=is-html-element.mjs.map 12010 12011 12012/***/ }), 12013 12014/***/ 51413: 12015/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12016 12017"use strict"; 12018/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12019/* harmony export */ v: function() { return /* binding */ isSVGElement; } 12020/* harmony export */ }); 12021/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(41464); 12022 12023 12024/** 12025 * Checks if an element is an SVG element in a way 12026 * that works across iframes 12027 */ 12028function isSVGElement(element) { 12029 return (0,motion_utils__WEBPACK_IMPORTED_MODULE_0__/* .isObject */ .K)(element) && "ownerSVGElement" in element; 12030} 12031 12032 12033//# sourceMappingURL=is-svg-element.mjs.map 12034 12035 12036/***/ }), 12037 12038/***/ 63723: 12039/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12040 12041"use strict"; 12042 12043// EXPORTS 12044__webpack_require__.d(__webpack_exports__, { 12045 C: function() { return /* binding */ mix; } 12046}); 12047 12048// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/pipe.mjs 12049var pipe = __webpack_require__(24750); 12050// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/errors.mjs 12051var errors = __webpack_require__(62035); 12052// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/animation/utils/is-css-variable.mjs 12053var is_css_variable = __webpack_require__(38596); 12054// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/color/index.mjs 12055var color = __webpack_require__(7537); 12056// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/complex/index.mjs + 1 modules 12057var complex = __webpack_require__(65050); 12058// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/color/hex.mjs 12059var hex = __webpack_require__(31664); 12060// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/color/hsla.mjs 12061var hsla = __webpack_require__(32017); 12062;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/color/hsla-to-rgba.mjs 12063// Adapted from https://gist.github.com/mjackson/5311256 12064function hueToRgb(p, q, t) { 12065 if (t < 0) 12066 t += 1; 12067 if (t > 1) 12068 t -= 1; 12069 if (t < 1 / 6) 12070 return p + (q - p) * 6 * t; 12071 if (t < 1 / 2) 12072 return q; 12073 if (t < 2 / 3) 12074 return p + (q - p) * (2 / 3 - t) * 6; 12075 return p; 12076} 12077function hslaToRgba({ hue, saturation, lightness, alpha }) { 12078 hue /= 360; 12079 saturation /= 100; 12080 lightness /= 100; 12081 let red = 0; 12082 let green = 0; 12083 let blue = 0; 12084 if (!saturation) { 12085 red = green = blue = lightness; 12086 } 12087 else { 12088 const q = lightness < 0.5 12089 ? lightness * (1 + saturation) 12090 : lightness + saturation - lightness * saturation; 12091 const p = 2 * lightness - q; 12092 red = hueToRgb(p, q, hue + 1 / 3); 12093 green = hueToRgb(p, q, hue); 12094 blue = hueToRgb(p, q, hue - 1 / 3); 12095 } 12096 return { 12097 red: Math.round(red * 255), 12098 green: Math.round(green * 255), 12099 blue: Math.round(blue * 255), 12100 alpha, 12101 }; 12102} 12103 12104 12105//# sourceMappingURL=hsla-to-rgba.mjs.map 12106 12107// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/color/rgba.mjs 12108var rgba = __webpack_require__(80230); 12109;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/mix/immediate.mjs 12110function mixImmediate(a, b) { 12111 return (p) => (p > 0 ? b : a); 12112} 12113 12114 12115//# sourceMappingURL=immediate.mjs.map 12116 12117// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/utils/mix/number.mjs 12118var number = __webpack_require__(33811); 12119;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/mix/color.mjs 12120 12121 12122 12123 12124 12125 12126 12127
12128// Linear color space blending 12129// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw 12130// Demonstrated http://codepen.io/osublake/pen/xGVVaN 12131const mixLinearColor = (from, to, v) => { 12132 const fromExpo = from * from; 12133 const expo = v * (to * to - fromExpo) + fromExpo; 12134 return expo < 0 ? 0 : Math.sqrt(expo); 12135}; 12136const colorTypes = [hex/* hex */.$, rgba/* rgba */.m, hsla/* hsla */.J]; 12137const getColorType = (v) => colorTypes.find((type) => type.test(v)); 12138function asRGBA(color) { 12139 const type = getColorType(color); 12140 (0,errors/* warning */.K)(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable"); 12141 if (!Boolean(type)) 12142 return false; 12143 let model = type.parse(color); 12144 if (type === hsla/* hsla */.J) { 12145 // TODO Remove this cast - needed since Motion's stricter typing 12146 model = hslaToRgba(model); 12147 } 12148 return model; 12149} 12150const mixColor = (from, to) => { 12151 const fromRGBA = asRGBA(from); 12152 const toRGBA = asRGBA(to); 12153 if (!fromRGBA || !toRGBA) { 12154 return mixImmediate(from, to); 12155 } 12156 const blended = { ...fromRGBA }; 12157 return (v) => { 12158 blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v); 12159 blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v); 12160 blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v); 12161 blended.alpha = (0,number/* mixNumber */.t)(fromRGBA.alpha, toRGBA.alpha, v); 12162 return rgba/* rgba */.m.transform(blended); 12163 }; 12164}; 12165 12166 12167//# sourceMappingURL=color.mjs.map 12168 12169;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/mix/visibility.mjs 12170const invisibleValues = new Set(["none", "hidden"]); 12171/** 12172 * Returns a function that, when provided a progress value between 0 and 1, 12173 * will return the "none" or "hidden" string only when the progress is that of 12174 * the origin or target. 12175 */ 12176function mixVisibility(origin, target) { 12177 if (invisibleValues.has(origin)) { 12178 return (p) => (p <= 0 ? origin : target); 12179 } 12180 else { 12181 return (p) => (p >= 1 ? target : origin); 12182 } 12183} 12184 12185 12186//# sourceMappingURL=visibility.mjs.map 12187 12188;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/mix/complex.mjs 12189 12190 12191 12192 12193 12194 12195 12196 12197 12198function mixNumber(a, b) { 12199 return (p) => (0,number/* mixNumber */.t)(a, b, p); 12200} 12201function getMixer(a) { 12202 if (typeof a === "number") { 12203 return mixNumber; 12204 } 12205 else if (typeof a === "string") { 12206 return (0,is_css_variable/* isCSSVariableToken */.tm)(a) 12207 ? mixImmediate 12208 : color/* color */.$.test(a) 12209 ? mixColor 12210 : mixComplex; 12211 } 12212 else if (Array.isArray(a)) { 12213 return mixArray; 12214 } 12215 else if (typeof a === "object") { 12216 return color/* color */.$.test(a) ? mixColor : mixObject; 12217 } 12218 return mixImmediate; 12219} 12220function mixArray(a, b) { 12221 const output = [...a]; 12222 const numValues = output.length; 12223 const blendValue = a.map((v, i) => getMixer(v)(v, b[i])); 12224 return (p) => { 12225 for (let i = 0; i < numValues; i++) { 12226 output[i] = blendValue[i](p); 12227 } 12228 return output; 12229 }; 12230} 12231function mixObject(a, b) { 12232 const output = { ...a, ...b }; 12233 const blendValue = {}; 12234 for (const key in output) { 12235 if (a[key] !== undefined && b[key] !== undefined) { 12236 blendValue[key] = getMixer(a[key])(a[key], b[key]); 12237 } 12238 } 12239 return (v) => { 12240 for (const key in blendValue) { 12241 output[key] = blendValue[key](v); 12242 } 12243 return output; 12244 }; 12245} 12246function matchOrder(origin, target) { 12247 const orderedOrigin = []; 12248 const pointers = { color: 0, var: 0, number: 0 }; 12249 for (let i = 0; i < target.values.length; i++) { 12250 const type = target.types[i]; 12251 const originIndex = origin.indexes[type][pointers[type]]; 12252 const originValue = origin.values[originIndex] ?? 0; 12253 orderedOrigin[i] = originValue; 12254 pointers[type]++; 12255 } 12256 return orderedOrigin; 12257} 12258const mixComplex = (origin, target) => { 12259 const template = complex/* complex */.P.createTransformer(target); 12260 const originStats = (0,complex/* analyseComplexValue */.V)(origin); 12261 const targetStats = (0,complex/* analyseComplexValue */.V)(target); 12262 const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length && 12263 originStats.indexes.color.length === targetStats.indexes.color.length && 12264 originStats.indexes.number.length >= targetStats.indexes.number.length; 12265 if (canInterpolate) { 12266 if ((invisibleValues.has(origin) &&
12267 !targetStats.values.length) || 12268 (invisibleValues.has(target) && 12269 !originStats.values.length)) { 12270 return mixVisibility(origin, target); 12271 } 12272 return (0,pipe/* pipe */.z)(mixArray(matchOrder(originStats, targetStats), targetStats.values), template); 12273 } 12274 else { 12275 (0,errors/* warning */.K)(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different"); 12276 return mixImmediate(origin, target); 12277 } 12278}; 12279 12280 12281//# sourceMappingURL=complex.mjs.map 12282 12283;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/mix/index.mjs 12284 12285 12286 12287function mix(from, to, p) { 12288 if (typeof from === "number" && 12289 typeof to === "number" && 12290 typeof p === "number") { 12291 return (0,number/* mixNumber */.t)(from, to, p); 12292 } 12293 const mixer = getMixer(from); 12294 return mixer(from, to); 12295} 12296 12297 12298//# sourceMappingURL=index.mjs.map 12299 12300 12301/***/ }), 12302 12303/***/ 33811: 12304/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12305 12306"use strict"; 12307/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12308/* harmony export */ t: function() { return /* binding */ mixNumber; } 12309/* harmony export */ }); 12310/* 12311 Value in range from progress 12312 12313 Given a lower limit and an upper limit, we return the value within 12314 that range as expressed by progress (usually a number from 0 to 1) 12315 12316 So progress = 0.5 would change 12317 12318 from -------- to 12319 12320 to 12321 12322 from ---- to 12323 12324 E.g. from = 10, to = 20, progress = 0.5 => 15 12325 12326 @param [number]: Lower limit of range 12327 @param [number]: Upper limit of range 12328 @param [number]: The progress between lower and upper limits expressed 0-1 12329 @return [number]: Value as calculated from progress within range (not limited within range) 12330*/ 12331const mixNumber = (from, to, progress) => { 12332 return from + (to - from) * progress; 12333}; 12334 12335 12336//# sourceMappingURL=number.mjs.map 12337 12338 12339/***/ }), 12340 12341/***/ 59960: 12342/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12343 12344"use strict"; 12345/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12346/* harmony export */ I: function() { return /* binding */ resolveElements; } 12347/* harmony export */ }); 12348function resolveElements(elementOrSelector, scope, selectorCache) { 12349 if (elementOrSelector == null) { 12350 return []; 12351 } 12352 if (elementOrSelector instanceof EventTarget) { 12353 return [elementOrSelector]; 12354 } 12355 else if (typeof elementOrSelector === "string") { 12356 let root = document; 12357 if (scope) { 12358 root = scope.current; 12359 } 12360 const elements = selectorCache?.[elementOrSelector] ?? 12361 root.querySelectorAll(elementOrSelector); 12362 return elements ? Array.from(elements) : []; 12363 } 12364 return Array.from(elementOrSelector).filter((element) => element != null); 12365} 12366 12367 12368//# sourceMappingURL=resolve-elements.mjs.map 12369 12370 12371/***/ }), 12372 12373/***/ 13740: 12374/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12375 12376"use strict"; 12377 12378// EXPORTS 12379__webpack_require__.d(__webpack_exports__, { 12380 p: function() { return /* binding */ memoSupports; } 12381}); 12382 12383// EXTERNAL MODULE: ./node_modules/motion-utils/dist/es/memo.mjs 12384var memo = __webpack_require__(90107); 12385;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/supports/flags.mjs 12386/** 12387 * Add the ability for test suites to manually set support flags 12388 * to better test more environments. 12389 */ 12390const supportsFlags = {}; 12391 12392 12393//# sourceMappingURL=flags.mjs.map 12394 12395;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/utils/supports/memo.mjs 12396 12397 12398 12399function memoSupports(callback, supportsFlag) { 12400 const memoized = (0,memo/* memo */.X)(callback); 12401 return () => supportsFlags[supportsFlag] ?? memoized(); 12402} 12403 12404 12405//# sourceMappingURL=memo.mjs.map 12406 12407 12408/***/ }), 12409 12410/***/ 9339: 12411/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12412 12413"use strict"; 12414/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12415/* harmony export */ i: function() { return /* binding */ supportsViewTimeline; }, 12416/* harmony export */ t: function() { return /* binding */ supportsScrollTimeline; } 12417/* harmony export */ }); 12418/* harmony import */ var _memo_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(13740); 12419 12420 12421const supportsScrollTimeline = /* @__PURE__ */ (0,_memo_mjs__WEBPACK_IMPORTED_MODULE_0__/* .memoSupports */ .p)(() => window.ScrollTimeline !== undefined, "scrollTimeline"); 12422const supportsViewTimeline = /* @__PURE__ */ (0,_memo_mjs__WEBPACK_IMPORTED_MODULE_0__/* .memoSupports */ .p)(() => window.ViewTimeline !== undefined, "viewTimeline"); 12423 12424 12425//# sourceMappingURL=scroll-timeline.mjs.map 12426 12427 12428/***/ }), 12429 12430/***/ 94357: 12431/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12432 12433"use strict"; 12434/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12435/* harmony export */ BX: function() { return /* binding */ motionValue; }, 12436/* harmony export */ S1: function() { return /* binding */ collectMotionValues; } 12437/* harmony export */ }); 12438/* unused harmony export MotionValue */ 12439/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(94513); 12440/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(88294); 12441/* harmony import */ var _frameloop_sync_time_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(41927); 12442/* harmony import */ var _frameloop_frame_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(26147); 12443 12444 12445 12446 12447/** 12448 * Maximum time between the value of two frames, beyond which we 12449 * assume the velocity has since been 0. 12450 */ 12451const MAX_VELOCITY_DELTA = 30; 12452const isFloat = (value) => { 12453 return !isNaN(parseFloat(value)); 12454}; 12455const collectMotionValues = { 12456 current: undefined, 12457}; 12458/** 12459 * `MotionValue` is used to track the state and velocity of motion values. 12460 * 12461 * @public 12462 */ 12463class MotionValue { 12464 /** 12465 * @param init - The initiating value 12466 * @param config - Optional configuration options 12467 * 12468 * - `transformer`: A function to transform incoming values with. 12469 */ 12470 constructor(init, options = {}) { 12471 /** 12472 * Tracks whether this value can output a velocity. Currently this is only true 12473 * if the value is numerical, but we might be able to widen the scope here and support 12474 * other value types. 12475 * 12476 * @internal 12477 */ 12478 this.canTrackVelocity = null; 12479 /**
12480 * An object containing a SubscriptionManager for each active event. 12481 */ 12482 this.events = {}; 12483 this.updateAndNotify = (v) => { 12484 const currentTime = _frameloop_sync_time_mjs__WEBPACK_IMPORTED_MODULE_0__/* .time */ .X.now(); 12485 /** 12486 * If we're updating the value during another frame or eventloop 12487 * than the previous frame, then the we set the previous frame value 12488 * to current. 12489 */ 12490 if (this.updatedAt !== currentTime) { 12491 this.setPrevFrameValue(); 12492 } 12493 this.prev = this.current; 12494 this.setCurrent(v); 12495 // Update update subscribers 12496 if (this.current !== this.prev) { 12497 this.events.change?.notify(this.current); 12498 if (this.dependents) { 12499 for (const dependent of this.dependents) { 12500 dependent.dirty(); 12501 } 12502 } 12503 } 12504 }; 12505 this.hasAnimated = false; 12506 this.setCurrent(init); 12507 this.owner = options.owner; 12508 } 12509 setCurrent(current) { 12510 this.current = current; 12511 this.updatedAt = _frameloop_sync_time_mjs__WEBPACK_IMPORTED_MODULE_0__/* .time */ .X.now(); 12512 if (this.canTrackVelocity === null && current !== undefined) { 12513 this.canTrackVelocity = isFloat(this.current); 12514 } 12515 } 12516 setPrevFrameValue(prevFrameValue = this.current) { 12517 this.prevFrameValue = prevFrameValue; 12518 this.prevUpdatedAt = this.updatedAt; 12519 } 12520 /** 12521 * Adds a function that will be notified when the `MotionValue` is updated. 12522 * 12523 * It returns a function that, when called, will cancel the subscription. 12524 * 12525 * When calling `onChange` inside a React component, it should be wrapped with the 12526 * `useEffect` hook. As it returns an unsubscribe function, this should be returned 12527 * from the `useEffect` function to ensure you don't add duplicate subscribers.. 12528 * 12529 * ```jsx 12530 * export const MyComponent = () => { 12531 * const x = useMotionValue(0) 12532 * const y = useMotionValue(0) 12533 * const opacity = useMotionValue(1) 12534 * 12535 * useEffect(() => { 12536 * function updateOpacity() { 12537 * const maxXY = Math.max(x.get(), y.get()) 12538 * const newOpacity = transform(maxXY, [0, 100], [1, 0]) 12539 * opacity.set(newOpacity) 12540 * } 12541 * 12542 * const unsubscribeX = x.on("change", updateOpacity) 12543 * const unsubscribeY = y.on("change", updateOpacity) 12544 * 12545 * return () => { 12546 * unsubscribeX() 12547 * unsubscribeY() 12548 * } 12549 * }, []) 12550 * 12551 * return <motion.div style={{ x }} /> 12552 * } 12553 * ``` 12554 * 12555 * @param subscriber - A function that receives the latest value. 12556 * @returns A function that, when called, will cancel this subscription. 12557 * 12558 * @deprecated 12559 */ 12560 onChange(subscription) { 12561 if (false) {} 12562 return this.on("change", subscription); 12563 } 12564 on(eventName, callback) { 12565 if (!this.events[eventName]) { 12566 this.events[eventName] = new motion_utils__WEBPACK_IMPORTED_MODULE_1__/* .SubscriptionManager */ .L(); 12567 } 12568 const unsubscribe = this.events[eventName].add(callback); 12569 if (eventName === "change") { 12570 return () => { 12571 unsubscribe(); 12572 /** 12573 * If we have no more change listeners by the start 12574 * of the next frame, stop active animations. 12575 */ 12576 _frameloop_frame_mjs__WEBPACK_IMPORTED_MODULE_2__/* .frame */ .Wi.read(() => { 12577 if (!this.events.change.getSize()) { 12578 this.stop(); 12579 } 12580 }); 12581 }; 12582 } 12583 return unsubscribe; 12584 } 12585 clearListeners() { 12586 for (const eventManagers in this.events) { 12587 this.events[eventManagers].clear(); 12588 } 12589 } 12590 /** 12591 * Attaches a passive effect to the `MotionValue`. 12592 */ 12593 attach(passiveEffect, stopPassiveEffect) { 12594 this.passiveEffect = passiveEffect; 12595 this.stopPassiveEffect = stopPassiveEffect; 12596 } 12597 /** 12598 * Sets the state of the `MotionValue`. 12599 * 12600 * @remarks 12601 * 12602 * ```jsx 12603 * const x = useMotionValue(0) 12604 * x.set(10) 12605 * ``` 12606 * 12607 * @param latest - Latest value to set. 12608 * @param render - Whether to notify render subscribers. Defaults to `true` 12609 * 12610 * @public 12611 */ 12612 set(v) { 12613 if (!this.passiveEffect) { 12614 this.updateAndNotify(v); 12615 } 12616 else { 12617 this.passiveEffect(v, this.updateAndNotify); 12618 } 12619 } 12620 setWithVelocity(prev, current, delta) { 12621 this.set(current); 12622 this.prev = undefined; 12623 this.prevFrameValue = prev; 12624 this.prevUpdatedAt = this.updatedAt - delta; 12625 } 12626 /** 12627 * Set the state of the `MotionValue`, stopping any active animations, 12628 * effects, and resets velocity to `0`. 12629 */ 12630 jump(v, endAnimation = true) { 12631 this.updateAndNotify(v); 12632 this.prev = v; 12633 this.prevUpdatedAt = this.prevFrameValue = undefined; 12634 endAnimation && this.stop(); 12635 if (this.stopPassiveEffect) 12636 this.stopPassiveEffect(); 12637 } 12638 dirty() { 12639 this.events.change?.notify(this.current); 12640 } 12641 addDependent(dependent) { 12642 if (!this.dependents) { 12643 this.dependents = new Set(); 12644 } 12645 this.dependents.add(dependent); 12646 } 12647 removeDependent(dependent) { 12648 if (this.dependents) {
vendor: 4,420 bytes, lines 12649-12807
12649 this.dependents.delete(dependent); 12650 } 12651 } 12652 /** 12653 * Returns the latest state of `MotionValue` 12654 * 12655 * @returns - The latest state of `MotionValue` 12656 * 12657 * @public 12658 */ 12659 get() { 12660 if (collectMotionValues.current) { 12661 collectMotionValues.current.push(this); 12662 } 12663 return this.current; 12664 } 12665 /** 12666 * @public 12667 */ 12668 getPrevious() { 12669 return this.prev; 12670 } 12671 /** 12672 * Returns the latest velocity of `MotionValue` 12673 * 12674 * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical. 12675 * 12676 * @public 12677 */ 12678 getVelocity() { 12679 const currentTime = _frameloop_sync_time_mjs__WEBPACK_IMPORTED_MODULE_0__/* .time */ .X.now(); 12680 if (!this.canTrackVelocity || 12681 this.prevFrameValue === undefined || 12682 currentTime - this.updatedAt > MAX_VELOCITY_DELTA) { 12683 return 0; 12684 } 12685 const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA); 12686 // Casts because of parseFloat's poor typing 12687 return (0,motion_utils__WEBPACK_IMPORTED_MODULE_3__/* .velocityPerSecond */ .R)(parseFloat(this.current) - 12688 parseFloat(this.prevFrameValue), delta); 12689 } 12690 /** 12691 * Registers a new animation to control this `MotionValue`. Only one 12692 * animation can drive a `MotionValue` at one time. 12693 * 12694 * ```jsx 12695 * value.start() 12696 * ``` 12697 * 12698 * @param animation - A function that starts the provided animation 12699 */ 12700 start(startAnimation) { 12701 this.stop(); 12702 return new Promise((resolve) => { 12703 this.hasAnimated = true; 12704 this.animation = startAnimation(resolve); 12705 if (this.events.animationStart) { 12706 this.events.animationStart.notify(); 12707 } 12708 }).then(() => { 12709 if (this.events.animationComplete) { 12710 this.events.animationComplete.notify(); 12711 } 12712 this.clearAnimation(); 12713 }); 12714 } 12715 /** 12716 * Stop the currently active animation. 12717 * 12718 * @public 12719 */ 12720 stop() { 12721 if (this.animation) { 12722 this.animation.stop(); 12723 if (this.events.animationCancel) { 12724 this.events.animationCancel.notify(); 12725 } 12726 } 12727 this.clearAnimation(); 12728 } 12729 /** 12730 * Returns `true` if this value is currently animating. 12731 * 12732 * @public 12733 */ 12734 isAnimating() { 12735 return !!this.animation; 12736 } 12737 clearAnimation() { 12738 delete this.animation; 12739 } 12740 /** 12741 * Destroy and clean up subscribers to this `MotionValue`. 12742 * 12743 * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically 12744 * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually 12745 * created a `MotionValue` via the `motionValue` function. 12746 * 12747 * @public 12748 */ 12749 destroy() { 12750 this.dependents?.clear(); 12751 this.events.destroy?.notify(); 12752 this.clearListeners(); 12753 this.stop(); 12754 if (this.stopPassiveEffect) { 12755 this.stopPassiveEffect(); 12756 } 12757 } 12758} 12759function motionValue(init, options) { 12760 return new MotionValue(init, options); 12761} 12762 12763 12764//# sourceMappingURL=index.mjs.map 12765 12766 12767/***/ }), 12768 12769/***/ 31664: 12770/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12771 12772"use strict"; 12773/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12774/* harmony export */ $: function() { return /* binding */ hex; } 12775/* harmony export */ }); 12776/* harmony import */ var _rgba_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(80230); 12777/* harmony import */ var _utils_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(48017); 12778 12779 12780 12781function parseHex(v) { 12782 let r = ""; 12783 let g = ""; 12784 let b = ""; 12785 let a = ""; 12786 // If we have 6 characters, ie #FF0000 12787 if (v.length > 5) { 12788 r = v.substring(1, 3); 12789 g = v.substring(3, 5); 12790 b = v.substring(5, 7); 12791 a = v.substring(7, 9); 12792 // Or we have 3 characters, ie #F00 12793 } 12794 else { 12795 r = v.substring(1, 2); 12796 g = v.substring(2, 3); 12797 b = v.substring(3, 4); 12798 a = v.substring(4, 5); 12799 r += r; 12800 g += g; 12801 b += b; 12802 a += a; 12803 } 12804 return { 12805 red: parseInt(r, 16), 12806 green: parseInt(g, 16), 12807 blue: parseInt(b, 16),
12808 alpha: a ? parseInt(a, 16) / 255 : 1, 12809 }; 12810} 12811const hex = { 12812 test: /*@__PURE__*/ (0,_utils_mjs__WEBPACK_IMPORTED_MODULE_0__/* .isColorString */ .i)("#"), 12813 parse: parseHex, 12814 transform: _rgba_mjs__WEBPACK_IMPORTED_MODULE_1__/* .rgba */ .m.transform, 12815}; 12816 12817 12818//# sourceMappingURL=hex.mjs.map 12819 12820 12821/***/ }), 12822 12823/***/ 32017: 12824/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12825 12826"use strict"; 12827/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12828/* harmony export */ J: function() { return /* binding */ hsla; } 12829/* harmony export */ }); 12830/* harmony import */ var _numbers_index_mjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(61799); 12831/* harmony import */ var _numbers_units_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(92854); 12832/* harmony import */ var _utils_sanitize_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(51224); 12833/* harmony import */ var _utils_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(48017); 12834 12835 12836 12837 12838 12839const hsla = { 12840 test: /*@__PURE__*/ (0,_utils_mjs__WEBPACK_IMPORTED_MODULE_0__/* .isColorString */ .i)("hsl", "hue"), 12841 parse: /*@__PURE__*/ (0,_utils_mjs__WEBPACK_IMPORTED_MODULE_0__/* .splitColor */ .d)("hue", "saturation", "lightness"), 12842 transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => { 12843 return ("hsla(" + 12844 Math.round(hue) + 12845 ", " + 12846 _numbers_units_mjs__WEBPACK_IMPORTED_MODULE_1__/* .percent */ .aQ.transform((0,_utils_sanitize_mjs__WEBPACK_IMPORTED_MODULE_2__/* .sanitize */ .N)(saturation)) + 12847 ", " + 12848 _numbers_units_mjs__WEBPACK_IMPORTED_MODULE_1__/* .percent */ .aQ.transform((0,_utils_sanitize_mjs__WEBPACK_IMPORTED_MODULE_2__/* .sanitize */ .N)(lightness)) + 12849 ", " + 12850 (0,_utils_sanitize_mjs__WEBPACK_IMPORTED_MODULE_2__/* .sanitize */ .N)(_numbers_index_mjs__WEBPACK_IMPORTED_MODULE_3__/* .alpha */ .Fq.transform(alpha$1)) + 12851 ")"); 12852 }, 12853}; 12854 12855 12856//# sourceMappingURL=hsla.mjs.map 12857 12858 12859/***/ }), 12860 12861/***/ 7537: 12862/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12863 12864"use strict"; 12865/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12866/* harmony export */ $: function() { return /* binding */ color; } 12867/* harmony export */ }); 12868/* harmony import */ var _hex_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(31664); 12869/* harmony import */ var _hsla_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(32017); 12870/* harmony import */ var _rgba_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(80230); 12871 12872 12873 12874 12875const color = { 12876 test: (v) => _rgba_mjs__WEBPACK_IMPORTED_MODULE_0__/* .rgba */ .m.test(v) || _hex_mjs__WEBPACK_IMPORTED_MODULE_1__/* .hex */ .$.test(v) || _hsla_mjs__WEBPACK_IMPORTED_MODULE_2__/* .hsla */ .J.test(v), 12877 parse: (v) => { 12878 if (_rgba_mjs__WEBPACK_IMPORTED_MODULE_0__/* .rgba */ .m.test(v)) { 12879 return _rgba_mjs__WEBPACK_IMPORTED_MODULE_0__/* .rgba */ .m.parse(v); 12880 } 12881 else if (_hsla_mjs__WEBPACK_IMPORTED_MODULE_2__/* .hsla */ .J.test(v)) { 12882 return _hsla_mjs__WEBPACK_IMPORTED_MODULE_2__/* .hsla */ .J.parse(v); 12883 } 12884 else { 12885 return _hex_mjs__WEBPACK_IMPORTED_MODULE_1__/* .hex */ .$.parse(v); 12886 } 12887 }, 12888 transform: (v) => { 12889 return typeof v === "string" 12890 ? v 12891 : v.hasOwnProperty("red") 12892 ? _rgba_mjs__WEBPACK_IMPORTED_MODULE_0__/* .rgba */ .m.transform(v) 12893 : _hsla_mjs__WEBPACK_IMPORTED_MODULE_2__/* .hsla */ .J.transform(v); 12894 }, 12895 getAnimatableNone: (v) => { 12896 const parsed = color.parse(v); 12897 parsed.alpha = 0; 12898 return color.transform(parsed); 12899 }, 12900}; 12901 12902 12903//# sourceMappingURL=index.mjs.map 12904 12905 12906/***/ }), 12907 12908/***/ 80230: 12909/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12910 12911"use strict"; 12912/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12913/* harmony export */ m: function() { return /* binding */ rgba; } 12914/* harmony export */ }); 12915/* unused harmony export rgbUnit */ 12916/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(21865); 12917/* harmony import */ var _numbers_index_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(61799);
12918/* harmony import */ var _utils_sanitize_mjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(51224); 12919/* harmony import */ var _utils_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(48017); 12920 12921 12922 12923 12924 12925const clampRgbUnit = (v) => (0,motion_utils__WEBPACK_IMPORTED_MODULE_0__/* .clamp */ .u)(0, 255, v); 12926const rgbUnit = { 12927 ..._numbers_index_mjs__WEBPACK_IMPORTED_MODULE_1__/* .number */ .Rx, 12928 transform: (v) => Math.round(clampRgbUnit(v)), 12929}; 12930const rgba = { 12931 test: /*@__PURE__*/ (0,_utils_mjs__WEBPACK_IMPORTED_MODULE_2__/* .isColorString */ .i)("rgb", "red"), 12932 parse: /*@__PURE__*/ (0,_utils_mjs__WEBPACK_IMPORTED_MODULE_2__/* .splitColor */ .d)("red", "green", "blue"), 12933 transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + 12934 rgbUnit.transform(red) + 12935 ", " + 12936 rgbUnit.transform(green) + 12937 ", " + 12938 rgbUnit.transform(blue) + 12939 ", " + 12940 (0,_utils_sanitize_mjs__WEBPACK_IMPORTED_MODULE_3__/* .sanitize */ .N)(_numbers_index_mjs__WEBPACK_IMPORTED_MODULE_1__/* .alpha */ .Fq.transform(alpha$1)) + 12941 ")", 12942}; 12943 12944 12945//# sourceMappingURL=rgba.mjs.map 12946 12947 12948/***/ }), 12949 12950/***/ 48017: 12951/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 12952 12953"use strict"; 12954 12955// EXPORTS 12956__webpack_require__.d(__webpack_exports__, { 12957 i: function() { return /* binding */ isColorString; }, 12958 d: function() { return /* binding */ splitColor; } 12959}); 12960 12961// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/float-regex.mjs 12962var float_regex = __webpack_require__(3855); 12963;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/is-nullish.mjs 12964function isNullish(v) { 12965 return v == null; 12966} 12967 12968 12969//# sourceMappingURL=is-nullish.mjs.map 12970 12971;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/single-color-regex.mjs 12972const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu; 12973 12974 12975//# sourceMappingURL=single-color-regex.mjs.map 12976 12977;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/color/utils.mjs 12978 12979 12980 12981 12982/** 12983 * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000, 12984 * but false if a number or multiple colors 12985 */ 12986const isColorString = (type, testProp) => (v) => { 12987 return Boolean((typeof v === "string" && 12988 singleColorRegex.test(v) && 12989 v.startsWith(type)) || 12990 (testProp && 12991 !isNullish(v) && 12992 Object.prototype.hasOwnProperty.call(v, testProp))); 12993}; 12994const splitColor = (aName, bName, cName) => (v) => { 12995 if (typeof v !== "string") 12996 return v; 12997 const [a, b, c, alpha] = v.match(float_regex/* floatRegex */.K); 12998 return { 12999 [aName]: parseFloat(a), 13000 [bName]: parseFloat(b), 13001 [cName]: parseFloat(c), 13002 alpha: alpha !== undefined ? parseFloat(alpha) : 1, 13003 }; 13004}; 13005 13006 13007//# sourceMappingURL=utils.mjs.map 13008 13009 13010/***/ }), 13011 13012/***/ 65050: 13013/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13014 13015"use strict"; 13016 13017// EXPORTS 13018__webpack_require__.d(__webpack_exports__, { 13019 V: function() { return /* binding */ analyseComplexValue; }, 13020 P: function() { return /* binding */ complex; } 13021}); 13022 13023// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/color/index.mjs 13024var color = __webpack_require__(7537); 13025;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/color-regex.mjs 13026const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu; 13027 13028 13029//# sourceMappingURL=color-regex.mjs.map 13030 13031// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/float-regex.mjs 13032var float_regex = __webpack_require__(3855); 13033// EXTERNAL MODULE: ./node_modules/motion-dom/dist/es/value/types/utils/sanitize.mjs 13034var sanitize = __webpack_require__(51224); 13035;// CONCATENATED MODULE: ./node_modules/motion-dom/dist/es/value/types/complex/index.mjs 13036 13037 13038 13039 13040 13041function test(v) { 13042 return (isNaN(v) && 13043 typeof v === "string" && 13044 (v.match(float_regex/* floatRegex */.K)?.length || 0) + 13045 (v.match(colorRegex)?.length || 0) > 13046 0); 13047} 13048const NUMBER_TOKEN = "number"; 13049const COLOR_TOKEN = "color"; 13050const VAR_TOKEN = "var"; 13051const VAR_FUNCTION_TOKEN = "var("; 13052const SPLIT_TOKEN = "${}"; 13053// this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex` 13054const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu; 13055function analyseComplexValue(value) { 13056 const originalValue = value.toString(); 13057 const values = []; 13058 const indexes = { 13059 color: [], 13060 number: [], 13061 var: [], 13062 }; 13063 const types = []; 13064 let i = 0; 13065 const tokenised = originalValue.replace(complexRegex, (parsedValue) => { 13066 if (color/* color */.$.test(parsedValue)) { 13067 indexes.color.push(i); 13068 types.push(COLOR_TOKEN); 13069 values.push(color/* color */.$.parse(parsedValue)); 13070 } 13071 else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) { 13072 indexes.var.push(i); 13073 types.push(VAR_TOKEN); 13074 values.push(parsedValue); 13075 } 13076 else { 13077 indexes.number.push(i); 13078 types.push(NUMBER_TOKEN); 13079 values.push(parseFloat(parsedValue)); 13080 } 13081 ++i; 13082 return SPLIT_TOKEN; 13083 }); 13084 const split = tokenised.split(SPLIT_TOKEN); 13085 return { values, split, indexes, types }; 13086} 13087function parseComplexValue(v) { 13088 return analyseComplexValue(v).values; 13089} 13090function buildTransformer({ split, types }) { 13091 const numSections = split.length; 13092 return (v) => { 13093 let output = ""; 13094 for (let i = 0; i < numSections; i++) { 13095 output += split[i]; 13096 if (v[i] !== undefined) { 13097 const type = types[i]; 13098 if (type === NUMBER_TOKEN) { 13099 output += (0,sanitize/* sanitize */.N)(v[i]); 13100 } 13101 else if (type === COLOR_TOKEN) { 13102 output += color/* color */.$.transform(v[i]); 13103 } 13104 else { 13105 output += v[i]; 13106 } 13107 } 13108 } 13109 return output; 13110 }; 13111} 13112function createTransformer(source) { 13113 return buildTransformer(analyseComplexValue(source)); 13114} 13115const convertNumbersToZero = (v) => typeof v === "number" ? 0 : color/* color */.$.test(v) ? color/* color */.$.getAnimatableNone(v) : v; 13116/** 13117 * Convert a parsed value to its zero equivalent, but preserve numbers 13118 * that act as divisors in CSS calc() expressions. 13119 * 13120 * analyseComplexValue extracts numbers from CSS strings and puts the 13121 * surrounding text into a `split` template array. For example: 13122 * "calc(var(--gap) / 5)" â values: [var(--gap), 5] 13123 * split: ["calc(", " / ", ")"] 13124 * 13125 * When building a zero-equivalent for animation, naively zeroing all 13126 * numbers turns the divisor into 0 â "calc(var(--gap) / 0)" â NaN. 13127 * We detect this by checking whether the text preceding a number 13128 * (split[i]) ends with "/" â the CSS calc division operator. 13129 */ 13130const convertToZero = (value, splitBefore) => { 13131 if (typeof value === "number") { 13132 return splitBefore?.trim().endsWith("/") ? value : 0; 13133 } 13134 return convertNumbersToZero(value); 13135}; 13136function getAnimatableNone(v) { 13137 const info = analyseComplexValue(v); 13138 const transformer = buildTransformer(info); 13139 return transformer(info.values.map((value, i) => convertToZero(value, info.split[i]))); 13140} 13141const complex = { 13142 test, 13143 parse: parseComplexValue, 13144 createTransformer, 13145 getAnimatableNone, 13146}; 13147 13148 13149//# sourceMappingURL=index.mjs.map 13150 13151 13152/***/ }), 13153 13154/***/ 61799: 13155/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13156 13157"use strict"; 13158/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13159/* harmony export */ Fq: function() { return /* binding */ alpha; }, 13160/* harmony export */ Rx: function() { return /* binding */ number; }, 13161/* harmony export */ bA: function() { return /* binding */ scale; } 13162/* harmony export */ }); 13163/* harmony import */ var motion_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(21865); 13164 13165 13166const number = { 13167 test: (v) => typeof v === "number", 13168 parse: parseFloat, 13169 transform: (v) => v, 13170};
13171const alpha = { 13172 ...number, 13173 transform: (v) => (0,motion_utils__WEBPACK_IMPORTED_MODULE_0__/* .clamp */ .u)(0, 1, v), 13174}; 13175const scale = { 13176 ...number, 13177 default: 1, 13178}; 13179 13180 13181//# sourceMappingURL=index.mjs.map 13182 13183 13184/***/ }), 13185 13186/***/ 92854: 13187/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13188 13189"use strict"; 13190/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13191/* harmony export */ $C: function() { return /* binding */ progressPercentage; }, 13192/* harmony export */ RW: function() { return /* binding */ degrees; }, 13193/* harmony export */ aQ: function() { return /* binding */ percent; }, 13194/* harmony export */ px: function() { return /* binding */ px; }, 13195/* harmony export */ vh: function() { return /* binding */ vh; }, 13196/* harmony export */ vw: function() { return /* binding */ vw; } 13197/* harmony export */ }); 13198/*#__NO_SIDE_EFFECTS__*/ 13199const createUnitType = (unit) => ({ 13200 test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1, 13201 parse: parseFloat, 13202 transform: (v) => `${v}${unit}`, 13203}); 13204const degrees = /*@__PURE__*/ createUnitType("deg"); 13205const percent = /*@__PURE__*/ createUnitType("%"); 13206const px = /*@__PURE__*/ createUnitType("px"); 13207const vh = /*@__PURE__*/ createUnitType("vh"); 13208const vw = /*@__PURE__*/ createUnitType("vw"); 13209const progressPercentage = /*@__PURE__*/ (() => ({ 13210 ...percent, 13211 parse: (v) => percent.parse(v) / 100, 13212 transform: (v) => percent.transform(v * 100), 13213}))(); 13214 13215 13216//# sourceMappingURL=units.mjs.map 13217 13218 13219/***/ }), 13220 13221/***/ 3855: 13222/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13223 13224"use strict"; 13225/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13226/* harmony export */ K: function() { return /* binding */ floatRegex; } 13227/* harmony export */ }); 13228const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu; 13229 13230 13231//# sourceMappingURL=float-regex.mjs.map 13232 13233 13234/***/ }), 13235 13236/***/ 51224: 13237/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13238 13239"use strict"; 13240/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13241/* harmony export */ N: function() { return /* binding */ sanitize; } 13242/* harmony export */ }); 13243// If this number is a decimal, make it just five decimal places 13244// to avoid exponents 13245const sanitize = (v) => Math.round(v * 100000) / 100000; 13246 13247 13248//# sourceMappingURL=sanitize.mjs.map 13249 13250 13251/***/ }), 13252 13253/***/ 87493: 13254/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13255 13256"use strict"; 13257/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13258/* harmony export */ i: function() { return /* binding */ isMotionValue; } 13259/* harmony export */ }); 13260const isMotionValue = (value) => Boolean(value && value.getVelocity); 13261 13262 13263//# sourceMappingURL=is-motion-value.mjs.map 13264 13265 13266/***/ }), 13267 13268/***/ 98425: 13269/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13270 13271"use strict"; 13272/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13273/* harmony export */ cl: function() { return /* binding */ removeItem; }, 13274/* harmony export */ y4: function() { return /* binding */ addUniqueItem; } 13275/* harmony export */ }); 13276/* unused harmony export moveItem */ 13277function addUniqueItem(arr, item) { 13278 if (arr.indexOf(item) === -1) 13279 arr.push(item); 13280} 13281function removeItem(arr, item) { 13282 const index = arr.indexOf(item); 13283 if (index > -1) 13284 arr.splice(index, 1); 13285} 13286// Adapted from array-move 13287function moveItem([...arr], fromIndex, toIndex) { 13288 const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex; 13289 if (startIndex >= 0 && startIndex < arr.length) { 13290 const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex; 13291 const [item] = arr.splice(fromIndex, 1); 13292 arr.splice(endIndex, 0, item); 13293 } 13294 return arr; 13295} 13296 13297 13298//# sourceMappingURL=array.mjs.map 13299 13300 13301/***/ }), 13302 13303/***/ 21865: 13304/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13305 13306"use strict"; 13307/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13308/* harmony export */ u: function() { return /* binding */ clamp; } 13309/* harmony export */ }); 13310const clamp = (min, max, v) => { 13311 if (v > max) 13312 return max; 13313 if (v < min) 13314 return min; 13315 return v; 13316}; 13317 13318 13319//# sourceMappingURL=clamp.mjs.map 13320 13321 13322/***/ }), 13323 13324/***/ 43273: 13325/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13326 13327"use strict"; 13328/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13329/* harmony export */ L: function() { return /* binding */ anticipate; } 13330/* harmony export */ }); 13331/* harmony import */ var _back_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(75567); 13332 13333 13334const anticipate = (p) => p >= 1 13335 ? 1 13336 : (p *= 2) < 1 13337 ? 0.5 * (0,_back_mjs__WEBPACK_IMPORTED_MODULE_0__/* .backIn */ .G2)(p) 13338 : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); 13339 13340 13341//# sourceMappingURL=anticipate.mjs.map 13342 13343 13344/***/ }), 13345 13346/***/ 75567: 13347/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13348 13349"use strict"; 13350/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13351/* harmony export */ CG: function() { return /* binding */ backOut; },
13352/* harmony export */ G2: function() { return /* binding */ backIn; }, 13353/* harmony export */ XL: function() { return /* binding */ backInOut; } 13354/* harmony export */ }); 13355/* harmony import */ var _cubic_bezier_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(60068); 13356/* harmony import */ var _modifiers_mirror_mjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(52333); 13357/* harmony import */ var _modifiers_reverse_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(79015); 13358 13359 13360 13361 13362const backOut = /*@__PURE__*/ (0,_cubic_bezier_mjs__WEBPACK_IMPORTED_MODULE_0__/* .cubicBezier */ ._)(0.33, 1.53, 0.69, 0.99); 13363const backIn = /*@__PURE__*/ (0,_modifiers_reverse_mjs__WEBPACK_IMPORTED_MODULE_1__/* .reverseEasing */ .M)(backOut); 13364const backInOut = /*@__PURE__*/ (0,_modifiers_mirror_mjs__WEBPACK_IMPORTED_MODULE_2__/* .mirrorEasing */ .o)(backIn); 13365 13366 13367//# sourceMappingURL=back.mjs.map 13368 13369 13370/***/ }), 13371 13372/***/ 52927: 13373/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13374 13375"use strict"; 13376/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13377/* harmony export */ Bn: function() { return /* binding */ circOut; }, 13378/* harmony export */ X7: function() { return /* binding */ circInOut; }, 13379/* harmony export */ Z7: function() { return /* binding */ circIn; } 13380/* harmony export */ }); 13381/* harmony import */ var _modifiers_mirror_mjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(52333); 13382/* harmony import */ var _modifiers_reverse_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(79015); 13383 13384 13385 13386const circIn = (p) => 1 - Math.sin(Math.acos(p)); 13387const circOut = (0,_modifiers_reverse_mjs__WEBPACK_IMPORTED_MODULE_0__/* .reverseEasing */ .M)(circIn); 13388const circInOut = (0,_modifiers_mirror_mjs__WEBPACK_IMPORTED_MODULE_1__/* .mirrorEasing */ .o)(circIn); 13389 13390 13391//# sourceMappingURL=circ.mjs.map 13392 13393 13394/***/ }), 13395 13396/***/ 60068: 13397/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13398 13399"use strict"; 13400/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13401/* harmony export */ _: function() { return /* binding */ cubicBezier; } 13402/* harmony export */ }); 13403/* harmony import */ var _noop_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(56277); 13404 13405 13406/* 13407 Bezier function generator 13408 This has been modified from Gaëtan Renaudeau's BezierEasing 13409 https://github.com/gre/bezier-easing/blob/master/src/index.js 13410 https://github.com/gre/bezier-easing/blob/master/LICENSE 13411 13412 I've removed the newtonRaphsonIterate algo because in benchmarking it 13413 wasn't noticeably faster than binarySubdivision, indeed removing it 13414 usually improved times, depending on the curve. 13415 I also removed the lookup table, as for the added bundle size and loop we're 13416 only cutting ~4 or so subdivision iterations. I bumped the max iterations up 13417 to 12 to compensate and this still tended to be faster for no perceivable 13418 loss in accuracy. 13419 Usage 13420 const easeOut = cubicBezier(.17,.67,.83,.67); 13421 const x = easeOut(0.5); // returns 0.627... 13422*/ 13423// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. 13424const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) * 13425 t; 13426const subdivisionPrecision = 0.0000001; 13427const subdivisionMaxIterations = 12; 13428function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) { 13429 let currentX; 13430 let currentT; 13431 let i = 0; 13432 do { 13433 currentT = lowerBound + (upperBound - lowerBound) / 2.0; 13434 currentX = calcBezier(currentT, mX1, mX2) - x; 13435 if (currentX > 0.0) { 13436 upperBound = currentT; 13437 } 13438 else { 13439 lowerBound = currentT; 13440 } 13441 } while (Math.abs(currentX) > subdivisionPrecision && 13442 ++i < subdivisionMaxIterations); 13443 return currentT; 13444} 13445/*#__NO_SIDE_EFFECTS__*/ 13446function cubicBezier(mX1, mY1, mX2, mY2) { 13447 // If this is a linear gradient, return linear easing 13448 if (mX1 === mY1 && mX2 === mY2) 13449 return _noop_mjs__WEBPACK_IMPORTED_MODULE_0__/* .noop */ .Z; 13450 const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2); 13451 // If animation is at start/end, return t without easing 13452 return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2); 13453} 13454 13455 13456//# sourceMappingURL=cubic-bezier.mjs.map 13457 13458 13459/***/ }), 13460 13461/***/ 52333: 13462/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13463 13464"use strict"; 13465/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13466/* harmony export */ o: function() { return /* binding */ mirrorEasing; } 13467/* harmony export */ }); 13468// Accepts an easing function and returns a new one that outputs mirrored values for
13469// the second half of the animation. Turns easeIn into easeInOut. 13470/*#__NO_SIDE_EFFECTS__*/ 13471const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2; 13472 13473 13474//# sourceMappingURL=mirror.mjs.map 13475 13476 13477/***/ }), 13478 13479/***/ 79015: 13480/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13481 13482"use strict"; 13483/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13484/* harmony export */ M: function() { return /* binding */ reverseEasing; } 13485/* harmony export */ }); 13486// Accepts an easing function and returns a new one that outputs reversed values. 13487// Turns easeIn into easeOut. 13488/*#__NO_SIDE_EFFECTS__*/ 13489const reverseEasing = (easing) => (p) => 1 - easing(1 - p); 13490 13491 13492//# sourceMappingURL=reverse.mjs.map 13493 13494 13495/***/ }), 13496 13497/***/ 53857: 13498/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13499 13500"use strict"; 13501/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13502/* harmony export */ q: function() { return /* binding */ isBezierDefinition; } 13503/* harmony export */ }); 13504/*#__NO_SIDE_EFFECTS__*/ 13505const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number"; 13506 13507 13508//# sourceMappingURL=is-bezier-definition.mjs.map 13509 13510 13511/***/ }), 13512 13513/***/ 62035: 13514/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13515 13516"use strict"; 13517/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13518/* harmony export */ K: function() { return /* binding */ warning; }, 13519/* harmony export */ k: function() { return /* binding */ invariant; } 13520/* harmony export */ }); 13521/* provided dependency */ var process = __webpack_require__(40257); 13522 13523 13524let warning = () => { }; 13525let invariant = () => { }; 13526if (typeof process !== "undefined" && 13527 "production" !== "production") {} 13528 13529 13530//# sourceMappingURL=errors.mjs.map 13531 13532 13533/***/ }), 13534 13535/***/ 21457: 13536/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13537 13538"use strict"; 13539/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13540/* harmony export */ c: function() { return /* binding */ MotionGlobalConfig; } 13541/* harmony export */ }); 13542const MotionGlobalConfig = {}; 13543 13544 13545//# sourceMappingURL=global-config.mjs.map 13546 13547 13548/***/ }), 13549 13550/***/ 41464: 13551/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13552 13553"use strict"; 13554/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13555/* harmony export */ K: function() { return /* binding */ isObject; } 13556/* harmony export */ }); 13557const isObject = (value) => typeof value === "object" && value !== null; 13558 13559 13560//# sourceMappingURL=is-object.mjs.map 13561 13562 13563/***/ }), 13564 13565/***/ 90107: 13566/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13567 13568"use strict"; 13569/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13570/* harmony export */ X: function() { return /* binding */ memo; } 13571/* harmony export */ }); 13572/*#__NO_SIDE_EFFECTS__*/ 13573function memo(callback) { 13574 let result; 13575 return () => { 13576 if (result === undefined) 13577 result = callback(); 13578 return result; 13579 }; 13580} 13581 13582 13583//# sourceMappingURL=memo.mjs.map 13584 13585 13586/***/ }), 13587 13588/***/ 56277: 13589/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13590 13591"use strict"; 13592/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13593/* harmony export */ Z: function() { return /* binding */ noop; } 13594/* harmony export */ }); 13595/*#__NO_SIDE_EFFECTS__*/ 13596const noop = (any) => any; 13597 13598 13599//# sourceMappingURL=noop.mjs.map 13600 13601 13602/***/ }), 13603 13604/***/ 24750: 13605/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13606 13607"use strict"; 13608/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13609/* harmony export */ z: function() { return /* binding */ pipe; } 13610/* harmony export */ }); 13611/** 13612 * Pipe 13613 * Compose other transformers to run linearily 13614 * pipe(min(20), max(40)) 13615 * @param {...functions} transformers 13616 * @return {function} 13617 */ 13618const pipe = (...transformers) => transformers.reduce((a, b) => (v) => b(a(v))); 13619 13620 13621//# sourceMappingURL=pipe.mjs.map 13622 13623 13624/***/ }), 13625 13626/***/ 81645: 13627/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13628 13629"use strict"; 13630/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13631/* harmony export */ Y: function() { return /* binding */ progress; } 13632/* harmony export */ }); 13633/* 13634 Progress within given range 13635 13636 Given a lower limit and an upper limit, we return the progress 13637 (expressed as a number 0-1) represented by the given value, and 13638 limit that progress to within 0-1. 13639*/ 13640/*#__NO_SIDE_EFFECTS__*/ 13641const progress = (from, to, value) => { 13642 const range = to - from; 13643 return range ? (value - from) / range : 1; 13644}; 13645 13646 13647//# sourceMappingURL=progress.mjs.map 13648 13649 13650/***/ }), 13651 13652/***/ 94513: 13653/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13654 13655"use strict"; 13656/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13657/* harmony export */ L: function() { return /* binding */ SubscriptionManager; }
13658/* harmony export */ }); 13659/* harmony import */ var _array_mjs__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(98425); 13660 13661 13662class SubscriptionManager { 13663 constructor() { 13664 this.subscriptions = []; 13665 } 13666 add(handler) { 13667 (0,_array_mjs__WEBPACK_IMPORTED_MODULE_0__/* .addUniqueItem */ .y4)(this.subscriptions, handler); 13668 return () => (0,_array_mjs__WEBPACK_IMPORTED_MODULE_0__/* .removeItem */ .cl)(this.subscriptions, handler); 13669 } 13670 notify(a, b, c) { 13671 const numSubscriptions = this.subscriptions.length; 13672 if (!numSubscriptions) 13673 return; 13674 if (numSubscriptions === 1) { 13675 /** 13676 * If there's only a single handler we can just call it without invoking a loop. 13677 */ 13678 this.subscriptions[0](a, b, c); 13679 } 13680 else { 13681 for (let i = 0; i < numSubscriptions; i++) { 13682 /** 13683 * Check whether the handler exists before firing as it's possible 13684 * the subscriptions were modified during this loop running. 13685 */ 13686 const handler = this.subscriptions[i]; 13687 handler && handler(a, b, c); 13688 } 13689 } 13690 } 13691 getSize() { 13692 return this.subscriptions.length; 13693 } 13694 clear() { 13695 this.subscriptions.length = 0; 13696 } 13697} 13698 13699 13700//# sourceMappingURL=subscription-manager.mjs.map 13701 13702 13703/***/ }), 13704 13705/***/ 29711: 13706/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13707 13708"use strict"; 13709/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13710/* harmony export */ X: function() { return /* binding */ millisecondsToSeconds; }, 13711/* harmony export */ w: function() { return /* binding */ secondsToMilliseconds; } 13712/* harmony export */ }); 13713/** 13714 * Converts seconds to milliseconds 13715 * 13716 * @param seconds - Time in seconds. 13717 * @return milliseconds - Converted time in milliseconds. 13718 */ 13719/*#__NO_SIDE_EFFECTS__*/ 13720const secondsToMilliseconds = (seconds) => seconds * 1000; 13721/*#__NO_SIDE_EFFECTS__*/ 13722const millisecondsToSeconds = (milliseconds) => milliseconds / 1000; 13723 13724 13725//# sourceMappingURL=time-conversion.mjs.map 13726 13727 13728/***/ }), 13729 13730/***/ 88294: 13731/***/ (function(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) { 13732 13733"use strict"; 13734/* harmony export */ __webpack_require__.d(__webpack_exports__, { 13735/* harmony export */ R: function() { return /* binding */ velocityPerSecond; } 13736/* harmony export */ }); 13737/* 13738 Convert velocity into velocity per second 13739*/ 13740/*#__NO_SIDE_EFFECTS__*/ 13741const velocityPerSecond = (velocity, frameDuration) => frameDuration ? velocity * (1000 / frameDuration) : 0; 13742 13743 13744//# sourceMappingURL=velocity-per-second.mjs.map 13745 13746 13747/***/ }) 13748 13749}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.