@kitlangton/solid-motion 0.1.0

package/dist/index.js

@@ -0,0 +1,2466 @@
+import { createComponent, Dynamic, mergeProps, getNextElement, use, insert, effect, style, template } from "solid-js/web";
+import { createContext, useContext, splitProps, createSignal, createEffect, createMemo, onMount, onCleanup, mergeProps as mergeProps$1, on, untrack, For, batch, Index, children } from "solid-js";
+import { isControllingVariants, isVariantLabel, SVGVisualElement, HTMLVisualElement, isMotionValue, isForcedMotionValue, buildHTMLStyles, buildSVGAttrs, isSVGTag, resolveMotionValue, isVariantNode, isAnimationControls, resolveVariantFromProps, getFeatureDefinitions, setFeatureDefinitions, Feature, createAnimationState, isPrimaryPointer, addDomEvent, frameData, frame, cancelFrame, mixNumber, calcLength, createBox, eachAxis, measurePageBox, convertBoxToBoundingBox, convertBoundingBoxToBox, addValueToWillChange, animateMotionValue, setDragLock, percent, hover, press, HTMLProjectionNode, scrapeSVGMotionValuesFromProps, scrapeHTMLMotionValuesFromProps, motionValue, transformValue, transform, mapValue, JSAnimation, resolveElements, defaultOffset, isGenerator, createGeneratorEasing, fillOffset, isSVGElement, isSVGSVGElement, visualElementStore, ObjectVisualElement, animateSingleValue, animateTarget, spring, GroupAnimationWithThen } from "motion-dom";
+export * from "motion-dom";
+import { pipe, secondsToMilliseconds, millisecondsToSeconds, progress, clamp, invariant, noop, getEasingForSegment, removeItem } from "motion-utils";
+const defaultContext = {
+  transformPagePoint: ((p) => p),
+  isStatic: false,
+  reducedMotion: "never"
+};
+const MotionConfigContext = createContext(defaultContext);
+function MotionConfig(props) {
+  const parent = useContext(MotionConfigContext);
+  const [local, contextProps] = splitProps(props, ["children"]);
+  const value = {
+    ...parent,
+    ...contextProps
+  };
+  return createComponent(MotionConfigContext.Provider, {
+    value,
+    get children() {
+      return local.children;
+    }
+  });
+}
+const MotionContext = createContext({});
+const PresenceContext = createContext(null);
+function getCurrentTreeVariants(props, context) {
+  if (isControllingVariants(props)) {
+    const { initial, animate: animate2 } = props;
+    return {
+      initial: initial === false || isVariantLabel(initial) ? initial : void 0,
+      animate: isVariantLabel(animate2) ? animate2 : void 0
+    };
+  }
+  return props.inherit !== false ? context : {};
+}
+function createMotionContext(props, parentContext) {
+  const [initial, setInitial] = createSignal();
+  const [animate2, setAnimate] = createSignal();
+  createEffect(() => {
+    const variants = getCurrentTreeVariants(props, parentContext);
+    setInitial(variants.initial);
+    setAnimate(variants.animate);
+  });
+  return {
+    get initial() {
+      return initial();
+    },
+    get animate() {
+      return animate2();
+    }
+  };
+}
+const lowercaseSVGElements = [
+  "animate",
+  "circle",
+  "defs",
+  "desc",
+  "ellipse",
+  "g",
+  "image",
+  "line",
+  "filter",
+  "marker",
+  "mask",
+  "metadata",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "rect",
+  "stop",
+  "switch",
+  "symbol",
+  "svg",
+  "text",
+  "tspan",
+  "use",
+  "view"
+];
+function isSVGComponent(Component) {
+  if (typeof Component !== "string" || Component.includes("-")) {
+    return false;
+  }
+  if (lowercaseSVGElements.indexOf(Component) > -1 || /[A-Z]/u.test(Component)) {
+    return true;
+  }
+  return false;
+}
+const validMotionProps = /* @__PURE__ */ new Set([
+  "animate",
+  "exit",
+  "variants",
+  "initial",
+  "style",
+  "values",
+  "transition",
+  "transformTemplate",
+  "custom",
+  "inherit",
+  "onBeforeLayoutMeasure",
+  "onAnimationStart",
+  "onAnimationComplete",
+  "onUpdate",
+  "onDragStart",
+  "onDrag",
+  "onDragEnd",
+  "onMeasureDragConstraints",
+  "onDirectionLock",
+  "onDragTransitionEnd",
+  "_dragX",
+  "_dragY",
+  "onHoverStart",
+  "onHoverEnd",
+  "onViewportEnter",
+  "onViewportLeave",
+  "globalTapTarget",
+  "ignoreStrict",
+  "viewport"
+]);
+function isValidMotionProp(key) {
+  return key.startsWith("while") || key.startsWith("drag") && key !== "draggable" || key.startsWith("layout") || key.startsWith("onTap") || key.startsWith("onPan") || key.startsWith("onLayout") || validMotionProps.has(key);
+}
+function filterProps(props, isDom, forwardMotionProps) {
+  const filteredProps = {};
+  for (const key in props) {
+    if (key === "values" && typeof props.values === "object") continue;
+    if (!isValidMotionProp(key) || forwardMotionProps === true && isValidMotionProp(key) || !isDom && !isValidMotionProp(key) || props.draggable && key.startsWith("onDrag")) {
+      filteredProps[key] = props[key];
+    }
+  }
+  return filteredProps;
+}
+const createDomVisualElement = (Component, options) => {
+  const isSVG = options.isSVG ?? isSVGComponent(Component);
+  return isSVG ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
+    allowProjection: Component !== "svg"
+  });
+};
+const createHtmlRenderState = () => ({
+  style: {},
+  transform: {},
+  transformOrigin: {},
+  vars: {}
+});
+function toSolidStyle(style2) {
+  const result = {};
+  for (const key in style2) {
+    const name = key.startsWith("--") ? key : key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`).replace(/^ms-/, "-ms-");
+    result[name] = style2[key];
+  }
+  return result;
+}
+function copyRawValuesOnly(target, source, props) {
+  for (const key in source) {
+    if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
+      target[key] = source[key];
+    }
+  }
+}
+function resolveInitialMotionValues({ transformTemplate }, visualState) {
+  const state = createHtmlRenderState();
+  buildHTMLStyles(state, visualState, transformTemplate);
+  return { ...state.vars, ...state.style };
+}
+function resolveStyle(props, visualState) {
+  const styleProp = props.style || {};
+  const style2 = {};
+  copyRawValuesOnly(style2, styleProp, props);
+  Object.assign(style2, resolveInitialMotionValues(props, visualState));
+  return style2;
+}
+function resolveHTMLProps(props, visualState) {
+  const htmlProps = {};
+  const style2 = resolveStyle(props, visualState);
+  if (props.drag && props.dragListener !== false) {
+    htmlProps.draggable = false;
+    style2.userSelect = style2.WebkitUserSelect = style2.WebkitTouchCallout = "none";
+    style2.touchAction = props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`;
+  }
+  if (props.tabIndex === void 0 && (props.onTap || props.onTapStart || props.whileTap)) {
+    htmlProps.tabIndex = 0;
+  }
+  htmlProps.style = toSolidStyle(style2);
+  return htmlProps;
+}
+const createSvgRenderState = () => ({
+  ...createHtmlRenderState(),
+  attrs: {}
+});
+function resolveSVGProps(props, visualState, Component) {
+  const state = createSvgRenderState();
+  buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
+  const visualProps = {
+    ...state.attrs,
+    style: { ...state.style }
+  };
+  if (props.style) {
+    const rawStyles = {};
+    copyRawValuesOnly(rawStyles, props.style, props);
+    visualProps.style = { ...rawStyles, ...visualProps.style };
+  }
+  const pathLength = visualState.pathLength;
+  const pathSpacing = visualState.pathSpacing;
+  const pathOffset = visualState.pathOffset;
+  if (pathLength !== void 0) {
+    const spacing = pathSpacing ?? 1 - Number(pathLength);
+    visualProps.pathLength = 1;
+    visualProps["stroke-dasharray"] = `${pathLength} ${spacing}`;
+    visualProps["stroke-dashoffset"] = `${-Number(pathOffset ?? 0)}`;
+  }
+  visualProps.style = toSolidStyle(visualProps.style);
+  return visualProps;
+}
+function makeState({ scrapeMotionValuesFromProps, createRenderState }, props, context, presenceContext) {
+  const state = {
+    latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
+    renderState: createRenderState()
+  };
+  return state;
+}
+function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
+  const values = {};
+  const motionValues = scrapeMotionValues(props, {});
+  for (const key in motionValues) {
+    values[key] = resolveMotionValue(motionValues[key]);
+  }
+  let { initial, animate: animate2 } = props;
+  const isControllingVariants$1 = isControllingVariants(props);
+  const isVariantNode$1 = isVariantNode(props);
+  if (context && isVariantNode$1 && !isControllingVariants$1 && props.inherit !== false) {
+    if (initial === void 0) initial = context.initial;
+    if (animate2 === void 0) animate2 = context.animate;
+  }
+  let isInitialAnimationBlocked = presenceContext ? presenceContext.initial === false : false;
+  isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
+  const variantToSet = isInitialAnimationBlocked ? animate2 : initial;
+  if (variantToSet && typeof variantToSet !== "boolean" && !isAnimationControls(variantToSet)) {
+    const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+    for (let i = 0; i < list.length; i++) {
+      const resolved = resolveVariantFromProps(props, list[i]);
+      if (resolved) {
+        const { transitionEnd, transition, ...target } = resolved;
+        for (const key in target) {
+          let valueTarget = target[key];
+          if (Array.isArray(valueTarget)) {
+            const index = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
+            valueTarget = valueTarget[index];
+          }
+          if (valueTarget !== null) {
+            values[key] = valueTarget;
+          }
+        }
+        for (const key in transitionEnd) {
+          values[key] = transitionEnd[key];
+        }
+      }
+    }
+  }
+  return values;
+}
+function makeVisualState(config, props, context, presenceContext) {
+  return makeState(config, props, context, presenceContext);
+}
+const featureProps = {
+  animation: ["animate", "variants", "whileHover", "whileTap", "exit", "whileInView", "whileFocus", "whileDrag"],
+  exit: ["exit"],
+  drag: ["drag", "dragControls"],
+  focus: ["whileFocus"],
+  hover: ["whileHover", "onHoverStart", "onHoverEnd"],
+  tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
+  pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
+  inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
+  layout: ["layout", "layoutId"]
+};
+let isInitialized = false;
+function initFeatureDefinitions() {
+  if (isInitialized) return;
+  const initialFeatureDefinitions = {};
+  for (const key in featureProps) {
+    initialFeatureDefinitions[key] = {
+      isEnabled: (props) => featureProps[key].some((name) => Boolean(props[name]))
+    };
+  }
+  setFeatureDefinitions(initialFeatureDefinitions);
+  isInitialized = true;
+}
+function getInitializedFeatureDefinitions() {
+  initFeatureDefinitions();
+  return getFeatureDefinitions();
+}
+function loadFeatures(features) {
+  const featureDefinitions = getInitializedFeatureDefinitions();
+  for (const key in features) {
+    featureDefinitions[key] = {
+      ...featureDefinitions[key],
+      ...features[key]
+    };
+  }
+  setFeatureDefinitions(featureDefinitions);
+}
+class AnimationFeature extends Feature {
+  constructor(node) {
+    super(node);
+    node.animationState || (node.animationState = createAnimationState(node));
+  }
+  updateAnimationControlsSubscription() {
+    const { animate: animate2 } = this.node.getProps();
+    if (isAnimationControls(animate2)) {
+      this.unmountControls = animate2.subscribe(this.node);
+    }
+  }
+  mount() {
+    this.updateAnimationControlsSubscription();
+  }
+  update() {
+    const { animate: animate2 } = this.node.getProps();
+    const { animate: prevAnimate } = this.node.prevProps || {};
+    if (animate2 !== prevAnimate) {
+      this.updateAnimationControlsSubscription();
+    }
+  }
+  unmount() {
+    this.node.animationState?.reset();
+    this.unmountControls?.();
+  }
+}
+let id = 0;
+class ExitAnimationFeature extends Feature {
+  constructor() {
+    super(...arguments);
+    this.id = id++;
+  }
+  update() {
+    if (!this.node.presenceContext) return;
+    const { isPresent, onExitComplete } = this.node.presenceContext;
+    const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {};
+    if (!this.node.animationState || isPresent === prevIsPresent) {
+      return;
+    }
+    const exitAnimation = this.node.animationState.setActive("exit", !isPresent);
+    if (onExitComplete && !isPresent) {
+      exitAnimation.then(() => {
+        onExitComplete(this.id);
+      });
+    }
+  }
+  mount() {
+    const { register, onExitComplete } = this.node.presenceContext || {};
+    if (onExitComplete) {
+      onExitComplete(this.id);
+    }
+    if (register) {
+      this.unmount = register(this.id);
+    }
+  }
+  unmount() {
+  }
+}
+const animations = {
+  animation: {
+    Feature: AnimationFeature
+  },
+  exit: {
+    Feature: ExitAnimationFeature
+  }
+};
+function extractEventInfo(event) {
+  return {
+    point: {
+      x: event.pageX,
+      y: event.pageY
+    }
+  };
+}
+const addPointerInfo = (handler) => {
+  return (event) => {
+    const pointer = event;
+    if (isPrimaryPointer(pointer)) handler(pointer, extractEventInfo(pointer));
+  };
+};
+function addPointerEvent(target, eventName, handler, options) {
+  return addDomEvent(target, eventName, addPointerInfo(handler), options);
+}
+const getContextWindow = ({ current }) => {
+  return current ? current.ownerDocument.defaultView : null;
+};
+function isRefObject(ref) {
+  return ref && typeof ref === "object" && Object.prototype.hasOwnProperty.call(ref, "current");
+}
+const distance = (a, b) => Math.abs(a - b);
+function distance2D(a, b) {
+  const xDelta = distance(a.x, b.x);
+  const yDelta = distance(a.y, b.y);
+  return Math.sqrt(xDelta ** 2 + yDelta ** 2);
+}
+const overflowStyles = /* @__PURE__ */ new Set(["auto", "scroll"]);
+class PanSession {
+  constructor(event, handlers, {
+    transformPagePoint,
+    contextWindow = window,
+    dragSnapToOrigin = false,
+    distanceThreshold = 3,
+    element
+  } = {}) {
+    this.history = [];
+    this.startEvent = null;
+    this.lastMoveEvent = null;
+    this.lastMoveEventInfo = null;
+    this.handlers = {};
+    this.removeListeners = () => {
+    };
+    this.dragSnapToOrigin = false;
+    this.distanceThreshold = 3;
+    this.contextWindow = window;
+    this.scrollPositions = /* @__PURE__ */ new Map();
+    this.removeScrollListeners = null;
+    this.onElementScroll = (event2) => {
+      this.handleScroll(event2.target);
+    };
+    this.onWindowScroll = () => {
+      this.handleScroll(window);
+    };
+    this.updatePoint = () => {
+      if (!(this.lastMoveEvent && this.lastMoveEventInfo)) return;
+      const info2 = getPanInfo(this.lastMoveEventInfo, this.history);
+      const isPanStarted = this.startEvent !== null;
+      const isDistancePastThreshold = distance2D(info2.offset, { x: 0, y: 0 }) >= this.distanceThreshold;
+      if (!isPanStarted && !isDistancePastThreshold) return;
+      const { point: point2 } = info2;
+      const { timestamp: timestamp2 } = frameData;
+      this.history.push({ ...point2, timestamp: timestamp2 });
+      const { onStart, onMove } = this.handlers;
+      if (!isPanStarted) {
+        onStart && onStart(this.lastMoveEvent, info2);
+        this.startEvent = this.lastMoveEvent;
+      }
+      onMove && onMove(this.lastMoveEvent, info2);
+    };
+    this.handlePointerMove = (event2, info2) => {
+      this.lastMoveEvent = event2;
+      this.lastMoveEventInfo = transformPoint(info2, this.transformPagePoint);
+      frame.update(this.updatePoint, true);
+    };
+    this.handlePointerUp = (event2, info2) => {
+      this.end();
+      const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
+      if (this.dragSnapToOrigin || !this.startEvent) {
+        resumeAnimation && resumeAnimation();
+      }
+      if (!(this.lastMoveEvent && this.lastMoveEventInfo)) return;
+      const panInfo = getPanInfo(
+        event2.type === "pointercancel" ? this.lastMoveEventInfo : transformPoint(info2, this.transformPagePoint),
+        this.history
+      );
+      if (this.startEvent && onEnd) {
+        onEnd(event2, panInfo);
+      }
+      onSessionEnd && onSessionEnd(event2, panInfo);
+    };
+    if (!isPrimaryPointer(event)) return;
+    this.dragSnapToOrigin = dragSnapToOrigin;
+    this.handlers = handlers;
+    this.transformPagePoint = transformPagePoint;
+    this.distanceThreshold = distanceThreshold;
+    this.contextWindow = contextWindow || window;
+    const info = extractEventInfo(event);
+    const initialInfo = transformPoint(info, this.transformPagePoint);
+    const { point } = initialInfo;
+    const { timestamp } = frameData;
+    this.history = [{ ...point, timestamp }];
+    const { onSessionStart } = handlers;
+    onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
+    this.removeListeners = pipe(
+      addPointerEvent(
+        this.contextWindow,
+        "pointermove",
+        this.handlePointerMove
+      ),
+      addPointerEvent(
+        this.contextWindow,
+        "pointerup",
+        this.handlePointerUp
+      ),
+      addPointerEvent(
+        this.contextWindow,
+        "pointercancel",
+        this.handlePointerUp
+      )
+    );
+    if (element) {
+      this.startScrollTracking(element);
+    }
+  }
+  /**
+   * Start tracking scroll on ancestors and window.
+   */
+  startScrollTracking(element) {
+    let current = element.parentElement;
+    while (current) {
+      const style2 = getComputedStyle(current);
+      if (overflowStyles.has(style2.overflowX) || overflowStyles.has(style2.overflowY)) {
+        this.scrollPositions.set(current, {
+          x: current.scrollLeft,
+          y: current.scrollTop
+        });
+      }
+      current = current.parentElement;
+    }
+    this.scrollPositions.set(window, {
+      x: window.scrollX,
+      y: window.scrollY
+    });
+    window.addEventListener("scroll", this.onElementScroll, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("scroll", this.onWindowScroll, {
+      passive: true
+    });
+    this.removeScrollListeners = () => {
+      window.removeEventListener("scroll", this.onElementScroll, {
+        capture: true
+      });
+      window.removeEventListener("scroll", this.onWindowScroll);
+    };
+  }
+  /**
+   * Handle scroll compensation during drag.
+   *
+   * For element scroll: adjusts history origin since pageX/pageY doesn't change.
+   * For window scroll: adjusts lastMoveEventInfo since pageX/pageY would change.
+   */
+  handleScroll(target) {
+    const initial = this.scrollPositions.get(target);
+    if (!initial) return;
+    const isWindow = target === window;
+    const current = isWindow ? { x: window.scrollX, y: window.scrollY } : {
+      x: target.scrollLeft,
+      y: target.scrollTop
+    };
+    const delta = { x: current.x - initial.x, y: current.y - initial.y };
+    if (delta.x === 0 && delta.y === 0) return;
+    if (isWindow) {
+      if (this.lastMoveEventInfo) {
+        this.lastMoveEventInfo.point.x += delta.x;
+        this.lastMoveEventInfo.point.y += delta.y;
+      }
+    } else {
+      if (this.history.length > 0) {
+        this.history[0].x -= delta.x;
+        this.history[0].y -= delta.y;
+      }
+    }
+    this.scrollPositions.set(target, current);
+    frame.update(this.updatePoint, true);
+  }
+  updateHandlers(handlers) {
+    this.handlers = handlers;
+  }
+  end() {
+    this.removeListeners && this.removeListeners();
+    this.removeScrollListeners && this.removeScrollListeners();
+    this.scrollPositions.clear();
+    cancelFrame(this.updatePoint);
+  }
+}
+function transformPoint(info, transformPagePoint) {
+  return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
+}
+function subtractPoint(a, b) {
+  return { x: a.x - b.x, y: a.y - b.y };
+}
+function getPanInfo({ point }, history) {
+  return {
+    point,
+    delta: subtractPoint(point, lastDevicePoint(history)),
+    offset: subtractPoint(point, startDevicePoint(history)),
+    velocity: getVelocity(history, 0.1)
+  };
+}
+function startDevicePoint(history) {
+  return history[0];
+}
+function lastDevicePoint(history) {
+  return history[history.length - 1];
+}
+function getVelocity(history, timeDelta) {
+  if (history.length < 2) {
+    return { x: 0, y: 0 };
+  }
+  let i = history.length - 1;
+  let timestampedPoint = null;
+  const lastPoint = lastDevicePoint(history);
+  while (i >= 0) {
+    timestampedPoint = history[i];
+    if (lastPoint.timestamp - timestampedPoint.timestamp > secondsToMilliseconds(timeDelta)) {
+      break;
+    }
+    i--;
+  }
+  if (!timestampedPoint) {
+    return { x: 0, y: 0 };
+  }
+  const time = millisecondsToSeconds(
+    lastPoint.timestamp - timestampedPoint.timestamp
+  );
+  if (time === 0) {
+    return { x: 0, y: 0 };
+  }
+  const currentVelocity = {
+    x: (lastPoint.x - timestampedPoint.x) / time,
+    y: (lastPoint.y - timestampedPoint.y) / time
+  };
+  if (currentVelocity.x === Infinity) {
+    currentVelocity.x = 0;
+  }
+  if (currentVelocity.y === Infinity) {
+    currentVelocity.y = 0;
+  }
+  return currentVelocity;
+}
+function applyConstraints(point, { min, max }, elastic) {
+  if (min !== void 0 && point < min) {
+    point = elastic ? mixNumber(min, point, elastic.min) : Math.max(point, min);
+  } else if (max !== void 0 && point > max) {
+    point = elastic ? mixNumber(max, point, elastic.max) : Math.min(point, max);
+  }
+  return point;
+}
+function calcRelativeAxisConstraints(axis, min, max) {
+  return {
+    min: min !== void 0 ? axis.min + min : void 0,
+    max: max !== void 0 ? axis.max + max - (axis.max - axis.min) : void 0
+  };
+}
+function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
+  return {
+    x: calcRelativeAxisConstraints(layoutBox.x, left, right),
+    y: calcRelativeAxisConstraints(layoutBox.y, top, bottom)
+  };
+}
+function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
+  let min = constraintsAxis.min - layoutAxis.min;
+  let max = constraintsAxis.max - layoutAxis.max;
+  if (constraintsAxis.max - constraintsAxis.min < layoutAxis.max - layoutAxis.min) {
+    [min, max] = [max, min];
+  }
+  return { min, max };
+}
+function calcViewportConstraints(layoutBox, constraintsBox) {
+  return {
+    x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
+    y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y)
+  };
+}
+function calcOrigin(source, target) {
+  let origin = 0.5;
+  const sourceLength = calcLength(source);
+  const targetLength = calcLength(target);
+  if (targetLength > sourceLength) {
+    origin = progress(target.min, target.max - sourceLength, source.min);
+  } else if (sourceLength > targetLength) {
+    origin = progress(source.min, source.max - targetLength, target.min);
+  }
+  return clamp(0, 1, origin);
+}
+function rebaseAxisConstraints(layout, constraints) {
+  const relativeConstraints = {};
+  if (constraints.min !== void 0) {
+    relativeConstraints.min = constraints.min - layout.min;
+  }
+  if (constraints.max !== void 0) {
+    relativeConstraints.max = constraints.max - layout.min;
+  }
+  return relativeConstraints;
+}
+const defaultElastic = 0.35;
+function resolveDragElastic(dragElastic = defaultElastic) {
+  if (dragElastic === false) {
+    dragElastic = 0;
+  } else if (dragElastic === true) {
+    dragElastic = defaultElastic;
+  }
+  return {
+    x: resolveAxisElastic(dragElastic, "left", "right"),
+    y: resolveAxisElastic(dragElastic, "top", "bottom")
+  };
+}
+function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
+  return {
+    min: resolvePointElastic(dragElastic, minLabel),
+    max: resolvePointElastic(dragElastic, maxLabel)
+  };
+}
+function resolvePointElastic(dragElastic, label) {
+  return typeof dragElastic === "number" ? dragElastic : dragElastic[label] || 0;
+}
+const elementDragControls = /* @__PURE__ */ new WeakMap();
+class VisualElementDragControls {
+  constructor(visualElement) {
+    this.openDragLock = null;
+    this.isDragging = false;
+    this.currentDirection = null;
+    this.originPoint = { x: 0, y: 0 };
+    this.constraints = false;
+    this.hasMutatedConstraints = false;
+    this.elastic = createBox();
+    this.latestPointerEvent = null;
+    this.latestPanInfo = null;
+    this.visualElement = visualElement;
+  }
+  start(originEvent, { snapToCursor = false, distanceThreshold } = {}) {
+    const { presenceContext } = this.visualElement;
+    if (presenceContext && presenceContext.isPresent === false) return;
+    const onSessionStart = (event) => {
+      if (snapToCursor) {
+        this.stopAnimation();
+        this.snapToCursor(extractEventInfo(event).point);
+      } else {
+        this.pauseAnimation();
+      }
+    };
+    const onStart = (event, info) => {
+      this.stopAnimation();
+      const { drag, dragPropagation, onDragStart } = this.getProps();
+      if (drag && !dragPropagation) {
+        if (this.openDragLock) this.openDragLock();
+        this.openDragLock = setDragLock(drag);
+        if (!this.openDragLock) return;
+      }
+      this.latestPointerEvent = event;
+      this.latestPanInfo = info;
+      this.isDragging = true;
+      this.currentDirection = null;
+      this.resolveConstraints();
+      if (this.visualElement.projection) {
+        this.visualElement.projection.isAnimationBlocked = true;
+        this.visualElement.projection.target = void 0;
+      }
+      eachAxis((axis) => {
+        let current = this.getAxisMotionValue(axis).get() || 0;
+        if (percent.test(current)) {
+          const { projection } = this.visualElement;
+          if (projection && projection.layout) {
+            const measuredAxis = projection.layout.layoutBox[axis];
+            if (measuredAxis) {
+              const length = calcLength(measuredAxis);
+              current = length * (parseFloat(current) / 100);
+            }
+          }
+        }
+        this.originPoint[axis] = current;
+      });
+      if (onDragStart) {
+        frame.postRender(() => onDragStart(event, info));
+      }
+      addValueToWillChange(this.visualElement, "transform");
+      const { animationState } = this.visualElement;
+      animationState && animationState.setActive("whileDrag", true);
+    };
+    const onMove = (event, info) => {
+      this.latestPointerEvent = event;
+      this.latestPanInfo = info;
+      const {
+        dragPropagation,
+        dragDirectionLock,
+        onDirectionLock,
+        onDrag
+      } = this.getProps();
+      if (!dragPropagation && !this.openDragLock) return;
+      const { offset } = info;
+      if (dragDirectionLock && this.currentDirection === null) {
+        this.currentDirection = getCurrentDirection(offset);
+        if (this.currentDirection !== null) {
+          onDirectionLock && onDirectionLock(this.currentDirection);
+        }
+        return;
+      }
+      this.updateAxis("x", info.point, offset);
+      this.updateAxis("y", info.point, offset);
+      this.visualElement.render();
+      onDrag && onDrag(event, info);
+    };
+    const onSessionEnd = (event, info) => {
+      this.latestPointerEvent = event;
+      this.latestPanInfo = info;
+      this.stop(event, info);
+      this.latestPointerEvent = null;
+      this.latestPanInfo = null;
+    };
+    const resumeAnimation = () => eachAxis(
+      (axis) => this.getAnimationState(axis) === "paused" && this.getAxisMotionValue(axis).animation?.play()
+    );
+    const { dragSnapToOrigin } = this.getProps();
+    this.panSession = new PanSession(
+      originEvent,
+      {
+        onSessionStart,
+        onStart,
+        onMove,
+        onSessionEnd,
+        resumeAnimation
+      },
+      {
+        transformPagePoint: this.visualElement.getTransformPagePoint(),
+        dragSnapToOrigin,
+        distanceThreshold,
+        contextWindow: getContextWindow(this.visualElement),
+        element: this.visualElement.current
+      }
+    );
+  }
+  /**
+   * @internal
+   */
+  stop(event, panInfo) {
+    const finalEvent = event || this.latestPointerEvent;
+    const finalPanInfo = panInfo || this.latestPanInfo;
+    const isDragging = this.isDragging;
+    this.cancel();
+    if (!isDragging || !finalPanInfo || !finalEvent) return;
+    const { velocity } = finalPanInfo;
+    this.startAnimation(velocity);
+    const { onDragEnd } = this.getProps();
+    if (onDragEnd) {
+      frame.postRender(() => onDragEnd(finalEvent, finalPanInfo));
+    }
+  }
+  /**
+   * @internal
+   */
+  cancel() {
+    this.isDragging = false;
+    const { projection, animationState } = this.visualElement;
+    if (projection) {
+      projection.isAnimationBlocked = false;
+    }
+    this.endPanSession();
+    const { dragPropagation } = this.getProps();
+    if (!dragPropagation && this.openDragLock) {
+      this.openDragLock();
+      this.openDragLock = null;
+    }
+    animationState && animationState.setActive("whileDrag", false);
+  }
+  /**
+   * Clean up the pan session without modifying other drag state.
+   * This is used during unmount to ensure event listeners are removed
+   * without affecting projection animations or drag locks.
+   * @internal
+   */
+  endPanSession() {
+    this.panSession && this.panSession.end();
+    this.panSession = void 0;
+  }
+  /** Final owner disposal, including any release inertia on external values. */
+  dispose() {
+    this.cancel();
+    this.stopAnimation();
+    elementDragControls.delete(this.visualElement);
+  }
+  updateAxis(axis, _point, offset) {
+    const { drag } = this.getProps();
+    if (!offset || !shouldDrag(axis, drag, this.currentDirection)) return;
+    const axisValue = this.getAxisMotionValue(axis);
+    let next = this.originPoint[axis] + offset[axis];
+    if (this.constraints && this.constraints[axis]) {
+      next = applyConstraints(
+        next,
+        this.constraints[axis],
+        this.elastic[axis]
+      );
+    }
+    axisValue.set(next);
+  }
+  resolveConstraints() {
+    const { dragConstraints, dragElastic } = this.getProps();
+    const layout = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(false) : this.visualElement.projection?.layout;
+    const prevConstraints = this.constraints;
+    if (dragConstraints && isRefObject(dragConstraints)) {
+      if (!this.constraints) {
+        this.constraints = this.resolveRefConstraints();
+      }
+    } else {
+      if (dragConstraints && layout) {
+        this.constraints = calcRelativeConstraints(
+          layout.layoutBox,
+          dragConstraints
+        );
+      } else {
+        this.constraints = false;
+      }
+    }
+    this.elastic = resolveDragElastic(dragElastic);
+    if (prevConstraints !== this.constraints && layout && this.constraints && !this.hasMutatedConstraints) {
+      eachAxis((axis) => {
+        if (this.constraints !== false && this.getAxisMotionValue(axis)) {
+          this.constraints[axis] = rebaseAxisConstraints(
+            layout.layoutBox[axis],
+            this.constraints[axis]
+          );
+        }
+      });
+    }
+  }
+  resolveRefConstraints() {
+    const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
+    if (!constraints || !isRefObject(constraints)) return false;
+    const constraintsElement = constraints.current;
+    invariant(
+      constraintsElement !== null,
+      "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.",
+      "drag-constraints-ref"
+    );
+    const { projection } = this.visualElement;
+    if (!projection || !projection.layout) return false;
+    const constraintsBox = measurePageBox(
+      constraintsElement,
+      projection.root,
+      this.visualElement.getTransformPagePoint()
+    );
+    let measuredConstraints = calcViewportConstraints(
+      projection.layout.layoutBox,
+      constraintsBox
+    );
+    if (onMeasureDragConstraints) {
+      const userConstraints = onMeasureDragConstraints(
+        convertBoxToBoundingBox(measuredConstraints)
+      );
+      this.hasMutatedConstraints = !!userConstraints;
+      if (userConstraints) {
+        measuredConstraints = convertBoundingBoxToBox(userConstraints);
+      }
+    }
+    return measuredConstraints;
+  }
+  startAnimation(velocity) {
+    const {
+      drag,
+      dragMomentum,
+      dragElastic,
+      dragTransition,
+      dragSnapToOrigin,
+      onDragTransitionEnd
+    } = this.getProps();
+    const constraints = this.constraints || {};
+    const momentumAnimations = eachAxis((axis) => {
+      if (!shouldDrag(axis, drag, this.currentDirection)) {
+        return;
+      }
+      let transition = constraints && constraints[axis] || {};
+      if (dragSnapToOrigin) transition = { min: 0, max: 0 };
+      const bounceStiffness = dragElastic ? 200 : 1e6;
+      const bounceDamping = dragElastic ? 40 : 1e7;
+      const inertia = {
+        type: "inertia",
+        velocity: dragMomentum ? velocity[axis] : 0,
+        bounceStiffness,
+        bounceDamping,
+        timeConstant: 750,
+        restDelta: 1,
+        restSpeed: 10,
+        ...dragTransition,
+        ...transition
+      };
+      return this.startAxisValueAnimation(axis, inertia);
+    });
+    return Promise.all(momentumAnimations).then(onDragTransitionEnd);
+  }
+  startAxisValueAnimation(axis, transition) {
+    const axisValue = this.getAxisMotionValue(axis);
+    addValueToWillChange(this.visualElement, axis);
+    return axisValue.start(
+      animateMotionValue(
+        axis,
+        axisValue,
+        0,
+        transition,
+        this.visualElement,
+        false
+      )
+    );
+  }
+  stopAnimation() {
+    eachAxis((axis) => this.getAxisMotionValue(axis).stop());
+  }
+  pauseAnimation() {
+    eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
+  }
+  getAnimationState(axis) {
+    return this.getAxisMotionValue(axis).animation?.state;
+  }
+  /**
+   * Drag works differently depending on which props are provided.
+   *
+   * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
+   * - Otherwise, we apply the delta to the x/y motion values.
+   */
+  getAxisMotionValue(axis) {
+    const dragKey = `_drag${axis.toUpperCase()}`;
+    const props = this.visualElement.getProps();
+    const externalMotionValue = props[dragKey];
+    return externalMotionValue ? externalMotionValue : this.visualElement.getValue(
+      axis,
+      (props.initial ? props.initial[axis] : void 0) || 0
+    );
+  }
+  snapToCursor(point) {
+    eachAxis((axis) => {
+      const { drag } = this.getProps();
+      if (!shouldDrag(axis, drag, this.currentDirection)) return;
+      const { projection } = this.visualElement;
+      const axisValue = this.getAxisMotionValue(axis);
+      if (projection && projection.layout) {
+        const { min, max } = projection.layout.layoutBox[axis];
+        const current = axisValue.get() || 0;
+        axisValue.set(point[axis] - mixNumber(min, max, 0.5) + current);
+      }
+    });
+  }
+  /**
+   * When the viewport resizes we want to check if the measured constraints
+   * have changed and, if so, reposition the element within those new constraints
+   * relative to where it was before the resize.
+   */
+  scalePositionWithinConstraints() {
+    if (!this.visualElement.current) return;
+    const { drag, dragConstraints } = this.getProps();
+    const { projection } = this.visualElement;
+    if (!isRefObject(dragConstraints) || !projection || !this.constraints)
+      return;
+    this.stopAnimation();
+    const boxProgress = { x: 0, y: 0 };
+    eachAxis((axis) => {
+      const axisValue = this.getAxisMotionValue(axis);
+      if (axisValue && this.constraints !== false) {
+        const latest = axisValue.get();
+        boxProgress[axis] = calcOrigin(
+          { min: latest, max: latest },
+          this.constraints[axis]
+        );
+      }
+    });
+    const { transformTemplate } = this.visualElement.getProps();
+    this.visualElement.current.style.transform = transformTemplate ? transformTemplate({}, "") : "none";
+    projection.root && projection.root.updateScroll();
+    projection.updateLayout();
+    this.resolveConstraints();
+    eachAxis((axis) => {
+      if (!shouldDrag(axis, drag, null)) return;
+      const axisValue = this.getAxisMotionValue(axis);
+      const { min, max } = this.constraints[axis];
+      axisValue.set(mixNumber(min, max, boxProgress[axis]));
+    });
+  }
+  addListeners() {
+    if (!this.visualElement.current) return;
+    elementDragControls.set(this.visualElement, this);
+    const element = this.visualElement.current;
+    const stopPointerListener = addPointerEvent(
+      element,
+      "pointerdown",
+      (event) => {
+        const { drag, dragListener = true } = this.getProps();
+        const target = event.target;
+        const isClickingTextInputChild = target !== element && (Boolean(target.closest("input, textarea, select")) || target instanceof HTMLElement && target.isContentEditable);
+        if (drag && dragListener && !isClickingTextInputChild) {
+          this.start(event);
+        }
+      }
+    );
+    const measureDragConstraints = () => {
+      const { dragConstraints } = this.getProps();
+      if (isRefObject(dragConstraints) && dragConstraints.current) {
+        this.constraints = this.resolveRefConstraints();
+      }
+    };
+    const { projection } = this.visualElement;
+    const stopMeasureLayoutListener = projection.addEventListener(
+      "measure",
+      measureDragConstraints
+    );
+    if (projection && !projection.layout) {
+      projection.root && projection.root.updateScroll();
+      projection.updateLayout();
+    }
+    frame.read(measureDragConstraints);
+    const stopResizeListener = addDomEvent(
+      window,
+      "resize",
+      () => this.scalePositionWithinConstraints()
+    );
+    const stopLayoutUpdateListener = projection.addEventListener(
+      "didUpdate",
+      (({ delta, hasLayoutChanged }) => {
+        if (this.isDragging && hasLayoutChanged) {
+          eachAxis((axis) => {
+            const motionValue2 = this.getAxisMotionValue(axis);
+            if (!motionValue2) return;
+            this.originPoint[axis] += delta[axis].translate;
+            motionValue2.set(
+              motionValue2.get() + delta[axis].translate
+            );
+          });
+          this.visualElement.render();
+        }
+      })
+    );
+    return () => {
+      cancelFrame(measureDragConstraints);
+      stopResizeListener();
+      stopPointerListener();
+      stopMeasureLayoutListener();
+      stopLayoutUpdateListener && stopLayoutUpdateListener();
+    };
+  }
+  getProps() {
+    const props = this.visualElement.getProps();
+    const {
+      drag = false,
+      dragDirectionLock = false,
+      dragPropagation = false,
+      dragConstraints = false,
+      dragElastic = defaultElastic,
+      dragMomentum = true
+    } = props;
+    return {
+      ...props,
+      drag,
+      dragDirectionLock,
+      dragPropagation,
+      dragConstraints,
+      dragElastic,
+      dragMomentum
+    };
+  }
+}
+function shouldDrag(direction, drag, currentDirection) {
+  return (drag === true || drag === direction) && (currentDirection === null || currentDirection === direction);
+}
+function getCurrentDirection(offset, lockThreshold = 10) {
+  let direction = null;
+  if (Math.abs(offset.y) > lockThreshold) {
+    direction = "y";
+  } else if (Math.abs(offset.x) > lockThreshold) {
+    direction = "x";
+  }
+  return direction;
+}
+let DragGesture$1 = class DragGesture extends Feature {
+  constructor(node) {
+    super(node);
+    this.removeGroupControls = noop;
+    this.removeListeners = noop;
+    this.controls = new VisualElementDragControls(node);
+  }
+  mount() {
+    const { dragControls } = this.node.getProps();
+    if (dragControls) {
+      this.removeGroupControls = dragControls.subscribe(this.controls);
+    }
+    this.removeListeners = this.controls.addListeners() || noop;
+  }
+  update() {
+    const { dragControls } = this.node.getProps();
+    const { dragControls: prevDragControls } = this.node.prevProps || {};
+    if (dragControls !== prevDragControls) {
+      this.removeGroupControls();
+      if (dragControls) {
+        this.removeGroupControls = dragControls.subscribe(this.controls);
+      }
+    }
+  }
+  unmount() {
+    this.removeGroupControls();
+    this.removeListeners();
+    if (!this.controls.isDragging) {
+      this.controls.endPanSession();
+    }
+  }
+};
+const asyncHandler = (handler) => (event, info) => {
+  if (handler) {
+    frame.postRender(() => handler(event, info));
+  }
+};
+class PanGesture extends Feature {
+  constructor() {
+    super(...arguments);
+    this.removePointerDownListener = noop;
+  }
+  onPointerDown(pointerDownEvent) {
+    this.session = new PanSession(
+      pointerDownEvent,
+      this.createPanHandlers(),
+      {
+        transformPagePoint: this.node.getTransformPagePoint(),
+        contextWindow: getContextWindow(this.node)
+      }
+    );
+  }
+  createPanHandlers() {
+    const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
+    return {
+      onSessionStart: asyncHandler(onPanSessionStart),
+      onStart: asyncHandler(onPanStart),
+      onMove: onPan,
+      onEnd: (event, info) => {
+        delete this.session;
+        if (onPanEnd) {
+          frame.postRender(() => onPanEnd(event, info));
+        }
+      }
+    };
+  }
+  mount() {
+    this.removePointerDownListener = addPointerEvent(
+      this.node.current,
+      "pointerdown",
+      (event) => this.onPointerDown(event)
+    );
+  }
+  update() {
+    this.session && this.session.updateHandlers(this.createPanHandlers());
+  }
+  unmount() {
+    this.removePointerDownListener();
+    this.session && this.session.end();
+  }
+}
+function handleHoverEvent(node, event, lifecycle) {
+  const { props } = node;
+  if (node.animationState && props.whileHover) {
+    node.animationState.setActive("whileHover", lifecycle === "Start");
+  }
+  const eventName = "onHover" + lifecycle;
+  const callback = props[eventName];
+  if (callback) {
+    frame.postRender(() => callback(event, extractEventInfo(event)));
+  }
+}
+class HoverGesture extends Feature {
+  mount() {
+    const { current } = this.node;
+    if (!current) return;
+    this.unmount = hover(current, (_element, startEvent) => {
+      handleHoverEvent(this.node, startEvent, "Start");
+      return (endEvent) => handleHoverEvent(this.node, endEvent, "End");
+    });
+  }
+  unmount() {
+  }
+}
+function handlePressEvent(node, event, lifecycle) {
+  const { props } = node;
+  if (node.current instanceof HTMLButtonElement && node.current.disabled) {
+    return;
+  }
+  if (node.animationState && props.whileTap) {
+    node.animationState.setActive("whileTap", lifecycle === "Start");
+  }
+  const eventName = "onTap" + (lifecycle === "End" ? "" : lifecycle);
+  const callback = props[eventName];
+  if (callback) {
+    frame.postRender(() => callback(event, extractEventInfo(event)));
+  }
+}
+class PressGesture extends Feature {
+  mount() {
+    const { current } = this.node;
+    if (!current) return;
+    this.unmount = press(
+      current,
+      (_element, startEvent) => {
+        handlePressEvent(this.node, startEvent, "Start");
+        return (endEvent, { success }) => handlePressEvent(
+          this.node,
+          endEvent,
+          success ? "End" : "Cancel"
+        );
+      },
+      { useGlobalTarget: this.node.props.globalTapTarget }
+    );
+  }
+  unmount() {
+  }
+}
+class FocusGesture extends Feature {
+  constructor() {
+    super(...arguments);
+    this.isActive = false;
+  }
+  onFocus() {
+    let isFocusVisible = false;
+    try {
+      isFocusVisible = this.node.current.matches(":focus-visible");
+    } catch (e) {
+      isFocusVisible = true;
+    }
+    if (!isFocusVisible || !this.node.animationState) return;
+    this.node.animationState.setActive("whileFocus", true);
+    this.isActive = true;
+  }
+  onBlur() {
+    if (!this.isActive || !this.node.animationState) return;
+    this.node.animationState.setActive("whileFocus", false);
+    this.isActive = false;
+  }
+  mount() {
+    this.unmount = pipe(
+      addDomEvent(this.node.current, "focus", () => this.onFocus()),
+      addDomEvent(this.node.current, "blur", () => this.onBlur())
+    );
+  }
+  unmount() {
+  }
+}
+class DragGesture2 extends DragGesture$1 {
+  unmount() {
+    this.controls.dispose();
+    super.unmount();
+  }
+}
+const gestures = {
+  drag: { Feature: DragGesture2 },
+  pan: { Feature: PanGesture },
+  hover: { Feature: HoverGesture },
+  tap: { Feature: PressGesture },
+  focus: { Feature: FocusGesture }
+};
+const featureBundle = {
+  ...animations,
+  ...gestures
+};
+function prepareDragProjection(node, props) {
+  if (node.projection || !(props.drag || props.dragControls)) return;
+  node.projection = new HTMLProjectionNode(node.latestValues, node.parent?.projection);
+  node.projection.setOptions({
+    visualElement: node,
+    alwaysMeasureLayout: true,
+    layout: false,
+    animationType: "both"
+  });
+  if (node.current) node.projection.mount(node.current);
+}
+const isBrowser = typeof window !== "undefined";
+function useVisualState(isSVG, props, context, presenceContext) {
+  const config = isSVG ? {
+    scrapeMotionValuesFromProps: scrapeSVGMotionValuesFromProps,
+    createRenderState: createSvgRenderState
+  } : {
+    scrapeMotionValuesFromProps: scrapeHTMLMotionValuesFromProps,
+    createRenderState: createHtmlRenderState
+  };
+  return makeVisualState(config, props, context, presenceContext);
+}
+function createMotionComponent(Component, {
+  forwardMotionProps = false,
+  type
+} = {}, preloadedFeatures, createVisualElement) {
+  if (preloadedFeatures) {
+    loadFeatures(preloadedFeatures);
+  }
+  const isSVG = type ? type === "svg" : isSVGComponent(Component);
+  return function MotionDOMComponent(props) {
+    const motionConfig = useContext(MotionConfigContext);
+    const parentContext = useContext(MotionContext);
+    const rawPresenceContext = useContext(PresenceContext);
+    const presenceContext = createMemo(() => {
+      if (!rawPresenceContext) return null;
+      const resolved = {
+        id: rawPresenceContext.id(),
+        isPresent: rawPresenceContext.isPresent(),
+        initial: rawPresenceContext.initial(),
+        custom: rawPresenceContext.custom(),
+        onExitComplete: rawPresenceContext.onExitComplete,
+        register: rawPresenceContext.register ?? (() => () => {
+        })
+      };
+      return resolved;
+    });
+    const ownProps = createMemo(() => {
+      const nextProps = {};
+      for (const key in props) {
+        if (key === "children") continue;
+        nextProps[key] = props[key];
+      }
+      return nextProps;
+    });
+    const getLatestProps = createMemo(() => ({
+      ...motionConfig,
+      ...ownProps()
+    }));
+    const isStatic = createMemo(() => Boolean(getLatestProps().isStatic));
+    const context = createMotionContext(props, parentContext);
+    const visualState = useVisualState(isSVG, props, context, presenceContext());
+    let visualElement;
+    const initialPresenceContext = presenceContext();
+    if (!isStatic() && isBrowser) {
+      visualElement = (createVisualElement || createDomVisualElement)(Component, {
+        visualState,
+        parent: parentContext.visualElement,
+        props: getLatestProps(),
+        presenceContext: initialPresenceContext,
+        blockInitialAnimation: initialPresenceContext ? initialPresenceContext.initial === false : false,
+        reducedMotionConfig: motionConfig.reducedMotion,
+        skipAnimations: motionConfig.skipAnimations,
+        isSVG
+      });
+      if (visualElement) prepareDragProjection(visualElement, getLatestProps());
+    }
+    context.visualElement = visualElement;
+    const [local, rest] = splitProps(props, ["ref", "children"]);
+    const elementProps = createMemo(() => {
+      const latestProps = getLatestProps();
+      const filtered = filterProps(ownProps(), typeof Component === "string", forwardMotionProps);
+      delete filtered.children;
+      delete filtered.ref;
+      const componentTag = typeof Component === "string" ? Component : "svg";
+      const visualProps = isSVG ? resolveSVGProps(latestProps, visualState.latestValues, componentTag) : resolveHTMLProps(latestProps, visualState.latestValues);
+      return {
+        ...filtered,
+        ...visualProps
+      };
+    });
+    onMount(() => {
+      if (!visualElement) return;
+      visualElement.scheduleRenderMicrotask();
+    });
+    createEffect(() => {
+      if (!visualElement) return;
+      const nextProps = getLatestProps();
+      const nextPresenceContext = presenceContext();
+      visualElement.update(nextProps, nextPresenceContext);
+      prepareDragProjection(visualElement, nextProps);
+      visualElement.updateFeatures();
+      if (visualElement.current && visualElement.animationState) {
+        visualElement.animationState.animateChanges();
+      }
+    });
+    onCleanup(() => {
+      visualElement?.unmount();
+    });
+    const setRef = (instance) => {
+      if (!instance) return;
+      visualElement?.mount(instance);
+      if (visualElement && parentContext.visualElement) {
+        const parent = parentContext.visualElement;
+        visualElement.parent = parent;
+        if (typeof parent.depth === "number") {
+          visualElement.depth = parent.depth + 1;
+        }
+        if (visualElement.isVariantNode && !visualElement.isControllingVariants) {
+          visualElement.removeFromVariantTree?.();
+          if (typeof parent.addVariantChild === "function") {
+            visualElement.removeFromVariantTree = parent.addVariantChild(visualElement);
+          }
+        }
+      }
+      visualState.onMount?.(instance);
+      const externalRef = local.ref;
+      if (typeof externalRef === "function") {
+        externalRef(instance);
+      } else if (externalRef && typeof externalRef === "object") {
+        externalRef.current = instance;
+      }
+    };
+    return createComponent(MotionContext.Provider, {
+      value: context,
+      get children() {
+        return createComponent(Dynamic, mergeProps({
+          component: Component
+        }, elementProps, {
+          ref: setRef,
+          get children() {
+            return local.children;
+          }
+        }));
+      }
+    });
+  };
+}
+function createMotionComponentWithFeatures(Component, options) {
+  return createMotionComponent(Component, options, featureBundle, createDomVisualElement);
+}
+const componentCache = /* @__PURE__ */ new Map();
+const motionProxy = new Proxy(createMotionComponentWithFeatures, {
+  get: (target, key) => {
+    if (key === "create") return createMotionComponentWithFeatures;
+    if (typeof key !== "string") return Reflect.get(target, key);
+    let component = componentCache.get(key);
+    if (!component) {
+      component = createMotionComponentWithFeatures(key);
+      componentCache.set(key, component);
+    }
+    return component;
+  }
+});
+const motion = motionProxy;
+const m = motionProxy;
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+let presenceCounter = 0;
+const autoKeyMap = /* @__PURE__ */ new WeakMap();
+function AnimatePresence(props) {
+  const merged = mergeProps$1({
+    initial: true,
+    mode: "sync",
+    presenceAffectsLayout: true
+  }, props);
+  const [local, others] = splitProps(merged, ["children", "when", "presenceKey", "initial", "onExitComplete", "mode", "presenceAffectsLayout", "custom", "anchorX", "root"]);
+  let isInitialRender = true;
+  let didWarn = false;
+  const warnNonFactory = () => {
+    if (didWarn) return;
+    didWarn = true;
+    console.warn("[AnimatePresence] Solid requires children to be a function for exit animations to work reliably. Use <AnimatePresence when={condition}>{() => <motion.div .../>}</AnimatePresence>.");
+  };
+  if (local.when !== void 0) {
+    const currentChild = createMemo(() => {
+      if (!local.when) return void 0;
+      const childrenValue = local.children;
+      const getChild = () => {
+        let value = typeof childrenValue === "function" ? childrenValue() : childrenValue;
+        if (typeof value === "function" && value.length === 0) {
+          value = value();
+        }
+        return value;
+      };
+      if (typeof childrenValue !== "function") {
+        warnNonFactory();
+      }
+      return {
+        key: local.presenceKey ?? "index-0",
+        getChild
+      };
+    });
+    const initialChild = currentChild();
+    const [rendered, setRendered] = createSignal(initialChild ? [initialChild] : []);
+    createEffect(on(currentChild, (next) => {
+      const previous = untrack(rendered);
+      const exiting = previous.filter((child) => child.key !== next?.key);
+      const present = next && (previous.find((child) => child.key === next.key) ?? next);
+      setRendered(local.mode === "wait" && exiting.length ? exiting : present ? [present, ...exiting] : exiting);
+    }, {
+      defer: true
+    }));
+    onMount(() => {
+      isInitialRender = false;
+    });
+    return createComponent(For, {
+      get each() {
+        return rendered();
+      },
+      children: (child) => {
+        const isPresent = () => currentChild()?.key === child.key;
+        const onExitComplete = () => {
+          const next = untrack(currentChild);
+          const previous = untrack(rendered);
+          if (next?.key === child.key || !previous.includes(child)) return;
+          const remaining = previous.filter((item) => item !== child);
+          const hasExits = remaining.some((item) => item.key !== next?.key);
+          setRendered(!hasExits && next ? [remaining.find((item) => item.key === next.key) ?? next] : remaining);
+          if (!hasExits) local.onExitComplete?.();
+        };
+        return createComponent(PresenceChild, {
+          get key() {
+            return child.key;
+          },
+          isPresent,
+          get onExitComplete() {
+            return isPresent() ? void 0 : onExitComplete;
+          },
+          get initial() {
+            return isInitialRender && !local.initial ? false : void 0;
+          },
+          get custom() {
+            return local.custom;
+          },
+          get presenceAffectsLayout() {
+            return local.presenceAffectsLayout;
+          },
+          get getChild() {
+            return child.getChild;
+          },
+          get childKey() {
+            return child.key;
+          },
+          get mode() {
+            return local.mode;
+          },
+          get anchorX() {
+            return local.anchorX;
+          },
+          get root() {
+            return local.root;
+          }
+        });
+      }
+    });
+  }
+  const resolveChildrenList = () => {
+    const childrenValue = local.children;
+    if (local.when !== void 0) {
+      if (!local.when) return [];
+      if (typeof childrenValue !== "function") {
+        warnNonFactory();
+      }
+      const getChild = typeof childrenValue === "function" ? childrenValue : () => childrenValue;
+      const key = local.presenceKey ?? "index-0";
+      return [{
+        key,
+        getChild
+      }];
+    }
+    const child = typeof childrenValue === "function" ? childrenValue() : childrenValue;
+    if (!child || child === true) return [];
+    const list = Array.isArray(child) ? child : [child];
+    return list.filter((item) => item !== false && item != null).map((item, index) => ({
+      key: getChildKey(item, index),
+      getChild: () => item
+    }));
+  };
+  const presentChildren = createMemo(() => resolveChildrenList());
+  const presentKeys = createMemo(() => {
+    return presentChildren().map((child) => child.key);
+  });
+  const [allChildren, setAllChildren] = createSignal([], {
+    equals: false
+  });
+  const [exitStatus, setExitStatus] = createSignal(/* @__PURE__ */ new Map(), {
+    equals: false
+  });
+  createEffect(() => {
+    const current = presentChildren();
+    const currentKeys = presentKeys();
+    const prev = untrack(allChildren);
+    const prevExitStatus = untrack(exitStatus);
+    let nextExitStatus = prevExitStatus;
+    let exitStatusChanged = false;
+    const exitingChildren = prev.filter((child) => !currentKeys.includes(child.key));
+    prevExitStatus.forEach((_, key) => {
+      if (currentKeys.includes(key)) {
+        if (!exitStatusChanged) {
+          nextExitStatus = new Map(prevExitStatus);
+          exitStatusChanged = true;
+        }
+        nextExitStatus.delete(key);
+      }
+    });
+    exitingChildren.forEach((child) => {
+      if (!prevExitStatus.has(child.key)) {
+        if (!exitStatusChanged) {
+          nextExitStatus = new Map(prevExitStatus);
+          exitStatusChanged = true;
+        }
+        nextExitStatus.set(child.key, false);
+      }
+    });
+    if (exitStatusChanged) {
+      setExitStatus(nextExitStatus);
+    }
+    const nextChildren = [];
+    for (let i = 0; i < current.length; i++) {
+      const child = current[i];
+      nextChildren.push({
+        key: child.key,
+        getChild: child.getChild,
+        isPresent: true,
+        index: i
+      });
+    }
+    if (local.mode === "wait" && exitingChildren.length > 0) {
+      nextChildren.length = 0;
+      exitingChildren.forEach((child) => {
+        nextChildren.push({
+          ...child,
+          isPresent: false
+        });
+      });
+    } else {
+      exitingChildren.forEach((child) => {
+        nextChildren.push({
+          ...child,
+          isPresent: false
+        });
+      });
+    }
+    const isSame = prev.length === nextChildren.length && prev.every((child, index) => {
+      const next = nextChildren[index];
+      return child.key === next.key && child.getChild === next.getChild && child.isPresent === next.isPresent;
+    });
+    if (!isSame) {
+      setAllChildren(nextChildren);
+    }
+  });
+  const allExitsComplete = createMemo(() => {
+    const status = exitStatus();
+    if (!status.size) return false;
+    for (const isComplete of status.values()) {
+      if (!isComplete) return false;
+    }
+    return true;
+  });
+  createEffect(() => {
+    if (allExitsComplete()) {
+      batch(() => {
+        setExitStatus(/* @__PURE__ */ new Map());
+        const current = presentChildren();
+        presentKeys();
+        setAllChildren(current.map((child, i) => ({
+          key: child.key,
+          getChild: child.getChild,
+          isPresent: true,
+          index: i
+        })));
+      });
+      local.onExitComplete?.();
+    }
+  });
+  onMount(() => {
+    isInitialRender = false;
+  });
+  return createComponent(Index, {
+    get each() {
+      return allChildren();
+    },
+    children: (childState) => {
+      const state = childState;
+      const isPresent = () => state().isPresent;
+      const onExitComplete = () => {
+        const status = untrack(exitStatus);
+        const key = state().key;
+        if (!status.has(key)) return;
+        batch(() => {
+          setExitStatus((map) => {
+            const newMap = new Map(map);
+            if (!newMap.has(key)) return newMap;
+            newMap.set(key, true);
+            return newMap;
+          });
+        });
+      };
+      return createComponent(PresenceChild, {
+        get key() {
+          return state().key;
+        },
+        isPresent,
+        get onExitComplete() {
+          return isPresent() ? void 0 : onExitComplete;
+        },
+        get initial() {
+          return isInitialRender && !local.initial ? false : void 0;
+        },
+        get custom() {
+          return local.custom;
+        },
+        get presenceAffectsLayout() {
+          return local.presenceAffectsLayout;
+        },
+        get getChild() {
+          return state().getChild;
+        },
+        get childKey() {
+          return state().key;
+        },
+        get mode() {
+          return local.mode;
+        },
+        get anchorX() {
+          return local.anchorX;
+        },
+        get root() {
+          return local.root;
+        }
+      });
+    }
+  });
+}
+function PopChild(props) {
+  let container;
+  let wasPresent = props.isPresent;
+  const [style$1, setStyle] = createSignal({
+    display: "contents"
+  });
+  createEffect(() => {
+    const now = props.isPresent;
+    if (wasPresent && !now) {
+      const target = container?.firstElementChild ?? container;
+      if (target) {
+        const rect = target.getBoundingClientRect();
+        const parent = target.offsetParent;
+        const parentRect = parent ? parent.getBoundingClientRect() : {
+          left: 0,
+          top: 0,
+          width: 0
+        };
+        const top = rect.top - parentRect.top;
+        const left = rect.left - parentRect.left;
+        const right = parent ? parentRect.width - rect.width - left : 0;
+        const x = props.anchorX === "right" ? {
+          right: `${right}px`,
+          left: "auto"
+        } : {
+          left: `${left}px`,
+          right: "auto"
+        };
+        setStyle({
+          position: "absolute",
+          top: `${top}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          ...x
+        });
+      }
+    } else if (now) {
+      setStyle({
+        display: "contents"
+      });
+    }
+    wasPresent = now;
+  });
+  return (() => {
+    var _el$ = getNextElement(_tmpl$);
+    use((el) => container = el, _el$);
+    insert(_el$, () => props.children);
+    effect((_$p) => style(_el$, style$1(), _$p));
+    return _el$;
+  })();
+}
+function PresenceChild(props) {
+  const presenceId = String(presenceCounter++);
+  const [local, others] = splitProps(props, ["isPresent", "getChild", "childKey", "onExitComplete", "initial", "custom", "presenceAffectsLayout", "mode", "anchorX", "root"]);
+  const [registeredChildren, setRegisteredChildren] = createSignal(/* @__PURE__ */ new Map());
+  const register = (childId) => {
+    const key = String(childId);
+    batch(() => {
+      setRegisteredChildren((map) => {
+        const newMap = new Map(map);
+        newMap.set(key, false);
+        return newMap;
+      });
+    });
+    return () => {
+      batch(() => {
+        setRegisteredChildren((map) => {
+          const newMap = new Map(map);
+          newMap.delete(key);
+          return newMap;
+        });
+      });
+    };
+  };
+  const onExitComplete = (childId) => {
+    if (!local.onExitComplete) return;
+    const key = String(childId);
+    batch(() => {
+      setRegisteredChildren((map) => {
+        const newMap = new Map(map);
+        newMap.set(key, true);
+        return newMap;
+      });
+    });
+    const allComplete = Array.from(registeredChildren().values()).every(Boolean);
+    if (allComplete) {
+      local.onExitComplete?.();
+    }
+  };
+  createEffect(on(local.isPresent, (present) => {
+    const current = untrack(registeredChildren);
+    if (current.size) {
+      setRegisteredChildren((map) => {
+        const newMap = new Map(map);
+        newMap.forEach((_, key) => newMap.set(key, false));
+        return newMap;
+      });
+    }
+    if (!present && current.size === 0) {
+      local.onExitComplete?.();
+    }
+  }, {
+    defer: true
+  }));
+  const resolvedInitial = () => {
+    if (local.initial === false) return false;
+    if (typeof local.initial === "string" || Array.isArray(local.initial)) return local.initial;
+    return void 0;
+  };
+  const presenceContext = createMemo(() => ({
+    id: () => presenceId,
+    isPresent: local.isPresent,
+    initial: () => resolvedInitial(),
+    custom: () => local.custom,
+    onExitComplete,
+    register
+  }));
+  return createComponent(PresenceContext.Provider, {
+    get value() {
+      return presenceContext();
+    },
+    get children() {
+      return createComponent(PresenceChildContent, {
+        get getChild() {
+          return local.getChild;
+        },
+        get childKey() {
+          return local.childKey;
+        },
+        get isPresent() {
+          return local.isPresent;
+        },
+        get mode() {
+          return local.mode;
+        },
+        get anchorX() {
+          return local.anchorX;
+        },
+        get root() {
+          return local.root;
+        }
+      });
+    }
+  });
+}
+function PresenceChildContent(props) {
+  const resolved = children(() => {
+    props.childKey;
+    return untrack(() => props.getChild());
+  });
+  if (props.mode === "popLayout") {
+    return createComponent(PopChild, {
+      get isPresent() {
+        return props.isPresent();
+      },
+      get anchorX() {
+        return props.anchorX;
+      },
+      get root() {
+        return props.root;
+      },
+      get children() {
+        return resolved();
+      }
+    });
+  }
+  return resolved();
+}
+function getChildKey(child, index) {
+  if (!child) return "";
+  const directKey = child.key ?? child.id ?? child?.props?.key;
+  if (directKey != null && directKey !== "") return directKey;
+  if (typeof child === "string" || typeof child === "number") return child;
+  if (typeof child === "object" || typeof child === "function") {
+    const cached = autoKeyMap.get(child);
+    if (cached) return cached;
+  }
+  const nextKey = `index-${index}`;
+  if (typeof child === "object" || typeof child === "function") {
+    autoKeyMap.set(child, nextKey);
+  }
+  return nextKey;
+}
+function usePresence() {
+  const context = useContext(PresenceContext);
+  if (!context) {
+    return [true, null];
+  }
+  const isPresent = context.isPresent();
+  const safeToRemove = () => {
+    if (context.onExitComplete) {
+      context.onExitComplete(context.id());
+    }
+  };
+  return [!isPresent ? false : true, !isPresent ? safeToRemove : null];
+}
+function useIsPresent() {
+  const context = useContext(PresenceContext);
+  if (!context) return true;
+  return context.isPresent();
+}
+function useMotionValue(initial) {
+  const value = motionValue(initial);
+  const { isStatic } = useContext(MotionConfigContext);
+  if (isStatic) {
+    const unsubscribe = value.on("change", () => {
+    });
+    onCleanup(() => unsubscribe());
+  }
+  onCleanup(() => value.destroy());
+  return value;
+}
+function useTransform(input, inputRangeOrTransformer, outputRange, options) {
+  if (typeof input === "function") {
+    const value2 = transformValue(input);
+    onCleanup(() => value2.destroy());
+    return value2;
+  }
+  let value;
+  if (Array.isArray(input)) {
+    const transformer = typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : transform(inputRangeOrTransformer, outputRange, options);
+    value = transformValue(
+      () => transformer(
+        input.map((item) => item.get())
+      )
+    );
+  } else if (typeof inputRangeOrTransformer === "function") {
+    const transformer = inputRangeOrTransformer;
+    value = transformValue(() => transformer(input.get()));
+  } else {
+    value = mapValue(
+      input,
+      inputRangeOrTransformer,
+      outputRange,
+      options
+    );
+  }
+  onCleanup(() => value.destroy());
+  return value;
+}
+function useSpring(source, options = {}) {
+  const { isStatic } = useContext(MotionConfigContext);
+  const getFromSource = () => isMotionValue(source) ? source.get() : source;
+  if (isStatic) {
+    return useTransform(getFromSource);
+  }
+  const initial = getFromSource();
+  const value = motionValue(initial);
+  const unit = typeof initial === "string" ? initial.replace(/[\d.-]/g, "") : "";
+  const parse = (latest) => unit ? `${parseFloat(String(latest))}${unit}` : parseFloat(String(latest));
+  let target = initial;
+  let setter;
+  let disposed = false;
+  const stop = () => {
+    cancelFrame(start);
+    value.stop();
+  };
+  const start = () => {
+    if (disposed) return;
+    value.stop();
+    const from = parseFloat(String(value.get()));
+    const to = parseFloat(String(target));
+    if (from === to) return;
+    value.start((onComplete) => new JSAnimation({
+      keyframes: [from, to],
+      velocity: value.getVelocity(),
+      type: "spring",
+      restDelta: 1e-3,
+      restSpeed: 0.01,
+      ...options,
+      onUpdate: (latest) => setter(parse(latest)),
+      onComplete
+    }));
+  };
+  value.attach((latest, set) => {
+    target = latest;
+    setter = set;
+    frame.postRender(start);
+  }, stop);
+  const unsubscribe = isMotionValue(source) ? source.on("change", (latest) => value.set(parse(latest))) : void 0;
+  value.on("destroy", () => {
+    disposed = true;
+    unsubscribe?.();
+    stop();
+  });
+  onCleanup(() => value.destroy());
+  return value;
+}
+function useMotionValueEvent(value, event, callback) {
+  onCleanup(value.on(event, callback));
+}
+function useVelocity(value) {
+  const velocity = useMotionValue(value.getVelocity());
+  const update = () => {
+    const latest = value.getVelocity();
+    velocity.set(latest);
+    if (latest) frame.update(update);
+  };
+  useMotionValueEvent(value, "change", () => frame.update(update, false, true));
+  onCleanup(() => cancelFrame(update));
+  return velocity;
+}
+function useReducedMotion() {
+  if (typeof window === "undefined" || !window.matchMedia) return () => null;
+  const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const [reduced, setReduced] = createSignal(media.matches);
+  const update = () => setReduced(media.matches);
+  media.addEventListener("change", update);
+  onCleanup(() => media.removeEventListener("change", update));
+  return reduced;
+}
+function isDOMKeyframes(keyframes) {
+  return typeof keyframes === "object" && !Array.isArray(keyframes);
+}
+function resolveSubjects(subject, keyframes, scope, selectorCache) {
+  if (subject == null) {
+    return [];
+  }
+  if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
+    return resolveElements(subject, scope, selectorCache);
+  } else if (subject instanceof NodeList) {
+    return Array.from(subject);
+  } else if (Array.isArray(subject)) {
+    return subject.filter((s) => s != null);
+  } else {
+    return [subject];
+  }
+}
+function calculateRepeatDuration(duration, repeat, _repeatDelay) {
+  return duration * (repeat + 1);
+}
+function calcNextTime(current, next, prev, labels) {
+  if (typeof next === "number") {
+    return next;
+  } else if (next.startsWith("-") || next.startsWith("+")) {
+    return Math.max(0, current + parseFloat(next));
+  } else if (next === "<") {
+    return prev;
+  } else if (next.startsWith("<")) {
+    return Math.max(0, prev + parseFloat(next.slice(1)));
+  } else {
+    return labels.get(next) ?? current;
+  }
+}
+function eraseKeyframes(sequence, startTime, endTime) {
+  for (let i = 0; i < sequence.length; i++) {
+    const keyframe = sequence[i];
+    if (keyframe.at > startTime && keyframe.at < endTime) {
+      removeItem(sequence, keyframe);
+      i--;
+    }
+  }
+}
+function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
+  eraseKeyframes(sequence, startTime, endTime);
+  for (let i = 0; i < keyframes.length; i++) {
+    sequence.push({
+      value: keyframes[i],
+      at: mixNumber(startTime, endTime, offset[i]),
+      easing: getEasingForSegment(easing, i)
+    });
+  }
+}
+function normalizeTimes(times, repeat) {
+  for (let i = 0; i < times.length; i++) {
+    times[i] = times[i] / (repeat + 1);
+  }
+}
+function compareByTime(a, b) {
+  if (a.at === b.at) {
+    if (a.value === null) return 1;
+    if (b.value === null) return -1;
+    return 0;
+  } else {
+    return a.at - b.at;
+  }
+}
+const defaultSegmentEasing = "easeInOut";
+const MAX_REPEAT = 20;
+function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
+  const defaultDuration = defaultTransition.duration || 0.3;
+  const animationDefinitions = /* @__PURE__ */ new Map();
+  const sequences = /* @__PURE__ */ new Map();
+  const elementCache = {};
+  const timeLabels = /* @__PURE__ */ new Map();
+  let prevTime = 0;
+  let currentTime = 0;
+  let totalDuration = 0;
+  for (let i = 0; i < sequence.length; i++) {
+    const segment = sequence[i];
+    if (typeof segment === "string") {
+      timeLabels.set(segment, currentTime);
+      continue;
+    } else if (!Array.isArray(segment)) {
+      timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
+      continue;
+    }
+    let [subject, keyframes, transition = {}] = segment;
+    if (transition.at !== void 0) {
+      currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
+    }
+    let maxDuration = 0;
+    const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
+      const valueKeyframesAsList = keyframesAsList(valueKeyframes);
+      const {
+        delay = 0,
+        times = defaultOffset(valueKeyframesAsList),
+        type = defaultTransition.type || "keyframes",
+        repeat,
+        repeatType,
+        repeatDelay = 0,
+        ...remainingTransition
+      } = valueTransition;
+      let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
+      const calculatedDelay = typeof delay === "function" ? delay(elementIndex, numSubjects) : delay;
+      const numKeyframes = valueKeyframesAsList.length;
+      const createGenerator = isGenerator(type) ? type : generators?.[type || "keyframes"];
+      if (numKeyframes <= 2 && createGenerator) {
+        let absoluteDelta = 100;
+        if (numKeyframes === 2 && isNumberKeyframesArray(valueKeyframesAsList)) {
+          const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
+          absoluteDelta = Math.abs(delta);
+        }
+        const springTransition = {
+          ...defaultTransition,
+          ...remainingTransition
+        };
+        if (duration !== void 0) {
+          springTransition.duration = secondsToMilliseconds(duration);
+        }
+        const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
+        ease = springEasing.ease;
+        duration = springEasing.duration;
+      }
+      duration = duration ?? defaultDuration;
+      const startTime = currentTime + calculatedDelay;
+      if (times.length === 1 && times[0] === 0) {
+        times[1] = 1;
+      }
+      const remainder = times.length - valueKeyframesAsList.length;
+      remainder > 0 && fillOffset(times, remainder);
+      valueKeyframesAsList.length === 1 && valueKeyframesAsList.unshift(null);
+      if (repeat) {
+        invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
+        duration = calculateRepeatDuration(duration ?? defaultDuration, repeat);
+        const originalKeyframes = [...valueKeyframesAsList];
+        const originalTimes = [...times];
+        ease = Array.isArray(ease) ? [...ease] : [ease];
+        const originalEase = [...ease];
+        for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
+          valueKeyframesAsList.push(...originalKeyframes);
+          for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
+            times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
+            ease.push(keyframeIndex === 0 ? "linear" : getEasingForSegment(originalEase, keyframeIndex - 1));
+          }
+        }
+        normalizeTimes(times, repeat);
+      }
+      const targetTime = startTime + (duration ?? defaultDuration);
+      addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
+      maxDuration = Math.max(calculatedDelay + duration, maxDuration);
+      totalDuration = Math.max(targetTime, totalDuration);
+    };
+    if (isMotionValue(subject)) {
+      const subjectSequence = getSubjectSequence(subject, sequences);
+      resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
+    } else {
+      const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
+      const numSubjects = subjects.length;
+      for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
+        keyframes = keyframes;
+        transition = transition;
+        const thisSubject = subjects[subjectIndex];
+        const subjectSequence = getSubjectSequence(thisSubject, sequences);
+        for (const key in keyframes) {
+          resolveValueSequence(
+            keyframes[key],
+            getValueTransition(transition, key),
+            getValueSequence(key, subjectSequence),
+            subjectIndex,
+            numSubjects
+          );
+        }
+      }
+    }
+    prevTime = currentTime;
+    currentTime += maxDuration;
+  }
+  sequences.forEach((valueSequences, element) => {
+    for (const key in valueSequences) {
+      const valueSequence = valueSequences[key];
+      valueSequence.sort(compareByTime);
+      const keyframes = [];
+      const valueOffset = [];
+      const valueEasing = [];
+      for (let i = 0; i < valueSequence.length; i++) {
+        const { at, value, easing } = valueSequence[i];
+        keyframes.push(value);
+        valueOffset.push(progress(0, totalDuration, at));
+        valueEasing.push(easing || "easeOut");
+      }
+      if (valueOffset[0] !== 0) {
+        valueOffset.unshift(0);
+        keyframes.unshift(keyframes[0]);
+        valueEasing.unshift(defaultSegmentEasing);
+      }
+      if (valueOffset[valueOffset.length - 1] !== 1) {
+        valueOffset.push(1);
+        keyframes.push(null);
+      }
+      if (!animationDefinitions.has(element)) {
+        animationDefinitions.set(element, {
+          keyframes: {},
+          transition: {}
+        });
+      }
+      const definition = animationDefinitions.get(element);
+      definition.keyframes[key] = keyframes;
+      const { type: _type, ...remainingDefaultTransition } = defaultTransition;
+      definition.transition[key] = {
+        ...remainingDefaultTransition,
+        duration: totalDuration,
+        ease: valueEasing,
+        times: valueOffset,
+        ...sequenceTransition
+      };
+    }
+  });
+  return animationDefinitions;
+}
+function getSubjectSequence(subject, sequences) {
+  !sequences.has(subject) && sequences.set(subject, {});
+  return sequences.get(subject);
+}
+function getValueSequence(name, sequences) {
+  if (!sequences[name]) sequences[name] = [];
+  return sequences[name];
+}
+function keyframesAsList(keyframes) {
+  return Array.isArray(keyframes) ? keyframes : [keyframes];
+}
+function getValueTransition(transition, key) {
+  return transition && transition[key] ? {
+    ...transition,
+    ...transition[key]
+  } : { ...transition };
+}
+const isNumber = (keyframe) => typeof keyframe === "number";
+const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
+function createDOMVisualElement(element) {
+  const options = {
+    presenceContext: null,
+    props: {},
+    visualState: {
+      renderState: {
+        transform: {},
+        transformOrigin: {},
+        style: {},
+        vars: {},
+        attrs: {}
+      },
+      latestValues: {}
+    }
+  };
+  const node = isSVGElement(element) && !isSVGSVGElement(element) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
+  node.mount(element);
+  visualElementStore.set(element, node);
+}
+function createObjectVisualElement(subject) {
+  const options = {
+    presenceContext: null,
+    props: {},
+    visualState: {
+      renderState: {
+        output: {}
+      },
+      latestValues: {}
+    }
+  };
+  const node = new ObjectVisualElement(options);
+  node.mount(subject);
+  visualElementStore.set(subject, node);
+}
+function isSingleValue(subject, keyframes) {
+  return isMotionValue(subject) || typeof subject === "number" || typeof subject === "string" && !isDOMKeyframes(keyframes);
+}
+function animateSubject(subject, keyframes, options, scope) {
+  const animations2 = [];
+  if (isSingleValue(subject, keyframes)) {
+    animations2.push(
+      animateSingleValue(
+        subject,
+        isDOMKeyframes(keyframes) ? keyframes.default || keyframes : keyframes,
+        options ? options.default || options : options
+      )
+    );
+  } else {
+    if (subject == null) {
+      return animations2;
+    }
+    const subjects = resolveSubjects(subject, keyframes, scope);
+    const numSubjects = subjects.length;
+    invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
+    for (let i = 0; i < numSubjects; i++) {
+      const thisSubject = subjects[i];
+      const createVisualElement = thisSubject instanceof Element ? createDOMVisualElement : createObjectVisualElement;
+      if (!visualElementStore.has(thisSubject)) {
+        createVisualElement(thisSubject);
+      }
+      const visualElement = visualElementStore.get(thisSubject);
+      const transition = { ...options };
+      if ("delay" in transition && typeof transition.delay === "function") {
+        transition.delay = transition.delay(i, numSubjects);
+      }
+      animations2.push(...animateTarget(visualElement, { ...keyframes, transition }, {}));
+    }
+  }
+  return animations2;
+}
+function animateSequence(sequence, options, scope) {
+  const animations2 = [];
+  const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring });
+  animationDefinitions.forEach(({ keyframes, transition }, subject) => {
+    animations2.push(...animateSubject(subject, keyframes, transition));
+  });
+  return animations2;
+}
+function isSequence(value) {
+  return Array.isArray(value) && value.some(Array.isArray);
+}
+function createScopedAnimate(options = {}) {
+  const { scope, reduceMotion } = options;
+  function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options2) {
+    let animations2 = [];
+    let animationOnComplete;
+    if (isSequence(subjectOrSequence)) {
+      animations2 = animateSequence(
+        subjectOrSequence,
+        reduceMotion !== void 0 ? { reduceMotion, ...optionsOrKeyframes } : optionsOrKeyframes,
+        scope
+      );
+    } else {
+      const { onComplete, ...rest } = options2 || {};
+      if (typeof onComplete === "function") {
+        animationOnComplete = onComplete;
+      }
+      animations2 = animateSubject(
+        subjectOrSequence,
+        optionsOrKeyframes,
+        reduceMotion !== void 0 ? { reduceMotion, ...rest } : rest,
+        scope
+      );
+    }
+    const animation = new GroupAnimationWithThen(animations2);
+    if (animationOnComplete) {
+      animation.finished.then(animationOnComplete);
+    }
+    if (scope) {
+      scope.animations.push(animation);
+      animation.finished.then(() => {
+        removeItem(scope.animations, animation);
+      });
+    }
+    return animation;
+  }
+  return scopedAnimate;
+}
+const animate = createScopedAnimate();
+export {
+  AnimatePresence,
+  MotionConfig,
+  animate,
+  createMotionComponent,
+  createScopedAnimate,
+  m,
+  motion,
+  useIsPresent,
+  useMotionValue,
+  useMotionValueEvent,
+  usePresence,
+  useReducedMotion,
+  useSpring,
+  useTransform,
+  useVelocity
+};
+//# sourceMappingURL=index.js.map