@fluidattacks/design 3.1.13 → 3.2.0

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

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