animated-charts
Version:
Animated chart web components for all frameworks (React, Angular, Vue, HTML)
1,552 lines (1,464 loc) • 561 kB
JavaScript
export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
import { r as requireJsxRuntime, j as jsxRuntimeExports } from './jsx-runtime.js';
var react = {exports: {}};
var react_production = {};
/**
* @license React
* react.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var hasRequiredReact_production;
function requireReact_production () {
if (hasRequiredReact_production) return react_production;
hasRequiredReact_production = 1;
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
REACT_PORTAL_TYPE = Symbol.for("react.portal"),
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
REACT_CONTEXT_TYPE = Symbol.for("react.context"),
REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
REACT_MEMO_TYPE = Symbol.for("react.memo"),
REACT_LAZY_TYPE = Symbol.for("react.lazy"),
MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
function getIteratorFn(maybeIterable) {
if (null === maybeIterable || "object" !== typeof maybeIterable) return null;
maybeIterable =
(MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) ||
maybeIterable["@@iterator"];
return "function" === typeof maybeIterable ? maybeIterable : null;
}
var ReactNoopUpdateQueue = {
isMounted: function () {
return false;
},
enqueueForceUpdate: function () {},
enqueueReplaceState: function () {},
enqueueSetState: function () {}
},
assign = Object.assign,
emptyObject = {};
function Component(props, context, updater) {
this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
}
Component.prototype.isReactComponent = {};
Component.prototype.setState = function (partialState, callback) {
if (
"object" !== typeof partialState &&
"function" !== typeof partialState &&
null != partialState
)
throw Error(
"takes an object of state variables to update or a function which returns an object of state variables."
);
this.updater.enqueueSetState(this, partialState, callback, "setState");
};
Component.prototype.forceUpdate = function (callback) {
this.updater.enqueueForceUpdate(this, callback, "forceUpdate");
};
function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;
function PureComponent(props, context, updater) {
this.props = props;
this.context = context;
this.refs = emptyObject;
this.updater = updater || ReactNoopUpdateQueue;
}
var pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;
var isArrayImpl = Array.isArray,
ReactSharedInternals = { H: null, A: null, T: null, S: null, V: null },
hasOwnProperty = Object.prototype.hasOwnProperty;
function ReactElement(type, key, self, source, owner, props) {
self = props.ref;
return {
$$typeof: REACT_ELEMENT_TYPE,
type: type,
key: key,
ref: void 0 !== self ? self : null,
props: props
};
}
function cloneAndReplaceKey(oldElement, newKey) {
return ReactElement(
oldElement.type,
newKey,
void 0,
void 0,
void 0,
oldElement.props
);
}
function isValidElement(object) {
return (
"object" === typeof object &&
null !== object &&
object.$$typeof === REACT_ELEMENT_TYPE
);
}
function escape(key) {
var escaperLookup = { "=": "=0", ":": "=2" };
return (
"$" +
key.replace(/[=:]/g, function (match) {
return escaperLookup[match];
})
);
}
var userProvidedKeyEscapeRegex = /\/+/g;
function getElementKey(element, index) {
return "object" === typeof element && null !== element && null != element.key
? escape("" + element.key)
: index.toString(36);
}
function noop$1() {}
function resolveThenable(thenable) {
switch (thenable.status) {
case "fulfilled":
return thenable.value;
case "rejected":
throw thenable.reason;
default:
switch (
("string" === typeof thenable.status
? thenable.then(noop$1, noop$1)
: ((thenable.status = "pending"),
thenable.then(
function (fulfilledValue) {
"pending" === thenable.status &&
((thenable.status = "fulfilled"),
(thenable.value = fulfilledValue));
},
function (error) {
"pending" === thenable.status &&
((thenable.status = "rejected"), (thenable.reason = error));
}
)),
thenable.status)
) {
case "fulfilled":
return thenable.value;
case "rejected":
throw thenable.reason;
}
}
throw thenable;
}
function mapIntoArray(children, array, escapedPrefix, nameSoFar, callback) {
var type = typeof children;
if ("undefined" === type || "boolean" === type) children = null;
var invokeCallback = false;
if (null === children) invokeCallback = true;
else
switch (type) {
case "bigint":
case "string":
case "number":
invokeCallback = true;
break;
case "object":
switch (children.$$typeof) {
case REACT_ELEMENT_TYPE:
case REACT_PORTAL_TYPE:
invokeCallback = true;
break;
case REACT_LAZY_TYPE:
return (
(invokeCallback = children._init),
mapIntoArray(
invokeCallback(children._payload),
array,
escapedPrefix,
nameSoFar,
callback
)
);
}
}
if (invokeCallback)
return (
(callback = callback(children)),
(invokeCallback =
"" === nameSoFar ? "." + getElementKey(children, 0) : nameSoFar),
isArrayImpl(callback)
? ((escapedPrefix = ""),
null != invokeCallback &&
(escapedPrefix =
invokeCallback.replace(userProvidedKeyEscapeRegex, "$&/") + "/"),
mapIntoArray(callback, array, escapedPrefix, "", function (c) {
return c;
}))
: null != callback &&
(isValidElement(callback) &&
(callback = cloneAndReplaceKey(
callback,
escapedPrefix +
(null == callback.key ||
(children && children.key === callback.key)
? ""
: ("" + callback.key).replace(
userProvidedKeyEscapeRegex,
"$&/"
) + "/") +
invokeCallback
)),
array.push(callback)),
1
);
invokeCallback = 0;
var nextNamePrefix = "" === nameSoFar ? "." : nameSoFar + ":";
if (isArrayImpl(children))
for (var i = 0; i < children.length; i++)
(nameSoFar = children[i]),
(type = nextNamePrefix + getElementKey(nameSoFar, i)),
(invokeCallback += mapIntoArray(
nameSoFar,
array,
escapedPrefix,
type,
callback
));
else if (((i = getIteratorFn(children)), "function" === typeof i))
for (
children = i.call(children), i = 0;
!(nameSoFar = children.next()).done;
)
(nameSoFar = nameSoFar.value),
(type = nextNamePrefix + getElementKey(nameSoFar, i++)),
(invokeCallback += mapIntoArray(
nameSoFar,
array,
escapedPrefix,
type,
callback
));
else if ("object" === type) {
if ("function" === typeof children.then)
return mapIntoArray(
resolveThenable(children),
array,
escapedPrefix,
nameSoFar,
callback
);
array = String(children);
throw Error(
"Objects are not valid as a React child (found: " +
("[object Object]" === array
? "object with keys {" + Object.keys(children).join(", ") + "}"
: array) +
"). If you meant to render a collection of children, use an array instead."
);
}
return invokeCallback;
}
function mapChildren(children, func, context) {
if (null == children) return children;
var result = [],
count = 0;
mapIntoArray(children, result, "", "", function (child) {
return func.call(context, child, count++);
});
return result;
}
function lazyInitializer(payload) {
if (-1 === payload._status) {
var ctor = payload._result;
ctor = ctor();
ctor.then(
function (moduleObject) {
if (0 === payload._status || -1 === payload._status)
(payload._status = 1), (payload._result = moduleObject);
},
function (error) {
if (0 === payload._status || -1 === payload._status)
(payload._status = 2), (payload._result = error);
}
);
-1 === payload._status && ((payload._status = 0), (payload._result = ctor));
}
if (1 === payload._status) return payload._result.default;
throw payload._result;
}
var reportGlobalError =
"function" === typeof reportError
? reportError
: function (error) {
if (
"object" === typeof window &&
"function" === typeof window.ErrorEvent
) {
var event = new window.ErrorEvent("error", {
bubbles: true,
cancelable: true,
message:
"object" === typeof error &&
null !== error &&
"string" === typeof error.message
? String(error.message)
: String(error),
error: error
});
if (!window.dispatchEvent(event)) return;
} else if (
"object" === typeof process &&
"function" === typeof process.emit
) {
process.emit("uncaughtException", error);
return;
}
console.error(error);
};
function noop() {}
react_production.Children = {
map: mapChildren,
forEach: function (children, forEachFunc, forEachContext) {
mapChildren(
children,
function () {
forEachFunc.apply(this, arguments);
},
forEachContext
);
},
count: function (children) {
var n = 0;
mapChildren(children, function () {
n++;
});
return n;
},
toArray: function (children) {
return (
mapChildren(children, function (child) {
return child;
}) || []
);
},
only: function (children) {
if (!isValidElement(children))
throw Error(
"React.Children.only expected to receive a single React element child."
);
return children;
}
};
react_production.Component = Component;
react_production.Fragment = REACT_FRAGMENT_TYPE;
react_production.Profiler = REACT_PROFILER_TYPE;
react_production.PureComponent = PureComponent;
react_production.StrictMode = REACT_STRICT_MODE_TYPE;
react_production.Suspense = REACT_SUSPENSE_TYPE;
react_production.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE =
ReactSharedInternals;
react_production.__COMPILER_RUNTIME = {
__proto__: null,
c: function (size) {
return ReactSharedInternals.H.useMemoCache(size);
}
};
react_production.cache = function (fn) {
return function () {
return fn.apply(null, arguments);
};
};
react_production.cloneElement = function (element, config, children) {
if (null === element || void 0 === element)
throw Error(
"The argument must be a React element, but you passed " + element + "."
);
var props = assign({}, element.props),
key = element.key,
owner = void 0;
if (null != config)
for (propName in (void 0 !== config.ref && (owner = void 0),
void 0 !== config.key && (key = "" + config.key),
config))
!hasOwnProperty.call(config, propName) ||
"key" === propName ||
"__self" === propName ||
"__source" === propName ||
("ref" === propName && void 0 === config.ref) ||
(props[propName] = config[propName]);
var propName = arguments.length - 2;
if (1 === propName) props.children = children;
else if (1 < propName) {
for (var childArray = Array(propName), i = 0; i < propName; i++)
childArray[i] = arguments[i + 2];
props.children = childArray;
}
return ReactElement(element.type, key, void 0, void 0, owner, props);
};
react_production.createContext = function (defaultValue) {
defaultValue = {
$$typeof: REACT_CONTEXT_TYPE,
_currentValue: defaultValue,
_currentValue2: defaultValue,
_threadCount: 0,
Provider: null,
Consumer: null
};
defaultValue.Provider = defaultValue;
defaultValue.Consumer = {
$$typeof: REACT_CONSUMER_TYPE,
_context: defaultValue
};
return defaultValue;
};
react_production.createElement = function (type, config, children) {
var propName,
props = {},
key = null;
if (null != config)
for (propName in (void 0 !== config.key && (key = "" + config.key), config))
hasOwnProperty.call(config, propName) &&
"key" !== propName &&
"__self" !== propName &&
"__source" !== propName &&
(props[propName] = config[propName]);
var childrenLength = arguments.length - 2;
if (1 === childrenLength) props.children = children;
else if (1 < childrenLength) {
for (var childArray = Array(childrenLength), i = 0; i < childrenLength; i++)
childArray[i] = arguments[i + 2];
props.children = childArray;
}
if (type && type.defaultProps)
for (propName in ((childrenLength = type.defaultProps), childrenLength))
void 0 === props[propName] &&
(props[propName] = childrenLength[propName]);
return ReactElement(type, key, void 0, void 0, null, props);
};
react_production.createRef = function () {
return { current: null };
};
react_production.forwardRef = function (render) {
return { $$typeof: REACT_FORWARD_REF_TYPE, render: render };
};
react_production.isValidElement = isValidElement;
react_production.lazy = function (ctor) {
return {
$$typeof: REACT_LAZY_TYPE,
_payload: { _status: -1, _result: ctor },
_init: lazyInitializer
};
};
react_production.memo = function (type, compare) {
return {
$$typeof: REACT_MEMO_TYPE,
type: type,
compare: void 0 === compare ? null : compare
};
};
react_production.startTransition = function (scope) {
var prevTransition = ReactSharedInternals.T,
currentTransition = {};
ReactSharedInternals.T = currentTransition;
try {
var returnValue = scope(),
onStartTransitionFinish = ReactSharedInternals.S;
null !== onStartTransitionFinish &&
onStartTransitionFinish(currentTransition, returnValue);
"object" === typeof returnValue &&
null !== returnValue &&
"function" === typeof returnValue.then &&
returnValue.then(noop, reportGlobalError);
} catch (error) {
reportGlobalError(error);
} finally {
ReactSharedInternals.T = prevTransition;
}
};
react_production.unstable_useCacheRefresh = function () {
return ReactSharedInternals.H.useCacheRefresh();
};
react_production.use = function (usable) {
return ReactSharedInternals.H.use(usable);
};
react_production.useActionState = function (action, initialState, permalink) {
return ReactSharedInternals.H.useActionState(action, initialState, permalink);
};
react_production.useCallback = function (callback, deps) {
return ReactSharedInternals.H.useCallback(callback, deps);
};
react_production.useContext = function (Context) {
return ReactSharedInternals.H.useContext(Context);
};
react_production.useDebugValue = function () {};
react_production.useDeferredValue = function (value, initialValue) {
return ReactSharedInternals.H.useDeferredValue(value, initialValue);
};
react_production.useEffect = function (create, createDeps, update) {
var dispatcher = ReactSharedInternals.H;
if ("function" === typeof update)
throw Error(
"useEffect CRUD overload is not enabled in this build of React."
);
return dispatcher.useEffect(create, createDeps);
};
react_production.useId = function () {
return ReactSharedInternals.H.useId();
};
react_production.useImperativeHandle = function (ref, create, deps) {
return ReactSharedInternals.H.useImperativeHandle(ref, create, deps);
};
react_production.useInsertionEffect = function (create, deps) {
return ReactSharedInternals.H.useInsertionEffect(create, deps);
};
react_production.useLayoutEffect = function (create, deps) {
return ReactSharedInternals.H.useLayoutEffect(create, deps);
};
react_production.useMemo = function (create, deps) {
return ReactSharedInternals.H.useMemo(create, deps);
};
react_production.useOptimistic = function (passthrough, reducer) {
return ReactSharedInternals.H.useOptimistic(passthrough, reducer);
};
react_production.useReducer = function (reducer, initialArg, init) {
return ReactSharedInternals.H.useReducer(reducer, initialArg, init);
};
react_production.useRef = function (initialValue) {
return ReactSharedInternals.H.useRef(initialValue);
};
react_production.useState = function (initialState) {
return ReactSharedInternals.H.useState(initialState);
};
react_production.useSyncExternalStore = function (
subscribe,
getSnapshot,
getServerSnapshot
) {
return ReactSharedInternals.H.useSyncExternalStore(
subscribe,
getSnapshot,
getServerSnapshot
);
};
react_production.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
react_production.version = "19.1.0";
return react_production;
}
var hasRequiredReact;
function requireReact () {
if (hasRequiredReact) return react.exports;
hasRequiredReact = 1;
{
react.exports = requireReact_production();
}
return react.exports;
}
var cjs$2 = {};
var featureBundleBoyRwN0C = {};
var cjs$1 = {};
var cjs = {};
var hasRequiredCjs$2;
function requireCjs$2 () {
if (hasRequiredCjs$2) return cjs;
hasRequiredCjs$2 = 1;
(function (exports) {
Object.defineProperty(exports, '__esModule', { value: true });
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);
}
// Adapted from array-move
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;
}
const clamp = (min, max, v) => {
if (v > max)
return max;
if (v < min)
return min;
return v;
};
function formatErrorMessage(message, errorCode) {
return errorCode
? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`
: message;
}
exports.warning = () => { };
exports.invariant = () => { };
const MotionGlobalConfig = {};
/**
* Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
*/
const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
function isObject(value) {
return typeof value === "object" && value !== null;
}
/**
* Check if the value is a zero value string like "0px" or "0%"
*/
const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
/*#__NO_SIDE_EFFECTS__*/
function memo(callback) {
let result;
return () => {
if (result === undefined)
result = callback();
return result;
};
}
/*#__NO_SIDE_EFFECTS__*/
const noop = (any) => any;
/**
* Pipe
* Compose other transformers to run linearily
* pipe(min(20), max(40))
* @param {...functions} transformers
* @return {function}
*/
const combineFunctions = (a, b) => (v) => b(a(v));
const pipe = (...transformers) => transformers.reduce(combineFunctions);
/*
Progress within given range
Given a lower limit and an upper limit, we return the progress
(expressed as a number 0-1) represented by the given value, and
limit that progress to within 0-1.
@param [number]: Lower limit
@param [number]: Upper limit
@param [number]: Value to find progress within given range
@return [number]: Progress of value within range as expressed 0-1
*/
/*#__NO_SIDE_EFFECTS__*/
const progress = (from, to, value) => {
const toFromDifference = to - from;
return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
};
class SubscriptionManager {
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) {
/**
* If there's only a single handler we can just call it without invoking a loop.
*/
this.subscriptions[0](a, b, c);
}
else {
for (let i = 0; i < numSubscriptions; i++) {
/**
* Check whether the handler exists before firing as it's possible
* the subscriptions were modified during this loop running.
*/
const handler = this.subscriptions[i];
handler && handler(a, b, c);
}
}
}
getSize() {
return this.subscriptions.length;
}
clear() {
this.subscriptions.length = 0;
}
}
/**
* Converts seconds to milliseconds
*
* @param seconds - Time in seconds.
* @return milliseconds - Converted time in milliseconds.
*/
/*#__NO_SIDE_EFFECTS__*/
const secondsToMilliseconds = (seconds) => seconds * 1000;
/*#__NO_SIDE_EFFECTS__*/
const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
/*
Convert velocity into velocity per second
@param [number]: Unit per frame
@param [number]: Frame duration in ms
*/
function velocityPerSecond(velocity, frameDuration) {
return frameDuration ? velocity * (1000 / frameDuration) : 0;
}
const warned = new Set();
function hasWarned(message) {
return warned.has(message);
}
function warnOnce(condition, message, errorCode) {
if (condition || warned.has(message))
return;
console.warn(formatErrorMessage(message, errorCode));
warned.add(message);
}
const wrap = (min, max, v) => {
const rangeSize = max - min;
return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
};
/*
Bezier function generator
This has been modified from Gaëtan Renaudeau's BezierEasing
https://github.com/gre/bezier-easing/blob/master/src/index.js
https://github.com/gre/bezier-easing/blob/master/LICENSE
I've removed the newtonRaphsonIterate algo because in benchmarking it
wasn't noticeably faster than binarySubdivision, indeed removing it
usually improved times, depending on the curve.
I also removed the lookup table, as for the added bundle size and loop we're
only cutting ~4 or so subdivision iterations. I bumped the max iterations up
to 12 to compensate and this still tended to be faster for no perceivable
loss in accuracy.
Usage
const easeOut = cubicBezier(.17,.67,.83,.67);
const x = easeOut(0.5); // returns 0.627...
*/
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
t;
const subdivisionPrecision = 0.0000001;
const subdivisionMaxIterations = 12;
function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
let currentX;
let currentT;
let i = 0;
do {
currentT = lowerBound + (upperBound - lowerBound) / 2.0;
currentX = calcBezier(currentT, mX1, mX2) - x;
if (currentX > 0.0) {
upperBound = currentT;
}
else {
lowerBound = currentT;
}
} while (Math.abs(currentX) > subdivisionPrecision &&
++i < subdivisionMaxIterations);
return currentT;
}
function cubicBezier(mX1, mY1, mX2, mY2) {
// If this is a linear gradient, return linear easing
if (mX1 === mY1 && mX2 === mY2)
return noop;
const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
// If animation is at start/end, return t without easing
return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
}
// Accepts an easing function and returns a new one that outputs mirrored values for
// the second half of the animation. Turns easeIn into easeInOut.
const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
// Accepts an easing function and returns a new one that outputs reversed values.
// Turns easeIn into easeOut.
const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
const backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);
const backIn = /*@__PURE__*/ reverseEasing(backOut);
const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
const circIn = (p) => 1 - Math.sin(Math.acos(p));
const circOut = reverseEasing(circIn);
const circInOut = mirrorEasing(circIn);
const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
const easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);
function steps(numSteps, direction = "end") {
return (progress) => {
progress =
direction === "end"
? Math.min(progress, 0.999)
: Math.max(progress, 0.001);
const expanded = progress * numSteps;
const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
return clamp(0, 1, rounded / numSteps);
};
}
const isEasingArray = (ease) => {
return Array.isArray(ease) && typeof ease[0] !== "number";
};
function getEasingForSegment(easing, i) {
return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
}
const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
const easingLookup = {
linear: noop,
easeIn,
easeInOut,
easeOut,
circIn,
circInOut,
circOut,
backIn,
backInOut,
backOut,
anticipate,
};
const isValidEasing = (easing) => {
return typeof easing === "string";
};
const easingDefinitionToFunction = (definition) => {
if (isBezierDefinition(definition)) {
// If cubic bezier definition, create bezier curve
exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`, "cubic-bezier-length");
const [x1, y1, x2, y2] = definition;
return cubicBezier(x1, y1, x2, y2);
}
else if (isValidEasing(definition)) {
// Else lookup from table
exports.invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`, "invalid-easing-type");
return easingLookup[definition];
}
return definition;
};
exports.MotionGlobalConfig = MotionGlobalConfig;
exports.SubscriptionManager = SubscriptionManager;
exports.addUniqueItem = addUniqueItem;
exports.anticipate = anticipate;
exports.backIn = backIn;
exports.backInOut = backInOut;
exports.backOut = backOut;
exports.circIn = circIn;
exports.circInOut = circInOut;
exports.circOut = circOut;
exports.clamp = clamp;
exports.cubicBezier = cubicBezier;
exports.easeIn = easeIn;
exports.easeInOut = easeInOut;
exports.easeOut = easeOut;
exports.easingDefinitionToFunction = easingDefinitionToFunction;
exports.getEasingForSegment = getEasingForSegment;
exports.hasWarned = hasWarned;
exports.isBezierDefinition = isBezierDefinition;
exports.isEasingArray = isEasingArray;
exports.isNumericalString = isNumericalString;
exports.isObject = isObject;
exports.isZeroValueString = isZeroValueString;
exports.memo = memo;
exports.millisecondsToSeconds = millisecondsToSeconds;
exports.mirrorEasing = mirrorEasing;
exports.moveItem = moveItem;
exports.noop = noop;
exports.pipe = pipe;
exports.progress = progress;
exports.removeItem = removeItem;
exports.reverseEasing = reverseEasing;
exports.secondsToMilliseconds = secondsToMilliseconds;
exports.steps = steps;
exports.velocityPerSecond = velocityPerSecond;
exports.warnOnce = warnOnce;
exports.wrap = wrap;
} (cjs));
return cjs;
}
var hasRequiredCjs$1;
function requireCjs$1 () {
if (hasRequiredCjs$1) return cjs$1;
hasRequiredCjs$1 = 1;
Object.defineProperty(cjs$1, '__esModule', { value: true });
var motionUtils = /*@__PURE__*/ requireCjs$2();
const stepsOrder = [
"setup", // Compute
"read", // Read
"resolveKeyframes", // Write/Read/Write/Read
"preUpdate", // Compute
"update", // Compute
"preRender", // Compute
"render", // Write
"postRender", // Compute
];
const statsBuffer = {
value: null,
addProjectionMetrics: null,
};
function createRenderStep(runNextFrame, stepName) {
/**
* We create and reuse two queues, one to queue jobs for the current frame
* and one for the next. We reuse to avoid triggering GC after x frames.
*/
let thisFrame = new Set();
let nextFrame = new Set();
/**
* Track whether we're currently processing jobs in this step. This way
* we can decide whether to schedule new jobs for this frame or next.
*/
let isProcessing = false;
let flushNextFrame = false;
/**
* A set of processes which were marked keepAlive when scheduled.
*/
const toKeepAlive = new WeakSet();
let latestFrameData = {
delta: 0.0,
timestamp: 0.0,
isProcessing: false,
};
let numCalls = 0;
function triggerCallback(callback) {
if (toKeepAlive.has(callback)) {
step.schedule(callback);
runNextFrame();
}
numCalls++;
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: (frameData) => {
latestFrameData = frameData;
/**
* If we're already processing we've probably been triggered by a flushSync
* inside an existing process. Instead of executing, mark flushNextFrame
* as true and ensure we flush the following frame at the end of this one.
*/
if (isProcessing) {
flushNextFrame = true;
return;
}
isProcessing = true;
[thisFrame, nextFrame] = [nextFrame, thisFrame];
// Execute this frame
thisFrame.forEach(triggerCallback);
/**
* If we're recording stats then
*/
if (stepName && statsBuffer.value) {
statsBuffer.value.frameloop[stepName].push(numCalls);
}
numCalls = 0;
// Clear the frame so no callbacks remain. This is to avoid
// memory leaks should this render step not run for a while.
thisFrame.clear();
isProcessing = false;
if (flushNextFrame) {
flushNextFrame = false;
step.process(frameData);
}
},
};
return step;
}
const maxElapsed = 40;
function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
let runNextFrame = false;
let useDefaultElapsed = true;
const state = {
delta: 0.0,
timestamp: 0.0,
isProcessing: false,
};
const flagRunNextFrame = () => (runNextFrame = true);
const steps = stepsOrder.reduce((acc, key) => {
acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
return acc;
}, {});
const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
const processBatch = () => {
const timestamp = motionUtils.MotionGlobalConfig.useManualTiming
? state.timestamp
: performance.now();
runNextFrame = false;
if (!motionUtils.MotionGlobalConfig.useManualTiming) {
state.delta = useDefaultElapsed
? 1000 / 60
: Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
}
state.timestamp = timestamp;
state.isProcessing = true;
// Unrolled render loop for better per-frame performance
setup.process(state);
read.process(state);
resolveKeyframes.process(state);
preUpdate.process(state);
update.process(state);
preRender.process(state);
render.process(state);
postRender.process(state);
state.isProcessing = false;
if (runNextFrame && allowKeepAlive) {
useDefaultElapsed = false;
scheduleNextBatch(processBatch);
}
};
const wake = () => {
runNextFrame = true;
useDefaultElapsed = true;
if (!state.isProcessing) {
scheduleNextBatch(processBatch);
}
};
const schedule = stepsOrder.reduce((acc, key) => {
const step = steps[key];
acc[key] = (process, keepAlive = false, immediate = false) => {
if (!runNextFrame)
wake();
return step.schedule(process, keepAlive, immediate);
};
return acc;
}, {});
const cancel = (process) => {
for (let i = 0; i < stepsOrder.length; i++) {
steps[stepsOrder[i]].cancel(process);
}
};
return { schedule, cancel, state, steps };
}
const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : motionUtils.noop, true);
let now;
function clearTime() {
now = undefined;
}
/**
* An eventloop-synchronous alternative to performance.now().
*
* Ensures that time measurements remain consistent within a synchronous context.
* Usually calling performance.now() twice within the same synchronous context
* will return different values which isn't useful for animations when we're usually
* trying to sync animations to the same frame.
*/
const time = {
now: () => {
if (now === undefined) {
time.set(frameData.isProcessing || motionUtils.MotionGlobalConfig.useManualTiming
? frameData.timestamp
: performance.now());
}
return now;
},
set: (newTime) => {
now = newTime;
queueMicrotask(clearTime);
},
};
const activeAnimations = {
layout: 0,
mainThread: 0,
waapi: 0,
};
const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
const isCSSVariableName =
/*@__PURE__*/ checkStringStartsWith("--");
const startsAsVariableToken =
/*@__PURE__*/ checkStringStartsWith("var(--");
const isCSSVariableToken = (value) => {
const startsWithToken = startsAsVariableToken(value);
if (!startsWithToken)
return false;
// Ensure any comments are stripped from the value as this can harm performance of the regex.
return singleCssVariableRegex.test(value.split("/*")[0].trim());
};
const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
const number = {
test: (v) => typeof v === "number",
parse: parseFloat,
transform: (v) => v,
};
const alpha = {
...number,
transform: (v) => motionUtils.clamp(0, 1, v),
};
const scale = {
...number,
default: 1,
};
// If this number is a decimal, make it just five decimal places
// to avoid exponents
const sanitize = (v) => Math.round(v * 100000) / 100000;
const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
function isNullish(v) {
return v == null;
}
const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
/**
* Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
* but false if a number or multiple colors
*/
const isColorString = (type, testProp) => (v) => {
return Boolean((typeof v === "string" &&
singleColorRegex.test(v) &&
v.startsWith(type)) ||
(testProp &&
!isNullish(v) &&
Object.prototype.hasOwnProperty.call(v, testProp)));
};
const splitColor = (aName, bName, cName) => (v) => {
if (typeof v !== "string")
return v;
const [a, b, c, alpha] = v.match(floatRegex);
return {
[aName]: parseFloat(a),
[bName]: parseFloat(b),
[cName]: parseFloat(c),
alpha: alpha !== undefined ? parseFloat(alpha) : 1,
};
};
const clampRgbUnit = (v) => motionUtils.clamp(0, 255, v);
const rgbUnit = {
...number,
transform: (v) => Math.round(clampRgbUnit(v)),
};
const rgba = {
test: /*@__PURE__*/ isColorString("rgb", "red"),
parse: /*@__PURE__*/ 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)) +
")",
};
function parseHex(v) {
let r = "";
let g = "";
let b = "";
let a = "";
// If we have 6 characters, ie #FF0000
if (v.length > 5) {
r = v.substring(1, 3);
g = v.substring(3, 5);
b = v.substring(5, 7);
a = v.substring(7, 9);
// Or we have 3 characters, ie #F00
}
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,
};
}
const hex = {
test: /*@__PURE__*/ isColorString("#"),
parse: parseHex,
transform: rgba.transform,
};
/*#__NO_SIDE_EFFECTS__*/
const createUnitType = (unit) => ({
test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
parse: parseFloat,
transform: (v) => `${v}${unit}`,
});
const degrees = /*@__PURE__*/ createUnitType("deg");
const percent = /*@__PURE__*/ createUnitType("%");
const px = /*@__PURE__*/ createUnitType("px");
const vh = /*@__PURE__*/ createUnitType("vh");
const vw = /*@__PURE__*/ createUnitType("vw");
const progressPercentage = /*@__PURE__*/ (() => ({
...percent,
parse: (v) => percent.parse(v) / 100,
transform: (v) => percent.transform(v * 100),
}))();
const hsla = {
test: /*@__PURE__*/ isColorString("hsl", "hue"),
parse: /*@__PURE__*/ 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)) +
")");
},
};
const 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);
},
getAnimatableNone: (v) => {
const parsed = color.parse(v);
parsed.alpha = 0;
return color.transform(parsed);
},
};
const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
function test(v) {
return (isNaN(v) &&
typeof v === "string" &&
(v.match(floatRegex)?.length || 0) +
(v.match(colorRegex)?.length || 0) >
0);
}
const NUMBER_TOKEN = "number";
const COLOR_TOKEN = "color";
const VAR_TOKEN = "var";
const VAR_FUNCTION_TOKEN = "var(";
const SPLIT_TOKEN = "${}";
// this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`
const 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] !== undefined) {
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;
};
}
const convertNumbersToZero = (v) => typeof v === "number" ? 0 : color.test(v) ? color.getAnimatableNone(v) : v;
function getAnimatableNone$1(v) {
const parsed = parseComplexValue(v);
const transformer = createTransformer(v);
return transformer(parsed.map(convertNumbersToZero));
}
const complex = {
test,
parse: parseComplexValue,
createTransformer,
getAnimatableNone: getAnimatableNone$1,
};
// Adapted from https://gist.github.com/mjackson/5311256
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 }) {
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,
};
}
function mixImmediate(a, b) {
return (p) => (p > 0 ? b : a);
}
/*
Value in range from progress
Given a lower limit and an upper limit, we return the value within
that range as expressed by progress (usually a number from 0 to 1)
So progress = 0.5 would change
from -------- to
to
from ---- to
E.g. from = 10, to = 20, progress = 0.5 => 15
@param [number]: Lower limit of range
@param [number]: Upper limit of range
@param [number]: The progress between lower and upper limits expressed 0-1
@return [number]: Value as calculated from progress within range (not limited within range)
*/
const mixNumber$1 = (from, to, progress) => {
return from + (to - from) * progress;
};
// Linear color space blending
// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
// Demonstrated http://codepen.io/osublake/pen/xGVVaN
const mixLinearColor = (from, to, v) => {
const fromExpo = from * from;
const expo = v * (to * to - fromExpo) + fromExpo;
return expo < 0 ? 0 : Math.sqrt(expo);
};
const colorTypes = [hex, rgba, hsla];
const getColorType = (v) => colorTypes.find((type) => type.test(v));
function asRGBA(color) {
const type = getColorType(color);
motionUtils.warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable");
if (!Boolean(type))
return false;
let model = type.parse(color);
if (type === hsla) {
// TODO Remove this cast - needed since Motion's stricter typing
model = hslaToRgba(model);
}
return model;
}
const 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$1(fromRGBA.alpha, toRGBA.alpha, v);
return rgba.transform(blended);
};
};
const invisibleValues = new Set(["none", "hidden"]);
/**
* Returns a function that, when provided a progress value between 0 and 1,
* will return the "none" or "hidden" string only when the progress is that of
* the origin or target.
*/
function mixVisibility(origin, target) {
if (invisibleValues.has(origin)) {
return (p) => (p <= 0 ? origin : target);
}
else {
return (p) => (p >= 1 ? target : origin);
}
}
function mixNumber(a, b) {
return (p) => mixNumber$1(a, b, p);
}
function getMixer(a) {
if (typeof a === "number") {
return mixNumber;
}
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 blendValu