@tamagui/animations-motion 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/createAnimations.native.js

@@ -1,5 +1,6 @@
 "use strict";
 
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,36 +8,29 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var createAnimations_exports = {};
 __export(createAnimations_exports, {
-  createAnimations: () => createAnimations,
-  disableAnimationProps: () => disableAnimationProps
+	createAnimations: () => createAnimations,
+	disableAnimationProps: () => disableAnimationProps
 });
 module.exports = __toCommonJS(createAnimations_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -46,949 +40,1121 @@ var import_web = require("@tamagui/web");
 var import_react = require("motion/react");
 var import_react2 = __toESM(require("react"), 1);
 function _instanceof(left, right) {
-  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-    return !!right[Symbol.hasInstance](left);
-  } else {
-    return left instanceof right;
-  }
+	if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+		return !!right[Symbol.hasInstance](left);
+	} else {
+		return left instanceof right;
+	}
 }
 function _type_of(obj) {
-  "@swc/helpers - typeof";
-
-  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+	"@swc/helpers - typeof";
+	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var isServer = typeof window === "undefined";
 function useAnimateSSRSafe() {
-  if (isServer) {
-    return [(0, import_react2.useRef)(null), function () {}];
-  }
-  return (0, import_react.useAnimate)();
+	if (isServer) {
+		return [(0, import_react2.useRef)(null), function() {}];
+	}
+	return (0, import_react.useAnimate)();
 }
-var MotionValueStrategy = /* @__PURE__ */new WeakMap();
-var PendingMotionOnFinish = /* @__PURE__ */new WeakMap();
+var asStyleRecord = function(style) {
+	return style && (typeof style === "undefined" ? "undefined" : _type_of(style)) === "object" && !Array.isArray(style) ? style : {};
+};
+function assignInlineStyles(node, styles) {
+	for (var key in styles) {
+		node.style[key] = (0, import_web.normalizeValueWithProperty)(styles[key], key);
+	}
+}
+var MotionValueStrategy = /* @__PURE__ */ new WeakMap();
+var PendingMotionOnFinish = /* @__PURE__ */ new WeakMap();
 function settlePendingMotionOnFinish(mv, controls) {
-  var onFinish = PendingMotionOnFinish.get(mv);
-  if (!onFinish) return;
-  PendingMotionOnFinish.delete(mv);
-  controls.then(function () {
-    return onFinish();
-  }).catch(function () {
-    return onFinish();
-  });
+	var onFinish = PendingMotionOnFinish.get(mv);
+	if (!onFinish) return;
+	PendingMotionOnFinish.delete(mv);
+	controls.then(function() {
+		return onFinish();
+	}).catch(function() {
+		return onFinish();
+	});
 }
-var PopperPositionAnims = /* @__PURE__ */new WeakMap();
+var PopperPositionAnims = /* @__PURE__ */ new WeakMap();
 function parseTranslate(transform) {
-  if (!transform || transform === "none") return {
-    x: 0,
-    y: 0
-  };
-  try {
-    var m = new DOMMatrixReadOnly(transform);
-    if (!m.is2D || m.a !== 1 || m.b !== 0 || m.c !== 0 || m.d !== 1) return null;
-    return {
-      x: m.e,
-      y: m.f
-    };
-  } catch (e) {
-    return null;
-  }
+	if (!transform || transform === "none") return {
+		x: 0,
+		y: 0
+	};
+	try {
+		var m = new DOMMatrixReadOnly(transform);
+		if (!m.is2D || m.a !== 1 || m.b !== 0 || m.c !== 0 || m.d !== 1) return null;
+		return {
+			x: m.e,
+			y: m.f
+		};
+	} catch (e) {
+		return null;
+	}
 }
 function createAnimations(animations) {
-  var isHydratingGlobal;
-  var hydratingComponents = /* @__PURE__ */new Set();
-  return {
-    View: MotionView,
-    Text: MotionText,
-    isReactNative: false,
-    inputStyle: "css",
-    outputStyle: "inline",
-    avoidReRenders: true,
-    animations,
-    usePresence: import_use_presence.usePresence,
-    ResetPresence: import_use_presence.ResetPresence,
-    onMount() {
-      isHydratingGlobal = false;
-      hydratingComponents.forEach(function (cb) {
-        return cb();
-      });
-    },
-    useAnimations: function (animationProps) {
-      if (isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR) {
-        isHydratingGlobal = true;
-      }
-      var {
-        props,
-        style,
-        componentState,
-        stateRef,
-        useStyleEmitter,
-        presence,
-        styleProps
-      } = animationProps;
-      var animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
-      var isComponentHydrating = componentState.unmounted === true;
-      var isMounting = componentState.unmounted === "should-enter";
-      var isEntering = !!componentState.unmounted;
-      var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
-      var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
-      var refs = (0, import_react2.useRef)(null);
-      if (!refs.current) {
-        refs.current = {
-          isFirstRender: true,
-          lastDoAnimate: null,
-          lastDontAnimate: null,
-          controls: null,
-          lastAnimateAt: 0,
-          disposed: false,
-          wasExiting: false,
-          isExiting: false,
-          sendExitComplete: void 0,
-          animationState: "default",
-          frozenExitTarget: null,
-          exitCompleteScheduled: false,
-          wasEntering: false,
-          wasDisabled: false,
-          wasNoClass: !!styleProps.noClass
-        };
-      }
-      var justFinishedEntering = refs.current.wasEntering && !isEntering;
-      (0, import_react2.useEffect)(function () {
-        refs.current.wasEntering = isEntering;
-      });
-      var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
-      var disableAnimation = isComponentHydrating || isMounting || !animationKey;
-      var [scope, animate] = useAnimateSSRSafe();
-      refs.current.isExiting = isExiting;
-      refs.current.sendExitComplete = sendExitComplete;
-      refs.current.animationState = animationState;
-      var justStartedExiting = isExiting && !refs.current.wasExiting;
-      var justStoppedExiting = !isExiting && refs.current.wasExiting;
-      if (justStartedExiting || justStoppedExiting) {
-        refs.current.frozenExitTarget = null;
-        refs.current.exitCompleteScheduled = false;
-      }
-      (0, import_react2.useEffect)(function () {
-        refs.current.wasExiting = isExiting;
-      });
-      var {
-        dontAnimate = {},
-        doAnimate,
-        animationOptions
-      } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
-      var [firstRenderStyle] = (0, import_react2.useState)(style);
-      if (refs.current.isFirstRender) {
-        refs.current.lastDontAnimate = firstRenderStyle;
-      }
-      var [isHydrating, setIsHydrating] = (0, import_react2.useState)(isHydratingGlobal);
-      (0, import_react2.useLayoutEffect)(function () {
-        if (isHydratingGlobal) {
-          hydratingComponents.add(function () {
-            setIsHydrating(false);
-          });
-        }
-        return function () {
-          refs.current.disposed = true;
-        };
-      }, []);
-      var flushAnimation = function (param) {
-        var {
-          doAnimate: doAnimateRaw = {},
-          animationOptions: passedOptions = {},
-          dontAnimate: dontAnimate2
-        } = param;
-        var startedControls = null;
-        var isCurrentlyExiting = refs.current.isExiting;
-        var currentSendExitComplete = refs.current.sendExitComplete;
-        var doAnimate2 = doAnimateRaw;
-        if (isCurrentlyExiting && refs.current.frozenExitTarget) {
-          doAnimate2 = refs.current.frozenExitTarget;
-        }
-        var _props_transition;
-        var animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((_props_transition = props.transition) !== null && _props_transition !== void 0 ? _props_transition : null, "exit") : passedOptions;
-        try {
-          var node = stateRef.current.host;
-          if (refs.current.isFirstRender) {
-            refs.current.lastDontAnimate = null;
-            refs.current.lastDoAnimate = null;
-          }
-          if (process.env.NODE_ENV === "development") {
-            if (props["debug"] && props["debug"] !== "profile") {
-              console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`);
-              console.info({
-                props,
-                componentState,
-                doAnimate: doAnimate2,
-                dontAnimate: dontAnimate2,
-                animationOptions: animationOptions2,
-                animationProps,
-                lastDoAnimate: {
-                  ...refs.current.lastDoAnimate
-                },
-                lastDontAnimate: {
-                  ...refs.current.lastDontAnimate
-                },
-                isExiting,
-                style,
-                node
-              });
-              console.groupCollapsed(`trace >`);
-              console.trace();
-              console.groupEnd();
-              console.groupEnd();
-            }
-          }
-          if (!_instanceof(node, HTMLElement)) {
-            return;
-          }
-          var prevDont = refs.current.lastDontAnimate;
-          if (dontAnimate2) {
-            if (prevDont) {
-              removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
-              var changed = getDiff(prevDont, dontAnimate2);
-              if (changed) {
-                Object.assign(node.style, changed);
-              }
-            } else {
-              Object.assign(node.style, dontAnimate2);
-            }
-          }
-          if (doAnimate2) {
-            if (prevDont) {
-              for (var key in prevDont) {
-                if (key in doAnimate2) {
-                  node.style[key] = prevDont[key];
-                  if (refs.current.lastDoAnimate) {
-                    refs.current.lastDoAnimate[key] = prevDont[key];
-                  }
-                }
-              }
-            }
-            var lastAnimated = refs.current.lastDoAnimate;
-            if (lastAnimated) {
-              removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
-            }
-            var diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
-            if (diff) {
-              if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
-                refs.current.frozenExitTarget = {
-                  ...doAnimate2
-                };
-              }
-              var isPopperPosition = node.hasAttribute("data-popper-animate-position");
-              var popperHandledTransform = false;
-              if (isPopperPosition && !isCurrentlyExiting && typeof diff.transform === "string") {
-                var target = parseTranslate(diff.transform);
-                if (target) {
-                  var entry = PopperPositionAnims.get(node);
-                  if (!entry) {
-                    var seed = target;
-                    try {
-                      var _parseTranslate;
-                      seed = (_parseTranslate = parseTranslate(getComputedStyle(node).transform)) !== null && _parseTranslate !== void 0 ? _parseTranslate : target;
-                    } catch (e) {}
-                    var x = (0, import_react.motionValue)(seed.x);
-                    var y = (0, import_react.motionValue)(seed.y);
-                    var write = function () {
-                      node.style.transform = `translate3d(${x.get()}px, ${y.get()}px, 0)`;
-                    };
-                    x.on("change", write);
-                    y.on("change", write);
-                    entry = {
-                      x,
-                      y,
-                      stop: null
-                    };
-                    PopperPositionAnims.set(node, entry);
-                  }
-                  if (!entry.stop) {
-                    try {
-                      var live = parseTranslate(getComputedStyle(node).transform);
-                      if (live) {
-                        entry.x.jump(live.x);
-                        entry.y.jump(live.y);
-                      }
-                    } catch (e) {}
-                  }
-                  var _iteratorNormalCompletion = true,
-                    _didIteratorError = false,
-                    _iteratorError = void 0;
-                  try {
-                    for (var _iterator = node.getAnimations()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                      var anim = _step.value;
-                      try {
-                        var _anim_effect_getKeyframes, _anim_effect;
-                        var kf = (_anim_effect = anim.effect) === null || _anim_effect === void 0 ? void 0 : (_anim_effect_getKeyframes = _anim_effect.getKeyframes) === null || _anim_effect_getKeyframes === void 0 ? void 0 : _anim_effect_getKeyframes.call(_anim_effect);
-                        if (kf === null || kf === void 0 ? void 0 : kf.some(function (k) {
-                          return "transform" in k;
-                        })) {
-                          anim.cancel();
-                        }
-                      } catch (e) {}
-                    }
-                  } catch (err) {
-                    _didIteratorError = true;
-                    _iteratorError = err;
-                  } finally {
-                    try {
-                      if (!_iteratorNormalCompletion && _iterator.return != null) {
-                        _iterator.return();
-                      }
-                    } finally {
-                      if (_didIteratorError) {
-                        throw _iteratorError;
-                      }
-                    }
-                  }
-                  var opts = animationOptions2;
-                  var _opts_transform, _ref;
-                  var positionTransition = (_ref = (_opts_transform = opts.transform) !== null && _opts_transform !== void 0 ? _opts_transform : opts.default) !== null && _ref !== void 0 ? _ref : animationOptions2;
-                  var cx = (0, import_react.animate)(entry.x, target.x, positionTransition);
-                  var cy = (0, import_react.animate)(entry.y, target.y, positionTransition);
-                  entry.stop = function () {
-                    cx.stop();
-                    cy.stop();
-                  };
-                  popperHandledTransform = true;
-                }
-              }
-              if (isCurrentlyExiting) {
-                var entry1 = PopperPositionAnims.get(node);
-                if (entry1 === null || entry1 === void 0 ? void 0 : entry1.stop) {
-                  entry1.stop();
-                  entry1.stop = null;
-                }
-              }
-              var midFlightValues = null;
-              if (refs.current.controls) {
-                try {
-                  var computed = getComputedStyle(node);
-                  midFlightValues = {};
-                  for (var key1 in diff) {
-                    var val = computed[key1];
-                    if (val !== void 0 && val !== "") {
-                      midFlightValues[key1] = val;
-                    }
-                  }
-                } catch (e) {}
-                if (isCurrentlyExiting) {
-                  refs.current.controls.stop();
-                }
-                if (midFlightValues) {
-                  for (var key2 in midFlightValues) {
-                    if (key2 === "transform" && popperHandledTransform) continue;
-                    node.style[key2] = midFlightValues[key2];
-                  }
-                }
-                if (isPopperPosition && !popperHandledTransform) {
-                  var anims = node.getAnimations();
-                  var _iteratorNormalCompletion1 = true,
-                    _didIteratorError1 = false,
-                    _iteratorError1 = void 0;
-                  try {
-                    for (var _iterator1 = anims[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
-                      var anim1 = _step1.value;
-                      anim1.cancel();
-                    }
-                  } catch (err) {
-                    _didIteratorError1 = true;
-                    _iteratorError1 = err;
-                  } finally {
-                    try {
-                      if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
-                        _iterator1.return();
-                      }
-                    } finally {
-                      if (_didIteratorError1) {
-                        throw _iteratorError1;
-                      }
-                    }
-                  }
-                }
-              }
-              var fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
-              var waapiDiff = fixedDiff;
-              if (popperHandledTransform && "transform" in waapiDiff) {
-                waapiDiff = {
-                  ...waapiDiff
-                };
-                delete waapiDiff.transform;
-              }
-              if ((isPopperPosition || isCurrentlyExiting) && (midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && waapiDiff.transform) {
-                waapiDiff.transform = [midFlightValues.transform, waapiDiff.transform];
-              }
-              if (Object.keys(waapiDiff).length > 0) {
-                startedControls = animate(scope.current, waapiDiff, animationOptions2);
-                refs.current.controls = startedControls;
-              }
-              refs.current.lastAnimateAt = Date.now();
-            }
-          }
-          refs.current.lastDontAnimate = dontAnimate2 ? {
-            ...dontAnimate2
-          } : {};
-          refs.current.lastDoAnimate = doAnimate2 ? {
-            ...doAnimate2
-          } : {};
-        } finally {
-          if (isCurrentlyExiting && currentSendExitComplete) {
-            if (startedControls) {
-              refs.current.exitCompleteScheduled = true;
-              startedControls.finished.then(function () {
-                if (refs.current.isExiting) {
-                  currentSendExitComplete();
-                }
-              }).catch(function () {
-                if (refs.current.isExiting) {
-                  currentSendExitComplete();
-                }
-              });
-            } else if (!refs.current.exitCompleteScheduled) {
-              currentSendExitComplete();
-            }
-          }
-        }
-      };
-      useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle, effectiveTransition) {
-        var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
-        flushAnimation(_$animationProps);
-      });
-      (0, import_web.useIsomorphicLayoutEffect)(function () {
-        if (refs.current.isFirstRender) {
-          refs.current.isFirstRender = false;
-          refs.current.wasDisabled = disableAnimation;
-          if (isHydrating) {
-            if (doAnimate && Object.keys(doAnimate).length > 0) {
-              refs.current.lastDoAnimate = {
-                ...doAnimate
-              };
-            } else {
-              refs.current.lastDoAnimate = dontAnimate ? {
-                ...dontAnimate
-              } : {};
-            }
-            refs.current.lastDontAnimate = dontAnimate ? {
-              ...dontAnimate
-            } : {};
-            refs.current.lastAnimateAt = Date.now();
-            return;
-          }
-          refs.current.lastDontAnimate = dontAnimate ? {
-            ...dontAnimate
-          } : {};
-          refs.current.lastDoAnimate = doAnimate ? {
-            ...doAnimate
-          } : {};
-          return;
-        }
-        var justEnabled = refs.current.wasDisabled && !disableAnimation;
-        refs.current.wasDisabled = disableAnimation;
-        var justStrippedClasses = !refs.current.wasNoClass && !!styleProps.noClass;
-        refs.current.wasNoClass = !!styleProps.noClass;
-        if ((justEnabled || justStrippedClasses) && animationState !== "enter") {
-          var node = stateRef.current.host;
-          if (_instanceof(node, HTMLElement)) {
-            if (dontAnimate) Object.assign(node.style, dontAnimate);
-            if (doAnimate) Object.assign(node.style, doAnimate);
-            var entry = PopperPositionAnims.get(node);
-            if (entry) {
-              var _doAnimate_transform;
-              var target = parseTranslate((_doAnimate_transform = doAnimate === null || doAnimate === void 0 ? void 0 : doAnimate.transform) !== null && _doAnimate_transform !== void 0 ? _doAnimate_transform : dontAnimate === null || dontAnimate === void 0 ? void 0 : dontAnimate.transform);
-              if (target) {
-                var _entry_stop;
-                (_entry_stop = entry.stop) === null || _entry_stop === void 0 ? void 0 : _entry_stop.call(entry);
-                entry.stop = null;
-                entry.x.jump(target.x);
-                entry.y.jump(target.y);
-              }
-            }
-          }
-          refs.current.lastDontAnimate = dontAnimate ? {
-            ...dontAnimate
-          } : {};
-          refs.current.lastDoAnimate = doAnimate ? {
-            ...doAnimate
-          } : {};
-          return;
-        }
-        flushAnimation({
-          doAnimate,
-          dontAnimate,
-          animationOptions
-        });
-      }, [style, isExiting, disableAnimation, styleProps.noClass]);
-      if (process.env.NODE_ENV === "development") {
-        if (props["debug"] && props["debug"] !== "profile") {
-          console.groupCollapsed(`[motion] render`);
-          console.info({
-            style,
-            doAnimate,
-            dontAnimate,
-            scope,
-            animationOptions,
-            isExiting,
-            isFirstRender: refs.current.isFirstRender,
-            animationProps
-          });
-          console.groupEnd();
-        }
-      }
-      return {
-        style: firstRenderStyle,
-        ref: scope,
-        render: "div"
-      };
-    },
-    useAnimatedNumber(initial) {
-      var motionValue2 = (0, import_react.useMotionValue)(initial);
-      return import_react2.default.useMemo(function () {
-        return {
-          getInstance() {
-            return motionValue2;
-          },
-          getValue() {
-            return motionValue2.get();
-          },
-          setValue(next) {
-            var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
-                type: "spring"
-              },
-              onFinish = arguments.length > 2 ? arguments[2] : void 0;
-            if (config.type === "direct") {
-              MotionValueStrategy.set(motionValue2, {
-                type: "direct"
-              });
-              motionValue2.set(next);
-              onFinish === null || onFinish === void 0 ? void 0 : onFinish();
-              return;
-            }
-            MotionValueStrategy.set(motionValue2, config);
-            if (onFinish) {
-              var prior = PendingMotionOnFinish.get(motionValue2);
-              if (prior) {
-                PendingMotionOnFinish.delete(motionValue2);
-                prior();
-              }
-              PendingMotionOnFinish.set(motionValue2, onFinish);
-            }
-            motionValue2.set(next);
-          },
-          stop() {
-            motionValue2.stop();
-          }
-        };
-      }, [motionValue2]);
-    },
-    useAnimatedNumberReaction(param, onValue) {
-      var {
-        value
-      } = param;
-      var instance = value.getInstance();
-      (0, import_react.useMotionValueEvent)(instance, "change", onValue);
-    },
-    useAnimatedNumberStyle(val, getStyleProp) {
-      var motionValue2 = val.getInstance();
-      var getStyleRef = (0, import_react2.useRef)(getStyleProp);
-      getStyleRef.current = getStyleProp;
-      return (0, import_react2.useMemo)(function () {
-        return {
-          getStyle: function (cur) {
-            return getStyleRef.current(cur);
-          },
-          motionValue: motionValue2
-        };
-      }, []);
-    },
-    useAnimatedNumbersStyle(vals, getStyleProp) {
-      var motionValues = vals.map(function (v) {
-        return v.getInstance();
-      });
-      var getStyleRef = (0, import_react2.useRef)(getStyleProp);
-      getStyleRef.current = getStyleProp;
-      return (0, import_react2.useMemo)(function () {
-        return {
-          getStyle: function () {
-            for (var _len = arguments.length, currentValues = new Array(_len), _key = 0; _key < _len; _key++) {
-              currentValues[_key] = arguments[_key];
-            }
-            return getStyleRef.current(...currentValues);
-          },
-          motionValues
-        };
-      }, []);
-    }
-  };
-  function getMotionAnimatedProps(props, style, disable) {
-    var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default",
-      transitionOverride = arguments.length > 4 ? arguments[4] : void 0;
-    if (disable) {
-      return {
-        dontAnimate: style
-      };
-    }
-    var _ref;
-    var animationOptions = getAnimationOptions((_ref = transitionOverride !== null && transitionOverride !== void 0 ? transitionOverride : props.transition) !== null && _ref !== void 0 ? _ref : null, animationState);
-    var dontAnimate;
-    var doAnimate;
-    var animateOnly = props.animateOnly;
-    for (var key in style) {
-      var value = style[key];
-      if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
-        dontAnimate || (dontAnimate = {});
-        dontAnimate[key] = value;
-      } else {
-        doAnimate || (doAnimate = {});
-        doAnimate[key] = value;
-      }
-    }
-    return {
-      dontAnimate,
-      doAnimate,
-      animationOptions
-    };
-  }
-  function getAnimationOptions(transitionProp) {
-    var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
-    var normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp);
-    var effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-    if (!effectiveKey && animationState === "default") {
-      effectiveKey = normalized.enter || normalized.exit || null;
-    }
-    var globalConfigOverride = normalized.config ? {
-      ...normalized.config
-    } : void 0;
-    if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
-      return {};
-    }
-    var defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
-    var delay = normalized.delay;
-    var result = {};
-    if (defaultConfig) {
-      Object.assign(result, defaultConfig);
-    }
-    if (globalConfigOverride) {
-      Object.assign(result, globalConfigOverride);
-      if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
-        result.type = "tween";
-      }
-    }
-    if (delay) {
-      result.delay = delay;
-    }
-    if (defaultConfig || globalConfigOverride || delay) {
-      result.default = {
-        ...defaultConfig,
-        ...globalConfigOverride,
-        ...(delay ? {
-          delay
-        } : null)
-      };
-    }
-    var _iteratorNormalCompletion = true,
-      _didIteratorError = false,
-      _iteratorError = void 0;
-    try {
-      for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var [propName, animationNameOrConfig] = _step.value;
-        if (typeof animationNameOrConfig === "string") {
-          result[propName] = withInferredType(animations[animationNameOrConfig]);
-        } else if (animationNameOrConfig && (typeof animationNameOrConfig === "undefined" ? "undefined" : _type_of(animationNameOrConfig)) === "object") {
-          var baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
-          result[propName] = {
-            ...baseConfig,
-            ...animationNameOrConfig
-          };
-        }
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return != null) {
-          _iterator.return();
-        }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
-        }
-      }
-    }
-    convertMsToS(result);
-    convertMsToS(result.default);
-    for (var key in result) {
-      if (key !== "default" && _type_of(result[key]) === "object") {
-        convertMsToS(result[key]);
-      }
-    }
-    return result;
-  }
+	var isHydratingGlobal;
+	var hydratingComponents = /* @__PURE__ */ new Set();
+	return {
+		View: MotionView,
+		Text: MotionText,
+		isReactNative: false,
+		inputStyle: "css",
+		outputStyle: "inline",
+		avoidReRenders: true,
+		animations,
+		usePresence: import_use_presence.usePresence,
+		ResetPresence: import_use_presence.ResetPresence,
+		onMount() {
+			isHydratingGlobal = false;
+			hydratingComponents.forEach(function(cb) {
+				return cb();
+			});
+		},
+		useAnimations: function(animationProps) {
+			if (isHydratingGlobal === void 0 && !(0, import_web.getConfig)().settings.disableSSR) {
+				isHydratingGlobal = true;
+			}
+			var { props, style, componentState, stateRef, useStyleEmitter, presence, onTransition, styleProps } = animationProps;
+			var animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
+			var isComponentHydrating = componentState.unmounted === true;
+			var isMounting = componentState.unmounted === "should-enter";
+			var isEntering = !!componentState.unmounted;
+			var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
+			var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
+			var refs = (0, import_react2.useRef)(null);
+			if (!refs.current) {
+				refs.current = {
+					isFirstRender: true,
+					lastDoAnimate: null,
+					lastDontAnimate: null,
+					controls: null,
+					lastAnimateAt: 0,
+					disposed: false,
+					wasExiting: false,
+					isExiting: false,
+					sendExitComplete: void 0,
+					animationState: "default",
+					frozenExitTarget: null,
+					exitCompleteScheduled: false,
+					enterCompleteScheduled: false,
+					disableAnimation: true,
+					wasEntering: false,
+					wasDisabled: false,
+					onTransition: void 0,
+					enterStarted: false,
+					exitStarted: false,
+					updateInFlight: false,
+					updateControls: null,
+					wasNoClass: !!styleProps.noClass
+				};
+			}
+			var emit = function(phase, cause, finished) {
+				var _refs_current_onTransition, _refs_current;
+				(_refs_current_onTransition = (_refs_current = refs.current).onTransition) === null || _refs_current_onTransition === void 0 ? void 0 : _refs_current_onTransition.call(_refs_current, phase === "end" ? {
+					phase,
+					cause,
+					finished
+				} : {
+					phase,
+					cause
+				});
+			};
+			var justFinishedEntering = refs.current.wasEntering && !isEntering;
+			(0, import_react2.useEffect)(function() {
+				refs.current.wasEntering = isEntering;
+			});
+			var animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
+			var disableAnimation = isComponentHydrating || isMounting || !animationKey;
+			var [scope] = useAnimateSSRSafe();
+			refs.current.isExiting = isExiting;
+			refs.current.sendExitComplete = sendExitComplete;
+			refs.current.animationState = animationState;
+			refs.current.disableAnimation = disableAnimation;
+			refs.current.onTransition = onTransition;
+			var justStartedExiting = isExiting && !refs.current.wasExiting;
+			var justStoppedExiting = !isExiting && refs.current.wasExiting;
+			if (justStartedExiting || justStoppedExiting) {
+				refs.current.frozenExitTarget = null;
+				refs.current.exitCompleteScheduled = false;
+				refs.current.enterCompleteScheduled = false;
+			}
+			(0, import_react2.useEffect)(function() {
+				refs.current.wasExiting = isExiting;
+			});
+			(0, import_web.useIsomorphicLayoutEffect)(function() {
+				if (justStoppedExiting && refs.current.exitStarted) {
+					refs.current.exitStarted = false;
+					emit("end", "exit", false);
+				}
+			}, [justStoppedExiting]);
+			var { dontAnimate = {}, doAnimate, animationOptions } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
+			var [firstRenderStyle] = (0, import_react2.useState)(style);
+			if (refs.current.isFirstRender) {
+				refs.current.lastDontAnimate = firstRenderStyle;
+			}
+			var [isHydrating, setIsHydrating] = (0, import_react2.useState)(isHydratingGlobal);
+			(0, import_react2.useLayoutEffect)(function() {
+				if (isHydratingGlobal) {
+					hydratingComponents.add(function() {
+						setIsHydrating(false);
+					});
+				}
+				return function() {
+					refs.current.disposed = true;
+				};
+			}, []);
+			var flushAnimation = function(param) {
+				var { doAnimate: doAnimateRaw = {}, animationOptions: passedOptions = {}, dontAnimate: dontAnimate2 } = param;
+				var startedControls = null;
+				var isCurrentlyExiting = refs.current.isExiting;
+				var currentSendExitComplete = refs.current.sendExitComplete;
+				var currentAnimationState = refs.current.animationState;
+				var doAnimate2 = doAnimateRaw;
+				if (isCurrentlyExiting && refs.current.frozenExitTarget) {
+					doAnimate2 = refs.current.frozenExitTarget;
+				}
+				var _props_transition;
+				var animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions((_props_transition = props.transition) !== null && _props_transition !== void 0 ? _props_transition : null, "exit") : passedOptions;
+				try {
+					var node = stateRef.current.host;
+					if (refs.current.isFirstRender) {
+						refs.current.lastDontAnimate = null;
+						refs.current.lastDoAnimate = null;
+					}
+					if (process.env.NODE_ENV === "development") {
+						if (props["debug"] && props["debug"] !== "profile") {
+							console.groupCollapsed(`[motion] animate (${JSON.stringify(getDiff(refs.current.lastDoAnimate, doAnimate2), null, 2)})`);
+							console.info({
+								props,
+								componentState,
+								doAnimate: doAnimate2,
+								dontAnimate: dontAnimate2,
+								animationOptions: animationOptions2,
+								animationProps,
+								lastDoAnimate: { ...refs.current.lastDoAnimate },
+								lastDontAnimate: { ...refs.current.lastDontAnimate },
+								isExiting,
+								style,
+								node
+							});
+							console.groupCollapsed(`trace >`);
+							console.trace();
+							console.groupEnd();
+							console.groupEnd();
+						}
+					}
+					if (!_instanceof(node, HTMLElement)) {
+						return;
+					}
+					var prevDont = refs.current.lastDontAnimate;
+					if (dontAnimate2) {
+						if (prevDont) {
+							removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
+							var changed = getDiff(prevDont, dontAnimate2);
+							if (changed) {
+								assignInlineStyles(node, changed);
+							}
+						} else {
+							assignInlineStyles(node, dontAnimate2);
+						}
+					}
+					if (doAnimate2) {
+						if (prevDont) {
+							for (var key in prevDont) {
+								if (key in doAnimate2) {
+									node.style[key] = (0, import_web.normalizeValueWithProperty)(prevDont[key], key);
+									if (refs.current.lastDoAnimate) {
+										refs.current.lastDoAnimate[key] = prevDont[key];
+									}
+								}
+							}
+						}
+						var lastAnimated = refs.current.lastDoAnimate;
+						if (lastAnimated) {
+							removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
+						}
+						var diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
+						if (diff) {
+							if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
+								refs.current.frozenExitTarget = { ...doAnimate2 };
+							}
+							var isPopperPosition = node.hasAttribute("data-popper-animate-position");
+							var popperHandledTransform = false;
+							if (isPopperPosition && !isCurrentlyExiting && typeof diff.transform === "string") {
+								var target = parseTranslate(diff.transform);
+								if (target) {
+									var entry = PopperPositionAnims.get(node);
+									if (!entry) {
+										var seed = target;
+										try {
+											var _parseTranslate;
+											seed = (_parseTranslate = parseTranslate(getComputedStyle(node).transform)) !== null && _parseTranslate !== void 0 ? _parseTranslate : target;
+										} catch (e) {}
+										var x = (0, import_react.motionValue)(seed.x);
+										var y = (0, import_react.motionValue)(seed.y);
+										var write = function() {
+											node.style.transform = `translate3d(${x.get()}px, ${y.get()}px, 0)`;
+										};
+										x.on("change", write);
+										y.on("change", write);
+										entry = {
+											x,
+											y,
+											stop: null
+										};
+										PopperPositionAnims.set(node, entry);
+									}
+									if (!entry.stop) {
+										try {
+											var live = parseTranslate(getComputedStyle(node).transform);
+											if (live) {
+												entry.x.jump(live.x);
+												entry.y.jump(live.y);
+											}
+										} catch (e) {}
+									}
+									var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+									try {
+										for (var _iterator = node.getAnimations()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+											var anim = _step.value;
+											try {
+												var _anim_effect_getKeyframes, _anim_effect;
+												var kf = (_anim_effect = anim.effect) === null || _anim_effect === void 0 ? void 0 : (_anim_effect_getKeyframes = _anim_effect.getKeyframes) === null || _anim_effect_getKeyframes === void 0 ? void 0 : _anim_effect_getKeyframes.call(_anim_effect);
+												if (kf === null || kf === void 0 ? void 0 : kf.some(function(k) {
+													return "transform" in k;
+												})) {
+													anim.cancel();
+												}
+											} catch (e) {}
+										}
+									} catch (err) {
+										_didIteratorError = true;
+										_iteratorError = err;
+									} finally {
+										try {
+											if (!_iteratorNormalCompletion && _iterator.return != null) {
+												_iterator.return();
+											}
+										} finally {
+											if (_didIteratorError) {
+												throw _iteratorError;
+											}
+										}
+									}
+									var opts = animationOptions2;
+									var _opts_transform, _ref;
+									var positionTransition = (_ref = (_opts_transform = opts.transform) !== null && _opts_transform !== void 0 ? _opts_transform : opts.default) !== null && _ref !== void 0 ? _ref : animationOptions2;
+									var cx = (0, import_react.animate)(entry.x, target.x, positionTransition);
+									var cy = (0, import_react.animate)(entry.y, target.y, positionTransition);
+									entry.stop = function() {
+										cx.stop();
+										cy.stop();
+									};
+									popperHandledTransform = true;
+								}
+							}
+							if (isCurrentlyExiting) {
+								var entry1 = PopperPositionAnims.get(node);
+								if (entry1 === null || entry1 === void 0 ? void 0 : entry1.stop) {
+									entry1.stop();
+									entry1.stop = null;
+								}
+							}
+							var midFlightValues = null;
+							if (refs.current.controls) {
+								try {
+									var computed = getComputedStyle(node);
+									midFlightValues = {};
+									for (var key1 in diff) {
+										var val = computed[key1];
+										if (val !== void 0 && val !== "") {
+											midFlightValues[key1] = val;
+										}
+									}
+								} catch (e) {}
+								if (isCurrentlyExiting) {
+									refs.current.controls.stop();
+								}
+								if (midFlightValues) {
+									for (var key2 in midFlightValues) {
+										if (key2 === "transform" && popperHandledTransform) continue;
+										node.style[key2] = midFlightValues[key2];
+									}
+								}
+								if (isPopperPosition && !popperHandledTransform) {
+									var anims = node.getAnimations();
+									var _iteratorNormalCompletion1 = true, _didIteratorError1 = false, _iteratorError1 = void 0;
+									try {
+										for (var _iterator1 = anims[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+											var anim1 = _step1.value;
+											anim1.cancel();
+										}
+									} catch (err) {
+										_didIteratorError1 = true;
+										_iteratorError1 = err;
+									} finally {
+										try {
+											if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+												_iterator1.return();
+											}
+										} finally {
+											if (_didIteratorError1) {
+												throw _iteratorError1;
+											}
+										}
+									}
+								}
+							}
+							var fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
+							var waapiDiff = Object.fromEntries(Object.entries(fixedDiff).map(function(param2) {
+								var [key3, value] = param2;
+								return [key3, Array.isArray(value) ? value.map(function(item) {
+									return (0, import_web.normalizeValueWithProperty)(item, key3);
+								}) : (0, import_web.normalizeValueWithProperty)(value, key3)];
+							}));
+							if (popperHandledTransform && "transform" in waapiDiff) {
+								waapiDiff = { ...waapiDiff };
+								delete waapiDiff.transform;
+							}
+							if ((isPopperPosition || isCurrentlyExiting) && (midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && waapiDiff.transform) {
+								waapiDiff.transform = [midFlightValues.transform, waapiDiff.transform];
+							}
+							if (Object.keys(waapiDiff).length > 0) {
+								startedControls = (0, import_react.animate)(node, waapiDiff, animationOptions2);
+								refs.current.controls = startedControls;
+							}
+							refs.current.lastAnimateAt = Date.now();
+						}
+					}
+					refs.current.lastDontAnimate = dontAnimate2 ? { ...dontAnimate2 } : {};
+					refs.current.lastDoAnimate = doAnimate2 ? { ...doAnimate2 } : {};
+				} finally {
+					if (isCurrentlyExiting && currentSendExitComplete) {
+						if (refs.current.enterStarted) {
+							refs.current.enterStarted = false;
+							emit("end", "enter", false);
+						}
+						if (startedControls) {
+							if (!refs.current.exitStarted) {
+								refs.current.exitStarted = true;
+								emit("start", "exit");
+							}
+							refs.current.exitCompleteScheduled = true;
+							var complete = function(finished) {
+								if (!refs.current.isExiting) return;
+								if (refs.current.exitStarted) {
+									refs.current.exitStarted = false;
+									emit("end", "exit", finished);
+								}
+								currentSendExitComplete();
+							};
+							startedControls.finished.then(function() {
+								return complete(true);
+							}).catch(function() {
+								return complete(false);
+							});
+						} else if (!refs.current.exitCompleteScheduled) {
+							emit("start", "exit");
+							emit("end", "exit", true);
+							currentSendExitComplete();
+						}
+					} else if (currentAnimationState === "enter") {
+						if (startedControls) {
+							if (!refs.current.enterStarted) {
+								refs.current.enterStarted = true;
+								emit("start", "enter");
+							}
+							refs.current.enterCompleteScheduled = true;
+							var complete1 = function(finished) {
+								if (refs.current.disposed || refs.current.animationState !== "enter") return;
+								if (refs.current.enterStarted) {
+									refs.current.enterStarted = false;
+									emit("end", "enter", finished);
+								}
+							};
+							startedControls.finished.then(function() {
+								return complete1(true);
+							}).catch(function() {
+								return complete1(false);
+							});
+						} else if (!refs.current.enterCompleteScheduled && !refs.current.disableAnimation) {
+							emit("start", "enter");
+							emit("end", "enter", true);
+						}
+					} else if (startedControls) {
+						var controls = startedControls;
+						if (refs.current.updateInFlight) {
+							emit("end", "update", false);
+						}
+						refs.current.updateInFlight = true;
+						refs.current.updateControls = controls;
+						emit("start", "update");
+						var settle = function(finished) {
+							if (refs.current.updateControls !== controls) return;
+							refs.current.updateInFlight = false;
+							refs.current.updateControls = null;
+							emit("end", "update", finished);
+						};
+						controls.finished.then(function() {
+							return settle(true);
+						}).catch(function() {
+							return settle(false);
+						});
+					}
+				}
+			};
+			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, effectiveTransition) {
+				var _$animationProps = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
+				flushAnimation(_$animationProps);
+			});
+			(0, import_web.useIsomorphicLayoutEffect)(function() {
+				if (refs.current.isFirstRender) {
+					refs.current.isFirstRender = false;
+					refs.current.wasDisabled = disableAnimation;
+					if (isHydrating) {
+						if (doAnimate && Object.keys(doAnimate).length > 0) {
+							refs.current.lastDoAnimate = { ...doAnimate };
+						} else {
+							refs.current.lastDoAnimate = dontAnimate ? { ...dontAnimate } : {};
+						}
+						refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+						refs.current.lastAnimateAt = Date.now();
+						return;
+					}
+					refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+					refs.current.lastDoAnimate = doAnimate ? { ...doAnimate } : {};
+					return;
+				}
+				var justEnabled = refs.current.wasDisabled && !disableAnimation;
+				refs.current.wasDisabled = disableAnimation;
+				var justStrippedClasses = !refs.current.wasNoClass && !!styleProps.noClass;
+				refs.current.wasNoClass = !!styleProps.noClass;
+				if ((justEnabled || justStrippedClasses) && animationState !== "enter") {
+					var node = stateRef.current.host;
+					if (_instanceof(node, HTMLElement)) {
+						if (dontAnimate) assignInlineStyles(node, dontAnimate);
+						if (doAnimate) assignInlineStyles(node, doAnimate);
+						var entry = PopperPositionAnims.get(node);
+						if (entry) {
+							var _doAnimate_transform;
+							var target = parseTranslate((_doAnimate_transform = doAnimate === null || doAnimate === void 0 ? void 0 : doAnimate.transform) !== null && _doAnimate_transform !== void 0 ? _doAnimate_transform : dontAnimate === null || dontAnimate === void 0 ? void 0 : dontAnimate.transform);
+							if (target) {
+								var _entry_stop;
+								(_entry_stop = entry.stop) === null || _entry_stop === void 0 ? void 0 : _entry_stop.call(entry);
+								entry.stop = null;
+								entry.x.jump(target.x);
+								entry.y.jump(target.y);
+							}
+						}
+					}
+					refs.current.lastDontAnimate = dontAnimate ? { ...dontAnimate } : {};
+					refs.current.lastDoAnimate = doAnimate ? { ...doAnimate } : {};
+					return;
+				}
+				flushAnimation({
+					doAnimate,
+					dontAnimate,
+					animationOptions
+				});
+			}, [
+				style,
+				isExiting,
+				disableAnimation,
+				styleProps.noClass
+			]);
+			if (process.env.NODE_ENV === "development") {
+				if (props["debug"] && props["debug"] !== "profile") {
+					console.groupCollapsed(`[motion] render`);
+					console.info({
+						style,
+						doAnimate,
+						dontAnimate,
+						scope,
+						animationOptions,
+						isExiting,
+						isFirstRender: refs.current.isFirstRender,
+						animationProps
+					});
+					console.groupEnd();
+				}
+			}
+			return {
+				style: firstRenderStyle,
+				ref: scope,
+				render: "div"
+			};
+		},
+		useAnimatedNumber(initial) {
+			var motionValue2 = (0, import_react.useMotionValue)(initial);
+			return import_react2.default.useMemo(function() {
+				return {
+					getInstance() {
+						return motionValue2;
+					},
+					getValue() {
+						return motionValue2.get();
+					},
+					setValue(next) {
+						var config = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { type: "spring" }, onFinish = arguments.length > 2 ? arguments[2] : void 0;
+						if (config.type === "direct") {
+							MotionValueStrategy.set(motionValue2, { type: "direct" });
+							motionValue2.set(next);
+							onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+							return;
+						}
+						MotionValueStrategy.set(motionValue2, config);
+						if (onFinish) {
+							var prior = PendingMotionOnFinish.get(motionValue2);
+							if (prior) {
+								PendingMotionOnFinish.delete(motionValue2);
+								prior();
+							}
+							PendingMotionOnFinish.set(motionValue2, onFinish);
+						}
+						motionValue2.set(next);
+					},
+					stop() {
+						motionValue2.stop();
+					}
+				};
+			}, [motionValue2]);
+		},
+		useAnimatedNumberReaction(param, onValue) {
+			var { value } = param;
+			var instance = value.getInstance();
+			(0, import_react.useMotionValueEvent)(instance, "change", onValue);
+		},
+		useAnimatedNumberStyle(val, getStyleProp) {
+			var motionValue2 = val.getInstance();
+			var getStyleRef = (0, import_react2.useRef)(getStyleProp);
+			getStyleRef.current = getStyleProp;
+			return (0, import_react2.useMemo)(function() {
+				return {
+					getStyle: function(cur) {
+						return getStyleRef.current(cur);
+					},
+					motionValue: motionValue2
+				};
+			}, []);
+		},
+		useAnimatedNumbersStyle(vals, getStyleProp) {
+			var motionValues = vals.map(function(v) {
+				return v.getInstance();
+			});
+			var getStyleRef = (0, import_react2.useRef)(getStyleProp);
+			getStyleRef.current = getStyleProp;
+			return (0, import_react2.useMemo)(function() {
+				return {
+					getStyle: function() {
+						for (var _len = arguments.length, currentValues = new Array(_len), _key = 0; _key < _len; _key++) {
+							currentValues[_key] = arguments[_key];
+						}
+						return getStyleRef.current(...currentValues);
+					},
+					motionValues
+				};
+			}, []);
+		}
+	};
+	function getMotionAnimatedProps(props, style, disable) {
+		var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default", transitionOverride = arguments.length > 4 ? arguments[4] : void 0;
+		if (disable) {
+			return { dontAnimate: style };
+		}
+		var _ref;
+		var animationOptions = getAnimationOptions((_ref = transitionOverride !== null && transitionOverride !== void 0 ? transitionOverride : props.transition) !== null && _ref !== void 0 ? _ref : null, animationState);
+		var dontAnimate;
+		var doAnimate;
+		var animateOnly = props.animateOnly;
+		for (var key in style) {
+			var value = style[key];
+			if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
+				dontAnimate || (dontAnimate = {});
+				dontAnimate[key] = value;
+			} else {
+				doAnimate || (doAnimate = {});
+				doAnimate[key] = value;
+			}
+		}
+		return {
+			dontAnimate,
+			doAnimate,
+			animationOptions
+		};
+	}
+	function getAnimationOptions(transitionProp) {
+		var animationState = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "default";
+		var normalized = (0, import_animation_helpers.normalizeTransition)(transitionProp);
+		var effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
+		if (!effectiveKey && animationState === "default") {
+			effectiveKey = normalized.enter || normalized.exit || null;
+		}
+		var globalConfigOverride = normalized.config ? { ...normalized.config } : void 0;
+		if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
+			return {};
+		}
+		var defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
+		var delay = normalized.delay;
+		var result = {};
+		if (defaultConfig) {
+			Object.assign(result, defaultConfig);
+		}
+		if (globalConfigOverride) {
+			Object.assign(result, globalConfigOverride);
+			if (result.type === void 0 && result.duration !== void 0 && result.damping === void 0 && result.stiffness === void 0 && result.mass === void 0) {
+				result.type = "tween";
+			}
+		}
+		if (delay) {
+			result.delay = delay;
+		}
+		if (defaultConfig || globalConfigOverride || delay) {
+			result.default = {
+				...defaultConfig,
+				...globalConfigOverride,
+				...delay ? { delay } : null
+			};
+		}
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = Object.entries(normalized.properties)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var [propName, animationNameOrConfig] = _step.value;
+				if (typeof animationNameOrConfig === "string") {
+					result[propName] = withInferredType(animations[animationNameOrConfig]);
+				} else if (animationNameOrConfig && (typeof animationNameOrConfig === "undefined" ? "undefined" : _type_of(animationNameOrConfig)) === "object") {
+					var baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
+					result[propName] = {
+						...baseConfig,
+						...animationNameOrConfig
+					};
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		convertMsToS(result);
+		convertMsToS(result.default);
+		for (var key in result) {
+			if (key !== "default" && _type_of(result[key]) === "object") {
+				convertMsToS(result[key]);
+			}
+		}
+		return result;
+	}
 }
 function withInferredType(config) {
-  if (!config) {
-    return {
-      type: "spring"
-    };
-  }
-  var isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
-  return {
-    type: isTimingBased ? "tween" : "spring",
-    ...config
-  };
+	if (!config) {
+		return { type: "spring" };
+	}
+	var isTimingBased = config.duration !== void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
+	return {
+		type: isTimingBased ? "tween" : "spring",
+		...config
+	};
 }
 function convertMsToS(config) {
-  if (!config) return;
-  if (typeof config.delay === "number") config.delay = config.delay / 1e3;
-  if (typeof config.duration === "number") {
-    var isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
-    if (isTimingBased) {
-      config.duration = config.duration / 1e3;
-    }
-  }
+	if (!config) return;
+	if (typeof config.delay === "number") config.delay = config.delay / 1e3;
+	if (typeof config.duration === "number") {
+		var isTimingBased = config.type === "tween" || config.type === void 0 && config.damping === void 0 && config.stiffness === void 0 && config.mass === void 0;
+		if (isTimingBased) {
+			config.duration = config.duration / 1e3;
+		}
+	}
 }
 function removeRemovedStyles(prev, next, node, dontClearIfIn) {
-  for (var key in prev) {
-    if (!(key in next)) {
-      if (dontClearIfIn && key in dontClearIfIn) {
-        continue;
-      }
-      node.style[key] = "";
-    }
-  }
+	for (var key in prev) {
+		if (!(key in next)) {
+			if (dontClearIfIn && key in dontClearIfIn) {
+				continue;
+			}
+			node.style[key] = "";
+		}
+	}
+}
+var disableAnimationProps = /* @__PURE__ */ new Set([
+	"alignContent",
+	"alignItems",
+	"boxSizing",
+	"contain",
+	"containerType",
+	"display",
+	"flexBasis",
+	"flexDirection",
+	"fontFamily",
+	"justifyContent",
+	"overflow",
+	"overflowX",
+	"overflowY",
+	"pointerEvents",
+	"position",
+	"textWrap",
+	"userSelect"
+]);
+function motionPropsEqual(a, b) {
+	for (var key in a) {
+		if (!(key in b)) return false;
+	}
+	for (var key1 in b) {
+		if (key1 === "children") continue;
+		var av = a[key1];
+		var bv = b[key1];
+		if (typeof bv === "function" && typeof av === "function") continue;
+		if (!Object.is(av, bv)) return false;
+	}
+	return true;
+}
+function motionStylesEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (var i = 0; i < a.length; i++) {
+		var sa = a[i];
+		var sb = b[i];
+		if (sa === sb) continue;
+		if (!sa || !sb) return false;
+		var aCount = 0;
+		for (var key in sa) {
+			aCount++;
+			if (!Object.is(sa[key], sb[key])) return false;
+		}
+		var bCount = 0;
+		for (var _key in sb) {
+			bCount++;
+		}
+		if (aCount !== bCount) return false;
+	}
+	return true;
 }
-var disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]);
 var MotionView = createMotionView("div");
 var MotionText = createMotionView("span");
+var transformAliases = {
+	x: "translateX",
+	y: "translateY",
+	scale: "scale",
+	scaleX: "scaleX",
+	scaleY: "scaleY",
+	rotate: "rotate",
+	rotateX: "rotateX",
+	rotateY: "rotateY",
+	rotateZ: "rotateZ",
+	skewX: "skewX",
+	skewY: "skewY"
+};
+function compileAnimatedStyle(initialSource, initialResolved) {
+	var shorthands = (0, import_web.getConfig)().shorthands;
+	var entries = Object.keys(initialSource).map(function(source) {
+		var _shorthands_source, _shorthands_source1, _shorthands_source2;
+		return {
+			source,
+			target: (_shorthands_source = shorthands === null || shorthands === void 0 ? void 0 : shorthands[source]) !== null && _shorthands_source !== void 0 ? _shorthands_source : source,
+			tokenValue: typeof initialSource[source] === "string" && initialResolved[(_shorthands_source1 = shorthands === null || shorthands === void 0 ? void 0 : shorthands[source]) !== null && _shorthands_source1 !== void 0 ? _shorthands_source1 : source] !== initialSource[source] ? initialResolved[(_shorthands_source2 = shorthands === null || shorthands === void 0 ? void 0 : shorthands[source]) !== null && _shorthands_source2 !== void 0 ? _shorthands_source2 : source] : void 0
+		};
+	});
+	return function(sourceStyle) {
+		var resolved = {};
+		var transforms = [];
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = entries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var entry = _step.value;
+				var value = sourceStyle[entry.source];
+				if (value === void 0) continue;
+				if (entry.source === "transform" && Array.isArray(value)) {
+					resolved.transform = (0, import_web.transformsToString)(value);
+				} else if (entry.source in transformAliases) {
+					transforms.push({ [transformAliases[entry.source]]: value });
+				} else {
+					var _entry_tokenValue;
+					resolved[entry.target] = (_entry_tokenValue = entry.tokenValue) !== null && _entry_tokenValue !== void 0 ? _entry_tokenValue : (0, import_web.normalizeValueWithProperty)(value, entry.target);
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		if (transforms.length) resolved.transform = (0, import_web.transformsToString)(transforms);
+		return resolved;
+	};
+}
 function createMotionView(defaultTag) {
-  var isText = defaultTag === "span";
-  var Component = /* @__PURE__ */(0, import_react2.forwardRef)(function (propsIn, ref) {
-    var _hooks_usePropsTransform;
-    var {
-      forwardedRef,
-      animation,
-      render = defaultTag,
-      style,
-      ...propsRest
-    } = propsIn;
-    var [scope, animate] = useAnimateSSRSafe();
-    var hostRef = (0, import_react2.useRef)(null);
-    var seededNode = (0, import_react2.useRef)(null);
-    var seededInCurrentFrame = (0, import_react2.useRef)(false);
-    var queuedAnimationFrames = (0, import_react2.useRef)(/* @__PURE__ */new WeakMap());
-    var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref, hostRef, scope);
-    var stateRef = (0, import_react2.useRef)(null);
-    if (!stateRef.current) {
-      stateRef.current = {
-        get host() {
-          return hostRef.current;
-        }
-      };
-    }
-    var [_, state] = (0, import_web.useThemeWithState)({});
-    var styles = Array.isArray(style) ? style : [style];
-    var [animatedStyle, nonAnimatedStyles] = function () {
-      var animatedStyle2;
-      var nonAnimatedStyles2 = [];
-      var _iteratorNormalCompletion = true,
-        _didIteratorError = false,
-        _iteratorError = void 0;
-      try {
-        for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var style2 = _step.value;
-          if (style2.getStyle) {
-            animatedStyle2 = style2;
-          } else {
-            nonAnimatedStyles2.push(style2);
-          }
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return != null) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
-      return [animatedStyle2, nonAnimatedStyles2];
-    }();
-    function getProps(props2) {
-      var out = (0, import_web.getSplitStyles)(props2, isText ? import_web.Text.staticConfig : import_web.View.staticConfig, state === null || state === void 0 ? void 0 : state.theme, state === null || state === void 0 ? void 0 : state.name, {
-        unmounted: false
-      }, {
-        isAnimated: false,
-        noClass: true,
-        resolveValues: "auto"
-      });
-      if (!out) {
-        return {};
-      }
-      if (out.viewProps.style) {
-        (0, import_web.fixStyles)(out.viewProps.style);
-        (0, import_web.styleToCSS)(out.viewProps.style);
-      }
-      return out.viewProps;
-    }
-    var props = getProps({
-      ...propsRest,
-      style: nonAnimatedStyles
-    });
-    var Element = render || "div";
-    var transformedProps = (_hooks_usePropsTransform = import_web.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_web.hooks, render, props, stateRef, false);
-    (0, import_web.useIsomorphicLayoutEffect)(function () {
-      if (!animatedStyle) return;
-      var node = hostRef.current;
-      if (_instanceof(node, HTMLElement) && seededNode.current !== node) {
-        var currentStyle = animatedStyle.motionValues ? animatedStyle.getStyle(...animatedStyle.motionValues.map(function (value) {
-          return value.get();
-        })) : animatedStyle.motionValue ? animatedStyle.getStyle(animatedStyle.motionValue.get()) : null;
-        var webStyle = currentStyle && getProps({
-          style: currentStyle
-        }).style;
-        if (webStyle) {
-          Object.assign(node.style, webStyle);
-          seededNode.current = node;
-          seededInCurrentFrame.current = true;
-          requestAnimationFrame(function () {
-            if (seededNode.current === node) {
-              seededInCurrentFrame.current = false;
-            }
-          });
-        }
-      }
-      var toTransition = function (animationConfig) {
-        return (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "timing" ? {
-          type: "tween",
-          duration: ((animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.duration) || 0) / 1e3
-        } : (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "direct" ? {
-          type: "tween",
-          duration: 0
-        } : {
-          type: "spring",
-          ...animationConfig
-        };
-      };
-      var animateNodeTo = function (nextStyle, transition, mv) {
-        if (!_instanceof(node, HTMLElement) || hostRef.current !== node) return;
-        var webStyle2 = getProps({
-          style: nextStyle
-        }).style;
-        if (!webStyle2) return;
-        settlePendingMotionOnFinish(mv, animate(node, webStyle2, transition));
-      };
-      var animateChangedValue = function (nextStyle, transition, mv) {
-        if (seededInCurrentFrame.current && seededNode.current === node) {
-          var queuedFrame = queuedAnimationFrames.current.get(mv);
-          if (queuedFrame !== void 0) {
-            cancelAnimationFrame(queuedFrame);
-          }
-          var frame = requestAnimationFrame(function () {
-            if (queuedAnimationFrames.current.get(mv) !== frame) return;
-            queuedAnimationFrames.current.delete(mv);
-            if (hostRef.current === node) {
-              animateNodeTo(nextStyle, transition, mv);
-            } else {
-              var onFinish = PendingMotionOnFinish.get(mv);
-              PendingMotionOnFinish.delete(mv);
-              onFinish === null || onFinish === void 0 ? void 0 : onFinish();
-            }
-          });
-          queuedAnimationFrames.current.set(mv, frame);
-          return;
-        }
-        animateNodeTo(nextStyle, transition, mv);
-      };
-      if (animatedStyle.motionValues) {
-        var mvs = animatedStyle.motionValues;
-        var styleForAll = function () {
-          return animatedStyle.getStyle(...mvs.map(function (v) {
-            return v.get();
-          }));
-        };
-        var unsubs = mvs.map(function (mv) {
-          return mv.on("change", function () {
-            return animateChangedValue(styleForAll(), toTransition(MotionValueStrategy.get(mv)), mv);
-          });
-        });
-        return function () {
-          return unsubs.forEach(function (fn) {
-            return fn();
-          });
-        };
-      }
-      var motionValue2 = animatedStyle.motionValue;
-      if (!motionValue2) return;
-      return motionValue2.on("change", function (value) {
-        return animateChangedValue(animatedStyle.getStyle(value), toTransition(MotionValueStrategy.get(motionValue2)), motionValue2);
-      });
-    }, [animatedStyle]);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Element, {
-      ...transformedProps,
-      ref: composedRefs
-    });
-  });
-  Component["acceptRenderProp"] = true;
-  return Component;
+	var isText = defaultTag === "span";
+	var Component = (0, import_web.createRefComponent)(function(propsIn, ref) {
+		var _hooks_usePropsTransform;
+		var { forwardedRef, animation, render = defaultTag, style, ...propsRest } = propsIn;
+		var [scope, animate] = useAnimateSSRSafe();
+		var hostRef = (0, import_react2.useRef)(null);
+		var seededNode = (0, import_react2.useRef)(null);
+		var seededInCurrentFrame = (0, import_react2.useRef)(false);
+		var queuedAnimationFrames = (0, import_react2.useRef)(/* @__PURE__ */ new WeakMap());
+		var composedRefs = (0, import_web.useComposedRefs)(forwardedRef, ref, hostRef, scope);
+		var stateRef = (0, import_react2.useRef)(null);
+		if (!stateRef.current) {
+			stateRef.current = { get host() {
+				return hostRef.current;
+			} };
+		}
+		var [_, state] = (0, import_web.useThemeWithState)({});
+		var styles = Array.isArray(style) ? style : [style];
+		var [animatedStyle, nonAnimatedStyles] = (function() {
+			var animatedStyle2;
+			var nonAnimatedStyles2 = [];
+			var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+			try {
+				for (var _iterator = styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+					var style2 = _step.value;
+					if (style2.getStyle) {
+						animatedStyle2 = style2;
+					} else {
+						nonAnimatedStyles2.push(style2);
+					}
+				}
+			} catch (err) {
+				_didIteratorError = true;
+				_iteratorError = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion && _iterator.return != null) {
+						_iterator.return();
+					}
+				} finally {
+					if (_didIteratorError) {
+						throw _iteratorError;
+					}
+				}
+			}
+			return [animatedStyle2, nonAnimatedStyles2];
+		})();
+		function getProps(props2) {
+			if (process.env.NODE_ENV === "development" && propsIn.debug === "profile" && typeof performance !== "undefined") {
+				performance.mark("tamagui-motion-style-split");
+			}
+			var out = (0, import_web.getSplitStyles)(props2, isText ? import_web.Text.staticConfig : import_web.View.staticConfig, state === null || state === void 0 ? void 0 : state.theme, state === null || state === void 0 ? void 0 : state.name, { unmounted: false }, {
+				isAnimated: false,
+				noClass: true,
+				resolveValues: "auto"
+			});
+			if (!out) {
+				return {};
+			}
+			if (out.viewProps.style) {
+				(0, import_web.fixStyles)(out.viewProps.style);
+				(0, import_web.styleToCSS)(out.viewProps.style);
+			}
+			return out.viewProps;
+		}
+		var resolvedAnimatedStyle = (0, import_react2.useMemo)(function() {
+			if (!animatedStyle) return null;
+			var currentValues = animatedStyle.motionValues ? animatedStyle.motionValues.map(function(value) {
+				return value.get();
+			}) : animatedStyle.motionValue ? [animatedStyle.motionValue.get()] : [];
+			var initialSource = animatedStyle.getStyle(...currentValues);
+			var initialResolved = asStyleRecord(getProps({ style: initialSource }).style);
+			return {
+				initial: initialResolved,
+				resolve: compileAnimatedStyle(initialSource, initialResolved)
+			};
+		}, [
+			animatedStyle,
+			state === null || state === void 0 ? void 0 : state.theme,
+			state === null || state === void 0 ? void 0 : state.name
+		]);
+		var memoRef = (0, import_react2.useRef)(null);
+		var props;
+		var cached = memoRef.current;
+		if (cached && cached.theme === (state === null || state === void 0 ? void 0 : state.theme) && cached.themeName === (state === null || state === void 0 ? void 0 : state.name) && motionStylesEqual(cached.styles, nonAnimatedStyles) && motionPropsEqual(cached.propsRest, propsRest)) {
+			props = { ...cached.result };
+			for (var key in propsRest) {
+				var val = propsRest[key];
+				if (key === "children" || typeof val === "function") {
+					props[key] = val;
+				}
+			}
+		} else {
+			props = getProps({
+				...propsRest,
+				style: nonAnimatedStyles
+			});
+			memoRef.current = {
+				propsRest,
+				styles: nonAnimatedStyles,
+				theme: state === null || state === void 0 ? void 0 : state.theme,
+				themeName: state === null || state === void 0 ? void 0 : state.name,
+				result: props
+			};
+		}
+		if (resolvedAnimatedStyle) {
+			props = {
+				...props,
+				style: {
+					...asStyleRecord(props.style),
+					...resolvedAnimatedStyle.initial
+				}
+			};
+		}
+		var Element = render || "div";
+		var transformedProps = (_hooks_usePropsTransform = import_web.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_web.hooks, render, props, stateRef, false);
+		(0, import_web.useIsomorphicLayoutEffect)(function() {
+			if (!animatedStyle) return;
+			var node = hostRef.current;
+			if (_instanceof(node, HTMLElement) && seededNode.current !== node) {
+				var currentStyle = animatedStyle.motionValues ? animatedStyle.getStyle(...animatedStyle.motionValues.map(function(value) {
+					return value.get();
+				})) : animatedStyle.motionValue ? animatedStyle.getStyle(animatedStyle.motionValue.get()) : null;
+				var webStyle = currentStyle && (resolvedAnimatedStyle === null || resolvedAnimatedStyle === void 0 ? void 0 : resolvedAnimatedStyle.resolve(currentStyle));
+				if (webStyle) {
+					assignInlineStyles(node, webStyle);
+					seededNode.current = node;
+					seededInCurrentFrame.current = true;
+					requestAnimationFrame(function() {
+						if (seededNode.current === node) seededInCurrentFrame.current = false;
+					});
+				}
+			}
+			var toTransition = function(animationConfig) {
+				return (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "timing" ? {
+					type: "tween",
+					duration: (animationConfig.duration || 0) / 1e3
+				} : (animationConfig === null || animationConfig === void 0 ? void 0 : animationConfig.type) === "direct" ? {
+					type: "tween",
+					duration: 0
+				} : {
+					type: "spring",
+					...animationConfig
+				};
+			};
+			var animateNodeTo = function(nextStyle, transition, motionValue3) {
+				if (!_instanceof(node, HTMLElement) || hostRef.current !== node) return;
+				var webStyle2 = resolvedAnimatedStyle === null || resolvedAnimatedStyle === void 0 ? void 0 : resolvedAnimatedStyle.resolve(nextStyle);
+				if (!webStyle2) return;
+				settlePendingMotionOnFinish(motionValue3, animate(node, webStyle2, transition));
+			};
+			var animateChangedValue = function(nextStyle, transition, motionValue3) {
+				if (seededInCurrentFrame.current && seededNode.current === node) {
+					var queuedFrame = queuedAnimationFrames.current.get(motionValue3);
+					if (queuedFrame !== void 0) cancelAnimationFrame(queuedFrame);
+					var frame = requestAnimationFrame(function() {
+						if (queuedAnimationFrames.current.get(motionValue3) !== frame) return;
+						queuedAnimationFrames.current.delete(motionValue3);
+						if (hostRef.current === node) {
+							animateNodeTo(nextStyle, transition, motionValue3);
+						} else {
+							var onFinish = PendingMotionOnFinish.get(motionValue3);
+							PendingMotionOnFinish.delete(motionValue3);
+							onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+						}
+					});
+					queuedAnimationFrames.current.set(motionValue3, frame);
+					return;
+				}
+				animateNodeTo(nextStyle, transition, motionValue3);
+			};
+			if (animatedStyle.motionValues) {
+				var mvs = animatedStyle.motionValues;
+				var styleForAll = function() {
+					return animatedStyle.getStyle(...mvs.map(function(value) {
+						return value.get();
+					}));
+				};
+				var unsubs = mvs.map(function(mv) {
+					return mv.on("change", function() {
+						return animateChangedValue(styleForAll(), toTransition(MotionValueStrategy.get(mv)), mv);
+					});
+				});
+				return function() {
+					return unsubs.forEach(function(fn) {
+						return fn();
+					});
+				};
+			}
+			var motionValue2 = animatedStyle.motionValue;
+			if (!motionValue2) return;
+			return motionValue2.on("change", function(value) {
+				return animateChangedValue(animatedStyle.getStyle(value), toTransition(MotionValueStrategy.get(motionValue2)), motionValue2);
+			});
+		}, [animatedStyle, resolvedAnimatedStyle]);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, {
+			...transformedProps,
+			ref: composedRefs
+		});
+	});
+	Component["acceptRenderProp"] = true;
+	return Component;
 }
 function getDiff(previous, next) {
-  if (!previous) {
-    return next;
-  }
-  var diff = null;
-  for (var key in next) {
-    if (next[key] !== previous[key]) {
-      diff || (diff = {});
-      diff[key] = next[key];
-    }
-  }
-  return diff;
+	if (!previous) {
+		return next;
+	}
+	var diff = null;
+	for (var key in next) {
+		if (next[key] !== previous[key]) {
+			diff || (diff = {});
+			diff[key] = next[key];
+		}
+	}
+	return diff;
 }
 function fixTransparentColors(diff, previous, next) {
-  var result = diff;
-  for (var key in diff) {
-    if (diff[key] === "transparent") {
-      var fixed = "rgba(0, 0, 0, 0)";
-      var candidates = [previous === null || previous === void 0 ? void 0 : previous[key], next === null || next === void 0 ? void 0 : next[key]];
-      var _iteratorNormalCompletion = true,
-        _didIteratorError = false,
-        _iteratorError = void 0;
-      try {
-        for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var candidate = _step.value;
-          if (typeof candidate === "string" && candidate !== "transparent") {
-            var rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
-            if (rgbaMatch) {
-              fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
-              break;
-            }
-          }
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return != null) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
-      if (result === diff) {
-        result = {
-          ...diff
-        };
-      }
-      result[key] = fixed;
-    }
-  }
-  return result;
+	var result = diff;
+	for (var key in diff) {
+		if (diff[key] === "transparent") {
+			var fixed = "rgba(0, 0, 0, 0)";
+			var candidates = [previous === null || previous === void 0 ? void 0 : previous[key], next === null || next === void 0 ? void 0 : next[key]];
+			var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+			try {
+				for (var _iterator = candidates[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+					var candidate = _step.value;
+					if (typeof candidate === "string" && candidate !== "transparent") {
+						var rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
+						if (rgbaMatch) {
+							fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
+							break;
+						}
+					}
+				}
+			} catch (err) {
+				_didIteratorError = true;
+				_iteratorError = err;
+			} finally {
+				try {
+					if (!_iteratorNormalCompletion && _iterator.return != null) {
+						_iterator.return();
+					}
+				} finally {
+					if (_didIteratorError) {
+						throw _iteratorError;
+					}
+				}
+			}
+			if (result === diff) {
+				result = { ...diff };
+			}
+			result[key] = fixed;
+		}
+	}
+	return result;
 }
+
 //# sourceMappingURL=createAnimations.native.js.map