@fluidattacks/design 3.1.12 → 3.1.13

package/dist/components/slide-out-menu/index.js

@@ -1,157 +1,319 @@
-import { jsxs as H, jsx as I } from "react/jsx-runtime";
-import { createContext as ee, useLayoutEffect as Ts, useEffect as st, useContext as O, useRef as Z, useInsertionEffect as xs, useCallback as fn, useMemo as Ve, forwardRef as As, Fragment as vn, createElement as Vs, useState as Cs } from "react";
-import { styled as Ms, useTheme as Ps } from "styled-components";
-import { MenuItem as ks } from "./menu-item/index.js";
-import { Button as Pt } from "../button/index.js";
-import { Container as z } from "../container/index.js";
-import { IconButton as Es } from "../icon-button/index.js";
+import { jsxs as Y, jsx as E } from "react/jsx-runtime";
+import { createContext as te, useLayoutEffect as xs, useEffect as nt, useContext as O, useRef as Z, useInsertionEffect as As, useCallback as fn, useMemo as Ae, forwardRef as Ms, Fragment as hn, createElement as Cs, useState as Ps } from "react";
+import { styled as Fs, useTheme as Ds } from "styled-components";
+import { MenuItem as Rs } from "./menu-item/index.js";
+import { Button as Rt } from "../button/index.js";
+import { Container as q } from "../container/index.js";
+import { IconButton as Is } from "../icon-button/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as Fs } from "../typography/text/index.js";
-import { u as Os } from "../../use-click-outside-BtZLIoU1.mjs";
+import { Text as Os } from "../typography/text/index.js";
+import { u as Es } from "../../use-click-outside-BUll8Ag-.mjs";
 import "lodash";
-const kt = /* @__PURE__ */ new Set();
-function we(t, e, n) {
-  t || kt.has(e) || (console.warn(e), kt.add(e));
-}
-function Is(t) {
-  if (typeof Proxy > "u") return t;
-  const e = /* @__PURE__ */ new Map();
-  return new Proxy((...n) => (process.env.NODE_ENV !== "production" && we(!1, "motion() is deprecated. Use motion.create() instead."), t(...n)), { get: (n, s) => s === "create" ? t : (e.has(s) || e.set(s, t(s)), e.get(s)) });
+const It = /* @__PURE__ */ new Set();
+function Me(t, e, n) {
+  t || It.has(e) || (console.warn(e), It.add(e));
+}
+function ks(t) {
+  if (typeof Proxy > "u")
+    return t;
+  const e = /* @__PURE__ */ new Map(), n = (...s) => (process.env.NODE_ENV !== "production" && Me(!1, "motion() is deprecated. Use motion.create() instead."), t(...s));
+  return new Proxy(n, {
+    /**
+     * 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: (s, i) => i === "create" ? t : (e.has(i) || e.set(i, t(i)), e.get(i))
+  });
 }
 function Ce(t) {
   return t !== null && typeof t == "object" && typeof t.start == "function";
 }
-const Ue = (t) => Array.isArray(t);
-function gn(t, e) {
-  if (!Array.isArray(e)) return !1;
+const je = (t) => Array.isArray(t);
+function pn(t, e) {
+  if (!Array.isArray(e))
+    return !1;
   const n = e.length;
-  if (n !== t.length) return !1;
-  for (let s = 0; s < n; s++) if (e[s] !== t[s]) return !1;
+  if (n !== t.length)
+    return !1;
+  for (let s = 0; s < n; s++)
+    if (e[s] !== t[s])
+      return !1;
   return !0;
 }
-function le(t) {
+function ue(t) {
   return typeof t == "string" || Array.isArray(t);
 }
-function Et(t) {
+function Ot(t) {
   const e = [{}, {}];
   return t == null || t.values.forEach((n, s) => {
     e[0][s] = n.get(), e[1][s] = n.getVelocity();
   }), e;
 }
-function it(t, e, n, s) {
+function st(t, e, n, s) {
   if (typeof e == "function") {
-    const [i, r] = Et(s);
+    const [i, r] = Ot(s);
     e = e(n !== void 0 ? n : t.custom, i, r);
   }
   if (typeof e == "string" && (e = t.variants && t.variants[e]), typeof e == "function") {
-    const [i, r] = Et(s);
+    const [i, r] = Ot(s);
     e = e(n !== void 0 ? n : t.custom, i, r);
   }
   return e;
 }
-function Me(t, e, n) {
+function Pe(t, e, n) {
   const s = t.getProps();
-  return it(s, e, n !== void 0 ? n : s.custom, t);
-}
-const rt = ["animate", "whileInView", "whileFocus", "whileHover", "whileTap", "whileDrag", "exit"], ot = ["initial", ...rt], he = ["transformPerspective", "x", "y", "z", "translateX", "translateY", "translateZ", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skew", "skewX", "skewY"], q = new Set(he), R = (t) => 1e3 * t, N = (t) => t / 1e3, Rs = { type: "spring", stiffness: 500, damping: 25, restSpeed: 10 }, Ds = { type: "keyframes", duration: 0.8 }, Bs = { type: "keyframes", ease: [0.25, 0.1, 0.35, 1], duration: 0.3 }, Ns = (t, { keyframes: e }) => e.length > 2 ? Ds : q.has(t) ? t.startsWith("scale") ? { type: "spring", stiffness: 550, damping: e[1] === 0 ? 2 * Math.sqrt(550) : 30, restSpeed: 10 } : Rs : Bs;
-function yn(t, e) {
+  return st(s, e, n !== void 0 ? n : s.custom, t);
+}
+const it = [
+  "animate",
+  "whileInView",
+  "whileFocus",
+  "whileHover",
+  "whileTap",
+  "whileDrag",
+  "exit"
+], rt = ["initial", ...it], fe = [
+  "transformPerspective",
+  "x",
+  "y",
+  "z",
+  "translateX",
+  "translateY",
+  "translateZ",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "skew",
+  "skewX",
+  "skewY"
+], z = new Set(fe), L = (t) => t * 1e3, B = (t) => t / 1e3, Ls = {
+  type: "spring",
+  stiffness: 500,
+  damping: 25,
+  restSpeed: 10
+}, Ns = (t) => ({
+  type: "spring",
+  stiffness: 550,
+  damping: t === 0 ? 2 * Math.sqrt(550) : 30,
+  restSpeed: 10
+}), Bs = {
+  type: "keyframes",
+  duration: 0.8
+}, Ks = {
+  type: "keyframes",
+  ease: [0.25, 0.1, 0.35, 1],
+  duration: 0.3
+}, _s = (t, { keyframes: e }) => e.length > 2 ? Bs : z.has(t) ? t.startsWith("scale") ? Ns(e[1]) : Ls : Ks;
+function mn(t, e) {
   return t ? t[e] || t.default || t : void 0;
 }
-const Ls = !1, $s = (t) => t !== null;
-function Pe(t, { repeat: e, repeatType: n = "loop" }, s) {
-  const i = t.filter($s), r = e && n !== "loop" && e % 2 == 1 ? 0 : i.length - 1;
-  return r && s !== void 0 ? s : i[r];
-}
-const $ = (t) => t;
-let te = $, U = $;
-process.env.NODE_ENV !== "production" && (te = (t, e) => {
-  t || typeof console > "u" || console.warn(e);
-}, U = (t, e) => {
-  if (!t) throw new Error(e);
+const $s = {
+  skipAnimations: !1,
+  useManualTiming: !1
+}, js = (t) => t !== null;
+function Fe(t, { repeat: e, repeatType: n = "loop" }, s) {
+  const i = t.filter(js), r = e && n !== "loop" && e % 2 === 1 ? 0 : i.length - 1;
+  return !r || s === void 0 ? i[r] : s;
+}
+const _ = (t) => t;
+let ne = _, G = _;
+process.env.NODE_ENV !== "production" && (ne = (t, e) => {
+  !t && typeof console < "u" && console.warn(e);
+}, G = (t, e) => {
+  if (!t)
+    throw new Error(e);
 });
-const me = ["read", "resolveKeyframes", "update", "preRender", "render", "postRender"];
-function wn(t, e) {
-  let n = !1, s = !0;
-  const i = { delta: 0, timestamp: 0, isProcessing: !1 }, r = () => n = !0, o = me.reduce((v, p) => (v[p] = /* @__PURE__ */ function(g) {
-    let m = /* @__PURE__ */ new Set(), S = /* @__PURE__ */ new Set(), x = !1, C = !1;
-    const y = /* @__PURE__ */ new WeakSet();
-    let w = { delta: 0, timestamp: 0, isProcessing: !1 };
-    function T(V) {
-      y.has(V) && (A.schedule(V), g()), V(w);
+function Ws(t) {
+  let e = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), s = !1, i = !1;
+  const r = /* @__PURE__ */ new WeakSet();
+  let o = {
+    delta: 0,
+    timestamp: 0,
+    isProcessing: !1
+  };
+  function a(u) {
+    r.has(u) && (l.schedule(u), t()), u(o);
+  }
+  const l = {
+    /**
+     * Schedule a process to run on the next frame.
+     */
+    schedule: (u, c = !1, f = !1) => {
+      const h = f && s ? e : n;
+      return c && r.add(u), h.has(u) || h.add(u), u;
+    },
+    /**
+     * Cancel the provided callback from running on the next frame.
+     */
+    cancel: (u) => {
+      n.delete(u), r.delete(u);
+    },
+    /**
+     * Execute all schedule callbacks.
+     */
+    process: (u) => {
+      if (o = u, s) {
+        i = !0;
+        return;
+      }
+      s = !0, [e, n] = [n, e], e.forEach(a), e.clear(), s = !1, i && (i = !1, l.process(u));
     }
-    const A = { schedule: (V, M = !1, Ie = !1) => {
-      const ie = Ie && x ? m : S;
-      return M && y.add(V), ie.has(V) || ie.add(V), V;
-    }, cancel: (V) => {
-      S.delete(V), y.delete(V);
-    }, process: (V) => {
-      w = V, x ? C = !0 : (x = !0, [m, S] = [S, m], m.forEach(T), m.clear(), x = !1, C && (C = !1, A.process(V)));
-    } };
-    return A;
-  }(r), v), {}), { read: a, resolveKeyframes: l, update: c, preRender: u, render: h, postRender: d } = o, f = () => {
-    const v = performance.now();
-    n = !1, i.delta = s ? 1e3 / 60 : Math.max(Math.min(v - i.timestamp, 40), 1), i.timestamp = v, i.isProcessing = !0, a.process(i), l.process(i), c.process(i), u.process(i), h.process(i), d.process(i), i.isProcessing = !1, n && e && (s = !1, t(f));
   };
-  return { schedule: me.reduce((v, p) => {
-    const g = o[p];
-    return v[p] = (m, S = !1, x = !1) => (n || (n = !0, s = !0, i.isProcessing || t(f)), g.schedule(m, S, x)), v;
-  }, {}), cancel: (v) => {
-    for (let p = 0; p < me.length; p++) o[me[p]].cancel(v);
+  return l;
+}
+const me = [
+  "read",
+  // Read
+  "resolveKeyframes",
+  // Write/Read/Write/Read
+  "update",
+  // Compute
+  "preRender",
+  // Compute
+  "render",
+  // Write
+  "postRender"
+  // Compute
+], Gs = 40;
+function gn(t, e) {
+  let n = !1, s = !0;
+  const i = {
+    delta: 0,
+    timestamp: 0,
+    isProcessing: !1
+  }, r = () => n = !0, o = me.reduce((p, g) => (p[g] = Ws(r), p), {}), { read: a, resolveKeyframes: l, update: u, preRender: c, render: f, postRender: d } = o, h = () => {
+    const p = performance.now();
+    n = !1, i.delta = s ? 1e3 / 60 : Math.max(Math.min(p - i.timestamp, Gs), 1), i.timestamp = p, i.isProcessing = !0, a.process(i), l.process(i), u.process(i), c.process(i), f.process(i), d.process(i), i.isProcessing = !1, n && e && (s = !1, t(h));
+  }, y = () => {
+    n = !0, s = !0, i.isProcessing || t(h);
+  };
+  return { schedule: me.reduce((p, g) => {
+    const V = o[g];
+    return p[g] = (A, w = !1, S = !1) => (n || y(), V.schedule(A, w, S)), p;
+  }, {}), cancel: (p) => {
+    for (let g = 0; g < me.length; g++)
+      o[me[g]].cancel(p);
   }, state: i, steps: o };
 }
-const { schedule: F, cancel: Ye, state: be, steps: Qr } = wn(typeof requestAnimationFrame < "u" ? requestAnimationFrame : $, !0), Ft = (t, e, n) => (((1 - 3 * n + 3 * e) * t + (3 * n - 6 * e)) * t + 3 * e) * t;
-function de(t, e, n, s) {
-  if (t === e && n === s) return $;
-  const i = (r) => function(o, a, l, c, u) {
-    let h, d, f = 0;
-    do
-      d = a + (l - a) / 2, h = Ft(d, c, u) - o, h > 0 ? l = d : a = d;
-    while (Math.abs(h) > 1e-7 && ++f < 12);
-    return d;
-  }(r, 0, 1, t, n);
-  return (r) => r === 0 || r === 1 ? r : Ft(i(r), e, s);
-}
-const bn = (t) => (e) => e <= 0.5 ? t(2 * e) / 2 : (2 - t(2 * (1 - e))) / 2, Sn = (t) => (e) => 1 - t(1 - e), Tn = de(0.33, 1.53, 0.69, 0.99), at = Sn(Tn), xn = bn(at), An = (t) => (t *= 2) < 1 ? 0.5 * at(t) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))), lt = (t) => 1 - Math.sin(Math.acos(t)), js = Sn(lt), Vn = bn(lt), Cn = (t) => /^0[^.\s]+$/u.test(t), Mn = (t) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(t), Pn = (t) => (e) => typeof e == "string" && e.startsWith(t), kn = Pn("--"), Ks = Pn("var(--"), ut = (t) => !!Ks(t) && Ws.test(t.split("/*")[0].trim()), Ws = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, Us = /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
-function En(t, e, n = 1) {
-  U(n <= 4, `Max CSS variable fallback depth detected in property "${t}". This may indicate a circular fallback dependency.`);
-  const [s, i] = function(o) {
-    const a = Us.exec(o);
-    if (!a) return [,];
-    const [, l, c, u] = a;
-    return [`--${l ?? c}`, u];
-  }(t);
-  if (!s) return;
+const { schedule: R, cancel: We, state: ve, steps: Ca } = gn(typeof requestAnimationFrame < "u" ? requestAnimationFrame : _, !0), yn = (t, e, n) => (((1 - 3 * n + 3 * e) * t + (3 * n - 6 * e)) * t + 3 * e) * t, Us = 1e-7, zs = 12;
+function Hs(t, e, n, s, i) {
+  let r, o, a = 0;
+  do
+    o = e + (n - e) / 2, r = yn(o, s, i) - t, r > 0 ? n = o : e = o;
+  while (Math.abs(r) > Us && ++a < zs);
+  return o;
+}
+function he(t, e, n, s) {
+  if (t === e && n === s)
+    return _;
+  const i = (r) => Hs(r, 0, 1, t, n);
+  return (r) => r === 0 || r === 1 ? r : yn(i(r), e, s);
+}
+const vn = (t) => (e) => e <= 0.5 ? t(2 * e) / 2 : (2 - t(2 * (1 - e))) / 2, bn = (t) => (e) => 1 - t(1 - e), wn = /* @__PURE__ */ he(0.33, 1.53, 0.69, 0.99), ot = /* @__PURE__ */ bn(wn), Tn = /* @__PURE__ */ vn(ot), Vn = (t) => (t *= 2) < 1 ? 0.5 * ot(t) : 0.5 * (2 - Math.pow(2, -10 * (t - 1))), at = (t) => 1 - Math.sin(Math.acos(t)), qs = bn(at), Sn = vn(at), xn = (t) => /^0[^.\s]+$/u.test(t);
+function Ys(t) {
+  return typeof t == "number" ? t === 0 : t !== null ? t === "none" || t === "0" || xn(t) : !0;
+}
+const An = (t) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(t), Mn = (t) => (e) => typeof e == "string" && e.startsWith(t), Cn = /* @__PURE__ */ Mn("--"), Xs = /* @__PURE__ */ Mn("var(--"), lt = (t) => Xs(t) ? Zs.test(t.split("/*")[0].trim()) : !1, Zs = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, Js = (
+  // 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 Qs(t) {
+  const e = Js.exec(t);
+  if (!e)
+    return [,];
+  const [, n, s, i] = e;
+  return [`--${n ?? s}`, i];
+}
+const ei = 4;
+function Pn(t, e, n = 1) {
+  G(n <= ei, `Max CSS variable fallback depth detected in property "${t}". This may indicate a circular fallback dependency.`);
+  const [s, i] = Qs(t);
+  if (!s)
+    return;
   const r = window.getComputedStyle(e).getPropertyValue(s);
   if (r) {
     const o = r.trim();
-    return Mn(o) ? parseFloat(o) : o;
-  }
-  return ut(i) ? En(i, e, n + 1) : i;
-}
-const Y = (t, e, n) => n > e ? e : n < t ? t : n, ne = { test: (t) => typeof t == "number", parse: parseFloat, transform: (t) => t }, ue = { ...ne, transform: (t) => Y(0, 1, t) }, fe = { ...ne, default: 1 }, pe = (t) => ({ test: (e) => typeof e == "string" && e.endsWith(t) && e.split(" ").length === 1, parse: parseFloat, transform: (e) => `${e}${t}` }), B = pe("deg"), J = pe("%"), b = pe("px"), Ys = pe("vh"), qs = pe("vw"), Ot = { ...J, parse: (t) => J.parse(t) / 100, transform: (t) => J.transform(100 * t) }, zs = /* @__PURE__ */ new Set(["width", "height", "top", "left", "right", "bottom", "x", "y", "translateX", "translateY"]), It = (t) => t === ne || t === b, Rt = (t, e) => parseFloat(t.split(", ")[e]), Dt = (t, e) => (n, { transform: s }) => {
-  if (s === "none" || !s) return 0;
+    return An(o) ? parseFloat(o) : o;
+  }
+  return lt(i) ? Pn(i, e, n + 1) : i;
+}
+const U = (t, e, n) => n > e ? e : n < t ? t : n, se = {
+  test: (t) => typeof t == "number",
+  parse: parseFloat,
+  transform: (t) => t
+}, ce = {
+  ...se,
+  transform: (t) => U(0, 1, t)
+}, ge = {
+  ...se,
+  default: 1
+}, pe = (t) => ({
+  test: (e) => typeof e == "string" && e.endsWith(t) && e.split(" ").length === 1,
+  parse: parseFloat,
+  transform: (e) => `${e}${t}`
+}), N = /* @__PURE__ */ pe("deg"), J = /* @__PURE__ */ pe("%"), m = /* @__PURE__ */ pe("px"), ti = /* @__PURE__ */ pe("vh"), ni = /* @__PURE__ */ pe("vw"), Et = {
+  ...J,
+  parse: (t) => J.parse(t) / 100,
+  transform: (t) => J.transform(t * 100)
+}, si = /* @__PURE__ */ new Set([
+  "width",
+  "height",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "x",
+  "y",
+  "translateX",
+  "translateY"
+]), kt = (t) => t === se || t === m, Lt = (t, e) => parseFloat(t.split(", ")[e]), Nt = (t, e) => (n, { transform: s }) => {
+  if (s === "none" || !s)
+    return 0;
   const i = s.match(/^matrix3d\((.+)\)$/u);
-  if (i) return Rt(i[1], e);
+  if (i)
+    return Lt(i[1], e);
   {
     const r = s.match(/^matrix\((.+)\)$/u);
-    return r ? Rt(r[1], t) : 0;
-  }
-}, Hs = /* @__PURE__ */ new Set(["x", "y", "z"]), Xs = he.filter((t) => !Hs.has(t)), X = { 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), x: Dt(4, 13), y: Dt(5, 14) };
-X.translateX = X.x, X.translateY = X.y;
-const Fn = (t) => (e) => e.test(t), On = [ne, b, J, B, qs, Ys, { test: (t) => t === "auto", parse: (t) => t }], Bt = (t) => On.find(Fn(t)), W = /* @__PURE__ */ new Set();
-let qe = !1, ze = !1;
-function In() {
-  if (ze) {
+    return r ? Lt(r[1], t) : 0;
+  }
+}, ii = /* @__PURE__ */ new Set(["x", "y", "z"]), ri = fe.filter((t) => !ii.has(t));
+function oi(t) {
+  const e = [];
+  return ri.forEach((n) => {
+    const s = t.getValue(n);
+    s !== void 0 && (e.push([n, s.get()]), s.set(n.startsWith("scale") ? 1 : 0));
+  }), e;
+}
+const Q = {
+  // 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: Nt(4, 13),
+  y: Nt(5, 14)
+};
+Q.translateX = Q.x;
+Q.translateY = Q.y;
+const Fn = (t) => (e) => e.test(t), ai = {
+  test: (t) => t === "auto",
+  parse: (t) => t
+}, Dn = [se, m, J, N, ni, ti, ai], Bt = (t) => Dn.find(Fn(t)), W = /* @__PURE__ */ new Set();
+let Ge = !1, Ue = !1;
+function Rn() {
+  if (Ue) {
     const t = Array.from(W).filter((s) => s.needsMeasurement), e = new Set(t.map((s) => s.element)), n = /* @__PURE__ */ new Map();
     e.forEach((s) => {
-      const i = function(r) {
-        const o = [];
-        return Xs.forEach((a) => {
-          const l = r.getValue(a);
-          l !== void 0 && (o.push([a, l.get()]), l.set(a.startsWith("scale") ? 1 : 0));
-        }), o;
-      }(s);
+      const i = oi(s);
       i.length && (n.set(s, i), s.render());
     }), t.forEach((s) => s.measureInitialState()), e.forEach((s) => {
       s.render();
@@ -164,31 +326,38 @@ function In() {
       s.suspendedScrollY !== void 0 && window.scrollTo(0, s.suspendedScrollY);
     });
   }
-  ze = !1, qe = !1, W.forEach((t) => t.complete()), W.clear();
+  Ue = !1, Ge = !1, W.forEach((t) => t.complete()), W.clear();
 }
-function Rn() {
+function In() {
   W.forEach((t) => {
-    t.readKeyframes(), t.needsMeasurement && (ze = !0);
+    t.readKeyframes(), t.needsMeasurement && (Ue = !0);
   });
 }
-class ct {
+function li() {
+  In(), Rn();
+}
+class ut {
   constructor(e, n, s, i, r, o = !1) {
     this.isComplete = !1, this.isAsync = !1, this.needsMeasurement = !1, this.isScheduled = !1, this.unresolvedKeyframes = [...e], this.onComplete = n, this.name = s, this.motionValue = i, this.element = r, this.isAsync = o;
   }
   scheduleResolve() {
-    this.isScheduled = !0, this.isAsync ? (W.add(this), qe || (qe = !0, F.read(Rn), F.resolveKeyframes(In))) : (this.readKeyframes(), this.complete());
+    this.isScheduled = !0, this.isAsync ? (W.add(this), Ge || (Ge = !0, R.read(In), R.resolveKeyframes(Rn))) : (this.readKeyframes(), this.complete());
   }
   readKeyframes() {
     const { unresolvedKeyframes: e, name: n, element: s, motionValue: i } = this;
-    for (let r = 0; r < e.length; r++) if (e[r] === null) if (r === 0) {
-      const o = i == null ? void 0 : i.get(), a = e[e.length - 1];
-      if (o !== void 0) e[0] = o;
-      else if (s && n) {
-        const l = s.readValue(n, a);
-        l != null && (e[0] = l);
-      }
-      e[0] === void 0 && (e[0] = a), i && o === void 0 && i.set(e[0]);
-    } else e[r] = e[r - 1];
+    for (let r = 0; r < e.length; r++)
+      if (e[r] === null)
+        if (r === 0) {
+          const o = i == null ? void 0 : i.get(), a = e[e.length - 1];
+          if (o !== void 0)
+            e[0] = o;
+          else if (s && n) {
+            const l = s.readValue(n, a);
+            l != null && (e[0] = l);
+          }
+          e[0] === void 0 && (e[0] = a), i && o === void 0 && i.set(e[0]);
+        } else
+          e[r] = e[r - 1];
   }
   setFinalKeyframe() {
   }
@@ -208,159 +377,363 @@ class ct {
     this.isComplete || this.scheduleResolve();
   }
 }
-const ae = (t) => Math.round(1e5 * t) / 1e5, ht = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu, _s = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu, dt = (t, e) => (n) => !!(typeof n == "string" && _s.test(n) && n.startsWith(t) || e && !function(s) {
-  return s == null;
-}(n) && Object.prototype.hasOwnProperty.call(n, e)), Dn = (t, e, n) => (s) => {
-  if (typeof s != "string") return s;
-  const [i, r, o, a] = s.match(ht);
-  return { [t]: parseFloat(i), [e]: parseFloat(r), [n]: parseFloat(o), alpha: a !== void 0 ? parseFloat(a) : 1 };
-}, De = { ...ne, transform: (t) => Math.round(((e) => Y(0, 255, e))(t)) }, K = { test: dt("rgb", "red"), parse: Dn("red", "green", "blue"), transform: ({ red: t, green: e, blue: n, alpha: s = 1 }) => "rgba(" + De.transform(t) + ", " + De.transform(e) + ", " + De.transform(n) + ", " + ae(ue.transform(s)) + ")" }, He = { test: dt("#"), parse: function(t) {
+const le = (t) => Math.round(t * 1e5) / 1e5, ct = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
+function ui(t) {
+  return t == null;
+}
+const ci = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu, dt = (t, e) => (n) => !!(typeof n == "string" && ci.test(n) && n.startsWith(t) || e && !ui(n) && Object.prototype.hasOwnProperty.call(n, e)), On = (t, e, n) => (s) => {
+  if (typeof s != "string")
+    return s;
+  const [i, r, o, a] = s.match(ct);
+  return {
+    [t]: parseFloat(i),
+    [e]: parseFloat(r),
+    [n]: parseFloat(o),
+    alpha: a !== void 0 ? parseFloat(a) : 1
+  };
+}, di = (t) => U(0, 255, t), Le = {
+  ...se,
+  transform: (t) => Math.round(di(t))
+}, j = {
+  test: /* @__PURE__ */ dt("rgb", "red"),
+  parse: /* @__PURE__ */ On("red", "green", "blue"),
+  transform: ({ red: t, green: e, blue: n, alpha: s = 1 }) => "rgba(" + Le.transform(t) + ", " + Le.transform(e) + ", " + Le.transform(n) + ", " + le(ce.transform(s)) + ")"
+};
+function fi(t) {
   let e = "", n = "", s = "", i = "";
-  return t.length > 5 ? (e = t.substring(1, 3), n = t.substring(3, 5), s = t.substring(5, 7), i = t.substring(7, 9)) : (e = t.substring(1, 2), n = t.substring(2, 3), s = t.substring(3, 4), i = t.substring(4, 5), e += e, n += n, s += s, i += i), { red: parseInt(e, 16), green: parseInt(n, 16), blue: parseInt(s, 16), alpha: i ? parseInt(i, 16) / 255 : 1 };
-}, transform: K.transform }, _ = { test: dt("hsl", "hue"), parse: Dn("hue", "saturation", "lightness"), transform: ({ hue: t, saturation: e, lightness: n, alpha: s = 1 }) => "hsla(" + Math.round(t) + ", " + J.transform(ae(e)) + ", " + J.transform(ae(n)) + ", " + ae(ue.transform(s)) + ")" }, P = { test: (t) => K.test(t) || He.test(t) || _.test(t), parse: (t) => K.test(t) ? K.parse(t) : _.test(t) ? _.parse(t) : He.parse(t), transform: (t) => typeof t == "string" ? t : t.hasOwnProperty("red") ? K.transform(t) : _.transform(t) }, Gs = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu, Bn = "number", Nn = "color", Zs = /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 ce(t) {
-  const e = t.toString(), n = [], s = { color: [], number: [], var: [] }, i = [];
+  return t.length > 5 ? (e = t.substring(1, 3), n = t.substring(3, 5), s = t.substring(5, 7), i = t.substring(7, 9)) : (e = t.substring(1, 2), n = t.substring(2, 3), s = t.substring(3, 4), i = t.substring(4, 5), e += e, n += n, s += s, i += i), {
+    red: parseInt(e, 16),
+    green: parseInt(n, 16),
+    blue: parseInt(s, 16),
+    alpha: i ? parseInt(i, 16) / 255 : 1
+  };
+}
+const ze = {
+  test: /* @__PURE__ */ dt("#"),
+  parse: fi,
+  transform: j.transform
+}, X = {
+  test: /* @__PURE__ */ dt("hsl", "hue"),
+  parse: /* @__PURE__ */ On("hue", "saturation", "lightness"),
+  transform: ({ hue: t, saturation: e, lightness: n, alpha: s = 1 }) => "hsla(" + Math.round(t) + ", " + J.transform(le(e)) + ", " + J.transform(le(n)) + ", " + le(ce.transform(s)) + ")"
+}, C = {
+  test: (t) => j.test(t) || ze.test(t) || X.test(t),
+  parse: (t) => j.test(t) ? j.parse(t) : X.test(t) ? X.parse(t) : ze.parse(t),
+  transform: (t) => typeof t == "string" ? t : t.hasOwnProperty("red") ? j.transform(t) : X.transform(t)
+}, hi = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
+function pi(t) {
+  var e, n;
+  return isNaN(t) && typeof t == "string" && (((e = t.match(ct)) === null || e === void 0 ? void 0 : e.length) || 0) + (((n = t.match(hi)) === null || n === void 0 ? void 0 : n.length) || 0) > 0;
+}
+const En = "number", kn = "color", mi = "var", gi = "var(", Kt = "${}", yi = /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 de(t) {
+  const e = t.toString(), n = [], s = {
+    color: [],
+    number: [],
+    var: []
+  }, i = [];
   let r = 0;
-  const o = e.replace(Zs, (a) => (P.test(a) ? (s.color.push(r), i.push(Nn), n.push(P.parse(a))) : a.startsWith("var(") ? (s.var.push(r), i.push("var"), n.push(a)) : (s.number.push(r), i.push(Bn), n.push(parseFloat(a))), ++r, "${}")).split("${}");
-  return { values: n, split: o, indexes: s, types: i };
+  const a = e.replace(yi, (l) => (C.test(l) ? (s.color.push(r), i.push(kn), n.push(C.parse(l))) : l.startsWith(gi) ? (s.var.push(r), i.push(mi), n.push(l)) : (s.number.push(r), i.push(En), n.push(parseFloat(l))), ++r, Kt)).split(Kt);
+  return { values: n, split: a, indexes: s, types: i };
 }
-function Nt(t) {
-  return ce(t).values;
+function Ln(t) {
+  return de(t).values;
 }
-function Lt(t) {
-  const { split: e, types: n } = ce(t), s = e.length;
+function Nn(t) {
+  const { split: e, types: n } = de(t), s = e.length;
   return (i) => {
     let r = "";
-    for (let o = 0; o < s; o++) if (r += e[o], i[o] !== void 0) {
-      const a = n[o];
-      r += a === Bn ? ae(i[o]) : a === Nn ? P.transform(i[o]) : i[o];
-    }
+    for (let o = 0; o < s; o++)
+      if (r += e[o], i[o] !== void 0) {
+        const a = n[o];
+        a === En ? r += le(i[o]) : a === kn ? r += C.transform(i[o]) : r += i[o];
+      }
     return r;
   };
 }
-const Js = (t) => typeof t == "number" ? 0 : t, se = { test: function(t) {
-  var e, n;
-  return isNaN(t) && typeof t == "string" && (((e = t.match(ht)) === null || e === void 0 ? void 0 : e.length) || 0) + (((n = t.match(Gs)) === null || n === void 0 ? void 0 : n.length) || 0) > 0;
-}, parse: Nt, createTransformer: Lt, getAnimatableNone: function(t) {
-  const e = Nt(t);
-  return Lt(t)(e.map(Js));
-} }, Qs = /* @__PURE__ */ new Set(["brightness", "contrast", "saturate", "opacity"]);
-function ei(t) {
+const vi = (t) => typeof t == "number" ? 0 : t;
+function bi(t) {
+  const e = Ln(t);
+  return Nn(t)(e.map(vi));
+}
+const ie = {
+  test: pi,
+  parse: Ln,
+  createTransformer: Nn,
+  getAnimatableNone: bi
+}, wi = /* @__PURE__ */ new Set(["brightness", "contrast", "saturate", "opacity"]);
+function Ti(t) {
   const [e, n] = t.slice(0, -1).split("(");
-  if (e === "drop-shadow") return t;
-  const [s] = n.match(ht) || [];
-  if (!s) return t;
+  if (e === "drop-shadow")
+    return t;
+  const [s] = n.match(ct) || [];
+  if (!s)
+    return t;
   const i = n.replace(s, "");
-  let r = Qs.has(e) ? 1 : 0;
+  let r = wi.has(e) ? 1 : 0;
   return s !== n && (r *= 100), e + "(" + r + i + ")";
 }
-const ti = /\b([a-z-]*)\(.*?\)/gu, Xe = { ...se, getAnimatableNone: (t) => {
-  const e = t.match(ti);
-  return e ? e.map(ei).join(" ") : t;
-} }, ni = { borderWidth: b, borderTopWidth: b, borderRightWidth: b, borderBottomWidth: b, borderLeftWidth: b, borderRadius: b, radius: b, borderTopLeftRadius: b, borderTopRightRadius: b, borderBottomRightRadius: b, borderBottomLeftRadius: b, width: b, maxWidth: b, height: b, maxHeight: b, top: b, right: b, bottom: b, left: b, padding: b, paddingTop: b, paddingRight: b, paddingBottom: b, paddingLeft: b, margin: b, marginTop: b, marginRight: b, marginBottom: b, marginLeft: b, backgroundPositionX: b, backgroundPositionY: b }, si = { rotate: B, rotateX: B, rotateY: B, rotateZ: B, scale: fe, scaleX: fe, scaleY: fe, scaleZ: fe, skew: B, skewX: B, skewY: B, distance: b, translateX: b, translateY: b, translateZ: b, x: b, y: b, z: b, perspective: b, transformPerspective: b, opacity: ue, originX: Ot, originY: Ot, originZ: b }, $t = { ...ne, transform: Math.round }, _e = { ...ni, ...si, zIndex: $t, size: b, fillOpacity: ue, strokeOpacity: ue, numOctaves: $t }, ii = { ..._e, color: P, backgroundColor: P, outlineColor: P, fill: P, stroke: P, borderColor: P, borderTopColor: P, borderRightColor: P, borderBottomColor: P, borderLeftColor: P, filter: Xe, WebkitFilter: Xe }, pt = (t) => ii[t];
-function Ln(t, e) {
-  let n = pt(t);
-  return n !== Xe && (n = se), n.getAnimatableNone ? n.getAnimatableNone(e) : void 0;
-}
-const ri = /* @__PURE__ */ new Set(["auto", "none", "0"]);
-class $n extends ct {
+const Vi = /\b([a-z-]*)\(.*?\)/gu, He = {
+  ...ie,
+  getAnimatableNone: (t) => {
+    const e = t.match(Vi);
+    return e ? e.map(Ti).join(" ") : t;
+  }
+}, Si = {
+  // Border props
+  borderWidth: m,
+  borderTopWidth: m,
+  borderRightWidth: m,
+  borderBottomWidth: m,
+  borderLeftWidth: m,
+  borderRadius: m,
+  radius: m,
+  borderTopLeftRadius: m,
+  borderTopRightRadius: m,
+  borderBottomRightRadius: m,
+  borderBottomLeftRadius: m,
+  // Positioning props
+  width: m,
+  maxWidth: m,
+  height: m,
+  maxHeight: m,
+  top: m,
+  right: m,
+  bottom: m,
+  left: m,
+  // Spacing props
+  padding: m,
+  paddingTop: m,
+  paddingRight: m,
+  paddingBottom: m,
+  paddingLeft: m,
+  margin: m,
+  marginTop: m,
+  marginRight: m,
+  marginBottom: m,
+  marginLeft: m,
+  // Misc
+  backgroundPositionX: m,
+  backgroundPositionY: m
+}, xi = {
+  rotate: N,
+  rotateX: N,
+  rotateY: N,
+  rotateZ: N,
+  scale: ge,
+  scaleX: ge,
+  scaleY: ge,
+  scaleZ: ge,
+  skew: N,
+  skewX: N,
+  skewY: N,
+  distance: m,
+  translateX: m,
+  translateY: m,
+  translateZ: m,
+  x: m,
+  y: m,
+  z: m,
+  perspective: m,
+  transformPerspective: m,
+  opacity: ce,
+  originX: Et,
+  originY: Et,
+  originZ: m
+}, _t = {
+  ...se,
+  transform: Math.round
+}, ft = {
+  ...Si,
+  ...xi,
+  zIndex: _t,
+  size: m,
+  // SVG
+  fillOpacity: ce,
+  strokeOpacity: ce,
+  numOctaves: _t
+}, Ai = {
+  ...ft,
+  // Color props
+  color: C,
+  backgroundColor: C,
+  outlineColor: C,
+  fill: C,
+  stroke: C,
+  // Border props
+  borderColor: C,
+  borderTopColor: C,
+  borderRightColor: C,
+  borderBottomColor: C,
+  borderLeftColor: C,
+  filter: He,
+  WebkitFilter: He
+}, ht = (t) => Ai[t];
+function Bn(t, e) {
+  let n = ht(t);
+  return n !== He && (n = ie), n.getAnimatableNone ? n.getAnimatableNone(e) : void 0;
+}
+const Mi = /* @__PURE__ */ new Set(["auto", "none", "0"]);
+function Ci(t, e, n) {
+  let s = 0, i;
+  for (; s < t.length && !i; ) {
+    const r = t[s];
+    typeof r == "string" && !Mi.has(r) && de(r).values.length && (i = t[s]), s++;
+  }
+  if (i && n)
+    for (const r of e)
+      t[r] = Bn(n, i);
+}
+class Kn extends ut {
   constructor(e, n, s, i, r) {
     super(e, n, s, i, r, !0);
   }
   readKeyframes() {
     const { unresolvedKeyframes: e, element: n, name: s } = this;
-    if (!n || !n.current) return;
+    if (!n || !n.current)
+      return;
     super.readKeyframes();
     for (let l = 0; l < e.length; l++) {
-      let c = e[l];
-      if (typeof c == "string" && (c = c.trim(), ut(c))) {
-        const u = En(c, n.current);
-        u !== void 0 && (e[l] = u), l === e.length - 1 && (this.finalKeyframe = c);
+      let u = e[l];
+      if (typeof u == "string" && (u = u.trim(), lt(u))) {
+        const c = Pn(u, n.current);
+        c !== void 0 && (e[l] = c), l === e.length - 1 && (this.finalKeyframe = u);
       }
     }
-    if (this.resolveNoneKeyframes(), !zs.has(s) || e.length !== 2) return;
+    if (this.resolveNoneKeyframes(), !si.has(s) || e.length !== 2)
+      return;
     const [i, r] = e, o = Bt(i), a = Bt(r);
-    if (o !== a) if (It(o) && It(a)) for (let l = 0; l < e.length; l++) {
-      const c = e[l];
-      typeof c == "string" && (e[l] = parseFloat(c));
-    }
-    else this.needsMeasurement = !0;
+    if (o !== a)
+      if (kt(o) && kt(a))
+        for (let l = 0; l < e.length; l++) {
+          const u = e[l];
+          typeof u == "string" && (e[l] = parseFloat(u));
+        }
+      else
+        this.needsMeasurement = !0;
   }
   resolveNoneKeyframes() {
     const { unresolvedKeyframes: e, name: n } = this, s = [];
-    for (let r = 0; r < e.length; r++) (typeof (i = e[r]) == "number" ? i === 0 : i === null || i === "none" || i === "0" || Cn(i)) && s.push(r);
-    var i;
-    s.length && function(r, o, a) {
-      let l, c = 0;
-      for (; c < r.length && !l; ) {
-        const u = r[c];
-        typeof u == "string" && !ri.has(u) && ce(u).values.length && (l = r[c]), c++;
-      }
-      if (l && a) for (const u of o) r[u] = Ln(a, l);
-    }(e, s, n);
+    for (let i = 0; i < e.length; i++)
+      Ys(e[i]) && s.push(i);
+    s.length && Ci(e, s, n);
   }
   measureInitialState() {
     const { element: e, unresolvedKeyframes: n, name: s } = this;
-    if (!e || !e.current) return;
-    s === "height" && (this.suspendedScrollY = window.pageYOffset), this.measuredOrigin = X[s](e.measureViewportBox(), window.getComputedStyle(e.current)), n[0] = this.measuredOrigin;
+    if (!e || !e.current)
+      return;
+    s === "height" && (this.suspendedScrollY = window.pageYOffset), this.measuredOrigin = Q[s](e.measureViewportBox(), window.getComputedStyle(e.current)), n[0] = this.measuredOrigin;
     const i = n[n.length - 1];
     i !== void 0 && e.getValue(s, i).jump(i, !1);
   }
   measureEndState() {
     var e;
     const { element: n, name: s, unresolvedKeyframes: i } = this;
-    if (!n || !n.current) return;
+    if (!n || !n.current)
+      return;
     const r = n.getValue(s);
     r && r.jump(this.measuredOrigin, !1);
     const o = i.length - 1, a = i[o];
-    i[o] = X[s](n.measureViewportBox(), window.getComputedStyle(n.current)), a !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = a), !((e = this.removedTransforms) === null || e === void 0) && e.length && this.removedTransforms.forEach(([l, c]) => {
-      n.getValue(l).set(c);
+    i[o] = Q[s](n.measureViewportBox(), window.getComputedStyle(n.current)), a !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = a), !((e = this.removedTransforms) === null || e === void 0) && e.length && this.removedTransforms.forEach(([l, u]) => {
+      n.getValue(l).set(u);
     }), this.resolveNoneKeyframes();
   }
 }
-function mt(t) {
+function pt(t) {
   return typeof t == "function";
 }
-let ve;
-function oi() {
-  ve = void 0;
-}
-const L = { now: () => (ve === void 0 && L.set(be.isProcessing || Ls ? be.timestamp : performance.now()), ve), set: (t) => {
-  ve = t, queueMicrotask(oi);
-} }, jt = (t, e) => e !== "zIndex" && (!(typeof t != "number" && !Array.isArray(t)) || !(typeof t != "string" || !se.test(t) && t !== "0" || t.startsWith("url(")));
-function ai(t, e, n, s) {
+let ye;
+function Pi() {
+  ye = void 0;
+}
+const K = {
+  now: () => (ye === void 0 && K.set(ve.isProcessing || $s.useManualTiming ? ve.timestamp : performance.now()), ye),
+  set: (t) => {
+    ye = t, queueMicrotask(Pi);
+  }
+}, $t = (t, e) => e === "zIndex" ? !1 : !!(typeof t == "number" || Array.isArray(t) || typeof t == "string" && // It's animatable if we have a string
+(ie.test(t) || t === "0") && // And it contains numbers and/or colors
+!t.startsWith("url("));
+function Fi(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 Di(t, e, n, s) {
   const i = t[0];
-  if (i === null) return !1;
-  if (e === "display" || e === "visibility") return !0;
-  const r = t[t.length - 1], o = jt(i, e), a = jt(r, e);
-  return te(o === a, `You are trying to animate ${e} from "${i}" to "${r}". ${i} is not an animatable value - to enable this animation set ${i} to a value animatable to ${r} via the \`style\` property.`), !(!o || !a) && (function(l) {
-    const c = l[0];
-    if (l.length === 1) return !0;
-    for (let u = 0; u < l.length; u++) if (l[u] !== c) return !0;
-  }(t) || (n === "spring" || mt(n)) && s);
-}
-class jn {
+  if (i === null)
+    return !1;
+  if (e === "display" || e === "visibility")
+    return !0;
+  const r = t[t.length - 1], o = $t(i, e), a = $t(r, e);
+  return ne(o === a, `You are trying to animate ${e} from "${i}" to "${r}". ${i} is not an animatable value - to enable this animation set ${i} to a value animatable to ${r} via the \`style\` property.`), !o || !a ? !1 : Fi(t) || (n === "spring" || pt(n)) && s;
+}
+const Ri = 40;
+class _n {
   constructor({ autoplay: e = !0, delay: n = 0, type: s = "keyframes", repeat: i = 0, repeatDelay: r = 0, repeatType: o = "loop", ...a }) {
-    this.isStopped = !1, this.hasAttemptedResolve = !1, this.createdAt = L.now(), this.options = { autoplay: e, delay: n, type: s, repeat: i, repeatDelay: r, repeatType: o, ...a }, this.updateFinishedPromise();
-  }
+    this.isStopped = !1, this.hasAttemptedResolve = !1, this.createdAt = K.now(), this.options = {
+      autoplay: e,
+      delay: n,
+      type: s,
+      repeat: i,
+      repeatDelay: r,
+      repeatType: o,
+      ...a
+    }, 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() {
-    return this.resolvedAt && this.resolvedAt - this.createdAt > 40 ? this.resolvedAt : this.createdAt;
+    return this.resolvedAt ? this.resolvedAt - this.createdAt > Ri ? this.resolvedAt : this.createdAt : 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() {
-    return this._resolved || this.hasAttemptedResolve || (Rn(), In()), this._resolved;
+    return !this._resolved && !this.hasAttemptedResolve && li(), 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(e, n) {
-    this.resolvedAt = L.now(), this.hasAttemptedResolve = !0;
-    const { name: s, type: i, velocity: r, delay: o, onComplete: a, onUpdate: l, isGenerator: c } = this.options;
-    if (!c && !ai(e, s, i, r)) {
-      if (!o) return l == null || l(Pe(e, this.options, n)), a == null || a(), void this.resolveFinishedPromise();
-      this.options.duration = 0;
-    }
-    const u = this.initPlayback(e, n);
-    u !== !1 && (this._resolved = { keyframes: e, finalKeyframe: n, ...u }, this.onPostResolved());
+    this.resolvedAt = K.now(), this.hasAttemptedResolve = !0;
+    const { name: s, type: i, velocity: r, delay: o, onComplete: a, onUpdate: l, isGenerator: u } = this.options;
+    if (!u && !Di(e, s, i, r))
+      if (o)
+        this.options.duration = 0;
+      else {
+        l == null || l(Fe(e, this.options, n)), a == null || a(), this.resolveFinishedPromise();
+        return;
+      }
+    const c = this.initPlayback(e, n);
+    c !== !1 && (this._resolved = {
+      keyframes: e,
+      finalKeyframe: n,
+      ...c
+    }, 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(e, n) {
     return this.currentFinishedPromise.then(e, n);
   }
@@ -373,325 +746,504 @@ class jn {
     });
   }
 }
-const ft = (t, e, n) => {
+const mt = (t, e, n) => {
   const s = e - t;
   return s === 0 ? 1 : (n - t) / s;
-}, Kn = (t, e, n = 10) => {
+}, $n = (t, e, n = 10) => {
   let s = "";
   const i = Math.max(Math.round(e / n), 2);
-  for (let r = 0; r < i; r++) s += t(ft(0, i - 1, r)) + ", ";
+  for (let r = 0; r < i; r++)
+    s += t(mt(0, i - 1, r)) + ", ";
   return `linear(${s.substring(0, s.length - 2)})`;
 };
-function Wn(t, e) {
+function jn(t, e) {
   return e ? t * (1e3 / e) : 0;
 }
-function Un(t, e, n) {
-  const s = Math.max(e - 5, 0);
-  return Wn(n - t(s), e - s);
-}
-const Yn = 100, qn = 10, ge = 1, zn = 0, li = 800, Hn = 0.3, ui = 0.3, Kt = { granular: 0.01, default: 2 }, Wt = { granular: 5e-3, default: 0.5 }, ci = 0.01, Ut = 10, hi = 0.05, di = 1;
-function pi({ duration: t = li, bounce: e = Hn, velocity: n = zn, mass: s = ge }) {
+const Ii = 5;
+function Wn(t, e, n) {
+  const s = Math.max(e - Ii, 0);
+  return jn(n - t(s), e - s);
+}
+const x = {
+  // 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
+}, jt = 1e-3;
+function Oi({ duration: t = x.duration, bounce: e = x.bounce, velocity: n = x.velocity, mass: s = x.mass }) {
   let i, r;
-  te(t <= R(Ut), "Spring duration must be 10 seconds or less");
+  ne(t <= L(x.maxDuration), "Spring duration must be 10 seconds or less");
   let o = 1 - e;
-  o = Y(hi, di, o), t = Y(ci, Ut, N(t)), o < 1 ? (i = (l) => {
-    const c = l * o, u = c * t;
-    return 1e-3 - (c - n) / Ge(l, o) * Math.exp(-u);
-  }, r = (l) => {
-    const c = l * o * t, u = c * n + n, h = Math.pow(o, 2) * Math.pow(l, 2) * t, d = Math.exp(-c), f = Ge(Math.pow(l, 2), o);
-    return (1e-3 - i(l) > 0 ? -1 : 1) * ((u - h) * d) / f;
-  }) : (i = (l) => Math.exp(-l * t) * ((l - n) * t + 1) - 1e-3, r = (l) => Math.exp(-l * t) * (t * t * (n - l)));
-  const a = function(l, c, u) {
-    let h = u;
-    for (let d = 1; d < mi; d++) h -= l(h) / c(h);
-    return h;
-  }(i, r, 5 / t);
-  if (t = R(t), isNaN(a)) return { stiffness: Yn, damping: qn, duration: t };
+  o = U(x.minDamping, x.maxDamping, o), t = U(x.minDuration, x.maxDuration, B(t)), o < 1 ? (i = (u) => {
+    const c = u * o, f = c * t, d = c - n, h = qe(u, o), y = Math.exp(-f);
+    return jt - d / h * y;
+  }, r = (u) => {
+    const f = u * o * t, d = f * n + n, h = Math.pow(o, 2) * Math.pow(u, 2) * t, y = Math.exp(-f), v = qe(Math.pow(u, 2), o);
+    return (-i(u) + jt > 0 ? -1 : 1) * ((d - h) * y) / v;
+  }) : (i = (u) => {
+    const c = Math.exp(-u * t), f = (u - n) * t + 1;
+    return -1e-3 + c * f;
+  }, r = (u) => {
+    const c = Math.exp(-u * t), f = (n - u) * (t * t);
+    return c * f;
+  });
+  const a = 5 / t, l = ki(i, r, a);
+  if (t = L(t), isNaN(l))
+    return {
+      stiffness: x.stiffness,
+      damping: x.damping,
+      duration: t
+    };
   {
-    const l = Math.pow(a, 2) * s;
-    return { stiffness: l, damping: 2 * o * Math.sqrt(s * l), duration: t };
+    const u = Math.pow(l, 2) * s;
+    return {
+      stiffness: u,
+      damping: o * 2 * Math.sqrt(s * u),
+      duration: t
+    };
   }
 }
-const mi = 12;
-function Ge(t, e) {
-  return t * Math.sqrt(1 - e * e);
+const Ei = 12;
+function ki(t, e, n) {
+  let s = n;
+  for (let i = 1; i < Ei; i++)
+    s = s - t(s) / e(s);
+  return s;
 }
-const Ze = 2e4;
-function Xn(t) {
-  let e = 0, n = t.next(e);
-  for (; !n.done && e < Ze; ) e += 50, n = t.next(e);
-  return e >= Ze ? 1 / 0 : e;
+function qe(t, e) {
+  return t * Math.sqrt(1 - e * e);
 }
-const fi = ["duration", "bounce"], vi = ["stiffness", "damping", "mass"];
-function Yt(t, e) {
+const Ye = 2e4;
+function Gn(t) {
+  let e = 0;
+  const n = 50;
+  let s = t.next(e);
+  for (; !s.done && e < Ye; )
+    e += n, s = t.next(e);
+  return e >= Ye ? 1 / 0 : e;
+}
+const Li = ["duration", "bounce"], Ni = ["stiffness", "damping", "mass"];
+function Wt(t, e) {
   return e.some((n) => t[n] !== void 0);
 }
-function _n(t = ui, e = Hn) {
-  const n = typeof t != "object" ? { visualDuration: t, keyframes: [0, 1], bounce: e } : t;
-  let { restSpeed: s, restDelta: i } = n;
-  const r = n.keyframes[0], o = n.keyframes[n.keyframes.length - 1], a = { done: !1, value: r }, { stiffness: l, damping: c, mass: u, duration: h, velocity: d, isResolvedFromDuration: f } = function(y) {
-    let w = { velocity: zn, stiffness: Yn, damping: qn, mass: ge, isResolvedFromDuration: !1, ...y };
-    if (!Yt(y, vi) && Yt(y, fi)) if (y.visualDuration) {
-      const T = y.visualDuration, A = 2 * Math.PI / (1.2 * T), V = A * A, M = 2 * Y(0.05, 1, 1 - y.bounce) * Math.sqrt(V);
-      w = { ...w, mass: ge, stiffness: V, damping: M };
+function Bi(t) {
+  let e = {
+    velocity: x.velocity,
+    stiffness: x.stiffness,
+    damping: x.damping,
+    mass: x.mass,
+    isResolvedFromDuration: !1,
+    ...t
+  };
+  if (!Wt(t, Ni) && Wt(t, Li))
+    if (t.visualDuration) {
+      const n = t.visualDuration, s = 2 * Math.PI / (n * 1.2), i = s * s, r = 2 * U(0.05, 1, 1 - t.bounce) * Math.sqrt(i);
+      e = {
+        ...e,
+        mass: x.mass,
+        stiffness: i,
+        damping: r
+      };
     } else {
-      const T = pi(y);
-      w = { ...w, ...T, mass: ge }, w.isResolvedFromDuration = !0;
+      const n = Oi(t);
+      e = {
+        ...e,
+        ...n,
+        mass: x.mass
+      }, e.isResolvedFromDuration = !0;
     }
-    return w;
-  }({ ...n, velocity: -N(n.velocity || 0) }), v = d || 0, p = c / (2 * Math.sqrt(l * u)), g = o - r, m = N(Math.sqrt(l / u)), S = Math.abs(g) < 5;
-  let x;
-  if (s || (s = S ? Kt.granular : Kt.default), i || (i = S ? Wt.granular : Wt.default), p < 1) {
-    const y = Ge(m, p);
-    x = (w) => {
-      const T = Math.exp(-p * m * w);
-      return o - T * ((v + p * m * g) / y * Math.sin(y * w) + g * Math.cos(y * w));
+  return e;
+}
+function Un(t = x.visualDuration, e = x.bounce) {
+  const n = typeof t != "object" ? {
+    visualDuration: t,
+    keyframes: [0, 1],
+    bounce: e
+  } : t;
+  let { restSpeed: s, restDelta: i } = n;
+  const r = n.keyframes[0], o = n.keyframes[n.keyframes.length - 1], a = { done: !1, value: r }, { stiffness: l, damping: u, mass: c, duration: f, velocity: d, isResolvedFromDuration: h } = Bi({
+    ...n,
+    velocity: -B(n.velocity || 0)
+  }), y = d || 0, v = u / (2 * Math.sqrt(l * c)), b = o - r, p = B(Math.sqrt(l / c)), g = Math.abs(b) < 5;
+  s || (s = g ? x.restSpeed.granular : x.restSpeed.default), i || (i = g ? x.restDelta.granular : x.restDelta.default);
+  let V;
+  if (v < 1) {
+    const w = qe(p, v);
+    V = (S) => {
+      const M = Math.exp(-v * p * S);
+      return o - M * ((y + v * p * b) / w * Math.sin(w * S) + b * Math.cos(w * S));
     };
-  } else if (p === 1) x = (y) => o - Math.exp(-m * y) * (g + (v + m * g) * y);
+  } else if (v === 1)
+    V = (w) => o - Math.exp(-p * w) * (b + (y + p * b) * w);
   else {
-    const y = m * Math.sqrt(p * p - 1);
-    x = (w) => {
-      const T = Math.exp(-p * m * w), A = Math.min(y * w, 300);
-      return o - T * ((v + p * m * g) * Math.sinh(A) + y * g * Math.cosh(A)) / y;
+    const w = p * Math.sqrt(v * v - 1);
+    V = (S) => {
+      const M = Math.exp(-v * p * S), T = Math.min(w * S, 300);
+      return o - M * ((y + v * p * b) * Math.sinh(T) + w * b * Math.cosh(T)) / w;
     };
   }
-  const C = { calculatedDuration: f && h || null, next: (y) => {
-    const w = x(y);
-    if (f) a.done = y >= h;
-    else {
-      let T = 0;
-      p < 1 && (T = y === 0 ? R(v) : Un(x, y, w));
-      const A = Math.abs(T) <= s, V = Math.abs(o - w) <= i;
-      a.done = A && V;
+  const A = {
+    calculatedDuration: h && f || null,
+    next: (w) => {
+      const S = V(w);
+      if (h)
+        a.done = w >= f;
+      else {
+        let M = 0;
+        v < 1 && (M = w === 0 ? L(y) : Wn(V, w, S));
+        const T = Math.abs(M) <= s, D = Math.abs(o - S) <= i;
+        a.done = T && D;
+      }
+      return a.value = a.done ? o : S, a;
+    },
+    toString: () => {
+      const w = Math.min(Gn(A), Ye), S = $n((M) => A.next(w * M).value, w, 30);
+      return w + "ms " + S;
     }
-    return a.value = a.done ? o : w, a;
-  }, toString: () => {
-    const y = Math.min(Xn(C), Ze), w = Kn((T) => C.next(y * T).value, y, 30);
-    return y + "ms " + w;
-  } };
-  return C;
-}
-function qt({ keyframes: t, velocity: e = 0, power: n = 0.8, timeConstant: s = 325, bounceDamping: i = 10, bounceStiffness: r = 500, modifyTarget: o, min: a, max: l, restDelta: c = 0.5, restSpeed: u }) {
-  const h = t[0], d = { done: !1, value: h }, f = (T) => a === void 0 ? l : l === void 0 || Math.abs(a - T) < Math.abs(l - T) ? a : l;
+  };
+  return A;
+}
+function Gt({ keyframes: t, velocity: e = 0, power: n = 0.8, timeConstant: s = 325, bounceDamping: i = 10, bounceStiffness: r = 500, modifyTarget: o, min: a, max: l, restDelta: u = 0.5, restSpeed: c }) {
+  const f = t[0], d = {
+    done: !1,
+    value: f
+  }, h = (T) => a !== void 0 && T < a || l !== void 0 && T > l, y = (T) => a === void 0 ? l : l === void 0 || Math.abs(a - T) < Math.abs(l - T) ? a : l;
   let v = n * e;
-  const p = h + v, g = o === void 0 ? p : o(p);
-  g !== p && (v = g - h);
-  const m = (T) => -v * Math.exp(-T / s), S = (T) => g + m(T), x = (T) => {
-    const A = m(T), V = S(T);
-    d.done = Math.abs(A) <= c, d.value = d.done ? g : V;
+  const b = f + v, p = o === void 0 ? b : o(b);
+  p !== b && (v = p - f);
+  const g = (T) => -v * Math.exp(-T / s), V = (T) => p + g(T), A = (T) => {
+    const D = g(T), I = V(T);
+    d.done = Math.abs(D) <= u, d.value = d.done ? p : I;
   };
-  let C, y;
-  const w = (T) => {
-    var A;
-    A = d.value, (a !== void 0 && A < a || l !== void 0 && A > l) && (C = T, y = _n({ keyframes: [d.value, f(d.value)], velocity: Un(S, T, d.value), damping: i, stiffness: r, restDelta: c, restSpeed: u }));
+  let w, S;
+  const M = (T) => {
+    h(d.value) && (w = T, S = Un({
+      keyframes: [d.value, y(d.value)],
+      velocity: Wn(V, T, d.value),
+      // TODO: This should be passing * 1000
+      damping: i,
+      stiffness: r,
+      restDelta: u,
+      restSpeed: c
+    }));
+  };
+  return M(0), {
+    calculatedDuration: null,
+    next: (T) => {
+      let D = !1;
+      return !S && w === void 0 && (D = !0, A(T), M(T)), w !== void 0 && T >= w ? S.next(T - w) : (!D && A(T), d);
+    }
   };
-  return w(0), { calculatedDuration: null, next: (T) => {
-    let A = !1;
-    return y || C !== void 0 || (A = !0, x(T), w(T)), C !== void 0 && T >= C ? y.next(T - C) : (!A && x(T), d);
-  } };
-}
-const gi = de(0.42, 0, 1, 1), yi = de(0, 0, 0.58, 1), Gn = de(0.42, 0, 0.58, 1), vt = (t) => Array.isArray(t) && typeof t[0] == "number", zt = { linear: $, easeIn: gi, easeInOut: Gn, easeOut: yi, circIn: lt, circInOut: Vn, circOut: js, backIn: at, backInOut: xn, backOut: Tn, anticipate: An }, Ht = (t) => {
-  if (vt(t)) {
-    U(t.length === 4, "Cubic bezier arrays must contain four numerical values.");
+}
+const Ki = /* @__PURE__ */ he(0.42, 0, 1, 1), _i = /* @__PURE__ */ he(0, 0, 0.58, 1), zn = /* @__PURE__ */ he(0.42, 0, 0.58, 1), $i = (t) => Array.isArray(t) && typeof t[0] != "number", gt = (t) => Array.isArray(t) && typeof t[0] == "number", Ut = {
+  linear: _,
+  easeIn: Ki,
+  easeInOut: zn,
+  easeOut: _i,
+  circIn: at,
+  circInOut: Sn,
+  circOut: qs,
+  backIn: ot,
+  backInOut: Tn,
+  backOut: wn,
+  anticipate: Vn
+}, zt = (t) => {
+  if (gt(t)) {
+    G(t.length === 4, "Cubic bezier arrays must contain four numerical values.");
     const [e, n, s, i] = t;
-    return de(e, n, s, i);
-  }
-  return typeof t == "string" ? (U(zt[t] !== void 0, `Invalid easing type '${t}'`), zt[t]) : t;
-}, wi = (t, e) => (n) => e(t(n)), ke = (...t) => t.reduce(wi), Ee = (t, e, n) => t + (e - t) * n;
-function Be(t, e, n) {
-  return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? t + 6 * (e - t) * n : n < 0.5 ? e : n < 2 / 3 ? t + (e - t) * (2 / 3 - n) * 6 : t;
+    return he(e, n, s, i);
+  } else if (typeof t == "string")
+    return G(Ut[t] !== void 0, `Invalid easing type '${t}'`), Ut[t];
+  return t;
+}, ji = (t, e) => (n) => e(t(n)), De = (...t) => t.reduce(ji), Re = (t, e, n) => t + (e - t) * n;
+function Ne(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 Wi({ hue: t, saturation: e, lightness: n, alpha: s }) {
+  t /= 360, e /= 100, n /= 100;
+  let i = 0, r = 0, o = 0;
+  if (!e)
+    i = r = o = n;
+  else {
+    const a = n < 0.5 ? n * (1 + e) : n + e - n * e, l = 2 * n - a;
+    i = Ne(l, a, t + 1 / 3), r = Ne(l, a, t), o = Ne(l, a, t - 1 / 3);
+  }
+  return {
+    red: Math.round(i * 255),
+    green: Math.round(r * 255),
+    blue: Math.round(o * 255),
+    alpha: s
+  };
 }
-function Se(t, e) {
+function be(t, e) {
   return (n) => n > 0 ? e : t;
 }
-const Ne = (t, e, n) => {
+const Be = (t, e, n) => {
   const s = t * t, i = n * (e * e - s) + s;
   return i < 0 ? 0 : Math.sqrt(i);
-}, bi = [He, K, _];
-function Xt(t) {
-  const e = (n = t, bi.find((i) => i.test(n)));
-  var n;
-  if (te(!!e, `'${t}' is not an animatable color. Use the equivalent color code instead.`), !e) return !1;
-  let s = e.parse(t);
-  return e === _ && (s = function({ hue: i, saturation: r, lightness: o, alpha: a }) {
-    i /= 360, o /= 100;
-    let l = 0, c = 0, u = 0;
-    if (r /= 100) {
-      const h = o < 0.5 ? o * (1 + r) : o + r - o * r, d = 2 * o - h;
-      l = Be(d, h, i + 1 / 3), c = Be(d, h, i), u = Be(d, h, i - 1 / 3);
-    } else l = c = u = o;
-    return { red: Math.round(255 * l), green: Math.round(255 * c), blue: Math.round(255 * u), alpha: a };
-  }(s)), s;
-}
-const _t = (t, e) => {
-  const n = Xt(t), s = Xt(e);
-  if (!n || !s) return Se(t, e);
+}, Gi = [ze, j, X], Ui = (t) => Gi.find((e) => e.test(t));
+function Ht(t) {
+  const e = Ui(t);
+  if (ne(!!e, `'${t}' is not an animatable color. Use the equivalent color code instead.`), !e)
+    return !1;
+  let n = e.parse(t);
+  return e === X && (n = Wi(n)), n;
+}
+const qt = (t, e) => {
+  const n = Ht(t), s = Ht(e);
+  if (!n || !s)
+    return be(t, e);
   const i = { ...n };
-  return (r) => (i.red = Ne(n.red, s.red, r), i.green = Ne(n.green, s.green, r), i.blue = Ne(n.blue, s.blue, r), i.alpha = Ee(n.alpha, s.alpha, r), K.transform(i));
-}, Le = /* @__PURE__ */ new Set(["none", "hidden"]);
-function Si(t, e) {
-  return (n) => Ee(t, e, n);
+  return (r) => (i.red = Be(n.red, s.red, r), i.green = Be(n.green, s.green, r), i.blue = Be(n.blue, s.blue, r), i.alpha = Re(n.alpha, s.alpha, r), j.transform(i));
+}, Xe = /* @__PURE__ */ new Set(["none", "hidden"]);
+function zi(t, e) {
+  return Xe.has(t) ? (n) => n <= 0 ? t : e : (n) => n >= 1 ? e : t;
 }
-function gt(t) {
-  return typeof t == "number" ? Si : typeof t == "string" ? ut(t) ? Se : P.test(t) ? _t : xi : Array.isArray(t) ? Zn : typeof t == "object" ? P.test(t) ? _t : Ti : Se;
+function Hi(t, e) {
+  return (n) => Re(t, e, n);
 }
-function Zn(t, e) {
-  const n = [...t], s = n.length, i = t.map((r, o) => gt(r)(r, e[o]));
+function yt(t) {
+  return typeof t == "number" ? Hi : typeof t == "string" ? lt(t) ? be : C.test(t) ? qt : Xi : Array.isArray(t) ? Hn : typeof t == "object" ? C.test(t) ? qt : qi : be;
+}
+function Hn(t, e) {
+  const n = [...t], s = n.length, i = t.map((r, o) => yt(r)(r, e[o]));
   return (r) => {
-    for (let o = 0; o < s; o++) n[o] = i[o](r);
+    for (let o = 0; o < s; o++)
+      n[o] = i[o](r);
     return n;
   };
 }
-function Ti(t, e) {
+function qi(t, e) {
   const n = { ...t, ...e }, s = {};
-  for (const i in n) t[i] !== void 0 && e[i] !== void 0 && (s[i] = gt(t[i])(t[i], e[i]));
+  for (const i in n)
+    t[i] !== void 0 && e[i] !== void 0 && (s[i] = yt(t[i])(t[i], e[i]));
   return (i) => {
-    for (const r in s) n[r] = s[r](i);
+    for (const r in s)
+      n[r] = s[r](i);
     return n;
   };
 }
-const xi = (t, e) => {
-  const n = se.createTransformer(e), s = ce(t), i = ce(e);
-  return s.indexes.var.length === i.indexes.var.length && s.indexes.color.length === i.indexes.color.length && s.indexes.number.length >= i.indexes.number.length ? Le.has(t) && !i.values.length || Le.has(e) && !s.values.length ? function(r, o) {
-    return Le.has(r) ? (a) => a <= 0 ? r : o : (a) => a >= 1 ? o : r;
-  }(t, e) : ke(Zn(function(r, o) {
-    var a;
-    const l = [], c = { color: 0, var: 0, number: 0 };
-    for (let u = 0; u < o.values.length; u++) {
-      const h = o.types[u], d = r.indexes[h][c[h]], f = (a = r.values[d]) !== null && a !== void 0 ? a : 0;
-      l[u] = f, c[h]++;
-    }
-    return l;
-  }(s, i), i.values), n) : (te(!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.`), Se(t, e));
+function Yi(t, e) {
+  var n;
+  const s = [], i = { color: 0, var: 0, number: 0 };
+  for (let r = 0; r < e.values.length; r++) {
+    const o = e.types[r], a = t.indexes[o][i[o]], l = (n = t.values[a]) !== null && n !== void 0 ? n : 0;
+    s[r] = l, i[o]++;
+  }
+  return s;
+}
+const Xi = (t, e) => {
+  const n = ie.createTransformer(e), s = de(t), i = de(e);
+  return s.indexes.var.length === i.indexes.var.length && s.indexes.color.length === i.indexes.color.length && s.indexes.number.length >= i.indexes.number.length ? Xe.has(t) && !i.values.length || Xe.has(e) && !s.values.length ? zi(t, e) : De(Hn(Yi(s, i), i.values), n) : (ne(!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.`), be(t, e));
 };
-function Jn(t, e, n) {
-  return typeof t == "number" && typeof e == "number" && typeof n == "number" ? Ee(t, e, n) : gt(t)(t, e);
+function qn(t, e, n) {
+  return typeof t == "number" && typeof e == "number" && typeof n == "number" ? Re(t, e, n) : yt(t)(t, e);
+}
+function Zi(t, e, n) {
+  const s = [], i = n || qn, r = t.length - 1;
+  for (let o = 0; o < r; o++) {
+    let a = i(t[o], t[o + 1]);
+    if (e) {
+      const l = Array.isArray(e) ? e[o] || _ : e;
+      a = De(l, a);
+    }
+    s.push(a);
+  }
+  return s;
 }
-function Ai(t, e, { clamp: n = !0, ease: s, mixer: i } = {}) {
+function Ji(t, e, { clamp: n = !0, ease: s, mixer: i } = {}) {
   const r = t.length;
-  if (U(r === e.length, "Both input and output ranges must be the same length"), r === 1) return () => e[0];
-  if (r === 2 && t[0] === t[1]) return () => e[1];
+  if (G(r === e.length, "Both input and output ranges must be the same length"), r === 1)
+    return () => e[0];
+  if (r === 2 && t[0] === t[1])
+    return () => e[1];
   t[0] > t[r - 1] && (t = [...t].reverse(), e = [...e].reverse());
-  const o = function(c, u, h) {
-    const d = [], f = h || Jn, v = c.length - 1;
-    for (let p = 0; p < v; p++) {
-      let g = f(c[p], c[p + 1]);
-      if (u) {
-        const m = Array.isArray(u) ? u[p] || $ : u;
-        g = ke(m, g);
-      }
-      d.push(g);
-    }
-    return d;
-  }(e, s, i), a = o.length, l = (c) => {
-    let u = 0;
-    if (a > 1) for (; u < t.length - 2 && !(c < t[u + 1]); u++) ;
-    const h = ft(t[u], t[u + 1], c);
-    return o[u](h);
+  const o = Zi(e, s, i), a = o.length, l = (u) => {
+    let c = 0;
+    if (a > 1)
+      for (; c < t.length - 2 && !(u < t[c + 1]); c++)
+        ;
+    const f = mt(t[c], t[c + 1], u);
+    return o[c](f);
   };
-  return n ? (c) => l(Y(t[0], t[r - 1], c)) : l;
+  return n ? (u) => l(U(t[0], t[r - 1], u)) : l;
 }
-function Vi(t) {
-  const e = [0];
-  return function(n, s) {
-    const i = n[n.length - 1];
-    for (let r = 1; r <= s; r++) {
-      const o = ft(0, s, r);
-      n.push(Ee(i, 1, o));
-    }
-  }(e, t.length - 1), e;
+function Qi(t, e) {
+  const n = t[t.length - 1];
+  for (let s = 1; s <= e; s++) {
+    const i = mt(0, e, s);
+    t.push(Re(n, 1, i));
+  }
 }
-function Te({ duration: t = 300, keyframes: e, times: n, ease: s = "easeInOut" }) {
-  const i = ((u) => Array.isArray(u) && typeof u[0] != "number")(s) ? s.map(Ht) : Ht(s), r = { done: !1, value: e[0] }, o = function(u, h) {
-    return u.map((d) => d * h);
-  }(n && n.length === e.length ? n : Vi(e), t), a = Ai(o, e, { ease: Array.isArray(i) ? i : (l = e, c = i, l.map(() => c || Gn).splice(0, l.length - 1)) });
-  var l, c;
-  return { calculatedDuration: t, next: (u) => (r.value = a(u), r.done = u >= t, r) };
+function er(t) {
+  const e = [0];
+  return Qi(e, t.length - 1), e;
+}
+function tr(t, e) {
+  return t.map((n) => n * e);
+}
+function nr(t, e) {
+  return t.map(() => e || zn).splice(0, t.length - 1);
+}
+function we({ duration: t = 300, keyframes: e, times: n, ease: s = "easeInOut" }) {
+  const i = $i(s) ? s.map(zt) : zt(s), r = {
+    done: !1,
+    value: e[0]
+  }, o = tr(
+    // 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 : er(e),
+    t
+  ), a = Ji(o, e, {
+    ease: Array.isArray(i) ? i : nr(e, i)
+  });
+  return {
+    calculatedDuration: t,
+    next: (l) => (r.value = a(l), r.done = l >= t, r)
+  };
 }
-const Ci = (t) => {
+const sr = (t) => {
   const e = ({ timestamp: n }) => t(n);
-  return { start: () => F.update(e, !0), stop: () => Ye(e), now: () => be.isProcessing ? be.timestamp : L.now() };
-}, Mi = { decay: qt, inertia: qt, tween: Te, keyframes: Te, spring: _n }, Pi = (t) => t / 100;
-class Je extends jn {
+  return {
+    start: () => R.update(e, !0),
+    stop: () => We(e),
+    /**
+     * If we're processing this frame we can use the
+     * framelocked timestamp to keep things in sync.
+     */
+    now: () => ve.isProcessing ? ve.timestamp : K.now()
+  };
+}, ir = {
+  decay: Gt,
+  inertia: Gt,
+  tween: we,
+  keyframes: we,
+  spring: Un
+}, rr = (t) => t / 100;
+class vt extends _n {
   constructor(e) {
     super(e), this.holdTime = null, this.cancelTime = null, this.currentTime = 0, this.playbackSpeed = 1, this.pendingPlayState = "running", this.startTime = null, this.state = "idle", this.stop = () => {
-      if (this.resolver.cancel(), this.isStopped = !0, this.state === "idle") return;
+      if (this.resolver.cancel(), this.isStopped = !0, this.state === "idle")
+        return;
       this.teardown();
-      const { onStop: a } = this.options;
-      a && a();
+      const { onStop: l } = this.options;
+      l && l();
     };
-    const { name: n, motionValue: s, element: i, keyframes: r } = this.options, o = (i == null ? void 0 : i.KeyframeResolver) || ct;
-    this.resolver = new o(r, (a, l) => this.onKeyframesResolved(a, l), n, s, i), this.resolver.scheduleResolve();
+    const { name: n, motionValue: s, element: i, keyframes: r } = this.options, o = (i == null ? void 0 : i.KeyframeResolver) || ut, a = (l, u) => this.onKeyframesResolved(l, u);
+    this.resolver = new o(r, a, n, s, i), this.resolver.scheduleResolve();
   }
   flatten() {
     super.flatten(), this._resolved && Object.assign(this._resolved, this.initPlayback(this._resolved.keyframes));
   }
   initPlayback(e) {
-    const { type: n = "keyframes", repeat: s = 0, repeatDelay: i = 0, repeatType: r, velocity: o = 0 } = this.options, a = mt(n) ? n : Mi[n] || Te;
-    let l, c;
-    a !== Te && typeof e[0] != "number" && (process.env.NODE_ENV !== "production" && U(e.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${e}`), l = ke(Pi, Jn(e[0], e[1])), e = [0, 100]);
-    const u = a({ ...this.options, keyframes: e });
-    r === "mirror" && (c = a({ ...this.options, keyframes: [...e].reverse(), velocity: -o })), u.calculatedDuration === null && (u.calculatedDuration = Xn(u));
-    const { calculatedDuration: h } = u, d = h + i;
-    return { generator: u, mirroredGenerator: c, mapPercentToKeyframes: l, calculatedDuration: h, resolvedDuration: d, totalDuration: d * (s + 1) - i };
+    const { type: n = "keyframes", repeat: s = 0, repeatDelay: i = 0, repeatType: r, velocity: o = 0 } = this.options, a = pt(n) ? n : ir[n] || we;
+    let l, u;
+    a !== we && typeof e[0] != "number" && (process.env.NODE_ENV !== "production" && G(e.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${e}`), l = De(rr, qn(e[0], e[1])), e = [0, 100]);
+    const c = a({ ...this.options, keyframes: e });
+    r === "mirror" && (u = a({
+      ...this.options,
+      keyframes: [...e].reverse(),
+      velocity: -o
+    })), c.calculatedDuration === null && (c.calculatedDuration = Gn(c));
+    const { calculatedDuration: f } = c, d = f + i, h = d * (s + 1) - i;
+    return {
+      generator: c,
+      mirroredGenerator: u,
+      mapPercentToKeyframes: l,
+      calculatedDuration: f,
+      resolvedDuration: d,
+      totalDuration: h
+    };
   }
   onPostResolved() {
     const { autoplay: e = !0 } = this.options;
-    this.play(), this.pendingPlayState !== "paused" && e ? this.state = this.pendingPlayState : this.pause();
+    this.play(), this.pendingPlayState === "paused" || !e ? this.pause() : this.state = this.pendingPlayState;
   }
   tick(e, n = !1) {
     const { resolved: s } = this;
     if (!s) {
-      const { keyframes: A } = this.options;
-      return { done: !0, value: A[A.length - 1] };
+      const { keyframes: T } = this.options;
+      return { done: !0, value: T[T.length - 1] };
     }
-    const { finalKeyframe: i, generator: r, mirroredGenerator: o, mapPercentToKeyframes: a, keyframes: l, calculatedDuration: c, totalDuration: u, resolvedDuration: h } = s;
-    if (this.startTime === null) return r.next(0);
-    const { delay: d, repeat: f, repeatType: v, repeatDelay: p, onUpdate: g } = this.options;
-    this.speed > 0 ? this.startTime = Math.min(this.startTime, e) : this.speed < 0 && (this.startTime = Math.min(e - u / this.speed, this.startTime)), n ? this.currentTime = e : this.holdTime !== null ? this.currentTime = this.holdTime : this.currentTime = Math.round(e - this.startTime) * this.speed;
-    const m = this.currentTime - d * (this.speed >= 0 ? 1 : -1), S = this.speed >= 0 ? m < 0 : m > u;
-    this.currentTime = Math.max(m, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = u);
-    let x = this.currentTime, C = r;
-    if (f) {
-      const A = Math.min(this.currentTime, u) / h;
-      let V = Math.floor(A), M = A % 1;
-      !M && A >= 1 && (M = 1), M === 1 && V--, V = Math.min(V, f + 1), V % 2 && (v === "reverse" ? (M = 1 - M, p && (M -= p / h)) : v === "mirror" && (C = o)), x = Y(0, 1, M) * h;
+    const { finalKeyframe: i, generator: r, mirroredGenerator: o, mapPercentToKeyframes: a, keyframes: l, calculatedDuration: u, totalDuration: c, resolvedDuration: f } = s;
+    if (this.startTime === null)
+      return r.next(0);
+    const { delay: d, repeat: h, repeatType: y, repeatDelay: v, onUpdate: b } = this.options;
+    this.speed > 0 ? this.startTime = Math.min(this.startTime, e) : this.speed < 0 && (this.startTime = Math.min(e - c / this.speed, this.startTime)), n ? this.currentTime = e : this.holdTime !== null ? this.currentTime = this.holdTime : this.currentTime = Math.round(e - this.startTime) * this.speed;
+    const p = this.currentTime - d * (this.speed >= 0 ? 1 : -1), g = this.speed >= 0 ? p < 0 : p > c;
+    this.currentTime = Math.max(p, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = c);
+    let V = this.currentTime, A = r;
+    if (h) {
+      const T = Math.min(this.currentTime, c) / f;
+      let D = Math.floor(T), I = T % 1;
+      !I && T >= 1 && (I = 1), I === 1 && D--, D = Math.min(D, h + 1), !!(D % 2) && (y === "reverse" ? (I = 1 - I, v && (I -= v / f)) : y === "mirror" && (A = o)), V = U(0, 1, I) * f;
     }
-    const y = S ? { done: !1, value: l[0] } : C.next(x);
-    a && (y.value = a(y.value));
-    let { done: w } = y;
-    S || c === null || (w = this.speed >= 0 ? this.currentTime >= u : this.currentTime <= 0);
-    const T = this.holdTime === null && (this.state === "finished" || this.state === "running" && w);
-    return T && i !== void 0 && (y.value = Pe(l, this.options, i)), g && g(y.value), T && this.finish(), y;
+    const w = g ? { done: !1, value: l[0] } : A.next(V);
+    a && (w.value = a(w.value));
+    let { done: S } = w;
+    !g && u !== null && (S = this.speed >= 0 ? this.currentTime >= c : this.currentTime <= 0);
+    const M = this.holdTime === null && (this.state === "finished" || this.state === "running" && S);
+    return M && i !== void 0 && (w.value = Fe(l, this.options, i)), b && b(w.value), M && this.finish(), w;
   }
   get duration() {
     const { resolved: e } = this;
-    return e ? N(e.calculatedDuration) : 0;
+    return e ? B(e.calculatedDuration) : 0;
   }
   get time() {
-    return N(this.currentTime);
+    return B(this.currentTime);
   }
   set time(e) {
-    e = R(e), this.currentTime = e, this.holdTime !== null || this.speed === 0 ? this.holdTime = e : this.driver && (this.startTime = this.driver.now() - e / this.speed);
+    e = L(e), this.currentTime = e, this.holdTime !== null || this.speed === 0 ? this.holdTime = e : this.driver && (this.startTime = this.driver.now() - e / this.speed);
   }
   get speed() {
     return this.playbackSpeed;
   }
   set speed(e) {
     const n = this.playbackSpeed !== e;
-    this.playbackSpeed = e, n && (this.time = N(this.currentTime));
+    this.playbackSpeed = e, n && (this.time = B(this.currentTime));
   }
   play() {
-    if (this.resolver.isScheduled || this.resolver.resume(), !this._resolved) return void (this.pendingPlayState = "running");
-    if (this.isStopped) return;
-    const { driver: e = Ci, onPlay: n, startTime: s } = this.options;
+    if (this.resolver.isScheduled || this.resolver.resume(), !this._resolved) {
+      this.pendingPlayState = "running";
+      return;
+    }
+    if (this.isStopped)
+      return;
+    const { driver: e = sr, onPlay: n, startTime: s } = this.options;
     this.driver || (this.driver = e((r) => this.tick(r))), n && n();
     const i = this.driver.now();
     this.holdTime !== null ? this.startTime = i - this.holdTime : this.startTime ? this.state === "finished" && (this.startTime = i) : this.startTime = s ?? this.calcStartTime(), this.state === "finished" && this.updateFinishedPromise(), this.cancelTime = this.startTime, this.holdTime = null, this.state = "running", this.driver.start();
   }
   pause() {
     var e;
-    this._resolved ? (this.state = "paused", this.holdTime = (e = this.currentTime) !== null && e !== void 0 ? e : 0) : this.pendingPlayState = "paused";
+    if (!this._resolved) {
+      this.pendingPlayState = "paused";
+      return;
+    }
+    this.state = "paused", this.holdTime = (e = this.currentTime) !== null && e !== void 0 ? e : 0;
   }
   complete() {
     this.state !== "running" && this.play(), this.pendingPlayState = this.state = "finished", this.holdTime = null;
@@ -714,20 +1266,30 @@ class Je extends jn {
     return this.startTime = 0, this.tick(e, !0);
   }
 }
-const ki = /* @__PURE__ */ new Set(["opacity", "clipPath", "filter", "transform"]);
-function yt(t) {
+const or = /* @__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"
+]);
+function bt(t) {
   let e;
   return () => (e === void 0 && (e = t()), e);
 }
-const Ei = { linearEasing: void 0 };
-function Fi(t, e) {
-  const n = yt(t);
+const ar = {
+  linearEasing: void 0
+};
+function lr(t, e) {
+  const n = bt(t);
   return () => {
     var s;
-    return (s = Ei[e]) !== null && s !== void 0 ? s : n();
+    return (s = ar[e]) !== null && s !== void 0 ? s : n();
   };
 }
-const xe = Fi(() => {
+const Te = /* @__PURE__ */ lr(() => {
   try {
     document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
   } catch {
@@ -735,125 +1297,202 @@ const xe = Fi(() => {
   }
   return !0;
 }, "linearEasing");
-function Qn(t) {
-  return !!(typeof t == "function" && xe() || !t || typeof t == "string" && (t in Qe || xe()) || vt(t) || Array.isArray(t) && t.every(Qn));
+function Yn(t) {
+  return !!(typeof t == "function" && Te() || !t || typeof t == "string" && (t in Ze || Te()) || gt(t) || Array.isArray(t) && t.every(Yn));
+}
+const oe = ([t, e, n, s]) => `cubic-bezier(${t}, ${e}, ${n}, ${s})`, Ze = {
+  linear: "linear",
+  ease: "ease",
+  easeIn: "ease-in",
+  easeOut: "ease-out",
+  easeInOut: "ease-in-out",
+  circIn: /* @__PURE__ */ oe([0, 0.65, 0.55, 1]),
+  circOut: /* @__PURE__ */ oe([0.55, 0, 1, 0.45]),
+  backIn: /* @__PURE__ */ oe([0.31, 0.01, 0.66, -0.59]),
+  backOut: /* @__PURE__ */ oe([0.33, 1.53, 0.69, 0.99])
+};
+function Xn(t, e) {
+  if (t)
+    return typeof t == "function" && Te() ? $n(t, e) : gt(t) ? oe(t) : Array.isArray(t) ? t.map((n) => Xn(n, e) || Ze.easeOut) : Ze[t];
+}
+function ur(t, e, n, { delay: s = 0, duration: i = 300, repeat: r = 0, repeatType: o = "loop", ease: a = "easeInOut", times: l } = {}) {
+  const u = { [e]: n };
+  l && (u.offset = l);
+  const c = Xn(a, i);
+  return Array.isArray(c) && (u.easing = c), t.animate(u, {
+    delay: s,
+    duration: i,
+    easing: Array.isArray(c) ? "linear" : c,
+    fill: "both",
+    iterations: r + 1,
+    direction: o === "reverse" ? "alternate" : "normal"
+  });
 }
-const oe = ([t, e, n, s]) => `cubic-bezier(${t}, ${e}, ${n}, ${s})`, Qe = { linear: "linear", ease: "ease", easeIn: "ease-in", easeOut: "ease-out", easeInOut: "ease-in-out", circIn: oe([0, 0.65, 0.55, 1]), circOut: oe([0.55, 0, 1, 0.45]), backIn: oe([0.31, 0.01, 0.66, -0.59]), backOut: oe([0.33, 1.53, 0.69, 0.99]) };
-function es(t, e) {
-  return t ? typeof t == "function" && xe() ? Kn(t, e) : vt(t) ? oe(t) : Array.isArray(t) ? t.map((n) => es(n, e) || Qe.easeOut) : Qe[t] : void 0;
+function Yt(t, e) {
+  t.timeline = e, t.onfinish = null;
 }
-function Oi(t, e, n, { delay: s = 0, duration: i = 300, repeat: r = 0, repeatType: o = "loop", ease: a = "easeInOut", times: l } = {}) {
-  const c = { [e]: n };
-  l && (c.offset = l);
-  const u = es(a, i);
-  return Array.isArray(u) && (c.easing = u), t.animate(c, { delay: s, duration: i, easing: Array.isArray(u) ? "linear" : u, fill: "both", iterations: r + 1, direction: o === "reverse" ? "alternate" : "normal" });
+const cr = /* @__PURE__ */ bt(() => Object.hasOwnProperty.call(Element.prototype, "animate")), Ve = 10, dr = 2e4;
+function fr(t) {
+  return pt(t.type) || t.type === "spring" || !Yn(t.ease);
+}
+function hr(t, e) {
+  const n = new vt({
+    ...e,
+    keyframes: t,
+    repeat: 0,
+    delay: 0,
+    isGenerator: !0
+  });
+  let s = { done: !1, value: t[0] };
+  const i = [];
+  let r = 0;
+  for (; !s.done && r < dr; )
+    s = n.sample(r), i.push(s.value), r += Ve;
+  return {
+    times: void 0,
+    keyframes: i,
+    duration: r - Ve,
+    ease: "linear"
+  };
 }
-function Gt(t, e) {
-  t.timeline = e, t.onfinish = null;
+const Zn = {
+  anticipate: Vn,
+  backInOut: Tn,
+  circInOut: Sn
+};
+function pr(t) {
+  return t in Zn;
 }
-const Ii = yt(() => Object.hasOwnProperty.call(Element.prototype, "animate")), Zt = { anticipate: An, backInOut: xn, circInOut: Vn };
-class Jt extends jn {
+class Xt extends _n {
   constructor(e) {
     super(e);
     const { name: n, motionValue: s, element: i, keyframes: r } = this.options;
-    this.resolver = new $n(r, (o, a) => this.onKeyframesResolved(o, a), n, s, i), this.resolver.scheduleResolve();
+    this.resolver = new Kn(r, (o, a) => this.onKeyframesResolved(o, a), n, s, i), this.resolver.scheduleResolve();
   }
   initPlayback(e, n) {
     var s;
-    let { duration: i = 300, times: r, ease: o, type: a, motionValue: l, name: c, startTime: u } = this.options;
-    if (!(!((s = l.owner) === null || s === void 0) && s.current)) return !1;
-    var h;
-    if (typeof o == "string" && xe() && o in Zt && (o = Zt[o]), mt((h = this.options).type) || h.type === "spring" || !Qn(h.ease)) {
-      const { onComplete: f, onUpdate: v, motionValue: p, element: g, ...m } = this.options, S = function(x, C) {
-        const y = new Je({ ...C, keyframes: x, repeat: 0, delay: 0, isGenerator: !0 });
-        let w = { done: !1, value: x[0] };
-        const T = [];
-        let A = 0;
-        for (; !w.done && A < 2e4; ) w = y.sample(A), T.push(w.value), A += 10;
-        return { times: void 0, keyframes: T, duration: A - 10, ease: "linear" };
-      }(e, m);
-      (e = S.keyframes).length === 1 && (e[1] = e[0]), i = S.duration, r = S.times, o = S.ease, a = "keyframes";
+    let { duration: i = 300, times: r, ease: o, type: a, motionValue: l, name: u, startTime: c } = this.options;
+    if (!(!((s = l.owner) === null || s === void 0) && s.current))
+      return !1;
+    if (typeof o == "string" && Te() && pr(o) && (o = Zn[o]), fr(this.options)) {
+      const { onComplete: d, onUpdate: h, motionValue: y, element: v, ...b } = this.options, p = hr(e, b);
+      e = p.keyframes, e.length === 1 && (e[1] = e[0]), i = p.duration, r = p.times, o = p.ease, a = "keyframes";
     }
-    const d = Oi(l.owner.current, c, e, { ...this.options, duration: i, times: r, ease: o });
-    return d.startTime = u ?? this.calcStartTime(), this.pendingTimeline ? (Gt(d, this.pendingTimeline), this.pendingTimeline = void 0) : d.onfinish = () => {
-      const { onComplete: f } = this.options;
-      l.set(Pe(e, this.options, n)), f && f(), this.cancel(), this.resolveFinishedPromise();
-    }, { animation: d, duration: i, times: r, type: a, ease: o, keyframes: e };
+    const f = ur(l.owner.current, u, e, { ...this.options, duration: i, times: r, ease: o });
+    return f.startTime = c ?? this.calcStartTime(), this.pendingTimeline ? (Yt(f, this.pendingTimeline), this.pendingTimeline = void 0) : f.onfinish = () => {
+      const { onComplete: d } = this.options;
+      l.set(Fe(e, this.options, n)), d && d(), this.cancel(), this.resolveFinishedPromise();
+    }, {
+      animation: f,
+      duration: i,
+      times: r,
+      type: a,
+      ease: o,
+      keyframes: e
+    };
   }
   get duration() {
     const { resolved: e } = this;
-    if (!e) return 0;
+    if (!e)
+      return 0;
     const { duration: n } = e;
-    return N(n);
+    return B(n);
   }
   get time() {
     const { resolved: e } = this;
-    if (!e) return 0;
+    if (!e)
+      return 0;
     const { animation: n } = e;
-    return N(n.currentTime || 0);
+    return B(n.currentTime || 0);
   }
   set time(e) {
     const { resolved: n } = this;
-    if (!n) return;
+    if (!n)
+      return;
     const { animation: s } = n;
-    s.currentTime = R(e);
+    s.currentTime = L(e);
   }
   get speed() {
     const { resolved: e } = this;
-    if (!e) return 1;
+    if (!e)
+      return 1;
     const { animation: n } = e;
     return n.playbackRate;
   }
   set speed(e) {
     const { resolved: n } = this;
-    if (!n) return;
+    if (!n)
+      return;
     const { animation: s } = n;
     s.playbackRate = e;
   }
   get state() {
     const { resolved: e } = this;
-    if (!e) return "idle";
+    if (!e)
+      return "idle";
     const { animation: n } = e;
     return n.playState;
   }
   get startTime() {
     const { resolved: e } = this;
-    if (!e) return null;
+    if (!e)
+      return null;
     const { animation: n } = e;
     return n.startTime;
   }
+  /**
+   * Replace the default DocumentTimeline with another AnimationTimeline.
+   * Currently used for scroll animations.
+   */
   attachTimeline(e) {
-    if (this._resolved) {
+    if (!this._resolved)
+      this.pendingTimeline = e;
+    else {
       const { resolved: n } = this;
-      if (!n) return $;
+      if (!n)
+        return _;
       const { animation: s } = n;
-      Gt(s, e);
-    } else this.pendingTimeline = e;
-    return $;
+      Yt(s, e);
+    }
+    return _;
   }
   play() {
-    if (this.isStopped) return;
+    if (this.isStopped)
+      return;
     const { resolved: e } = this;
-    if (!e) return;
+    if (!e)
+      return;
     const { animation: n } = e;
     n.playState === "finished" && this.updateFinishedPromise(), n.play();
   }
   pause() {
     const { resolved: e } = this;
-    if (!e) return;
+    if (!e)
+      return;
     const { animation: n } = e;
     n.pause();
   }
   stop() {
-    if (this.resolver.cancel(), this.isStopped = !0, this.state === "idle") return;
+    if (this.resolver.cancel(), this.isStopped = !0, this.state === "idle")
+      return;
     this.resolveFinishedPromise(), this.updateFinishedPromise();
     const { resolved: e } = this;
-    if (!e) return;
+    if (!e)
+      return;
     const { animation: n, keyframes: s, duration: i, type: r, ease: o, times: a } = e;
-    if (n.playState === "idle" || n.playState === "finished") return;
+    if (n.playState === "idle" || n.playState === "finished")
+      return;
     if (this.time) {
-      const { motionValue: c, onUpdate: u, onComplete: h, element: d, ...f } = this.options, v = new Je({ ...f, keyframes: s, duration: i, type: r, ease: o, times: a, isGenerator: !0 }), p = R(this.time);
-      c.setWithVelocity(v.sample(p - 10).value, v.sample(p).value, 10);
+      const { motionValue: u, onUpdate: c, onComplete: f, element: d, ...h } = this.options, y = new vt({
+        ...h,
+        keyframes: s,
+        duration: i,
+        type: r,
+        ease: o,
+        times: a,
+        isGenerator: !0
+      }), v = L(this.time);
+      u.setWithVelocity(y.sample(v - Ve).value, y.sample(v).value, Ve);
     }
     const { onStop: l } = this.options;
     l && l(), this.cancel();
@@ -868,25 +1507,33 @@ class Jt extends jn {
   }
   static supports(e) {
     const { motionValue: n, name: s, repeatDelay: i, repeatType: r, damping: o, type: a } = e;
-    return Ii() && s && ki.has(s) && n && n.owner && n.owner.current instanceof HTMLElement && !n.owner.getProps().onUpdate && !i && r !== "mirror" && o !== 0 && a !== "inertia";
+    return cr() && s && or.has(s) && n && n.owner && n.owner.current instanceof HTMLElement && /**
+     * 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.
+     */
+    !n.owner.getProps().onUpdate && !i && r !== "mirror" && o !== 0 && a !== "inertia";
   }
 }
-const Ri = yt(() => window.ScrollTimeline !== void 0);
-class Di {
+const mr = bt(() => window.ScrollTimeline !== void 0);
+class gr {
   constructor(e) {
     this.stop = () => this.runAll("stop"), this.animations = e.filter(Boolean);
   }
   then(e, n) {
     return Promise.all(this.animations).then(e).catch(n);
   }
+  /**
+   * TODO: Filter out cancelled or stopped animations before returning
+   */
   getAll(e) {
     return this.animations[0][e];
   }
   setAll(e, n) {
-    for (let s = 0; s < this.animations.length; s++) this.animations[s][e] = n;
+    for (let s = 0; s < this.animations.length; s++)
+      this.animations[s][e] = n;
   }
   attachTimeline(e, n) {
-    const s = this.animations.map((i) => Ri() && i.attachTimeline ? i.attachTimeline(e) : n(i));
+    const s = this.animations.map((i) => mr() && i.attachTimeline ? i.attachTimeline(e) : n(i));
     return () => {
       s.forEach((i, r) => {
         i && i(), this.animations[r].stop();
@@ -910,7 +1557,8 @@ class Di {
   }
   get duration() {
     let e = 0;
-    for (let n = 0; n < this.animations.length; n++) e = Math.max(e, this.animations[n].duration);
+    for (let n = 0; n < this.animations.length; n++)
+      e = Math.max(e, this.animations[n].duration);
     return e;
   }
   runAll(e) {
@@ -932,45 +1580,67 @@ class Di {
     this.runAll("complete");
   }
 }
-const Bi = (t, e, n, s = {}, i, r) => (o) => {
-  const a = yn(s, t) || {}, l = a.delay || s.delay || 0;
-  let { elapsed: c = 0 } = s;
-  c -= R(l);
-  let u = { keyframes: Array.isArray(n) ? n : [null, n], ease: "easeOut", velocity: e.getVelocity(), ...a, delay: -c, onUpdate: (d) => {
-    e.set(d), a.onUpdate && a.onUpdate(d);
-  }, onComplete: () => {
-    o(), a.onComplete && a.onComplete();
-  }, name: t, motionValue: e, element: r ? void 0 : i };
-  (function({ when: d, delay: f, delayChildren: v, staggerChildren: p, staggerDirection: g, repeat: m, repeatType: S, repeatDelay: x, from: C, elapsed: y, ...w }) {
-    return !!Object.keys(w).length;
-  })(a) || (u = { ...u, ...Ns(t, u) }), u.duration && (u.duration = R(u.duration)), u.repeatDelay && (u.repeatDelay = R(u.repeatDelay)), u.from !== void 0 && (u.keyframes[0] = u.from);
-  let h = !1;
-  if ((u.type === !1 || u.duration === 0 && !u.repeatDelay) && (u.duration = 0, u.delay === 0 && (h = !0)), h && !r && e.get() !== void 0) {
-    const d = Pe(u.keyframes, a);
-    if (d !== void 0) return F.update(() => {
-      u.onUpdate(d), u.onComplete();
-    }), new Di([]);
-  }
-  return !r && Jt.supports(u) ? new Jt(u) : new Je(u);
-};
-class ts {
+function yr({ when: t, delay: e, delayChildren: n, staggerChildren: s, staggerDirection: i, repeat: r, repeatType: o, repeatDelay: a, from: l, elapsed: u, ...c }) {
+  return !!Object.keys(c).length;
+}
+const vr = (t, e, n, s = {}, i, r) => (o) => {
+  const a = mn(s, t) || {}, l = a.delay || s.delay || 0;
+  let { elapsed: u = 0 } = s;
+  u = u - L(l);
+  let c = {
+    keyframes: Array.isArray(n) ? n : [null, n],
+    ease: "easeOut",
+    velocity: e.getVelocity(),
+    ...a,
+    delay: -u,
+    onUpdate: (d) => {
+      e.set(d), a.onUpdate && a.onUpdate(d);
+    },
+    onComplete: () => {
+      o(), a.onComplete && a.onComplete();
+    },
+    name: t,
+    motionValue: e,
+    element: r ? void 0 : i
+  };
+  yr(a) || (c = {
+    ...c,
+    ..._s(t, c)
+  }), c.duration && (c.duration = L(c.duration)), c.repeatDelay && (c.repeatDelay = L(c.repeatDelay)), c.from !== void 0 && (c.keyframes[0] = c.from);
+  let f = !1;
+  if ((c.type === !1 || c.duration === 0 && !c.repeatDelay) && (c.duration = 0, c.delay === 0 && (f = !0)), f && !r && e.get() !== void 0) {
+    const d = Fe(c.keyframes, a);
+    if (d !== void 0)
+      return R.update(() => {
+        c.onUpdate(d), c.onComplete();
+      }), new gr([]);
+  }
+  return !r && Xt.supports(c) ? new Xt(c) : new vt(c);
+}, br = (t) => !!(t && typeof t == "object" && t.mix && t.toValue), wr = (t) => je(t) ? t[t.length - 1] || 0 : t;
+function Tr(t, e) {
+  t.indexOf(e) === -1 && t.push(e);
+}
+function Vr(t, e) {
+  const n = t.indexOf(e);
+  n > -1 && t.splice(n, 1);
+}
+class Jn {
   constructor() {
     this.subscriptions = [];
   }
   add(e) {
-    var n, s;
-    return n = this.subscriptions, s = e, n.indexOf(s) === -1 && n.push(s), () => function(i, r) {
-      const o = i.indexOf(r);
-      o > -1 && i.splice(o, 1);
-    }(this.subscriptions, e);
+    return Tr(this.subscriptions, e), () => Vr(this.subscriptions, e);
   }
   notify(e, n, s) {
     const i = this.subscriptions.length;
-    if (i) if (i === 1) this.subscriptions[0](e, n, s);
-    else for (let r = 0; r < i; r++) {
-      const o = this.subscriptions[r];
-      o && o(e, n, s);
-    }
+    if (i)
+      if (i === 1)
+        this.subscriptions[0](e, n, s);
+      else
+        for (let r = 0; r < i; r++) {
+          const o = this.subscriptions[r];
+          o && o(e, n, s);
+        }
   }
   getSize() {
     return this.subscriptions.length;
@@ -979,59 +1649,162 @@ class ts {
     this.subscriptions.length = 0;
   }
 }
-class Ni {
+const Zt = 30, Sr = (t) => !isNaN(parseFloat(t));
+class xr {
+  /**
+   * @param init - The initiating value
+   * @param config - Optional configuration options
+   *
+   * -  `transformer`: A function to transform incoming values with.
+   *
+   * @internal
+   */
   constructor(e, n = {}) {
     this.version = "11.15.0", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (s, i = !0) => {
-      const r = L.now();
+      const r = K.now();
       this.updatedAt !== r && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(s), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), i && this.events.renderRequest && this.events.renderRequest.notify(this.current);
     }, this.hasAnimated = !1, this.setCurrent(e), this.owner = n.owner;
   }
   setCurrent(e) {
-    var n;
-    this.current = e, this.updatedAt = L.now(), this.canTrackVelocity === null && e !== void 0 && (this.canTrackVelocity = (n = this.current, !isNaN(parseFloat(n))));
+    this.current = e, this.updatedAt = K.now(), this.canTrackVelocity === null && e !== void 0 && (this.canTrackVelocity = Sr(this.current));
   }
   setPrevFrameValue(e = this.current) {
     this.prevFrameValue = e, 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(e) {
-    return process.env.NODE_ENV !== "production" && we(!1, 'value.onChange(callback) is deprecated. Switch to value.on("change", callback).'), this.on("change", e);
+    return process.env.NODE_ENV !== "production" && Me(!1, 'value.onChange(callback) is deprecated. Switch to value.on("change", callback).'), this.on("change", e);
   }
   on(e, n) {
-    this.events[e] || (this.events[e] = new ts());
+    this.events[e] || (this.events[e] = new Jn());
     const s = this.events[e].add(n);
     return e === "change" ? () => {
-      s(), F.read(() => {
+      s(), R.read(() => {
         this.events.change.getSize() || this.stop();
       });
     } : s;
   }
   clearListeners() {
-    for (const e in this.events) this.events[e].clear();
-  }
+    for (const e in this.events)
+      this.events[e].clear();
+  }
+  /**
+   * Attaches a passive effect to the `MotionValue`.
+   *
+   * @internal
+   */
   attach(e, n) {
     this.passiveEffect = e, this.stopPassiveEffect = n;
   }
+  /**
+   * 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(e, n = !0) {
-    n && this.passiveEffect ? this.passiveEffect(e, this.updateAndNotify) : this.updateAndNotify(e, n);
+    !n || !this.passiveEffect ? this.updateAndNotify(e, n) : this.passiveEffect(e, this.updateAndNotify);
   }
   setWithVelocity(e, n, s) {
     this.set(n), this.prev = void 0, this.prevFrameValue = e, this.prevUpdatedAt = this.updatedAt - s;
   }
+  /**
+   * Set the state of the `MotionValue`, stopping any active animations,
+   * effects, and resets velocity to `0`.
+   */
   jump(e, n = !0) {
     this.updateAndNotify(e), this.prev = e, this.prevUpdatedAt = this.prevFrameValue = void 0, n && this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
   }
+  /**
+   * Returns the latest state of `MotionValue`
+   *
+   * @returns - The latest state of `MotionValue`
+   *
+   * @public
+   */
   get() {
     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 e = L.now();
-    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || e - this.updatedAt > 30) return 0;
-    const n = Math.min(this.updatedAt - this.prevUpdatedAt, 30);
-    return Wn(parseFloat(this.current) - parseFloat(this.prevFrameValue), n);
-  }
+    const e = K.now();
+    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || e - this.updatedAt > Zt)
+      return 0;
+    const n = Math.min(this.updatedAt - this.prevUpdatedAt, Zt);
+    return jn(parseFloat(this.current) - parseFloat(this.prevFrameValue), n);
+  }
+  /**
+   * 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(e) {
     return this.stop(), new Promise((n) => {
       this.hasAnimated = !0, this.animation = e(n), this.events.animationStart && this.events.animationStart.notify();
@@ -1039,712 +1812,1206 @@ class Ni {
       this.events.animationComplete && this.events.animationComplete.notify(), this.clearAnimation();
     });
   }
+  /**
+   * Stop the currently active animation.
+   *
+   * @public
+   */
   stop() {
     this.animation && (this.animation.stop(), 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(), this.stopPassiveEffect && this.stopPassiveEffect();
   }
 }
-function ye(t, e) {
-  return new Ni(t, e);
+function Se(t, e) {
+  return new xr(t, e);
+}
+function Ar(t, e, n) {
+  t.hasValue(e) ? t.getValue(e).set(n) : t.addValue(e, Se(n));
+}
+function Mr(t, e) {
+  const n = Pe(t, e);
+  let { transitionEnd: s = {}, transition: i = {}, ...r } = n || {};
+  r = { ...r, ...s };
+  for (const o in r) {
+    const a = wr(r[o]);
+    Ar(t, o, a);
+  }
 }
-function Li(t, e, n) {
-  t.hasValue(e) ? t.getValue(e).set(n) : t.addValue(e, ye(n));
+const wt = (t) => t.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), Cr = "framerAppearId", Qn = "data-" + wt(Cr);
+function Pr(t) {
+  return t.props[Qn];
 }
-const wt = (t) => t.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), ns = "data-" + wt("framerAppearId");
-function $i(t) {
-  return t.props[ns];
+const F = (t) => !!(t && t.getVelocity);
+function Fr(t) {
+  return !!(F(t) && t.add);
 }
-const E = (t) => !!(t && t.getVelocity);
-function ji(t, e) {
+function Dr(t, e) {
   const n = t.getValue("willChange");
-  if (s = n, !!(E(s) && s.add)) return n.add(e);
-  var s;
+  if (Fr(n))
+    return n.add(e);
 }
-function Ki({ protectedKeys: t, needsAnimating: e }, n) {
+function Rr({ protectedKeys: t, needsAnimating: e }, n) {
   const s = t.hasOwnProperty(n) && e[n] !== !0;
   return e[n] = !1, s;
 }
-function ss(t, e, { delay: n = 0, transitionOverride: s, type: i } = {}) {
+function es(t, e, { delay: n = 0, transitionOverride: s, type: i } = {}) {
   var r;
   let { transition: o = t.getDefaultTransition(), transitionEnd: a, ...l } = e;
   s && (o = s);
-  const c = [], u = i && t.animationState && t.animationState.getState()[i];
-  for (const h in l) {
-    const d = t.getValue(h, (r = t.latestValues[h]) !== null && r !== void 0 ? r : null), f = l[h];
-    if (f === void 0 || u && Ki(u, h)) continue;
-    const v = { delay: n, ...yn(o || {}, h) };
-    let p = !1;
+  const u = [], c = i && t.animationState && t.animationState.getState()[i];
+  for (const f in l) {
+    const d = t.getValue(f, (r = t.latestValues[f]) !== null && r !== void 0 ? r : null), h = l[f];
+    if (h === void 0 || c && Rr(c, f))
+      continue;
+    const y = {
+      delay: n,
+      ...mn(o || {}, f)
+    };
+    let v = !1;
     if (window.MotionHandoffAnimation) {
-      const m = $i(t);
-      if (m) {
-        const S = window.MotionHandoffAnimation(m, h, F);
-        S !== null && (v.startTime = S, p = !0);
+      const p = Pr(t);
+      if (p) {
+        const g = window.MotionHandoffAnimation(p, f, R);
+        g !== null && (y.startTime = g, v = !0);
       }
     }
-    ji(t, h), d.start(Bi(h, d, f, t.shouldReduceMotion && q.has(h) ? { type: !1 } : v, t, p));
-    const g = d.animation;
-    g && c.push(g);
-  }
-  return a && Promise.all(c).then(() => {
-    F.update(() => {
-      a && function(h, d) {
-        const f = Me(h, d);
-        let { transitionEnd: v = {}, transition: p = {}, ...g } = f || {};
-        g = { ...g, ...v };
-        for (const S in g) Li(h, S, (m = g[S], Ue(m) ? m[m.length - 1] || 0 : m));
-        var m;
-      }(t, a);
+    Dr(t, f), d.start(vr(f, d, h, t.shouldReduceMotion && z.has(f) ? { type: !1 } : y, t, v));
+    const b = d.animation;
+    b && u.push(b);
+  }
+  return a && Promise.all(u).then(() => {
+    R.update(() => {
+      a && Mr(t, a);
     });
-  }), c;
+  }), u;
 }
-function et(t, e, n = {}) {
+function Je(t, e, n = {}) {
   var s;
-  const i = Me(t, e, n.type === "exit" ? (s = t.presenceContext) === null || s === void 0 ? void 0 : s.custom : void 0);
+  const i = Pe(t, e, n.type === "exit" ? (s = t.presenceContext) === null || s === void 0 ? void 0 : s.custom : void 0);
   let { transition: r = t.getDefaultTransition() || {} } = i || {};
   n.transitionOverride && (r = n.transitionOverride);
-  const o = i ? () => Promise.all(ss(t, i, n)) : () => Promise.resolve(), a = t.variantChildren && t.variantChildren.size ? (c = 0) => {
-    const { delayChildren: u = 0, staggerChildren: h, staggerDirection: d } = r;
-    return function(f, v, p = 0, g = 0, m = 1, S) {
-      const x = [], C = (f.variantChildren.size - 1) * g, y = m === 1 ? (w = 0) => w * g : (w = 0) => C - w * g;
-      return Array.from(f.variantChildren).sort(Wi).forEach((w, T) => {
-        w.notify("AnimationStart", v), x.push(et(w, v, { ...S, delay: p + y(T) }).then(() => w.notify("AnimationComplete", v)));
-      }), Promise.all(x);
-    }(t, e, u + c, h, d, n);
+  const o = i ? () => Promise.all(es(t, i, n)) : () => Promise.resolve(), a = t.variantChildren && t.variantChildren.size ? (u = 0) => {
+    const { delayChildren: c = 0, staggerChildren: f, staggerDirection: d } = r;
+    return Ir(t, e, c + u, f, d, n);
   } : () => Promise.resolve(), { when: l } = r;
   if (l) {
-    const [c, u] = l === "beforeChildren" ? [o, a] : [a, o];
-    return c().then(() => u());
-  }
-  return Promise.all([o(), a(n.delay)]);
-}
-function Wi(t, e) {
+    const [u, c] = l === "beforeChildren" ? [o, a] : [a, o];
+    return u().then(() => c());
+  } else
+    return Promise.all([o(), a(n.delay)]);
+}
+function Ir(t, e, n = 0, s = 0, i = 1, r) {
+  const o = [], a = (t.variantChildren.size - 1) * s, l = i === 1 ? (u = 0) => u * s : (u = 0) => a - u * s;
+  return Array.from(t.variantChildren).sort(Or).forEach((u, c) => {
+    u.notify("AnimationStart", e), o.push(Je(u, e, {
+      ...r,
+      delay: n + l(c)
+    }).then(() => u.notify("AnimationComplete", e)));
+  }), Promise.all(o);
+}
+function Or(t, e) {
   return t.sortNodePosition(e);
 }
-const Ui = ot.length;
-function is(t) {
-  if (!t) return;
+function Er(t, e, n = {}) {
+  t.notify("AnimationStart", e);
+  let s;
+  if (Array.isArray(e)) {
+    const i = e.map((r) => Je(t, r, n));
+    s = Promise.all(i);
+  } else if (typeof e == "string")
+    s = Je(t, e, n);
+  else {
+    const i = typeof e == "function" ? Pe(t, e, n.custom) : e;
+    s = Promise.all(es(t, i, n));
+  }
+  return s.then(() => {
+    t.notify("AnimationComplete", e);
+  });
+}
+const kr = rt.length;
+function ts(t) {
+  if (!t)
+    return;
   if (!t.isControllingVariants) {
-    const n = t.parent && is(t.parent) || {};
+    const n = t.parent ? ts(t.parent) || {} : {};
     return t.props.initial !== void 0 && (n.initial = t.props.initial), n;
   }
   const e = {};
-  for (let n = 0; n < Ui; n++) {
-    const s = ot[n], i = t.props[s];
-    (le(i) || i === !1) && (e[s] = i);
+  for (let n = 0; n < kr; n++) {
+    const s = rt[n], i = t.props[s];
+    (ue(i) || i === !1) && (e[s] = i);
   }
   return e;
 }
-const Yi = [...rt].reverse(), qi = rt.length;
-function zi(t) {
-  return (e) => Promise.all(e.map(({ animation: n, options: s }) => function(i, r, o = {}) {
-    let a;
-    if (i.notify("AnimationStart", r), Array.isArray(r)) {
-      const l = r.map((c) => et(i, c, o));
-      a = Promise.all(l);
-    } else if (typeof r == "string") a = et(i, r, o);
-    else {
-      const l = typeof r == "function" ? Me(i, r, o.custom) : r;
-      a = Promise.all(ss(i, l, o));
+const Lr = [...it].reverse(), Nr = it.length;
+function Br(t) {
+  return (e) => Promise.all(e.map(({ animation: n, options: s }) => Er(t, n, s)));
+}
+function Kr(t) {
+  let e = Br(t), n = Jt(), s = !0;
+  const i = (l) => (u, c) => {
+    var f;
+    const d = Pe(t, c, l === "exit" ? (f = t.presenceContext) === null || f === void 0 ? void 0 : f.custom : void 0);
+    if (d) {
+      const { transition: h, transitionEnd: y, ...v } = d;
+      u = { ...u, ...v, ...y };
     }
-    return a.then(() => {
-      i.notify("AnimationComplete", r);
-    });
-  }(t, n, s)));
-}
-function Hi(t) {
-  let e = zi(t), n = Qt(), s = !0;
-  const i = (o) => (a, l) => {
-    var c;
-    const u = Me(t, l, o === "exit" ? (c = t.presenceContext) === null || c === void 0 ? void 0 : c.custom : void 0);
-    if (u) {
-      const { transition: h, transitionEnd: d, ...f } = u;
-      a = { ...a, ...f, ...d };
-    }
-    return a;
+    return u;
   };
-  function r(o) {
-    const { props: a } = t, l = is(t.parent) || {}, c = [], u = /* @__PURE__ */ new Set();
-    let h = {}, d = 1 / 0;
-    for (let v = 0; v < qi; v++) {
-      const p = Yi[v], g = n[p], m = a[p] !== void 0 ? a[p] : l[p], S = le(m), x = p === o ? g.isActive : null;
-      x === !1 && (d = v);
-      let C = m === l[p] && m !== a[p] && S;
-      if (C && s && t.manuallyAnimateOnMount && (C = !1), g.protectedKeys = { ...h }, !g.isActive && x === null || !m && !g.prevProp || Ce(m) || typeof m == "boolean") continue;
-      const y = Xi(g.prevProp, m);
-      let w = y || p === o && g.isActive && !C && S || v > d && S, T = !1;
-      const A = Array.isArray(m) ? m : [m];
-      let V = A.reduce(i(p), {});
-      x === !1 && (V = {});
-      const { prevResolvedValues: M = {} } = g, Ie = { ...M, ...V }, ie = (k) => {
-        w = !0, u.has(k) && (T = !0, u.delete(k)), g.needsAnimating[k] = !0;
-        const D = t.getValue(k);
-        D && (D.liveStyle = !1);
+  function r(l) {
+    e = l(t);
+  }
+  function o(l) {
+    const { props: u } = t, c = ts(t.parent) || {}, f = [], d = /* @__PURE__ */ new Set();
+    let h = {}, y = 1 / 0;
+    for (let b = 0; b < Nr; b++) {
+      const p = Lr[b], g = n[p], V = u[p] !== void 0 ? u[p] : c[p], A = ue(V), w = p === l ? g.isActive : null;
+      w === !1 && (y = b);
+      let S = V === c[p] && V !== u[p] && A;
+      if (S && s && t.manuallyAnimateOnMount && (S = !1), g.protectedKeys = { ...h }, // If it isn't active and hasn't *just* been set as inactive
+      !g.isActive && w === null || // If we didn't and don't have any defined prop for this animation type
+      !V && !g.prevProp || // Or if the prop doesn't define an animation
+      Ce(V) || typeof V == "boolean")
+        continue;
+      const M = _r(g.prevProp, V);
+      let T = M || // If we're making this variant active, we want to always make it active
+      p === l && g.isActive && !S && A || // If we removed a higher-priority variant (i is in reverse order)
+      b > y && A, D = !1;
+      const I = Array.isArray(V) ? V : [V];
+      let H = I.reduce(i(p), {});
+      w === !1 && (H = {});
+      const { prevResolvedValues: Ft = {} } = g, Ss = {
+        ...Ft,
+        ...H
+      }, Dt = (P) => {
+        T = !0, d.has(P) && (D = !0, d.delete(P)), g.needsAnimating[P] = !0;
+        const k = t.getValue(P);
+        k && (k.liveStyle = !1);
       };
-      for (const k in Ie) {
-        const D = V[k], Re = M[k];
-        if (h.hasOwnProperty(k)) continue;
-        let Mt = !1;
-        Mt = Ue(D) && Ue(Re) ? !gn(D, Re) : D !== Re, Mt ? D != null ? ie(k) : u.add(k) : D !== void 0 && u.has(k) ? ie(k) : g.protectedKeys[k] = !0;
+      for (const P in Ss) {
+        const k = H[P], Ee = Ft[P];
+        if (h.hasOwnProperty(P))
+          continue;
+        let ke = !1;
+        je(k) && je(Ee) ? ke = !pn(k, Ee) : ke = k !== Ee, ke ? k != null ? Dt(P) : d.add(P) : k !== void 0 && d.has(P) ? Dt(P) : g.protectedKeys[P] = !0;
       }
-      g.prevProp = m, g.prevResolvedValues = V, g.isActive && (h = { ...h, ...V }), s && t.blockInitialAnimation && (w = !1), w && (!(C && y) || T) && c.push(...A.map((k) => ({ animation: k, options: { type: p } })));
+      g.prevProp = V, g.prevResolvedValues = H, g.isActive && (h = { ...h, ...H }), s && t.blockInitialAnimation && (T = !1), T && (!(S && M) || D) && f.push(...I.map((P) => ({
+        animation: P,
+        options: { type: p }
+      })));
     }
-    if (u.size) {
-      const v = {};
-      u.forEach((p) => {
-        const g = t.getBaseTarget(p), m = t.getValue(p);
-        m && (m.liveStyle = !0), v[p] = g ?? null;
-      }), c.push({ animation: v });
+    if (d.size) {
+      const b = {};
+      d.forEach((p) => {
+        const g = t.getBaseTarget(p), V = t.getValue(p);
+        V && (V.liveStyle = !0), b[p] = g ?? null;
+      }), f.push({ animation: b });
     }
-    let f = !!c.length;
-    return !s || a.initial !== !1 && a.initial !== a.animate || t.manuallyAnimateOnMount || (f = !1), s = !1, f ? e(c) : Promise.resolve();
+    let v = !!f.length;
+    return s && (u.initial === !1 || u.initial === u.animate) && !t.manuallyAnimateOnMount && (v = !1), s = !1, v ? e(f) : Promise.resolve();
   }
-  return { animateChanges: r, setActive: function(o, a) {
-    var l;
-    if (n[o].isActive === a) return Promise.resolve();
-    (l = t.variantChildren) === null || l === void 0 || l.forEach((u) => {
+  function a(l, u) {
+    var c;
+    if (n[l].isActive === u)
+      return Promise.resolve();
+    (c = t.variantChildren) === null || c === void 0 || c.forEach((d) => {
       var h;
-      return (h = u.animationState) === null || h === void 0 ? void 0 : h.setActive(o, a);
-    }), n[o].isActive = a;
-    const c = r(o);
-    for (const u in n) n[u].protectedKeys = {};
-    return c;
-  }, setAnimateFunction: function(o) {
-    e = o(t);
-  }, getState: () => n, reset: () => {
-    n = Qt(), s = !0;
-  } };
-}
-function Xi(t, e) {
-  return typeof e == "string" ? e !== t : !!Array.isArray(e) && !gn(e, t);
-}
-function j(t = !1) {
-  return { isActive: t, protectedKeys: {}, needsAnimating: {}, prevResolvedValues: {} };
-}
-function Qt() {
-  return { animate: j(!0), whileInView: j(), whileHover: j(), whileTap: j(), whileDrag: j(), whileFocus: j(), exit: j() };
-}
-class G {
+      return (h = d.animationState) === null || h === void 0 ? void 0 : h.setActive(l, u);
+    }), n[l].isActive = u;
+    const f = o(l);
+    for (const d in n)
+      n[d].protectedKeys = {};
+    return f;
+  }
+  return {
+    animateChanges: o,
+    setActive: a,
+    setAnimateFunction: r,
+    getState: () => n,
+    reset: () => {
+      n = Jt(), s = !0;
+    }
+  };
+}
+function _r(t, e) {
+  return typeof e == "string" ? e !== t : Array.isArray(e) ? !pn(e, t) : !1;
+}
+function $(t = !1) {
+  return {
+    isActive: t,
+    protectedKeys: {},
+    needsAnimating: {},
+    prevResolvedValues: {}
+  };
+}
+function Jt() {
+  return {
+    animate: $(!0),
+    whileInView: $(),
+    whileHover: $(),
+    whileTap: $(),
+    whileDrag: $(),
+    whileFocus: $(),
+    exit: $()
+  };
+}
+class re {
   constructor(e) {
     this.isMounted = !1, this.node = e;
   }
   update() {
   }
 }
-let _i = 0;
-const Gi = { animation: { Feature: class extends G {
-  constructor(t) {
-    super(t), t.animationState || (t.animationState = Hi(t));
+class $r extends re {
+  /**
+   * 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(e) {
+    super(e), e.animationState || (e.animationState = Kr(e));
   }
   updateAnimationControlsSubscription() {
-    const { animate: t } = this.node.getProps();
-    Ce(t) && (this.unmountControls = t.subscribe(this.node));
+    const { animate: e } = this.node.getProps();
+    Ce(e) && (this.unmountControls = e.subscribe(this.node));
   }
+  /**
+   * Subscribe any provided AnimationControls to the component's VisualElement
+   */
   mount() {
     this.updateAnimationControlsSubscription();
   }
   update() {
-    const { animate: t } = this.node.getProps(), { animate: e } = this.node.prevProps || {};
-    t !== e && this.updateAnimationControlsSubscription();
+    const { animate: e } = this.node.getProps(), { animate: n } = this.node.prevProps || {};
+    e !== n && this.updateAnimationControlsSubscription();
   }
   unmount() {
-    var t;
-    this.node.animationState.reset(), (t = this.unmountControls) === null || t === void 0 || t.call(this);
+    var e;
+    this.node.animationState.reset(), (e = this.unmountControls) === null || e === void 0 || e.call(this);
   }
-} }, exit: { Feature: class extends G {
+}
+let jr = 0;
+class Wr extends re {
   constructor() {
-    super(...arguments), this.id = _i++;
+    super(...arguments), this.id = jr++;
   }
   update() {
-    if (!this.node.presenceContext) return;
-    const { isPresent: t, onExitComplete: e } = this.node.presenceContext, { isPresent: n } = this.node.prevPresenceContext || {};
-    if (!this.node.animationState || t === n) return;
-    const s = this.node.animationState.setActive("exit", !t);
-    e && !t && s.then(() => e(this.id));
+    if (!this.node.presenceContext)
+      return;
+    const { isPresent: e, onExitComplete: n } = this.node.presenceContext, { isPresent: s } = this.node.prevPresenceContext || {};
+    if (!this.node.animationState || e === s)
+      return;
+    const i = this.node.animationState.setActive("exit", !e);
+    n && !e && i.then(() => n(this.id));
   }
   mount() {
-    const { register: t } = this.node.presenceContext || {};
-    t && (this.unmount = t(this.id));
+    const { register: e } = this.node.presenceContext || {};
+    e && (this.unmount = e(this.id));
   }
   unmount() {
   }
-} } }, Zi = !1;
-function rs(t) {
-  return { point: { x: t.pageX, y: t.pageY } };
 }
-function en(t, e, n, s = { passive: !0 }) {
+const Gr = {
+  animation: {
+    Feature: $r
+  },
+  exit: {
+    Feature: Wr
+  }
+}, Ur = {
+  x: !1,
+  y: !1
+};
+function zr() {
+  return Ur.y;
+}
+const Hr = (t) => t.pointerType === "mouse" ? typeof t.button != "number" || t.button <= 0 : t.isPrimary !== !1;
+function ns(t) {
+  return {
+    point: {
+      x: t.pageX,
+      y: t.pageY
+    }
+  };
+}
+function Qt(t, e, n, s = { passive: !0 }) {
   return t.addEventListener(e, n, s), () => t.removeEventListener(e, n);
 }
-function os(t) {
+function ss(t) {
   return t && typeof t == "object" && Object.prototype.hasOwnProperty.call(t, "current");
 }
-const Ji = () => ({ x: { min: 0, max: 0 }, y: { min: 0, max: 0 } }), as = ee(null), Qi = ee({}), er = ee({}), tr = {}, { schedule: nr, cancel: eo } = wn(queueMicrotask, !1);
-function sr(t) {
-  const e = E(t) ? t.get() : t;
-  return n = e, n && typeof n == "object" && n.mix && n.toValue ? e.toValue() : e;
-  var n;
+const en = () => ({ min: 0, max: 0 }), is = () => ({
+  x: en(),
+  y: en()
+});
+function qr({ top: t, left: e, right: n, bottom: s }) {
+  return {
+    x: { min: e, max: n },
+    y: { min: t, max: s }
+  };
 }
-function ls(t, e) {
-  const n = function(i) {
-    if (i instanceof Element) return [i];
-    if (typeof i == "string") {
-      const r = document.querySelectorAll(i);
-      return r ? Array.from(r) : [];
-    }
-    return Array.from(i);
-  }(t), s = new AbortController();
-  return [n, { passive: !0, ...e, signal: s.signal }, () => s.abort()];
+function Yr(t, e) {
+  if (!e)
+    return t;
+  const n = e({ x: t.left, y: t.top }), s = e({ x: t.right, y: t.bottom });
+  return {
+    top: n.y,
+    left: n.x,
+    bottom: s.y,
+    right: s.x
+  };
+}
+function Xr(t, e) {
+  return qr(Yr(t.getBoundingClientRect(), e));
+}
+const rs = te(null), Zr = te({}), Jr = te({}), Qr = {}, { schedule: eo, cancel: Pa } = gn(queueMicrotask, !1);
+function to(t) {
+  const e = F(t) ? t.get() : t;
+  return br(e) ? e.toValue() : e;
+}
+function no(t, e, n) {
+  var s;
+  if (t instanceof Element)
+    return [t];
+  if (typeof t == "string") {
+    let i = document;
+    const r = (s = void 0) !== null && s !== void 0 ? s : i.querySelectorAll(t);
+    return r ? Array.from(r) : [];
+  }
+  return Array.from(t);
+}
+function os(t, e) {
+  const n = no(t), s = new AbortController(), i = {
+    passive: !0,
+    ...e,
+    signal: s.signal
+  };
+  return [n, i, () => s.abort()];
 }
 function tn(t) {
   return (e) => {
-    e.pointerType === "touch" || Zi || t(e);
+    e.pointerType === "touch" || zr() || t(e);
   };
 }
+function so(t, e, n = {}) {
+  const [s, i, r] = os(t, n), o = tn((a) => {
+    const { target: l } = a, u = e(a);
+    if (!u || !l)
+      return;
+    const c = tn((f) => {
+      u(f), l.removeEventListener("pointerleave", c);
+    });
+    l.addEventListener("pointerleave", c, i);
+  });
+  return s.forEach((a) => {
+    a.addEventListener("pointerenter", o, i);
+  }), r;
+}
 function nn(t, e, n) {
   const { props: s } = t;
   t.animationState && s.whileHover && t.animationState.setActive("whileHover", n === "Start");
-  const i = s["onHover" + n];
-  i && F.postRender(() => i(e, rs(e)));
+  const i = "onHover" + n, r = s[i];
+  r && R.postRender(() => r(e, ns(e)));
+}
+class io extends re {
+  mount() {
+    const { current: e } = this.node;
+    e && (this.unmount = so(e, (n) => (nn(this.node, n, "Start"), (s) => nn(this.node, s, "End"))));
+  }
+  unmount() {
+  }
 }
-const re = /* @__PURE__ */ new WeakSet();
+class ro extends re {
+  constructor() {
+    super(...arguments), this.isActive = !1;
+  }
+  onFocus() {
+    let e = !1;
+    try {
+      e = this.node.current.matches(":focus-visible");
+    } catch {
+      e = !0;
+    }
+    !e || !this.node.animationState || (this.node.animationState.setActive("whileFocus", !0), this.isActive = !0);
+  }
+  onBlur() {
+    !this.isActive || !this.node.animationState || (this.node.animationState.setActive("whileFocus", !1), this.isActive = !1);
+  }
+  mount() {
+    this.unmount = De(Qt(this.node.current, "focus", () => this.onFocus()), Qt(this.node.current, "blur", () => this.onBlur()));
+  }
+  unmount() {
+  }
+}
+const ae = /* @__PURE__ */ new WeakSet();
 function sn(t) {
   return (e) => {
     e.key === "Enter" && t(e);
   };
 }
-function $e(t, e) {
+function Ke(t, e) {
   t.dispatchEvent(new PointerEvent("pointer" + e, { isPrimary: !0, bubbles: !0 }));
 }
-const ir = /* @__PURE__ */ new Set(["BUTTON", "INPUT", "SELECT", "TEXTAREA", "A"]), us = (t, e) => !!e && (t === e || us(t, e.parentElement));
+const oo = (t, e) => {
+  const n = t.currentTarget;
+  if (!n)
+    return;
+  const s = sn(() => {
+    if (ae.has(n))
+      return;
+    Ke(n, "down");
+    const i = sn(() => {
+      Ke(n, "up");
+    }), r = () => Ke(n, "cancel");
+    n.addEventListener("keyup", i, e), n.addEventListener("blur", r, e);
+  });
+  n.addEventListener("keydown", s, e), n.addEventListener("blur", () => n.removeEventListener("keydown", s), e);
+}, ao = /* @__PURE__ */ new Set([
+  "BUTTON",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA",
+  "A"
+]);
+function lo(t) {
+  return ao.has(t.tagName) || t.tabIndex !== -1;
+}
+const as = (t, e) => e ? t === e ? !0 : as(t, e.parentElement) : !1;
 function rn(t) {
-  return ((e) => e.pointerType === "mouse" ? typeof e.button != "number" || e.button <= 0 : e.isPrimary !== !1)(t) && !0;
+  return Hr(t) && !0;
 }
-function rr(t, e, n = {}) {
-  const [s, i, r] = ls(t, n), o = (a) => {
+function uo(t, e, n = {}) {
+  const [s, i, r] = os(t, n), o = (a) => {
     const l = a.currentTarget;
-    if (!rn(a) || re.has(l)) return;
-    re.add(l);
-    const c = e(a), u = (f, v) => {
-      window.removeEventListener("pointerup", h), window.removeEventListener("pointercancel", d), rn(f) && re.has(l) && (re.delete(l), c && c(f, { success: v }));
-    }, h = (f) => {
-      u(f, n.useGlobalTarget || us(l, f.target));
-    }, d = (f) => {
-      u(f, !1);
+    if (!rn(a) || ae.has(l))
+      return;
+    ae.add(l);
+    const u = e(a), c = (h, y) => {
+      window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", d), !(!rn(h) || !ae.has(l)) && (ae.delete(l), u && u(h, { success: y }));
+    }, f = (h) => {
+      c(h, n.useGlobalTarget || as(l, h.target));
+    }, d = (h) => {
+      c(h, !1);
     };
-    window.addEventListener("pointerup", h, i), window.addEventListener("pointercancel", d, i);
+    window.addEventListener("pointerup", f, i), window.addEventListener("pointercancel", d, i);
   };
   return s.forEach((a) => {
-    (function(l) {
-      return ir.has(l.tagName) || l.tabIndex !== -1;
-    })(a) || (a.tabIndex = 0), (n.useGlobalTarget ? window : a).addEventListener("pointerdown", o, i), a.addEventListener("focus", (l) => ((c, u) => {
-      const h = c.currentTarget;
-      if (!h) return;
-      const d = sn(() => {
-        if (re.has(h)) return;
-        $e(h, "down");
-        const f = sn(() => {
-          $e(h, "up");
-        });
-        h.addEventListener("keyup", f, u), h.addEventListener("blur", () => $e(h, "cancel"), u);
-      });
-      h.addEventListener("keydown", d, u), h.addEventListener("blur", () => h.removeEventListener("keydown", d), u);
-    })(l, i), i);
+    lo(a) || (a.tabIndex = 0), (n.useGlobalTarget ? window : a).addEventListener("pointerdown", o, i), a.addEventListener("focus", (u) => oo(u, i), i);
   }), r;
 }
 function on(t, e, n) {
   const { props: s } = t;
   t.animationState && s.whileTap && t.animationState.setActive("whileTap", n === "Start");
-  const i = s["onTap" + (n === "End" ? "" : n)];
-  i && F.postRender(() => i(e, rs(e)));
+  const i = "onTap" + (n === "End" ? "" : n), r = s[i];
+  r && R.postRender(() => r(e, ns(e)));
 }
-const tt = /* @__PURE__ */ new WeakMap(), je = /* @__PURE__ */ new WeakMap(), or = (t) => {
-  const e = tt.get(t.target);
+class co extends re {
+  mount() {
+    const { current: e } = this.node;
+    e && (this.unmount = uo(e, (n) => (on(this.node, n, "Start"), (s, { success: i }) => on(this.node, s, i ? "End" : "Cancel")), { useGlobalTarget: this.node.props.globalTapTarget }));
+  }
+  unmount() {
+  }
+}
+const Qe = /* @__PURE__ */ new WeakMap(), _e = /* @__PURE__ */ new WeakMap(), fo = (t) => {
+  const e = Qe.get(t.target);
   e && e(t);
-}, ar = (t) => {
-  t.forEach(or);
+}, ho = (t) => {
+  t.forEach(fo);
 };
-function lr(t, e, n) {
-  const s = function({ root: i, ...r }) {
-    const o = i || document;
-    je.has(o) || je.set(o, {});
-    const a = je.get(o), l = JSON.stringify(r);
-    return a[l] || (a[l] = new IntersectionObserver(ar, { root: i, ...r })), a[l];
-  }(e);
-  return tt.set(t, n), s.observe(t), () => {
-    tt.delete(t), s.unobserve(t);
+function po({ root: t, ...e }) {
+  const n = t || document;
+  _e.has(n) || _e.set(n, {});
+  const s = _e.get(n), i = JSON.stringify(e);
+  return s[i] || (s[i] = new IntersectionObserver(ho, { root: t, ...e })), s[i];
+}
+function mo(t, e, n) {
+  const s = po(e);
+  return Qe.set(t, n), s.observe(t), () => {
+    Qe.delete(t), s.unobserve(t);
   };
 }
-const ur = { some: 0, all: 1 }, cr = { inView: { Feature: class extends G {
+const go = {
+  some: 0,
+  all: 1
+};
+class yo extends re {
   constructor() {
     super(...arguments), this.hasEnteredView = !1, this.isInView = !1;
   }
   startObserver() {
     this.unmount();
-    const { viewport: t = {} } = this.node.getProps(), { root: e, margin: n, amount: s = "some", once: i } = t, r = { root: e ? e.current : void 0, rootMargin: n, threshold: typeof s == "number" ? s : ur[s] };
-    return lr(this.node.current, r, (o) => {
-      const { isIntersecting: a } = o;
-      if (this.isInView === a || (this.isInView = a, i && !a && this.hasEnteredView)) return;
-      a && (this.hasEnteredView = !0), this.node.animationState && this.node.animationState.setActive("whileInView", a);
-      const { onViewportEnter: l, onViewportLeave: c } = this.node.getProps(), u = a ? l : c;
-      u && u(o);
-    });
+    const { viewport: e = {} } = this.node.getProps(), { root: n, margin: s, amount: i = "some", once: r } = e, o = {
+      root: n ? n.current : void 0,
+      rootMargin: s,
+      threshold: typeof i == "number" ? i : go[i]
+    }, a = (l) => {
+      const { isIntersecting: u } = l;
+      if (this.isInView === u || (this.isInView = u, r && !u && this.hasEnteredView))
+        return;
+      u && (this.hasEnteredView = !0), this.node.animationState && this.node.animationState.setActive("whileInView", u);
+      const { onViewportEnter: c, onViewportLeave: f } = this.node.getProps(), d = u ? c : f;
+      d && d(l);
+    };
+    return mo(this.node.current, o, a);
   }
   mount() {
     this.startObserver();
   }
   update() {
-    if (typeof IntersectionObserver > "u") return;
-    const { props: t, prevProps: e } = this.node;
-    ["amount", "margin", "root"].some(function({ viewport: n = {} }, { viewport: s = {} } = {}) {
-      return (i) => n[i] !== s[i];
-    }(t, e)) && this.startObserver();
-  }
-  unmount() {
-  }
-} }, tap: { Feature: class extends G {
-  mount() {
-    const { current: t } = this.node;
-    t && (this.unmount = rr(t, (e) => (on(this.node, e, "Start"), (n, { success: s }) => on(this.node, n, s ? "End" : "Cancel")), { useGlobalTarget: this.node.props.globalTapTarget }));
-  }
-  unmount() {
-  }
-} }, focus: { Feature: class extends G {
-  constructor() {
-    super(...arguments), this.isActive = !1;
-  }
-  onFocus() {
-    let t = !1;
-    try {
-      t = this.node.current.matches(":focus-visible");
-    } catch {
-      t = !0;
-    }
-    t && this.node.animationState && (this.node.animationState.setActive("whileFocus", !0), this.isActive = !0);
-  }
-  onBlur() {
-    this.isActive && this.node.animationState && (this.node.animationState.setActive("whileFocus", !1), this.isActive = !1);
-  }
-  mount() {
-    this.unmount = ke(en(this.node.current, "focus", () => this.onFocus()), en(this.node.current, "blur", () => this.onBlur()));
+    if (typeof IntersectionObserver > "u")
+      return;
+    const { props: e, prevProps: n } = this.node;
+    ["amount", "margin", "root"].some(vo(e, n)) && this.startObserver();
   }
   unmount() {
   }
-} }, hover: { Feature: class extends G {
-  mount() {
-    const { current: t } = this.node;
-    t && (this.unmount = function(e, n, s = {}) {
-      const [i, r, o] = ls(e, s), a = tn((l) => {
-        const { target: c } = l, u = n(l);
-        if (!u || !c) return;
-        const h = tn((d) => {
-          u(d), c.removeEventListener("pointerleave", h);
-        });
-        c.addEventListener("pointerleave", h, r);
-      });
-      return i.forEach((l) => {
-        l.addEventListener("pointerenter", a, r);
-      }), o;
-    }(t, (e) => (nn(this.node, e, "Start"), (n) => nn(this.node, n, "End"))));
-  }
-  unmount() {
-  }
-} } }, cs = ee({ transformPagePoint: (t) => t, isStatic: !1, reducedMotion: "never" }), Fe = ee({}), bt = typeof window < "u", hr = bt ? Ts : st, St = ee({ strict: !1 });
-function dr(t, e, n, s, i) {
+}
+function vo({ viewport: t = {} }, { viewport: e = {} } = {}) {
+  return (n) => t[n] !== e[n];
+}
+const bo = {
+  inView: {
+    Feature: yo
+  },
+  tap: {
+    Feature: co
+  },
+  focus: {
+    Feature: ro
+  },
+  hover: {
+    Feature: io
+  }
+}, ls = te({
+  transformPagePoint: (t) => t,
+  isStatic: !1,
+  reducedMotion: "never"
+}), Ie = te({}), Tt = typeof window < "u", wo = Tt ? xs : nt, Vt = te({ strict: !1 });
+function To(t, e, n, s, i) {
   var r, o;
-  const { visualElement: a } = O(Fe), l = O(St), c = O(as), u = O(cs).reducedMotion, h = Z(null);
-  s = s || l.renderer, !h.current && s && (h.current = s(t, { visualState: e, parent: a, props: n, presenceContext: c, blockInitialAnimation: !!c && c.initial === !1, reducedMotionConfig: u }));
-  const d = h.current, f = O(er);
-  !d || d.projection || !i || d.type !== "html" && d.type !== "svg" || function(m, S, x, C) {
-    const { layoutId: y, layout: w, drag: T, dragConstraints: A, layoutScroll: V, layoutRoot: M } = S;
-    m.projection = new x(m.latestValues, S["data-framer-portal-id"] ? void 0 : hs(m.parent)), m.projection.setOptions({ layoutId: y, layout: w, alwaysMeasureLayout: !!T || A && os(A), visualElement: m, animationType: typeof w == "string" ? w : "both", initialPromotionConfig: C, layoutScroll: V, layoutRoot: M });
-  }(h.current, n, i, f);
-  const v = Z(!1);
-  xs(() => {
-    d && v.current && d.update(n, c);
+  const { visualElement: a } = O(Ie), l = O(Vt), u = O(rs), c = O(ls).reducedMotion, f = Z(null);
+  s = s || l.renderer, !f.current && s && (f.current = s(t, {
+    visualState: e,
+    parent: a,
+    props: n,
+    presenceContext: u,
+    blockInitialAnimation: u ? u.initial === !1 : !1,
+    reducedMotionConfig: c
+  }));
+  const d = f.current, h = O(Jr);
+  d && !d.projection && i && (d.type === "html" || d.type === "svg") && Vo(f.current, n, i, h);
+  const y = Z(!1);
+  As(() => {
+    d && y.current && d.update(n, u);
   });
-  const p = n[ns], g = Z(!!p && !(!((r = window.MotionHandoffIsComplete) === null || r === void 0) && r.call(window, p)) && ((o = window.MotionHasOptimisedAnimation) === null || o === void 0 ? void 0 : o.call(window, p)));
-  return hr(() => {
-    d && (v.current = !0, window.MotionIsMounted = !0, d.updateFeatures(), nr.render(d.render), g.current && d.animationState && d.animationState.animateChanges());
-  }), st(() => {
-    d && (!g.current && d.animationState && d.animationState.animateChanges(), g.current && (queueMicrotask(() => {
-      var m;
-      (m = window.MotionHandoffMarkAsComplete) === null || m === void 0 || m.call(window, p);
-    }), g.current = !1));
+  const v = n[Qn], b = Z(!!v && !(!((r = window.MotionHandoffIsComplete) === null || r === void 0) && r.call(window, v)) && ((o = window.MotionHasOptimisedAnimation) === null || o === void 0 ? void 0 : o.call(window, v)));
+  return wo(() => {
+    d && (y.current = !0, window.MotionIsMounted = !0, d.updateFeatures(), eo.render(d.render), b.current && d.animationState && d.animationState.animateChanges());
+  }), nt(() => {
+    d && (!b.current && d.animationState && d.animationState.animateChanges(), b.current && (queueMicrotask(() => {
+      var p;
+      (p = window.MotionHandoffMarkAsComplete) === null || p === void 0 || p.call(window, v);
+    }), b.current = !1));
   }), d;
 }
-function hs(t) {
-  if (t) return t.options.allowProjection !== !1 ? t.projection : hs(t.parent);
+function Vo(t, e, n, s) {
+  const { layoutId: i, layout: r, drag: o, dragConstraints: a, layoutScroll: l, layoutRoot: u } = e;
+  t.projection = new n(t.latestValues, e["data-framer-portal-id"] ? void 0 : us(t.parent)), t.projection.setOptions({
+    layoutId: i,
+    layout: r,
+    alwaysMeasureLayout: !!o || a && ss(a),
+    visualElement: t,
+    /**
+     * 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 r == "string" ? r : "both",
+    initialPromotionConfig: s,
+    layoutScroll: l,
+    layoutRoot: u
+  });
 }
-function pr(t, e, n) {
-  return fn((s) => {
-    s && t.mount && t.mount(s), e && (s ? e.mount(s) : e.unmount()), n && (typeof n == "function" ? n(s) : os(n) && (n.current = s));
-  }, [e]);
+function us(t) {
+  if (t)
+    return t.options.allowProjection !== !1 ? t.projection : us(t.parent);
+}
+function So(t, e, n) {
+  return fn(
+    (s) => {
+      s && t.mount && t.mount(s), e && (s ? e.mount(s) : e.unmount()), n && (typeof n == "function" ? n(s) : ss(n) && (n.current = s));
+    },
+    /**
+     * 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.
+     */
+    [e]
+  );
 }
 function Oe(t) {
-  return Ce(t.animate) || ot.some((e) => le(t[e]));
+  return Ce(t.animate) || rt.some((e) => ue(t[e]));
 }
-function ds(t) {
+function cs(t) {
   return !!(Oe(t) || t.variants);
 }
-function mr(t) {
-  const { initial: e, animate: n } = function(s, i) {
-    if (Oe(s)) {
-      const { initial: r, animate: o } = s;
-      return { initial: r === !1 || le(r) ? r : void 0, animate: le(o) ? o : void 0 };
-    }
-    return s.inherit !== !1 ? i : {};
-  }(t, O(Fe));
-  return Ve(() => ({ initial: e, animate: n }), [an(e), an(n)]);
+function xo(t, e) {
+  if (Oe(t)) {
+    const { initial: n, animate: s } = t;
+    return {
+      initial: n === !1 || ue(n) ? n : void 0,
+      animate: ue(s) ? s : void 0
+    };
+  }
+  return t.inherit !== !1 ? e : {};
+}
+function Ao(t) {
+  const { initial: e, animate: n } = xo(t, O(Ie));
+  return Ae(() => ({ initial: e, animate: n }), [an(e), an(n)]);
 }
 function an(t) {
   return Array.isArray(t) ? t.join(" ") : t;
 }
-const ln = { 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"] }, Q = {};
-for (const t in ln) Q[t] = { isEnabled: (e) => ln[t].some((n) => !!e[n]) };
-function nt(t) {
-  for (const e in t) Q[e] = { ...Q[e], ...t[e] };
-}
-const fr = Symbol.for("motionComponentSymbol");
-function vr({ preloadedFeatures: t, createVisualElement: e, useRender: n, useVisualState: s, Component: i }) {
-  t && nt(t);
-  const r = As(function(o, a) {
-    let l;
-    const c = { ...O(cs), ...o, layoutId: gr(o) }, { isStatic: u } = c, h = mr(o), d = s(o, u);
-    if (!u && bt) {
-      (function(v, p) {
-        const g = O(St).strict;
-        if (process.env.NODE_ENV !== "production" && p && g) {
-          const m = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
-          v.ignoreStrict ? te(!1, m) : U(!1, m);
-        }
-      })(c, t);
-      const f = function(v) {
-        const { drag: p, layout: g } = Q;
-        if (!p && !g) return {};
-        const m = { ...p, ...g };
-        return { MeasureLayout: p != null && p.isEnabled(v) || g != null && g.isEnabled(v) ? m.MeasureLayout : void 0, ProjectionNode: m.ProjectionNode };
-      }(c);
-      l = f.MeasureLayout, h.visualElement = dr(i, d, c, e, f.ProjectionNode);
+const ln = {
+  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"]
+}, ee = {};
+for (const t in ln)
+  ee[t] = {
+    isEnabled: (e) => ln[t].some((n) => !!e[n])
+  };
+function et(t) {
+  for (const e in t)
+    ee[e] = {
+      ...ee[e],
+      ...t[e]
+    };
+}
+const Mo = Symbol.for("motionComponentSymbol");
+function Co({ preloadedFeatures: t, createVisualElement: e, useRender: n, useVisualState: s, Component: i }) {
+  t && et(t);
+  function r(a, l) {
+    let u;
+    const c = {
+      ...O(ls),
+      ...a,
+      layoutId: Po(a)
+    }, { isStatic: f } = c, d = Ao(a), h = s(a, f);
+    if (!f && Tt) {
+      Fo(c, t);
+      const y = Do(c);
+      u = y.MeasureLayout, d.visualElement = To(i, h, c, e, y.ProjectionNode);
     }
-    return H(Fe.Provider, { value: h, children: [l && h.visualElement ? I(l, { visualElement: h.visualElement, ...c }) : null, n(i, o, pr(d, h.visualElement, a), d, u, h.visualElement)] });
-  });
-  return r[fr] = i, r;
+    return Y(Ie.Provider, { value: d, children: [u && d.visualElement ? E(u, { visualElement: d.visualElement, ...c }) : null, n(i, a, So(h, d.visualElement, l), h, f, d.visualElement)] });
+  }
+  const o = Ms(r);
+  return o[Mo] = i, o;
 }
-function gr({ layoutId: t }) {
-  const e = O(Qi).id;
+function Po({ layoutId: t }) {
+  const e = O(Zr).id;
   return e && t !== void 0 ? e + "-" + t : t;
 }
-const yr = ["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"];
-function Tt(t) {
-  return typeof t == "string" && !t.includes("-") && !!(yr.indexOf(t) > -1 || /[A-Z]/u.test(t));
-}
-function ps(t, { style: e, vars: n }, s, i) {
-  Object.assign(t.style, e, i && i.getProjectionStyles(s));
-  for (const r in n) t.style.setProperty(r, n[r]);
+function Fo(t, e) {
+  const n = O(Vt).strict;
+  if (process.env.NODE_ENV !== "production" && e && n) {
+    const s = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+    t.ignoreStrict ? ne(!1, s) : G(!1, s);
+  }
 }
-const ms = /* @__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"]);
-function fs(t, e, n, s) {
-  ps(t, e, void 0, s);
-  for (const i in e.attrs) t.setAttribute(ms.has(i) ? i : wt(i), e.attrs[i]);
+function Do(t) {
+  const { drag: e, layout: n } = ee;
+  if (!e && !n)
+    return {};
+  const s = { ...e, ...n };
+  return {
+    MeasureLayout: e != null && e.isEnabled(t) || n != null && n.isEnabled(t) ? s.MeasureLayout : void 0,
+    ProjectionNode: s.ProjectionNode
+  };
 }
-function vs(t, { layout: e, layoutId: n }) {
-  return q.has(t) || t.startsWith("origin") || (e || n !== void 0) && (!!tr[t] || t === "opacity");
+const Ro = [
+  "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"
+];
+function St(t) {
+  return (
+    /**
+     * If it's not a string, it's a custom React component. Currently we only support
+     * HTML custom React components.
+     */
+    typeof t != "string" || /**
+     * If it contains a dash, the element is a custom HTML webcomponent.
+     */
+    t.includes("-") ? !1 : (
+      /**
+       * If it's in our list of lowercase SVG tags, it's an SVG component
+       */
+      !!(Ro.indexOf(t) > -1 || /**
+       * If it contains a capital letter, it's an SVG component
+       */
+      /[A-Z]/u.test(t))
+    )
+  );
+}
+function ds(t, { style: e, vars: n }, s, i) {
+  Object.assign(t.style, e, i && i.getProjectionStyles(s));
+  for (const r in n)
+    t.style.setProperty(r, n[r]);
+}
+const fs = /* @__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"
+]);
+function hs(t, e, n, s) {
+  ds(t, e, void 0, s);
+  for (const i in e.attrs)
+    t.setAttribute(fs.has(i) ? i : wt(i), e.attrs[i]);
+}
+function ps(t, { layout: e, layoutId: n }) {
+  return z.has(t) || t.startsWith("origin") || (e || n !== void 0) && (!!Qr[t] || t === "opacity");
 }
 function xt(t, e, n) {
   var s;
   const { style: i } = t, r = {};
-  for (const o in i) (E(i[o]) || e.style && E(e.style[o]) || vs(o, t) || ((s = n == null ? void 0 : n.getValue(o)) === null || s === void 0 ? void 0 : s.liveStyle) !== void 0) && (r[o] = i[o]);
+  for (const o in i)
+    (F(i[o]) || e.style && F(e.style[o]) || ps(o, t) || ((s = n == null ? void 0 : n.getValue(o)) === null || s === void 0 ? void 0 : s.liveStyle) !== void 0) && (r[o] = i[o]);
   return r;
 }
-function gs(t, e, n) {
+function ms(t, e, n) {
   const s = xt(t, e, n);
-  for (const i in t) (E(t[i]) || E(e[i])) && (s[he.indexOf(i) !== -1 ? "attr" + i.charAt(0).toUpperCase() + i.substring(1) : i] = t[i]);
+  for (const i in t)
+    if (F(t[i]) || F(e[i])) {
+      const r = fe.indexOf(i) !== -1 ? "attr" + i.charAt(0).toUpperCase() + i.substring(1) : i;
+      s[r] = t[i];
+    }
   return s;
 }
-const ys = (t) => (e, n) => {
-  const s = O(Fe), i = O(as), r = () => function({ scrapeMotionValuesFromProps: o, createRenderState: a, onMount: l }, c, u, h) {
-    const d = { latestValues: wr(c, u, h, o), renderState: a() };
-    return l && (d.mount = (f) => l(c, f, d)), d;
-  }(t, e, s, i);
-  return n ? r() : function(o) {
-    const a = Z(null);
-    return a.current === null && (a.current = o()), a.current;
-  }(r);
+function Io(t) {
+  const e = Z(null);
+  return e.current === null && (e.current = t()), e.current;
+}
+function Oo({ scrapeMotionValuesFromProps: t, createRenderState: e, onMount: n }, s, i, r) {
+  const o = {
+    latestValues: Eo(s, i, r, t),
+    renderState: e()
+  };
+  return n && (o.mount = (a) => n(s, a, o)), o;
+}
+const gs = (t) => (e, n) => {
+  const s = O(Ie), i = O(rs), r = () => Oo(t, e, s, i);
+  return n ? r() : Io(r);
 };
-function wr(t, e, n, s) {
+function Eo(t, e, n, s) {
   const i = {}, r = s(t, {});
-  for (const d in r) i[d] = sr(r[d]);
+  for (const d in r)
+    i[d] = to(r[d]);
   let { initial: o, animate: a } = t;
-  const l = Oe(t), c = ds(t);
-  e && c && !l && t.inherit !== !1 && (o === void 0 && (o = e.initial), a === void 0 && (a = e.animate));
-  let u = !!n && n.initial === !1;
-  u = u || o === !1;
-  const h = u ? a : o;
-  if (h && typeof h != "boolean" && !Ce(h)) {
-    const d = Array.isArray(h) ? h : [h];
-    for (let f = 0; f < d.length; f++) {
-      const v = it(t, d[f]);
-      if (v) {
-        const { transitionEnd: p, transition: g, ...m } = v;
-        for (const S in m) {
-          let x = m[S];
-          Array.isArray(x) && (x = x[u ? x.length - 1 : 0]), x !== null && (i[S] = x);
+  const l = Oe(t), u = cs(t);
+  e && u && !l && t.inherit !== !1 && (o === void 0 && (o = e.initial), a === void 0 && (a = e.animate));
+  let c = n ? n.initial === !1 : !1;
+  c = c || o === !1;
+  const f = c ? a : o;
+  if (f && typeof f != "boolean" && !Ce(f)) {
+    const d = Array.isArray(f) ? f : [f];
+    for (let h = 0; h < d.length; h++) {
+      const y = st(t, d[h]);
+      if (y) {
+        const { transitionEnd: v, transition: b, ...p } = y;
+        for (const g in p) {
+          let V = p[g];
+          if (Array.isArray(V)) {
+            const A = c ? V.length - 1 : 0;
+            V = V[A];
+          }
+          V !== null && (i[g] = V);
         }
-        for (const S in p) i[S] = p[S];
+        for (const g in v)
+          i[g] = v[g];
       }
     }
   }
   return i;
 }
-const br = () => ({ style: {}, transform: {}, transformOrigin: {}, vars: {} }), Sr = () => ({ style: {}, transform: {}, transformOrigin: {}, vars: {}, attrs: {} }), un = (t, e) => e && typeof t == "number" ? e.transform(t) : t, Tr = { x: "translateX", y: "translateY", z: "translateZ", transformPerspective: "perspective" }, xr = he.length;
-function At(t, e, n) {
+const At = () => ({
+  style: {},
+  transform: {},
+  transformOrigin: {},
+  vars: {}
+}), ys = () => ({
+  ...At(),
+  attrs: {}
+}), vs = (t, e) => e && typeof t == "number" ? e.transform(t) : t, ko = {
+  x: "translateX",
+  y: "translateY",
+  z: "translateZ",
+  transformPerspective: "perspective"
+}, Lo = fe.length;
+function No(t, e, n) {
+  let s = "", i = !0;
+  for (let r = 0; r < Lo; r++) {
+    const o = fe[r], a = t[o];
+    if (a === void 0)
+      continue;
+    let l = !0;
+    if (typeof a == "number" ? l = a === (o.startsWith("scale") ? 1 : 0) : l = parseFloat(a) === 0, !l || n) {
+      const u = vs(a, ft[o]);
+      if (!l) {
+        i = !1;
+        const c = ko[o] || o;
+        s += `${c}(${u}) `;
+      }
+      n && (e[o] = u);
+    }
+  }
+  return s = s.trim(), n ? s = n(e, i ? "" : s) : i && (s = "none"), s;
+}
+function Mt(t, e, n) {
   const { style: s, vars: i, transformOrigin: r } = t;
   let o = !1, a = !1;
   for (const l in e) {
-    const c = e[l];
-    if (q.has(l)) o = !0;
-    else if (kn(l)) i[l] = c;
-    else {
-      const u = un(c, _e[l]);
-      l.startsWith("origin") ? (a = !0, r[l] = u) : s[l] = u;
+    const u = e[l];
+    if (z.has(l)) {
+      o = !0;
+      continue;
+    } else if (Cn(l)) {
+      i[l] = u;
+      continue;
+    } else {
+      const c = vs(u, ft[l]);
+      l.startsWith("origin") ? (a = !0, r[l] = c) : s[l] = c;
     }
   }
-  if (e.transform || (o || n ? s.transform = function(l, c, u) {
-    let h = "", d = !0;
-    for (let f = 0; f < xr; f++) {
-      const v = he[f], p = l[v];
-      if (p === void 0) continue;
-      let g = !0;
-      if (g = typeof p == "number" ? p === (v.startsWith("scale") ? 1 : 0) : parseFloat(p) === 0, !g || u) {
-        const m = un(p, _e[v]);
-        g || (d = !1, h += `${Tr[v] || v}(${m}) `), u && (c[v] = m);
-      }
-    }
-    return h = h.trim(), u ? h = u(c, d ? "" : h) : d && (h = "none"), h;
-  }(e, t.transform, n) : s.transform && (s.transform = "none")), a) {
-    const { originX: l = "50%", originY: c = "50%", originZ: u = 0 } = r;
-    s.transformOrigin = `${l} ${c} ${u}`;
+  if (e.transform || (o || n ? s.transform = No(e, t.transform, n) : s.transform && (s.transform = "none")), a) {
+    const { originX: l = "50%", originY: u = "50%", originZ: c = 0 } = r;
+    s.transformOrigin = `${l} ${u} ${c}`;
   }
 }
-function cn(t, e, n) {
-  return typeof t == "string" ? t : b.transform(e + n * t);
+function un(t, e, n) {
+  return typeof t == "string" ? t : m.transform(e + n * t);
+}
+function Bo(t, e, n) {
+  const s = un(e, t.x, t.width), i = un(n, t.y, t.height);
+  return `${s} ${i}`;
 }
-const Ar = { offset: "stroke-dashoffset", array: "stroke-dasharray" }, Vr = { offset: "strokeDashoffset", array: "strokeDasharray" };
-function Vt(t, { attrX: e, attrY: n, attrScale: s, originX: i, originY: r, pathLength: o, pathSpacing: a = 1, pathOffset: l = 0, ...c }, u, h) {
-  if (At(t, c, h), u) return void (t.style.viewBox && (t.attrs.viewBox = t.style.viewBox));
+const Ko = {
+  offset: "stroke-dashoffset",
+  array: "stroke-dasharray"
+}, _o = {
+  offset: "strokeDashoffset",
+  array: "strokeDasharray"
+};
+function $o(t, e, n = 1, s = 0, i = !0) {
+  t.pathLength = 1;
+  const r = i ? Ko : _o;
+  t[r.offset] = m.transform(-s);
+  const o = m.transform(e), a = m.transform(n);
+  t[r.array] = `${o} ${a}`;
+}
+function Ct(t, {
+  attrX: e,
+  attrY: n,
+  attrScale: s,
+  originX: i,
+  originY: r,
+  pathLength: o,
+  pathSpacing: a = 1,
+  pathOffset: l = 0,
+  // This is object creation, which we try to avoid per-frame.
+  ...u
+}, c, f) {
+  if (Mt(t, u, f), c) {
+    t.style.viewBox && (t.attrs.viewBox = t.style.viewBox);
+    return;
+  }
   t.attrs = t.style, t.style = {};
-  const { attrs: d, style: f, dimensions: v } = t;
-  d.transform && (v && (f.transform = d.transform), delete d.transform), v && (i !== void 0 || r !== void 0 || f.transform) && (f.transformOrigin = function(p, g, m) {
-    return `${cn(g, p.x, p.width)} ${cn(m, p.y, p.height)}`;
-  }(v, i !== void 0 ? i : 0.5, r !== void 0 ? r : 0.5)), e !== void 0 && (d.x = e), n !== void 0 && (d.y = n), s !== void 0 && (d.scale = s), o !== void 0 && function(p, g, m = 1, S = 0, x = !0) {
-    p.pathLength = 1;
-    const C = x ? Ar : Vr;
-    p[C.offset] = b.transform(-S);
-    const y = b.transform(g), w = b.transform(m);
-    p[C.array] = `${y} ${w}`;
-  }(d, o, a, l, !1);
-}
-const Ct = (t) => typeof t == "string" && t.toLowerCase() === "svg", Cr = { useVisualState: ys({ scrapeMotionValuesFromProps: gs, createRenderState: Sr, onMount: (t, e, { renderState: n, latestValues: s }) => {
-  F.read(() => {
-    try {
-      n.dimensions = typeof e.getBBox == "function" ? e.getBBox() : e.getBoundingClientRect();
-    } catch {
-      n.dimensions = { x: 0, y: 0, width: 0, height: 0 };
+  const { attrs: d, style: h, dimensions: y } = t;
+  d.transform && (y && (h.transform = d.transform), delete d.transform), y && (i !== void 0 || r !== void 0 || h.transform) && (h.transformOrigin = Bo(y, i !== void 0 ? i : 0.5, r !== void 0 ? r : 0.5)), e !== void 0 && (d.x = e), n !== void 0 && (d.y = n), s !== void 0 && (d.scale = s), o !== void 0 && $o(d, o, a, l, !1);
+}
+const Pt = (t) => typeof t == "string" && t.toLowerCase() === "svg", jo = {
+  useVisualState: gs({
+    scrapeMotionValuesFromProps: ms,
+    createRenderState: ys,
+    onMount: (t, e, { renderState: n, latestValues: s }) => {
+      R.read(() => {
+        try {
+          n.dimensions = typeof e.getBBox == "function" ? e.getBBox() : e.getBoundingClientRect();
+        } catch {
+          n.dimensions = {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+          };
+        }
+      }), R.render(() => {
+        Ct(n, s, Pt(e.tagName), t.transformTemplate), hs(e, n);
+      });
     }
-  }), F.render(() => {
-    Vt(n, s, Ct(e.tagName), t.transformTemplate), fs(e, n);
-  });
-} }) }, Mr = { useVisualState: ys({ scrapeMotionValuesFromProps: xt, createRenderState: br }) };
-function ws(t, e, n) {
-  for (const s in e) E(e[s]) || vs(s, n) || (t[s] = e[s]);
-}
-function Pr(t, e) {
-  const n = {};
-  return ws(n, t.style || {}, t), Object.assign(n, function({ transformTemplate: s }, i) {
-    return Ve(() => {
-      const r = { style: {}, transform: {}, transformOrigin: {}, vars: {} };
-      return At(r, i, s), Object.assign({}, r.vars, r.style);
-    }, [i]);
-  }(t, e)), n;
-}
-function kr(t, e) {
-  const n = {}, s = Pr(t, e);
-  return t.drag && t.dragListener !== !1 && (n.draggable = !1, s.userSelect = s.WebkitUserSelect = s.WebkitTouchCallout = "none", s.touchAction = t.drag === !0 ? "none" : "pan-" + (t.drag === "x" ? "y" : "x")), t.tabIndex === void 0 && (t.onTap || t.onTapStart || t.whileTap) && (n.tabIndex = 0), n.style = s, n;
-}
-const Er = /* @__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 Ae(t) {
-  return t.startsWith("while") || t.startsWith("drag") && t !== "draggable" || t.startsWith("layout") || t.startsWith("onTap") || t.startsWith("onPan") || t.startsWith("onLayout") || Er.has(t);
-}
-let bs = (t) => !Ae(t);
+  })
+}, Wo = {
+  useVisualState: gs({
+    scrapeMotionValuesFromProps: xt,
+    createRenderState: At
+  })
+};
+function bs(t, e, n) {
+  for (const s in e)
+    !F(e[s]) && !ps(s, n) && (t[s] = e[s]);
+}
+function Go({ transformTemplate: t }, e) {
+  return Ae(() => {
+    const n = At();
+    return Mt(n, e, t), Object.assign({}, n.vars, n.style);
+  }, [e]);
+}
+function Uo(t, e) {
+  const n = t.style || {}, s = {};
+  return bs(s, n, t), Object.assign(s, Go(t, e)), s;
+}
+function zo(t, e) {
+  const n = {}, s = Uo(t, e);
+  return t.drag && t.dragListener !== !1 && (n.draggable = !1, s.userSelect = s.WebkitUserSelect = s.WebkitTouchCallout = "none", s.touchAction = t.drag === !0 ? "none" : `pan-${t.drag === "x" ? "y" : "x"}`), t.tabIndex === void 0 && (t.onTap || t.onTapStart || t.whileTap) && (n.tabIndex = 0), n.style = s, n;
+}
+const Ho = /* @__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 xe(t) {
+  return t.startsWith("while") || t.startsWith("drag") && t !== "draggable" || t.startsWith("layout") || t.startsWith("onTap") || t.startsWith("onPan") || t.startsWith("onLayout") || Ho.has(t);
+}
+let ws = (t) => !xe(t);
+function qo(t) {
+  t && (ws = (e) => e.startsWith("on") ? !xe(e) : t(e));
+}
 try {
-  (hn = require("@emotion/is-prop-valid").default) && (bs = (t) => t.startsWith("on") ? !Ae(t) : hn(t));
+  qo(require("@emotion/is-prop-valid").default);
 } catch {
 }
-var hn;
-function Fr(t, e, n, s) {
-  const i = Ve(() => {
-    const r = { style: {}, transform: {}, transformOrigin: {}, vars: {}, attrs: {} };
-    return Vt(r, e, Ct(s), t.transformTemplate), { ...r.attrs, style: { ...r.style } };
+function Yo(t, e, n) {
+  const s = {};
+  for (const i in t)
+    i === "values" && typeof t.values == "object" || (ws(i) || n === !0 && xe(i) || !e && !xe(i) || // If trying to use native HTML drag events, forward drag listeners
+    t.draggable && i.startsWith("onDrag")) && (s[i] = t[i]);
+  return s;
+}
+function Xo(t, e, n, s) {
+  const i = Ae(() => {
+    const r = ys();
+    return Ct(r, e, Pt(s), t.transformTemplate), {
+      ...r.attrs,
+      style: { ...r.style }
+    };
   }, [e]);
   if (t.style) {
     const r = {};
-    ws(r, t.style, t), i.style = { ...r, ...i.style };
+    bs(r, t.style, t), i.style = { ...r, ...i.style };
   }
   return i;
 }
-function Or(t = !1) {
-  return (e, n, s, { latestValues: i }, r) => {
-    const o = (Tt(e) ? Fr : kr)(n, i, r, e), a = function(h, d, f) {
-      const v = {};
-      for (const p in h) p === "values" && typeof h.values == "object" || (bs(p) || f === !0 && Ae(p) || !d && !Ae(p) || h.draggable && p.startsWith("onDrag")) && (v[p] = h[p]);
-      return v;
-    }(n, typeof e == "string", t), l = e !== vn ? { ...a, ...o, ref: s } : {}, { children: c } = n, u = Ve(() => E(c) ? c.get() : c, [c]);
-    return Vs(e, { ...l, children: u });
+function Zo(t = !1) {
+  return (n, s, i, { latestValues: r }, o) => {
+    const l = (St(n) ? Xo : zo)(s, r, o, n), u = Yo(s, typeof n == "string", t), c = n !== hn ? { ...u, ...l, ref: i } : {}, { children: f } = s, d = Ae(() => F(f) ? f.get() : f, [f]);
+    return Cs(n, {
+      ...c,
+      children: d
+    });
   };
 }
-function Ir(t, e) {
-  return function(n, { forwardMotionProps: s } = { forwardMotionProps: !1 }) {
-    return vr({ ...Tt(n) ? Cr : Mr, preloadedFeatures: t, useRender: Or(s), createVisualElement: e, Component: n });
+function Jo(t, e) {
+  return function(s, { forwardMotionProps: i } = { forwardMotionProps: !1 }) {
+    const o = {
+      ...St(s) ? jo : Wo,
+      preloadedFeatures: t,
+      useRender: Zo(i),
+      createVisualElement: e,
+      Component: s
+    };
+    return Co(o);
   };
 }
-const Ke = { current: null }, dn = { current: !1 }, pn = /* @__PURE__ */ new WeakMap(), Rr = [...On, P, se], mn = ["AnimationStart", "AnimationComplete", "Update", "BeforeLayoutMeasure", "LayoutMeasure", "LayoutAnimationStart", "LayoutAnimationComplete"];
-class Dr {
+const tt = { current: null }, Ts = { current: !1 };
+function Qo() {
+  if (Ts.current = !0, !!Tt)
+    if (window.matchMedia) {
+      const t = window.matchMedia("(prefers-reduced-motion)"), e = () => tt.current = t.matches;
+      t.addListener(e), e();
+    } else
+      tt.current = !1;
+}
+function ea(t, e, n) {
+  for (const s in e) {
+    const i = e[s], r = n[s];
+    if (F(i))
+      t.addValue(s, i), process.env.NODE_ENV === "development" && Me(i.version === "11.15.0", `Attempting to mix Motion versions ${i.version} with 11.15.0 may not work as expected.`);
+    else if (F(r))
+      t.addValue(s, Se(i, { owner: t }));
+    else if (r !== i)
+      if (t.hasValue(s)) {
+        const o = t.getValue(s);
+        o.liveStyle === !0 ? o.jump(i) : o.hasAnimated || o.set(i);
+      } else {
+        const o = t.getStaticValue(s);
+        t.addValue(s, Se(o !== void 0 ? o : i, { owner: t }));
+      }
+  }
+  for (const s in n)
+    e[s] === void 0 && t.removeValue(s);
+  return e;
+}
+const cn = /* @__PURE__ */ new WeakMap(), ta = [...Dn, C, ie], na = (t) => ta.find(Fn(t)), dn = [
+  "AnimationStart",
+  "AnimationComplete",
+  "Update",
+  "BeforeLayoutMeasure",
+  "LayoutMeasure",
+  "LayoutAnimationStart",
+  "LayoutAnimationComplete"
+];
+class sa {
+  /**
+   * 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(e, n, s) {
     return {};
   }
   constructor({ parent: e, props: n, presenceContext: s, reducedMotionConfig: i, blockInitialAnimation: r, visualState: o }, a = {}) {
-    this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = ct, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
+    this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = ut, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
       this.current && (this.triggerBuild(), this.renderInstance(this.current, this.renderState, this.props.style, this.projection));
     }, this.renderScheduledAt = 0, this.scheduleRender = () => {
-      const d = L.now();
-      this.renderScheduledAt < d && (this.renderScheduledAt = d, F.render(this.render, !1, !0));
+      const d = K.now();
+      this.renderScheduledAt < d && (this.renderScheduledAt = d, R.render(this.render, !1, !0));
     };
-    const { latestValues: l, renderState: c } = o;
-    this.latestValues = l, this.baseTarget = { ...l }, this.initialValues = n.initial ? { ...l } : {}, this.renderState = c, this.parent = e, this.props = n, this.presenceContext = s, this.depth = e ? e.depth + 1 : 0, this.reducedMotionConfig = i, this.options = a, this.blockInitialAnimation = !!r, this.isControllingVariants = Oe(n), this.isVariantNode = ds(n), this.isVariantNode && (this.variantChildren = /* @__PURE__ */ new Set()), this.manuallyAnimateOnMount = !!(e && e.current);
-    const { willChange: u, ...h } = this.scrapeMotionValuesFromProps(n, {}, this);
-    for (const d in h) {
-      const f = h[d];
-      l[d] !== void 0 && E(f) && f.set(l[d], !1);
+    const { latestValues: l, renderState: u } = o;
+    this.latestValues = l, this.baseTarget = { ...l }, this.initialValues = n.initial ? { ...l } : {}, this.renderState = u, this.parent = e, this.props = n, this.presenceContext = s, this.depth = e ? e.depth + 1 : 0, this.reducedMotionConfig = i, this.options = a, this.blockInitialAnimation = !!r, this.isControllingVariants = Oe(n), this.isVariantNode = cs(n), this.isVariantNode && (this.variantChildren = /* @__PURE__ */ new Set()), this.manuallyAnimateOnMount = !!(e && e.current);
+    const { willChange: c, ...f } = this.scrapeMotionValuesFromProps(n, {}, this);
+    for (const d in f) {
+      const h = f[d];
+      l[d] !== void 0 && F(h) && h.set(l[d], !1);
     }
   }
   mount(e) {
-    this.current = e, pn.set(e, this), this.projection && !this.projection.instance && this.projection.mount(e), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((n, s) => this.bindToMotionValue(s, n)), dn.current || function() {
-      if (dn.current = !0, bt) if (window.matchMedia) {
-        const n = window.matchMedia("(prefers-reduced-motion)"), s = () => Ke.current = n.matches;
-        n.addListener(s), s();
-      } else Ke.current = !1;
-    }(), this.shouldReduceMotion = this.reducedMotionConfig !== "never" && (this.reducedMotionConfig === "always" || Ke.current), process.env.NODE_ENV !== "production" && we(this.shouldReduceMotion !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected."), this.parent && this.parent.children.add(this), this.update(this.props, this.presenceContext);
+    this.current = e, cn.set(e, this), this.projection && !this.projection.instance && this.projection.mount(e), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((n, s) => this.bindToMotionValue(s, n)), Ts.current || Qo(), this.shouldReduceMotion = this.reducedMotionConfig === "never" ? !1 : this.reducedMotionConfig === "always" ? !0 : tt.current, process.env.NODE_ENV !== "production" && Me(this.shouldReduceMotion !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected."), this.parent && this.parent.children.add(this), this.update(this.props, this.presenceContext);
   }
   unmount() {
-    pn.delete(this.current), this.projection && this.projection.unmount(), Ye(this.notifyUpdate), Ye(this.render), this.valueSubscriptions.forEach((e) => e()), this.valueSubscriptions.clear(), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent && this.parent.children.delete(this);
-    for (const e in this.events) this.events[e].clear();
+    cn.delete(this.current), this.projection && this.projection.unmount(), We(this.notifyUpdate), We(this.render), this.valueSubscriptions.forEach((e) => e()), this.valueSubscriptions.clear(), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent && this.parent.children.delete(this);
+    for (const e in this.events)
+      this.events[e].clear();
     for (const e in this.features) {
       const n = this.features[e];
       n && (n.unmount(), n.isMounted = !1);
@@ -1753,8 +3020,8 @@ class Dr {
   }
   bindToMotionValue(e, n) {
     this.valueSubscriptions.has(e) && this.valueSubscriptions.get(e)();
-    const s = q.has(e), i = n.on("change", (a) => {
-      this.latestValues[e] = a, this.props.onUpdate && F.preRender(this.notifyUpdate), s && this.projection && (this.projection.isTransformDirty = !0);
+    const s = z.has(e), i = n.on("change", (a) => {
+      this.latestValues[e] = a, this.props.onUpdate && R.preRender(this.notifyUpdate), s && this.projection && (this.projection.isTransformDirty = !0);
     }), r = n.on("renderRequest", this.scheduleRender);
     let o;
     window.MotionCheckAppearSync && (o = window.MotionCheckAppearSync(this, e, n)), this.valueSubscriptions.set(e, () => {
@@ -1762,13 +3029,14 @@ class Dr {
     });
   }
   sortNodePosition(e) {
-    return this.current && this.sortInstanceNodePosition && this.type === e.type ? this.sortInstanceNodePosition(this.current, e.current) : 0;
+    return !this.current || !this.sortInstanceNodePosition || this.type !== e.type ? 0 : this.sortInstanceNodePosition(this.current, e.current);
   }
   updateFeatures() {
     let e = "animation";
-    for (e in Q) {
-      const n = Q[e];
-      if (!n) continue;
+    for (e in ee) {
+      const n = ee[e];
+      if (!n)
+        continue;
       const { isEnabled: s, Feature: i } = n;
       if (!this.features[e] && i && s(this.props) && (this.features[e] = new i(this)), this.features[e]) {
         const r = this.features[e];
@@ -1779,8 +3047,13 @@ class Dr {
   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) : { x: { min: 0, max: 0 }, y: { min: 0, max: 0 } };
+    return this.current ? this.measureInstanceViewportBox(this.current, this.props) : is();
   }
   getStaticValue(e) {
     return this.latestValues[e];
@@ -1788,37 +3061,32 @@ class Dr {
   setStaticValue(e, n) {
     this.latestValues[e] = n;
   }
+  /**
+   * Update the provided props. Ensure any newly-added motion values are
+   * added to our map, old ones removed, and listeners updated.
+   */
   update(e, n) {
     (e.transformTemplate || this.props.transformTemplate) && this.scheduleRender(), this.prevProps = this.props, this.props = e, this.prevPresenceContext = this.presenceContext, this.presenceContext = n;
-    for (let s = 0; s < mn.length; s++) {
-      const i = mn[s];
+    for (let s = 0; s < dn.length; s++) {
+      const i = dn[s];
       this.propEventSubscriptions[i] && (this.propEventSubscriptions[i](), delete this.propEventSubscriptions[i]);
-      const r = e["on" + i];
-      r && (this.propEventSubscriptions[i] = this.on(i, r));
+      const r = "on" + i, o = e[r];
+      o && (this.propEventSubscriptions[i] = this.on(i, o));
     }
-    this.prevMotionValues = function(s, i, r) {
-      for (const o in i) {
-        const a = i[o], l = r[o];
-        if (E(a)) s.addValue(o, a), process.env.NODE_ENV === "development" && we(a.version === "11.15.0", `Attempting to mix Motion versions ${a.version} with 11.15.0 may not work as expected.`);
-        else if (E(l)) s.addValue(o, ye(a, { owner: s }));
-        else if (l !== a) if (s.hasValue(o)) {
-          const c = s.getValue(o);
-          c.liveStyle === !0 ? c.jump(a) : c.hasAnimated || c.set(a);
-        } else {
-          const c = s.getStaticValue(o);
-          s.addValue(o, ye(c !== void 0 ? c : a, { owner: s }));
-        }
-      }
-      for (const o in r) i[o] === void 0 && s.removeValue(o);
-      return i;
-    }(this, this.scrapeMotionValuesFromProps(e, this.prevProps, this), this.prevMotionValues), this.handleChildMotionValue && this.handleChildMotionValue();
+    this.prevMotionValues = ea(this, this.scrapeMotionValuesFromProps(e, this.prevProps, this), this.prevMotionValues), this.handleChildMotionValue && this.handleChildMotionValue();
   }
   getProps() {
     return this.props;
   }
+  /**
+   * Returns the variant definition with a given name.
+   */
   getVariant(e) {
     return this.props.variants ? this.props.variants[e] : void 0;
   }
+  /**
+   * Returns the defined default transition on this component.
+   */
   getDefaultTransition() {
     return this.props.transition;
   }
@@ -1828,61 +3096,88 @@ class Dr {
   getClosestVariantNode() {
     return this.isVariantNode ? this : this.parent ? this.parent.getClosestVariantNode() : void 0;
   }
+  /**
+   * Add a child visual element to our set of children.
+   */
   addVariantChild(e) {
     const n = this.getClosestVariantNode();
-    if (n) return n.variantChildren && n.variantChildren.add(e), () => n.variantChildren.delete(e);
+    if (n)
+      return n.variantChildren && n.variantChildren.add(e), () => n.variantChildren.delete(e);
   }
+  /**
+   * Add a motion value and bind it to this visual element.
+   */
   addValue(e, n) {
     const s = this.values.get(e);
     n !== s && (s && this.removeValue(e), this.bindToMotionValue(e, n), this.values.set(e, n), this.latestValues[e] = n.get());
   }
+  /**
+   * Remove a motion value and unbind any active subscriptions.
+   */
   removeValue(e) {
     this.values.delete(e);
     const n = this.valueSubscriptions.get(e);
     n && (n(), this.valueSubscriptions.delete(e)), delete this.latestValues[e], this.removeValueFromRenderState(e, this.renderState);
   }
+  /**
+   * Check whether we have a motion value for this key
+   */
   hasValue(e) {
     return this.values.has(e);
   }
   getValue(e, n) {
-    if (this.props.values && this.props.values[e]) return this.props.values[e];
+    if (this.props.values && this.props.values[e])
+      return this.props.values[e];
     let s = this.values.get(e);
-    return s === void 0 && n !== void 0 && (s = ye(n === null ? void 0 : n, { owner: this }), this.addValue(e, s)), s;
+    return s === void 0 && n !== void 0 && (s = Se(n === null ? void 0 : n, { owner: this }), this.addValue(e, s)), s;
   }
+  /**
+   * 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(e, n) {
     var s;
-    let i = this.latestValues[e] === void 0 && this.current ? (s = this.getBaseTargetFromProps(this.props, e)) !== null && s !== void 0 ? s : this.readValueFromInstance(this.current, e, this.options) : this.latestValues[e];
-    var r;
-    return i != null && (typeof i == "string" && (Mn(i) || Cn(i)) ? i = parseFloat(i) : (r = i, !Rr.find(Fn(r)) && se.test(n) && (i = Ln(e, n))), this.setBaseTarget(e, E(i) ? i.get() : i)), E(i) ? i.get() : i;
+    let i = this.latestValues[e] !== void 0 || !this.current ? this.latestValues[e] : (s = this.getBaseTargetFromProps(this.props, e)) !== null && s !== void 0 ? s : this.readValueFromInstance(this.current, e, this.options);
+    return i != null && (typeof i == "string" && (An(i) || xn(i)) ? i = parseFloat(i) : !na(i) && ie.test(n) && (i = Bn(e, n)), this.setBaseTarget(e, F(i) ? i.get() : i)), F(i) ? i.get() : i;
   }
+  /**
+   * Set the base target to later animate back to. This is currently
+   * only hydrated on creation and when we first read a value.
+   */
   setBaseTarget(e, n) {
     this.baseTarget[e] = n;
   }
+  /**
+   * Find the base target for a value thats been removed from all animation
+   * props.
+   */
   getBaseTarget(e) {
     var n;
     const { initial: s } = this.props;
     let i;
     if (typeof s == "string" || typeof s == "object") {
-      const o = it(this.props, s, (n = this.presenceContext) === null || n === void 0 ? void 0 : n.custom);
+      const o = st(this.props, s, (n = this.presenceContext) === null || n === void 0 ? void 0 : n.custom);
       o && (i = o[e]);
     }
-    if (s && i !== void 0) return i;
+    if (s && i !== void 0)
+      return i;
     const r = this.getBaseTargetFromProps(this.props, e);
-    return r === void 0 || E(r) ? this.initialValues[e] !== void 0 && i === void 0 ? void 0 : this.baseTarget[e] : r;
+    return r !== void 0 && !F(r) ? r : this.initialValues[e] !== void 0 && i === void 0 ? void 0 : this.baseTarget[e];
   }
   on(e, n) {
-    return this.events[e] || (this.events[e] = new ts()), this.events[e].add(n);
+    return this.events[e] || (this.events[e] = new Jn()), this.events[e].add(n);
   }
   notify(e, ...n) {
     this.events[e] && this.events[e].notify(...n);
   }
 }
-class Ss extends Dr {
+class Vs extends sa {
   constructor() {
-    super(...arguments), this.KeyframeResolver = $n;
+    super(...arguments), this.KeyframeResolver = Kn;
   }
   sortInstanceNodePosition(e, n) {
-    return 2 & e.compareDocumentPosition(n) ? 1 : -1;
+    return e.compareDocumentPosition(n) & 2 ? 1 : -1;
   }
   getBaseTargetFromProps(e, n) {
     return e.style ? e.style[n] : void 0;
@@ -1893,87 +3188,87 @@ class Ss extends Dr {
   handleChildMotionValue() {
     this.childSubscription && (this.childSubscription(), delete this.childSubscription);
     const { children: e } = this.props;
-    E(e) && (this.childSubscription = e.on("change", (n) => {
+    F(e) && (this.childSubscription = e.on("change", (n) => {
       this.current && (this.current.textContent = `${n}`);
     }));
   }
 }
-class Br extends Ss {
+function ia(t) {
+  return window.getComputedStyle(t);
+}
+class ra extends Vs {
   constructor() {
-    super(...arguments), this.type = "html", this.renderInstance = ps;
+    super(...arguments), this.type = "html", this.renderInstance = ds;
   }
   readValueFromInstance(e, n) {
-    if (q.has(n)) {
-      const i = pt(n);
-      return i && i.default || 0;
-    }
-    {
-      const i = (s = e, window.getComputedStyle(s)), r = (kn(n) ? i.getPropertyValue(n) : i[n]) || 0;
-      return typeof r == "string" ? r.trim() : r;
+    if (z.has(n)) {
+      const s = ht(n);
+      return s && s.default || 0;
+    } else {
+      const s = ia(e), i = (Cn(n) ? s.getPropertyValue(n) : s[n]) || 0;
+      return typeof i == "string" ? i.trim() : i;
     }
-    var s;
   }
   measureInstanceViewportBox(e, { transformPagePoint: n }) {
-    return function(s, i) {
-      return function({ top: r, left: o, right: a, bottom: l }) {
-        return { x: { min: o, max: a }, y: { min: r, max: l } };
-      }(function(r, o) {
-        if (!o) return r;
-        const a = o({ x: r.left, y: r.top }), l = o({ x: r.right, y: r.bottom });
-        return { top: a.y, left: a.x, bottom: l.y, right: l.x };
-      }(s.getBoundingClientRect(), i));
-    }(e, n);
+    return Xr(e, n);
   }
   build(e, n, s) {
-    At(e, n, s.transformTemplate);
+    Mt(e, n, s.transformTemplate);
   }
   scrapeMotionValuesFromProps(e, n, s) {
     return xt(e, n, s);
   }
 }
-class Nr extends Ss {
+class oa extends Vs {
   constructor() {
-    super(...arguments), this.type = "svg", this.isSVGTag = !1, this.measureInstanceViewportBox = Ji;
+    super(...arguments), this.type = "svg", this.isSVGTag = !1, this.measureInstanceViewportBox = is;
   }
   getBaseTargetFromProps(e, n) {
     return e[n];
   }
   readValueFromInstance(e, n) {
-    if (q.has(n)) {
-      const s = pt(n);
+    if (z.has(n)) {
+      const s = ht(n);
       return s && s.default || 0;
     }
-    return n = ms.has(n) ? n : wt(n), e.getAttribute(n);
+    return n = fs.has(n) ? n : wt(n), e.getAttribute(n);
   }
   scrapeMotionValuesFromProps(e, n, s) {
-    return gs(e, n, s);
+    return ms(e, n, s);
   }
   build(e, n, s) {
-    Vt(e, n, this.isSVGTag, s.transformTemplate);
+    Ct(e, n, this.isSVGTag, s.transformTemplate);
   }
   renderInstance(e, n, s, i) {
-    fs(e, n, 0, i);
+    hs(e, n, s, i);
   }
   mount(e) {
-    this.isSVGTag = Ct(e.tagName), super.mount(e);
+    this.isSVGTag = Pt(e.tagName), super.mount(e);
   }
 }
-function Lr({ children: t, features: e, strict: n = !1 }) {
-  const [, s] = Cs(!We(e)), i = Z(void 0);
-  if (!We(e)) {
+const aa = (t, e) => St(t) ? new oa(e) : new ra(e, {
+  allowProjection: t !== hn
+}), la = /* @__PURE__ */ Jo(), ua = /* @__PURE__ */ ks(la);
+function ca({ children: t, features: e, strict: n = !1 }) {
+  const [, s] = Ps(!$e(e)), i = Z(void 0);
+  if (!$e(e)) {
     const { renderer: r, ...o } = e;
-    i.current = r, nt(o);
+    i.current = r, et(o);
   }
-  return st(() => {
-    We(e) && e().then(({ renderer: r, ...o }) => {
-      nt(o), i.current = r, s(!0);
+  return nt(() => {
+    $e(e) && e().then(({ renderer: r, ...o }) => {
+      et(o), i.current = r, s(!0);
     });
-  }, []), I(St.Provider, { value: { renderer: i.current, strict: n }, children: t });
+  }, []), E(Vt.Provider, { value: { renderer: i.current, strict: n }, children: t });
 }
-function We(t) {
+function $e(t) {
   return typeof t == "function";
 }
-const $r = { renderer: (t, e) => Tt(t) ? new Nr(e) : new Br(e, { allowProjection: t !== vn }), ...Gi, ...cr }, jr = Ms(Is(Ir()).div)`
+const da = {
+  renderer: aa,
+  ...Gr,
+  ...bo
+}, fa = Fs(ua.div)`
   ${({ theme: t }) => `
     background-color: ${t.palette.white};
     box-shadow: ${t.shadows.lg};
@@ -1996,14 +3291,166 @@ const $r = { renderer: (t, e) => Tt(t) ? new Nr(e) : new Br(e, { allowProjection
       height: auto;
     }
   `}
-`, to = ({ children: t, closeIconId: e = "close-menu", isOpen: n, items: s, onClose: i, primaryButtonText: r, primaryOnClick: o, secondaryButtonText: a, secondaryOnClick: l, title: c }) => {
-  const u = Ps(), h = Z(null), d = fn((f) => () => {
-    f(), i();
-  }, [i]);
-  return Os(h.current, () => {
-    i();
-  }, !0), I(Lr, { features: $r, children: I(jr, { animate: n ? { display: "block", x: 0 } : { transitionEnd: { display: "none" }, x: "100%" }, initial: { display: "none", x: "100%" }, ref: h, transition: { bounce: 0, duration: 0.6, type: "spring" }, children: H(z, { height: "100%", position: "relative", children: [H(z, { alignItems: "center", bgColor: u.palette.white, borderBottom: "1px solid", borderColor: u.palette.gray[200], display: "flex", gap: 1.25, justify: "space-between", padding: [1.25, 1.25, 1.25, 1.25], position: "sticky", top: "0", zIndex: 40, children: [I(Fs, { color: u.palette.black, display: "inline", fontWeight: "bold", size: "xl", children: c }), I(Es, { icon: "close", iconColor: u.palette.gray[400], iconSize: "xs", iconTransform: "grow-4", iconType: "fa-light", id: e, onClick: i, px: 0.25, py: 0.25, variant: "ghost" })] }), H(z, { display: "flex", flexDirection: "column", justify: "space-between", minHeight: "100vh", children: [H(z, { py: 1.25, children: [(s ?? []).map(({ customBadge: f, description: v, icon: p, onClick: g, requiresUpgrade: m, title: S }) => I(ks, { customBadge: f, description: v, icon: p, onClick: d(g), requiresUpgrade: m, title: S }, S)), t && I(z, { px: 1.25, children: t })] }), r === void 0 ? void 0 : H(z, { alignItems: "center", bgColor: u.palette.white, borderColor: u.palette.gray[200], borderTop: "1px solid", bottom: "0", display: "flex", gap: 1.25, justify: "end", padding: [1.25, 1.25, 1.25, 1.25], position: "sticky", width: "100%", zIndex: 40, children: [a === void 0 ? void 0 : I(Pt, { color: `${u.palette.primary[500]} !important`, onClick: l, pl: 0.5, pr: 0.5, variant: "ghost", children: a }), I(Pt, { onClick: o, type: "submit", children: r })] })] })] }) }) });
+`, Fa = ({
+  children: t,
+  closeIconId: e = "close-menu",
+  isOpen: n,
+  items: s,
+  onClose: i,
+  primaryButtonText: r,
+  primaryOnClick: o,
+  secondaryButtonText: a,
+  secondaryOnClick: l,
+  title: u
+}) => {
+  const c = Ds(), f = Z(null), d = fn(
+    (h) => () => {
+      h(), i();
+    },
+    [i]
+  );
+  return Es(
+    f.current,
+    () => {
+      i();
+    },
+    !0
+  ), /* @__PURE__ */ E(ca, { features: da, children: /* @__PURE__ */ E(
+    fa,
+    {
+      animate: n ? {
+        display: "block",
+        x: 0
+      } : {
+        transitionEnd: {
+          display: "none"
+        },
+        x: "100%"
+      },
+      initial: {
+        display: "none",
+        x: "100%"
+      },
+      ref: f,
+      transition: {
+        bounce: 0,
+        duration: 0.6,
+        type: "spring"
+      },
+      children: /* @__PURE__ */ Y(q, { height: "100%", position: "relative", children: [
+        /* @__PURE__ */ Y(
+          q,
+          {
+            alignItems: "center",
+            bgColor: c.palette.white,
+            borderBottom: "1px solid",
+            borderColor: c.palette.gray[200],
+            display: "flex",
+            gap: 1.25,
+            justify: "space-between",
+            padding: [1.25, 1.25, 1.25, 1.25],
+            position: "sticky",
+            top: "0",
+            zIndex: 40,
+            children: [
+              /* @__PURE__ */ E(
+                Os,
+                {
+                  color: c.palette.black,
+                  display: "inline",
+                  fontWeight: "bold",
+                  size: "xl",
+                  children: u
+                }
+              ),
+              /* @__PURE__ */ E(
+                Is,
+                {
+                  icon: "close",
+                  iconColor: c.palette.gray[400],
+                  iconSize: "xs",
+                  iconTransform: "grow-4",
+                  iconType: "fa-light",
+                  id: e,
+                  onClick: i,
+                  px: 0.25,
+                  py: 0.25,
+                  variant: "ghost"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ Y(
+          q,
+          {
+            display: "flex",
+            flexDirection: "column",
+            justify: "space-between",
+            minHeight: "100vh",
+            children: [
+              /* @__PURE__ */ Y(q, { py: 1.25, children: [
+                (s ?? []).map(
+                  ({
+                    customBadge: h,
+                    description: y,
+                    icon: v,
+                    onClick: b,
+                    requiresUpgrade: p,
+                    title: g
+                  }) => /* @__PURE__ */ E(
+                    Rs,
+                    {
+                      customBadge: h,
+                      description: y,
+                      icon: v,
+                      onClick: d(b),
+                      requiresUpgrade: p,
+                      title: g
+                    },
+                    g
+                  )
+                ),
+                t && /* @__PURE__ */ E(q, { px: 1.25, children: t })
+              ] }),
+              r === void 0 ? void 0 : /* @__PURE__ */ Y(
+                q,
+                {
+                  alignItems: "center",
+                  bgColor: c.palette.white,
+                  borderColor: c.palette.gray[200],
+                  borderTop: "1px solid",
+                  bottom: "0",
+                  display: "flex",
+                  gap: 1.25,
+                  justify: "end",
+                  padding: [1.25, 1.25, 1.25, 1.25],
+                  position: "sticky",
+                  width: "100%",
+                  zIndex: 40,
+                  children: [
+                    a === void 0 ? void 0 : /* @__PURE__ */ E(
+                      Rt,
+                      {
+                        color: `${c.palette.primary[500]} !important`,
+                        onClick: l,
+                        pl: 0.5,
+                        pr: 0.5,
+                        variant: "ghost",
+                        children: a
+                      }
+                    ),
+                    /* @__PURE__ */ E(Rt, { onClick: o, type: "submit", children: r })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
 };
 export {
-  to as SlideOutMenu
+  Fa as SlideOutMenu
 };