11165 lines
385 KiB
JavaScript
11165 lines
385 KiB
JavaScript
"use client";
|
|
import {
|
|
require_react
|
|
} from "./chunk-G4O6EYSD.js";
|
|
import {
|
|
__commonJS,
|
|
__export,
|
|
__toESM
|
|
} from "./chunk-ZC22LKFR.js";
|
|
|
|
// node_modules/react/cjs/react-jsx-runtime.development.js
|
|
var require_react_jsx_runtime_development = __commonJS({
|
|
"node_modules/react/cjs/react-jsx-runtime.development.js"(exports) {
|
|
"use strict";
|
|
if (true) {
|
|
(function() {
|
|
"use strict";
|
|
var React4 = require_react();
|
|
var REACT_ELEMENT_TYPE = Symbol.for("react.element");
|
|
var REACT_PORTAL_TYPE = Symbol.for("react.portal");
|
|
var REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
|
|
var REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode");
|
|
var REACT_PROFILER_TYPE = Symbol.for("react.profiler");
|
|
var REACT_PROVIDER_TYPE = Symbol.for("react.provider");
|
|
var REACT_CONTEXT_TYPE = Symbol.for("react.context");
|
|
var REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref");
|
|
var REACT_SUSPENSE_TYPE = Symbol.for("react.suspense");
|
|
var REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list");
|
|
var REACT_MEMO_TYPE = Symbol.for("react.memo");
|
|
var REACT_LAZY_TYPE = Symbol.for("react.lazy");
|
|
var REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen");
|
|
var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
|
|
var FAUX_ITERATOR_SYMBOL = "@@iterator";
|
|
function getIteratorFn(maybeIterable) {
|
|
if (maybeIterable === null || typeof maybeIterable !== "object") {
|
|
return null;
|
|
}
|
|
var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
|
|
if (typeof maybeIterator === "function") {
|
|
return maybeIterator;
|
|
}
|
|
return null;
|
|
}
|
|
var ReactSharedInternals = React4.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
|
function error(format) {
|
|
{
|
|
{
|
|
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
args[_key2 - 1] = arguments[_key2];
|
|
}
|
|
printWarning("error", format, args);
|
|
}
|
|
}
|
|
}
|
|
function printWarning(level, format, args) {
|
|
{
|
|
var ReactDebugCurrentFrame2 = ReactSharedInternals.ReactDebugCurrentFrame;
|
|
var stack = ReactDebugCurrentFrame2.getStackAddendum();
|
|
if (stack !== "") {
|
|
format += "%s";
|
|
args = args.concat([stack]);
|
|
}
|
|
var argsWithFormat = args.map(function(item) {
|
|
return String(item);
|
|
});
|
|
argsWithFormat.unshift("Warning: " + format);
|
|
Function.prototype.apply.call(console[level], console, argsWithFormat);
|
|
}
|
|
}
|
|
var enableScopeAPI = false;
|
|
var enableCacheElement = false;
|
|
var enableTransitionTracing = false;
|
|
var enableLegacyHidden = false;
|
|
var enableDebugTracing = false;
|
|
var REACT_MODULE_REFERENCE;
|
|
{
|
|
REACT_MODULE_REFERENCE = Symbol.for("react.module.reference");
|
|
}
|
|
function isValidElementType(type) {
|
|
if (typeof type === "string" || typeof type === "function") {
|
|
return true;
|
|
}
|
|
if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
|
|
return true;
|
|
}
|
|
if (typeof type === "object" && type !== null) {
|
|
if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
|
|
// types supported by any Flight configuration anywhere since
|
|
// we don't know which Flight build this will end up being used
|
|
// with.
|
|
type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== void 0) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
function getWrappedName(outerType, innerType, wrapperName) {
|
|
var displayName = outerType.displayName;
|
|
if (displayName) {
|
|
return displayName;
|
|
}
|
|
var functionName = innerType.displayName || innerType.name || "";
|
|
return functionName !== "" ? wrapperName + "(" + functionName + ")" : wrapperName;
|
|
}
|
|
function getContextName(type) {
|
|
return type.displayName || "Context";
|
|
}
|
|
function getComponentNameFromType(type) {
|
|
if (type == null) {
|
|
return null;
|
|
}
|
|
{
|
|
if (typeof type.tag === "number") {
|
|
error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.");
|
|
}
|
|
}
|
|
if (typeof type === "function") {
|
|
return type.displayName || type.name || null;
|
|
}
|
|
if (typeof type === "string") {
|
|
return type;
|
|
}
|
|
switch (type) {
|
|
case REACT_FRAGMENT_TYPE:
|
|
return "Fragment";
|
|
case REACT_PORTAL_TYPE:
|
|
return "Portal";
|
|
case REACT_PROFILER_TYPE:
|
|
return "Profiler";
|
|
case REACT_STRICT_MODE_TYPE:
|
|
return "StrictMode";
|
|
case REACT_SUSPENSE_TYPE:
|
|
return "Suspense";
|
|
case REACT_SUSPENSE_LIST_TYPE:
|
|
return "SuspenseList";
|
|
}
|
|
if (typeof type === "object") {
|
|
switch (type.$$typeof) {
|
|
case REACT_CONTEXT_TYPE:
|
|
var context = type;
|
|
return getContextName(context) + ".Consumer";
|
|
case REACT_PROVIDER_TYPE:
|
|
var provider = type;
|
|
return getContextName(provider._context) + ".Provider";
|
|
case REACT_FORWARD_REF_TYPE:
|
|
return getWrappedName(type, type.render, "ForwardRef");
|
|
case REACT_MEMO_TYPE:
|
|
var outerName = type.displayName || null;
|
|
if (outerName !== null) {
|
|
return outerName;
|
|
}
|
|
return getComponentNameFromType(type.type) || "Memo";
|
|
case REACT_LAZY_TYPE: {
|
|
var lazyComponent = type;
|
|
var payload = lazyComponent._payload;
|
|
var init = lazyComponent._init;
|
|
try {
|
|
return getComponentNameFromType(init(payload));
|
|
} catch (x) {
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
var assign = Object.assign;
|
|
var disabledDepth = 0;
|
|
var prevLog;
|
|
var prevInfo;
|
|
var prevWarn;
|
|
var prevError;
|
|
var prevGroup;
|
|
var prevGroupCollapsed;
|
|
var prevGroupEnd;
|
|
function disabledLog() {
|
|
}
|
|
disabledLog.__reactDisabledLog = true;
|
|
function disableLogs() {
|
|
{
|
|
if (disabledDepth === 0) {
|
|
prevLog = console.log;
|
|
prevInfo = console.info;
|
|
prevWarn = console.warn;
|
|
prevError = console.error;
|
|
prevGroup = console.group;
|
|
prevGroupCollapsed = console.groupCollapsed;
|
|
prevGroupEnd = console.groupEnd;
|
|
var props = {
|
|
configurable: true,
|
|
enumerable: true,
|
|
value: disabledLog,
|
|
writable: true
|
|
};
|
|
Object.defineProperties(console, {
|
|
info: props,
|
|
log: props,
|
|
warn: props,
|
|
error: props,
|
|
group: props,
|
|
groupCollapsed: props,
|
|
groupEnd: props
|
|
});
|
|
}
|
|
disabledDepth++;
|
|
}
|
|
}
|
|
function reenableLogs() {
|
|
{
|
|
disabledDepth--;
|
|
if (disabledDepth === 0) {
|
|
var props = {
|
|
configurable: true,
|
|
enumerable: true,
|
|
writable: true
|
|
};
|
|
Object.defineProperties(console, {
|
|
log: assign({}, props, {
|
|
value: prevLog
|
|
}),
|
|
info: assign({}, props, {
|
|
value: prevInfo
|
|
}),
|
|
warn: assign({}, props, {
|
|
value: prevWarn
|
|
}),
|
|
error: assign({}, props, {
|
|
value: prevError
|
|
}),
|
|
group: assign({}, props, {
|
|
value: prevGroup
|
|
}),
|
|
groupCollapsed: assign({}, props, {
|
|
value: prevGroupCollapsed
|
|
}),
|
|
groupEnd: assign({}, props, {
|
|
value: prevGroupEnd
|
|
})
|
|
});
|
|
}
|
|
if (disabledDepth < 0) {
|
|
error("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
|
|
}
|
|
}
|
|
}
|
|
var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
|
|
var prefix;
|
|
function describeBuiltInComponentFrame(name, source, ownerFn) {
|
|
{
|
|
if (prefix === void 0) {
|
|
try {
|
|
throw Error();
|
|
} catch (x) {
|
|
var match = x.stack.trim().match(/\n( *(at )?)/);
|
|
prefix = match && match[1] || "";
|
|
}
|
|
}
|
|
return "\n" + prefix + name;
|
|
}
|
|
}
|
|
var reentry = false;
|
|
var componentFrameCache;
|
|
{
|
|
var PossiblyWeakMap = typeof WeakMap === "function" ? WeakMap : Map;
|
|
componentFrameCache = new PossiblyWeakMap();
|
|
}
|
|
function describeNativeComponentFrame(fn, construct) {
|
|
if (!fn || reentry) {
|
|
return "";
|
|
}
|
|
{
|
|
var frame2 = componentFrameCache.get(fn);
|
|
if (frame2 !== void 0) {
|
|
return frame2;
|
|
}
|
|
}
|
|
var control;
|
|
reentry = true;
|
|
var previousPrepareStackTrace = Error.prepareStackTrace;
|
|
Error.prepareStackTrace = void 0;
|
|
var previousDispatcher;
|
|
{
|
|
previousDispatcher = ReactCurrentDispatcher.current;
|
|
ReactCurrentDispatcher.current = null;
|
|
disableLogs();
|
|
}
|
|
try {
|
|
if (construct) {
|
|
var Fake = function() {
|
|
throw Error();
|
|
};
|
|
Object.defineProperty(Fake.prototype, "props", {
|
|
set: function() {
|
|
throw Error();
|
|
}
|
|
});
|
|
if (typeof Reflect === "object" && Reflect.construct) {
|
|
try {
|
|
Reflect.construct(Fake, []);
|
|
} catch (x) {
|
|
control = x;
|
|
}
|
|
Reflect.construct(fn, [], Fake);
|
|
} else {
|
|
try {
|
|
Fake.call();
|
|
} catch (x) {
|
|
control = x;
|
|
}
|
|
fn.call(Fake.prototype);
|
|
}
|
|
} else {
|
|
try {
|
|
throw Error();
|
|
} catch (x) {
|
|
control = x;
|
|
}
|
|
fn();
|
|
}
|
|
} catch (sample) {
|
|
if (sample && control && typeof sample.stack === "string") {
|
|
var sampleLines = sample.stack.split("\n");
|
|
var controlLines = control.stack.split("\n");
|
|
var s = sampleLines.length - 1;
|
|
var c = controlLines.length - 1;
|
|
while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
|
|
c--;
|
|
}
|
|
for (; s >= 1 && c >= 0; s--, c--) {
|
|
if (sampleLines[s] !== controlLines[c]) {
|
|
if (s !== 1 || c !== 1) {
|
|
do {
|
|
s--;
|
|
c--;
|
|
if (c < 0 || sampleLines[s] !== controlLines[c]) {
|
|
var _frame = "\n" + sampleLines[s].replace(" at new ", " at ");
|
|
if (fn.displayName && _frame.includes("<anonymous>")) {
|
|
_frame = _frame.replace("<anonymous>", fn.displayName);
|
|
}
|
|
{
|
|
if (typeof fn === "function") {
|
|
componentFrameCache.set(fn, _frame);
|
|
}
|
|
}
|
|
return _frame;
|
|
}
|
|
} while (s >= 1 && c >= 0);
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
} finally {
|
|
reentry = false;
|
|
{
|
|
ReactCurrentDispatcher.current = previousDispatcher;
|
|
reenableLogs();
|
|
}
|
|
Error.prepareStackTrace = previousPrepareStackTrace;
|
|
}
|
|
var name = fn ? fn.displayName || fn.name : "";
|
|
var syntheticFrame = name ? describeBuiltInComponentFrame(name) : "";
|
|
{
|
|
if (typeof fn === "function") {
|
|
componentFrameCache.set(fn, syntheticFrame);
|
|
}
|
|
}
|
|
return syntheticFrame;
|
|
}
|
|
function describeFunctionComponentFrame(fn, source, ownerFn) {
|
|
{
|
|
return describeNativeComponentFrame(fn, false);
|
|
}
|
|
}
|
|
function shouldConstruct(Component3) {
|
|
var prototype = Component3.prototype;
|
|
return !!(prototype && prototype.isReactComponent);
|
|
}
|
|
function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
|
|
if (type == null) {
|
|
return "";
|
|
}
|
|
if (typeof type === "function") {
|
|
{
|
|
return describeNativeComponentFrame(type, shouldConstruct(type));
|
|
}
|
|
}
|
|
if (typeof type === "string") {
|
|
return describeBuiltInComponentFrame(type);
|
|
}
|
|
switch (type) {
|
|
case REACT_SUSPENSE_TYPE:
|
|
return describeBuiltInComponentFrame("Suspense");
|
|
case REACT_SUSPENSE_LIST_TYPE:
|
|
return describeBuiltInComponentFrame("SuspenseList");
|
|
}
|
|
if (typeof type === "object") {
|
|
switch (type.$$typeof) {
|
|
case REACT_FORWARD_REF_TYPE:
|
|
return describeFunctionComponentFrame(type.render);
|
|
case REACT_MEMO_TYPE:
|
|
return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
|
|
case REACT_LAZY_TYPE: {
|
|
var lazyComponent = type;
|
|
var payload = lazyComponent._payload;
|
|
var init = lazyComponent._init;
|
|
try {
|
|
return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
|
|
} catch (x) {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return "";
|
|
}
|
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
var loggedTypeFailures = {};
|
|
var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
|
|
function setCurrentlyValidatingElement(element) {
|
|
{
|
|
if (element) {
|
|
var owner = element._owner;
|
|
var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
|
|
ReactDebugCurrentFrame.setExtraStackFrame(stack);
|
|
} else {
|
|
ReactDebugCurrentFrame.setExtraStackFrame(null);
|
|
}
|
|
}
|
|
}
|
|
function checkPropTypes(typeSpecs, values, location, componentName, element) {
|
|
{
|
|
var has = Function.call.bind(hasOwnProperty);
|
|
for (var typeSpecName in typeSpecs) {
|
|
if (has(typeSpecs, typeSpecName)) {
|
|
var error$1 = void 0;
|
|
try {
|
|
if (typeof typeSpecs[typeSpecName] !== "function") {
|
|
var err = Error((componentName || "React class") + ": " + location + " type `" + typeSpecName + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof typeSpecs[typeSpecName] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
|
|
err.name = "Invariant Violation";
|
|
throw err;
|
|
}
|
|
error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
|
|
} catch (ex) {
|
|
error$1 = ex;
|
|
}
|
|
if (error$1 && !(error$1 instanceof Error)) {
|
|
setCurrentlyValidatingElement(element);
|
|
error("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", componentName || "React class", location, typeSpecName, typeof error$1);
|
|
setCurrentlyValidatingElement(null);
|
|
}
|
|
if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
|
|
loggedTypeFailures[error$1.message] = true;
|
|
setCurrentlyValidatingElement(element);
|
|
error("Failed %s type: %s", location, error$1.message);
|
|
setCurrentlyValidatingElement(null);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
var isArrayImpl = Array.isArray;
|
|
function isArray(a) {
|
|
return isArrayImpl(a);
|
|
}
|
|
function typeName(value) {
|
|
{
|
|
var hasToStringTag = typeof Symbol === "function" && Symbol.toStringTag;
|
|
var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
|
|
return type;
|
|
}
|
|
}
|
|
function willCoercionThrow(value) {
|
|
{
|
|
try {
|
|
testStringCoercion(value);
|
|
return false;
|
|
} catch (e) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
function testStringCoercion(value) {
|
|
return "" + value;
|
|
}
|
|
function checkKeyStringCoercion(value) {
|
|
{
|
|
if (willCoercionThrow(value)) {
|
|
error("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", typeName(value));
|
|
return testStringCoercion(value);
|
|
}
|
|
}
|
|
}
|
|
var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
|
|
var RESERVED_PROPS = {
|
|
key: true,
|
|
ref: true,
|
|
__self: true,
|
|
__source: true
|
|
};
|
|
var specialPropKeyWarningShown;
|
|
var specialPropRefWarningShown;
|
|
var didWarnAboutStringRefs;
|
|
{
|
|
didWarnAboutStringRefs = {};
|
|
}
|
|
function hasValidRef(config) {
|
|
{
|
|
if (hasOwnProperty.call(config, "ref")) {
|
|
var getter = Object.getOwnPropertyDescriptor(config, "ref").get;
|
|
if (getter && getter.isReactWarning) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return config.ref !== void 0;
|
|
}
|
|
function hasValidKey(config) {
|
|
{
|
|
if (hasOwnProperty.call(config, "key")) {
|
|
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
|
|
if (getter && getter.isReactWarning) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return config.key !== void 0;
|
|
}
|
|
function warnIfStringRefCannotBeAutoConverted(config, self) {
|
|
{
|
|
if (typeof config.ref === "string" && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
|
|
var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
|
|
if (!didWarnAboutStringRefs[componentName]) {
|
|
error('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
|
|
didWarnAboutStringRefs[componentName] = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function defineKeyPropWarningGetter(props, displayName) {
|
|
{
|
|
var warnAboutAccessingKey = function() {
|
|
if (!specialPropKeyWarningShown) {
|
|
specialPropKeyWarningShown = true;
|
|
error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", displayName);
|
|
}
|
|
};
|
|
warnAboutAccessingKey.isReactWarning = true;
|
|
Object.defineProperty(props, "key", {
|
|
get: warnAboutAccessingKey,
|
|
configurable: true
|
|
});
|
|
}
|
|
}
|
|
function defineRefPropWarningGetter(props, displayName) {
|
|
{
|
|
var warnAboutAccessingRef = function() {
|
|
if (!specialPropRefWarningShown) {
|
|
specialPropRefWarningShown = true;
|
|
error("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", displayName);
|
|
}
|
|
};
|
|
warnAboutAccessingRef.isReactWarning = true;
|
|
Object.defineProperty(props, "ref", {
|
|
get: warnAboutAccessingRef,
|
|
configurable: true
|
|
});
|
|
}
|
|
}
|
|
var ReactElement = function(type, key, ref, self, source, owner, props) {
|
|
var element = {
|
|
// This tag allows us to uniquely identify this as a React Element
|
|
$$typeof: REACT_ELEMENT_TYPE,
|
|
// Built-in properties that belong on the element
|
|
type,
|
|
key,
|
|
ref,
|
|
props,
|
|
// Record the component responsible for creating this element.
|
|
_owner: owner
|
|
};
|
|
{
|
|
element._store = {};
|
|
Object.defineProperty(element._store, "validated", {
|
|
configurable: false,
|
|
enumerable: false,
|
|
writable: true,
|
|
value: false
|
|
});
|
|
Object.defineProperty(element, "_self", {
|
|
configurable: false,
|
|
enumerable: false,
|
|
writable: false,
|
|
value: self
|
|
});
|
|
Object.defineProperty(element, "_source", {
|
|
configurable: false,
|
|
enumerable: false,
|
|
writable: false,
|
|
value: source
|
|
});
|
|
if (Object.freeze) {
|
|
Object.freeze(element.props);
|
|
Object.freeze(element);
|
|
}
|
|
}
|
|
return element;
|
|
};
|
|
function jsxDEV(type, config, maybeKey, source, self) {
|
|
{
|
|
var propName;
|
|
var props = {};
|
|
var key = null;
|
|
var ref = null;
|
|
if (maybeKey !== void 0) {
|
|
{
|
|
checkKeyStringCoercion(maybeKey);
|
|
}
|
|
key = "" + maybeKey;
|
|
}
|
|
if (hasValidKey(config)) {
|
|
{
|
|
checkKeyStringCoercion(config.key);
|
|
}
|
|
key = "" + config.key;
|
|
}
|
|
if (hasValidRef(config)) {
|
|
ref = config.ref;
|
|
warnIfStringRefCannotBeAutoConverted(config, self);
|
|
}
|
|
for (propName in config) {
|
|
if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
|
|
props[propName] = config[propName];
|
|
}
|
|
}
|
|
if (type && type.defaultProps) {
|
|
var defaultProps = type.defaultProps;
|
|
for (propName in defaultProps) {
|
|
if (props[propName] === void 0) {
|
|
props[propName] = defaultProps[propName];
|
|
}
|
|
}
|
|
}
|
|
if (key || ref) {
|
|
var displayName = typeof type === "function" ? type.displayName || type.name || "Unknown" : type;
|
|
if (key) {
|
|
defineKeyPropWarningGetter(props, displayName);
|
|
}
|
|
if (ref) {
|
|
defineRefPropWarningGetter(props, displayName);
|
|
}
|
|
}
|
|
return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
|
|
}
|
|
}
|
|
var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
|
|
var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
|
|
function setCurrentlyValidatingElement$1(element) {
|
|
{
|
|
if (element) {
|
|
var owner = element._owner;
|
|
var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
|
|
ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
|
|
} else {
|
|
ReactDebugCurrentFrame$1.setExtraStackFrame(null);
|
|
}
|
|
}
|
|
}
|
|
var propTypesMisspellWarningShown;
|
|
{
|
|
propTypesMisspellWarningShown = false;
|
|
}
|
|
function isValidElement2(object) {
|
|
{
|
|
return typeof object === "object" && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
|
|
}
|
|
}
|
|
function getDeclarationErrorAddendum() {
|
|
{
|
|
if (ReactCurrentOwner$1.current) {
|
|
var name = getComponentNameFromType(ReactCurrentOwner$1.current.type);
|
|
if (name) {
|
|
return "\n\nCheck the render method of `" + name + "`.";
|
|
}
|
|
}
|
|
return "";
|
|
}
|
|
}
|
|
function getSourceInfoErrorAddendum(source) {
|
|
{
|
|
if (source !== void 0) {
|
|
var fileName = source.fileName.replace(/^.*[\\\/]/, "");
|
|
var lineNumber = source.lineNumber;
|
|
return "\n\nCheck your code at " + fileName + ":" + lineNumber + ".";
|
|
}
|
|
return "";
|
|
}
|
|
}
|
|
var ownerHasKeyUseWarning = {};
|
|
function getCurrentComponentErrorInfo(parentType) {
|
|
{
|
|
var info = getDeclarationErrorAddendum();
|
|
if (!info) {
|
|
var parentName = typeof parentType === "string" ? parentType : parentType.displayName || parentType.name;
|
|
if (parentName) {
|
|
info = "\n\nCheck the top-level render call using <" + parentName + ">.";
|
|
}
|
|
}
|
|
return info;
|
|
}
|
|
}
|
|
function validateExplicitKey(element, parentType) {
|
|
{
|
|
if (!element._store || element._store.validated || element.key != null) {
|
|
return;
|
|
}
|
|
element._store.validated = true;
|
|
var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
|
|
if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
|
|
return;
|
|
}
|
|
ownerHasKeyUseWarning[currentComponentErrorInfo] = true;
|
|
var childOwner = "";
|
|
if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
|
|
childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
|
|
}
|
|
setCurrentlyValidatingElement$1(element);
|
|
error('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
|
|
setCurrentlyValidatingElement$1(null);
|
|
}
|
|
}
|
|
function validateChildKeys(node, parentType) {
|
|
{
|
|
if (typeof node !== "object") {
|
|
return;
|
|
}
|
|
if (isArray(node)) {
|
|
for (var i = 0; i < node.length; i++) {
|
|
var child = node[i];
|
|
if (isValidElement2(child)) {
|
|
validateExplicitKey(child, parentType);
|
|
}
|
|
}
|
|
} else if (isValidElement2(node)) {
|
|
if (node._store) {
|
|
node._store.validated = true;
|
|
}
|
|
} else if (node) {
|
|
var iteratorFn = getIteratorFn(node);
|
|
if (typeof iteratorFn === "function") {
|
|
if (iteratorFn !== node.entries) {
|
|
var iterator = iteratorFn.call(node);
|
|
var step;
|
|
while (!(step = iterator.next()).done) {
|
|
if (isValidElement2(step.value)) {
|
|
validateExplicitKey(step.value, parentType);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function validatePropTypes(element) {
|
|
{
|
|
var type = element.type;
|
|
if (type === null || type === void 0 || typeof type === "string") {
|
|
return;
|
|
}
|
|
var propTypes;
|
|
if (typeof type === "function") {
|
|
propTypes = type.propTypes;
|
|
} else if (typeof type === "object" && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
|
|
// Inner props are checked in the reconciler.
|
|
type.$$typeof === REACT_MEMO_TYPE)) {
|
|
propTypes = type.propTypes;
|
|
} else {
|
|
return;
|
|
}
|
|
if (propTypes) {
|
|
var name = getComponentNameFromType(type);
|
|
checkPropTypes(propTypes, element.props, "prop", name, element);
|
|
} else if (type.PropTypes !== void 0 && !propTypesMisspellWarningShown) {
|
|
propTypesMisspellWarningShown = true;
|
|
var _name = getComponentNameFromType(type);
|
|
error("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", _name || "Unknown");
|
|
}
|
|
if (typeof type.getDefaultProps === "function" && !type.getDefaultProps.isReactClassApproved) {
|
|
error("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
|
|
}
|
|
}
|
|
}
|
|
function validateFragmentProps(fragment) {
|
|
{
|
|
var keys2 = Object.keys(fragment.props);
|
|
for (var i = 0; i < keys2.length; i++) {
|
|
var key = keys2[i];
|
|
if (key !== "children" && key !== "key") {
|
|
setCurrentlyValidatingElement$1(fragment);
|
|
error("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", key);
|
|
setCurrentlyValidatingElement$1(null);
|
|
break;
|
|
}
|
|
}
|
|
if (fragment.ref !== null) {
|
|
setCurrentlyValidatingElement$1(fragment);
|
|
error("Invalid attribute `ref` supplied to `React.Fragment`.");
|
|
setCurrentlyValidatingElement$1(null);
|
|
}
|
|
}
|
|
}
|
|
function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
|
|
{
|
|
var validType = isValidElementType(type);
|
|
if (!validType) {
|
|
var info = "";
|
|
if (type === void 0 || typeof type === "object" && type !== null && Object.keys(type).length === 0) {
|
|
info += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.";
|
|
}
|
|
var sourceInfo = getSourceInfoErrorAddendum(source);
|
|
if (sourceInfo) {
|
|
info += sourceInfo;
|
|
} else {
|
|
info += getDeclarationErrorAddendum();
|
|
}
|
|
var typeString;
|
|
if (type === null) {
|
|
typeString = "null";
|
|
} else if (isArray(type)) {
|
|
typeString = "array";
|
|
} else if (type !== void 0 && type.$$typeof === REACT_ELEMENT_TYPE) {
|
|
typeString = "<" + (getComponentNameFromType(type.type) || "Unknown") + " />";
|
|
info = " Did you accidentally export a JSX literal instead of a component?";
|
|
} else {
|
|
typeString = typeof type;
|
|
}
|
|
error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", typeString, info);
|
|
}
|
|
var element = jsxDEV(type, props, key, source, self);
|
|
if (element == null) {
|
|
return element;
|
|
}
|
|
if (validType) {
|
|
var children = props.children;
|
|
if (children !== void 0) {
|
|
if (isStaticChildren) {
|
|
if (isArray(children)) {
|
|
for (var i = 0; i < children.length; i++) {
|
|
validateChildKeys(children[i], type);
|
|
}
|
|
if (Object.freeze) {
|
|
Object.freeze(children);
|
|
}
|
|
} else {
|
|
error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
|
|
}
|
|
} else {
|
|
validateChildKeys(children, type);
|
|
}
|
|
}
|
|
}
|
|
if (type === REACT_FRAGMENT_TYPE) {
|
|
validateFragmentProps(element);
|
|
} else {
|
|
validatePropTypes(element);
|
|
}
|
|
return element;
|
|
}
|
|
}
|
|
function jsxWithValidationStatic(type, props, key) {
|
|
{
|
|
return jsxWithValidation(type, props, key, true);
|
|
}
|
|
}
|
|
function jsxWithValidationDynamic(type, props, key) {
|
|
{
|
|
return jsxWithValidation(type, props, key, false);
|
|
}
|
|
}
|
|
var jsx12 = jsxWithValidationDynamic;
|
|
var jsxs2 = jsxWithValidationStatic;
|
|
exports.Fragment = REACT_FRAGMENT_TYPE;
|
|
exports.jsx = jsx12;
|
|
exports.jsxs = jsxs2;
|
|
})();
|
|
}
|
|
}
|
|
});
|
|
|
|
// node_modules/react/jsx-runtime.js
|
|
var require_jsx_runtime = __commonJS({
|
|
"node_modules/react/jsx-runtime.js"(exports, module) {
|
|
"use strict";
|
|
if (false) {
|
|
module.exports = null;
|
|
} else {
|
|
module.exports = require_react_jsx_runtime_development();
|
|
}
|
|
}
|
|
});
|
|
|
|
// optional-peer-dep:__vite-optional-peer-dep:@emotion/is-prop-valid:framer-motion
|
|
var require_is_prop_valid_framer_motion = __commonJS({
|
|
"optional-peer-dep:__vite-optional-peer-dep:@emotion/is-prop-valid:framer-motion"() {
|
|
throw new Error(`Could not resolve "@emotion/is-prop-valid" imported by "framer-motion". Is it installed?`);
|
|
}
|
|
});
|
|
|
|
// node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
|
|
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
|
|
var import_react10 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs
|
|
var import_react = __toESM(require_react(), 1);
|
|
var LayoutGroupContext = (0, import_react.createContext)({});
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-constant.mjs
|
|
var import_react2 = __toESM(require_react(), 1);
|
|
function useConstant(init) {
|
|
const ref = (0, import_react2.useRef)(null);
|
|
if (ref.current === null) {
|
|
ref.current = init();
|
|
}
|
|
return ref.current;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
|
|
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
|
|
var React2 = __toESM(require_react(), 1);
|
|
var import_react6 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/context/PresenceContext.mjs
|
|
var import_react3 = __toESM(require_react(), 1);
|
|
var PresenceContext = (0, import_react3.createContext)(null);
|
|
|
|
// node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
|
|
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
|
|
var React = __toESM(require_react(), 1);
|
|
var import_react5 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs
|
|
var import_react4 = __toESM(require_react(), 1);
|
|
var MotionConfigContext = (0, import_react4.createContext)({
|
|
transformPagePoint: (p) => p,
|
|
isStatic: false,
|
|
reducedMotion: "never"
|
|
});
|
|
|
|
// node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
|
|
var PopChildMeasure = class extends React.Component {
|
|
getSnapshotBeforeUpdate(prevProps) {
|
|
const element = this.props.childRef.current;
|
|
if (element && prevProps.isPresent && !this.props.isPresent) {
|
|
const size = this.props.sizeRef.current;
|
|
size.height = element.offsetHeight || 0;
|
|
size.width = element.offsetWidth || 0;
|
|
size.top = element.offsetTop;
|
|
size.left = element.offsetLeft;
|
|
}
|
|
return null;
|
|
}
|
|
/**
|
|
* Required with getSnapshotBeforeUpdate to stop React complaining.
|
|
*/
|
|
componentDidUpdate() {
|
|
}
|
|
render() {
|
|
return this.props.children;
|
|
}
|
|
};
|
|
function PopChild({ children, isPresent: isPresent2 }) {
|
|
const id4 = (0, import_react5.useId)();
|
|
const ref = (0, import_react5.useRef)(null);
|
|
const size = (0, import_react5.useRef)({
|
|
width: 0,
|
|
height: 0,
|
|
top: 0,
|
|
left: 0
|
|
});
|
|
const { nonce } = (0, import_react5.useContext)(MotionConfigContext);
|
|
(0, import_react5.useInsertionEffect)(() => {
|
|
const { width, height, top, left } = size.current;
|
|
if (isPresent2 || !ref.current || !width || !height)
|
|
return;
|
|
ref.current.dataset.motionPopId = id4;
|
|
const style = document.createElement("style");
|
|
if (nonce)
|
|
style.nonce = nonce;
|
|
document.head.appendChild(style);
|
|
if (style.sheet) {
|
|
style.sheet.insertRule(`
|
|
[data-motion-pop-id="${id4}"] {
|
|
position: absolute !important;
|
|
width: ${width}px !important;
|
|
height: ${height}px !important;
|
|
top: ${top}px !important;
|
|
left: ${left}px !important;
|
|
}
|
|
`);
|
|
}
|
|
return () => {
|
|
document.head.removeChild(style);
|
|
};
|
|
}, [isPresent2]);
|
|
return (0, import_jsx_runtime.jsx)(PopChildMeasure, { isPresent: isPresent2, childRef: ref, sizeRef: size, children: React.cloneElement(children, { ref }) });
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
|
|
var PresenceChild = ({ children, initial, isPresent: isPresent2, onExitComplete, custom, presenceAffectsLayout, mode }) => {
|
|
const presenceChildren = useConstant(newChildrenMap);
|
|
const id4 = (0, import_react6.useId)();
|
|
const memoizedOnExitComplete = (0, import_react6.useCallback)((childId) => {
|
|
presenceChildren.set(childId, true);
|
|
for (const isComplete of presenceChildren.values()) {
|
|
if (!isComplete)
|
|
return;
|
|
}
|
|
onExitComplete && onExitComplete();
|
|
}, [presenceChildren, onExitComplete]);
|
|
const context = (0, import_react6.useMemo)(
|
|
() => ({
|
|
id: id4,
|
|
initial,
|
|
isPresent: isPresent2,
|
|
custom,
|
|
onExitComplete: memoizedOnExitComplete,
|
|
register: (childId) => {
|
|
presenceChildren.set(childId, false);
|
|
return () => presenceChildren.delete(childId);
|
|
}
|
|
}),
|
|
/**
|
|
* If the presence of a child affects the layout of the components around it,
|
|
* we want to make a new context value to ensure they get re-rendered
|
|
* so they can detect that layout change.
|
|
*/
|
|
presenceAffectsLayout ? [Math.random(), memoizedOnExitComplete] : [isPresent2, memoizedOnExitComplete]
|
|
);
|
|
(0, import_react6.useMemo)(() => {
|
|
presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
|
|
}, [isPresent2]);
|
|
React2.useEffect(() => {
|
|
!isPresent2 && !presenceChildren.size && onExitComplete && onExitComplete();
|
|
}, [isPresent2]);
|
|
if (mode === "popLayout") {
|
|
children = (0, import_jsx_runtime2.jsx)(PopChild, { isPresent: isPresent2, children });
|
|
}
|
|
return (0, import_jsx_runtime2.jsx)(PresenceContext.Provider, { value: context, children });
|
|
};
|
|
function newChildrenMap() {
|
|
return /* @__PURE__ */ new Map();
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs
|
|
var import_react7 = __toESM(require_react(), 1);
|
|
function usePresence(subscribe = true) {
|
|
const context = (0, import_react7.useContext)(PresenceContext);
|
|
if (context === null)
|
|
return [true, null];
|
|
const { isPresent: isPresent2, onExitComplete, register } = context;
|
|
const id4 = (0, import_react7.useId)();
|
|
(0, import_react7.useEffect)(() => {
|
|
if (subscribe)
|
|
register(id4);
|
|
}, [subscribe]);
|
|
const safeToRemove = (0, import_react7.useCallback)(() => subscribe && onExitComplete && onExitComplete(id4), [id4, onExitComplete, subscribe]);
|
|
return !isPresent2 && onExitComplete ? [false, safeToRemove] : [true];
|
|
}
|
|
function useIsPresent() {
|
|
return isPresent((0, import_react7.useContext)(PresenceContext));
|
|
}
|
|
function isPresent(context) {
|
|
return context === null ? true : context.isPresent;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/AnimatePresence/utils.mjs
|
|
var import_react8 = __toESM(require_react(), 1);
|
|
var getChildKey = (child) => child.key || "";
|
|
function onlyElements(children) {
|
|
const filtered = [];
|
|
import_react8.Children.forEach(children, (child) => {
|
|
if ((0, import_react8.isValidElement)(child))
|
|
filtered.push(child);
|
|
});
|
|
return filtered;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs
|
|
var import_react9 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/utils/is-browser.mjs
|
|
var isBrowser = typeof window !== "undefined";
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs
|
|
var useIsomorphicLayoutEffect = isBrowser ? import_react9.useLayoutEffect : import_react9.useEffect;
|
|
|
|
// node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
|
|
var AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false }) => {
|
|
const [isParentPresent, safeToRemove] = usePresence(propagate);
|
|
const presentChildren = (0, import_react10.useMemo)(() => onlyElements(children), [children]);
|
|
const presentKeys = propagate && !isParentPresent ? [] : presentChildren.map(getChildKey);
|
|
const isInitialRender = (0, import_react10.useRef)(true);
|
|
const pendingPresentChildren = (0, import_react10.useRef)(presentChildren);
|
|
const exitComplete = useConstant(() => /* @__PURE__ */ new Map());
|
|
const [diffedChildren, setDiffedChildren] = (0, import_react10.useState)(presentChildren);
|
|
const [renderedChildren, setRenderedChildren] = (0, import_react10.useState)(presentChildren);
|
|
useIsomorphicLayoutEffect(() => {
|
|
isInitialRender.current = false;
|
|
pendingPresentChildren.current = presentChildren;
|
|
for (let i = 0; i < renderedChildren.length; i++) {
|
|
const key = getChildKey(renderedChildren[i]);
|
|
if (!presentKeys.includes(key)) {
|
|
if (exitComplete.get(key) !== true) {
|
|
exitComplete.set(key, false);
|
|
}
|
|
} else {
|
|
exitComplete.delete(key);
|
|
}
|
|
}
|
|
}, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
|
|
const exitingChildren = [];
|
|
if (presentChildren !== diffedChildren) {
|
|
let nextChildren = [...presentChildren];
|
|
for (let i = 0; i < renderedChildren.length; i++) {
|
|
const child = renderedChildren[i];
|
|
const key = getChildKey(child);
|
|
if (!presentKeys.includes(key)) {
|
|
nextChildren.splice(i, 0, child);
|
|
exitingChildren.push(child);
|
|
}
|
|
}
|
|
if (mode === "wait" && exitingChildren.length) {
|
|
nextChildren = exitingChildren;
|
|
}
|
|
setRenderedChildren(onlyElements(nextChildren));
|
|
setDiffedChildren(presentChildren);
|
|
return;
|
|
}
|
|
if (mode === "wait" && renderedChildren.length > 1) {
|
|
console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
|
|
}
|
|
const { forceRender } = (0, import_react10.useContext)(LayoutGroupContext);
|
|
return (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: renderedChildren.map((child) => {
|
|
const key = getChildKey(child);
|
|
const isPresent2 = propagate && !isParentPresent ? false : presentChildren === renderedChildren || presentKeys.includes(key);
|
|
const onExit = () => {
|
|
if (exitComplete.has(key)) {
|
|
exitComplete.set(key, true);
|
|
} else {
|
|
return;
|
|
}
|
|
let isEveryExitComplete = true;
|
|
exitComplete.forEach((isExitComplete) => {
|
|
if (!isExitComplete)
|
|
isEveryExitComplete = false;
|
|
});
|
|
if (isEveryExitComplete) {
|
|
forceRender === null || forceRender === void 0 ? void 0 : forceRender();
|
|
setRenderedChildren(pendingPresentChildren.current);
|
|
propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());
|
|
onExitComplete && onExitComplete();
|
|
}
|
|
};
|
|
return (0, import_jsx_runtime3.jsx)(PresenceChild, { isPresent: isPresent2, initial: !isInitialRender.current || initial ? void 0 : false, custom: isPresent2 ? void 0 : custom, presenceAffectsLayout, mode, onExitComplete: isPresent2 ? void 0 : onExit, children: child }, key);
|
|
}) });
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/components/LayoutGroup/index.mjs
|
|
var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
|
|
var import_react14 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs
|
|
var import_react11 = __toESM(require_react(), 1);
|
|
var DeprecatedLayoutGroupContext = (0, import_react11.createContext)(null);
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-force-update.mjs
|
|
var import_react13 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs
|
|
var import_react12 = __toESM(require_react(), 1);
|
|
function useIsMounted() {
|
|
const isMounted = (0, import_react12.useRef)(false);
|
|
useIsomorphicLayoutEffect(() => {
|
|
isMounted.current = true;
|
|
return () => {
|
|
isMounted.current = false;
|
|
};
|
|
}, []);
|
|
return isMounted;
|
|
}
|
|
|
|
// node_modules/motion-utils/dist/es/noop.mjs
|
|
var noop = (any) => any;
|
|
|
|
// node_modules/motion-utils/dist/es/errors.mjs
|
|
var warning = noop;
|
|
var invariant = noop;
|
|
if (true) {
|
|
warning = (check, message) => {
|
|
if (!check && typeof console !== "undefined") {
|
|
console.warn(message);
|
|
}
|
|
};
|
|
invariant = (check, message) => {
|
|
if (!check) {
|
|
throw new Error(message);
|
|
}
|
|
};
|
|
}
|
|
|
|
// node_modules/motion-utils/dist/es/memo.mjs
|
|
function memo(callback) {
|
|
let result;
|
|
return () => {
|
|
if (result === void 0)
|
|
result = callback();
|
|
return result;
|
|
};
|
|
}
|
|
|
|
// node_modules/motion-utils/dist/es/progress.mjs
|
|
var progress = (from, to, value) => {
|
|
const toFromDifference = to - from;
|
|
return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
|
|
};
|
|
|
|
// node_modules/motion-utils/dist/es/time-conversion.mjs
|
|
var secondsToMilliseconds = (seconds) => seconds * 1e3;
|
|
var millisecondsToSeconds = (milliseconds) => milliseconds / 1e3;
|
|
|
|
// node_modules/framer-motion/dist/es/utils/GlobalConfig.mjs
|
|
var MotionGlobalConfig = {
|
|
skipAnimations: false,
|
|
useManualTiming: false
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/frameloop/render-step.mjs
|
|
function createRenderStep(runNextFrame) {
|
|
let thisFrame = /* @__PURE__ */ new Set();
|
|
let nextFrame = /* @__PURE__ */ new Set();
|
|
let isProcessing = false;
|
|
let flushNextFrame = false;
|
|
const toKeepAlive = /* @__PURE__ */ new WeakSet();
|
|
let latestFrameData = {
|
|
delta: 0,
|
|
timestamp: 0,
|
|
isProcessing: false
|
|
};
|
|
function triggerCallback(callback) {
|
|
if (toKeepAlive.has(callback)) {
|
|
step.schedule(callback);
|
|
runNextFrame();
|
|
}
|
|
callback(latestFrameData);
|
|
}
|
|
const step = {
|
|
/**
|
|
* Schedule a process to run on the next frame.
|
|
*/
|
|
schedule: (callback, keepAlive = false, immediate = false) => {
|
|
const addToCurrentFrame = immediate && isProcessing;
|
|
const queue = addToCurrentFrame ? thisFrame : nextFrame;
|
|
if (keepAlive)
|
|
toKeepAlive.add(callback);
|
|
if (!queue.has(callback))
|
|
queue.add(callback);
|
|
return callback;
|
|
},
|
|
/**
|
|
* Cancel the provided callback from running on the next frame.
|
|
*/
|
|
cancel: (callback) => {
|
|
nextFrame.delete(callback);
|
|
toKeepAlive.delete(callback);
|
|
},
|
|
/**
|
|
* Execute all schedule callbacks.
|
|
*/
|
|
process: (frameData2) => {
|
|
latestFrameData = frameData2;
|
|
if (isProcessing) {
|
|
flushNextFrame = true;
|
|
return;
|
|
}
|
|
isProcessing = true;
|
|
[thisFrame, nextFrame] = [nextFrame, thisFrame];
|
|
thisFrame.forEach(triggerCallback);
|
|
thisFrame.clear();
|
|
isProcessing = false;
|
|
if (flushNextFrame) {
|
|
flushNextFrame = false;
|
|
step.process(frameData2);
|
|
}
|
|
}
|
|
};
|
|
return step;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/frameloop/batcher.mjs
|
|
var stepsOrder = [
|
|
"read",
|
|
// Read
|
|
"resolveKeyframes",
|
|
// Write/Read/Write/Read
|
|
"update",
|
|
// Compute
|
|
"preRender",
|
|
// Compute
|
|
"render",
|
|
// Write
|
|
"postRender"
|
|
// Compute
|
|
];
|
|
var maxElapsed = 40;
|
|
function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
|
|
let runNextFrame = false;
|
|
let useDefaultElapsed = true;
|
|
const state2 = {
|
|
delta: 0,
|
|
timestamp: 0,
|
|
isProcessing: false
|
|
};
|
|
const flagRunNextFrame = () => runNextFrame = true;
|
|
const steps2 = stepsOrder.reduce((acc, key) => {
|
|
acc[key] = createRenderStep(flagRunNextFrame);
|
|
return acc;
|
|
}, {});
|
|
const { read, resolveKeyframes, update, preRender, render, postRender } = steps2;
|
|
const processBatch = () => {
|
|
const timestamp = MotionGlobalConfig.useManualTiming ? state2.timestamp : performance.now();
|
|
runNextFrame = false;
|
|
state2.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state2.timestamp, maxElapsed), 1);
|
|
state2.timestamp = timestamp;
|
|
state2.isProcessing = true;
|
|
read.process(state2);
|
|
resolveKeyframes.process(state2);
|
|
update.process(state2);
|
|
preRender.process(state2);
|
|
render.process(state2);
|
|
postRender.process(state2);
|
|
state2.isProcessing = false;
|
|
if (runNextFrame && allowKeepAlive) {
|
|
useDefaultElapsed = false;
|
|
scheduleNextBatch(processBatch);
|
|
}
|
|
};
|
|
const wake = () => {
|
|
runNextFrame = true;
|
|
useDefaultElapsed = true;
|
|
if (!state2.isProcessing) {
|
|
scheduleNextBatch(processBatch);
|
|
}
|
|
};
|
|
const schedule = stepsOrder.reduce((acc, key) => {
|
|
const step = steps2[key];
|
|
acc[key] = (process2, keepAlive = false, immediate = false) => {
|
|
if (!runNextFrame)
|
|
wake();
|
|
return step.schedule(process2, keepAlive, immediate);
|
|
};
|
|
return acc;
|
|
}, {});
|
|
const cancel = (process2) => {
|
|
for (let i = 0; i < stepsOrder.length; i++) {
|
|
steps2[stepsOrder[i]].cancel(process2);
|
|
}
|
|
};
|
|
return { schedule, cancel, state: state2, steps: steps2 };
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/frameloop/frame.mjs
|
|
var { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-force-update.mjs
|
|
function useForceUpdate() {
|
|
const isMounted = useIsMounted();
|
|
const [forcedRenderCount, setForcedRenderCount] = (0, import_react13.useState)(0);
|
|
const forceRender = (0, import_react13.useCallback)(() => {
|
|
isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
|
|
}, [forcedRenderCount]);
|
|
const deferredForceRender = (0, import_react13.useCallback)(() => frame.postRender(forceRender), [forceRender]);
|
|
return [deferredForceRender, forcedRenderCount];
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/node/group.mjs
|
|
var notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
|
|
function nodeGroup() {
|
|
const nodes = /* @__PURE__ */ new Set();
|
|
const subscriptions = /* @__PURE__ */ new WeakMap();
|
|
const dirtyAll = () => nodes.forEach(notify);
|
|
return {
|
|
add: (node) => {
|
|
nodes.add(node);
|
|
subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll));
|
|
},
|
|
remove: (node) => {
|
|
nodes.delete(node);
|
|
const unsubscribe = subscriptions.get(node);
|
|
if (unsubscribe) {
|
|
unsubscribe();
|
|
subscriptions.delete(node);
|
|
}
|
|
dirtyAll();
|
|
},
|
|
dirty: dirtyAll
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/LayoutGroup/index.mjs
|
|
var shouldInheritGroup = (inherit) => inherit === true;
|
|
var shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
|
|
var LayoutGroup = ({ children, id: id4, inherit = true }) => {
|
|
const layoutGroupContext = (0, import_react14.useContext)(LayoutGroupContext);
|
|
const deprecatedLayoutGroupContext = (0, import_react14.useContext)(DeprecatedLayoutGroupContext);
|
|
const [forceRender, key] = useForceUpdate();
|
|
const context = (0, import_react14.useRef)(null);
|
|
const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
|
|
if (context.current === null) {
|
|
if (shouldInheritId(inherit) && upstreamId) {
|
|
id4 = id4 ? upstreamId + "-" + id4 : upstreamId;
|
|
}
|
|
context.current = {
|
|
id: id4,
|
|
group: shouldInheritGroup(inherit) ? layoutGroupContext.group || nodeGroup() : nodeGroup()
|
|
};
|
|
}
|
|
const memoizedContext = (0, import_react14.useMemo)(() => ({ ...context.current, forceRender }), [key]);
|
|
return (0, import_jsx_runtime4.jsx)(LayoutGroupContext.Provider, { value: memoizedContext, children });
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/components/LazyMotion/index.mjs
|
|
var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
|
|
var import_react16 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/context/LazyContext.mjs
|
|
var import_react15 = __toESM(require_react(), 1);
|
|
var LazyContext = (0, import_react15.createContext)({ strict: false });
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/definitions.mjs
|
|
var featureProps = {
|
|
animation: [
|
|
"animate",
|
|
"variants",
|
|
"whileHover",
|
|
"whileTap",
|
|
"exit",
|
|
"whileInView",
|
|
"whileFocus",
|
|
"whileDrag"
|
|
],
|
|
exit: ["exit"],
|
|
drag: ["drag", "dragControls"],
|
|
focus: ["whileFocus"],
|
|
hover: ["whileHover", "onHoverStart", "onHoverEnd"],
|
|
tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
|
|
pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
|
|
inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
|
|
layout: ["layout", "layoutId"]
|
|
};
|
|
var featureDefinitions = {};
|
|
for (const key in featureProps) {
|
|
featureDefinitions[key] = {
|
|
isEnabled: (props) => featureProps[key].some((name) => !!props[name])
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/load-features.mjs
|
|
function loadFeatures(features) {
|
|
for (const key in features) {
|
|
featureDefinitions[key] = {
|
|
...featureDefinitions[key],
|
|
...features[key]
|
|
};
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/LazyMotion/index.mjs
|
|
function LazyMotion({ children, features, strict = false }) {
|
|
const [, setIsLoaded] = (0, import_react16.useState)(!isLazyBundle(features));
|
|
const loadedRenderer = (0, import_react16.useRef)(void 0);
|
|
if (!isLazyBundle(features)) {
|
|
const { renderer, ...loadedFeatures } = features;
|
|
loadedRenderer.current = renderer;
|
|
loadFeatures(loadedFeatures);
|
|
}
|
|
(0, import_react16.useEffect)(() => {
|
|
if (isLazyBundle(features)) {
|
|
features().then(({ renderer, ...loadedFeatures }) => {
|
|
loadFeatures(loadedFeatures);
|
|
loadedRenderer.current = renderer;
|
|
setIsLoaded(true);
|
|
});
|
|
}
|
|
}, []);
|
|
return (0, import_jsx_runtime5.jsx)(LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict }, children });
|
|
}
|
|
function isLazyBundle(features) {
|
|
return typeof features === "function";
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/MotionConfig/index.mjs
|
|
var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
|
|
var import_react17 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs
|
|
var validMotionProps = /* @__PURE__ */ new Set([
|
|
"animate",
|
|
"exit",
|
|
"variants",
|
|
"initial",
|
|
"style",
|
|
"values",
|
|
"variants",
|
|
"transition",
|
|
"transformTemplate",
|
|
"custom",
|
|
"inherit",
|
|
"onBeforeLayoutMeasure",
|
|
"onAnimationStart",
|
|
"onAnimationComplete",
|
|
"onUpdate",
|
|
"onDragStart",
|
|
"onDrag",
|
|
"onDragEnd",
|
|
"onMeasureDragConstraints",
|
|
"onDirectionLock",
|
|
"onDragTransitionEnd",
|
|
"_dragX",
|
|
"_dragY",
|
|
"onHoverStart",
|
|
"onHoverEnd",
|
|
"onViewportEnter",
|
|
"onViewportLeave",
|
|
"globalTapTarget",
|
|
"ignoreStrict",
|
|
"viewport"
|
|
]);
|
|
function isValidMotionProp(key) {
|
|
return key.startsWith("while") || key.startsWith("drag") && key !== "draggable" || key.startsWith("layout") || key.startsWith("onTap") || key.startsWith("onPan") || key.startsWith("onLayout") || validMotionProps.has(key);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs
|
|
var shouldForward = (key) => !isValidMotionProp(key);
|
|
function loadExternalIsValidProp(isValidProp) {
|
|
if (!isValidProp)
|
|
return;
|
|
shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
|
|
}
|
|
try {
|
|
loadExternalIsValidProp(require_is_prop_valid_framer_motion().default);
|
|
} catch (_a) {
|
|
}
|
|
function filterProps(props, isDom, forwardMotionProps) {
|
|
const filteredProps = {};
|
|
for (const key in props) {
|
|
if (key === "values" && typeof props.values === "object")
|
|
continue;
|
|
if (shouldForward(key) || forwardMotionProps === true && isValidMotionProp(key) || !isDom && !isValidMotionProp(key) || // If trying to use native HTML drag events, forward drag listeners
|
|
props["draggable"] && key.startsWith("onDrag")) {
|
|
filteredProps[key] = props[key];
|
|
}
|
|
}
|
|
return filteredProps;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/MotionConfig/index.mjs
|
|
function MotionConfig({ children, isValidProp, ...config }) {
|
|
isValidProp && loadExternalIsValidProp(isValidProp);
|
|
config = { ...(0, import_react17.useContext)(MotionConfigContext), ...config };
|
|
config.isStatic = useConstant(() => config.isStatic);
|
|
const context = (0, import_react17.useMemo)(() => config, [
|
|
JSON.stringify(config.transition),
|
|
config.transformPagePoint,
|
|
config.reducedMotion
|
|
]);
|
|
return (0, import_jsx_runtime6.jsx)(MotionConfigContext.Provider, { value: context, children });
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/warn-once.mjs
|
|
var warned = /* @__PURE__ */ new Set();
|
|
function warnOnce(condition, message, element) {
|
|
if (condition || warned.has(message))
|
|
return;
|
|
console.warn(message);
|
|
if (element)
|
|
console.warn(element);
|
|
warned.add(message);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/components/create-proxy.mjs
|
|
function createDOMMotionComponentProxy(componentFactory) {
|
|
if (typeof Proxy === "undefined") {
|
|
return componentFactory;
|
|
}
|
|
const componentCache = /* @__PURE__ */ new Map();
|
|
const deprecatedFactoryFunction = (...args) => {
|
|
if (true) {
|
|
warnOnce(false, "motion() is deprecated. Use motion.create() instead.");
|
|
}
|
|
return componentFactory(...args);
|
|
};
|
|
return new Proxy(deprecatedFactoryFunction, {
|
|
/**
|
|
* Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
|
|
* The prop name is passed through as `key` and we can use that to generate a `motion`
|
|
* DOM component with that name.
|
|
*/
|
|
get: (_target, key) => {
|
|
if (key === "create")
|
|
return componentFactory;
|
|
if (!componentCache.has(key)) {
|
|
componentCache.set(key, componentFactory(key));
|
|
}
|
|
return componentCache.get(key);
|
|
}
|
|
});
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/index.mjs
|
|
var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
|
|
var import_react23 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/context/MotionContext/index.mjs
|
|
var import_react18 = __toESM(require_react(), 1);
|
|
var MotionContext = (0, import_react18.createContext)({});
|
|
|
|
// node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
|
|
var import_react19 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs
|
|
function isVariantLabel(v) {
|
|
return typeof v === "string" || Array.isArray(v);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs
|
|
function isAnimationControls(v) {
|
|
return v !== null && typeof v === "object" && typeof v.start === "function";
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/variant-props.mjs
|
|
var variantPriorityOrder = [
|
|
"animate",
|
|
"whileInView",
|
|
"whileFocus",
|
|
"whileHover",
|
|
"whileTap",
|
|
"whileDrag",
|
|
"exit"
|
|
];
|
|
var variantProps = ["initial", ...variantPriorityOrder];
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.mjs
|
|
function isControllingVariants(props) {
|
|
return isAnimationControls(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
|
|
}
|
|
function isVariantNode(props) {
|
|
return Boolean(isControllingVariants(props) || props.variants);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs
|
|
function getCurrentTreeVariants(props, context) {
|
|
if (isControllingVariants(props)) {
|
|
const { initial, animate: animate2 } = props;
|
|
return {
|
|
initial: initial === false || isVariantLabel(initial) ? initial : void 0,
|
|
animate: isVariantLabel(animate2) ? animate2 : void 0
|
|
};
|
|
}
|
|
return props.inherit !== false ? context : {};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
|
|
function useCreateMotionContext(props) {
|
|
const { initial, animate: animate2 } = getCurrentTreeVariants(props, (0, import_react19.useContext)(MotionContext));
|
|
return (0, import_react19.useMemo)(() => ({ initial, animate: animate2 }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate2)]);
|
|
}
|
|
function variantLabelsAsDependency(prop) {
|
|
return Array.isArray(prop) ? prop.join(" ") : prop;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/symbol.mjs
|
|
var motionComponentSymbol = Symbol.for("motionComponentSymbol");
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
|
|
var import_react20 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/utils/is-ref-object.mjs
|
|
function isRefObject(ref) {
|
|
return ref && typeof ref === "object" && Object.prototype.hasOwnProperty.call(ref, "current");
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
|
|
function useMotionRef(visualState, visualElement, externalRef) {
|
|
return (0, import_react20.useCallback)(
|
|
(instance) => {
|
|
if (instance) {
|
|
visualState.onMount && visualState.onMount(instance);
|
|
}
|
|
if (visualElement) {
|
|
if (instance) {
|
|
visualElement.mount(instance);
|
|
} else {
|
|
visualElement.unmount();
|
|
}
|
|
}
|
|
if (externalRef) {
|
|
if (typeof externalRef === "function") {
|
|
externalRef(instance);
|
|
} else if (isRefObject(externalRef)) {
|
|
externalRef.current = instance;
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* Only pass a new ref callback to React if we've received a visual element
|
|
* factory. Otherwise we'll be mounting/remounting every time externalRef
|
|
* or other dependencies change.
|
|
*/
|
|
[visualElement]
|
|
);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs
|
|
var import_react22 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs
|
|
var camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
|
|
|
|
// node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs
|
|
var optimizedAppearDataId = "framerAppearId";
|
|
var optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
|
|
|
|
// node_modules/framer-motion/dist/es/frameloop/microtask.mjs
|
|
var { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
|
|
|
|
// node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs
|
|
var import_react21 = __toESM(require_react(), 1);
|
|
var SwitchLayoutGroupContext = (0, import_react21.createContext)({});
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs
|
|
function useVisualElement(Component3, visualState, props, createVisualElement, ProjectionNodeConstructor) {
|
|
var _a, _b;
|
|
const { visualElement: parent } = (0, import_react22.useContext)(MotionContext);
|
|
const lazyContext = (0, import_react22.useContext)(LazyContext);
|
|
const presenceContext = (0, import_react22.useContext)(PresenceContext);
|
|
const reducedMotionConfig = (0, import_react22.useContext)(MotionConfigContext).reducedMotion;
|
|
const visualElementRef = (0, import_react22.useRef)(null);
|
|
createVisualElement = createVisualElement || lazyContext.renderer;
|
|
if (!visualElementRef.current && createVisualElement) {
|
|
visualElementRef.current = createVisualElement(Component3, {
|
|
visualState,
|
|
parent,
|
|
props,
|
|
presenceContext,
|
|
blockInitialAnimation: presenceContext ? presenceContext.initial === false : false,
|
|
reducedMotionConfig
|
|
});
|
|
}
|
|
const visualElement = visualElementRef.current;
|
|
const initialLayoutGroupConfig = (0, import_react22.useContext)(SwitchLayoutGroupContext);
|
|
if (visualElement && !visualElement.projection && ProjectionNodeConstructor && (visualElement.type === "html" || visualElement.type === "svg")) {
|
|
createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);
|
|
}
|
|
const isMounted = (0, import_react22.useRef)(false);
|
|
(0, import_react22.useInsertionEffect)(() => {
|
|
if (visualElement && isMounted.current) {
|
|
visualElement.update(props, presenceContext);
|
|
}
|
|
});
|
|
const optimisedAppearId = props[optimizedAppearDataAttribute];
|
|
const wantsHandoff = (0, import_react22.useRef)(Boolean(optimisedAppearId) && !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) && ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
|
|
useIsomorphicLayoutEffect(() => {
|
|
if (!visualElement)
|
|
return;
|
|
isMounted.current = true;
|
|
window.MotionIsMounted = true;
|
|
visualElement.updateFeatures();
|
|
microtask.render(visualElement.render);
|
|
if (wantsHandoff.current && visualElement.animationState) {
|
|
visualElement.animationState.animateChanges();
|
|
}
|
|
});
|
|
(0, import_react22.useEffect)(() => {
|
|
if (!visualElement)
|
|
return;
|
|
if (!wantsHandoff.current && visualElement.animationState) {
|
|
visualElement.animationState.animateChanges();
|
|
}
|
|
if (wantsHandoff.current) {
|
|
queueMicrotask(() => {
|
|
var _a2;
|
|
(_a2 = window.MotionHandoffMarkAsComplete) === null || _a2 === void 0 ? void 0 : _a2.call(window, optimisedAppearId);
|
|
});
|
|
wantsHandoff.current = false;
|
|
}
|
|
});
|
|
return visualElement;
|
|
}
|
|
function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
|
|
const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot } = props;
|
|
visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent));
|
|
visualElement.projection.setOptions({
|
|
layoutId,
|
|
layout: layout2,
|
|
alwaysMeasureLayout: Boolean(drag2) || dragConstraints && isRefObject(dragConstraints),
|
|
visualElement,
|
|
/**
|
|
* TODO: Update options in an effect. This could be tricky as it'll be too late
|
|
* to update by the time layout animations run.
|
|
* We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
|
|
* ensuring it gets called if there's no potential layout animations.
|
|
*
|
|
*/
|
|
animationType: typeof layout2 === "string" ? layout2 : "both",
|
|
initialPromotionConfig,
|
|
layoutScroll,
|
|
layoutRoot
|
|
});
|
|
}
|
|
function getClosestProjectingNode(visualElement) {
|
|
if (!visualElement)
|
|
return void 0;
|
|
return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/index.mjs
|
|
function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState: useVisualState2, Component: Component3 }) {
|
|
var _a, _b;
|
|
preloadedFeatures && loadFeatures(preloadedFeatures);
|
|
function MotionComponent(props, externalRef) {
|
|
let MeasureLayout2;
|
|
const configAndProps = {
|
|
...(0, import_react23.useContext)(MotionConfigContext),
|
|
...props,
|
|
layoutId: useLayoutId(props)
|
|
};
|
|
const { isStatic } = configAndProps;
|
|
const context = useCreateMotionContext(props);
|
|
const visualState = useVisualState2(props, isStatic);
|
|
if (!isStatic && isBrowser) {
|
|
useStrictMode(configAndProps, preloadedFeatures);
|
|
const layoutProjection = getProjectionFunctionality(configAndProps);
|
|
MeasureLayout2 = layoutProjection.MeasureLayout;
|
|
context.visualElement = useVisualElement(Component3, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
|
|
}
|
|
return (0, import_jsx_runtime7.jsxs)(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? (0, import_jsx_runtime7.jsx)(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component3, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement)] });
|
|
}
|
|
MotionComponent.displayName = `motion.${typeof Component3 === "string" ? Component3 : `create(${(_b = (_a = Component3.displayName) !== null && _a !== void 0 ? _a : Component3.name) !== null && _b !== void 0 ? _b : ""})`}`;
|
|
const ForwardRefMotionComponent = (0, import_react23.forwardRef)(MotionComponent);
|
|
ForwardRefMotionComponent[motionComponentSymbol] = Component3;
|
|
return ForwardRefMotionComponent;
|
|
}
|
|
function useLayoutId({ layoutId }) {
|
|
const layoutGroupId = (0, import_react23.useContext)(LayoutGroupContext).id;
|
|
return layoutGroupId && layoutId !== void 0 ? layoutGroupId + "-" + layoutId : layoutId;
|
|
}
|
|
function useStrictMode(configAndProps, preloadedFeatures) {
|
|
const isStrict = (0, import_react23.useContext)(LazyContext).strict;
|
|
if (preloadedFeatures && isStrict) {
|
|
const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
|
|
configAndProps.ignoreStrict ? warning(false, strictMessage) : invariant(false, strictMessage);
|
|
}
|
|
}
|
|
function getProjectionFunctionality(props) {
|
|
const { drag: drag2, layout: layout2 } = featureDefinitions;
|
|
if (!drag2 && !layout2)
|
|
return {};
|
|
const combined = { ...drag2, ...layout2 };
|
|
return {
|
|
MeasureLayout: (drag2 === null || drag2 === void 0 ? void 0 : drag2.isEnabled(props)) || (layout2 === null || layout2 === void 0 ? void 0 : layout2.isEnabled(props)) ? combined.MeasureLayout : void 0,
|
|
ProjectionNode: combined.ProjectionNode
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs
|
|
var lowercaseSVGElements = [
|
|
"animate",
|
|
"circle",
|
|
"defs",
|
|
"desc",
|
|
"ellipse",
|
|
"g",
|
|
"image",
|
|
"line",
|
|
"filter",
|
|
"marker",
|
|
"mask",
|
|
"metadata",
|
|
"path",
|
|
"pattern",
|
|
"polygon",
|
|
"polyline",
|
|
"rect",
|
|
"stop",
|
|
"switch",
|
|
"symbol",
|
|
"svg",
|
|
"text",
|
|
"tspan",
|
|
"use",
|
|
"view"
|
|
];
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs
|
|
function isSVGComponent(Component3) {
|
|
if (
|
|
/**
|
|
* If it's not a string, it's a custom React component. Currently we only support
|
|
* HTML custom React components.
|
|
*/
|
|
typeof Component3 !== "string" || /**
|
|
* If it contains a dash, the element is a custom HTML webcomponent.
|
|
*/
|
|
Component3.includes("-")
|
|
) {
|
|
return false;
|
|
} else if (
|
|
/**
|
|
* If it's in our list of lowercase SVG tags, it's an SVG component
|
|
*/
|
|
lowercaseSVGElements.indexOf(Component3) > -1 || /**
|
|
* If it contains a capital letter, it's an SVG component
|
|
*/
|
|
/[A-Z]/u.test(Component3)
|
|
) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs
|
|
var import_react24 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs
|
|
function getValueState(visualElement) {
|
|
const state2 = [{}, {}];
|
|
visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
|
|
state2[0][key] = value.get();
|
|
state2[1][key] = value.getVelocity();
|
|
});
|
|
return state2;
|
|
}
|
|
function resolveVariantFromProps(props, definition, custom, visualElement) {
|
|
if (typeof definition === "function") {
|
|
const [current, velocity] = getValueState(visualElement);
|
|
definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
|
|
}
|
|
if (typeof definition === "string") {
|
|
definition = props.variants && props.variants[definition];
|
|
}
|
|
if (typeof definition === "function") {
|
|
const [current, velocity] = getValueState(visualElement);
|
|
definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
|
|
}
|
|
return definition;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs
|
|
var isKeyframesTarget = (v) => {
|
|
return Array.isArray(v);
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/resolve-value.mjs
|
|
var isCustomValue = (v) => {
|
|
return Boolean(v && typeof v === "object" && v.mix && v.toValue);
|
|
};
|
|
var resolveFinalValueInKeyframes = (v) => {
|
|
return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs
|
|
var isMotionValue = (value) => Boolean(value && value.getVelocity);
|
|
|
|
// node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.mjs
|
|
function resolveMotionValue(value) {
|
|
const unwrappedValue = isMotionValue(value) ? value.get() : value;
|
|
return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs
|
|
function makeState({ scrapeMotionValuesFromProps: scrapeMotionValuesFromProps3, createRenderState, onUpdate }, props, context, presenceContext) {
|
|
const state2 = {
|
|
latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps3),
|
|
renderState: createRenderState()
|
|
};
|
|
if (onUpdate) {
|
|
state2.onMount = (instance) => onUpdate({ props, current: instance, ...state2 });
|
|
state2.onUpdate = (visualElement) => onUpdate(visualElement);
|
|
}
|
|
return state2;
|
|
}
|
|
var makeUseVisualState = (config) => (props, isStatic) => {
|
|
const context = (0, import_react24.useContext)(MotionContext);
|
|
const presenceContext = (0, import_react24.useContext)(PresenceContext);
|
|
const make = () => makeState(config, props, context, presenceContext);
|
|
return isStatic ? make() : useConstant(make);
|
|
};
|
|
function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
|
|
const values = {};
|
|
const motionValues = scrapeMotionValues(props, {});
|
|
for (const key in motionValues) {
|
|
values[key] = resolveMotionValue(motionValues[key]);
|
|
}
|
|
let { initial, animate: animate2 } = props;
|
|
const isControllingVariants$1 = isControllingVariants(props);
|
|
const isVariantNode$1 = isVariantNode(props);
|
|
if (context && isVariantNode$1 && !isControllingVariants$1 && props.inherit !== false) {
|
|
if (initial === void 0)
|
|
initial = context.initial;
|
|
if (animate2 === void 0)
|
|
animate2 = context.animate;
|
|
}
|
|
let isInitialAnimationBlocked = presenceContext ? presenceContext.initial === false : false;
|
|
isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
|
|
const variantToSet = isInitialAnimationBlocked ? animate2 : initial;
|
|
if (variantToSet && typeof variantToSet !== "boolean" && !isAnimationControls(variantToSet)) {
|
|
const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
|
|
for (let i = 0; i < list.length; i++) {
|
|
const resolved = resolveVariantFromProps(props, list[i]);
|
|
if (resolved) {
|
|
const { transitionEnd, transition, ...target } = resolved;
|
|
for (const key in target) {
|
|
let valueTarget = target[key];
|
|
if (Array.isArray(valueTarget)) {
|
|
const index = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
|
|
valueTarget = valueTarget[index];
|
|
}
|
|
if (valueTarget !== null) {
|
|
values[key] = valueTarget;
|
|
}
|
|
}
|
|
for (const key in transitionEnd) {
|
|
values[key] = transitionEnd[key];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return values;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/utils/keys-transform.mjs
|
|
var transformPropOrder = [
|
|
"transformPerspective",
|
|
"x",
|
|
"y",
|
|
"z",
|
|
"translateX",
|
|
"translateY",
|
|
"translateZ",
|
|
"scale",
|
|
"scaleX",
|
|
"scaleY",
|
|
"rotate",
|
|
"rotateX",
|
|
"rotateY",
|
|
"rotateZ",
|
|
"skew",
|
|
"skewX",
|
|
"skewY"
|
|
];
|
|
var transformProps = new Set(transformPropOrder);
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs
|
|
var checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
|
|
var isCSSVariableName = checkStringStartsWith("--");
|
|
var startsAsVariableToken = checkStringStartsWith("var(--");
|
|
var isCSSVariableToken = (value) => {
|
|
const startsWithToken = startsAsVariableToken(value);
|
|
if (!startsWithToken)
|
|
return false;
|
|
return singleCssVariableRegex.test(value.split("/*")[0].trim());
|
|
};
|
|
var singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs
|
|
var getValueAsType = (value, type) => {
|
|
return type && typeof value === "number" ? type.transform(value) : value;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/clamp.mjs
|
|
var clamp = (min, max, v) => {
|
|
if (v > max)
|
|
return max;
|
|
if (v < min)
|
|
return min;
|
|
return v;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/numbers/index.mjs
|
|
var number = {
|
|
test: (v) => typeof v === "number",
|
|
parse: parseFloat,
|
|
transform: (v) => v
|
|
};
|
|
var alpha = {
|
|
...number,
|
|
transform: (v) => clamp(0, 1, v)
|
|
};
|
|
var scale = {
|
|
...number,
|
|
default: 1
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/numbers/units.mjs
|
|
var createUnitType = (unit) => ({
|
|
test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
|
|
parse: parseFloat,
|
|
transform: (v) => `${v}${unit}`
|
|
});
|
|
var degrees = createUnitType("deg");
|
|
var percent = createUnitType("%");
|
|
var px = createUnitType("px");
|
|
var vh = createUnitType("vh");
|
|
var vw = createUnitType("vw");
|
|
var progressPercentage = {
|
|
...percent,
|
|
parse: (v) => percent.parse(v) / 100,
|
|
transform: (v) => percent.transform(v * 100)
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/number-browser.mjs
|
|
var browserNumberValueTypes = {
|
|
// Border props
|
|
borderWidth: px,
|
|
borderTopWidth: px,
|
|
borderRightWidth: px,
|
|
borderBottomWidth: px,
|
|
borderLeftWidth: px,
|
|
borderRadius: px,
|
|
radius: px,
|
|
borderTopLeftRadius: px,
|
|
borderTopRightRadius: px,
|
|
borderBottomRightRadius: px,
|
|
borderBottomLeftRadius: px,
|
|
// Positioning props
|
|
width: px,
|
|
maxWidth: px,
|
|
height: px,
|
|
maxHeight: px,
|
|
top: px,
|
|
right: px,
|
|
bottom: px,
|
|
left: px,
|
|
// Spacing props
|
|
padding: px,
|
|
paddingTop: px,
|
|
paddingRight: px,
|
|
paddingBottom: px,
|
|
paddingLeft: px,
|
|
margin: px,
|
|
marginTop: px,
|
|
marginRight: px,
|
|
marginBottom: px,
|
|
marginLeft: px,
|
|
// Misc
|
|
backgroundPositionX: px,
|
|
backgroundPositionY: px
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/transform.mjs
|
|
var transformValueTypes = {
|
|
rotate: degrees,
|
|
rotateX: degrees,
|
|
rotateY: degrees,
|
|
rotateZ: degrees,
|
|
scale,
|
|
scaleX: scale,
|
|
scaleY: scale,
|
|
scaleZ: scale,
|
|
skew: degrees,
|
|
skewX: degrees,
|
|
skewY: degrees,
|
|
distance: px,
|
|
translateX: px,
|
|
translateY: px,
|
|
translateZ: px,
|
|
x: px,
|
|
y: px,
|
|
z: px,
|
|
perspective: px,
|
|
transformPerspective: px,
|
|
opacity: alpha,
|
|
originX: progressPercentage,
|
|
originY: progressPercentage,
|
|
originZ: px
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs
|
|
var int = {
|
|
...number,
|
|
transform: Math.round
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs
|
|
var numberValueTypes = {
|
|
...browserNumberValueTypes,
|
|
...transformValueTypes,
|
|
zIndex: int,
|
|
size: px,
|
|
// SVG
|
|
fillOpacity: alpha,
|
|
strokeOpacity: alpha,
|
|
numOctaves: int
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs
|
|
var translateAlias = {
|
|
x: "translateX",
|
|
y: "translateY",
|
|
z: "translateZ",
|
|
transformPerspective: "perspective"
|
|
};
|
|
var numTransforms = transformPropOrder.length;
|
|
function buildTransform(latestValues, transform2, transformTemplate) {
|
|
let transformString = "";
|
|
let transformIsDefault = true;
|
|
for (let i = 0; i < numTransforms; i++) {
|
|
const key = transformPropOrder[i];
|
|
const value = latestValues[key];
|
|
if (value === void 0)
|
|
continue;
|
|
let valueIsDefault = true;
|
|
if (typeof value === "number") {
|
|
valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
|
|
} else {
|
|
valueIsDefault = parseFloat(value) === 0;
|
|
}
|
|
if (!valueIsDefault || transformTemplate) {
|
|
const valueAsType = getValueAsType(value, numberValueTypes[key]);
|
|
if (!valueIsDefault) {
|
|
transformIsDefault = false;
|
|
const transformName = translateAlias[key] || key;
|
|
transformString += `${transformName}(${valueAsType}) `;
|
|
}
|
|
if (transformTemplate) {
|
|
transform2[key] = valueAsType;
|
|
}
|
|
}
|
|
}
|
|
transformString = transformString.trim();
|
|
if (transformTemplate) {
|
|
transformString = transformTemplate(transform2, transformIsDefault ? "" : transformString);
|
|
} else if (transformIsDefault) {
|
|
transformString = "none";
|
|
}
|
|
return transformString;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs
|
|
function buildHTMLStyles(state2, latestValues, transformTemplate) {
|
|
const { style, vars, transformOrigin } = state2;
|
|
let hasTransform2 = false;
|
|
let hasTransformOrigin = false;
|
|
for (const key in latestValues) {
|
|
const value = latestValues[key];
|
|
if (transformProps.has(key)) {
|
|
hasTransform2 = true;
|
|
continue;
|
|
} else if (isCSSVariableName(key)) {
|
|
vars[key] = value;
|
|
continue;
|
|
} else {
|
|
const valueAsType = getValueAsType(value, numberValueTypes[key]);
|
|
if (key.startsWith("origin")) {
|
|
hasTransformOrigin = true;
|
|
transformOrigin[key] = valueAsType;
|
|
} else {
|
|
style[key] = valueAsType;
|
|
}
|
|
}
|
|
}
|
|
if (!latestValues.transform) {
|
|
if (hasTransform2 || transformTemplate) {
|
|
style.transform = buildTransform(latestValues, state2.transform, transformTemplate);
|
|
} else if (style.transform) {
|
|
style.transform = "none";
|
|
}
|
|
}
|
|
if (hasTransformOrigin) {
|
|
const { originX = "50%", originY = "50%", originZ = 0 } = transformOrigin;
|
|
style.transformOrigin = `${originX} ${originY} ${originZ}`;
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/utils/path.mjs
|
|
var dashKeys = {
|
|
offset: "stroke-dashoffset",
|
|
array: "stroke-dasharray"
|
|
};
|
|
var camelKeys = {
|
|
offset: "strokeDashoffset",
|
|
array: "strokeDasharray"
|
|
};
|
|
function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
|
|
attrs.pathLength = 1;
|
|
const keys2 = useDashCase ? dashKeys : camelKeys;
|
|
attrs[keys2.offset] = px.transform(-offset);
|
|
const pathLength = px.transform(length);
|
|
const pathSpacing = px.transform(spacing);
|
|
attrs[keys2.array] = `${pathLength} ${pathSpacing}`;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.mjs
|
|
function calcOrigin(origin, offset, size) {
|
|
return typeof origin === "string" ? origin : px.transform(offset + size * origin);
|
|
}
|
|
function calcSVGTransformOrigin(dimensions, originX, originY) {
|
|
const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
|
|
const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
|
|
return `${pxOriginX} ${pxOriginY}`;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs
|
|
function buildSVGAttrs(state2, {
|
|
attrX,
|
|
attrY,
|
|
attrScale,
|
|
originX,
|
|
originY,
|
|
pathLength,
|
|
pathSpacing = 1,
|
|
pathOffset = 0,
|
|
// This is object creation, which we try to avoid per-frame.
|
|
...latest
|
|
}, isSVGTag2, transformTemplate) {
|
|
buildHTMLStyles(state2, latest, transformTemplate);
|
|
if (isSVGTag2) {
|
|
if (state2.style.viewBox) {
|
|
state2.attrs.viewBox = state2.style.viewBox;
|
|
}
|
|
return;
|
|
}
|
|
state2.attrs = state2.style;
|
|
state2.style = {};
|
|
const { attrs, style, dimensions } = state2;
|
|
if (attrs.transform) {
|
|
if (dimensions)
|
|
style.transform = attrs.transform;
|
|
delete attrs.transform;
|
|
}
|
|
if (dimensions && (originX !== void 0 || originY !== void 0 || style.transform)) {
|
|
style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== void 0 ? originX : 0.5, originY !== void 0 ? originY : 0.5);
|
|
}
|
|
if (attrX !== void 0)
|
|
attrs.x = attrX;
|
|
if (attrY !== void 0)
|
|
attrs.y = attrY;
|
|
if (attrScale !== void 0)
|
|
attrs.scale = attrScale;
|
|
if (pathLength !== void 0) {
|
|
buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs
|
|
var createHtmlRenderState = () => ({
|
|
style: {},
|
|
transform: {},
|
|
transformOrigin: {},
|
|
vars: {}
|
|
});
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs
|
|
var createSvgRenderState = () => ({
|
|
...createHtmlRenderState(),
|
|
attrs: {}
|
|
});
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs
|
|
var isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/utils/render.mjs
|
|
function renderHTML(element, { style, vars }, styleProp, projection) {
|
|
Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
|
|
for (const key in vars) {
|
|
element.style.setProperty(key, vars[key]);
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs
|
|
var camelCaseAttributes = /* @__PURE__ */ new Set([
|
|
"baseFrequency",
|
|
"diffuseConstant",
|
|
"kernelMatrix",
|
|
"kernelUnitLength",
|
|
"keySplines",
|
|
"keyTimes",
|
|
"limitingConeAngle",
|
|
"markerHeight",
|
|
"markerWidth",
|
|
"numOctaves",
|
|
"targetX",
|
|
"targetY",
|
|
"surfaceScale",
|
|
"specularConstant",
|
|
"specularExponent",
|
|
"stdDeviation",
|
|
"tableValues",
|
|
"viewBox",
|
|
"gradientTransform",
|
|
"pathLength",
|
|
"startOffset",
|
|
"textLength",
|
|
"lengthAdjust"
|
|
]);
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/utils/render.mjs
|
|
function renderSVG(element, renderState, _styleProp, projection) {
|
|
renderHTML(element, renderState, void 0, projection);
|
|
for (const key in renderState.attrs) {
|
|
element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs
|
|
var scaleCorrectors = {};
|
|
function addScaleCorrector(correctors) {
|
|
Object.assign(scaleCorrectors, correctors);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs
|
|
function isForcedMotionValue(key, { layout: layout2, layoutId }) {
|
|
return transformProps.has(key) || key.startsWith("origin") || (layout2 || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs
|
|
function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
|
|
var _a;
|
|
const { style } = props;
|
|
const newValues = {};
|
|
for (const key in style) {
|
|
if (isMotionValue(style[key]) || prevProps.style && isMotionValue(prevProps.style[key]) || isForcedMotionValue(key, props) || ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== void 0) {
|
|
newValues[key] = style[key];
|
|
}
|
|
}
|
|
return newValues;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs
|
|
function scrapeMotionValuesFromProps2(props, prevProps, visualElement) {
|
|
const newValues = scrapeMotionValuesFromProps(props, prevProps, visualElement);
|
|
for (const key in props) {
|
|
if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) {
|
|
const targetKey = transformPropOrder.indexOf(key) !== -1 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1) : key;
|
|
newValues[targetKey] = props[key];
|
|
}
|
|
}
|
|
return newValues;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/config-motion.mjs
|
|
function updateSVGDimensions(instance, renderState) {
|
|
try {
|
|
renderState.dimensions = typeof instance.getBBox === "function" ? instance.getBBox() : instance.getBoundingClientRect();
|
|
} catch (e) {
|
|
renderState.dimensions = {
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0
|
|
};
|
|
}
|
|
}
|
|
var layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
|
|
var svgMotionConfig = {
|
|
useVisualState: makeUseVisualState({
|
|
scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2,
|
|
createRenderState: createSvgRenderState,
|
|
onUpdate: ({ props, prevProps, current, renderState, latestValues }) => {
|
|
if (!current)
|
|
return;
|
|
let hasTransform2 = !!props.drag;
|
|
if (!hasTransform2) {
|
|
for (const key in latestValues) {
|
|
if (transformProps.has(key)) {
|
|
hasTransform2 = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (!hasTransform2)
|
|
return;
|
|
let needsMeasure = !prevProps;
|
|
if (prevProps) {
|
|
for (let i = 0; i < layoutProps.length; i++) {
|
|
const key = layoutProps[i];
|
|
if (props[key] !== prevProps[key]) {
|
|
needsMeasure = true;
|
|
}
|
|
}
|
|
}
|
|
if (!needsMeasure)
|
|
return;
|
|
frame.read(() => {
|
|
updateSVGDimensions(current, renderState);
|
|
frame.render(() => {
|
|
buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
|
|
renderSVG(current, renderState);
|
|
});
|
|
});
|
|
}
|
|
})
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/config-motion.mjs
|
|
var htmlMotionConfig = {
|
|
useVisualState: makeUseVisualState({
|
|
scrapeMotionValuesFromProps,
|
|
createRenderState: createHtmlRenderState
|
|
})
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/use-render.mjs
|
|
var import_react27 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/use-props.mjs
|
|
var import_react25 = __toESM(require_react(), 1);
|
|
function copyRawValuesOnly(target, source, props) {
|
|
for (const key in source) {
|
|
if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
|
|
target[key] = source[key];
|
|
}
|
|
}
|
|
}
|
|
function useInitialMotionValues({ transformTemplate }, visualState) {
|
|
return (0, import_react25.useMemo)(() => {
|
|
const state2 = createHtmlRenderState();
|
|
buildHTMLStyles(state2, visualState, transformTemplate);
|
|
return Object.assign({}, state2.vars, state2.style);
|
|
}, [visualState]);
|
|
}
|
|
function useStyle(props, visualState) {
|
|
const styleProp = props.style || {};
|
|
const style = {};
|
|
copyRawValuesOnly(style, styleProp, props);
|
|
Object.assign(style, useInitialMotionValues(props, visualState));
|
|
return style;
|
|
}
|
|
function useHTMLProps(props, visualState) {
|
|
const htmlProps = {};
|
|
const style = useStyle(props, visualState);
|
|
if (props.drag && props.dragListener !== false) {
|
|
htmlProps.draggable = false;
|
|
style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout = "none";
|
|
style.touchAction = props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`;
|
|
}
|
|
if (props.tabIndex === void 0 && (props.onTap || props.onTapStart || props.whileTap)) {
|
|
htmlProps.tabIndex = 0;
|
|
}
|
|
htmlProps.style = style;
|
|
return htmlProps;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/use-props.mjs
|
|
var import_react26 = __toESM(require_react(), 1);
|
|
function useSVGProps(props, visualState, _isStatic, Component3) {
|
|
const visualProps = (0, import_react26.useMemo)(() => {
|
|
const state2 = createSvgRenderState();
|
|
buildSVGAttrs(state2, visualState, isSVGTag(Component3), props.transformTemplate);
|
|
return {
|
|
...state2.attrs,
|
|
style: { ...state2.style }
|
|
};
|
|
}, [visualState]);
|
|
if (props.style) {
|
|
const rawStyles = {};
|
|
copyRawValuesOnly(rawStyles, props.style, props);
|
|
visualProps.style = { ...rawStyles, ...visualProps.style };
|
|
}
|
|
return visualProps;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/use-render.mjs
|
|
function createUseRender(forwardMotionProps = false) {
|
|
const useRender = (Component3, props, ref, { latestValues }, isStatic) => {
|
|
const useVisualProps = isSVGComponent(Component3) ? useSVGProps : useHTMLProps;
|
|
const visualProps = useVisualProps(props, latestValues, isStatic, Component3);
|
|
const filteredProps = filterProps(props, typeof Component3 === "string", forwardMotionProps);
|
|
const elementProps = Component3 !== import_react27.Fragment ? { ...filteredProps, ...visualProps, ref } : {};
|
|
const { children } = props;
|
|
const renderedChildren = (0, import_react27.useMemo)(() => isMotionValue(children) ? children.get() : children, [children]);
|
|
return (0, import_react27.createElement)(Component3, {
|
|
...elementProps,
|
|
children: renderedChildren
|
|
});
|
|
};
|
|
return useRender;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/components/create-factory.mjs
|
|
function createMotionComponentFactory(preloadedFeatures, createVisualElement) {
|
|
return function createMotionComponent2(Component3, { forwardMotionProps } = { forwardMotionProps: false }) {
|
|
const baseConfig = isSVGComponent(Component3) ? svgMotionConfig : htmlMotionConfig;
|
|
const config = {
|
|
...baseConfig,
|
|
preloadedFeatures,
|
|
useRender: createUseRender(forwardMotionProps),
|
|
createVisualElement,
|
|
Component: Component3
|
|
};
|
|
return createRendererMotionComponent(config);
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/components/m/create.mjs
|
|
var createMinimalMotionComponent = createMotionComponentFactory();
|
|
|
|
// node_modules/framer-motion/dist/es/render/components/m/proxy.mjs
|
|
var m = createDOMMotionComponentProxy(createMinimalMotionComponent);
|
|
|
|
// node_modules/framer-motion/dist/es/utils/shallow-compare.mjs
|
|
function shallowCompare(next, prev) {
|
|
if (!Array.isArray(prev))
|
|
return false;
|
|
const prevLength = prev.length;
|
|
if (prevLength !== next.length)
|
|
return false;
|
|
for (let i = 0; i < prevLength; i++) {
|
|
if (prev[i] !== next[i])
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs
|
|
function resolveVariant(visualElement, definition, custom) {
|
|
const props = visualElement.getProps();
|
|
return resolveVariantFromProps(props, definition, custom !== void 0 ? custom : props.custom, visualElement);
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/utils/supports/scroll-timeline.mjs
|
|
var supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
|
|
|
|
// node_modules/motion-dom/dist/es/animation/controls/BaseGroup.mjs
|
|
var BaseGroupPlaybackControls = class {
|
|
constructor(animations2) {
|
|
this.stop = () => this.runAll("stop");
|
|
this.animations = animations2.filter(Boolean);
|
|
}
|
|
get finished() {
|
|
return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
|
|
}
|
|
/**
|
|
* TODO: Filter out cancelled or stopped animations before returning
|
|
*/
|
|
getAll(propName) {
|
|
return this.animations[0][propName];
|
|
}
|
|
setAll(propName, newValue) {
|
|
for (let i = 0; i < this.animations.length; i++) {
|
|
this.animations[i][propName] = newValue;
|
|
}
|
|
}
|
|
attachTimeline(timeline, fallback) {
|
|
const subscriptions = this.animations.map((animation) => {
|
|
if (supportsScrollTimeline() && animation.attachTimeline) {
|
|
return animation.attachTimeline(timeline);
|
|
} else if (typeof fallback === "function") {
|
|
return fallback(animation);
|
|
}
|
|
});
|
|
return () => {
|
|
subscriptions.forEach((cancel, i) => {
|
|
cancel && cancel();
|
|
this.animations[i].stop();
|
|
});
|
|
};
|
|
}
|
|
get time() {
|
|
return this.getAll("time");
|
|
}
|
|
set time(time2) {
|
|
this.setAll("time", time2);
|
|
}
|
|
get speed() {
|
|
return this.getAll("speed");
|
|
}
|
|
set speed(speed) {
|
|
this.setAll("speed", speed);
|
|
}
|
|
get startTime() {
|
|
return this.getAll("startTime");
|
|
}
|
|
get duration() {
|
|
let max = 0;
|
|
for (let i = 0; i < this.animations.length; i++) {
|
|
max = Math.max(max, this.animations[i].duration);
|
|
}
|
|
return max;
|
|
}
|
|
runAll(methodName) {
|
|
this.animations.forEach((controls) => controls[methodName]());
|
|
}
|
|
flatten() {
|
|
this.runAll("flatten");
|
|
}
|
|
play() {
|
|
this.runAll("play");
|
|
}
|
|
pause() {
|
|
this.runAll("pause");
|
|
}
|
|
cancel() {
|
|
this.runAll("cancel");
|
|
}
|
|
complete() {
|
|
this.runAll("complete");
|
|
}
|
|
};
|
|
|
|
// node_modules/motion-dom/dist/es/animation/controls/Group.mjs
|
|
var GroupPlaybackControls = class extends BaseGroupPlaybackControls {
|
|
then(onResolve, onReject) {
|
|
return Promise.all(this.animations).then(onResolve).catch(onReject);
|
|
}
|
|
};
|
|
|
|
// node_modules/motion-dom/dist/es/animation/utils/get-value-transition.mjs
|
|
function getValueTransition(transition, key) {
|
|
return transition ? transition[key] || transition["default"] || transition : void 0;
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/animation/generators/utils/calc-duration.mjs
|
|
var maxGeneratorDuration = 2e4;
|
|
function calcGeneratorDuration(generator) {
|
|
let duration = 0;
|
|
const timeStep = 50;
|
|
let state2 = generator.next(duration);
|
|
while (!state2.done && duration < maxGeneratorDuration) {
|
|
duration += timeStep;
|
|
state2 = generator.next(duration);
|
|
}
|
|
return duration >= maxGeneratorDuration ? Infinity : duration;
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs
|
|
function createGeneratorEasing(options, scale2 = 100, createGenerator) {
|
|
const generator = createGenerator({ ...options, keyframes: [0, scale2] });
|
|
const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
|
|
return {
|
|
type: "keyframes",
|
|
ease: (progress2) => {
|
|
return generator.next(duration * progress2).value / scale2;
|
|
},
|
|
duration: millisecondsToSeconds(duration)
|
|
};
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/animation/generators/utils/is-generator.mjs
|
|
function isGenerator(type) {
|
|
return typeof type === "function";
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/animation/waapi/utils/attach-timeline.mjs
|
|
function attachTimeline(animation, timeline) {
|
|
animation.timeline = timeline;
|
|
animation.onfinish = null;
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/animation/waapi/NativeAnimationControls.mjs
|
|
var NativeAnimationControls = class {
|
|
constructor(animation) {
|
|
this.animation = animation;
|
|
}
|
|
get duration() {
|
|
var _a, _b, _c;
|
|
const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) || ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) || 300;
|
|
return millisecondsToSeconds(Number(durationInMs));
|
|
}
|
|
get time() {
|
|
var _a;
|
|
if (this.animation) {
|
|
return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
|
|
}
|
|
return 0;
|
|
}
|
|
set time(newTime) {
|
|
if (this.animation) {
|
|
this.animation.currentTime = secondsToMilliseconds(newTime);
|
|
}
|
|
}
|
|
get speed() {
|
|
return this.animation ? this.animation.playbackRate : 1;
|
|
}
|
|
set speed(newSpeed) {
|
|
if (this.animation) {
|
|
this.animation.playbackRate = newSpeed;
|
|
}
|
|
}
|
|
get state() {
|
|
return this.animation ? this.animation.playState : "finished";
|
|
}
|
|
get startTime() {
|
|
return this.animation ? this.animation.startTime : null;
|
|
}
|
|
get finished() {
|
|
return this.animation ? this.animation.finished : Promise.resolve();
|
|
}
|
|
play() {
|
|
this.animation && this.animation.play();
|
|
}
|
|
pause() {
|
|
this.animation && this.animation.pause();
|
|
}
|
|
stop() {
|
|
if (!this.animation || this.state === "idle" || this.state === "finished") {
|
|
return;
|
|
}
|
|
if (this.animation.commitStyles) {
|
|
this.animation.commitStyles();
|
|
}
|
|
this.cancel();
|
|
}
|
|
flatten() {
|
|
var _a;
|
|
if (!this.animation)
|
|
return;
|
|
(_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
|
|
}
|
|
attachTimeline(timeline) {
|
|
if (this.animation)
|
|
attachTimeline(this.animation, timeline);
|
|
return noop;
|
|
}
|
|
complete() {
|
|
this.animation && this.animation.finish();
|
|
}
|
|
cancel() {
|
|
try {
|
|
this.animation && this.animation.cancel();
|
|
} catch (e) {
|
|
}
|
|
}
|
|
};
|
|
|
|
// node_modules/motion-dom/dist/es/utils/is-bezier-definition.mjs
|
|
var isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
|
|
|
|
// node_modules/motion-dom/dist/es/utils/supports/flags.mjs
|
|
var supportsFlags = {
|
|
linearEasing: void 0
|
|
};
|
|
|
|
// node_modules/motion-dom/dist/es/utils/supports/memo.mjs
|
|
function memoSupports(callback, supportsFlag) {
|
|
const memoized = memo(callback);
|
|
return () => {
|
|
var _a;
|
|
return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized();
|
|
};
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/utils/supports/linear-easing.mjs
|
|
var supportsLinearEasing = memoSupports(() => {
|
|
try {
|
|
document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}, "linearEasing");
|
|
|
|
// node_modules/motion-dom/dist/es/animation/waapi/utils/linear.mjs
|
|
var generateLinearEasing = (easing, duration, resolution = 10) => {
|
|
let points = "";
|
|
const numPoints = Math.max(Math.round(duration / resolution), 2);
|
|
for (let i = 0; i < numPoints; i++) {
|
|
points += easing(progress(0, numPoints - 1, i)) + ", ";
|
|
}
|
|
return `linear(${points.substring(0, points.length - 2)})`;
|
|
};
|
|
|
|
// node_modules/motion-dom/dist/es/animation/waapi/utils/easing.mjs
|
|
function isWaapiSupportedEasing(easing) {
|
|
return Boolean(typeof easing === "function" && supportsLinearEasing() || !easing || typeof easing === "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
|
|
}
|
|
var cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
|
|
var supportedWaapiEasing = {
|
|
linear: "linear",
|
|
ease: "ease",
|
|
easeIn: "ease-in",
|
|
easeOut: "ease-out",
|
|
easeInOut: "ease-in-out",
|
|
circIn: cubicBezierAsString([0, 0.65, 0.55, 1]),
|
|
circOut: cubicBezierAsString([0.55, 0, 1, 0.45]),
|
|
backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
|
|
backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99])
|
|
};
|
|
function mapEasingToNativeEasing(easing, duration) {
|
|
if (!easing) {
|
|
return void 0;
|
|
} else if (typeof easing === "function" && supportsLinearEasing()) {
|
|
return generateLinearEasing(easing, duration);
|
|
} else if (isBezierDefinition(easing)) {
|
|
return cubicBezierAsString(easing);
|
|
} else if (Array.isArray(easing)) {
|
|
return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || supportedWaapiEasing.easeOut);
|
|
} else {
|
|
return supportedWaapiEasing[easing];
|
|
}
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/drag/state/is-active.mjs
|
|
var isDragging = {
|
|
x: false,
|
|
y: false
|
|
};
|
|
function isDragActive() {
|
|
return isDragging.x || isDragging.y;
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/utils/resolve-elements.mjs
|
|
function resolveElements(elementOrSelector, scope, selectorCache) {
|
|
var _a;
|
|
if (elementOrSelector instanceof Element) {
|
|
return [elementOrSelector];
|
|
} else if (typeof elementOrSelector === "string") {
|
|
let root = document;
|
|
if (scope) {
|
|
root = scope.current;
|
|
}
|
|
const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
|
|
return elements ? Array.from(elements) : [];
|
|
}
|
|
return Array.from(elementOrSelector);
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/utils/setup.mjs
|
|
function setupGesture(elementOrSelector, options) {
|
|
const elements = resolveElements(elementOrSelector);
|
|
const gestureAbortController = new AbortController();
|
|
const eventOptions = {
|
|
passive: true,
|
|
...options,
|
|
signal: gestureAbortController.signal
|
|
};
|
|
const cancel = () => gestureAbortController.abort();
|
|
return [elements, eventOptions, cancel];
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/hover.mjs
|
|
function filterEvents(callback) {
|
|
return (event) => {
|
|
if (event.pointerType === "touch" || isDragActive())
|
|
return;
|
|
callback(event);
|
|
};
|
|
}
|
|
function hover(elementOrSelector, onHoverStart, options = {}) {
|
|
const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
|
|
const onPointerEnter = filterEvents((enterEvent) => {
|
|
const { target } = enterEvent;
|
|
const onHoverEnd = onHoverStart(enterEvent);
|
|
if (typeof onHoverEnd !== "function" || !target)
|
|
return;
|
|
const onPointerLeave = filterEvents((leaveEvent) => {
|
|
onHoverEnd(leaveEvent);
|
|
target.removeEventListener("pointerleave", onPointerLeave);
|
|
});
|
|
target.addEventListener("pointerleave", onPointerLeave, eventOptions);
|
|
});
|
|
elements.forEach((element) => {
|
|
element.addEventListener("pointerenter", onPointerEnter, eventOptions);
|
|
});
|
|
return cancel;
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/utils/is-node-or-child.mjs
|
|
var isNodeOrChild = (parent, child) => {
|
|
if (!child) {
|
|
return false;
|
|
} else if (parent === child) {
|
|
return true;
|
|
} else {
|
|
return isNodeOrChild(parent, child.parentElement);
|
|
}
|
|
};
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs
|
|
var isPrimaryPointer = (event) => {
|
|
if (event.pointerType === "mouse") {
|
|
return typeof event.button !== "number" || event.button <= 0;
|
|
} else {
|
|
return event.isPrimary !== false;
|
|
}
|
|
};
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/press/utils/is-keyboard-accessible.mjs
|
|
var focusableElements = /* @__PURE__ */ new Set([
|
|
"BUTTON",
|
|
"INPUT",
|
|
"SELECT",
|
|
"TEXTAREA",
|
|
"A"
|
|
]);
|
|
function isElementKeyboardAccessible(element) {
|
|
return focusableElements.has(element.tagName) || element.tabIndex !== -1;
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/press/utils/state.mjs
|
|
var isPressing = /* @__PURE__ */ new WeakSet();
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/press/utils/keyboard.mjs
|
|
function filterEvents2(callback) {
|
|
return (event) => {
|
|
if (event.key !== "Enter")
|
|
return;
|
|
callback(event);
|
|
};
|
|
}
|
|
function firePointerEvent(target, type) {
|
|
target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
|
|
}
|
|
var enableKeyboardPress = (focusEvent, eventOptions) => {
|
|
const element = focusEvent.currentTarget;
|
|
if (!element)
|
|
return;
|
|
const handleKeydown = filterEvents2(() => {
|
|
if (isPressing.has(element))
|
|
return;
|
|
firePointerEvent(element, "down");
|
|
const handleKeyup = filterEvents2(() => {
|
|
firePointerEvent(element, "up");
|
|
});
|
|
const handleBlur = () => firePointerEvent(element, "cancel");
|
|
element.addEventListener("keyup", handleKeyup, eventOptions);
|
|
element.addEventListener("blur", handleBlur, eventOptions);
|
|
});
|
|
element.addEventListener("keydown", handleKeydown, eventOptions);
|
|
element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
|
|
};
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/press/index.mjs
|
|
function isValidPressEvent(event) {
|
|
return isPrimaryPointer(event) && !isDragActive();
|
|
}
|
|
function press(elementOrSelector, onPressStart, options = {}) {
|
|
const [elements, eventOptions, cancelEvents] = setupGesture(elementOrSelector, options);
|
|
const startPress = (startEvent) => {
|
|
const element = startEvent.currentTarget;
|
|
if (!isValidPressEvent(startEvent) || isPressing.has(element))
|
|
return;
|
|
isPressing.add(element);
|
|
const onPressEnd = onPressStart(startEvent);
|
|
const onPointerEnd = (endEvent, success) => {
|
|
window.removeEventListener("pointerup", onPointerUp);
|
|
window.removeEventListener("pointercancel", onPointerCancel);
|
|
if (!isValidPressEvent(endEvent) || !isPressing.has(element)) {
|
|
return;
|
|
}
|
|
isPressing.delete(element);
|
|
if (typeof onPressEnd === "function") {
|
|
onPressEnd(endEvent, { success });
|
|
}
|
|
};
|
|
const onPointerUp = (upEvent) => {
|
|
onPointerEnd(upEvent, options.useGlobalTarget || isNodeOrChild(element, upEvent.target));
|
|
};
|
|
const onPointerCancel = (cancelEvent) => {
|
|
onPointerEnd(cancelEvent, false);
|
|
};
|
|
window.addEventListener("pointerup", onPointerUp, eventOptions);
|
|
window.addEventListener("pointercancel", onPointerCancel, eventOptions);
|
|
};
|
|
elements.forEach((element) => {
|
|
if (!isElementKeyboardAccessible(element) && element.getAttribute("tabindex") === null) {
|
|
element.tabIndex = 0;
|
|
}
|
|
const target = options.useGlobalTarget ? window : element;
|
|
target.addEventListener("pointerdown", startPress, eventOptions);
|
|
element.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions), eventOptions);
|
|
});
|
|
return cancelEvents;
|
|
}
|
|
|
|
// node_modules/motion-dom/dist/es/gestures/drag/state/set-active.mjs
|
|
function setDragLock(axis) {
|
|
if (axis === "x" || axis === "y") {
|
|
if (isDragging[axis]) {
|
|
return null;
|
|
} else {
|
|
isDragging[axis] = true;
|
|
return () => {
|
|
isDragging[axis] = false;
|
|
};
|
|
}
|
|
} else {
|
|
if (isDragging.x || isDragging.y) {
|
|
return null;
|
|
} else {
|
|
isDragging.x = isDragging.y = true;
|
|
return () => {
|
|
isDragging.x = isDragging.y = false;
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/utils/keys-position.mjs
|
|
var positionalKeys = /* @__PURE__ */ new Set([
|
|
"width",
|
|
"height",
|
|
"top",
|
|
"left",
|
|
"right",
|
|
"bottom",
|
|
...transformPropOrder
|
|
]);
|
|
|
|
// node_modules/framer-motion/dist/es/frameloop/sync-time.mjs
|
|
var now;
|
|
function clearTime() {
|
|
now = void 0;
|
|
}
|
|
var time = {
|
|
now: () => {
|
|
if (now === void 0) {
|
|
time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now());
|
|
}
|
|
return now;
|
|
},
|
|
set: (newTime) => {
|
|
now = newTime;
|
|
queueMicrotask(clearTime);
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/array.mjs
|
|
function addUniqueItem(arr, item) {
|
|
if (arr.indexOf(item) === -1)
|
|
arr.push(item);
|
|
}
|
|
function removeItem(arr, item) {
|
|
const index = arr.indexOf(item);
|
|
if (index > -1)
|
|
arr.splice(index, 1);
|
|
}
|
|
function moveItem([...arr], fromIndex, toIndex) {
|
|
const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
|
|
if (startIndex >= 0 && startIndex < arr.length) {
|
|
const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
|
|
const [item] = arr.splice(fromIndex, 1);
|
|
arr.splice(endIndex, 0, item);
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/subscription-manager.mjs
|
|
var SubscriptionManager = class {
|
|
constructor() {
|
|
this.subscriptions = [];
|
|
}
|
|
add(handler) {
|
|
addUniqueItem(this.subscriptions, handler);
|
|
return () => removeItem(this.subscriptions, handler);
|
|
}
|
|
notify(a, b, c) {
|
|
const numSubscriptions = this.subscriptions.length;
|
|
if (!numSubscriptions)
|
|
return;
|
|
if (numSubscriptions === 1) {
|
|
this.subscriptions[0](a, b, c);
|
|
} else {
|
|
for (let i = 0; i < numSubscriptions; i++) {
|
|
const handler = this.subscriptions[i];
|
|
handler && handler(a, b, c);
|
|
}
|
|
}
|
|
}
|
|
getSize() {
|
|
return this.subscriptions.length;
|
|
}
|
|
clear() {
|
|
this.subscriptions.length = 0;
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/velocity-per-second.mjs
|
|
function velocityPerSecond(velocity, frameDuration) {
|
|
return frameDuration ? velocity * (1e3 / frameDuration) : 0;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/index.mjs
|
|
var MAX_VELOCITY_DELTA = 30;
|
|
var isFloat = (value) => {
|
|
return !isNaN(parseFloat(value));
|
|
};
|
|
var collectMotionValues = {
|
|
current: void 0
|
|
};
|
|
var MotionValue = class {
|
|
/**
|
|
* @param init - The initiating value
|
|
* @param config - Optional configuration options
|
|
*
|
|
* - `transformer`: A function to transform incoming values with.
|
|
*
|
|
* @internal
|
|
*/
|
|
constructor(init, options = {}) {
|
|
this.version = "11.18.2";
|
|
this.canTrackVelocity = null;
|
|
this.events = {};
|
|
this.updateAndNotify = (v, render = true) => {
|
|
const currentTime = time.now();
|
|
if (this.updatedAt !== currentTime) {
|
|
this.setPrevFrameValue();
|
|
}
|
|
this.prev = this.current;
|
|
this.setCurrent(v);
|
|
if (this.current !== this.prev && this.events.change) {
|
|
this.events.change.notify(this.current);
|
|
}
|
|
if (render && this.events.renderRequest) {
|
|
this.events.renderRequest.notify(this.current);
|
|
}
|
|
};
|
|
this.hasAnimated = false;
|
|
this.setCurrent(init);
|
|
this.owner = options.owner;
|
|
}
|
|
setCurrent(current) {
|
|
this.current = current;
|
|
this.updatedAt = time.now();
|
|
if (this.canTrackVelocity === null && current !== void 0) {
|
|
this.canTrackVelocity = isFloat(this.current);
|
|
}
|
|
}
|
|
setPrevFrameValue(prevFrameValue = this.current) {
|
|
this.prevFrameValue = prevFrameValue;
|
|
this.prevUpdatedAt = this.updatedAt;
|
|
}
|
|
/**
|
|
* Adds a function that will be notified when the `MotionValue` is updated.
|
|
*
|
|
* It returns a function that, when called, will cancel the subscription.
|
|
*
|
|
* When calling `onChange` inside a React component, it should be wrapped with the
|
|
* `useEffect` hook. As it returns an unsubscribe function, this should be returned
|
|
* from the `useEffect` function to ensure you don't add duplicate subscribers..
|
|
*
|
|
* ```jsx
|
|
* export const MyComponent = () => {
|
|
* const x = useMotionValue(0)
|
|
* const y = useMotionValue(0)
|
|
* const opacity = useMotionValue(1)
|
|
*
|
|
* useEffect(() => {
|
|
* function updateOpacity() {
|
|
* const maxXY = Math.max(x.get(), y.get())
|
|
* const newOpacity = transform(maxXY, [0, 100], [1, 0])
|
|
* opacity.set(newOpacity)
|
|
* }
|
|
*
|
|
* const unsubscribeX = x.on("change", updateOpacity)
|
|
* const unsubscribeY = y.on("change", updateOpacity)
|
|
*
|
|
* return () => {
|
|
* unsubscribeX()
|
|
* unsubscribeY()
|
|
* }
|
|
* }, [])
|
|
*
|
|
* return <motion.div style={{ x }} />
|
|
* }
|
|
* ```
|
|
*
|
|
* @param subscriber - A function that receives the latest value.
|
|
* @returns A function that, when called, will cancel this subscription.
|
|
*
|
|
* @deprecated
|
|
*/
|
|
onChange(subscription) {
|
|
if (true) {
|
|
warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
|
|
}
|
|
return this.on("change", subscription);
|
|
}
|
|
on(eventName, callback) {
|
|
if (!this.events[eventName]) {
|
|
this.events[eventName] = new SubscriptionManager();
|
|
}
|
|
const unsubscribe = this.events[eventName].add(callback);
|
|
if (eventName === "change") {
|
|
return () => {
|
|
unsubscribe();
|
|
frame.read(() => {
|
|
if (!this.events.change.getSize()) {
|
|
this.stop();
|
|
}
|
|
});
|
|
};
|
|
}
|
|
return unsubscribe;
|
|
}
|
|
clearListeners() {
|
|
for (const eventManagers in this.events) {
|
|
this.events[eventManagers].clear();
|
|
}
|
|
}
|
|
/**
|
|
* Attaches a passive effect to the `MotionValue`.
|
|
*
|
|
* @internal
|
|
*/
|
|
attach(passiveEffect, stopPassiveEffect) {
|
|
this.passiveEffect = passiveEffect;
|
|
this.stopPassiveEffect = stopPassiveEffect;
|
|
}
|
|
/**
|
|
* Sets the state of the `MotionValue`.
|
|
*
|
|
* @remarks
|
|
*
|
|
* ```jsx
|
|
* const x = useMotionValue(0)
|
|
* x.set(10)
|
|
* ```
|
|
*
|
|
* @param latest - Latest value to set.
|
|
* @param render - Whether to notify render subscribers. Defaults to `true`
|
|
*
|
|
* @public
|
|
*/
|
|
set(v, render = true) {
|
|
if (!render || !this.passiveEffect) {
|
|
this.updateAndNotify(v, render);
|
|
} else {
|
|
this.passiveEffect(v, this.updateAndNotify);
|
|
}
|
|
}
|
|
setWithVelocity(prev, current, delta) {
|
|
this.set(current);
|
|
this.prev = void 0;
|
|
this.prevFrameValue = prev;
|
|
this.prevUpdatedAt = this.updatedAt - delta;
|
|
}
|
|
/**
|
|
* Set the state of the `MotionValue`, stopping any active animations,
|
|
* effects, and resets velocity to `0`.
|
|
*/
|
|
jump(v, endAnimation = true) {
|
|
this.updateAndNotify(v);
|
|
this.prev = v;
|
|
this.prevUpdatedAt = this.prevFrameValue = void 0;
|
|
endAnimation && this.stop();
|
|
if (this.stopPassiveEffect)
|
|
this.stopPassiveEffect();
|
|
}
|
|
/**
|
|
* Returns the latest state of `MotionValue`
|
|
*
|
|
* @returns - The latest state of `MotionValue`
|
|
*
|
|
* @public
|
|
*/
|
|
get() {
|
|
if (collectMotionValues.current) {
|
|
collectMotionValues.current.push(this);
|
|
}
|
|
return this.current;
|
|
}
|
|
/**
|
|
* @public
|
|
*/
|
|
getPrevious() {
|
|
return this.prev;
|
|
}
|
|
/**
|
|
* Returns the latest velocity of `MotionValue`
|
|
*
|
|
* @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
|
|
*
|
|
* @public
|
|
*/
|
|
getVelocity() {
|
|
const currentTime = time.now();
|
|
if (!this.canTrackVelocity || this.prevFrameValue === void 0 || currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
|
|
return 0;
|
|
}
|
|
const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
|
|
return velocityPerSecond(parseFloat(this.current) - parseFloat(this.prevFrameValue), delta);
|
|
}
|
|
/**
|
|
* Registers a new animation to control this `MotionValue`. Only one
|
|
* animation can drive a `MotionValue` at one time.
|
|
*
|
|
* ```jsx
|
|
* value.start()
|
|
* ```
|
|
*
|
|
* @param animation - A function that starts the provided animation
|
|
*
|
|
* @internal
|
|
*/
|
|
start(startAnimation) {
|
|
this.stop();
|
|
return new Promise((resolve) => {
|
|
this.hasAnimated = true;
|
|
this.animation = startAnimation(resolve);
|
|
if (this.events.animationStart) {
|
|
this.events.animationStart.notify();
|
|
}
|
|
}).then(() => {
|
|
if (this.events.animationComplete) {
|
|
this.events.animationComplete.notify();
|
|
}
|
|
this.clearAnimation();
|
|
});
|
|
}
|
|
/**
|
|
* Stop the currently active animation.
|
|
*
|
|
* @public
|
|
*/
|
|
stop() {
|
|
if (this.animation) {
|
|
this.animation.stop();
|
|
if (this.events.animationCancel) {
|
|
this.events.animationCancel.notify();
|
|
}
|
|
}
|
|
this.clearAnimation();
|
|
}
|
|
/**
|
|
* Returns `true` if this value is currently animating.
|
|
*
|
|
* @public
|
|
*/
|
|
isAnimating() {
|
|
return !!this.animation;
|
|
}
|
|
clearAnimation() {
|
|
delete this.animation;
|
|
}
|
|
/**
|
|
* Destroy and clean up subscribers to this `MotionValue`.
|
|
*
|
|
* The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
|
|
* handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
|
|
* created a `MotionValue` via the `motionValue` function.
|
|
*
|
|
* @public
|
|
*/
|
|
destroy() {
|
|
this.clearListeners();
|
|
this.stop();
|
|
if (this.stopPassiveEffect) {
|
|
this.stopPassiveEffect();
|
|
}
|
|
}
|
|
};
|
|
function motionValue(init, options) {
|
|
return new MotionValue(init, options);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/setters.mjs
|
|
function setMotionValue(visualElement, key, value) {
|
|
if (visualElement.hasValue(key)) {
|
|
visualElement.getValue(key).set(value);
|
|
} else {
|
|
visualElement.addValue(key, motionValue(value));
|
|
}
|
|
}
|
|
function setTarget(visualElement, definition) {
|
|
const resolved = resolveVariant(visualElement, definition);
|
|
let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
|
|
target = { ...target, ...transitionEnd };
|
|
for (const key in target) {
|
|
const value = resolveFinalValueInKeyframes(target[key]);
|
|
setMotionValue(visualElement, key, value);
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-will-change/is.mjs
|
|
function isWillChangeMotionValue(value) {
|
|
return Boolean(isMotionValue(value) && value.add);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-will-change/add-will-change.mjs
|
|
function addValueToWillChange(visualElement, key) {
|
|
const willChange = visualElement.getValue("willChange");
|
|
if (isWillChangeMotionValue(willChange)) {
|
|
return willChange.add(key);
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/optimized-appear/get-appear-id.mjs
|
|
function getOptimisedAppearId(visualElement) {
|
|
return visualElement.props[optimizedAppearDataAttribute];
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs
|
|
var instantAnimationState = {
|
|
current: false
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs
|
|
var calcBezier = (t, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t + (3 * a2 - 6 * a1)) * t + 3 * a1) * t;
|
|
var subdivisionPrecision = 1e-7;
|
|
var subdivisionMaxIterations = 12;
|
|
function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
|
|
let currentX;
|
|
let currentT;
|
|
let i = 0;
|
|
do {
|
|
currentT = lowerBound + (upperBound - lowerBound) / 2;
|
|
currentX = calcBezier(currentT, mX1, mX2) - x;
|
|
if (currentX > 0) {
|
|
upperBound = currentT;
|
|
} else {
|
|
lowerBound = currentT;
|
|
}
|
|
} while (Math.abs(currentX) > subdivisionPrecision && ++i < subdivisionMaxIterations);
|
|
return currentT;
|
|
}
|
|
function cubicBezier(mX1, mY1, mX2, mY2) {
|
|
if (mX1 === mY1 && mX2 === mY2)
|
|
return noop;
|
|
const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
|
|
return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs
|
|
var mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
|
|
|
|
// node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs
|
|
var reverseEasing = (easing) => (p) => 1 - easing(1 - p);
|
|
|
|
// node_modules/framer-motion/dist/es/easing/back.mjs
|
|
var backOut = cubicBezier(0.33, 1.53, 0.69, 0.99);
|
|
var backIn = reverseEasing(backOut);
|
|
var backInOut = mirrorEasing(backIn);
|
|
|
|
// node_modules/framer-motion/dist/es/easing/anticipate.mjs
|
|
var anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
|
|
|
|
// node_modules/framer-motion/dist/es/easing/circ.mjs
|
|
var circIn = (p) => 1 - Math.sin(Math.acos(p));
|
|
var circOut = reverseEasing(circIn);
|
|
var circInOut = mirrorEasing(circIn);
|
|
|
|
// node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs
|
|
var isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
|
|
|
|
// node_modules/framer-motion/dist/es/animation/utils/is-none.mjs
|
|
function isNone(value) {
|
|
if (typeof value === "number") {
|
|
return value === 0;
|
|
} else if (value !== null) {
|
|
return value === "none" || value === "0" || isZeroValueString(value);
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/utils/sanitize.mjs
|
|
var sanitize = (v) => Math.round(v * 1e5) / 1e5;
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/utils/float-regex.mjs
|
|
var floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/utils/is-nullish.mjs
|
|
function isNullish(v) {
|
|
return v == null;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/utils/single-color-regex.mjs
|
|
var singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/color/utils.mjs
|
|
var isColorString = (type, testProp) => (v) => {
|
|
return Boolean(typeof v === "string" && singleColorRegex.test(v) && v.startsWith(type) || testProp && !isNullish(v) && Object.prototype.hasOwnProperty.call(v, testProp));
|
|
};
|
|
var splitColor = (aName, bName, cName) => (v) => {
|
|
if (typeof v !== "string")
|
|
return v;
|
|
const [a, b, c, alpha2] = v.match(floatRegex);
|
|
return {
|
|
[aName]: parseFloat(a),
|
|
[bName]: parseFloat(b),
|
|
[cName]: parseFloat(c),
|
|
alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
|
|
};
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/color/rgba.mjs
|
|
var clampRgbUnit = (v) => clamp(0, 255, v);
|
|
var rgbUnit = {
|
|
...number,
|
|
transform: (v) => Math.round(clampRgbUnit(v))
|
|
};
|
|
var rgba = {
|
|
test: isColorString("rgb", "red"),
|
|
parse: splitColor("red", "green", "blue"),
|
|
transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + rgbUnit.transform(red) + ", " + rgbUnit.transform(green) + ", " + rgbUnit.transform(blue) + ", " + sanitize(alpha.transform(alpha$1)) + ")"
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/color/hex.mjs
|
|
function parseHex(v) {
|
|
let r = "";
|
|
let g = "";
|
|
let b = "";
|
|
let a = "";
|
|
if (v.length > 5) {
|
|
r = v.substring(1, 3);
|
|
g = v.substring(3, 5);
|
|
b = v.substring(5, 7);
|
|
a = v.substring(7, 9);
|
|
} else {
|
|
r = v.substring(1, 2);
|
|
g = v.substring(2, 3);
|
|
b = v.substring(3, 4);
|
|
a = v.substring(4, 5);
|
|
r += r;
|
|
g += g;
|
|
b += b;
|
|
a += a;
|
|
}
|
|
return {
|
|
red: parseInt(r, 16),
|
|
green: parseInt(g, 16),
|
|
blue: parseInt(b, 16),
|
|
alpha: a ? parseInt(a, 16) / 255 : 1
|
|
};
|
|
}
|
|
var hex = {
|
|
test: isColorString("#"),
|
|
parse: parseHex,
|
|
transform: rgba.transform
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/color/hsla.mjs
|
|
var hsla = {
|
|
test: isColorString("hsl", "hue"),
|
|
parse: splitColor("hue", "saturation", "lightness"),
|
|
transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
|
|
return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/color/index.mjs
|
|
var color = {
|
|
test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
|
|
parse: (v) => {
|
|
if (rgba.test(v)) {
|
|
return rgba.parse(v);
|
|
} else if (hsla.test(v)) {
|
|
return hsla.parse(v);
|
|
} else {
|
|
return hex.parse(v);
|
|
}
|
|
},
|
|
transform: (v) => {
|
|
return typeof v === "string" ? v : v.hasOwnProperty("red") ? rgba.transform(v) : hsla.transform(v);
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/utils/color-regex.mjs
|
|
var colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/complex/index.mjs
|
|
function test(v) {
|
|
var _a, _b;
|
|
return isNaN(v) && typeof v === "string" && (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) + (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0;
|
|
}
|
|
var NUMBER_TOKEN = "number";
|
|
var COLOR_TOKEN = "color";
|
|
var VAR_TOKEN = "var";
|
|
var VAR_FUNCTION_TOKEN = "var(";
|
|
var SPLIT_TOKEN = "${}";
|
|
var 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;
|
|
function analyseComplexValue(value) {
|
|
const originalValue = value.toString();
|
|
const values = [];
|
|
const indexes = {
|
|
color: [],
|
|
number: [],
|
|
var: []
|
|
};
|
|
const types = [];
|
|
let i = 0;
|
|
const tokenised = originalValue.replace(complexRegex, (parsedValue) => {
|
|
if (color.test(parsedValue)) {
|
|
indexes.color.push(i);
|
|
types.push(COLOR_TOKEN);
|
|
values.push(color.parse(parsedValue));
|
|
} else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {
|
|
indexes.var.push(i);
|
|
types.push(VAR_TOKEN);
|
|
values.push(parsedValue);
|
|
} else {
|
|
indexes.number.push(i);
|
|
types.push(NUMBER_TOKEN);
|
|
values.push(parseFloat(parsedValue));
|
|
}
|
|
++i;
|
|
return SPLIT_TOKEN;
|
|
});
|
|
const split = tokenised.split(SPLIT_TOKEN);
|
|
return { values, split, indexes, types };
|
|
}
|
|
function parseComplexValue(v) {
|
|
return analyseComplexValue(v).values;
|
|
}
|
|
function createTransformer(source) {
|
|
const { split, types } = analyseComplexValue(source);
|
|
const numSections = split.length;
|
|
return (v) => {
|
|
let output = "";
|
|
for (let i = 0; i < numSections; i++) {
|
|
output += split[i];
|
|
if (v[i] !== void 0) {
|
|
const type = types[i];
|
|
if (type === NUMBER_TOKEN) {
|
|
output += sanitize(v[i]);
|
|
} else if (type === COLOR_TOKEN) {
|
|
output += color.transform(v[i]);
|
|
} else {
|
|
output += v[i];
|
|
}
|
|
}
|
|
}
|
|
return output;
|
|
};
|
|
}
|
|
var convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
|
|
function getAnimatableNone(v) {
|
|
const parsed = parseComplexValue(v);
|
|
const transformer = createTransformer(v);
|
|
return transformer(parsed.map(convertNumbersToZero));
|
|
}
|
|
var complex = {
|
|
test,
|
|
parse: parseComplexValue,
|
|
createTransformer,
|
|
getAnimatableNone
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/types/complex/filter.mjs
|
|
var maxDefaults = /* @__PURE__ */ new Set(["brightness", "contrast", "saturate", "opacity"]);
|
|
function applyDefaultFilter(v) {
|
|
const [name, value] = v.slice(0, -1).split("(");
|
|
if (name === "drop-shadow")
|
|
return v;
|
|
const [number2] = value.match(floatRegex) || [];
|
|
if (!number2)
|
|
return v;
|
|
const unit = value.replace(number2, "");
|
|
let defaultValue = maxDefaults.has(name) ? 1 : 0;
|
|
if (number2 !== value)
|
|
defaultValue *= 100;
|
|
return name + "(" + defaultValue + unit + ")";
|
|
}
|
|
var functionRegex = /\b([a-z-]*)\(.*?\)/gu;
|
|
var filter = {
|
|
...complex,
|
|
getAnimatableNone: (v) => {
|
|
const functions = v.match(functionRegex);
|
|
return functions ? functions.map(applyDefaultFilter).join(" ") : v;
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs
|
|
var defaultValueTypes = {
|
|
...numberValueTypes,
|
|
// Color props
|
|
color,
|
|
backgroundColor: color,
|
|
outlineColor: color,
|
|
fill: color,
|
|
stroke: color,
|
|
// Border props
|
|
borderColor: color,
|
|
borderTopColor: color,
|
|
borderRightColor: color,
|
|
borderBottomColor: color,
|
|
borderLeftColor: color,
|
|
filter,
|
|
WebkitFilter: filter
|
|
};
|
|
var getDefaultValueType = (key) => defaultValueTypes[key];
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs
|
|
function getAnimatableNone2(key, value) {
|
|
let defaultValueType = getDefaultValueType(key);
|
|
if (defaultValueType !== filter)
|
|
defaultValueType = complex;
|
|
return defaultValueType.getAnimatableNone ? defaultValueType.getAnimatableNone(value) : void 0;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs
|
|
var invalidTemplates = /* @__PURE__ */ new Set(["auto", "none", "0"]);
|
|
function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
|
|
let i = 0;
|
|
let animatableTemplate = void 0;
|
|
while (i < unresolvedKeyframes.length && !animatableTemplate) {
|
|
const keyframe = unresolvedKeyframes[i];
|
|
if (typeof keyframe === "string" && !invalidTemplates.has(keyframe) && analyseComplexValue(keyframe).values.length) {
|
|
animatableTemplate = unresolvedKeyframes[i];
|
|
}
|
|
i++;
|
|
}
|
|
if (animatableTemplate && name) {
|
|
for (const noneIndex of noneKeyframeIndexes) {
|
|
unresolvedKeyframes[noneIndex] = getAnimatableNone2(name, animatableTemplate);
|
|
}
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs
|
|
var isNumOrPxType = (v) => v === number || v === px;
|
|
var getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
|
|
var getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform: transform2 }) => {
|
|
if (transform2 === "none" || !transform2)
|
|
return 0;
|
|
const matrix3d = transform2.match(/^matrix3d\((.+)\)$/u);
|
|
if (matrix3d) {
|
|
return getPosFromMatrix(matrix3d[1], pos3);
|
|
} else {
|
|
const matrix = transform2.match(/^matrix\((.+)\)$/u);
|
|
if (matrix) {
|
|
return getPosFromMatrix(matrix[1], pos2);
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
};
|
|
var transformKeys = /* @__PURE__ */ new Set(["x", "y", "z"]);
|
|
var nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
|
|
function removeNonTranslationalTransform(visualElement) {
|
|
const removedTransforms = [];
|
|
nonTranslationalTransformKeys.forEach((key) => {
|
|
const value = visualElement.getValue(key);
|
|
if (value !== void 0) {
|
|
removedTransforms.push([key, value.get()]);
|
|
value.set(key.startsWith("scale") ? 1 : 0);
|
|
}
|
|
});
|
|
return removedTransforms;
|
|
}
|
|
var positionalValues = {
|
|
// Dimensions
|
|
width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
|
|
height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
|
|
top: (_bbox, { top }) => parseFloat(top),
|
|
left: (_bbox, { left }) => parseFloat(left),
|
|
bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
|
|
right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
|
|
// Transform
|
|
x: getTranslateFromMatrix(4, 13),
|
|
y: getTranslateFromMatrix(5, 14)
|
|
};
|
|
positionalValues.translateX = positionalValues.x;
|
|
positionalValues.translateY = positionalValues.y;
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/KeyframesResolver.mjs
|
|
var toResolve = /* @__PURE__ */ new Set();
|
|
var isScheduled = false;
|
|
var anyNeedsMeasurement = false;
|
|
function measureAllKeyframes() {
|
|
if (anyNeedsMeasurement) {
|
|
const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
|
|
const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));
|
|
const transformsToRestore = /* @__PURE__ */ new Map();
|
|
elementsToMeasure.forEach((element) => {
|
|
const removedTransforms = removeNonTranslationalTransform(element);
|
|
if (!removedTransforms.length)
|
|
return;
|
|
transformsToRestore.set(element, removedTransforms);
|
|
element.render();
|
|
});
|
|
resolversToMeasure.forEach((resolver) => resolver.measureInitialState());
|
|
elementsToMeasure.forEach((element) => {
|
|
element.render();
|
|
const restore = transformsToRestore.get(element);
|
|
if (restore) {
|
|
restore.forEach(([key, value]) => {
|
|
var _a;
|
|
(_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);
|
|
});
|
|
}
|
|
});
|
|
resolversToMeasure.forEach((resolver) => resolver.measureEndState());
|
|
resolversToMeasure.forEach((resolver) => {
|
|
if (resolver.suspendedScrollY !== void 0) {
|
|
window.scrollTo(0, resolver.suspendedScrollY);
|
|
}
|
|
});
|
|
}
|
|
anyNeedsMeasurement = false;
|
|
isScheduled = false;
|
|
toResolve.forEach((resolver) => resolver.complete());
|
|
toResolve.clear();
|
|
}
|
|
function readAllKeyframes() {
|
|
toResolve.forEach((resolver) => {
|
|
resolver.readKeyframes();
|
|
if (resolver.needsMeasurement) {
|
|
anyNeedsMeasurement = true;
|
|
}
|
|
});
|
|
}
|
|
function flushKeyframeResolvers() {
|
|
readAllKeyframes();
|
|
measureAllKeyframes();
|
|
}
|
|
var KeyframeResolver = class {
|
|
constructor(unresolvedKeyframes, onComplete, name, motionValue2, element, isAsync = false) {
|
|
this.isComplete = false;
|
|
this.isAsync = false;
|
|
this.needsMeasurement = false;
|
|
this.isScheduled = false;
|
|
this.unresolvedKeyframes = [...unresolvedKeyframes];
|
|
this.onComplete = onComplete;
|
|
this.name = name;
|
|
this.motionValue = motionValue2;
|
|
this.element = element;
|
|
this.isAsync = isAsync;
|
|
}
|
|
scheduleResolve() {
|
|
this.isScheduled = true;
|
|
if (this.isAsync) {
|
|
toResolve.add(this);
|
|
if (!isScheduled) {
|
|
isScheduled = true;
|
|
frame.read(readAllKeyframes);
|
|
frame.resolveKeyframes(measureAllKeyframes);
|
|
}
|
|
} else {
|
|
this.readKeyframes();
|
|
this.complete();
|
|
}
|
|
}
|
|
readKeyframes() {
|
|
const { unresolvedKeyframes, name, element, motionValue: motionValue2 } = this;
|
|
for (let i = 0; i < unresolvedKeyframes.length; i++) {
|
|
if (unresolvedKeyframes[i] === null) {
|
|
if (i === 0) {
|
|
const currentValue = motionValue2 === null || motionValue2 === void 0 ? void 0 : motionValue2.get();
|
|
const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
|
|
if (currentValue !== void 0) {
|
|
unresolvedKeyframes[0] = currentValue;
|
|
} else if (element && name) {
|
|
const valueAsRead = element.readValue(name, finalKeyframe);
|
|
if (valueAsRead !== void 0 && valueAsRead !== null) {
|
|
unresolvedKeyframes[0] = valueAsRead;
|
|
}
|
|
}
|
|
if (unresolvedKeyframes[0] === void 0) {
|
|
unresolvedKeyframes[0] = finalKeyframe;
|
|
}
|
|
if (motionValue2 && currentValue === void 0) {
|
|
motionValue2.set(unresolvedKeyframes[0]);
|
|
}
|
|
} else {
|
|
unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
setFinalKeyframe() {
|
|
}
|
|
measureInitialState() {
|
|
}
|
|
renderEndStyles() {
|
|
}
|
|
measureEndState() {
|
|
}
|
|
complete() {
|
|
this.isComplete = true;
|
|
this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
|
|
toResolve.delete(this);
|
|
}
|
|
cancel() {
|
|
if (!this.isComplete) {
|
|
this.isScheduled = false;
|
|
toResolve.delete(this);
|
|
}
|
|
}
|
|
resume() {
|
|
if (!this.isComplete)
|
|
this.scheduleResolve();
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs
|
|
var isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs
|
|
var splitCSSVariableRegex = (
|
|
// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
|
|
/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u
|
|
);
|
|
function parseCSSVariable(current) {
|
|
const match = splitCSSVariableRegex.exec(current);
|
|
if (!match)
|
|
return [,];
|
|
const [, token1, token2, fallback] = match;
|
|
return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
|
|
}
|
|
var maxDepth = 4;
|
|
function getVariableValue(current, element, depth = 1) {
|
|
invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
|
|
const [token, fallback] = parseCSSVariable(current);
|
|
if (!token)
|
|
return;
|
|
const resolved = window.getComputedStyle(element).getPropertyValue(token);
|
|
if (resolved) {
|
|
const trimmed = resolved.trim();
|
|
return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
|
|
}
|
|
return isCSSVariableToken(fallback) ? getVariableValue(fallback, element, depth + 1) : fallback;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs
|
|
var testValueType = (v) => (type) => type.test(v);
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs
|
|
var auto = {
|
|
test: (v) => v === "auto",
|
|
parse: (v) => v
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs
|
|
var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
|
|
var findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs
|
|
var DOMKeyframesResolver = class extends KeyframeResolver {
|
|
constructor(unresolvedKeyframes, onComplete, name, motionValue2, element) {
|
|
super(unresolvedKeyframes, onComplete, name, motionValue2, element, true);
|
|
}
|
|
readKeyframes() {
|
|
const { unresolvedKeyframes, element, name } = this;
|
|
if (!element || !element.current)
|
|
return;
|
|
super.readKeyframes();
|
|
for (let i = 0; i < unresolvedKeyframes.length; i++) {
|
|
let keyframe = unresolvedKeyframes[i];
|
|
if (typeof keyframe === "string") {
|
|
keyframe = keyframe.trim();
|
|
if (isCSSVariableToken(keyframe)) {
|
|
const resolved = getVariableValue(keyframe, element.current);
|
|
if (resolved !== void 0) {
|
|
unresolvedKeyframes[i] = resolved;
|
|
}
|
|
if (i === unresolvedKeyframes.length - 1) {
|
|
this.finalKeyframe = keyframe;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.resolveNoneKeyframes();
|
|
if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {
|
|
return;
|
|
}
|
|
const [origin, target] = unresolvedKeyframes;
|
|
const originType = findDimensionValueType(origin);
|
|
const targetType = findDimensionValueType(target);
|
|
if (originType === targetType)
|
|
return;
|
|
if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {
|
|
for (let i = 0; i < unresolvedKeyframes.length; i++) {
|
|
const value = unresolvedKeyframes[i];
|
|
if (typeof value === "string") {
|
|
unresolvedKeyframes[i] = parseFloat(value);
|
|
}
|
|
}
|
|
} else {
|
|
this.needsMeasurement = true;
|
|
}
|
|
}
|
|
resolveNoneKeyframes() {
|
|
const { unresolvedKeyframes, name } = this;
|
|
const noneKeyframeIndexes = [];
|
|
for (let i = 0; i < unresolvedKeyframes.length; i++) {
|
|
if (isNone(unresolvedKeyframes[i])) {
|
|
noneKeyframeIndexes.push(i);
|
|
}
|
|
}
|
|
if (noneKeyframeIndexes.length) {
|
|
makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);
|
|
}
|
|
}
|
|
measureInitialState() {
|
|
const { element, unresolvedKeyframes, name } = this;
|
|
if (!element || !element.current)
|
|
return;
|
|
if (name === "height") {
|
|
this.suspendedScrollY = window.pageYOffset;
|
|
}
|
|
this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
|
|
unresolvedKeyframes[0] = this.measuredOrigin;
|
|
const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
|
|
if (measureKeyframe !== void 0) {
|
|
element.getValue(name, measureKeyframe).jump(measureKeyframe, false);
|
|
}
|
|
}
|
|
measureEndState() {
|
|
var _a;
|
|
const { element, name, unresolvedKeyframes } = this;
|
|
if (!element || !element.current)
|
|
return;
|
|
const value = element.getValue(name);
|
|
value && value.jump(this.measuredOrigin, false);
|
|
const finalKeyframeIndex = unresolvedKeyframes.length - 1;
|
|
const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
|
|
unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
|
|
if (finalKeyframe !== null && this.finalKeyframe === void 0) {
|
|
this.finalKeyframe = finalKeyframe;
|
|
}
|
|
if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) {
|
|
this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
|
|
element.getValue(unsetTransformName).set(unsetTransformValue);
|
|
});
|
|
}
|
|
this.resolveNoneKeyframes();
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs
|
|
var isAnimatable = (value, name) => {
|
|
if (name === "zIndex")
|
|
return false;
|
|
if (typeof value === "number" || Array.isArray(value))
|
|
return true;
|
|
if (typeof value === "string" && // It's animatable if we have a string
|
|
(complex.test(value) || value === "0") && // And it contains numbers and/or colors
|
|
!value.startsWith("url(")) {
|
|
return true;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/utils/can-animate.mjs
|
|
function hasKeyframesChanged(keyframes2) {
|
|
const current = keyframes2[0];
|
|
if (keyframes2.length === 1)
|
|
return true;
|
|
for (let i = 0; i < keyframes2.length; i++) {
|
|
if (keyframes2[i] !== current)
|
|
return true;
|
|
}
|
|
}
|
|
function canAnimate(keyframes2, name, type, velocity) {
|
|
const originKeyframe = keyframes2[0];
|
|
if (originKeyframe === null)
|
|
return false;
|
|
if (name === "display" || name === "visibility")
|
|
return true;
|
|
const targetKeyframe = keyframes2[keyframes2.length - 1];
|
|
const isOriginAnimatable = isAnimatable(originKeyframe, name);
|
|
const isTargetAnimatable = isAnimatable(targetKeyframe, name);
|
|
warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
|
|
if (!isOriginAnimatable || !isTargetAnimatable) {
|
|
return false;
|
|
}
|
|
return hasKeyframesChanged(keyframes2) || (type === "spring" || isGenerator(type)) && velocity;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs
|
|
var isNotNull = (value) => value !== null;
|
|
function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe) {
|
|
const resolvedKeyframes = keyframes2.filter(isNotNull);
|
|
const index = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
|
|
return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/BaseAnimation.mjs
|
|
var MAX_RESOLVE_DELAY = 40;
|
|
var BaseAnimation = class {
|
|
constructor({ autoplay = true, delay: delay2 = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
|
|
this.isStopped = false;
|
|
this.hasAttemptedResolve = false;
|
|
this.createdAt = time.now();
|
|
this.options = {
|
|
autoplay,
|
|
delay: delay2,
|
|
type,
|
|
repeat,
|
|
repeatDelay,
|
|
repeatType,
|
|
...options
|
|
};
|
|
this.updateFinishedPromise();
|
|
}
|
|
/**
|
|
* This method uses the createdAt and resolvedAt to calculate the
|
|
* animation startTime. *Ideally*, we would use the createdAt time as t=0
|
|
* as the following frame would then be the first frame of the animation in
|
|
* progress, which would feel snappier.
|
|
*
|
|
* However, if there's a delay (main thread work) between the creation of
|
|
* the animation and the first commited frame, we prefer to use resolvedAt
|
|
* to avoid a sudden jump into the animation.
|
|
*/
|
|
calcStartTime() {
|
|
if (!this.resolvedAt)
|
|
return this.createdAt;
|
|
return this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY ? this.resolvedAt : this.createdAt;
|
|
}
|
|
/**
|
|
* A getter for resolved data. If keyframes are not yet resolved, accessing
|
|
* this.resolved will synchronously flush all pending keyframe resolvers.
|
|
* This is a deoptimisation, but at its worst still batches read/writes.
|
|
*/
|
|
get resolved() {
|
|
if (!this._resolved && !this.hasAttemptedResolve) {
|
|
flushKeyframeResolvers();
|
|
}
|
|
return this._resolved;
|
|
}
|
|
/**
|
|
* A method to be called when the keyframes resolver completes. This method
|
|
* will check if its possible to run the animation and, if not, skip it.
|
|
* Otherwise, it will call initPlayback on the implementing class.
|
|
*/
|
|
onKeyframesResolved(keyframes2, finalKeyframe) {
|
|
this.resolvedAt = time.now();
|
|
this.hasAttemptedResolve = true;
|
|
const { name, type, velocity, delay: delay2, onComplete, onUpdate, isGenerator: isGenerator2 } = this.options;
|
|
if (!isGenerator2 && !canAnimate(keyframes2, name, type, velocity)) {
|
|
if (instantAnimationState.current || !delay2) {
|
|
onUpdate && onUpdate(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
|
|
onComplete && onComplete();
|
|
this.resolveFinishedPromise();
|
|
return;
|
|
} else {
|
|
this.options.duration = 0;
|
|
}
|
|
}
|
|
const resolvedAnimation = this.initPlayback(keyframes2, finalKeyframe);
|
|
if (resolvedAnimation === false)
|
|
return;
|
|
this._resolved = {
|
|
keyframes: keyframes2,
|
|
finalKeyframe,
|
|
...resolvedAnimation
|
|
};
|
|
this.onPostResolved();
|
|
}
|
|
onPostResolved() {
|
|
}
|
|
/**
|
|
* Allows the returned animation to be awaited or promise-chained. Currently
|
|
* resolves when the animation finishes at all but in a future update could/should
|
|
* reject if its cancels.
|
|
*/
|
|
then(resolve, reject) {
|
|
return this.currentFinishedPromise.then(resolve, reject);
|
|
}
|
|
flatten() {
|
|
this.options.type = "keyframes";
|
|
this.options.ease = "linear";
|
|
}
|
|
updateFinishedPromise() {
|
|
this.currentFinishedPromise = new Promise((resolve) => {
|
|
this.resolveFinishedPromise = resolve;
|
|
});
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/mix/number.mjs
|
|
var mixNumber = (from, to, progress2) => {
|
|
return from + (to - from) * progress2;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs
|
|
function hueToRgb(p, q, t) {
|
|
if (t < 0)
|
|
t += 1;
|
|
if (t > 1)
|
|
t -= 1;
|
|
if (t < 1 / 6)
|
|
return p + (q - p) * 6 * t;
|
|
if (t < 1 / 2)
|
|
return q;
|
|
if (t < 2 / 3)
|
|
return p + (q - p) * (2 / 3 - t) * 6;
|
|
return p;
|
|
}
|
|
function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
|
|
hue /= 360;
|
|
saturation /= 100;
|
|
lightness /= 100;
|
|
let red = 0;
|
|
let green = 0;
|
|
let blue = 0;
|
|
if (!saturation) {
|
|
red = green = blue = lightness;
|
|
} else {
|
|
const q = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
|
|
const p = 2 * lightness - q;
|
|
red = hueToRgb(p, q, hue + 1 / 3);
|
|
green = hueToRgb(p, q, hue);
|
|
blue = hueToRgb(p, q, hue - 1 / 3);
|
|
}
|
|
return {
|
|
red: Math.round(red * 255),
|
|
green: Math.round(green * 255),
|
|
blue: Math.round(blue * 255),
|
|
alpha: alpha2
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/mix/immediate.mjs
|
|
function mixImmediate(a, b) {
|
|
return (p) => p > 0 ? b : a;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/mix/color.mjs
|
|
var mixLinearColor = (from, to, v) => {
|
|
const fromExpo = from * from;
|
|
const expo = v * (to * to - fromExpo) + fromExpo;
|
|
return expo < 0 ? 0 : Math.sqrt(expo);
|
|
};
|
|
var colorTypes = [hex, rgba, hsla];
|
|
var getColorType = (v) => colorTypes.find((type) => type.test(v));
|
|
function asRGBA(color2) {
|
|
const type = getColorType(color2);
|
|
warning(Boolean(type), `'${color2}' is not an animatable color. Use the equivalent color code instead.`);
|
|
if (!Boolean(type))
|
|
return false;
|
|
let model = type.parse(color2);
|
|
if (type === hsla) {
|
|
model = hslaToRgba(model);
|
|
}
|
|
return model;
|
|
}
|
|
var mixColor = (from, to) => {
|
|
const fromRGBA = asRGBA(from);
|
|
const toRGBA = asRGBA(to);
|
|
if (!fromRGBA || !toRGBA) {
|
|
return mixImmediate(from, to);
|
|
}
|
|
const blended = { ...fromRGBA };
|
|
return (v) => {
|
|
blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
|
|
blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
|
|
blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
|
|
blended.alpha = mixNumber(fromRGBA.alpha, toRGBA.alpha, v);
|
|
return rgba.transform(blended);
|
|
};
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/pipe.mjs
|
|
var combineFunctions = (a, b) => (v) => b(a(v));
|
|
var pipe = (...transformers) => transformers.reduce(combineFunctions);
|
|
|
|
// node_modules/framer-motion/dist/es/utils/mix/visibility.mjs
|
|
var invisibleValues = /* @__PURE__ */ new Set(["none", "hidden"]);
|
|
function mixVisibility(origin, target) {
|
|
if (invisibleValues.has(origin)) {
|
|
return (p) => p <= 0 ? origin : target;
|
|
} else {
|
|
return (p) => p >= 1 ? target : origin;
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/mix/complex.mjs
|
|
function mixNumber2(a, b) {
|
|
return (p) => mixNumber(a, b, p);
|
|
}
|
|
function getMixer(a) {
|
|
if (typeof a === "number") {
|
|
return mixNumber2;
|
|
} else if (typeof a === "string") {
|
|
return isCSSVariableToken(a) ? mixImmediate : color.test(a) ? mixColor : mixComplex;
|
|
} else if (Array.isArray(a)) {
|
|
return mixArray;
|
|
} else if (typeof a === "object") {
|
|
return color.test(a) ? mixColor : mixObject;
|
|
}
|
|
return mixImmediate;
|
|
}
|
|
function mixArray(a, b) {
|
|
const output = [...a];
|
|
const numValues = output.length;
|
|
const blendValue = a.map((v, i) => getMixer(v)(v, b[i]));
|
|
return (p) => {
|
|
for (let i = 0; i < numValues; i++) {
|
|
output[i] = blendValue[i](p);
|
|
}
|
|
return output;
|
|
};
|
|
}
|
|
function mixObject(a, b) {
|
|
const output = { ...a, ...b };
|
|
const blendValue = {};
|
|
for (const key in output) {
|
|
if (a[key] !== void 0 && b[key] !== void 0) {
|
|
blendValue[key] = getMixer(a[key])(a[key], b[key]);
|
|
}
|
|
}
|
|
return (v) => {
|
|
for (const key in blendValue) {
|
|
output[key] = blendValue[key](v);
|
|
}
|
|
return output;
|
|
};
|
|
}
|
|
function matchOrder(origin, target) {
|
|
var _a;
|
|
const orderedOrigin = [];
|
|
const pointers = { color: 0, var: 0, number: 0 };
|
|
for (let i = 0; i < target.values.length; i++) {
|
|
const type = target.types[i];
|
|
const originIndex = origin.indexes[type][pointers[type]];
|
|
const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
|
|
orderedOrigin[i] = originValue;
|
|
pointers[type]++;
|
|
}
|
|
return orderedOrigin;
|
|
}
|
|
var mixComplex = (origin, target) => {
|
|
const template = complex.createTransformer(target);
|
|
const originStats = analyseComplexValue(origin);
|
|
const targetStats = analyseComplexValue(target);
|
|
const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length && originStats.indexes.color.length === targetStats.indexes.color.length && originStats.indexes.number.length >= targetStats.indexes.number.length;
|
|
if (canInterpolate) {
|
|
if (invisibleValues.has(origin) && !targetStats.values.length || invisibleValues.has(target) && !originStats.values.length) {
|
|
return mixVisibility(origin, target);
|
|
}
|
|
return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
|
|
} else {
|
|
warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
|
|
return mixImmediate(origin, target);
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/mix/index.mjs
|
|
function mix(from, to, p) {
|
|
if (typeof from === "number" && typeof to === "number" && typeof p === "number") {
|
|
return mixNumber(from, to, p);
|
|
}
|
|
const mixer = getMixer(from);
|
|
return mixer(from, to);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/generators/utils/velocity.mjs
|
|
var velocitySampleDuration = 5;
|
|
function calcGeneratorVelocity(resolveValue, t, current) {
|
|
const prevT = Math.max(t - velocitySampleDuration, 0);
|
|
return velocityPerSecond(current - resolveValue(prevT), t - prevT);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/generators/spring/defaults.mjs
|
|
var springDefaults = {
|
|
// Default spring physics
|
|
stiffness: 100,
|
|
damping: 10,
|
|
mass: 1,
|
|
velocity: 0,
|
|
// Default duration/bounce-based options
|
|
duration: 800,
|
|
// in ms
|
|
bounce: 0.3,
|
|
visualDuration: 0.3,
|
|
// in seconds
|
|
// Rest thresholds
|
|
restSpeed: {
|
|
granular: 0.01,
|
|
default: 2
|
|
},
|
|
restDelta: {
|
|
granular: 5e-3,
|
|
default: 0.5
|
|
},
|
|
// Limits
|
|
minDuration: 0.01,
|
|
// in seconds
|
|
maxDuration: 10,
|
|
// in seconds
|
|
minDamping: 0.05,
|
|
maxDamping: 1
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/generators/spring/find.mjs
|
|
var safeMin = 1e-3;
|
|
function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass }) {
|
|
let envelope;
|
|
let derivative;
|
|
warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
|
|
let dampingRatio = 1 - bounce;
|
|
dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
|
|
duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds(duration));
|
|
if (dampingRatio < 1) {
|
|
envelope = (undampedFreq2) => {
|
|
const exponentialDecay = undampedFreq2 * dampingRatio;
|
|
const delta = exponentialDecay * duration;
|
|
const a = exponentialDecay - velocity;
|
|
const b = calcAngularFreq(undampedFreq2, dampingRatio);
|
|
const c = Math.exp(-delta);
|
|
return safeMin - a / b * c;
|
|
};
|
|
derivative = (undampedFreq2) => {
|
|
const exponentialDecay = undampedFreq2 * dampingRatio;
|
|
const delta = exponentialDecay * duration;
|
|
const d = delta * velocity + velocity;
|
|
const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq2, 2) * duration;
|
|
const f = Math.exp(-delta);
|
|
const g = calcAngularFreq(Math.pow(undampedFreq2, 2), dampingRatio);
|
|
const factor = -envelope(undampedFreq2) + safeMin > 0 ? -1 : 1;
|
|
return factor * ((d - e) * f) / g;
|
|
};
|
|
} else {
|
|
envelope = (undampedFreq2) => {
|
|
const a = Math.exp(-undampedFreq2 * duration);
|
|
const b = (undampedFreq2 - velocity) * duration + 1;
|
|
return -safeMin + a * b;
|
|
};
|
|
derivative = (undampedFreq2) => {
|
|
const a = Math.exp(-undampedFreq2 * duration);
|
|
const b = (velocity - undampedFreq2) * (duration * duration);
|
|
return a * b;
|
|
};
|
|
}
|
|
const initialGuess = 5 / duration;
|
|
const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
|
|
duration = secondsToMilliseconds(duration);
|
|
if (isNaN(undampedFreq)) {
|
|
return {
|
|
stiffness: springDefaults.stiffness,
|
|
damping: springDefaults.damping,
|
|
duration
|
|
};
|
|
} else {
|
|
const stiffness = Math.pow(undampedFreq, 2) * mass;
|
|
return {
|
|
stiffness,
|
|
damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
|
|
duration
|
|
};
|
|
}
|
|
}
|
|
var rootIterations = 12;
|
|
function approximateRoot(envelope, derivative, initialGuess) {
|
|
let result = initialGuess;
|
|
for (let i = 1; i < rootIterations; i++) {
|
|
result = result - envelope(result) / derivative(result);
|
|
}
|
|
return result;
|
|
}
|
|
function calcAngularFreq(undampedFreq, dampingRatio) {
|
|
return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/generators/spring/index.mjs
|
|
var durationKeys = ["duration", "bounce"];
|
|
var physicsKeys = ["stiffness", "damping", "mass"];
|
|
function isSpringType(options, keys2) {
|
|
return keys2.some((key) => options[key] !== void 0);
|
|
}
|
|
function getSpringOptions(options) {
|
|
let springOptions = {
|
|
velocity: springDefaults.velocity,
|
|
stiffness: springDefaults.stiffness,
|
|
damping: springDefaults.damping,
|
|
mass: springDefaults.mass,
|
|
isResolvedFromDuration: false,
|
|
...options
|
|
};
|
|
if (!isSpringType(options, physicsKeys) && isSpringType(options, durationKeys)) {
|
|
if (options.visualDuration) {
|
|
const visualDuration = options.visualDuration;
|
|
const root = 2 * Math.PI / (visualDuration * 1.2);
|
|
const stiffness = root * root;
|
|
const damping = 2 * clamp(0.05, 1, 1 - (options.bounce || 0)) * Math.sqrt(stiffness);
|
|
springOptions = {
|
|
...springOptions,
|
|
mass: springDefaults.mass,
|
|
stiffness,
|
|
damping
|
|
};
|
|
} else {
|
|
const derived = findSpring(options);
|
|
springOptions = {
|
|
...springOptions,
|
|
...derived,
|
|
mass: springDefaults.mass
|
|
};
|
|
springOptions.isResolvedFromDuration = true;
|
|
}
|
|
}
|
|
return springOptions;
|
|
}
|
|
function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
|
|
const options = typeof optionsOrVisualDuration !== "object" ? {
|
|
visualDuration: optionsOrVisualDuration,
|
|
keyframes: [0, 1],
|
|
bounce
|
|
} : optionsOrVisualDuration;
|
|
let { restSpeed, restDelta } = options;
|
|
const origin = options.keyframes[0];
|
|
const target = options.keyframes[options.keyframes.length - 1];
|
|
const state2 = { done: false, value: origin };
|
|
const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration } = getSpringOptions({
|
|
...options,
|
|
velocity: -millisecondsToSeconds(options.velocity || 0)
|
|
});
|
|
const initialVelocity = velocity || 0;
|
|
const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
|
|
const initialDelta = target - origin;
|
|
const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
|
|
const isGranularScale = Math.abs(initialDelta) < 5;
|
|
restSpeed || (restSpeed = isGranularScale ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default);
|
|
restDelta || (restDelta = isGranularScale ? springDefaults.restDelta.granular : springDefaults.restDelta.default);
|
|
let resolveSpring;
|
|
if (dampingRatio < 1) {
|
|
const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
|
|
resolveSpring = (t) => {
|
|
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
|
|
return target - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) / angularFreq * Math.sin(angularFreq * t) + initialDelta * Math.cos(angularFreq * t));
|
|
};
|
|
} else if (dampingRatio === 1) {
|
|
resolveSpring = (t) => target - Math.exp(-undampedAngularFreq * t) * (initialDelta + (initialVelocity + undampedAngularFreq * initialDelta) * t);
|
|
} else {
|
|
const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
|
|
resolveSpring = (t) => {
|
|
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
|
|
const freqForT = Math.min(dampedAngularFreq * t, 300);
|
|
return target - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) * Math.sinh(freqForT) + dampedAngularFreq * initialDelta * Math.cosh(freqForT)) / dampedAngularFreq;
|
|
};
|
|
}
|
|
const generator = {
|
|
calculatedDuration: isResolvedFromDuration ? duration || null : null,
|
|
next: (t) => {
|
|
const current = resolveSpring(t);
|
|
if (!isResolvedFromDuration) {
|
|
let currentVelocity = 0;
|
|
if (dampingRatio < 1) {
|
|
currentVelocity = t === 0 ? secondsToMilliseconds(initialVelocity) : calcGeneratorVelocity(resolveSpring, t, current);
|
|
}
|
|
const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
|
|
const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
|
|
state2.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;
|
|
} else {
|
|
state2.done = t >= duration;
|
|
}
|
|
state2.value = state2.done ? target : current;
|
|
return state2;
|
|
},
|
|
toString: () => {
|
|
const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
|
|
const easing = generateLinearEasing((progress2) => generator.next(calculatedDuration * progress2).value, calculatedDuration, 30);
|
|
return calculatedDuration + "ms " + easing;
|
|
}
|
|
};
|
|
return generator;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/generators/inertia.mjs
|
|
function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed }) {
|
|
const origin = keyframes2[0];
|
|
const state2 = {
|
|
done: false,
|
|
value: origin
|
|
};
|
|
const isOutOfBounds = (v) => min !== void 0 && v < min || max !== void 0 && v > max;
|
|
const nearestBoundary = (v) => {
|
|
if (min === void 0)
|
|
return max;
|
|
if (max === void 0)
|
|
return min;
|
|
return Math.abs(min - v) < Math.abs(max - v) ? min : max;
|
|
};
|
|
let amplitude = power * velocity;
|
|
const ideal = origin + amplitude;
|
|
const target = modifyTarget === void 0 ? ideal : modifyTarget(ideal);
|
|
if (target !== ideal)
|
|
amplitude = target - origin;
|
|
const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
|
|
const calcLatest = (t) => target + calcDelta(t);
|
|
const applyFriction = (t) => {
|
|
const delta = calcDelta(t);
|
|
const latest = calcLatest(t);
|
|
state2.done = Math.abs(delta) <= restDelta;
|
|
state2.value = state2.done ? target : latest;
|
|
};
|
|
let timeReachedBoundary;
|
|
let spring$1;
|
|
const checkCatchBoundary = (t) => {
|
|
if (!isOutOfBounds(state2.value))
|
|
return;
|
|
timeReachedBoundary = t;
|
|
spring$1 = spring({
|
|
keyframes: [state2.value, nearestBoundary(state2.value)],
|
|
velocity: calcGeneratorVelocity(calcLatest, t, state2.value),
|
|
// TODO: This should be passing * 1000
|
|
damping: bounceDamping,
|
|
stiffness: bounceStiffness,
|
|
restDelta,
|
|
restSpeed
|
|
});
|
|
};
|
|
checkCatchBoundary(0);
|
|
return {
|
|
calculatedDuration: null,
|
|
next: (t) => {
|
|
let hasUpdatedFrame = false;
|
|
if (!spring$1 && timeReachedBoundary === void 0) {
|
|
hasUpdatedFrame = true;
|
|
applyFriction(t);
|
|
checkCatchBoundary(t);
|
|
}
|
|
if (timeReachedBoundary !== void 0 && t >= timeReachedBoundary) {
|
|
return spring$1.next(t - timeReachedBoundary);
|
|
} else {
|
|
!hasUpdatedFrame && applyFriction(t);
|
|
return state2;
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/easing/ease.mjs
|
|
var easeIn = cubicBezier(0.42, 0, 1, 1);
|
|
var easeOut = cubicBezier(0, 0, 0.58, 1);
|
|
var easeInOut = cubicBezier(0.42, 0, 0.58, 1);
|
|
|
|
// node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs
|
|
var isEasingArray = (ease2) => {
|
|
return Array.isArray(ease2) && typeof ease2[0] !== "number";
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/easing/utils/map.mjs
|
|
var easingLookup = {
|
|
linear: noop,
|
|
easeIn,
|
|
easeInOut,
|
|
easeOut,
|
|
circIn,
|
|
circInOut,
|
|
circOut,
|
|
backIn,
|
|
backInOut,
|
|
backOut,
|
|
anticipate
|
|
};
|
|
var easingDefinitionToFunction = (definition) => {
|
|
if (isBezierDefinition(definition)) {
|
|
invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
|
|
const [x1, y1, x2, y2] = definition;
|
|
return cubicBezier(x1, y1, x2, y2);
|
|
} else if (typeof definition === "string") {
|
|
invariant(easingLookup[definition] !== void 0, `Invalid easing type '${definition}'`);
|
|
return easingLookup[definition];
|
|
}
|
|
return definition;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/interpolate.mjs
|
|
function createMixers(output, ease2, customMixer) {
|
|
const mixers = [];
|
|
const mixerFactory = customMixer || mix;
|
|
const numMixers = output.length - 1;
|
|
for (let i = 0; i < numMixers; i++) {
|
|
let mixer = mixerFactory(output[i], output[i + 1]);
|
|
if (ease2) {
|
|
const easingFunction = Array.isArray(ease2) ? ease2[i] || noop : ease2;
|
|
mixer = pipe(easingFunction, mixer);
|
|
}
|
|
mixers.push(mixer);
|
|
}
|
|
return mixers;
|
|
}
|
|
function interpolate(input, output, { clamp: isClamp = true, ease: ease2, mixer } = {}) {
|
|
const inputLength = input.length;
|
|
invariant(inputLength === output.length, "Both input and output ranges must be the same length");
|
|
if (inputLength === 1)
|
|
return () => output[0];
|
|
if (inputLength === 2 && output[0] === output[1])
|
|
return () => output[1];
|
|
const isZeroDeltaRange = input[0] === input[1];
|
|
if (input[0] > input[inputLength - 1]) {
|
|
input = [...input].reverse();
|
|
output = [...output].reverse();
|
|
}
|
|
const mixers = createMixers(output, ease2, mixer);
|
|
const numMixers = mixers.length;
|
|
const interpolator = (v) => {
|
|
if (isZeroDeltaRange && v < input[0])
|
|
return output[0];
|
|
let i = 0;
|
|
if (numMixers > 1) {
|
|
for (; i < input.length - 2; i++) {
|
|
if (v < input[i + 1])
|
|
break;
|
|
}
|
|
}
|
|
const progressInRange = progress(input[i], input[i + 1], v);
|
|
return mixers[i](progressInRange);
|
|
};
|
|
return isClamp ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v)) : interpolator;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/offsets/fill.mjs
|
|
function fillOffset(offset, remaining) {
|
|
const min = offset[offset.length - 1];
|
|
for (let i = 1; i <= remaining; i++) {
|
|
const offsetProgress = progress(0, remaining, i);
|
|
offset.push(mixNumber(min, 1, offsetProgress));
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/offsets/default.mjs
|
|
function defaultOffset(arr) {
|
|
const offset = [0];
|
|
fillOffset(offset, arr.length - 1);
|
|
return offset;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/offsets/time.mjs
|
|
function convertOffsetToTimes(offset, duration) {
|
|
return offset.map((o) => o * duration);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs
|
|
function defaultEasing(values, easing) {
|
|
return values.map(() => easing || easeInOut).splice(0, values.length - 1);
|
|
}
|
|
function keyframes({ duration = 300, keyframes: keyframeValues, times, ease: ease2 = "easeInOut" }) {
|
|
const easingFunctions = isEasingArray(ease2) ? ease2.map(easingDefinitionToFunction) : easingDefinitionToFunction(ease2);
|
|
const state2 = {
|
|
done: false,
|
|
value: keyframeValues[0]
|
|
};
|
|
const absoluteTimes = convertOffsetToTimes(
|
|
// Only use the provided offsets if they're the correct length
|
|
// TODO Maybe we should warn here if there's a length mismatch
|
|
times && times.length === keyframeValues.length ? times : defaultOffset(keyframeValues),
|
|
duration
|
|
);
|
|
const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
|
|
ease: Array.isArray(easingFunctions) ? easingFunctions : defaultEasing(keyframeValues, easingFunctions)
|
|
});
|
|
return {
|
|
calculatedDuration: duration,
|
|
next: (t) => {
|
|
state2.value = mapTimeToKeyframe(t);
|
|
state2.done = t >= duration;
|
|
return state2;
|
|
}
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs
|
|
var frameloopDriver = (update) => {
|
|
const passTimestamp = ({ timestamp }) => update(timestamp);
|
|
return {
|
|
start: () => frame.update(passTimestamp, true),
|
|
stop: () => cancelFrame(passTimestamp),
|
|
/**
|
|
* If we're processing this frame we can use the
|
|
* framelocked timestamp to keep things in sync.
|
|
*/
|
|
now: () => frameData.isProcessing ? frameData.timestamp : time.now()
|
|
};
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs
|
|
var generators = {
|
|
decay: inertia,
|
|
inertia,
|
|
tween: keyframes,
|
|
keyframes,
|
|
spring
|
|
};
|
|
var percentToProgress = (percent2) => percent2 / 100;
|
|
var MainThreadAnimation = class extends BaseAnimation {
|
|
constructor(options) {
|
|
super(options);
|
|
this.holdTime = null;
|
|
this.cancelTime = null;
|
|
this.currentTime = 0;
|
|
this.playbackSpeed = 1;
|
|
this.pendingPlayState = "running";
|
|
this.startTime = null;
|
|
this.state = "idle";
|
|
this.stop = () => {
|
|
this.resolver.cancel();
|
|
this.isStopped = true;
|
|
if (this.state === "idle")
|
|
return;
|
|
this.teardown();
|
|
const { onStop } = this.options;
|
|
onStop && onStop();
|
|
};
|
|
const { name, motionValue: motionValue2, element, keyframes: keyframes2 } = this.options;
|
|
const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
|
|
const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
|
|
this.resolver = new KeyframeResolver$1(keyframes2, onResolved, name, motionValue2, element);
|
|
this.resolver.scheduleResolve();
|
|
}
|
|
flatten() {
|
|
super.flatten();
|
|
if (this._resolved) {
|
|
Object.assign(this._resolved, this.initPlayback(this._resolved.keyframes));
|
|
}
|
|
}
|
|
initPlayback(keyframes$1) {
|
|
const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = this.options;
|
|
const generatorFactory = isGenerator(type) ? type : generators[type] || keyframes;
|
|
let mapPercentToKeyframes;
|
|
let mirroredGenerator;
|
|
if (generatorFactory !== keyframes && typeof keyframes$1[0] !== "number") {
|
|
if (true) {
|
|
invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
|
|
}
|
|
mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
|
|
keyframes$1 = [0, 100];
|
|
}
|
|
const generator = generatorFactory({ ...this.options, keyframes: keyframes$1 });
|
|
if (repeatType === "mirror") {
|
|
mirroredGenerator = generatorFactory({
|
|
...this.options,
|
|
keyframes: [...keyframes$1].reverse(),
|
|
velocity: -velocity
|
|
});
|
|
}
|
|
if (generator.calculatedDuration === null) {
|
|
generator.calculatedDuration = calcGeneratorDuration(generator);
|
|
}
|
|
const { calculatedDuration } = generator;
|
|
const resolvedDuration = calculatedDuration + repeatDelay;
|
|
const totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
|
|
return {
|
|
generator,
|
|
mirroredGenerator,
|
|
mapPercentToKeyframes,
|
|
calculatedDuration,
|
|
resolvedDuration,
|
|
totalDuration
|
|
};
|
|
}
|
|
onPostResolved() {
|
|
const { autoplay = true } = this.options;
|
|
this.play();
|
|
if (this.pendingPlayState === "paused" || !autoplay) {
|
|
this.pause();
|
|
} else {
|
|
this.state = this.pendingPlayState;
|
|
}
|
|
}
|
|
tick(timestamp, sample = false) {
|
|
const { resolved } = this;
|
|
if (!resolved) {
|
|
const { keyframes: keyframes3 } = this.options;
|
|
return { done: true, value: keyframes3[keyframes3.length - 1] };
|
|
}
|
|
const { finalKeyframe, generator, mirroredGenerator, mapPercentToKeyframes, keyframes: keyframes2, calculatedDuration, totalDuration, resolvedDuration } = resolved;
|
|
if (this.startTime === null)
|
|
return generator.next(0);
|
|
const { delay: delay2, repeat, repeatType, repeatDelay, onUpdate } = this.options;
|
|
if (this.speed > 0) {
|
|
this.startTime = Math.min(this.startTime, timestamp);
|
|
} else if (this.speed < 0) {
|
|
this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);
|
|
}
|
|
if (sample) {
|
|
this.currentTime = timestamp;
|
|
} else if (this.holdTime !== null) {
|
|
this.currentTime = this.holdTime;
|
|
} else {
|
|
this.currentTime = Math.round(timestamp - this.startTime) * this.speed;
|
|
}
|
|
const timeWithoutDelay = this.currentTime - delay2 * (this.speed >= 0 ? 1 : -1);
|
|
const isInDelayPhase = this.speed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration;
|
|
this.currentTime = Math.max(timeWithoutDelay, 0);
|
|
if (this.state === "finished" && this.holdTime === null) {
|
|
this.currentTime = totalDuration;
|
|
}
|
|
let elapsed = this.currentTime;
|
|
let frameGenerator = generator;
|
|
if (repeat) {
|
|
const progress2 = Math.min(this.currentTime, totalDuration) / resolvedDuration;
|
|
let currentIteration = Math.floor(progress2);
|
|
let iterationProgress = progress2 % 1;
|
|
if (!iterationProgress && progress2 >= 1) {
|
|
iterationProgress = 1;
|
|
}
|
|
iterationProgress === 1 && currentIteration--;
|
|
currentIteration = Math.min(currentIteration, repeat + 1);
|
|
const isOddIteration = Boolean(currentIteration % 2);
|
|
if (isOddIteration) {
|
|
if (repeatType === "reverse") {
|
|
iterationProgress = 1 - iterationProgress;
|
|
if (repeatDelay) {
|
|
iterationProgress -= repeatDelay / resolvedDuration;
|
|
}
|
|
} else if (repeatType === "mirror") {
|
|
frameGenerator = mirroredGenerator;
|
|
}
|
|
}
|
|
elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;
|
|
}
|
|
const state2 = isInDelayPhase ? { done: false, value: keyframes2[0] } : frameGenerator.next(elapsed);
|
|
if (mapPercentToKeyframes) {
|
|
state2.value = mapPercentToKeyframes(state2.value);
|
|
}
|
|
let { done } = state2;
|
|
if (!isInDelayPhase && calculatedDuration !== null) {
|
|
done = this.speed >= 0 ? this.currentTime >= totalDuration : this.currentTime <= 0;
|
|
}
|
|
const isAnimationFinished = this.holdTime === null && (this.state === "finished" || this.state === "running" && done);
|
|
if (isAnimationFinished && finalKeyframe !== void 0) {
|
|
state2.value = getFinalKeyframe(keyframes2, this.options, finalKeyframe);
|
|
}
|
|
if (onUpdate) {
|
|
onUpdate(state2.value);
|
|
}
|
|
if (isAnimationFinished) {
|
|
this.finish();
|
|
}
|
|
return state2;
|
|
}
|
|
get duration() {
|
|
const { resolved } = this;
|
|
return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0;
|
|
}
|
|
get time() {
|
|
return millisecondsToSeconds(this.currentTime);
|
|
}
|
|
set time(newTime) {
|
|
newTime = secondsToMilliseconds(newTime);
|
|
this.currentTime = newTime;
|
|
if (this.holdTime !== null || this.speed === 0) {
|
|
this.holdTime = newTime;
|
|
} else if (this.driver) {
|
|
this.startTime = this.driver.now() - newTime / this.speed;
|
|
}
|
|
}
|
|
get speed() {
|
|
return this.playbackSpeed;
|
|
}
|
|
set speed(newSpeed) {
|
|
const hasChanged = this.playbackSpeed !== newSpeed;
|
|
this.playbackSpeed = newSpeed;
|
|
if (hasChanged) {
|
|
this.time = millisecondsToSeconds(this.currentTime);
|
|
}
|
|
}
|
|
play() {
|
|
if (!this.resolver.isScheduled) {
|
|
this.resolver.resume();
|
|
}
|
|
if (!this._resolved) {
|
|
this.pendingPlayState = "running";
|
|
return;
|
|
}
|
|
if (this.isStopped)
|
|
return;
|
|
const { driver = frameloopDriver, onPlay, startTime } = this.options;
|
|
if (!this.driver) {
|
|
this.driver = driver((timestamp) => this.tick(timestamp));
|
|
}
|
|
onPlay && onPlay();
|
|
const now2 = this.driver.now();
|
|
if (this.holdTime !== null) {
|
|
this.startTime = now2 - this.holdTime;
|
|
} else if (!this.startTime) {
|
|
this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
|
|
} else if (this.state === "finished") {
|
|
this.startTime = now2;
|
|
}
|
|
if (this.state === "finished") {
|
|
this.updateFinishedPromise();
|
|
}
|
|
this.cancelTime = this.startTime;
|
|
this.holdTime = null;
|
|
this.state = "running";
|
|
this.driver.start();
|
|
}
|
|
pause() {
|
|
var _a;
|
|
if (!this._resolved) {
|
|
this.pendingPlayState = "paused";
|
|
return;
|
|
}
|
|
this.state = "paused";
|
|
this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;
|
|
}
|
|
complete() {
|
|
if (this.state !== "running") {
|
|
this.play();
|
|
}
|
|
this.pendingPlayState = this.state = "finished";
|
|
this.holdTime = null;
|
|
}
|
|
finish() {
|
|
this.teardown();
|
|
this.state = "finished";
|
|
const { onComplete } = this.options;
|
|
onComplete && onComplete();
|
|
}
|
|
cancel() {
|
|
if (this.cancelTime !== null) {
|
|
this.tick(this.cancelTime);
|
|
}
|
|
this.teardown();
|
|
this.updateFinishedPromise();
|
|
}
|
|
teardown() {
|
|
this.state = "idle";
|
|
this.stopDriver();
|
|
this.resolveFinishedPromise();
|
|
this.updateFinishedPromise();
|
|
this.startTime = this.cancelTime = null;
|
|
this.resolver.cancel();
|
|
}
|
|
stopDriver() {
|
|
if (!this.driver)
|
|
return;
|
|
this.driver.stop();
|
|
this.driver = void 0;
|
|
}
|
|
sample(time2) {
|
|
this.startTime = 0;
|
|
return this.tick(time2, true);
|
|
}
|
|
};
|
|
function animateValue(options) {
|
|
return new MainThreadAnimation(options);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/utils/accelerated-values.mjs
|
|
var acceleratedValues = /* @__PURE__ */ new Set([
|
|
"opacity",
|
|
"clipPath",
|
|
"filter",
|
|
"transform"
|
|
// TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
|
|
// or until we implement support for linear() easing.
|
|
// "background-color"
|
|
]);
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs
|
|
function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeInOut", times } = {}) {
|
|
const keyframeOptions = { [valueName]: keyframes2 };
|
|
if (times)
|
|
keyframeOptions.offset = times;
|
|
const easing = mapEasingToNativeEasing(ease2, duration);
|
|
if (Array.isArray(easing))
|
|
keyframeOptions.easing = easing;
|
|
return element.animate(keyframeOptions, {
|
|
delay: delay2,
|
|
duration,
|
|
easing: !Array.isArray(easing) ? easing : "linear",
|
|
fill: "both",
|
|
iterations: repeat + 1,
|
|
direction: repeatType === "reverse" ? "alternate" : "normal"
|
|
});
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs
|
|
var supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs
|
|
var sampleDelta = 10;
|
|
var maxDuration = 2e4;
|
|
function requiresPregeneratedKeyframes(options) {
|
|
return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
|
|
}
|
|
function pregenerateKeyframes(keyframes2, options) {
|
|
const sampleAnimation = new MainThreadAnimation({
|
|
...options,
|
|
keyframes: keyframes2,
|
|
repeat: 0,
|
|
delay: 0,
|
|
isGenerator: true
|
|
});
|
|
let state2 = { done: false, value: keyframes2[0] };
|
|
const pregeneratedKeyframes = [];
|
|
let t = 0;
|
|
while (!state2.done && t < maxDuration) {
|
|
state2 = sampleAnimation.sample(t);
|
|
pregeneratedKeyframes.push(state2.value);
|
|
t += sampleDelta;
|
|
}
|
|
return {
|
|
times: void 0,
|
|
keyframes: pregeneratedKeyframes,
|
|
duration: t - sampleDelta,
|
|
ease: "linear"
|
|
};
|
|
}
|
|
var unsupportedEasingFunctions = {
|
|
anticipate,
|
|
backInOut,
|
|
circInOut
|
|
};
|
|
function isUnsupportedEase(key) {
|
|
return key in unsupportedEasingFunctions;
|
|
}
|
|
var AcceleratedAnimation = class extends BaseAnimation {
|
|
constructor(options) {
|
|
super(options);
|
|
const { name, motionValue: motionValue2, element, keyframes: keyframes2 } = this.options;
|
|
this.resolver = new DOMKeyframesResolver(keyframes2, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue2, element);
|
|
this.resolver.scheduleResolve();
|
|
}
|
|
initPlayback(keyframes2, finalKeyframe) {
|
|
let { duration = 300, times, ease: ease2, type, motionValue: motionValue2, name, startTime } = this.options;
|
|
if (!motionValue2.owner || !motionValue2.owner.current) {
|
|
return false;
|
|
}
|
|
if (typeof ease2 === "string" && supportsLinearEasing() && isUnsupportedEase(ease2)) {
|
|
ease2 = unsupportedEasingFunctions[ease2];
|
|
}
|
|
if (requiresPregeneratedKeyframes(this.options)) {
|
|
const { onComplete, onUpdate, motionValue: motionValue3, element, ...options } = this.options;
|
|
const pregeneratedAnimation = pregenerateKeyframes(keyframes2, options);
|
|
keyframes2 = pregeneratedAnimation.keyframes;
|
|
if (keyframes2.length === 1) {
|
|
keyframes2[1] = keyframes2[0];
|
|
}
|
|
duration = pregeneratedAnimation.duration;
|
|
times = pregeneratedAnimation.times;
|
|
ease2 = pregeneratedAnimation.ease;
|
|
type = "keyframes";
|
|
}
|
|
const animation = startWaapiAnimation(motionValue2.owner.current, name, keyframes2, { ...this.options, duration, times, ease: ease2 });
|
|
animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
|
|
if (this.pendingTimeline) {
|
|
attachTimeline(animation, this.pendingTimeline);
|
|
this.pendingTimeline = void 0;
|
|
} else {
|
|
animation.onfinish = () => {
|
|
const { onComplete } = this.options;
|
|
motionValue2.set(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
|
|
onComplete && onComplete();
|
|
this.cancel();
|
|
this.resolveFinishedPromise();
|
|
};
|
|
}
|
|
return {
|
|
animation,
|
|
duration,
|
|
times,
|
|
type,
|
|
ease: ease2,
|
|
keyframes: keyframes2
|
|
};
|
|
}
|
|
get duration() {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return 0;
|
|
const { duration } = resolved;
|
|
return millisecondsToSeconds(duration);
|
|
}
|
|
get time() {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return 0;
|
|
const { animation } = resolved;
|
|
return millisecondsToSeconds(animation.currentTime || 0);
|
|
}
|
|
set time(newTime) {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return;
|
|
const { animation } = resolved;
|
|
animation.currentTime = secondsToMilliseconds(newTime);
|
|
}
|
|
get speed() {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return 1;
|
|
const { animation } = resolved;
|
|
return animation.playbackRate;
|
|
}
|
|
set speed(newSpeed) {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return;
|
|
const { animation } = resolved;
|
|
animation.playbackRate = newSpeed;
|
|
}
|
|
get state() {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return "idle";
|
|
const { animation } = resolved;
|
|
return animation.playState;
|
|
}
|
|
get startTime() {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return null;
|
|
const { animation } = resolved;
|
|
return animation.startTime;
|
|
}
|
|
/**
|
|
* Replace the default DocumentTimeline with another AnimationTimeline.
|
|
* Currently used for scroll animations.
|
|
*/
|
|
attachTimeline(timeline) {
|
|
if (!this._resolved) {
|
|
this.pendingTimeline = timeline;
|
|
} else {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return noop;
|
|
const { animation } = resolved;
|
|
attachTimeline(animation, timeline);
|
|
}
|
|
return noop;
|
|
}
|
|
play() {
|
|
if (this.isStopped)
|
|
return;
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return;
|
|
const { animation } = resolved;
|
|
if (animation.playState === "finished") {
|
|
this.updateFinishedPromise();
|
|
}
|
|
animation.play();
|
|
}
|
|
pause() {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return;
|
|
const { animation } = resolved;
|
|
animation.pause();
|
|
}
|
|
stop() {
|
|
this.resolver.cancel();
|
|
this.isStopped = true;
|
|
if (this.state === "idle")
|
|
return;
|
|
this.resolveFinishedPromise();
|
|
this.updateFinishedPromise();
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return;
|
|
const { animation, keyframes: keyframes2, duration, type, ease: ease2, times } = resolved;
|
|
if (animation.playState === "idle" || animation.playState === "finished") {
|
|
return;
|
|
}
|
|
if (this.time) {
|
|
const { motionValue: motionValue2, onUpdate, onComplete, element, ...options } = this.options;
|
|
const sampleAnimation = new MainThreadAnimation({
|
|
...options,
|
|
keyframes: keyframes2,
|
|
duration,
|
|
type,
|
|
ease: ease2,
|
|
times,
|
|
isGenerator: true
|
|
});
|
|
const sampleTime = secondsToMilliseconds(this.time);
|
|
motionValue2.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
|
|
}
|
|
const { onStop } = this.options;
|
|
onStop && onStop();
|
|
this.cancel();
|
|
}
|
|
complete() {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return;
|
|
resolved.animation.finish();
|
|
}
|
|
cancel() {
|
|
const { resolved } = this;
|
|
if (!resolved)
|
|
return;
|
|
resolved.animation.cancel();
|
|
}
|
|
static supports(options) {
|
|
const { motionValue: motionValue2, name, repeatDelay, repeatType, damping, type } = options;
|
|
if (!motionValue2 || !motionValue2.owner || !(motionValue2.owner.current instanceof HTMLElement)) {
|
|
return false;
|
|
}
|
|
const { onUpdate, transformTemplate } = motionValue2.owner.getProps();
|
|
return supportsWaapi() && name && acceleratedValues.has(name) && /**
|
|
* If we're outputting values to onUpdate then we can't use WAAPI as there's
|
|
* no way to read the value from WAAPI every frame.
|
|
*/
|
|
!onUpdate && !transformTemplate && !repeatDelay && repeatType !== "mirror" && damping !== 0 && type !== "inertia";
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs
|
|
var underDampedSpring = {
|
|
type: "spring",
|
|
stiffness: 500,
|
|
damping: 25,
|
|
restSpeed: 10
|
|
};
|
|
var criticallyDampedSpring = (target) => ({
|
|
type: "spring",
|
|
stiffness: 550,
|
|
damping: target === 0 ? 2 * Math.sqrt(550) : 30,
|
|
restSpeed: 10
|
|
});
|
|
var keyframesTransition = {
|
|
type: "keyframes",
|
|
duration: 0.8
|
|
};
|
|
var ease = {
|
|
type: "keyframes",
|
|
ease: [0.25, 0.1, 0.35, 1],
|
|
duration: 0.3
|
|
};
|
|
var getDefaultTransition = (valueKey, { keyframes: keyframes2 }) => {
|
|
if (keyframes2.length > 2) {
|
|
return keyframesTransition;
|
|
} else if (transformProps.has(valueKey)) {
|
|
return valueKey.startsWith("scale") ? criticallyDampedSpring(keyframes2[1]) : underDampedSpring;
|
|
}
|
|
return ease;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/utils/is-transition-defined.mjs
|
|
function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
|
|
return !!Object.keys(transition).length;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs
|
|
var animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
|
|
const valueTransition = getValueTransition(transition, name) || {};
|
|
const delay2 = valueTransition.delay || transition.delay || 0;
|
|
let { elapsed = 0 } = transition;
|
|
elapsed = elapsed - secondsToMilliseconds(delay2);
|
|
let options = {
|
|
keyframes: Array.isArray(target) ? target : [null, target],
|
|
ease: "easeOut",
|
|
velocity: value.getVelocity(),
|
|
...valueTransition,
|
|
delay: -elapsed,
|
|
onUpdate: (v) => {
|
|
value.set(v);
|
|
valueTransition.onUpdate && valueTransition.onUpdate(v);
|
|
},
|
|
onComplete: () => {
|
|
onComplete();
|
|
valueTransition.onComplete && valueTransition.onComplete();
|
|
},
|
|
name,
|
|
motionValue: value,
|
|
element: isHandoff ? void 0 : element
|
|
};
|
|
if (!isTransitionDefined(valueTransition)) {
|
|
options = {
|
|
...options,
|
|
...getDefaultTransition(name, options)
|
|
};
|
|
}
|
|
if (options.duration) {
|
|
options.duration = secondsToMilliseconds(options.duration);
|
|
}
|
|
if (options.repeatDelay) {
|
|
options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
|
|
}
|
|
if (options.from !== void 0) {
|
|
options.keyframes[0] = options.from;
|
|
}
|
|
let shouldSkip = false;
|
|
if (options.type === false || options.duration === 0 && !options.repeatDelay) {
|
|
options.duration = 0;
|
|
if (options.delay === 0) {
|
|
shouldSkip = true;
|
|
}
|
|
}
|
|
if (instantAnimationState.current || MotionGlobalConfig.skipAnimations) {
|
|
shouldSkip = true;
|
|
options.duration = 0;
|
|
options.delay = 0;
|
|
}
|
|
if (shouldSkip && !isHandoff && value.get() !== void 0) {
|
|
const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
|
|
if (finalKeyframe !== void 0) {
|
|
frame.update(() => {
|
|
options.onUpdate(finalKeyframe);
|
|
options.onComplete();
|
|
});
|
|
return new GroupPlaybackControls([]);
|
|
}
|
|
}
|
|
if (!isHandoff && AcceleratedAnimation.supports(options)) {
|
|
return new AcceleratedAnimation(options);
|
|
} else {
|
|
return new MainThreadAnimation(options);
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs
|
|
function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
|
|
const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
|
|
needsAnimating[key] = false;
|
|
return shouldBlock;
|
|
}
|
|
function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0, transitionOverride, type } = {}) {
|
|
var _a;
|
|
let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
|
|
if (transitionOverride)
|
|
transition = transitionOverride;
|
|
const animations2 = [];
|
|
const animationTypeState = type && visualElement.animationState && visualElement.animationState.getState()[type];
|
|
for (const key in target) {
|
|
const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null);
|
|
const valueTarget = target[key];
|
|
if (valueTarget === void 0 || animationTypeState && shouldBlockAnimation(animationTypeState, key)) {
|
|
continue;
|
|
}
|
|
const valueTransition = {
|
|
delay: delay2,
|
|
...getValueTransition(transition || {}, key)
|
|
};
|
|
let isHandoff = false;
|
|
if (window.MotionHandoffAnimation) {
|
|
const appearId = getOptimisedAppearId(visualElement);
|
|
if (appearId) {
|
|
const startTime = window.MotionHandoffAnimation(appearId, key, frame);
|
|
if (startTime !== null) {
|
|
valueTransition.startTime = startTime;
|
|
isHandoff = true;
|
|
}
|
|
}
|
|
}
|
|
addValueToWillChange(visualElement, key);
|
|
value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && positionalKeys.has(key) ? { type: false } : valueTransition, visualElement, isHandoff));
|
|
const animation = value.animation;
|
|
if (animation) {
|
|
animations2.push(animation);
|
|
}
|
|
}
|
|
if (transitionEnd) {
|
|
Promise.all(animations2).then(() => {
|
|
frame.update(() => {
|
|
transitionEnd && setTarget(visualElement, transitionEnd);
|
|
});
|
|
});
|
|
}
|
|
return animations2;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs
|
|
function animateVariant(visualElement, variant, options = {}) {
|
|
var _a;
|
|
const resolved = resolveVariant(visualElement, variant, options.type === "exit" ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom : void 0);
|
|
let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
|
|
if (options.transitionOverride) {
|
|
transition = options.transitionOverride;
|
|
}
|
|
const getAnimation = resolved ? () => Promise.all(animateTarget(visualElement, resolved, options)) : () => Promise.resolve();
|
|
const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size ? (forwardDelay = 0) => {
|
|
const { delayChildren = 0, staggerChildren, staggerDirection } = transition;
|
|
return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
|
|
} : () => Promise.resolve();
|
|
const { when } = transition;
|
|
if (when) {
|
|
const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
|
|
return first().then(() => last());
|
|
} else {
|
|
return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
|
|
}
|
|
}
|
|
function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
|
|
const animations2 = [];
|
|
const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
|
|
const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
|
|
Array.from(visualElement.variantChildren).sort(sortByTreeOrder).forEach((child, i) => {
|
|
child.notify("AnimationStart", variant);
|
|
animations2.push(animateVariant(child, variant, {
|
|
...options,
|
|
delay: delayChildren + generateStaggerDuration(i)
|
|
}).then(() => child.notify("AnimationComplete", variant)));
|
|
});
|
|
return Promise.all(animations2);
|
|
}
|
|
function sortByTreeOrder(a, b) {
|
|
return a.sortNodePosition(b);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/interfaces/visual-element.mjs
|
|
function animateVisualElement(visualElement, definition, options = {}) {
|
|
visualElement.notify("AnimationStart", definition);
|
|
let animation;
|
|
if (Array.isArray(definition)) {
|
|
const animations2 = definition.map((variant) => animateVariant(visualElement, variant, options));
|
|
animation = Promise.all(animations2);
|
|
} else if (typeof definition === "string") {
|
|
animation = animateVariant(visualElement, definition, options);
|
|
} else {
|
|
const resolvedDefinition = typeof definition === "function" ? resolveVariant(visualElement, definition, options.custom) : definition;
|
|
animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
|
|
}
|
|
return animation.then(() => {
|
|
visualElement.notify("AnimationComplete", definition);
|
|
});
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/get-variant-context.mjs
|
|
var numVariantProps = variantProps.length;
|
|
function getVariantContext(visualElement) {
|
|
if (!visualElement)
|
|
return void 0;
|
|
if (!visualElement.isControllingVariants) {
|
|
const context2 = visualElement.parent ? getVariantContext(visualElement.parent) || {} : {};
|
|
if (visualElement.props.initial !== void 0) {
|
|
context2.initial = visualElement.props.initial;
|
|
}
|
|
return context2;
|
|
}
|
|
const context = {};
|
|
for (let i = 0; i < numVariantProps; i++) {
|
|
const name = variantProps[i];
|
|
const prop = visualElement.props[name];
|
|
if (isVariantLabel(prop) || prop === false) {
|
|
context[name] = prop;
|
|
}
|
|
}
|
|
return context;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/animation-state.mjs
|
|
var reversePriorityOrder = [...variantPriorityOrder].reverse();
|
|
var numAnimationTypes = variantPriorityOrder.length;
|
|
function animateList(visualElement) {
|
|
return (animations2) => Promise.all(animations2.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
|
|
}
|
|
function createAnimationState(visualElement) {
|
|
let animate2 = animateList(visualElement);
|
|
let state2 = createState();
|
|
let isInitialRender = true;
|
|
const buildResolvedTypeValues = (type) => (acc, definition) => {
|
|
var _a;
|
|
const resolved = resolveVariant(visualElement, definition, type === "exit" ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom : void 0);
|
|
if (resolved) {
|
|
const { transition, transitionEnd, ...target } = resolved;
|
|
acc = { ...acc, ...target, ...transitionEnd };
|
|
}
|
|
return acc;
|
|
};
|
|
function setAnimateFunction(makeAnimator) {
|
|
animate2 = makeAnimator(visualElement);
|
|
}
|
|
function animateChanges(changedActiveType) {
|
|
const { props } = visualElement;
|
|
const context = getVariantContext(visualElement.parent) || {};
|
|
const animations2 = [];
|
|
const removedKeys = /* @__PURE__ */ new Set();
|
|
let encounteredKeys = {};
|
|
let removedVariantIndex = Infinity;
|
|
for (let i = 0; i < numAnimationTypes; i++) {
|
|
const type = reversePriorityOrder[i];
|
|
const typeState = state2[type];
|
|
const prop = props[type] !== void 0 ? props[type] : context[type];
|
|
const propIsVariant = isVariantLabel(prop);
|
|
const activeDelta = type === changedActiveType ? typeState.isActive : null;
|
|
if (activeDelta === false)
|
|
removedVariantIndex = i;
|
|
let isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
|
|
if (isInherited && isInitialRender && visualElement.manuallyAnimateOnMount) {
|
|
isInherited = false;
|
|
}
|
|
typeState.protectedKeys = { ...encounteredKeys };
|
|
if (
|
|
// If it isn't active and hasn't *just* been set as inactive
|
|
!typeState.isActive && activeDelta === null || // If we didn't and don't have any defined prop for this animation type
|
|
!prop && !typeState.prevProp || // Or if the prop doesn't define an animation
|
|
isAnimationControls(prop) || typeof prop === "boolean"
|
|
) {
|
|
continue;
|
|
}
|
|
const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
|
|
let shouldAnimateType = variantDidChange || // If we're making this variant active, we want to always make it active
|
|
type === changedActiveType && typeState.isActive && !isInherited && propIsVariant || // If we removed a higher-priority variant (i is in reverse order)
|
|
i > removedVariantIndex && propIsVariant;
|
|
let handledRemovedValues = false;
|
|
const definitionList = Array.isArray(prop) ? prop : [prop];
|
|
let resolvedValues = definitionList.reduce(buildResolvedTypeValues(type), {});
|
|
if (activeDelta === false)
|
|
resolvedValues = {};
|
|
const { prevResolvedValues = {} } = typeState;
|
|
const allKeys = {
|
|
...prevResolvedValues,
|
|
...resolvedValues
|
|
};
|
|
const markToAnimate = (key) => {
|
|
shouldAnimateType = true;
|
|
if (removedKeys.has(key)) {
|
|
handledRemovedValues = true;
|
|
removedKeys.delete(key);
|
|
}
|
|
typeState.needsAnimating[key] = true;
|
|
const motionValue2 = visualElement.getValue(key);
|
|
if (motionValue2)
|
|
motionValue2.liveStyle = false;
|
|
};
|
|
for (const key in allKeys) {
|
|
const next = resolvedValues[key];
|
|
const prev = prevResolvedValues[key];
|
|
if (encounteredKeys.hasOwnProperty(key))
|
|
continue;
|
|
let valueHasChanged = false;
|
|
if (isKeyframesTarget(next) && isKeyframesTarget(prev)) {
|
|
valueHasChanged = !shallowCompare(next, prev);
|
|
} else {
|
|
valueHasChanged = next !== prev;
|
|
}
|
|
if (valueHasChanged) {
|
|
if (next !== void 0 && next !== null) {
|
|
markToAnimate(key);
|
|
} else {
|
|
removedKeys.add(key);
|
|
}
|
|
} else if (next !== void 0 && removedKeys.has(key)) {
|
|
markToAnimate(key);
|
|
} else {
|
|
typeState.protectedKeys[key] = true;
|
|
}
|
|
}
|
|
typeState.prevProp = prop;
|
|
typeState.prevResolvedValues = resolvedValues;
|
|
if (typeState.isActive) {
|
|
encounteredKeys = { ...encounteredKeys, ...resolvedValues };
|
|
}
|
|
if (isInitialRender && visualElement.blockInitialAnimation) {
|
|
shouldAnimateType = false;
|
|
}
|
|
const willAnimateViaParent = isInherited && variantDidChange;
|
|
const needsAnimating = !willAnimateViaParent || handledRemovedValues;
|
|
if (shouldAnimateType && needsAnimating) {
|
|
animations2.push(...definitionList.map((animation) => ({
|
|
animation,
|
|
options: { type }
|
|
})));
|
|
}
|
|
}
|
|
if (removedKeys.size) {
|
|
const fallbackAnimation = {};
|
|
removedKeys.forEach((key) => {
|
|
const fallbackTarget = visualElement.getBaseTarget(key);
|
|
const motionValue2 = visualElement.getValue(key);
|
|
if (motionValue2)
|
|
motionValue2.liveStyle = true;
|
|
fallbackAnimation[key] = fallbackTarget !== null && fallbackTarget !== void 0 ? fallbackTarget : null;
|
|
});
|
|
animations2.push({ animation: fallbackAnimation });
|
|
}
|
|
let shouldAnimate = Boolean(animations2.length);
|
|
if (isInitialRender && (props.initial === false || props.initial === props.animate) && !visualElement.manuallyAnimateOnMount) {
|
|
shouldAnimate = false;
|
|
}
|
|
isInitialRender = false;
|
|
return shouldAnimate ? animate2(animations2) : Promise.resolve();
|
|
}
|
|
function setActive(type, isActive) {
|
|
var _a;
|
|
if (state2[type].isActive === isActive)
|
|
return Promise.resolve();
|
|
(_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => {
|
|
var _a2;
|
|
return (_a2 = child.animationState) === null || _a2 === void 0 ? void 0 : _a2.setActive(type, isActive);
|
|
});
|
|
state2[type].isActive = isActive;
|
|
const animations2 = animateChanges(type);
|
|
for (const key in state2) {
|
|
state2[key].protectedKeys = {};
|
|
}
|
|
return animations2;
|
|
}
|
|
return {
|
|
animateChanges,
|
|
setActive,
|
|
setAnimateFunction,
|
|
getState: () => state2,
|
|
reset: () => {
|
|
state2 = createState();
|
|
isInitialRender = true;
|
|
}
|
|
};
|
|
}
|
|
function checkVariantsDidChange(prev, next) {
|
|
if (typeof next === "string") {
|
|
return next !== prev;
|
|
} else if (Array.isArray(next)) {
|
|
return !shallowCompare(next, prev);
|
|
}
|
|
return false;
|
|
}
|
|
function createTypeState(isActive = false) {
|
|
return {
|
|
isActive,
|
|
protectedKeys: {},
|
|
needsAnimating: {},
|
|
prevResolvedValues: {}
|
|
};
|
|
}
|
|
function createState() {
|
|
return {
|
|
animate: createTypeState(true),
|
|
whileInView: createTypeState(),
|
|
whileHover: createTypeState(),
|
|
whileTap: createTypeState(),
|
|
whileDrag: createTypeState(),
|
|
whileFocus: createTypeState(),
|
|
exit: createTypeState()
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/Feature.mjs
|
|
var Feature = class {
|
|
constructor(node) {
|
|
this.isMounted = false;
|
|
this.node = node;
|
|
}
|
|
update() {
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/animation/index.mjs
|
|
var AnimationFeature = class extends Feature {
|
|
/**
|
|
* We dynamically generate the AnimationState manager as it contains a reference
|
|
* to the underlying animation library. We only want to load that if we load this,
|
|
* so people can optionally code split it out using the `m` component.
|
|
*/
|
|
constructor(node) {
|
|
super(node);
|
|
node.animationState || (node.animationState = createAnimationState(node));
|
|
}
|
|
updateAnimationControlsSubscription() {
|
|
const { animate: animate2 } = this.node.getProps();
|
|
if (isAnimationControls(animate2)) {
|
|
this.unmountControls = animate2.subscribe(this.node);
|
|
}
|
|
}
|
|
/**
|
|
* Subscribe any provided AnimationControls to the component's VisualElement
|
|
*/
|
|
mount() {
|
|
this.updateAnimationControlsSubscription();
|
|
}
|
|
update() {
|
|
const { animate: animate2 } = this.node.getProps();
|
|
const { animate: prevAnimate } = this.node.prevProps || {};
|
|
if (animate2 !== prevAnimate) {
|
|
this.updateAnimationControlsSubscription();
|
|
}
|
|
}
|
|
unmount() {
|
|
var _a;
|
|
this.node.animationState.reset();
|
|
(_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/animation/exit.mjs
|
|
var id = 0;
|
|
var ExitAnimationFeature = class extends Feature {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.id = id++;
|
|
}
|
|
update() {
|
|
if (!this.node.presenceContext)
|
|
return;
|
|
const { isPresent: isPresent2, onExitComplete } = this.node.presenceContext;
|
|
const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
|
|
if (!this.node.animationState || isPresent2 === prevIsPresent) {
|
|
return;
|
|
}
|
|
const exitAnimation = this.node.animationState.setActive("exit", !isPresent2);
|
|
if (onExitComplete && !isPresent2) {
|
|
exitAnimation.then(() => onExitComplete(this.id));
|
|
}
|
|
}
|
|
mount() {
|
|
const { register } = this.node.presenceContext || {};
|
|
if (register) {
|
|
this.unmount = register(this.id);
|
|
}
|
|
}
|
|
unmount() {
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/animations.mjs
|
|
var animations = {
|
|
animation: {
|
|
Feature: AnimationFeature
|
|
},
|
|
exit: {
|
|
Feature: ExitAnimationFeature
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/events/add-dom-event.mjs
|
|
function addDomEvent(target, eventName, handler, options = { passive: true }) {
|
|
target.addEventListener(eventName, handler, options);
|
|
return () => target.removeEventListener(eventName, handler);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/events/event-info.mjs
|
|
function extractEventInfo(event) {
|
|
return {
|
|
point: {
|
|
x: event.pageX,
|
|
y: event.pageY
|
|
}
|
|
};
|
|
}
|
|
var addPointerInfo = (handler) => {
|
|
return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/events/add-pointer-event.mjs
|
|
function addPointerEvent(target, eventName, handler, options) {
|
|
return addDomEvent(target, eventName, addPointerInfo(handler), options);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/distance.mjs
|
|
var distance = (a, b) => Math.abs(a - b);
|
|
function distance2D(a, b) {
|
|
const xDelta = distance(a.x, b.x);
|
|
const yDelta = distance(a.y, b.y);
|
|
return Math.sqrt(xDelta ** 2 + yDelta ** 2);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs
|
|
var PanSession = class {
|
|
constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) {
|
|
this.startEvent = null;
|
|
this.lastMoveEvent = null;
|
|
this.lastMoveEventInfo = null;
|
|
this.handlers = {};
|
|
this.contextWindow = window;
|
|
this.updatePoint = () => {
|
|
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
|
|
return;
|
|
const info2 = getPanInfo(this.lastMoveEventInfo, this.history);
|
|
const isPanStarted = this.startEvent !== null;
|
|
const isDistancePastThreshold = distance2D(info2.offset, { x: 0, y: 0 }) >= 3;
|
|
if (!isPanStarted && !isDistancePastThreshold)
|
|
return;
|
|
const { point: point3 } = info2;
|
|
const { timestamp: timestamp2 } = frameData;
|
|
this.history.push({ ...point3, timestamp: timestamp2 });
|
|
const { onStart, onMove } = this.handlers;
|
|
if (!isPanStarted) {
|
|
onStart && onStart(this.lastMoveEvent, info2);
|
|
this.startEvent = this.lastMoveEvent;
|
|
}
|
|
onMove && onMove(this.lastMoveEvent, info2);
|
|
};
|
|
this.handlePointerMove = (event2, info2) => {
|
|
this.lastMoveEvent = event2;
|
|
this.lastMoveEventInfo = transformPoint(info2, this.transformPagePoint);
|
|
frame.update(this.updatePoint, true);
|
|
};
|
|
this.handlePointerUp = (event2, info2) => {
|
|
this.end();
|
|
const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
|
|
if (this.dragSnapToOrigin)
|
|
resumeAnimation && resumeAnimation();
|
|
if (!(this.lastMoveEvent && this.lastMoveEventInfo))
|
|
return;
|
|
const panInfo = getPanInfo(event2.type === "pointercancel" ? this.lastMoveEventInfo : transformPoint(info2, this.transformPagePoint), this.history);
|
|
if (this.startEvent && onEnd) {
|
|
onEnd(event2, panInfo);
|
|
}
|
|
onSessionEnd && onSessionEnd(event2, panInfo);
|
|
};
|
|
if (!isPrimaryPointer(event))
|
|
return;
|
|
this.dragSnapToOrigin = dragSnapToOrigin;
|
|
this.handlers = handlers;
|
|
this.transformPagePoint = transformPagePoint;
|
|
this.contextWindow = contextWindow || window;
|
|
const info = extractEventInfo(event);
|
|
const initialInfo = transformPoint(info, this.transformPagePoint);
|
|
const { point: point2 } = initialInfo;
|
|
const { timestamp } = frameData;
|
|
this.history = [{ ...point2, timestamp }];
|
|
const { onSessionStart } = handlers;
|
|
onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
|
|
this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
|
|
}
|
|
updateHandlers(handlers) {
|
|
this.handlers = handlers;
|
|
}
|
|
end() {
|
|
this.removeListeners && this.removeListeners();
|
|
cancelFrame(this.updatePoint);
|
|
}
|
|
};
|
|
function transformPoint(info, transformPagePoint) {
|
|
return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
|
|
}
|
|
function subtractPoint(a, b) {
|
|
return { x: a.x - b.x, y: a.y - b.y };
|
|
}
|
|
function getPanInfo({ point: point2 }, history) {
|
|
return {
|
|
point: point2,
|
|
delta: subtractPoint(point2, lastDevicePoint(history)),
|
|
offset: subtractPoint(point2, startDevicePoint(history)),
|
|
velocity: getVelocity(history, 0.1)
|
|
};
|
|
}
|
|
function startDevicePoint(history) {
|
|
return history[0];
|
|
}
|
|
function lastDevicePoint(history) {
|
|
return history[history.length - 1];
|
|
}
|
|
function getVelocity(history, timeDelta) {
|
|
if (history.length < 2) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
let i = history.length - 1;
|
|
let timestampedPoint = null;
|
|
const lastPoint = lastDevicePoint(history);
|
|
while (i >= 0) {
|
|
timestampedPoint = history[i];
|
|
if (lastPoint.timestamp - timestampedPoint.timestamp > secondsToMilliseconds(timeDelta)) {
|
|
break;
|
|
}
|
|
i--;
|
|
}
|
|
if (!timestampedPoint) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
const time2 = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
|
|
if (time2 === 0) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
const currentVelocity = {
|
|
x: (lastPoint.x - timestampedPoint.x) / time2,
|
|
y: (lastPoint.y - timestampedPoint.y) / time2
|
|
};
|
|
if (currentVelocity.x === Infinity) {
|
|
currentVelocity.x = 0;
|
|
}
|
|
if (currentVelocity.y === Infinity) {
|
|
currentVelocity.y = 0;
|
|
}
|
|
return currentVelocity;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/geometry/delta-calc.mjs
|
|
var SCALE_PRECISION = 1e-4;
|
|
var SCALE_MIN = 1 - SCALE_PRECISION;
|
|
var SCALE_MAX = 1 + SCALE_PRECISION;
|
|
var TRANSLATE_PRECISION = 0.01;
|
|
var TRANSLATE_MIN = 0 - TRANSLATE_PRECISION;
|
|
var TRANSLATE_MAX = 0 + TRANSLATE_PRECISION;
|
|
function calcLength(axis) {
|
|
return axis.max - axis.min;
|
|
}
|
|
function isNear(value, target, maxDistance) {
|
|
return Math.abs(value - target) <= maxDistance;
|
|
}
|
|
function calcAxisDelta(delta, source, target, origin = 0.5) {
|
|
delta.origin = origin;
|
|
delta.originPoint = mixNumber(source.min, source.max, delta.origin);
|
|
delta.scale = calcLength(target) / calcLength(source);
|
|
delta.translate = mixNumber(target.min, target.max, delta.origin) - delta.originPoint;
|
|
if (delta.scale >= SCALE_MIN && delta.scale <= SCALE_MAX || isNaN(delta.scale)) {
|
|
delta.scale = 1;
|
|
}
|
|
if (delta.translate >= TRANSLATE_MIN && delta.translate <= TRANSLATE_MAX || isNaN(delta.translate)) {
|
|
delta.translate = 0;
|
|
}
|
|
}
|
|
function calcBoxDelta(delta, source, target, origin) {
|
|
calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : void 0);
|
|
calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : void 0);
|
|
}
|
|
function calcRelativeAxis(target, relative, parent) {
|
|
target.min = parent.min + relative.min;
|
|
target.max = target.min + calcLength(relative);
|
|
}
|
|
function calcRelativeBox(target, relative, parent) {
|
|
calcRelativeAxis(target.x, relative.x, parent.x);
|
|
calcRelativeAxis(target.y, relative.y, parent.y);
|
|
}
|
|
function calcRelativeAxisPosition(target, layout2, parent) {
|
|
target.min = layout2.min - parent.min;
|
|
target.max = target.min + calcLength(layout2);
|
|
}
|
|
function calcRelativePosition(target, layout2, parent) {
|
|
calcRelativeAxisPosition(target.x, layout2.x, parent.x);
|
|
calcRelativeAxisPosition(target.y, layout2.y, parent.y);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs
|
|
function applyConstraints(point2, { min, max }, elastic) {
|
|
if (min !== void 0 && point2 < min) {
|
|
point2 = elastic ? mixNumber(min, point2, elastic.min) : Math.max(point2, min);
|
|
} else if (max !== void 0 && point2 > max) {
|
|
point2 = elastic ? mixNumber(max, point2, elastic.max) : Math.min(point2, max);
|
|
}
|
|
return point2;
|
|
}
|
|
function calcRelativeAxisConstraints(axis, min, max) {
|
|
return {
|
|
min: min !== void 0 ? axis.min + min : void 0,
|
|
max: max !== void 0 ? axis.max + max - (axis.max - axis.min) : void 0
|
|
};
|
|
}
|
|
function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
|
|
return {
|
|
x: calcRelativeAxisConstraints(layoutBox.x, left, right),
|
|
y: calcRelativeAxisConstraints(layoutBox.y, top, bottom)
|
|
};
|
|
}
|
|
function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
|
|
let min = constraintsAxis.min - layoutAxis.min;
|
|
let max = constraintsAxis.max - layoutAxis.max;
|
|
if (constraintsAxis.max - constraintsAxis.min < layoutAxis.max - layoutAxis.min) {
|
|
[min, max] = [max, min];
|
|
}
|
|
return { min, max };
|
|
}
|
|
function calcViewportConstraints(layoutBox, constraintsBox) {
|
|
return {
|
|
x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
|
|
y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y)
|
|
};
|
|
}
|
|
function calcOrigin2(source, target) {
|
|
let origin = 0.5;
|
|
const sourceLength = calcLength(source);
|
|
const targetLength = calcLength(target);
|
|
if (targetLength > sourceLength) {
|
|
origin = progress(target.min, target.max - sourceLength, source.min);
|
|
} else if (sourceLength > targetLength) {
|
|
origin = progress(source.min, source.max - targetLength, target.min);
|
|
}
|
|
return clamp(0, 1, origin);
|
|
}
|
|
function rebaseAxisConstraints(layout2, constraints) {
|
|
const relativeConstraints = {};
|
|
if (constraints.min !== void 0) {
|
|
relativeConstraints.min = constraints.min - layout2.min;
|
|
}
|
|
if (constraints.max !== void 0) {
|
|
relativeConstraints.max = constraints.max - layout2.min;
|
|
}
|
|
return relativeConstraints;
|
|
}
|
|
var defaultElastic = 0.35;
|
|
function resolveDragElastic(dragElastic = defaultElastic) {
|
|
if (dragElastic === false) {
|
|
dragElastic = 0;
|
|
} else if (dragElastic === true) {
|
|
dragElastic = defaultElastic;
|
|
}
|
|
return {
|
|
x: resolveAxisElastic(dragElastic, "left", "right"),
|
|
y: resolveAxisElastic(dragElastic, "top", "bottom")
|
|
};
|
|
}
|
|
function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
|
|
return {
|
|
min: resolvePointElastic(dragElastic, minLabel),
|
|
max: resolvePointElastic(dragElastic, maxLabel)
|
|
};
|
|
}
|
|
function resolvePointElastic(dragElastic, label) {
|
|
return typeof dragElastic === "number" ? dragElastic : dragElastic[label] || 0;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/geometry/models.mjs
|
|
var createAxisDelta = () => ({
|
|
translate: 0,
|
|
scale: 1,
|
|
origin: 0,
|
|
originPoint: 0
|
|
});
|
|
var createDelta = () => ({
|
|
x: createAxisDelta(),
|
|
y: createAxisDelta()
|
|
});
|
|
var createAxis = () => ({ min: 0, max: 0 });
|
|
var createBox = () => ({
|
|
x: createAxis(),
|
|
y: createAxis()
|
|
});
|
|
|
|
// node_modules/framer-motion/dist/es/projection/utils/each-axis.mjs
|
|
function eachAxis(callback) {
|
|
return [callback("x"), callback("y")];
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/geometry/conversion.mjs
|
|
function convertBoundingBoxToBox({ top, left, right, bottom }) {
|
|
return {
|
|
x: { min: left, max: right },
|
|
y: { min: top, max: bottom }
|
|
};
|
|
}
|
|
function convertBoxToBoundingBox({ x, y }) {
|
|
return { top: y.min, right: x.max, bottom: y.max, left: x.min };
|
|
}
|
|
function transformBoxPoints(point2, transformPoint2) {
|
|
if (!transformPoint2)
|
|
return point2;
|
|
const topLeft = transformPoint2({ x: point2.left, y: point2.top });
|
|
const bottomRight = transformPoint2({ x: point2.right, y: point2.bottom });
|
|
return {
|
|
top: topLeft.y,
|
|
left: topLeft.x,
|
|
bottom: bottomRight.y,
|
|
right: bottomRight.x
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/utils/has-transform.mjs
|
|
function isIdentityScale(scale2) {
|
|
return scale2 === void 0 || scale2 === 1;
|
|
}
|
|
function hasScale({ scale: scale2, scaleX, scaleY }) {
|
|
return !isIdentityScale(scale2) || !isIdentityScale(scaleX) || !isIdentityScale(scaleY);
|
|
}
|
|
function hasTransform(values) {
|
|
return hasScale(values) || has2DTranslate(values) || values.z || values.rotate || values.rotateX || values.rotateY || values.skewX || values.skewY;
|
|
}
|
|
function has2DTranslate(values) {
|
|
return is2DTranslate(values.x) || is2DTranslate(values.y);
|
|
}
|
|
function is2DTranslate(value) {
|
|
return value && value !== "0%";
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/geometry/delta-apply.mjs
|
|
function scalePoint(point2, scale2, originPoint) {
|
|
const distanceFromOrigin = point2 - originPoint;
|
|
const scaled = scale2 * distanceFromOrigin;
|
|
return originPoint + scaled;
|
|
}
|
|
function applyPointDelta(point2, translate, scale2, originPoint, boxScale) {
|
|
if (boxScale !== void 0) {
|
|
point2 = scalePoint(point2, boxScale, originPoint);
|
|
}
|
|
return scalePoint(point2, scale2, originPoint) + translate;
|
|
}
|
|
function applyAxisDelta(axis, translate = 0, scale2 = 1, originPoint, boxScale) {
|
|
axis.min = applyPointDelta(axis.min, translate, scale2, originPoint, boxScale);
|
|
axis.max = applyPointDelta(axis.max, translate, scale2, originPoint, boxScale);
|
|
}
|
|
function applyBoxDelta(box, { x, y }) {
|
|
applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
|
|
applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
|
|
}
|
|
var TREE_SCALE_SNAP_MIN = 0.999999999999;
|
|
var TREE_SCALE_SNAP_MAX = 1.0000000000001;
|
|
function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
|
|
const treeLength = treePath.length;
|
|
if (!treeLength)
|
|
return;
|
|
treeScale.x = treeScale.y = 1;
|
|
let node;
|
|
let delta;
|
|
for (let i = 0; i < treeLength; i++) {
|
|
node = treePath[i];
|
|
delta = node.projectionDelta;
|
|
const { visualElement } = node.options;
|
|
if (visualElement && visualElement.props.style && visualElement.props.style.display === "contents") {
|
|
continue;
|
|
}
|
|
if (isSharedTransition && node.options.layoutScroll && node.scroll && node !== node.root) {
|
|
transformBox(box, {
|
|
x: -node.scroll.offset.x,
|
|
y: -node.scroll.offset.y
|
|
});
|
|
}
|
|
if (delta) {
|
|
treeScale.x *= delta.x.scale;
|
|
treeScale.y *= delta.y.scale;
|
|
applyBoxDelta(box, delta);
|
|
}
|
|
if (isSharedTransition && hasTransform(node.latestValues)) {
|
|
transformBox(box, node.latestValues);
|
|
}
|
|
}
|
|
if (treeScale.x < TREE_SCALE_SNAP_MAX && treeScale.x > TREE_SCALE_SNAP_MIN) {
|
|
treeScale.x = 1;
|
|
}
|
|
if (treeScale.y < TREE_SCALE_SNAP_MAX && treeScale.y > TREE_SCALE_SNAP_MIN) {
|
|
treeScale.y = 1;
|
|
}
|
|
}
|
|
function translateAxis(axis, distance2) {
|
|
axis.min = axis.min + distance2;
|
|
axis.max = axis.max + distance2;
|
|
}
|
|
function transformAxis(axis, axisTranslate, axisScale, boxScale, axisOrigin = 0.5) {
|
|
const originPoint = mixNumber(axis.min, axis.max, axisOrigin);
|
|
applyAxisDelta(axis, axisTranslate, axisScale, originPoint, boxScale);
|
|
}
|
|
function transformBox(box, transform2) {
|
|
transformAxis(box.x, transform2.x, transform2.scaleX, transform2.scale, transform2.originX);
|
|
transformAxis(box.y, transform2.y, transform2.scaleY, transform2.scale, transform2.originY);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/utils/measure.mjs
|
|
function measureViewportBox(instance, transformPoint2) {
|
|
return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint2));
|
|
}
|
|
function measurePageBox(element, rootProjectionNode2, transformPagePoint) {
|
|
const viewportBox = measureViewportBox(element, transformPagePoint);
|
|
const { scroll: scroll2 } = rootProjectionNode2;
|
|
if (scroll2) {
|
|
translateAxis(viewportBox.x, scroll2.offset.x);
|
|
translateAxis(viewportBox.y, scroll2.offset.y);
|
|
}
|
|
return viewportBox;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/get-context-window.mjs
|
|
var getContextWindow = ({ current }) => {
|
|
return current ? current.ownerDocument.defaultView : null;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs
|
|
var elementDragControls = /* @__PURE__ */ new WeakMap();
|
|
var VisualElementDragControls = class {
|
|
constructor(visualElement) {
|
|
this.openDragLock = null;
|
|
this.isDragging = false;
|
|
this.currentDirection = null;
|
|
this.originPoint = { x: 0, y: 0 };
|
|
this.constraints = false;
|
|
this.hasMutatedConstraints = false;
|
|
this.elastic = createBox();
|
|
this.visualElement = visualElement;
|
|
}
|
|
start(originEvent, { snapToCursor = false } = {}) {
|
|
const { presenceContext } = this.visualElement;
|
|
if (presenceContext && presenceContext.isPresent === false)
|
|
return;
|
|
const onSessionStart = (event) => {
|
|
const { dragSnapToOrigin: dragSnapToOrigin2 } = this.getProps();
|
|
dragSnapToOrigin2 ? this.pauseAnimation() : this.stopAnimation();
|
|
if (snapToCursor) {
|
|
this.snapToCursor(extractEventInfo(event).point);
|
|
}
|
|
};
|
|
const onStart = (event, info) => {
|
|
const { drag: drag2, dragPropagation, onDragStart } = this.getProps();
|
|
if (drag2 && !dragPropagation) {
|
|
if (this.openDragLock)
|
|
this.openDragLock();
|
|
this.openDragLock = setDragLock(drag2);
|
|
if (!this.openDragLock)
|
|
return;
|
|
}
|
|
this.isDragging = true;
|
|
this.currentDirection = null;
|
|
this.resolveConstraints();
|
|
if (this.visualElement.projection) {
|
|
this.visualElement.projection.isAnimationBlocked = true;
|
|
this.visualElement.projection.target = void 0;
|
|
}
|
|
eachAxis((axis) => {
|
|
let current = this.getAxisMotionValue(axis).get() || 0;
|
|
if (percent.test(current)) {
|
|
const { projection } = this.visualElement;
|
|
if (projection && projection.layout) {
|
|
const measuredAxis = projection.layout.layoutBox[axis];
|
|
if (measuredAxis) {
|
|
const length = calcLength(measuredAxis);
|
|
current = length * (parseFloat(current) / 100);
|
|
}
|
|
}
|
|
}
|
|
this.originPoint[axis] = current;
|
|
});
|
|
if (onDragStart) {
|
|
frame.postRender(() => onDragStart(event, info));
|
|
}
|
|
addValueToWillChange(this.visualElement, "transform");
|
|
const { animationState } = this.visualElement;
|
|
animationState && animationState.setActive("whileDrag", true);
|
|
};
|
|
const onMove = (event, info) => {
|
|
const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag } = this.getProps();
|
|
if (!dragPropagation && !this.openDragLock)
|
|
return;
|
|
const { offset } = info;
|
|
if (dragDirectionLock && this.currentDirection === null) {
|
|
this.currentDirection = getCurrentDirection(offset);
|
|
if (this.currentDirection !== null) {
|
|
onDirectionLock && onDirectionLock(this.currentDirection);
|
|
}
|
|
return;
|
|
}
|
|
this.updateAxis("x", info.point, offset);
|
|
this.updateAxis("y", info.point, offset);
|
|
this.visualElement.render();
|
|
onDrag && onDrag(event, info);
|
|
};
|
|
const onSessionEnd = (event, info) => this.stop(event, info);
|
|
const resumeAnimation = () => eachAxis((axis) => {
|
|
var _a;
|
|
return this.getAnimationState(axis) === "paused" && ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());
|
|
});
|
|
const { dragSnapToOrigin } = this.getProps();
|
|
this.panSession = new PanSession(originEvent, {
|
|
onSessionStart,
|
|
onStart,
|
|
onMove,
|
|
onSessionEnd,
|
|
resumeAnimation
|
|
}, {
|
|
transformPagePoint: this.visualElement.getTransformPagePoint(),
|
|
dragSnapToOrigin,
|
|
contextWindow: getContextWindow(this.visualElement)
|
|
});
|
|
}
|
|
stop(event, info) {
|
|
const isDragging2 = this.isDragging;
|
|
this.cancel();
|
|
if (!isDragging2)
|
|
return;
|
|
const { velocity } = info;
|
|
this.startAnimation(velocity);
|
|
const { onDragEnd } = this.getProps();
|
|
if (onDragEnd) {
|
|
frame.postRender(() => onDragEnd(event, info));
|
|
}
|
|
}
|
|
cancel() {
|
|
this.isDragging = false;
|
|
const { projection, animationState } = this.visualElement;
|
|
if (projection) {
|
|
projection.isAnimationBlocked = false;
|
|
}
|
|
this.panSession && this.panSession.end();
|
|
this.panSession = void 0;
|
|
const { dragPropagation } = this.getProps();
|
|
if (!dragPropagation && this.openDragLock) {
|
|
this.openDragLock();
|
|
this.openDragLock = null;
|
|
}
|
|
animationState && animationState.setActive("whileDrag", false);
|
|
}
|
|
updateAxis(axis, _point, offset) {
|
|
const { drag: drag2 } = this.getProps();
|
|
if (!offset || !shouldDrag(axis, drag2, this.currentDirection))
|
|
return;
|
|
const axisValue = this.getAxisMotionValue(axis);
|
|
let next = this.originPoint[axis] + offset[axis];
|
|
if (this.constraints && this.constraints[axis]) {
|
|
next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);
|
|
}
|
|
axisValue.set(next);
|
|
}
|
|
resolveConstraints() {
|
|
var _a;
|
|
const { dragConstraints, dragElastic } = this.getProps();
|
|
const layout2 = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(false) : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout;
|
|
const prevConstraints = this.constraints;
|
|
if (dragConstraints && isRefObject(dragConstraints)) {
|
|
if (!this.constraints) {
|
|
this.constraints = this.resolveRefConstraints();
|
|
}
|
|
} else {
|
|
if (dragConstraints && layout2) {
|
|
this.constraints = calcRelativeConstraints(layout2.layoutBox, dragConstraints);
|
|
} else {
|
|
this.constraints = false;
|
|
}
|
|
}
|
|
this.elastic = resolveDragElastic(dragElastic);
|
|
if (prevConstraints !== this.constraints && layout2 && this.constraints && !this.hasMutatedConstraints) {
|
|
eachAxis((axis) => {
|
|
if (this.constraints !== false && this.getAxisMotionValue(axis)) {
|
|
this.constraints[axis] = rebaseAxisConstraints(layout2.layoutBox[axis], this.constraints[axis]);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
resolveRefConstraints() {
|
|
const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
|
|
if (!constraints || !isRefObject(constraints))
|
|
return false;
|
|
const constraintsElement = constraints.current;
|
|
invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
|
|
const { projection } = this.visualElement;
|
|
if (!projection || !projection.layout)
|
|
return false;
|
|
const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
|
|
let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
|
|
if (onMeasureDragConstraints) {
|
|
const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
|
|
this.hasMutatedConstraints = !!userConstraints;
|
|
if (userConstraints) {
|
|
measuredConstraints = convertBoundingBoxToBox(userConstraints);
|
|
}
|
|
}
|
|
return measuredConstraints;
|
|
}
|
|
startAnimation(velocity) {
|
|
const { drag: drag2, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd } = this.getProps();
|
|
const constraints = this.constraints || {};
|
|
const momentumAnimations = eachAxis((axis) => {
|
|
if (!shouldDrag(axis, drag2, this.currentDirection)) {
|
|
return;
|
|
}
|
|
let transition = constraints && constraints[axis] || {};
|
|
if (dragSnapToOrigin)
|
|
transition = { min: 0, max: 0 };
|
|
const bounceStiffness = dragElastic ? 200 : 1e6;
|
|
const bounceDamping = dragElastic ? 40 : 1e7;
|
|
const inertia2 = {
|
|
type: "inertia",
|
|
velocity: dragMomentum ? velocity[axis] : 0,
|
|
bounceStiffness,
|
|
bounceDamping,
|
|
timeConstant: 750,
|
|
restDelta: 1,
|
|
restSpeed: 10,
|
|
...dragTransition,
|
|
...transition
|
|
};
|
|
return this.startAxisValueAnimation(axis, inertia2);
|
|
});
|
|
return Promise.all(momentumAnimations).then(onDragTransitionEnd);
|
|
}
|
|
startAxisValueAnimation(axis, transition) {
|
|
const axisValue = this.getAxisMotionValue(axis);
|
|
addValueToWillChange(this.visualElement, axis);
|
|
return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false));
|
|
}
|
|
stopAnimation() {
|
|
eachAxis((axis) => this.getAxisMotionValue(axis).stop());
|
|
}
|
|
pauseAnimation() {
|
|
eachAxis((axis) => {
|
|
var _a;
|
|
return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause();
|
|
});
|
|
}
|
|
getAnimationState(axis) {
|
|
var _a;
|
|
return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;
|
|
}
|
|
/**
|
|
* Drag works differently depending on which props are provided.
|
|
*
|
|
* - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
|
|
* - Otherwise, we apply the delta to the x/y motion values.
|
|
*/
|
|
getAxisMotionValue(axis) {
|
|
const dragKey = `_drag${axis.toUpperCase()}`;
|
|
const props = this.visualElement.getProps();
|
|
const externalMotionValue = props[dragKey];
|
|
return externalMotionValue ? externalMotionValue : this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : void 0) || 0);
|
|
}
|
|
snapToCursor(point2) {
|
|
eachAxis((axis) => {
|
|
const { drag: drag2 } = this.getProps();
|
|
if (!shouldDrag(axis, drag2, this.currentDirection))
|
|
return;
|
|
const { projection } = this.visualElement;
|
|
const axisValue = this.getAxisMotionValue(axis);
|
|
if (projection && projection.layout) {
|
|
const { min, max } = projection.layout.layoutBox[axis];
|
|
axisValue.set(point2[axis] - mixNumber(min, max, 0.5));
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* When the viewport resizes we want to check if the measured constraints
|
|
* have changed and, if so, reposition the element within those new constraints
|
|
* relative to where it was before the resize.
|
|
*/
|
|
scalePositionWithinConstraints() {
|
|
if (!this.visualElement.current)
|
|
return;
|
|
const { drag: drag2, dragConstraints } = this.getProps();
|
|
const { projection } = this.visualElement;
|
|
if (!isRefObject(dragConstraints) || !projection || !this.constraints)
|
|
return;
|
|
this.stopAnimation();
|
|
const boxProgress = { x: 0, y: 0 };
|
|
eachAxis((axis) => {
|
|
const axisValue = this.getAxisMotionValue(axis);
|
|
if (axisValue && this.constraints !== false) {
|
|
const latest = axisValue.get();
|
|
boxProgress[axis] = calcOrigin2({ min: latest, max: latest }, this.constraints[axis]);
|
|
}
|
|
});
|
|
const { transformTemplate } = this.visualElement.getProps();
|
|
this.visualElement.current.style.transform = transformTemplate ? transformTemplate({}, "") : "none";
|
|
projection.root && projection.root.updateScroll();
|
|
projection.updateLayout();
|
|
this.resolveConstraints();
|
|
eachAxis((axis) => {
|
|
if (!shouldDrag(axis, drag2, null))
|
|
return;
|
|
const axisValue = this.getAxisMotionValue(axis);
|
|
const { min, max } = this.constraints[axis];
|
|
axisValue.set(mixNumber(min, max, boxProgress[axis]));
|
|
});
|
|
}
|
|
addListeners() {
|
|
if (!this.visualElement.current)
|
|
return;
|
|
elementDragControls.set(this.visualElement, this);
|
|
const element = this.visualElement.current;
|
|
const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => {
|
|
const { drag: drag2, dragListener = true } = this.getProps();
|
|
drag2 && dragListener && this.start(event);
|
|
});
|
|
const measureDragConstraints = () => {
|
|
const { dragConstraints } = this.getProps();
|
|
if (isRefObject(dragConstraints) && dragConstraints.current) {
|
|
this.constraints = this.resolveRefConstraints();
|
|
}
|
|
};
|
|
const { projection } = this.visualElement;
|
|
const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
|
|
if (projection && !projection.layout) {
|
|
projection.root && projection.root.updateScroll();
|
|
projection.updateLayout();
|
|
}
|
|
frame.read(measureDragConstraints);
|
|
const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints());
|
|
const stopLayoutUpdateListener = projection.addEventListener("didUpdate", ({ delta, hasLayoutChanged }) => {
|
|
if (this.isDragging && hasLayoutChanged) {
|
|
eachAxis((axis) => {
|
|
const motionValue2 = this.getAxisMotionValue(axis);
|
|
if (!motionValue2)
|
|
return;
|
|
this.originPoint[axis] += delta[axis].translate;
|
|
motionValue2.set(motionValue2.get() + delta[axis].translate);
|
|
});
|
|
this.visualElement.render();
|
|
}
|
|
});
|
|
return () => {
|
|
stopResizeListener();
|
|
stopPointerListener();
|
|
stopMeasureLayoutListener();
|
|
stopLayoutUpdateListener && stopLayoutUpdateListener();
|
|
};
|
|
}
|
|
getProps() {
|
|
const props = this.visualElement.getProps();
|
|
const { drag: drag2 = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true } = props;
|
|
return {
|
|
...props,
|
|
drag: drag2,
|
|
dragDirectionLock,
|
|
dragPropagation,
|
|
dragConstraints,
|
|
dragElastic,
|
|
dragMomentum
|
|
};
|
|
}
|
|
};
|
|
function shouldDrag(direction, drag2, currentDirection) {
|
|
return (drag2 === true || drag2 === direction) && (currentDirection === null || currentDirection === direction);
|
|
}
|
|
function getCurrentDirection(offset, lockThreshold = 10) {
|
|
let direction = null;
|
|
if (Math.abs(offset.y) > lockThreshold) {
|
|
direction = "y";
|
|
} else if (Math.abs(offset.x) > lockThreshold) {
|
|
direction = "x";
|
|
}
|
|
return direction;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/gestures/drag/index.mjs
|
|
var DragGesture = class extends Feature {
|
|
constructor(node) {
|
|
super(node);
|
|
this.removeGroupControls = noop;
|
|
this.removeListeners = noop;
|
|
this.controls = new VisualElementDragControls(node);
|
|
}
|
|
mount() {
|
|
const { dragControls } = this.node.getProps();
|
|
if (dragControls) {
|
|
this.removeGroupControls = dragControls.subscribe(this.controls);
|
|
}
|
|
this.removeListeners = this.controls.addListeners() || noop;
|
|
}
|
|
unmount() {
|
|
this.removeGroupControls();
|
|
this.removeListeners();
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/gestures/pan/index.mjs
|
|
var asyncHandler = (handler) => (event, info) => {
|
|
if (handler) {
|
|
frame.postRender(() => handler(event, info));
|
|
}
|
|
};
|
|
var PanGesture = class extends Feature {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.removePointerDownListener = noop;
|
|
}
|
|
onPointerDown(pointerDownEvent) {
|
|
this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
|
|
transformPagePoint: this.node.getTransformPagePoint(),
|
|
contextWindow: getContextWindow(this.node)
|
|
});
|
|
}
|
|
createPanHandlers() {
|
|
const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
|
|
return {
|
|
onSessionStart: asyncHandler(onPanSessionStart),
|
|
onStart: asyncHandler(onPanStart),
|
|
onMove: onPan,
|
|
onEnd: (event, info) => {
|
|
delete this.session;
|
|
if (onPanEnd) {
|
|
frame.postRender(() => onPanEnd(event, info));
|
|
}
|
|
}
|
|
};
|
|
}
|
|
mount() {
|
|
this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event));
|
|
}
|
|
update() {
|
|
this.session && this.session.updateHandlers(this.createPanHandlers());
|
|
}
|
|
unmount() {
|
|
this.removePointerDownListener();
|
|
this.session && this.session.end();
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs
|
|
var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
|
|
var import_react28 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/projection/node/state.mjs
|
|
var globalProjectionState = {
|
|
/**
|
|
* Global flag as to whether the tree has animated since the last time
|
|
* we resized the window
|
|
*/
|
|
hasAnimatedSinceResize: true,
|
|
/**
|
|
* We set this to true once, on the first update. Any nodes added to the tree beyond that
|
|
* update will be given a `data-projection-id` attribute.
|
|
*/
|
|
hasEverUpdated: false
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs
|
|
function pixelsToPercent(pixels, axis) {
|
|
if (axis.max === axis.min)
|
|
return 0;
|
|
return pixels / (axis.max - axis.min) * 100;
|
|
}
|
|
var correctBorderRadius = {
|
|
correct: (latest, node) => {
|
|
if (!node.target)
|
|
return latest;
|
|
if (typeof latest === "string") {
|
|
if (px.test(latest)) {
|
|
latest = parseFloat(latest);
|
|
} else {
|
|
return latest;
|
|
}
|
|
}
|
|
const x = pixelsToPercent(latest, node.target.x);
|
|
const y = pixelsToPercent(latest, node.target.y);
|
|
return `${x}% ${y}%`;
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs
|
|
var correctBoxShadow = {
|
|
correct: (latest, { treeScale, projectionDelta }) => {
|
|
const original = latest;
|
|
const shadow = complex.parse(latest);
|
|
if (shadow.length > 5)
|
|
return original;
|
|
const template = complex.createTransformer(latest);
|
|
const offset = typeof shadow[0] !== "number" ? 1 : 0;
|
|
const xScale = projectionDelta.x.scale * treeScale.x;
|
|
const yScale = projectionDelta.y.scale * treeScale.y;
|
|
shadow[0 + offset] /= xScale;
|
|
shadow[1 + offset] /= yScale;
|
|
const averageScale = mixNumber(xScale, yScale, 0.5);
|
|
if (typeof shadow[2 + offset] === "number")
|
|
shadow[2 + offset] /= averageScale;
|
|
if (typeof shadow[3 + offset] === "number")
|
|
shadow[3 + offset] /= averageScale;
|
|
return template(shadow);
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs
|
|
var MeasureLayoutWithContext = class extends import_react28.Component {
|
|
/**
|
|
* This only mounts projection nodes for components that
|
|
* need measuring, we might want to do it for all components
|
|
* in order to incorporate transforms
|
|
*/
|
|
componentDidMount() {
|
|
const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;
|
|
const { projection } = visualElement;
|
|
addScaleCorrector(defaultScaleCorrectors);
|
|
if (projection) {
|
|
if (layoutGroup.group)
|
|
layoutGroup.group.add(projection);
|
|
if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
|
|
switchLayoutGroup.register(projection);
|
|
}
|
|
projection.root.didUpdate();
|
|
projection.addEventListener("animationComplete", () => {
|
|
this.safeToRemove();
|
|
});
|
|
projection.setOptions({
|
|
...projection.options,
|
|
onExitComplete: () => this.safeToRemove()
|
|
});
|
|
}
|
|
globalProjectionState.hasEverUpdated = true;
|
|
}
|
|
getSnapshotBeforeUpdate(prevProps) {
|
|
const { layoutDependency, visualElement, drag: drag2, isPresent: isPresent2 } = this.props;
|
|
const projection = visualElement.projection;
|
|
if (!projection)
|
|
return null;
|
|
projection.isPresent = isPresent2;
|
|
if (drag2 || prevProps.layoutDependency !== layoutDependency || layoutDependency === void 0) {
|
|
projection.willUpdate();
|
|
} else {
|
|
this.safeToRemove();
|
|
}
|
|
if (prevProps.isPresent !== isPresent2) {
|
|
if (isPresent2) {
|
|
projection.promote();
|
|
} else if (!projection.relegate()) {
|
|
frame.postRender(() => {
|
|
const stack = projection.getStack();
|
|
if (!stack || !stack.members.length) {
|
|
this.safeToRemove();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
componentDidUpdate() {
|
|
const { projection } = this.props.visualElement;
|
|
if (projection) {
|
|
projection.root.didUpdate();
|
|
microtask.postRender(() => {
|
|
if (!projection.currentAnimation && projection.isLead()) {
|
|
this.safeToRemove();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
componentWillUnmount() {
|
|
const { visualElement, layoutGroup, switchLayoutGroup: promoteContext } = this.props;
|
|
const { projection } = visualElement;
|
|
if (projection) {
|
|
projection.scheduleCheckAfterUnmount();
|
|
if (layoutGroup && layoutGroup.group)
|
|
layoutGroup.group.remove(projection);
|
|
if (promoteContext && promoteContext.deregister)
|
|
promoteContext.deregister(projection);
|
|
}
|
|
}
|
|
safeToRemove() {
|
|
const { safeToRemove } = this.props;
|
|
safeToRemove && safeToRemove();
|
|
}
|
|
render() {
|
|
return null;
|
|
}
|
|
};
|
|
function MeasureLayout(props) {
|
|
const [isPresent2, safeToRemove] = usePresence();
|
|
const layoutGroup = (0, import_react28.useContext)(LayoutGroupContext);
|
|
return (0, import_jsx_runtime8.jsx)(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: (0, import_react28.useContext)(SwitchLayoutGroupContext), isPresent: isPresent2, safeToRemove });
|
|
}
|
|
var defaultScaleCorrectors = {
|
|
borderRadius: {
|
|
...correctBorderRadius,
|
|
applyTo: [
|
|
"borderTopLeftRadius",
|
|
"borderTopRightRadius",
|
|
"borderBottomLeftRadius",
|
|
"borderBottomRightRadius"
|
|
]
|
|
},
|
|
borderTopLeftRadius: correctBorderRadius,
|
|
borderTopRightRadius: correctBorderRadius,
|
|
borderBottomLeftRadius: correctBorderRadius,
|
|
borderBottomRightRadius: correctBorderRadius,
|
|
boxShadow: correctBoxShadow
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animate/single-value.mjs
|
|
function animateSingleValue(value, keyframes2, options) {
|
|
const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
|
|
motionValue$1.start(animateMotionValue("", motionValue$1, keyframes2, options));
|
|
return motionValue$1.animation;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs
|
|
function isSVGElement(element) {
|
|
return element instanceof SVGElement && element.tagName !== "svg";
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/compare-by-depth.mjs
|
|
var compareByDepth = (a, b) => a.depth - b.depth;
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/flat-tree.mjs
|
|
var FlatTree = class {
|
|
constructor() {
|
|
this.children = [];
|
|
this.isDirty = false;
|
|
}
|
|
add(child) {
|
|
addUniqueItem(this.children, child);
|
|
this.isDirty = true;
|
|
}
|
|
remove(child) {
|
|
removeItem(this.children, child);
|
|
this.isDirty = true;
|
|
}
|
|
forEach(callback) {
|
|
this.isDirty && this.children.sort(compareByDepth);
|
|
this.isDirty = false;
|
|
this.children.forEach(callback);
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/delay.mjs
|
|
function delay(callback, timeout) {
|
|
const start = time.now();
|
|
const checkElapsed = ({ timestamp }) => {
|
|
const elapsed = timestamp - start;
|
|
if (elapsed >= timeout) {
|
|
cancelFrame(checkElapsed);
|
|
callback(elapsed - timeout);
|
|
}
|
|
};
|
|
frame.read(checkElapsed, true);
|
|
return () => cancelFrame(checkElapsed);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/animation/mix-values.mjs
|
|
var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
|
|
var numBorders = borders.length;
|
|
var asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
|
|
var isPx = (value) => typeof value === "number" || px.test(value);
|
|
function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
|
|
if (shouldCrossfadeOpacity) {
|
|
target.opacity = mixNumber(
|
|
0,
|
|
// TODO Reinstate this if only child
|
|
lead.opacity !== void 0 ? lead.opacity : 1,
|
|
easeCrossfadeIn(progress2)
|
|
);
|
|
target.opacityExit = mixNumber(follow.opacity !== void 0 ? follow.opacity : 1, 0, easeCrossfadeOut(progress2));
|
|
} else if (isOnlyMember) {
|
|
target.opacity = mixNumber(follow.opacity !== void 0 ? follow.opacity : 1, lead.opacity !== void 0 ? lead.opacity : 1, progress2);
|
|
}
|
|
for (let i = 0; i < numBorders; i++) {
|
|
const borderLabel = `border${borders[i]}Radius`;
|
|
let followRadius = getRadius(follow, borderLabel);
|
|
let leadRadius = getRadius(lead, borderLabel);
|
|
if (followRadius === void 0 && leadRadius === void 0)
|
|
continue;
|
|
followRadius || (followRadius = 0);
|
|
leadRadius || (leadRadius = 0);
|
|
const canMix = followRadius === 0 || leadRadius === 0 || isPx(followRadius) === isPx(leadRadius);
|
|
if (canMix) {
|
|
target[borderLabel] = Math.max(mixNumber(asNumber(followRadius), asNumber(leadRadius), progress2), 0);
|
|
if (percent.test(leadRadius) || percent.test(followRadius)) {
|
|
target[borderLabel] += "%";
|
|
}
|
|
} else {
|
|
target[borderLabel] = leadRadius;
|
|
}
|
|
}
|
|
if (follow.rotate || lead.rotate) {
|
|
target.rotate = mixNumber(follow.rotate || 0, lead.rotate || 0, progress2);
|
|
}
|
|
}
|
|
function getRadius(values, radiusName) {
|
|
return values[radiusName] !== void 0 ? values[radiusName] : values.borderRadius;
|
|
}
|
|
var easeCrossfadeIn = compress(0, 0.5, circOut);
|
|
var easeCrossfadeOut = compress(0.5, 0.95, noop);
|
|
function compress(min, max, easing) {
|
|
return (p) => {
|
|
if (p < min)
|
|
return 0;
|
|
if (p > max)
|
|
return 1;
|
|
return easing(progress(min, max, p));
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/geometry/copy.mjs
|
|
function copyAxisInto(axis, originAxis) {
|
|
axis.min = originAxis.min;
|
|
axis.max = originAxis.max;
|
|
}
|
|
function copyBoxInto(box, originBox) {
|
|
copyAxisInto(box.x, originBox.x);
|
|
copyAxisInto(box.y, originBox.y);
|
|
}
|
|
function copyAxisDeltaInto(delta, originDelta) {
|
|
delta.translate = originDelta.translate;
|
|
delta.scale = originDelta.scale;
|
|
delta.originPoint = originDelta.originPoint;
|
|
delta.origin = originDelta.origin;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/geometry/delta-remove.mjs
|
|
function removePointDelta(point2, translate, scale2, originPoint, boxScale) {
|
|
point2 -= translate;
|
|
point2 = scalePoint(point2, 1 / scale2, originPoint);
|
|
if (boxScale !== void 0) {
|
|
point2 = scalePoint(point2, 1 / boxScale, originPoint);
|
|
}
|
|
return point2;
|
|
}
|
|
function removeAxisDelta(axis, translate = 0, scale2 = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
|
|
if (percent.test(translate)) {
|
|
translate = parseFloat(translate);
|
|
const relativeProgress = mixNumber(sourceAxis.min, sourceAxis.max, translate / 100);
|
|
translate = relativeProgress - sourceAxis.min;
|
|
}
|
|
if (typeof translate !== "number")
|
|
return;
|
|
let originPoint = mixNumber(originAxis.min, originAxis.max, origin);
|
|
if (axis === originAxis)
|
|
originPoint -= translate;
|
|
axis.min = removePointDelta(axis.min, translate, scale2, originPoint, boxScale);
|
|
axis.max = removePointDelta(axis.max, translate, scale2, originPoint, boxScale);
|
|
}
|
|
function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) {
|
|
removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis);
|
|
}
|
|
var xKeys = ["x", "scaleX", "originX"];
|
|
var yKeys = ["y", "scaleY", "originY"];
|
|
function removeBoxTransforms(box, transforms, originBox, sourceBox) {
|
|
removeAxisTransforms(box.x, transforms, xKeys, originBox ? originBox.x : void 0, sourceBox ? sourceBox.x : void 0);
|
|
removeAxisTransforms(box.y, transforms, yKeys, originBox ? originBox.y : void 0, sourceBox ? sourceBox.y : void 0);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/geometry/utils.mjs
|
|
function isAxisDeltaZero(delta) {
|
|
return delta.translate === 0 && delta.scale === 1;
|
|
}
|
|
function isDeltaZero(delta) {
|
|
return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);
|
|
}
|
|
function axisEquals(a, b) {
|
|
return a.min === b.min && a.max === b.max;
|
|
}
|
|
function boxEquals(a, b) {
|
|
return axisEquals(a.x, b.x) && axisEquals(a.y, b.y);
|
|
}
|
|
function axisEqualsRounded(a, b) {
|
|
return Math.round(a.min) === Math.round(b.min) && Math.round(a.max) === Math.round(b.max);
|
|
}
|
|
function boxEqualsRounded(a, b) {
|
|
return axisEqualsRounded(a.x, b.x) && axisEqualsRounded(a.y, b.y);
|
|
}
|
|
function aspectRatio(box) {
|
|
return calcLength(box.x) / calcLength(box.y);
|
|
}
|
|
function axisDeltaEquals(a, b) {
|
|
return a.translate === b.translate && a.scale === b.scale && a.originPoint === b.originPoint;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/shared/stack.mjs
|
|
var NodeStack = class {
|
|
constructor() {
|
|
this.members = [];
|
|
}
|
|
add(node) {
|
|
addUniqueItem(this.members, node);
|
|
node.scheduleRender();
|
|
}
|
|
remove(node) {
|
|
removeItem(this.members, node);
|
|
if (node === this.prevLead) {
|
|
this.prevLead = void 0;
|
|
}
|
|
if (node === this.lead) {
|
|
const prevLead = this.members[this.members.length - 1];
|
|
if (prevLead) {
|
|
this.promote(prevLead);
|
|
}
|
|
}
|
|
}
|
|
relegate(node) {
|
|
const indexOfNode = this.members.findIndex((member) => node === member);
|
|
if (indexOfNode === 0)
|
|
return false;
|
|
let prevLead;
|
|
for (let i = indexOfNode; i >= 0; i--) {
|
|
const member = this.members[i];
|
|
if (member.isPresent !== false) {
|
|
prevLead = member;
|
|
break;
|
|
}
|
|
}
|
|
if (prevLead) {
|
|
this.promote(prevLead);
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
promote(node, preserveFollowOpacity) {
|
|
const prevLead = this.lead;
|
|
if (node === prevLead)
|
|
return;
|
|
this.prevLead = prevLead;
|
|
this.lead = node;
|
|
node.show();
|
|
if (prevLead) {
|
|
prevLead.instance && prevLead.scheduleRender();
|
|
node.scheduleRender();
|
|
node.resumeFrom = prevLead;
|
|
if (preserveFollowOpacity) {
|
|
node.resumeFrom.preserveOpacity = true;
|
|
}
|
|
if (prevLead.snapshot) {
|
|
node.snapshot = prevLead.snapshot;
|
|
node.snapshot.latestValues = prevLead.animationValues || prevLead.latestValues;
|
|
}
|
|
if (node.root && node.root.isUpdating) {
|
|
node.isLayoutDirty = true;
|
|
}
|
|
const { crossfade } = node.options;
|
|
if (crossfade === false) {
|
|
prevLead.hide();
|
|
}
|
|
}
|
|
}
|
|
exitAnimationComplete() {
|
|
this.members.forEach((node) => {
|
|
const { options, resumingFrom } = node;
|
|
options.onExitComplete && options.onExitComplete();
|
|
if (resumingFrom) {
|
|
resumingFrom.options.onExitComplete && resumingFrom.options.onExitComplete();
|
|
}
|
|
});
|
|
}
|
|
scheduleRender() {
|
|
this.members.forEach((node) => {
|
|
node.instance && node.scheduleRender(false);
|
|
});
|
|
}
|
|
/**
|
|
* Clear any leads that have been removed this render to prevent them from being
|
|
* used in future animations and to prevent memory leaks
|
|
*/
|
|
removeLeadSnapshot() {
|
|
if (this.lead && this.lead.snapshot) {
|
|
this.lead.snapshot = void 0;
|
|
}
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/projection/styles/transform.mjs
|
|
function buildProjectionTransform(delta, treeScale, latestTransform) {
|
|
let transform2 = "";
|
|
const xTranslate = delta.x.translate / treeScale.x;
|
|
const yTranslate = delta.y.translate / treeScale.y;
|
|
const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0;
|
|
if (xTranslate || yTranslate || zTranslate) {
|
|
transform2 = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
|
|
}
|
|
if (treeScale.x !== 1 || treeScale.y !== 1) {
|
|
transform2 += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
|
|
}
|
|
if (latestTransform) {
|
|
const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } = latestTransform;
|
|
if (transformPerspective)
|
|
transform2 = `perspective(${transformPerspective}px) ${transform2}`;
|
|
if (rotate)
|
|
transform2 += `rotate(${rotate}deg) `;
|
|
if (rotateX)
|
|
transform2 += `rotateX(${rotateX}deg) `;
|
|
if (rotateY)
|
|
transform2 += `rotateY(${rotateY}deg) `;
|
|
if (skewX)
|
|
transform2 += `skewX(${skewX}deg) `;
|
|
if (skewY)
|
|
transform2 += `skewY(${skewY}deg) `;
|
|
}
|
|
const elementScaleX = delta.x.scale * treeScale.x;
|
|
const elementScaleY = delta.y.scale * treeScale.y;
|
|
if (elementScaleX !== 1 || elementScaleY !== 1) {
|
|
transform2 += `scale(${elementScaleX}, ${elementScaleY})`;
|
|
}
|
|
return transform2 || "none";
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs
|
|
var metrics = {
|
|
type: "projectionFrame",
|
|
totalNodes: 0,
|
|
resolvedTargetDeltas: 0,
|
|
recalculatedProjection: 0
|
|
};
|
|
var isDebug = typeof window !== "undefined" && window.MotionDebug !== void 0;
|
|
var transformAxes = ["", "X", "Y", "Z"];
|
|
var hiddenVisibility = { visibility: "hidden" };
|
|
var animationTarget = 1e3;
|
|
var id2 = 0;
|
|
function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) {
|
|
const { latestValues } = visualElement;
|
|
if (latestValues[key]) {
|
|
values[key] = latestValues[key];
|
|
visualElement.setStaticValue(key, 0);
|
|
if (sharedAnimationValues) {
|
|
sharedAnimationValues[key] = 0;
|
|
}
|
|
}
|
|
}
|
|
function cancelTreeOptimisedTransformAnimations(projectionNode) {
|
|
projectionNode.hasCheckedOptimisedAppear = true;
|
|
if (projectionNode.root === projectionNode)
|
|
return;
|
|
const { visualElement } = projectionNode.options;
|
|
if (!visualElement)
|
|
return;
|
|
const appearId = getOptimisedAppearId(visualElement);
|
|
if (window.MotionHasOptimisedAnimation(appearId, "transform")) {
|
|
const { layout: layout2, layoutId } = projectionNode.options;
|
|
window.MotionCancelOptimisedAnimation(appearId, "transform", frame, !(layout2 || layoutId));
|
|
}
|
|
const { parent } = projectionNode;
|
|
if (parent && !parent.hasCheckedOptimisedAppear) {
|
|
cancelTreeOptimisedTransformAnimations(parent);
|
|
}
|
|
}
|
|
function createProjectionNode2({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform }) {
|
|
return class ProjectionNode {
|
|
constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
|
|
this.id = id2++;
|
|
this.animationId = 0;
|
|
this.children = /* @__PURE__ */ new Set();
|
|
this.options = {};
|
|
this.isTreeAnimating = false;
|
|
this.isAnimationBlocked = false;
|
|
this.isLayoutDirty = false;
|
|
this.isProjectionDirty = false;
|
|
this.isSharedProjectionDirty = false;
|
|
this.isTransformDirty = false;
|
|
this.updateManuallyBlocked = false;
|
|
this.updateBlockedByResize = false;
|
|
this.isUpdating = false;
|
|
this.isSVG = false;
|
|
this.needsReset = false;
|
|
this.shouldResetTransform = false;
|
|
this.hasCheckedOptimisedAppear = false;
|
|
this.treeScale = { x: 1, y: 1 };
|
|
this.eventHandlers = /* @__PURE__ */ new Map();
|
|
this.hasTreeAnimated = false;
|
|
this.updateScheduled = false;
|
|
this.scheduleUpdate = () => this.update();
|
|
this.projectionUpdateScheduled = false;
|
|
this.checkUpdateFailed = () => {
|
|
if (this.isUpdating) {
|
|
this.isUpdating = false;
|
|
this.clearAllSnapshots();
|
|
}
|
|
};
|
|
this.updateProjection = () => {
|
|
this.projectionUpdateScheduled = false;
|
|
if (isDebug) {
|
|
metrics.totalNodes = metrics.resolvedTargetDeltas = metrics.recalculatedProjection = 0;
|
|
}
|
|
this.nodes.forEach(propagateDirtyNodes);
|
|
this.nodes.forEach(resolveTargetDelta);
|
|
this.nodes.forEach(calcProjection);
|
|
this.nodes.forEach(cleanDirtyNodes);
|
|
if (isDebug) {
|
|
window.MotionDebug.record(metrics);
|
|
}
|
|
};
|
|
this.resolvedRelativeTargetAt = 0;
|
|
this.hasProjected = false;
|
|
this.isVisible = true;
|
|
this.animationProgress = 0;
|
|
this.sharedNodes = /* @__PURE__ */ new Map();
|
|
this.latestValues = latestValues;
|
|
this.root = parent ? parent.root || parent : this;
|
|
this.path = parent ? [...parent.path, parent] : [];
|
|
this.parent = parent;
|
|
this.depth = parent ? parent.depth + 1 : 0;
|
|
for (let i = 0; i < this.path.length; i++) {
|
|
this.path[i].shouldResetTransform = true;
|
|
}
|
|
if (this.root === this)
|
|
this.nodes = new FlatTree();
|
|
}
|
|
addEventListener(name, handler) {
|
|
if (!this.eventHandlers.has(name)) {
|
|
this.eventHandlers.set(name, new SubscriptionManager());
|
|
}
|
|
return this.eventHandlers.get(name).add(handler);
|
|
}
|
|
notifyListeners(name, ...args) {
|
|
const subscriptionManager = this.eventHandlers.get(name);
|
|
subscriptionManager && subscriptionManager.notify(...args);
|
|
}
|
|
hasListeners(name) {
|
|
return this.eventHandlers.has(name);
|
|
}
|
|
/**
|
|
* Lifecycles
|
|
*/
|
|
mount(instance, isLayoutDirty = this.root.hasTreeAnimated) {
|
|
if (this.instance)
|
|
return;
|
|
this.isSVG = isSVGElement(instance);
|
|
this.instance = instance;
|
|
const { layoutId, layout: layout2, visualElement } = this.options;
|
|
if (visualElement && !visualElement.current) {
|
|
visualElement.mount(instance);
|
|
}
|
|
this.root.nodes.add(this);
|
|
this.parent && this.parent.children.add(this);
|
|
if (isLayoutDirty && (layout2 || layoutId)) {
|
|
this.isLayoutDirty = true;
|
|
}
|
|
if (attachResizeListener) {
|
|
let cancelDelay;
|
|
const resizeUnblockUpdate = () => this.root.updateBlockedByResize = false;
|
|
attachResizeListener(instance, () => {
|
|
this.root.updateBlockedByResize = true;
|
|
cancelDelay && cancelDelay();
|
|
cancelDelay = delay(resizeUnblockUpdate, 250);
|
|
if (globalProjectionState.hasAnimatedSinceResize) {
|
|
globalProjectionState.hasAnimatedSinceResize = false;
|
|
this.nodes.forEach(finishAnimation);
|
|
}
|
|
});
|
|
}
|
|
if (layoutId) {
|
|
this.root.registerSharedNode(layoutId, this);
|
|
}
|
|
if (this.options.animate !== false && visualElement && (layoutId || layout2)) {
|
|
this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout }) => {
|
|
if (this.isTreeAnimationBlocked()) {
|
|
this.target = void 0;
|
|
this.relativeTarget = void 0;
|
|
return;
|
|
}
|
|
const layoutTransition = this.options.transition || visualElement.getDefaultTransition() || defaultLayoutTransition;
|
|
const { onLayoutAnimationStart, onLayoutAnimationComplete } = visualElement.getProps();
|
|
const targetChanged = !this.targetLayout || !boxEqualsRounded(this.targetLayout, newLayout) || hasRelativeTargetChanged;
|
|
const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged;
|
|
if (this.options.layoutRoot || this.resumeFrom && this.resumeFrom.instance || hasOnlyRelativeTargetChanged || hasLayoutChanged && (targetChanged || !this.currentAnimation)) {
|
|
if (this.resumeFrom) {
|
|
this.resumingFrom = this.resumeFrom;
|
|
this.resumingFrom.resumingFrom = void 0;
|
|
}
|
|
this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
|
|
const animationOptions = {
|
|
...getValueTransition(layoutTransition, "layout"),
|
|
onPlay: onLayoutAnimationStart,
|
|
onComplete: onLayoutAnimationComplete
|
|
};
|
|
if (visualElement.shouldReduceMotion || this.options.layoutRoot) {
|
|
animationOptions.delay = 0;
|
|
animationOptions.type = false;
|
|
}
|
|
this.startAnimation(animationOptions);
|
|
} else {
|
|
if (!hasLayoutChanged) {
|
|
finishAnimation(this);
|
|
}
|
|
if (this.isLead() && this.options.onExitComplete) {
|
|
this.options.onExitComplete();
|
|
}
|
|
}
|
|
this.targetLayout = newLayout;
|
|
});
|
|
}
|
|
}
|
|
unmount() {
|
|
this.options.layoutId && this.willUpdate();
|
|
this.root.nodes.remove(this);
|
|
const stack = this.getStack();
|
|
stack && stack.remove(this);
|
|
this.parent && this.parent.children.delete(this);
|
|
this.instance = void 0;
|
|
cancelFrame(this.updateProjection);
|
|
}
|
|
// only on the root
|
|
blockUpdate() {
|
|
this.updateManuallyBlocked = true;
|
|
}
|
|
unblockUpdate() {
|
|
this.updateManuallyBlocked = false;
|
|
}
|
|
isUpdateBlocked() {
|
|
return this.updateManuallyBlocked || this.updateBlockedByResize;
|
|
}
|
|
isTreeAnimationBlocked() {
|
|
return this.isAnimationBlocked || this.parent && this.parent.isTreeAnimationBlocked() || false;
|
|
}
|
|
// Note: currently only running on root node
|
|
startUpdate() {
|
|
if (this.isUpdateBlocked())
|
|
return;
|
|
this.isUpdating = true;
|
|
this.nodes && this.nodes.forEach(resetSkewAndRotation);
|
|
this.animationId++;
|
|
}
|
|
getTransformTemplate() {
|
|
const { visualElement } = this.options;
|
|
return visualElement && visualElement.getProps().transformTemplate;
|
|
}
|
|
willUpdate(shouldNotifyListeners = true) {
|
|
this.root.hasTreeAnimated = true;
|
|
if (this.root.isUpdateBlocked()) {
|
|
this.options.onExitComplete && this.options.onExitComplete();
|
|
return;
|
|
}
|
|
if (window.MotionCancelOptimisedAnimation && !this.hasCheckedOptimisedAppear) {
|
|
cancelTreeOptimisedTransformAnimations(this);
|
|
}
|
|
!this.root.isUpdating && this.root.startUpdate();
|
|
if (this.isLayoutDirty)
|
|
return;
|
|
this.isLayoutDirty = true;
|
|
for (let i = 0; i < this.path.length; i++) {
|
|
const node = this.path[i];
|
|
node.shouldResetTransform = true;
|
|
node.updateScroll("snapshot");
|
|
if (node.options.layoutRoot) {
|
|
node.willUpdate(false);
|
|
}
|
|
}
|
|
const { layoutId, layout: layout2 } = this.options;
|
|
if (layoutId === void 0 && !layout2)
|
|
return;
|
|
const transformTemplate = this.getTransformTemplate();
|
|
this.prevTransformTemplateValue = transformTemplate ? transformTemplate(this.latestValues, "") : void 0;
|
|
this.updateSnapshot();
|
|
shouldNotifyListeners && this.notifyListeners("willUpdate");
|
|
}
|
|
update() {
|
|
this.updateScheduled = false;
|
|
const updateWasBlocked = this.isUpdateBlocked();
|
|
if (updateWasBlocked) {
|
|
this.unblockUpdate();
|
|
this.clearAllSnapshots();
|
|
this.nodes.forEach(clearMeasurements);
|
|
return;
|
|
}
|
|
if (!this.isUpdating) {
|
|
this.nodes.forEach(clearIsLayoutDirty);
|
|
}
|
|
this.isUpdating = false;
|
|
this.nodes.forEach(resetTransformStyle);
|
|
this.nodes.forEach(updateLayout);
|
|
this.nodes.forEach(notifyLayoutUpdate);
|
|
this.clearAllSnapshots();
|
|
const now2 = time.now();
|
|
frameData.delta = clamp(0, 1e3 / 60, now2 - frameData.timestamp);
|
|
frameData.timestamp = now2;
|
|
frameData.isProcessing = true;
|
|
frameSteps.update.process(frameData);
|
|
frameSteps.preRender.process(frameData);
|
|
frameSteps.render.process(frameData);
|
|
frameData.isProcessing = false;
|
|
}
|
|
didUpdate() {
|
|
if (!this.updateScheduled) {
|
|
this.updateScheduled = true;
|
|
microtask.read(this.scheduleUpdate);
|
|
}
|
|
}
|
|
clearAllSnapshots() {
|
|
this.nodes.forEach(clearSnapshot);
|
|
this.sharedNodes.forEach(removeLeadSnapshots);
|
|
}
|
|
scheduleUpdateProjection() {
|
|
if (!this.projectionUpdateScheduled) {
|
|
this.projectionUpdateScheduled = true;
|
|
frame.preRender(this.updateProjection, false, true);
|
|
}
|
|
}
|
|
scheduleCheckAfterUnmount() {
|
|
frame.postRender(() => {
|
|
if (this.isLayoutDirty) {
|
|
this.root.didUpdate();
|
|
} else {
|
|
this.root.checkUpdateFailed();
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* Update measurements
|
|
*/
|
|
updateSnapshot() {
|
|
if (this.snapshot || !this.instance)
|
|
return;
|
|
this.snapshot = this.measure();
|
|
}
|
|
updateLayout() {
|
|
if (!this.instance)
|
|
return;
|
|
this.updateScroll();
|
|
if (!(this.options.alwaysMeasureLayout && this.isLead()) && !this.isLayoutDirty) {
|
|
return;
|
|
}
|
|
if (this.resumeFrom && !this.resumeFrom.instance) {
|
|
for (let i = 0; i < this.path.length; i++) {
|
|
const node = this.path[i];
|
|
node.updateScroll();
|
|
}
|
|
}
|
|
const prevLayout = this.layout;
|
|
this.layout = this.measure(false);
|
|
this.layoutCorrected = createBox();
|
|
this.isLayoutDirty = false;
|
|
this.projectionDelta = void 0;
|
|
this.notifyListeners("measure", this.layout.layoutBox);
|
|
const { visualElement } = this.options;
|
|
visualElement && visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : void 0);
|
|
}
|
|
updateScroll(phase = "measure") {
|
|
let needsMeasurement = Boolean(this.options.layoutScroll && this.instance);
|
|
if (this.scroll && this.scroll.animationId === this.root.animationId && this.scroll.phase === phase) {
|
|
needsMeasurement = false;
|
|
}
|
|
if (needsMeasurement) {
|
|
const isRoot = checkIsScrollRoot(this.instance);
|
|
this.scroll = {
|
|
animationId: this.root.animationId,
|
|
phase,
|
|
isRoot,
|
|
offset: measureScroll(this.instance),
|
|
wasRoot: this.scroll ? this.scroll.isRoot : isRoot
|
|
};
|
|
}
|
|
}
|
|
resetTransform() {
|
|
if (!resetTransform)
|
|
return;
|
|
const isResetRequested = this.isLayoutDirty || this.shouldResetTransform || this.options.alwaysMeasureLayout;
|
|
const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta);
|
|
const transformTemplate = this.getTransformTemplate();
|
|
const transformTemplateValue = transformTemplate ? transformTemplate(this.latestValues, "") : void 0;
|
|
const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue;
|
|
if (isResetRequested && (hasProjection || hasTransform(this.latestValues) || transformTemplateHasChanged)) {
|
|
resetTransform(this.instance, transformTemplateValue);
|
|
this.shouldResetTransform = false;
|
|
this.scheduleRender();
|
|
}
|
|
}
|
|
measure(removeTransform = true) {
|
|
const pageBox = this.measurePageBox();
|
|
let layoutBox = this.removeElementScroll(pageBox);
|
|
if (removeTransform) {
|
|
layoutBox = this.removeTransform(layoutBox);
|
|
}
|
|
roundBox(layoutBox);
|
|
return {
|
|
animationId: this.root.animationId,
|
|
measuredBox: pageBox,
|
|
layoutBox,
|
|
latestValues: {},
|
|
source: this.id
|
|
};
|
|
}
|
|
measurePageBox() {
|
|
var _a;
|
|
const { visualElement } = this.options;
|
|
if (!visualElement)
|
|
return createBox();
|
|
const box = visualElement.measureViewportBox();
|
|
const wasInScrollRoot = ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot);
|
|
if (!wasInScrollRoot) {
|
|
const { scroll: scroll2 } = this.root;
|
|
if (scroll2) {
|
|
translateAxis(box.x, scroll2.offset.x);
|
|
translateAxis(box.y, scroll2.offset.y);
|
|
}
|
|
}
|
|
return box;
|
|
}
|
|
removeElementScroll(box) {
|
|
var _a;
|
|
const boxWithoutScroll = createBox();
|
|
copyBoxInto(boxWithoutScroll, box);
|
|
if ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) {
|
|
return boxWithoutScroll;
|
|
}
|
|
for (let i = 0; i < this.path.length; i++) {
|
|
const node = this.path[i];
|
|
const { scroll: scroll2, options } = node;
|
|
if (node !== this.root && scroll2 && options.layoutScroll) {
|
|
if (scroll2.wasRoot) {
|
|
copyBoxInto(boxWithoutScroll, box);
|
|
}
|
|
translateAxis(boxWithoutScroll.x, scroll2.offset.x);
|
|
translateAxis(boxWithoutScroll.y, scroll2.offset.y);
|
|
}
|
|
}
|
|
return boxWithoutScroll;
|
|
}
|
|
applyTransform(box, transformOnly = false) {
|
|
const withTransforms = createBox();
|
|
copyBoxInto(withTransforms, box);
|
|
for (let i = 0; i < this.path.length; i++) {
|
|
const node = this.path[i];
|
|
if (!transformOnly && node.options.layoutScroll && node.scroll && node !== node.root) {
|
|
transformBox(withTransforms, {
|
|
x: -node.scroll.offset.x,
|
|
y: -node.scroll.offset.y
|
|
});
|
|
}
|
|
if (!hasTransform(node.latestValues))
|
|
continue;
|
|
transformBox(withTransforms, node.latestValues);
|
|
}
|
|
if (hasTransform(this.latestValues)) {
|
|
transformBox(withTransforms, this.latestValues);
|
|
}
|
|
return withTransforms;
|
|
}
|
|
removeTransform(box) {
|
|
const boxWithoutTransform = createBox();
|
|
copyBoxInto(boxWithoutTransform, box);
|
|
for (let i = 0; i < this.path.length; i++) {
|
|
const node = this.path[i];
|
|
if (!node.instance)
|
|
continue;
|
|
if (!hasTransform(node.latestValues))
|
|
continue;
|
|
hasScale(node.latestValues) && node.updateSnapshot();
|
|
const sourceBox = createBox();
|
|
const nodeBox = node.measurePageBox();
|
|
copyBoxInto(sourceBox, nodeBox);
|
|
removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : void 0, sourceBox);
|
|
}
|
|
if (hasTransform(this.latestValues)) {
|
|
removeBoxTransforms(boxWithoutTransform, this.latestValues);
|
|
}
|
|
return boxWithoutTransform;
|
|
}
|
|
setTargetDelta(delta) {
|
|
this.targetDelta = delta;
|
|
this.root.scheduleUpdateProjection();
|
|
this.isProjectionDirty = true;
|
|
}
|
|
setOptions(options) {
|
|
this.options = {
|
|
...this.options,
|
|
...options,
|
|
crossfade: options.crossfade !== void 0 ? options.crossfade : true
|
|
};
|
|
}
|
|
clearMeasurements() {
|
|
this.scroll = void 0;
|
|
this.layout = void 0;
|
|
this.snapshot = void 0;
|
|
this.prevTransformTemplateValue = void 0;
|
|
this.targetDelta = void 0;
|
|
this.target = void 0;
|
|
this.isLayoutDirty = false;
|
|
}
|
|
forceRelativeParentToResolveTarget() {
|
|
if (!this.relativeParent)
|
|
return;
|
|
if (this.relativeParent.resolvedRelativeTargetAt !== frameData.timestamp) {
|
|
this.relativeParent.resolveTargetDelta(true);
|
|
}
|
|
}
|
|
resolveTargetDelta(forceRecalculation = false) {
|
|
var _a;
|
|
const lead = this.getLead();
|
|
this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty);
|
|
this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
|
|
this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
|
|
const isShared = Boolean(this.resumingFrom) || this !== lead;
|
|
const canSkip = !(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize);
|
|
if (canSkip)
|
|
return;
|
|
const { layout: layout2, layoutId } = this.options;
|
|
if (!this.layout || !(layout2 || layoutId))
|
|
return;
|
|
this.resolvedRelativeTargetAt = frameData.timestamp;
|
|
if (!this.targetDelta && !this.relativeTarget) {
|
|
const relativeParent = this.getClosestProjectingParent();
|
|
if (relativeParent && relativeParent.layout && this.animationProgress !== 1) {
|
|
this.relativeParent = relativeParent;
|
|
this.forceRelativeParentToResolveTarget();
|
|
this.relativeTarget = createBox();
|
|
this.relativeTargetOrigin = createBox();
|
|
calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
|
|
copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
|
|
} else {
|
|
this.relativeParent = this.relativeTarget = void 0;
|
|
}
|
|
}
|
|
if (!this.relativeTarget && !this.targetDelta)
|
|
return;
|
|
if (!this.target) {
|
|
this.target = createBox();
|
|
this.targetWithTransforms = createBox();
|
|
}
|
|
if (this.relativeTarget && this.relativeTargetOrigin && this.relativeParent && this.relativeParent.target) {
|
|
this.forceRelativeParentToResolveTarget();
|
|
calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
|
|
} else if (this.targetDelta) {
|
|
if (Boolean(this.resumingFrom)) {
|
|
this.target = this.applyTransform(this.layout.layoutBox);
|
|
} else {
|
|
copyBoxInto(this.target, this.layout.layoutBox);
|
|
}
|
|
applyBoxDelta(this.target, this.targetDelta);
|
|
} else {
|
|
copyBoxInto(this.target, this.layout.layoutBox);
|
|
}
|
|
if (this.attemptToResolveRelativeTarget) {
|
|
this.attemptToResolveRelativeTarget = false;
|
|
const relativeParent = this.getClosestProjectingParent();
|
|
if (relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) {
|
|
this.relativeParent = relativeParent;
|
|
this.forceRelativeParentToResolveTarget();
|
|
this.relativeTarget = createBox();
|
|
this.relativeTargetOrigin = createBox();
|
|
calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
|
|
copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
|
|
} else {
|
|
this.relativeParent = this.relativeTarget = void 0;
|
|
}
|
|
}
|
|
if (isDebug) {
|
|
metrics.resolvedTargetDeltas++;
|
|
}
|
|
}
|
|
getClosestProjectingParent() {
|
|
if (!this.parent || hasScale(this.parent.latestValues) || has2DTranslate(this.parent.latestValues)) {
|
|
return void 0;
|
|
}
|
|
if (this.parent.isProjecting()) {
|
|
return this.parent;
|
|
} else {
|
|
return this.parent.getClosestProjectingParent();
|
|
}
|
|
}
|
|
isProjecting() {
|
|
return Boolean((this.relativeTarget || this.targetDelta || this.options.layoutRoot) && this.layout);
|
|
}
|
|
calcProjection() {
|
|
var _a;
|
|
const lead = this.getLead();
|
|
const isShared = Boolean(this.resumingFrom) || this !== lead;
|
|
let canSkip = true;
|
|
if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {
|
|
canSkip = false;
|
|
}
|
|
if (isShared && (this.isSharedProjectionDirty || this.isTransformDirty)) {
|
|
canSkip = false;
|
|
}
|
|
if (this.resolvedRelativeTargetAt === frameData.timestamp) {
|
|
canSkip = false;
|
|
}
|
|
if (canSkip)
|
|
return;
|
|
const { layout: layout2, layoutId } = this.options;
|
|
this.isTreeAnimating = Boolean(this.parent && this.parent.isTreeAnimating || this.currentAnimation || this.pendingAnimation);
|
|
if (!this.isTreeAnimating) {
|
|
this.targetDelta = this.relativeTarget = void 0;
|
|
}
|
|
if (!this.layout || !(layout2 || layoutId))
|
|
return;
|
|
copyBoxInto(this.layoutCorrected, this.layout.layoutBox);
|
|
const prevTreeScaleX = this.treeScale.x;
|
|
const prevTreeScaleY = this.treeScale.y;
|
|
applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);
|
|
if (lead.layout && !lead.target && (this.treeScale.x !== 1 || this.treeScale.y !== 1)) {
|
|
lead.target = lead.layout.layoutBox;
|
|
lead.targetWithTransforms = createBox();
|
|
}
|
|
const { target } = lead;
|
|
if (!target) {
|
|
if (this.prevProjectionDelta) {
|
|
this.createProjectionDeltas();
|
|
this.scheduleRender();
|
|
}
|
|
return;
|
|
}
|
|
if (!this.projectionDelta || !this.prevProjectionDelta) {
|
|
this.createProjectionDeltas();
|
|
} else {
|
|
copyAxisDeltaInto(this.prevProjectionDelta.x, this.projectionDelta.x);
|
|
copyAxisDeltaInto(this.prevProjectionDelta.y, this.projectionDelta.y);
|
|
}
|
|
calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);
|
|
if (this.treeScale.x !== prevTreeScaleX || this.treeScale.y !== prevTreeScaleY || !axisDeltaEquals(this.projectionDelta.x, this.prevProjectionDelta.x) || !axisDeltaEquals(this.projectionDelta.y, this.prevProjectionDelta.y)) {
|
|
this.hasProjected = true;
|
|
this.scheduleRender();
|
|
this.notifyListeners("projectionUpdate", target);
|
|
}
|
|
if (isDebug) {
|
|
metrics.recalculatedProjection++;
|
|
}
|
|
}
|
|
hide() {
|
|
this.isVisible = false;
|
|
}
|
|
show() {
|
|
this.isVisible = true;
|
|
}
|
|
scheduleRender(notifyAll2 = true) {
|
|
var _a;
|
|
(_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();
|
|
if (notifyAll2) {
|
|
const stack = this.getStack();
|
|
stack && stack.scheduleRender();
|
|
}
|
|
if (this.resumingFrom && !this.resumingFrom.instance) {
|
|
this.resumingFrom = void 0;
|
|
}
|
|
}
|
|
createProjectionDeltas() {
|
|
this.prevProjectionDelta = createDelta();
|
|
this.projectionDelta = createDelta();
|
|
this.projectionDeltaWithTransform = createDelta();
|
|
}
|
|
setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
|
|
const snapshot = this.snapshot;
|
|
const snapshotLatestValues = snapshot ? snapshot.latestValues : {};
|
|
const mixedValues = { ...this.latestValues };
|
|
const targetDelta = createDelta();
|
|
if (!this.relativeParent || !this.relativeParent.options.layoutRoot) {
|
|
this.relativeTarget = this.relativeTargetOrigin = void 0;
|
|
}
|
|
this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
|
|
const relativeLayout = createBox();
|
|
const snapshotSource = snapshot ? snapshot.source : void 0;
|
|
const layoutSource = this.layout ? this.layout.source : void 0;
|
|
const isSharedLayoutAnimation = snapshotSource !== layoutSource;
|
|
const stack = this.getStack();
|
|
const isOnlyMember = !stack || stack.members.length <= 1;
|
|
const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation && !isOnlyMember && this.options.crossfade === true && !this.path.some(hasOpacityCrossfade));
|
|
this.animationProgress = 0;
|
|
let prevRelativeTarget;
|
|
this.mixTargetDelta = (latest) => {
|
|
const progress2 = latest / 1e3;
|
|
mixAxisDelta(targetDelta.x, delta.x, progress2);
|
|
mixAxisDelta(targetDelta.y, delta.y, progress2);
|
|
this.setTargetDelta(targetDelta);
|
|
if (this.relativeTarget && this.relativeTargetOrigin && this.layout && this.relativeParent && this.relativeParent.layout) {
|
|
calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
|
|
mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress2);
|
|
if (prevRelativeTarget && boxEquals(this.relativeTarget, prevRelativeTarget)) {
|
|
this.isProjectionDirty = false;
|
|
}
|
|
if (!prevRelativeTarget)
|
|
prevRelativeTarget = createBox();
|
|
copyBoxInto(prevRelativeTarget, this.relativeTarget);
|
|
}
|
|
if (isSharedLayoutAnimation) {
|
|
this.animationValues = mixedValues;
|
|
mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress2, shouldCrossfadeOpacity, isOnlyMember);
|
|
}
|
|
this.root.scheduleUpdateProjection();
|
|
this.scheduleRender();
|
|
this.animationProgress = progress2;
|
|
};
|
|
this.mixTargetDelta(this.options.layoutRoot ? 1e3 : 0);
|
|
}
|
|
startAnimation(options) {
|
|
this.notifyListeners("animationStart");
|
|
this.currentAnimation && this.currentAnimation.stop();
|
|
if (this.resumingFrom && this.resumingFrom.currentAnimation) {
|
|
this.resumingFrom.currentAnimation.stop();
|
|
}
|
|
if (this.pendingAnimation) {
|
|
cancelFrame(this.pendingAnimation);
|
|
this.pendingAnimation = void 0;
|
|
}
|
|
this.pendingAnimation = frame.update(() => {
|
|
globalProjectionState.hasAnimatedSinceResize = true;
|
|
this.currentAnimation = animateSingleValue(0, animationTarget, {
|
|
...options,
|
|
onUpdate: (latest) => {
|
|
this.mixTargetDelta(latest);
|
|
options.onUpdate && options.onUpdate(latest);
|
|
},
|
|
onComplete: () => {
|
|
options.onComplete && options.onComplete();
|
|
this.completeAnimation();
|
|
}
|
|
});
|
|
if (this.resumingFrom) {
|
|
this.resumingFrom.currentAnimation = this.currentAnimation;
|
|
}
|
|
this.pendingAnimation = void 0;
|
|
});
|
|
}
|
|
completeAnimation() {
|
|
if (this.resumingFrom) {
|
|
this.resumingFrom.currentAnimation = void 0;
|
|
this.resumingFrom.preserveOpacity = void 0;
|
|
}
|
|
const stack = this.getStack();
|
|
stack && stack.exitAnimationComplete();
|
|
this.resumingFrom = this.currentAnimation = this.animationValues = void 0;
|
|
this.notifyListeners("animationComplete");
|
|
}
|
|
finishAnimation() {
|
|
if (this.currentAnimation) {
|
|
this.mixTargetDelta && this.mixTargetDelta(animationTarget);
|
|
this.currentAnimation.stop();
|
|
}
|
|
this.completeAnimation();
|
|
}
|
|
applyTransformsToTarget() {
|
|
const lead = this.getLead();
|
|
let { targetWithTransforms, target, layout: layout2, latestValues } = lead;
|
|
if (!targetWithTransforms || !target || !layout2)
|
|
return;
|
|
if (this !== lead && this.layout && layout2 && shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout2.layoutBox)) {
|
|
target = this.target || createBox();
|
|
const xLength = calcLength(this.layout.layoutBox.x);
|
|
target.x.min = lead.target.x.min;
|
|
target.x.max = target.x.min + xLength;
|
|
const yLength = calcLength(this.layout.layoutBox.y);
|
|
target.y.min = lead.target.y.min;
|
|
target.y.max = target.y.min + yLength;
|
|
}
|
|
copyBoxInto(targetWithTransforms, target);
|
|
transformBox(targetWithTransforms, latestValues);
|
|
calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
|
|
}
|
|
registerSharedNode(layoutId, node) {
|
|
if (!this.sharedNodes.has(layoutId)) {
|
|
this.sharedNodes.set(layoutId, new NodeStack());
|
|
}
|
|
const stack = this.sharedNodes.get(layoutId);
|
|
stack.add(node);
|
|
const config = node.options.initialPromotionConfig;
|
|
node.promote({
|
|
transition: config ? config.transition : void 0,
|
|
preserveFollowOpacity: config && config.shouldPreserveFollowOpacity ? config.shouldPreserveFollowOpacity(node) : void 0
|
|
});
|
|
}
|
|
isLead() {
|
|
const stack = this.getStack();
|
|
return stack ? stack.lead === this : true;
|
|
}
|
|
getLead() {
|
|
var _a;
|
|
const { layoutId } = this.options;
|
|
return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
|
|
}
|
|
getPrevLead() {
|
|
var _a;
|
|
const { layoutId } = this.options;
|
|
return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : void 0;
|
|
}
|
|
getStack() {
|
|
const { layoutId } = this.options;
|
|
if (layoutId)
|
|
return this.root.sharedNodes.get(layoutId);
|
|
}
|
|
promote({ needsReset, transition, preserveFollowOpacity } = {}) {
|
|
const stack = this.getStack();
|
|
if (stack)
|
|
stack.promote(this, preserveFollowOpacity);
|
|
if (needsReset) {
|
|
this.projectionDelta = void 0;
|
|
this.needsReset = true;
|
|
}
|
|
if (transition)
|
|
this.setOptions({ transition });
|
|
}
|
|
relegate() {
|
|
const stack = this.getStack();
|
|
if (stack) {
|
|
return stack.relegate(this);
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
resetSkewAndRotation() {
|
|
const { visualElement } = this.options;
|
|
if (!visualElement)
|
|
return;
|
|
let hasDistortingTransform = false;
|
|
const { latestValues } = visualElement;
|
|
if (latestValues.z || latestValues.rotate || latestValues.rotateX || latestValues.rotateY || latestValues.rotateZ || latestValues.skewX || latestValues.skewY) {
|
|
hasDistortingTransform = true;
|
|
}
|
|
if (!hasDistortingTransform)
|
|
return;
|
|
const resetValues = {};
|
|
if (latestValues.z) {
|
|
resetDistortingTransform("z", visualElement, resetValues, this.animationValues);
|
|
}
|
|
for (let i = 0; i < transformAxes.length; i++) {
|
|
resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues, this.animationValues);
|
|
resetDistortingTransform(`skew${transformAxes[i]}`, visualElement, resetValues, this.animationValues);
|
|
}
|
|
visualElement.render();
|
|
for (const key in resetValues) {
|
|
visualElement.setStaticValue(key, resetValues[key]);
|
|
if (this.animationValues) {
|
|
this.animationValues[key] = resetValues[key];
|
|
}
|
|
}
|
|
visualElement.scheduleRender();
|
|
}
|
|
getProjectionStyles(styleProp) {
|
|
var _a, _b;
|
|
if (!this.instance || this.isSVG)
|
|
return void 0;
|
|
if (!this.isVisible) {
|
|
return hiddenVisibility;
|
|
}
|
|
const styles = {
|
|
visibility: ""
|
|
};
|
|
const transformTemplate = this.getTransformTemplate();
|
|
if (this.needsReset) {
|
|
this.needsReset = false;
|
|
styles.opacity = "";
|
|
styles.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
|
|
styles.transform = transformTemplate ? transformTemplate(this.latestValues, "") : "none";
|
|
return styles;
|
|
}
|
|
const lead = this.getLead();
|
|
if (!this.projectionDelta || !this.layout || !lead.target) {
|
|
const emptyStyles = {};
|
|
if (this.options.layoutId) {
|
|
emptyStyles.opacity = this.latestValues.opacity !== void 0 ? this.latestValues.opacity : 1;
|
|
emptyStyles.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
|
|
}
|
|
if (this.hasProjected && !hasTransform(this.latestValues)) {
|
|
emptyStyles.transform = transformTemplate ? transformTemplate({}, "") : "none";
|
|
this.hasProjected = false;
|
|
}
|
|
return emptyStyles;
|
|
}
|
|
const valuesToRender = lead.animationValues || lead.latestValues;
|
|
this.applyTransformsToTarget();
|
|
styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
|
|
if (transformTemplate) {
|
|
styles.transform = transformTemplate(valuesToRender, styles.transform);
|
|
}
|
|
const { x, y } = this.projectionDelta;
|
|
styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
|
|
if (lead.animationValues) {
|
|
styles.opacity = lead === this ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit;
|
|
} else {
|
|
styles.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
|
|
}
|
|
for (const key in scaleCorrectors) {
|
|
if (valuesToRender[key] === void 0)
|
|
continue;
|
|
const { correct, applyTo } = scaleCorrectors[key];
|
|
const corrected = styles.transform === "none" ? valuesToRender[key] : correct(valuesToRender[key], lead);
|
|
if (applyTo) {
|
|
const num = applyTo.length;
|
|
for (let i = 0; i < num; i++) {
|
|
styles[applyTo[i]] = corrected;
|
|
}
|
|
} else {
|
|
styles[key] = corrected;
|
|
}
|
|
}
|
|
if (this.options.layoutId) {
|
|
styles.pointerEvents = lead === this ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "" : "none";
|
|
}
|
|
return styles;
|
|
}
|
|
clearSnapshot() {
|
|
this.resumeFrom = this.snapshot = void 0;
|
|
}
|
|
// Only run on root
|
|
resetTree() {
|
|
this.root.nodes.forEach((node) => {
|
|
var _a;
|
|
return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop();
|
|
});
|
|
this.root.nodes.forEach(clearMeasurements);
|
|
this.root.sharedNodes.clear();
|
|
}
|
|
};
|
|
}
|
|
function updateLayout(node) {
|
|
node.updateLayout();
|
|
}
|
|
function notifyLayoutUpdate(node) {
|
|
var _a;
|
|
const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
|
|
if (node.isLead() && node.layout && snapshot && node.hasListeners("didUpdate")) {
|
|
const { layoutBox: layout2, measuredBox: measuredLayout } = node.layout;
|
|
const { animationType } = node.options;
|
|
const isShared = snapshot.source !== node.layout.source;
|
|
if (animationType === "size") {
|
|
eachAxis((axis) => {
|
|
const axisSnapshot = isShared ? snapshot.measuredBox[axis] : snapshot.layoutBox[axis];
|
|
const length = calcLength(axisSnapshot);
|
|
axisSnapshot.min = layout2[axis].min;
|
|
axisSnapshot.max = axisSnapshot.min + length;
|
|
});
|
|
} else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout2)) {
|
|
eachAxis((axis) => {
|
|
const axisSnapshot = isShared ? snapshot.measuredBox[axis] : snapshot.layoutBox[axis];
|
|
const length = calcLength(layout2[axis]);
|
|
axisSnapshot.max = axisSnapshot.min + length;
|
|
if (node.relativeTarget && !node.currentAnimation) {
|
|
node.isProjectionDirty = true;
|
|
node.relativeTarget[axis].max = node.relativeTarget[axis].min + length;
|
|
}
|
|
});
|
|
}
|
|
const layoutDelta = createDelta();
|
|
calcBoxDelta(layoutDelta, layout2, snapshot.layoutBox);
|
|
const visualDelta = createDelta();
|
|
if (isShared) {
|
|
calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
|
|
} else {
|
|
calcBoxDelta(visualDelta, layout2, snapshot.layoutBox);
|
|
}
|
|
const hasLayoutChanged = !isDeltaZero(layoutDelta);
|
|
let hasRelativeTargetChanged = false;
|
|
if (!node.resumeFrom) {
|
|
const relativeParent = node.getClosestProjectingParent();
|
|
if (relativeParent && !relativeParent.resumeFrom) {
|
|
const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
|
|
if (parentSnapshot && parentLayout) {
|
|
const relativeSnapshot = createBox();
|
|
calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
|
|
const relativeLayout = createBox();
|
|
calcRelativePosition(relativeLayout, layout2, parentLayout.layoutBox);
|
|
if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
|
|
hasRelativeTargetChanged = true;
|
|
}
|
|
if (relativeParent.options.layoutRoot) {
|
|
node.relativeTarget = relativeLayout;
|
|
node.relativeTargetOrigin = relativeSnapshot;
|
|
node.relativeParent = relativeParent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
node.notifyListeners("didUpdate", {
|
|
layout: layout2,
|
|
snapshot,
|
|
delta: visualDelta,
|
|
layoutDelta,
|
|
hasLayoutChanged,
|
|
hasRelativeTargetChanged
|
|
});
|
|
} else if (node.isLead()) {
|
|
const { onExitComplete } = node.options;
|
|
onExitComplete && onExitComplete();
|
|
}
|
|
node.options.transition = void 0;
|
|
}
|
|
function propagateDirtyNodes(node) {
|
|
if (isDebug) {
|
|
metrics.totalNodes++;
|
|
}
|
|
if (!node.parent)
|
|
return;
|
|
if (!node.isProjecting()) {
|
|
node.isProjectionDirty = node.parent.isProjectionDirty;
|
|
}
|
|
node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty || node.parent.isProjectionDirty || node.parent.isSharedProjectionDirty));
|
|
node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty);
|
|
}
|
|
function cleanDirtyNodes(node) {
|
|
node.isProjectionDirty = node.isSharedProjectionDirty = node.isTransformDirty = false;
|
|
}
|
|
function clearSnapshot(node) {
|
|
node.clearSnapshot();
|
|
}
|
|
function clearMeasurements(node) {
|
|
node.clearMeasurements();
|
|
}
|
|
function clearIsLayoutDirty(node) {
|
|
node.isLayoutDirty = false;
|
|
}
|
|
function resetTransformStyle(node) {
|
|
const { visualElement } = node.options;
|
|
if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
|
|
visualElement.notify("BeforeLayoutMeasure");
|
|
}
|
|
node.resetTransform();
|
|
}
|
|
function finishAnimation(node) {
|
|
node.finishAnimation();
|
|
node.targetDelta = node.relativeTarget = node.target = void 0;
|
|
node.isProjectionDirty = true;
|
|
}
|
|
function resolveTargetDelta(node) {
|
|
node.resolveTargetDelta();
|
|
}
|
|
function calcProjection(node) {
|
|
node.calcProjection();
|
|
}
|
|
function resetSkewAndRotation(node) {
|
|
node.resetSkewAndRotation();
|
|
}
|
|
function removeLeadSnapshots(stack) {
|
|
stack.removeLeadSnapshot();
|
|
}
|
|
function mixAxisDelta(output, delta, p) {
|
|
output.translate = mixNumber(delta.translate, 0, p);
|
|
output.scale = mixNumber(delta.scale, 1, p);
|
|
output.origin = delta.origin;
|
|
output.originPoint = delta.originPoint;
|
|
}
|
|
function mixAxis(output, from, to, p) {
|
|
output.min = mixNumber(from.min, to.min, p);
|
|
output.max = mixNumber(from.max, to.max, p);
|
|
}
|
|
function mixBox(output, from, to, p) {
|
|
mixAxis(output.x, from.x, to.x, p);
|
|
mixAxis(output.y, from.y, to.y, p);
|
|
}
|
|
function hasOpacityCrossfade(node) {
|
|
return node.animationValues && node.animationValues.opacityExit !== void 0;
|
|
}
|
|
var defaultLayoutTransition = {
|
|
duration: 0.45,
|
|
ease: [0.4, 0, 0.1, 1]
|
|
};
|
|
var userAgentContains = (string) => typeof navigator !== "undefined" && navigator.userAgent && navigator.userAgent.toLowerCase().includes(string);
|
|
var roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/") ? Math.round : noop;
|
|
function roundAxis(axis) {
|
|
axis.min = roundPoint(axis.min);
|
|
axis.max = roundPoint(axis.max);
|
|
}
|
|
function roundBox(box) {
|
|
roundAxis(box.x);
|
|
roundAxis(box.y);
|
|
}
|
|
function shouldAnimatePositionOnly(animationType, snapshot, layout2) {
|
|
return animationType === "position" || animationType === "preserve-aspect" && !isNear(aspectRatio(snapshot), aspectRatio(layout2), 0.2);
|
|
}
|
|
function checkNodeWasScrollRoot(node) {
|
|
var _a;
|
|
return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs
|
|
var DocumentProjectionNode = createProjectionNode2({
|
|
attachResizeListener: (ref, notify2) => addDomEvent(ref, "resize", notify2),
|
|
measureScroll: () => ({
|
|
x: document.documentElement.scrollLeft || document.body.scrollLeft,
|
|
y: document.documentElement.scrollTop || document.body.scrollTop
|
|
}),
|
|
checkIsScrollRoot: () => true
|
|
});
|
|
|
|
// node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs
|
|
var rootProjectionNode = {
|
|
current: void 0
|
|
};
|
|
var HTMLProjectionNode = createProjectionNode2({
|
|
measureScroll: (instance) => ({
|
|
x: instance.scrollLeft,
|
|
y: instance.scrollTop
|
|
}),
|
|
defaultParent: () => {
|
|
if (!rootProjectionNode.current) {
|
|
const documentNode = new DocumentProjectionNode({});
|
|
documentNode.mount(window);
|
|
documentNode.setOptions({ layoutScroll: true });
|
|
rootProjectionNode.current = documentNode;
|
|
}
|
|
return rootProjectionNode.current;
|
|
},
|
|
resetTransform: (instance, value) => {
|
|
instance.style.transform = value !== void 0 ? value : "none";
|
|
},
|
|
checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed")
|
|
});
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/drag.mjs
|
|
var drag = {
|
|
pan: {
|
|
Feature: PanGesture
|
|
},
|
|
drag: {
|
|
Feature: DragGesture,
|
|
ProjectionNode: HTMLProjectionNode,
|
|
MeasureLayout
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/gestures/hover.mjs
|
|
function handleHoverEvent(node, event, lifecycle) {
|
|
const { props } = node;
|
|
if (node.animationState && props.whileHover) {
|
|
node.animationState.setActive("whileHover", lifecycle === "Start");
|
|
}
|
|
const eventName = "onHover" + lifecycle;
|
|
const callback = props[eventName];
|
|
if (callback) {
|
|
frame.postRender(() => callback(event, extractEventInfo(event)));
|
|
}
|
|
}
|
|
var HoverGesture = class extends Feature {
|
|
mount() {
|
|
const { current } = this.node;
|
|
if (!current)
|
|
return;
|
|
this.unmount = hover(current, (startEvent) => {
|
|
handleHoverEvent(this.node, startEvent, "Start");
|
|
return (endEvent) => handleHoverEvent(this.node, endEvent, "End");
|
|
});
|
|
}
|
|
unmount() {
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/gestures/focus.mjs
|
|
var FocusGesture = class extends Feature {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.isActive = false;
|
|
}
|
|
onFocus() {
|
|
let isFocusVisible = false;
|
|
try {
|
|
isFocusVisible = this.node.current.matches(":focus-visible");
|
|
} catch (e) {
|
|
isFocusVisible = true;
|
|
}
|
|
if (!isFocusVisible || !this.node.animationState)
|
|
return;
|
|
this.node.animationState.setActive("whileFocus", true);
|
|
this.isActive = true;
|
|
}
|
|
onBlur() {
|
|
if (!this.isActive || !this.node.animationState)
|
|
return;
|
|
this.node.animationState.setActive("whileFocus", false);
|
|
this.isActive = false;
|
|
}
|
|
mount() {
|
|
this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur()));
|
|
}
|
|
unmount() {
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/gestures/press.mjs
|
|
function handlePressEvent(node, event, lifecycle) {
|
|
const { props } = node;
|
|
if (node.animationState && props.whileTap) {
|
|
node.animationState.setActive("whileTap", lifecycle === "Start");
|
|
}
|
|
const eventName = "onTap" + (lifecycle === "End" ? "" : lifecycle);
|
|
const callback = props[eventName];
|
|
if (callback) {
|
|
frame.postRender(() => callback(event, extractEventInfo(event)));
|
|
}
|
|
}
|
|
var PressGesture = class extends Feature {
|
|
mount() {
|
|
const { current } = this.node;
|
|
if (!current)
|
|
return;
|
|
this.unmount = press(current, (startEvent) => {
|
|
handlePressEvent(this.node, startEvent, "Start");
|
|
return (endEvent, { success }) => handlePressEvent(this.node, endEvent, success ? "End" : "Cancel");
|
|
}, { useGlobalTarget: this.node.props.globalTapTarget });
|
|
}
|
|
unmount() {
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs
|
|
var observerCallbacks = /* @__PURE__ */ new WeakMap();
|
|
var observers = /* @__PURE__ */ new WeakMap();
|
|
var fireObserverCallback = (entry) => {
|
|
const callback = observerCallbacks.get(entry.target);
|
|
callback && callback(entry);
|
|
};
|
|
var fireAllObserverCallbacks = (entries) => {
|
|
entries.forEach(fireObserverCallback);
|
|
};
|
|
function initIntersectionObserver({ root, ...options }) {
|
|
const lookupRoot = root || document;
|
|
if (!observers.has(lookupRoot)) {
|
|
observers.set(lookupRoot, {});
|
|
}
|
|
const rootObservers = observers.get(lookupRoot);
|
|
const key = JSON.stringify(options);
|
|
if (!rootObservers[key]) {
|
|
rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });
|
|
}
|
|
return rootObservers[key];
|
|
}
|
|
function observeIntersection(element, options, callback) {
|
|
const rootInteresectionObserver = initIntersectionObserver(options);
|
|
observerCallbacks.set(element, callback);
|
|
rootInteresectionObserver.observe(element);
|
|
return () => {
|
|
observerCallbacks.delete(element);
|
|
rootInteresectionObserver.unobserve(element);
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/viewport/index.mjs
|
|
var thresholdNames = {
|
|
some: 0,
|
|
all: 1
|
|
};
|
|
var InViewFeature = class extends Feature {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.hasEnteredView = false;
|
|
this.isInView = false;
|
|
}
|
|
startObserver() {
|
|
this.unmount();
|
|
const { viewport = {} } = this.node.getProps();
|
|
const { root, margin: rootMargin, amount = "some", once } = viewport;
|
|
const options = {
|
|
root: root ? root.current : void 0,
|
|
rootMargin,
|
|
threshold: typeof amount === "number" ? amount : thresholdNames[amount]
|
|
};
|
|
const onIntersectionUpdate = (entry) => {
|
|
const { isIntersecting } = entry;
|
|
if (this.isInView === isIntersecting)
|
|
return;
|
|
this.isInView = isIntersecting;
|
|
if (once && !isIntersecting && this.hasEnteredView) {
|
|
return;
|
|
} else if (isIntersecting) {
|
|
this.hasEnteredView = true;
|
|
}
|
|
if (this.node.animationState) {
|
|
this.node.animationState.setActive("whileInView", isIntersecting);
|
|
}
|
|
const { onViewportEnter, onViewportLeave } = this.node.getProps();
|
|
const callback = isIntersecting ? onViewportEnter : onViewportLeave;
|
|
callback && callback(entry);
|
|
};
|
|
return observeIntersection(this.node.current, options, onIntersectionUpdate);
|
|
}
|
|
mount() {
|
|
this.startObserver();
|
|
}
|
|
update() {
|
|
if (typeof IntersectionObserver === "undefined")
|
|
return;
|
|
const { props, prevProps } = this.node;
|
|
const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps));
|
|
if (hasOptionsChanged) {
|
|
this.startObserver();
|
|
}
|
|
}
|
|
unmount() {
|
|
}
|
|
};
|
|
function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {
|
|
return (name) => viewport[name] !== prevViewport[name];
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/gestures.mjs
|
|
var gestureAnimations = {
|
|
inView: {
|
|
Feature: InViewFeature
|
|
},
|
|
tap: {
|
|
Feature: PressGesture
|
|
},
|
|
focus: {
|
|
Feature: FocusGesture
|
|
},
|
|
hover: {
|
|
Feature: HoverGesture
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/motion/features/layout.mjs
|
|
var layout = {
|
|
layout: {
|
|
ProjectionNode: HTMLProjectionNode,
|
|
MeasureLayout
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs
|
|
var import_react29 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs
|
|
var prefersReducedMotion = { current: null };
|
|
var hasReducedMotionListener = { current: false };
|
|
|
|
// node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs
|
|
function initPrefersReducedMotion() {
|
|
hasReducedMotionListener.current = true;
|
|
if (!isBrowser)
|
|
return;
|
|
if (window.matchMedia) {
|
|
const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
|
|
const setReducedMotionPreferences = () => prefersReducedMotion.current = motionMediaQuery.matches;
|
|
motionMediaQuery.addListener(setReducedMotionPreferences);
|
|
setReducedMotionPreferences();
|
|
} else {
|
|
prefersReducedMotion.current = false;
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs
|
|
var valueTypes = [...dimensionValueTypes, color, complex];
|
|
var findValueType = (v) => valueTypes.find(testValueType(v));
|
|
|
|
// node_modules/framer-motion/dist/es/render/store.mjs
|
|
var visualElementStore = /* @__PURE__ */ new WeakMap();
|
|
|
|
// node_modules/framer-motion/dist/es/render/utils/motion-values.mjs
|
|
function updateMotionValuesFromProps(element, next, prev) {
|
|
for (const key in next) {
|
|
const nextValue = next[key];
|
|
const prevValue = prev[key];
|
|
if (isMotionValue(nextValue)) {
|
|
element.addValue(key, nextValue);
|
|
if (true) {
|
|
warnOnce(nextValue.version === "11.18.2", `Attempting to mix Motion versions ${nextValue.version} with 11.18.2 may not work as expected.`);
|
|
}
|
|
} else if (isMotionValue(prevValue)) {
|
|
element.addValue(key, motionValue(nextValue, { owner: element }));
|
|
} else if (prevValue !== nextValue) {
|
|
if (element.hasValue(key)) {
|
|
const existingValue = element.getValue(key);
|
|
if (existingValue.liveStyle === true) {
|
|
existingValue.jump(nextValue);
|
|
} else if (!existingValue.hasAnimated) {
|
|
existingValue.set(nextValue);
|
|
}
|
|
} else {
|
|
const latestValue = element.getStaticValue(key);
|
|
element.addValue(key, motionValue(latestValue !== void 0 ? latestValue : nextValue, { owner: element }));
|
|
}
|
|
}
|
|
}
|
|
for (const key in prev) {
|
|
if (next[key] === void 0)
|
|
element.removeValue(key);
|
|
}
|
|
return next;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/VisualElement.mjs
|
|
var propEventHandlers = [
|
|
"AnimationStart",
|
|
"AnimationComplete",
|
|
"Update",
|
|
"BeforeLayoutMeasure",
|
|
"LayoutMeasure",
|
|
"LayoutAnimationStart",
|
|
"LayoutAnimationComplete"
|
|
];
|
|
var VisualElement = class {
|
|
/**
|
|
* This method takes React props and returns found MotionValues. For example, HTML
|
|
* MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
|
|
*
|
|
* This isn't an abstract method as it needs calling in the constructor, but it is
|
|
* intended to be one.
|
|
*/
|
|
scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) {
|
|
return {};
|
|
}
|
|
constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState }, options = {}) {
|
|
this.current = null;
|
|
this.children = /* @__PURE__ */ new Set();
|
|
this.isVariantNode = false;
|
|
this.isControllingVariants = false;
|
|
this.shouldReduceMotion = null;
|
|
this.values = /* @__PURE__ */ new Map();
|
|
this.KeyframeResolver = KeyframeResolver;
|
|
this.features = {};
|
|
this.valueSubscriptions = /* @__PURE__ */ new Map();
|
|
this.prevMotionValues = {};
|
|
this.events = {};
|
|
this.propEventSubscriptions = {};
|
|
this.notifyUpdate = () => this.notify("Update", this.latestValues);
|
|
this.render = () => {
|
|
if (!this.current)
|
|
return;
|
|
this.triggerBuild();
|
|
this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
|
|
};
|
|
this.renderScheduledAt = 0;
|
|
this.scheduleRender = () => {
|
|
const now2 = time.now();
|
|
if (this.renderScheduledAt < now2) {
|
|
this.renderScheduledAt = now2;
|
|
frame.render(this.render, false, true);
|
|
}
|
|
};
|
|
const { latestValues, renderState, onUpdate } = visualState;
|
|
this.onUpdate = onUpdate;
|
|
this.latestValues = latestValues;
|
|
this.baseTarget = { ...latestValues };
|
|
this.initialValues = props.initial ? { ...latestValues } : {};
|
|
this.renderState = renderState;
|
|
this.parent = parent;
|
|
this.props = props;
|
|
this.presenceContext = presenceContext;
|
|
this.depth = parent ? parent.depth + 1 : 0;
|
|
this.reducedMotionConfig = reducedMotionConfig;
|
|
this.options = options;
|
|
this.blockInitialAnimation = Boolean(blockInitialAnimation);
|
|
this.isControllingVariants = isControllingVariants(props);
|
|
this.isVariantNode = isVariantNode(props);
|
|
if (this.isVariantNode) {
|
|
this.variantChildren = /* @__PURE__ */ new Set();
|
|
}
|
|
this.manuallyAnimateOnMount = Boolean(parent && parent.current);
|
|
const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
|
|
for (const key in initialMotionValues) {
|
|
const value = initialMotionValues[key];
|
|
if (latestValues[key] !== void 0 && isMotionValue(value)) {
|
|
value.set(latestValues[key], false);
|
|
}
|
|
}
|
|
}
|
|
mount(instance) {
|
|
this.current = instance;
|
|
visualElementStore.set(instance, this);
|
|
if (this.projection && !this.projection.instance) {
|
|
this.projection.mount(instance);
|
|
}
|
|
if (this.parent && this.isVariantNode && !this.isControllingVariants) {
|
|
this.removeFromVariantTree = this.parent.addVariantChild(this);
|
|
}
|
|
this.values.forEach((value, key) => this.bindToMotionValue(key, value));
|
|
if (!hasReducedMotionListener.current) {
|
|
initPrefersReducedMotion();
|
|
}
|
|
this.shouldReduceMotion = this.reducedMotionConfig === "never" ? false : this.reducedMotionConfig === "always" ? true : prefersReducedMotion.current;
|
|
if (true) {
|
|
warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
|
|
}
|
|
if (this.parent)
|
|
this.parent.children.add(this);
|
|
this.update(this.props, this.presenceContext);
|
|
}
|
|
unmount() {
|
|
visualElementStore.delete(this.current);
|
|
this.projection && this.projection.unmount();
|
|
cancelFrame(this.notifyUpdate);
|
|
cancelFrame(this.render);
|
|
this.valueSubscriptions.forEach((remove) => remove());
|
|
this.valueSubscriptions.clear();
|
|
this.removeFromVariantTree && this.removeFromVariantTree();
|
|
this.parent && this.parent.children.delete(this);
|
|
for (const key in this.events) {
|
|
this.events[key].clear();
|
|
}
|
|
for (const key in this.features) {
|
|
const feature = this.features[key];
|
|
if (feature) {
|
|
feature.unmount();
|
|
feature.isMounted = false;
|
|
}
|
|
}
|
|
this.current = null;
|
|
}
|
|
bindToMotionValue(key, value) {
|
|
if (this.valueSubscriptions.has(key)) {
|
|
this.valueSubscriptions.get(key)();
|
|
}
|
|
const valueIsTransform = transformProps.has(key);
|
|
const removeOnChange = value.on("change", (latestValue) => {
|
|
this.latestValues[key] = latestValue;
|
|
this.props.onUpdate && frame.preRender(this.notifyUpdate);
|
|
if (valueIsTransform && this.projection) {
|
|
this.projection.isTransformDirty = true;
|
|
}
|
|
});
|
|
const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
|
|
let removeSyncCheck;
|
|
if (window.MotionCheckAppearSync) {
|
|
removeSyncCheck = window.MotionCheckAppearSync(this, key, value);
|
|
}
|
|
this.valueSubscriptions.set(key, () => {
|
|
removeOnChange();
|
|
removeOnRenderRequest();
|
|
if (removeSyncCheck)
|
|
removeSyncCheck();
|
|
if (value.owner)
|
|
value.stop();
|
|
});
|
|
}
|
|
sortNodePosition(other) {
|
|
if (!this.current || !this.sortInstanceNodePosition || this.type !== other.type) {
|
|
return 0;
|
|
}
|
|
return this.sortInstanceNodePosition(this.current, other.current);
|
|
}
|
|
updateFeatures() {
|
|
let key = "animation";
|
|
for (key in featureDefinitions) {
|
|
const featureDefinition = featureDefinitions[key];
|
|
if (!featureDefinition)
|
|
continue;
|
|
const { isEnabled, Feature: FeatureConstructor } = featureDefinition;
|
|
if (!this.features[key] && FeatureConstructor && isEnabled(this.props)) {
|
|
this.features[key] = new FeatureConstructor(this);
|
|
}
|
|
if (this.features[key]) {
|
|
const feature = this.features[key];
|
|
if (feature.isMounted) {
|
|
feature.update();
|
|
} else {
|
|
feature.mount();
|
|
feature.isMounted = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
triggerBuild() {
|
|
this.build(this.renderState, this.latestValues, this.props);
|
|
}
|
|
/**
|
|
* Measure the current viewport box with or without transforms.
|
|
* Only measures axis-aligned boxes, rotate and skew must be manually
|
|
* removed with a re-render to work.
|
|
*/
|
|
measureViewportBox() {
|
|
return this.current ? this.measureInstanceViewportBox(this.current, this.props) : createBox();
|
|
}
|
|
getStaticValue(key) {
|
|
return this.latestValues[key];
|
|
}
|
|
setStaticValue(key, value) {
|
|
this.latestValues[key] = value;
|
|
}
|
|
/**
|
|
* Update the provided props. Ensure any newly-added motion values are
|
|
* added to our map, old ones removed, and listeners updated.
|
|
*/
|
|
update(props, presenceContext) {
|
|
if (props.transformTemplate || this.props.transformTemplate) {
|
|
this.scheduleRender();
|
|
}
|
|
this.prevProps = this.props;
|
|
this.props = props;
|
|
this.prevPresenceContext = this.presenceContext;
|
|
this.presenceContext = presenceContext;
|
|
for (let i = 0; i < propEventHandlers.length; i++) {
|
|
const key = propEventHandlers[i];
|
|
if (this.propEventSubscriptions[key]) {
|
|
this.propEventSubscriptions[key]();
|
|
delete this.propEventSubscriptions[key];
|
|
}
|
|
const listenerName = "on" + key;
|
|
const listener = props[listenerName];
|
|
if (listener) {
|
|
this.propEventSubscriptions[key] = this.on(key, listener);
|
|
}
|
|
}
|
|
this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps, this), this.prevMotionValues);
|
|
if (this.handleChildMotionValue) {
|
|
this.handleChildMotionValue();
|
|
}
|
|
this.onUpdate && this.onUpdate(this);
|
|
}
|
|
getProps() {
|
|
return this.props;
|
|
}
|
|
/**
|
|
* Returns the variant definition with a given name.
|
|
*/
|
|
getVariant(name) {
|
|
return this.props.variants ? this.props.variants[name] : void 0;
|
|
}
|
|
/**
|
|
* Returns the defined default transition on this component.
|
|
*/
|
|
getDefaultTransition() {
|
|
return this.props.transition;
|
|
}
|
|
getTransformPagePoint() {
|
|
return this.props.transformPagePoint;
|
|
}
|
|
getClosestVariantNode() {
|
|
return this.isVariantNode ? this : this.parent ? this.parent.getClosestVariantNode() : void 0;
|
|
}
|
|
/**
|
|
* Add a child visual element to our set of children.
|
|
*/
|
|
addVariantChild(child) {
|
|
const closestVariantNode = this.getClosestVariantNode();
|
|
if (closestVariantNode) {
|
|
closestVariantNode.variantChildren && closestVariantNode.variantChildren.add(child);
|
|
return () => closestVariantNode.variantChildren.delete(child);
|
|
}
|
|
}
|
|
/**
|
|
* Add a motion value and bind it to this visual element.
|
|
*/
|
|
addValue(key, value) {
|
|
const existingValue = this.values.get(key);
|
|
if (value !== existingValue) {
|
|
if (existingValue)
|
|
this.removeValue(key);
|
|
this.bindToMotionValue(key, value);
|
|
this.values.set(key, value);
|
|
this.latestValues[key] = value.get();
|
|
}
|
|
}
|
|
/**
|
|
* Remove a motion value and unbind any active subscriptions.
|
|
*/
|
|
removeValue(key) {
|
|
this.values.delete(key);
|
|
const unsubscribe = this.valueSubscriptions.get(key);
|
|
if (unsubscribe) {
|
|
unsubscribe();
|
|
this.valueSubscriptions.delete(key);
|
|
}
|
|
delete this.latestValues[key];
|
|
this.removeValueFromRenderState(key, this.renderState);
|
|
}
|
|
/**
|
|
* Check whether we have a motion value for this key
|
|
*/
|
|
hasValue(key) {
|
|
return this.values.has(key);
|
|
}
|
|
getValue(key, defaultValue) {
|
|
if (this.props.values && this.props.values[key]) {
|
|
return this.props.values[key];
|
|
}
|
|
let value = this.values.get(key);
|
|
if (value === void 0 && defaultValue !== void 0) {
|
|
value = motionValue(defaultValue === null ? void 0 : defaultValue, { owner: this });
|
|
this.addValue(key, value);
|
|
}
|
|
return value;
|
|
}
|
|
/**
|
|
* If we're trying to animate to a previously unencountered value,
|
|
* we need to check for it in our state and as a last resort read it
|
|
* directly from the instance (which might have performance implications).
|
|
*/
|
|
readValue(key, target) {
|
|
var _a;
|
|
let value = this.latestValues[key] !== void 0 || !this.current ? this.latestValues[key] : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
|
|
if (value !== void 0 && value !== null) {
|
|
if (typeof value === "string" && (isNumericalString(value) || isZeroValueString(value))) {
|
|
value = parseFloat(value);
|
|
} else if (!findValueType(value) && complex.test(target)) {
|
|
value = getAnimatableNone2(key, target);
|
|
}
|
|
this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
|
|
}
|
|
return isMotionValue(value) ? value.get() : value;
|
|
}
|
|
/**
|
|
* Set the base target to later animate back to. This is currently
|
|
* only hydrated on creation and when we first read a value.
|
|
*/
|
|
setBaseTarget(key, value) {
|
|
this.baseTarget[key] = value;
|
|
}
|
|
/**
|
|
* Find the base target for a value thats been removed from all animation
|
|
* props.
|
|
*/
|
|
getBaseTarget(key) {
|
|
var _a;
|
|
const { initial } = this.props;
|
|
let valueFromInitial;
|
|
if (typeof initial === "string" || typeof initial === "object") {
|
|
const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
|
|
if (variant) {
|
|
valueFromInitial = variant[key];
|
|
}
|
|
}
|
|
if (initial && valueFromInitial !== void 0) {
|
|
return valueFromInitial;
|
|
}
|
|
const target = this.getBaseTargetFromProps(this.props, key);
|
|
if (target !== void 0 && !isMotionValue(target))
|
|
return target;
|
|
return this.initialValues[key] !== void 0 && valueFromInitial === void 0 ? void 0 : this.baseTarget[key];
|
|
}
|
|
on(eventName, callback) {
|
|
if (!this.events[eventName]) {
|
|
this.events[eventName] = new SubscriptionManager();
|
|
}
|
|
return this.events[eventName].add(callback);
|
|
}
|
|
notify(eventName, ...args) {
|
|
if (this.events[eventName]) {
|
|
this.events[eventName].notify(...args);
|
|
}
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.mjs
|
|
var DOMVisualElement = class extends VisualElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.KeyframeResolver = DOMKeyframesResolver;
|
|
}
|
|
sortInstanceNodePosition(a, b) {
|
|
return a.compareDocumentPosition(b) & 2 ? 1 : -1;
|
|
}
|
|
getBaseTargetFromProps(props, key) {
|
|
return props.style ? props.style[key] : void 0;
|
|
}
|
|
removeValueFromRenderState(key, { vars, style }) {
|
|
delete vars[key];
|
|
delete style[key];
|
|
}
|
|
handleChildMotionValue() {
|
|
if (this.childSubscription) {
|
|
this.childSubscription();
|
|
delete this.childSubscription;
|
|
}
|
|
const { children } = this.props;
|
|
if (isMotionValue(children)) {
|
|
this.childSubscription = children.on("change", (latest) => {
|
|
if (this.current) {
|
|
this.current.textContent = `${latest}`;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs
|
|
function getComputedStyle2(element) {
|
|
return window.getComputedStyle(element);
|
|
}
|
|
var HTMLVisualElement = class extends DOMVisualElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.type = "html";
|
|
this.renderInstance = renderHTML;
|
|
}
|
|
readValueFromInstance(instance, key) {
|
|
if (transformProps.has(key)) {
|
|
const defaultType = getDefaultValueType(key);
|
|
return defaultType ? defaultType.default || 0 : 0;
|
|
} else {
|
|
const computedStyle = getComputedStyle2(instance);
|
|
const value = (isCSSVariableName(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
|
|
return typeof value === "string" ? value.trim() : value;
|
|
}
|
|
}
|
|
measureInstanceViewportBox(instance, { transformPagePoint }) {
|
|
return measureViewportBox(instance, transformPagePoint);
|
|
}
|
|
build(renderState, latestValues, props) {
|
|
buildHTMLStyles(renderState, latestValues, props.transformTemplate);
|
|
}
|
|
scrapeMotionValuesFromProps(props, prevProps, visualElement) {
|
|
return scrapeMotionValuesFromProps(props, prevProps, visualElement);
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs
|
|
var SVGVisualElement = class extends DOMVisualElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.type = "svg";
|
|
this.isSVGTag = false;
|
|
this.measureInstanceViewportBox = createBox;
|
|
}
|
|
getBaseTargetFromProps(props, key) {
|
|
return props[key];
|
|
}
|
|
readValueFromInstance(instance, key) {
|
|
if (transformProps.has(key)) {
|
|
const defaultType = getDefaultValueType(key);
|
|
return defaultType ? defaultType.default || 0 : 0;
|
|
}
|
|
key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
|
|
return instance.getAttribute(key);
|
|
}
|
|
scrapeMotionValuesFromProps(props, prevProps, visualElement) {
|
|
return scrapeMotionValuesFromProps2(props, prevProps, visualElement);
|
|
}
|
|
build(renderState, latestValues, props) {
|
|
buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
|
|
}
|
|
renderInstance(instance, renderState, styleProp, projection) {
|
|
renderSVG(instance, renderState, styleProp, projection);
|
|
}
|
|
mount(instance) {
|
|
this.isSVGTag = isSVGTag(instance.tagName);
|
|
super.mount(instance);
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs
|
|
var createDomVisualElement = (Component3, options) => {
|
|
return isSVGComponent(Component3) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
|
|
allowProjection: Component3 !== import_react29.Fragment
|
|
});
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/components/motion/create.mjs
|
|
var createMotionComponent = createMotionComponentFactory({
|
|
...animations,
|
|
...gestureAnimations,
|
|
...drag,
|
|
...layout
|
|
}, createDomVisualElement);
|
|
|
|
// node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs
|
|
var motion = createDOMMotionComponentProxy(createMotionComponent);
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/features-animation.mjs
|
|
var domAnimation = {
|
|
renderer: createDomVisualElement,
|
|
...animations,
|
|
...gestureAnimations
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/features-max.mjs
|
|
var domMax = {
|
|
...domAnimation,
|
|
...drag,
|
|
...layout
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/features-min.mjs
|
|
var domMin = {
|
|
renderer: createDomVisualElement,
|
|
...animations
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-motion-value-event.mjs
|
|
var import_react30 = __toESM(require_react(), 1);
|
|
function useMotionValueEvent(value, event, callback) {
|
|
(0, import_react30.useInsertionEffect)(() => value.on(event, callback), [value, event, callback]);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-scroll.mjs
|
|
var import_react31 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/observe.mjs
|
|
function observeTimeline(update, timeline) {
|
|
let prevProgress;
|
|
const onFrame = () => {
|
|
const { currentTime } = timeline;
|
|
const percentage = currentTime === null ? 0 : currentTime.value;
|
|
const progress2 = percentage / 100;
|
|
if (prevProgress !== progress2) {
|
|
update(progress2);
|
|
}
|
|
prevProgress = progress2;
|
|
};
|
|
frame.update(onFrame, true);
|
|
return () => cancelFrame(onFrame);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/resize/handle-element.mjs
|
|
var resizeHandlers = /* @__PURE__ */ new WeakMap();
|
|
var observer;
|
|
function getElementSize(target, borderBoxSize) {
|
|
if (borderBoxSize) {
|
|
const { inlineSize, blockSize } = borderBoxSize[0];
|
|
return { width: inlineSize, height: blockSize };
|
|
} else if (target instanceof SVGElement && "getBBox" in target) {
|
|
return target.getBBox();
|
|
} else {
|
|
return {
|
|
width: target.offsetWidth,
|
|
height: target.offsetHeight
|
|
};
|
|
}
|
|
}
|
|
function notifyTarget({ target, contentRect, borderBoxSize }) {
|
|
var _a;
|
|
(_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
|
|
handler({
|
|
target,
|
|
contentSize: contentRect,
|
|
get size() {
|
|
return getElementSize(target, borderBoxSize);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
function notifyAll(entries) {
|
|
entries.forEach(notifyTarget);
|
|
}
|
|
function createResizeObserver() {
|
|
if (typeof ResizeObserver === "undefined")
|
|
return;
|
|
observer = new ResizeObserver(notifyAll);
|
|
}
|
|
function resizeElement(target, handler) {
|
|
if (!observer)
|
|
createResizeObserver();
|
|
const elements = resolveElements(target);
|
|
elements.forEach((element) => {
|
|
let elementHandlers = resizeHandlers.get(element);
|
|
if (!elementHandlers) {
|
|
elementHandlers = /* @__PURE__ */ new Set();
|
|
resizeHandlers.set(element, elementHandlers);
|
|
}
|
|
elementHandlers.add(handler);
|
|
observer === null || observer === void 0 ? void 0 : observer.observe(element);
|
|
});
|
|
return () => {
|
|
elements.forEach((element) => {
|
|
const elementHandlers = resizeHandlers.get(element);
|
|
elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
|
|
if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
|
|
observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
|
|
}
|
|
});
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/resize/handle-window.mjs
|
|
var windowCallbacks = /* @__PURE__ */ new Set();
|
|
var windowResizeHandler;
|
|
function createWindowResizeHandler() {
|
|
windowResizeHandler = () => {
|
|
const size = {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
};
|
|
const info = {
|
|
target: window,
|
|
size,
|
|
contentSize: size
|
|
};
|
|
windowCallbacks.forEach((callback) => callback(info));
|
|
};
|
|
window.addEventListener("resize", windowResizeHandler);
|
|
}
|
|
function resizeWindow(callback) {
|
|
windowCallbacks.add(callback);
|
|
if (!windowResizeHandler)
|
|
createWindowResizeHandler();
|
|
return () => {
|
|
windowCallbacks.delete(callback);
|
|
if (!windowCallbacks.size && windowResizeHandler) {
|
|
windowResizeHandler = void 0;
|
|
}
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/resize/index.mjs
|
|
function resize(a, b) {
|
|
return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/info.mjs
|
|
var maxElapsed2 = 50;
|
|
var createAxisInfo = () => ({
|
|
current: 0,
|
|
offset: [],
|
|
progress: 0,
|
|
scrollLength: 0,
|
|
targetOffset: 0,
|
|
targetLength: 0,
|
|
containerLength: 0,
|
|
velocity: 0
|
|
});
|
|
var createScrollInfo = () => ({
|
|
time: 0,
|
|
x: createAxisInfo(),
|
|
y: createAxisInfo()
|
|
});
|
|
var keys = {
|
|
x: {
|
|
length: "Width",
|
|
position: "Left"
|
|
},
|
|
y: {
|
|
length: "Height",
|
|
position: "Top"
|
|
}
|
|
};
|
|
function updateAxisInfo(element, axisName, info, time2) {
|
|
const axis = info[axisName];
|
|
const { length, position } = keys[axisName];
|
|
const prev = axis.current;
|
|
const prevTime = info.time;
|
|
axis.current = element[`scroll${position}`];
|
|
axis.scrollLength = element[`scroll${length}`] - element[`client${length}`];
|
|
axis.offset.length = 0;
|
|
axis.offset[0] = 0;
|
|
axis.offset[1] = axis.scrollLength;
|
|
axis.progress = progress(0, axis.scrollLength, axis.current);
|
|
const elapsed = time2 - prevTime;
|
|
axis.velocity = elapsed > maxElapsed2 ? 0 : velocityPerSecond(axis.current - prev, elapsed);
|
|
}
|
|
function updateScrollInfo(element, info, time2) {
|
|
updateAxisInfo(element, "x", info, time2);
|
|
updateAxisInfo(element, "y", info, time2);
|
|
info.time = time2;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/offsets/inset.mjs
|
|
function calcInset(element, container) {
|
|
const inset = { x: 0, y: 0 };
|
|
let current = element;
|
|
while (current && current !== container) {
|
|
if (current instanceof HTMLElement) {
|
|
inset.x += current.offsetLeft;
|
|
inset.y += current.offsetTop;
|
|
current = current.offsetParent;
|
|
} else if (current.tagName === "svg") {
|
|
const svgBoundingBox = current.getBoundingClientRect();
|
|
current = current.parentElement;
|
|
const parentBoundingBox = current.getBoundingClientRect();
|
|
inset.x += svgBoundingBox.left - parentBoundingBox.left;
|
|
inset.y += svgBoundingBox.top - parentBoundingBox.top;
|
|
} else if (current instanceof SVGGraphicsElement) {
|
|
const { x, y } = current.getBBox();
|
|
inset.x += x;
|
|
inset.y += y;
|
|
let svg = null;
|
|
let parent = current.parentNode;
|
|
while (!svg) {
|
|
if (parent.tagName === "svg") {
|
|
svg = parent;
|
|
}
|
|
parent = current.parentNode;
|
|
}
|
|
current = svg;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
return inset;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/offsets/edge.mjs
|
|
var namedEdges = {
|
|
start: 0,
|
|
center: 0.5,
|
|
end: 1
|
|
};
|
|
function resolveEdge(edge, length, inset = 0) {
|
|
let delta = 0;
|
|
if (edge in namedEdges) {
|
|
edge = namedEdges[edge];
|
|
}
|
|
if (typeof edge === "string") {
|
|
const asNumber2 = parseFloat(edge);
|
|
if (edge.endsWith("px")) {
|
|
delta = asNumber2;
|
|
} else if (edge.endsWith("%")) {
|
|
edge = asNumber2 / 100;
|
|
} else if (edge.endsWith("vw")) {
|
|
delta = asNumber2 / 100 * document.documentElement.clientWidth;
|
|
} else if (edge.endsWith("vh")) {
|
|
delta = asNumber2 / 100 * document.documentElement.clientHeight;
|
|
} else {
|
|
edge = asNumber2;
|
|
}
|
|
}
|
|
if (typeof edge === "number") {
|
|
delta = length * edge;
|
|
}
|
|
return inset + delta;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/offsets/offset.mjs
|
|
var defaultOffset2 = [0, 0];
|
|
function resolveOffset(offset, containerLength, targetLength, targetInset) {
|
|
let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset2;
|
|
let targetPoint = 0;
|
|
let containerPoint = 0;
|
|
if (typeof offset === "number") {
|
|
offsetDefinition = [offset, offset];
|
|
} else if (typeof offset === "string") {
|
|
offset = offset.trim();
|
|
if (offset.includes(" ")) {
|
|
offsetDefinition = offset.split(" ");
|
|
} else {
|
|
offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
|
|
}
|
|
}
|
|
targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
|
|
containerPoint = resolveEdge(offsetDefinition[1], containerLength);
|
|
return targetPoint - containerPoint;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/offsets/presets.mjs
|
|
var ScrollOffset = {
|
|
Enter: [
|
|
[0, 1],
|
|
[1, 1]
|
|
],
|
|
Exit: [
|
|
[0, 0],
|
|
[1, 0]
|
|
],
|
|
Any: [
|
|
[1, 0],
|
|
[0, 1]
|
|
],
|
|
All: [
|
|
[0, 0],
|
|
[1, 1]
|
|
]
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/offsets/index.mjs
|
|
var point = { x: 0, y: 0 };
|
|
function getTargetSize(target) {
|
|
return "getBBox" in target && target.tagName !== "svg" ? target.getBBox() : { width: target.clientWidth, height: target.clientHeight };
|
|
}
|
|
function resolveOffsets(container, info, options) {
|
|
const { offset: offsetDefinition = ScrollOffset.All } = options;
|
|
const { target = container, axis = "y" } = options;
|
|
const lengthLabel = axis === "y" ? "height" : "width";
|
|
const inset = target !== container ? calcInset(target, container) : point;
|
|
const targetSize = target === container ? { width: container.scrollWidth, height: container.scrollHeight } : getTargetSize(target);
|
|
const containerSize = {
|
|
width: container.clientWidth,
|
|
height: container.clientHeight
|
|
};
|
|
info[axis].offset.length = 0;
|
|
let hasChanged = !info[axis].interpolate;
|
|
const numOffsets = offsetDefinition.length;
|
|
for (let i = 0; i < numOffsets; i++) {
|
|
const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
|
|
if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
|
|
hasChanged = true;
|
|
}
|
|
info[axis].offset[i] = offset;
|
|
}
|
|
if (hasChanged) {
|
|
info[axis].interpolate = interpolate(info[axis].offset, defaultOffset(offsetDefinition), { clamp: false });
|
|
info[axis].interpolatorOffsets = [...info[axis].offset];
|
|
}
|
|
info[axis].progress = clamp(0, 1, info[axis].interpolate(info[axis].current));
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/on-scroll-handler.mjs
|
|
function measure(container, target = container, info) {
|
|
info.x.targetOffset = 0;
|
|
info.y.targetOffset = 0;
|
|
if (target !== container) {
|
|
let node = target;
|
|
while (node && node !== container) {
|
|
info.x.targetOffset += node.offsetLeft;
|
|
info.y.targetOffset += node.offsetTop;
|
|
node = node.offsetParent;
|
|
}
|
|
}
|
|
info.x.targetLength = target === container ? target.scrollWidth : target.clientWidth;
|
|
info.y.targetLength = target === container ? target.scrollHeight : target.clientHeight;
|
|
info.x.containerLength = container.clientWidth;
|
|
info.y.containerLength = container.clientHeight;
|
|
if (true) {
|
|
if (container && target && target !== container) {
|
|
warnOnce(getComputedStyle(container).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
|
|
}
|
|
}
|
|
}
|
|
function createOnScrollHandler(element, onScroll, info, options = {}) {
|
|
return {
|
|
measure: () => measure(element, options.target, info),
|
|
update: (time2) => {
|
|
updateScrollInfo(element, info, time2);
|
|
if (options.offset || options.target) {
|
|
resolveOffsets(element, info, options);
|
|
}
|
|
},
|
|
notify: () => onScroll(info)
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/track.mjs
|
|
var scrollListeners = /* @__PURE__ */ new WeakMap();
|
|
var resizeListeners = /* @__PURE__ */ new WeakMap();
|
|
var onScrollHandlers = /* @__PURE__ */ new WeakMap();
|
|
var getEventTarget = (element) => element === document.documentElement ? window : element;
|
|
function scrollInfo(onScroll, { container = document.documentElement, ...options } = {}) {
|
|
let containerHandlers = onScrollHandlers.get(container);
|
|
if (!containerHandlers) {
|
|
containerHandlers = /* @__PURE__ */ new Set();
|
|
onScrollHandlers.set(container, containerHandlers);
|
|
}
|
|
const info = createScrollInfo();
|
|
const containerHandler = createOnScrollHandler(container, onScroll, info, options);
|
|
containerHandlers.add(containerHandler);
|
|
if (!scrollListeners.has(container)) {
|
|
const measureAll = () => {
|
|
for (const handler of containerHandlers)
|
|
handler.measure();
|
|
};
|
|
const updateAll = () => {
|
|
for (const handler of containerHandlers) {
|
|
handler.update(frameData.timestamp);
|
|
}
|
|
};
|
|
const notifyAll2 = () => {
|
|
for (const handler of containerHandlers)
|
|
handler.notify();
|
|
};
|
|
const listener2 = () => {
|
|
frame.read(measureAll, false, true);
|
|
frame.read(updateAll, false, true);
|
|
frame.update(notifyAll2, false, true);
|
|
};
|
|
scrollListeners.set(container, listener2);
|
|
const target = getEventTarget(container);
|
|
window.addEventListener("resize", listener2, { passive: true });
|
|
if (container !== document.documentElement) {
|
|
resizeListeners.set(container, resize(container, listener2));
|
|
}
|
|
target.addEventListener("scroll", listener2, { passive: true });
|
|
}
|
|
const listener = scrollListeners.get(container);
|
|
frame.read(listener, false, true);
|
|
return () => {
|
|
var _a;
|
|
cancelFrame(listener);
|
|
const currentHandlers = onScrollHandlers.get(container);
|
|
if (!currentHandlers)
|
|
return;
|
|
currentHandlers.delete(containerHandler);
|
|
if (currentHandlers.size)
|
|
return;
|
|
const scrollListener = scrollListeners.get(container);
|
|
scrollListeners.delete(container);
|
|
if (scrollListener) {
|
|
getEventTarget(container).removeEventListener("scroll", scrollListener);
|
|
(_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
|
|
window.removeEventListener("resize", scrollListener);
|
|
}
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/scroll/index.mjs
|
|
function scrollTimelineFallback({ source, container, axis = "y" }) {
|
|
if (source)
|
|
container = source;
|
|
const currentTime = { value: 0 };
|
|
const cancel = scrollInfo((info) => {
|
|
currentTime.value = info[axis].progress * 100;
|
|
}, { container, axis });
|
|
return { currentTime, cancel };
|
|
}
|
|
var timelineCache = /* @__PURE__ */ new Map();
|
|
function getTimeline({ source, container = document.documentElement, axis = "y" } = {}) {
|
|
if (source)
|
|
container = source;
|
|
if (!timelineCache.has(container)) {
|
|
timelineCache.set(container, {});
|
|
}
|
|
const elementCache = timelineCache.get(container);
|
|
if (!elementCache[axis]) {
|
|
elementCache[axis] = supportsScrollTimeline() ? new ScrollTimeline({ source: container, axis }) : scrollTimelineFallback({ source: container, axis });
|
|
}
|
|
return elementCache[axis];
|
|
}
|
|
function isOnScrollWithInfo(onScroll) {
|
|
return onScroll.length === 2;
|
|
}
|
|
function needsElementTracking(options) {
|
|
return options && (options.target || options.offset);
|
|
}
|
|
function scrollFunction(onScroll, options) {
|
|
if (isOnScrollWithInfo(onScroll) || needsElementTracking(options)) {
|
|
return scrollInfo((info) => {
|
|
onScroll(info[options.axis].progress, info);
|
|
}, options);
|
|
} else {
|
|
return observeTimeline(onScroll, getTimeline(options));
|
|
}
|
|
}
|
|
function scrollAnimation(animation, options) {
|
|
animation.flatten();
|
|
if (needsElementTracking(options)) {
|
|
animation.pause();
|
|
return scrollInfo((info) => {
|
|
animation.time = animation.duration * info[options.axis].progress;
|
|
}, options);
|
|
} else {
|
|
const timeline = getTimeline(options);
|
|
if (animation.attachTimeline) {
|
|
return animation.attachTimeline(timeline, (valueAnimation) => {
|
|
valueAnimation.pause();
|
|
return observeTimeline((progress2) => {
|
|
valueAnimation.time = valueAnimation.duration * progress2;
|
|
}, timeline);
|
|
});
|
|
} else {
|
|
return noop;
|
|
}
|
|
}
|
|
}
|
|
function scroll(onScroll, { axis = "y", ...options } = {}) {
|
|
const optionsWithDefaults = { axis, ...options };
|
|
return typeof onScroll === "function" ? scrollFunction(onScroll, optionsWithDefaults) : scrollAnimation(onScroll, optionsWithDefaults);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-scroll.mjs
|
|
function refWarning(name, ref) {
|
|
warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
|
|
}
|
|
var createScrollMotionValues = () => ({
|
|
scrollX: motionValue(0),
|
|
scrollY: motionValue(0),
|
|
scrollXProgress: motionValue(0),
|
|
scrollYProgress: motionValue(0)
|
|
});
|
|
function useScroll({ container, target, layoutEffect = true, ...options } = {}) {
|
|
const values = useConstant(createScrollMotionValues);
|
|
const useLifecycleEffect = layoutEffect ? useIsomorphicLayoutEffect : import_react31.useEffect;
|
|
useLifecycleEffect(() => {
|
|
refWarning("target", target);
|
|
refWarning("container", container);
|
|
return scroll((_progress, { x, y }) => {
|
|
values.scrollX.set(x.current);
|
|
values.scrollXProgress.set(x.progress);
|
|
values.scrollY.set(y.current);
|
|
values.scrollYProgress.set(y.progress);
|
|
}, {
|
|
...options,
|
|
container: (container === null || container === void 0 ? void 0 : container.current) || void 0,
|
|
target: (target === null || target === void 0 ? void 0 : target.current) || void 0
|
|
});
|
|
}, [container, target, JSON.stringify(options.offset)]);
|
|
return values;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/scroll/use-element-scroll.mjs
|
|
function useElementScroll(ref) {
|
|
if (true) {
|
|
warnOnce(false, "useElementScroll is deprecated. Convert to useScroll({ container: ref }).");
|
|
}
|
|
return useScroll({ container: ref });
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/scroll/use-viewport-scroll.mjs
|
|
function useViewportScroll() {
|
|
if (true) {
|
|
warnOnce(false, "useViewportScroll is deprecated. Convert to useScroll().");
|
|
}
|
|
return useScroll();
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-motion-value.mjs
|
|
var import_react32 = __toESM(require_react(), 1);
|
|
function useMotionValue(initial) {
|
|
const value = useConstant(() => motionValue(initial));
|
|
const { isStatic } = (0, import_react32.useContext)(MotionConfigContext);
|
|
if (isStatic) {
|
|
const [, setLatest] = (0, import_react32.useState)(initial);
|
|
(0, import_react32.useEffect)(() => value.on("change", setLatest), []);
|
|
}
|
|
return value;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-combine-values.mjs
|
|
function useCombineMotionValues(values, combineValues) {
|
|
const value = useMotionValue(combineValues());
|
|
const updateValue = () => value.set(combineValues());
|
|
updateValue();
|
|
useIsomorphicLayoutEffect(() => {
|
|
const scheduleUpdate = () => frame.preRender(updateValue, false, true);
|
|
const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
|
|
return () => {
|
|
subscriptions.forEach((unsubscribe) => unsubscribe());
|
|
cancelFrame(updateValue);
|
|
};
|
|
});
|
|
return value;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-motion-template.mjs
|
|
function useMotionTemplate(fragments, ...values) {
|
|
const numFragments = fragments.length;
|
|
function buildValue() {
|
|
let output = ``;
|
|
for (let i = 0; i < numFragments; i++) {
|
|
output += fragments[i];
|
|
const value = values[i];
|
|
if (value) {
|
|
output += isMotionValue(value) ? value.get() : value;
|
|
}
|
|
}
|
|
return output;
|
|
}
|
|
return useCombineMotionValues(values.filter(isMotionValue), buildValue);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-spring.mjs
|
|
var import_react33 = __toESM(require_react(), 1);
|
|
function toNumber(v) {
|
|
if (typeof v === "number")
|
|
return v;
|
|
return parseFloat(v);
|
|
}
|
|
function useSpring(source, config = {}) {
|
|
const { isStatic } = (0, import_react33.useContext)(MotionConfigContext);
|
|
const activeSpringAnimation = (0, import_react33.useRef)(null);
|
|
const value = useMotionValue(isMotionValue(source) ? toNumber(source.get()) : source);
|
|
const latestValue = (0, import_react33.useRef)(value.get());
|
|
const latestSetter = (0, import_react33.useRef)(() => {
|
|
});
|
|
const startAnimation = () => {
|
|
const animation = activeSpringAnimation.current;
|
|
if (animation && animation.time === 0) {
|
|
animation.sample(frameData.delta);
|
|
}
|
|
stopAnimation2();
|
|
activeSpringAnimation.current = animateValue({
|
|
keyframes: [value.get(), latestValue.current],
|
|
velocity: value.getVelocity(),
|
|
type: "spring",
|
|
restDelta: 1e-3,
|
|
restSpeed: 0.01,
|
|
...config,
|
|
onUpdate: latestSetter.current
|
|
});
|
|
};
|
|
const stopAnimation2 = () => {
|
|
if (activeSpringAnimation.current) {
|
|
activeSpringAnimation.current.stop();
|
|
}
|
|
};
|
|
(0, import_react33.useInsertionEffect)(() => {
|
|
return value.attach((v, set) => {
|
|
if (isStatic)
|
|
return set(v);
|
|
latestValue.current = v;
|
|
latestSetter.current = set;
|
|
frame.update(startAnimation);
|
|
return value.get();
|
|
}, stopAnimation2);
|
|
}, [JSON.stringify(config)]);
|
|
useIsomorphicLayoutEffect(() => {
|
|
if (isMotionValue(source)) {
|
|
return source.on("change", (v) => value.set(toNumber(v)));
|
|
}
|
|
}, [value]);
|
|
return value;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-animation-frame.mjs
|
|
var import_react34 = __toESM(require_react(), 1);
|
|
function useAnimationFrame(callback) {
|
|
const initialTimestamp = (0, import_react34.useRef)(0);
|
|
const { isStatic } = (0, import_react34.useContext)(MotionConfigContext);
|
|
(0, import_react34.useEffect)(() => {
|
|
if (isStatic)
|
|
return;
|
|
const provideTimeSinceStart = ({ timestamp, delta }) => {
|
|
if (!initialTimestamp.current)
|
|
initialTimestamp.current = timestamp;
|
|
callback(timestamp - initialTimestamp.current, delta);
|
|
};
|
|
frame.update(provideTimeSinceStart, true);
|
|
return () => cancelFrame(provideTimeSinceStart);
|
|
}, [callback]);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-time.mjs
|
|
function useTime() {
|
|
const time2 = useMotionValue(0);
|
|
useAnimationFrame((t) => time2.set(t));
|
|
return time2;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/transform.mjs
|
|
var isCustomValueType = (v) => {
|
|
return v && typeof v === "object" && v.mix;
|
|
};
|
|
var getMixer2 = (v) => isCustomValueType(v) ? v.mix : void 0;
|
|
function transform(...args) {
|
|
const useImmediate = !Array.isArray(args[0]);
|
|
const argOffset = useImmediate ? 0 : -1;
|
|
const inputValue = args[0 + argOffset];
|
|
const inputRange = args[1 + argOffset];
|
|
const outputRange = args[2 + argOffset];
|
|
const options = args[3 + argOffset];
|
|
const interpolator = interpolate(inputRange, outputRange, {
|
|
mixer: getMixer2(outputRange[0]),
|
|
...options
|
|
});
|
|
return useImmediate ? interpolator(inputValue) : interpolator;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-computed.mjs
|
|
function useComputed(compute) {
|
|
collectMotionValues.current = [];
|
|
compute();
|
|
const value = useCombineMotionValues(collectMotionValues.current, compute);
|
|
collectMotionValues.current = void 0;
|
|
return value;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-transform.mjs
|
|
function useTransform(input, inputRangeOrTransformer, outputRange, options) {
|
|
if (typeof input === "function") {
|
|
return useComputed(input);
|
|
}
|
|
const transformer = typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : transform(inputRangeOrTransformer, outputRange, options);
|
|
return Array.isArray(input) ? useListTransform(input, transformer) : useListTransform([input], ([latest]) => transformer(latest));
|
|
}
|
|
function useListTransform(values, transformer) {
|
|
const latest = useConstant(() => []);
|
|
return useCombineMotionValues(values, () => {
|
|
latest.length = 0;
|
|
const numValues = values.length;
|
|
for (let i = 0; i < numValues; i++) {
|
|
latest[i] = values[i].get();
|
|
}
|
|
return transformer(latest);
|
|
});
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-velocity.mjs
|
|
function useVelocity(value) {
|
|
const velocity = useMotionValue(value.getVelocity());
|
|
const updateVelocity = () => {
|
|
const latest = value.getVelocity();
|
|
velocity.set(latest);
|
|
if (latest)
|
|
frame.update(updateVelocity);
|
|
};
|
|
useMotionValueEvent(value, "change", () => {
|
|
frame.update(updateVelocity, false, true);
|
|
});
|
|
return velocity;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-will-change/get-will-change-name.mjs
|
|
function getWillChangeName(name) {
|
|
if (transformProps.has(name)) {
|
|
return "transform";
|
|
} else if (acceleratedValues.has(name)) {
|
|
return camelToDash(name);
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-will-change/WillChangeMotionValue.mjs
|
|
var WillChangeMotionValue = class extends MotionValue {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.values = [];
|
|
}
|
|
add(name) {
|
|
const styleName = getWillChangeName(name);
|
|
if (styleName) {
|
|
addUniqueItem(this.values, styleName);
|
|
this.update();
|
|
}
|
|
}
|
|
update() {
|
|
this.set(this.values.length ? this.values.join(", ") : "auto");
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-will-change/index.mjs
|
|
function useWillChange() {
|
|
return useConstant(() => new WillChangeMotionValue("auto"));
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs
|
|
var import_react35 = __toESM(require_react(), 1);
|
|
function useReducedMotion() {
|
|
!hasReducedMotionListener.current && initPrefersReducedMotion();
|
|
const [shouldReduceMotion] = (0, import_react35.useState)(prefersReducedMotion.current);
|
|
if (true) {
|
|
warnOnce(shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
|
|
}
|
|
return shouldReduceMotion;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs
|
|
var import_react36 = __toESM(require_react(), 1);
|
|
function useReducedMotionConfig() {
|
|
const reducedMotionPreference = useReducedMotion();
|
|
const { reducedMotion } = (0, import_react36.useContext)(MotionConfigContext);
|
|
if (reducedMotion === "never") {
|
|
return false;
|
|
} else if (reducedMotion === "always") {
|
|
return true;
|
|
} else {
|
|
return reducedMotionPreference;
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/hooks/animation-controls.mjs
|
|
function stopAnimation(visualElement) {
|
|
visualElement.values.forEach((value) => value.stop());
|
|
}
|
|
function setVariants(visualElement, variantLabels) {
|
|
const reversedLabels = [...variantLabels].reverse();
|
|
reversedLabels.forEach((key) => {
|
|
const variant = visualElement.getVariant(key);
|
|
variant && setTarget(visualElement, variant);
|
|
if (visualElement.variantChildren) {
|
|
visualElement.variantChildren.forEach((child) => {
|
|
setVariants(child, variantLabels);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
function setValues(visualElement, definition) {
|
|
if (Array.isArray(definition)) {
|
|
return setVariants(visualElement, definition);
|
|
} else if (typeof definition === "string") {
|
|
return setVariants(visualElement, [definition]);
|
|
} else {
|
|
setTarget(visualElement, definition);
|
|
}
|
|
}
|
|
function animationControls() {
|
|
let hasMounted = false;
|
|
const subscribers = /* @__PURE__ */ new Set();
|
|
const controls = {
|
|
subscribe(visualElement) {
|
|
subscribers.add(visualElement);
|
|
return () => void subscribers.delete(visualElement);
|
|
},
|
|
start(definition, transitionOverride) {
|
|
invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
|
|
const animations2 = [];
|
|
subscribers.forEach((visualElement) => {
|
|
animations2.push(animateVisualElement(visualElement, definition, {
|
|
transitionOverride
|
|
}));
|
|
});
|
|
return Promise.all(animations2);
|
|
},
|
|
set(definition) {
|
|
invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
|
|
return subscribers.forEach((visualElement) => {
|
|
setValues(visualElement, definition);
|
|
});
|
|
},
|
|
stop() {
|
|
subscribers.forEach((visualElement) => {
|
|
stopAnimation(visualElement);
|
|
});
|
|
},
|
|
mount() {
|
|
hasMounted = true;
|
|
return () => {
|
|
hasMounted = false;
|
|
controls.stop();
|
|
};
|
|
}
|
|
};
|
|
return controls;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs
|
|
var import_react37 = __toESM(require_react(), 1);
|
|
function useUnmountEffect(callback) {
|
|
return (0, import_react37.useEffect)(() => () => callback(), []);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/wrap.mjs
|
|
var wrap = (min, max, v) => {
|
|
const rangeSize = max - min;
|
|
return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/easing/utils/get-easing-for-segment.mjs
|
|
function getEasingForSegment(easing, i) {
|
|
return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/utils/is-dom-keyframes.mjs
|
|
function isDOMKeyframes(keyframes2) {
|
|
return typeof keyframes2 === "object" && !Array.isArray(keyframes2);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animate/resolve-subjects.mjs
|
|
function resolveSubjects(subject, keyframes2, scope, selectorCache) {
|
|
if (typeof subject === "string" && isDOMKeyframes(keyframes2)) {
|
|
return resolveElements(subject, scope, selectorCache);
|
|
} else if (subject instanceof NodeList) {
|
|
return Array.from(subject);
|
|
} else if (Array.isArray(subject)) {
|
|
return subject;
|
|
} else {
|
|
return [subject];
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/sequence/utils/calc-repeat-duration.mjs
|
|
function calculateRepeatDuration(duration, repeat, _repeatDelay) {
|
|
return duration * (repeat + 1);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/sequence/utils/calc-time.mjs
|
|
function calcNextTime(current, next, prev, labels) {
|
|
var _a;
|
|
if (typeof next === "number") {
|
|
return next;
|
|
} else if (next.startsWith("-") || next.startsWith("+")) {
|
|
return Math.max(0, current + parseFloat(next));
|
|
} else if (next === "<") {
|
|
return prev;
|
|
} else {
|
|
return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/sequence/utils/edit.mjs
|
|
function eraseKeyframes(sequence, startTime, endTime) {
|
|
for (let i = 0; i < sequence.length; i++) {
|
|
const keyframe = sequence[i];
|
|
if (keyframe.at > startTime && keyframe.at < endTime) {
|
|
removeItem(sequence, keyframe);
|
|
i--;
|
|
}
|
|
}
|
|
}
|
|
function addKeyframes(sequence, keyframes2, easing, offset, startTime, endTime) {
|
|
eraseKeyframes(sequence, startTime, endTime);
|
|
for (let i = 0; i < keyframes2.length; i++) {
|
|
sequence.push({
|
|
value: keyframes2[i],
|
|
at: mixNumber(startTime, endTime, offset[i]),
|
|
easing: getEasingForSegment(easing, i)
|
|
});
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/sequence/utils/normalize-times.mjs
|
|
function normalizeTimes(times, repeat) {
|
|
for (let i = 0; i < times.length; i++) {
|
|
times[i] = times[i] / (repeat + 1);
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/sequence/utils/sort.mjs
|
|
function compareByTime(a, b) {
|
|
if (a.at === b.at) {
|
|
if (a.value === null)
|
|
return 1;
|
|
if (b.value === null)
|
|
return -1;
|
|
return 0;
|
|
} else {
|
|
return a.at - b.at;
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/sequence/create.mjs
|
|
var defaultSegmentEasing = "easeInOut";
|
|
var MAX_REPEAT = 20;
|
|
function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators2) {
|
|
const defaultDuration = defaultTransition.duration || 0.3;
|
|
const animationDefinitions = /* @__PURE__ */ new Map();
|
|
const sequences = /* @__PURE__ */ new Map();
|
|
const elementCache = {};
|
|
const timeLabels = /* @__PURE__ */ new Map();
|
|
let prevTime = 0;
|
|
let currentTime = 0;
|
|
let totalDuration = 0;
|
|
for (let i = 0; i < sequence.length; i++) {
|
|
const segment = sequence[i];
|
|
if (typeof segment === "string") {
|
|
timeLabels.set(segment, currentTime);
|
|
continue;
|
|
} else if (!Array.isArray(segment)) {
|
|
timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
|
|
continue;
|
|
}
|
|
let [subject, keyframes2, transition = {}] = segment;
|
|
if (transition.at !== void 0) {
|
|
currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
|
|
}
|
|
let maxDuration2 = 0;
|
|
const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
|
|
const valueKeyframesAsList = keyframesAsList(valueKeyframes);
|
|
const { delay: delay2 = 0, times = defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
|
|
let { ease: ease2 = defaultTransition.ease || "easeOut", duration } = valueTransition;
|
|
const calculatedDelay = typeof delay2 === "function" ? delay2(elementIndex, numSubjects) : delay2;
|
|
const numKeyframes = valueKeyframesAsList.length;
|
|
const createGenerator = isGenerator(type) ? type : generators2 === null || generators2 === void 0 ? void 0 : generators2[type];
|
|
if (numKeyframes <= 2 && createGenerator) {
|
|
let absoluteDelta = 100;
|
|
if (numKeyframes === 2 && isNumberKeyframesArray(valueKeyframesAsList)) {
|
|
const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
|
|
absoluteDelta = Math.abs(delta);
|
|
}
|
|
const springTransition = { ...remainingTransition };
|
|
if (duration !== void 0) {
|
|
springTransition.duration = secondsToMilliseconds(duration);
|
|
}
|
|
const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
|
|
ease2 = springEasing.ease;
|
|
duration = springEasing.duration;
|
|
}
|
|
duration !== null && duration !== void 0 ? duration : duration = defaultDuration;
|
|
const startTime = currentTime + calculatedDelay;
|
|
if (times.length === 1 && times[0] === 0) {
|
|
times[1] = 1;
|
|
}
|
|
const remainder = times.length - valueKeyframesAsList.length;
|
|
remainder > 0 && fillOffset(times, remainder);
|
|
valueKeyframesAsList.length === 1 && valueKeyframesAsList.unshift(null);
|
|
if (repeat) {
|
|
invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
|
|
duration = calculateRepeatDuration(duration, repeat);
|
|
const originalKeyframes = [...valueKeyframesAsList];
|
|
const originalTimes = [...times];
|
|
ease2 = Array.isArray(ease2) ? [...ease2] : [ease2];
|
|
const originalEase = [...ease2];
|
|
for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
|
|
valueKeyframesAsList.push(...originalKeyframes);
|
|
for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
|
|
times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
|
|
ease2.push(keyframeIndex === 0 ? "linear" : getEasingForSegment(originalEase, keyframeIndex - 1));
|
|
}
|
|
}
|
|
normalizeTimes(times, repeat);
|
|
}
|
|
const targetTime = startTime + duration;
|
|
addKeyframes(valueSequence, valueKeyframesAsList, ease2, times, startTime, targetTime);
|
|
maxDuration2 = Math.max(calculatedDelay + duration, maxDuration2);
|
|
totalDuration = Math.max(targetTime, totalDuration);
|
|
};
|
|
if (isMotionValue(subject)) {
|
|
const subjectSequence = getSubjectSequence(subject, sequences);
|
|
resolveValueSequence(keyframes2, transition, getValueSequence("default", subjectSequence));
|
|
} else {
|
|
const subjects = resolveSubjects(subject, keyframes2, scope, elementCache);
|
|
const numSubjects = subjects.length;
|
|
for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
|
|
keyframes2 = keyframes2;
|
|
transition = transition;
|
|
const thisSubject = subjects[subjectIndex];
|
|
const subjectSequence = getSubjectSequence(thisSubject, sequences);
|
|
for (const key in keyframes2) {
|
|
resolveValueSequence(keyframes2[key], getValueTransition2(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
|
|
}
|
|
}
|
|
}
|
|
prevTime = currentTime;
|
|
currentTime += maxDuration2;
|
|
}
|
|
sequences.forEach((valueSequences, element) => {
|
|
for (const key in valueSequences) {
|
|
const valueSequence = valueSequences[key];
|
|
valueSequence.sort(compareByTime);
|
|
const keyframes2 = [];
|
|
const valueOffset = [];
|
|
const valueEasing = [];
|
|
for (let i = 0; i < valueSequence.length; i++) {
|
|
const { at, value, easing } = valueSequence[i];
|
|
keyframes2.push(value);
|
|
valueOffset.push(progress(0, totalDuration, at));
|
|
valueEasing.push(easing || "easeOut");
|
|
}
|
|
if (valueOffset[0] !== 0) {
|
|
valueOffset.unshift(0);
|
|
keyframes2.unshift(keyframes2[0]);
|
|
valueEasing.unshift(defaultSegmentEasing);
|
|
}
|
|
if (valueOffset[valueOffset.length - 1] !== 1) {
|
|
valueOffset.push(1);
|
|
keyframes2.push(null);
|
|
}
|
|
if (!animationDefinitions.has(element)) {
|
|
animationDefinitions.set(element, {
|
|
keyframes: {},
|
|
transition: {}
|
|
});
|
|
}
|
|
const definition = animationDefinitions.get(element);
|
|
definition.keyframes[key] = keyframes2;
|
|
definition.transition[key] = {
|
|
...defaultTransition,
|
|
duration: totalDuration,
|
|
ease: valueEasing,
|
|
times: valueOffset,
|
|
...sequenceTransition
|
|
};
|
|
}
|
|
});
|
|
return animationDefinitions;
|
|
}
|
|
function getSubjectSequence(subject, sequences) {
|
|
!sequences.has(subject) && sequences.set(subject, {});
|
|
return sequences.get(subject);
|
|
}
|
|
function getValueSequence(name, sequences) {
|
|
if (!sequences[name])
|
|
sequences[name] = [];
|
|
return sequences[name];
|
|
}
|
|
function keyframesAsList(keyframes2) {
|
|
return Array.isArray(keyframes2) ? keyframes2 : [keyframes2];
|
|
}
|
|
function getValueTransition2(transition, key) {
|
|
return transition && transition[key] ? {
|
|
...transition,
|
|
...transition[key]
|
|
} : { ...transition };
|
|
}
|
|
var isNumber = (keyframe) => typeof keyframe === "number";
|
|
var isNumberKeyframesArray = (keyframes2) => keyframes2.every(isNumber);
|
|
|
|
// node_modules/framer-motion/dist/es/render/object/ObjectVisualElement.mjs
|
|
function isObjectKey(key, object) {
|
|
return key in object;
|
|
}
|
|
var ObjectVisualElement = class extends VisualElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.type = "object";
|
|
}
|
|
readValueFromInstance(instance, key) {
|
|
if (isObjectKey(key, instance)) {
|
|
const value = instance[key];
|
|
if (typeof value === "string" || typeof value === "number") {
|
|
return value;
|
|
}
|
|
}
|
|
return void 0;
|
|
}
|
|
getBaseTargetFromProps() {
|
|
return void 0;
|
|
}
|
|
removeValueFromRenderState(key, renderState) {
|
|
delete renderState.output[key];
|
|
}
|
|
measureInstanceViewportBox() {
|
|
return createBox();
|
|
}
|
|
build(renderState, latestValues) {
|
|
Object.assign(renderState.output, latestValues);
|
|
}
|
|
renderInstance(instance, { output }) {
|
|
Object.assign(instance, output);
|
|
}
|
|
sortInstanceNodePosition() {
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/utils/create-visual-element.mjs
|
|
function createDOMVisualElement(element) {
|
|
const options = {
|
|
presenceContext: null,
|
|
props: {},
|
|
visualState: {
|
|
renderState: {
|
|
transform: {},
|
|
transformOrigin: {},
|
|
style: {},
|
|
vars: {},
|
|
attrs: {}
|
|
},
|
|
latestValues: {}
|
|
}
|
|
};
|
|
const node = isSVGElement(element) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
|
|
node.mount(element);
|
|
visualElementStore.set(element, node);
|
|
}
|
|
function createObjectVisualElement(subject) {
|
|
const options = {
|
|
presenceContext: null,
|
|
props: {},
|
|
visualState: {
|
|
renderState: {
|
|
output: {}
|
|
},
|
|
latestValues: {}
|
|
}
|
|
};
|
|
const node = new ObjectVisualElement(options);
|
|
node.mount(subject);
|
|
visualElementStore.set(subject, node);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animate/subject.mjs
|
|
function isSingleValue(subject, keyframes2) {
|
|
return isMotionValue(subject) || typeof subject === "number" || typeof subject === "string" && !isDOMKeyframes(keyframes2);
|
|
}
|
|
function animateSubject(subject, keyframes2, options, scope) {
|
|
const animations2 = [];
|
|
if (isSingleValue(subject, keyframes2)) {
|
|
animations2.push(animateSingleValue(subject, isDOMKeyframes(keyframes2) ? keyframes2.default || keyframes2 : keyframes2, options ? options.default || options : options));
|
|
} else {
|
|
const subjects = resolveSubjects(subject, keyframes2, scope);
|
|
const numSubjects = subjects.length;
|
|
invariant(Boolean(numSubjects), "No valid elements provided.");
|
|
for (let i = 0; i < numSubjects; i++) {
|
|
const thisSubject = subjects[i];
|
|
const createVisualElement = thisSubject instanceof Element ? createDOMVisualElement : createObjectVisualElement;
|
|
if (!visualElementStore.has(thisSubject)) {
|
|
createVisualElement(thisSubject);
|
|
}
|
|
const visualElement = visualElementStore.get(thisSubject);
|
|
const transition = { ...options };
|
|
if ("delay" in transition && typeof transition.delay === "function") {
|
|
transition.delay = transition.delay(i, numSubjects);
|
|
}
|
|
animations2.push(...animateTarget(visualElement, { ...keyframes2, transition }, {}));
|
|
}
|
|
}
|
|
return animations2;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animate/sequence.mjs
|
|
function animateSequence(sequence, options, scope) {
|
|
const animations2 = [];
|
|
const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring });
|
|
animationDefinitions.forEach(({ keyframes: keyframes2, transition }, subject) => {
|
|
animations2.push(...animateSubject(subject, keyframes2, transition));
|
|
});
|
|
return animations2;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animate/index.mjs
|
|
function isSequence(value) {
|
|
return Array.isArray(value) && value.some(Array.isArray);
|
|
}
|
|
function createScopedAnimate(scope) {
|
|
function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
|
|
let animations2 = [];
|
|
if (isSequence(subjectOrSequence)) {
|
|
animations2 = animateSequence(subjectOrSequence, optionsOrKeyframes, scope);
|
|
} else {
|
|
animations2 = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
|
|
}
|
|
const animation = new GroupPlaybackControls(animations2);
|
|
if (scope) {
|
|
scope.animations.push(animation);
|
|
}
|
|
return animation;
|
|
}
|
|
return scopedAnimate;
|
|
}
|
|
var animate = createScopedAnimate();
|
|
|
|
// node_modules/framer-motion/dist/es/animation/hooks/use-animate.mjs
|
|
function useAnimate() {
|
|
const scope = useConstant(() => ({
|
|
current: null,
|
|
// Will be hydrated by React
|
|
animations: []
|
|
}));
|
|
const animate2 = useConstant(() => createScopedAnimate(scope));
|
|
useUnmountEffect(() => {
|
|
scope.animations.forEach((animation) => animation.stop());
|
|
});
|
|
return [scope, animate2];
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/waapi/utils/style.mjs
|
|
function setCSSVar(element, name, value) {
|
|
element.style.setProperty(`--${name}`, value);
|
|
}
|
|
function setStyle(element, name, value) {
|
|
element.style[name] = value;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs
|
|
var supportsPartialKeyframes = memo(() => {
|
|
try {
|
|
document.createElement("div").animate({ opacity: [1] });
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs
|
|
var state = /* @__PURE__ */ new WeakMap();
|
|
function hydrateKeyframes(valueName, keyframes2, read) {
|
|
for (let i = 0; i < keyframes2.length; i++) {
|
|
if (keyframes2[i] === null) {
|
|
keyframes2[i] = i === 0 ? read() : keyframes2[i - 1];
|
|
}
|
|
if (typeof keyframes2[i] === "number" && browserNumberValueTypes[valueName]) {
|
|
keyframes2[i] = browserNumberValueTypes[valueName].transform(keyframes2[i]);
|
|
}
|
|
}
|
|
if (!supportsPartialKeyframes() && keyframes2.length < 2) {
|
|
keyframes2.unshift(read());
|
|
}
|
|
}
|
|
var defaultEasing2 = "easeOut";
|
|
function getElementAnimationState(element) {
|
|
const animationState = state.get(element) || /* @__PURE__ */ new Map();
|
|
state.set(element, animationState);
|
|
return state.get(element);
|
|
}
|
|
var NativeAnimation = class extends NativeAnimationControls {
|
|
constructor(element, valueName, valueKeyframes, options) {
|
|
const isCSSVar = valueName.startsWith("--");
|
|
invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
|
|
const existingAnimation = getElementAnimationState(element).get(valueName);
|
|
existingAnimation && existingAnimation.stop();
|
|
const readInitialKeyframe = () => {
|
|
return valueName.startsWith("--") ? element.style.getPropertyValue(valueName) : window.getComputedStyle(element)[valueName];
|
|
};
|
|
if (!Array.isArray(valueKeyframes)) {
|
|
valueKeyframes = [valueKeyframes];
|
|
}
|
|
hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
|
|
if (isGenerator(options.type)) {
|
|
const generatorOptions = createGeneratorEasing(options, 100, options.type);
|
|
options.ease = supportsLinearEasing() ? generatorOptions.ease : defaultEasing2;
|
|
options.duration = secondsToMilliseconds(generatorOptions.duration);
|
|
options.type = "keyframes";
|
|
} else {
|
|
options.ease = options.ease || defaultEasing2;
|
|
}
|
|
const onFinish = () => {
|
|
this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
|
|
this.cancel();
|
|
this.resolveFinishedPromise();
|
|
};
|
|
const init = () => {
|
|
this.setValue = isCSSVar ? setCSSVar : setStyle;
|
|
this.options = options;
|
|
this.updateFinishedPromise();
|
|
this.removeAnimation = () => {
|
|
const elementState = state.get(element);
|
|
elementState && elementState.delete(valueName);
|
|
};
|
|
};
|
|
if (!supportsWaapi()) {
|
|
super();
|
|
init();
|
|
onFinish();
|
|
} else {
|
|
super(startWaapiAnimation(element, valueName, valueKeyframes, options));
|
|
init();
|
|
if (options.autoplay === false) {
|
|
this.animation.pause();
|
|
}
|
|
this.animation.onfinish = onFinish;
|
|
getElementAnimationState(element).set(valueName, this);
|
|
}
|
|
}
|
|
/**
|
|
* Allows the returned animation to be awaited or promise-chained. Currently
|
|
* resolves when the animation finishes at all but in a future update could/should
|
|
* reject if its cancels.
|
|
*/
|
|
then(resolve, reject) {
|
|
return this.currentFinishedPromise.then(resolve, reject);
|
|
}
|
|
updateFinishedPromise() {
|
|
this.currentFinishedPromise = new Promise((resolve) => {
|
|
this.resolveFinishedPromise = resolve;
|
|
});
|
|
}
|
|
play() {
|
|
if (this.state === "finished") {
|
|
this.updateFinishedPromise();
|
|
}
|
|
super.play();
|
|
}
|
|
cancel() {
|
|
this.removeAnimation();
|
|
super.cancel();
|
|
}
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs
|
|
function animateElements(elementOrSelector, keyframes2, options, scope) {
|
|
const elements = resolveElements(elementOrSelector, scope);
|
|
const numElements = elements.length;
|
|
invariant(Boolean(numElements), "No valid element provided.");
|
|
const animations2 = [];
|
|
for (let i = 0; i < numElements; i++) {
|
|
const element = elements[i];
|
|
const elementTransition = { ...options };
|
|
if (typeof elementTransition.delay === "function") {
|
|
elementTransition.delay = elementTransition.delay(i, numElements);
|
|
}
|
|
for (const valueName in keyframes2) {
|
|
const valueKeyframes = keyframes2[valueName];
|
|
const valueOptions = {
|
|
...getValueTransition(elementTransition, valueName)
|
|
};
|
|
valueOptions.duration = valueOptions.duration ? secondsToMilliseconds(valueOptions.duration) : valueOptions.duration;
|
|
valueOptions.delay = secondsToMilliseconds(valueOptions.delay || 0);
|
|
animations2.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
|
|
}
|
|
}
|
|
return animations2;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs
|
|
var createScopedWaapiAnimate = (scope) => {
|
|
function scopedAnimate(elementOrSelector, keyframes2, options) {
|
|
return new GroupPlaybackControls(animateElements(elementOrSelector, keyframes2, options, scope));
|
|
}
|
|
return scopedAnimate;
|
|
};
|
|
var animateMini = createScopedWaapiAnimate();
|
|
|
|
// node_modules/framer-motion/dist/es/animation/hooks/use-animate-style.mjs
|
|
function useAnimateMini() {
|
|
const scope = useConstant(() => ({
|
|
current: null,
|
|
// Will be hydrated by React
|
|
animations: []
|
|
}));
|
|
const animate2 = useConstant(() => createScopedWaapiAnimate(scope));
|
|
useUnmountEffect(() => {
|
|
scope.animations.forEach((animation) => animation.stop());
|
|
});
|
|
return [scope, animate2];
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/hooks/use-animation.mjs
|
|
function useAnimationControls() {
|
|
const controls = useConstant(animationControls);
|
|
useIsomorphicLayoutEffect(controls.mount, []);
|
|
return controls;
|
|
}
|
|
var useAnimation = useAnimationControls;
|
|
|
|
// node_modules/framer-motion/dist/es/events/use-dom-event.mjs
|
|
var import_react38 = __toESM(require_react(), 1);
|
|
function useDomEvent(ref, eventName, handler, options) {
|
|
(0, import_react38.useEffect)(() => {
|
|
const element = ref.current;
|
|
if (handler && element) {
|
|
return addDomEvent(element, eventName, handler, options);
|
|
}
|
|
}, [ref, eventName, handler, options]);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/gestures/drag/use-drag-controls.mjs
|
|
var DragControls = class {
|
|
constructor() {
|
|
this.componentControls = /* @__PURE__ */ new Set();
|
|
}
|
|
/**
|
|
* Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
|
|
*
|
|
* @internal
|
|
*/
|
|
subscribe(controls) {
|
|
this.componentControls.add(controls);
|
|
return () => this.componentControls.delete(controls);
|
|
}
|
|
/**
|
|
* Start a drag gesture on every `motion` component that has this set of drag controls
|
|
* passed into it via the `dragControls` prop.
|
|
*
|
|
* ```jsx
|
|
* dragControls.start(e, {
|
|
* snapToCursor: true
|
|
* })
|
|
* ```
|
|
*
|
|
* @param event - PointerEvent
|
|
* @param options - Options
|
|
*
|
|
* @public
|
|
*/
|
|
start(event, options) {
|
|
this.componentControls.forEach((controls) => {
|
|
controls.start(event.nativeEvent || event, options);
|
|
});
|
|
}
|
|
};
|
|
var createDragControls = () => new DragControls();
|
|
function useDragControls() {
|
|
return useConstant(createDragControls);
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/is-motion-component.mjs
|
|
function isMotionComponent(component) {
|
|
return component !== null && typeof component === "object" && motionComponentSymbol in component;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/motion/utils/unwrap-motion-component.mjs
|
|
function unwrapMotionComponent(component) {
|
|
if (isMotionComponent(component)) {
|
|
return component[motionComponentSymbol];
|
|
}
|
|
return void 0;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/use-instant-layout-transition.mjs
|
|
function useInstantLayoutTransition() {
|
|
return startTransition;
|
|
}
|
|
function startTransition(callback) {
|
|
if (!rootProjectionNode.current)
|
|
return;
|
|
rootProjectionNode.current.isUpdating = false;
|
|
rootProjectionNode.current.blockUpdate();
|
|
callback && callback();
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/projection/use-reset-projection.mjs
|
|
var import_react39 = __toESM(require_react(), 1);
|
|
function useResetProjection() {
|
|
const reset = (0, import_react39.useCallback)(() => {
|
|
const root = rootProjectionNode.current;
|
|
if (!root)
|
|
return;
|
|
root.resetTree();
|
|
}, []);
|
|
return reset;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-cycle.mjs
|
|
var import_react40 = __toESM(require_react(), 1);
|
|
function useCycle(...items) {
|
|
const index = (0, import_react40.useRef)(0);
|
|
const [item, setItem] = (0, import_react40.useState)(items[index.current]);
|
|
const runCycle = (0, import_react40.useCallback)(
|
|
(next) => {
|
|
index.current = typeof next !== "number" ? wrap(0, items.length, index.current + 1) : next;
|
|
setItem(items[index.current]);
|
|
},
|
|
// The array will change on each call, but by putting items.length at
|
|
// the front of this array, we guarantee the dependency comparison will match up
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[items.length, ...items]
|
|
);
|
|
return [item, runCycle];
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-in-view.mjs
|
|
var import_react41 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs
|
|
var thresholds = {
|
|
some: 0,
|
|
all: 1
|
|
};
|
|
function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
|
|
const elements = resolveElements(elementOrSelector);
|
|
const activeIntersections = /* @__PURE__ */ new WeakMap();
|
|
const onIntersectionChange = (entries) => {
|
|
entries.forEach((entry) => {
|
|
const onEnd = activeIntersections.get(entry.target);
|
|
if (entry.isIntersecting === Boolean(onEnd))
|
|
return;
|
|
if (entry.isIntersecting) {
|
|
const newOnEnd = onStart(entry);
|
|
if (typeof newOnEnd === "function") {
|
|
activeIntersections.set(entry.target, newOnEnd);
|
|
} else {
|
|
observer2.unobserve(entry.target);
|
|
}
|
|
} else if (typeof onEnd === "function") {
|
|
onEnd(entry);
|
|
activeIntersections.delete(entry.target);
|
|
}
|
|
});
|
|
};
|
|
const observer2 = new IntersectionObserver(onIntersectionChange, {
|
|
root,
|
|
rootMargin,
|
|
threshold: typeof amount === "number" ? amount : thresholds[amount]
|
|
});
|
|
elements.forEach((element) => observer2.observe(element));
|
|
return () => observer2.disconnect();
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-in-view.mjs
|
|
function useInView(ref, { root, margin, amount, once = false } = {}) {
|
|
const [isInView, setInView] = (0, import_react41.useState)(false);
|
|
(0, import_react41.useEffect)(() => {
|
|
if (!ref.current || once && isInView)
|
|
return;
|
|
const onEnter = () => {
|
|
setInView(true);
|
|
return once ? void 0 : () => setInView(false);
|
|
};
|
|
const options = {
|
|
root: root && root.current || void 0,
|
|
margin,
|
|
amount
|
|
};
|
|
return inView(ref.current, onEnter, options);
|
|
}, [root, ref, margin, once, amount]);
|
|
return isInView;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/utils/use-instant-transition.mjs
|
|
var import_react42 = __toESM(require_react(), 1);
|
|
function useInstantTransition() {
|
|
const [forceUpdate, forcedRenderCount] = useForceUpdate();
|
|
const startInstantLayoutTransition = useInstantLayoutTransition();
|
|
const unlockOnFrameRef = (0, import_react42.useRef)(-1);
|
|
(0, import_react42.useEffect)(() => {
|
|
frame.postRender(() => frame.postRender(() => {
|
|
if (forcedRenderCount !== unlockOnFrameRef.current)
|
|
return;
|
|
instantAnimationState.current = false;
|
|
}));
|
|
}, [forcedRenderCount]);
|
|
return (callback) => {
|
|
startInstantLayoutTransition(() => {
|
|
instantAnimationState.current = true;
|
|
forceUpdate();
|
|
callback();
|
|
unlockOnFrameRef.current = forcedRenderCount + 1;
|
|
});
|
|
};
|
|
}
|
|
function disableInstantTransitions() {
|
|
instantAnimationState.current = false;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/optimized-appear/store-id.mjs
|
|
var appearStoreId = (elementId, valueName) => {
|
|
const key = transformProps.has(valueName) ? "transform" : valueName;
|
|
return `${elementId}: ${key}`;
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/animation/optimized-appear/store.mjs
|
|
var appearAnimationStore = /* @__PURE__ */ new Map();
|
|
var appearComplete = /* @__PURE__ */ new Map();
|
|
|
|
// node_modules/framer-motion/dist/es/animation/optimized-appear/handoff.mjs
|
|
function handoffOptimizedAppearAnimation(elementId, valueName, frame2) {
|
|
var _a;
|
|
const storeId = appearStoreId(elementId, valueName);
|
|
const optimisedAnimation = appearAnimationStore.get(storeId);
|
|
if (!optimisedAnimation) {
|
|
return null;
|
|
}
|
|
const { animation, startTime } = optimisedAnimation;
|
|
function cancelAnimation() {
|
|
var _a2;
|
|
(_a2 = window.MotionCancelOptimisedAnimation) === null || _a2 === void 0 ? void 0 : _a2.call(window, elementId, valueName, frame2);
|
|
}
|
|
animation.onfinish = cancelAnimation;
|
|
if (startTime === null || ((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, elementId))) {
|
|
cancelAnimation();
|
|
return null;
|
|
} else {
|
|
return startTime;
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/optimized-appear/start.mjs
|
|
var startFrameTime;
|
|
var readyAnimation;
|
|
var suspendedAnimations = /* @__PURE__ */ new Set();
|
|
function resumeSuspendedAnimations() {
|
|
suspendedAnimations.forEach((data) => {
|
|
data.animation.play();
|
|
data.animation.startTime = data.startTime;
|
|
});
|
|
suspendedAnimations.clear();
|
|
}
|
|
function startOptimizedAppearAnimation(element, name, keyframes2, options, onReady) {
|
|
if (window.MotionIsMounted) {
|
|
return;
|
|
}
|
|
const id4 = element.dataset[optimizedAppearDataId];
|
|
if (!id4)
|
|
return;
|
|
window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
|
|
const storeId = appearStoreId(id4, name);
|
|
if (!readyAnimation) {
|
|
readyAnimation = startWaapiAnimation(
|
|
element,
|
|
name,
|
|
[keyframes2[0], keyframes2[0]],
|
|
/**
|
|
* 10 secs is basically just a super-safe duration to give Chrome
|
|
* long enough to get the animation ready.
|
|
*/
|
|
{ duration: 1e4, ease: "linear" }
|
|
);
|
|
appearAnimationStore.set(storeId, {
|
|
animation: readyAnimation,
|
|
startTime: null
|
|
});
|
|
window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
|
|
window.MotionHasOptimisedAnimation = (elementId, valueName) => {
|
|
if (!elementId)
|
|
return false;
|
|
if (!valueName) {
|
|
return appearComplete.has(elementId);
|
|
}
|
|
const animationId = appearStoreId(elementId, valueName);
|
|
return Boolean(appearAnimationStore.get(animationId));
|
|
};
|
|
window.MotionHandoffMarkAsComplete = (elementId) => {
|
|
if (appearComplete.has(elementId)) {
|
|
appearComplete.set(elementId, true);
|
|
}
|
|
};
|
|
window.MotionHandoffIsComplete = (elementId) => {
|
|
return appearComplete.get(elementId) === true;
|
|
};
|
|
window.MotionCancelOptimisedAnimation = (elementId, valueName, frame2, canResume) => {
|
|
const animationId = appearStoreId(elementId, valueName);
|
|
const data = appearAnimationStore.get(animationId);
|
|
if (!data)
|
|
return;
|
|
if (frame2 && canResume === void 0) {
|
|
frame2.postRender(() => {
|
|
frame2.postRender(() => {
|
|
data.animation.cancel();
|
|
});
|
|
});
|
|
} else {
|
|
data.animation.cancel();
|
|
}
|
|
if (frame2 && canResume) {
|
|
suspendedAnimations.add(data);
|
|
frame2.render(resumeSuspendedAnimations);
|
|
} else {
|
|
appearAnimationStore.delete(animationId);
|
|
if (!appearAnimationStore.size) {
|
|
window.MotionCancelOptimisedAnimation = void 0;
|
|
}
|
|
}
|
|
};
|
|
window.MotionCheckAppearSync = (visualElement, valueName, value) => {
|
|
var _a, _b;
|
|
const appearId = getOptimisedAppearId(visualElement);
|
|
if (!appearId)
|
|
return;
|
|
const valueIsOptimised = (_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
|
|
const externalAnimationValue = (_b = visualElement.props.values) === null || _b === void 0 ? void 0 : _b[valueName];
|
|
if (!valueIsOptimised || !externalAnimationValue)
|
|
return;
|
|
const removeSyncCheck = value.on("change", (latestValue) => {
|
|
var _a2;
|
|
if (externalAnimationValue.get() !== latestValue) {
|
|
(_a2 = window.MotionCancelOptimisedAnimation) === null || _a2 === void 0 ? void 0 : _a2.call(window, appearId, valueName);
|
|
removeSyncCheck();
|
|
}
|
|
});
|
|
return removeSyncCheck;
|
|
};
|
|
}
|
|
const startAnimation = () => {
|
|
readyAnimation.cancel();
|
|
const appearAnimation = startWaapiAnimation(element, name, keyframes2, options);
|
|
if (startFrameTime === void 0) {
|
|
startFrameTime = performance.now();
|
|
}
|
|
appearAnimation.startTime = startFrameTime;
|
|
appearAnimationStore.set(storeId, {
|
|
animation: appearAnimation,
|
|
startTime: startFrameTime
|
|
});
|
|
if (onReady)
|
|
onReady(appearAnimation);
|
|
};
|
|
appearComplete.set(id4, false);
|
|
if (readyAnimation.ready) {
|
|
readyAnimation.ready.then(startAnimation).catch(noop);
|
|
} else {
|
|
startAnimation();
|
|
}
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/animation/hooks/use-animated-state.mjs
|
|
var import_react43 = __toESM(require_react(), 1);
|
|
var createObject = () => ({});
|
|
var StateVisualElement = class extends VisualElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.measureInstanceViewportBox = createBox;
|
|
}
|
|
build() {
|
|
}
|
|
resetTransform() {
|
|
}
|
|
restoreTransform() {
|
|
}
|
|
removeValueFromRenderState() {
|
|
}
|
|
renderInstance() {
|
|
}
|
|
scrapeMotionValuesFromProps() {
|
|
return createObject();
|
|
}
|
|
getBaseTargetFromProps() {
|
|
return void 0;
|
|
}
|
|
readValueFromInstance(_state, key, options) {
|
|
return options.initialState[key] || 0;
|
|
}
|
|
sortInstanceNodePosition() {
|
|
return 0;
|
|
}
|
|
};
|
|
var useVisualState = makeUseVisualState({
|
|
scrapeMotionValuesFromProps: createObject,
|
|
createRenderState: createObject
|
|
});
|
|
function useAnimatedState(initialState) {
|
|
const [animationState, setAnimationState] = (0, import_react43.useState)(initialState);
|
|
const visualState = useVisualState({}, false);
|
|
const element = useConstant(() => {
|
|
return new StateVisualElement({
|
|
props: {
|
|
onUpdate: (v) => {
|
|
setAnimationState({ ...v });
|
|
}
|
|
},
|
|
visualState,
|
|
presenceContext: null
|
|
}, { initialState });
|
|
});
|
|
(0, import_react43.useLayoutEffect)(() => {
|
|
element.mount({});
|
|
return () => element.unmount();
|
|
}, [element]);
|
|
const startAnimation = useConstant(() => (animationDefinition) => {
|
|
return animateVisualElement(element, animationDefinition);
|
|
});
|
|
return [animationState, startAnimation];
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/AnimateSharedLayout.mjs
|
|
var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
|
|
var React3 = __toESM(require_react(), 1);
|
|
var id3 = 0;
|
|
var AnimateSharedLayout = ({ children }) => {
|
|
React3.useEffect(() => {
|
|
invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
|
|
}, []);
|
|
return (0, import_jsx_runtime9.jsx)(LayoutGroup, { id: useConstant(() => `asl-${id3++}`), children });
|
|
};
|
|
|
|
// node_modules/framer-motion/dist/es/value/use-inverted-scale.mjs
|
|
var import_react44 = __toESM(require_react(), 1);
|
|
var maxScale = 1e5;
|
|
var invertScale = (scale2) => scale2 > 1e-3 ? 1 / scale2 : maxScale;
|
|
var hasWarned = false;
|
|
function useInvertedScale(scale2) {
|
|
let parentScaleX = useMotionValue(1);
|
|
let parentScaleY = useMotionValue(1);
|
|
const { visualElement } = (0, import_react44.useContext)(MotionContext);
|
|
invariant(!!(scale2 || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
|
|
warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
|
|
hasWarned = true;
|
|
if (scale2) {
|
|
parentScaleX = scale2.scaleX || parentScaleX;
|
|
parentScaleY = scale2.scaleY || parentScaleY;
|
|
} else if (visualElement) {
|
|
parentScaleX = visualElement.getValue("scaleX", 1);
|
|
parentScaleY = visualElement.getValue("scaleY", 1);
|
|
}
|
|
const scaleX = useTransform(parentScaleX, invertScale);
|
|
const scaleY = useTransform(parentScaleY, invertScale);
|
|
return { scaleX, scaleY };
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/Reorder/namespace.mjs
|
|
var namespace_exports = {};
|
|
__export(namespace_exports, {
|
|
Group: () => ReorderGroup,
|
|
Item: () => ReorderItem
|
|
});
|
|
|
|
// node_modules/framer-motion/dist/es/components/Reorder/Group.mjs
|
|
var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
|
|
var import_react46 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/framer-motion/dist/es/context/ReorderContext.mjs
|
|
var import_react45 = __toESM(require_react(), 1);
|
|
var ReorderContext = (0, import_react45.createContext)(null);
|
|
|
|
// node_modules/framer-motion/dist/es/components/Reorder/utils/check-reorder.mjs
|
|
function checkReorder(order, value, offset, velocity) {
|
|
if (!velocity)
|
|
return order;
|
|
const index = order.findIndex((item2) => item2.value === value);
|
|
if (index === -1)
|
|
return order;
|
|
const nextOffset = velocity > 0 ? 1 : -1;
|
|
const nextItem = order[index + nextOffset];
|
|
if (!nextItem)
|
|
return order;
|
|
const item = order[index];
|
|
const nextLayout = nextItem.layout;
|
|
const nextItemCenter = mixNumber(nextLayout.min, nextLayout.max, 0.5);
|
|
if (nextOffset === 1 && item.layout.max + offset > nextItemCenter || nextOffset === -1 && item.layout.min + offset < nextItemCenter) {
|
|
return moveItem(order, index, index + nextOffset);
|
|
}
|
|
return order;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/Reorder/Group.mjs
|
|
function ReorderGroupComponent({ children, as = "ul", axis = "y", onReorder, values, ...props }, externalRef) {
|
|
const Component3 = useConstant(() => motion[as]);
|
|
const order = [];
|
|
const isReordering = (0, import_react46.useRef)(false);
|
|
invariant(Boolean(values), "Reorder.Group must be provided a values prop");
|
|
const context = {
|
|
axis,
|
|
registerItem: (value, layout2) => {
|
|
const idx = order.findIndex((entry) => value === entry.value);
|
|
if (idx !== -1) {
|
|
order[idx].layout = layout2[axis];
|
|
} else {
|
|
order.push({ value, layout: layout2[axis] });
|
|
}
|
|
order.sort(compareMin);
|
|
},
|
|
updateOrder: (item, offset, velocity) => {
|
|
if (isReordering.current)
|
|
return;
|
|
const newOrder = checkReorder(order, item, offset, velocity);
|
|
if (order !== newOrder) {
|
|
isReordering.current = true;
|
|
onReorder(newOrder.map(getValue).filter((value) => values.indexOf(value) !== -1));
|
|
}
|
|
}
|
|
};
|
|
(0, import_react46.useEffect)(() => {
|
|
isReordering.current = false;
|
|
});
|
|
return (0, import_jsx_runtime10.jsx)(Component3, { ...props, ref: externalRef, ignoreStrict: true, children: (0, import_jsx_runtime10.jsx)(ReorderContext.Provider, { value: context, children }) });
|
|
}
|
|
var ReorderGroup = (0, import_react46.forwardRef)(ReorderGroupComponent);
|
|
function getValue(item) {
|
|
return item.value;
|
|
}
|
|
function compareMin(a, b) {
|
|
return a.layout.min - b.layout.min;
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/components/Reorder/Item.mjs
|
|
var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
|
|
var import_react47 = __toESM(require_react(), 1);
|
|
function useDefaultMotionValue(value, defaultValue = 0) {
|
|
return isMotionValue(value) ? value : useMotionValue(defaultValue);
|
|
}
|
|
function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag, layout: layout2 = true, ...props }, externalRef) {
|
|
const Component3 = useConstant(() => motion[as]);
|
|
const context = (0, import_react47.useContext)(ReorderContext);
|
|
const point2 = {
|
|
x: useDefaultMotionValue(style.x),
|
|
y: useDefaultMotionValue(style.y)
|
|
};
|
|
const zIndex = useTransform([point2.x, point2.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
|
|
invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
|
|
const { axis, registerItem, updateOrder } = context;
|
|
return (0, import_jsx_runtime11.jsx)(Component3, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point2.x, y: point2.y, zIndex }, layout: layout2, onDrag: (event, gesturePoint) => {
|
|
const { velocity } = gesturePoint;
|
|
velocity[axis] && updateOrder(value, point2[axis].get(), velocity[axis]);
|
|
onDrag && onDrag(event, gesturePoint);
|
|
}, onLayoutMeasure: (measured) => registerItem(value, measured), ref: externalRef, ignoreStrict: true, children });
|
|
}
|
|
var ReorderItem = (0, import_react47.forwardRef)(ReorderItemComponent);
|
|
|
|
// node_modules/framer-motion/dist/es/animation/utils/stagger.mjs
|
|
function getOriginIndex(from, total) {
|
|
if (from === "first") {
|
|
return 0;
|
|
} else {
|
|
const lastIndex = total - 1;
|
|
return from === "last" ? lastIndex : lastIndex / 2;
|
|
}
|
|
}
|
|
function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2 } = {}) {
|
|
return (i, total) => {
|
|
const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
|
|
const distance2 = Math.abs(fromIndex - i);
|
|
let delay2 = duration * distance2;
|
|
if (ease2) {
|
|
const maxDelay = total * duration;
|
|
const easingFunction = easingDefinitionToFunction(ease2);
|
|
delay2 = easingFunction(delay2 / maxDelay) * maxDelay;
|
|
}
|
|
return startDelay + delay2;
|
|
};
|
|
}
|
|
|
|
// node_modules/framer-motion/dist/es/frameloop/index-legacy.mjs
|
|
var sync = frame;
|
|
var cancelSync = stepsOrder.reduce((acc, key) => {
|
|
acc[key] = (process2) => cancelFrame(process2);
|
|
return acc;
|
|
}, {});
|
|
|
|
// node_modules/framer-motion/dist/es/easing/steps.mjs
|
|
function steps(numSteps, direction = "end") {
|
|
return (progress2) => {
|
|
progress2 = direction === "end" ? Math.min(progress2, 0.999) : Math.max(progress2, 1e-3);
|
|
const expanded = progress2 * numSteps;
|
|
const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
|
|
return clamp(0, 1, rounded / numSteps);
|
|
};
|
|
}
|
|
export {
|
|
AcceleratedAnimation,
|
|
AnimatePresence,
|
|
AnimateSharedLayout,
|
|
DeprecatedLayoutGroupContext,
|
|
DragControls,
|
|
FlatTree,
|
|
LayoutGroup,
|
|
LayoutGroupContext,
|
|
LazyMotion,
|
|
MotionConfig,
|
|
MotionConfigContext,
|
|
MotionContext,
|
|
MotionGlobalConfig,
|
|
MotionValue,
|
|
PresenceContext,
|
|
namespace_exports as Reorder,
|
|
SwitchLayoutGroupContext,
|
|
VisualElement,
|
|
addPointerEvent,
|
|
addPointerInfo,
|
|
addScaleCorrector,
|
|
animate,
|
|
animateMini,
|
|
animateValue,
|
|
animateVisualElement,
|
|
animationControls,
|
|
animations,
|
|
anticipate,
|
|
backIn,
|
|
backInOut,
|
|
backOut,
|
|
buildTransform,
|
|
calcLength,
|
|
cancelFrame,
|
|
cancelSync,
|
|
circIn,
|
|
circInOut,
|
|
circOut,
|
|
clamp,
|
|
color,
|
|
complex,
|
|
createBox,
|
|
createRendererMotionComponent,
|
|
createScopedAnimate,
|
|
cubicBezier,
|
|
delay,
|
|
disableInstantTransitions,
|
|
distance,
|
|
distance2D,
|
|
domAnimation,
|
|
domMax,
|
|
domMin,
|
|
easeIn,
|
|
easeInOut,
|
|
easeOut,
|
|
filterProps,
|
|
findSpring,
|
|
frame,
|
|
frameData,
|
|
frameSteps,
|
|
inView,
|
|
inertia,
|
|
interpolate,
|
|
invariant,
|
|
isBrowser,
|
|
isDragActive,
|
|
isMotionComponent,
|
|
isMotionValue,
|
|
isValidMotionProp,
|
|
keyframes,
|
|
m,
|
|
makeUseVisualState,
|
|
mirrorEasing,
|
|
mix,
|
|
motion,
|
|
motionValue,
|
|
noop,
|
|
optimizedAppearDataAttribute,
|
|
pipe,
|
|
progress,
|
|
px,
|
|
resolveMotionValue,
|
|
reverseEasing,
|
|
scroll,
|
|
scrollInfo,
|
|
spring,
|
|
stagger,
|
|
startOptimizedAppearAnimation,
|
|
steps,
|
|
sync,
|
|
time,
|
|
transform,
|
|
unwrapMotionComponent,
|
|
useAnimate,
|
|
useAnimateMini,
|
|
useAnimation,
|
|
useAnimationControls,
|
|
useAnimationFrame,
|
|
useCycle,
|
|
useAnimatedState as useDeprecatedAnimatedState,
|
|
useInvertedScale as useDeprecatedInvertedScale,
|
|
useDomEvent,
|
|
useDragControls,
|
|
useElementScroll,
|
|
useForceUpdate,
|
|
useInView,
|
|
useInstantLayoutTransition,
|
|
useInstantTransition,
|
|
useIsPresent,
|
|
useIsomorphicLayoutEffect,
|
|
useMotionTemplate,
|
|
useMotionValue,
|
|
useMotionValueEvent,
|
|
usePresence,
|
|
useReducedMotion,
|
|
useReducedMotionConfig,
|
|
useResetProjection,
|
|
useScroll,
|
|
useSpring,
|
|
useTime,
|
|
useTransform,
|
|
useUnmountEffect,
|
|
useVelocity,
|
|
useViewportScroll,
|
|
useWillChange,
|
|
visualElementStore,
|
|
wrap
|
|
};
|
|
/*! Bundled license information:
|
|
|
|
react/cjs/react-jsx-runtime.development.js:
|
|
(**
|
|
* @license React
|
|
* react-jsx-runtime.development.js
|
|
*
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*)
|
|
*/
|
|
//# sourceMappingURL=framer-motion.js.map
|