unframer 2.6.3 → 2.6.4

package/dist/framer.js

@@ -47,14 +47,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentPresetsProvider = exports.ComponentPresetsConsumer = exports.ComponentContainerContext = exports.complex = exports.combinedCSSRulesForPreview = exports.ColorMixModelType = exports.ColorFormat = exports.color = exports.Color = exports.collectVisualStyleFromProps = exports.clamp = exports.circOut = exports.circInOut = exports.circIn = exports.ChildrenCanSuspend = exports.cancelSync = exports.cancelFrame = exports.callEach = exports.calculateRect = exports.calcLength = exports.buildTransform = exports.BoxShadow = exports.BezierAnimator = exports.backOut = exports.backInOut = exports.backIn = exports.backgroundImageFromProps = exports.BackgroundImage = exports.AutomaticLayoutIds = exports.AnyInterpolation = exports.anticipate = exports.annotateTypeOnStringify = exports.animations = exports.animationControls = exports.animateVisualElement = exports.animateValue = exports.AnimateSharedLayout = exports.AnimatePresence = exports.animate = exports.Animatable = exports.AnchorLinkTarget = exports.addScaleCorrector = exports.addPropertyControls = exports.addPointerInfo = exports.addPointerEvent = exports.addFonts = exports.addActionControls = exports.AcceleratedAnimation = exports._injectRuntime = exports.combinedCSSRules = void 0;
-exports.EmptyState = exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMax = exports.domAnimation = exports.DOM = exports.distance2D = exports.distance = exports.dispatchKeyDownEvent = exports.disableInstantTransitions = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = exports.Device = exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.delay = exports.degreesToRadians = exports.defaultDeviceProps = exports.debounce = exports.DataObserverContext = exports.DataObserver = exports.DataContext = exports.Data = exports.CycleVariantState = exports.cx = exports.CustomProperties = exports.CustomCursorHost = exports.cubicBezier = exports.cssBackgroundSize = exports.createScopedAnimate = exports.createMotionComponent = exports.createFramerPageLink = exports.createDomMotionComponent = exports.createData = exports.createBox = exports.convertPropsToDeviceOptions = exports.convertPresentationTree = exports.ConvertColor = exports.ControlType = exports.Container = exports.ConstraintValues = exports.constraintsEnabled = exports.ConstraintMask = exports.ComponentViewportProvider = void 0;
-exports.installFlexboxGapWorkaroundIfNeeded = exports.injectComponentCSSRules = exports.inferInitialRouteFromPath = exports.imageUrlForAsset = exports.imagePatternPropsForFill = exports.Image = exports.gradientForShape = exports.getWhereExpressionFromPathVariables = exports.getPropertyControls = exports.getMergedConstraintsProps = exports.getMeasurableCodeComponentChildren = exports.getLoadingLazyAtYPosition = exports.getFontsFromSharedStyle = exports.getFontsFromComponentPreset = exports.getFonts = exports.getDevicePreset = exports.getComponentSize = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.fraction = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.forceLayerBackingWithCSSProperties = exports.fontStore = exports.FontSourceNames = exports.Floating = exports.FlatTree = exports.finiteNumber = exports.filterProps = exports.Fetcher = exports.executeInRenderEnvironment = exports.ErrorPlaceholder = exports.environment = void 0;
-exports.MotionContext = exports.MotionConfigContext = exports.MotionConfig = exports.motion = exports.modulate = exports.mix = exports.mirrorEasing = exports.memoize = exports.markHydrationStart = exports.makeUseVisualState = exports.makePaddingString = exports.MainLoop = exports.m = exports.localShadowFrame = exports.localPackageFallbackIdentifier = exports.loadJSON = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LazyMotion = exports.lazy = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.isValidMotionProp = exports.isStraightCurve = exports.isShallowEqualArray = exports.isRelativeNumber = exports.isReactDefinition = exports.isOverride = exports.isOfAnnotatedType = exports.isMotionValue = exports.isMotionComponent = exports.isGapEnabled = exports.isFramerPageLink = exports.isFramerGamepadKeydownData = exports.isFractionDimension = exports.isFiniteNumber = exports.isEqual = exports.isDragActive = exports.isDesignDefinition = exports.isBrowser = exports.isAnimatable = exports.inView = exports.invariant = exports.interpolate = exports.InternalID = void 0;
-exports.roundedNumberString = exports.roundedNumber = exports.RichText = exports.reverseEasing = exports.resolvePageScope = exports.resolveMotionValue = exports.ResolveLinks = exports.resolveLink = exports.Reorder = exports.RenderTarget = exports.removeHiddenBreakpointLayersV2 = exports.removeHiddenBreakpointLayers = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.pushLoadMoreHistory = exports.propsForLink = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.print = exports.PresenceContext = exports.preloadImage = exports.Polygon = exports.Point = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.parseFramerPageLink = exports.ParentSizeState = exports.PageRoot = exports.PageEffectsProvider = exports.Page = exports.paddingFromProps = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.Navigation = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.motionValue = exports.MotionValue = exports.MotionSetup = exports.MotionGlobalConfig = void 0;
-exports.useDataRecord = exports.useCycle = exports.useCustomCursors = exports.useCurrentRouteId = exports.useCurrentPathVariables = exports.useConstant = exports.useComponentViewport = exports.useBreakpointVariants = exports.useAnimationFrame = exports.useAnimationControls = exports.useAnimation = exports.useDeprecatedAnimatedState = exports.useAnimatedState = exports.useAnimate = exports.useAddVariantProps = exports.useActiveVariantCallback = exports.useActiveTargetCallback = exports.unwrapMotionComponent = exports.turnOffReactEventHandling = exports.transformTemplate = exports.transformString = exports.transform = exports.toSVGPath = exports.toJustifyOrAlignment = exports.toFlexDirection = exports.throttle = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.SVG = exports.StyleSheetContext = exports.steps = exports.startOptimizedAppearAnimation = exports.startAnimation = exports.stagger = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.spring = exports.Size = exports.shouldOpenLinkInNewTab = exports.sharedSVGManager = exports.Shadow = exports.setInitialHydrationState = exports.setGlobalRenderEnvironment = exports.scrollInfo = exports.scroll = exports.Scroll = exports.roundWithOffset = void 0;
-exports.useRouter = exports.useRouteHandler = exports.useRouteElementId = exports.useRouteAnchor = exports.useRoute = exports.useResetProjection = exports.useRenderEnvironment = exports.useReducedMotionConfig = exports.useReducedMotion = exports.useQueryData = exports.useProvidedWindow = exports.usePrototypeNavigate = exports.usePresence = exports.usePreloadQuery = exports.usePrefetch = exports.usePageEffects = exports.useOverlayState = exports.useOnVariantChange = exports.useOnCurrentTargetChange = exports.useOnAppear = exports.useObserveData = exports.useNavigation = exports.useNavigate = exports.useMotionValueEvent = exports.useMotionValue = exports.useMotionTemplate = exports.useMeasureLayout = exports.useLocalizationInfo = exports.useLocaleInfo = exports.useLocaleCode = exports.useLocale = exports.useLoadMorePaginatedQuery = exports.useIsPresent = exports.useIsOnFramerCanvas = exports.useIsomorphicLayoutEffect = exports.useIsInCurrentNavigationTarget = exports.useInView = exports.useDeprecatedInvertedScale = exports.useInvertedScale = exports.useInstantTransition = exports.useInstantLayoutTransition = exports.useInitialRouteComponent = exports.useHydratedBreakpointVariants = exports.useHotkey = exports.useGamepad = exports.useForceUpdate = exports.useElementScroll = exports.useDynamicRefs = exports.useDragControls = exports.useDomEvent = void 0;
-exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withShape = exports.withPerformanceMarks = exports.withPath = exports.withParallaxTransform = exports.WithOverride = exports.withOptimizedAppearEffect = exports.withOpacity = exports.WithNavigator = exports.withMeasuredSize = exports.withMappedReactProps = exports.withInfiniteScroll = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.valueToDimensionType = exports.ValueInterpolation = exports.useWillChange = exports.useViewportScroll = exports.useVelocity = exports.useVariantState = exports.useUnmountEffect = exports.useTransform = exports.useTime = exports.useSpring = exports.useScroll = void 0;
-// https :https://app.framerstatic.com/chunk-HCJ5X5Q7.js
+exports.easeOut = exports.easeInOut = exports.easeIn = exports.Draggable = exports.DragControls = exports.domMin = exports.domMax = exports.domAnimation = exports.DOM = exports.distance2D = exports.distance = exports.dispatchKeyDownEvent = exports.disableInstantTransitions = exports.DimensionType = exports.devicePresets = exports.DeviceCodeComponent = exports.Device = exports.LayoutGroupContext = exports.DeprecatedLayoutGroupContext = exports.DeprecatedFrameWithEvents = exports.DeprecatedComponentContainer = exports.delay = exports.degreesToRadians = exports.defaultDeviceProps = exports.debounce = exports.DataObserverContext = exports.DataObserver = exports.DataContext = exports.Data = exports.CycleVariantState = exports.cx = exports.CustomProperties = exports.CustomCursorHost = exports.cubicBezier = exports.cssBackgroundSize = exports.createScopedAnimate = exports.createMotionComponent = exports.createFramerPageLink = exports.createDomMotionComponent = exports.createData = exports.createBox = exports.convertPropsToDeviceOptions = exports.convertPresentationTree = exports.ConvertColor = exports.ControlType = exports.Container = exports.ConstraintValues = exports.constraintsEnabled = exports.ConstraintMask = exports.ComponentViewportProvider = void 0;
+exports.injectComponentCSSRules = exports.inferInitialRouteFromPath = exports.imageUrlForAsset = exports.imagePatternPropsForFill = exports.Image = exports.gradientForShape = exports.getWhereExpressionFromPathVariables = exports.getPropertyControls = exports.getMergedConstraintsProps = exports.getMeasurableCodeComponentChildren = exports.getLoadingLazyAtYPosition = exports.getFontsFromSharedStyle = exports.getFontsFromComponentPreset = exports.getFonts = exports.getDevicePreset = exports.getComponentSize = exports.GeneratedComponentContext = exports.GamepadContext = exports.FrameWithMotion = exports.FramerEventSession = exports.FramerEventListener = exports.FramerEvent = exports.framerCSSMarker = exports.framerAppearTransformTemplateToken = exports.framerAppearIdKey = exports.framerAppearEffects = exports.framerAppearAnimationScriptKey = exports.FramerAnimation = exports.frameFromElements = exports.frameFromElement = exports.frameData = exports.frame = exports.Frame = exports.fraction = exports.FormSelect = exports.FormPlainTextInput = exports.FormContainer = exports.FormBooleanInput = exports.forceLayerBackingWithCSSProperties = exports.fontStore = exports.FontSourceNames = exports.Floating = exports.FlatTree = exports.finiteNumber = exports.filterProps = exports.Fetcher = exports.executeInRenderEnvironment = exports.ErrorPlaceholder = exports.environment = exports.EmptyState = void 0;
+exports.MotionConfigContext = exports.MotionConfig = exports.motion = exports.modulate = exports.mix = exports.mirrorEasing = exports.memoize = exports.markHydrationStart = exports.makeUseVisualState = exports.makePaddingString = exports.MainLoop = exports.m = exports.localShadowFrame = exports.localPackageFallbackIdentifier = exports.loadJSON = exports.loadFont = exports.Link = exports.LinearGradient = exports.Line = exports.LibraryFeaturesProvider = exports.LazyValue = exports.LazyMotion = exports.lazy = exports.LayoutIdContext = exports.LayoutGroup = exports.Layer = exports.isValidMotionProp = exports.isStraightCurve = exports.isShallowEqualArray = exports.isRelativeNumber = exports.isReactDefinition = exports.isOverride = exports.isOfAnnotatedType = exports.isMotionValue = exports.isMotionComponent = exports.isGapEnabled = exports.isFramerPageLink = exports.isFramerGamepadKeydownData = exports.isFractionDimension = exports.isFiniteNumber = exports.isEqual = exports.isDragActive = exports.isDesignDefinition = exports.isBrowser = exports.isAnimatable = exports.inView = exports.invariant = exports.interpolate = exports.InternalID = exports.installFlexboxGapWorkaroundIfNeeded = void 0;
+exports.roundedNumber = exports.RichText = exports.reverseEasing = exports.resolvePageScope = exports.resolveMotionValue = exports.ResolveLinks = exports.resolveLink = exports.Reorder = exports.RenderTarget = exports.removeHiddenBreakpointLayersV2 = exports.removeHiddenBreakpointLayers = exports.Rect = exports.RadialGradient = exports.QueryEngine = exports.px = exports.pushLoadMoreHistory = exports.propsForLink = exports.PropertyStore = exports.PropertyOverrides = exports.progress = exports.print = exports.PresenceContext = exports.preloadImage = exports.Polygon = exports.Point = exports.pipe = exports.PathVariablesContext = exports.PathSegment = exports.pathDefaults = exports.parseFramerPageLink = exports.ParentSizeState = exports.PageRoot = exports.PageEffectsProvider = exports.Page = exports.paddingFromProps = exports.optimizedAppearDataAttribute = exports.optimizeAppearTransformTemplate = exports.optimizeAppear = exports.ObservableObject = exports.NotFoundError = exports.Navigation = exports.NavigationTransitionType = exports.NavigationConsumer = exports.NavigationCallbackProvider = exports.NavigateTo = exports.motionValue = exports.MotionValue = exports.MotionSetup = exports.MotionGlobalConfig = exports.MotionContext = void 0;
+exports.useCycle = exports.useCustomCursors = exports.useCurrentRouteId = exports.useCurrentPathVariables = exports.useConstant = exports.useComponentViewport = exports.useBreakpointVariants = exports.useAnimationFrame = exports.useAnimationControls = exports.useAnimation = exports.useDeprecatedAnimatedState = exports.useAnimatedState = exports.useAnimate = exports.useAddVariantProps = exports.useActiveVariantCallback = exports.useActiveTargetCallback = exports.unwrapMotionComponent = exports.turnOffReactEventHandling = exports.transformTemplate = exports.transformString = exports.transform = exports.toSVGPath = exports.toJustifyOrAlignment = exports.toFlexDirection = exports.throttle = exports.Text = exports.systemFontFamilyName = exports.sync = exports.SwitchLayoutGroupContext = exports.SVG = exports.StyleSheetContext = exports.steps = exports.startOptimizedAppearAnimation = exports.startAnimation = exports.stagger = exports.Stack = exports.SSRVariants = exports.SpringAnimator = exports.spring = exports.Size = exports.shouldOpenLinkInNewTab = exports.sharedSVGManager = exports.Shadow = exports.setInitialHydrationState = exports.setGlobalRenderEnvironment = exports.scrollInfo = exports.scroll = exports.Scroll = exports.roundWithOffset = exports.roundedNumberString = void 0;
+exports.useRouteHandler = exports.useRouteElementId = exports.useRouteAnchor = exports.useRoute = exports.useResetProjection = exports.useRenderEnvironment = exports.useReducedMotionConfig = exports.useReducedMotion = exports.useQueryData = exports.useProvidedWindow = exports.usePrototypeNavigate = exports.usePresence = exports.usePreloadQuery = exports.usePrefetch = exports.usePageEffects = exports.useOverlayState = exports.useOnVariantChange = exports.useOnCurrentTargetChange = exports.useOnAppear = exports.useObserveData = exports.useNavigation = exports.useNavigate = exports.useMotionValueEvent = exports.useMotionValue = exports.useMotionTemplate = exports.useMeasureLayout = exports.useLocalizationInfo = exports.useLocaleInfo = exports.useLocaleCode = exports.useLocale = exports.useLoadMorePaginatedQuery = exports.useIsPresent = exports.useIsOnFramerCanvas = exports.useIsomorphicLayoutEffect = exports.useIsInCurrentNavigationTarget = exports.useInView = exports.useDeprecatedInvertedScale = exports.useInvertedScale = exports.useInstantTransition = exports.useInstantLayoutTransition = exports.useInitialRouteComponent = exports.useHydratedBreakpointVariants = exports.useHotkey = exports.useGamepad = exports.useForceUpdate = exports.useElementScroll = exports.useDynamicRefs = exports.useDragControls = exports.useDomEvent = exports.useDataRecord = void 0;
+exports.wrap = exports.withVariantFX = exports.withVariantAppearEffect = exports.withStyleAppearEffect = exports.withShape = exports.withPerformanceMarks = exports.withPath = exports.withParallaxTransform = exports.WithOverride = exports.withOptimizedAppearEffect = exports.withOpacity = exports.WithNavigator = exports.withMeasuredSize = exports.withMappedReactProps = exports.withInfiniteScroll = exports.withGeneratedLayoutId = exports.withFX = exports.withCSS = exports.WindowContext = exports.warning = exports.visualElementStore = exports.VisualElement = exports.version = exports.VectorGroup = exports.Vector = exports.VariantSelector = exports.valueToDimensionType = exports.ValueInterpolation = exports.useWillChange = exports.useViewportScroll = exports.useVelocity = exports.useVariantState = exports.useUnmountEffect = exports.useTransform = exports.useTime = exports.useSpring = exports.useScroll = exports.useRouter = void 0;
+// https :https://app.framerstatic.com/chunk-VMMGJNOV.js
 const react_1 = require("react");
 const react_2 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -66,8 +66,8 @@ const react_7 = require("react");
 const react_8 = require("react");
 const react_9 = require("react");
 const react_10 = require("react");
-const react_11 = require("react");
 const React2 = __importStar(require("react"));
+const react_11 = require("react");
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -183,7 +183,7 @@ var MotionContext = (0, react_1.createContext)({});
 exports.MotionContext = MotionContext;
 var PresenceContext = (0, react_1.createContext)(null);
 exports.PresenceContext = PresenceContext;
-var isBrowser = typeof document !== 'undefined';
+var isBrowser = typeof window !== 'undefined';
 exports.isBrowser = isBrowser;
 var useIsomorphicLayoutEffect = isBrowser ? react_2.useLayoutEffect : react_2.useEffect;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
@@ -360,6 +360,7 @@ function isRefObject(ref) {
 }
 var scheduleHandoffComplete = false;
 function useVisualElement(Component33, visualState, props, createVisualElement2, ProjectionNodeConstructor) {
+    var _a;
     const { visualElement: parent, } = (0, react_3.useContext)(MotionContext);
     const lazyContext = (0, react_3.useContext)(LazyContext);
     const presenceContext = (0, react_3.useContext)(PresenceContext);
@@ -385,7 +386,9 @@ function useVisualElement(Component33, visualState, props, createVisualElement2,
     (0, react_4.useInsertionEffect)(() => {
         visualElement && visualElement.update(props, presenceContext);
     });
-    const wantsHandoff = (0, react_4.useRef)(Boolean(props[optimizedAppearDataAttribute] && !window.HandoffComplete));
+    const optimisedAppearId = props[optimizedAppearDataAttribute];
+    const wantsHandoff = (0, react_4.useRef)(Boolean(optimisedAppearId) && !window.MotionHandoffIsComplete &&
+        ((_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)));
     useIsomorphicLayoutEffect(() => {
         if (!visualElement)
             return;
@@ -401,18 +404,16 @@ function useVisualElement(Component33, visualState, props, createVisualElement2,
         if (!wantsHandoff.current && visualElement.animationState) {
             visualElement.animationState.animateChanges();
         }
-        if (wantsHandoff.current) {
-            wantsHandoff.current = false;
-            if (!scheduleHandoffComplete) {
-                scheduleHandoffComplete = true;
-                queueMicrotask(completeHandoff);
-            }
+        wantsHandoff.current = false;
+        if (!scheduleHandoffComplete) {
+            scheduleHandoffComplete = true;
+            queueMicrotask(completeHandoff);
         }
     });
     return visualElement;
 }
 function completeHandoff() {
-    window.HandoffComplete = true;
+    window.MotionHandoffIsComplete = true;
 }
 function createProjectionNode(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
     const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot, } = props;
@@ -580,6 +581,36 @@ function addScaleCorrector(correctors) {
 }
 exports.addScaleCorrector = addScaleCorrector;
 var isMotionValue = (value) => Boolean(value && value.getVelocity);
+var clamp = (min, max, v) => {
+    if (v > max)
+        return max;
+    if (v < min)
+        return min;
+    return v;
+};
+exports.clamp = clamp;
+var sanitize = (v) => Math.round(v * 1e5) / 1e5;
+var floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
+var colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
+var singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
+function isString(v) {
+    return typeof v === 'string';
+}
+function isNullish(v) {
+    return v == null;
+}
+var createUnitType = (unit) => ({
+    test: (v) => isString(v) && v.endsWith(unit) && v.split(' ').length === 1,
+    parse: parseFloat,
+    transform: (v) => `${v}${unit}`,
+});
+var degrees = createUnitType('deg');
+var percent = createUnitType('%');
+var px = createUnitType('px');
+exports.px = px;
+var vh = createUnitType('vh');
+var vw = createUnitType('vw');
+var progressPercentage = Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
 var transformPropOrder = [
     'transformPerspective',
     'x',
@@ -600,6 +631,85 @@ var transformPropOrder = [
     'skewY',
 ];
 var transformProps = new Set(transformPropOrder);
+var getValueAsType = (value, type) => {
+    return type && typeof value === 'number' ? type.transform(value) : value;
+};
+var number = {
+    test: (v) => typeof v === 'number',
+    parse: parseFloat,
+    transform: (v) => v,
+};
+var alpha = Object.assign(Object.assign({}, number), { transform: (v) => clamp(0, 1, v) });
+var scale = Object.assign(Object.assign({}, number), { default: 1 });
+var int = Object.assign(Object.assign({}, number), { transform: Math.round });
+var numberValueTypes = {
+    // Border props
+    borderWidth: px,
+    borderTopWidth: px,
+    borderRightWidth: px,
+    borderBottomWidth: px,
+    borderLeftWidth: px,
+    borderRadius: px,
+    radius: px,
+    borderTopLeftRadius: px,
+    borderTopRightRadius: px,
+    borderBottomRightRadius: px,
+    borderBottomLeftRadius: px,
+    // Positioning props
+    width: px,
+    maxWidth: px,
+    height: px,
+    maxHeight: px,
+    size: px,
+    top: px,
+    right: px,
+    bottom: px,
+    left: px,
+    // Spacing props
+    padding: px,
+    paddingTop: px,
+    paddingRight: px,
+    paddingBottom: px,
+    paddingLeft: px,
+    margin: px,
+    marginTop: px,
+    marginRight: px,
+    marginBottom: px,
+    marginLeft: px,
+    // Transform props
+    rotate: degrees,
+    rotateX: degrees,
+    rotateY: degrees,
+    rotateZ: degrees,
+    scale,
+    scaleX: scale,
+    scaleY: scale,
+    scaleZ: scale,
+    skew: degrees,
+    skewX: degrees,
+    skewY: degrees,
+    distance: px,
+    translateX: px,
+    translateY: px,
+    translateZ: px,
+    x: px,
+    y: px,
+    z: px,
+    perspective: px,
+    transformPerspective: px,
+    opacity: alpha,
+    originX: progressPercentage,
+    originY: progressPercentage,
+    originZ: px,
+    // Misc
+    zIndex: int,
+    backgroundPositionX: px,
+    backgroundPositionY: px,
+    // SVG
+    fillOpacity: alpha,
+    strokeOpacity: alpha,
+    numOctaves: int,
+};
 var translateAlias = {
     x: 'translateX',
     y: 'translateY',
@@ -607,13 +717,31 @@ var translateAlias = {
     transformPerspective: 'perspective',
 };
 var numTransforms = transformPropOrder.length;
-function buildTransform(transform2, transformIsDefault, transformTemplate2) {
+function buildTransform(latestValues, transform2, transformTemplate2) {
     let transformString3 = '';
+    let transformIsDefault = true;
     for (let i = 0; i < numTransforms; i++) {
         const key7 = transformPropOrder[i];
-        if (transform2[key7] !== void 0) {
-            const transformName = translateAlias[key7] || key7;
-            transformString3 += `${transformName}(${transform2[key7]}) `;
+        const value = latestValues[key7];
+        if (value === void 0)
+            continue;
+        let valueIsDefault = true;
+        if (typeof value === 'number') {
+            valueIsDefault = value === (key7.startsWith('scale') ? 1 : 0);
+        }
+        else {
+            valueIsDefault = parseFloat(value) === 0;
+        }
+        if (!valueIsDefault || transformTemplate2) {
+            const valueAsType = getValueAsType(value, numberValueTypes[key7]);
+            if (!valueIsDefault) {
+                transformIsDefault = false;
+                const transformName = translateAlias[key7] || key7;
+                transformString3 += `${transformName}(${valueAsType}) `;
+            }
+            if (transformTemplate2) {
+                transform2[key7] = valueAsType;
+            }
         }
     }
     transformString3 = transformString3.trim();
@@ -626,36 +754,6 @@ function buildTransform(transform2, transformIsDefault, transformTemplate2) {
     return transformString3;
 }
 exports.buildTransform = buildTransform;
-var clamp = (min, max, v) => {
-    if (v > max)
-        return max;
-    if (v < min)
-        return min;
-    return v;
-};
-exports.clamp = clamp;
-var sanitize = (v) => Math.round(v * 1e5) / 1e5;
-var floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
-var colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
-var singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
-function isString(v) {
-    return typeof v === 'string';
-}
-function isNullish(v) {
-    return v == null;
-}
-var createUnitType = (unit) => ({
-    test: (v) => isString(v) && v.endsWith(unit) && v.split(' ').length === 1,
-    parse: parseFloat,
-    transform: (v) => `${v}${unit}`,
-});
-var degrees = createUnitType('deg');
-var percent = createUnitType('%');
-var px = createUnitType('px');
-exports.px = px;
-var vh = createUnitType('vh');
-var vw = createUnitType('vw');
-var progressPercentage = Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
 var validMotionProps = /* @__PURE__ */ new Set([
     'animate',
     'exit',
@@ -962,13 +1060,6 @@ function isDragActive() {
     return false;
 }
 exports.isDragActive = isDragActive;
-var number = {
-    test: (v) => typeof v === 'number',
-    parse: parseFloat,
-    transform: (v) => v,
-};
-var alpha = Object.assign(Object.assign({}, number), { transform: (v) => clamp(0, 1, v) });
-var scale = Object.assign(Object.assign({}, number), { default: 1 });
 var isColorString = (type, testProp) => (v) => {
     return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) ||
         testProp && !isNullish(v) && Object.prototype.hasOwnProperty.call(v, testProp));
@@ -1284,14 +1375,9 @@ function spring(_j) {
         next: (t) => {
             const current = resolveSpring(t);
             if (!isResolvedFromDuration) {
-                let currentVelocity = initialVelocity;
-                if (t !== 0) {
-                    if (dampingRatio < 1) {
-                        currentVelocity = calcGeneratorVelocity(resolveSpring, t, current);
-                    }
-                    else {
-                        currentVelocity = 0;
-                    }
+                let currentVelocity = 0;
+                if (dampingRatio < 1) {
+                    currentVelocity = t === 0 ? secondsToMilliseconds(initialVelocity) : calcGeneratorVelocity(resolveSpring, t, current);
                 }
                 const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
                 const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
@@ -2371,75 +2457,6 @@ var filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v)
         const functions = v.match(functionRegex);
         return functions ? functions.map(applyDefaultFilter).join(' ') : v;
     } });
-var int = Object.assign(Object.assign({}, number), { transform: Math.round });
-var numberValueTypes = {
-    // Border props
-    borderWidth: px,
-    borderTopWidth: px,
-    borderRightWidth: px,
-    borderBottomWidth: px,
-    borderLeftWidth: px,
-    borderRadius: px,
-    radius: px,
-    borderTopLeftRadius: px,
-    borderTopRightRadius: px,
-    borderBottomRightRadius: px,
-    borderBottomLeftRadius: px,
-    // Positioning props
-    width: px,
-    maxWidth: px,
-    height: px,
-    maxHeight: px,
-    size: px,
-    top: px,
-    right: px,
-    bottom: px,
-    left: px,
-    // Spacing props
-    padding: px,
-    paddingTop: px,
-    paddingRight: px,
-    paddingBottom: px,
-    paddingLeft: px,
-    margin: px,
-    marginTop: px,
-    marginRight: px,
-    marginBottom: px,
-    marginLeft: px,
-    // Transform props
-    rotate: degrees,
-    rotateX: degrees,
-    rotateY: degrees,
-    rotateZ: degrees,
-    scale,
-    scaleX: scale,
-    scaleY: scale,
-    scaleZ: scale,
-    skew: degrees,
-    skewX: degrees,
-    skewY: degrees,
-    distance: px,
-    translateX: px,
-    translateY: px,
-    translateZ: px,
-    x: px,
-    y: px,
-    z: px,
-    perspective: px,
-    transformPerspective: px,
-    opacity: alpha,
-    originX: progressPercentage,
-    originY: progressPercentage,
-    originZ: px,
-    // Misc
-    zIndex: int,
-    backgroundPositionX: px,
-    backgroundPositionY: px,
-    // SVG
-    fillOpacity: alpha,
-    strokeOpacity: alpha,
-    numOctaves: int,
-};
 var defaultValueTypes = Object.assign(Object.assign({}, numberValueTypes), { 
     // Color props
     color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 
@@ -2781,6 +2798,8 @@ var AcceleratedAnimation = class extends BaseAnimation {
         this.isStopped = true;
         if (this.state === 'idle')
             return;
+        this.resolveFinishedPromise();
+        this.updateFinishedPromise();
         const { resolved, } = this;
         if (!resolved)
             return;
@@ -2869,7 +2888,7 @@ var MotionValue = class {
      * @internal
      */
     constructor(init, options = {}) {
-        this.version = '11.3.9';
+        this.version = '11.3.23';
         this.canTrackVelocity = null;
         this.events = {};
         this.updateAndNotify = (v, render = true) => {
@@ -3127,43 +3146,6 @@ function motionValue(init, options) {
     return new MotionValue(init, options);
 }
 exports.motionValue = motionValue;
-var WillChangeMotionValue = class extends MotionValue {
-    constructor() {
-        super(...arguments);
-        this.output = [];
-        this.counts = /* @__PURE__ */ new Map();
-    }
-    add(name) {
-        const styleName = getWillChangeName(name);
-        if (!styleName)
-            return;
-        const prevCount = this.counts.get(styleName) || 0;
-        this.counts.set(styleName, prevCount + 1);
-        if (prevCount === 0) {
-            this.output.push(styleName);
-            this.update();
-        }
-        let hasRemoved = false;
-        return () => {
-            if (hasRemoved)
-                return;
-            hasRemoved = true;
-            const newCount = this.counts.get(styleName) - 1;
-            this.counts.set(styleName, newCount);
-            if (newCount === 0) {
-                removeItem(this.output, styleName);
-                this.update();
-            }
-        };
-    }
-    update() {
-        this.set(this.output.length ? this.output.join(', ') : 'auto');
-    }
-};
-function useWillChange() {
-    return useConstant(() => new WillChangeMotionValue('auto'));
-}
-exports.useWillChange = useWillChange;
 function resolveVariant(visualElement, definition, custom) {
     const props = visualElement.getProps();
     return resolveVariantFromProps(props, definition, custom !== void 0 ? custom : props.custom, visualElement);
@@ -3368,6 +3350,39 @@ function setTarget(visualElement, definition) {
 function getOptimisedAppearId(visualElement) {
     return visualElement.getProps()[optimizedAppearDataAttribute];
 }
+var WillChangeMotionValue = class extends MotionValue {
+    constructor() {
+        super(...arguments);
+        this.output = [];
+        this.counts = /* @__PURE__ */ new Map();
+    }
+    add(name) {
+        const styleName = getWillChangeName(name);
+        if (!styleName)
+            return;
+        const prevCount = this.counts.get(styleName) || 0;
+        this.counts.set(styleName, prevCount + 1);
+        if (prevCount === 0) {
+            this.output.push(styleName);
+            this.update();
+        }
+        let hasRemoved = false;
+        return () => {
+            if (hasRemoved)
+                return;
+            hasRemoved = true;
+            const newCount = this.counts.get(styleName) - 1;
+            this.counts.set(styleName, newCount);
+            if (newCount === 0) {
+                removeItem(this.output, styleName);
+                this.update();
+            }
+        };
+    }
+    update() {
+        this.set(this.output.length ? this.output.join(', ') : 'auto');
+    }
+};
 function isWillChangeMotionValue(value) {
     return Boolean(isMotionValue(value) && value.add);
 }
@@ -3404,10 +3419,10 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
         }
         const valueTransition = Object.assign({ delay: delay2, elapsed: 0 }, getValueTransition(transition || {}, key7));
         let isHandoff = false;
-        if (window.HandoffAppearAnimations) {
+        if (window.MotionHandoffAnimation) {
             const appearId = getOptimisedAppearId(visualElement);
             if (appearId) {
-                const elapsed = window.HandoffAppearAnimations(appearId, key7, value, frame);
+                const elapsed = window.MotionHandoffAnimation(appearId, key7, frame);
                 if (elapsed !== null) {
                     valueTransition.elapsed = elapsed;
                     isHandoff = true;
@@ -3486,9 +3501,7 @@ function animateVisualElement(visualElement, definition, options = {}) {
         animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
     }
     return animation.then(() => {
-        frame.postRender(() => {
-            visualElement.notify('AnimationComplete', definition);
-        });
+        visualElement.notify('AnimationComplete', definition);
     });
 }
 exports.animateVisualElement = animateVisualElement;
@@ -3853,7 +3866,7 @@ function usePresence() {
     const { isPresent: isPresent2, onExitComplete, register, } = context;
     const id4 = (0, react_7.useId)();
     (0, react_2.useEffect)(() => register(id4), []);
-    const safeToRemove = () => onExitComplete && onExitComplete(id4);
+    const safeToRemove = (0, react_5.useCallback)(() => onExitComplete && onExitComplete(id4), [id4, onExitComplete,]);
     return !isPresent2 && onExitComplete ? [false, safeToRemove,] : [true,];
 }
 exports.usePresence = usePresence;
@@ -3927,7 +3940,7 @@ function updateMotionValuesFromProps(element, next, prev) {
         if (isMotionValue(nextValue)) {
             element.addValue(key7, nextValue);
             if (false) {
-                warnOnce(nextValue.version === '11.3.9', `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.9 may not work as expected.`);
+                warnOnce(nextValue.version === '11.3.23', `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.23 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4418,41 +4431,34 @@ function isForcedMotionValue(key7, { layout: layout2, layoutId, }) {
     return transformProps.has(key7) || key7.startsWith('origin') ||
         (layout2 || layoutId !== void 0) && (!!scaleCorrectors[key7] || key7 === 'opacity');
 }
-var getValueAsType = (value, type) => {
-    return type && typeof value === 'number' ? type.transform(value) : value;
-};
 function buildHTMLStyles(state, latestValues, transformTemplate2) {
-    const { style, vars, transform: transform2, transformOrigin, } = state;
+    const { style, vars, transformOrigin, } = state;
     let hasTransform2 = false;
     let hasTransformOrigin = false;
-    let transformIsNone = true;
     for (const key7 in latestValues) {
         const value = latestValues[key7];
-        if (isCSSVariableName(key7)) {
-            vars[key7] = value;
-            continue;
-        }
-        const valueType = numberValueTypes[key7];
-        const valueAsType = getValueAsType(value, valueType);
         if (transformProps.has(key7)) {
             hasTransform2 = true;
-            transform2[key7] = valueAsType;
-            if (!transformIsNone)
-                continue;
-            if (value !== (valueType.default || 0))
-                transformIsNone = false;
+            continue;
         }
-        else if (key7.startsWith('origin')) {
-            hasTransformOrigin = true;
-            transformOrigin[key7] = valueAsType;
+        else if (isCSSVariableName(key7)) {
+            vars[key7] = value;
+            continue;
         }
         else {
-            style[key7] = valueAsType;
+            const valueAsType = getValueAsType(value, numberValueTypes[key7]);
+            if (key7.startsWith('origin')) {
+                hasTransformOrigin = true;
+                transformOrigin[key7] = valueAsType;
+            }
+            else {
+                style[key7] = valueAsType;
+            }
         }
     }
     if (!latestValues.transform) {
         if (hasTransform2 || transformTemplate2) {
-            style.transform = buildTransform(state.transform, transformIsNone, transformTemplate2);
+            style.transform = buildTransform(latestValues, state.transform, transformTemplate2);
         }
         else if (style.transform) {
             style.transform = 'none';
@@ -6167,7 +6173,7 @@ function resetDistortingTransform(key7, visualElement, values, sharedAnimationVa
         }
     }
 }
-function isOptimisedAppearTree(projectionNode) {
+function isOptimisedTransformAnimationInTree(projectionNode) {
     projectionNode.hasCheckedOptimisedAppear = true;
     if (projectionNode.root === projectionNode)
         return false;
@@ -6175,11 +6181,11 @@ function isOptimisedAppearTree(projectionNode) {
     if (!visualElement) {
         return false;
     }
-    else if (getOptimisedAppearId(visualElement)) {
+    else if (window.MotionHasOptimisedTransformAnimation(getOptimisedAppearId(visualElement))) {
         return true;
     }
     else if (projectionNode.parent && !projectionNode.parent.hasCheckedOptimisedAppear) {
-        return isOptimisedAppearTree(projectionNode.parent);
+        return isOptimisedTransformAnimationInTree(projectionNode.parent);
     }
     else {
         return false;
@@ -6372,8 +6378,8 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
                 this.options.onExitComplete && this.options.onExitComplete();
                 return;
             }
-            if (window.HandoffCancelAllAnimations && isOptimisedAppearTree(this)) {
-                window.HandoffCancelAllAnimations();
+            if (window.MotionHandoffCancelAll && isOptimisedTransformAnimationInTree(this)) {
+                window.MotionHandoffCancelAll();
             }
             !this.root.isUpdating && this.root.startUpdate();
             if (this.isLayoutDirty)
@@ -6483,11 +6489,13 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
                 needsMeasurement = false;
             }
             if (needsMeasurement) {
+                const isRoot = checkIsScrollRoot(this.instance);
                 this.scroll = {
                     animationId: this.root.animationId,
                     phase,
-                    isRoot: checkIsScrollRoot(this.instance),
+                    isRoot,
                     offset: measureScroll(this.instance),
+                    wasRoot: this.scroll ? this.scroll.isRoot : isRoot,
                 };
             }
         }
@@ -6521,31 +6529,35 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
             };
         }
         measurePageBox() {
+            var _a;
             const { visualElement, } = this.options;
             if (!visualElement)
                 return createBox();
             const box = visualElement.measureViewportBox();
-            const { scroll: scroll2, } = this.root;
-            if (scroll2) {
-                translateAxis(box.x, scroll2.offset.x);
-                translateAxis(box.y, scroll2.offset.y);
+            const wasInScrollRoot = ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) ||
+                this.path.some(checkNodeWasScrollRoot);
+            if (!wasInScrollRoot) {
+                const { scroll: scroll2, } = this.root;
+                if (scroll2) {
+                    translateAxis(box.x, scroll2.offset.x);
+                    translateAxis(box.y, scroll2.offset.y);
+                }
             }
             return box;
         }
         removeElementScroll(box) {
+            var _a;
             const boxWithoutScroll = createBox();
             copyBoxInto(boxWithoutScroll, box);
+            if ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) {
+                return boxWithoutScroll;
+            }
             for (let i = 0; i < this.path.length; i++) {
                 const node = this.path[i];
                 const { scroll: scroll2, options, } = node;
                 if (node !== this.root && scroll2 && options.layoutScroll) {
-                    if (scroll2.isRoot) {
+                    if (scroll2.wasRoot) {
                         copyBoxInto(boxWithoutScroll, box);
-                        const { scroll: rootScroll, } = this.root;
-                        if (rootScroll) {
-                            translateAxis(boxWithoutScroll.x, -rootScroll.offset.x);
-                            translateAxis(boxWithoutScroll.y, -rootScroll.offset.y);
-                        }
                     }
                     translateAxis(boxWithoutScroll.x, scroll2.offset.x);
                     translateAxis(boxWithoutScroll.y, scroll2.offset.y);
@@ -7221,6 +7233,10 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout2) {
     return animationType === 'position' ||
         animationType === 'preserve-aspect' && !isNear(aspectRatio(snapshot), aspectRatio(layout2), 0.2);
 }
+function checkNodeWasScrollRoot(node) {
+    var _a;
+    return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
+}
 var DocumentProjectionNode = createProjectionNode2({
     attachResizeListener: (ref, notify2) => addDomEvent(ref, 'resize', notify2),
     measureScroll: () => ({
@@ -7377,30 +7393,6 @@ function createDomMotionComponent(key7) {
 exports.createDomMotionComponent = createDomMotionComponent;
 var m = createMotionProxy(createDomMotionConfig);
 exports.m = m;
-function useIsMounted() {
-    const isMounted = (0, react_4.useRef)(false);
-    useIsomorphicLayoutEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-    return isMounted;
-}
-function useForceUpdate() {
-    const isMounted = useIsMounted();
-    const [forcedRenderCount, setForcedRenderCount,] = (0, react_10.useState)(0);
-    const forceRender = (0, react_5.useCallback)(() => {
-        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
-    }, [forcedRenderCount,]);
-    const deferredForceRender = (0, react_5.useCallback)(() => frame.postRender(forceRender), [forceRender,]);
-    return [deferredForceRender, forcedRenderCount,];
-}
-exports.useForceUpdate = useForceUpdate;
-function useUnmountEffect(callback) {
-    return (0, react_2.useEffect)(() => () => callback(), []);
-}
-exports.useUnmountEffect = useUnmountEffect;
 var PopChildMeasure = class extends React2.Component {
     getSnapshotBeforeUpdate(prevProps) {
         const element = this.props.childRef.current;
@@ -7512,12 +7504,6 @@ function newChildrenMap() {
     return /* @__PURE__ */ new Map();
 }
 var getChildKey = (child) => child.key || '';
-function updateChildLookup(children, allChildren) {
-    children.forEach((child) => {
-        const key7 = getChildKey(child);
-        allChildren.set(key7, child);
-    });
-}
 function onlyElements(children) {
     const filtered = [];
     react_11.Children.forEach(children, (child) => {
@@ -7526,104 +7512,84 @@ function onlyElements(children) {
     });
     return filtered;
 }
-var AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = 'sync', }) => {
+var AnimatePresence = ({ children, exitBeforeEnter, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = 'sync', }) => {
     invariant(!exitBeforeEnter, 'Replace exitBeforeEnter with mode=\'wait\'');
-    const forceRender = (0, react_3.useContext)(LayoutGroupContext).forceRender || useForceUpdate()[0];
-    const isMounted = useIsMounted();
-    const filteredChildren = onlyElements(children);
-    let childrenToRender = filteredChildren;
-    const exitingChildren = (0, react_4.useRef)(/* @__PURE__ */ new Map()).current;
-    const presentChildren = (0, react_4.useRef)(childrenToRender);
-    const allChildren = (0, react_4.useRef)(/* @__PURE__ */ new Map()).current;
+    const presentChildren = (0, react_6.useMemo)(() => onlyElements(children), [children,]);
+    const presentKeys = presentChildren.map(getChildKey);
     const isInitialRender = (0, react_4.useRef)(true);
+    const pendingPresentChildren = (0, react_4.useRef)(presentChildren);
+    const exitComplete = useConstant(() => /* @__PURE__ */ new Map());
+    const [diffedChildren, setDiffedChildren,] = (0, react_10.useState)(presentChildren);
+    const [renderedChildren, setRenderedChildren,] = (0, react_10.useState)(presentChildren);
     useIsomorphicLayoutEffect(() => {
         isInitialRender.current = false;
-        updateChildLookup(filteredChildren, allChildren);
-        presentChildren.current = childrenToRender;
-    });
-    useUnmountEffect(() => {
-        isInitialRender.current = true;
-        allChildren.clear();
-        exitingChildren.clear();
-    });
-    if (isInitialRender.current) {
-        return (0, jsx_runtime_1.jsx)(react_8.Fragment, {
-            children: childrenToRender.map((child) => (0, jsx_runtime_1.jsx)(PresenceChild, {
-                isPresent: true,
-                initial: initial ? void 0 : false,
-                presenceAffectsLayout,
-                mode,
-                children: child,
-            }, getChildKey(child))),
-        });
-    }
-    childrenToRender = [...childrenToRender,];
-    const presentKeys = presentChildren.current.map(getChildKey);
-    const targetKeys = filteredChildren.map(getChildKey);
-    const numPresent = presentKeys.length;
-    for (let i = 0; i < numPresent; i++) {
-        const key7 = presentKeys[i];
-        if (targetKeys.indexOf(key7) === -1 && !exitingChildren.has(key7)) {
-            exitingChildren.set(key7, void 0);
+        pendingPresentChildren.current = presentChildren;
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const key7 = getChildKey(renderedChildren[i]);
+            if (!presentKeys.includes(key7)) {
+                if (exitComplete.get(key7) !== true) {
+                    exitComplete.set(key7, false);
+                }
+            }
+            else {
+                exitComplete.delete(key7);
+            }
+        }
+    }, [renderedChildren, presentKeys.length, presentKeys.join('-'),]);
+    const exitingChildren = [];
+    if (presentChildren !== diffedChildren) {
+        let nextChildren = [...presentChildren,];
+        for (let i = 0; i < renderedChildren.length; i++) {
+            const child = renderedChildren[i];
+            const key7 = getChildKey(child);
+            if (!presentKeys.includes(key7)) {
+                nextChildren.splice(i, 0, child);
+                exitingChildren.push(child);
+            }
         }
+        if (mode === 'wait' && exitingChildren.length) {
+            nextChildren = exitingChildren;
+        }
+        setRenderedChildren(onlyElements(nextChildren));
+        setDiffedChildren(presentChildren);
+        return;
     }
-    if (mode === 'wait' && exitingChildren.size) {
-        childrenToRender = [];
+    if (false) {
+        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
     }
-    exitingChildren.forEach((component, key7) => {
-        if (targetKeys.indexOf(key7) !== -1)
-            return;
-        const child = allChildren.get(key7);
-        if (!child)
-            return;
-        const insertionIndex = presentKeys.indexOf(key7);
-        let exitingComponent = component;
-        if (!exitingComponent) {
+    const { forceRender, } = (0, react_3.useContext)(LayoutGroupContext);
+    return (0, jsx_runtime_1.jsx)(react_8.Fragment, {
+        children: renderedChildren.map((child) => {
+            const key7 = getChildKey(child);
+            const isPresent2 = presentChildren === renderedChildren || presentKeys.includes(key7);
             const onExit = () => {
-                exitingChildren.delete(key7);
-                const leftOverKeys = Array.from(allChildren.keys()).filter((childKey) => !targetKeys.includes(childKey));
-                leftOverKeys.forEach((leftOverKey) => allChildren.delete(leftOverKey));
-                presentChildren.current = filteredChildren.filter((presentChild) => {
-                    const presentChildKey = getChildKey(presentChild);
-                    return (
-                    // filter out the node exiting
-                    presentChildKey === key7 ||
-                        // filter out the leftover children
-                        leftOverKeys.includes(presentChildKey));
+                if (exitComplete.has(key7)) {
+                    exitComplete.set(key7, true);
+                }
+                else {
+                    return;
+                }
+                let isEveryExitComplete = true;
+                exitComplete.forEach((isExitComplete) => {
+                    if (!isExitComplete)
+                        isEveryExitComplete = false;
                 });
-                if (!exitingChildren.size) {
-                    if (isMounted.current === false)
-                        return;
-                    forceRender();
+                if (isEveryExitComplete) {
+                    forceRender === null || forceRender === void 0 ? void 0 : forceRender();
+                    setRenderedChildren(pendingPresentChildren.current);
                     onExitComplete && onExitComplete();
                 }
             };
-            exitingComponent = (0, jsx_runtime_1.jsx)(PresenceChild, {
-                isPresent: false,
-                onExitComplete: onExit,
-                custom,
+            return (0, jsx_runtime_1.jsx)(PresenceChild, {
+                isPresent: isPresent2,
+                initial: !isInitialRender.current || initial ? void 0 : false,
+                custom: isPresent2 ? void 0 : custom,
                 presenceAffectsLayout,
                 mode,
+                onExitComplete: isPresent2 ? void 0 : onExit,
                 children: child,
-            }, getChildKey(child));
-            exitingChildren.set(key7, exitingComponent);
-        }
-        childrenToRender.splice(insertionIndex, 0, exitingComponent);
-    });
-    childrenToRender = childrenToRender.map((child) => {
-        const key7 = child.key;
-        return exitingChildren.has(key7) ? child : (0, jsx_runtime_1.jsx)(PresenceChild, {
-            isPresent: true,
-            presenceAffectsLayout,
-            mode,
-            children: child,
-        }, getChildKey(child));
-    });
-    if (false) {
-        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
-    }
-    return (0, jsx_runtime_1.jsx)(react_8.Fragment, {
-        children: exitingChildren.size ? childrenToRender : childrenToRender.map((child) => (0, react_11.cloneElement)(child)),
+            }, key7);
+        }),
     });
 };
 exports.AnimatePresence = AnimatePresence;
@@ -7672,6 +7638,26 @@ function isLazyBundle(features) {
 var DeprecatedLayoutGroupContext = (0, react_1.createContext)(null);
 exports.DeprecatedLayoutGroupContext = DeprecatedLayoutGroupContext;
 exports.LayoutGroupContext = DeprecatedLayoutGroupContext;
+function useIsMounted() {
+    const isMounted = (0, react_4.useRef)(false);
+    useIsomorphicLayoutEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+function useForceUpdate() {
+    const isMounted = useIsMounted();
+    const [forcedRenderCount, setForcedRenderCount,] = (0, react_10.useState)(0);
+    const forceRender = (0, react_5.useCallback)(() => {
+        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
+    }, [forcedRenderCount,]);
+    const deferredForceRender = (0, react_5.useCallback)(() => frame.postRender(forceRender), [forceRender,]);
+    return [deferredForceRender, forcedRenderCount,];
+}
+exports.useForceUpdate = useForceUpdate;
 var notify = (node) => !node.isLayoutDirty && node.willUpdate(false);
 function nodeGroup() {
     const nodes = /* @__PURE__ */ new Set();
@@ -7876,6 +7862,8 @@ var Reorder = {
     Item,
 };
 exports.Reorder = Reorder;
+var domMin = Object.assign({ renderer: createDomVisualElement }, animations);
+exports.domMin = domMin;
 var domAnimation = Object.assign(Object.assign({ renderer: createDomVisualElement }, animations), gestureAnimations);
 exports.domAnimation = domAnimation;
 var domMax = Object.assign(Object.assign(Object.assign({}, domAnimation), drag), layout);
@@ -7896,10 +7884,15 @@ function useMotionTemplate(fragments, ...values) {
     return useCombineMotionValues(values.filter(isMotionValue), buildValue);
 }
 exports.useMotionTemplate = useMotionTemplate;
+function toNumber(v) {
+    if (typeof v === 'number')
+        return v;
+    return parseFloat(v);
+}
 function useSpring(source, config = {}) {
     const { isStatic, } = (0, react_3.useContext)(MotionConfigContext);
     const activeSpringAnimation = (0, react_4.useRef)(null);
-    const value = useMotionValue(isMotionValue(source) ? source.get() : source);
+    const value = useMotionValue(isMotionValue(source) ? toNumber(source.get()) : source);
     const latestValue = (0, react_4.useRef)(value.get());
     const latestSetter = (0, react_4.useRef)(() => { });
     const startAnimation2 = () => {
@@ -7927,7 +7920,7 @@ function useSpring(source, config = {}) {
     }, [JSON.stringify(config),]);
     useIsomorphicLayoutEffect(() => {
         if (isMotionValue(source)) {
-            return source.on('change', (v) => value.set(parseFloat(v)));
+            return source.on('change', (v) => value.set(toNumber(v)));
         }
     }, [value,]);
     return value;
@@ -8414,6 +8407,10 @@ function useTime() {
     return time2;
 }
 exports.useTime = useTime;
+function useWillChange() {
+    return useConstant(() => new WillChangeMotionValue('auto'));
+}
+exports.useWillChange = useWillChange;
 function useReducedMotion() {
     !hasReducedMotionListener.current && initPrefersReducedMotion();
     const [shouldReduceMotion,] = (0, react_10.useState)(prefersReducedMotion.current);
@@ -8503,6 +8500,10 @@ function animationControls() {
     return controls;
 }
 exports.animationControls = animationControls;
+function useUnmountEffect(callback) {
+    return (0, react_2.useEffect)(() => () => callback(), []);
+}
+exports.useUnmountEffect = useUnmountEffect;
 var wrap = (min, max, v) => {
     const rangeSize = max - min;
     return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
@@ -8973,8 +8974,9 @@ function useResetProjection() {
 exports.useResetProjection = useResetProjection;
 var appearStoreId = (id4, value) => `${id4}: ${value}`;
 var appearAnimationStore = /* @__PURE__ */ new Map();
+var elementsWithAppearAnimations = /* @__PURE__ */ new Set();
 var handoffFrameTime;
-function handoffOptimizedAppearAnimation(elementId, valueName, _value, frame2) {
+function handoffOptimizedAppearAnimation(elementId, valueName, frame2) {
     const optimisedValueName = transformProps.has(valueName) ? 'transform' : valueName;
     const storeId = appearStoreId(elementId, optimisedValueName);
     const optimisedAnimation = appearAnimationStore.get(storeId);
@@ -8982,25 +8984,14 @@ function handoffOptimizedAppearAnimation(elementId, valueName, _value, frame2) {
         return null;
     }
     const { animation, startTime, } = optimisedAnimation;
-    const cancelAnimation = () => {
+    if (startTime === null || window.MotionHandoffIsComplete) {
         appearAnimationStore.delete(storeId);
-        if (frame2) {
-            frame2.render(() => frame2.render(() => {
-                try {
-                    animation.cancel();
-                }
-                catch (error) { }
-            }));
-        }
-        else {
+        frame2.render(() => frame2.render(() => {
             try {
                 animation.cancel();
             }
             catch (error) { }
-        }
-    };
-    if (startTime === null || window.HandoffComplete) {
-        cancelAnimation();
+        }));
         return null;
     }
     else {
@@ -9013,14 +9004,14 @@ function handoffOptimizedAppearAnimation(elementId, valueName, _value, frame2) {
 var startFrameTime;
 var readyAnimation;
 function startOptimizedAppearAnimation(element, name, keyframes2, options, onReady) {
-    if (window.HandoffComplete) {
-        window.HandoffAppearAnimations = void 0;
+    if (window.MotionHandoffIsComplete) {
+        window.MotionHandoffAnimation = void 0;
         return;
     }
     const id4 = element.dataset[optimizedAppearDataId];
     if (!id4)
         return;
-    window.HandoffAppearAnimations = handoffOptimizedAppearAnimation;
+    window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
     const storeId = appearStoreId(id4, name);
     if (!readyAnimation) {
         readyAnimation = animateStyle(element, name, [keyframes2[0], keyframes2[0],], /**
@@ -9034,15 +9025,18 @@ function startOptimizedAppearAnimation(element, name, keyframes2, options, onRea
             animation: readyAnimation,
             startTime: null,
         });
-        if (!window.HandoffCancelAllAnimations) {
-            window.HandoffCancelAllAnimations = () => {
-                appearAnimationStore.forEach(({ animation, }) => {
+        window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
+        window.MotionHandoffCancelAll = () => {
+            appearAnimationStore.forEach(({ animation, }, animationId) => {
+                if (animationId.endsWith('transform')) {
                     animation.cancel();
-                });
-                appearAnimationStore.clear();
-                window.HandoffCancelAllAnimations = void 0;
-            };
-        }
+                    appearAnimationStore.delete(animationId);
+                }
+            });
+            window.MotionHandoffCancelAll = void 0;
+        };
+        window.MotionHasOptimisedAnimation = (elementId) => Boolean(elementId && elementsWithAppearAnimations.has(elementId));
+        window.MotionHasOptimisedTransformAnimation = (elementId) => Boolean(elementId && appearAnimationStore.has(appearStoreId(elementId, 'transform')));
     }
     const startAnimation2 = () => {
         readyAnimation.cancel();
@@ -9058,6 +9052,7 @@ function startOptimizedAppearAnimation(element, name, keyframes2, options, onRea
         if (onReady)
             onReady(appearAnimation);
     };
+    elementsWithAppearAnimations.add(id4);
     if (readyAnimation.ready) {
         readyAnimation.ready.then(startAnimation2).catch(noop);
     }
@@ -9225,12 +9220,13 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     return acc;
 }, {});
 exports.cancelSync = cancelSync;
-// https :https://app.framerstatic.com/framer.V4LTAYQT.js
+// https :https://app.framerstatic.com/framer.LMS2FZ32.js
 const react_12 = __importDefault(require("react"));
 const react_13 = require("react");
 const react_14 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
 const react_15 = require("react");
+const react_16 = require("react");
 var require_hsluv = __commonJS({
     '../../../node_modules/hsluv/dist/hsluv.cjs'(exports) {
         'use strict';
@@ -28254,9 +28250,9 @@ function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId, i
                 const visualElement = visualElementStore.get(ref.current);
                 if (visualElement)
                     visualElement.setBaseTarget(key7, value);
-                const handoff = isString22(appearId) && !(motionValue2 == null ? void 0 : motionValue2.hasAnimated) && safeWindow.HandoffAppearAnimations
+                const handoff = isString22(appearId) && !(motionValue2 == null ? void 0 : motionValue2.hasAnimated) && safeWindow.MotionHandoffAnimation
                     ? {
-                        elapsed: safeWindow.HandoffAppearAnimations(appearId, key7, motionValue2, frame),
+                        elapsed: safeWindow.MotionHandoffAnimation(appearId, key7, frame),
                     }
                     : void 0;
                 if (instant) {
@@ -30788,15 +30784,23 @@ function stateCanSubmitForm(state) {
 function preventDefault(e) {
     e.preventDefault();
 }
-function openExternalLink(link) {
-    if (!safeWindow)
-        return;
+function openExternalLinkInCurrentTab(link, formRef) {
     const href = isValidURL(link, false) ? link : `https://${link}`;
-    safeWindow.open(href, '_blank');
+    const linkElement = document.createElement('a');
+    linkElement.href = href;
+    linkElement.target = '_self';
+    linkElement.style.display = 'none';
+    if (!('current' in formRef && formRef.current))
+        return;
+    formRef.current.appendChild(linkElement);
+    linkElement.click();
+    linkElement.remove();
 }
 var FormContext = react_12.default.createContext(void 0);
-var FormContainer = /* @__PURE__ */ react_12.default.forwardRef((_j, ref) => {
+var FormContainer = /* @__PURE__ */ react_12.default.forwardRef((_j, forwardedRef) => {
     var { action, children, redirectUrl, onSuccess, onError, onLoading } = _j, props = __rest(_j, ["action", "children", "redirectUrl", "onSuccess", "onError", "onLoading"]);
+    const fallbackRef = react_12.default.useRef(null);
+    const ref = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : fallbackRef;
     const router = useRouter();
     const currentRoute = useCurrentRoute();
     const implicitPathVariables = useImplicitPathVariables();
@@ -30821,7 +30825,7 @@ var FormContainer = /* @__PURE__ */ react_12.default.forwardRef((_j, ref) => {
             if (isString22(link)) {
                 const matchingRoute2 = findMatchingRouteAttributesForResolvedPath(router, link, implicitPathVariables);
                 if (!matchingRoute2) {
-                    openExternalLink(link);
+                    openExternalLinkInCurrentTab(link, ref);
                     return;
                 }
                 const { routeId: routeId2, elementId: elementId2, pathVariables: pathVariables2, } = matchingRoute2;
@@ -38296,7 +38300,7 @@ function processRichTextChildren(element, stylesPresetsClassNames, plainText, an
             children = [anchorLink,];
         }
     }
-    return (0, react_11.cloneElement)(element, props, ...children);
+    return (0, react_16.cloneElement)(element, props, ...children);
 }
 function generateHeadingSlug(children, slugCounters) {
     var _j;
@@ -40540,7 +40544,7 @@ var package_default = {
         yargs: '^17.6.2',
     },
     peerDependencies: {
-        'framer-motion': '11.3.9',
+        'framer-motion': '11.3.23',
         react: '^18.2.0',
         'react-dom': '^18.2.0',
     },