@hanzogui/animations-motion 8.3.0 → 8.3.2

package/dist/esm/createAnimations.native.js

@@ -1,804 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getEffectiveAnimation, normalizeTransition } from "@hanzogui/animation-helpers";
-import { ResetPresence, usePresence } from "@hanzogui/use-presence";
-import { fixStyles, getConfig, getSplitStyles, hooks, styleToCSS, Text, useComposedRefs, useIsomorphicLayoutEffect, useThemeWithState, View } from "@hanzogui/web";
-import { useAnimate, useMotionValue, useMotionValueEvent } from "motion/react";
-import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-function _instanceof(left, 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;
-}
-var isServer = typeof window === "undefined";
-function useAnimateSSRSafe() {
-  if (isServer) {
-    return [useRef(null), function () {}];
-  }
-  return useAnimate();
-}
-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();
-  });
-}
-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,
-    ResetPresence,
-    onMount() {
-      isHydratingGlobal = false;
-      hydratingComponents.forEach(function (cb) {
-        return cb();
-      });
-    },
-    useAnimations: function (animationProps) {
-      if (isHydratingGlobal === void 0 && !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 = 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;
-      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;
-      }
-      useEffect(function () {
-        refs.current.wasExiting = isExiting;
-      });
-      var {
-        dontAnimate = {},
-        doAnimate,
-        animationOptions
-      } = getMotionAnimatedProps(props, style, disableAnimation, animationState);
-      var [firstRenderStyle] = useState(style);
-      if (refs.current.isFirstRender) {
-        refs.current.lastDontAnimate = firstRenderStyle;
-      }
-      var [isHydrating, setIsHydrating] = useState(isHydratingGlobal);
-      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 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) {
-                    ;
-                    node.style[key2] = midFlightValues[key2];
-                  }
-                }
-                if (isPopperPosition) {
-                  var anims = node.getAnimations();
-                  var _iteratorNormalCompletion = true,
-                    _didIteratorError = false,
-                    _iteratorError = void 0;
-                  try {
-                    for (var _iterator = anims[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-                      var anim = _step.value;
-                      anim.cancel();
-                    }
-                  } catch (err) {
-                    _didIteratorError = true;
-                    _iteratorError = err;
-                  } finally {
-                    try {
-                      if (!_iteratorNormalCompletion && _iterator.return != null) {
-                        _iterator.return();
-                      }
-                    } finally {
-                      if (_didIteratorError) {
-                        throw _iteratorError;
-                      }
-                    }
-                  }
-                }
-              }
-              var fixedDiff = fixTransparentColors(diff, refs.current.lastDoAnimate, doAnimate2);
-              if ((isPopperPosition || isCurrentlyExiting) && (midFlightValues === null || midFlightValues === void 0 ? void 0 : midFlightValues.transform) && fixedDiff.transform) {
-                fixedDiff.transform = [midFlightValues.transform, fixedDiff.transform];
-              }
-              startedControls = animate(scope.current, fixedDiff, 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);
-      });
-      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);
-          }
-          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 motionValue = useMotionValue(initial);
-      return React.useMemo(function () {
-        return {
-          getInstance() {
-            return motionValue;
-          },
-          getValue() {
-            return motionValue.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(motionValue, {
-                type: "direct"
-              });
-              motionValue.set(next);
-              onFinish === null || onFinish === void 0 ? void 0 : onFinish();
-              return;
-            }
-            MotionValueStrategy.set(motionValue, config);
-            if (onFinish) {
-              var prior = PendingMotionOnFinish.get(motionValue);
-              if (prior) {
-                PendingMotionOnFinish.delete(motionValue);
-                prior();
-              }
-              PendingMotionOnFinish.set(motionValue, onFinish);
-            }
-            motionValue.set(next);
-          },
-          stop() {
-            motionValue.stop();
-          }
-        };
-      }, [motionValue]);
-    },
-    useAnimatedNumberReaction(param, onValue) {
-      var {
-        value
-      } = param;
-      var instance = value.getInstance();
-      useMotionValueEvent(instance, "change", onValue);
-    },
-    useAnimatedNumberStyle(val, getStyleProp) {
-      var motionValue = val.getInstance();
-      var getStyleRef = useRef(getStyleProp);
-      getStyleRef.current = getStyleProp;
-      return useMemo(function () {
-        return {
-          getStyle: function (cur) {
-            return getStyleRef.current(cur);
-          },
-          motionValue
-        };
-      }, []);
-    },
-    useAnimatedNumbersStyle(vals, getStyleProp) {
-      var motionValues = vals.map(function (v) {
-        return v.getInstance();
-      });
-      var getStyleRef = useRef(getStyleProp);
-      getStyleRef.current = getStyleProp;
-      return 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 = normalizeTransition(transitionProp);
-    var effectiveKey = 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
-  };
-}
-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;
-    }
-  }
-}
-function removeRemovedStyles(prev, next, node, dontClearIfIn) {
-  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"]);
-var MotionView = createMotionView("div");
-var MotionText = createMotionView("span");
-function createMotionView(defaultTag) {
-  var isText = defaultTag === "span";
-  var Component = /* @__PURE__ */forwardRef(function (propsIn, ref) {
-    var _hooks_usePropsTransform;
-    var {
-      forwardedRef,
-      animation,
-      render = defaultTag,
-      style,
-      ...propsRest
-    } = propsIn;
-    var [scope, animate] = useAnimateSSRSafe();
-    var hostRef = useRef(null);
-    var composedRefs = useComposedRefs(forwardedRef, ref, hostRef, scope);
-    var stateRef = useRef(null);
-    if (!stateRef.current) {
-      stateRef.current = {
-        get host() {
-          return hostRef.current;
-        }
-      };
-    }
-    var [_, state] = 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 = getSplitStyles(props2, isText ? Text.staticConfig : 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) {
-        fixStyles(out.viewProps.style);
-        styleToCSS(out.viewProps.style);
-      }
-      return out.viewProps;
-    }
-    var props = getProps({
-      ...propsRest,
-      style: nonAnimatedStyles
-    });
-    var Element = render || "div";
-    var transformedProps = (_hooks_usePropsTransform = hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(hooks, render, props, stateRef, false);
-    useEffect(function () {
-      if (!animatedStyle) return;
-      if (animatedStyle.motionValues) {
-        var mvs = animatedStyle.motionValues;
-        var unsubs = mvs.map(function (mv) {
-          return mv.on("change", function () {
-            var currentValues = mvs.map(function (v) {
-              return v.get();
-            });
-            var nextStyle = animatedStyle.getStyle(...currentValues);
-            var animationConfig = MotionValueStrategy.get(mv);
-            var node = hostRef.current;
-            var webStyle = getProps({
-              style: nextStyle
-            }).style;
-            if (webStyle && _instanceof(node, HTMLElement)) {
-              var motionAnimationConfig = (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 controls = animate(node, webStyle, motionAnimationConfig);
-              settlePendingMotionOnFinish(mv, controls);
-            }
-          });
-        });
-        return function () {
-          return unsubs.forEach(function (fn) {
-            return fn();
-          });
-        };
-      }
-      if (!animatedStyle.motionValue) return;
-      return animatedStyle.motionValue.on("change", function (value) {
-        var nextStyle = animatedStyle.getStyle(value);
-        var animationConfig = MotionValueStrategy.get(animatedStyle.motionValue);
-        var node = hostRef.current;
-        var webStyle = getProps({
-          style: nextStyle
-        }).style;
-        if (webStyle && _instanceof(node, HTMLElement)) {
-          var motionAnimationConfig = (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 controls = animate(node, webStyle, motionAnimationConfig);
-          settlePendingMotionOnFinish(animatedStyle.motionValue, controls);
-        }
-      });
-    }, [animatedStyle]);
-    return /* @__PURE__ */_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;
-}
-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;
-}
-export { createAnimations, disableAnimationProps };
-//# sourceMappingURL=createAnimations.native.js.map