pulsewidget
Version:
A beautiful, customizable chatbot widget for React applications with full TypeScript support and smooth animations
1,517 lines • 382 kB
JavaScript
import { jsx as R, Fragment as Ho, jsxs as xt } from "react/jsx-runtime";
import * as Cn from "react";
import { createContext as be, useRef as Ft, useLayoutEffect as gu, useEffect as Pn, useId as _i, useContext as ot, useInsertionEffect as $o, useMemo as ee, useCallback as mn, Children as yu, isValidElement as xu, useState as Qt, Fragment as Wo, createElement as gn, forwardRef as Ui, Component as bu } from "react";
const Hi = be({});
function $i(t) {
const e = Ft(null);
return e.current === null && (e.current = t()), e.current;
}
const Wi = typeof window < "u", qo = Wi ? gu : Pn, An = /* @__PURE__ */ be(null);
function qi(t, e) {
t.indexOf(e) === -1 && t.push(e);
}
function Ki(t, e) {
const n = t.indexOf(e);
n > -1 && t.splice(n, 1);
}
const Ot = (t, e, n) => n > e ? e : n < t ? t : n;
function ui(t, e) {
return e ? `${t}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${e}` : t;
}
let we = () => {
}, Nt = () => {
};
process.env.NODE_ENV !== "production" && (we = (t, e, n) => {
!t && typeof console < "u" && console.warn(ui(e, n));
}, Nt = (t, e, n) => {
if (!t)
throw new Error(ui(e, n));
});
const Bt = {}, Ko = (t) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(t);
function Xo(t) {
return typeof t == "object" && t !== null;
}
const Yo = (t) => /^0[^.\s]+$/u.test(t);
// @__NO_SIDE_EFFECTS__
function Xi(t) {
let e;
return () => (e === void 0 && (e = t()), e);
}
const St = /* @__NO_SIDE_EFFECTS__ */ (t) => t, wu = (t, e) => (n) => e(t(n)), Ye = (...t) => t.reduce(wu), Ue = /* @__NO_SIDE_EFFECTS__ */ (t, e, n) => {
const i = e - t;
return i === 0 ? 1 : (n - t) / i;
};
class Yi {
constructor() {
this.subscriptions = [];
}
add(e) {
return qi(this.subscriptions, e), () => Ki(this.subscriptions, e);
}
notify(e, n, i) {
const r = this.subscriptions.length;
if (r)
if (r === 1)
this.subscriptions[0](e, n, i);
else
for (let o = 0; o < r; o++) {
const s = this.subscriptions[o];
s && s(e, n, i);
}
}
getSize() {
return this.subscriptions.length;
}
clear() {
this.subscriptions.length = 0;
}
}
const At = /* @__NO_SIDE_EFFECTS__ */ (t) => t * 1e3, vt = /* @__NO_SIDE_EFFECTS__ */ (t) => t / 1e3;
function Go(t, e) {
return e ? t * (1e3 / e) : 0;
}
const Ur = /* @__PURE__ */ new Set();
function Gi(t, e, n) {
t || Ur.has(e) || (console.warn(ui(e, n)), Ur.add(e));
}
const Zo = (t, e, n) => (((1 - 3 * n + 3 * e) * t + (3 * n - 6 * e)) * t + 3 * e) * t, ku = 1e-7, vu = 12;
function Su(t, e, n, i, r) {
let o, s, a = 0;
do
s = e + (n - e) / 2, o = Zo(s, i, r) - t, o > 0 ? n = s : e = s;
while (Math.abs(o) > ku && ++a < vu);
return s;
}
function Ge(t, e, n, i) {
if (t === e && n === i)
return St;
const r = (o) => Su(o, 0, 1, t, n);
return (o) => o === 0 || o === 1 ? o : Zo(r(o), e, i);
}
const Qo = (t) => (e) => e <= 0.5 ? t(2 * e) / 2 : (2 - t(2 * (1 - e))) / 2, Jo = (t) => (e) => 1 - t(1 - e), ta = /* @__PURE__ */ Ge(0.33, 1.53, 0.69, 0.99), Zi = /* @__PURE__ */ Jo(ta), ea = /* @__PURE__ */ Qo(Zi), na = (t) => (t *= 2) < 1 ? 0.5 * Zi(t) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))), Qi = (t) => 1 - Math.sin(Math.acos(t)), ia = Jo(Qi), ra = Qo(Qi), Tu = /* @__PURE__ */ Ge(0.42, 0, 1, 1), Cu = /* @__PURE__ */ Ge(0, 0, 0.58, 1), sa = /* @__PURE__ */ Ge(0.42, 0, 0.58, 1), Pu = (t) => Array.isArray(t) && typeof t[0] != "number", oa = (t) => Array.isArray(t) && typeof t[0] == "number", Hr = {
linear: St,
easeIn: Tu,
easeInOut: sa,
easeOut: Cu,
circIn: Qi,
circInOut: ra,
circOut: ia,
backIn: Zi,
backInOut: ea,
backOut: ta,
anticipate: na
}, Au = (t) => typeof t == "string", $r = (t) => {
if (oa(t)) {
Nt(t.length === 4, "Cubic bezier arrays must contain four numerical values.", "cubic-bezier-length");
const [e, n, i, r] = t;
return Ge(e, n, i, r);
} else if (Au(t))
return Nt(Hr[t] !== void 0, `Invalid easing type '${t}'`, "invalid-easing-type"), Hr[t];
return t;
}, nn = [
"setup",
// Compute
"read",
// Read
"resolveKeyframes",
// Write/Read/Write/Read
"preUpdate",
// Compute
"update",
// Compute
"preRender",
// Compute
"render",
// Write
"postRender"
// Compute
];
function Eu(t, e) {
let n = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), r = !1, o = !1;
const s = /* @__PURE__ */ new WeakSet();
let a = {
delta: 0,
timestamp: 0,
isProcessing: !1
};
function u(l) {
s.has(l) && (c.schedule(l), t()), l(a);
}
const c = {
/**
* Schedule a process to run on the next frame.
*/
schedule: (l, h = !1, p = !1) => {
const y = p && r ? n : i;
return h && s.add(l), y.has(l) || y.add(l), l;
},
/**
* Cancel the provided callback from running on the next frame.
*/
cancel: (l) => {
i.delete(l), s.delete(l);
},
/**
* Execute all schedule callbacks.
*/
process: (l) => {
if (a = l, r) {
o = !0;
return;
}
r = !0, [n, i] = [i, n], n.forEach(u), n.clear(), r = !1, o && (o = !1, c.process(l));
}
};
return c;
}
const Du = 40;
function aa(t, e) {
let n = !1, i = !0;
const r = {
delta: 0,
timestamp: 0,
isProcessing: !1
}, o = () => n = !0, s = nn.reduce((k, D) => (k[D] = Eu(o), k), {}), { setup: a, read: u, resolveKeyframes: c, preUpdate: l, update: h, preRender: p, render: f, postRender: y } = s, x = () => {
const k = Bt.useManualTiming ? r.timestamp : performance.now();
n = !1, Bt.useManualTiming || (r.delta = i ? 1e3 / 60 : Math.max(Math.min(k - r.timestamp, Du), 1)), r.timestamp = k, r.isProcessing = !0, a.process(r), u.process(r), c.process(r), l.process(r), h.process(r), p.process(r), f.process(r), y.process(r), r.isProcessing = !1, n && e && (i = !1, t(x));
}, w = () => {
n = !0, i = !0, r.isProcessing || t(x);
};
return { schedule: nn.reduce((k, D) => {
const C = s[D];
return k[D] = (b, I = !1, E = !1) => (n || w(), C.schedule(b, I, E)), k;
}, {}), cancel: (k) => {
for (let D = 0; D < nn.length; D++)
s[nn[D]].cancel(k);
}, state: r, steps: s };
}
const { schedule: G, cancel: Ut, state: rt, steps: Fn } = /* @__PURE__ */ aa(typeof requestAnimationFrame < "u" ? requestAnimationFrame : St, !0);
let cn;
function Iu() {
cn = void 0;
}
const ht = {
now: () => (cn === void 0 && ht.set(rt.isProcessing || Bt.useManualTiming ? rt.timestamp : performance.now()), cn),
set: (t) => {
cn = t, queueMicrotask(Iu);
}
}, la = (t) => (e) => typeof e == "string" && e.startsWith(t), Ji = /* @__PURE__ */ la("--"), Mu = /* @__PURE__ */ la("var(--"), tr = (t) => Mu(t) ? Lu.test(t.split("/*")[0].trim()) : !1, Lu = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, ke = {
test: (t) => typeof t == "number",
parse: parseFloat,
transform: (t) => t
}, He = {
...ke,
transform: (t) => Ot(0, 1, t)
}, rn = {
...ke,
default: 1
}, Fe = (t) => Math.round(t * 1e5) / 1e5, er = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
function Vu(t) {
return t == null;
}
const Ru = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu, nr = (t, e) => (n) => !!(typeof n == "string" && Ru.test(n) && n.startsWith(t) || e && !Vu(n) && Object.prototype.hasOwnProperty.call(n, e)), ua = (t, e, n) => (i) => {
if (typeof i != "string")
return i;
const [r, o, s, a] = i.match(er);
return {
[t]: parseFloat(r),
[e]: parseFloat(o),
[n]: parseFloat(s),
alpha: a !== void 0 ? parseFloat(a) : 1
};
}, Fu = (t) => Ot(0, 255, t), On = {
...ke,
transform: (t) => Math.round(Fu(t))
}, Gt = {
test: /* @__PURE__ */ nr("rgb", "red"),
parse: /* @__PURE__ */ ua("red", "green", "blue"),
transform: ({ red: t, green: e, blue: n, alpha: i = 1 }) => "rgba(" + On.transform(t) + ", " + On.transform(e) + ", " + On.transform(n) + ", " + Fe(He.transform(i)) + ")"
};
function Ou(t) {
let e = "", n = "", i = "", r = "";
return t.length > 5 ? (e = t.substring(1, 3), n = t.substring(3, 5), i = t.substring(5, 7), r = t.substring(7, 9)) : (e = t.substring(1, 2), n = t.substring(2, 3), i = t.substring(3, 4), r = t.substring(4, 5), e += e, n += n, i += i, r += r), {
red: parseInt(e, 16),
green: parseInt(n, 16),
blue: parseInt(i, 16),
alpha: r ? parseInt(r, 16) / 255 : 1
};
}
const ci = {
test: /* @__PURE__ */ nr("#"),
parse: Ou,
transform: Gt.transform
}, Ze = /* @__NO_SIDE_EFFECTS__ */ (t) => ({
test: (e) => typeof e == "string" && e.endsWith(t) && e.split(" ").length === 1,
parse: parseFloat,
transform: (e) => `${e}${t}`
}), _t = /* @__PURE__ */ Ze("deg"), It = /* @__PURE__ */ Ze("%"), N = /* @__PURE__ */ Ze("px"), Nu = /* @__PURE__ */ Ze("vh"), Bu = /* @__PURE__ */ Ze("vw"), Wr = {
...It,
parse: (t) => It.parse(t) / 100,
transform: (t) => It.transform(t * 100)
}, le = {
test: /* @__PURE__ */ nr("hsl", "hue"),
parse: /* @__PURE__ */ ua("hue", "saturation", "lightness"),
transform: ({ hue: t, saturation: e, lightness: n, alpha: i = 1 }) => "hsla(" + Math.round(t) + ", " + It.transform(Fe(e)) + ", " + It.transform(Fe(n)) + ", " + Fe(He.transform(i)) + ")"
}, et = {
test: (t) => Gt.test(t) || ci.test(t) || le.test(t),
parse: (t) => Gt.test(t) ? Gt.parse(t) : le.test(t) ? le.parse(t) : ci.parse(t),
transform: (t) => typeof t == "string" ? t : t.hasOwnProperty("red") ? Gt.transform(t) : le.transform(t),
getAnimatableNone: (t) => {
const e = et.parse(t);
return e.alpha = 0, et.transform(e);
}
}, zu = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
function ju(t) {
var e, n;
return isNaN(t) && typeof t == "string" && (((e = t.match(er)) == null ? void 0 : e.length) || 0) + (((n = t.match(zu)) == null ? void 0 : n.length) || 0) > 0;
}
const ca = "number", ha = "color", _u = "var", Uu = "var(", qr = "${}", Hu = /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 $e(t) {
const e = t.toString(), n = [], i = {
color: [],
number: [],
var: []
}, r = [];
let o = 0;
const a = e.replace(Hu, (u) => (et.test(u) ? (i.color.push(o), r.push(ha), n.push(et.parse(u))) : u.startsWith(Uu) ? (i.var.push(o), r.push(_u), n.push(u)) : (i.number.push(o), r.push(ca), n.push(parseFloat(u))), ++o, qr)).split(qr);
return { values: n, split: a, indexes: i, types: r };
}
function fa(t) {
return $e(t).values;
}
function pa(t) {
const { split: e, types: n } = $e(t), i = e.length;
return (r) => {
let o = "";
for (let s = 0; s < i; s++)
if (o += e[s], r[s] !== void 0) {
const a = n[s];
a === ca ? o += Fe(r[s]) : a === ha ? o += et.transform(r[s]) : o += r[s];
}
return o;
};
}
const $u = (t) => typeof t == "number" ? 0 : et.test(t) ? et.getAnimatableNone(t) : t;
function Wu(t) {
const e = fa(t);
return pa(t)(e.map($u));
}
const Ht = {
test: ju,
parse: fa,
createTransformer: pa,
getAnimatableNone: Wu
};
function Nn(t, e, n) {
return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? t + (e - t) * 6 * n : n < 1 / 2 ? e : n < 2 / 3 ? t + (e - t) * (2 / 3 - n) * 6 : t;
}
function qu({ hue: t, saturation: e, lightness: n, alpha: i }) {
t /= 360, e /= 100, n /= 100;
let r = 0, o = 0, s = 0;
if (!e)
r = o = s = n;
else {
const a = n < 0.5 ? n * (1 + e) : n + e - n * e, u = 2 * n - a;
r = Nn(u, a, t + 1 / 3), o = Nn(u, a, t), s = Nn(u, a, t - 1 / 3);
}
return {
red: Math.round(r * 255),
green: Math.round(o * 255),
blue: Math.round(s * 255),
alpha: i
};
}
function yn(t, e) {
return (n) => n > 0 ? e : t;
}
const Q = (t, e, n) => t + (e - t) * n, Bn = (t, e, n) => {
const i = t * t, r = n * (e * e - i) + i;
return r < 0 ? 0 : Math.sqrt(r);
}, Ku = [ci, Gt, le], Xu = (t) => Ku.find((e) => e.test(t));
function Kr(t) {
const e = Xu(t);
if (we(!!e, `'${t}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable"), !e)
return !1;
let n = e.parse(t);
return e === le && (n = qu(n)), n;
}
const Xr = (t, e) => {
const n = Kr(t), i = Kr(e);
if (!n || !i)
return yn(t, e);
const r = { ...n };
return (o) => (r.red = Bn(n.red, i.red, o), r.green = Bn(n.green, i.green, o), r.blue = Bn(n.blue, i.blue, o), r.alpha = Q(n.alpha, i.alpha, o), Gt.transform(r));
}, hi = /* @__PURE__ */ new Set(["none", "hidden"]);
function Yu(t, e) {
return hi.has(t) ? (n) => n <= 0 ? t : e : (n) => n >= 1 ? e : t;
}
function Gu(t, e) {
return (n) => Q(t, e, n);
}
function ir(t) {
return typeof t == "number" ? Gu : typeof t == "string" ? tr(t) ? yn : et.test(t) ? Xr : Ju : Array.isArray(t) ? da : typeof t == "object" ? et.test(t) ? Xr : Zu : yn;
}
function da(t, e) {
const n = [...t], i = n.length, r = t.map((o, s) => ir(o)(o, e[s]));
return (o) => {
for (let s = 0; s < i; s++)
n[s] = r[s](o);
return n;
};
}
function Zu(t, e) {
const n = { ...t, ...e }, i = {};
for (const r in n)
t[r] !== void 0 && e[r] !== void 0 && (i[r] = ir(t[r])(t[r], e[r]));
return (r) => {
for (const o in i)
n[o] = i[o](r);
return n;
};
}
function Qu(t, e) {
const n = [], i = { color: 0, var: 0, number: 0 };
for (let r = 0; r < e.values.length; r++) {
const o = e.types[r], s = t.indexes[o][i[o]], a = t.values[s] ?? 0;
n[r] = a, i[o]++;
}
return n;
}
const Ju = (t, e) => {
const n = Ht.createTransformer(e), i = $e(t), r = $e(e);
return i.indexes.var.length === r.indexes.var.length && i.indexes.color.length === r.indexes.color.length && i.indexes.number.length >= r.indexes.number.length ? hi.has(t) && !r.values.length || hi.has(e) && !i.values.length ? Yu(t, e) : Ye(da(Qu(i, r), r.values), n) : (we(!0, `Complex values '${t}' and '${e}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different"), yn(t, e));
};
function ma(t, e, n) {
return typeof t == "number" && typeof e == "number" && typeof n == "number" ? Q(t, e, n) : ir(t)(t, e);
}
const tc = (t) => {
const e = ({ timestamp: n }) => t(n);
return {
start: (n = !0) => G.update(e, n),
stop: () => Ut(e),
/**
* If we're processing this frame we can use the
* framelocked timestamp to keep things in sync.
*/
now: () => rt.isProcessing ? rt.timestamp : ht.now()
};
}, ga = (t, e, n = 10) => {
let i = "";
const r = Math.max(Math.round(e / n), 2);
for (let o = 0; o < r; o++)
i += Math.round(t(o / (r - 1)) * 1e4) / 1e4 + ", ";
return `linear(${i.substring(0, i.length - 2)})`;
}, xn = 2e4;
function rr(t) {
let e = 0;
const n = 50;
let i = t.next(e);
for (; !i.done && e < xn; )
e += n, i = t.next(e);
return e >= xn ? 1 / 0 : e;
}
function ec(t, e = 100, n) {
const i = n({ ...t, keyframes: [0, e] }), r = Math.min(rr(i), xn);
return {
type: "keyframes",
ease: (o) => i.next(r * o).value / e,
duration: /* @__PURE__ */ vt(r)
};
}
const nc = 5;
function ya(t, e, n) {
const i = Math.max(e - nc, 0);
return Go(n - t(i), e - i);
}
const Z = {
// 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
}, zn = 1e-3;
function ic({ duration: t = Z.duration, bounce: e = Z.bounce, velocity: n = Z.velocity, mass: i = Z.mass }) {
let r, o;
we(t <= /* @__PURE__ */ At(Z.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
let s = 1 - e;
s = Ot(Z.minDamping, Z.maxDamping, s), t = Ot(Z.minDuration, Z.maxDuration, /* @__PURE__ */ vt(t)), s < 1 ? (r = (c) => {
const l = c * s, h = l * t, p = l - n, f = fi(c, s), y = Math.exp(-h);
return zn - p / f * y;
}, o = (c) => {
const h = c * s * t, p = h * n + n, f = Math.pow(s, 2) * Math.pow(c, 2) * t, y = Math.exp(-h), x = fi(Math.pow(c, 2), s);
return (-r(c) + zn > 0 ? -1 : 1) * ((p - f) * y) / x;
}) : (r = (c) => {
const l = Math.exp(-c * t), h = (c - n) * t + 1;
return -zn + l * h;
}, o = (c) => {
const l = Math.exp(-c * t), h = (n - c) * (t * t);
return l * h;
});
const a = 5 / t, u = sc(r, o, a);
if (t = /* @__PURE__ */ At(t), isNaN(u))
return {
stiffness: Z.stiffness,
damping: Z.damping,
duration: t
};
{
const c = Math.pow(u, 2) * i;
return {
stiffness: c,
damping: s * 2 * Math.sqrt(i * c),
duration: t
};
}
}
const rc = 12;
function sc(t, e, n) {
let i = n;
for (let r = 1; r < rc; r++)
i = i - t(i) / e(i);
return i;
}
function fi(t, e) {
return t * Math.sqrt(1 - e * e);
}
const oc = ["duration", "bounce"], ac = ["stiffness", "damping", "mass"];
function Yr(t, e) {
return e.some((n) => t[n] !== void 0);
}
function lc(t) {
let e = {
velocity: Z.velocity,
stiffness: Z.stiffness,
damping: Z.damping,
mass: Z.mass,
isResolvedFromDuration: !1,
...t
};
if (!Yr(t, ac) && Yr(t, oc))
if (t.visualDuration) {
const n = t.visualDuration, i = 2 * Math.PI / (n * 1.2), r = i * i, o = 2 * Ot(0.05, 1, 1 - (t.bounce || 0)) * Math.sqrt(r);
e = {
...e,
mass: Z.mass,
stiffness: r,
damping: o
};
} else {
const n = ic(t);
e = {
...e,
...n,
mass: Z.mass
}, e.isResolvedFromDuration = !0;
}
return e;
}
function bn(t = Z.visualDuration, e = Z.bounce) {
const n = typeof t != "object" ? {
visualDuration: t,
keyframes: [0, 1],
bounce: e
} : t;
let { restSpeed: i, restDelta: r } = n;
const o = n.keyframes[0], s = n.keyframes[n.keyframes.length - 1], a = { done: !1, value: o }, { stiffness: u, damping: c, mass: l, duration: h, velocity: p, isResolvedFromDuration: f } = lc({
...n,
velocity: -/* @__PURE__ */ vt(n.velocity || 0)
}), y = p || 0, x = c / (2 * Math.sqrt(u * l)), w = s - o, g = /* @__PURE__ */ vt(Math.sqrt(u / l)), S = Math.abs(w) < 5;
i || (i = S ? Z.restSpeed.granular : Z.restSpeed.default), r || (r = S ? Z.restDelta.granular : Z.restDelta.default);
let k;
if (x < 1) {
const C = fi(g, x);
k = (b) => {
const I = Math.exp(-x * g * b);
return s - I * ((y + x * g * w) / C * Math.sin(C * b) + w * Math.cos(C * b));
};
} else if (x === 1)
k = (C) => s - Math.exp(-g * C) * (w + (y + g * w) * C);
else {
const C = g * Math.sqrt(x * x - 1);
k = (b) => {
const I = Math.exp(-x * g * b), E = Math.min(C * b, 300);
return s - I * ((y + x * g * w) * Math.sinh(E) + C * w * Math.cosh(E)) / C;
};
}
const D = {
calculatedDuration: f && h || null,
next: (C) => {
const b = k(C);
if (f)
a.done = C >= h;
else {
let I = C === 0 ? y : 0;
x < 1 && (I = C === 0 ? /* @__PURE__ */ At(y) : ya(k, C, b));
const E = Math.abs(I) <= i, F = Math.abs(s - b) <= r;
a.done = E && F;
}
return a.value = a.done ? s : b, a;
},
toString: () => {
const C = Math.min(rr(D), xn), b = ga((I) => D.next(C * I).value, C, 30);
return C + "ms " + b;
},
toTransition: () => {
}
};
return D;
}
bn.applyToOptions = (t) => {
const e = ec(t, 100, bn);
return t.ease = e.ease, t.duration = /* @__PURE__ */ At(e.duration), t.type = "keyframes", t;
};
function pi({ keyframes: t, velocity: e = 0, power: n = 0.8, timeConstant: i = 325, bounceDamping: r = 10, bounceStiffness: o = 500, modifyTarget: s, min: a, max: u, restDelta: c = 0.5, restSpeed: l }) {
const h = t[0], p = {
done: !1,
value: h
}, f = (E) => a !== void 0 && E < a || u !== void 0 && E > u, y = (E) => a === void 0 ? u : u === void 0 || Math.abs(a - E) < Math.abs(u - E) ? a : u;
let x = n * e;
const w = h + x, g = s === void 0 ? w : s(w);
g !== w && (x = g - h);
const S = (E) => -x * Math.exp(-E / i), k = (E) => g + S(E), D = (E) => {
const F = S(E), B = k(E);
p.done = Math.abs(F) <= c, p.value = p.done ? g : B;
};
let C, b;
const I = (E) => {
f(p.value) && (C = E, b = bn({
keyframes: [p.value, y(p.value)],
velocity: ya(k, E, p.value),
// TODO: This should be passing * 1000
damping: r,
stiffness: o,
restDelta: c,
restSpeed: l
}));
};
return I(0), {
calculatedDuration: null,
next: (E) => {
let F = !1;
return !b && C === void 0 && (F = !0, D(E), I(E)), C !== void 0 && E >= C ? b.next(E - C) : (!F && D(E), p);
}
};
}
function uc(t, e, n) {
const i = [], r = n || Bt.mix || ma, o = t.length - 1;
for (let s = 0; s < o; s++) {
let a = r(t[s], t[s + 1]);
if (e) {
const u = Array.isArray(e) ? e[s] || St : e;
a = Ye(u, a);
}
i.push(a);
}
return i;
}
function cc(t, e, { clamp: n = !0, ease: i, mixer: r } = {}) {
const o = t.length;
if (Nt(o === e.length, "Both input and output ranges must be the same length", "range-length"), o === 1)
return () => e[0];
if (o === 2 && e[0] === e[1])
return () => e[1];
const s = t[0] === t[1];
t[0] > t[o - 1] && (t = [...t].reverse(), e = [...e].reverse());
const a = uc(e, i, r), u = a.length, c = (l) => {
if (s && l < t[0])
return e[0];
let h = 0;
if (u > 1)
for (; h < t.length - 2 && !(l < t[h + 1]); h++)
;
const p = /* @__PURE__ */ Ue(t[h], t[h + 1], l);
return a[h](p);
};
return n ? (l) => c(Ot(t[0], t[o - 1], l)) : c;
}
function hc(t, e) {
const n = t[t.length - 1];
for (let i = 1; i <= e; i++) {
const r = /* @__PURE__ */ Ue(0, e, i);
t.push(Q(n, 1, r));
}
}
function fc(t) {
const e = [0];
return hc(e, t.length - 1), e;
}
function pc(t, e) {
return t.map((n) => n * e);
}
function dc(t, e) {
return t.map(() => e || sa).splice(0, t.length - 1);
}
function ue({ duration: t = 300, keyframes: e, times: n, ease: i = "easeInOut" }) {
const r = Pu(i) ? i.map($r) : $r(i), o = {
done: !1,
value: e[0]
}, s = pc(
// Only use the provided offsets if they're the correct length
// TODO Maybe we should warn here if there's a length mismatch
n && n.length === e.length ? n : fc(e),
t
), a = cc(s, e, {
ease: Array.isArray(r) ? r : dc(e, r)
});
return {
calculatedDuration: t,
next: (u) => (o.value = a(u), o.done = u >= t, o)
};
}
const mc = (t) => t !== null;
function sr(t, { repeat: e, repeatType: n = "loop" }, i, r = 1) {
const o = t.filter(mc), a = r < 0 || e && n !== "loop" && e % 2 === 1 ? 0 : o.length - 1;
return !a || i === void 0 ? o[a] : i;
}
const gc = {
decay: pi,
inertia: pi,
tween: ue,
keyframes: ue,
spring: bn
};
function xa(t) {
typeof t.type == "string" && (t.type = gc[t.type]);
}
class or {
constructor() {
this.updateFinished();
}
get finished() {
return this._finished;
}
updateFinished() {
this._finished = new Promise((e) => {
this.resolve = e;
});
}
notifyFinished() {
this.resolve();
}
/**
* Allows the animation to be awaited.
*
* @deprecated Use `finished` instead.
*/
then(e, n) {
return this.finished.then(e, n);
}
}
const yc = (t) => t / 100;
class ar extends or {
constructor(e) {
super(), this.state = "idle", this.startTime = null, this.isStopped = !1, this.currentTime = 0, this.holdTime = null, this.playbackSpeed = 1, this.stop = () => {
var i, r;
const { motionValue: n } = this.options;
n && n.updatedAt !== ht.now() && this.tick(ht.now()), this.isStopped = !0, this.state !== "idle" && (this.teardown(), (r = (i = this.options).onStop) == null || r.call(i));
}, this.options = e, this.initAnimation(), this.play(), e.autoplay === !1 && this.pause();
}
initAnimation() {
const { options: e } = this;
xa(e);
const { type: n = ue, repeat: i = 0, repeatDelay: r = 0, repeatType: o, velocity: s = 0 } = e;
let { keyframes: a } = e;
const u = n || ue;
process.env.NODE_ENV !== "production" && u !== ue && Nt(a.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${a}`, "spring-two-frames"), u !== ue && typeof a[0] != "number" && (this.mixKeyframes = Ye(yc, ma(a[0], a[1])), a = [0, 100]);
const c = u({ ...e, keyframes: a });
o === "mirror" && (this.mirroredGenerator = u({
...e,
keyframes: [...a].reverse(),
velocity: -s
})), c.calculatedDuration === null && (c.calculatedDuration = rr(c));
const { calculatedDuration: l } = c;
this.calculatedDuration = l, this.resolvedDuration = l + r, this.totalDuration = this.resolvedDuration * (i + 1) - r, this.generator = c;
}
updateTime(e) {
const n = Math.round(e - this.startTime) * this.playbackSpeed;
this.holdTime !== null ? this.currentTime = this.holdTime : this.currentTime = n;
}
tick(e, n = !1) {
const { generator: i, totalDuration: r, mixKeyframes: o, mirroredGenerator: s, resolvedDuration: a, calculatedDuration: u } = this;
if (this.startTime === null)
return i.next(0);
const { delay: c = 0, keyframes: l, repeat: h, repeatType: p, repeatDelay: f, type: y, onUpdate: x, finalKeyframe: w } = this.options;
this.speed > 0 ? this.startTime = Math.min(this.startTime, e) : this.speed < 0 && (this.startTime = Math.min(e - r / this.speed, this.startTime)), n ? this.currentTime = e : this.updateTime(e);
const g = this.currentTime - c * (this.playbackSpeed >= 0 ? 1 : -1), S = this.playbackSpeed >= 0 ? g < 0 : g > r;
this.currentTime = Math.max(g, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = r);
let k = this.currentTime, D = i;
if (h) {
const E = Math.min(this.currentTime, r) / a;
let F = Math.floor(E), B = E % 1;
!B && E >= 1 && (B = 1), B === 1 && F--, F = Math.min(F, h + 1), !!(F % 2) && (p === "reverse" ? (B = 1 - B, f && (B -= f / a)) : p === "mirror" && (D = s)), k = Ot(0, 1, B) * a;
}
const C = S ? { done: !1, value: l[0] } : D.next(k);
o && (C.value = o(C.value));
let { done: b } = C;
!S && u !== null && (b = this.playbackSpeed >= 0 ? this.currentTime >= r : this.currentTime <= 0);
const I = this.holdTime === null && (this.state === "finished" || this.state === "running" && b);
return I && y !== pi && (C.value = sr(l, this.options, w, this.speed)), x && x(C.value), I && this.finish(), C;
}
/**
* 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(e, n) {
return this.finished.then(e, n);
}
get duration() {
return /* @__PURE__ */ vt(this.calculatedDuration);
}
get iterationDuration() {
const { delay: e = 0 } = this.options || {};
return this.duration + /* @__PURE__ */ vt(e);
}
get time() {
return /* @__PURE__ */ vt(this.currentTime);
}
set time(e) {
var n;
e = /* @__PURE__ */ At(e), this.currentTime = e, this.startTime === null || this.holdTime !== null || this.playbackSpeed === 0 ? this.holdTime = e : this.driver && (this.startTime = this.driver.now() - e / this.playbackSpeed), (n = this.driver) == null || n.start(!1);
}
get speed() {
return this.playbackSpeed;
}
set speed(e) {
this.updateTime(ht.now());
const n = this.playbackSpeed !== e;
this.playbackSpeed = e, n && (this.time = /* @__PURE__ */ vt(this.currentTime));
}
play() {
var r, o;
if (this.isStopped)
return;
const { driver: e = tc, startTime: n } = this.options;
this.driver || (this.driver = e((s) => this.tick(s))), (o = (r = this.options).onPlay) == null || o.call(r);
const i = this.driver.now();
this.state === "finished" ? (this.updateFinished(), this.startTime = i) : this.holdTime !== null ? this.startTime = i - this.holdTime : this.startTime || (this.startTime = n ?? i), this.state === "finished" && this.speed < 0 && (this.startTime += this.calculatedDuration), this.holdTime = null, this.state = "running", this.driver.start();
}
pause() {
this.state = "paused", this.updateTime(ht.now()), this.holdTime = this.currentTime;
}
complete() {
this.state !== "running" && this.play(), this.state = "finished", this.holdTime = null;
}
finish() {
var e, n;
this.notifyFinished(), this.teardown(), this.state = "finished", (n = (e = this.options).onComplete) == null || n.call(e);
}
cancel() {
var e, n;
this.holdTime = null, this.startTime = 0, this.tick(0), this.teardown(), (n = (e = this.options).onCancel) == null || n.call(e);
}
teardown() {
this.state = "idle", this.stopDriver(), this.startTime = this.holdTime = null;
}
stopDriver() {
this.driver && (this.driver.stop(), this.driver = void 0);
}
sample(e) {
return this.startTime = 0, this.tick(e, !0);
}
attachTimeline(e) {
var n;
return this.options.allowFlatten && (this.options.type = "keyframes", this.options.ease = "linear", this.initAnimation()), (n = this.driver) == null || n.stop(), e.observe(this);
}
}
function xc(t) {
for (let e = 1; e < t.length; e++)
t[e] ?? (t[e] = t[e - 1]);
}
const Zt = (t) => t * 180 / Math.PI, di = (t) => {
const e = Zt(Math.atan2(t[1], t[0]));
return mi(e);
}, bc = {
x: 4,
y: 5,
translateX: 4,
translateY: 5,
scaleX: 0,
scaleY: 3,
scale: (t) => (Math.abs(t[0]) + Math.abs(t[3])) / 2,
rotate: di,
rotateZ: di,
skewX: (t) => Zt(Math.atan(t[1])),
skewY: (t) => Zt(Math.atan(t[2])),
skew: (t) => (Math.abs(t[1]) + Math.abs(t[2])) / 2
}, mi = (t) => (t = t % 360, t < 0 && (t += 360), t), Gr = di, Zr = (t) => Math.sqrt(t[0] * t[0] + t[1] * t[1]), Qr = (t) => Math.sqrt(t[4] * t[4] + t[5] * t[5]), wc = {
x: 12,
y: 13,
z: 14,
translateX: 12,
translateY: 13,
translateZ: 14,
scaleX: Zr,
scaleY: Qr,
scale: (t) => (Zr(t) + Qr(t)) / 2,
rotateX: (t) => mi(Zt(Math.atan2(t[6], t[5]))),
rotateY: (t) => mi(Zt(Math.atan2(-t[2], t[0]))),
rotateZ: Gr,
rotate: Gr,
skewX: (t) => Zt(Math.atan(t[4])),
skewY: (t) => Zt(Math.atan(t[1])),
skew: (t) => (Math.abs(t[1]) + Math.abs(t[4])) / 2
};
function gi(t) {
return t.includes("scale") ? 1 : 0;
}
function yi(t, e) {
if (!t || t === "none")
return gi(e);
const n = t.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
let i, r;
if (n)
i = wc, r = n;
else {
const a = t.match(/^matrix\(([-\d.e\s,]+)\)$/u);
i = bc, r = a;
}
if (!r)
return gi(e);
const o = i[e], s = r[1].split(",").map(vc);
return typeof o == "function" ? o(s) : s[o];
}
const kc = (t, e) => {
const { transform: n = "none" } = getComputedStyle(t);
return yi(n, e);
};
function vc(t) {
return parseFloat(t.trim());
}
const ve = [
"transformPerspective",
"x",
"y",
"z",
"translateX",
"translateY",
"translateZ",
"scale",
"scaleX",
"scaleY",
"rotate",
"rotateX",
"rotateY",
"rotateZ",
"skew",
"skewX",
"skewY"
], Se = new Set(ve), Jr = (t) => t === ke || t === N, Sc = /* @__PURE__ */ new Set(["x", "y", "z"]), Tc = ve.filter((t) => !Sc.has(t));
function Cc(t) {
const e = [];
return Tc.forEach((n) => {
const i = t.getValue(n);
i !== void 0 && (e.push([n, i.get()]), i.set(n.startsWith("scale") ? 1 : 0));
}), e;
}
const Jt = {
// Dimensions
width: ({ x: t }, { paddingLeft: e = "0", paddingRight: n = "0" }) => t.max - t.min - parseFloat(e) - parseFloat(n),
height: ({ y: t }, { paddingTop: e = "0", paddingBottom: n = "0" }) => t.max - t.min - parseFloat(e) - parseFloat(n),
top: (t, { top: e }) => parseFloat(e),
left: (t, { left: e }) => parseFloat(e),
bottom: ({ y: t }, { top: e }) => parseFloat(e) + (t.max - t.min),
right: ({ x: t }, { left: e }) => parseFloat(e) + (t.max - t.min),
// Transform
x: (t, { transform: e }) => yi(e, "x"),
y: (t, { transform: e }) => yi(e, "y")
};
Jt.translateX = Jt.x;
Jt.translateY = Jt.y;
const te = /* @__PURE__ */ new Set();
let xi = !1, bi = !1, wi = !1;
function ba() {
if (bi) {
const t = Array.from(te).filter((i) => i.needsMeasurement), e = new Set(t.map((i) => i.element)), n = /* @__PURE__ */ new Map();
e.forEach((i) => {
const r = Cc(i);
r.length && (n.set(i, r), i.render());
}), t.forEach((i) => i.measureInitialState()), e.forEach((i) => {
i.render();
const r = n.get(i);
r && r.forEach(([o, s]) => {
var a;
(a = i.getValue(o)) == null || a.set(s);
});
}), t.forEach((i) => i.measureEndState()), t.forEach((i) => {
i.suspendedScrollY !== void 0 && window.scrollTo(0, i.suspendedScrollY);
});
}
bi = !1, xi = !1, te.forEach((t) => t.complete(wi)), te.clear();
}
function wa() {
te.forEach((t) => {
t.readKeyframes(), t.needsMeasurement && (bi = !0);
});
}
function Pc() {
wi = !0, wa(), ba(), wi = !1;
}
class lr {
constructor(e, n, i, r, o, s = !1) {
this.state = "pending", this.isAsync = !1, this.needsMeasurement = !1, this.unresolvedKeyframes = [...e], this.onComplete = n, this.name = i, this.motionValue = r, this.element = o, this.isAsync = s;
}
scheduleResolve() {
this.state = "scheduled", this.isAsync ? (te.add(this), xi || (xi = !0, G.read(wa), G.resolveKeyframes(ba))) : (this.readKeyframes(), this.complete());
}
readKeyframes() {
const { unresolvedKeyframes: e, name: n, element: i, motionValue: r } = this;
if (e[0] === null) {
const o = r == null ? void 0 : r.get(), s = e[e.length - 1];
if (o !== void 0)
e[0] = o;
else if (i && n) {
const a = i.readValue(n, s);
a != null && (e[0] = a);
}
e[0] === void 0 && (e[0] = s), r && o === void 0 && r.set(e[0]);
}
xc(e);
}
setFinalKeyframe() {
}
measureInitialState() {
}
renderEndStyles() {
}
measureEndState() {
}
complete(e = !1) {
this.state = "complete", this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, e), te.delete(this);
}
cancel() {
this.state === "scheduled" && (te.delete(this), this.state = "pending");
}
resume() {
this.state === "pending" && this.scheduleResolve();
}
}
const Ac = (t) => t.startsWith("--");
function Ec(t, e, n) {
Ac(e) ? t.style.setProperty(e, n) : t.style[e] = n;
}
const Dc = /* @__PURE__ */ Xi(() => window.ScrollTimeline !== void 0), Ic = {};
function Mc(t, e) {
const n = /* @__PURE__ */ Xi(t);
return () => Ic[e] ?? n();
}
const ka = /* @__PURE__ */ Mc(() => {
try {
document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
} catch {
return !1;
}
return !0;
}, "linearEasing"), Re = ([t, e, n, i]) => `cubic-bezier(${t}, ${e}, ${n}, ${i})`, ts = {
linear: "linear",
ease: "ease",
easeIn: "ease-in",
easeOut: "ease-out",
easeInOut: "ease-in-out",
circIn: /* @__PURE__ */ Re([0, 0.65, 0.55, 1]),
circOut: /* @__PURE__ */ Re([0.55, 0, 1, 0.45]),
backIn: /* @__PURE__ */ Re([0.31, 0.01, 0.66, -0.59]),
backOut: /* @__PURE__ */ Re([0.33, 1.53, 0.69, 0.99])
};
function va(t, e) {
if (t)
return typeof t == "function" ? ka() ? ga(t, e) : "ease-out" : oa(t) ? Re(t) : Array.isArray(t) ? t.map((n) => va(n, e) || ts.easeOut) : ts[t];
}
function Lc(t, e, n, { delay: i = 0, duration: r = 300, repeat: o = 0, repeatType: s = "loop", ease: a = "easeOut", times: u } = {}, c = void 0) {
const l = {
[e]: n
};
u && (l.offset = u);
const h = va(a, r);
Array.isArray(h) && (l.easing = h);
const p = {
delay: i,
duration: r,
easing: Array.isArray(h) ? "linear" : h,
fill: "both",
iterations: o + 1,
direction: s === "reverse" ? "alternate" : "normal"
};
return c && (p.pseudoElement = c), t.animate(l, p);
}
function Sa(t) {
return typeof t == "function" && "applyToOptions" in t;
}
function Vc({ type: t, ...e }) {
return Sa(t) && ka() ? t.applyToOptions(e) : (e.duration ?? (e.duration = 300), e.ease ?? (e.ease = "easeOut"), e);
}
class Rc extends or {
constructor(e) {
if (super(), this.finishedTime = null, this.isStopped = !1, !e)
return;
const { element: n, name: i, keyframes: r, pseudoElement: o, allowFlatten: s = !1, finalKeyframe: a, onComplete: u } = e;
this.isPseudoElement = !!o, this.allowFlatten = s, this.options = e, Nt(typeof e.type != "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
const c = Vc(e);
this.animation = Lc(n, i, r, c, o), c.autoplay === !1 && this.animation.pause(), this.animation.onfinish = () => {
if (this.finishedTime = this.time, !o) {
const l = sr(r, this.options, a, this.speed);
this.updateMotionValue ? this.updateMotionValue(l) : Ec(n, i, l), this.animation.cancel();
}
u == null || u(), this.notifyFinished();
};
}
play() {
this.isStopped || (this.animation.play(), this.state === "finished" && this.updateFinished());
}
pause() {
this.animation.pause();
}
complete() {
var e, n;
(n = (e = this.animation).finish) == null || n.call(e);
}
cancel() {
try {
this.animation.cancel();
} catch {
}
}
stop() {
if (this.isStopped)
return;
this.isStopped = !0;
const { state: e } = this;
e === "idle" || e === "finished" || (this.updateMotionValue ? this.updateMotionValue() : this.commitStyles(), this.isPseudoElement || this.cancel());
}
/**
* WAAPI doesn't natively have any interruption capabilities.
*
* In this method, we commit styles back to the DOM before cancelling
* the animation.
*
* This is designed to be overridden by NativeAnimationExtended, which
* will create a renderless JS animation and sample it twice to calculate
* its current value, "previous" value, and therefore allow
* Motion to also correctly calculate velocity for any subsequent animation
* while deferring the commit until the next animation frame.
*/
commitStyles() {
var e, n;
this.isPseudoElement || (n = (e = this.animation).commitStyles) == null || n.call(e);
}
get duration() {
var n, i;
const e = ((i = (n = this.animation.effect) == null ? void 0 : n.getComputedTiming) == null ? void 0 : i.call(n).duration) || 0;
return /* @__PURE__ */ vt(Number(e));
}
get iterationDuration() {
const { delay: e = 0 } = this.options || {};
return this.duration + /* @__PURE__ */ vt(e);
}
get time() {
return /* @__PURE__ */ vt(Number(this.animation.currentTime) || 0);
}
set time(e) {
this.finishedTime = null, this.animation.currentTime = /* @__PURE__ */ At(e);
}
/**
* The playback speed of the animation.
* 1 = normal speed, 2 = double speed, 0.5 = half speed.
*/
get speed() {
return this.animation.playbackRate;
}
set speed(e) {
e < 0 && (this.finishedTime = null), this.animation.playbackRate = e;
}
get state() {
return this.finishedTime !== null ? "finished" : this.animation.playState;
}
get startTime() {
return Number(this.animation.startTime);
}
set startTime(e) {
this.animation.startTime = e;
}
/**
* Attaches a timeline to the animation, for instance the `ScrollTimeline`.
*/
attachTimeline({ timeline: e, observe: n }) {
var i;
return this.allowFlatten && ((i = this.animation.effect) == null || i.updateTiming({ easing: "linear" })), this.animation.onfinish = null, e && Dc() ? (this.animation.timeline = e, St) : n(this);
}
}
const Ta = {
anticipate: na,
backInOut: ea,
circInOut: ra
};
function Fc(t) {
return t in Ta;
}
function Oc(t) {
typeof t.ease == "string" && Fc(t.ease) && (t.ease = Ta[t.ease]);
}
const es = 10;
class Nc extends Rc {
constructor(e) {
Oc(e), xa(e), super(e), e.startTime && (this.startTime = e.startTime), this.options = e;
}
/**
* WAAPI doesn't natively have any interruption capabilities.
*
* Rather than read commited styles back out of the DOM, we can
* create a renderless JS animation and sample it twice to calculate
* its current value, "previous" value, and therefore allow
* Motion to calculate velocity for any subsequent animation.
*/
updateMotionValue(e) {
const { motionValue: n, onUpdate: i, onComplete: r, element: o, ...s } = this.options;
if (!n)
return;
if (e !== void 0) {
n.set(e);
return;
}
const a = new ar({
...s,
autoplay: !1
}), u = /* @__PURE__ */ At(this.finishedTime ?? this.time);
n.setWithVelocity(a.sample(u - es).value, a.sample(u).value, es), a.stop();
}
}
const ns = (t, e) => e === "zIndex" ? !1 : !!(typeof t == "number" || Array.isArray(t) || typeof t == "string" && // It's animatable if we have a string
(Ht.test(t) || t === "0") && // And it contains numbers and/or colors
!t.startsWith("url("));
function Bc(t) {
const e = t[0];
if (t.length === 1)
return !0;
for (let n = 0; n < t.length; n++)
if (t[n] !== e)
return !0;
}
function zc(t, e, n, i) {
const r = t[0];
if (r === null)
return !1;
if (e === "display" || e === "visibility")
return !0;
const o = t[t.length - 1], s = ns(r, e), a = ns(o, e);
return we(s === a, `You are trying to animate ${e} from "${r}" to "${o}". "${s ? o : r}" is not an animatable value.`, "value-not-animatable"), !s || !a ? !1 : Bc(t) || (n === "spring" || Sa(n)) && i;
}
function ki(t) {
t.duration = 0, t.type = "keyframes";
}
const jc = /* @__PURE__ */ new Set([
"opacity",
"clipPath",
"filter",
"transform"
// TODO: Could be re-enabled now we have support for linear() easing
// "background-color"
]), _c = /* @__PURE__ */ Xi(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
function Uc(t) {
var l;
const { motionValue: e, name: n, repeatDelay: i, repeatType: r, damping: o, type: s } = t;
if (!(((l = e == null ? void 0 : e.owner) == null ? void 0 : l.current) instanceof HTMLElement))
return !1;
const { onUpdate: u, transformTemplate: c } = e.owner.getProps();
return _c() && n && jc.has(n) && (n !== "transform" || !c) && /**
* 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.
*/
!u && !i && r !== "mirror" && o !== 0 && s !== "inertia";
}
const Hc = 40;
class $c extends or {
constructor({ autoplay: e = !0, delay: n = 0, type: i = "keyframes", repeat: r = 0, repeatDelay: o = 0, repeatType: s = "loop", keyframes: a, name: u, motionValue: c, element: l, ...h }) {
var y;
super(), this.stop = () => {
var x, w;
this._animation && (this._animation.stop(), (x = this.stopTimeline) == null || x.call(this)), (w = this.keyframeResolver) == null || w.cancel();
}, this.createdAt = ht.now();
const p = {
autoplay: e,
delay: n,
type: i,
repeat: r,
repeatDelay: o,
repeatType: s,
name: u,
motionValue: c,
element: l,
...h
}, f = (l == null ? void 0 : l.KeyframeResolver) || lr;
this.keyframeResolver = new f(a, (x, w, g) => this.onKeyframesResolved(x, w, p, !g), u, c, l), (y = this.keyframeResolver) == null || y.scheduleResolve();
}
onKeyframesResolved(e, n, i, r) {
this.keyframeResolver = void 0;
const { name: o, type: s, velocity: a, delay: u, isHandoff: c, onUpdate: l } = i;
this.resolvedAt = ht.now(), zc(e, o, s, a) || ((Bt.instantAnimations || !u) && (l == null || l(sr(e, i, n))), e[0] = e[e.length - 1], ki(i), i.repeat = 0);
const p = {
startTime: r ? this.resolvedAt ? this.resolvedAt - this.createdAt > Hc ? this.resolvedAt : this.createdAt : this.createdAt : void 0,
finalKeyframe: n,
...i,
keyframes: e
}, f = !c && Uc(p) ? new Nc({
...p,
element: p.motionValue.owner.current
}) : new ar(p);
f.finished.then(() => this.notifyFinished()).catch(St), this.pendingTimeline && (this.stopTimeline = f.attachTimeline(this.pendingTimeline), this.pendingTimeline = void 0), this._animation = f;
}
get finished() {
return this._animation ? this.animation.finished : this._finished;
}
then(e, n) {
return this.finished.finally(e).then(() => {
});
}
get animation() {
var e;
return this._animation || ((e = this.keyframeResolver) == null || e.resume(), Pc()), this._animation;
}
get duration() {
return this.animation.duration;
}
get iterationDuration() {
return this.animation.iterationDuration;
}
get time() {
return this.animation.time;
}
set time(e) {
this.animation.time = e;
}
get speed() {
return this.animation.speed;
}
get state() {
return this.animation.state;
}
set speed(e) {
this.animation.speed = e;
}
get startTime() {
return this.animation.startTime;
}
attachTimeline(e) {
return this._animation ? this.stopTimeline = this.animation.attachTimeline(e) : this.pendingTimeline = e, () => this.stop();
}
play() {
this.animation.play();
}
pause() {
this.animation.pause();
}
complete() {
this.animation.complete();
}
cancel() {
var e;
this._animation && this.animation.cancel(), (e = this.keyframeResolver) == null || e.cancel();
}
}
const Wc = (
// 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 qc(t) {
const e = Wc.exec(t);
if (!e)
return [,];
const [, n, i, r] = e;
return [`--${n ?? i}`, r];
}
const Kc = 4;
function Ca(t, e, n = 1) {
Nt(n <= Kc, `Max CSS variable fallback depth detected in property "${t}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
const [i, r] = qc(t);
if (!i)
return;
const o = window.getComputedStyle(e).getPropertyValue(i);
if (o) {
const s = o.trim();
return Ko(s) ? parseFloat(s) : s;
}
return tr(r) ? Ca(r, e, n + 1) : r;
}
function ur(t, e) {
return (t == null ? void 0 : t[e]) ?? (t == null ? void 0 : t.default) ?? t;
}
const Pa = /* @__PURE__ */ new Set([
"width",
"height",
"top",
"left",
"right",
"bottom",
...ve
]), Xc = {
test: (t) => t === "auto",
parse: (t) => t
}, Aa = (t) => (e) => e.test(t), Ea = [ke, N, It, _t, Bu, Nu, Xc], is = (t) => Ea.find(Aa(t));
function Yc(t) {
return typeof t == "number" ? t === 0 : t !== null ? t === "none" || t === "0" || Yo(t) : !0;
}
const Gc = /* @__PURE__ */ new Set(["brightness", "contrast", "saturate", "opacity"]);
function Zc(t) {
const [e, n] = t.slice(0, -1).split("(");
if (e === "drop-shadow")
return t;
const [i] = n.match(er) || [];
if (!i)
return t;
const r = n.replace(i, "");
let o = Gc.has(e) ? 1 : 0;
return i !== n && (o *= 100), e + "(" + o + r + ")";
}
const Qc = /\b([a-z-]*)\(.*?\)/gu, vi = {
...Ht,
getAnimatableNone: (t) => {
const e = t.match(Qc);
return e ? e.map(Zc).join(" ") : t;
}
}, rs = {
...ke,
transform: Math.round
}, Jc = {
rotate: _t,
rotateX: _t,
rotateY: _t,
rotateZ: _t,
scale: rn,
scaleX: rn,
scaleY: rn,
scaleZ: rn,
skew: _t,
skewX: _t,
skewY: _t,
distance: N,
translateX: N,
translateY: N,
translateZ: N,
x: N,
y: N,
z: N,
perspective: N,
transformPerspective: N,
opacity: He,
originX: Wr,
originY: Wr,
originZ: N
}, cr = {
// Border props
borderWidth: N,
borderTopWidth: N,
borderRightWidth: N,
borderBottomWidth: N,
borderLeftWidth: N,
borderRadius: N,
radius: N,
borderTopLeftRadius: N,
borderTopRightRadius: N,
borderBottomRightRadius: N,
borderBottomLeftRadius: N,
// Positioning props
width: N,
maxWidth: N,
height: N,
maxHeight: N,
top: N,
right: N,
bottom: N,
left: N,
// Spacing props
padding: N,
paddingTop: N,
paddingRight: N,
paddingBottom: N,
paddingLeft: N,
margin: N,
marginTop: N,
marginRight: N,
marginBottom: N,
marginLeft: N,
// Misc
backgroundPositionX: N,
backgroundPositionY: N,
...Jc,
zIndex: rs,
// SVG
fillOpacity: He,
strokeOpacity: He,
numOctaves: rs
}, th = {
...cr,
// Color props
color: et,
backgroundColor: et,
outlineColor: et,
fill: et,
stroke: et,
// Border props
borderColor: et,
borderTopColor: et,
borderRightColor: et,
borderBottomColor: et,
borderLeftColor: et,
filter: vi,
WebkitFilter: vi
}, Da = (t) => th[t];
function Ia(t, e) {
let n = Da(t);
return n !== vi && (n = Ht), n.getAnimatableNone ? n.getAnimatableNone(e) : void 0;
}
const eh = /* @__PURE__ */ new Set(["auto", "none", "0"]);
function nh(t, e, n) {
let i = 0, r;
for (; i < t.length && !r; ) {
const o = t[i];
typeof o == "string" && !eh.has(o) && $e(o).values.length && (r = t[i]), i++;
}
if (r && n)
for (const o of e)
t[o] = Ia(n, r);
}
class ih extends lr {
constructor(e, n, i, r, o) {
super(e, n, i, r, o, !0);
}
readKeyframes() {
const { unresolvedKeyframes: e, element: n, name: i } = this;
if (!n || !n.current)
return;
super.readKeyframes();
for (let u = 0; u < e.length; u++) {
let c = e[u];
if (typeof c == "string" && (c = c.trim(), tr(c))) {
const l = Ca(c, n.current);
l !== void 0 && (e[u] = l), u === e.length - 1 && (this.finalKeyframe = c);
}
}
if (this.resolveNoneKeyframes(), !Pa.has(i) || e.length !== 2)
return;
const [r, o] = e, s = is(r), a = is(o);
if (s !== a)
if (Jr(s) && Jr(a))
for (let u = 0; u < e.length; u++) {
const c = e[u];
ty