motion-v 0.13.1 → 1.0.0-alpha.1

package/dist/cjs/index.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const core = require("@vueuse/core");
 const heyListen = require("hey-listen");
 const motionDom = require("motion-dom");
+const core = require("@vueuse/core");
 function addUniqueItem(arr, item) {
   if (arr.indexOf(item) === -1)
     arr.push(item);
@@ -4207,6 +4207,11 @@ function transform(...args) {
   });
   return useImmediate ? interpolator(inputValue) : interpolator;
 }
+function getMotionElement(el) {
+  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
+    return getMotionElement(el.nextSibling);
+  return el;
+}
 function createContext(providerComponentName, contextName) {
   const symbolDescription = typeof providerComponentName === "string" && !contextName ? `${providerComponentName}Context` : contextName;
   const injectionKey = Symbol(symbolDescription);
@@ -4276,11 +4281,6 @@ function millisecondsToSeconds(milliseconds) {
 function getContextWindow({ current }) {
   return current ? current.ownerDocument.defaultView : null;
 }
-function getMotionElement(el) {
-  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
-    return getMotionElement(el.nextSibling);
-  return el;
-}
 function useDomRef() {
   const dom = vue.ref(null);
   const domProxy = new Proxy(dom, {
@@ -4300,6 +4300,52 @@ function useDomRef() {
 }
 const [injectMotion, provideMotion] = createContext("Motion");
 const [injectLayoutGroup, provideLayoutGroup] = createContext("LayoutGroup");
+const [useLazyMotionContext, lazyMotionContextProvider] = createContext("LazyMotionContext");
+const defaultConfig = {
+  reduceMotion: "never",
+  transition: void 0,
+  nonce: void 0
+};
+const [injectMotionConfig, provideMotionConfig] = createContext("MotionConfig");
+function useMotionConfig() {
+  return injectMotionConfig(vue.computed(() => defaultConfig));
+}
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "MotionConfig",
+    inheritAttrs: false
+  },
+  __name: "MotionConfig",
+  props: {
+    transition: {},
+    reduceMotion: { default: defaultConfig.reduceMotion },
+    nonce: {},
+    inViewOptions: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const parentConfig = useMotionConfig();
+    const config = vue.computed(() => ({
+      transition: props.transition ?? parentConfig.value.transition,
+      reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
+      nonce: props.nonce ?? parentConfig.value.nonce,
+      inViewOptions: props.inViewOptions ?? parentConfig.value.inViewOptions
+    }));
+    provideMotionConfig(config);
+    return (_ctx, _cache) => {
+      return vue.renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+const doneCallbacks = /* @__PURE__ */ new WeakMap();
+function removeDoneCallback(element) {
+  const prevDoneCallback = doneCallbacks.get(element);
+  if (prevDoneCallback) {
+    element.removeEventListener("motioncomplete", prevDoneCallback);
+  }
+  doneCallbacks.delete(element);
+}
+const [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
 function resolveVariant(definition, variants, custom) {
   if (Array.isArray(definition)) {
     return definition.reduce((acc, item) => {
@@ -4421,371 +4467,120 @@ function isAnimateChanged(oldOptions, newOptions) {
   }
   return oldAnimate !== newAnimate;
 }
-const rotation = {
-  syntax: "<angle>",
-  initialValue: "0deg",
-  toDefaultUnit: (v) => `${v}deg`
-};
-const baseTransformProperties = {
-  translate: {
-    syntax: "<length-percentage>",
-    initialValue: "0px",
-    toDefaultUnit: (v) => `${v}px`
-  },
-  rotate: rotation,
-  scale: {
-    syntax: "<number>",
-    initialValue: 1,
-    toDefaultUnit: noopReturn
-  },
-  skew: rotation
-};
-const order = ["translate", "scale", "rotate", "skew"];
-const axes = ["", "X", "Y", "Z"];
-const transformDefinitions = /* @__PURE__ */ new Map();
-const transforms = ["transformPerspective", "x", "y", "z", "translateX", "translateY", "translateZ", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skew", "skewX", "skewY"];
-order.forEach((name) => {
-  axes.forEach((axis) => {
-    transforms.push(name + axis);
-    transformDefinitions.set(
-      name + axis,
-      baseTransformProperties[name]
-    );
-  });
-});
-const transformLookup = new Set(transforms);
-const isTransform = (name) => transformLookup.has(name);
-const transformAlias = {
-  x: "translateX",
-  y: "translateY",
-  z: "translateZ"
-};
-function compareTransformOrder([a], [b]) {
-  return transforms.indexOf(a) - transforms.indexOf(b);
+class Feature {
+  constructor(state2) {
+    this.state = state2;
+  }
+  beforeMount() {
+  }
+  mount() {
+  }
+  unmount() {
+  }
+  update() {
+  }
+  beforeUpdate() {
+  }
+  beforeUnmount() {
+  }
 }
-function transformListToString(template, [name, value]) {
-  return `${template} ${name}(${value})`;
+function handleHoverEvent$1(state2, event, lifecycle) {
+  const props = state2.options;
+  if (props.whileHover) {
+    state2.setActive("whileHover", lifecycle === "Start");
+  }
+  const eventName = `onHover${lifecycle}`;
+  const callback = props[eventName];
+  if (callback) {
+    motionDom.frame.postRender(() => callback(event, extractEventInfo$1(event)));
+  }
 }
-function buildTransformTemplate(transforms2) {
-  return transforms2.sort(compareTransformOrder).reduce(transformListToString, "").trim();
+class HoverGesture extends Feature {
+  isActive() {
+    const { whileHover, onHoverStart, onHoverEnd } = this.state.options;
+    return Boolean(whileHover || onHoverStart || onHoverEnd);
+  }
+  constructor(state2) {
+    super(state2);
+  }
+  mount() {
+    this.register();
+  }
+  update() {
+    const { whileHover, onHoverStart, onHoverEnd } = this.state.visualElement.prevProps;
+    if (!(whileHover || onHoverStart || onHoverEnd)) {
+      this.register();
+    }
+  }
+  register() {
+    const element = this.state.element;
+    if (!element || !this.isActive())
+      return;
+    this.unmount();
+    this.unmount = motionDom.hover(
+      element,
+      (el, startEvent) => {
+        handleHoverEvent$1(this.state, startEvent, "Start");
+        return (endEvent) => {
+          handleHoverEvent$1(this.state, endEvent, "End");
+        };
+      }
+    );
+  }
 }
-const transformResetValue = {
-  translate: [0, 0],
-  rotate: 0,
-  scale: 1,
-  skew: 0,
-  x: 0,
-  y: 0,
-  z: 0
-};
-function createUnitType(unit) {
+function extractEventInfo$1(event) {
   return {
-    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
-    parse: parseFloat,
-    transform: (v) => `${v}${unit}`
+    point: {
+      x: event.pageX,
+      y: event.pageY
+    }
   };
 }
-const percent = /* @__PURE__ */ createUnitType("%");
-const px = /* @__PURE__ */ createUnitType("px");
-const style = {
-  get: (element, name) => {
-    let value = isCssVar(name) ? element.style.getPropertyValue(name) : getComputedStyle(element)[name];
-    if (!value && value !== "0") {
-      const definition = transformDefinitions.get(name);
-      if (definition)
-        value = definition.initialValue;
-    }
-    return value;
-  },
-  set: (element, name, value) => {
-    if (isCssVar(name)) {
-      element.style.setProperty(name, value);
-    } else {
-      element.style[name] = value;
-    }
+function handlePressEvent(state2, event, lifecycle) {
+  const props = state2.options;
+  if (props.whilePress) {
+    state2.setActive("whilePress", lifecycle === "Start");
   }
-};
-function createStyles(keyframes2) {
-  var _a;
-  const initialKeyframes = {};
-  const transforms2 = [];
-  for (let key in keyframes2) {
-    let value = keyframes2[key];
-    value = isMotionValue(value) ? value.get() : value;
-    if (isTransform(key)) {
-      if (key in transformAlias) {
-        key = transformAlias[key];
-      }
-    }
-    let initialKeyframe = Array.isArray(value) ? value[0] : value;
-    const definition = transformDefinitions.get(key);
-    if (definition) {
-      initialKeyframe = isNumber(value) ? (_a = definition.toDefaultUnit) == null ? void 0 : _a.call(definition, value) : value;
-      transforms2.push([key, initialKeyframe]);
-    } else {
-      initialKeyframes[key] = initialKeyframe;
+  const eventName = `onPress${lifecycle === "End" ? "" : lifecycle}`;
+  const callback = props[eventName];
+  if (callback) {
+    motionDom.frame.postRender(() => callback(event, extractEventInfo$1(event)));
+  }
+}
+class PressGesture extends Feature {
+  isActive() {
+    const { whilePress, onPress, onPressCancel, onPressStart } = this.state.options;
+    return Boolean(whilePress || onPress || onPressCancel || onPressStart);
+  }
+  constructor(state2) {
+    super(state2);
+  }
+  mount() {
+    this.register();
+  }
+  update() {
+    const { whilePress, onPress, onPressCancel, onPressStart } = this.state.options;
+    if (!(whilePress || onPress || onPressCancel || onPressStart)) {
+      this.register();
     }
   }
-  if (transforms2.length) {
-    initialKeyframes.transform = buildTransformTemplate(transforms2);
-  }
-  return initialKeyframes;
-}
-const SVG_STYLE_TO_ATTRIBUTES = {
-  fill: true,
-  stroke: true,
-  strokeWidth: true,
-  opacity: true,
-  fillOpacity: true,
-  strokeOpacity: true,
-  strokeLinecap: true,
-  strokeLinejoin: true,
-  strokeDasharray: true,
-  strokeDashoffset: true,
-  cx: true,
-  cy: true,
-  r: true,
-  d: true,
-  x1: true,
-  y1: true,
-  x2: true,
-  y2: true,
-  points: true,
-  pathLength: true,
-  viewBox: true,
-  width: true,
-  height: true,
-  preserveAspectRatio: true,
-  clipPath: true,
-  filter: true,
-  mask: true,
-  stopColor: true,
-  stopOpacity: true,
-  gradientTransform: true,
-  gradientUnits: true,
-  spreadMethod: true,
-  markerEnd: true,
-  markerMid: true,
-  markerStart: true,
-  textAnchor: true,
-  dominantBaseline: true,
-  fontFamily: true,
-  fontSize: true,
-  fontWeight: true,
-  letterSpacing: true,
-  vectorEffect: true
-};
-function buildSVGPath(attrs, length, spacing = 1, offset = 0) {
-  attrs.pathLength = 1;
-  attrs["stroke-dashoffset"] = px.transform(-offset);
-  const pathLength = px.transform(length);
-  const pathSpacing = px.transform(spacing);
-  attrs["stroke-dasharray"] = `${pathLength} ${pathSpacing}`;
-}
-function convertSvgStyleToAttributes(keyframes2) {
-  const attributes = {};
-  const styleProps = {};
-  for (const key in keyframes2) {
-    if (key in SVG_STYLE_TO_ATTRIBUTES) {
-      const value = keyframes2[key];
-      attributes[key] = isMotionValue(value) ? value.get() : value;
-    } else {
-      styleProps[key] = keyframes2[key];
-    }
-  }
-  if (attributes.pathLength) {
-    buildSVGPath(attributes, attributes.pathLength, attributes.pathSpacing, attributes.pathOffset);
-  }
-  return {
-    attributes,
-    style: styleProps
-  };
-}
-function renderSlotFragments(children) {
-  if (!children)
-    return [];
-  return children.flatMap((child) => {
-    if (child.type === vue.Fragment)
-      return renderSlotFragments(child.children);
-    return [child];
-  });
-}
-const Slot = vue.defineComponent({
-  name: "PrimitiveSlot",
-  inheritAttrs: false,
-  setup(_, { attrs, slots }) {
-    return () => {
-      var _a, _b;
-      if (!slots.default)
-        return null;
-      const childrens = renderSlotFragments(slots.default());
-      const firstNonCommentChildrenIndex = childrens.findIndex((child) => child.type !== vue.Comment);
-      if (firstNonCommentChildrenIndex === -1)
-        return childrens;
-      const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
-      (_a = firstNonCommentChildren.props) == null ? true : delete _a.ref;
-      const mergedProps = firstNonCommentChildren.props ? vue.mergeProps(attrs, firstNonCommentChildren.props) : attrs;
-      if (attrs.class && ((_b = firstNonCommentChildren.props) == null ? void 0 : _b.class))
-        delete firstNonCommentChildren.props.class;
-      const cloned = vue.cloneVNode(firstNonCommentChildren, mergedProps);
-      for (const prop in mergedProps) {
-        if (prop.startsWith("on")) {
-          cloned.props || (cloned.props = {});
-          cloned.props[prop] = mergedProps[prop];
-        }
-      }
-      if (childrens.length === 1)
-        return cloned;
-      childrens[firstNonCommentChildrenIndex] = cloned;
-      return childrens;
-    };
-  }
-});
-const Primitive = vue.defineComponent({
-  name: "Primitive",
-  inheritAttrs: false,
-  props: {
-    asChild: {
-      type: Boolean,
-      default: false
-    },
-    as: {
-      type: [String, Object],
-      default: "div"
-    },
-    getProps: {
-      type: Function,
-      default: () => ({})
-    },
-    getAttrs: {
-      type: Function,
-      default: () => ({})
-    }
-  },
-  setup(props, { attrs, slots }) {
-    const asTag = props.asChild ? "template" : props.as;
-    const SELF_CLOSING_TAGS = ["area", "img", "input"];
-    return () => {
-      const motionProps = props.getProps();
-      const motionAttrs = props.getAttrs();
-      let allAttrs = { ...motionAttrs, ...attrs };
-      if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
-        return vue.h(asTag, allAttrs);
-      if (asTag !== "template") {
-        if (motionProps.forwardMotionProps) {
-          allAttrs = { ...motionProps, ...allAttrs };
-        }
-        return vue.h(props.as, allAttrs, { default: slots.default });
-      }
-      return vue.h(Slot, allAttrs, { default: slots.default });
-    };
-  }
-});
-class Feature {
-  constructor(state2) {
-    this.state = state2;
-  }
-  beforeMount() {
-  }
-  mount() {
-  }
-  unmount() {
-  }
-  update() {
-  }
-  beforeUpdate() {
-  }
-  beforeUnmount() {
-  }
-}
-function handleHoverEvent$1(state2, event, lifecycle) {
-  const props = state2.options;
-  if (props.whileHover) {
-    state2.setActive("whileHover", lifecycle === "Start");
-  }
-  const eventName = `onHover${lifecycle}`;
-  const callback = props[eventName];
-  if (callback) {
-    motionDom.frame.postRender(() => callback(event, extractEventInfo$1(event)));
-  }
-}
-class HoverGesture extends Feature {
-  isActive() {
-    return Boolean(this.state.getOptions().whileHover);
-  }
-  constructor(state2) {
-    super(state2);
-  }
-  mount() {
-    const element = this.state.element;
-    if (!element)
-      return;
-    this.unmount = motionDom.hover(
-      element,
-      (el, startEvent) => {
-        handleHoverEvent$1(this.state, startEvent, "Start");
-        return (endEvent) => {
-          handleHoverEvent$1(this.state, endEvent, "End");
-        };
-      }
-    );
-  }
-}
-function extractEventInfo$1(event) {
-  return {
-    point: {
-      x: event.pageX,
-      y: event.pageY
-    }
-  };
-}
-function handlePressEvent(state2, event, lifecycle) {
-  const props = state2.options;
-  if (props.whilePress) {
-    state2.setActive("whilePress", lifecycle === "Start");
-  }
-  const eventName = `onPress${lifecycle === "End" ? "" : lifecycle}`;
-  const callback = props[eventName];
-  if (callback) {
-    motionDom.frame.postRender(() => callback(event, extractEventInfo$1(event)));
-  }
-}
-class PressGesture extends Feature {
-  isActive() {
-    const { whilePress, onPress, onPressCancel, onPressStart } = this.state.options;
-    return Boolean(whilePress || onPress || onPressCancel || onPressStart);
-  }
-  constructor(state2) {
-    super(state2);
-  }
-  mount() {
-    this.register();
-  }
-  update() {
-    const preProps = this.state.visualElement.prevProps;
-    if (preProps.whilePress !== this.state.options.whilePress) {
-      this.register();
-    }
-  }
-  register() {
-    this.unmount();
-    if (this.isActive()) {
-      const element = this.state.element;
-      if (!element)
-        return;
-      this.unmount = motionDom.press(
-        element,
-        (el, startEvent) => {
-          handlePressEvent(this.state, startEvent, "Start");
-          return (endEvent, { success }) => handlePressEvent(
-            this.state,
-            endEvent,
-            success ? "End" : "Cancel"
-          );
-        },
-        { useGlobalTarget: this.state.options.globalPressTarget }
-      );
-    }
+  register() {
+    const element = this.state.element;
+    if (!element || !this.isActive())
+      return;
+    this.unmount();
+    this.unmount = motionDom.press(
+      element,
+      (el, startEvent) => {
+        handlePressEvent(this.state, startEvent, "Start");
+        return (endEvent, { success }) => handlePressEvent(
+          this.state,
+          endEvent,
+          success ? "End" : "Cancel"
+        );
+      },
+      { useGlobalTarget: this.state.options.globalPressTarget }
+    );
   }
 }
 function handleHoverEvent(state2, entry, lifecycle) {
@@ -4801,17 +4596,17 @@ function handleHoverEvent(state2, entry, lifecycle) {
 }
 class InViewGesture extends Feature {
   isActive() {
-    return Boolean(this.state.getOptions().whileInView);
+    return Boolean(this.state.options.whileInView);
   }
   constructor(state2) {
     super(state2);
   }
   startObserver() {
     const element = this.state.element;
-    if (!element)
+    if (!element || !this.isActive())
       return;
     this.unmount();
-    const { once, ...viewOptions } = this.state.getOptions().inViewOptions || {};
+    const { once, ...viewOptions } = this.state.options.inViewOptions || {};
     this.unmount = inView(
       element,
       (_, entry) => {
@@ -5150,6 +4945,15 @@ function createBox() {
 function eachAxis$1(callback) {
   return [callback("x"), callback("y")];
 }
+function createUnitType(unit) {
+  return {
+    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
+    parse: parseFloat,
+    transform: (v) => `${v}${unit}`
+  };
+}
+const percent = /* @__PURE__ */ createUnitType("%");
+const px = /* @__PURE__ */ createUnitType("px");
 function isWillChangeMotionValue(value) {
   return Boolean(isMotionValue(value) && value.add);
 }
@@ -5203,15 +5007,6 @@ function measurePageBox(element, rootProjectionNode2, transformPagePoint) {
   }
   return viewportBox;
 }
-const doneCallbacks = /* @__PURE__ */ new WeakMap();
-function removeDoneCallback(element) {
-  const prevDoneCallback = doneCallbacks.get(element);
-  if (prevDoneCallback) {
-    element.removeEventListener("motioncomplete", prevDoneCallback);
-  }
-  doneCallbacks.delete(element);
-}
-const [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
 function isPresent(visualElement) {
   return !doneCallbacks.has(visualElement.current);
 }
@@ -5841,41 +5636,497 @@ class PanGesture extends Feature {
     this.session && this.session.end();
   }
 }
-const compareByDepth = (a, b) => a.depth - b.depth;
-class FlatTree {
-  constructor() {
-    this.children = [];
-    this.isDirty = false;
+class FeatureManager {
+  constructor(state2) {
+    this.features = [];
+    const { features = [], lazyMotionContext } = state2.options;
+    const allFeatures = features.concat(lazyMotionContext.features.value);
+    this.features = allFeatures.map((Feature2) => new Feature2(state2));
+    const featureInstances = this.features;
+    vue.watch(lazyMotionContext.features, (features2) => {
+      features2.forEach((feature) => {
+        if (!allFeatures.includes(feature)) {
+          allFeatures.push(feature);
+          const featureInstance = new feature(state2);
+          featureInstances.push(featureInstance);
+          if (state2.isMounted()) {
+            featureInstance.beforeMount();
+            featureInstance.mount();
+          }
+        }
+      });
+    }, {
+      flush: "pre"
+    });
   }
-  add(child) {
-    addUniqueItem(this.children, child);
-    this.isDirty = true;
+  mount() {
+    this.features.forEach((feature) => feature.mount());
   }
-  remove(child) {
-    removeItem(this.children, child);
-    this.isDirty = true;
+  beforeMount() {
+    this.features.forEach((feature) => {
+      var _a;
+      return (_a = feature.beforeMount) == null ? void 0 : _a.call(feature);
+    });
   }
-  forEach(callback) {
-    this.isDirty && this.children.sort(compareByDepth);
-    this.isDirty = false;
-    this.children.forEach(callback);
+  unmount() {
+    this.features.forEach((feature) => feature.unmount());
+  }
+  update() {
+    this.features.forEach((feature) => {
+      var _a;
+      return (_a = feature.update) == null ? void 0 : _a.call(feature);
+    });
+  }
+  beforeUpdate() {
+    this.features.forEach((feature) => feature.beforeUpdate());
+  }
+  beforeUnmount() {
+    this.features.forEach((feature) => feature.beforeUnmount());
   }
 }
-function resolveMotionValue(value) {
-  const unwrappedValue = isMotionValue$1(value) ? value.get() : value;
-  return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;
+function isAnimationControls(v) {
+  return v !== null && typeof v === "object" && typeof v.start === "function";
 }
-const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
-const numBorders = borders.length;
-const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
-const isPx = (value) => typeof value === "number" || px$1.test(value);
-function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
-  if (shouldCrossfadeOpacity) {
-    target.opacity = mixNumber$2(
-      0,
-      // TODO Reinstate this if only child
-      lead.opacity !== void 0 ? lead.opacity : 1,
-      easeCrossfadeIn(progress2)
+function motionEvent(name, target, isExit) {
+  return new CustomEvent(name, { detail: { target, isExit } });
+}
+const rotation = {
+  syntax: "<angle>",
+  initialValue: "0deg",
+  toDefaultUnit: (v) => `${v}deg`
+};
+const baseTransformProperties = {
+  translate: {
+    syntax: "<length-percentage>",
+    initialValue: "0px",
+    toDefaultUnit: (v) => `${v}px`
+  },
+  rotate: rotation,
+  scale: {
+    syntax: "<number>",
+    initialValue: 1,
+    toDefaultUnit: noopReturn
+  },
+  skew: rotation
+};
+const order = ["translate", "scale", "rotate", "skew"];
+const axes = ["", "X", "Y", "Z"];
+const transformDefinitions = /* @__PURE__ */ new Map();
+const transforms = ["transformPerspective", "x", "y", "z", "translateX", "translateY", "translateZ", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skew", "skewX", "skewY"];
+order.forEach((name) => {
+  axes.forEach((axis) => {
+    transforms.push(name + axis);
+    transformDefinitions.set(
+      name + axis,
+      baseTransformProperties[name]
+    );
+  });
+});
+const transformLookup = new Set(transforms);
+const isTransform = (name) => transformLookup.has(name);
+const transformAlias = {
+  x: "translateX",
+  y: "translateY",
+  z: "translateZ"
+};
+function compareTransformOrder([a], [b]) {
+  return transforms.indexOf(a) - transforms.indexOf(b);
+}
+function transformListToString(template, [name, value]) {
+  return `${template} ${name}(${value})`;
+}
+function buildTransformTemplate(transforms2) {
+  return transforms2.sort(compareTransformOrder).reduce(transformListToString, "").trim();
+}
+const transformResetValue = {
+  translate: [0, 0],
+  rotate: 0,
+  scale: 1,
+  skew: 0,
+  x: 0,
+  y: 0,
+  z: 0
+};
+const style = {
+  get: (element, name) => {
+    let value = isCssVar(name) ? element.style.getPropertyValue(name) : getComputedStyle(element)[name];
+    if (!value && value !== "0") {
+      const definition = transformDefinitions.get(name);
+      if (definition)
+        value = definition.initialValue;
+    }
+    return value;
+  },
+  set: (element, name, value) => {
+    if (isCssVar(name)) {
+      element.style.setProperty(name, value);
+    } else {
+      element.style[name] = value;
+    }
+  }
+};
+function createStyles(keyframes2) {
+  var _a;
+  const initialKeyframes = {};
+  const transforms2 = [];
+  for (let key in keyframes2) {
+    let value = keyframes2[key];
+    value = isMotionValue(value) ? value.get() : value;
+    if (isTransform(key)) {
+      if (key in transformAlias) {
+        key = transformAlias[key];
+      }
+    }
+    let initialKeyframe = Array.isArray(value) ? value[0] : value;
+    const definition = transformDefinitions.get(key);
+    if (definition) {
+      initialKeyframe = isNumber(value) ? (_a = definition.toDefaultUnit) == null ? void 0 : _a.call(definition, value) : value;
+      transforms2.push([key, initialKeyframe]);
+    } else {
+      initialKeyframes[key] = initialKeyframe;
+    }
+  }
+  if (transforms2.length) {
+    initialKeyframes.transform = buildTransformTemplate(transforms2);
+  }
+  return initialKeyframes;
+}
+const SVG_STYLE_TO_ATTRIBUTES = {
+  fill: true,
+  stroke: true,
+  strokeWidth: true,
+  opacity: true,
+  fillOpacity: true,
+  strokeOpacity: true,
+  strokeLinecap: true,
+  strokeLinejoin: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  cx: true,
+  cy: true,
+  r: true,
+  d: true,
+  x1: true,
+  y1: true,
+  x2: true,
+  y2: true,
+  points: true,
+  pathLength: true,
+  viewBox: true,
+  width: true,
+  height: true,
+  preserveAspectRatio: true,
+  clipPath: true,
+  filter: true,
+  mask: true,
+  stopColor: true,
+  stopOpacity: true,
+  gradientTransform: true,
+  gradientUnits: true,
+  spreadMethod: true,
+  markerEnd: true,
+  markerMid: true,
+  markerStart: true,
+  textAnchor: true,
+  dominantBaseline: true,
+  fontFamily: true,
+  fontSize: true,
+  fontWeight: true,
+  letterSpacing: true,
+  vectorEffect: true
+};
+function buildSVGPath(attrs, length, spacing = 1, offset = 0) {
+  attrs.pathLength = 1;
+  attrs["stroke-dashoffset"] = px.transform(-offset);
+  const pathLength = px.transform(length);
+  const pathSpacing = px.transform(spacing);
+  attrs["stroke-dasharray"] = `${pathLength} ${pathSpacing}`;
+}
+function convertSvgStyleToAttributes(keyframes2) {
+  const attributes = {};
+  const styleProps = {};
+  for (const key in keyframes2) {
+    if (key in SVG_STYLE_TO_ATTRIBUTES) {
+      const value = keyframes2[key];
+      attributes[key] = isMotionValue(value) ? value.get() : value;
+    } else {
+      styleProps[key] = keyframes2[key];
+    }
+  }
+  if (attributes.pathLength) {
+    buildSVGPath(attributes, attributes.pathLength, attributes.pathSpacing, attributes.pathOffset);
+  }
+  return {
+    attributes,
+    style: styleProps
+  };
+}
+function createVisualElement(Component, options) {
+  return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
+}
+const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
+class AnimationFeature extends Feature {
+  constructor(state2) {
+    var _a;
+    super(state2);
+    this.animateUpdates = ({
+      controlActiveState,
+      directAnimate,
+      directTransition,
+      controlDelay = 0,
+      isFallback,
+      isExit
+    } = {}) => {
+      const prevTarget = this.state.target;
+      this.state.target = { ...this.state.baseTarget };
+      let animationOptions = {};
+      const transition = { ...this.state.options.transition };
+      animationOptions = this.resolveStateAnimation({
+        controlActiveState,
+        directAnimate,
+        directTransition
+      });
+      const factories = this.createAnimationFactories(prevTarget, animationOptions, controlDelay);
+      const { getChildAnimations, childAnimations } = this.setupChildAnimations(animationOptions, controlActiveState, isFallback);
+      return this.executeAnimations({
+        factories,
+        getChildAnimations,
+        childAnimations,
+        transition,
+        controlActiveState,
+        isExit
+      });
+    };
+    this.state.visualElement = createVisualElement(this.state.options.as, {
+      presenceContext: null,
+      parent: (_a = this.state.parent) == null ? void 0 : _a.visualElement,
+      props: {
+        ...this.state.options,
+        whileTap: this.state.options.whilePress
+      },
+      visualState: {
+        renderState: {
+          transform: {},
+          transformOrigin: {},
+          style: {},
+          vars: {},
+          attrs: {}
+        },
+        latestValues: {
+          ...this.state.baseTarget
+        }
+      },
+      reducedMotionConfig: this.state.options.motionConfig.reduceMotion
+    });
+    this.state.animateUpdates = this.animateUpdates;
+    if (this.state.isMounted())
+      this.state.startAnimation();
+  }
+  updateAnimationControlsSubscription() {
+    const { animate: animate2 } = this.state.options;
+    if (isAnimationControls(animate2)) {
+      this.unmountControls = animate2.subscribe(this.state);
+    }
+  }
+  executeAnimations({
+    factories,
+    getChildAnimations,
+    transition,
+    controlActiveState,
+    isExit = false
+  }) {
+    const getAnimation = () => Promise.all(factories.map((factory) => factory()).filter(Boolean));
+    const animationTarget2 = { ...this.state.target };
+    const element = this.state.element;
+    const finishAnimation2 = (animationPromise) => {
+      var _a, _b;
+      element.dispatchEvent(motionEvent("motionstart", animationTarget2));
+      (_b = (_a = this.state.options).onAnimationStart) == null ? void 0 : _b.call(_a, animationTarget2);
+      animationPromise.then(() => {
+        var _a2, _b2;
+        element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
+        (_b2 = (_a2 = this.state.options).onAnimationComplete) == null ? void 0 : _b2.call(_a2, animationTarget2);
+      }).catch(noop);
+    };
+    const getAnimationPromise = () => {
+      const animationPromise = (transition == null ? void 0 : transition.when) ? (transition.when === "beforeChildren" ? getAnimation() : getChildAnimations()).then(() => transition.when === "beforeChildren" ? getChildAnimations() : getAnimation()) : Promise.all([getAnimation(), getChildAnimations()]);
+      finishAnimation2(animationPromise);
+      return animationPromise;
+    };
+    return controlActiveState ? getAnimationPromise : getAnimationPromise();
+  }
+  /**
+   * Setup child animations
+   */
+  setupChildAnimations(transition, controlActiveState, isFallback) {
+    var _a;
+    if (!((_a = this.state.visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
+      return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
+    const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
+    const maxStaggerDuration = (this.state.visualElement.variantChildren.size - 1) * staggerChildren;
+    const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
+    const childAnimations = Array.from(this.state.visualElement.variantChildren).map((child, index) => {
+      const childDelay = delayChildren + generateStaggerDuration(index);
+      return child.state.animateUpdates({
+        controlActiveState,
+        controlDelay: isFallback ? 0 : childDelay
+      });
+    }).filter(Boolean);
+    return {
+      getChildAnimations: () => Promise.all(childAnimations.map((animation) => {
+        return animation == null ? void 0 : animation();
+      })),
+      childAnimations
+    };
+  }
+  createAnimationFactories(prevTarget, animationOptions, controlDelay) {
+    const factories = [];
+    Object.keys(this.state.target).forEach((key) => {
+      var _a;
+      if (!hasChanged(prevTarget[key], this.state.target[key]))
+        return;
+      (_a = this.state.baseTarget)[key] ?? (_a[key] = style.get(this.state.element, key));
+      const keyValue = this.state.target[key] === "none" && core.isDef(transformResetValue[key]) ? transformResetValue[key] : this.state.target[key];
+      factories.push(() => {
+        var _a2;
+        return animate(
+          this.state.element,
+          { [key]: keyValue },
+          {
+            ...(animationOptions == null ? void 0 : animationOptions[key]) || animationOptions,
+            delay: (((_a2 = animationOptions == null ? void 0 : animationOptions[key]) == null ? void 0 : _a2.delay) || (animationOptions == null ? void 0 : animationOptions.delay) || 0) + controlDelay
+          }
+        );
+      });
+    });
+    return factories;
+  }
+  resolveStateAnimation({
+    controlActiveState,
+    directAnimate,
+    directTransition
+  }) {
+    let variantTransition = this.state.options.transition;
+    let variant = {};
+    const { variants, custom, transition, animatePresenceContext } = this.state.options;
+    const customValue = core.isDef(custom) ? custom : animatePresenceContext == null ? void 0 : animatePresenceContext.custom;
+    this.state.activeStates = { ...this.state.activeStates, ...controlActiveState };
+    STATE_TYPES.forEach((name) => {
+      if (!this.state.activeStates[name] || isAnimationControls(this.state.options[name]))
+        return;
+      const definition = this.state.options[name];
+      let resolvedVariant = core.isDef(definition) ? resolveVariant(definition, variants, customValue) : void 0;
+      if (this.state.visualElement.isVariantNode) {
+        const controlVariant = resolveVariant(this.state.context[name], variants, customValue);
+        resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, resolvedVariant) : variant;
+      }
+      if (!resolvedVariant)
+        return;
+      if (name !== "initial")
+        variantTransition = resolvedVariant.transition || this.state.options.transition || {};
+      variant = Object.assign(variant, resolvedVariant);
+    });
+    if (directAnimate) {
+      variant = resolveVariant(directAnimate, variants, customValue);
+      variantTransition = variant.transition || directTransition || transition;
+    }
+    Object.entries(variant).forEach(([key, value]) => {
+      if (key === "transition")
+        return;
+      this.state.target[key] = value;
+    });
+    return variantTransition;
+  }
+  /**
+   * Subscribe any provided AnimationControls to the component's VisualElement
+   */
+  mount() {
+    const { element } = this.state;
+    mountedStates.set(element, this.state);
+    if (!visualElementStore.get(element)) {
+      this.state.visualElement.mount(element);
+      visualElementStore.set(element, this.state.visualElement);
+    }
+    this.state.visualElement.state = this.state;
+    this.updateAnimationControlsSubscription();
+  }
+  update() {
+    const { animate: animate2 } = this.state.options;
+    const { animate: prevAnimate } = this.state.visualElement.prevProps || {};
+    if (animate2 !== prevAnimate) {
+      this.updateAnimationControlsSubscription();
+    }
+  }
+  unmount() {
+    var _a;
+    (_a = this.unmountControls) == null ? void 0 : _a.call(this);
+  }
+}
+class FocusGesture extends Feature {
+  constructor() {
+    super(...arguments);
+    this.isActive = false;
+  }
+  onFocus() {
+    let isFocusVisible = false;
+    try {
+      isFocusVisible = this.state.element.matches(":focus-visible");
+    } catch (e) {
+      isFocusVisible = true;
+    }
+    if (!isFocusVisible)
+      return;
+    this.state.setActive("whileFocus", true);
+    this.isActive = true;
+  }
+  onBlur() {
+    if (!this.isActive)
+      return;
+    this.state.setActive("whileFocus", false);
+    this.isActive = false;
+  }
+  mount() {
+    this.unmount = pipe(
+      addDomEvent$1(this.state.element, "focus", () => this.onFocus()),
+      addDomEvent$1(this.state.element, "blur", () => this.onBlur())
+    );
+  }
+}
+const compareByDepth = (a, b) => a.depth - b.depth;
+class FlatTree {
+  constructor() {
+    this.children = [];
+    this.isDirty = false;
+  }
+  add(child) {
+    addUniqueItem(this.children, child);
+    this.isDirty = true;
+  }
+  remove(child) {
+    removeItem(this.children, child);
+    this.isDirty = true;
+  }
+  forEach(callback) {
+    this.isDirty && this.children.sort(compareByDepth);
+    this.isDirty = false;
+    this.children.forEach(callback);
+  }
+}
+function resolveMotionValue(value) {
+  const unwrappedValue = isMotionValue$1(value) ? value.get() : value;
+  return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;
+}
+const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
+const numBorders = borders.length;
+const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
+const isPx = (value) => typeof value === "number" || px$1.test(value);
+function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
+  if (shouldCrossfadeOpacity) {
+    target.opacity = mixNumber$2(
+      0,
+      // TODO Reinstate this if only child
+      lead.opacity !== void 0 ? lead.opacity : 1,
+      easeCrossfadeIn(progress2)
     );
     target.opacityExit = mixNumber$2(follow.opacity !== void 0 ? follow.opacity : 1, 0, easeCrossfadeOut(progress2));
   } else if (isOnlyMember) {
@@ -7287,270 +7538,50 @@ class ProjectionFeature extends Feature {
       crossfade: options.crossfade,
       onExitComplete: () => {
         var _a;
-        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
-          const done = doneCallbacks.get(this.state.element);
-          this.state.isSafeToRemove = true;
-          if (done) {
-            done({
-              detail: {
-                isExit: true
-              }
-            }, true);
-          }
-        }
-      }
-    });
-  }
-  update() {
-    this.setOptions();
-  }
-  mount() {
-    var _a;
-    (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
-  }
-}
-class FocusGesture extends Feature {
-  constructor() {
-    super(...arguments);
-    this.isActive = false;
-  }
-  onFocus() {
-    let isFocusVisible = false;
-    try {
-      isFocusVisible = this.state.element.matches(":focus-visible");
-    } catch (e) {
-      isFocusVisible = true;
-    }
-    if (!isFocusVisible)
-      return;
-    this.state.setActive("whileFocus", true);
-    this.isActive = true;
-  }
-  onBlur() {
-    if (!this.isActive)
-      return;
-    this.state.setActive("whileFocus", false);
-    this.isActive = false;
-  }
-  mount() {
-    this.unmount = pipe(
-      addDomEvent$1(this.state.element, "focus", () => this.onFocus()),
-      addDomEvent$1(this.state.element, "blur", () => this.onBlur())
-    );
-  }
-}
-class FeatureManager {
-  constructor(state2) {
-    this.features = [];
-    this.features = [
-      new HoverGesture(state2),
-      new PressGesture(state2),
-      new InViewGesture(state2),
-      new LayoutFeature(state2),
-      new ProjectionFeature(state2),
-      new PanGesture(state2),
-      new DragGesture(state2),
-      new FocusGesture(state2),
-      new AnimationFeature(state2)
-    ];
-  }
-  mount() {
-    this.features.forEach((feature) => feature.mount());
-  }
-  beforeMount() {
-    this.features.forEach((feature) => {
-      var _a;
-      return (_a = feature.beforeMount) == null ? void 0 : _a.call(feature);
-    });
-  }
-  unmount() {
-    this.features.forEach((feature) => feature.unmount());
-  }
-  update() {
-    this.features.forEach((feature) => {
-      var _a;
-      return (_a = feature.update) == null ? void 0 : _a.call(feature);
-    });
-  }
-  beforeUpdate() {
-    this.features.forEach((feature) => feature.beforeUpdate());
-  }
-  beforeUnmount() {
-    this.features.forEach((feature) => feature.beforeUnmount());
-  }
-}
-function isAnimationControls(v) {
-  return v !== null && typeof v === "object" && typeof v.start === "function";
-}
-class AnimationFeature extends Feature {
-  constructor(state2) {
-    super(state2);
-  }
-  updateAnimationControlsSubscription() {
-    const { animate: animate2 } = this.state.options;
-    if (isAnimationControls(animate2)) {
-      this.unmountControls = animate2.subscribe(this.state);
-    }
-  }
-  /**
-   * Subscribe any provided AnimationControls to the component's VisualElement
-   */
-  mount() {
-    this.updateAnimationControlsSubscription();
-  }
-  update() {
-    const { animate: animate2 } = this.state.options;
-    const { animate: prevAnimate } = this.state.visualElement.prevProps || {};
-    if (animate2 !== prevAnimate) {
-      this.updateAnimationControlsSubscription();
-    }
-  }
-  unmount() {
-    var _a;
-    (_a = this.unmountControls) == null ? void 0 : _a.call(this);
-  }
-}
-function createVisualElement(Component, options) {
-  return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
-}
-function motionEvent(name, target, isExit) {
-  return new CustomEvent(name, { detail: { target, isExit } });
-}
-const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
-function animateUpdates({
-  controlActiveState = void 0,
-  controlDelay = 0,
-  directAnimate,
-  directTransition,
-  isFallback = false,
-  isExit = false
-} = {}) {
-  const prevTarget = this.target;
-  this.target = { ...this.baseTarget };
-  let animationOptions = {};
-  const transition = { ...this.options.transition };
-  if (directAnimate)
-    animationOptions = resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
-  else
-    animationOptions = resolveStateAnimation.call(this, controlActiveState);
-  const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
-  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, animationOptions, this.activeStates, isFallback);
-  return executeAnimations.call(this, {
-    factories,
-    getChildAnimations,
-    childAnimations,
-    transition,
-    controlActiveState,
-    isExit
-  });
-}
-function resolveDirectAnimation(directAnimate, directTransition) {
-  var _a;
-  const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom || ((_a = this.options.animatePresenceContext) == null ? void 0 : _a.custom));
-  if (!variant)
-    return {};
-  const transition = variant.transition || directTransition || this.options.transition || {};
-  Object.entries(variant).forEach(([key, value]) => {
-    if (key === "transition")
-      return;
-    this.target[key] = value;
-  });
-  return transition;
-}
-function resolveStateAnimation(controlActiveState) {
-  if (controlActiveState)
-    this.activeStates = { ...this.activeStates, ...controlActiveState };
-  let variantTransition = this.options.transition;
-  let variant = {};
-  STATE_TYPES.forEach((name) => {
-    if (!this.activeStates[name] || isAnimationControls(this.options[name]))
-      return;
-    const definition = this.options[name];
-    let resolvedVariant = core.isDef(definition) ? resolveVariant(definition, this.options.variants, this.options.custom) : void 0;
-    if (this.visualElement.isVariantNode) {
-      const controlVariant = resolveVariant(this.context[name], this.options.variants, this.options.custom);
-      resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, resolvedVariant) : variant;
-    }
-    if (!resolvedVariant)
-      return;
-    if (name !== "initial")
-      variantTransition = resolvedVariant.transition || this.options.transition || {};
-    variant = Object.assign(variant, resolvedVariant);
-  });
-  Object.entries(variant).forEach(([key, value]) => {
-    if (key === "transition")
-      return;
-    this.target[key] = value;
-  });
-  return variantTransition;
-}
-function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
-  const factories = [];
-  Object.keys(this.target).forEach((key) => {
-    var _a;
-    if (!hasChanged(prevTarget[key], this.target[key]))
-      return;
-    (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
-    const keyValue = this.target[key] === "none" && core.isDef(transformResetValue[key]) ? transformResetValue[key] : this.target[key];
-    factories.push(() => {
-      var _a2;
-      return animate(
-        this.element,
-        { [key]: keyValue },
-        {
-          ...(animationOptions == null ? void 0 : animationOptions[key]) || animationOptions,
-          delay: (((_a2 = animationOptions == null ? void 0 : animationOptions[key]) == null ? void 0 : _a2.delay) || (animationOptions == null ? void 0 : animationOptions.delay) || 0) + controlDelay
+        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
+          const done = doneCallbacks.get(this.state.element);
+          this.state.isSafeToRemove = true;
+          if (done) {
+            done({
+              detail: {
+                isExit: true
+              }
+            }, true);
+          }
         }
-      );
-    });
-  });
-  return factories;
-}
-function setupChildAnimations(transition, controlActiveState, isFallback) {
-  var _a;
-  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || !controlActiveState)
-    return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
-  const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
-  const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
-  const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
-  const childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
-    const childDelay = delayChildren + generateStaggerDuration(index);
-    return child.state.animateUpdates({
-      controlActiveState,
-      controlDelay: isFallback ? 0 : childDelay
+      }
     });
-  }).filter(Boolean);
-  return {
-    getChildAnimations: () => Promise.all(childAnimations.map((animation) => {
-      return animation == null ? void 0 : animation();
-    })),
-    childAnimations
-  };
-}
-function executeAnimations({
-  factories,
-  getChildAnimations,
-  childAnimations,
-  transition,
-  controlActiveState,
-  isExit = false
-}) {
-  const getAnimation = () => Promise.all(factories.map((factory) => factory()).filter(Boolean));
-  const animationTarget2 = { ...this.target };
-  const element = this.element;
-  const finishAnimation2 = (animationPromise) => {
-    element.dispatchEvent(motionEvent("motionstart", animationTarget2));
-    animationPromise.then(() => {
-      element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
-    }).catch(noop);
-  };
-  const getAnimationPromise = () => {
-    const animationPromise = (transition == null ? void 0 : transition.when) ? (transition.when === "beforeChildren" ? getAnimation() : getChildAnimations()).then(() => transition.when === "beforeChildren" ? getChildAnimations() : getAnimation()) : Promise.all([getAnimation(), getChildAnimations()]);
-    finishAnimation2(animationPromise);
-    return animationPromise;
-  };
-  return controlActiveState ? getAnimationPromise : getAnimationPromise();
+  }
+  update() {
+    this.setOptions();
+  }
+  mount() {
+    var _a;
+    (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
+  }
 }
+const domMax = [
+  AnimationFeature,
+  PressGesture,
+  HoverGesture,
+  InViewGesture,
+  FocusGesture,
+  ProjectionFeature,
+  PanGesture,
+  DragGesture,
+  LayoutFeature
+];
+const domAnimation = [
+  AnimationFeature,
+  PressGesture,
+  HoverGesture,
+  InViewGesture,
+  FocusGesture
+  // ProjectionFeature,
+  // DragGesture,
+  // LayoutFeature,
+  // PanGesture,
+];
 function isVariantLabels(value) {
   return typeof value === "string" || value === false || Array.isArray(value);
 }
@@ -7570,7 +7601,7 @@ class MotionState {
     };
     this.currentProcess = null;
     this._context = null;
-    this.animateUpdates = animateUpdates;
+    this.animateUpdates = noop;
     this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
@@ -7578,30 +7609,8 @@ class MotionState {
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
     const initialVariantSource = this.context.initial === false ? ["initial", "animate"] : ["initial"];
     this.initTarget(initialVariantSource);
-    this.visualElement = createVisualElement(this.options.as, {
-      presenceContext: null,
-      parent: parent == null ? void 0 : parent.visualElement,
-      props: {
-        ...this.options,
-        whileHover: this.options.whileHover,
-        whileTap: this.options.whilePress,
-        whileInView: this.options.whileInView
-      },
-      visualState: {
-        renderState: {
-          transform: {},
-          transformOrigin: {},
-          style: {},
-          vars: {},
-          attrs: {}
-        },
-        latestValues: {
-          ...this.baseTarget
-        }
-      },
-      reducedMotionConfig: options.motionConfig.reduceMotion
-    });
     this.featureManager = new FeatureManager(this);
+    this.type = isSVGElement(this.options.as) ? "svg" : "html";
   }
   // Get animation context, falling back to parent context for inheritance
   get context() {
@@ -7628,11 +7637,10 @@ class MotionState {
   }
   // Update visual element with new options
   updateOptions() {
-    this.visualElement.update({
+    var _a;
+    (_a = this.visualElement) == null ? void 0 : _a.update({
       ...this.options,
-      whileHover: this.options.hover,
-      whileTap: this.options.press,
-      whileInView: this.options.inView,
+      whileTap: this.options.whilePress,
       reducedMotionConfig: this.options.motionConfig.reduceMotion
     }, {
       isPresent: !doneCallbacks.has(this.element)
@@ -7644,25 +7652,20 @@ class MotionState {
   }
   // Mount motion state to DOM element, handles parent-child relationships
   mount(element, options, notAnimate = false) {
+    var _a;
     heyListen.invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
     );
     this.element = element;
     this.options = options;
-    mountedStates.set(element, this);
-    if (!visualElementStore.get(element)) {
-      this.visualElement.mount(element);
-      visualElementStore.set(element, this.visualElement);
-    }
-    this.visualElement.state = this;
     this.updateOptions();
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
-      if (this.visualElement.type === "svg") {
+      if (this.type === "svg") {
         this.visualElement.updateDimensions();
       }
-      this.startAnimation();
+      (_a = this.startAnimation) == null ? void 0 : _a.call(this);
     }
     if (this.options.layoutId) {
       mountedLayoutIds.add(this.options.layoutId);
@@ -7672,10 +7675,10 @@ class MotionState {
     }
   }
   clearAnimation() {
-    var _a;
+    var _a, _b;
     this.currentProcess && motionDom.cancelFrame(this.currentProcess);
     this.currentProcess = null;
-    (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
+    (_b = (_a = this.visualElement) == null ? void 0 : _a.variantChildren) == null ? void 0 : _b.forEach((child) => {
       child.state.clearAnimation();
     });
   }
@@ -7750,9 +7753,6 @@ class MotionState {
   isMounted() {
     return Boolean(this.element);
   }
-  getOptions() {
-    return this.options;
-  }
   // Called before layout updates to prepare for changes
   willUpdate(label) {
     var _a;
@@ -7761,292 +7761,321 @@ class MotionState {
     }
   }
 }
+function useMotionState(props) {
+  var _a;
+  const parentState = injectMotion(null);
+  const layoutGroup = injectLayoutGroup({});
+  const config = useMotionConfig();
+  const animatePresenceContext = injectAnimatePresence({});
+  const lazyMotionContext = useLazyMotionContext({
+    features: vue.ref([]),
+    strict: false
+  });
+  if (process.env.NODE_ENV !== "production" && ((_a = props.features) == null ? void 0 : _a.length) && lazyMotionContext.strict) {
+    const strictMessage = "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.";
+    props.ignoreStrict ? heyListen.warning(false, strictMessage) : heyListen.invariant(false, strictMessage);
+  }
+  const attrs = vue.useAttrs();
+  function getLayoutId() {
+    if (layoutGroup.id && props.layoutId)
+      return `${layoutGroup.id}-${props.layoutId}`;
+    return props.layoutId || void 0;
+  }
+  function getProps() {
+    return {
+      ...props,
+      lazyMotionContext,
+      layoutId: getLayoutId(),
+      transition: props.transition ?? config.value.transition,
+      layoutGroup,
+      motionConfig: config.value,
+      inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
+      animatePresenceContext,
+      initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
+    };
+  }
+  function getMotionProps() {
+    return {
+      ...attrs,
+      ...getProps()
+    };
+  }
+  const state2 = new MotionState(
+    getMotionProps(),
+    parentState
+  );
+  provideMotion(state2);
+  function getAttrs() {
+    var _a2;
+    const isSVG = state2.type === "svg";
+    const attrsProps = { ...attrs };
+    Object.keys(attrs).forEach((key) => {
+      if (isMotionValue(attrs[key]))
+        attrsProps[key] = attrs[key].get();
+    });
+    let styleProps = {
+      ...props.style,
+      ...isSVG ? {} : ((_a2 = state2.visualElement) == null ? void 0 : _a2.latestValues) || state2.baseTarget
+    };
+    if (isSVG) {
+      const { attributes, style: style2 } = convertSvgStyleToAttributes({
+        ...state2.isMounted() ? state2.target : state2.baseTarget,
+        ...styleProps
+      });
+      Object.assign(attrsProps, attributes);
+      styleProps = style2;
+    }
+    if (props.drag && props.dragListener !== false) {
+      Object.assign(styleProps, {
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        WebkitTouchCallout: "none",
+        touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
+      });
+    }
+    attrsProps.style = createStyles(styleProps);
+    return attrsProps;
+  }
+  const instance = vue.getCurrentInstance().proxy;
+  vue.onBeforeMount(() => {
+    state2.beforeMount();
+  });
+  vue.onMounted(() => {
+    state2.mount(getMotionElement(instance.$el), getMotionProps(), checkMotionIsHidden(instance));
+  });
+  vue.onBeforeUnmount(() => state2.beforeUnmount());
+  vue.onUnmounted(() => {
+    const el = getMotionElement(instance.$el);
+    if (!(el == null ? void 0 : el.isConnected)) {
+      state2.unmount();
+    }
+  });
+  vue.onBeforeUpdate(() => {
+    state2.beforeUpdate();
+  });
+  vue.onUpdated(() => {
+    state2.update(getMotionProps());
+  });
+  return {
+    getProps,
+    getAttrs,
+    layoutGroup,
+    state: state2
+  };
+}
+const MotionComponentProps = {
+  "ignoreStrict": { type: Boolean },
+  "forwardMotionProps": { type: Boolean, default: false },
+  "asChild": { type: Boolean, default: false },
+  "hover": { type: [String, Array, Object] },
+  "press": { type: [String, Array, Object] },
+  "inView": { type: [String, Array, Object] },
+  "focus": { type: [String, Array, Object] },
+  "whileDrag": { type: [String, Array, Object] },
+  "whileHover": { type: [String, Array, Object], default: ({ hover }) => {
+    if (process.env.NODE_ENV === "development" && hover) {
+      heyListen.warning(true, "hover is deprecated. Use whileHover instead.");
+    }
+    return hover;
+  } },
+  "whilePress": { type: [String, Array, Object], default: ({ press }) => {
+    if (process.env.NODE_ENV === "development" && press) {
+      heyListen.warning(true, "press is deprecated. Use whilePress instead.");
+    }
+    return press;
+  } },
+  "whileInView": { type: [String, Array, Object], default: ({ inView: inView2 }) => {
+    if (process.env.NODE_ENV === "development" && inView2) {
+      heyListen.warning(true, "inView is deprecated. Use whileInView instead.");
+    }
+    return inView2;
+  } },
+  "whileFocus": { type: [String, Array, Object], default: ({ focus }) => {
+    if (process.env.NODE_ENV === "development" && focus) {
+      heyListen.warning(true, "focus is deprecated. Use whileFocus instead.");
+    }
+    return focus;
+  } },
+  "custom": { type: [String, Number, Object, Array] },
+  "initial": { type: [String, Array, Object, Boolean], default: void 0 },
+  "animate": { type: [String, Array, Object], default: void 0 },
+  "exit": { type: [String, Array, Object] },
+  "variants": { type: Object },
+  "inherit": { type: Boolean },
+  "style": { type: Object },
+  "transformTemplate": { type: Function },
+  "transition": { type: Object },
+  "layoutGroup": { type: Object },
+  "motionConfig": { type: Object },
+  "onAnimationComplete": { type: Function },
+  "onUpdate": { type: Function },
+  "layout": { type: [Boolean, String], default: false },
+  "layoutId": { type: String, default: void 0 },
+  "layoutScroll": { type: Boolean, default: false },
+  "layoutRoot": { type: Boolean, default: false },
+  "data-framer-portal-id": { type: String },
+  "crossfade": { type: Boolean, default: true },
+  "layoutDependency": { type: [String, Number, Object, Array] },
+  "onBeforeLayoutMeasure": { type: Function },
+  "onLayoutMeasure": { type: Function },
+  "onLayoutAnimationStart": { type: Function },
+  "onLayoutAnimationComplete": { type: Function },
+  "globalPressTarget": { type: Boolean },
+  "onPressStart": { type: Function },
+  "onPress": { type: Function },
+  "onPressCancel": { type: Function },
+  "onHoverStart": { type: Function },
+  "onHoverEnd": { type: Function },
+  "inViewOptions": { type: Object },
+  "onViewportEnter": { type: Function },
+  "onViewportLeave": { type: Function },
+  "drag": { type: [Boolean, String] },
+  "dragSnapToOrigin": { type: Boolean },
+  "dragDirectionLock": { type: Boolean },
+  "dragPropagation": { type: Boolean },
+  "dragConstraints": { type: [Boolean, Object] },
+  "dragElastic": { type: [Boolean, Number, Object], default: 0.5 },
+  "dragMomentum": { type: Boolean, default: true },
+  "dragTransition": { type: Object },
+  "dragListener": { type: Boolean, default: true },
+  "dragControls": { type: Object },
+  "onDragStart": { type: Function },
+  "onDragEnd": { type: Function },
+  "onDrag": { type: Function },
+  "onDirectionLock": { type: Function },
+  "onDragTransitionEnd": { type: Function },
+  "onMeasureDragConstraints": { type: Function },
+  "onPanSessionStart": { type: Function },
+  "onPanStart": { type: Function },
+  "onPan": { type: Function },
+  "onPanEnd": { type: Function },
+  "onFocus": { type: Function },
+  "onBlur": { type: Function }
+};
 function checkMotionIsHidden(instance) {
   var _a;
   const isHidden = ((_a = getMotionElement(instance.$el)) == null ? void 0 : _a.style.display) === "none";
   const hasTransition = instance.$.vnode.transition;
   return hasTransition && isHidden;
 }
-const defaultConfig = {
-  reduceMotion: "never",
-  transition: void 0,
-  nonce: void 0
-};
-const [injectMotionConfig, provideMotionConfig] = createContext("MotionConfig");
-function useMotionConfig() {
-  return injectMotionConfig(vue.computed(() => defaultConfig));
+const componentMaxCache = /* @__PURE__ */ new Map();
+const componentMiniCache = /* @__PURE__ */ new Map();
+function renderSlotFragments(fragments) {
+  if (!Array.isArray(fragments))
+    return [fragments];
+  const result = [];
+  for (const item of fragments) {
+    if (Array.isArray(item))
+      result.push(...item);
+    else
+      result.push(item);
+  }
+  return result;
 }
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
-  ...{
-    name: "Motion",
-    inheritAttrs: false
-  },
-  __name: "Motion",
-  props: /* @__PURE__ */ vue.mergeDefaults({
-    as: {},
-    asChild: { type: Boolean },
-    hover: {},
-    press: {},
-    inView: {},
-    focus: {},
-    whileDrag: {},
-    whileHover: {},
-    whilePress: {},
-    whileInView: {},
-    whileFocus: {},
-    forwardMotionProps: { type: Boolean },
-    custom: {},
-    initial: { type: [String, Array, Object, Boolean] },
-    animate: {},
-    exit: {},
-    variants: {},
-    inherit: { type: Boolean },
-    style: {},
-    transformTemplate: { type: Function },
-    transition: {},
-    layoutGroup: {},
-    motionConfig: {},
-    onAnimationComplete: { type: Function },
-    onUpdate: { type: Function },
-    layout: { type: [Boolean, String] },
-    layoutId: {},
-    layoutScroll: { type: Boolean },
-    layoutRoot: { type: Boolean },
-    "data-framer-portal-id": {},
-    crossfade: { type: Boolean },
-    layoutDependency: {},
-    onBeforeLayoutMeasure: { type: Function },
-    onLayoutMeasure: { type: Function },
-    onLayoutAnimationStart: { type: Function },
-    onLayoutAnimationComplete: { type: Function },
-    globalPressTarget: { type: Boolean },
-    onPressStart: { type: Function },
-    onPress: { type: Function },
-    onPressCancel: { type: Function },
-    onHoverStart: { type: Function },
-    onHoverEnd: { type: Function },
-    inViewOptions: {},
-    onViewportEnter: { type: Function },
-    onViewportLeave: { type: Function },
-    drag: { type: [Boolean, String] },
-    dragSnapToOrigin: { type: Boolean },
-    dragDirectionLock: { type: Boolean },
-    dragPropagation: { type: Boolean },
-    dragConstraints: { type: [Boolean, Object] },
-    dragElastic: { type: [Boolean, Number, Object] },
-    dragMomentum: { type: Boolean },
-    dragTransition: {},
-    dragListener: { type: Boolean },
-    dragControls: {},
-    onDragStart: { type: Function },
-    onDragEnd: { type: Function },
-    onDrag: { type: Function },
-    onDirectionLock: { type: Function },
-    onDragTransitionEnd: { type: Function },
-    onMeasureDragConstraints: { type: Function },
-    onPanSessionStart: { type: Function },
-    onPanStart: { type: Function },
-    onPan: { type: Function },
-    onPanEnd: { type: Function },
-    onFocus: { type: Function },
-    onBlur: { type: Function }
-  }, {
-    as: "div",
-    asChild: false,
-    initial: void 0,
-    animate: void 0,
-    hover: void 0,
-    inView: void 0,
-    layout: false,
-    layoutId: void 0,
-    layoutScroll: false,
-    layoutRoot: false,
-    dragListener: true,
-    dragElastic: 0.5,
-    dragMomentum: true,
-    whileDrag: void 0,
-    crossfade: true,
-    whileHover: ({ hover }) => {
-      if (process.env.NODE_ENV === "development" && hover) {
-        vue.warn("hover is deprecated. Use whileHover instead.");
-      }
-      return hover;
-    },
-    whilePress: ({ press }) => {
-      if (process.env.NODE_ENV === "development" && press) {
-        vue.warn("press is deprecated. Use whilePress instead.");
-      }
-      return press;
-    },
-    whileInView: ({ inView: inView2 }) => {
-      if (process.env.NODE_ENV === "development" && inView2) {
-        vue.warn("inView is deprecated. Use whileInView instead.");
-      }
-      return inView2;
+const SELF_CLOSING_TAGS = ["area", "img", "input"];
+function handlePrimitiveAndSlot(asTag, allAttrs, slots) {
+  var _a, _b;
+  if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag)) {
+    return vue.h(asTag, allAttrs);
+  }
+  if (asTag === "template") {
+    if (!slots.default)
+      return null;
+    const childrens = renderSlotFragments(slots.default());
+    const firstNonCommentChildrenIndex = childrens.findIndex((child) => child.type !== vue.Comment);
+    if (firstNonCommentChildrenIndex === -1)
+      return childrens;
+    const firstNonCommentChildren = childrens[firstNonCommentChildrenIndex];
+    (_a = firstNonCommentChildren.props) == null ? true : delete _a.ref;
+    const mergedProps = firstNonCommentChildren.props ? vue.mergeProps(allAttrs, firstNonCommentChildren.props) : allAttrs;
+    if (allAttrs.class && ((_b = firstNonCommentChildren.props) == null ? void 0 : _b.class))
+      delete firstNonCommentChildren.props.class;
+    const cloned = vue.cloneVNode(firstNonCommentChildren, mergedProps);
+    for (const prop in mergedProps) {
+      if (prop.startsWith("on")) {
+        cloned.props || (cloned.props = {});
+        cloned.props[prop] = mergedProps[prop];
+      }
+    }
+    if (childrens.length === 1)
+      return cloned;
+    childrens[firstNonCommentChildrenIndex] = cloned;
+    return childrens;
+  }
+  return null;
+}
+function createMotionComponent(component, options = {}) {
+  var _a;
+  const isString = typeof component === "string";
+  const name = isString ? component : component.name || "";
+  const componentCache = ((_a = options.features) == null ? void 0 : _a.length) > 0 ? componentMaxCache : componentMiniCache;
+  if (isString && (componentCache == null ? void 0 : componentCache.has(component))) {
+    return componentCache.get(component);
+  }
+  const motionComponent = vue.defineComponent({
+    inheritAttrs: false,
+    props: {
+      ...MotionComponentProps,
+      features: {
+        type: Object,
+        default: () => options.features || []
+      },
+      as: { type: [String, Object], default: component || "div" }
     },
-    whileFocus: ({ focus }) => {
-      if (process.env.NODE_ENV === "development" && focus) {
-        vue.warn("focus is deprecated. Use whileFocus instead.");
-      }
-      return focus;
-    }
-  }),
-  setup(__props) {
-    const props = __props;
-    const animatePresenceContext = injectAnimatePresence({});
-    const parentState = injectMotion(null);
-    const attrs = vue.useAttrs();
-    const layoutGroup = injectLayoutGroup({});
-    const config = useMotionConfig();
-    function getLayoutId() {
-      if (layoutGroup.id && props.layoutId)
-        return `${layoutGroup.id}-${props.layoutId}`;
-      return props.layoutId || void 0;
-    }
-    function getProps() {
-      return {
-        ...props,
-        layoutId: getLayoutId(),
-        transition: props.transition ?? config.value.transition,
-        layoutGroup,
-        motionConfig: config.value,
-        inViewOptions: props.inViewOptions ?? config.value.inViewOptions,
-        animatePresenceContext,
-        initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
-      };
-    }
-    function getMotionProps() {
-      return {
-        ...attrs,
-        ...getProps()
-      };
-    }
-    const state2 = new MotionState(
-      getMotionProps(),
-      parentState
-    );
-    provideMotion(state2);
-    const instance = vue.getCurrentInstance().proxy;
-    vue.onBeforeMount(() => {
-      state2.beforeMount();
-    });
-    vue.onMounted(() => {
-      state2.mount(getMotionElement(instance.$el), getMotionProps(), checkMotionIsHidden(instance));
-    });
-    vue.onBeforeUnmount(() => state2.beforeUnmount());
-    vue.onUnmounted(() => {
-      const el = getMotionElement(instance.$el);
-      if (!(el == null ? void 0 : el.isConnected)) {
-        state2.unmount();
+    name: name ? `motion.${name}` : "Motion",
+    setup(props, { slots }) {
+      const { getProps, getAttrs, state: state2 } = useMotionState(props);
+      function onVnodeUpdated() {
+        const el = state2.element;
+        const isComponent = typeof props.as === "object";
+        if ((!isComponent || props.asChild) && el) {
+          const { style: style2 } = getAttrs();
+          for (const [key, val] of Object.entries(style2)) {
+            el.style[key] = val;
+          }
+        }
       }
-    });
-    vue.onBeforeUpdate(() => {
-      state2.beforeUpdate();
-    });
-    vue.onUpdated(() => {
-      state2.update(getMotionProps());
-    });
-    function getAttrs() {
-      const isSVG = state2.visualElement.type === "svg";
-      const attrsProps = { ...attrs };
-      Object.keys(attrs).forEach((key) => {
-        if (isMotionValue(attrs[key]))
-          attrsProps[key] = attrs[key].get();
-      });
-      let styleProps = {
-        ...props.style,
-        ...isSVG ? {} : state2.visualElement.latestValues
+      return () => {
+        const motionProps = getProps();
+        const motionAttrs = getAttrs();
+        const asTag = props.asChild ? "template" : props.as;
+        const allAttrs = {
+          ...options.forwardMotionProps || props.forwardMotionProps ? motionProps : {},
+          ...motionAttrs,
+          onVnodeUpdated
+        };
+        const primitiveOrSlotResult = handlePrimitiveAndSlot(asTag, allAttrs, slots);
+        if (primitiveOrSlotResult !== null) {
+          return primitiveOrSlotResult;
+        }
+        return vue.h(asTag, {
+          ...allAttrs
+        }, slots);
       };
-      if (isSVG) {
-        const { attributes, style: style2 } = convertSvgStyleToAttributes({
-          ...state2.isMounted() ? state2.target : state2.baseTarget,
-          ...styleProps
-        });
-        Object.assign(attrsProps, attributes);
-        styleProps = style2;
-      }
-      if (props.drag && props.dragListener !== false) {
-        Object.assign(styleProps, {
-          userSelect: "none",
-          WebkitUserSelect: "none",
-          WebkitTouchCallout: "none",
-          touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
-        });
-      }
-      attrsProps.style = createStyles(styleProps);
-      return attrsProps;
-    }
-    const PrimitiveRef = vue.ref();
-    function onMotionComplete(e) {
-      var _a, _b;
-      if (props.asChild) {
-        (_a = PrimitiveRef.value) == null ? void 0 : _a.$forceUpdate();
-      }
-      (_b = attrs.onMotioncomplete) == null ? void 0 : _b.call(attrs, e);
     }
-    return (_ctx, _cache) => {
-      var _a;
-      return vue.openBlock(), vue.createBlock(vue.unref(Primitive), {
-        ref_key: "PrimitiveRef",
-        ref: PrimitiveRef,
-        "get-props": getProps,
-        "get-attrs": getAttrs,
-        as: _ctx.as,
-        "as-child": _ctx.asChild,
-        "data-motion-group": ((_a = vue.unref(layoutGroup).key) == null ? void 0 : _a.value) || void 0,
-        onMotioncomplete: onMotionComplete
-      }, {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["as", "as-child", "data-motion-group"]);
-    };
+  });
+  if (isString) {
+    componentCache == null ? void 0 : componentCache.set(component, motionComponent);
   }
-});
-const componentCache = /* @__PURE__ */ new Map();
-const motion = new Proxy(_sfc_main$6, {
-  get(target, prop) {
-    if (typeof prop === "symbol")
-      return target[prop];
-    let motionComponent = componentCache.get(prop);
-    if (prop === "create") {
-      return (component, { forwardMotionProps = false } = {}) => {
-        return vue.defineComponent({
-          inheritAttrs: false,
-          name: `motion.${component.$name}`,
-          setup(_, { attrs, slots }) {
-            return () => {
-              return vue.h(_sfc_main$6, {
-                ...attrs,
-                forwardMotionProps,
-                as: component,
-                asChild: false
-              }, slots);
-            };
-          }
+  return motionComponent;
+}
+function createMotionComponentWithFeatures(features = []) {
+  return new Proxy({}, {
+    get(target, prop) {
+      if (prop === "create") {
+        return (component, options) => createMotionComponent(component, {
+          ...options,
+          features
         });
-      };
-    }
-    if (!motionComponent) {
-      motionComponent = vue.defineComponent({
-        inheritAttrs: false,
-        name: `motion.${prop}`,
-        setup(_, { attrs, slots }) {
-          return () => {
-            return vue.h(_sfc_main$6, {
-              ...attrs,
-              as: prop,
-              asChild: false
-            }, slots);
-          };
-        }
+      }
+      return createMotionComponent(prop, {
+        features
       });
-      componentCache.set(prop, motionComponent);
     }
-    return motionComponent;
-  }
-});
+  });
+}
+const motion = createMotionComponentWithFeatures(domMax);
+const Motion = motion.create("div");
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
   const config = useMotionConfig();
@@ -8103,7 +8132,7 @@ function delay(fn) {
     fn();
   });
 }
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
     inheritAttrs: true
@@ -8221,33 +8250,6 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
-  ...{
-    name: "MotionConfig",
-    inheritAttrs: false
-  },
-  __name: "MotionConfig",
-  props: {
-    transition: {},
-    reduceMotion: { default: defaultConfig.reduceMotion },
-    nonce: {},
-    inViewOptions: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const parentConfig = useMotionConfig();
-    const config = vue.computed(() => ({
-      transition: props.transition ?? parentConfig.value.transition,
-      reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
-      nonce: props.nonce ?? parentConfig.value.nonce,
-      inViewOptions: props.inViewOptions ?? parentConfig.value.inViewOptions
-    }));
-    provideMotionConfig(config);
-    return (_ctx, _cache) => {
-      return vue.renderSlot(_ctx.$slots, "default");
-    };
-  }
-});
 const [useReorderContext, reorderContextProvider] = createContext("ReorderContext");
 function compareMin(a, b) {
   return a.layout.min - b.layout.min;
@@ -8307,6 +8309,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     whileInView: {},
     whileFocus: {},
     forwardMotionProps: { type: Boolean },
+    features: {},
+    ignoreStrict: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean] },
     animate: {},
@@ -8320,6 +8324,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     motionConfig: {},
     onAnimationComplete: {},
     onUpdate: {},
+    onAnimationStart: {},
     layout: { type: [Boolean, String] },
     layoutId: {},
     layoutScroll: { type: Boolean },
@@ -8408,7 +8413,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       };
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$6), vue.normalizeProps(vue.guardReactiveProps(bindProps())), {
+      return vue.openBlock(), vue.createBlock(vue.unref(Motion), vue.normalizeProps(vue.guardReactiveProps(bindProps())), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default"),
           vue.createTextVNode(" " + vue.toDisplayString(warning2()), 1)
@@ -8652,6 +8657,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     whileInView: {},
     whileFocus: {},
     forwardMotionProps: { type: Boolean },
+    features: {},
+    ignoreStrict: { type: Boolean },
     custom: {},
     initial: { type: [String, Array, Object, Boolean], default: void 0 },
     animate: { default: void 0 },
@@ -8665,6 +8672,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     motionConfig: {},
     onAnimationComplete: {},
     onUpdate: {},
+    onAnimationStart: {},
     layoutId: { default: void 0 },
     layoutScroll: { type: Boolean, default: false },
     layoutRoot: { type: Boolean, default: false },
@@ -8743,7 +8751,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     });
     const isDragging = vue.ref(false);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$6), vue.mergeProps(bindProps(), {
+      return vue.openBlock(), vue.createBlock(vue.unref(Motion), vue.mergeProps(bindProps(), {
         drag: drag.value,
         "drag-snap-to-origin": true,
         onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
@@ -8794,6 +8802,39 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const LazyMotion = vue.defineComponent({
+  name: "LazyMotion",
+  inheritAttrs: false,
+  props: {
+    features: {
+      type: [Object, Function],
+      default: () => []
+    },
+    strict: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots }) {
+    const features = vue.ref(Array.isArray(props.features) ? props.features : []);
+    if (!Array.isArray(props.features)) {
+      const featuresPromise = typeof props.features === "function" ? props.features() : props.features;
+      featuresPromise.then((feats) => {
+        features.value = feats;
+      });
+    }
+    lazyMotionContextProvider({
+      features,
+      strict: props.strict
+    });
+    return () => {
+      var _a;
+      return (_a = slots.default) == null ? void 0 : _a.call(slots);
+    };
+  }
+});
+const m = createMotionComponentWithFeatures();
+const M = m.create("div");
 function useForceUpdate() {
   const key = vue.ref(0);
   function forceUpdate() {
@@ -9077,10 +9118,12 @@ Object.defineProperty(exports, "useMotionValue", {
   enumerable: true,
   get: () => motionDom.motionValue
 });
-exports.AnimatePresence = _sfc_main$5;
+exports.AnimatePresence = _sfc_main$4;
 exports.LayoutGroup = _sfc_main;
-exports.Motion = _sfc_main$6;
-exports.MotionConfig = _sfc_main$4;
+exports.LazyMotion = LazyMotion;
+exports.M = M;
+exports.Motion = Motion;
+exports.MotionConfig = _sfc_main$5;
 exports.Reorder = Reorder;
 exports.ReorderGroup = ReorderGroup;
 exports.ReorderItem = ReorderItem;
@@ -9102,6 +9145,8 @@ exports.cubicBezier = cubicBezier;
 exports.delay = delayInSeconds;
 exports.distance = distance;
 exports.distance2D = distance2D;
+exports.domAnimation = domAnimation;
+exports.domMax = domMax;
 exports.easeIn = easeIn;
 exports.easeInOut = easeInOut;
 exports.easeOut = easeOut;
@@ -9113,6 +9158,7 @@ exports.injectMotion = injectMotion;
 exports.interpolate = interpolate;
 exports.isMotionValue = isMotionValue;
 exports.keyframes = keyframes;
+exports.m = m;
 exports.millisecondsToSeconds = millisecondsToSeconds;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;