motion-v 0.3.0 → 0.4.0

package/dist/es/node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/VisualElement.mjs

@@ -1,25 +1,25 @@
-import { initPrefersReducedMotion as g } from "../utils/reduced-motion/index.mjs";
-import { hasReducedMotionListener as M, prefersReducedMotion as S } from "../utils/reduced-motion/state.mjs";
-import { SubscriptionManager as C } from "../utils/subscription-manager.mjs";
-import { motionValue as b } from "../value/index.mjs";
-import { isMotionValue as h } from "../value/utils/is-motion-value.mjs";
-import { transformProps as P } from "./html/utils/transform.mjs";
-import { isControllingVariants as T, isVariantNode as w } from "./utils/is-controlling-variants.mjs";
-import { updateMotionValuesFromProps as F } from "./utils/motion-values.mjs";
-import { resolveVariantFromProps as R } from "./utils/resolve-variants.mjs";
-import { warnOnce as N } from "../utils/warn-once.mjs";
-import { featureDefinitions as d } from "../motion/features/definitions.mjs";
-import { visualElementStore as c } from "./store.mjs";
-import { KeyframeResolver as E } from "./utils/KeyframesResolver.mjs";
-import { isNumericalString as x } from "../utils/is-numerical-string.mjs";
-import { isZeroValueString as A } from "../utils/is-zero-value-string.mjs";
-import { findValueType as B } from "./dom/value-types/find.mjs";
-import { complex as j } from "../value/types/complex/index.mjs";
-import { getAnimatableNone as y } from "./dom/value-types/animatable-none.mjs";
-import { createBox as I } from "../projection/geometry/models.mjs";
-import { time as U } from "../frameloop/sync-time.mjs";
-import { frame as f, cancelFrame as m } from "../frameloop/frame.mjs";
-const V = [
+import { initPrefersReducedMotion } from "../utils/reduced-motion/index.mjs";
+import { hasReducedMotionListener, prefersReducedMotion } from "../utils/reduced-motion/state.mjs";
+import { SubscriptionManager } from "../utils/subscription-manager.mjs";
+import { motionValue } from "../value/index.mjs";
+import { isMotionValue } from "../value/utils/is-motion-value.mjs";
+import { transformProps } from "./html/utils/transform.mjs";
+import { isControllingVariants, isVariantNode } from "./utils/is-controlling-variants.mjs";
+import { updateMotionValuesFromProps } from "./utils/motion-values.mjs";
+import { resolveVariantFromProps } from "./utils/resolve-variants.mjs";
+import { warnOnce } from "../utils/warn-once.mjs";
+import { featureDefinitions } from "../motion/features/definitions.mjs";
+import { visualElementStore } from "./store.mjs";
+import { KeyframeResolver } from "./utils/KeyframesResolver.mjs";
+import { isNumericalString } from "../utils/is-numerical-string.mjs";
+import { isZeroValueString } from "../utils/is-zero-value-string.mjs";
+import { findValueType } from "./dom/value-types/find.mjs";
+import { complex } from "../value/types/complex/index.mjs";
+import { getAnimatableNone } from "./dom/value-types/animatable-none.mjs";
+import { createBox } from "../projection/geometry/models.mjs";
+import { time } from "../frameloop/sync-time.mjs";
+import { frame, cancelFrame } from "../frameloop/frame.mjs";
+const propEventHandlers = [
   "AnimationStart",
   "AnimationComplete",
   "Update",
@@ -28,7 +28,7 @@ const V = [
   "LayoutAnimationStart",
   "LayoutAnimationComplete"
 ];
-class ot {
+class VisualElement {
   /**
    * 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.
@@ -36,60 +36,155 @@ class ot {
    * This isn't an abstract method as it needs calling in the constructor, but it is
    * intended to be one.
    */
-  scrapeMotionValuesFromProps(t, e, s) {
+  scrapeMotionValuesFromProps(_props, _prevProps, _visualElement) {
     return {};
   }
-  constructor({ parent: t, props: e, presenceContext: s, reducedMotionConfig: i, blockInitialAnimation: r, visualState: n }, u = {}) {
-    this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = E, 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 o = U.now();
-      this.renderScheduledAt < o && (this.renderScheduledAt = o, f.render(this.render, !1, !0));
+  constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState }, options = {}) {
+    this.current = null;
+    this.children = /* @__PURE__ */ new Set();
+    this.isVariantNode = false;
+    this.isControllingVariants = false;
+    this.shouldReduceMotion = null;
+    this.values = /* @__PURE__ */ new Map();
+    this.KeyframeResolver = KeyframeResolver;
+    this.features = {};
+    this.valueSubscriptions = /* @__PURE__ */ new Map();
+    this.prevMotionValues = {};
+    this.events = {};
+    this.propEventSubscriptions = {};
+    this.notifyUpdate = () => this.notify("Update", this.latestValues);
+    this.render = () => {
+      if (!this.current)
+        return;
+      this.triggerBuild();
+      this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
+    };
+    this.renderScheduledAt = 0;
+    this.scheduleRender = () => {
+      const now = time.now();
+      if (this.renderScheduledAt < now) {
+        this.renderScheduledAt = now;
+        frame.render(this.render, false, true);
+      }
     };
-    const { latestValues: a, renderState: v } = n;
-    this.latestValues = a, this.baseTarget = { ...a }, this.initialValues = e.initial ? { ...a } : {}, this.renderState = v, this.parent = t, this.props = e, this.presenceContext = s, this.depth = t ? t.depth + 1 : 0, this.reducedMotionConfig = i, this.options = u, this.blockInitialAnimation = !!r, this.isControllingVariants = T(e), this.isVariantNode = w(e), this.isVariantNode && (this.variantChildren = /* @__PURE__ */ new Set()), this.manuallyAnimateOnMount = !!(t && t.current);
-    const { willChange: D, ...l } = this.scrapeMotionValuesFromProps(e, {}, this);
-    for (const o in l) {
-      const p = l[o];
-      a[o] !== void 0 && h(p) && p.set(a[o], !1);
+    const { latestValues, renderState } = visualState;
+    this.latestValues = latestValues;
+    this.baseTarget = { ...latestValues };
+    this.initialValues = props.initial ? { ...latestValues } : {};
+    this.renderState = renderState;
+    this.parent = parent;
+    this.props = props;
+    this.presenceContext = presenceContext;
+    this.depth = parent ? parent.depth + 1 : 0;
+    this.reducedMotionConfig = reducedMotionConfig;
+    this.options = options;
+    this.blockInitialAnimation = Boolean(blockInitialAnimation);
+    this.isControllingVariants = isControllingVariants(props);
+    this.isVariantNode = isVariantNode(props);
+    if (this.isVariantNode) {
+      this.variantChildren = /* @__PURE__ */ new Set();
+    }
+    this.manuallyAnimateOnMount = Boolean(parent && parent.current);
+    const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this);
+    for (const key in initialMotionValues) {
+      const value = initialMotionValues[key];
+      if (latestValues[key] !== void 0 && isMotionValue(value)) {
+        value.set(latestValues[key], false);
+      }
     }
   }
-  mount(t) {
-    this.current = t, c.set(t, this), this.projection && !this.projection.instance && this.projection.mount(t), this.parent && this.isVariantNode && !this.isControllingVariants && (this.removeFromVariantTree = this.parent.addVariantChild(this)), this.values.forEach((e, s) => this.bindToMotionValue(s, e)), M.current || g(), this.shouldReduceMotion = this.reducedMotionConfig === "never" ? !1 : this.reducedMotionConfig === "always" ? !0 : S.current, process.env.NODE_ENV !== "production" && N(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);
+  mount(instance) {
+    this.current = instance;
+    visualElementStore.set(instance, this);
+    if (this.projection && !this.projection.instance) {
+      this.projection.mount(instance);
+    }
+    if (this.parent && this.isVariantNode && !this.isControllingVariants) {
+      this.removeFromVariantTree = this.parent.addVariantChild(this);
+    }
+    this.values.forEach((value, key) => this.bindToMotionValue(key, value));
+    if (!hasReducedMotionListener.current) {
+      initPrefersReducedMotion();
+    }
+    this.shouldReduceMotion = this.reducedMotionConfig === "never" ? false : this.reducedMotionConfig === "always" ? true : prefersReducedMotion.current;
+    if (process.env.NODE_ENV !== "production") {
+      warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.");
+    }
+    if (this.parent)
+      this.parent.children.add(this);
+    this.update(this.props, this.presenceContext);
   }
   unmount() {
-    c.delete(this.current), this.projection && this.projection.unmount(), m(this.notifyUpdate), m(this.render), this.valueSubscriptions.forEach((t) => t()), this.valueSubscriptions.clear(), this.removeFromVariantTree && this.removeFromVariantTree(), this.parent && this.parent.children.delete(this);
-    for (const t in this.events)
-      this.events[t].clear();
-    for (const t in this.features) {
-      const e = this.features[t];
-      e && (e.unmount(), e.isMounted = !1);
+    visualElementStore.delete(this.current);
+    this.projection && this.projection.unmount();
+    cancelFrame(this.notifyUpdate);
+    cancelFrame(this.render);
+    this.valueSubscriptions.forEach((remove) => remove());
+    this.valueSubscriptions.clear();
+    this.removeFromVariantTree && this.removeFromVariantTree();
+    this.parent && this.parent.children.delete(this);
+    for (const key in this.events) {
+      this.events[key].clear();
+    }
+    for (const key in this.features) {
+      const feature = this.features[key];
+      if (feature) {
+        feature.unmount();
+        feature.isMounted = false;
+      }
     }
     this.current = null;
   }
-  bindToMotionValue(t, e) {
-    this.valueSubscriptions.has(t) && this.valueSubscriptions.get(t)();
-    const s = P.has(t), i = e.on("change", (u) => {
-      this.latestValues[t] = u, this.props.onUpdate && f.preRender(this.notifyUpdate), s && this.projection && (this.projection.isTransformDirty = !0);
-    }), r = e.on("renderRequest", this.scheduleRender);
-    let n;
-    window.MotionCheckAppearSync && (n = window.MotionCheckAppearSync(this, t, e)), this.valueSubscriptions.set(t, () => {
-      i(), r(), n && n(), e.owner && e.stop();
+  bindToMotionValue(key, value) {
+    if (this.valueSubscriptions.has(key)) {
+      this.valueSubscriptions.get(key)();
+    }
+    const valueIsTransform = transformProps.has(key);
+    const removeOnChange = value.on("change", (latestValue) => {
+      this.latestValues[key] = latestValue;
+      this.props.onUpdate && frame.preRender(this.notifyUpdate);
+      if (valueIsTransform && this.projection) {
+        this.projection.isTransformDirty = true;
+      }
+    });
+    const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender);
+    let removeSyncCheck;
+    if (window.MotionCheckAppearSync) {
+      removeSyncCheck = window.MotionCheckAppearSync(this, key, value);
+    }
+    this.valueSubscriptions.set(key, () => {
+      removeOnChange();
+      removeOnRenderRequest();
+      if (removeSyncCheck)
+        removeSyncCheck();
+      if (value.owner)
+        value.stop();
     });
   }
-  sortNodePosition(t) {
-    return !this.current || !this.sortInstanceNodePosition || this.type !== t.type ? 0 : this.sortInstanceNodePosition(this.current, t.current);
+  sortNodePosition(other) {
+    if (!this.current || !this.sortInstanceNodePosition || this.type !== other.type) {
+      return 0;
+    }
+    return this.sortInstanceNodePosition(this.current, other.current);
   }
   updateFeatures() {
-    let t = "animation";
-    for (t in d) {
-      const e = d[t];
-      if (!e)
+    let key = "animation";
+    for (key in featureDefinitions) {
+      const featureDefinition = featureDefinitions[key];
+      if (!featureDefinition)
         continue;
-      const { isEnabled: s, Feature: i } = e;
-      if (!this.features[t] && i && s(this.props) && (this.features[t] = new i(this)), this.features[t]) {
-        const r = this.features[t];
-        r.isMounted ? r.update() : (r.mount(), r.isMounted = !0);
+      const { isEnabled, Feature: FeatureConstructor } = featureDefinition;
+      if (!this.features[key] && FeatureConstructor && isEnabled(this.props)) {
+        this.features[key] = new FeatureConstructor(this);
+      }
+      if (this.features[key]) {
+        const feature = this.features[key];
+        if (feature.isMounted) {
+          feature.update();
+        } else {
+          feature.mount();
+          feature.isMounted = true;
+        }
       }
     }
   }
@@ -102,27 +197,42 @@ class ot {
    * removed with a re-render to work.
    */
   measureViewportBox() {
-    return this.current ? this.measureInstanceViewportBox(this.current, this.props) : I();
+    return this.current ? this.measureInstanceViewportBox(this.current, this.props) : createBox();
   }
-  getStaticValue(t) {
-    return this.latestValues[t];
+  getStaticValue(key) {
+    return this.latestValues[key];
   }
-  setStaticValue(t, e) {
-    this.latestValues[t] = e;
+  setStaticValue(key, value) {
+    this.latestValues[key] = value;
   }
   /**
    * Update the provided props. Ensure any newly-added motion values are
    * added to our map, old ones removed, and listeners updated.
    */
-  update(t, e) {
-    (t.transformTemplate || this.props.transformTemplate) && this.scheduleRender(), this.prevProps = this.props, this.props = t, this.prevPresenceContext = this.presenceContext, this.presenceContext = e;
-    for (let s = 0; s < V.length; s++) {
-      const i = V[s];
-      this.propEventSubscriptions[i] && (this.propEventSubscriptions[i](), delete this.propEventSubscriptions[i]);
-      const r = "on" + i, n = t[r];
-      n && (this.propEventSubscriptions[i] = this.on(i, n));
+  update(props, presenceContext) {
+    if (props.transformTemplate || this.props.transformTemplate) {
+      this.scheduleRender();
+    }
+    this.prevProps = this.props;
+    this.props = props;
+    this.prevPresenceContext = this.presenceContext;
+    this.presenceContext = presenceContext;
+    for (let i = 0; i < propEventHandlers.length; i++) {
+      const key = propEventHandlers[i];
+      if (this.propEventSubscriptions[key]) {
+        this.propEventSubscriptions[key]();
+        delete this.propEventSubscriptions[key];
+      }
+      const listenerName = "on" + key;
+      const listener = props[listenerName];
+      if (listener) {
+        this.propEventSubscriptions[key] = this.on(key, listener);
+      }
+    }
+    this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps, this), this.prevMotionValues);
+    if (this.handleChildMotionValue) {
+      this.handleChildMotionValue();
     }
-    this.prevMotionValues = F(this, this.scrapeMotionValuesFromProps(t, this.prevProps, this), this.prevMotionValues), this.handleChildMotionValue && this.handleChildMotionValue();
   }
   getProps() {
     return this.props;
@@ -130,8 +240,8 @@ class ot {
   /**
    * Returns the variant definition with a given name.
    */
-  getVariant(t) {
-    return this.props.variants ? this.props.variants[t] : void 0;
+  getVariant(name) {
+    return this.props.variants ? this.props.variants[name] : void 0;
   }
   /**
    * Returns the defined default transition on this component.
@@ -148,79 +258,115 @@ class ot {
   /**
    * Add a child visual element to our set of children.
    */
-  addVariantChild(t) {
-    const e = this.getClosestVariantNode();
-    if (e)
-      return e.variantChildren && e.variantChildren.add(t), () => e.variantChildren.delete(t);
+  addVariantChild(child) {
+    const closestVariantNode = this.getClosestVariantNode();
+    if (closestVariantNode) {
+      closestVariantNode.variantChildren && closestVariantNode.variantChildren.add(child);
+      return () => closestVariantNode.variantChildren.delete(child);
+    }
   }
   /**
    * Add a motion value and bind it to this visual element.
    */
-  addValue(t, e) {
-    const s = this.values.get(t);
-    e !== s && (s && this.removeValue(t), this.bindToMotionValue(t, e), this.values.set(t, e), this.latestValues[t] = e.get());
+  addValue(key, value) {
+    const existingValue = this.values.get(key);
+    if (value !== existingValue) {
+      if (existingValue)
+        this.removeValue(key);
+      this.bindToMotionValue(key, value);
+      this.values.set(key, value);
+      this.latestValues[key] = value.get();
+    }
   }
   /**
    * Remove a motion value and unbind any active subscriptions.
    */
-  removeValue(t) {
-    this.values.delete(t);
-    const e = this.valueSubscriptions.get(t);
-    e && (e(), this.valueSubscriptions.delete(t)), delete this.latestValues[t], this.removeValueFromRenderState(t, this.renderState);
+  removeValue(key) {
+    this.values.delete(key);
+    const unsubscribe = this.valueSubscriptions.get(key);
+    if (unsubscribe) {
+      unsubscribe();
+      this.valueSubscriptions.delete(key);
+    }
+    delete this.latestValues[key];
+    this.removeValueFromRenderState(key, this.renderState);
   }
   /**
    * Check whether we have a motion value for this key
    */
-  hasValue(t) {
-    return this.values.has(t);
+  hasValue(key) {
+    return this.values.has(key);
   }
-  getValue(t, e) {
-    if (this.props.values && this.props.values[t])
-      return this.props.values[t];
-    let s = this.values.get(t);
-    return s === void 0 && e !== void 0 && (s = b(e === null ? void 0 : e, { owner: this }), this.addValue(t, s)), s;
+  getValue(key, defaultValue) {
+    if (this.props.values && this.props.values[key]) {
+      return this.props.values[key];
+    }
+    let value = this.values.get(key);
+    if (value === void 0 && defaultValue !== void 0) {
+      value = motionValue(defaultValue === null ? void 0 : defaultValue, { owner: this });
+      this.addValue(key, value);
+    }
+    return value;
   }
   /**
    * If we're trying to animate to a previously unencountered value,
    * we need to check for it in our state and as a last resort read it
    * directly from the instance (which might have performance implications).
    */
-  readValue(t, e) {
-    var s;
-    let i = this.latestValues[t] !== void 0 || !this.current ? this.latestValues[t] : (s = this.getBaseTargetFromProps(this.props, t)) !== null && s !== void 0 ? s : this.readValueFromInstance(this.current, t, this.options);
-    return i != null && (typeof i == "string" && (x(i) || A(i)) ? i = parseFloat(i) : !B(i) && j.test(e) && (i = y(t, e)), this.setBaseTarget(t, h(i) ? i.get() : i)), h(i) ? i.get() : i;
+  readValue(key, target) {
+    var _a;
+    let value = this.latestValues[key] !== void 0 || !this.current ? this.latestValues[key] : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
+    if (value !== void 0 && value !== null) {
+      if (typeof value === "string" && (isNumericalString(value) || isZeroValueString(value))) {
+        value = parseFloat(value);
+      } else if (!findValueType(value) && complex.test(target)) {
+        value = getAnimatableNone(key, target);
+      }
+      this.setBaseTarget(key, isMotionValue(value) ? value.get() : value);
+    }
+    return isMotionValue(value) ? value.get() : value;
   }
   /**
    * Set the base target to later animate back to. This is currently
    * only hydrated on creation and when we first read a value.
    */
-  setBaseTarget(t, e) {
-    this.baseTarget[t] = e;
+  setBaseTarget(key, value) {
+    this.baseTarget[key] = value;
   }
   /**
    * Find the base target for a value thats been removed from all animation
    * props.
    */
-  getBaseTarget(t) {
-    var e;
-    const { initial: s } = this.props;
-    let i;
-    if (typeof s == "string" || typeof s == "object") {
-      const n = R(this.props, s, (e = this.presenceContext) === null || e === void 0 ? void 0 : e.custom);
-      n && (i = n[t]);
+  getBaseTarget(key) {
+    var _a;
+    const { initial } = this.props;
+    let valueFromInitial;
+    if (typeof initial === "string" || typeof initial === "object") {
+      const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
+      if (variant) {
+        valueFromInitial = variant[key];
+      }
+    }
+    if (initial && valueFromInitial !== void 0) {
+      return valueFromInitial;
     }
-    if (s && i !== void 0)
-      return i;
-    const r = this.getBaseTargetFromProps(this.props, t);
-    return r !== void 0 && !h(r) ? r : this.initialValues[t] !== void 0 && i === void 0 ? void 0 : this.baseTarget[t];
+    const target = this.getBaseTargetFromProps(this.props, key);
+    if (target !== void 0 && !isMotionValue(target))
+      return target;
+    return this.initialValues[key] !== void 0 && valueFromInitial === void 0 ? void 0 : this.baseTarget[key];
   }
-  on(t, e) {
-    return this.events[t] || (this.events[t] = new C()), this.events[t].add(e);
+  on(eventName, callback) {
+    if (!this.events[eventName]) {
+      this.events[eventName] = new SubscriptionManager();
+    }
+    return this.events[eventName].add(callback);
   }
-  notify(t, ...e) {
-    this.events[t] && this.events[t].notify(...e);
+  notify(eventName, ...args) {
+    if (this.events[eventName]) {
+      this.events[eventName].notify(...args);
+    }
   }
 }
 export {
-  ot as VisualElement
+  VisualElement
 };

package/dist/es/node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs

@@ -1,65 +1,101 @@
-import { isNone as h } from "../../animation/utils/is-none.mjs";
-import { getVariableValue as y } from "./utils/css-variables-conversion.mjs";
-import { isCSSVariableToken as p } from "./utils/is-css-variable.mjs";
-import { positionalKeys as g, isNumOrPxType as l, positionalValues as u } from "./utils/unit-conversion.mjs";
-import { findDimensionValueType as d } from "./value-types/dimensions.mjs";
-import { KeyframeResolver as c } from "../utils/KeyframesResolver.mjs";
-import { makeNoneKeyframesAnimatable as K } from "../html/utils/make-none-animatable.mjs";
-class b extends c {
-  constructor(e, r, n, t, o) {
-    super(e, r, n, t, o, !0);
+import { isNone } from "../../animation/utils/is-none.mjs";
+import { getVariableValue } from "./utils/css-variables-conversion.mjs";
+import { isCSSVariableToken } from "./utils/is-css-variable.mjs";
+import { positionalKeys, isNumOrPxType, positionalValues } from "./utils/unit-conversion.mjs";
+import { findDimensionValueType } from "./value-types/dimensions.mjs";
+import { KeyframeResolver } from "../utils/KeyframesResolver.mjs";
+import { makeNoneKeyframesAnimatable } from "../html/utils/make-none-animatable.mjs";
+class DOMKeyframesResolver extends KeyframeResolver {
+  constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
+    super(unresolvedKeyframes, onComplete, name, motionValue, element, true);
   }
   readKeyframes() {
-    const { unresolvedKeyframes: e, element: r, name: n } = this;
-    if (!r || !r.current)
+    const { unresolvedKeyframes, element, name } = this;
+    if (!element || !element.current)
       return;
     super.readKeyframes();
-    for (let s = 0; s < e.length; s++) {
-      let i = e[s];
-      if (typeof i == "string" && (i = i.trim(), p(i))) {
-        const m = y(i, r.current);
-        m !== void 0 && (e[s] = m), s === e.length - 1 && (this.finalKeyframe = i);
+    for (let i = 0; i < unresolvedKeyframes.length; i++) {
+      let keyframe = unresolvedKeyframes[i];
+      if (typeof keyframe === "string") {
+        keyframe = keyframe.trim();
+        if (isCSSVariableToken(keyframe)) {
+          const resolved = getVariableValue(keyframe, element.current);
+          if (resolved !== void 0) {
+            unresolvedKeyframes[i] = resolved;
+          }
+          if (i === unresolvedKeyframes.length - 1) {
+            this.finalKeyframe = keyframe;
+          }
+        }
       }
     }
-    if (this.resolveNoneKeyframes(), !g.has(n) || e.length !== 2)
+    this.resolveNoneKeyframes();
+    if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {
+      return;
+    }
+    const [origin, target] = unresolvedKeyframes;
+    const originType = findDimensionValueType(origin);
+    const targetType = findDimensionValueType(target);
+    if (originType === targetType)
       return;
-    const [t, o] = e, a = d(t), f = d(o);
-    if (a !== f)
-      if (l(a) && l(f))
-        for (let s = 0; s < e.length; s++) {
-          const i = e[s];
-          typeof i == "string" && (e[s] = parseFloat(i));
+    if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {
+      for (let i = 0; i < unresolvedKeyframes.length; i++) {
+        const value = unresolvedKeyframes[i];
+        if (typeof value === "string") {
+          unresolvedKeyframes[i] = parseFloat(value);
         }
-      else
-        this.needsMeasurement = !0;
+      }
+    } else {
+      this.needsMeasurement = true;
+    }
   }
   resolveNoneKeyframes() {
-    const { unresolvedKeyframes: e, name: r } = this, n = [];
-    for (let t = 0; t < e.length; t++)
-      h(e[t]) && n.push(t);
-    n.length && K(e, n, r);
+    const { unresolvedKeyframes, name } = this;
+    const noneKeyframeIndexes = [];
+    for (let i = 0; i < unresolvedKeyframes.length; i++) {
+      if (isNone(unresolvedKeyframes[i])) {
+        noneKeyframeIndexes.push(i);
+      }
+    }
+    if (noneKeyframeIndexes.length) {
+      makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);
+    }
   }
   measureInitialState() {
-    const { element: e, unresolvedKeyframes: r, name: n } = this;
-    if (!e || !e.current)
+    const { element, unresolvedKeyframes, name } = this;
+    if (!element || !element.current)
       return;
-    n === "height" && (this.suspendedScrollY = window.pageYOffset), this.measuredOrigin = u[n](e.measureViewportBox(), window.getComputedStyle(e.current)), r[0] = this.measuredOrigin;
-    const t = r[r.length - 1];
-    t !== void 0 && e.getValue(n, t).jump(t, !1);
+    if (name === "height") {
+      this.suspendedScrollY = window.pageYOffset;
+    }
+    this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
+    unresolvedKeyframes[0] = this.measuredOrigin;
+    const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
+    if (measureKeyframe !== void 0) {
+      element.getValue(name, measureKeyframe).jump(measureKeyframe, false);
+    }
   }
   measureEndState() {
-    var e;
-    const { element: r, name: n, unresolvedKeyframes: t } = this;
-    if (!r || !r.current)
+    var _a;
+    const { element, name, unresolvedKeyframes } = this;
+    if (!element || !element.current)
       return;
-    const o = r.getValue(n);
-    o && o.jump(this.measuredOrigin, !1);
-    const a = t.length - 1, f = t[a];
-    t[a] = u[n](r.measureViewportBox(), window.getComputedStyle(r.current)), f !== null && this.finalKeyframe === void 0 && (this.finalKeyframe = f), !((e = this.removedTransforms) === null || e === void 0) && e.length && this.removedTransforms.forEach(([s, i]) => {
-      r.getValue(s).set(i);
-    }), this.resolveNoneKeyframes();
+    const value = element.getValue(name);
+    value && value.jump(this.measuredOrigin, false);
+    const finalKeyframeIndex = unresolvedKeyframes.length - 1;
+    const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
+    unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
+    if (finalKeyframe !== null && this.finalKeyframe === void 0) {
+      this.finalKeyframe = finalKeyframe;
+    }
+    if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) {
+      this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
+        element.getValue(unsetTransformName).set(unsetTransformValue);
+      });
+    }
+    this.resolveNoneKeyframes();
   }
 }
 export {
-  b as DOMKeyframesResolver
+  DOMKeyframesResolver
 };