@telegraph/tag 0.0.94 → 0.0.95

package/dist/esm/index.mjs

@@ -1,55 +1,58 @@
-import { jsx as F, jsxs as ut } from "react/jsx-runtime";
-import { Button as we } from "@telegraph/button";
-import { Icon as Bs } from "@telegraph/icon";
-import { Stack as Ks } from "@telegraph/layout";
-import { Tooltip as $s } from "@telegraph/tooltip";
-import { Text as Ws } from "@telegraph/typography";
-import { clsx as js } from "clsx";
-import { X as pn, Check as _s, Copy as Gs } from "lucide-react";
-import G, { createContext as ee, useRef as ue, useLayoutEffect as zs, useEffect as ct, useState as Us, useContext as E, useMemo as De, useCallback as Hs, useInsertionEffect as Ys, forwardRef as Xs, Fragment as mn, createElement as qs } from "react";
-const Zs = ee({});
-function Js(e) {
-  const t = ue(null);
+import { jsx as F, jsxs as lt } from "react/jsx-runtime";
+import { Button as Se } from "@telegraph/button";
+import { Icon as js } from "@telegraph/icon";
+import { Stack as _s } from "@telegraph/layout";
+import { Tooltip as Gs } from "@telegraph/tooltip";
+import { Text as zs } from "@telegraph/typography";
+import { clsx as Hs } from "clsx";
+import { X as yn, Check as Us, Copy as Ys } from "lucide-react";
+import z, { createContext as se, useRef as fe, useLayoutEffect as Xs, useEffect as ft, useState as qs, useContext as E, useMemo as Oe, Fragment as bn, createElement as Zs, useCallback as Js, useInsertionEffect as Qs, forwardRef as ei } from "react";
+const ti = se({});
+function ni(e) {
+  const t = fe(null);
   return t.current === null && (t.current = e()), t.current;
 }
-const lt = typeof window < "u", Qs = lt ? zs : ct, gn = /* @__PURE__ */ ee(null);
-function ei(e, t) {
+const dt = typeof window < "u", si = dt ? Xs : ft, Tn = /* @__PURE__ */ se(null);
+function ii(e, t) {
   e.indexOf(t) === -1 && e.push(t);
 }
-function ti(e, t) {
+function ri(e, t) {
   const n = e.indexOf(t);
   n > -1 && e.splice(n, 1);
 }
-const H = (e, t, n) => n > t ? t : n < e ? e : n;
-let pe = () => {
-}, Y = () => {
+const Y = (e, t, n) => n > t ? t : n < e ? e : n;
+function ze(e, t) {
+  return t ? `${e}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${t}` : e;
+}
+let ge = () => {
+}, X = () => {
 };
-process.env.NODE_ENV !== "production" && (pe = (e, t) => {
-  !e && typeof console < "u" && console.warn(t);
-}, Y = (e, t) => {
+process.env.NODE_ENV !== "production" && (ge = (e, t, n) => {
+  !e && typeof console < "u" && console.warn(ze(t, n));
+}, X = (e, t, n) => {
   if (!e)
-    throw new Error(t);
+    throw new Error(ze(t, n));
 });
-const K = {}, yn = (e) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(e);
-function ni(e) {
+const K = {}, vn = (e) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(e);
+function oi(e) {
   return typeof e == "object" && e !== null;
 }
-const bn = (e) => /^0[^.\s]+$/u.test(e);
+const wn = (e) => /^0[^.\s]+$/u.test(e);
 // @__NO_SIDE_EFFECTS__
-function ft(e) {
+function ht(e) {
   let t;
   return () => (t === void 0 && (t = e()), t);
 }
-const te = /* @__NO_SIDE_EFFECTS__ */ (e) => e, si = (e, t) => (n) => t(e(n)), Re = (...e) => e.reduce(si), vn = /* @__NO_SIDE_EFFECTS__ */ (e, t, n) => {
+const ie = /* @__NO_SIDE_EFFECTS__ */ (e) => e, ai = (e, t) => (n) => t(e(n)), Ie = (...e) => e.reduce(ai), Vn = /* @__NO_SIDE_EFFECTS__ */ (e, t, n) => {
   const s = t - e;
   return s === 0 ? 1 : (n - e) / s;
 };
-class Tn {
+class Sn {
   constructor() {
     this.subscriptions = [];
   }
   add(t) {
-    return ei(this.subscriptions, t), () => ti(this.subscriptions, t);
+    return ii(this.subscriptions, t), () => ri(this.subscriptions, t);
   }
   notify(t, n, s) {
     const i = this.subscriptions.length;
@@ -70,48 +73,48 @@ class Tn {
   }
 }
 const N = /* @__NO_SIDE_EFFECTS__ */ (e) => e * 1e3, B = /* @__NO_SIDE_EFFECTS__ */ (e) => e / 1e3;
-function wn(e, t) {
+function xn(e, t) {
   return t ? e * (1e3 / t) : 0;
 }
-const kt = /* @__PURE__ */ new Set();
-function Vn(e, t, n) {
-  e || kt.has(t) || (console.warn(t), kt.add(t));
+const Bt = /* @__PURE__ */ new Set();
+function An(e, t, n) {
+  e || Bt.has(t) || (console.warn(ze(t, n)), Bt.add(t));
 }
-const Sn = (e, t, n) => (((1 - 3 * n + 3 * t) * e + (3 * n - 6 * t)) * e + 3 * t) * e, ii = 1e-7, ri = 12;
-function oi(e, t, n, s, i) {
+const Mn = (e, t, n) => (((1 - 3 * n + 3 * t) * e + (3 * n - 6 * t)) * e + 3 * t) * e, ui = 1e-7, ci = 12;
+function li(e, t, n, s, i) {
   let r, o, a = 0;
   do
-    o = t + (n - t) / 2, r = Sn(o, s, i) - e, r > 0 ? n = o : t = o;
-  while (Math.abs(r) > ii && ++a < ri);
+    o = t + (n - t) / 2, r = Mn(o, s, i) - e, r > 0 ? n = o : t = o;
+  while (Math.abs(r) > ui && ++a < ci);
   return o;
 }
-function me(e, t, n, s) {
+function ye(e, t, n, s) {
   if (e === t && n === s)
-    return te;
-  const i = (r) => oi(r, 0, 1, e, n);
-  return (r) => r === 0 || r === 1 ? r : Sn(i(r), t, s);
-}
-const xn = (e) => (t) => t <= 0.5 ? e(2 * t) / 2 : (2 - e(2 * (1 - t))) / 2, An = (e) => (t) => 1 - e(1 - t), Mn = /* @__PURE__ */ me(0.33, 1.53, 0.69, 0.99), dt = /* @__PURE__ */ An(Mn), Cn = /* @__PURE__ */ xn(dt), Pn = (e) => (e *= 2) < 1 ? 0.5 * dt(e) : 0.5 * (2 - Math.pow(2, -10 * (e - 1))), ht = (e) => 1 - Math.sin(Math.acos(e)), ai = An(ht), Fn = xn(ht), ui = /* @__PURE__ */ me(0.42, 0, 1, 1), ci = /* @__PURE__ */ me(0, 0, 0.58, 1), Dn = /* @__PURE__ */ me(0.42, 0, 0.58, 1), li = (e) => Array.isArray(e) && typeof e[0] != "number", Rn = (e) => Array.isArray(e) && typeof e[0] == "number", Nt = {
-  linear: te,
-  easeIn: ui,
-  easeInOut: Dn,
-  easeOut: ci,
-  circIn: ht,
-  circInOut: Fn,
-  circOut: ai,
-  backIn: dt,
-  backInOut: Cn,
-  backOut: Mn,
-  anticipate: Pn
-}, fi = (e) => typeof e == "string", Lt = (e) => {
-  if (Rn(e)) {
-    Y(e.length === 4, "Cubic bezier arrays must contain four numerical values.");
+    return ie;
+  const i = (r) => li(r, 0, 1, e, n);
+  return (r) => r === 0 || r === 1 ? r : Mn(i(r), t, s);
+}
+const Cn = (e) => (t) => t <= 0.5 ? e(2 * t) / 2 : (2 - e(2 * (1 - t))) / 2, Pn = (e) => (t) => 1 - e(1 - t), Fn = /* @__PURE__ */ ye(0.33, 1.53, 0.69, 0.99), pt = /* @__PURE__ */ Pn(Fn), Dn = /* @__PURE__ */ Cn(pt), Rn = (e) => (e *= 2) < 1 ? 0.5 * pt(e) : 0.5 * (2 - Math.pow(2, -10 * (e - 1))), mt = (e) => 1 - Math.sin(Math.acos(e)), fi = Pn(mt), On = Cn(mt), di = /* @__PURE__ */ ye(0.42, 0, 1, 1), hi = /* @__PURE__ */ ye(0, 0, 0.58, 1), In = /* @__PURE__ */ ye(0.42, 0, 0.58, 1), pi = (e) => Array.isArray(e) && typeof e[0] != "number", kn = (e) => Array.isArray(e) && typeof e[0] == "number", Kt = {
+  linear: ie,
+  easeIn: di,
+  easeInOut: In,
+  easeOut: hi,
+  circIn: mt,
+  circInOut: On,
+  circOut: fi,
+  backIn: pt,
+  backInOut: Dn,
+  backOut: Fn,
+  anticipate: Rn
+}, mi = (e) => typeof e == "string", $t = (e) => {
+  if (kn(e)) {
+    X(e.length === 4, "Cubic bezier arrays must contain four numerical values.", "cubic-bezier-length");
     const [t, n, s, i] = e;
-    return me(t, n, s, i);
-  } else if (fi(e))
-    return Y(Nt[e] !== void 0, `Invalid easing type '${e}'`), Nt[e];
+    return ye(t, n, s, i);
+  } else if (mi(e))
+    return X(Kt[e] !== void 0, `Invalid easing type '${e}'`, "invalid-easing-type"), Kt[e];
   return e;
-}, ve = [
+}, we = [
   "setup",
   // Compute
   "read",
@@ -129,7 +132,7 @@ const xn = (e) => (t) => t <= 0.5 ? e(2 * t) / 2 : (2 - e(2 * (1 - t))) / 2, An
   "postRender"
   // Compute
 ];
-function di(e, t) {
+function gi(e, t) {
   let n = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = !1, r = !1;
   const o = /* @__PURE__ */ new WeakSet();
   let a = {
@@ -144,9 +147,9 @@ function di(e, t) {
     /**
      * Schedule a process to run on the next frame.
      */
-    schedule: (u, d = !1, f = !1) => {
-      const y = f && i ? n : s;
-      return d && o.add(u), y.has(u) || y.add(u), u;
+    schedule: (u, f = !1, d = !1) => {
+      const y = d && i ? n : s;
+      return f && o.add(u), y.has(u) || y.add(u), u;
     },
     /**
      * Cancel the provided callback from running on the next frame.
@@ -167,70 +170,70 @@ function di(e, t) {
   };
   return l;
 }
-const hi = 40;
-function On(e, t) {
+const yi = 40;
+function En(e, t) {
   let n = !1, s = !0;
   const i = {
     delta: 0,
     timestamp: 0,
     isProcessing: !1
-  }, r = () => n = !0, o = ve.reduce((g, x) => (g[x] = di(r), g), {}), { setup: a, read: c, resolveKeyframes: l, preUpdate: u, update: d, preRender: f, render: h, postRender: y } = o, b = () => {
+  }, r = () => n = !0, o = we.reduce((g, x) => (g[x] = gi(r), g), {}), { setup: a, read: c, resolveKeyframes: l, preUpdate: u, update: f, preRender: d, render: h, postRender: y } = o, b = () => {
     const g = K.useManualTiming ? i.timestamp : performance.now();
-    n = !1, K.useManualTiming || (i.delta = s ? 1e3 / 60 : Math.max(Math.min(g - i.timestamp, hi), 1)), i.timestamp = g, i.isProcessing = !0, a.process(i), c.process(i), l.process(i), u.process(i), d.process(i), f.process(i), h.process(i), y.process(i), i.isProcessing = !1, n && t && (s = !1, e(b));
-  }, T = () => {
+    n = !1, K.useManualTiming || (i.delta = s ? 1e3 / 60 : Math.max(Math.min(g - i.timestamp, yi), 1)), i.timestamp = g, i.isProcessing = !0, a.process(i), c.process(i), l.process(i), u.process(i), f.process(i), d.process(i), h.process(i), y.process(i), i.isProcessing = !1, n && t && (s = !1, e(b));
+  }, v = () => {
     n = !0, s = !0, i.isProcessing || e(b);
   };
-  return { schedule: ve.reduce((g, x) => {
-    const v = o[x];
-    return g[x] = (S, C = !1, w = !1) => (n || T(), v.schedule(S, C, w)), g;
+  return { schedule: we.reduce((g, x) => {
+    const T = o[x];
+    return g[x] = (S, C = !1, w = !1) => (n || v(), T.schedule(S, C, w)), g;
   }, {}), cancel: (g) => {
-    for (let x = 0; x < ve.length; x++)
-      o[ve[x]].cancel(g);
+    for (let x = 0; x < we.length; x++)
+      o[we[x]].cancel(g);
   }, state: i, steps: o };
 }
-const { schedule: k, cancel: ze, state: xe } = /* @__PURE__ */ On(typeof requestAnimationFrame < "u" ? requestAnimationFrame : te, !0);
-let Ve;
-function pi() {
-  Ve = void 0;
+const { schedule: L, cancel: He, state: Me } = /* @__PURE__ */ En(typeof requestAnimationFrame < "u" ? requestAnimationFrame : ie, !0);
+let xe;
+function bi() {
+  xe = void 0;
 }
-const I = {
-  now: () => (Ve === void 0 && I.set(xe.isProcessing || K.useManualTiming ? xe.timestamp : performance.now()), Ve),
+const k = {
+  now: () => (xe === void 0 && k.set(Me.isProcessing || K.useManualTiming ? Me.timestamp : performance.now()), xe),
   set: (e) => {
-    Ve = e, queueMicrotask(pi);
+    xe = e, queueMicrotask(bi);
   }
-}, In = (e) => (t) => typeof t == "string" && t.startsWith(e), En = /* @__PURE__ */ In("--"), mi = /* @__PURE__ */ In("var(--"), pt = (e) => mi(e) ? gi.test(e.split("/*")[0].trim()) : !1, gi = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, ne = {
+}, Ln = (e) => (t) => typeof t == "string" && t.startsWith(e), Nn = /* @__PURE__ */ Ln("--"), Ti = /* @__PURE__ */ Ln("var(--"), gt = (e) => Ti(e) ? vi.test(e.split("/*")[0].trim()) : !1, vi = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu, re = {
   test: (e) => typeof e == "number",
   parse: parseFloat,
   transform: (e) => e
-}, le = {
-  ...ne,
-  transform: (e) => H(0, 1, e)
-}, Te = {
-  ...ne,
+}, he = {
+  ...re,
+  transform: (e) => Y(0, 1, e)
+}, Ve = {
+  ...re,
   default: 1
-}, ce = (e) => Math.round(e * 1e5) / 1e5, mt = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
-function yi(e) {
+}, de = (e) => Math.round(e * 1e5) / 1e5, yt = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
+function wi(e) {
   return e == null;
 }
-const bi = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu, gt = (e, t) => (n) => !!(typeof n == "string" && bi.test(n) && n.startsWith(e) || t && !yi(n) && Object.prototype.hasOwnProperty.call(n, t)), kn = (e, t, n) => (s) => {
+const Vi = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu, bt = (e, t) => (n) => !!(typeof n == "string" && Vi.test(n) && n.startsWith(e) || t && !wi(n) && Object.prototype.hasOwnProperty.call(n, t)), Bn = (e, t, n) => (s) => {
   if (typeof s != "string")
     return s;
-  const [i, r, o, a] = s.match(mt);
+  const [i, r, o, a] = s.match(yt);
   return {
     [e]: parseFloat(i),
     [t]: parseFloat(r),
     [n]: parseFloat(o),
     alpha: a !== void 0 ? parseFloat(a) : 1
   };
-}, vi = (e) => H(0, 255, e), Be = {
-  ...ne,
-  transform: (e) => Math.round(vi(e))
-}, j = {
-  test: /* @__PURE__ */ gt("rgb", "red"),
-  parse: /* @__PURE__ */ kn("red", "green", "blue"),
-  transform: ({ red: e, green: t, blue: n, alpha: s = 1 }) => "rgba(" + Be.transform(e) + ", " + Be.transform(t) + ", " + Be.transform(n) + ", " + ce(le.transform(s)) + ")"
+}, Si = (e) => Y(0, 255, e), Be = {
+  ...re,
+  transform: (e) => Math.round(Si(e))
+}, _ = {
+  test: /* @__PURE__ */ bt("rgb", "red"),
+  parse: /* @__PURE__ */ Bn("red", "green", "blue"),
+  transform: ({ red: e, green: t, blue: n, alpha: s = 1 }) => "rgba(" + Be.transform(e) + ", " + Be.transform(t) + ", " + Be.transform(n) + ", " + de(he.transform(s)) + ")"
 };
-function Ti(e) {
+function xi(e) {
   let t = "", n = "", s = "", i = "";
   return e.length > 5 ? (t = e.substring(1, 3), n = e.substring(3, 5), s = e.substring(5, 7), i = e.substring(7, 9)) : (t = e.substring(1, 2), n = e.substring(2, 3), s = e.substring(3, 4), i = e.substring(4, 5), t += t, n += n, s += s, i += i), {
     red: parseInt(t, 16),
@@ -240,75 +243,75 @@ function Ti(e) {
   };
 }
 const Ue = {
-  test: /* @__PURE__ */ gt("#"),
-  parse: Ti,
-  transform: j.transform
-}, ge = /* @__NO_SIDE_EFFECTS__ */ (e) => ({
+  test: /* @__PURE__ */ bt("#"),
+  parse: xi,
+  transform: _.transform
+}, be = /* @__NO_SIDE_EFFECTS__ */ (e) => ({
   test: (t) => typeof t == "string" && t.endsWith(e) && t.split(" ").length === 1,
   parse: parseFloat,
   transform: (t) => `${t}${e}`
-}), $ = /* @__PURE__ */ ge("deg"), J = /* @__PURE__ */ ge("%"), m = /* @__PURE__ */ ge("px"), wi = /* @__PURE__ */ ge("vh"), Vi = /* @__PURE__ */ ge("vw"), Bt = {
-  ...J,
-  parse: (e) => J.parse(e) / 100,
-  transform: (e) => J.transform(e * 100)
-}, q = {
-  test: /* @__PURE__ */ gt("hsl", "hue"),
-  parse: /* @__PURE__ */ kn("hue", "saturation", "lightness"),
-  transform: ({ hue: e, saturation: t, lightness: n, alpha: s = 1 }) => "hsla(" + Math.round(e) + ", " + J.transform(ce(t)) + ", " + J.transform(ce(n)) + ", " + ce(le.transform(s)) + ")"
+}), $ = /* @__PURE__ */ be("deg"), ee = /* @__PURE__ */ be("%"), m = /* @__PURE__ */ be("px"), Ai = /* @__PURE__ */ be("vh"), Mi = /* @__PURE__ */ be("vw"), Wt = {
+  ...ee,
+  parse: (e) => ee.parse(e) / 100,
+  transform: (e) => ee.transform(e * 100)
+}, J = {
+  test: /* @__PURE__ */ bt("hsl", "hue"),
+  parse: /* @__PURE__ */ Bn("hue", "saturation", "lightness"),
+  transform: ({ hue: e, saturation: t, lightness: n, alpha: s = 1 }) => "hsla(" + Math.round(e) + ", " + ee.transform(de(t)) + ", " + ee.transform(de(n)) + ", " + de(he.transform(s)) + ")"
 }, M = {
-  test: (e) => j.test(e) || Ue.test(e) || q.test(e),
-  parse: (e) => j.test(e) ? j.parse(e) : q.test(e) ? q.parse(e) : Ue.parse(e),
-  transform: (e) => typeof e == "string" ? e : e.hasOwnProperty("red") ? j.transform(e) : q.transform(e),
+  test: (e) => _.test(e) || Ue.test(e) || J.test(e),
+  parse: (e) => _.test(e) ? _.parse(e) : J.test(e) ? J.parse(e) : Ue.parse(e),
+  transform: (e) => typeof e == "string" ? e : e.hasOwnProperty("red") ? _.transform(e) : J.transform(e),
   getAnimatableNone: (e) => {
     const t = M.parse(e);
     return t.alpha = 0, M.transform(t);
   }
-}, Si = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
-function xi(e) {
+}, Ci = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
+function Pi(e) {
   var t, n;
-  return isNaN(e) && typeof e == "string" && (((t = e.match(mt)) == null ? void 0 : t.length) || 0) + (((n = e.match(Si)) == null ? void 0 : n.length) || 0) > 0;
+  return isNaN(e) && typeof e == "string" && (((t = e.match(yt)) == null ? void 0 : t.length) || 0) + (((n = e.match(Ci)) == null ? void 0 : n.length) || 0) > 0;
 }
-const Nn = "number", Ln = "color", Ai = "var", Mi = "var(", Kt = "${}", Ci = /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 fe(e) {
+const Kn = "number", $n = "color", Fi = "var", Di = "var(", jt = "${}", Ri = /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 pe(e) {
   const t = e.toString(), n = [], s = {
     color: [],
     number: [],
     var: []
   }, i = [];
   let r = 0;
-  const a = t.replace(Ci, (c) => (M.test(c) ? (s.color.push(r), i.push(Ln), n.push(M.parse(c))) : c.startsWith(Mi) ? (s.var.push(r), i.push(Ai), n.push(c)) : (s.number.push(r), i.push(Nn), n.push(parseFloat(c))), ++r, Kt)).split(Kt);
+  const a = t.replace(Ri, (c) => (M.test(c) ? (s.color.push(r), i.push($n), n.push(M.parse(c))) : c.startsWith(Di) ? (s.var.push(r), i.push(Fi), n.push(c)) : (s.number.push(r), i.push(Kn), n.push(parseFloat(c))), ++r, jt)).split(jt);
   return { values: n, split: a, indexes: s, types: i };
 }
-function Bn(e) {
-  return fe(e).values;
+function Wn(e) {
+  return pe(e).values;
 }
-function Kn(e) {
-  const { split: t, types: n } = fe(e), s = t.length;
+function jn(e) {
+  const { split: t, types: n } = pe(e), s = t.length;
   return (i) => {
     let r = "";
     for (let o = 0; o < s; o++)
       if (r += t[o], i[o] !== void 0) {
         const a = n[o];
-        a === Nn ? r += ce(i[o]) : a === Ln ? r += M.transform(i[o]) : r += i[o];
+        a === Kn ? r += de(i[o]) : a === $n ? r += M.transform(i[o]) : r += i[o];
       }
     return r;
   };
 }
-const Pi = (e) => typeof e == "number" ? 0 : M.test(e) ? M.getAnimatableNone(e) : e;
-function Fi(e) {
-  const t = Bn(e);
-  return Kn(e)(t.map(Pi));
+const Oi = (e) => typeof e == "number" ? 0 : M.test(e) ? M.getAnimatableNone(e) : e;
+function Ii(e) {
+  const t = Wn(e);
+  return jn(e)(t.map(Oi));
 }
-const se = {
-  test: xi,
-  parse: Bn,
-  createTransformer: Kn,
-  getAnimatableNone: Fi
+const oe = {
+  test: Pi,
+  parse: Wn,
+  createTransformer: jn,
+  getAnimatableNone: Ii
 };
 function Ke(e, t, n) {
   return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? e + (t - e) * 6 * n : n < 1 / 2 ? t : n < 2 / 3 ? e + (t - e) * (2 / 3 - n) * 6 : e;
 }
-function Di({ hue: e, saturation: t, lightness: n, alpha: s }) {
+function ki({ hue: e, saturation: t, lightness: n, alpha: s }) {
   e /= 360, t /= 100, n /= 100;
   let i = 0, r = 0, o = 0;
   if (!t)
@@ -324,55 +327,55 @@ function Di({ hue: e, saturation: t, lightness: n, alpha: s }) {
     alpha: s
   };
 }
-function Ae(e, t) {
+function Ce(e, t) {
   return (n) => n > 0 ? t : e;
 }
-const Oe = (e, t, n) => e + (t - e) * n, $e = (e, t, n) => {
+const ke = (e, t, n) => e + (t - e) * n, $e = (e, t, n) => {
   const s = e * e, i = n * (t * t - s) + s;
   return i < 0 ? 0 : Math.sqrt(i);
-}, Ri = [Ue, j, q], Oi = (e) => Ri.find((t) => t.test(e));
-function $t(e) {
-  const t = Oi(e);
-  if (pe(!!t, `'${e}' is not an animatable color. Use the equivalent color code instead.`), !t)
+}, Ei = [Ue, _, J], Li = (e) => Ei.find((t) => t.test(e));
+function _t(e) {
+  const t = Li(e);
+  if (ge(!!t, `'${e}' is not an animatable color. Use the equivalent color code instead.`, "color-not-animatable"), !t)
     return !1;
   let n = t.parse(e);
-  return t === q && (n = Di(n)), n;
+  return t === J && (n = ki(n)), n;
 }
-const Wt = (e, t) => {
-  const n = $t(e), s = $t(t);
+const Gt = (e, t) => {
+  const n = _t(e), s = _t(t);
   if (!n || !s)
-    return Ae(e, t);
+    return Ce(e, t);
   const i = { ...n };
-  return (r) => (i.red = $e(n.red, s.red, r), i.green = $e(n.green, s.green, r), i.blue = $e(n.blue, s.blue, r), i.alpha = Oe(n.alpha, s.alpha, r), j.transform(i));
-}, He = /* @__PURE__ */ new Set(["none", "hidden"]);
-function Ii(e, t) {
-  return He.has(e) ? (n) => n <= 0 ? e : t : (n) => n >= 1 ? t : e;
+  return (r) => (i.red = $e(n.red, s.red, r), i.green = $e(n.green, s.green, r), i.blue = $e(n.blue, s.blue, r), i.alpha = ke(n.alpha, s.alpha, r), _.transform(i));
+}, Ye = /* @__PURE__ */ new Set(["none", "hidden"]);
+function Ni(e, t) {
+  return Ye.has(e) ? (n) => n <= 0 ? e : t : (n) => n >= 1 ? t : e;
 }
-function Ei(e, t) {
-  return (n) => Oe(e, t, n);
+function Bi(e, t) {
+  return (n) => ke(e, t, n);
 }
-function yt(e) {
-  return typeof e == "number" ? Ei : typeof e == "string" ? pt(e) ? Ae : M.test(e) ? Wt : Li : Array.isArray(e) ? $n : typeof e == "object" ? M.test(e) ? Wt : ki : Ae;
+function Tt(e) {
+  return typeof e == "number" ? Bi : typeof e == "string" ? gt(e) ? Ce : M.test(e) ? Gt : Wi : Array.isArray(e) ? _n : typeof e == "object" ? M.test(e) ? Gt : Ki : Ce;
 }
-function $n(e, t) {
-  const n = [...e], s = n.length, i = e.map((r, o) => yt(r)(r, t[o]));
+function _n(e, t) {
+  const n = [...e], s = n.length, i = e.map((r, o) => Tt(r)(r, t[o]));
   return (r) => {
     for (let o = 0; o < s; o++)
       n[o] = i[o](r);
     return n;
   };
 }
-function ki(e, t) {
+function Ki(e, t) {
   const n = { ...e, ...t }, s = {};
   for (const i in n)
-    e[i] !== void 0 && t[i] !== void 0 && (s[i] = yt(e[i])(e[i], t[i]));
+    e[i] !== void 0 && t[i] !== void 0 && (s[i] = Tt(e[i])(e[i], t[i]));
   return (i) => {
     for (const r in s)
       n[r] = s[r](i);
     return n;
   };
 }
-function Ni(e, t) {
+function $i(e, t) {
   const n = [], s = { color: 0, var: 0, number: 0 };
   for (let i = 0; i < t.values.length; i++) {
     const r = t.types[i], o = e.indexes[r][s[r]], a = e.values[o] ?? 0;
@@ -380,51 +383,51 @@ function Ni(e, t) {
   }
   return n;
 }
-const Li = (e, t) => {
-  const n = se.createTransformer(t), s = fe(e), i = fe(t);
-  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 ? He.has(e) && !i.values.length || He.has(t) && !s.values.length ? Ii(e, t) : Re($n(Ni(s, i), i.values), n) : (pe(!0, `Complex values '${e}' and '${t}' 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.`), Ae(e, t));
+const Wi = (e, t) => {
+  const n = oe.createTransformer(t), s = pe(e), i = pe(t);
+  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 ? Ye.has(e) && !i.values.length || Ye.has(t) && !s.values.length ? Ni(e, t) : Ie(_n($i(s, i), i.values), n) : (ge(!0, `Complex values '${e}' and '${t}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`, "complex-values-different"), Ce(e, t));
 };
-function Wn(e, t, n) {
-  return typeof e == "number" && typeof t == "number" && typeof n == "number" ? Oe(e, t, n) : yt(e)(e, t);
+function Gn(e, t, n) {
+  return typeof e == "number" && typeof t == "number" && typeof n == "number" ? ke(e, t, n) : Tt(e)(e, t);
 }
-const Bi = (e) => {
+const ji = (e) => {
   const t = ({ timestamp: n }) => e(n);
   return {
-    start: (n = !0) => k.update(t, n),
-    stop: () => ze(t),
+    start: (n = !0) => L.update(t, n),
+    stop: () => He(t),
     /**
      * If we're processing this frame we can use the
      * framelocked timestamp to keep things in sync.
      */
-    now: () => xe.isProcessing ? xe.timestamp : I.now()
+    now: () => Me.isProcessing ? Me.timestamp : k.now()
   };
-}, jn = (e, t, n = 10) => {
+}, zn = (e, t, n = 10) => {
   let s = "";
   const i = Math.max(Math.round(t / n), 2);
   for (let r = 0; r < i; r++)
     s += Math.round(e(r / (i - 1)) * 1e4) / 1e4 + ", ";
   return `linear(${s.substring(0, s.length - 2)})`;
-}, Me = 2e4;
-function bt(e) {
+}, Pe = 2e4;
+function vt(e) {
   let t = 0;
   const n = 50;
   let s = e.next(t);
-  for (; !s.done && t < Me; )
+  for (; !s.done && t < Pe; )
     t += n, s = e.next(t);
-  return t >= Me ? 1 / 0 : t;
+  return t >= Pe ? 1 / 0 : t;
 }
-function Ki(e, t = 100, n) {
-  const s = n({ ...e, keyframes: [0, t] }), i = Math.min(bt(s), Me);
+function _i(e, t = 100, n) {
+  const s = n({ ...e, keyframes: [0, t] }), i = Math.min(vt(s), Pe);
   return {
     type: "keyframes",
     ease: (r) => s.next(i * r).value / t,
     duration: /* @__PURE__ */ B(i)
   };
 }
-const $i = 5;
-function _n(e, t, n) {
-  const s = Math.max(t - $i, 0);
-  return wn(n - e(s), t - s);
+const Gi = 5;
+function Hn(e, t, n) {
+  const s = Math.max(t - Gi, 0);
+  return xn(n - e(s), t - s);
 }
 const A = {
   // Default spring physics
@@ -455,24 +458,24 @@ const A = {
   minDamping: 0.05,
   maxDamping: 1
 }, We = 1e-3;
-function Wi({ duration: e = A.duration, bounce: t = A.bounce, velocity: n = A.velocity, mass: s = A.mass }) {
+function zi({ duration: e = A.duration, bounce: t = A.bounce, velocity: n = A.velocity, mass: s = A.mass }) {
   let i, r;
-  pe(e <= /* @__PURE__ */ N(A.maxDuration), "Spring duration must be 10 seconds or less");
+  ge(e <= /* @__PURE__ */ N(A.maxDuration), "Spring duration must be 10 seconds or less", "spring-duration-limit");
   let o = 1 - t;
-  o = H(A.minDamping, A.maxDamping, o), e = H(A.minDuration, A.maxDuration, /* @__PURE__ */ B(e)), o < 1 ? (i = (l) => {
-    const u = l * o, d = u * e, f = u - n, h = Ye(l, o), y = Math.exp(-d);
-    return We - f / h * y;
+  o = Y(A.minDamping, A.maxDamping, o), e = Y(A.minDuration, A.maxDuration, /* @__PURE__ */ B(e)), o < 1 ? (i = (l) => {
+    const u = l * o, f = u * e, d = u - n, h = Xe(l, o), y = Math.exp(-f);
+    return We - d / h * y;
   }, r = (l) => {
-    const d = l * o * e, f = d * n + n, h = Math.pow(o, 2) * Math.pow(l, 2) * e, y = Math.exp(-d), b = Ye(Math.pow(l, 2), o);
-    return (-i(l) + We > 0 ? -1 : 1) * ((f - h) * y) / b;
+    const f = l * o * e, d = f * n + n, h = Math.pow(o, 2) * Math.pow(l, 2) * e, y = Math.exp(-f), b = Xe(Math.pow(l, 2), o);
+    return (-i(l) + We > 0 ? -1 : 1) * ((d - h) * y) / b;
   }) : (i = (l) => {
-    const u = Math.exp(-l * e), d = (l - n) * e + 1;
-    return -We + u * d;
+    const u = Math.exp(-l * e), f = (l - n) * e + 1;
+    return -We + u * f;
   }, r = (l) => {
-    const u = Math.exp(-l * e), d = (n - l) * (e * e);
-    return u * d;
+    const u = Math.exp(-l * e), f = (n - l) * (e * e);
+    return u * f;
   });
-  const a = 5 / e, c = _i(i, r, a);
+  const a = 5 / e, c = Ui(i, r, a);
   if (e = /* @__PURE__ */ N(e), isNaN(c))
     return {
       stiffness: A.stiffness,
@@ -488,21 +491,21 @@ function Wi({ duration: e = A.duration, bounce: t = A.bounce, velocity: n = A.ve
     };
   }
 }
-const ji = 12;
-function _i(e, t, n) {
+const Hi = 12;
+function Ui(e, t, n) {
   let s = n;
-  for (let i = 1; i < ji; i++)
+  for (let i = 1; i < Hi; i++)
     s = s - e(s) / t(s);
   return s;
 }
-function Ye(e, t) {
+function Xe(e, t) {
   return e * Math.sqrt(1 - t * t);
 }
-const Gi = ["duration", "bounce"], zi = ["stiffness", "damping", "mass"];
-function jt(e, t) {
+const Yi = ["duration", "bounce"], Xi = ["stiffness", "damping", "mass"];
+function zt(e, t) {
   return t.some((n) => e[n] !== void 0);
 }
-function Ui(e) {
+function qi(e) {
   let t = {
     velocity: A.velocity,
     stiffness: A.stiffness,
@@ -511,9 +514,9 @@ function Ui(e) {
     isResolvedFromDuration: !1,
     ...e
   };
-  if (!jt(e, zi) && jt(e, Gi))
+  if (!zt(e, Xi) && zt(e, Yi))
     if (e.visualDuration) {
-      const n = e.visualDuration, s = 2 * Math.PI / (n * 1.2), i = s * s, r = 2 * H(0.05, 1, 1 - (e.bounce || 0)) * Math.sqrt(i);
+      const n = e.visualDuration, s = 2 * Math.PI / (n * 1.2), i = s * s, r = 2 * Y(0.05, 1, 1 - (e.bounce || 0)) * Math.sqrt(i);
       t = {
         ...t,
         mass: A.mass,
@@ -521,7 +524,7 @@ function Ui(e) {
         damping: r
       };
     } else {
-      const n = Wi(e);
+      const n = zi(e);
       t = {
         ...t,
         ...n,
@@ -530,78 +533,78 @@ function Ui(e) {
     }
   return t;
 }
-function Ce(e = A.visualDuration, t = A.bounce) {
+function Fe(e = A.visualDuration, t = A.bounce) {
   const n = typeof e != "object" ? {
     visualDuration: e,
     keyframes: [0, 1],
     bounce: t
   } : e;
   let { restSpeed: s, restDelta: i } = n;
-  const r = n.keyframes[0], o = n.keyframes[n.keyframes.length - 1], a = { done: !1, value: r }, { stiffness: c, damping: l, mass: u, duration: d, velocity: f, isResolvedFromDuration: h } = Ui({
+  const r = n.keyframes[0], o = n.keyframes[n.keyframes.length - 1], a = { done: !1, value: r }, { stiffness: c, damping: l, mass: u, duration: f, velocity: d, isResolvedFromDuration: h } = qi({
     ...n,
     velocity: -/* @__PURE__ */ B(n.velocity || 0)
-  }), y = f || 0, b = l / (2 * Math.sqrt(c * u)), T = o - r, p = /* @__PURE__ */ B(Math.sqrt(c / u)), V = Math.abs(T) < 5;
+  }), y = d || 0, b = l / (2 * Math.sqrt(c * u)), v = o - r, p = /* @__PURE__ */ B(Math.sqrt(c / u)), V = Math.abs(v) < 5;
   s || (s = V ? A.restSpeed.granular : A.restSpeed.default), i || (i = V ? A.restDelta.granular : A.restDelta.default);
   let g;
   if (b < 1) {
-    const v = Ye(p, b);
+    const T = Xe(p, b);
     g = (S) => {
       const C = Math.exp(-b * p * S);
-      return o - C * ((y + b * p * T) / v * Math.sin(v * S) + T * Math.cos(v * S));
+      return o - C * ((y + b * p * v) / T * Math.sin(T * S) + v * Math.cos(T * S));
     };
   } else if (b === 1)
-    g = (v) => o - Math.exp(-p * v) * (T + (y + p * T) * v);
+    g = (T) => o - Math.exp(-p * T) * (v + (y + p * v) * T);
   else {
-    const v = p * Math.sqrt(b * b - 1);
+    const T = p * Math.sqrt(b * b - 1);
     g = (S) => {
-      const C = Math.exp(-b * p * S), w = Math.min(v * S, 300);
-      return o - C * ((y + b * p * T) * Math.sinh(w) + v * T * Math.cosh(w)) / v;
+      const C = Math.exp(-b * p * S), w = Math.min(T * S, 300);
+      return o - C * ((y + b * p * v) * Math.sinh(w) + T * v * Math.cosh(w)) / T;
     };
   }
   const x = {
-    calculatedDuration: h && d || null,
-    next: (v) => {
-      const S = g(v);
+    calculatedDuration: h && f || null,
+    next: (T) => {
+      const S = g(T);
       if (h)
-        a.done = v >= d;
+        a.done = T >= f;
       else {
-        let C = v === 0 ? y : 0;
-        b < 1 && (C = v === 0 ? /* @__PURE__ */ N(y) : _n(g, v, S));
+        let C = T === 0 ? y : 0;
+        b < 1 && (C = T === 0 ? /* @__PURE__ */ N(y) : Hn(g, T, S));
         const w = Math.abs(C) <= s, R = Math.abs(o - S) <= i;
         a.done = w && R;
       }
       return a.value = a.done ? o : S, a;
     },
     toString: () => {
-      const v = Math.min(bt(x), Me), S = jn((C) => x.next(v * C).value, v, 30);
-      return v + "ms " + S;
+      const T = Math.min(vt(x), Pe), S = zn((C) => x.next(T * C).value, T, 30);
+      return T + "ms " + S;
     },
     toTransition: () => {
     }
   };
   return x;
 }
-Ce.applyToOptions = (e) => {
-  const t = Ki(e, 100, Ce);
+Fe.applyToOptions = (e) => {
+  const t = _i(e, 100, Fe);
   return e.ease = t.ease, e.duration = /* @__PURE__ */ N(t.duration), e.type = "keyframes", e;
 };
-function Xe({ keyframes: e, velocity: t = 0, power: n = 0.8, timeConstant: s = 325, bounceDamping: i = 10, bounceStiffness: r = 500, modifyTarget: o, min: a, max: c, restDelta: l = 0.5, restSpeed: u }) {
-  const d = e[0], f = {
+function qe({ keyframes: e, velocity: t = 0, power: n = 0.8, timeConstant: s = 325, bounceDamping: i = 10, bounceStiffness: r = 500, modifyTarget: o, min: a, max: c, restDelta: l = 0.5, restSpeed: u }) {
+  const f = e[0], d = {
     done: !1,
-    value: d
+    value: f
   }, h = (w) => a !== void 0 && w < a || c !== void 0 && w > c, y = (w) => a === void 0 ? c : c === void 0 || Math.abs(a - w) < Math.abs(c - w) ? a : c;
   let b = n * t;
-  const T = d + b, p = o === void 0 ? T : o(T);
-  p !== T && (b = p - d);
+  const v = f + b, p = o === void 0 ? v : o(v);
+  p !== v && (b = p - f);
   const V = (w) => -b * Math.exp(-w / s), g = (w) => p + V(w), x = (w) => {
     const R = V(w), O = g(w);
-    f.done = Math.abs(R) <= l, f.value = f.done ? p : O;
+    d.done = Math.abs(R) <= l, d.value = d.done ? p : O;
   };
-  let v, S;
+  let T, S;
   const C = (w) => {
-    h(f.value) && (v = w, S = Ce({
-      keyframes: [f.value, y(f.value)],
-      velocity: _n(g, w, f.value),
+    h(d.value) && (T = w, S = Fe({
+      keyframes: [d.value, y(d.value)],
+      velocity: Hn(g, w, d.value),
       // TODO: This should be passing * 1000
       damping: i,
       stiffness: r,
@@ -613,92 +616,92 @@ function Xe({ keyframes: e, velocity: t = 0, power: n = 0.8, timeConstant: s = 3
     calculatedDuration: null,
     next: (w) => {
       let R = !1;
-      return !S && v === void 0 && (R = !0, x(w), C(w)), v !== void 0 && w >= v ? S.next(w - v) : (!R && x(w), f);
+      return !S && T === void 0 && (R = !0, x(w), C(w)), T !== void 0 && w >= T ? S.next(w - T) : (!R && x(w), d);
     }
   };
 }
-function Hi(e, t, n) {
-  const s = [], i = n || K.mix || Wn, r = e.length - 1;
+function Zi(e, t, n) {
+  const s = [], i = n || K.mix || Gn, r = e.length - 1;
   for (let o = 0; o < r; o++) {
     let a = i(e[o], e[o + 1]);
     if (t) {
-      const c = Array.isArray(t) ? t[o] || te : t;
-      a = Re(c, a);
+      const c = Array.isArray(t) ? t[o] || ie : t;
+      a = Ie(c, a);
     }
     s.push(a);
   }
   return s;
 }
-function Yi(e, t, { clamp: n = !0, ease: s, mixer: i } = {}) {
+function Ji(e, t, { clamp: n = !0, ease: s, mixer: i } = {}) {
   const r = e.length;
-  if (Y(r === t.length, "Both input and output ranges must be the same length"), r === 1)
+  if (X(r === t.length, "Both input and output ranges must be the same length", "range-length"), r === 1)
     return () => t[0];
   if (r === 2 && t[0] === t[1])
     return () => t[1];
   const o = e[0] === e[1];
   e[0] > e[r - 1] && (e = [...e].reverse(), t = [...t].reverse());
-  const a = Hi(t, s, i), c = a.length, l = (u) => {
+  const a = Zi(t, s, i), c = a.length, l = (u) => {
     if (o && u < e[0])
       return t[0];
-    let d = 0;
+    let f = 0;
     if (c > 1)
-      for (; d < e.length - 2 && !(u < e[d + 1]); d++)
+      for (; f < e.length - 2 && !(u < e[f + 1]); f++)
         ;
-    const f = /* @__PURE__ */ vn(e[d], e[d + 1], u);
-    return a[d](f);
+    const d = /* @__PURE__ */ Vn(e[f], e[f + 1], u);
+    return a[f](d);
   };
-  return n ? (u) => l(H(e[0], e[r - 1], u)) : l;
+  return n ? (u) => l(Y(e[0], e[r - 1], u)) : l;
 }
-function Xi(e, t) {
+function Qi(e, t) {
   const n = e[e.length - 1];
   for (let s = 1; s <= t; s++) {
-    const i = /* @__PURE__ */ vn(0, t, s);
-    e.push(Oe(n, 1, i));
+    const i = /* @__PURE__ */ Vn(0, t, s);
+    e.push(ke(n, 1, i));
   }
 }
-function qi(e) {
+function er(e) {
   const t = [0];
-  return Xi(t, e.length - 1), t;
+  return Qi(t, e.length - 1), t;
 }
-function Zi(e, t) {
+function tr(e, t) {
   return e.map((n) => n * t);
 }
-function Ji(e, t) {
-  return e.map(() => t || Dn).splice(0, e.length - 1);
+function nr(e, t) {
+  return e.map(() => t || In).splice(0, e.length - 1);
 }
-function Z({ duration: e = 300, keyframes: t, times: n, ease: s = "easeInOut" }) {
-  const i = li(s) ? s.map(Lt) : Lt(s), r = {
+function Q({ duration: e = 300, keyframes: t, times: n, ease: s = "easeInOut" }) {
+  const i = pi(s) ? s.map($t) : $t(s), r = {
     done: !1,
     value: t[0]
-  }, o = Zi(
+  }, 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 === t.length ? n : qi(t),
+    n && n.length === t.length ? n : er(t),
     e
-  ), a = Yi(o, t, {
-    ease: Array.isArray(i) ? i : Ji(t, i)
+  ), a = Ji(o, t, {
+    ease: Array.isArray(i) ? i : nr(t, i)
   });
   return {
     calculatedDuration: e,
     next: (c) => (r.value = a(c), r.done = c >= e, r)
   };
 }
-const Qi = (e) => e !== null;
-function vt(e, { repeat: t, repeatType: n = "loop" }, s, i = 1) {
-  const r = e.filter(Qi), a = i < 0 || t && n !== "loop" && t % 2 === 1 ? 0 : r.length - 1;
+const sr = (e) => e !== null;
+function wt(e, { repeat: t, repeatType: n = "loop" }, s, i = 1) {
+  const r = e.filter(sr), a = i < 0 || t && n !== "loop" && t % 2 === 1 ? 0 : r.length - 1;
   return !a || s === void 0 ? r[a] : s;
 }
-const er = {
-  decay: Xe,
-  inertia: Xe,
-  tween: Z,
-  keyframes: Z,
-  spring: Ce
+const ir = {
+  decay: qe,
+  inertia: qe,
+  tween: Q,
+  keyframes: Q,
+  spring: Fe
 };
-function Gn(e) {
-  typeof e.type == "string" && (e.type = er[e.type]);
+function Un(e) {
+  typeof e.type == "string" && (e.type = ir[e.type]);
 }
-class Tt {
+class Vt {
   constructor() {
     this.updateFinished();
   }
@@ -722,28 +725,28 @@ class Tt {
     return this.finished.then(t, n);
   }
 }
-const tr = (e) => e / 100;
-class wt extends Tt {
+const rr = (e) => e / 100;
+class St extends Vt {
   constructor(t) {
     super(), this.state = "idle", this.startTime = null, this.isStopped = !1, this.currentTime = 0, this.holdTime = null, this.playbackSpeed = 1, this.stop = () => {
       var s, i;
       const { motionValue: n } = this.options;
-      n && n.updatedAt !== I.now() && this.tick(I.now()), this.isStopped = !0, this.state !== "idle" && (this.teardown(), (i = (s = this.options).onStop) == null || i.call(s));
+      n && n.updatedAt !== k.now() && this.tick(k.now()), this.isStopped = !0, this.state !== "idle" && (this.teardown(), (i = (s = this.options).onStop) == null || i.call(s));
     }, this.options = t, this.initAnimation(), this.play(), t.autoplay === !1 && this.pause();
   }
   initAnimation() {
     const { options: t } = this;
-    Gn(t);
-    const { type: n = Z, repeat: s = 0, repeatDelay: i = 0, repeatType: r, velocity: o = 0 } = t;
+    Un(t);
+    const { type: n = Q, repeat: s = 0, repeatDelay: i = 0, repeatType: r, velocity: o = 0 } = t;
     let { keyframes: a } = t;
-    const c = n || Z;
-    process.env.NODE_ENV !== "production" && c !== Z && Y(a.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${a}`), c !== Z && typeof a[0] != "number" && (this.mixKeyframes = Re(tr, Wn(a[0], a[1])), a = [0, 100]);
+    const c = n || Q;
+    process.env.NODE_ENV !== "production" && c !== Q && X(a.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${a}`, "spring-two-frames"), c !== Q && typeof a[0] != "number" && (this.mixKeyframes = Ie(rr, Gn(a[0], a[1])), a = [0, 100]);
     const l = c({ ...t, keyframes: a });
     r === "mirror" && (this.mirroredGenerator = c({
       ...t,
       keyframes: [...a].reverse(),
       velocity: -o
-    })), l.calculatedDuration === null && (l.calculatedDuration = bt(l));
+    })), l.calculatedDuration === null && (l.calculatedDuration = vt(l));
     const { calculatedDuration: u } = l;
     this.calculatedDuration = u, this.resolvedDuration = u + i, this.totalDuration = this.resolvedDuration * (s + 1) - i, this.generator = l;
   }
@@ -755,22 +758,22 @@ class wt extends Tt {
     const { generator: s, totalDuration: i, mixKeyframes: r, mirroredGenerator: o, resolvedDuration: a, calculatedDuration: c } = this;
     if (this.startTime === null)
       return s.next(0);
-    const { delay: l = 0, keyframes: u, repeat: d, repeatType: f, repeatDelay: h, type: y, onUpdate: b, finalKeyframe: T } = this.options;
+    const { delay: l = 0, keyframes: u, repeat: f, repeatType: d, repeatDelay: h, type: y, onUpdate: b, finalKeyframe: v } = this.options;
     this.speed > 0 ? this.startTime = Math.min(this.startTime, t) : this.speed < 0 && (this.startTime = Math.min(t - i / this.speed, this.startTime)), n ? this.currentTime = t : this.updateTime(t);
     const p = this.currentTime - l * (this.playbackSpeed >= 0 ? 1 : -1), V = this.playbackSpeed >= 0 ? p < 0 : p > i;
     this.currentTime = Math.max(p, 0), this.state === "finished" && this.holdTime === null && (this.currentTime = i);
     let g = this.currentTime, x = s;
-    if (d) {
+    if (f) {
       const w = Math.min(this.currentTime, i) / a;
       let R = Math.floor(w), O = w % 1;
-      !O && w >= 1 && (O = 1), O === 1 && R--, R = Math.min(R, d + 1), !!(R % 2) && (f === "reverse" ? (O = 1 - O, h && (O -= h / a)) : f === "mirror" && (x = o)), g = H(0, 1, O) * a;
+      !O && w >= 1 && (O = 1), O === 1 && R--, R = Math.min(R, f + 1), !!(R % 2) && (d === "reverse" ? (O = 1 - O, h && (O -= h / a)) : d === "mirror" && (x = o)), g = Y(0, 1, O) * a;
     }
-    const v = V ? { done: !1, value: u[0] } : x.next(g);
-    r && (v.value = r(v.value));
-    let { done: S } = v;
+    const T = V ? { done: !1, value: u[0] } : x.next(g);
+    r && (T.value = r(T.value));
+    let { done: S } = T;
     !V && c !== null && (S = this.playbackSpeed >= 0 ? this.currentTime >= i : this.currentTime <= 0);
     const C = this.holdTime === null && (this.state === "finished" || this.state === "running" && S);
-    return C && y !== Xe && (v.value = vt(u, this.options, T, this.speed)), b && b(v.value), C && this.finish(), v;
+    return C && y !== qe && (T.value = wt(u, this.options, v, this.speed)), b && b(T.value), C && this.finish(), T;
   }
   /**
    * Allows the returned animation to be awaited or promise-chained. Currently
@@ -794,7 +797,7 @@ class wt extends Tt {
     return this.playbackSpeed;
   }
   set speed(t) {
-    this.updateTime(I.now());
+    this.updateTime(k.now());
     const n = this.playbackSpeed !== t;
     this.playbackSpeed = t, n && (this.time = /* @__PURE__ */ B(this.currentTime));
   }
@@ -802,13 +805,13 @@ class wt extends Tt {
     var i, r;
     if (this.isStopped)
       return;
-    const { driver: t = Bi, startTime: n } = this.options;
+    const { driver: t = ji, startTime: n } = this.options;
     this.driver || (this.driver = t((o) => this.tick(o))), (r = (i = this.options).onPlay) == null || r.call(i);
     const s = this.driver.now();
     this.state === "finished" ? (this.updateFinished(), this.startTime = s) : this.holdTime !== null ? this.startTime = s - this.holdTime : this.startTime || (this.startTime = n ?? s), this.state === "finished" && this.speed < 0 && (this.startTime += this.calculatedDuration), this.holdTime = null, this.state = "running", this.driver.start();
   }
   pause() {
-    this.state = "paused", this.updateTime(I.now()), this.holdTime = this.currentTime;
+    this.state = "paused", this.updateTime(k.now()), this.holdTime = this.currentTime;
   }
   complete() {
     this.state !== "running" && this.play(), this.state = "finished", this.holdTime = null;
@@ -835,14 +838,14 @@ class wt extends Tt {
     return this.options.allowFlatten && (this.options.type = "keyframes", this.options.ease = "linear", this.initAnimation()), (n = this.driver) == null || n.stop(), t.observe(this);
   }
 }
-function nr(e) {
+function or(e) {
   for (let t = 1; t < e.length; t++)
     e[t] ?? (e[t] = e[t - 1]);
 }
-const _ = (e) => e * 180 / Math.PI, qe = (e) => {
-  const t = _(Math.atan2(e[1], e[0]));
-  return Ze(t);
-}, sr = {
+const G = (e) => e * 180 / Math.PI, Ze = (e) => {
+  const t = G(Math.atan2(e[1], e[0]));
+  return Je(t);
+}, ar = {
   x: 4,
   y: 5,
   translateX: 4,
@@ -850,56 +853,56 @@ const _ = (e) => e * 180 / Math.PI, qe = (e) => {
   scaleX: 0,
   scaleY: 3,
   scale: (e) => (Math.abs(e[0]) + Math.abs(e[3])) / 2,
-  rotate: qe,
-  rotateZ: qe,
-  skewX: (e) => _(Math.atan(e[1])),
-  skewY: (e) => _(Math.atan(e[2])),
+  rotate: Ze,
+  rotateZ: Ze,
+  skewX: (e) => G(Math.atan(e[1])),
+  skewY: (e) => G(Math.atan(e[2])),
   skew: (e) => (Math.abs(e[1]) + Math.abs(e[2])) / 2
-}, Ze = (e) => (e = e % 360, e < 0 && (e += 360), e), _t = qe, Gt = (e) => Math.sqrt(e[0] * e[0] + e[1] * e[1]), zt = (e) => Math.sqrt(e[4] * e[4] + e[5] * e[5]), ir = {
+}, Je = (e) => (e = e % 360, e < 0 && (e += 360), e), Ht = Ze, Ut = (e) => Math.sqrt(e[0] * e[0] + e[1] * e[1]), Yt = (e) => Math.sqrt(e[4] * e[4] + e[5] * e[5]), ur = {
   x: 12,
   y: 13,
   z: 14,
   translateX: 12,
   translateY: 13,
   translateZ: 14,
-  scaleX: Gt,
-  scaleY: zt,
-  scale: (e) => (Gt(e) + zt(e)) / 2,
-  rotateX: (e) => Ze(_(Math.atan2(e[6], e[5]))),
-  rotateY: (e) => Ze(_(Math.atan2(-e[2], e[0]))),
-  rotateZ: _t,
-  rotate: _t,
-  skewX: (e) => _(Math.atan(e[4])),
-  skewY: (e) => _(Math.atan(e[1])),
+  scaleX: Ut,
+  scaleY: Yt,
+  scale: (e) => (Ut(e) + Yt(e)) / 2,
+  rotateX: (e) => Je(G(Math.atan2(e[6], e[5]))),
+  rotateY: (e) => Je(G(Math.atan2(-e[2], e[0]))),
+  rotateZ: Ht,
+  rotate: Ht,
+  skewX: (e) => G(Math.atan(e[4])),
+  skewY: (e) => G(Math.atan(e[1])),
   skew: (e) => (Math.abs(e[1]) + Math.abs(e[4])) / 2
 };
-function Je(e) {
+function Qe(e) {
   return e.includes("scale") ? 1 : 0;
 }
-function Qe(e, t) {
+function et(e, t) {
   if (!e || e === "none")
-    return Je(t);
+    return Qe(t);
   const n = e.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
   let s, i;
   if (n)
-    s = ir, i = n;
+    s = ur, i = n;
   else {
     const a = e.match(/^matrix\(([-\d.e\s,]+)\)$/u);
-    s = sr, i = a;
+    s = ar, i = a;
   }
   if (!i)
-    return Je(t);
-  const r = s[t], o = i[1].split(",").map(or);
+    return Qe(t);
+  const r = s[t], o = i[1].split(",").map(lr);
   return typeof r == "function" ? r(o) : o[r];
 }
-const rr = (e, t) => {
+const cr = (e, t) => {
   const { transform: n = "none" } = getComputedStyle(e);
-  return Qe(n, t);
+  return et(n, t);
 };
-function or(e) {
+function lr(e) {
   return parseFloat(e.trim());
 }
-const ie = [
+const ae = [
   "transformPerspective",
   "x",
   "y",
@@ -917,15 +920,15 @@ const ie = [
   "skew",
   "skewX",
   "skewY"
-], re = new Set(ie), Ut = (e) => e === ne || e === m, ar = /* @__PURE__ */ new Set(["x", "y", "z"]), ur = ie.filter((e) => !ar.has(e));
-function cr(e) {
+], ue = new Set(ae), Xt = (e) => e === re || e === m, fr = /* @__PURE__ */ new Set(["x", "y", "z"]), dr = ae.filter((e) => !fr.has(e));
+function hr(e) {
   const t = [];
-  return ur.forEach((n) => {
+  return dr.forEach((n) => {
     const s = e.getValue(n);
     s !== void 0 && (t.push([n, s.get()]), s.set(n.startsWith("scale") ? 1 : 0));
   }), t;
 }
-const z = {
+const H = {
   // Dimensions
   width: ({ x: e }, { paddingLeft: t = "0", paddingRight: n = "0" }) => e.max - e.min - parseFloat(t) - parseFloat(n),
   height: ({ y: e }, { paddingTop: t = "0", paddingBottom: n = "0" }) => e.max - e.min - parseFloat(t) - parseFloat(n),
@@ -934,18 +937,18 @@ const z = {
   bottom: ({ y: e }, { top: t }) => parseFloat(t) + (e.max - e.min),
   right: ({ x: e }, { left: t }) => parseFloat(t) + (e.max - e.min),
   // Transform
-  x: (e, { transform: t }) => Qe(t, "x"),
-  y: (e, { transform: t }) => Qe(t, "y")
+  x: (e, { transform: t }) => et(t, "x"),
+  y: (e, { transform: t }) => et(t, "y")
 };
-z.translateX = z.x;
-z.translateY = z.y;
+H.translateX = H.x;
+H.translateY = H.y;
 const U = /* @__PURE__ */ new Set();
-let et = !1, tt = !1, nt = !1;
-function zn() {
-  if (tt) {
+let tt = !1, nt = !1, st = !1;
+function Yn() {
+  if (nt) {
     const e = Array.from(U).filter((s) => s.needsMeasurement), t = new Set(e.map((s) => s.element)), n = /* @__PURE__ */ new Map();
     t.forEach((s) => {
-      const i = cr(s);
+      const i = hr(s);
       i.length && (n.set(s, i), s.render());
     }), e.forEach((s) => s.measureInitialState()), t.forEach((s) => {
       s.render();
@@ -958,22 +961,22 @@ function zn() {
       s.suspendedScrollY !== void 0 && window.scrollTo(0, s.suspendedScrollY);
     });
   }
-  tt = !1, et = !1, U.forEach((e) => e.complete(nt)), U.clear();
+  nt = !1, tt = !1, U.forEach((e) => e.complete(st)), U.clear();
 }
-function Un() {
+function Xn() {
   U.forEach((e) => {
-    e.readKeyframes(), e.needsMeasurement && (tt = !0);
+    e.readKeyframes(), e.needsMeasurement && (nt = !0);
   });
 }
-function lr() {
-  nt = !0, Un(), zn(), nt = !1;
+function pr() {
+  st = !0, Xn(), Yn(), st = !1;
 }
-class Vt {
+class xt {
   constructor(t, n, s, i, r, o = !1) {
     this.state = "pending", this.isAsync = !1, this.needsMeasurement = !1, this.unresolvedKeyframes = [...t], this.onComplete = n, this.name = s, this.motionValue = i, this.element = r, this.isAsync = o;
   }
   scheduleResolve() {
-    this.state = "scheduled", this.isAsync ? (U.add(this), et || (et = !0, k.read(Un), k.resolveKeyframes(zn))) : (this.readKeyframes(), this.complete());
+    this.state = "scheduled", this.isAsync ? (U.add(this), tt || (tt = !0, L.read(Xn), L.resolveKeyframes(Yn))) : (this.readKeyframes(), this.complete());
   }
   readKeyframes() {
     const { unresolvedKeyframes: t, name: n, element: s, motionValue: i } = this;
@@ -987,7 +990,7 @@ class Vt {
       }
       t[0] === void 0 && (t[0] = o), i && r === void 0 && i.set(t[0]);
     }
-    nr(t);
+    or(t);
   }
   setFinalKeyframe() {
   }
@@ -1007,71 +1010,71 @@ class Vt {
     this.state === "pending" && this.scheduleResolve();
   }
 }
-const fr = (e) => e.startsWith("--");
-function dr(e, t, n) {
-  fr(t) ? e.style.setProperty(t, n) : e.style[t] = n;
+const mr = (e) => e.startsWith("--");
+function gr(e, t, n) {
+  mr(t) ? e.style.setProperty(t, n) : e.style[t] = n;
 }
-const hr = /* @__PURE__ */ ft(() => window.ScrollTimeline !== void 0), pr = {};
-function mr(e, t) {
-  const n = /* @__PURE__ */ ft(e);
-  return () => pr[t] ?? n();
+const yr = /* @__PURE__ */ ht(() => window.ScrollTimeline !== void 0), br = {};
+function Tr(e, t) {
+  const n = /* @__PURE__ */ ht(e);
+  return () => br[t] ?? n();
 }
-const Hn = /* @__PURE__ */ mr(() => {
+const qn = /* @__PURE__ */ Tr(() => {
   try {
     document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
   } catch {
     return !1;
   }
   return !0;
-}, "linearEasing"), ae = ([e, t, n, s]) => `cubic-bezier(${e}, ${t}, ${n}, ${s})`, Ht = {
+}, "linearEasing"), le = ([e, t, n, s]) => `cubic-bezier(${e}, ${t}, ${n}, ${s})`, qt = {
   linear: "linear",
   ease: "ease",
   easeIn: "ease-in",
   easeOut: "ease-out",
   easeInOut: "ease-in-out",
-  circIn: /* @__PURE__ */ ae([0, 0.65, 0.55, 1]),
-  circOut: /* @__PURE__ */ ae([0.55, 0, 1, 0.45]),
-  backIn: /* @__PURE__ */ ae([0.31, 0.01, 0.66, -0.59]),
-  backOut: /* @__PURE__ */ ae([0.33, 1.53, 0.69, 0.99])
+  circIn: /* @__PURE__ */ le([0, 0.65, 0.55, 1]),
+  circOut: /* @__PURE__ */ le([0.55, 0, 1, 0.45]),
+  backIn: /* @__PURE__ */ le([0.31, 0.01, 0.66, -0.59]),
+  backOut: /* @__PURE__ */ le([0.33, 1.53, 0.69, 0.99])
 };
-function Yn(e, t) {
+function Zn(e, t) {
   if (e)
-    return typeof e == "function" ? Hn() ? jn(e, t) : "ease-out" : Rn(e) ? ae(e) : Array.isArray(e) ? e.map((n) => Yn(n, t) || Ht.easeOut) : Ht[e];
+    return typeof e == "function" ? qn() ? zn(e, t) : "ease-out" : kn(e) ? le(e) : Array.isArray(e) ? e.map((n) => Zn(n, t) || qt.easeOut) : qt[e];
 }
-function gr(e, t, n, { delay: s = 0, duration: i = 300, repeat: r = 0, repeatType: o = "loop", ease: a = "easeOut", times: c } = {}, l = void 0) {
+function vr(e, t, n, { delay: s = 0, duration: i = 300, repeat: r = 0, repeatType: o = "loop", ease: a = "easeOut", times: c } = {}, l = void 0) {
   const u = {
     [t]: n
   };
   c && (u.offset = c);
-  const d = Yn(a, i);
-  Array.isArray(d) && (u.easing = d);
-  const f = {
+  const f = Zn(a, i);
+  Array.isArray(f) && (u.easing = f);
+  const d = {
     delay: s,
     duration: i,
-    easing: Array.isArray(d) ? "linear" : d,
+    easing: Array.isArray(f) ? "linear" : f,
     fill: "both",
     iterations: r + 1,
     direction: o === "reverse" ? "alternate" : "normal"
   };
-  return l && (f.pseudoElement = l), e.animate(u, f);
+  return l && (d.pseudoElement = l), e.animate(u, d);
 }
-function Xn(e) {
+function Jn(e) {
   return typeof e == "function" && "applyToOptions" in e;
 }
-function yr({ type: e, ...t }) {
-  return Xn(e) && Hn() ? e.applyToOptions(t) : (t.duration ?? (t.duration = 300), t.ease ?? (t.ease = "easeOut"), t);
+function wr({ type: e, ...t }) {
+  return Jn(e) && qn() ? e.applyToOptions(t) : (t.duration ?? (t.duration = 300), t.ease ?? (t.ease = "easeOut"), t);
 }
-class br extends Tt {
+class Vr extends Vt {
   constructor(t) {
     if (super(), this.finishedTime = null, this.isStopped = !1, !t)
       return;
     const { element: n, name: s, keyframes: i, pseudoElement: r, allowFlatten: o = !1, finalKeyframe: a, onComplete: c } = t;
-    this.isPseudoElement = !!r, this.allowFlatten = o, this.options = t, Y(typeof t.type != "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
-    const l = yr(t);
-    this.animation = gr(n, s, i, l, r), l.autoplay === !1 && this.animation.pause(), this.animation.onfinish = () => {
+    this.isPseudoElement = !!r, this.allowFlatten = o, this.options = t, X(typeof t.type != "string", `Mini animate() doesn't support "type" as a string.`, "mini-spring");
+    const l = wr(t);
+    this.animation = vr(n, s, i, l, r), l.autoplay === !1 && this.animation.pause(), this.animation.onfinish = () => {
       if (this.finishedTime = this.time, !r) {
-        const u = vt(i, this.options, a, this.speed);
-        this.updateMotionValue ? this.updateMotionValue(u) : dr(n, s, u), this.animation.cancel();
+        const u = wt(i, this.options, a, this.speed);
+        this.updateMotionValue ? this.updateMotionValue(u) : gr(n, s, u), this.animation.cancel();
       }
       c == null || c(), this.notifyFinished();
     };
@@ -1150,24 +1153,24 @@ class br extends Tt {
    */
   attachTimeline({ timeline: t, observe: n }) {
     var s;
-    return this.allowFlatten && ((s = this.animation.effect) == null || s.updateTiming({ easing: "linear" })), this.animation.onfinish = null, t && hr() ? (this.animation.timeline = t, te) : n(this);
+    return this.allowFlatten && ((s = this.animation.effect) == null || s.updateTiming({ easing: "linear" })), this.animation.onfinish = null, t && yr() ? (this.animation.timeline = t, ie) : n(this);
   }
 }
-const qn = {
-  anticipate: Pn,
-  backInOut: Cn,
-  circInOut: Fn
+const Qn = {
+  anticipate: Rn,
+  backInOut: Dn,
+  circInOut: On
 };
-function vr(e) {
-  return e in qn;
+function Sr(e) {
+  return e in Qn;
 }
-function Tr(e) {
-  typeof e.ease == "string" && vr(e.ease) && (e.ease = qn[e.ease]);
+function xr(e) {
+  typeof e.ease == "string" && Sr(e.ease) && (e.ease = Qn[e.ease]);
 }
-const Yt = 10;
-class wr extends br {
+const Zt = 10;
+class Ar extends Vr {
   constructor(t) {
-    Tr(t), Gn(t), super(t), t.startTime && (this.startTime = t.startTime), this.options = t;
+    xr(t), Un(t), super(t), t.startTime && (this.startTime = t.startTime), this.options = t;
   }
   /**
    * WAAPI doesn't natively have any interruption capabilities.
@@ -1185,17 +1188,17 @@ class wr extends br {
       n.set(t);
       return;
     }
-    const a = new wt({
+    const a = new St({
       ...o,
       autoplay: !1
     }), c = /* @__PURE__ */ N(this.finishedTime ?? this.time);
-    n.setWithVelocity(a.sample(c - Yt).value, a.sample(c).value, Yt), a.stop();
+    n.setWithVelocity(a.sample(c - Zt).value, a.sample(c).value, Zt), a.stop();
   }
 }
-const Xt = (e, t) => t === "zIndex" ? !1 : !!(typeof e == "number" || Array.isArray(e) || typeof e == "string" && // It's animatable if we have a string
-(se.test(e) || e === "0") && // And it contains numbers and/or colors
+const Jt = (e, t) => t === "zIndex" ? !1 : !!(typeof e == "number" || Array.isArray(e) || typeof e == "string" && // It's animatable if we have a string
+(oe.test(e) || e === "0") && // And it contains numbers and/or colors
 !e.startsWith("url("));
-function Vr(e) {
+function Mr(e) {
   const t = e[0];
   if (e.length === 1)
     return !0;
@@ -1203,47 +1206,47 @@ function Vr(e) {
     if (e[n] !== t)
       return !0;
 }
-function Sr(e, t, n, s) {
+function Cr(e, t, n, s) {
   const i = e[0];
   if (i === null)
     return !1;
   if (t === "display" || t === "visibility")
     return !0;
-  const r = e[e.length - 1], o = Xt(i, t), a = Xt(r, t);
-  return pe(o === a, `You are trying to animate ${t} 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 : Vr(e) || (n === "spring" || Xn(n)) && s;
+  const r = e[e.length - 1], o = Jt(i, t), a = Jt(r, t);
+  return ge(o === a, `You are trying to animate ${t} from "${i}" to "${r}". "${o ? r : i}" is not an animatable value.`, "value-not-animatable"), !o || !a ? !1 : Mr(e) || (n === "spring" || Jn(n)) && s;
 }
-function Zn(e) {
-  return ni(e) && "offsetHeight" in e;
+function it(e) {
+  e.duration = 0, e.type;
 }
-const xr = /* @__PURE__ */ new Set([
+const Pr = /* @__PURE__ */ new Set([
   "opacity",
   "clipPath",
   "filter",
   "transform"
   // TODO: Could be re-enabled now we have support for linear() easing
   // "background-color"
-]), Ar = /* @__PURE__ */ ft(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
-function Mr(e) {
-  var l;
+]), Fr = /* @__PURE__ */ ht(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+function Dr(e) {
+  var u;
   const { motionValue: t, name: n, repeatDelay: s, repeatType: i, damping: r, type: o } = e;
-  if (!Zn((l = t == null ? void 0 : t.owner) == null ? void 0 : l.current))
+  if (!(((u = t == null ? void 0 : t.owner) == null ? void 0 : u.current) instanceof HTMLElement))
     return !1;
-  const { onUpdate: a, transformTemplate: c } = t.owner.getProps();
-  return Ar() && n && xr.has(n) && (n !== "transform" || !c) && /**
+  const { onUpdate: c, transformTemplate: l } = t.owner.getProps();
+  return Fr() && n && Pr.has(n) && (n !== "transform" || !l) && /**
    * 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.
    */
-  !a && !s && i !== "mirror" && r !== 0 && o !== "inertia";
+  !c && !s && i !== "mirror" && r !== 0 && o !== "inertia";
 }
-const Cr = 40;
-class Pr extends Tt {
-  constructor({ autoplay: t = !0, delay: n = 0, type: s = "keyframes", repeat: i = 0, repeatDelay: r = 0, repeatType: o = "loop", keyframes: a, name: c, motionValue: l, element: u, ...d }) {
+const Rr = 40;
+class Or extends Vt {
+  constructor({ autoplay: t = !0, delay: n = 0, type: s = "keyframes", repeat: i = 0, repeatDelay: r = 0, repeatType: o = "loop", keyframes: a, name: c, motionValue: l, element: u, ...f }) {
     var y;
     super(), this.stop = () => {
-      var b, T;
-      this._animation && (this._animation.stop(), (b = this.stopTimeline) == null || b.call(this)), (T = this.keyframeResolver) == null || T.cancel();
-    }, this.createdAt = I.now();
-    const f = {
+      var b, v;
+      this._animation && (this._animation.stop(), (b = this.stopTimeline) == null || b.call(this)), (v = this.keyframeResolver) == null || v.cancel();
+    }, this.createdAt = k.now();
+    const d = {
       autoplay: t,
       delay: n,
       type: s,
@@ -1253,24 +1256,24 @@ class Pr extends Tt {
       name: c,
       motionValue: l,
       element: u,
-      ...d
-    }, h = (u == null ? void 0 : u.KeyframeResolver) || Vt;
-    this.keyframeResolver = new h(a, (b, T, p) => this.onKeyframesResolved(b, T, f, !p), c, l, u), (y = this.keyframeResolver) == null || y.scheduleResolve();
+      ...f
+    }, h = (u == null ? void 0 : u.KeyframeResolver) || xt;
+    this.keyframeResolver = new h(a, (b, v, p) => this.onKeyframesResolved(b, v, d, !p), c, l, u), (y = this.keyframeResolver) == null || y.scheduleResolve();
   }
   onKeyframesResolved(t, n, s, i) {
     this.keyframeResolver = void 0;
     const { name: r, type: o, velocity: a, delay: c, isHandoff: l, onUpdate: u } = s;
-    this.resolvedAt = I.now(), Sr(t, r, o, a) || ((K.instantAnimations || !c) && (u == null || u(vt(t, s, n))), t[0] = t[t.length - 1], s.duration = 0, s.repeat = 0);
-    const f = {
-      startTime: i ? this.resolvedAt ? this.resolvedAt - this.createdAt > Cr ? this.resolvedAt : this.createdAt : this.createdAt : void 0,
+    this.resolvedAt = k.now(), Cr(t, r, o, a) || ((K.instantAnimations || !c) && (u == null || u(wt(t, s, n))), t[0] = t[t.length - 1], it(s), s.repeat = 0);
+    const d = {
+      startTime: i ? this.resolvedAt ? this.resolvedAt - this.createdAt > Rr ? this.resolvedAt : this.createdAt : this.createdAt : void 0,
       finalKeyframe: n,
       ...s,
       keyframes: t
-    }, h = !l && Mr(f) ? new wr({
-      ...f,
-      element: f.motionValue.owner.current
-    }) : new wt(f);
-    h.finished.then(() => this.notifyFinished()).catch(te), this.pendingTimeline && (this.stopTimeline = h.attachTimeline(this.pendingTimeline), this.pendingTimeline = void 0), this._animation = h;
+    }, h = !l && Dr(d) ? new Ar({
+      ...d,
+      element: d.motionValue.owner.current
+    }) : new St(d);
+    h.finished.then(() => this.notifyFinished()).catch(ie), this.pendingTimeline && (this.stopTimeline = h.attachTimeline(this.pendingTimeline), this.pendingTimeline = void 0), this._animation = h;
   }
   get finished() {
     return this._animation ? this.animation.finished : this._finished;
@@ -1281,7 +1284,7 @@ class Pr extends Tt {
   }
   get animation() {
     var t;
-    return this._animation || ((t = this.keyframeResolver) == null || t.resume(), lr()), this._animation;
+    return this._animation || ((t = this.keyframeResolver) == null || t.resume(), pr()), this._animation;
   }
   get duration() {
     return this.animation.duration;
@@ -1321,78 +1324,78 @@ class Pr extends Tt {
     this._animation && this.animation.cancel(), (t = this.keyframeResolver) == null || t.cancel();
   }
 }
-const Fr = (
+const Ir = (
   // 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 Dr(e) {
-  const t = Fr.exec(e);
+function kr(e) {
+  const t = Ir.exec(e);
   if (!t)
     return [,];
   const [, n, s, i] = t;
   return [`--${n ?? s}`, i];
 }
-const Rr = 4;
-function Jn(e, t, n = 1) {
-  Y(n <= Rr, `Max CSS variable fallback depth detected in property "${e}". This may indicate a circular fallback dependency.`);
-  const [s, i] = Dr(e);
+const Er = 4;
+function es(e, t, n = 1) {
+  X(n <= Er, `Max CSS variable fallback depth detected in property "${e}". This may indicate a circular fallback dependency.`, "max-css-var-depth");
+  const [s, i] = kr(e);
   if (!s)
     return;
   const r = window.getComputedStyle(t).getPropertyValue(s);
   if (r) {
     const o = r.trim();
-    return yn(o) ? parseFloat(o) : o;
+    return vn(o) ? parseFloat(o) : o;
   }
-  return pt(i) ? Jn(i, t, n + 1) : i;
+  return gt(i) ? es(i, t, n + 1) : i;
 }
-function Qn(e, t) {
+function ts(e, t) {
   return (e == null ? void 0 : e[t]) ?? (e == null ? void 0 : e.default) ?? e;
 }
-const es = /* @__PURE__ */ new Set([
+const ns = /* @__PURE__ */ new Set([
   "width",
   "height",
   "top",
   "left",
   "right",
   "bottom",
-  ...ie
-]), Or = {
+  ...ae
+]), Lr = {
   test: (e) => e === "auto",
   parse: (e) => e
-}, ts = (e) => (t) => t.test(e), ns = [ne, m, J, $, Vi, wi, Or], qt = (e) => ns.find(ts(e));
-function Ir(e) {
-  return typeof e == "number" ? e === 0 : e !== null ? e === "none" || e === "0" || bn(e) : !0;
+}, ss = (e) => (t) => t.test(e), is = [re, m, ee, $, Mi, Ai, Lr], Qt = (e) => is.find(ss(e));
+function Nr(e) {
+  return typeof e == "number" ? e === 0 : e !== null ? e === "none" || e === "0" || wn(e) : !0;
 }
-const Er = /* @__PURE__ */ new Set(["brightness", "contrast", "saturate", "opacity"]);
-function kr(e) {
+const Br = /* @__PURE__ */ new Set(["brightness", "contrast", "saturate", "opacity"]);
+function Kr(e) {
   const [t, n] = e.slice(0, -1).split("(");
   if (t === "drop-shadow")
     return e;
-  const [s] = n.match(mt) || [];
+  const [s] = n.match(yt) || [];
   if (!s)
     return e;
   const i = n.replace(s, "");
-  let r = Er.has(t) ? 1 : 0;
+  let r = Br.has(t) ? 1 : 0;
   return s !== n && (r *= 100), t + "(" + r + i + ")";
 }
-const Nr = /\b([a-z-]*)\(.*?\)/gu, st = {
-  ...se,
+const $r = /\b([a-z-]*)\(.*?\)/gu, rt = {
+  ...oe,
   getAnimatableNone: (e) => {
-    const t = e.match(Nr);
-    return t ? t.map(kr).join(" ") : e;
+    const t = e.match($r);
+    return t ? t.map(Kr).join(" ") : e;
   }
-}, Zt = {
-  ...ne,
+}, en = {
+  ...re,
   transform: Math.round
-}, Lr = {
+}, Wr = {
   rotate: $,
   rotateX: $,
   rotateY: $,
   rotateZ: $,
-  scale: Te,
-  scaleX: Te,
-  scaleY: Te,
-  scaleZ: Te,
+  scale: Ve,
+  scaleX: Ve,
+  scaleY: Ve,
+  scaleZ: Ve,
   skew: $,
   skewX: $,
   skewY: $,
@@ -1405,11 +1408,11 @@ const Nr = /\b([a-z-]*)\(.*?\)/gu, st = {
   z: m,
   perspective: m,
   transformPerspective: m,
-  opacity: le,
-  originX: Bt,
-  originY: Bt,
+  opacity: he,
+  originX: Wt,
+  originY: Wt,
   originZ: m
-}, St = {
+}, At = {
   // Border props
   borderWidth: m,
   borderTopWidth: m,
@@ -1445,14 +1448,14 @@ const Nr = /\b([a-z-]*)\(.*?\)/gu, st = {
   // Misc
   backgroundPositionX: m,
   backgroundPositionY: m,
-  ...Lr,
-  zIndex: Zt,
+  ...Wr,
+  zIndex: en,
   // SVG
-  fillOpacity: le,
-  strokeOpacity: le,
-  numOctaves: Zt
-}, Br = {
-  ...St,
+  fillOpacity: he,
+  strokeOpacity: he,
+  numOctaves: en
+}, jr = {
+  ...At,
   // Color props
   color: M,
   backgroundColor: M,
@@ -1465,25 +1468,25 @@ const Nr = /\b([a-z-]*)\(.*?\)/gu, st = {
   borderRightColor: M,
   borderBottomColor: M,
   borderLeftColor: M,
-  filter: st,
-  WebkitFilter: st
-}, ss = (e) => Br[e];
-function is(e, t) {
-  let n = ss(e);
-  return n !== st && (n = se), n.getAnimatableNone ? n.getAnimatableNone(t) : void 0;
-}
-const Kr = /* @__PURE__ */ new Set(["auto", "none", "0"]);
-function $r(e, t, n) {
+  filter: rt,
+  WebkitFilter: rt
+}, rs = (e) => jr[e];
+function os(e, t) {
+  let n = rs(e);
+  return n !== rt && (n = oe), n.getAnimatableNone ? n.getAnimatableNone(t) : void 0;
+}
+const _r = /* @__PURE__ */ new Set(["auto", "none", "0"]);
+function Gr(e, t, n) {
   let s = 0, i;
   for (; s < e.length && !i; ) {
     const r = e[s];
-    typeof r == "string" && !Kr.has(r) && fe(r).values.length && (i = e[s]), s++;
+    typeof r == "string" && !_r.has(r) && pe(r).values.length && (i = e[s]), s++;
   }
   if (i && n)
     for (const r of t)
-      e[r] = is(n, i);
+      e[r] = os(n, i);
 }
-class Wr extends Vt {
+class zr extends xt {
   constructor(t, n, s, i, r) {
     super(t, n, s, i, r, !0);
   }
@@ -1494,33 +1497,33 @@ class Wr extends Vt {
     super.readKeyframes();
     for (let c = 0; c < t.length; c++) {
       let l = t[c];
-      if (typeof l == "string" && (l = l.trim(), pt(l))) {
-        const u = Jn(l, n.current);
+      if (typeof l == "string" && (l = l.trim(), gt(l))) {
+        const u = es(l, n.current);
         u !== void 0 && (t[c] = u), c === t.length - 1 && (this.finalKeyframe = l);
       }
     }
-    if (this.resolveNoneKeyframes(), !es.has(s) || t.length !== 2)
+    if (this.resolveNoneKeyframes(), !ns.has(s) || t.length !== 2)
       return;
-    const [i, r] = t, o = qt(i), a = qt(r);
+    const [i, r] = t, o = Qt(i), a = Qt(r);
     if (o !== a)
-      if (Ut(o) && Ut(a))
+      if (Xt(o) && Xt(a))
         for (let c = 0; c < t.length; c++) {
           const l = t[c];
           typeof l == "string" && (t[c] = parseFloat(l));
         }
-      else z[s] && (this.needsMeasurement = !0);
+      else H[s] && (this.needsMeasurement = !0);
   }
   resolveNoneKeyframes() {
     const { unresolvedKeyframes: t, name: n } = this, s = [];
     for (let i = 0; i < t.length; i++)
-      (t[i] === null || Ir(t[i])) && s.push(i);
-    s.length && $r(t, s, n);
+      (t[i] === null || Nr(t[i])) && s.push(i);
+    s.length && Gr(t, s, n);
   }
   measureInitialState() {
     const { element: t, unresolvedKeyframes: n, name: s } = this;
     if (!t || !t.current)
       return;
-    s === "height" && (this.suspendedScrollY = window.pageYOffset), this.measuredOrigin = z[s](t.measureViewportBox(), window.getComputedStyle(t.current)), n[0] = this.measuredOrigin;
+    s === "height" && (this.suspendedScrollY = window.pageYOffset), this.measuredOrigin = H[s](t.measureViewportBox(), window.getComputedStyle(t.current)), n[0] = this.measuredOrigin;
     const i = n[n.length - 1];
     i !== void 0 && t.getValue(s, i).jump(i, !1);
   }
@@ -1532,12 +1535,12 @@ class Wr extends Vt {
     const i = t.getValue(n);
     i && i.jump(this.measuredOrigin, !1);
     const r = s.length - 1, o = s[r];
-    s[r] = z[n](t.measureViewportBox(), window.getComputedStyle(t.current)), o !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = o), (a = this.removedTransforms) != null && a.length && this.removedTransforms.forEach(([c, l]) => {
+    s[r] = H[n](t.measureViewportBox(), window.getComputedStyle(t.current)), o !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = o), (a = this.removedTransforms) != null && a.length && this.removedTransforms.forEach(([c, l]) => {
       t.getValue(c).set(l);
     }), this.resolveNoneKeyframes();
   }
 }
-function jr(e, t, n) {
+function Hr(e, t, n) {
   if (e instanceof EventTarget)
     return [e];
   if (typeof e == "string") {
@@ -1547,8 +1550,12 @@ function jr(e, t, n) {
   }
   return Array.from(e);
 }
-const rs = (e, t) => t && typeof e == "number" ? t.transform(e) : e, Jt = 30, _r = (e) => !isNaN(parseFloat(e));
-class Gr {
+const as = (e, t) => t && typeof e == "number" ? t.transform(e) : e;
+function Ur(e) {
+  return oi(e) && "offsetHeight" in e;
+}
+const tn = 30, Yr = (e) => !isNaN(parseFloat(e));
+class Xr {
   /**
    * @param init - The initiating value
    * @param config - Optional configuration options
@@ -1556,17 +1563,16 @@ class Gr {
    * -  `transformer`: A function to transform incoming values with.
    */
   constructor(t, n = {}) {
-    this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (s, i = !0) => {
-      var o, a;
-      const r = I.now();
-      if (this.updatedAt !== r && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(s), this.current !== this.prev && ((o = this.events.change) == null || o.notify(this.current), this.dependents))
-        for (const c of this.dependents)
-          c.dirty();
-      i && ((a = this.events.renderRequest) == null || a.notify(this.current));
+    this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (s) => {
+      var r;
+      const i = k.now();
+      if (this.updatedAt !== i && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(s), this.current !== this.prev && ((r = this.events.change) == null || r.notify(this.current), this.dependents))
+        for (const o of this.dependents)
+          o.dirty();
     }, this.hasAnimated = !1, this.setCurrent(t), this.owner = n.owner;
   }
   setCurrent(t) {
-    this.current = t, this.updatedAt = I.now(), this.canTrackVelocity === null && t !== void 0 && (this.canTrackVelocity = _r(this.current));
+    this.current = t, this.updatedAt = k.now(), this.canTrackVelocity === null && t !== void 0 && (this.canTrackVelocity = Yr(this.current));
   }
   setPrevFrameValue(t = this.current) {
     this.prevFrameValue = t, this.prevUpdatedAt = this.updatedAt;
@@ -1612,13 +1618,13 @@ class Gr {
    * @deprecated
    */
   onChange(t) {
-    return process.env.NODE_ENV !== "production" && Vn(!1, 'value.onChange(callback) is deprecated. Switch to value.on("change", callback).'), this.on("change", t);
+    return process.env.NODE_ENV !== "production" && An(!1, 'value.onChange(callback) is deprecated. Switch to value.on("change", callback).'), this.on("change", t);
   }
   on(t, n) {
-    this.events[t] || (this.events[t] = new Tn());
+    this.events[t] || (this.events[t] = new Sn());
     const s = this.events[t].add(n);
     return t === "change" ? () => {
-      s(), k.read(() => {
+      s(), L.read(() => {
         this.events.change.getSize() || this.stop();
       });
     } : s;
@@ -1648,8 +1654,8 @@ class Gr {
    *
    * @public
    */
-  set(t, n = !0) {
-    !n || !this.passiveEffect ? this.updateAndNotify(t, n) : this.passiveEffect(t, this.updateAndNotify);
+  set(t) {
+    this.passiveEffect ? this.passiveEffect(t, this.updateAndNotify) : this.updateAndNotify(t);
   }
   setWithVelocity(t, n, s) {
     this.set(n), this.prev = void 0, this.prevFrameValue = t, this.prevUpdatedAt = this.updatedAt - s;
@@ -1695,11 +1701,11 @@ class Gr {
    * @public
    */
   getVelocity() {
-    const t = I.now();
-    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || t - this.updatedAt > Jt)
+    const t = k.now();
+    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || t - this.updatedAt > tn)
       return 0;
-    const n = Math.min(this.updatedAt - this.prevUpdatedAt, Jt);
-    return wn(parseFloat(this.current) - parseFloat(this.prevFrameValue), n);
+    const n = Math.min(this.updatedAt - this.prevUpdatedAt, tn);
+    return xn(parseFloat(this.current) - parseFloat(this.prevFrameValue), n);
   }
   /**
    * Registers a new animation to control this `MotionValue`. Only one
@@ -1751,35 +1757,35 @@ class Gr {
     (t = this.dependents) == null || t.clear(), (n = this.events.destroy) == null || n.notify(), this.clearListeners(), this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
   }
 }
-function Pe(e, t) {
-  return new Gr(e, t);
+function De(e, t) {
+  return new Xr(e, t);
 }
-const { schedule: zr } = /* @__PURE__ */ On(queueMicrotask, !1), Ur = {
+const { schedule: qr } = /* @__PURE__ */ En(queueMicrotask, !1), Zr = {
   y: !1
 };
-function Hr() {
-  return Ur.y;
+function Jr() {
+  return Zr.y;
 }
-function os(e, t) {
-  const n = jr(e), s = new AbortController(), i = {
+function us(e, t) {
+  const n = Hr(e), s = new AbortController(), i = {
     passive: !0,
     ...t,
     signal: s.signal
   };
   return [n, i, () => s.abort()];
 }
-function Qt(e) {
-  return !(e.pointerType === "touch" || Hr());
+function nn(e) {
+  return !(e.pointerType === "touch" || Jr());
 }
-function Yr(e, t, n = {}) {
-  const [s, i, r] = os(e, n), o = (a) => {
-    if (!Qt(a))
+function Qr(e, t, n = {}) {
+  const [s, i, r] = us(e, n), o = (a) => {
+    if (!nn(a))
       return;
     const { target: c } = a, l = t(c, a);
     if (typeof l != "function" || !c)
       return;
-    const u = (d) => {
-      Qt(d) && (l(d), c.removeEventListener("pointerleave", u));
+    const u = (f) => {
+      nn(f) && (l(f), c.removeEventListener("pointerleave", u));
     };
     c.addEventListener("pointerleave", u, i);
   };
@@ -1787,18 +1793,18 @@ function Yr(e, t, n = {}) {
     a.addEventListener("pointerenter", o, i);
   }), r;
 }
-const as = (e, t) => t ? e === t ? !0 : as(e, t.parentElement) : !1, Xr = (e) => e.pointerType === "mouse" ? typeof e.button != "number" || e.button <= 0 : e.isPrimary !== !1, qr = /* @__PURE__ */ new Set([
+const cs = (e, t) => t ? e === t ? !0 : cs(e, t.parentElement) : !1, eo = (e) => e.pointerType === "mouse" ? typeof e.button != "number" || e.button <= 0 : e.isPrimary !== !1, to = /* @__PURE__ */ new Set([
   "BUTTON",
   "INPUT",
   "SELECT",
   "TEXTAREA",
   "A"
 ]);
-function Zr(e) {
-  return qr.has(e.tagName) || e.tabIndex !== -1;
+function no(e) {
+  return to.has(e.tagName) || e.tabIndex !== -1;
 }
-const Se = /* @__PURE__ */ new WeakSet();
-function en(e) {
+const Ae = /* @__PURE__ */ new WeakSet();
+function sn(e) {
   return (t) => {
     t.key === "Enter" && e(t);
   };
@@ -1806,48 +1812,48 @@ function en(e) {
 function je(e, t) {
   e.dispatchEvent(new PointerEvent("pointer" + t, { isPrimary: !0, bubbles: !0 }));
 }
-const Jr = (e, t) => {
+const so = (e, t) => {
   const n = e.currentTarget;
   if (!n)
     return;
-  const s = en(() => {
-    if (Se.has(n))
+  const s = sn(() => {
+    if (Ae.has(n))
       return;
     je(n, "down");
-    const i = en(() => {
+    const i = sn(() => {
       je(n, "up");
     }), r = () => je(n, "cancel");
     n.addEventListener("keyup", i, t), n.addEventListener("blur", r, t);
   });
   n.addEventListener("keydown", s, t), n.addEventListener("blur", () => n.removeEventListener("keydown", s), t);
 };
-function tn(e) {
-  return Xr(e) && !0;
+function rn(e) {
+  return eo(e) && !0;
 }
-function Qr(e, t, n = {}) {
-  const [s, i, r] = os(e, n), o = (a) => {
+function io(e, t, n = {}) {
+  const [s, i, r] = us(e, n), o = (a) => {
     const c = a.currentTarget;
-    if (!tn(a))
+    if (!rn(a))
       return;
-    Se.add(c);
+    Ae.add(c);
     const l = t(c, a), u = (h, y) => {
-      window.removeEventListener("pointerup", d), window.removeEventListener("pointercancel", f), Se.has(c) && Se.delete(c), tn(h) && typeof l == "function" && l(h, { success: y });
-    }, d = (h) => {
-      u(h, c === window || c === document || n.useGlobalTarget || as(c, h.target));
+      window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", d), Ae.has(c) && Ae.delete(c), rn(h) && typeof l == "function" && l(h, { success: y });
     }, f = (h) => {
+      u(h, c === window || c === document || n.useGlobalTarget || cs(c, h.target));
+    }, d = (h) => {
       u(h, !1);
     };
-    window.addEventListener("pointerup", d, i), window.addEventListener("pointercancel", f, i);
+    window.addEventListener("pointerup", f, i), window.addEventListener("pointercancel", d, i);
   };
   return s.forEach((a) => {
-    (n.useGlobalTarget ? window : a).addEventListener("pointerdown", o, i), Zn(a) && (a.addEventListener("focus", (l) => Jr(l, i)), !Zr(a) && !a.hasAttribute("tabindex") && (a.tabIndex = 0));
+    (n.useGlobalTarget ? window : a).addEventListener("pointerdown", o, i), Ur(a) && (a.addEventListener("focus", (l) => so(l, i)), !no(a) && !a.hasAttribute("tabindex") && (a.tabIndex = 0));
   }), r;
 }
-const D = (e) => !!(e && e.getVelocity), eo = [...ns, M, se], to = (e) => eo.find(ts(e)), us = ee({
+const D = (e) => !!(e && e.getVelocity), ro = [...is, M, oe], oo = (e) => ro.find(ss(e)), ls = se({
   transformPagePoint: (e) => e,
   isStatic: !1,
   reducedMotion: "never"
-}), xt = ee({ strict: !1 }), nn = {
+}), Mt = se({ strict: !1 }), on = {
   animation: [
     "animate",
     "variants",
@@ -1866,34 +1872,34 @@ const D = (e) => !!(e && e.getVelocity), eo = [...ns, M, se], to = (e) => eo.fin
   pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
   inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
   layout: ["layout", "layoutId"]
-}, Q = {};
-for (const e in nn)
-  Q[e] = {
-    isEnabled: (t) => nn[e].some((n) => !!t[n])
+}, ne = {};
+for (const e in on)
+  ne[e] = {
+    isEnabled: (t) => on[e].some((n) => !!t[n])
   };
-function sn(e) {
+function an(e) {
   for (const t in e)
-    Q[t] = {
-      ...Q[t],
+    ne[t] = {
+      ...ne[t],
       ...e[t]
     };
 }
-function no({ children: e, features: t, strict: n = !1 }) {
-  const [, s] = Us(!_e(t)), i = ue(void 0);
+function ao({ children: e, features: t, strict: n = !1 }) {
+  const [, s] = qs(!_e(t)), i = fe(void 0);
   if (!_e(t)) {
     const { renderer: r, ...o } = t;
-    i.current = r, sn(o);
+    i.current = r, an(o);
   }
-  return ct(() => {
+  return ft(() => {
     _e(t) && t().then(({ renderer: r, ...o }) => {
-      sn(o), i.current = r, s(!0);
+      an(o), i.current = r, s(!0);
     });
-  }, []), F(xt.Provider, { value: { renderer: i.current, strict: n }, children: e });
+  }, []), F(Mt.Provider, { value: { renderer: i.current, strict: n }, children: e });
 }
 function _e(e) {
   return typeof e == "function";
 }
-const so = /* @__PURE__ */ new Set([
+const uo = /* @__PURE__ */ new Set([
   "animate",
   "exit",
   "variants",
@@ -1925,32 +1931,32 @@ const so = /* @__PURE__ */ new Set([
   "ignoreStrict",
   "viewport"
 ]);
-function Fe(e) {
-  return e.startsWith("while") || e.startsWith("drag") && e !== "draggable" || e.startsWith("layout") || e.startsWith("onTap") || e.startsWith("onPan") || e.startsWith("onLayout") || so.has(e);
+function Re(e) {
+  return e.startsWith("while") || e.startsWith("drag") && e !== "draggable" || e.startsWith("layout") || e.startsWith("onTap") || e.startsWith("onPan") || e.startsWith("onLayout") || uo.has(e);
 }
-let cs = (e) => !Fe(e);
-function io(e) {
-  typeof e == "function" && (cs = (t) => t.startsWith("on") ? !Fe(t) : e(t));
+let fs = (e) => !Re(e);
+function co(e) {
+  typeof e == "function" && (fs = (t) => t.startsWith("on") ? !Re(t) : e(t));
 }
 try {
-  io(require("@emotion/is-prop-valid").default);
+  co(require("@emotion/is-prop-valid").default);
 } catch {
 }
-function ro(e, t, n) {
+function lo(e, t, n) {
   const s = {};
   for (const i in e)
-    i === "values" && typeof e.values == "object" || (cs(i) || n === !0 && Fe(i) || !t && !Fe(i) || // If trying to use native HTML drag events, forward drag listeners
+    i === "values" && typeof e.values == "object" || (fs(i) || n === !0 && Re(i) || !t && !Re(i) || // If trying to use native HTML drag events, forward drag listeners
     e.draggable && i.startsWith("onDrag")) && (s[i] = e[i]);
   return s;
 }
-const Ie = /* @__PURE__ */ ee({});
-function Ee(e) {
+const Ee = /* @__PURE__ */ se({});
+function Le(e) {
   return e !== null && typeof e == "object" && typeof e.start == "function";
 }
-function de(e) {
+function me(e) {
   return typeof e == "string" || Array.isArray(e);
 }
-const At = [
+const Ct = [
   "animate",
   "whileInView",
   "whileFocus",
@@ -1958,158 +1964,52 @@ const At = [
   "whileTap",
   "whileDrag",
   "exit"
-], Mt = ["initial", ...At];
-function ke(e) {
-  return Ee(e.animate) || Mt.some((t) => de(e[t]));
+], Pt = ["initial", ...Ct];
+function Ne(e) {
+  return Le(e.animate) || Pt.some((t) => me(e[t]));
 }
-function ls(e) {
-  return !!(ke(e) || e.variants);
+function ds(e) {
+  return !!(Ne(e) || e.variants);
 }
-function oo(e, t) {
-  if (ke(e)) {
+function fo(e, t) {
+  if (Ne(e)) {
     const { initial: n, animate: s } = e;
     return {
-      initial: n === !1 || de(n) ? n : void 0,
-      animate: de(s) ? s : void 0
+      initial: n === !1 || me(n) ? n : void 0,
+      animate: me(s) ? s : void 0
     };
   }
   return e.inherit !== !1 ? t : {};
 }
-function ao(e) {
-  const { initial: t, animate: n } = oo(e, E(Ie));
-  return De(() => ({ initial: t, animate: n }), [rn(t), rn(n)]);
+function ho(e) {
+  const { initial: t, animate: n } = fo(e, E(Ee));
+  return Oe(() => ({ initial: t, animate: n }), [un(t), un(n)]);
 }
-function rn(e) {
+function un(e) {
   return Array.isArray(e) ? e.join(" ") : e;
 }
-const uo = Symbol.for("motionComponentSymbol");
-function fs(e) {
-  return e && typeof e == "object" && Object.prototype.hasOwnProperty.call(e, "current");
-}
-function co(e, t, n) {
-  return Hs(
-    (s) => {
-      s && e.onMount && e.onMount(s), t && (s ? t.mount(s) : t.unmount()), n && (typeof n == "function" ? n(s) : fs(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.
-     */
-    [t]
-  );
-}
-const Ct = (e) => e.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), lo = "framerAppearId", ds = "data-" + Ct(lo), fo = ee({});
-function ho(e, t, n, s, i) {
-  var b, T;
-  const { visualElement: r } = E(Ie), o = E(xt), a = E(gn), c = E(us).reducedMotion, l = ue(null);
-  s = s || o.renderer, !l.current && s && (l.current = s(e, {
-    visualState: t,
-    parent: r,
-    props: n,
-    presenceContext: a,
-    blockInitialAnimation: a ? a.initial === !1 : !1,
-    reducedMotionConfig: c
-  }));
-  const u = l.current, d = E(fo);
-  u && !u.projection && i && (u.type === "html" || u.type === "svg") && po(l.current, n, i, d);
-  const f = ue(!1);
-  Ys(() => {
-    u && f.current && u.update(n, a);
-  });
-  const h = n[ds], y = ue(!!h && !((b = window.MotionHandoffIsComplete) != null && b.call(window, h)) && ((T = window.MotionHasOptimisedAnimation) == null ? void 0 : T.call(window, h)));
-  return Qs(() => {
-    u && (f.current = !0, window.MotionIsMounted = !0, u.updateFeatures(), zr.render(u.render), y.current && u.animationState && u.animationState.animateChanges());
-  }), ct(() => {
-    u && (!y.current && u.animationState && u.animationState.animateChanges(), y.current && (queueMicrotask(() => {
-      var p;
-      (p = window.MotionHandoffMarkAsComplete) == null || p.call(window, h);
-    }), y.current = !1));
-  }), u;
-}
-function po(e, t, n, s) {
-  const { layoutId: i, layout: r, drag: o, dragConstraints: a, layoutScroll: c, layoutRoot: l, layoutCrossfade: u } = t;
-  e.projection = new n(e.latestValues, t["data-framer-portal-id"] ? void 0 : hs(e.parent)), e.projection.setOptions({
-    layoutId: i,
-    layout: r,
-    alwaysMeasureLayout: !!o || a && fs(a),
-    visualElement: e,
-    /**
-     * 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,
-    crossfade: u,
-    layoutScroll: c,
-    layoutRoot: l
-  });
-}
-function hs(e) {
-  if (e)
-    return e.options.allowProjection !== !1 ? e.projection : hs(e.parent);
-}
-function mo({ preloadedFeatures: e, createVisualElement: t, useRender: n, useVisualState: s, Component: i }) {
-  function r(a, c) {
-    let l;
-    const u = {
-      ...E(us),
-      ...a,
-      layoutId: go(a)
-    }, { isStatic: d } = u, f = ao(a), h = s(a, d);
-    if (!d && lt) {
-      yo(u, e);
-      const y = bo(u);
-      l = y.MeasureLayout, f.visualElement = ho(i, h, u, t, y.ProjectionNode);
-    }
-    return ut(Ie.Provider, { value: f, children: [l && f.visualElement ? F(l, { visualElement: f.visualElement, ...u }) : null, n(i, a, co(h, f.visualElement, c), h, d, f.visualElement)] });
-  }
-  r.displayName = `motion.${typeof i == "string" ? i : `create(${i.displayName ?? i.name ?? ""})`}`;
-  const o = Xs(r);
-  return o[uo] = i, o;
-}
-function go({ layoutId: e }) {
-  const t = E(Zs).id;
-  return t && e !== void 0 ? t + "-" + e : e;
-}
-function yo(e, t) {
-  E(xt).strict, process.env.NODE_ENV;
-}
-function bo(e) {
-  const { drag: t, layout: n } = Q;
-  if (!t && !n)
-    return {};
-  const s = { ...t, ...n };
-  return {
-    MeasureLayout: t != null && t.isEnabled(e) || n != null && n.isEnabled(e) ? s.MeasureLayout : void 0,
-    ProjectionNode: s.ProjectionNode
-  };
-}
-const vo = {};
-function ps(e, { layout: t, layoutId: n }) {
-  return re.has(e) || e.startsWith("origin") || (t || n !== void 0) && (!!vo[e] || e === "opacity");
+const po = {};
+function hs(e, { layout: t, layoutId: n }) {
+  return ue.has(e) || e.startsWith("origin") || (t || n !== void 0) && (!!po[e] || e === "opacity");
 }
-const To = {
+const mo = {
   x: "translateX",
   y: "translateY",
   z: "translateZ",
   transformPerspective: "perspective"
-}, wo = ie.length;
-function Vo(e, t, n) {
+}, go = ae.length;
+function yo(e, t, n) {
   let s = "", i = !0;
-  for (let r = 0; r < wo; r++) {
-    const o = ie[r], a = e[o];
+  for (let r = 0; r < go; r++) {
+    const o = ae[r], a = e[o];
     if (a === void 0)
       continue;
     let c = !0;
     if (typeof a == "number" ? c = a === (o.startsWith("scale") ? 1 : 0) : c = parseFloat(a) === 0, !c || n) {
-      const l = rs(a, St[o]);
+      const l = as(a, At[o]);
       if (!c) {
         i = !1;
-        const u = To[o] || o;
+        const u = mo[o] || o;
         s += `${u}(${l}) `;
       }
       n && (t[o] = l);
@@ -2117,66 +2017,66 @@ function Vo(e, t, n) {
   }
   return s = s.trim(), n ? s = n(t, i ? "" : s) : i && (s = "none"), s;
 }
-function Pt(e, t, n) {
+function Ft(e, t, n) {
   const { style: s, vars: i, transformOrigin: r } = e;
   let o = !1, a = !1;
   for (const c in t) {
     const l = t[c];
-    if (re.has(c)) {
+    if (ue.has(c)) {
       o = !0;
       continue;
-    } else if (En(c)) {
+    } else if (Nn(c)) {
       i[c] = l;
       continue;
     } else {
-      const u = rs(l, St[c]);
+      const u = as(l, At[c]);
       c.startsWith("origin") ? (a = !0, r[c] = u) : s[c] = u;
     }
   }
-  if (t.transform || (o || n ? s.transform = Vo(t, e.transform, n) : s.transform && (s.transform = "none")), a) {
+  if (t.transform || (o || n ? s.transform = yo(t, e.transform, n) : s.transform && (s.transform = "none")), a) {
     const { originX: c = "50%", originY: l = "50%", originZ: u = 0 } = r;
     s.transformOrigin = `${c} ${l} ${u}`;
   }
 }
-const Ft = () => ({
+const Dt = () => ({
   style: {},
   transform: {},
   transformOrigin: {},
   vars: {}
 });
-function ms(e, t, n) {
+function ps(e, t, n) {
   for (const s in t)
-    !D(t[s]) && !ps(s, n) && (e[s] = t[s]);
+    !D(t[s]) && !hs(s, n) && (e[s] = t[s]);
 }
-function So({ transformTemplate: e }, t) {
-  return De(() => {
-    const n = Ft();
-    return Pt(n, t, e), Object.assign({}, n.vars, n.style);
+function bo({ transformTemplate: e }, t) {
+  return Oe(() => {
+    const n = Dt();
+    return Ft(n, t, e), Object.assign({}, n.vars, n.style);
   }, [t]);
 }
-function xo(e, t) {
+function To(e, t) {
   const n = e.style || {}, s = {};
-  return ms(s, n, e), Object.assign(s, So(e, t)), s;
+  return ps(s, n, e), Object.assign(s, bo(e, t)), s;
 }
-function Ao(e, t) {
-  const n = {}, s = xo(e, t);
+function vo(e, t) {
+  const n = {}, s = To(e, t);
   return e.drag && e.dragListener !== !1 && (n.draggable = !1, s.userSelect = s.WebkitUserSelect = s.WebkitTouchCallout = "none", s.touchAction = e.drag === !0 ? "none" : `pan-${e.drag === "x" ? "y" : "x"}`), e.tabIndex === void 0 && (e.onTap || e.onTapStart || e.whileTap) && (n.tabIndex = 0), n.style = s, n;
 }
-const Mo = {
+const wo = {
   offset: "stroke-dashoffset",
   array: "stroke-dasharray"
-}, Co = {
+}, Vo = {
   offset: "strokeDashoffset",
   array: "strokeDasharray"
 };
-function Po(e, t, n = 1, s = 0, i = !0) {
+function So(e, t, n = 1, s = 0, i = !0) {
   e.pathLength = 1;
-  const r = i ? Mo : Co;
+  const r = i ? wo : Vo;
   e[r.offset] = m.transform(-s);
   const o = m.transform(t), a = m.transform(n);
   e[r.array] = `${o} ${a}`;
 }
-function gs(e, {
+function ms(e, {
   attrX: t,
   attrY: n,
   attrScale: s,
@@ -2186,33 +2086,33 @@ function gs(e, {
   // This is object creation, which we try to avoid per-frame.
   ...a
 }, c, l, u) {
-  if (Pt(e, a, l), c) {
+  if (Ft(e, a, l), c) {
     e.style.viewBox && (e.attrs.viewBox = e.style.viewBox);
     return;
   }
   e.attrs = e.style, e.style = {};
-  const { attrs: d, style: f } = e;
-  d.transform && (f.transform = d.transform, delete d.transform), (f.transform || d.transformOrigin) && (f.transformOrigin = d.transformOrigin ?? "50% 50%", delete d.transformOrigin), f.transform && (f.transformBox = (u == null ? void 0 : u.transformBox) ?? "fill-box", delete d.transformBox), t !== void 0 && (d.x = t), n !== void 0 && (d.y = n), s !== void 0 && (d.scale = s), i !== void 0 && Po(d, i, r, o, !1);
+  const { attrs: f, style: d } = e;
+  f.transform && (d.transform = f.transform, delete f.transform), (d.transform || f.transformOrigin) && (d.transformOrigin = f.transformOrigin ?? "50% 50%", delete f.transformOrigin), d.transform && (d.transformBox = (u == null ? void 0 : u.transformBox) ?? "fill-box", delete f.transformBox), t !== void 0 && (f.x = t), n !== void 0 && (f.y = n), s !== void 0 && (f.scale = s), i !== void 0 && So(f, i, r, o, !1);
 }
-const ys = () => ({
-  ...Ft(),
+const gs = () => ({
+  ...Dt(),
   attrs: {}
-}), bs = (e) => typeof e == "string" && e.toLowerCase() === "svg";
-function Fo(e, t, n, s) {
-  const i = De(() => {
-    const r = ys();
-    return gs(r, t, bs(s), e.transformTemplate, e.style), {
+}), ys = (e) => typeof e == "string" && e.toLowerCase() === "svg";
+function xo(e, t, n, s) {
+  const i = Oe(() => {
+    const r = gs();
+    return ms(r, t, ys(s), e.transformTemplate, e.style), {
       ...r.attrs,
       style: { ...r.style }
     };
   }, [t]);
   if (e.style) {
     const r = {};
-    ms(r, e.style, e), i.style = { ...r, ...i.style };
+    ps(r, e.style, e), i.style = { ...r, ...i.style };
   }
   return i;
 }
-const Do = [
+const Ao = [
   "animate",
   "circle",
   "defs",
@@ -2239,7 +2139,7 @@ const Do = [
   "use",
   "view"
 ];
-function Dt(e) {
+function Rt(e) {
   return (
     /**
      * If it's not a string, it's a custom React component. Currently we only support
@@ -2252,68 +2152,62 @@ function Dt(e) {
       /**
        * If it's in our list of lowercase SVG tags, it's an SVG component
        */
-      !!(Do.indexOf(e) > -1 || /**
+      !!(Ao.indexOf(e) > -1 || /**
        * If it contains a capital letter, it's an SVG component
        */
       /[A-Z]/u.test(e))
     )
   );
 }
-function Ro(e = !1) {
-  return (n, s, i, { latestValues: r }, o) => {
-    const c = (Dt(n) ? Fo : Ao)(s, r, o, n), l = ro(s, typeof n == "string", e), u = n !== mn ? { ...l, ...c, ref: i } : {}, { children: d } = s, f = De(() => D(d) ? d.get() : d, [d]);
-    return qs(n, {
-      ...u,
-      children: f
-    });
-  };
+function Mo(e, t, n, { latestValues: s }, i, r = !1) {
+  const a = (Rt(e) ? xo : vo)(t, s, i, e), c = lo(t, typeof e == "string", r), l = e !== bn ? { ...c, ...a, ref: n } : {}, { children: u } = t, f = Oe(() => D(u) ? u.get() : u, [u]);
+  return Zs(e, {
+    ...l,
+    children: f
+  });
 }
-function on(e) {
+function cn(e) {
   const t = [{}, {}];
   return e == null || e.values.forEach((n, s) => {
     t[0][s] = n.get(), t[1][s] = n.getVelocity();
   }), t;
 }
-function Rt(e, t, n, s) {
+function Ot(e, t, n, s) {
   if (typeof t == "function") {
-    const [i, r] = on(s);
+    const [i, r] = cn(s);
     t = t(n !== void 0 ? n : e.custom, i, r);
   }
   if (typeof t == "string" && (t = e.variants && e.variants[t]), typeof t == "function") {
-    const [i, r] = on(s);
+    const [i, r] = cn(s);
     t = t(n !== void 0 ? n : e.custom, i, r);
   }
   return t;
 }
-function Oo(e) {
+function Co(e) {
   return D(e) ? e.get() : e;
 }
-function Io({ scrapeMotionValuesFromProps: e, createRenderState: t }, n, s, i) {
+function Po({ scrapeMotionValuesFromProps: e, createRenderState: t }, n, s, i) {
   return {
-    latestValues: Eo(n, s, i, e),
+    latestValues: Fo(n, s, i, e),
     renderState: t()
   };
 }
-const vs = (e) => (t, n) => {
-  const s = E(Ie), i = E(gn), r = () => Io(e, t, s, i);
-  return n ? r() : Js(r);
-};
-function Eo(e, t, n, s) {
+function Fo(e, t, n, s) {
   const i = {}, r = s(e, {});
-  for (const f in r)
-    i[f] = Oo(r[f]);
+  for (const d in r)
+    i[d] = Co(r[d]);
   let { initial: o, animate: a } = e;
-  const c = ke(e), l = ls(e);
+  const c = Ne(e), l = ds(e);
   t && l && !c && e.inherit !== !1 && (o === void 0 && (o = t.initial), a === void 0 && (a = t.animate));
   let u = n ? n.initial === !1 : !1;
   u = u || o === !1;
-  const d = u ? a : o;
-  if (d && typeof d != "boolean" && !Ee(d)) {
-    const f = Array.isArray(d) ? d : [d];
-    for (let h = 0; h < f.length; h++) {
-      const y = Rt(e, f[h]);
+  const f = u ? a : o;
+  if (f && typeof f != "boolean" && !Le(f)) {
+    const d = Array.isArray(f) ? f : [f];
+    for (let h = 0; h < d.length; h++) {
+      const y = Ot(e, d[h]);
       if (y) {
-        const { transitionEnd: b, transition: T, ...p } = y;
+        const { transitionEnd: b, transition: v, ...p } = y;
         for (const V in p) {
           let g = p[V];
           if (Array.isArray(g)) {
@@ -2329,941 +2223,1059 @@ function Eo(e, t, n, s) {
   }
   return i;
 }
-function Ot(e, t, n) {
+const bs = (e) => (t, n) => {
+  const s = E(Ee), i = E(Tn), r = () => Po(e, t, s, i);
+  return n ? r() : ni(r);
+};
+function It(e, t, n) {
   var r;
   const { style: s } = e, i = {};
   for (const o in s)
-    (D(s[o]) || t.style && D(t.style[o]) || ps(o, e) || ((r = n == null ? void 0 : n.getValue(o)) == null ? void 0 : r.liveStyle) !== void 0) && (i[o] = s[o]);
+    (D(s[o]) || t.style && D(t.style[o]) || hs(o, e) || ((r = n == null ? void 0 : n.getValue(o)) == null ? void 0 : r.liveStyle) !== void 0) && (i[o] = s[o]);
   return i;
 }
-const ko = {
-  useVisualState: vs({
-    scrapeMotionValuesFromProps: Ot,
-    createRenderState: Ft
-  })
-};
+const Do = /* @__PURE__ */ bs({
+  scrapeMotionValuesFromProps: It,
+  createRenderState: Dt
+});
 function Ts(e, t, n) {
-  const s = Ot(e, t, n);
+  const s = It(e, t, n);
   for (const i in e)
     if (D(e[i]) || D(t[i])) {
-      const r = ie.indexOf(i) !== -1 ? "attr" + i.charAt(0).toUpperCase() + i.substring(1) : i;
+      const r = ae.indexOf(i) !== -1 ? "attr" + i.charAt(0).toUpperCase() + i.substring(1) : i;
       s[r] = e[i];
     }
   return s;
 }
-const No = {
-  useVisualState: vs({
-    scrapeMotionValuesFromProps: Ts,
-    createRenderState: ys
-  })
-};
-function Lo(e, t) {
-  return function(s, { forwardMotionProps: i } = { forwardMotionProps: !1 }) {
-    const o = {
-      ...Dt(s) ? No : ko,
-      preloadedFeatures: e,
-      useRender: Ro(i),
-      createVisualElement: t,
-      Component: s
-    };
-    return mo(o);
-  };
-}
-const Bo = /* @__PURE__ */ Lo();
-function he(e, t, n) {
-  const s = e.getProps();
-  return Rt(s, t, n !== void 0 ? n : s.custom, e);
+const Ro = /* @__PURE__ */ bs({
+  scrapeMotionValuesFromProps: Ts,
+  createRenderState: gs
+}), Oo = Symbol.for("motionComponentSymbol");
+function vs(e) {
+  return e && typeof e == "object" && Object.prototype.hasOwnProperty.call(e, "current");
 }
-const it = (e) => Array.isArray(e);
-function Ko(e, t, n) {
-  e.hasValue(t) ? e.getValue(t).set(n) : e.addValue(t, Pe(n));
+function Io(e, t, n) {
+  return Js(
+    (s) => {
+      s && e.onMount && e.onMount(s), t && (s ? t.mount(s) : t.unmount()), n && (typeof n == "function" ? n(s) : vs(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.
+     */
+    [t]
+  );
 }
-function $o(e) {
-  return it(e) ? e[e.length - 1] || 0 : e;
+const kt = (e) => e.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase(), ko = "framerAppearId", ws = "data-" + kt(ko), Eo = se({});
+function Lo(e, t, n, s, i) {
+  var b, v;
+  const { visualElement: r } = E(Ee), o = E(Mt), a = E(Tn), c = E(ls).reducedMotion, l = fe(null);
+  s = s || o.renderer, !l.current && s && (l.current = s(e, {
+    visualState: t,
+    parent: r,
+    props: n,
+    presenceContext: a,
+    blockInitialAnimation: a ? a.initial === !1 : !1,
+    reducedMotionConfig: c
+  }));
+  const u = l.current, f = E(Eo);
+  u && !u.projection && i && (u.type === "html" || u.type === "svg") && No(l.current, n, i, f);
+  const d = fe(!1);
+  Qs(() => {
+    u && d.current && u.update(n, a);
+  });
+  const h = n[ws], y = fe(!!h && !((b = window.MotionHandoffIsComplete) != null && b.call(window, h)) && ((v = window.MotionHasOptimisedAnimation) == null ? void 0 : v.call(window, h)));
+  return si(() => {
+    u && (d.current = !0, window.MotionIsMounted = !0, u.updateFeatures(), u.scheduleRenderMicrotask(), y.current && u.animationState && u.animationState.animateChanges());
+  }), ft(() => {
+    u && (!y.current && u.animationState && u.animationState.animateChanges(), y.current && (queueMicrotask(() => {
+      var p;
+      (p = window.MotionHandoffMarkAsComplete) == null || p.call(window, h);
+    }), y.current = !1), u.enteringChildren = void 0);
+  }), u;
 }
-function Wo(e, t) {
-  const n = he(e, t);
-  let { transitionEnd: s = {}, transition: i = {}, ...r } = n || {};
-  r = { ...r, ...s };
-  for (const o in r) {
-    const a = $o(r[o]);
-    Ko(e, o, a);
-  }
+function No(e, t, n, s) {
+  const { layoutId: i, layout: r, drag: o, dragConstraints: a, layoutScroll: c, layoutRoot: l, layoutCrossfade: u } = t;
+  e.projection = new n(e.latestValues, t["data-framer-portal-id"] ? void 0 : Vs(e.parent)), e.projection.setOptions({
+    layoutId: i,
+    layout: r,
+    alwaysMeasureLayout: !!o || a && vs(a),
+    visualElement: e,
+    /**
+     * 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,
+    crossfade: u,
+    layoutScroll: c,
+    layoutRoot: l
+  });
 }
-function jo(e) {
-  return !!(D(e) && e.add);
+function Vs(e) {
+  if (e)
+    return e.options.allowProjection !== !1 ? e.projection : Vs(e.parent);
 }
-function _o(e, t) {
-  const n = e.getValue("willChange");
-  if (jo(n))
-    return n.add(t);
-  if (!n && K.WillChange) {
-    const s = new K.WillChange("auto");
-    e.addValue("willChange", s), s.add(t);
+function Bo(e, { forwardMotionProps: t = !1 } = {}, n, s) {
+  const i = Rt(e) ? Ro : Do;
+  function r(a, c) {
+    let l;
+    const u = {
+      ...E(ls),
+      ...a,
+      layoutId: Ko(a)
+    }, { isStatic: f } = u, d = ho(a), h = i(a, f);
+    if (!f && dt) {
+      $o(u, n);
+      const y = Wo(u);
+      l = y.MeasureLayout, d.visualElement = Lo(e, h, u, s, y.ProjectionNode);
+    }
+    return lt(Ee.Provider, { value: d, children: [l && d.visualElement ? F(l, { visualElement: d.visualElement, ...u }) : null, Mo(e, a, Io(h, d.visualElement, c), h, f, t)] });
   }
+  r.displayName = `motion.${typeof e == "string" ? e : `create(${e.displayName ?? e.name ?? ""})`}`;
+  const o = ei(r);
+  return o[Oo] = e, o;
 }
-function Go(e) {
-  return e.props[ds];
-}
-const zo = (e) => e !== null;
-function Uo(e, { repeat: t, repeatType: n = "loop" }, s) {
-  const i = e.filter(zo), r = t && n !== "loop" && t % 2 === 1 ? 0 : i.length - 1;
-  return i[r];
+function Ko({ layoutId: e }) {
+  const t = E(ti).id;
+  return t && e !== void 0 ? t + "-" + e : e;
 }
-const Ho = {
-  type: "spring",
-  stiffness: 500,
-  damping: 25,
-  restSpeed: 10
-}, Yo = (e) => ({
-  type: "spring",
-  stiffness: 550,
-  damping: e === 0 ? 2 * Math.sqrt(550) : 30,
-  restSpeed: 10
-}), Xo = {
-  type: "keyframes",
-  duration: 0.8
-}, qo = {
-  type: "keyframes",
-  ease: [0.25, 0.1, 0.35, 1],
-  duration: 0.3
-}, Zo = (e, { keyframes: t }) => t.length > 2 ? Xo : re.has(e) ? e.startsWith("scale") ? Yo(t[1]) : Ho : qo;
-function Jo({ when: e, delay: t, delayChildren: n, staggerChildren: s, staggerDirection: i, repeat: r, repeatType: o, repeatDelay: a, from: c, elapsed: l, ...u }) {
-  return !!Object.keys(u).length;
+function $o(e, t) {
+  E(Mt).strict, process.env.NODE_ENV;
 }
-const Qo = (e, t, n, s = {}, i, r) => (o) => {
-  const a = Qn(s, e) || {}, c = a.delay || s.delay || 0;
-  let { elapsed: l = 0 } = s;
-  l = l - /* @__PURE__ */ N(c);
-  const u = {
-    keyframes: Array.isArray(n) ? n : [null, n],
-    ease: "easeOut",
-    velocity: t.getVelocity(),
-    ...a,
-    delay: -l,
-    onUpdate: (f) => {
-      t.set(f), a.onUpdate && a.onUpdate(f);
-    },
-    onComplete: () => {
-      o(), a.onComplete && a.onComplete();
-    },
-    name: e,
-    motionValue: t,
-    element: r ? void 0 : i
+function Wo(e) {
+  const { drag: t, layout: n } = ne;
+  if (!t && !n)
+    return {};
+  const s = { ...t, ...n };
+  return {
+    MeasureLayout: t != null && t.isEnabled(e) || n != null && n.isEnabled(e) ? s.MeasureLayout : void 0,
+    ProjectionNode: s.ProjectionNode
   };
-  Jo(a) || Object.assign(u, Zo(e, u)), u.duration && (u.duration = /* @__PURE__ */ N(u.duration)), u.repeatDelay && (u.repeatDelay = /* @__PURE__ */ N(u.repeatDelay)), u.from !== void 0 && (u.keyframes[0] = u.from);
-  let d = !1;
-  if ((u.type === !1 || u.duration === 0 && !u.repeatDelay) && (u.duration = 0, u.delay === 0 && (d = !0)), (K.instantAnimations || K.skipAnimations) && (d = !0, u.duration = 0, u.delay = 0), u.allowFlatten = !a.type && !a.ease, d && !r && t.get() !== void 0) {
-    const f = Uo(u.keyframes, a);
-    if (f !== void 0) {
-      k.update(() => {
-        u.onUpdate(f), u.onComplete();
-      });
-      return;
-    }
-  }
-  return a.isSync ? new wt(u) : new Pr(u);
-};
-function ea({ protectedKeys: e, needsAnimating: t }, n) {
-  const s = e.hasOwnProperty(n) && t[n] !== !0;
-  return t[n] = !1, s;
 }
-function ws(e, t, { delay: n = 0, transitionOverride: s, type: i } = {}) {
-  let { transition: r = e.getDefaultTransition(), transitionEnd: o, ...a } = t;
-  s && (r = s);
-  const c = [], l = i && e.animationState && e.animationState.getState()[i];
-  for (const u in a) {
-    const d = e.getValue(u, e.latestValues[u] ?? null), f = a[u];
-    if (f === void 0 || l && ea(l, u))
-      continue;
-    const h = {
-      delay: n,
-      ...Qn(r || {}, u)
-    }, y = d.get();
-    if (y !== void 0 && !d.isAnimating && !Array.isArray(f) && f === y && !h.velocity)
-      continue;
-    let b = !1;
-    if (window.MotionHandoffAnimation) {
-      const p = Go(e);
-      if (p) {
-        const V = window.MotionHandoffAnimation(p, u, k);
-        V !== null && (h.startTime = V, b = !0);
-      }
-    }
-    _o(e, u), d.start(Qo(u, d, f, e.shouldReduceMotion && es.has(u) ? { type: !1 } : h, e, b));
-    const T = d.animation;
-    T && c.push(T);
-  }
-  return o && Promise.all(c).then(() => {
-    k.update(() => {
-      o && Wo(e, o);
-    });
-  }), c;
+function jo({ top: e, left: t, right: n, bottom: s }) {
+  return {
+    x: { min: t, max: n },
+    y: { min: e, max: s }
+  };
 }
-function rt(e, t, n = {}) {
-  var c;
-  const s = he(e, t, n.type === "exit" ? (c = e.presenceContext) == null ? void 0 : c.custom : void 0);
-  let { transition: i = e.getDefaultTransition() || {} } = s || {};
-  n.transitionOverride && (i = n.transitionOverride);
-  const r = s ? () => Promise.all(ws(e, s, n)) : () => Promise.resolve(), o = e.variantChildren && e.variantChildren.size ? (l = 0) => {
-    const { delayChildren: u = 0, staggerChildren: d, staggerDirection: f } = i;
-    return ta(e, t, l, u, d, f, n);
-  } : () => Promise.resolve(), { when: a } = i;
-  if (a) {
-    const [l, u] = a === "beforeChildren" ? [r, o] : [o, r];
-    return l().then(() => u());
-  } else
-    return Promise.all([r(), o(n.delay)]);
+function _o(e, t) {
+  if (!t)
+    return e;
+  const n = t({ x: e.left, y: e.top }), s = t({ x: e.right, y: e.bottom });
+  return {
+    top: n.y,
+    left: n.x,
+    bottom: s.y,
+    right: s.x
+  };
 }
-function ta(e, t, n = 0, s = 0, i = 0, r = 1, o) {
-  const a = [], c = e.variantChildren.size, l = (c - 1) * i, u = typeof s == "function", d = u ? (f) => s(f, c) : (
-    // Support deprecated staggerChildren
-    r === 1 ? (f = 0) => f * i : (f = 0) => l - f * i
-  );
-  return Array.from(e.variantChildren).sort(na).forEach((f, h) => {
-    f.notify("AnimationStart", t), a.push(rt(f, t, {
-      ...o,
-      delay: n + (u ? 0 : s) + d(h)
-    }).then(() => f.notify("AnimationComplete", t)));
-  }), Promise.all(a);
+function Go(e, t) {
+  return jo(_o(e.getBoundingClientRect(), t));
 }
-function na(e, t) {
-  return e.sortNodePosition(t);
+const ln = () => ({ min: 0, max: 0 }), Ss = () => ({
+  x: ln(),
+  y: ln()
+}), ot = { current: null }, xs = { current: !1 };
+function zo() {
+  if (xs.current = !0, !!dt)
+    if (window.matchMedia) {
+      const e = window.matchMedia("(prefers-reduced-motion)"), t = () => ot.current = e.matches;
+      e.addEventListener("change", t), t();
+    } else
+      ot.current = !1;
 }
-function sa(e, t, n = {}) {
-  e.notify("AnimationStart", t);
-  let s;
-  if (Array.isArray(t)) {
-    const i = t.map((r) => rt(e, r, n));
-    s = Promise.all(i);
-  } else if (typeof t == "string")
-    s = rt(e, t, n);
-  else {
-    const i = typeof t == "function" ? he(e, t, n.custom) : t;
-    s = Promise.all(ws(e, i, n));
+const Ho = /* @__PURE__ */ new WeakMap();
+function Uo(e, t, n) {
+  for (const s in t) {
+    const i = t[s], r = n[s];
+    if (D(i))
+      e.addValue(s, i);
+    else if (D(r))
+      e.addValue(s, De(i, { owner: e }));
+    else if (r !== i)
+      if (e.hasValue(s)) {
+        const o = e.getValue(s);
+        o.liveStyle === !0 ? o.jump(i) : o.hasAnimated || o.set(i);
+      } else {
+        const o = e.getStaticValue(s);
+        e.addValue(s, De(o !== void 0 ? o : i, { owner: e }));
+      }
   }
-  return s.then(() => {
-    e.notify("AnimationComplete", t);
-  });
-}
-function Vs(e, t) {
-  if (!Array.isArray(t))
-    return !1;
-  const n = t.length;
-  if (n !== e.length)
-    return !1;
-  for (let s = 0; s < n; s++)
-    if (t[s] !== e[s])
-      return !1;
-  return !0;
+  for (const s in n)
+    t[s] === void 0 && e.removeValue(s);
+  return t;
 }
-const ia = Mt.length;
-function Ss(e) {
-  if (!e)
-    return;
-  if (!e.isControllingVariants) {
-    const n = e.parent ? Ss(e.parent) || {} : {};
-    return e.props.initial !== void 0 && (n.initial = e.props.initial), n;
+const fn = [
+  "AnimationStart",
+  "AnimationComplete",
+  "Update",
+  "BeforeLayoutMeasure",
+  "LayoutMeasure",
+  "LayoutAnimationStart",
+  "LayoutAnimationComplete"
+];
+class Yo {
+  /**
+   * 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(t, n, s) {
+    return {};
   }
-  const t = {};
-  for (let n = 0; n < ia; n++) {
-    const s = Mt[n], i = e.props[s];
-    (de(i) || i === !1) && (t[s] = i);
+  constructor({ parent: t, 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 = xt, 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 = k.now();
+      this.renderScheduledAt < d && (this.renderScheduledAt = d, L.render(this.render, !1, !0));
+    };
+    const { latestValues: c, renderState: l } = o;
+    this.latestValues = c, this.baseTarget = { ...c }, this.initialValues = n.initial ? { ...c } : {}, this.renderState = l, this.parent = t, this.props = n, this.presenceContext = s, this.depth = t ? t.depth + 1 : 0, this.reducedMotionConfig = i, this.options = a, this.blockInitialAnimation = !!r, this.isControllingVariants = Ne(n), this.isVariantNode = ds(n), this.isVariantNode && (this.variantChildren = /* @__PURE__ */ new Set()), this.manuallyAnimateOnMount = !!(t && t.current);
+    const { willChange: u, ...f } = this.scrapeMotionValuesFromProps(n, {}, this);
+    for (const d in f) {
+      const h = f[d];
+      c[d] !== void 0 && D(h) && h.set(c[d]);
+    }
   }
-  return t;
-}
-const ra = [...At].reverse(), oa = At.length;
-function aa(e) {
-  return (t) => Promise.all(t.map(({ animation: n, options: s }) => sa(e, n, s)));
-}
-function ua(e) {
-  let t = aa(e), n = an(), s = !0;
-  const i = (c) => (l, u) => {
-    var f;
-    const d = he(e, u, c === "exit" ? (f = e.presenceContext) == null ? void 0 : f.custom : void 0);
-    if (d) {
-      const { transition: h, transitionEnd: y, ...b } = d;
-      l = { ...l, ...b, ...y };
+  mount(t) {
+    var n;
+    this.current = t, Ho.set(t, this), this.projection && !this.projection.instance && this.projection.mount(t), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((s, i) => this.bindToMotionValue(i, s)), xs.current || zo(), this.shouldReduceMotion = this.reducedMotionConfig === "never" ? !1 : this.reducedMotionConfig === "always" ? !0 : ot.current, process.env.NODE_ENV !== "production" && An(this.shouldReduceMotion !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled"), (n = this.parent) == null || n.addChild(this), this.update(this.props, this.presenceContext);
+  }
+  unmount() {
+    var t;
+    this.projection && this.projection.unmount(), He(this.notifyUpdate), He(this.render), this.valueSubscriptions.forEach((n) => n()), this.valueSubscriptions.clear(), this.removeFromVariantTree && this.removeFromVariantTree(), (t = this.parent) == null || t.removeChild(this);
+    for (const n in this.events)
+      this.events[n].clear();
+    for (const n in this.features) {
+      const s = this.features[n];
+      s && (s.unmount(), s.isMounted = !1);
     }
-    return l;
-  };
-  function r(c) {
-    t = c(e);
+    this.current = null;
   }
-  function o(c) {
-    const { props: l } = e, u = Ss(e.parent) || {}, d = [], f = /* @__PURE__ */ new Set();
-    let h = {}, y = 1 / 0;
-    for (let T = 0; T < oa; T++) {
-      const p = ra[T], V = n[p], g = l[p] !== void 0 ? l[p] : u[p], x = de(g), v = p === c ? V.isActive : null;
-      v === !1 && (y = T);
-      let S = g === u[p] && g !== l[p] && x;
-      if (S && s && e.manuallyAnimateOnMount && (S = !1), V.protectedKeys = { ...h }, // If it isn't active and hasn't *just* been set as inactive
-      !V.isActive && v === null || // If we didn't and don't have any defined prop for this animation type
-      !g && !V.prevProp || // Or if the prop doesn't define an animation
-      Ee(g) || typeof g == "boolean")
+  addChild(t) {
+    this.children.add(t), this.enteringChildren ?? (this.enteringChildren = /* @__PURE__ */ new Set()), this.enteringChildren.add(t);
+  }
+  removeChild(t) {
+    this.children.delete(t), this.enteringChildren && this.enteringChildren.delete(t);
+  }
+  bindToMotionValue(t, n) {
+    this.valueSubscriptions.has(t) && this.valueSubscriptions.get(t)();
+    const s = ue.has(t);
+    s && this.onBindTransform && this.onBindTransform();
+    const i = n.on("change", (o) => {
+      this.latestValues[t] = o, this.props.onUpdate && L.preRender(this.notifyUpdate), s && this.projection && (this.projection.isTransformDirty = !0), this.scheduleRender();
+    });
+    let r;
+    window.MotionCheckAppearSync && (r = window.MotionCheckAppearSync(this, t, n)), this.valueSubscriptions.set(t, () => {
+      i(), r && r(), n.owner && n.stop();
+    });
+  }
+  sortNodePosition(t) {
+    return !this.current || !this.sortInstanceNodePosition || this.type !== t.type ? 0 : this.sortInstanceNodePosition(this.current, t.current);
+  }
+  updateFeatures() {
+    let t = "animation";
+    for (t in ne) {
+      const n = ne[t];
+      if (!n)
         continue;
-      const C = ca(V.prevProp, g);
-      let w = C || // If we're making this variant active, we want to always make it active
-      p === c && V.isActive && !S && x || // If we removed a higher-priority variant (i is in reverse order)
-      T > y && x, R = !1;
-      const O = Array.isArray(g) ? g : [g];
-      let X = O.reduce(i(p), {});
-      v === !1 && (X = {});
-      const { prevResolvedValues: It = {} } = V, Ls = {
-        ...It,
-        ...X
-      }, Et = (P) => {
-        w = !0, f.has(P) && (R = !0, f.delete(P)), V.needsAnimating[P] = !0;
-        const L = e.getValue(P);
-        L && (L.liveStyle = !1);
-      };
-      for (const P in Ls) {
-        const L = X[P], Ne = It[P];
-        if (h.hasOwnProperty(P))
-          continue;
-        let Le = !1;
-        it(L) && it(Ne) ? Le = !Vs(L, Ne) : Le = L !== Ne, Le ? L != null ? Et(P) : f.add(P) : L !== void 0 && f.has(P) ? Et(P) : V.protectedKeys[P] = !0;
-      }
-      V.prevProp = g, V.prevResolvedValues = X, V.isActive && (h = { ...h, ...X }), s && e.blockInitialAnimation && (w = !1), w && (!(S && C) || R) && d.push(...O.map((P) => ({
-        animation: P,
-        options: { type: p }
-      })));
-    }
-    if (f.size) {
-      const T = {};
-      if (typeof l.initial != "boolean") {
-        const p = he(e, Array.isArray(l.initial) ? l.initial[0] : l.initial);
-        p && p.transition && (T.transition = p.transition);
+      const { isEnabled: s, Feature: i } = n;
+      if (!this.features[t] && i && s(this.props) && (this.features[t] = new i(this)), this.features[t]) {
+        const r = this.features[t];
+        r.isMounted ? r.update() : (r.mount(), r.isMounted = !0);
       }
-      f.forEach((p) => {
-        const V = e.getBaseTarget(p), g = e.getValue(p);
-        g && (g.liveStyle = !0), T[p] = V ?? null;
-      }), d.push({ animation: T });
     }
-    let b = !!d.length;
-    return s && (l.initial === !1 || l.initial === l.animate) && !e.manuallyAnimateOnMount && (b = !1), s = !1, b ? t(d) : Promise.resolve();
   }
-  function a(c, l) {
-    var d;
-    if (n[c].isActive === l)
-      return Promise.resolve();
-    (d = e.variantChildren) == null || d.forEach((f) => {
-      var h;
-      return (h = f.animationState) == null ? void 0 : h.setActive(c, l);
-    }), n[c].isActive = l;
-    const u = o(c);
-    for (const f in n)
-      n[f].protectedKeys = {};
-    return u;
+  triggerBuild() {
+    this.build(this.renderState, this.latestValues, this.props);
   }
-  return {
-    animateChanges: o,
-    setActive: a,
-    setAnimateFunction: r,
-    getState: () => n,
-    reset: () => {
-      n = an(), s = !0;
-    }
-  };
-}
-function ca(e, t) {
-  return typeof t == "string" ? t !== e : Array.isArray(t) ? !Vs(t, e) : !1;
-}
-function W(e = !1) {
-  return {
-    isActive: e,
-    protectedKeys: {},
-    needsAnimating: {},
-    prevResolvedValues: {}
-  };
-}
-function an() {
-  return {
-    animate: W(!0),
-    whileInView: W(),
-    whileHover: W(),
-    whileTap: W(),
-    whileDrag: W(),
-    whileFocus: W(),
-    exit: W()
-  };
-}
-class oe {
-  constructor(t) {
-    this.isMounted = !1, this.node = t;
+  /**
+   * 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) : Ss();
   }
-  update() {
+  getStaticValue(t) {
+    return this.latestValues[t];
+  }
+  setStaticValue(t, n) {
+    this.latestValues[t] = n;
   }
-}
-class la extends oe {
   /**
-   * 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.
+   * Update the provided props. Ensure any newly-added motion values are
+   * added to our map, old ones removed, and listeners updated.
    */
-  constructor(t) {
-    super(t), t.animationState || (t.animationState = ua(t));
+  update(t, n) {
+    (t.transformTemplate || this.props.transformTemplate) && this.scheduleRender(), this.prevProps = this.props, this.props = t, this.prevPresenceContext = this.presenceContext, this.presenceContext = n;
+    for (let s = 0; s < fn.length; s++) {
+      const i = fn[s];
+      this.propEventSubscriptions[i] && (this.propEventSubscriptions[i](), delete this.propEventSubscriptions[i]);
+      const r = "on" + i, o = t[r];
+      o && (this.propEventSubscriptions[i] = this.on(i, o));
+    }
+    this.prevMotionValues = Uo(this, this.scrapeMotionValuesFromProps(t, this.prevProps, this), this.prevMotionValues), this.handleChildMotionValue && this.handleChildMotionValue();
   }
-  updateAnimationControlsSubscription() {
-    const { animate: t } = this.node.getProps();
-    Ee(t) && (this.unmountControls = t.subscribe(this.node));
+  getProps() {
+    return this.props;
   }
   /**
-   * Subscribe any provided AnimationControls to the component's VisualElement
+   * Returns the variant definition with a given name.
    */
-  mount() {
-    this.updateAnimationControlsSubscription();
+  getVariant(t) {
+    return this.props.variants ? this.props.variants[t] : void 0;
   }
-  update() {
-    const { animate: t } = this.node.getProps(), { animate: n } = this.node.prevProps || {};
-    t !== n && this.updateAnimationControlsSubscription();
+  /**
+   * Returns the defined default transition on this component.
+   */
+  getDefaultTransition() {
+    return this.props.transition;
   }
-  unmount() {
-    var t;
-    this.node.animationState.reset(), (t = this.unmountControls) == null || t.call(this);
+  getTransformPagePoint() {
+    return this.props.transformPagePoint;
   }
-}
-let fa = 0;
-class da extends oe {
-  constructor() {
-    super(...arguments), this.id = fa++;
+  getClosestVariantNode() {
+    return this.isVariantNode ? this : this.parent ? this.parent.getClosestVariantNode() : void 0;
   }
-  update() {
-    if (!this.node.presenceContext)
-      return;
-    const { isPresent: t, onExitComplete: n } = this.node.presenceContext, { isPresent: s } = this.node.prevPresenceContext || {};
-    if (!this.node.animationState || t === s)
-      return;
-    const i = this.node.animationState.setActive("exit", !t);
-    n && !t && i.then(() => {
-      n(this.id);
-    });
+  /**
+   * Add a child visual element to our set of children.
+   */
+  addVariantChild(t) {
+    const n = this.getClosestVariantNode();
+    if (n)
+      return n.variantChildren && n.variantChildren.add(t), () => n.variantChildren.delete(t);
   }
-  mount() {
-    const { register: t, onExitComplete: n } = this.node.presenceContext || {};
-    n && n(this.id), t && (this.unmount = t(this.id));
+  /**
+   * Add a motion value and bind it to this visual element.
+   */
+  addValue(t, n) {
+    const s = this.values.get(t);
+    n !== s && (s && this.removeValue(t), this.bindToMotionValue(t, n), this.values.set(t, n), this.latestValues[t] = n.get());
   }
-  unmount() {
+  /**
+   * Remove a motion value and unbind any active subscriptions.
+   */
+  removeValue(t) {
+    this.values.delete(t);
+    const n = this.valueSubscriptions.get(t);
+    n && (n(), this.valueSubscriptions.delete(t)), delete this.latestValues[t], this.removeValueFromRenderState(t, this.renderState);
   }
-}
-const ha = {
-  animation: {
-    Feature: la
-  },
-  exit: {
-    Feature: da
+  /**
+   * Check whether we have a motion value for this key
+   */
+  hasValue(t) {
+    return this.values.has(t);
   }
-};
-function un(e, t, n, s = { passive: !0 }) {
-  return e.addEventListener(t, n, s), () => e.removeEventListener(t, n);
-}
-function xs(e) {
-  return {
-    point: {
-      x: e.pageX,
-      y: e.pageY
-    }
-  };
-}
-function pa({ top: e, left: t, right: n, bottom: s }) {
-  return {
-    x: { min: t, max: n },
-    y: { min: e, max: s }
-  };
-}
-function ma(e, t) {
-  if (!t)
-    return e;
-  const n = t({ x: e.left, y: e.top }), s = t({ x: e.right, y: e.bottom });
-  return {
-    top: n.y,
-    left: n.x,
-    bottom: s.y,
-    right: s.x
-  };
-}
-const cn = () => ({ min: 0, max: 0 }), As = () => ({
-  x: cn(),
-  y: cn()
-});
-function ga(e, t) {
-  return pa(ma(e.getBoundingClientRect(), t));
-}
-function ln(e, t, n) {
-  const { props: s } = e;
-  e.animationState && s.whileHover && e.animationState.setActive("whileHover", n === "Start");
-  const i = "onHover" + n, r = s[i];
-  r && k.postRender(() => r(t, xs(t)));
-}
-class ya extends oe {
-  mount() {
-    const { current: t } = this.node;
-    t && (this.unmount = Yr(t, (n, s) => (ln(this.node, s, "Start"), (i) => ln(this.node, i, "End"))));
+  getValue(t, n) {
+    if (this.props.values && this.props.values[t])
+      return this.props.values[t];
+    let s = this.values.get(t);
+    return s === void 0 && n !== void 0 && (s = De(n === null ? void 0 : n, { owner: this }), this.addValue(t, s)), s;
   }
-  unmount() {
+  /**
+   * 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(t, n) {
+    let s = this.latestValues[t] !== void 0 || !this.current ? this.latestValues[t] : this.getBaseTargetFromProps(this.props, t) ?? this.readValueFromInstance(this.current, t, this.options);
+    return s != null && (typeof s == "string" && (vn(s) || wn(s)) ? s = parseFloat(s) : !oo(s) && oe.test(n) && (s = os(t, n)), this.setBaseTarget(t, D(s) ? s.get() : s)), D(s) ? s.get() : s;
   }
-}
-class ba extends oe {
-  constructor() {
-    super(...arguments), this.isActive = !1;
+  /**
+   * Set the base target to later animate back to. This is currently
+   * only hydrated on creation and when we first read a value.
+   */
+  setBaseTarget(t, n) {
+    this.baseTarget[t] = n;
   }
-  onFocus() {
-    let t = !1;
-    try {
-      t = this.node.current.matches(":focus-visible");
-    } catch {
-      t = !0;
+  /**
+   * Find the base target for a value thats been removed from all animation
+   * props.
+   */
+  getBaseTarget(t) {
+    var r;
+    const { initial: n } = this.props;
+    let s;
+    if (typeof n == "string" || typeof n == "object") {
+      const o = Ot(this.props, n, (r = this.presenceContext) == null ? void 0 : r.custom);
+      o && (s = o[t]);
     }
-    !t || !this.node.animationState || (this.node.animationState.setActive("whileFocus", !0), this.isActive = !0);
+    if (n && s !== void 0)
+      return s;
+    const i = this.getBaseTargetFromProps(this.props, t);
+    return i !== void 0 && !D(i) ? i : this.initialValues[t] !== void 0 && s === void 0 ? void 0 : this.baseTarget[t];
   }
-  onBlur() {
-    !this.isActive || !this.node.animationState || (this.node.animationState.setActive("whileFocus", !1), this.isActive = !1);
+  on(t, n) {
+    return this.events[t] || (this.events[t] = new Sn()), this.events[t].add(n);
   }
-  mount() {
-    this.unmount = Re(un(this.node.current, "focus", () => this.onFocus()), un(this.node.current, "blur", () => this.onBlur()));
+  notify(t, ...n) {
+    this.events[t] && this.events[t].notify(...n);
   }
-  unmount() {
+  scheduleRenderMicrotask() {
+    qr.render(this.render);
   }
 }
-function fn(e, t, n) {
-  const { props: s } = e;
-  if (e.current instanceof HTMLButtonElement && e.current.disabled)
-    return;
-  e.animationState && s.whileTap && e.animationState.setActive("whileTap", n === "Start");
-  const i = "onTap" + (n === "End" ? "" : n), r = s[i];
-  r && k.postRender(() => r(t, xs(t)));
-}
-class va extends oe {
-  mount() {
-    const { current: t } = this.node;
-    t && (this.unmount = Qr(t, (n, s) => (fn(this.node, s, "Start"), (i, { success: r }) => fn(this.node, i, r ? "End" : "Cancel")), { useGlobalTarget: this.node.props.globalTapTarget }));
+class As extends Yo {
+  constructor() {
+    super(...arguments), this.KeyframeResolver = zr;
   }
-  unmount() {
+  sortInstanceNodePosition(t, n) {
+    return t.compareDocumentPosition(n) & 2 ? 1 : -1;
+  }
+  getBaseTargetFromProps(t, n) {
+    return t.style ? t.style[n] : void 0;
+  }
+  removeValueFromRenderState(t, { vars: n, style: s }) {
+    delete n[t], delete s[t];
+  }
+  handleChildMotionValue() {
+    this.childSubscription && (this.childSubscription(), delete this.childSubscription);
+    const { children: t } = this.props;
+    D(t) && (this.childSubscription = t.on("change", (n) => {
+      this.current && (this.current.textContent = `${n}`);
+    }));
   }
 }
-const ot = /* @__PURE__ */ new WeakMap(), Ge = /* @__PURE__ */ new WeakMap(), Ta = (e) => {
-  const t = ot.get(e.target);
-  t && t(e);
-}, wa = (e) => {
-  e.forEach(Ta);
-};
-function Va({ root: e, ...t }) {
-  const n = e || document;
-  Ge.has(n) || Ge.set(n, {});
-  const s = Ge.get(n), i = JSON.stringify(t);
-  return s[i] || (s[i] = new IntersectionObserver(wa, { root: e, ...t })), s[i];
+function Ms(e, { style: t, vars: n }, s, i) {
+  const r = e.style;
+  let o;
+  for (o in t)
+    r[o] = t[o];
+  i == null || i.applyProjectionStyles(r, s);
+  for (o in n)
+    r.setProperty(o, n[o]);
 }
-function Sa(e, t, n) {
-  const s = Va(t);
-  return ot.set(e, n), s.observe(e), () => {
-    ot.delete(e), s.unobserve(e);
-  };
+function Xo(e) {
+  return window.getComputedStyle(e);
 }
-const xa = {
-  some: 0,
-  all: 1
-};
-class Aa extends oe {
+class qo extends As {
   constructor() {
-    super(...arguments), this.hasEnteredView = !1, this.isInView = !1;
+    super(...arguments), this.type = "html", this.renderInstance = Ms;
   }
-  startObserver() {
-    this.unmount();
-    const { viewport: t = {} } = this.node.getProps(), { root: n, margin: s, amount: i = "some", once: r } = t, o = {
-      root: n ? n.current : void 0,
-      rootMargin: s,
-      threshold: typeof i == "number" ? i : xa[i]
-    }, a = (c) => {
-      const { isIntersecting: l } = c;
-      if (this.isInView === l || (this.isInView = l, r && !l && this.hasEnteredView))
-        return;
-      l && (this.hasEnteredView = !0), this.node.animationState && this.node.animationState.setActive("whileInView", l);
-      const { onViewportEnter: u, onViewportLeave: d } = this.node.getProps(), f = l ? u : d;
-      f && f(c);
-    };
-    return Sa(this.node.current, o, a);
+  readValueFromInstance(t, n) {
+    var s;
+    if (ue.has(n))
+      return (s = this.projection) != null && s.isProjecting ? Qe(n) : cr(t, n);
+    {
+      const i = Xo(t), r = (Nn(n) ? i.getPropertyValue(n) : i[n]) || 0;
+      return typeof r == "string" ? r.trim() : r;
+    }
   }
-  mount() {
-    this.startObserver();
+  measureInstanceViewportBox(t, { transformPagePoint: n }) {
+    return Go(t, n);
   }
-  update() {
-    if (typeof IntersectionObserver > "u")
-      return;
-    const { props: t, prevProps: n } = this.node;
-    ["amount", "margin", "root"].some(Ma(t, n)) && this.startObserver();
+  build(t, n, s) {
+    Ft(t, n, s.transformTemplate);
   }
-  unmount() {
+  scrapeMotionValuesFromProps(t, n, s) {
+    return It(t, n, s);
   }
 }
-function Ma({ viewport: e = {} }, { viewport: t = {} } = {}) {
-  return (n) => e[n] !== t[n];
+const Cs = /* @__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 Zo(e, t, n, s) {
+  Ms(e, t, void 0, s);
+  for (const i in t.attrs)
+    e.setAttribute(Cs.has(i) ? i : kt(i), t.attrs[i]);
 }
-const Ca = {
-  inView: {
-    Feature: Aa
-  },
-  tap: {
-    Feature: va
-  },
-  focus: {
-    Feature: ba
-  },
-  hover: {
-    Feature: ya
+class Jo extends As {
+  constructor() {
+    super(...arguments), this.type = "svg", this.isSVGTag = !1, this.measureInstanceViewportBox = Ss;
   }
-}, at = { current: null }, Ms = { current: !1 };
-function Pa() {
-  if (Ms.current = !0, !!lt)
-    if (window.matchMedia) {
-      const e = window.matchMedia("(prefers-reduced-motion)"), t = () => at.current = e.matches;
-      e.addEventListener("change", t), t();
-    } else
-      at.current = !1;
-}
-const Fa = /* @__PURE__ */ new WeakMap();
-function Da(e, t, n) {
-  for (const s in t) {
-    const i = t[s], r = n[s];
-    if (D(i))
-      e.addValue(s, i);
-    else if (D(r))
-      e.addValue(s, Pe(i, { owner: e }));
-    else if (r !== i)
-      if (e.hasValue(s)) {
-        const o = e.getValue(s);
-        o.liveStyle === !0 ? o.jump(i) : o.hasAnimated || o.set(i);
-      } else {
-        const o = e.getStaticValue(s);
-        e.addValue(s, Pe(o !== void 0 ? o : i, { owner: e }));
-      }
+  getBaseTargetFromProps(t, n) {
+    return t[n];
+  }
+  readValueFromInstance(t, n) {
+    if (ue.has(n)) {
+      const s = rs(n);
+      return s && s.default || 0;
+    }
+    return n = Cs.has(n) ? n : kt(n), t.getAttribute(n);
   }
-  for (const s in n)
-    t[s] === void 0 && e.removeValue(s);
-  return t;
-}
-const dn = [
-  "AnimationStart",
-  "AnimationComplete",
-  "Update",
-  "BeforeLayoutMeasure",
-  "LayoutMeasure",
-  "LayoutAnimationStart",
-  "LayoutAnimationComplete"
-];
-class Ra {
-  /**
-   * 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(t, n, s) {
-    return {};
+    return Ts(t, n, s);
   }
-  constructor({ parent: t, 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 = Vt, 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 f = I.now();
-      this.renderScheduledAt < f && (this.renderScheduledAt = f, k.render(this.render, !1, !0));
-    };
-    const { latestValues: c, renderState: l } = o;
-    this.latestValues = c, this.baseTarget = { ...c }, this.initialValues = n.initial ? { ...c } : {}, this.renderState = l, this.parent = t, this.props = n, this.presenceContext = s, this.depth = t ? t.depth + 1 : 0, this.reducedMotionConfig = i, this.options = a, this.blockInitialAnimation = !!r, this.isControllingVariants = ke(n), this.isVariantNode = ls(n), this.isVariantNode && (this.variantChildren = /* @__PURE__ */ new Set()), this.manuallyAnimateOnMount = !!(t && t.current);
-    const { willChange: u, ...d } = this.scrapeMotionValuesFromProps(n, {}, this);
-    for (const f in d) {
-      const h = d[f];
-      c[f] !== void 0 && D(h) && h.set(c[f], !1);
-    }
+  build(t, n, s) {
+    ms(t, n, this.isSVGTag, s.transformTemplate, s.style);
+  }
+  renderInstance(t, n, s, i) {
+    Zo(t, n, s, i);
   }
   mount(t) {
-    this.current = t, Fa.set(t, this), this.projection && !this.projection.instance && this.projection.mount(t), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((n, s) => this.bindToMotionValue(s, n)), Ms.current || Pa(), this.shouldReduceMotion = this.reducedMotionConfig === "never" ? !1 : this.reducedMotionConfig === "always" ? !0 : at.current, process.env.NODE_ENV !== "production" && Vn(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.isSVGTag = ys(t.tagName), super.mount(t);
   }
-  unmount() {
-    this.projection && this.projection.unmount(), ze(this.notifyUpdate), ze(this.render), this.valueSubscriptions.forEach((t) => t()), this.valueSubscriptions.clear(), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent && this.parent.children.delete(this);
-    for (const t in this.events)
-      this.events[t].clear();
-    for (const t in this.features) {
-      const n = this.features[t];
-      n && (n.unmount(), n.isMounted = !1);
-    }
-    this.current = null;
+}
+const Qo = (e, t) => Rt(e) ? new Jo(t) : new qo(t, {
+  allowProjection: e !== bn
+});
+function te(e, t, n) {
+  const s = e.getProps();
+  return Ot(s, t, n !== void 0 ? n : s.custom, e);
+}
+const at = (e) => Array.isArray(e);
+function ea(e, t, n) {
+  e.hasValue(t) ? e.getValue(t).set(n) : e.addValue(t, De(n));
+}
+function ta(e) {
+  return at(e) ? e[e.length - 1] || 0 : e;
+}
+function na(e, t) {
+  const n = te(e, t);
+  let { transitionEnd: s = {}, transition: i = {}, ...r } = n || {};
+  r = { ...r, ...s };
+  for (const o in r) {
+    const a = ta(r[o]);
+    ea(e, o, a);
   }
-  bindToMotionValue(t, n) {
-    this.valueSubscriptions.has(t) && this.valueSubscriptions.get(t)();
-    const s = re.has(t);
-    s && this.onBindTransform && this.onBindTransform();
-    const i = n.on("change", (a) => {
-      this.latestValues[t] = a, this.props.onUpdate && k.preRender(this.notifyUpdate), s && this.projection && (this.projection.isTransformDirty = !0);
-    }), r = n.on("renderRequest", this.scheduleRender);
-    let o;
-    window.MotionCheckAppearSync && (o = window.MotionCheckAppearSync(this, t, n)), this.valueSubscriptions.set(t, () => {
-      i(), r(), o && o(), n.owner && n.stop();
-    });
+}
+function sa(e) {
+  return !!(D(e) && e.add);
+}
+function ia(e, t) {
+  const n = e.getValue("willChange");
+  if (sa(n))
+    return n.add(t);
+  if (!n && K.WillChange) {
+    const s = new K.WillChange("auto");
+    e.addValue("willChange", s), s.add(t);
   }
-  sortNodePosition(t) {
-    return !this.current || !this.sortInstanceNodePosition || this.type !== t.type ? 0 : this.sortInstanceNodePosition(this.current, t.current);
+}
+function ra(e) {
+  return e.props[ws];
+}
+const oa = (e) => e !== null;
+function aa(e, { repeat: t, repeatType: n = "loop" }, s) {
+  const i = e.filter(oa), r = t && n !== "loop" && t % 2 === 1 ? 0 : i.length - 1;
+  return i[r];
+}
+const ua = {
+  type: "spring",
+  stiffness: 500,
+  damping: 25,
+  restSpeed: 10
+}, ca = (e) => ({
+  type: "spring",
+  stiffness: 550,
+  damping: e === 0 ? 2 * Math.sqrt(550) : 30,
+  restSpeed: 10
+}), la = {
+  type: "keyframes",
+  duration: 0.8
+}, fa = {
+  type: "keyframes",
+  ease: [0.25, 0.1, 0.35, 1],
+  duration: 0.3
+}, da = (e, { keyframes: t }) => t.length > 2 ? la : ue.has(e) ? e.startsWith("scale") ? ca(t[1]) : ua : fa;
+function ha({ when: e, delay: t, delayChildren: n, staggerChildren: s, staggerDirection: i, repeat: r, repeatType: o, repeatDelay: a, from: c, elapsed: l, ...u }) {
+  return !!Object.keys(u).length;
+}
+const pa = (e, t, n, s = {}, i, r) => (o) => {
+  const a = ts(s, e) || {}, c = a.delay || s.delay || 0;
+  let { elapsed: l = 0 } = s;
+  l = l - /* @__PURE__ */ N(c);
+  const u = {
+    keyframes: Array.isArray(n) ? n : [null, n],
+    ease: "easeOut",
+    velocity: t.getVelocity(),
+    ...a,
+    delay: -l,
+    onUpdate: (d) => {
+      t.set(d), a.onUpdate && a.onUpdate(d);
+    },
+    onComplete: () => {
+      o(), a.onComplete && a.onComplete();
+    },
+    name: e,
+    motionValue: t,
+    element: r ? void 0 : i
+  };
+  ha(a) || Object.assign(u, da(e, u)), u.duration && (u.duration = /* @__PURE__ */ N(u.duration)), u.repeatDelay && (u.repeatDelay = /* @__PURE__ */ N(u.repeatDelay)), u.from !== void 0 && (u.keyframes[0] = u.from);
+  let f = !1;
+  if ((u.type === !1 || u.duration === 0 && !u.repeatDelay) && (it(u), u.delay === 0 && (f = !0)), (K.instantAnimations || K.skipAnimations) && (f = !0, it(u), u.delay = 0), u.allowFlatten = !a.type && !a.ease, f && !r && t.get() !== void 0) {
+    const d = aa(u.keyframes, a);
+    if (d !== void 0) {
+      L.update(() => {
+        u.onUpdate(d), u.onComplete();
+      });
+      return;
+    }
   }
-  updateFeatures() {
-    let t = "animation";
-    for (t in Q) {
-      const n = Q[t];
-      if (!n)
-        continue;
-      const { isEnabled: s, Feature: i } = n;
-      if (!this.features[t] && i && s(this.props) && (this.features[t] = new i(this)), this.features[t]) {
-        const r = this.features[t];
-        r.isMounted ? r.update() : (r.mount(), r.isMounted = !0);
+  return a.isSync ? new St(u) : new Or(u);
+};
+function ma({ protectedKeys: e, needsAnimating: t }, n) {
+  const s = e.hasOwnProperty(n) && t[n] !== !0;
+  return t[n] = !1, s;
+}
+function Ps(e, t, { delay: n = 0, transitionOverride: s, type: i } = {}) {
+  let { transition: r = e.getDefaultTransition(), transitionEnd: o, ...a } = t;
+  s && (r = s);
+  const c = [], l = i && e.animationState && e.animationState.getState()[i];
+  for (const u in a) {
+    const f = e.getValue(u, e.latestValues[u] ?? null), d = a[u];
+    if (d === void 0 || l && ma(l, u))
+      continue;
+    const h = {
+      delay: n,
+      ...ts(r || {}, u)
+    }, y = f.get();
+    if (y !== void 0 && !f.isAnimating && !Array.isArray(d) && d === y && !h.velocity)
+      continue;
+    let b = !1;
+    if (window.MotionHandoffAnimation) {
+      const p = ra(e);
+      if (p) {
+        const V = window.MotionHandoffAnimation(p, u, L);
+        V !== null && (h.startTime = V, b = !0);
       }
     }
+    ia(e, u), f.start(pa(u, f, d, e.shouldReduceMotion && ns.has(u) ? { type: !1 } : h, e, b));
+    const v = f.animation;
+    v && c.push(v);
   }
-  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) : As();
+  return o && Promise.all(c).then(() => {
+    L.update(() => {
+      o && na(e, o);
+    });
+  }), c;
+}
+function Fs(e, t, n, s = 0, i = 1) {
+  const r = Array.from(e).sort((l, u) => l.sortNodePosition(u)).indexOf(t), o = e.size, a = (o - 1) * s;
+  return typeof n == "function" ? n(r, o) : i === 1 ? r * s : a - r * s;
+}
+function ut(e, t, n = {}) {
+  var c;
+  const s = te(e, t, n.type === "exit" ? (c = e.presenceContext) == null ? void 0 : c.custom : void 0);
+  let { transition: i = e.getDefaultTransition() || {} } = s || {};
+  n.transitionOverride && (i = n.transitionOverride);
+  const r = s ? () => Promise.all(Ps(e, s, n)) : () => Promise.resolve(), o = e.variantChildren && e.variantChildren.size ? (l = 0) => {
+    const { delayChildren: u = 0, staggerChildren: f, staggerDirection: d } = i;
+    return ga(e, t, l, u, f, d, n);
+  } : () => Promise.resolve(), { when: a } = i;
+  if (a) {
+    const [l, u] = a === "beforeChildren" ? [r, o] : [o, r];
+    return l().then(() => u());
+  } else
+    return Promise.all([r(), o(n.delay)]);
+}
+function ga(e, t, n = 0, s = 0, i = 0, r = 1, o) {
+  const a = [];
+  for (const c of e.variantChildren)
+    c.notify("AnimationStart", t), a.push(ut(c, t, {
+      ...o,
+      delay: n + (typeof s == "function" ? 0 : s) + Fs(e.variantChildren, c, s, i, r)
+    }).then(() => c.notify("AnimationComplete", t)));
+  return Promise.all(a);
+}
+function ya(e, t, n = {}) {
+  e.notify("AnimationStart", t);
+  let s;
+  if (Array.isArray(t)) {
+    const i = t.map((r) => ut(e, r, n));
+    s = Promise.all(i);
+  } else if (typeof t == "string")
+    s = ut(e, t, n);
+  else {
+    const i = typeof t == "function" ? te(e, t, n.custom) : t;
+    s = Promise.all(Ps(e, i, n));
   }
-  getStaticValue(t) {
-    return this.latestValues[t];
+  return s.then(() => {
+    e.notify("AnimationComplete", t);
+  });
+}
+function Ds(e, t) {
+  if (!Array.isArray(t))
+    return !1;
+  const n = t.length;
+  if (n !== e.length)
+    return !1;
+  for (let s = 0; s < n; s++)
+    if (t[s] !== e[s])
+      return !1;
+  return !0;
+}
+const ba = Pt.length;
+function Rs(e) {
+  if (!e)
+    return;
+  if (!e.isControllingVariants) {
+    const n = e.parent ? Rs(e.parent) || {} : {};
+    return e.props.initial !== void 0 && (n.initial = e.props.initial), n;
   }
-  setStaticValue(t, n) {
-    this.latestValues[t] = n;
+  const t = {};
+  for (let n = 0; n < ba; n++) {
+    const s = Pt[n], i = e.props[s];
+    (me(i) || i === !1) && (t[s] = i);
   }
-  /**
-   * Update the provided props. Ensure any newly-added motion values are
-   * added to our map, old ones removed, and listeners updated.
-   */
-  update(t, n) {
-    (t.transformTemplate || this.props.transformTemplate) && this.scheduleRender(), this.prevProps = this.props, this.props = t, this.prevPresenceContext = this.presenceContext, this.presenceContext = n;
-    for (let s = 0; s < dn.length; s++) {
-      const i = dn[s];
-      this.propEventSubscriptions[i] && (this.propEventSubscriptions[i](), delete this.propEventSubscriptions[i]);
-      const r = "on" + i, o = t[r];
-      o && (this.propEventSubscriptions[i] = this.on(i, o));
+  return t;
+}
+const Ta = [...Ct].reverse(), va = Ct.length;
+function wa(e) {
+  return (t) => Promise.all(t.map(({ animation: n, options: s }) => ya(e, n, s)));
+}
+function Va(e) {
+  let t = wa(e), n = dn(), s = !0;
+  const i = (c) => (l, u) => {
+    var d;
+    const f = te(e, u, c === "exit" ? (d = e.presenceContext) == null ? void 0 : d.custom : void 0);
+    if (f) {
+      const { transition: h, transitionEnd: y, ...b } = f;
+      l = { ...l, ...b, ...y };
     }
-    this.prevMotionValues = Da(this, this.scrapeMotionValuesFromProps(t, this.prevProps, this), this.prevMotionValues), this.handleChildMotionValue && this.handleChildMotionValue();
-  }
-  getProps() {
-    return this.props;
-  }
-  /**
-   * Returns the variant definition with a given name.
-   */
-  getVariant(t) {
-    return this.props.variants ? this.props.variants[t] : void 0;
-  }
-  /**
-   * Returns the defined default transition on this component.
-   */
-  getDefaultTransition() {
-    return this.props.transition;
-  }
-  getTransformPagePoint() {
-    return this.props.transformPagePoint;
-  }
-  getClosestVariantNode() {
-    return this.isVariantNode ? this : this.parent ? this.parent.getClosestVariantNode() : void 0;
-  }
-  /**
-   * Add a child visual element to our set of children.
-   */
-  addVariantChild(t) {
-    const n = this.getClosestVariantNode();
-    if (n)
-      return n.variantChildren && n.variantChildren.add(t), () => n.variantChildren.delete(t);
+    return l;
+  };
+  function r(c) {
+    t = c(e);
   }
-  /**
-   * Add a motion value and bind it to this visual element.
-   */
-  addValue(t, n) {
-    const s = this.values.get(t);
-    n !== s && (s && this.removeValue(t), this.bindToMotionValue(t, n), this.values.set(t, n), this.latestValues[t] = n.get());
+  function o(c) {
+    const { props: l } = e, u = Rs(e.parent) || {}, f = [], d = /* @__PURE__ */ new Set();
+    let h = {}, y = 1 / 0;
+    for (let v = 0; v < va; v++) {
+      const p = Ta[v], V = n[p], g = l[p] !== void 0 ? l[p] : u[p], x = me(g), T = p === c ? V.isActive : null;
+      T === !1 && (y = v);
+      let S = g === u[p] && g !== l[p] && x;
+      if (S && s && e.manuallyAnimateOnMount && (S = !1), V.protectedKeys = { ...h }, // If it isn't active and hasn't *just* been set as inactive
+      !V.isActive && T === null || // If we didn't and don't have any defined prop for this animation type
+      !g && !V.prevProp || // Or if the prop doesn't define an animation
+      Le(g) || typeof g == "boolean")
+        continue;
+      const C = Sa(V.prevProp, g);
+      let w = C || // If we're making this variant active, we want to always make it active
+      p === c && V.isActive && !S && x || // If we removed a higher-priority variant (i is in reverse order)
+      v > y && x, R = !1;
+      const O = Array.isArray(g) ? g : [g];
+      let q = O.reduce(i(p), {});
+      T === !1 && (q = {});
+      const { prevResolvedValues: Et = {} } = V, $s = {
+        ...Et,
+        ...q
+      }, Lt = (P) => {
+        w = !0, d.has(P) && (R = !0, d.delete(P)), V.needsAnimating[P] = !0;
+        const I = e.getValue(P);
+        I && (I.liveStyle = !1);
+      };
+      for (const P in $s) {
+        const I = q[P], W = Et[P];
+        if (h.hasOwnProperty(P))
+          continue;
+        let Z = !1;
+        at(I) && at(W) ? Z = !Ds(I, W) : Z = I !== W, Z ? I != null ? Lt(P) : d.add(P) : I !== void 0 && d.has(P) ? Lt(P) : V.protectedKeys[P] = !0;
+      }
+      V.prevProp = g, V.prevResolvedValues = q, V.isActive && (h = { ...h, ...q }), s && e.blockInitialAnimation && (w = !1);
+      const Nt = S && C;
+      w && (!Nt || R) && f.push(...O.map((P) => {
+        const I = { type: p };
+        if (typeof P == "string" && s && !Nt && e.manuallyAnimateOnMount && e.parent) {
+          const { parent: W } = e, Z = te(W, P);
+          if (W.enteringChildren && Z) {
+            const { delayChildren: Ws } = Z.transition || {};
+            I.delay = Fs(W.enteringChildren, e, Ws);
+          }
+        }
+        return {
+          animation: P,
+          options: I
+        };
+      }));
+    }
+    if (d.size) {
+      const v = {};
+      if (typeof l.initial != "boolean") {
+        const p = te(e, Array.isArray(l.initial) ? l.initial[0] : l.initial);
+        p && p.transition && (v.transition = p.transition);
+      }
+      d.forEach((p) => {
+        const V = e.getBaseTarget(p), g = e.getValue(p);
+        g && (g.liveStyle = !0), v[p] = V ?? null;
+      }), f.push({ animation: v });
+    }
+    let b = !!f.length;
+    return s && (l.initial === !1 || l.initial === l.animate) && !e.manuallyAnimateOnMount && (b = !1), s = !1, b ? t(f) : Promise.resolve();
   }
-  /**
-   * Remove a motion value and unbind any active subscriptions.
-   */
-  removeValue(t) {
-    this.values.delete(t);
-    const n = this.valueSubscriptions.get(t);
-    n && (n(), this.valueSubscriptions.delete(t)), delete this.latestValues[t], this.removeValueFromRenderState(t, this.renderState);
+  function a(c, l) {
+    var f;
+    if (n[c].isActive === l)
+      return Promise.resolve();
+    (f = e.variantChildren) == null || f.forEach((d) => {
+      var h;
+      return (h = d.animationState) == null ? void 0 : h.setActive(c, l);
+    }), n[c].isActive = l;
+    const u = o(c);
+    for (const d in n)
+      n[d].protectedKeys = {};
+    return u;
   }
-  /**
-   * Check whether we have a motion value for this key
-   */
-  hasValue(t) {
-    return this.values.has(t);
+  return {
+    animateChanges: o,
+    setActive: a,
+    setAnimateFunction: r,
+    getState: () => n,
+    reset: () => {
+      n = dn(), s = !0;
+    }
+  };
+}
+function Sa(e, t) {
+  return typeof t == "string" ? t !== e : Array.isArray(t) ? !Ds(t, e) : !1;
+}
+function j(e = !1) {
+  return {
+    isActive: e,
+    protectedKeys: {},
+    needsAnimating: {},
+    prevResolvedValues: {}
+  };
+}
+function dn() {
+  return {
+    animate: j(!0),
+    whileInView: j(),
+    whileHover: j(),
+    whileTap: j(),
+    whileDrag: j(),
+    whileFocus: j(),
+    exit: j()
+  };
+}
+class ce {
+  constructor(t) {
+    this.isMounted = !1, this.node = t;
   }
-  getValue(t, n) {
-    if (this.props.values && this.props.values[t])
-      return this.props.values[t];
-    let s = this.values.get(t);
-    return s === void 0 && n !== void 0 && (s = Pe(n === null ? void 0 : n, { owner: this }), this.addValue(t, s)), s;
+  update() {
   }
+}
+class xa extends ce {
   /**
-   * 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).
+   * 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.
    */
-  readValue(t, n) {
-    let s = this.latestValues[t] !== void 0 || !this.current ? this.latestValues[t] : this.getBaseTargetFromProps(this.props, t) ?? this.readValueFromInstance(this.current, t, this.options);
-    return s != null && (typeof s == "string" && (yn(s) || bn(s)) ? s = parseFloat(s) : !to(s) && se.test(n) && (s = is(t, n)), this.setBaseTarget(t, D(s) ? s.get() : s)), D(s) ? s.get() : s;
+  constructor(t) {
+    super(t), t.animationState || (t.animationState = Va(t));
   }
-  /**
-   * Set the base target to later animate back to. This is currently
-   * only hydrated on creation and when we first read a value.
-   */
-  setBaseTarget(t, n) {
-    this.baseTarget[t] = n;
+  updateAnimationControlsSubscription() {
+    const { animate: t } = this.node.getProps();
+    Le(t) && (this.unmountControls = t.subscribe(this.node));
   }
   /**
-   * Find the base target for a value thats been removed from all animation
-   * props.
+   * Subscribe any provided AnimationControls to the component's VisualElement
    */
-  getBaseTarget(t) {
-    var r;
-    const { initial: n } = this.props;
-    let s;
-    if (typeof n == "string" || typeof n == "object") {
-      const o = Rt(this.props, n, (r = this.presenceContext) == null ? void 0 : r.custom);
-      o && (s = o[t]);
-    }
-    if (n && s !== void 0)
-      return s;
-    const i = this.getBaseTargetFromProps(this.props, t);
-    return i !== void 0 && !D(i) ? i : this.initialValues[t] !== void 0 && s === void 0 ? void 0 : this.baseTarget[t];
+  mount() {
+    this.updateAnimationControlsSubscription();
   }
-  on(t, n) {
-    return this.events[t] || (this.events[t] = new Tn()), this.events[t].add(n);
+  update() {
+    const { animate: t } = this.node.getProps(), { animate: n } = this.node.prevProps || {};
+    t !== n && this.updateAnimationControlsSubscription();
   }
-  notify(t, ...n) {
-    this.events[t] && this.events[t].notify(...n);
+  unmount() {
+    var t;
+    this.node.animationState.reset(), (t = this.unmountControls) == null || t.call(this);
   }
 }
-class Cs extends Ra {
+let Aa = 0;
+class Ma extends ce {
   constructor() {
-    super(...arguments), this.KeyframeResolver = Wr;
+    super(...arguments), this.id = Aa++;
   }
-  sortInstanceNodePosition(t, n) {
-    return t.compareDocumentPosition(n) & 2 ? 1 : -1;
+  update() {
+    if (!this.node.presenceContext)
+      return;
+    const { isPresent: t, onExitComplete: n } = this.node.presenceContext, { isPresent: s } = this.node.prevPresenceContext || {};
+    if (!this.node.animationState || t === s)
+      return;
+    const i = this.node.animationState.setActive("exit", !t);
+    n && !t && i.then(() => {
+      n(this.id);
+    });
   }
-  getBaseTargetFromProps(t, n) {
-    return t.style ? t.style[n] : void 0;
+  mount() {
+    const { register: t, onExitComplete: n } = this.node.presenceContext || {};
+    n && n(this.id), t && (this.unmount = t(this.id));
   }
-  removeValueFromRenderState(t, { vars: n, style: s }) {
-    delete n[t], delete s[t];
+  unmount() {
   }
-  handleChildMotionValue() {
-    this.childSubscription && (this.childSubscription(), delete this.childSubscription);
-    const { children: t } = this.props;
-    D(t) && (this.childSubscription = t.on("change", (n) => {
-      this.current && (this.current.textContent = `${n}`);
-    }));
+}
+const Ca = {
+  animation: {
+    Feature: xa
+  },
+  exit: {
+    Feature: Ma
   }
+};
+function hn(e, t, n, s = { passive: !0 }) {
+  return e.addEventListener(t, n, s), () => e.removeEventListener(t, n);
 }
-function Ps(e, { style: t, vars: n }, s, i) {
-  const r = e.style;
-  let o;
-  for (o in t)
-    r[o] = t[o];
-  i == null || i.applyProjectionStyles(r, s);
-  for (o in n)
-    r.setProperty(o, n[o]);
+function Os(e) {
+  return {
+    point: {
+      x: e.pageX,
+      y: e.pageY
+    }
+  };
 }
-function Oa(e) {
-  return window.getComputedStyle(e);
+function pn(e, t, n) {
+  const { props: s } = e;
+  e.animationState && s.whileHover && e.animationState.setActive("whileHover", n === "Start");
+  const i = "onHover" + n, r = s[i];
+  r && L.postRender(() => r(t, Os(t)));
+}
+class Pa extends ce {
+  mount() {
+    const { current: t } = this.node;
+    t && (this.unmount = Qr(t, (n, s) => (pn(this.node, s, "Start"), (i) => pn(this.node, i, "End"))));
+  }
+  unmount() {
+  }
 }
-class Ia extends Cs {
+class Fa extends ce {
   constructor() {
-    super(...arguments), this.type = "html", this.renderInstance = Ps;
+    super(...arguments), this.isActive = !1;
   }
-  readValueFromInstance(t, n) {
-    var s;
-    if (re.has(n))
-      return (s = this.projection) != null && s.isProjecting ? Je(n) : rr(t, n);
-    {
-      const i = Oa(t), r = (En(n) ? i.getPropertyValue(n) : i[n]) || 0;
-      return typeof r == "string" ? r.trim() : r;
+  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);
   }
-  measureInstanceViewportBox(t, { transformPagePoint: n }) {
-    return ga(t, n);
+  onBlur() {
+    !this.isActive || !this.node.animationState || (this.node.animationState.setActive("whileFocus", !1), this.isActive = !1);
   }
-  build(t, n, s) {
-    Pt(t, n, s.transformTemplate);
+  mount() {
+    this.unmount = Ie(hn(this.node.current, "focus", () => this.onFocus()), hn(this.node.current, "blur", () => this.onBlur()));
   }
-  scrapeMotionValuesFromProps(t, n, s) {
-    return Ot(t, n, s);
+  unmount() {
   }
 }
-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 Ea(e, t, n, s) {
-  Ps(e, t, void 0, s);
-  for (const i in t.attrs)
-    e.setAttribute(Fs.has(i) ? i : Ct(i), t.attrs[i]);
+function mn(e, t, n) {
+  const { props: s } = e;
+  if (e.current instanceof HTMLButtonElement && e.current.disabled)
+    return;
+  e.animationState && s.whileTap && e.animationState.setActive("whileTap", n === "Start");
+  const i = "onTap" + (n === "End" ? "" : n), r = s[i];
+  r && L.postRender(() => r(t, Os(t)));
 }
-class ka extends Cs {
-  constructor() {
-    super(...arguments), this.type = "svg", this.isSVGTag = !1, this.measureInstanceViewportBox = As;
+class Da extends ce {
+  mount() {
+    const { current: t } = this.node;
+    t && (this.unmount = io(t, (n, s) => (mn(this.node, s, "Start"), (i, { success: r }) => mn(this.node, i, r ? "End" : "Cancel")), { useGlobalTarget: this.node.props.globalTapTarget }));
   }
-  getBaseTargetFromProps(t, n) {
-    return t[n];
+  unmount() {
   }
-  readValueFromInstance(t, n) {
-    if (re.has(n)) {
-      const s = ss(n);
-      return s && s.default || 0;
-    }
-    return n = Fs.has(n) ? n : Ct(n), t.getAttribute(n);
+}
+const ct = /* @__PURE__ */ new WeakMap(), Ge = /* @__PURE__ */ new WeakMap(), Ra = (e) => {
+  const t = ct.get(e.target);
+  t && t(e);
+}, Oa = (e) => {
+  e.forEach(Ra);
+};
+function Ia({ root: e, ...t }) {
+  const n = e || document;
+  Ge.has(n) || Ge.set(n, {});
+  const s = Ge.get(n), i = JSON.stringify(t);
+  return s[i] || (s[i] = new IntersectionObserver(Oa, { root: e, ...t })), s[i];
+}
+function ka(e, t, n) {
+  const s = Ia(t);
+  return ct.set(e, n), s.observe(e), () => {
+    ct.delete(e), s.unobserve(e);
+  };
+}
+const Ea = {
+  some: 0,
+  all: 1
+};
+class La extends ce {
+  constructor() {
+    super(...arguments), this.hasEnteredView = !1, this.isInView = !1;
   }
-  scrapeMotionValuesFromProps(t, n, s) {
-    return Ts(t, n, s);
+  startObserver() {
+    this.unmount();
+    const { viewport: t = {} } = this.node.getProps(), { root: n, margin: s, amount: i = "some", once: r } = t, o = {
+      root: n ? n.current : void 0,
+      rootMargin: s,
+      threshold: typeof i == "number" ? i : Ea[i]
+    }, a = (c) => {
+      const { isIntersecting: l } = c;
+      if (this.isInView === l || (this.isInView = l, r && !l && this.hasEnteredView))
+        return;
+      l && (this.hasEnteredView = !0), this.node.animationState && this.node.animationState.setActive("whileInView", l);
+      const { onViewportEnter: u, onViewportLeave: f } = this.node.getProps(), d = l ? u : f;
+      d && d(c);
+    };
+    return ka(this.node.current, o, a);
   }
-  build(t, n, s) {
-    gs(t, n, this.isSVGTag, s.transformTemplate, s.style);
+  mount() {
+    this.startObserver();
   }
-  renderInstance(t, n, s, i) {
-    Ea(t, n, s, i);
+  update() {
+    if (typeof IntersectionObserver > "u")
+      return;
+    const { props: t, prevProps: n } = this.node;
+    ["amount", "margin", "root"].some(Na(t, n)) && this.startObserver();
   }
-  mount(t) {
-    this.isSVGTag = bs(t.tagName), super.mount(t);
+  unmount() {
+  }
+}
+function Na({ viewport: e = {} }, { viewport: t = {} } = {}) {
+  return (n) => e[n] !== t[n];
+}
+const Ba = {
+  inView: {
+    Feature: La
+  },
+  tap: {
+    Feature: Da
+  },
+  focus: {
+    Feature: Fa
+  },
+  hover: {
+    Feature: Pa
   }
+}, Ka = {
+  renderer: Qo,
+  ...Ca,
+  ...Ba
+};
+function $a(e, t) {
+  return Bo(e, t);
 }
-const Na = (e, t) => Dt(e) ? new ka(t) : new Ia(t, {
-  allowProjection: e !== mn
-}), La = {
-  renderer: Na,
-  ...ha,
-  ...Ca
-}, hn = /* @__PURE__ */ Bo("span"), Ba = {
+const gn = /* @__PURE__ */ $a("span"), Wa = {
   Root: {
     0: {
       h: "5"
@@ -3275,7 +3287,7 @@ const Na = (e, t) => Dt(e) ? new ka(t) : new Ia(t, {
       h: "8"
     }
   }
-}, Ds = {
+}, Is = {
   Root: {
     0: "1",
     1: "1_5",
@@ -3286,7 +3298,7 @@ const Na = (e, t) => Dt(e) ? new ka(t) : new Ia(t, {
     1: "1_5",
     2: "2"
   }
-}, ye = {
+}, Te = {
   Root: {
     solid: {
       default: "gray-12",
@@ -3375,47 +3387,47 @@ const Na = (e, t) => Dt(e) ? new ka(t) : new Ia(t, {
       purple: "purple"
     }
   }
-}, be = G.createContext({
+}, ve = z.createContext({
   size: "1",
   color: "default",
   variant: "soft"
-}), Rs = ({
+}), ks = ({
   as: e = "span",
   size: t = "1",
   color: n = "default",
   variant: s = "soft",
   className: i,
   ...r
-}) => /* @__PURE__ */ F(be.Provider, { value: { size: t, color: n, variant: s }, children: /* @__PURE__ */ F(
-  Ks,
+}) => /* @__PURE__ */ F(ve.Provider, { value: { size: t, color: n, variant: s }, children: /* @__PURE__ */ F(
+  _s,
   {
     as: e,
     align: "center",
     rounded: "1",
     display: "inline-flex",
-    pl: Ds.Root[t],
-    backgroundColor: ye.Root[s][n],
-    h: Ba.Root[t].h,
-    className: js("tgph-tag", i),
+    pl: Is.Root[t],
+    backgroundColor: Te.Root[s][n],
+    h: Wa.Root[t].h,
+    className: Hs("tgph-tag", i),
     ...r,
     "data-tag": !0
   }
-) }), Os = ({
+) }), Es = ({
   as: e = "span",
   maxW: t = "40",
   overflow: n = "hidden",
   style: s,
   ...i
 }) => {
-  const r = G.useContext(be);
+  const r = z.useContext(ve);
   return /* @__PURE__ */ F(
-    Ws,
+    zs,
     {
       as: e,
       size: r.size,
-      color: ye.Text[r.variant][r.color],
+      color: Te.Text[r.variant][r.color],
       weight: "medium",
-      mr: Ds.Text[r.size],
+      mr: Is.Text[r.size],
       maxW: t,
       overflow: n,
       internal_optionalAs: !0,
@@ -3427,22 +3439,22 @@ const Na = (e, t) => Dt(e) ? new ka(t) : new Ia(t, {
       ...i
     }
   );
-}, Is = ({ onClick: e, textToCopy: t, ...n }) => {
-  const s = G.useContext(be), [i, r] = G.useState(!1);
-  return G.useEffect(() => {
+}, Ls = ({ onClick: e, textToCopy: t, ...n }) => {
+  const s = z.useContext(ve), [i, r] = z.useState(!1);
+  return z.useEffect(() => {
     if (i) {
       const o = setTimeout(() => r(!1), 2e3);
       return () => clearTimeout(o);
     }
-  }, [i]), /* @__PURE__ */ F(no, { features: La, children: /* @__PURE__ */ F($s, { label: "Copy text", children: /* @__PURE__ */ ut(
-    we.Root,
+  }, [i]), /* @__PURE__ */ F(ao, { features: Ka, children: /* @__PURE__ */ F(Gs, { label: "Copy text", children: /* @__PURE__ */ lt(
+    Se.Root,
     {
       onClick: (o) => {
         var a;
         e == null || e(o), r(!0), t && navigator.clipboard.writeText(t), (a = o.currentTarget) == null || a.blur();
       },
       size: s.size,
-      color: ye.Button[s.variant][s.color],
+      color: Te.Button[s.variant][s.color],
       variant: s.variant,
       roundedTopRight: "1",
       roundedBottomRight: "1",
@@ -3454,25 +3466,25 @@ const Na = (e, t) => Dt(e) ? new ka(t) : new Ia(t, {
       ...n,
       children: [
         /* @__PURE__ */ F(
-          we.Icon,
+          Se.Icon,
           {
-            as: hn,
+            as: gn,
             initial: !1,
             animate: { y: i ? 0 : "150%", opacity: 1 },
             transition: { duration: 0.15, type: "spring", bounce: 0 },
-            icon: _s,
+            icon: Us,
             alt: "Copied text",
             "aria-hidden": !i
           }
         ),
         /* @__PURE__ */ F(
-          we.Icon,
+          Se.Icon,
           {
-            as: hn,
+            as: gn,
             initial: !1,
             animate: { y: i ? "-150%" : 0, opacity: 1 },
             transition: { duration: 0.15, type: "spring", bounce: 0 },
-            icon: Gs,
+            icon: Ys,
             position: "absolute",
             alt: "Copy text",
             "aria-hidden": i
@@ -3481,15 +3493,15 @@ const Na = (e, t) => Dt(e) ? new ka(t) : new Ia(t, {
       ]
     }
   ) }) });
-}, Es = ({ ...e }) => {
-  const t = G.useContext(be);
+}, Ns = ({ ...e }) => {
+  const t = z.useContext(ve);
   return /* @__PURE__ */ F(
-    we,
+    Se,
     {
       size: t.size,
-      color: ye.Button[t.variant][t.color],
+      color: Te.Button[t.variant][t.color],
       variant: t.variant,
-      icon: { icon: pn, alt: "close" },
+      icon: { icon: yn, alt: "close" },
       roundedTopRight: "1",
       roundedBottomRight: "1",
       roundedTopLeft: "0",
@@ -3497,25 +3509,25 @@ const Na = (e, t) => Dt(e) ? new ka(t) : new Ia(t, {
       ...e
     }
   );
-}, ks = ({
+}, Bs = ({
   icon: e,
   alt: t,
   "aria-hidden": n,
   ...s
 }) => {
-  const i = G.useContext(be), r = t ? { alt: t } : { "aria-hidden": n };
+  const i = z.useContext(ve), r = t ? { alt: t } : { "aria-hidden": n };
   return /* @__PURE__ */ F(
-    Bs,
+    js,
     {
       icon: e,
       size: i.size,
-      color: ye.Icon[i.variant][i.color],
+      color: Te.Icon[i.variant][i.color],
       mr: "1",
       ...r,
       ...s
     }
   );
-}, Ns = ({
+}, Ks = ({
   color: e = "default",
   size: t = "1",
   variant: n = "soft",
@@ -3526,21 +3538,21 @@ const Na = (e, t) => Dt(e) ? new ka(t) : new Ia(t, {
   textProps: a = { maxW: "40" },
   children: c,
   ...l
-}) => /* @__PURE__ */ ut(Rs, { color: e, size: t, variant: n, ...l, children: [
-  s && /* @__PURE__ */ F(ks, { ...s }),
-  /* @__PURE__ */ F(Os, { as: "span", ...a, children: c }),
-  i && /* @__PURE__ */ F(Es, { onClick: i, icon: { icon: pn, alt: "Remove" } }),
-  r && /* @__PURE__ */ F(Is, { onClick: r, textToCopy: o })
+}) => /* @__PURE__ */ lt(ks, { color: e, size: t, variant: n, ...l, children: [
+  s && /* @__PURE__ */ F(Bs, { ...s }),
+  /* @__PURE__ */ F(Es, { as: "span", ...a, children: c }),
+  i && /* @__PURE__ */ F(Ns, { onClick: i, icon: { icon: yn, alt: "Remove" } }),
+  r && /* @__PURE__ */ F(Ls, { onClick: r, textToCopy: o })
 ] });
-Object.assign(Ns, {
-  Root: Rs,
-  Button: Es,
-  Text: Os,
-  Icon: ks,
-  CopyButton: Is
+Object.assign(Ks, {
+  Root: ks,
+  Button: Ns,
+  Text: Es,
+  Icon: Bs,
+  CopyButton: Ls
 });
-const qa = Ns;
+const Ja = Ks;
 export {
-  qa as Tag
+  Ja as Tag
 };
 //# sourceMappingURL=index.mjs.map