@tamagui/animations-motion 2.7.6 → 3.0.0-beta.637.1

package/dist/esm/createAnimations.mjs

@@ -1,797 +1,940 @@
 import { getEffectiveAnimation, normalizeTransition } from "@tamagui/animation-helpers";
 import { ResetPresence, usePresence } from "@tamagui/use-presence";
-import { fixStyles, getConfig, getSplitStyles, hooks, styleToCSS, Text, useComposedRefs, useIsomorphicLayoutEffect, useThemeWithState, View } from "@tamagui/web";
-import { animate as animateMotionValue, motionValue, useAnimate, useMotionValue, useMotionValueEvent } from "motion/react";
-import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Text, View, createRefComponent, fixStyles, getConfig, getSplitStyles, hooks, normalizeValueWithProperty, styleToCSS, transformsToString, useComposedRefs, useIsomorphicLayoutEffect, useThemeWithState } from "@tamagui/web";
+import { animate, motionValue, useAnimate, useMotionValue, useMotionValueEvent } from "motion/react";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+
 const isServer = typeof window === "undefined";
 function useAnimateSSRSafe() {
-  if (isServer) {
-    return [useRef(null), () => {}];
-  }
-  return useAnimate();
+	if (isServer) {
+		return [useRef(null), (() => {})];
+	}
+	return useAnimate();
 }
-const MotionValueStrategy = /* @__PURE__ */new WeakMap();
-const PendingMotionOnFinish = /* @__PURE__ */new WeakMap();
+const asStyleRecord = (style) => style && typeof style === "object" && !Array.isArray(style) ? style : {};
+function assignInlineStyles(node, styles) {
+	for (const key in styles) {
+		node.style[key] = normalizeValueWithProperty(styles[key], key);
+	}
+}
+const MotionValueStrategy = /* @__PURE__ */ new WeakMap();
+const PendingMotionOnFinish = /* @__PURE__ */ new WeakMap();
 function settlePendingMotionOnFinish(mv, controls) {
-  const onFinish = PendingMotionOnFinish.get(mv);
-  if (!onFinish) return;
-  PendingMotionOnFinish.delete(mv);
-  controls.then(() => onFinish()).catch(() => onFinish());
+	const onFinish = PendingMotionOnFinish.get(mv);
+	if (!onFinish) return;
+	PendingMotionOnFinish.delete(mv);
+	controls.then(() => onFinish()).catch(() => onFinish());
 }
-const PopperPositionAnims = /* @__PURE__ */new WeakMap();
+const PopperPositionAnims = /* @__PURE__ */ new WeakMap();
 function parseTranslate(transform) {
-  if (!transform || transform === "none") return {
-    x: 0,
-    y: 0
-  };
-  try {
-    const 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 {
-    return null;
-  }
+	if (!transform || transform === "none") return {
+		x: 0,
+		y: 0
+	};
+	try {
+		const 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 {
+		return null;
+	}
 }
 function createAnimations(animations) {
-  let isHydratingGlobal;
-  const hydratingComponents = /* @__PURE__ */new Set();
-  return {
-    View: MotionView,
-    Text: MotionText,
-    isReactNative: false,
-    inputStyle: "css",
-    outputStyle: "inline",
-    avoidReRenders: true,
-    animations,
-    usePresence,
-    ResetPresence,
-    onMount() {
-      isHydratingGlobal = false;
-      hydratingComponents.forEach(cb => cb());
-    },
-    useAnimations: animationProps => {
-      if (isHydratingGlobal === void 0 && !getConfig().settings.disableSSR) {
-        isHydratingGlobal = true;
-      }
-      const {
-        props,
-        style,
-        componentState,
-        stateRef,
-        useStyleEmitter,
-        presence,
-        styleProps
-      } = animationProps;
-      const animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
-      const isComponentHydrating = componentState.unmounted === true;
-      const isMounting = componentState.unmounted === "should-enter";
-      const isEntering = !!componentState.unmounted;
-      const isExiting = presence?.[0] === false;
-      const sendExitComplete = presence?.[1];
-      const refs = 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
-        };
-      }
-      const justFinishedEntering = refs.current.wasEntering && !isEntering;
-      useEffect(() => {
-        refs.current.wasEntering = isEntering;
-      });
-      const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
-      const disableAnimation = isComponentHydrating || isMounting || !animationKey;
-      const [scope, animate] = useAnimateSSRSafe();
-      refs.current.isExiting = isExiting;
-      refs.current.sendExitComplete = sendExitComplete;
-      refs.current.animationState = animationState;
-      const justStartedExiting = isExiting && !refs.current.wasExiting;
-      const justStoppedExiting = !isExiting && refs.current.wasExiting;
-      if (justStartedExiting || justStoppedExiting) {
-        refs.current.frozenExitTarget = null;
-        refs.current.exitCompleteScheduled = false;
-      }
-      useEffect(() => {
-        refs.current.wasExiting = isExiting;
-      });
-      const {
-        dontAnimate = {},
-        doAnimate,
-        animationOptions
-      } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
-      const [firstRenderStyle] = useState(style);
-      if (refs.current.isFirstRender) {
-        refs.current.lastDontAnimate = firstRenderStyle;
-      }
-      const [isHydrating, setIsHydrating] = useState(isHydratingGlobal);
-      useLayoutEffect(() => {
-        if (isHydratingGlobal) {
-          hydratingComponents.add(() => {
-            setIsHydrating(false);
-          });
-        }
-        return () => {
-          refs.current.disposed = true;
-        };
-      }, []);
-      const flushAnimation = ({
-        doAnimate: doAnimateRaw = {},
-        animationOptions: passedOptions = {},
-        dontAnimate: dontAnimate2
-      }) => {
-        let startedControls = null;
-        const isCurrentlyExiting = refs.current.isExiting;
-        const currentSendExitComplete = refs.current.sendExitComplete;
-        let doAnimate2 = doAnimateRaw;
-        if (isCurrentlyExiting && refs.current.frozenExitTarget) {
-          doAnimate2 = refs.current.frozenExitTarget;
-        }
-        const animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions(props.transition ?? null, "exit") : passedOptions;
-        try {
-          const 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 (!(node instanceof HTMLElement)) {
-            return;
-          }
-          const prevDont = refs.current.lastDontAnimate;
-          if (dontAnimate2) {
-            if (prevDont) {
-              removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
-              const changed = getDiff(prevDont, dontAnimate2);
-              if (changed) {
-                Object.assign(node.style, changed);
-              }
-            } else {
-              Object.assign(node.style, dontAnimate2);
-            }
-          }
-          if (doAnimate2) {
-            if (prevDont) {
-              for (const key in prevDont) {
-                if (key in doAnimate2) {
-                  node.style[key] = prevDont[key];
-                  if (refs.current.lastDoAnimate) {
-                    refs.current.lastDoAnimate[key] = prevDont[key];
-                  }
-                }
-              }
-            }
-            const lastAnimated = refs.current.lastDoAnimate;
-            if (lastAnimated) {
-              removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
-            }
-            const diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
-            if (diff) {
-              if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
-                refs.current.frozenExitTarget = {
-                  ...doAnimate2
-                };
-              }
-              const isPopperPosition = node.hasAttribute("data-popper-animate-position");
-              let popperHandledTransform = false;
-              if (isPopperPosition && !isCurrentlyExiting && typeof diff.transform === "string") {
-                const target = parseTranslate(diff.transform);
-                if (target) {
-                  let entry = PopperPositionAnims.get(node);
-                  if (!entry) {
-                    let seed = target;
-                    try {
-                      seed = parseTranslate(getComputedStyle(node).transform) ?? target;
-                    } catch {}
-                    const x = motionValue(seed.x);
-                    const y = motionValue(seed.y);
-                    const write = () => {
-                      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 {
-                      const live = parseTranslate(getComputedStyle(node).transform);
-                      if (live) {
-                        entry.x.jump(live.x);
-                        entry.y.jump(live.y);
-                      }
-                    } catch {}
-                  }
-                  for (const anim of node.getAnimations()) {
-                    try {
-                      const kf = anim.effect?.getKeyframes?.();
-                      if (kf?.some(k => "transform" in k)) {
-                        anim.cancel();
-                      }
-                    } catch {}
-                  }
-                  const opts = animationOptions2;
-                  const positionTransition = opts.transform ?? opts.default ?? animationOptions2;
-                  const cx = animateMotionValue(entry.x, target.x, positionTransition);
-                  const cy = animateMotionValue(entry.y, target.y, positionTransition);
-                  entry.stop = () => {
-                    cx.stop();
-                    cy.stop();
-                  };
-                  popperHandledTransform = true;
-                }
-              }
-              if (isCurrentlyExiting) {
-                const entry = PopperPositionAnims.get(node);
-                if (entry?.stop) {
-                  entry.stop();
-                  entry.stop = null;
-                }
-              }
-              let midFlightValues = null;
-              if (refs.current.controls) {
-                try {
-                  const computed = getComputedStyle(node);
-                  midFlightValues = {};
-                  for (const key in diff) {
-                    const val = computed[key];
-                    if (val !== void 0 && val !== "") {
-                      midFlightValues[key] = val;
-                    }
-                  }
-                } catch {}
-                if (isCurrentlyExiting) {
-                  refs.current.controls.stop();
-                }
-                if (midFlightValues) {
-                  for (const key in midFlightValues) {
-                    if (key === "transform" && popperHandledTransform) continue;
-                    node.style[key] = midFlightValues[key];
-                  }
-                }
-                if (isPopperPosition && !popperHandledTransform) {
-                  const anims = node.getAnimations();
-                  for (const anim of anims) {
-                    anim.cancel();
-                  }
-                }
-              }
-              const fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
-              let waapiDiff = fixedDiff;
-              if (popperHandledTransform && "transform" in waapiDiff) {
-                waapiDiff = {
-                  ...waapiDiff
-                };
-                delete waapiDiff.transform;
-              }
-              if ((isPopperPosition || isCurrentlyExiting) && 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(() => {
-                if (refs.current.isExiting) {
-                  currentSendExitComplete();
-                }
-              }).catch(() => {
-                if (refs.current.isExiting) {
-                  currentSendExitComplete();
-                }
-              });
-            } else if (!refs.current.exitCompleteScheduled) {
-              currentSendExitComplete();
-            }
-          }
-        }
-      };
-      useStyleEmitter?.((nextStyle, effectiveTransition) => {
-        const animationProps2 = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
-        flushAnimation(animationProps2);
-      });
-      useIsomorphicLayoutEffect(() => {
-        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;
-        }
-        const justEnabled = refs.current.wasDisabled && !disableAnimation;
-        refs.current.wasDisabled = disableAnimation;
-        const justStrippedClasses = !refs.current.wasNoClass && !!styleProps.noClass;
-        refs.current.wasNoClass = !!styleProps.noClass;
-        if ((justEnabled || justStrippedClasses) && animationState !== "enter") {
-          const node = stateRef.current.host;
-          if (node instanceof HTMLElement) {
-            if (dontAnimate) Object.assign(node.style, dontAnimate);
-            if (doAnimate) Object.assign(node.style, doAnimate);
-            const entry = PopperPositionAnims.get(node);
-            if (entry) {
-              const target = parseTranslate(doAnimate?.transform ?? dontAnimate?.transform);
-              if (target) {
-                entry.stop?.();
-                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) {
-      const motionValue2 = useMotionValue(initial);
-      return React.useMemo(() => ({
-        getInstance() {
-          return motionValue2;
-        },
-        getValue() {
-          return motionValue2.get();
-        },
-        setValue(next, config = {
-          type: "spring"
-        }, onFinish) {
-          if (config.type === "direct") {
-            MotionValueStrategy.set(motionValue2, {
-              type: "direct"
-            });
-            motionValue2.set(next);
-            onFinish?.();
-            return;
-          }
-          MotionValueStrategy.set(motionValue2, config);
-          if (onFinish) {
-            const prior = PendingMotionOnFinish.get(motionValue2);
-            if (prior) {
-              PendingMotionOnFinish.delete(motionValue2);
-              prior();
-            }
-            PendingMotionOnFinish.set(motionValue2, onFinish);
-          }
-          motionValue2.set(next);
-        },
-        stop() {
-          motionValue2.stop();
-        }
-      }), [motionValue2]);
-    },
-    useAnimatedNumberReaction({
-      value
-    }, onValue) {
-      const instance = value.getInstance();
-      useMotionValueEvent(instance, "change", onValue);
-    },
-    useAnimatedNumberStyle(val, getStyleProp) {
-      const motionValue2 = val.getInstance();
-      const getStyleRef = useRef(getStyleProp);
-      getStyleRef.current = getStyleProp;
-      return useMemo(() => {
-        return {
-          getStyle: cur => {
-            return getStyleRef.current(cur);
-          },
-          motionValue: motionValue2
-        };
-      }, []);
-    },
-    useAnimatedNumbersStyle(vals, getStyleProp) {
-      const motionValues = vals.map(v => v.getInstance());
-      const getStyleRef = useRef(getStyleProp);
-      getStyleRef.current = getStyleProp;
-      return useMemo(() => {
-        return {
-          getStyle: (...currentValues) => getStyleRef.current(...currentValues),
-          motionValues
-        };
-      }, []);
-    }
-  };
-  function getMotionAnimatedProps(props, style, disable, animationState = "default", transitionOverride) {
-    if (disable) {
-      return {
-        dontAnimate: style
-      };
-    }
-    const animationOptions = getAnimationOptions(transitionOverride ?? props.transition ?? null, animationState);
-    let dontAnimate;
-    let doAnimate;
-    const animateOnly = props.animateOnly;
-    for (const key in style) {
-      const value = style[key];
-      if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
-        dontAnimate ||= {};
-        dontAnimate[key] = value;
-      } else {
-        doAnimate ||= {};
-        doAnimate[key] = value;
-      }
-    }
-    return {
-      dontAnimate,
-      doAnimate,
-      animationOptions
-    };
-  }
-  function getAnimationOptions(transitionProp, animationState = "default") {
-    const normalized = normalizeTransition(transitionProp);
-    let effectiveKey = getEffectiveAnimation(normalized, animationState);
-    if (!effectiveKey && animationState === "default") {
-      effectiveKey = normalized.enter || normalized.exit || null;
-    }
-    const globalConfigOverride = normalized.config ? {
-      ...normalized.config
-    } : void 0;
-    if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
-      return {};
-    }
-    const defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
-    const delay = normalized.delay;
-    const 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)
-      };
-    }
-    for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) {
-      if (typeof animationNameOrConfig === "string") {
-        result[propName] = withInferredType(animations[animationNameOrConfig]);
-      } else if (animationNameOrConfig && typeof animationNameOrConfig === "object") {
-        const baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
-        result[propName] = {
-          ...baseConfig,
-          ...animationNameOrConfig
-        };
-      }
-    }
-    convertMsToS(result);
-    convertMsToS(result.default);
-    for (const key in result) {
-      if (key !== "default" && typeof result[key] === "object") {
-        convertMsToS(result[key]);
-      }
-    }
-    return result;
-  }
+	let isHydratingGlobal;
+	const hydratingComponents = /* @__PURE__ */ new Set();
+	return {
+		View: MotionView,
+		Text: MotionText,
+		isReactNative: false,
+		inputStyle: "css",
+		outputStyle: "inline",
+		avoidReRenders: true,
+		animations,
+		usePresence,
+		ResetPresence,
+		onMount() {
+			isHydratingGlobal = false;
+			hydratingComponents.forEach((cb) => cb());
+		},
+		useAnimations: (animationProps) => {
+			if (isHydratingGlobal === void 0 && !getConfig().settings.disableSSR) {
+				isHydratingGlobal = true;
+			}
+			const { props, style, componentState, stateRef, useStyleEmitter, presence, onTransition, styleProps } = animationProps;
+			const animationKey = Array.isArray(props.transition) ? props.transition[0] : props.transition;
+			const isComponentHydrating = componentState.unmounted === true;
+			const isMounting = componentState.unmounted === "should-enter";
+			const isEntering = !!componentState.unmounted;
+			const isExiting = presence?.[0] === false;
+			const sendExitComplete = presence?.[1];
+			const refs = 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
+				};
+			}
+			const emit = (phase, cause, finished) => {
+				refs.current.onTransition?.(phase === "end" ? {
+					phase,
+					cause,
+					finished
+				} : {
+					phase,
+					cause
+				});
+			};
+			const justFinishedEntering = refs.current.wasEntering && !isEntering;
+			useEffect(() => {
+				refs.current.wasEntering = isEntering;
+			});
+			const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
+			const disableAnimation = isComponentHydrating || isMounting || !animationKey;
+			const [scope] = useAnimateSSRSafe();
+			refs.current.isExiting = isExiting;
+			refs.current.sendExitComplete = sendExitComplete;
+			refs.current.animationState = animationState;
+			refs.current.disableAnimation = disableAnimation;
+			refs.current.onTransition = onTransition;
+			const justStartedExiting = isExiting && !refs.current.wasExiting;
+			const justStoppedExiting = !isExiting && refs.current.wasExiting;
+			if (justStartedExiting || justStoppedExiting) {
+				refs.current.frozenExitTarget = null;
+				refs.current.exitCompleteScheduled = false;
+				refs.current.enterCompleteScheduled = false;
+			}
+			useEffect(() => {
+				refs.current.wasExiting = isExiting;
+			});
+			useIsomorphicLayoutEffect(() => {
+				if (justStoppedExiting && refs.current.exitStarted) {
+					refs.current.exitStarted = false;
+					emit("end", "exit", false);
+				}
+			}, [justStoppedExiting]);
+			const { dontAnimate = {}, doAnimate, animationOptions } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
+			const [firstRenderStyle] = useState(style);
+			if (refs.current.isFirstRender) {
+				refs.current.lastDontAnimate = firstRenderStyle;
+			}
+			const [isHydrating, setIsHydrating] = useState(isHydratingGlobal);
+			useLayoutEffect(() => {
+				if (isHydratingGlobal) {
+					hydratingComponents.add(() => {
+						setIsHydrating(false);
+					});
+				}
+				return () => {
+					refs.current.disposed = true;
+				};
+			}, []);
+			const flushAnimation = ({ doAnimate: doAnimateRaw = {}, animationOptions: passedOptions = {}, dontAnimate: dontAnimate2 }) => {
+				let startedControls = null;
+				const isCurrentlyExiting = refs.current.isExiting;
+				const currentSendExitComplete = refs.current.sendExitComplete;
+				const currentAnimationState = refs.current.animationState;
+				let doAnimate2 = doAnimateRaw;
+				if (isCurrentlyExiting && refs.current.frozenExitTarget) {
+					doAnimate2 = refs.current.frozenExitTarget;
+				}
+				const animationOptions2 = isCurrentlyExiting && currentSendExitComplete ? getAnimationOptions(props.transition ?? null, "exit") : passedOptions;
+				try {
+					const 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 (!(node instanceof HTMLElement)) {
+						return;
+					}
+					const prevDont = refs.current.lastDontAnimate;
+					if (dontAnimate2) {
+						if (prevDont) {
+							removeRemovedStyles(prevDont, dontAnimate2, node, doAnimate2);
+							const changed = getDiff(prevDont, dontAnimate2);
+							if (changed) {
+								assignInlineStyles(node, changed);
+							}
+						} else {
+							assignInlineStyles(node, dontAnimate2);
+						}
+					}
+					if (doAnimate2) {
+						if (prevDont) {
+							for (const key in prevDont) {
+								if (key in doAnimate2) {
+									node.style[key] = normalizeValueWithProperty(prevDont[key], key);
+									if (refs.current.lastDoAnimate) {
+										refs.current.lastDoAnimate[key] = prevDont[key];
+									}
+								}
+							}
+						}
+						const lastAnimated = refs.current.lastDoAnimate;
+						if (lastAnimated) {
+							removeRemovedStyles(lastAnimated, doAnimate2, node, dontAnimate2);
+						}
+						const diff = getDiff(refs.current.lastDoAnimate, doAnimate2);
+						if (diff) {
+							if (isCurrentlyExiting && !refs.current.frozenExitTarget) {
+								refs.current.frozenExitTarget = { ...doAnimate2 };
+							}
+							const isPopperPosition = node.hasAttribute("data-popper-animate-position");
+							let popperHandledTransform = false;
+							if (isPopperPosition && !isCurrentlyExiting && typeof diff.transform === "string") {
+								const target = parseTranslate(diff.transform);
+								if (target) {
+									let entry = PopperPositionAnims.get(node);
+									if (!entry) {
+										let seed = target;
+										try {
+											seed = parseTranslate(getComputedStyle(node).transform) ?? target;
+										} catch {}
+										const x = motionValue(seed.x);
+										const y = motionValue(seed.y);
+										const write = () => {
+											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 {
+											const live = parseTranslate(getComputedStyle(node).transform);
+											if (live) {
+												entry.x.jump(live.x);
+												entry.y.jump(live.y);
+											}
+										} catch {}
+									}
+									for (const anim of node.getAnimations()) {
+										try {
+											const kf = anim.effect?.getKeyframes?.();
+											if (kf?.some((k) => "transform" in k)) {
+												anim.cancel();
+											}
+										} catch {}
+									}
+									const opts = animationOptions2;
+									const positionTransition = opts.transform ?? opts.default ?? animationOptions2;
+									const cx = animate(entry.x, target.x, positionTransition);
+									const cy = animate(entry.y, target.y, positionTransition);
+									entry.stop = () => {
+										cx.stop();
+										cy.stop();
+									};
+									popperHandledTransform = true;
+								}
+							}
+							if (isCurrentlyExiting) {
+								const entry = PopperPositionAnims.get(node);
+								if (entry?.stop) {
+									entry.stop();
+									entry.stop = null;
+								}
+							}
+							let midFlightValues = null;
+							if (refs.current.controls) {
+								try {
+									const computed = getComputedStyle(node);
+									midFlightValues = {};
+									for (const key in diff) {
+										const val = computed[key];
+										if (val !== void 0 && val !== "") {
+											midFlightValues[key] = val;
+										}
+									}
+								} catch {}
+								if (isCurrentlyExiting) {
+									refs.current.controls.stop();
+								}
+								if (midFlightValues) {
+									for (const key in midFlightValues) {
+										if (key === "transform" && popperHandledTransform) continue;
+										node.style[key] = midFlightValues[key];
+									}
+								}
+								if (isPopperPosition && !popperHandledTransform) {
+									const anims = node.getAnimations();
+									for (const anim of anims) {
+										anim.cancel();
+									}
+								}
+							}
+							const fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
+							let waapiDiff = Object.fromEntries(Object.entries(fixedDiff).map(([key, value]) => [key, Array.isArray(value) ? value.map((item) => normalizeValueWithProperty(item, key)) : normalizeValueWithProperty(value, key)]));
+							if (popperHandledTransform && "transform" in waapiDiff) {
+								waapiDiff = { ...waapiDiff };
+								delete waapiDiff.transform;
+							}
+							if ((isPopperPosition || isCurrentlyExiting) && midFlightValues?.transform && waapiDiff.transform) {
+								waapiDiff.transform = [midFlightValues.transform, waapiDiff.transform];
+							}
+							if (Object.keys(waapiDiff).length > 0) {
+								startedControls = 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;
+							const complete = (finished) => {
+								if (!refs.current.isExiting) return;
+								if (refs.current.exitStarted) {
+									refs.current.exitStarted = false;
+									emit("end", "exit", finished);
+								}
+								currentSendExitComplete();
+							};
+							startedControls.finished.then(() => complete(true)).catch(() => 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;
+							const complete = (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(() => complete(true)).catch(() => complete(false));
+						} else if (!refs.current.enterCompleteScheduled && !refs.current.disableAnimation) {
+							emit("start", "enter");
+							emit("end", "enter", true);
+						}
+					} else if (startedControls) {
+						const controls = startedControls;
+						if (refs.current.updateInFlight) {
+							emit("end", "update", false);
+						}
+						refs.current.updateInFlight = true;
+						refs.current.updateControls = controls;
+						emit("start", "update");
+						const settle = (finished) => {
+							if (refs.current.updateControls !== controls) return;
+							refs.current.updateInFlight = false;
+							refs.current.updateControls = null;
+							emit("end", "update", finished);
+						};
+						controls.finished.then(() => settle(true)).catch(() => settle(false));
+					}
+				}
+			};
+			useStyleEmitter?.((nextStyle, effectiveTransition) => {
+				const animationProps2 = getMotionAnimatedProps(props, nextStyle, disableAnimation, refs.current.animationState, effectiveTransition);
+				flushAnimation(animationProps2);
+			});
+			useIsomorphicLayoutEffect(() => {
+				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;
+				}
+				const justEnabled = refs.current.wasDisabled && !disableAnimation;
+				refs.current.wasDisabled = disableAnimation;
+				const justStrippedClasses = !refs.current.wasNoClass && !!styleProps.noClass;
+				refs.current.wasNoClass = !!styleProps.noClass;
+				if ((justEnabled || justStrippedClasses) && animationState !== "enter") {
+					const node = stateRef.current.host;
+					if (node instanceof HTMLElement) {
+						if (dontAnimate) assignInlineStyles(node, dontAnimate);
+						if (doAnimate) assignInlineStyles(node, doAnimate);
+						const entry = PopperPositionAnims.get(node);
+						if (entry) {
+							const target = parseTranslate(doAnimate?.transform ?? dontAnimate?.transform);
+							if (target) {
+								entry.stop?.();
+								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) {
+			const motionValue2 = useMotionValue(initial);
+			return React.useMemo(() => ({
+				getInstance() {
+					return motionValue2;
+				},
+				getValue() {
+					return motionValue2.get();
+				},
+				setValue(next, config = { type: "spring" }, onFinish) {
+					if (config.type === "direct") {
+						MotionValueStrategy.set(motionValue2, { type: "direct" });
+						motionValue2.set(next);
+						onFinish?.();
+						return;
+					}
+					MotionValueStrategy.set(motionValue2, config);
+					if (onFinish) {
+						const prior = PendingMotionOnFinish.get(motionValue2);
+						if (prior) {
+							PendingMotionOnFinish.delete(motionValue2);
+							prior();
+						}
+						PendingMotionOnFinish.set(motionValue2, onFinish);
+					}
+					motionValue2.set(next);
+				},
+				stop() {
+					motionValue2.stop();
+				}
+			}), [motionValue2]);
+		},
+		useAnimatedNumberReaction({ value }, onValue) {
+			const instance = value.getInstance();
+			useMotionValueEvent(instance, "change", onValue);
+		},
+		useAnimatedNumberStyle(val, getStyleProp) {
+			const motionValue2 = val.getInstance();
+			const getStyleRef = useRef(getStyleProp);
+			getStyleRef.current = getStyleProp;
+			return useMemo(() => {
+				return {
+					getStyle: (cur) => {
+						return getStyleRef.current(cur);
+					},
+					motionValue: motionValue2
+				};
+			}, []);
+		},
+		useAnimatedNumbersStyle(vals, getStyleProp) {
+			const motionValues = vals.map((v) => v.getInstance());
+			const getStyleRef = useRef(getStyleProp);
+			getStyleRef.current = getStyleProp;
+			return useMemo(() => {
+				return {
+					getStyle: (...currentValues) => getStyleRef.current(...currentValues),
+					motionValues
+				};
+			}, []);
+		}
+	};
+	function getMotionAnimatedProps(props, style, disable, animationState = "default", transitionOverride) {
+		if (disable) {
+			return { dontAnimate: style };
+		}
+		const animationOptions = getAnimationOptions(transitionOverride ?? props.transition ?? null, animationState);
+		let dontAnimate;
+		let doAnimate;
+		const animateOnly = props.animateOnly;
+		for (const key in style) {
+			const value = style[key];
+			if (disableAnimationProps.has(key) || animateOnly && !animateOnly.includes(key)) {
+				dontAnimate ||= {};
+				dontAnimate[key] = value;
+			} else {
+				doAnimate ||= {};
+				doAnimate[key] = value;
+			}
+		}
+		return {
+			dontAnimate,
+			doAnimate,
+			animationOptions
+		};
+	}
+	function getAnimationOptions(transitionProp, animationState = "default") {
+		const normalized = normalizeTransition(transitionProp);
+		let effectiveKey = getEffectiveAnimation(normalized, animationState);
+		if (!effectiveKey && animationState === "default") {
+			effectiveKey = normalized.enter || normalized.exit || null;
+		}
+		const globalConfigOverride = normalized.config ? { ...normalized.config } : void 0;
+		if (!effectiveKey && Object.keys(normalized.properties).length === 0 && !globalConfigOverride) {
+			return {};
+		}
+		const defaultConfig = effectiveKey ? withInferredType(animations[effectiveKey]) : null;
+		const delay = normalized.delay;
+		const 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
+			};
+		}
+		for (const [propName, animationNameOrConfig] of Object.entries(normalized.properties)) {
+			if (typeof animationNameOrConfig === "string") {
+				result[propName] = withInferredType(animations[animationNameOrConfig]);
+			} else if (animationNameOrConfig && typeof animationNameOrConfig === "object") {
+				const baseConfig = animationNameOrConfig.type ? withInferredType(animations[animationNameOrConfig.type]) : defaultConfig;
+				result[propName] = {
+					...baseConfig,
+					...animationNameOrConfig
+				};
+			}
+		}
+		convertMsToS(result);
+		convertMsToS(result.default);
+		for (const key in result) {
+			if (key !== "default" && typeof result[key] === "object") {
+				convertMsToS(result[key]);
+			}
+		}
+		return result;
+	}
 }
 function withInferredType(config) {
-  if (!config) {
-    return {
-      type: "spring"
-    };
-  }
-  const 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" };
+	}
+	const 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") {
-    const 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") {
+		const 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 (const key in prev) {
-    if (!(key in next)) {
-      if (dontClearIfIn && key in dontClearIfIn) {
-        continue;
-      }
-      node.style[key] = "";
-    }
-  }
+	for (const key in prev) {
+		if (!(key in next)) {
+			if (dontClearIfIn && key in dontClearIfIn) {
+				continue;
+			}
+			node.style[key] = "";
+		}
+	}
+}
+const 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 (const key in a) {
+		if (!(key in b)) return false;
+	}
+	for (const key in b) {
+		if (key === "children") continue;
+		const av = a[key];
+		const bv = b[key];
+		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 (let i = 0; i < a.length; i++) {
+		const sa = a[i];
+		const sb = b[i];
+		if (sa === sb) continue;
+		if (!sa || !sb) return false;
+		let aCount = 0;
+		for (const key in sa) {
+			aCount++;
+			if (!Object.is(sa[key], sb[key])) return false;
+		}
+		let bCount = 0;
+		for (const _key in sb) {
+			bCount++;
+		}
+		if (aCount !== bCount) return false;
+	}
+	return true;
 }
-const disableAnimationProps = /* @__PURE__ */new Set(["alignContent", "alignItems", "boxSizing", "contain", "containerType", "display", "flexBasis", "flexDirection", "fontFamily", "justifyContent", "overflow", "overflowX", "overflowY", "pointerEvents", "position", "textWrap", "userSelect"]);
 const MotionView = createMotionView("div");
 const MotionText = createMotionView("span");
+const 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) {
+	const shorthands = getConfig().shorthands;
+	const entries = Object.keys(initialSource).map((source) => ({
+		source,
+		target: shorthands?.[source] ?? source,
+		tokenValue: typeof initialSource[source] === "string" && initialResolved[shorthands?.[source] ?? source] !== initialSource[source] ? initialResolved[shorthands?.[source] ?? source] : void 0
+	}));
+	return (sourceStyle) => {
+		const resolved = {};
+		const transforms = [];
+		for (const entry of entries) {
+			const value = sourceStyle[entry.source];
+			if (value === void 0) continue;
+			if (entry.source === "transform" && Array.isArray(value)) {
+				resolved.transform = transformsToString(value);
+			} else if (entry.source in transformAliases) {
+				transforms.push({ [transformAliases[entry.source]]: value });
+			} else {
+				resolved[entry.target] = entry.tokenValue ?? normalizeValueWithProperty(value, entry.target);
+			}
+		}
+		if (transforms.length) resolved.transform = transformsToString(transforms);
+		return resolved;
+	};
+}
 function createMotionView(defaultTag) {
-  const isText = defaultTag === "span";
-  const Component = forwardRef((propsIn, ref) => {
-    const {
-      forwardedRef,
-      animation,
-      render = defaultTag,
-      style,
-      ...propsRest
-    } = propsIn;
-    const [scope, animate] = useAnimateSSRSafe();
-    const hostRef = useRef(null);
-    const seededNode = useRef(null);
-    const seededInCurrentFrame = useRef(false);
-    const queuedAnimationFrames = useRef(/* @__PURE__ */new WeakMap());
-    const composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope);
-    const stateRef = useRef(null);
-    if (!stateRef.current) {
-      stateRef.current = {
-        get host() {
-          return hostRef.current;
-        }
-      };
-    }
-    const [_, state] = useThemeWithState({});
-    const styles = Array.isArray(style) ? style : [style];
-    const [animatedStyle, nonAnimatedStyles] = (() => {
-      let animatedStyle2;
-      const nonAnimatedStyles2 = [];
-      for (const style2 of styles) {
-        if (style2.getStyle) {
-          animatedStyle2 = style2;
-        } else {
-          nonAnimatedStyles2.push(style2);
-        }
-      }
-      return [animatedStyle2, nonAnimatedStyles2];
-    })();
-    function getProps(props2) {
-      const out = getSplitStyles(props2, isText ? Text.staticConfig : View.staticConfig, state?.theme, state?.name, {
-        unmounted: false
-      }, {
-        isAnimated: false,
-        noClass: true,
-        resolveValues: "auto"
-      });
-      if (!out) {
-        return {};
-      }
-      if (out.viewProps.style) {
-        fixStyles(out.viewProps.style);
-        styleToCSS(out.viewProps.style);
-      }
-      return out.viewProps;
-    }
-    const props = getProps({
-      ...propsRest,
-      style: nonAnimatedStyles
-    });
-    const Element = render || "div";
-    const transformedProps = hooks.usePropsTransform?.(render, props, stateRef, false);
-    useIsomorphicLayoutEffect(() => {
-      if (!animatedStyle) return;
-      const node = hostRef.current;
-      if (node instanceof HTMLElement && seededNode.current !== node) {
-        const currentStyle = animatedStyle.motionValues ? animatedStyle.getStyle(...animatedStyle.motionValues.map(value => value.get())) : animatedStyle.motionValue ? animatedStyle.getStyle(animatedStyle.motionValue.get()) : null;
-        const webStyle = currentStyle && getProps({
-          style: currentStyle
-        }).style;
-        if (webStyle) {
-          Object.assign(node.style, webStyle);
-          seededNode.current = node;
-          seededInCurrentFrame.current = true;
-          requestAnimationFrame(() => {
-            if (seededNode.current === node) {
-              seededInCurrentFrame.current = false;
-            }
-          });
-        }
-      }
-      const toTransition = animationConfig => animationConfig?.type === "timing" ? {
-        type: "tween",
-        duration: (animationConfig?.duration || 0) / 1e3
-      } : animationConfig?.type === "direct" ? {
-        type: "tween",
-        duration: 0
-      } : {
-        type: "spring",
-        ...animationConfig
-      };
-      const animateNodeTo = (nextStyle, transition, mv) => {
-        if (!(node instanceof HTMLElement) || hostRef.current !== node) return;
-        const webStyle = getProps({
-          style: nextStyle
-        }).style;
-        if (!webStyle) return;
-        settlePendingMotionOnFinish(mv, animate(node, webStyle, transition));
-      };
-      const animateChangedValue = (nextStyle, transition, mv) => {
-        if (seededInCurrentFrame.current && seededNode.current === node) {
-          const queuedFrame = queuedAnimationFrames.current.get(mv);
-          if (queuedFrame !== void 0) {
-            cancelAnimationFrame(queuedFrame);
-          }
-          const frame = requestAnimationFrame(() => {
-            if (queuedAnimationFrames.current.get(mv) !== frame) return;
-            queuedAnimationFrames.current.delete(mv);
-            if (hostRef.current === node) {
-              animateNodeTo(nextStyle, transition, mv);
-            } else {
-              const onFinish = PendingMotionOnFinish.get(mv);
-              PendingMotionOnFinish.delete(mv);
-              onFinish?.();
-            }
-          });
-          queuedAnimationFrames.current.set(mv, frame);
-          return;
-        }
-        animateNodeTo(nextStyle, transition, mv);
-      };
-      if (animatedStyle.motionValues) {
-        const mvs = animatedStyle.motionValues;
-        const styleForAll = () => animatedStyle.getStyle(...mvs.map(v => v.get()));
-        const unsubs = mvs.map(mv => mv.on("change", () => animateChangedValue(styleForAll(), toTransition(MotionValueStrategy.get(mv)), mv)));
-        return () => unsubs.forEach(fn => fn());
-      }
-      const motionValue2 = animatedStyle.motionValue;
-      if (!motionValue2) return;
-      return motionValue2.on("change", value => animateChangedValue(animatedStyle.getStyle(value), toTransition(MotionValueStrategy.get(motionValue2)), motionValue2));
-    }, [animatedStyle]);
-    return /* @__PURE__ */jsx(Element, {
-      ...transformedProps,
-      ref: composedRefs
-    });
-  });
-  Component["acceptRenderProp"] = true;
-  return Component;
+	const isText = defaultTag === "span";
+	const Component = createRefComponent((propsIn, ref) => {
+		const { forwardedRef, animation, render = defaultTag, style, ...propsRest } = propsIn;
+		const [scope, animate] = useAnimateSSRSafe();
+		const hostRef = useRef(null);
+		const seededNode = useRef(null);
+		const seededInCurrentFrame = useRef(false);
+		const queuedAnimationFrames = useRef(/* @__PURE__ */ new WeakMap());
+		const composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope);
+		const stateRef = useRef(null);
+		if (!stateRef.current) {
+			stateRef.current = { get host() {
+				return hostRef.current;
+			} };
+		}
+		const [_, state] = useThemeWithState({});
+		const styles = Array.isArray(style) ? style : [style];
+		const [animatedStyle, nonAnimatedStyles] = (() => {
+			let animatedStyle2;
+			const nonAnimatedStyles2 = [];
+			for (const style2 of styles) {
+				if (style2.getStyle) {
+					animatedStyle2 = style2;
+				} else {
+					nonAnimatedStyles2.push(style2);
+				}
+			}
+			return [animatedStyle2, nonAnimatedStyles2];
+		})();
+		function getProps(props2) {
+			if (process.env.NODE_ENV === "development" && propsIn.debug === "profile" && typeof performance !== "undefined") {
+				performance.mark("tamagui-motion-style-split");
+			}
+			const out = getSplitStyles(props2, isText ? Text.staticConfig : View.staticConfig, state?.theme, state?.name, { unmounted: false }, {
+				isAnimated: false,
+				noClass: true,
+				resolveValues: "auto"
+			});
+			if (!out) {
+				return {};
+			}
+			if (out.viewProps.style) {
+				fixStyles(out.viewProps.style);
+				styleToCSS(out.viewProps.style);
+			}
+			return out.viewProps;
+		}
+		const resolvedAnimatedStyle = useMemo(() => {
+			if (!animatedStyle) return null;
+			const currentValues = animatedStyle.motionValues ? animatedStyle.motionValues.map((value) => value.get()) : animatedStyle.motionValue ? [animatedStyle.motionValue.get()] : [];
+			const initialSource = animatedStyle.getStyle(...currentValues);
+			const initialResolved = asStyleRecord(getProps({ style: initialSource }).style);
+			return {
+				initial: initialResolved,
+				resolve: compileAnimatedStyle(initialSource, initialResolved)
+			};
+		}, [
+			animatedStyle,
+			state?.theme,
+			state?.name
+		]);
+		const memoRef = useRef(null);
+		let props;
+		const cached = memoRef.current;
+		if (cached && cached.theme === state?.theme && cached.themeName === state?.name && motionStylesEqual(cached.styles, nonAnimatedStyles) && motionPropsEqual(cached.propsRest, propsRest)) {
+			props = { ...cached.result };
+			for (const key in propsRest) {
+				const 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?.theme,
+				themeName: state?.name,
+				result: props
+			};
+		}
+		if (resolvedAnimatedStyle) {
+			props = {
+				...props,
+				style: {
+					...asStyleRecord(props.style),
+					...resolvedAnimatedStyle.initial
+				}
+			};
+		}
+		const Element = render || "div";
+		const transformedProps = hooks.usePropsTransform?.(render, props, stateRef, false);
+		useIsomorphicLayoutEffect(() => {
+			if (!animatedStyle) return;
+			const node = hostRef.current;
+			if (node instanceof HTMLElement && seededNode.current !== node) {
+				const currentStyle = animatedStyle.motionValues ? animatedStyle.getStyle(...animatedStyle.motionValues.map((value) => value.get())) : animatedStyle.motionValue ? animatedStyle.getStyle(animatedStyle.motionValue.get()) : null;
+				const webStyle = currentStyle && resolvedAnimatedStyle?.resolve(currentStyle);
+				if (webStyle) {
+					assignInlineStyles(node, webStyle);
+					seededNode.current = node;
+					seededInCurrentFrame.current = true;
+					requestAnimationFrame(() => {
+						if (seededNode.current === node) seededInCurrentFrame.current = false;
+					});
+				}
+			}
+			const toTransition = (animationConfig) => animationConfig?.type === "timing" ? {
+				type: "tween",
+				duration: (animationConfig.duration || 0) / 1e3
+			} : animationConfig?.type === "direct" ? {
+				type: "tween",
+				duration: 0
+			} : {
+				type: "spring",
+				...animationConfig
+			};
+			const animateNodeTo = (nextStyle, transition, motionValue3) => {
+				if (!(node instanceof HTMLElement) || hostRef.current !== node) return;
+				const webStyle = resolvedAnimatedStyle?.resolve(nextStyle);
+				if (!webStyle) return;
+				settlePendingMotionOnFinish(motionValue3, animate(node, webStyle, transition));
+			};
+			const animateChangedValue = (nextStyle, transition, motionValue3) => {
+				if (seededInCurrentFrame.current && seededNode.current === node) {
+					const queuedFrame = queuedAnimationFrames.current.get(motionValue3);
+					if (queuedFrame !== void 0) cancelAnimationFrame(queuedFrame);
+					const frame = requestAnimationFrame(() => {
+						if (queuedAnimationFrames.current.get(motionValue3) !== frame) return;
+						queuedAnimationFrames.current.delete(motionValue3);
+						if (hostRef.current === node) {
+							animateNodeTo(nextStyle, transition, motionValue3);
+						} else {
+							const onFinish = PendingMotionOnFinish.get(motionValue3);
+							PendingMotionOnFinish.delete(motionValue3);
+							onFinish?.();
+						}
+					});
+					queuedAnimationFrames.current.set(motionValue3, frame);
+					return;
+				}
+				animateNodeTo(nextStyle, transition, motionValue3);
+			};
+			if (animatedStyle.motionValues) {
+				const mvs = animatedStyle.motionValues;
+				const styleForAll = () => animatedStyle.getStyle(...mvs.map((value) => value.get()));
+				const unsubs = mvs.map((mv) => mv.on("change", () => animateChangedValue(styleForAll(), toTransition(MotionValueStrategy.get(mv)), mv)));
+				return () => unsubs.forEach((fn) => fn());
+			}
+			const motionValue2 = animatedStyle.motionValue;
+			if (!motionValue2) return;
+			return motionValue2.on("change", (value) => animateChangedValue(animatedStyle.getStyle(value), toTransition(MotionValueStrategy.get(motionValue2)), motionValue2));
+		}, [animatedStyle, resolvedAnimatedStyle]);
+		return /* @__PURE__ */ jsx(Element, {
+			...transformedProps,
+			ref: composedRefs
+		});
+	});
+	Component["acceptRenderProp"] = true;
+	return Component;
 }
 function getDiff(previous, next) {
-  if (!previous) {
-    return next;
-  }
-  let diff = null;
-  for (const key in next) {
-    if (next[key] !== previous[key]) {
-      diff ||= {};
-      diff[key] = next[key];
-    }
-  }
-  return diff;
+	if (!previous) {
+		return next;
+	}
+	let diff = null;
+	for (const key in next) {
+		if (next[key] !== previous[key]) {
+			diff ||= {};
+			diff[key] = next[key];
+		}
+	}
+	return diff;
 }
 function fixTransparentColors(diff, previous, next) {
-  let result = diff;
-  for (const key in diff) {
-    if (diff[key] === "transparent") {
-      let fixed = "rgba(0, 0, 0, 0)";
-      const candidates = [previous?.[key], next?.[key]];
-      for (const candidate of candidates) {
-        if (typeof candidate === "string" && candidate !== "transparent") {
-          const rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
-          if (rgbaMatch) {
-            fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
-            break;
-          }
-        }
-      }
-      if (result === diff) {
-        result = {
-          ...diff
-        };
-      }
-      result[key] = fixed;
-    }
-  }
-  return result;
+	let result = diff;
+	for (const key in diff) {
+		if (diff[key] === "transparent") {
+			let fixed = "rgba(0, 0, 0, 0)";
+			const candidates = [previous?.[key], next?.[key]];
+			for (const candidate of candidates) {
+				if (typeof candidate === "string" && candidate !== "transparent") {
+					const rgbaMatch = candidate.match(/^rgba?\(([^,]+),\s*([^,]+),\s*([^,)]+)/);
+					if (rgbaMatch) {
+						fixed = `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0)`;
+						break;
+					}
+				}
+			}
+			if (result === diff) {
+				result = { ...diff };
+			}
+			result[key] = fixed;
+		}
+	}
+	return result;
 }
+
 export { createAnimations, disableAnimationProps };
 //# sourceMappingURL=createAnimations.mjs.map