mainstack-design-system 1.14.2 → 1.15.0

package/dist/mainstack-design-system633.js

@@ -0,0 +1,2198 @@
+'use client';
+import { jsxs as be, jsx as G } from "react/jsx-runtime";
+import * as Si from "react";
+import { createContext as Lt, useContext as C, useMemo as at, Fragment as Re, createElement as Ai, useCallback as Di, useRef as ut, useInsertionEffect as wi, useEffect as Li, forwardRef as Ci, Component as Ei } from "react";
+import { T as Vi } from "./index-D8zjPZm-.js";
+import { S as bi } from "./index-BtQfgaSF.js";
+import { c as Ft } from "./utils-BWBRqOem.js";
+import { tabsTriggerVariants as Ri } from "./mainstack-design-system609.js";
+import { useTabsContext as Mi } from "./mainstack-design-system608.js";
+import { r as ji, q as Tt, t as Me, u as st, b as Ct, w as ki, x as Bi, y as Ii, z as Oi, A as Fi, B as Et, C as Ui, D as Ni, E as Wi, F as Hi, G as Gi, g as je, I as zi, S as $i, H as Xi, J as z, n as ke, K as Be, L as Ut, M as Ie, m as T, N as L, O as A, P as Oe, Q as K, s as _i, R as Ki, p as St, T as Fe, h as x, U as Yi, W as qi, X as Zi, Y as Nt, Z as Ji, _ as ot, $ as N, a0 as Ue, a1 as Wt, a2 as Qi, a3 as Ne, a4 as We, a as He, a5 as Ge, a6 as tn, a7 as Ht, a8 as en, j as nn, k as sn, a9 as on, aa as ht, ab as O, ac as J, ad as Q, ae as Gt, af as rn, ag as an, ah as ln, ai as F, aj as cn, l as un, ak as zt, al as hn } from "./single-value-DEX77ciI.js";
+import { i as fn, M as ze, u as dn, L as $e } from "./MotionConfigContext-SYEZVO_k.js";
+import { P as Xe, u as mn, i as pn, b as gn } from "./use-presence-Dept-wE7.js";
+const R = {
+  x: !1,
+  y: !1
+};
+function _e() {
+  return R.x || R.y;
+}
+function yn(t) {
+  return t === "x" || t === "y" ? R[t] ? null : (R[t] = !0, () => {
+    R[t] = !1;
+  }) : R.x || R.y ? null : (R.x = R.y = !0, () => {
+    R.x = R.y = !1;
+  });
+}
+function Ke(t, e) {
+  const i = ji(t), n = new AbortController(), o = {
+    passive: !0,
+    ...e,
+    signal: n.signal
+  };
+  return [i, o, () => n.abort()];
+}
+function $t(t) {
+  return !(t.pointerType === "touch" || _e());
+}
+function vn(t, e, i = {}) {
+  const [n, o, u] = Ke(t, i), s = (r) => {
+    if (!$t(r))
+      return;
+    const { target: a } = r, l = e(a, r);
+    if (typeof l != "function" || !a)
+      return;
+    const c = (h) => {
+      $t(h) && (l(h), a.removeEventListener("pointerleave", c));
+    };
+    a.addEventListener("pointerleave", c, o);
+  };
+  return n.forEach((r) => {
+    r.addEventListener("pointerenter", s, o);
+  }), u;
+}
+const Ye = (t, e) => e ? t === e ? !0 : Ye(t, e.parentElement) : !1, Vt = (t) => t.pointerType === "mouse" ? typeof t.button != "number" || t.button <= 0 : t.isPrimary !== !1, Pn = /* @__PURE__ */ new Set([
+  "BUTTON",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA",
+  "A"
+]);
+function xn(t) {
+  return Pn.has(t.tagName) || t.tabIndex !== -1;
+}
+const et = /* @__PURE__ */ new WeakSet();
+function Xt(t) {
+  return (e) => {
+    e.key === "Enter" && t(e);
+  };
+}
+function ft(t, e) {
+  t.dispatchEvent(new PointerEvent("pointer" + e, { isPrimary: !0, bubbles: !0 }));
+}
+const Tn = (t, e) => {
+  const i = t.currentTarget;
+  if (!i)
+    return;
+  const n = Xt(() => {
+    if (et.has(i))
+      return;
+    ft(i, "down");
+    const o = Xt(() => {
+      ft(i, "up");
+    }), u = () => ft(i, "cancel");
+    i.addEventListener("keyup", o, e), i.addEventListener("blur", u, e);
+  });
+  i.addEventListener("keydown", n, e), i.addEventListener("blur", () => i.removeEventListener("keydown", n), e);
+};
+function _t(t) {
+  return Vt(t) && !_e();
+}
+function Sn(t, e, i = {}) {
+  const [n, o, u] = Ke(t, i), s = (r) => {
+    const a = r.currentTarget;
+    if (!_t(r))
+      return;
+    et.add(a);
+    const l = e(a, r), c = (d, m) => {
+      window.removeEventListener("pointerup", h), window.removeEventListener("pointercancel", f), et.has(a) && et.delete(a), _t(d) && typeof l == "function" && l(d, { success: m });
+    }, h = (d) => {
+      c(d, a === window || a === document || i.useGlobalTarget || Ye(a, d.target));
+    }, f = (d) => {
+      c(d, !1);
+    };
+    window.addEventListener("pointerup", h, o), window.addEventListener("pointercancel", f, o);
+  };
+  return n.forEach((r) => {
+    (i.useGlobalTarget ? window : r).addEventListener("pointerdown", s, o), fn(r) && (r.addEventListener("focus", (l) => Tn(l, o)), !xn(r) && !r.hasAttribute("tabindex") && (r.tabIndex = 0));
+  }), u;
+}
+const qe = Lt({ strict: !1 });
+function An(t) {
+  for (const e in t)
+    Tt[e] = {
+      ...Tt[e],
+      ...t[e]
+    };
+}
+const Dn = /* @__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 rt(t) {
+  return t.startsWith("while") || t.startsWith("drag") && t !== "draggable" || t.startsWith("layout") || t.startsWith("onTap") || t.startsWith("onPan") || t.startsWith("onLayout") || Dn.has(t);
+}
+let Ze = (t) => !rt(t);
+function wn(t) {
+  typeof t == "function" && (Ze = (e) => e.startsWith("on") ? !rt(e) : t(e));
+}
+try {
+  wn(require("@emotion/is-prop-valid").default);
+} catch {
+}
+function Ln(t, e, i) {
+  const n = {};
+  for (const o in t)
+    o === "values" && typeof t.values == "object" || (Ze(o) || i === !0 && rt(o) || !e && !rt(o) || // If trying to use native HTML drag events, forward drag listeners
+    t.draggable && o.startsWith("onDrag")) && (n[o] = t[o]);
+  return n;
+}
+const lt = /* @__PURE__ */ Lt({});
+function Cn(t, e) {
+  if (Me(t)) {
+    const { initial: i, animate: n } = t;
+    return {
+      initial: i === !1 || st(i) ? i : void 0,
+      animate: st(n) ? n : void 0
+    };
+  }
+  return t.inherit !== !1 ? e : {};
+}
+function En(t) {
+  const { initial: e, animate: i } = Cn(t, C(lt));
+  return at(() => ({ initial: e, animate: i }), [Kt(e), Kt(i)]);
+}
+function Kt(t) {
+  return Array.isArray(t) ? t.join(" ") : t;
+}
+const bt = () => ({
+  style: {},
+  transform: {},
+  transformOrigin: {},
+  vars: {}
+});
+function Je(t, e, i) {
+  for (const n in e)
+    !Ct(e[n]) && !ki(n, i) && (t[n] = e[n]);
+}
+function Vn({ transformTemplate: t }, e) {
+  return at(() => {
+    const i = bt();
+    return Bi(i, e, t), Object.assign({}, i.vars, i.style);
+  }, [e]);
+}
+function bn(t, e) {
+  const i = t.style || {}, n = {};
+  return Je(n, i, t), Object.assign(n, Vn(t, e)), n;
+}
+function Rn(t, e) {
+  const i = {}, n = bn(t, e);
+  return t.drag && t.dragListener !== !1 && (i.draggable = !1, n.userSelect = n.WebkitUserSelect = n.WebkitTouchCallout = "none", n.touchAction = t.drag === !0 ? "none" : `pan-${t.drag === "x" ? "y" : "x"}`), t.tabIndex === void 0 && (t.onTap || t.onTapStart || t.whileTap) && (i.tabIndex = 0), i.style = n, i;
+}
+const Qe = () => ({
+  ...bt(),
+  attrs: {}
+});
+function Mn(t, e, i, n) {
+  const o = at(() => {
+    const u = Qe();
+    return Ii(u, e, Oi(n), t.transformTemplate, t.style), {
+      ...u.attrs,
+      style: { ...u.style }
+    };
+  }, [e]);
+  if (t.style) {
+    const u = {};
+    Je(u, t.style, t), o.style = { ...u, ...o.style };
+  }
+  return o;
+}
+const jn = [
+  "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 Rt(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
+       */
+      !!(jn.indexOf(t) > -1 || /**
+       * If it contains a capital letter, it's an SVG component
+       */
+      /[A-Z]/u.test(t))
+    )
+  );
+}
+function kn(t, e, i, { latestValues: n }, o, u = !1) {
+  const r = (Rt(t) ? Mn : Rn)(e, n, o, t), a = Ln(e, typeof t == "string", u), l = t !== Re ? { ...a, ...r, ref: i } : {}, { children: c } = e, h = at(() => Ct(c) ? c.get() : c, [c]);
+  return Ai(t, {
+    ...l,
+    children: h
+  });
+}
+function it(t) {
+  return Ct(t) ? t.get() : t;
+}
+function Bn({ scrapeMotionValuesFromProps: t, createRenderState: e }, i, n, o) {
+  return {
+    latestValues: In(i, n, o, t),
+    renderState: e()
+  };
+}
+function In(t, e, i, n) {
+  const o = {}, u = n(t, {});
+  for (const f in u)
+    o[f] = it(u[f]);
+  let { initial: s, animate: r } = t;
+  const a = Me(t), l = Fi(t);
+  e && l && !a && t.inherit !== !1 && (s === void 0 && (s = e.initial), r === void 0 && (r = e.animate));
+  let c = i ? i.initial === !1 : !1;
+  c = c || s === !1;
+  const h = c ? r : s;
+  if (h && typeof h != "boolean" && !Et(h)) {
+    const f = Array.isArray(h) ? h : [h];
+    for (let d = 0; d < f.length; d++) {
+      const m = Ui(t, f[d]);
+      if (m) {
+        const { transitionEnd: P, transition: v, ...p } = m;
+        for (const g in p) {
+          let y = p[g];
+          if (Array.isArray(y)) {
+            const w = c ? y.length - 1 : 0;
+            y = y[w];
+          }
+          y !== null && (o[g] = y);
+        }
+        for (const g in P)
+          o[g] = P[g];
+      }
+    }
+  }
+  return o;
+}
+const ti = (t) => (e, i) => {
+  const n = C(lt), o = C(Xe), u = () => Bn(t, e, n, o);
+  return i ? u() : mn(u);
+}, On = /* @__PURE__ */ ti({
+  scrapeMotionValuesFromProps: Ni,
+  createRenderState: bt
+}), Fn = /* @__PURE__ */ ti({
+  scrapeMotionValuesFromProps: Wi,
+  createRenderState: Qe
+}), Un = Symbol.for("motionComponentSymbol");
+function U(t) {
+  return t && typeof t == "object" && Object.prototype.hasOwnProperty.call(t, "current");
+}
+function Nn(t, e, i) {
+  return Di(
+    (n) => {
+      n && t.onMount && t.onMount(n), e && (n ? e.mount(n) : e.unmount()), i && (typeof i == "function" ? i(n) : U(i) && (i.current = n));
+    },
+    /**
+     * Include externalRef in dependencies to ensure the callback updates
+     * when the ref changes, allowing proper ref forwarding.
+     */
+    [e]
+  );
+}
+const ei = Lt({});
+function Wn(t, e, i, n, o) {
+  const { visualElement: u } = C(lt), s = C(qe), r = C(Xe), a = C(ze).reducedMotion, l = ut(null);
+  n = n || s.renderer, !l.current && n && (l.current = n(t, {
+    visualState: e,
+    parent: u,
+    props: i,
+    presenceContext: r,
+    blockInitialAnimation: r ? r.initial === !1 : !1,
+    reducedMotionConfig: a
+  }));
+  const c = l.current, h = C(ei);
+  c && !c.projection && o && (c.type === "html" || c.type === "svg") && Hn(l.current, i, o, h);
+  const f = ut(!1);
+  wi(() => {
+    c && f.current && c.update(i, r);
+  });
+  const d = i[Hi], m = ut(!!d && !window.MotionHandoffIsComplete?.(d) && window.MotionHasOptimisedAnimation?.(d));
+  return dn(() => {
+    c && (f.current = !0, window.MotionIsMounted = !0, c.updateFeatures(), c.scheduleRenderMicrotask(), m.current && c.animationState && c.animationState.animateChanges());
+  }), Li(() => {
+    c && (!m.current && c.animationState && c.animationState.animateChanges(), m.current && (queueMicrotask(() => {
+      window.MotionHandoffMarkAsComplete?.(d);
+    }), m.current = !1), c.enteringChildren = void 0);
+  }), c;
+}
+function Hn(t, e, i, n) {
+  const { layoutId: o, layout: u, drag: s, dragConstraints: r, layoutScroll: a, layoutRoot: l, layoutCrossfade: c } = e;
+  t.projection = new i(t.latestValues, e["data-framer-portal-id"] ? void 0 : ii(t.parent)), t.projection.setOptions({
+    layoutId: o,
+    layout: u,
+    alwaysMeasureLayout: !!s || r && U(r),
+    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 u == "string" ? u : "both",
+    initialPromotionConfig: n,
+    crossfade: c,
+    layoutScroll: a,
+    layoutRoot: l
+  });
+}
+function ii(t) {
+  if (t)
+    return t.options.allowProjection !== !1 ? t.projection : ii(t.parent);
+}
+function dt(t, { forwardMotionProps: e = !1 } = {}, i, n) {
+  i && An(i);
+  const o = Rt(t) ? Fn : On;
+  function u(r, a) {
+    let l;
+    const c = {
+      ...C(ze),
+      ...r,
+      layoutId: Gn(r)
+    }, { isStatic: h } = c, f = En(r), d = o(r, h);
+    if (!h && pn) {
+      zn(c, i);
+      const m = $n(c);
+      l = m.MeasureLayout, f.visualElement = Wn(t, d, c, n, m.ProjectionNode);
+    }
+    return be(lt.Provider, { value: f, children: [l && f.visualElement ? G(l, { visualElement: f.visualElement, ...c }) : null, kn(t, r, Nn(d, f.visualElement, a), d, h, e)] });
+  }
+  u.displayName = `motion.${typeof t == "string" ? t : `create(${t.displayName ?? t.name ?? ""})`}`;
+  const s = Ci(u);
+  return s[Un] = t, s;
+}
+function Gn({ layoutId: t }) {
+  const e = C($e).id;
+  return e && t !== void 0 ? e + "-" + t : t;
+}
+function zn(t, e) {
+  const i = C(qe).strict;
+  if (process.env.NODE_ENV !== "production" && e && i) {
+    const n = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+    t.ignoreStrict ? Gi(!1, n, "lazy-strict-mode") : je(!1, n, "lazy-strict-mode");
+  }
+}
+function $n(t) {
+  const { drag: e, layout: i } = Tt;
+  if (!e && !i)
+    return {};
+  const n = { ...e, ...i };
+  return {
+    MeasureLayout: e?.isEnabled(t) || i?.isEnabled(t) ? n.MeasureLayout : void 0,
+    ProjectionNode: n.ProjectionNode
+  };
+}
+function Xn(t, e) {
+  if (typeof Proxy > "u")
+    return dt;
+  const i = /* @__PURE__ */ new Map(), n = (u, s) => dt(u, s, t, e), o = (u, s) => (process.env.NODE_ENV !== "production" && zi(!1, "motion() is deprecated. Use motion.create() instead."), n(u, s));
+  return new Proxy(o, {
+    /**
+     * 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: (u, s) => s === "create" ? n : (i.has(s) || i.set(s, dt(s, void 0, t, e)), i.get(s))
+  });
+}
+const _n = (t, e) => Rt(t) ? new $i(e) : new Xi(e, {
+  allowProjection: t !== Re
+});
+function ni(t, e, i, n = 0, o = 1) {
+  const u = Array.from(t).sort((l, c) => l.sortNodePosition(c)).indexOf(e), s = t.size, r = (s - 1) * n;
+  return typeof i == "function" ? i(u, s) : o === 1 ? u * n : r - u * n;
+}
+function At(t, e, i = {}) {
+  const n = z(t, e, i.type === "exit" ? t.presenceContext?.custom : void 0);
+  let { transition: o = t.getDefaultTransition() || {} } = n || {};
+  i.transitionOverride && (o = i.transitionOverride);
+  const u = n ? () => Promise.all(ke(t, n, i)) : () => Promise.resolve(), s = t.variantChildren && t.variantChildren.size ? (a = 0) => {
+    const { delayChildren: l = 0, staggerChildren: c, staggerDirection: h } = o;
+    return Kn(t, e, a, l, c, h, i);
+  } : () => Promise.resolve(), { when: r } = o;
+  if (r) {
+    const [a, l] = r === "beforeChildren" ? [u, s] : [s, u];
+    return a().then(() => l());
+  } else
+    return Promise.all([u(), s(i.delay)]);
+}
+function Kn(t, e, i = 0, n = 0, o = 0, u = 1, s) {
+  const r = [];
+  for (const a of t.variantChildren)
+    a.notify("AnimationStart", e), r.push(At(a, e, {
+      ...s,
+      delay: i + (typeof n == "function" ? 0 : n) + ni(t.variantChildren, a, n, o, u)
+    }).then(() => a.notify("AnimationComplete", e)));
+  return Promise.all(r);
+}
+function Yn(t, e, i = {}) {
+  t.notify("AnimationStart", e);
+  let n;
+  if (Array.isArray(e)) {
+    const o = e.map((u) => At(t, u, i));
+    n = Promise.all(o);
+  } else if (typeof e == "string")
+    n = At(t, e, i);
+  else {
+    const o = typeof e == "function" ? z(t, e, i.custom) : e;
+    n = Promise.all(ke(t, o, i));
+  }
+  return n.then(() => {
+    t.notify("AnimationComplete", e);
+  });
+}
+function si(t, e) {
+  if (!Array.isArray(e))
+    return !1;
+  const i = e.length;
+  if (i !== t.length)
+    return !1;
+  for (let n = 0; n < i; n++)
+    if (e[n] !== t[n])
+      return !1;
+  return !0;
+}
+const qn = Be.length;
+function oi(t) {
+  if (!t)
+    return;
+  if (!t.isControllingVariants) {
+    const i = t.parent ? oi(t.parent) || {} : {};
+    return t.props.initial !== void 0 && (i.initial = t.props.initial), i;
+  }
+  const e = {};
+  for (let i = 0; i < qn; i++) {
+    const n = Be[i], o = t.props[n];
+    (st(o) || o === !1) && (e[n] = o);
+  }
+  return e;
+}
+const Zn = [...Ie].reverse(), Jn = Ie.length;
+function Qn(t) {
+  return (e) => Promise.all(e.map(({ animation: i, options: n }) => Yn(t, i, n)));
+}
+function ts(t) {
+  let e = Qn(t), i = Yt(), n = !0;
+  const o = (a) => (l, c) => {
+    const h = z(t, c, a === "exit" ? t.presenceContext?.custom : void 0);
+    if (h) {
+      const { transition: f, transitionEnd: d, ...m } = h;
+      l = { ...l, ...m, ...d };
+    }
+    return l;
+  };
+  function u(a) {
+    e = a(t);
+  }
+  function s(a) {
+    const { props: l } = t, c = oi(t.parent) || {}, h = [], f = /* @__PURE__ */ new Set();
+    let d = {}, m = 1 / 0;
+    for (let v = 0; v < Jn; v++) {
+      const p = Zn[v], g = i[p], y = l[p] !== void 0 ? l[p] : c[p], w = st(y), M = p === a ? g.isActive : null;
+      M === !1 && (m = v);
+      let Z = y === c[p] && y !== l[p] && w;
+      if (Z && n && t.manuallyAnimateOnMount && (Z = !1), g.protectedKeys = { ...d }, // If it isn't active and hasn't *just* been set as inactive
+      !g.isActive && M === null || // If we didn't and don't have any defined prop for this animation type
+      !y && !g.prevProp || // Or if the prop doesn't define an animation
+      Et(y) || typeof y == "boolean")
+        continue;
+      const Mt = es(g.prevProp, y);
+      let ct = Mt || // If we're making this variant active, we want to always make it active
+      p === a && g.isActive && !Z && w || // If we removed a higher-priority variant (i is in reverse order)
+      v > m && w, jt = !1;
+      const kt = Array.isArray(y) ? y : [y];
+      let W = kt.reduce(o(p), {});
+      M === !1 && (W = {});
+      const { prevResolvedValues: Bt = {} } = g, xi = {
+        ...Bt,
+        ...W
+      }, It = (S) => {
+        ct = !0, f.has(S) && (jt = !0, f.delete(S)), g.needsAnimating[S] = !0;
+        const E = t.getValue(S);
+        E && (E.liveStyle = !1);
+      };
+      for (const S in xi) {
+        const E = W[S], k = Bt[S];
+        if (d.hasOwnProperty(S))
+          continue;
+        let I = !1;
+        Ut(E) && Ut(k) ? I = !si(E, k) : I = E !== k, I ? E != null ? It(S) : f.add(S) : E !== void 0 && f.has(S) ? It(S) : g.protectedKeys[S] = !0;
+      }
+      g.prevProp = y, g.prevResolvedValues = W, g.isActive && (d = { ...d, ...W }), n && t.blockInitialAnimation && (ct = !1);
+      const Ot = Z && Mt;
+      ct && (!Ot || jt) && h.push(...kt.map((S) => {
+        const E = { type: p };
+        if (typeof S == "string" && n && !Ot && t.manuallyAnimateOnMount && t.parent) {
+          const { parent: k } = t, I = z(k, S);
+          if (k.enteringChildren && I) {
+            const { delayChildren: Ti } = I.transition || {};
+            E.delay = ni(k.enteringChildren, t, Ti);
+          }
+        }
+        return {
+          animation: S,
+          options: E
+        };
+      }));
+    }
+    if (f.size) {
+      const v = {};
+      if (typeof l.initial != "boolean") {
+        const p = z(t, Array.isArray(l.initial) ? l.initial[0] : l.initial);
+        p && p.transition && (v.transition = p.transition);
+      }
+      f.forEach((p) => {
+        const g = t.getBaseTarget(p), y = t.getValue(p);
+        y && (y.liveStyle = !0), v[p] = g ?? null;
+      }), h.push({ animation: v });
+    }
+    let P = !!h.length;
+    return n && (l.initial === !1 || l.initial === l.animate) && !t.manuallyAnimateOnMount && (P = !1), n = !1, P ? e(h) : Promise.resolve();
+  }
+  function r(a, l) {
+    if (i[a].isActive === l)
+      return Promise.resolve();
+    t.variantChildren?.forEach((h) => h.animationState?.setActive(a, l)), i[a].isActive = l;
+    const c = s(a);
+    for (const h in i)
+      i[h].protectedKeys = {};
+    return c;
+  }
+  return {
+    animateChanges: s,
+    setActive: r,
+    setAnimateFunction: u,
+    getState: () => i,
+    reset: () => {
+      i = Yt();
+    }
+  };
+}
+function es(t, e) {
+  return typeof e == "string" ? e !== t : Array.isArray(e) ? !si(e, t) : !1;
+}
+function B(t = !1) {
+  return {
+    isActive: t,
+    protectedKeys: {},
+    needsAnimating: {},
+    prevResolvedValues: {}
+  };
+}
+function Yt() {
+  return {
+    animate: B(!0),
+    whileInView: B(),
+    whileHover: B(),
+    whileTap: B(),
+    whileDrag: B(),
+    whileFocus: B(),
+    exit: B()
+  };
+}
+class j {
+  constructor(e) {
+    this.isMounted = !1, this.node = e;
+  }
+  update() {
+  }
+}
+class is extends j {
+  /**
+   * 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 = ts(e));
+  }
+  updateAnimationControlsSubscription() {
+    const { animate: e } = this.node.getProps();
+    Et(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: i } = this.node.prevProps || {};
+    e !== i && this.updateAnimationControlsSubscription();
+  }
+  unmount() {
+    this.node.animationState.reset(), this.unmountControls?.();
+  }
+}
+let ns = 0;
+class ss extends j {
+  constructor() {
+    super(...arguments), this.id = ns++;
+  }
+  update() {
+    if (!this.node.presenceContext)
+      return;
+    const { isPresent: e, onExitComplete: i } = this.node.presenceContext, { isPresent: n } = this.node.prevPresenceContext || {};
+    if (!this.node.animationState || e === n)
+      return;
+    const o = this.node.animationState.setActive("exit", !e);
+    i && !e && o.then(() => {
+      i(this.id);
+    });
+  }
+  mount() {
+    const { register: e, onExitComplete: i } = this.node.presenceContext || {};
+    i && i(this.id), e && (this.unmount = e(this.id));
+  }
+  unmount() {
+  }
+}
+const os = {
+  animation: {
+    Feature: is
+  },
+  exit: {
+    Feature: ss
+  }
+};
+function Y(t, e, i, n = { passive: !0 }) {
+  return t.addEventListener(e, i, n), () => t.removeEventListener(e, i);
+}
+function q(t) {
+  return {
+    point: {
+      x: t.pageX,
+      y: t.pageY
+    }
+  };
+}
+const rs = (t) => (e) => Vt(e) && t(e, q(e));
+function $(t, e, i, n) {
+  return Y(t, e, rs(i), n);
+}
+const ri = 1e-4, as = 1 - ri, ls = 1 + ri, ai = 0.01, cs = 0 - ai, us = 0 + ai;
+function D(t) {
+  return t.max - t.min;
+}
+function hs(t, e, i) {
+  return Math.abs(t - e) <= i;
+}
+function qt(t, e, i, n = 0.5) {
+  t.origin = n, t.originPoint = T(e.min, e.max, t.origin), t.scale = D(i) / D(e), t.translate = T(i.min, i.max, t.origin) - t.originPoint, (t.scale >= as && t.scale <= ls || isNaN(t.scale)) && (t.scale = 1), (t.translate >= cs && t.translate <= us || isNaN(t.translate)) && (t.translate = 0);
+}
+function X(t, e, i, n) {
+  qt(t.x, e.x, i.x, n ? n.originX : void 0), qt(t.y, e.y, i.y, n ? n.originY : void 0);
+}
+function Zt(t, e, i) {
+  t.min = i.min + e.min, t.max = t.min + D(e);
+}
+function fs(t, e, i) {
+  Zt(t.x, e.x, i.x), Zt(t.y, e.y, i.y);
+}
+function Jt(t, e, i) {
+  t.min = e.min - i.min, t.max = t.min + D(e);
+}
+function _(t, e, i) {
+  Jt(t.x, e.x, i.x), Jt(t.y, e.y, i.y);
+}
+function b(t) {
+  return [t("x"), t("y")];
+}
+const li = ({ current: t }) => t ? t.ownerDocument.defaultView : null, Qt = (t, e) => Math.abs(t - e);
+function ds(t, e) {
+  const i = Qt(t.x, e.x), n = Qt(t.y, e.y);
+  return Math.sqrt(i ** 2 + n ** 2);
+}
+class ci {
+  constructor(e, i, { transformPagePoint: n, contextWindow: o = window, dragSnapToOrigin: u = !1, distanceThreshold: s = 3 } = {}) {
+    if (this.startEvent = null, this.lastMoveEvent = null, this.lastMoveEventInfo = null, this.handlers = {}, this.contextWindow = window, this.updatePoint = () => {
+      if (!(this.lastMoveEvent && this.lastMoveEventInfo))
+        return;
+      const f = pt(this.lastMoveEventInfo, this.history), d = this.startEvent !== null, m = ds(f.offset, { x: 0, y: 0 }) >= this.distanceThreshold;
+      if (!d && !m)
+        return;
+      const { point: P } = f, { timestamp: v } = L;
+      this.history.push({ ...P, timestamp: v });
+      const { onStart: p, onMove: g } = this.handlers;
+      d || (p && p(this.lastMoveEvent, f), this.startEvent = this.lastMoveEvent), g && g(this.lastMoveEvent, f);
+    }, this.handlePointerMove = (f, d) => {
+      this.lastMoveEvent = f, this.lastMoveEventInfo = mt(d, this.transformPagePoint), A.update(this.updatePoint, !0);
+    }, this.handlePointerUp = (f, d) => {
+      this.end();
+      const { onEnd: m, onSessionEnd: P, resumeAnimation: v } = this.handlers;
+      if (this.dragSnapToOrigin && v && v(), !(this.lastMoveEvent && this.lastMoveEventInfo))
+        return;
+      const p = pt(f.type === "pointercancel" ? this.lastMoveEventInfo : mt(d, this.transformPagePoint), this.history);
+      this.startEvent && m && m(f, p), P && P(f, p);
+    }, !Vt(e))
+      return;
+    this.dragSnapToOrigin = u, this.handlers = i, this.transformPagePoint = n, this.distanceThreshold = s, this.contextWindow = o || window;
+    const r = q(e), a = mt(r, this.transformPagePoint), { point: l } = a, { timestamp: c } = L;
+    this.history = [{ ...l, timestamp: c }];
+    const { onSessionStart: h } = i;
+    h && h(e, pt(a, this.history)), this.removeListeners = Oe($(this.contextWindow, "pointermove", this.handlePointerMove), $(this.contextWindow, "pointerup", this.handlePointerUp), $(this.contextWindow, "pointercancel", this.handlePointerUp));
+  }
+  updateHandlers(e) {
+    this.handlers = e;
+  }
+  end() {
+    this.removeListeners && this.removeListeners(), K(this.updatePoint);
+  }
+}
+function mt(t, e) {
+  return e ? { point: e(t.point) } : t;
+}
+function te(t, e) {
+  return { x: t.x - e.x, y: t.y - e.y };
+}
+function pt({ point: t }, e) {
+  return {
+    point: t,
+    delta: te(t, ui(e)),
+    offset: te(t, ms(e)),
+    velocity: ps(e, 0.1)
+  };
+}
+function ms(t) {
+  return t[0];
+}
+function ui(t) {
+  return t[t.length - 1];
+}
+function ps(t, e) {
+  if (t.length < 2)
+    return { x: 0, y: 0 };
+  let i = t.length - 1, n = null;
+  const o = ui(t);
+  for (; i >= 0 && (n = t[i], !(o.timestamp - n.timestamp > _i(e))); )
+    i--;
+  if (!n)
+    return { x: 0, y: 0 };
+  const u = Ki(o.timestamp - n.timestamp);
+  if (u === 0)
+    return { x: 0, y: 0 };
+  const s = {
+    x: (o.x - n.x) / u,
+    y: (o.y - n.y) / u
+  };
+  return s.x === 1 / 0 && (s.x = 0), s.y === 1 / 0 && (s.y = 0), s;
+}
+function gs(t, { min: e, max: i }, n) {
+  return e !== void 0 && t < e ? t = n ? T(e, t, n.min) : Math.max(t, e) : i !== void 0 && t > i && (t = n ? T(i, t, n.max) : Math.min(t, i)), t;
+}
+function ee(t, e, i) {
+  return {
+    min: e !== void 0 ? t.min + e : void 0,
+    max: i !== void 0 ? t.max + i - (t.max - t.min) : void 0
+  };
+}
+function ys(t, { top: e, left: i, bottom: n, right: o }) {
+  return {
+    x: ee(t.x, i, o),
+    y: ee(t.y, e, n)
+  };
+}
+function ie(t, e) {
+  let i = e.min - t.min, n = e.max - t.max;
+  return e.max - e.min < t.max - t.min && ([i, n] = [n, i]), { min: i, max: n };
+}
+function vs(t, e) {
+  return {
+    x: ie(t.x, e.x),
+    y: ie(t.y, e.y)
+  };
+}
+function Ps(t, e) {
+  let i = 0.5;
+  const n = D(t), o = D(e);
+  return o > n ? i = St(e.min, e.max - n, t.min) : n > o && (i = St(t.min, t.max - o, e.min)), Fe(0, 1, i);
+}
+function xs(t, e) {
+  const i = {};
+  return e.min !== void 0 && (i.min = e.min - t.min), e.max !== void 0 && (i.max = e.max - t.min), i;
+}
+const Dt = 0.35;
+function Ts(t = Dt) {
+  return t === !1 ? t = 0 : t === !0 && (t = Dt), {
+    x: ne(t, "left", "right"),
+    y: ne(t, "top", "bottom")
+  };
+}
+function ne(t, e, i) {
+  return {
+    min: se(t, e),
+    max: se(t, i)
+  };
+}
+function se(t, e) {
+  return typeof t == "number" ? t : t[e] || 0;
+}
+const Ss = /* @__PURE__ */ new WeakMap();
+class As {
+  constructor(e) {
+    this.openDragLock = null, this.isDragging = !1, this.currentDirection = null, this.originPoint = { x: 0, y: 0 }, this.constraints = !1, this.hasMutatedConstraints = !1, this.elastic = x(), this.latestPointerEvent = null, this.latestPanInfo = null, this.visualElement = e;
+  }
+  start(e, { snapToCursor: i = !1, distanceThreshold: n } = {}) {
+    const { presenceContext: o } = this.visualElement;
+    if (o && o.isPresent === !1)
+      return;
+    const u = (h) => {
+      const { dragSnapToOrigin: f } = this.getProps();
+      f ? this.pauseAnimation() : this.stopAnimation(), i && this.snapToCursor(q(h).point);
+    }, s = (h, f) => {
+      const { drag: d, dragPropagation: m, onDragStart: P } = this.getProps();
+      if (d && !m && (this.openDragLock && this.openDragLock(), this.openDragLock = yn(d), !this.openDragLock))
+        return;
+      this.latestPointerEvent = h, this.latestPanInfo = f, this.isDragging = !0, this.currentDirection = null, this.resolveConstraints(), this.visualElement.projection && (this.visualElement.projection.isAnimationBlocked = !0, this.visualElement.projection.target = void 0), b((p) => {
+        let g = this.getAxisMotionValue(p).get() || 0;
+        if (ot.test(g)) {
+          const { projection: y } = this.visualElement;
+          if (y && y.layout) {
+            const w = y.layout.layoutBox[p];
+            w && (g = D(w) * (parseFloat(g) / 100));
+          }
+        }
+        this.originPoint[p] = g;
+      }), P && A.postRender(() => P(h, f)), Nt(this.visualElement, "transform");
+      const { animationState: v } = this.visualElement;
+      v && v.setActive("whileDrag", !0);
+    }, r = (h, f) => {
+      this.latestPointerEvent = h, this.latestPanInfo = f;
+      const { dragPropagation: d, dragDirectionLock: m, onDirectionLock: P, onDrag: v } = this.getProps();
+      if (!d && !this.openDragLock)
+        return;
+      const { offset: p } = f;
+      if (m && this.currentDirection === null) {
+        this.currentDirection = Ds(p), this.currentDirection !== null && P && P(this.currentDirection);
+        return;
+      }
+      this.updateAxis("x", f.point, p), this.updateAxis("y", f.point, p), this.visualElement.render(), v && v(h, f);
+    }, a = (h, f) => {
+      this.latestPointerEvent = h, this.latestPanInfo = f, this.stop(h, f), this.latestPointerEvent = null, this.latestPanInfo = null;
+    }, l = () => b((h) => this.getAnimationState(h) === "paused" && this.getAxisMotionValue(h).animation?.play()), { dragSnapToOrigin: c } = this.getProps();
+    this.panSession = new ci(e, {
+      onSessionStart: u,
+      onStart: s,
+      onMove: r,
+      onSessionEnd: a,
+      resumeAnimation: l
+    }, {
+      transformPagePoint: this.visualElement.getTransformPagePoint(),
+      dragSnapToOrigin: c,
+      distanceThreshold: n,
+      contextWindow: li(this.visualElement)
+    });
+  }
+  /**
+   * @internal
+   */
+  stop(e, i) {
+    const n = e || this.latestPointerEvent, o = i || this.latestPanInfo, u = this.isDragging;
+    if (this.cancel(), !u || !o || !n)
+      return;
+    const { velocity: s } = o;
+    this.startAnimation(s);
+    const { onDragEnd: r } = this.getProps();
+    r && A.postRender(() => r(n, o));
+  }
+  /**
+   * @internal
+   */
+  cancel() {
+    this.isDragging = !1;
+    const { projection: e, animationState: i } = this.visualElement;
+    e && (e.isAnimationBlocked = !1), this.panSession && this.panSession.end(), this.panSession = void 0;
+    const { dragPropagation: n } = this.getProps();
+    !n && this.openDragLock && (this.openDragLock(), this.openDragLock = null), i && i.setActive("whileDrag", !1);
+  }
+  updateAxis(e, i, n) {
+    const { drag: o } = this.getProps();
+    if (!n || !tt(e, o, this.currentDirection))
+      return;
+    const u = this.getAxisMotionValue(e);
+    let s = this.originPoint[e] + n[e];
+    this.constraints && this.constraints[e] && (s = gs(s, this.constraints[e], this.elastic[e])), u.set(s);
+  }
+  resolveConstraints() {
+    const { dragConstraints: e, dragElastic: i } = this.getProps(), n = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(!1) : this.visualElement.projection?.layout, o = this.constraints;
+    e && U(e) ? this.constraints || (this.constraints = this.resolveRefConstraints()) : e && n ? this.constraints = ys(n.layoutBox, e) : this.constraints = !1, this.elastic = Ts(i), o !== this.constraints && n && this.constraints && !this.hasMutatedConstraints && b((u) => {
+      this.constraints !== !1 && this.getAxisMotionValue(u) && (this.constraints[u] = xs(n.layoutBox[u], this.constraints[u]));
+    });
+  }
+  resolveRefConstraints() {
+    const { dragConstraints: e, onMeasureDragConstraints: i } = this.getProps();
+    if (!e || !U(e))
+      return !1;
+    const n = e.current;
+    je(n !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.", "drag-constraints-ref");
+    const { projection: o } = this.visualElement;
+    if (!o || !o.layout)
+      return !1;
+    const u = Yi(n, o.root, this.visualElement.getTransformPagePoint());
+    let s = vs(o.layout.layoutBox, u);
+    if (i) {
+      const r = i(qi(s));
+      this.hasMutatedConstraints = !!r, r && (s = Zi(r));
+    }
+    return s;
+  }
+  startAnimation(e) {
+    const { drag: i, dragMomentum: n, dragElastic: o, dragTransition: u, dragSnapToOrigin: s, onDragTransitionEnd: r } = this.getProps(), a = this.constraints || {}, l = b((c) => {
+      if (!tt(c, i, this.currentDirection))
+        return;
+      let h = a && a[c] || {};
+      s && (h = { min: 0, max: 0 });
+      const f = o ? 200 : 1e6, d = o ? 40 : 1e7, m = {
+        type: "inertia",
+        velocity: n ? e[c] : 0,
+        bounceStiffness: f,
+        bounceDamping: d,
+        timeConstant: 750,
+        restDelta: 1,
+        restSpeed: 10,
+        ...u,
+        ...h
+      };
+      return this.startAxisValueAnimation(c, m);
+    });
+    return Promise.all(l).then(r);
+  }
+  startAxisValueAnimation(e, i) {
+    const n = this.getAxisMotionValue(e);
+    return Nt(this.visualElement, e), n.start(Ji(e, n, 0, i, this.visualElement, !1));
+  }
+  stopAnimation() {
+    b((e) => this.getAxisMotionValue(e).stop());
+  }
+  pauseAnimation() {
+    b((e) => this.getAxisMotionValue(e).animation?.pause());
+  }
+  getAnimationState(e) {
+    return this.getAxisMotionValue(e).animation?.state;
+  }
+  /**
+   * Drag works differently depending on which props are provided.
+   *
+   * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
+   * - Otherwise, we apply the delta to the x/y motion values.
+   */
+  getAxisMotionValue(e) {
+    const i = `_drag${e.toUpperCase()}`, n = this.visualElement.getProps(), o = n[i];
+    return o || this.visualElement.getValue(e, (n.initial ? n.initial[e] : void 0) || 0);
+  }
+  snapToCursor(e) {
+    b((i) => {
+      const { drag: n } = this.getProps();
+      if (!tt(i, n, this.currentDirection))
+        return;
+      const { projection: o } = this.visualElement, u = this.getAxisMotionValue(i);
+      if (o && o.layout) {
+        const { min: s, max: r } = o.layout.layoutBox[i];
+        u.set(e[i] - T(s, r, 0.5));
+      }
+    });
+  }
+  /**
+   * When the viewport resizes we want to check if the measured constraints
+   * have changed and, if so, reposition the element within those new constraints
+   * relative to where it was before the resize.
+   */
+  scalePositionWithinConstraints() {
+    if (!this.visualElement.current)
+      return;
+    const { drag: e, dragConstraints: i } = this.getProps(), { projection: n } = this.visualElement;
+    if (!U(i) || !n || !this.constraints)
+      return;
+    this.stopAnimation();
+    const o = { x: 0, y: 0 };
+    b((s) => {
+      const r = this.getAxisMotionValue(s);
+      if (r && this.constraints !== !1) {
+        const a = r.get();
+        o[s] = Ps({ min: a, max: a }, this.constraints[s]);
+      }
+    });
+    const { transformTemplate: u } = this.visualElement.getProps();
+    this.visualElement.current.style.transform = u ? u({}, "") : "none", n.root && n.root.updateScroll(), n.updateLayout(), this.resolveConstraints(), b((s) => {
+      if (!tt(s, e, null))
+        return;
+      const r = this.getAxisMotionValue(s), { min: a, max: l } = this.constraints[s];
+      r.set(T(a, l, o[s]));
+    });
+  }
+  addListeners() {
+    if (!this.visualElement.current)
+      return;
+    Ss.set(this.visualElement, this);
+    const e = this.visualElement.current, i = $(e, "pointerdown", (a) => {
+      const { drag: l, dragListener: c = !0 } = this.getProps();
+      l && c && this.start(a);
+    }), n = () => {
+      const { dragConstraints: a } = this.getProps();
+      U(a) && a.current && (this.constraints = this.resolveRefConstraints());
+    }, { projection: o } = this.visualElement, u = o.addEventListener("measure", n);
+    o && !o.layout && (o.root && o.root.updateScroll(), o.updateLayout()), A.read(n);
+    const s = Y(window, "resize", () => this.scalePositionWithinConstraints()), r = o.addEventListener("didUpdate", (({ delta: a, hasLayoutChanged: l }) => {
+      this.isDragging && l && (b((c) => {
+        const h = this.getAxisMotionValue(c);
+        h && (this.originPoint[c] += a[c].translate, h.set(h.get() + a[c].translate));
+      }), this.visualElement.render());
+    }));
+    return () => {
+      s(), i(), u(), r && r();
+    };
+  }
+  getProps() {
+    const e = this.visualElement.getProps(), { drag: i = !1, dragDirectionLock: n = !1, dragPropagation: o = !1, dragConstraints: u = !1, dragElastic: s = Dt, dragMomentum: r = !0 } = e;
+    return {
+      ...e,
+      drag: i,
+      dragDirectionLock: n,
+      dragPropagation: o,
+      dragConstraints: u,
+      dragElastic: s,
+      dragMomentum: r
+    };
+  }
+}
+function tt(t, e, i) {
+  return (e === !0 || e === t) && (i === null || i === t);
+}
+function Ds(t, e = 10) {
+  let i = null;
+  return Math.abs(t.y) > e ? i = "y" : Math.abs(t.x) > e && (i = "x"), i;
+}
+class ws extends j {
+  constructor(e) {
+    super(e), this.removeGroupControls = N, this.removeListeners = N, this.controls = new As(e);
+  }
+  mount() {
+    const { dragControls: e } = this.node.getProps();
+    e && (this.removeGroupControls = e.subscribe(this.controls)), this.removeListeners = this.controls.addListeners() || N;
+  }
+  unmount() {
+    this.removeGroupControls(), this.removeListeners();
+  }
+}
+const oe = (t) => (e, i) => {
+  t && A.postRender(() => t(e, i));
+};
+class Ls extends j {
+  constructor() {
+    super(...arguments), this.removePointerDownListener = N;
+  }
+  onPointerDown(e) {
+    this.session = new ci(e, this.createPanHandlers(), {
+      transformPagePoint: this.node.getTransformPagePoint(),
+      contextWindow: li(this.node)
+    });
+  }
+  createPanHandlers() {
+    const { onPanSessionStart: e, onPanStart: i, onPan: n, onPanEnd: o } = this.node.getProps();
+    return {
+      onSessionStart: oe(e),
+      onStart: oe(i),
+      onMove: n,
+      onEnd: (u, s) => {
+        delete this.session, o && A.postRender(() => o(u, s));
+      }
+    };
+  }
+  mount() {
+    this.removePointerDownListener = $(this.node.current, "pointerdown", (e) => this.onPointerDown(e));
+  }
+  update() {
+    this.session && this.session.updateHandlers(this.createPanHandlers());
+  }
+  unmount() {
+    this.removePointerDownListener(), this.session && this.session.end();
+  }
+}
+const nt = {
+  /**
+   * Global flag as to whether the tree has animated since the last time
+   * we resized the window
+   */
+  hasAnimatedSinceResize: !0,
+  /**
+   * We set this to true once, on the first update. Any nodes added to the tree beyond that
+   * update will be given a `data-projection-id` attribute.
+   */
+  hasEverUpdated: !1
+};
+function re(t, e) {
+  return e.max === e.min ? 0 : t / (e.max - e.min) * 100;
+}
+const H = {
+  correct: (t, e) => {
+    if (!e.target)
+      return t;
+    if (typeof t == "string")
+      if (Ue.test(t))
+        t = parseFloat(t);
+      else
+        return t;
+    const i = re(t, e.target.x), n = re(t, e.target.y);
+    return `${i}% ${n}%`;
+  }
+}, Cs = {
+  correct: (t, { treeScale: e, projectionDelta: i }) => {
+    const n = t, o = Wt.parse(t);
+    if (o.length > 5)
+      return n;
+    const u = Wt.createTransformer(t), s = typeof o[0] != "number" ? 1 : 0, r = i.x.scale * e.x, a = i.y.scale * e.y;
+    o[0 + s] /= r, o[1 + s] /= a;
+    const l = T(r, a, 0.5);
+    return typeof o[2 + s] == "number" && (o[2 + s] /= l), typeof o[3 + s] == "number" && (o[3 + s] /= l), u(o);
+  }
+};
+let gt = !1;
+class Es extends Ei {
+  /**
+   * This only mounts projection nodes for components that
+   * need measuring, we might want to do it for all components
+   * in order to incorporate transforms
+   */
+  componentDidMount() {
+    const { visualElement: e, layoutGroup: i, switchLayoutGroup: n, layoutId: o } = this.props, { projection: u } = e;
+    Qi(Vs), u && (i.group && i.group.add(u), n && n.register && o && n.register(u), gt && u.root.didUpdate(), u.addEventListener("animationComplete", () => {
+      this.safeToRemove();
+    }), u.setOptions({
+      ...u.options,
+      onExitComplete: () => this.safeToRemove()
+    })), nt.hasEverUpdated = !0;
+  }
+  getSnapshotBeforeUpdate(e) {
+    const { layoutDependency: i, visualElement: n, drag: o, isPresent: u } = this.props, { projection: s } = n;
+    return s && (s.isPresent = u, gt = !0, o || e.layoutDependency !== i || i === void 0 || e.isPresent !== u ? s.willUpdate() : this.safeToRemove(), e.isPresent !== u && (u ? s.promote() : s.relegate() || A.postRender(() => {
+      const r = s.getStack();
+      (!r || !r.members.length) && this.safeToRemove();
+    }))), null;
+  }
+  componentDidUpdate() {
+    const { projection: e } = this.props.visualElement;
+    e && (e.root.didUpdate(), Ne.postRender(() => {
+      !e.currentAnimation && e.isLead() && this.safeToRemove();
+    }));
+  }
+  componentWillUnmount() {
+    const { visualElement: e, layoutGroup: i, switchLayoutGroup: n } = this.props, { projection: o } = e;
+    gt = !0, o && (o.scheduleCheckAfterUnmount(), i && i.group && i.group.remove(o), n && n.deregister && n.deregister(o));
+  }
+  safeToRemove() {
+    const { safeToRemove: e } = this.props;
+    e && e();
+  }
+  render() {
+    return null;
+  }
+}
+function hi(t) {
+  const [e, i] = gn(), n = C($e);
+  return G(Es, { ...t, layoutGroup: n, switchLayoutGroup: C(ei), isPresent: e, safeToRemove: i });
+}
+const Vs = {
+  borderRadius: {
+    ...H,
+    applyTo: [
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderBottomLeftRadius",
+      "borderBottomRightRadius"
+    ]
+  },
+  borderTopLeftRadius: H,
+  borderTopRightRadius: H,
+  borderBottomLeftRadius: H,
+  borderBottomRightRadius: H,
+  boxShadow: Cs
+}, bs = (t, e) => t.depth - e.depth;
+class Rs {
+  constructor() {
+    this.children = [], this.isDirty = !1;
+  }
+  add(e) {
+    We(this.children, e), this.isDirty = !0;
+  }
+  remove(e) {
+    He(this.children, e), this.isDirty = !0;
+  }
+  forEach(e) {
+    this.isDirty && this.children.sort(bs), this.isDirty = !1, this.children.forEach(e);
+  }
+}
+function Ms(t, e) {
+  const i = Ge.now(), n = ({ timestamp: o }) => {
+    const u = o - i;
+    u >= e && (K(n), t(u - e));
+  };
+  return A.setup(n, !0), () => K(n);
+}
+const fi = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"], js = fi.length, ae = (t) => typeof t == "string" ? parseFloat(t) : t, le = (t) => typeof t == "number" || Ue.test(t);
+function ks(t, e, i, n, o, u) {
+  o ? (t.opacity = T(0, i.opacity ?? 1, Bs(n)), t.opacityExit = T(e.opacity ?? 1, 0, Is(n))) : u && (t.opacity = T(e.opacity ?? 1, i.opacity ?? 1, n));
+  for (let s = 0; s < js; s++) {
+    const r = `border${fi[s]}Radius`;
+    let a = ce(e, r), l = ce(i, r);
+    if (a === void 0 && l === void 0)
+      continue;
+    a || (a = 0), l || (l = 0), a === 0 || l === 0 || le(a) === le(l) ? (t[r] = Math.max(T(ae(a), ae(l), n), 0), (ot.test(l) || ot.test(a)) && (t[r] += "%")) : t[r] = l;
+  }
+  (e.rotate || i.rotate) && (t.rotate = T(e.rotate || 0, i.rotate || 0, n));
+}
+function ce(t, e) {
+  return t[e] !== void 0 ? t[e] : t.borderRadius;
+}
+const Bs = /* @__PURE__ */ di(0, 0.5, tn), Is = /* @__PURE__ */ di(0.5, 0.95, N);
+function di(t, e, i) {
+  return (n) => n < t ? 0 : n > e ? 1 : i(St(t, e, n));
+}
+function ue(t, e) {
+  t.min = e.min, t.max = e.max;
+}
+function V(t, e) {
+  ue(t.x, e.x), ue(t.y, e.y);
+}
+function he(t, e) {
+  t.translate = e.translate, t.scale = e.scale, t.originPoint = e.originPoint, t.origin = e.origin;
+}
+function fe(t, e, i, n, o) {
+  return t -= e, t = Ht(t, 1 / i, n), o !== void 0 && (t = Ht(t, 1 / o, n)), t;
+}
+function Os(t, e = 0, i = 1, n = 0.5, o, u = t, s = t) {
+  if (ot.test(e) && (e = parseFloat(e), e = T(s.min, s.max, e / 100) - s.min), typeof e != "number")
+    return;
+  let r = T(u.min, u.max, n);
+  t === u && (r -= e), t.min = fe(t.min, e, i, r, o), t.max = fe(t.max, e, i, r, o);
+}
+function de(t, e, [i, n, o], u, s) {
+  Os(t, e[i], e[n], e[o], e.scale, u, s);
+}
+const Fs = ["x", "scaleX", "originX"], Us = ["y", "scaleY", "originY"];
+function me(t, e, i, n) {
+  de(t.x, e, Fs, i ? i.x : void 0, n ? n.x : void 0), de(t.y, e, Us, i ? i.y : void 0, n ? n.y : void 0);
+}
+function pe(t) {
+  return t.translate === 0 && t.scale === 1;
+}
+function mi(t) {
+  return pe(t.x) && pe(t.y);
+}
+function ge(t, e) {
+  return t.min === e.min && t.max === e.max;
+}
+function Ns(t, e) {
+  return ge(t.x, e.x) && ge(t.y, e.y);
+}
+function ye(t, e) {
+  return Math.round(t.min) === Math.round(e.min) && Math.round(t.max) === Math.round(e.max);
+}
+function pi(t, e) {
+  return ye(t.x, e.x) && ye(t.y, e.y);
+}
+function ve(t) {
+  return D(t.x) / D(t.y);
+}
+function Pe(t, e) {
+  return t.translate === e.translate && t.scale === e.scale && t.originPoint === e.originPoint;
+}
+class Ws {
+  constructor() {
+    this.members = [];
+  }
+  add(e) {
+    We(this.members, e), e.scheduleRender();
+  }
+  remove(e) {
+    if (He(this.members, e), e === this.prevLead && (this.prevLead = void 0), e === this.lead) {
+      const i = this.members[this.members.length - 1];
+      i && this.promote(i);
+    }
+  }
+  relegate(e) {
+    const i = this.members.findIndex((o) => e === o);
+    if (i === 0)
+      return !1;
+    let n;
+    for (let o = i; o >= 0; o--) {
+      const u = this.members[o];
+      if (u.isPresent !== !1) {
+        n = u;
+        break;
+      }
+    }
+    return n ? (this.promote(n), !0) : !1;
+  }
+  promote(e, i) {
+    const n = this.lead;
+    if (e !== n && (this.prevLead = n, this.lead = e, e.show(), n)) {
+      n.instance && n.scheduleRender(), e.scheduleRender(), e.resumeFrom = n, i && (e.resumeFrom.preserveOpacity = !0), n.snapshot && (e.snapshot = n.snapshot, e.snapshot.latestValues = n.animationValues || n.latestValues), e.root && e.root.isUpdating && (e.isLayoutDirty = !0);
+      const { crossfade: o } = e.options;
+      o === !1 && n.hide();
+    }
+  }
+  exitAnimationComplete() {
+    this.members.forEach((e) => {
+      const { options: i, resumingFrom: n } = e;
+      i.onExitComplete && i.onExitComplete(), n && n.options.onExitComplete && n.options.onExitComplete();
+    });
+  }
+  scheduleRender() {
+    this.members.forEach((e) => {
+      e.instance && e.scheduleRender(!1);
+    });
+  }
+  /**
+   * Clear any leads that have been removed this render to prevent them from being
+   * used in future animations and to prevent memory leaks
+   */
+  removeLeadSnapshot() {
+    this.lead && this.lead.snapshot && (this.lead.snapshot = void 0);
+  }
+}
+function Hs(t, e, i) {
+  let n = "";
+  const o = t.x.translate / e.x, u = t.y.translate / e.y, s = i?.z || 0;
+  if ((o || u || s) && (n = `translate3d(${o}px, ${u}px, ${s}px) `), (e.x !== 1 || e.y !== 1) && (n += `scale(${1 / e.x}, ${1 / e.y}) `), i) {
+    const { transformPerspective: l, rotate: c, rotateX: h, rotateY: f, skewX: d, skewY: m } = i;
+    l && (n = `perspective(${l}px) ${n}`), c && (n += `rotate(${c}deg) `), h && (n += `rotateX(${h}deg) `), f && (n += `rotateY(${f}deg) `), d && (n += `skewX(${d}deg) `), m && (n += `skewY(${m}deg) `);
+  }
+  const r = t.x.scale * e.x, a = t.y.scale * e.y;
+  return (r !== 1 || a !== 1) && (n += `scale(${r}, ${a})`), n || "none";
+}
+const yt = ["", "X", "Y", "Z"], Gs = 1e3;
+let zs = 0;
+function vt(t, e, i, n) {
+  const { latestValues: o } = e;
+  o[t] && (i[t] = o[t], e.setStaticValue(t, 0), n && (n[t] = 0));
+}
+function gi(t) {
+  if (t.hasCheckedOptimisedAppear = !0, t.root === t)
+    return;
+  const { visualElement: e } = t.options;
+  if (!e)
+    return;
+  const i = hn(e);
+  if (window.MotionHasOptimisedAnimation(i, "transform")) {
+    const { layout: o, layoutId: u } = t.options;
+    window.MotionCancelOptimisedAnimation(i, "transform", A, !(o || u));
+  }
+  const { parent: n } = t;
+  n && !n.hasCheckedOptimisedAppear && gi(n);
+}
+function yi({ attachResizeListener: t, defaultParent: e, measureScroll: i, checkIsScrollRoot: n, resetTransform: o }) {
+  return class {
+    constructor(s = {}, r = e?.()) {
+      this.id = zs++, this.animationId = 0, this.animationCommitId = 0, this.children = /* @__PURE__ */ new Set(), this.options = {}, this.isTreeAnimating = !1, this.isAnimationBlocked = !1, this.isLayoutDirty = !1, this.isProjectionDirty = !1, this.isSharedProjectionDirty = !1, this.isTransformDirty = !1, this.updateManuallyBlocked = !1, this.updateBlockedByResize = !1, this.isUpdating = !1, this.isSVG = !1, this.needsReset = !1, this.shouldResetTransform = !1, this.hasCheckedOptimisedAppear = !1, this.treeScale = { x: 1, y: 1 }, this.eventHandlers = /* @__PURE__ */ new Map(), this.hasTreeAnimated = !1, this.updateScheduled = !1, this.scheduleUpdate = () => this.update(), this.projectionUpdateScheduled = !1, this.checkUpdateFailed = () => {
+        this.isUpdating && (this.isUpdating = !1, this.clearAllSnapshots());
+      }, this.updateProjection = () => {
+        this.projectionUpdateScheduled = !1, this.nodes.forEach(_s), this.nodes.forEach(Zs), this.nodes.forEach(Js), this.nodes.forEach(Ks);
+      }, this.resolvedRelativeTargetAt = 0, this.hasProjected = !1, this.isVisible = !0, this.animationProgress = 0, this.sharedNodes = /* @__PURE__ */ new Map(), this.latestValues = s, this.root = r ? r.root || r : this, this.path = r ? [...r.path, r] : [], this.parent = r, this.depth = r ? r.depth + 1 : 0;
+      for (let a = 0; a < this.path.length; a++)
+        this.path[a].shouldResetTransform = !0;
+      this.root === this && (this.nodes = new Rs());
+    }
+    addEventListener(s, r) {
+      return this.eventHandlers.has(s) || this.eventHandlers.set(s, new en()), this.eventHandlers.get(s).add(r);
+    }
+    notifyListeners(s, ...r) {
+      const a = this.eventHandlers.get(s);
+      a && a.notify(...r);
+    }
+    hasListeners(s) {
+      return this.eventHandlers.has(s);
+    }
+    /**
+     * Lifecycles
+     */
+    mount(s) {
+      if (this.instance)
+        return;
+      this.isSVG = nn(s) && !sn(s), this.instance = s;
+      const { layoutId: r, layout: a, visualElement: l } = this.options;
+      if (l && !l.current && l.mount(s), this.root.nodes.add(this), this.parent && this.parent.children.add(this), this.root.hasTreeAnimated && (a || r) && (this.isLayoutDirty = !0), t) {
+        let c, h = 0;
+        const f = () => this.root.updateBlockedByResize = !1;
+        A.read(() => {
+          h = window.innerWidth;
+        }), t(s, () => {
+          const d = window.innerWidth;
+          d !== h && (h = d, this.root.updateBlockedByResize = !0, c && c(), c = Ms(f, 250), nt.hasAnimatedSinceResize && (nt.hasAnimatedSinceResize = !1, this.nodes.forEach(Se)));
+        });
+      }
+      r && this.root.registerSharedNode(r, this), this.options.animate !== !1 && l && (r || a) && this.addEventListener("didUpdate", ({ delta: c, hasLayoutChanged: h, hasRelativeLayoutChanged: f, layout: d }) => {
+        if (this.isTreeAnimationBlocked()) {
+          this.target = void 0, this.relativeTarget = void 0;
+          return;
+        }
+        const m = this.options.transition || l.getDefaultTransition() || no, { onLayoutAnimationStart: P, onLayoutAnimationComplete: v } = l.getProps(), p = !this.targetLayout || !pi(this.targetLayout, d), g = !h && f;
+        if (this.options.layoutRoot || this.resumeFrom || g || h && (p || !this.currentAnimation)) {
+          this.resumeFrom && (this.resumingFrom = this.resumeFrom, this.resumingFrom.resumingFrom = void 0);
+          const y = {
+            ...on(m, "layout"),
+            onPlay: P,
+            onComplete: v
+          };
+          (l.shouldReduceMotion || this.options.layoutRoot) && (y.delay = 0, y.type = !1), this.startAnimation(y), this.setAnimationOrigin(c, g);
+        } else
+          h || Se(this), this.isLead() && this.options.onExitComplete && this.options.onExitComplete();
+        this.targetLayout = d;
+      });
+    }
+    unmount() {
+      this.options.layoutId && this.willUpdate(), this.root.nodes.remove(this);
+      const s = this.getStack();
+      s && s.remove(this), this.parent && this.parent.children.delete(this), this.instance = void 0, this.eventHandlers.clear(), K(this.updateProjection);
+    }
+    // only on the root
+    blockUpdate() {
+      this.updateManuallyBlocked = !0;
+    }
+    unblockUpdate() {
+      this.updateManuallyBlocked = !1;
+    }
+    isUpdateBlocked() {
+      return this.updateManuallyBlocked || this.updateBlockedByResize;
+    }
+    isTreeAnimationBlocked() {
+      return this.isAnimationBlocked || this.parent && this.parent.isTreeAnimationBlocked() || !1;
+    }
+    // Note: currently only running on root node
+    startUpdate() {
+      this.isUpdateBlocked() || (this.isUpdating = !0, this.nodes && this.nodes.forEach(Qs), this.animationId++);
+    }
+    getTransformTemplate() {
+      const { visualElement: s } = this.options;
+      return s && s.getProps().transformTemplate;
+    }
+    willUpdate(s = !0) {
+      if (this.root.hasTreeAnimated = !0, this.root.isUpdateBlocked()) {
+        this.options.onExitComplete && this.options.onExitComplete();
+        return;
+      }
+      if (window.MotionCancelOptimisedAnimation && !this.hasCheckedOptimisedAppear && gi(this), !this.root.isUpdating && this.root.startUpdate(), this.isLayoutDirty)
+        return;
+      this.isLayoutDirty = !0;
+      for (let c = 0; c < this.path.length; c++) {
+        const h = this.path[c];
+        h.shouldResetTransform = !0, h.updateScroll("snapshot"), h.options.layoutRoot && h.willUpdate(!1);
+      }
+      const { layoutId: r, layout: a } = this.options;
+      if (r === void 0 && !a)
+        return;
+      const l = this.getTransformTemplate();
+      this.prevTransformTemplateValue = l ? l(this.latestValues, "") : void 0, this.updateSnapshot(), s && this.notifyListeners("willUpdate");
+    }
+    update() {
+      if (this.updateScheduled = !1, this.isUpdateBlocked()) {
+        this.unblockUpdate(), this.clearAllSnapshots(), this.nodes.forEach(xe);
+        return;
+      }
+      if (this.animationId <= this.animationCommitId) {
+        this.nodes.forEach(Te);
+        return;
+      }
+      this.animationCommitId = this.animationId, this.isUpdating ? (this.isUpdating = !1, this.nodes.forEach(qs), this.nodes.forEach($s), this.nodes.forEach(Xs)) : this.nodes.forEach(Te), this.clearAllSnapshots();
+      const r = Ge.now();
+      L.delta = Fe(0, 1e3 / 60, r - L.timestamp), L.timestamp = r, L.isProcessing = !0, ht.update.process(L), ht.preRender.process(L), ht.render.process(L), L.isProcessing = !1;
+    }
+    didUpdate() {
+      this.updateScheduled || (this.updateScheduled = !0, Ne.read(this.scheduleUpdate));
+    }
+    clearAllSnapshots() {
+      this.nodes.forEach(Ys), this.sharedNodes.forEach(to);
+    }
+    scheduleUpdateProjection() {
+      this.projectionUpdateScheduled || (this.projectionUpdateScheduled = !0, A.preRender(this.updateProjection, !1, !0));
+    }
+    scheduleCheckAfterUnmount() {
+      A.postRender(() => {
+        this.isLayoutDirty ? this.root.didUpdate() : this.root.checkUpdateFailed();
+      });
+    }
+    /**
+     * Update measurements
+     */
+    updateSnapshot() {
+      this.snapshot || !this.instance || (this.snapshot = this.measure(), this.snapshot && !D(this.snapshot.measuredBox.x) && !D(this.snapshot.measuredBox.y) && (this.snapshot = void 0));
+    }
+    updateLayout() {
+      if (!this.instance || (this.updateScroll(), !(this.options.alwaysMeasureLayout && this.isLead()) && !this.isLayoutDirty))
+        return;
+      if (this.resumeFrom && !this.resumeFrom.instance)
+        for (let a = 0; a < this.path.length; a++)
+          this.path[a].updateScroll();
+      const s = this.layout;
+      this.layout = this.measure(!1), this.layoutCorrected = x(), this.isLayoutDirty = !1, this.projectionDelta = void 0, this.notifyListeners("measure", this.layout.layoutBox);
+      const { visualElement: r } = this.options;
+      r && r.notify("LayoutMeasure", this.layout.layoutBox, s ? s.layoutBox : void 0);
+    }
+    updateScroll(s = "measure") {
+      let r = !!(this.options.layoutScroll && this.instance);
+      if (this.scroll && this.scroll.animationId === this.root.animationId && this.scroll.phase === s && (r = !1), r && this.instance) {
+        const a = n(this.instance);
+        this.scroll = {
+          animationId: this.root.animationId,
+          phase: s,
+          isRoot: a,
+          offset: i(this.instance),
+          wasRoot: this.scroll ? this.scroll.isRoot : a
+        };
+      }
+    }
+    resetTransform() {
+      if (!o)
+        return;
+      const s = this.isLayoutDirty || this.shouldResetTransform || this.options.alwaysMeasureLayout, r = this.projectionDelta && !mi(this.projectionDelta), a = this.getTransformTemplate(), l = a ? a(this.latestValues, "") : void 0, c = l !== this.prevTransformTemplateValue;
+      s && this.instance && (r || O(this.latestValues) || c) && (o(this.instance, l), this.shouldResetTransform = !1, this.scheduleRender());
+    }
+    measure(s = !0) {
+      const r = this.measurePageBox();
+      let a = this.removeElementScroll(r);
+      return s && (a = this.removeTransform(a)), so(a), {
+        animationId: this.root.animationId,
+        measuredBox: r,
+        layoutBox: a,
+        latestValues: {},
+        source: this.id
+      };
+    }
+    measurePageBox() {
+      const { visualElement: s } = this.options;
+      if (!s)
+        return x();
+      const r = s.measureViewportBox();
+      if (!(this.scroll?.wasRoot || this.path.some(oo))) {
+        const { scroll: l } = this.root;
+        l && (J(r.x, l.offset.x), J(r.y, l.offset.y));
+      }
+      return r;
+    }
+    removeElementScroll(s) {
+      const r = x();
+      if (V(r, s), this.scroll?.wasRoot)
+        return r;
+      for (let a = 0; a < this.path.length; a++) {
+        const l = this.path[a], { scroll: c, options: h } = l;
+        l !== this.root && c && h.layoutScroll && (c.wasRoot && V(r, s), J(r.x, c.offset.x), J(r.y, c.offset.y));
+      }
+      return r;
+    }
+    applyTransform(s, r = !1) {
+      const a = x();
+      V(a, s);
+      for (let l = 0; l < this.path.length; l++) {
+        const c = this.path[l];
+        !r && c.options.layoutScroll && c.scroll && c !== c.root && Q(a, {
+          x: -c.scroll.offset.x,
+          y: -c.scroll.offset.y
+        }), O(c.latestValues) && Q(a, c.latestValues);
+      }
+      return O(this.latestValues) && Q(a, this.latestValues), a;
+    }
+    removeTransform(s) {
+      const r = x();
+      V(r, s);
+      for (let a = 0; a < this.path.length; a++) {
+        const l = this.path[a];
+        if (!l.instance || !O(l.latestValues))
+          continue;
+        Gt(l.latestValues) && l.updateSnapshot();
+        const c = x(), h = l.measurePageBox();
+        V(c, h), me(r, l.latestValues, l.snapshot ? l.snapshot.layoutBox : void 0, c);
+      }
+      return O(this.latestValues) && me(r, this.latestValues), r;
+    }
+    setTargetDelta(s) {
+      this.targetDelta = s, this.root.scheduleUpdateProjection(), this.isProjectionDirty = !0;
+    }
+    setOptions(s) {
+      this.options = {
+        ...this.options,
+        ...s,
+        crossfade: s.crossfade !== void 0 ? s.crossfade : !0
+      };
+    }
+    clearMeasurements() {
+      this.scroll = void 0, this.layout = void 0, this.snapshot = void 0, this.prevTransformTemplateValue = void 0, this.targetDelta = void 0, this.target = void 0, this.isLayoutDirty = !1;
+    }
+    forceRelativeParentToResolveTarget() {
+      this.relativeParent && this.relativeParent.resolvedRelativeTargetAt !== L.timestamp && this.relativeParent.resolveTargetDelta(!0);
+    }
+    resolveTargetDelta(s = !1) {
+      const r = this.getLead();
+      this.isProjectionDirty || (this.isProjectionDirty = r.isProjectionDirty), this.isTransformDirty || (this.isTransformDirty = r.isTransformDirty), this.isSharedProjectionDirty || (this.isSharedProjectionDirty = r.isSharedProjectionDirty);
+      const a = !!this.resumingFrom || this !== r;
+      if (!(s || a && this.isSharedProjectionDirty || this.isProjectionDirty || this.parent?.isProjectionDirty || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize))
+        return;
+      const { layout: c, layoutId: h } = this.options;
+      if (!(!this.layout || !(c || h))) {
+        if (this.resolvedRelativeTargetAt = L.timestamp, !this.targetDelta && !this.relativeTarget) {
+          const f = this.getClosestProjectingParent();
+          f && f.layout && this.animationProgress !== 1 ? (this.relativeParent = f, this.forceRelativeParentToResolveTarget(), this.relativeTarget = x(), this.relativeTargetOrigin = x(), _(this.relativeTargetOrigin, this.layout.layoutBox, f.layout.layoutBox), V(this.relativeTarget, this.relativeTargetOrigin)) : this.relativeParent = this.relativeTarget = void 0;
+        }
+        if (!(!this.relativeTarget && !this.targetDelta) && (this.target || (this.target = x(), this.targetWithTransforms = x()), this.relativeTarget && this.relativeTargetOrigin && this.relativeParent && this.relativeParent.target ? (this.forceRelativeParentToResolveTarget(), fs(this.target, this.relativeTarget, this.relativeParent.target)) : this.targetDelta ? (this.resumingFrom ? this.target = this.applyTransform(this.layout.layoutBox) : V(this.target, this.layout.layoutBox), rn(this.target, this.targetDelta)) : V(this.target, this.layout.layoutBox), this.attemptToResolveRelativeTarget)) {
+          this.attemptToResolveRelativeTarget = !1;
+          const f = this.getClosestProjectingParent();
+          f && !!f.resumingFrom == !!this.resumingFrom && !f.options.layoutScroll && f.target && this.animationProgress !== 1 ? (this.relativeParent = f, this.forceRelativeParentToResolveTarget(), this.relativeTarget = x(), this.relativeTargetOrigin = x(), _(this.relativeTargetOrigin, this.target, f.target), V(this.relativeTarget, this.relativeTargetOrigin)) : this.relativeParent = this.relativeTarget = void 0;
+        }
+      }
+    }
+    getClosestProjectingParent() {
+      if (!(!this.parent || Gt(this.parent.latestValues) || an(this.parent.latestValues)))
+        return this.parent.isProjecting() ? this.parent : this.parent.getClosestProjectingParent();
+    }
+    isProjecting() {
+      return !!((this.relativeTarget || this.targetDelta || this.options.layoutRoot) && this.layout);
+    }
+    calcProjection() {
+      const s = this.getLead(), r = !!this.resumingFrom || this !== s;
+      let a = !0;
+      if ((this.isProjectionDirty || this.parent?.isProjectionDirty) && (a = !1), r && (this.isSharedProjectionDirty || this.isTransformDirty) && (a = !1), this.resolvedRelativeTargetAt === L.timestamp && (a = !1), a)
+        return;
+      const { layout: l, layoutId: c } = this.options;
+      if (this.isTreeAnimating = !!(this.parent && this.parent.isTreeAnimating || this.currentAnimation || this.pendingAnimation), this.isTreeAnimating || (this.targetDelta = this.relativeTarget = void 0), !this.layout || !(l || c))
+        return;
+      V(this.layoutCorrected, this.layout.layoutBox);
+      const h = this.treeScale.x, f = this.treeScale.y;
+      ln(this.layoutCorrected, this.treeScale, this.path, r), s.layout && !s.target && (this.treeScale.x !== 1 || this.treeScale.y !== 1) && (s.target = s.layout.layoutBox, s.targetWithTransforms = x());
+      const { target: d } = s;
+      if (!d) {
+        this.prevProjectionDelta && (this.createProjectionDeltas(), this.scheduleRender());
+        return;
+      }
+      !this.projectionDelta || !this.prevProjectionDelta ? this.createProjectionDeltas() : (he(this.prevProjectionDelta.x, this.projectionDelta.x), he(this.prevProjectionDelta.y, this.projectionDelta.y)), X(this.projectionDelta, this.layoutCorrected, d, this.latestValues), (this.treeScale.x !== h || this.treeScale.y !== f || !Pe(this.projectionDelta.x, this.prevProjectionDelta.x) || !Pe(this.projectionDelta.y, this.prevProjectionDelta.y)) && (this.hasProjected = !0, this.scheduleRender(), this.notifyListeners("projectionUpdate", d));
+    }
+    hide() {
+      this.isVisible = !1;
+    }
+    show() {
+      this.isVisible = !0;
+    }
+    scheduleRender(s = !0) {
+      if (this.options.visualElement?.scheduleRender(), s) {
+        const r = this.getStack();
+        r && r.scheduleRender();
+      }
+      this.resumingFrom && !this.resumingFrom.instance && (this.resumingFrom = void 0);
+    }
+    createProjectionDeltas() {
+      this.prevProjectionDelta = F(), this.projectionDelta = F(), this.projectionDeltaWithTransform = F();
+    }
+    setAnimationOrigin(s, r = !1) {
+      const a = this.snapshot, l = a ? a.latestValues : {}, c = { ...this.latestValues }, h = F();
+      (!this.relativeParent || !this.relativeParent.options.layoutRoot) && (this.relativeTarget = this.relativeTargetOrigin = void 0), this.attemptToResolveRelativeTarget = !r;
+      const f = x(), d = a ? a.source : void 0, m = this.layout ? this.layout.source : void 0, P = d !== m, v = this.getStack(), p = !v || v.members.length <= 1, g = !!(P && !p && this.options.crossfade === !0 && !this.path.some(io));
+      this.animationProgress = 0;
+      let y;
+      this.mixTargetDelta = (w) => {
+        const M = w / 1e3;
+        Ae(h.x, s.x, M), Ae(h.y, s.y, M), this.setTargetDelta(h), this.relativeTarget && this.relativeTargetOrigin && this.layout && this.relativeParent && this.relativeParent.layout && (_(f, this.layout.layoutBox, this.relativeParent.layout.layoutBox), eo(this.relativeTarget, this.relativeTargetOrigin, f, M), y && Ns(this.relativeTarget, y) && (this.isProjectionDirty = !1), y || (y = x()), V(y, this.relativeTarget)), P && (this.animationValues = c, ks(c, l, this.latestValues, M, g, p)), this.root.scheduleUpdateProjection(), this.scheduleRender(), this.animationProgress = M;
+      }, this.mixTargetDelta(this.options.layoutRoot ? 1e3 : 0);
+    }
+    startAnimation(s) {
+      this.notifyListeners("animationStart"), this.currentAnimation?.stop(), this.resumingFrom?.currentAnimation?.stop(), this.pendingAnimation && (K(this.pendingAnimation), this.pendingAnimation = void 0), this.pendingAnimation = A.update(() => {
+        nt.hasAnimatedSinceResize = !0, this.motionValue || (this.motionValue = cn(0)), this.currentAnimation = un(this.motionValue, [0, 1e3], {
+          ...s,
+          velocity: 0,
+          isSync: !0,
+          onUpdate: (r) => {
+            this.mixTargetDelta(r), s.onUpdate && s.onUpdate(r);
+          },
+          onStop: () => {
+          },
+          onComplete: () => {
+            s.onComplete && s.onComplete(), this.completeAnimation();
+          }
+        }), this.resumingFrom && (this.resumingFrom.currentAnimation = this.currentAnimation), this.pendingAnimation = void 0;
+      });
+    }
+    completeAnimation() {
+      this.resumingFrom && (this.resumingFrom.currentAnimation = void 0, this.resumingFrom.preserveOpacity = void 0);
+      const s = this.getStack();
+      s && s.exitAnimationComplete(), this.resumingFrom = this.currentAnimation = this.animationValues = void 0, this.notifyListeners("animationComplete");
+    }
+    finishAnimation() {
+      this.currentAnimation && (this.mixTargetDelta && this.mixTargetDelta(Gs), this.currentAnimation.stop()), this.completeAnimation();
+    }
+    applyTransformsToTarget() {
+      const s = this.getLead();
+      let { targetWithTransforms: r, target: a, layout: l, latestValues: c } = s;
+      if (!(!r || !a || !l)) {
+        if (this !== s && this.layout && l && vi(this.options.animationType, this.layout.layoutBox, l.layoutBox)) {
+          a = this.target || x();
+          const h = D(this.layout.layoutBox.x);
+          a.x.min = s.target.x.min, a.x.max = a.x.min + h;
+          const f = D(this.layout.layoutBox.y);
+          a.y.min = s.target.y.min, a.y.max = a.y.min + f;
+        }
+        V(r, a), Q(r, c), X(this.projectionDeltaWithTransform, this.layoutCorrected, r, c);
+      }
+    }
+    registerSharedNode(s, r) {
+      this.sharedNodes.has(s) || this.sharedNodes.set(s, new Ws()), this.sharedNodes.get(s).add(r);
+      const l = r.options.initialPromotionConfig;
+      r.promote({
+        transition: l ? l.transition : void 0,
+        preserveFollowOpacity: l && l.shouldPreserveFollowOpacity ? l.shouldPreserveFollowOpacity(r) : void 0
+      });
+    }
+    isLead() {
+      const s = this.getStack();
+      return s ? s.lead === this : !0;
+    }
+    getLead() {
+      const { layoutId: s } = this.options;
+      return s ? this.getStack()?.lead || this : this;
+    }
+    getPrevLead() {
+      const { layoutId: s } = this.options;
+      return s ? this.getStack()?.prevLead : void 0;
+    }
+    getStack() {
+      const { layoutId: s } = this.options;
+      if (s)
+        return this.root.sharedNodes.get(s);
+    }
+    promote({ needsReset: s, transition: r, preserveFollowOpacity: a } = {}) {
+      const l = this.getStack();
+      l && l.promote(this, a), s && (this.projectionDelta = void 0, this.needsReset = !0), r && this.setOptions({ transition: r });
+    }
+    relegate() {
+      const s = this.getStack();
+      return s ? s.relegate(this) : !1;
+    }
+    resetSkewAndRotation() {
+      const { visualElement: s } = this.options;
+      if (!s)
+        return;
+      let r = !1;
+      const { latestValues: a } = s;
+      if ((a.z || a.rotate || a.rotateX || a.rotateY || a.rotateZ || a.skewX || a.skewY) && (r = !0), !r)
+        return;
+      const l = {};
+      a.z && vt("z", s, l, this.animationValues);
+      for (let c = 0; c < yt.length; c++)
+        vt(`rotate${yt[c]}`, s, l, this.animationValues), vt(`skew${yt[c]}`, s, l, this.animationValues);
+      s.render();
+      for (const c in l)
+        s.setStaticValue(c, l[c]), this.animationValues && (this.animationValues[c] = l[c]);
+      s.scheduleRender();
+    }
+    applyProjectionStyles(s, r) {
+      if (!this.instance || this.isSVG)
+        return;
+      if (!this.isVisible) {
+        s.visibility = "hidden";
+        return;
+      }
+      const a = this.getTransformTemplate();
+      if (this.needsReset) {
+        this.needsReset = !1, s.visibility = "", s.opacity = "", s.pointerEvents = it(r?.pointerEvents) || "", s.transform = a ? a(this.latestValues, "") : "none";
+        return;
+      }
+      const l = this.getLead();
+      if (!this.projectionDelta || !this.layout || !l.target) {
+        this.options.layoutId && (s.opacity = this.latestValues.opacity !== void 0 ? this.latestValues.opacity : 1, s.pointerEvents = it(r?.pointerEvents) || ""), this.hasProjected && !O(this.latestValues) && (s.transform = a ? a({}, "") : "none", this.hasProjected = !1);
+        return;
+      }
+      s.visibility = "";
+      const c = l.animationValues || l.latestValues;
+      this.applyTransformsToTarget();
+      let h = Hs(this.projectionDeltaWithTransform, this.treeScale, c);
+      a && (h = a(c, h)), s.transform = h;
+      const { x: f, y: d } = this.projectionDelta;
+      s.transformOrigin = `${f.origin * 100}% ${d.origin * 100}% 0`, l.animationValues ? s.opacity = l === this ? c.opacity ?? this.latestValues.opacity ?? 1 : this.preserveOpacity ? this.latestValues.opacity : c.opacityExit : s.opacity = l === this ? c.opacity !== void 0 ? c.opacity : "" : c.opacityExit !== void 0 ? c.opacityExit : 0;
+      for (const m in zt) {
+        if (c[m] === void 0)
+          continue;
+        const { correct: P, applyTo: v, isCSSVariable: p } = zt[m], g = h === "none" ? c[m] : P(c[m], l);
+        if (v) {
+          const y = v.length;
+          for (let w = 0; w < y; w++)
+            s[v[w]] = g;
+        } else
+          p ? this.options.visualElement.renderState.vars[m] = g : s[m] = g;
+      }
+      this.options.layoutId && (s.pointerEvents = l === this ? it(r?.pointerEvents) || "" : "none");
+    }
+    clearSnapshot() {
+      this.resumeFrom = this.snapshot = void 0;
+    }
+    // Only run on root
+    resetTree() {
+      this.root.nodes.forEach((s) => s.currentAnimation?.stop()), this.root.nodes.forEach(xe), this.root.sharedNodes.clear();
+    }
+  };
+}
+function $s(t) {
+  t.updateLayout();
+}
+function Xs(t) {
+  const e = t.resumeFrom?.snapshot || t.snapshot;
+  if (t.isLead() && t.layout && e && t.hasListeners("didUpdate")) {
+    const { layoutBox: i, measuredBox: n } = t.layout, { animationType: o } = t.options, u = e.source !== t.layout.source;
+    o === "size" ? b((c) => {
+      const h = u ? e.measuredBox[c] : e.layoutBox[c], f = D(h);
+      h.min = i[c].min, h.max = h.min + f;
+    }) : vi(o, e.layoutBox, i) && b((c) => {
+      const h = u ? e.measuredBox[c] : e.layoutBox[c], f = D(i[c]);
+      h.max = h.min + f, t.relativeTarget && !t.currentAnimation && (t.isProjectionDirty = !0, t.relativeTarget[c].max = t.relativeTarget[c].min + f);
+    });
+    const s = F();
+    X(s, i, e.layoutBox);
+    const r = F();
+    u ? X(r, t.applyTransform(n, !0), e.measuredBox) : X(r, i, e.layoutBox);
+    const a = !mi(s);
+    let l = !1;
+    if (!t.resumeFrom) {
+      const c = t.getClosestProjectingParent();
+      if (c && !c.resumeFrom) {
+        const { snapshot: h, layout: f } = c;
+        if (h && f) {
+          const d = x();
+          _(d, e.layoutBox, h.layoutBox);
+          const m = x();
+          _(m, i, f.layoutBox), pi(d, m) || (l = !0), c.options.layoutRoot && (t.relativeTarget = m, t.relativeTargetOrigin = d, t.relativeParent = c);
+        }
+      }
+    }
+    t.notifyListeners("didUpdate", {
+      layout: i,
+      snapshot: e,
+      delta: r,
+      layoutDelta: s,
+      hasLayoutChanged: a,
+      hasRelativeLayoutChanged: l
+    });
+  } else if (t.isLead()) {
+    const { onExitComplete: i } = t.options;
+    i && i();
+  }
+  t.options.transition = void 0;
+}
+function _s(t) {
+  t.parent && (t.isProjecting() || (t.isProjectionDirty = t.parent.isProjectionDirty), t.isSharedProjectionDirty || (t.isSharedProjectionDirty = !!(t.isProjectionDirty || t.parent.isProjectionDirty || t.parent.isSharedProjectionDirty)), t.isTransformDirty || (t.isTransformDirty = t.parent.isTransformDirty));
+}
+function Ks(t) {
+  t.isProjectionDirty = t.isSharedProjectionDirty = t.isTransformDirty = !1;
+}
+function Ys(t) {
+  t.clearSnapshot();
+}
+function xe(t) {
+  t.clearMeasurements();
+}
+function Te(t) {
+  t.isLayoutDirty = !1;
+}
+function qs(t) {
+  const { visualElement: e } = t.options;
+  e && e.getProps().onBeforeLayoutMeasure && e.notify("BeforeLayoutMeasure"), t.resetTransform();
+}
+function Se(t) {
+  t.finishAnimation(), t.targetDelta = t.relativeTarget = t.target = void 0, t.isProjectionDirty = !0;
+}
+function Zs(t) {
+  t.resolveTargetDelta();
+}
+function Js(t) {
+  t.calcProjection();
+}
+function Qs(t) {
+  t.resetSkewAndRotation();
+}
+function to(t) {
+  t.removeLeadSnapshot();
+}
+function Ae(t, e, i) {
+  t.translate = T(e.translate, 0, i), t.scale = T(e.scale, 1, i), t.origin = e.origin, t.originPoint = e.originPoint;
+}
+function De(t, e, i, n) {
+  t.min = T(e.min, i.min, n), t.max = T(e.max, i.max, n);
+}
+function eo(t, e, i, n) {
+  De(t.x, e.x, i.x, n), De(t.y, e.y, i.y, n);
+}
+function io(t) {
+  return t.animationValues && t.animationValues.opacityExit !== void 0;
+}
+const no = {
+  duration: 0.45,
+  ease: [0.4, 0, 0.1, 1]
+}, we = (t) => typeof navigator < "u" && navigator.userAgent && navigator.userAgent.toLowerCase().includes(t), Le = we("applewebkit/") && !we("chrome/") ? Math.round : N;
+function Ce(t) {
+  t.min = Le(t.min), t.max = Le(t.max);
+}
+function so(t) {
+  Ce(t.x), Ce(t.y);
+}
+function vi(t, e, i) {
+  return t === "position" || t === "preserve-aspect" && !hs(ve(e), ve(i), 0.2);
+}
+function oo(t) {
+  return t !== t.root && t.scroll?.wasRoot;
+}
+const ro = yi({
+  attachResizeListener: (t, e) => Y(t, "resize", e),
+  measureScroll: () => ({
+    x: document.documentElement.scrollLeft || document.body.scrollLeft,
+    y: document.documentElement.scrollTop || document.body.scrollTop
+  }),
+  checkIsScrollRoot: () => !0
+}), Pt = {
+  current: void 0
+}, Pi = yi({
+  measureScroll: (t) => ({
+    x: t.scrollLeft,
+    y: t.scrollTop
+  }),
+  defaultParent: () => {
+    if (!Pt.current) {
+      const t = new ro({});
+      t.mount(window), t.setOptions({ layoutScroll: !0 }), Pt.current = t;
+    }
+    return Pt.current;
+  },
+  resetTransform: (t, e) => {
+    t.style.transform = e !== void 0 ? e : "none";
+  },
+  checkIsScrollRoot: (t) => window.getComputedStyle(t).position === "fixed"
+}), ao = {
+  pan: {
+    Feature: Ls
+  },
+  drag: {
+    Feature: ws,
+    ProjectionNode: Pi,
+    MeasureLayout: hi
+  }
+};
+function Ee(t, e, i) {
+  const { props: n } = t;
+  t.animationState && n.whileHover && t.animationState.setActive("whileHover", i === "Start");
+  const o = "onHover" + i, u = n[o];
+  u && A.postRender(() => u(e, q(e)));
+}
+class lo extends j {
+  mount() {
+    const { current: e } = this.node;
+    e && (this.unmount = vn(e, (i, n) => (Ee(this.node, n, "Start"), (o) => Ee(this.node, o, "End"))));
+  }
+  unmount() {
+  }
+}
+class co extends j {
+  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 = Oe(Y(this.node.current, "focus", () => this.onFocus()), Y(this.node.current, "blur", () => this.onBlur()));
+  }
+  unmount() {
+  }
+}
+function Ve(t, e, i) {
+  const { props: n } = t;
+  if (t.current instanceof HTMLButtonElement && t.current.disabled)
+    return;
+  t.animationState && n.whileTap && t.animationState.setActive("whileTap", i === "Start");
+  const o = "onTap" + (i === "End" ? "" : i), u = n[o];
+  u && A.postRender(() => u(e, q(e)));
+}
+class uo extends j {
+  mount() {
+    const { current: e } = this.node;
+    e && (this.unmount = Sn(e, (i, n) => (Ve(this.node, n, "Start"), (o, { success: u }) => Ve(this.node, o, u ? "End" : "Cancel")), { useGlobalTarget: this.node.props.globalTapTarget }));
+  }
+  unmount() {
+  }
+}
+const wt = /* @__PURE__ */ new WeakMap(), xt = /* @__PURE__ */ new WeakMap(), ho = (t) => {
+  const e = wt.get(t.target);
+  e && e(t);
+}, fo = (t) => {
+  t.forEach(ho);
+};
+function mo({ root: t, ...e }) {
+  const i = t || document;
+  xt.has(i) || xt.set(i, {});
+  const n = xt.get(i), o = JSON.stringify(e);
+  return n[o] || (n[o] = new IntersectionObserver(fo, { root: t, ...e })), n[o];
+}
+function po(t, e, i) {
+  const n = mo(e);
+  return wt.set(t, i), n.observe(t), () => {
+    wt.delete(t), n.unobserve(t);
+  };
+}
+const go = {
+  some: 0,
+  all: 1
+};
+class yo extends j {
+  constructor() {
+    super(...arguments), this.hasEnteredView = !1, this.isInView = !1;
+  }
+  startObserver() {
+    this.unmount();
+    const { viewport: e = {} } = this.node.getProps(), { root: i, margin: n, amount: o = "some", once: u } = e, s = {
+      root: i ? i.current : void 0,
+      rootMargin: n,
+      threshold: typeof o == "number" ? o : go[o]
+    }, r = (a) => {
+      const { isIntersecting: l } = a;
+      if (this.isInView === l || (this.isInView = l, u && !l && this.hasEnteredView))
+        return;
+      l && (this.hasEnteredView = !0), this.node.animationState && this.node.animationState.setActive("whileInView", l);
+      const { onViewportEnter: c, onViewportLeave: h } = this.node.getProps(), f = l ? c : h;
+      f && f(a);
+    };
+    return po(this.node.current, s, r);
+  }
+  mount() {
+    this.startObserver();
+  }
+  update() {
+    if (typeof IntersectionObserver > "u")
+      return;
+    const { props: e, prevProps: i } = this.node;
+    ["amount", "margin", "root"].some(vo(e, i)) && this.startObserver();
+  }
+  unmount() {
+  }
+}
+function vo({ viewport: t = {} }, { viewport: e = {} } = {}) {
+  return (i) => t[i] !== e[i];
+}
+const Po = {
+  inView: {
+    Feature: yo
+  },
+  tap: {
+    Feature: uo
+  },
+  focus: {
+    Feature: co
+  },
+  hover: {
+    Feature: lo
+  }
+}, xo = {
+  layout: {
+    ProjectionNode: Pi,
+    MeasureLayout: hi
+  }
+}, To = {
+  ...os,
+  ...Po,
+  ...ao,
+  ...xo
+}, So = /* @__PURE__ */ Xn(To, _n), Ao = Si.forwardRef(({ className: t, asChild: e, children: i, layout: n, ...o }, u) => {
+  const {
+    variant: s,
+    layout: r,
+    activeValue: a,
+    tabsId: l
+  } = Mi(), c = n ?? r, h = e ? bi : "button", f = a === o.value;
+  return /* @__PURE__ */ G(Vi, { ref: u, asChild: !0, ...o, children: /* @__PURE__ */ be(
+    h,
+    {
+      className: Ft(
+        Ri({ variant: s, layout: c }),
+        "mds:relative mds:z-0",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ G("span", { className: "mds:relative mds:z-10 mds:flex mds:items-center mds:gap-6", children: i }),
+        f && /* @__PURE__ */ G(
+          So.div,
+          {
+            layoutId: `active-tab-indicator-${l}`,
+            className: Ft(
+              "mds:absolute mds:z-0",
+              s === "underline" && "mds:-bottom-[9px] mds:left-0 mds:right-0 mds:h-2 mds:bg-interactive-primary",
+              s === "button" && "mds:inset-0 mds:bg-interactive-primary mds:rounded-full"
+            ),
+            transition: {
+              type: "spring",
+              stiffness: 380,
+              damping: 30
+            }
+          }
+        )
+      ]
+    }
+  ) });
+});
+Ao.displayName = "TabsTrigger";
+export {
+  Ao as TabsTrigger
+};