unframer 2.25.1 → 2.25.2

package/esm/framer.js

@@ -10390,7 +10390,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2, } = {}
         return startDelay + delay2;
     };
 }
-// /:https://app.framerstatic.com/framer.V5AO5VTZ.mjs
+// /:https://app.framerstatic.com/framer.ZDVTUSJ2.mjs
 import { lazy as ReactLazy, } from 'react';
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -11619,49 +11619,6 @@ function getRouteElementId(route, hash2) {
     }
     return void 0;
 }
-function yieldToMain(options) {
-    if ('scheduler' in window) {
-        if ('yield' in scheduler)
-            return scheduler.yield(options);
-        if ('postTask' in scheduler)
-            return scheduler.postTask(() => { }, options);
-    }
-    if ((options == null ? void 0 : options.priority) === 'user-blocking') {
-        return Promise.resolve();
-    }
-    return new Promise((resolve) => {
-        setTimeout(resolve);
-    });
-}
-async function yieldBefore(fn, options) {
-    await yieldToMain(options);
-    return fn();
-}
-function interactionResponse(options) {
-    return new Promise((resolve) => {
-        setTimeout(resolve, 100);
-        requestAnimationFrame(() => {
-            void yieldBefore(resolve, options);
-        });
-    });
-}
-function useAfterPaintEffect(effectFn, deps, opts, useEffectFn = useLayoutEffect) {
-    useEffectFn(() => {
-        const runAfterPaint = async (fn) => {
-            await interactionResponse(opts);
-            return fn();
-        };
-        const runPromise = runAfterPaint(effectFn);
-        return () => {
-            void (async () => {
-                const cleanup = await runPromise;
-                if (!cleanup)
-                    return;
-                void runAfterPaint(cleanup);
-            })();
-        };
-    }, deps);
-}
 var EMPTY_ARRAY = [];
 function monitorINPRelatedInputs(signal) {
     const inpRelatedInputs = ['pointerdown', 'pointerup', 'keydown', 'keyup',];
@@ -11743,38 +11700,6 @@ supportsRequestIdleCallback ? window.requestIdleCallback : setTimeout)();
 function encodeSVGForCSS(svg) {
     return `url('data:image/svg+xml,${svg.replaceAll('#', '%23').replaceAll('\'', '%27')}')`;
 }
-var shouldPreloadBasedOnUA = !isBot;
-function useRoutePreloader(routeIds, enabled = true) {
-    const { getRoute, } = useRouter();
-    useEffect(() => {
-        if (!getRoute || !enabled || !shouldPreloadBasedOnUA)
-            return;
-        for (const routeId of routeIds) {
-            void preloadRoute(getRoute(routeId));
-        }
-    }, [routeIds, getRoute, enabled,]);
-}
-async function preloadRoute(route) {
-    if (!shouldPreloadBasedOnUA || !route)
-        return;
-    const component = route.page;
-    if (!component || !isLazyComponentType(component))
-        return;
-    await yieldToMain();
-    try {
-        await component.preload();
-    }
-    catch (e) {
-        if (false)
-            console.warn('Preload failed', route, e);
-    }
-}
-function useRouteHandler(routeId, preload = false, elementId) {
-    const { navigate, } = useRouter();
-    useRoutePreloader([routeId,], preload);
-    const handler = React4.useCallback(() => navigate == null ? void 0 : navigate(routeId, elementId), [navigate, elementId, routeId,]);
-    return handler;
-}
 var mockWindow = {
     addEventListener: () => { },
     removeEventListener: () => { },
@@ -11833,6 +11758,107 @@ var mockWindow = {
     __framer_events: [],
 };
 var safeWindow = !isWindow ? mockWindow : window;
+var canUseYield = /* @__PURE__ */ (() => safeWindow.scheduler && 'yield' in safeWindow.scheduler)();
+var canUsePostTask = /* @__PURE__ */ (() => safeWindow.scheduler && 'postTask' in safeWindow.scheduler)();
+var pendingResolvers = /* @__PURE__ */ new Set();
+function resolvePendingPromises() {
+    for (const resolve of pendingResolvers)
+        resolve();
+    pendingResolvers.clear();
+}
+function yieldUnlessUrgent(options) {
+    return new Promise((resolve) => {
+        pendingResolvers.add(resolve);
+        if (document.hidden) {
+            resolvePendingPromises();
+            return;
+        }
+        document.addEventListener('visibilitychange', resolvePendingPromises);
+        document.addEventListener('pagehide', resolvePendingPromises);
+        frame.read(() => {
+            const resolveFn = () => {
+                var _a;
+                pendingResolvers.delete(resolve);
+                if ((_a = options == null ? void 0 : options.signal) == null ? void 0 : _a.aborted)
+                    return;
+                resolve();
+            };
+            void schedulerYield(options).then(resolveFn);
+        });
+        return;
+    });
+}
+function interactionResponse(options) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, 100);
+        frame.read(() => {
+            void schedulerYield(options).then(resolve);
+        });
+    });
+}
+function schedulerYield(options) {
+    const priority = options == null ? void 0 : options.priority;
+    const canUseModernAPI = canUseYield || canUsePostTask;
+    if (!canUseModernAPI) {
+        if (priority === 'user-blocking') {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            setTimeout(resolve, priority === 'background' ? 1 : 0);
+        });
+    }
+    if (priority === 'background') {
+        return new Promise((resolve) => {
+            setTimeout(resolve, 1);
+        });
+    }
+    if (canUseYield) {
+        return safeWindow.scheduler.yield(options).catch(noop2);
+    }
+    return safeWindow.scheduler.postTask(() => { }, options).catch(noop2);
+}
+function yieldToMain(options) {
+    const { continueAfter, ensureContinueBeforeUnload, ...schedulerOptions } = options ?? {};
+    if (ensureContinueBeforeUnload) {
+        return yieldUnlessUrgent(schedulerOptions);
+    }
+    if (continueAfter === 'paint') {
+        return interactionResponse(schedulerOptions);
+    }
+    return schedulerYield(schedulerOptions);
+}
+var shouldPreloadBasedOnUA = !isBot;
+function useRoutePreloader(routeIds, enabled = true) {
+    const { getRoute, } = useRouter();
+    useEffect(() => {
+        if (!getRoute || !enabled || !shouldPreloadBasedOnUA)
+            return;
+        for (const routeId of routeIds) {
+            void preloadRoute(getRoute(routeId));
+        }
+    }, [routeIds, getRoute, enabled,]);
+}
+async function preloadRoute(route) {
+    if (!shouldPreloadBasedOnUA || !route)
+        return;
+    const component = route.page;
+    if (!component || !isLazyComponentType(component))
+        return;
+    await yieldToMain();
+    try {
+        await component.preload();
+    }
+    catch (e) {
+        if (false)
+            console.warn('Preload failed', route, e);
+    }
+}
+function useRouteHandler(routeId, preload = false, elementId) {
+    const { navigate, } = useRouter();
+    useRoutePreloader([routeId,], preload);
+    const handler = React4.useCallback(() => navigate == null ? void 0 : navigate(routeId, elementId), [navigate, elementId, routeId,]);
+    return handler;
+}
 var timezone;
 var visitorLocale;
 function setTimezoneAndLocaleForTracking() {
@@ -12576,6 +12602,26 @@ var announceNavigation = () => {
         announceDiv.textContent = document.title;
     }, 60);
 };
+function useAfterPaintEffect(effectFn, deps, options, useEffectFn = useLayoutEffect) {
+    useEffectFn(() => {
+        const runAfterPaint = async (fn) => {
+            await yieldToMain({
+                ...options,
+                continueAfter: 'paint',
+            });
+            return fn();
+        };
+        const runPromise = runAfterPaint(effectFn);
+        return () => {
+            void (async () => {
+                const cleanup = await runPromise;
+                if (!cleanup)
+                    return;
+                void runAfterPaint(cleanup);
+            })();
+        };
+    }, deps);
+}
 function useMonitorNextPaintAfterRender(label) {
     const resolveHasPainted = useRef3(void 0);
     useAfterPaintEffect(() => {
@@ -13328,7 +13374,7 @@ function useMarkSuspenseEffectsStart() {
             wasInBackground = true;
             return;
         }
-        requestAnimationFrame(() => {
+        frame.read(() => {
             hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.requestAnimationFrame.markStart();
             hydrationMarker == null ? void 0 : hydrationMarker.unattributedHydrationOverhead.measure();
         });
@@ -13349,9 +13395,9 @@ function useMarkSuspenseEffectEnd() {
         hydrationMarker == null ? void 0 : hydrationMarker.useLayoutEffects.markEnd();
         if (wasInBackground || document.visibilityState !== 'visible')
             return;
-        requestAnimationFrame(() => {
+        frame.read(() => {
             hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.requestAnimationFrame.markEnd();
-            void yieldBefore(() => {
+            void yieldToMain().then(() => {
                 hydrationMarker == null ? void 0 : hydrationMarker.browserRendering.layoutStylePaint.markEnd();
             });
         });
@@ -26146,7 +26192,7 @@ function collectBoxShadowsForProps(props, style2) {
         return;
     style2.boxShadow = boxShadow;
 }
-function shadowForShape(boxShadows, rect, shapeId, fillAlpha, strokeAlpha, strokeWidth, strokeClipId, svgStrokeAttributes) {
+function shadowForShape(boxShadows, rect, shapeId, strokeAlpha, strokeWidth, strokeClipId, svgStrokeAttributes) {
     const definition = [];
     let outsetElement = null;
     let insetElement = null;
@@ -26195,8 +26241,8 @@ function shadowForShape(boxShadows, rect, shapeId, fillAlpha, strokeAlpha, strok
             miter = 4;
         let shadowRect = Rect.merge(...shadowRects);
         shadowRect = Rect.inflate(shadowRect, (expandStrokeWidth * miter / 2 + maxBlur) * 1.1);
-        const width = rect.width + (strokeWidth ? strokeWidth / 2 : 0.1);
-        const height = rect.height + (strokeWidth ? strokeWidth / 2 : 0.1);
+        const width = rect.width + (strokeWidth ? strokeWidth / 2 : 0);
+        const height = rect.height + (strokeWidth ? strokeWidth / 2 : 0);
         const filterX = shadowRect.x / width * 100;
         const filterY = shadowRect.y / height * 100;
         const filterWidth = shadowRect.width / width * 100;
@@ -26243,7 +26289,6 @@ function shadowForShape(boxShadows, rect, shapeId, fillAlpha, strokeAlpha, strok
             children: /* @__PURE__ */ jsx3('use', {
                 ...svgStrokeAttributes,
                 fill: 'black',
-                fillOpacity: fillAlpha <= 0 ? 0 : 1,
                 stroke: 'black',
                 strokeOpacity: strokeAlpha <= 0 ? 0 : 1,
                 strokeWidth: strokeAlpha > 0 ? strokeWidth : 0,
@@ -26321,17 +26366,12 @@ function shadowForShape(boxShadows, rect, shapeId, fillAlpha, strokeAlpha, strok
 }
 function outerShadowElements(shapeID, shadow, index) {
     const shadowKey = shapeID.add('_outer_shadow' + index);
-    const offsetResultId = shadowKey.add('offset').id;
-    const blurResultId = shadowKey.add('blur').id;
-    const matrixResultId = shadowKey.add('matrix').id;
     const filterElements = /* @__PURE__ */ jsx3(OuterShadowFilterElements, {
         shadow,
-        blurId: blurResultId,
-        offsetId: offsetResultId,
-        matrixId: matrixResultId,
+        shadowKey,
     }, shadowKey.id + '-filters');
     const mergeElement = /* @__PURE__ */ jsx3('feMergeNode', {
-        in: matrixResultId,
+        in: shadowKey.id,
     }, shadowKey.id + '-merge');
     return {
         filterElements,
@@ -26339,13 +26379,10 @@ function outerShadowElements(shapeID, shadow, index) {
     };
 }
 var OuterShadowFilterElements = (props) => {
-    const { shadow, blurId, offsetId, matrixId, } = props;
-    const color2 = shadow.color;
-    const rgb = ConvertColor.toRgb(color2);
-    const r = roundedNumberString(rgb.r / 255, 3);
-    const g = roundedNumberString(rgb.g / 255, 3);
-    const b = roundedNumberString(rgb.b / 255, 3);
-    const matrixValues = `0 0 0 0 ${r}   0 0 0 0 ${g}   0 0 0 0 ${b}  0 0 0 ${rgb.a} 0`;
+    const { shadow, shadowKey, } = props;
+    const offsetId = shadowKey.add('offset').id;
+    const blurId = shadowKey.add('blur').id;
+    const floodId = shadowKey.add('flood').id;
     return /* @__PURE__ */ jsxs(Fragment, {
         children: [
             /* @__PURE__ */ jsx3('feOffset', {
@@ -26359,31 +26396,27 @@ var OuterShadowFilterElements = (props) => {
                 in: offsetId,
                 result: blurId,
             }),
-            /* @__PURE__ */ jsx3('feColorMatrix', {
-                colorInterpolationFilters: 'sRGB',
-                values: matrixValues,
-                type: 'matrix',
-                in: blurId,
-                result: matrixId,
+            /* @__PURE__ */ jsx3('feFlood', {
+                floodColor: shadow.color,
+                result: floodId,
+            }),
+            /* @__PURE__ */ jsx3('feComposite', {
+                in: floodId,
+                in2: blurId,
+                operator: 'in',
+                result: shadowKey.id,
             }),
         ],
     });
 };
 function innerShadowElements(shapeID, shadow, index) {
     const shadowKey = shapeID.add('_inside_shadow' + index);
-    const blurId = shadowKey.add('blur').id;
-    const offsetId = shadowKey.add('offset').id;
-    const compositeId = shadowKey.add('composite').id;
-    const matrixId = shadowKey.add('matrix').id;
     const filterElements = /* @__PURE__ */ jsx3(InnerShadowFilterElements, {
         shadow,
-        blurId,
-        offsetId,
-        compositeId,
-        matrixId,
+        shadowKey,
     }, shadowKey.id + '-filters');
     const mergeElement = /* @__PURE__ */ jsx3('feMergeNode', {
-        in: matrixId,
+        in: shadowKey.id,
     }, shadowKey.id + '-merge');
     return {
         filterElements,
@@ -26391,13 +26424,11 @@ function innerShadowElements(shapeID, shadow, index) {
     };
 }
 var InnerShadowFilterElements = (props) => {
-    const { shadow, blurId, offsetId, compositeId, matrixId, } = props;
-    const color2 = shadow.color;
-    const rgb = ConvertColor.toRgb(color2);
-    const r = rgb.r / 255;
-    const g = rgb.g / 255;
-    const b = rgb.b / 255;
-    const matrixValues = `0 0 0 0 ${r}   0 0 0 0 ${g}   0 0 0 0 ${b}  0 0 0 ${rgb.a} 0`;
+    const { shadow, shadowKey, } = props;
+    const blurId = shadowKey.add('blur').id;
+    const offsetId = shadowKey.add('offset').id;
+    const compositeId = shadowKey.add('composite').id;
+    const floodId = shadowKey.add('flood').id;
     return /* @__PURE__ */ jsxs(Fragment, {
         children: [
             /* @__PURE__ */ jsx3('feGaussianBlur', {
@@ -26419,12 +26450,15 @@ var InnerShadowFilterElements = (props) => {
                 k3: '1',
                 result: compositeId,
             }),
-            /* @__PURE__ */ jsx3('feColorMatrix', {
-                colorInterpolationFilters: 'sRGB',
-                values: matrixValues,
-                type: 'matrix',
-                in: compositeId,
-                result: matrixId,
+            /* @__PURE__ */ jsx3('feFlood', {
+                floodColor: shadow.color,
+                result: floodId,
+            }),
+            /* @__PURE__ */ jsx3('feComposite', {
+                in: floodId,
+                in2: compositeId,
+                operator: 'in',
+                result: shadowKey.id,
             }),
         ],
     });
@@ -32503,6 +32537,9 @@ function Floating({ alignment, placement, safeArea, offsetX, offsetY, anchorRef,
         ref: floatingPositionRef,
         className: className2,
         style: {
+            // Start from the top left of the screen to prevent jumps.
+            top: 0,
+            left: 0,
             // Initially rendered as hidden, but the layout effect will set
             // to visible when the position is calculated.
             visibility: 'hidden',
@@ -32565,7 +32602,7 @@ var GracefullyDegradingErrorBoundary = class extends Component2 {
 
 `, error);
         const sampleRate = Math.random();
-        if (sampleRate > 0.5)
+        if (sampleRate > 0.25)
             return;
         const stack = error instanceof Error && typeof error.stack === 'string' ? error.stack : null;
         sendTrackingEvent('published_site_load_error', {
@@ -32677,50 +32714,6 @@ function findAnchorElement(target, withinElement) {
     }
     return null;
 }
-var pendingResolvers = /* @__PURE__ */ new Set();
-function resolvePendingPromises() {
-    for (const resolve of pendingResolvers)
-        resolve();
-    pendingResolvers.clear();
-}
-var canUseYield = /* @__PURE__ */ (() => safeWindow.scheduler && 'yield' in safeWindow.scheduler)();
-var canUsePostTask = /* @__PURE__ */ (() => safeWindow.scheduler && 'postTask' in safeWindow.scheduler)();
-function yieldUnlessUrgent(options) {
-    return new Promise((resolve) => {
-        pendingResolvers.add(resolve);
-        if (document.hidden) {
-            resolvePendingPromises();
-            return;
-        }
-        document.addEventListener('visibilitychange', resolvePendingPromises);
-        document.addEventListener('pagehide', resolvePendingPromises);
-        requestAnimationFrame(() => {
-            const resolveFn = () => {
-                var _a;
-                pendingResolvers.delete(resolve);
-                if ((_a = options == null ? void 0 : options.signal) == null ? void 0 : _a.aborted)
-                    return;
-                resolve();
-            };
-            const priority = options == null ? void 0 : options.priority;
-            const canUseModernAPI = canUseYield || canUsePostTask;
-            if (!canUseModernAPI) {
-                if (priority === 'user-blocking')
-                    return resolveFn();
-                return setTimeout(resolveFn, priority === 'background' ? 1 : 0);
-            }
-            if (priority === 'background') {
-                return setTimeout(resolveFn, 1);
-            }
-            if (canUseYield) {
-                safeWindow.scheduler.yield(options).then(resolveFn).catch(noop2);
-                return;
-            }
-            safeWindow.scheduler.postTask(resolveFn, options).catch(noop2);
-        });
-        return;
-    });
-}
 function ChildrenCanSuspend({ children, }) {
     return /* @__PURE__ */ jsx3(SuspenseThatPreservesDom, {
         children,
@@ -33452,8 +33445,10 @@ function createOnClickLinkHandler(router, routeId, href, trackLinkClick, element
         const shouldPerformNavigation = !usedMetaKey && !isExternalLink;
         const track = () => void trackLinkClick(href);
         if (!shouldPerformNavigation) {
-            await yieldUnlessUrgent({
+            await yieldToMain({
                 priority: 'user-blocking',
+                ensureContinueBeforeUnload: true,
+                continueAfter: 'paint',
             });
             track();
             return;
@@ -33836,8 +33831,9 @@ var FormContainer = /* @__PURE__ */ React4.forwardRef(function FormContainer2({
             type: 'submit',
         });
         const data2 = new FormData(event.currentTarget);
-        await interactionResponse({
+        await yieldToMain({
             priority: 'user-blocking',
+            continueAfter: 'paint',
         });
         addUTMTagsToFormData(data2, safeWindow.document);
         for (const [key7, value,] of data2) {
@@ -33881,8 +33877,9 @@ var FormContainer = /* @__PURE__ */ React4.forwardRef(function FormContainer2({
     };
     const checkValidity = async (e) => {
         const target = e.currentTarget;
-        await interactionResponse({
+        await yieldToMain({
             priority: 'background',
+            continueAfter: 'paint',
         });
         startTransition2(() => dispatch({
             type: anyEmptyRequiredFields(target) ? 'incomplete' : 'complete',
@@ -34121,6 +34118,10 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
                 const nextRender = monitorNextPaintAfterRender({
                     localized: true,
                 });
+                await yieldToMain({
+                    priority: 'user-blocking',
+                    continueAfter: 'paint',
+                });
                 let localeId;
                 if (isString(localeOrLocaleId)) {
                     localeId = localeOrLocaleId;
@@ -34209,11 +34210,14 @@ function Router({ defaultPageStyle, disableHistory, initialPathVariables, initia
             preloaded: hasRendered ? void 0 : routeStatus == null ? void 0 : routeStatus.hasLoaded,
         });
         const executeBeforeUrlUpdate = executeBeforeUrlUpdateOnce(beforeUrlUpdate);
-        void yieldUnlessUrgent({
+        void yieldToMain({
             priority: 'background',
+            ensureContinueBeforeUnload: true,
+            continueAfter: 'paint',
         }).then(executeBeforeUrlUpdate);
-        await interactionResponse({
+        await yieldToMain({
             priority: 'user-blocking',
+            continueAfter: 'paint',
         });
         if (pathVariables) {
             const inUse = /* @__PURE__ */ new Set();
@@ -39980,11 +39984,14 @@ function useOnAppear(callback) {
         default: callback,
     });
 }
-async function setOverflow(blockDocumentScrolling, show, yieldBefore2 = true) {
+async function setOverflow(blockDocumentScrolling, show, yieldBefore = true) {
     if (blockDocumentScrolling === false)
         return;
-    if (yieldBefore2)
-        await interactionResponse();
+    if (yieldBefore) {
+        await yieldToMain({
+            continueAfter: 'paint',
+        });
+    }
     frame.render(() => {
         const htmlStyle = document.documentElement.style;
         if (show) {
@@ -40404,22 +40411,48 @@ function useUpdateIfVisible(ref) {
         runUpdateIfPageIsVisible(runUpdate);
     }, [runUpdateIfPageIsVisible, runUpdateIfElementIsInView, ref,]);
 }
+var globalWaitingForClickPromise;
+var globalWaitingForClickResolve;
+async function getPromiseWithFallback() {
+    return new Promise((resolve) => {
+        const resolveFn = () => {
+            resolve();
+            clearTimeout(timeout);
+        };
+        const timeout = setTimeout(resolveFn, 150);
+        globalWaitingForClickResolve = resolveFn;
+    });
+}
+function globalWaitForClickListener(event) {
+    if (event.button === 0) {
+        globalWaitingForClickPromise = getPromiseWithFallback();
+    }
+}
+function globalClickReceivedListener() {
+    globalWaitingForClickPromise = void 0;
+    globalWaitingForClickResolve == null ? void 0 : globalWaitingForClickResolve();
+    globalWaitingForClickResolve = void 0;
+}
+function useWaitForGlobalClick(enabled = false) {
+    useEffect(() => {
+        if (!enabled)
+            return;
+        document.addEventListener('pointerup', globalWaitForClickListener, true);
+        document.__proto__.addEventListener.call(document, 'click', globalClickReceivedListener, true);
+    }, [enabled,]);
+}
 function useVariantState({ variant, defaultVariant: externalDefaultVariant, transitions: externalTransitions, enabledGestures: externalEnabledGestures, cycleOrder: externalCycleOrder = [], variantProps: variantProps2 = {}, variantClassNames = {}, ref, }) {
     const forceUpdate = useForceUpdate2();
     const isCanvas = useIsOnFramerCanvas();
     const validBaseVariants = useConstant2(() => new Set(externalCycleOrder));
-    const { pauseOffscreen: pauseOffscreenFeatureOn, } = useLibraryFeatures();
-    const update = useCallback((useTransition) => {
-        if (useTransition) {
-            startTransition2(() => void forceUpdate());
-            return;
-        }
-        forceUpdate();
-    }, [forceUpdate,]);
+    const { pauseOffscreen: pauseOffscreenFeatureOn, yieldOnTap: yieldOnTapFeatureOn, } = useLibraryFeatures();
+    useWaitForGlobalClick(yieldOnTapFeatureOn);
     const runUpdateIfVisible = useUpdateIfVisible(ref);
     const internalState = useRef3({
         isHovered: false,
+        isHoveredHasUpdated: false,
         isPressed: false,
+        isPressedHasUpdated: false,
         isError: false,
         hasPressedVariants: true,
         baseVariant: safeBaseVariant(variant, externalDefaultVariant, validBaseVariants),
@@ -40428,7 +40461,7 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         loadedBaseVariant: {},
         // When used in generated components, these are static values defined
         // outside of the component function that also need to not result in
-        // memoized values being recalculated, so we dump them into the ref.
+        // memorized values being recalculated, so we dump them into the ref.
         defaultVariant: externalDefaultVariant,
         enabledGestures: externalEnabledGestures,
         cycleOrder: externalCycleOrder,
@@ -40441,7 +40474,7 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         const nextGestureVariant = gesture ? createGestureVariant(nextBaseVariant, gesture) : void 0;
         return [nextBaseVariant, nextGestureVariant,];
     }, []);
-    const updateIfNeeded = useCallback((baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, isError2 = false, checkViewport = false, highPriority = false, clearError = false) => {
+    const updateIfNeeded = useCallback(async (baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, checkViewport = false, clearError = false) => {
         const [nextBase, nextGesture,] = resolveNextVariant(nextBaseVariant);
         if (nextBase === baseVariant2 && nextGesture === gestureVariant2)
             return;
@@ -40449,9 +40482,26 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
             internalState.current.isError = false;
         internalState.current.baseVariant = nextBase || defaultVariant2;
         internalState.current.gestureVariant = nextGesture;
-        runUpdateIfVisible(() => update(!highPriority || isError2), pauseOffscreenFeatureOn && checkViewport);
-    }, [resolveNextVariant, update, runUpdateIfVisible, pauseOffscreenFeatureOn,]);
+        const yieldOnTap = yieldOnTapFeatureOn && internalState.current.isPressedHasUpdated;
+        if (yieldOnTap && globalWaitingForClickPromise) {
+            await globalWaitingForClickPromise;
+        }
+        if (yieldOnTap) {
+            await yieldToMain({
+                priority: 'user-blocking',
+                continueAfter: 'paint',
+            });
+        }
+        const { isHovered: isHovered2, isPressed: isPressed2, isHoveredHasUpdated, isPressedHasUpdated, } = internalState.current;
+        if (isHovered2 || isHoveredHasUpdated || isPressed2 || isPressedHasUpdated) {
+            startTransition2(forceUpdate);
+            return;
+        }
+        runUpdateIfVisible(() => startTransition2(forceUpdate), pauseOffscreenFeatureOn && checkViewport);
+    }, [resolveNextVariant, forceUpdate, runUpdateIfVisible, pauseOffscreenFeatureOn, yieldOnTapFeatureOn,]);
     const setGestureState = useCallback(({ isHovered: isHovered2, isPressed: isPressed2, isError: isError2, }) => {
+        const isPressedHasUpdated = isPressed2 !== internalState.current.isPressed;
+        const isHoveredHasUpdated = isHovered2 !== internalState.current.isHovered;
         if (isHovered2 !== void 0)
             internalState.current.isHovered = isHovered2;
         if (isPressed2 !== void 0)
@@ -40459,21 +40509,22 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         if (isError2 !== void 0)
             internalState.current.isError = isError2;
         const { baseVariant: baseVariant2, gestureVariant: gestureVariant2, defaultVariant: defaultVariant2, } = internalState.current;
-        const visibleUserInteraction = isPressed2 || isHovered2;
-        updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, baseVariant2, isError2, !visibleUserInteraction, isHovered2);
+        internalState.current.isPressedHasUpdated = isPressedHasUpdated;
+        internalState.current.isHoveredHasUpdated = isHoveredHasUpdated;
+        void updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, baseVariant2, false);
     }, [updateIfNeeded,]);
     const setVariant = useCallback((proposedVariant, pauseOffscreen = false) => {
         const { defaultVariant: defaultVariant2, cycleOrder, baseVariant: baseVariant2, gestureVariant: gestureVariant2, } = internalState.current;
         const nextBaseVariant = proposedVariant === CycleVariantState
             ? nextVariant(cycleOrder || [], baseVariant2 || defaultVariant2)
             : proposedVariant;
-        updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, false, pauseOffscreen, false, true);
+        void updateIfNeeded(baseVariant2, gestureVariant2, defaultVariant2, nextBaseVariant, pauseOffscreen, true);
     }, [updateIfNeeded,]);
     const clearLoadingGesture = useCallback(() => {
         const { baseVariant: baseVariant2, } = internalState.current;
         internalState.current.loadedBaseVariant[baseVariant2] = true;
-        runUpdateIfVisible(() => update(true), true);
-    }, [update, runUpdateIfVisible,]);
+        runUpdateIfVisible(() => startTransition2(forceUpdate), true);
+    }, [forceUpdate, runUpdateIfVisible,]);
     if (variant !== internalState.current.lastVariant) {
         const [nextBase, nextGesture,] = resolveNextVariant(variant);
         internalState.current.lastVariant = nextBase;
@@ -43138,7 +43189,9 @@ var PlainTextInput = /* @__PURE__ */ forwardRef(function FormPlainTextInput(prop
         setPrevDefaultValue(defaultValue);
     }
     const handleChange = useCallback(async (e) => {
-        await interactionResponse();
+        await yieldToMain({
+            continueAfter: 'paint',
+        });
         const newValue = e.target.value;
         onChange == null ? void 0 : onChange(e);
         startTransition2(() => setHasValue(!!newValue));
@@ -44888,7 +44941,7 @@ var SharedSVGManager = class {
      * VECTOR @TODO - Unsubscribe from vector set items.
      */
     template(id3, svg) {
-        const entry = this.vectorSetItems.get(svg);
+        const entry = this.vectorSetItems.get(id3);
         if (entry)
             return `#${entry.id}`;
         this.vectorSetItems.set(id3, {
@@ -46190,7 +46243,7 @@ var Vector = /* @__PURE__ */ (() => {
             }
             const internalShapeId = InternalID.forKey(id3);
             const internalStrokeClipId = InternalID.forKey(strokeClipId);
-            const shadow = shadowForShape(shadows, rect, internalShapeId, fillAlpha, strokeAlpha, strokeWidth, internalStrokeClipId, svgStrokeAttributes);
+            const shadow = shadowForShape(shadows, rect, internalShapeId, strokeAlpha, strokeWidth, internalStrokeClipId, svgStrokeAttributes);
             const currentName = target === RenderTarget.preview ? name || void 0 : void 0;
             if (shadow.insetElement !== null || shadow.outsetElement !== null || insideStroke) {
                 pathAttributes.id = internalShapeId.id;
@@ -46812,7 +46865,7 @@ MotionValue.prototype.addChild = function ({ transformer = (v) => v, }) {
 if (false) {
     MainLoop2.start();
 }
-export { _injectRuntime, acceleratedValues2 as acceleratedValues, activeAnimations, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, addUniqueItem, alpha, analyseComplexValue, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateView, animateVisualElement, animationControls, animationMapKey, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, applyPxDefaults, AsyncMotionValueAnimation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform2 as buildTransform, calcGeneratorDuration, calcLength, calculateRect, callEach, cancelFrame, cancelMicrotask, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, clampRGB, collectMotionValues, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertOffsetToTimes, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createGeneratorEasing, createRenderBatcher, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, cubicBezierAsString, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, defaultEasing, defaultOffset, defaultTransformValue, defaultValueTypes, degrees, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, dimensionValueTypes, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, DOMKeyframesResolver, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, easingDefinitionToFunction, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, fillOffset, fillWildcards, filterProps, findDimensionValueType, findValueType, finiteNumber, FlatTree, Floating, flushKeyframeResolvers, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, generateLinearEasing, getAnimatableNone2 as getAnimatableNone, getAnimationMap, getComponentSize, getComputedStyle2 as getComputedStyle, getDefaultValueType, getDevicePreset, getEasingForSegment, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getMixer, getPropertyControls, getValueAsType, getValueTransition, getVariableValue, getWhereExpressionFromPathVariables, GracefullyDegradingErrorBoundary, gradientForShape, GroupAnimation, GroupAnimationWithThen, hasWarned, hex, hover, hsla, hslaToRgba, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, invisibleValues, isAnimatable2 as isAnimatable, isBezierDefinition, isBrowser, isCSSVariableName, isCSSVariableToken, isDesignDefinition, isDragActive, isDragging, isEasingArray, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isGenerator, isMotionComponent, isMotionValue2 as isMotionValue, isNodeOrChild, isNumericalString, isOfAnnotatedType, isOverride, isPrimaryPointer, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStaticRenderer, isStraightCurve, isValidMotionProp, isWaapiSupportedEasing, isZeroValueString, JSAnimation, KeyframeResolver, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, mapEasingToNativeEasing, mapValue, markHydrationStart, maxGeneratorDuration, memo, memoize2 as memoize, microtask, millisecondsToSeconds, mirrorEasing, mix, mixArray, mixColor, mixComplex, mixImmediate, mixLinearColor, mixNumber, mixObject, mixVisibility, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, moveItem, namespace_exports as Reorder, NativeAnimation, NativeAnimationExtended, NativeAnimationWrapper, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, noop, NotFoundError, number, numberValueTypes, ObservableObject, observeTimeline, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseCSSVariable, parseFramerPageLink, parseValueFromTransform, patchRoutesForABTesting, pathDefaults, PathSegment, PathVariablesContext, percent, pipe, Point, Polygon, positionalKeys, preloadImage, PresenceContext, press, print, progress, progressPercentage, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryCache, QueryEngine, RadialGradient, readTransformValue, recordStats, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, removeItem, RenderTarget, resolveElements, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, rgba, rgbUnit, RichText2 as RichText, roundedNumber, roundedNumberString, roundWithOffset, safeCSSValue, scale, Scroll, scroll, scrollInfo, secondsToMilliseconds, setDragLock, setGlobalRenderEnvironment, setInitialHydrationState, setStyle, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, SmartComponentScopedContainer, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, startWaapiAnimation, statsBuffer, steps, styleEffect, StyleSheetContext, SubscriptionManager, supportedWaapiEasing, supportsBrowserAnimation, supportsFlags, supportsLinearEasing, supportsPartialKeyframes, supportsScrollTimeline, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, testValueType, Text2 as Text, throttle, time, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformPropOrder, transformProps, transformString2 as transformString, transformTemplate, transformValue, transformValueTypes, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useIsStaticRenderer, useLoadMorePaginatedQuery, useLoadMorePagination, useLocale, useLocaleCode, useLocaleInfo, useLocalesForCurrentRoute, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePresenceData, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSiteRefs, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, velocityPerSecond, version, vh, ViewTransitionBuilder, VisualElement, visualElementStore, vw, warning, warnOnce, WillChangeMotionValue, WindowContext, withCodeBoundaryForOverrides, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withV1StrokeFX, withVariantAppearEffect, withVariantFX, wrap, yieldUnlessUrgent, };
+export { _injectRuntime, acceleratedValues2 as acceleratedValues, activeAnimations, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, addUniqueItem, alpha, analyseComplexValue, AnchorLinkTarget, Animatable, animate2 as animate, animateMini, AnimatePresence, AnimateSharedLayout, animateValue, animateView, animateVisualElement, animationControls, animationMapKey, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, applyPxDefaults, AsyncMotionValueAnimation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform2 as buildTransform, calcGeneratorDuration, calcLength, calculateRect, callEach, cancelFrame, cancelMicrotask, cancelSync, ChildrenCanSuspend, circIn, circInOut, circOut, clamp, clampRGB, collectMotionValues, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertOffsetToTimes, convertPropsToDeviceOptions, createBox, createData, createFramerPageLink, createGeneratorEasing, createRenderBatcher, createRendererMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, cubicBezierAsString, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, defaultEasing, defaultOffset, defaultTransformValue, defaultValueTypes, degrees, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, dimensionValueTypes, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, DOMKeyframesResolver, domMax, domMin, DragControls, Draggable, easeIn, easeInOut, easeOut, easingDefinitionToFunction, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, Fetcher, fillOffset, fillWildcards, filterProps, findDimensionValueType, findValueType, finiteNumber, FlatTree, Floating, flushKeyframeResolvers, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormBooleanInput, FormContainer, FormPlainTextInput2 as FormPlainTextInput, FormSelect, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, framerCSSMarker, FramerEvent, FramerEventListener, FramerEventSession, frameSteps, FrameWithMotion, GamepadContext, GeneratedComponentContext, generateLinearEasing, getAnimatableNone2 as getAnimatableNone, getAnimationMap, getComponentSize, getComputedStyle2 as getComputedStyle, getDefaultValueType, getDevicePreset, getEasingForSegment, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getLoadingLazyAtYPosition, getMeasurableCodeComponentChildren, getMixer, getPropertyControls, getValueAsType, getValueTransition, getVariableValue, getWhereExpressionFromPathVariables, GracefullyDegradingErrorBoundary, gradientForShape, GroupAnimation, GroupAnimationWithThen, hasWarned, hex, hover, hsla, hslaToRgba, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inertia, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, invisibleValues, isAnimatable2 as isAnimatable, isBezierDefinition, isBrowser, isCSSVariableName, isCSSVariableToken, isDesignDefinition, isDragActive, isDragging, isEasingArray, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isGenerator, isMotionComponent, isMotionValue2 as isMotionValue, isNodeOrChild, isNumericalString, isOfAnnotatedType, isOverride, isPrimaryPointer, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStaticRenderer, isStraightCurve, isValidMotionProp, isWaapiSupportedEasing, isZeroValueString, JSAnimation, KeyframeResolver, keyframes, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, mapEasingToNativeEasing, mapValue, markHydrationStart, maxGeneratorDuration, memo, memoize2 as memoize, microtask, millisecondsToSeconds, mirrorEasing, mix, mixArray, mixColor, mixComplex, mixImmediate, mixLinearColor, mixNumber, mixObject, mixVisibility, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, moveItem, namespace_exports as Reorder, NativeAnimation, NativeAnimationExtended, NativeAnimationWrapper, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, nestedLinksCollector, noop, NotFoundError, number, numberValueTypes, ObservableObject, observeTimeline, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseCSSVariable, parseFramerPageLink, parseValueFromTransform, patchRoutesForABTesting, pathDefaults, PathSegment, PathVariablesContext, percent, pipe, Point, Polygon, positionalKeys, preloadImage, PresenceContext, press, print, progress, progressPercentage, PropertyOverrides2 as PropertyOverrides, PropertyStore, propsForLink, pushLoadMoreHistory, px, QueryCache, QueryEngine, RadialGradient, readTransformValue, recordStats, Rect, removeHiddenBreakpointLayers, removeHiddenBreakpointLayersV2, removeItem, RenderTarget, resolveElements, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, rgba, rgbUnit, RichText2 as RichText, roundedNumber, roundedNumberString, roundWithOffset, safeCSSValue, scale, Scroll, scroll, scrollInfo, secondsToMilliseconds, setDragLock, setGlobalRenderEnvironment, setInitialHydrationState, setStyle, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, SmartComponentScopedContainer, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, startWaapiAnimation, statsBuffer, steps, styleEffect, StyleSheetContext, SubscriptionManager, supportedWaapiEasing, supportsBrowserAnimation, supportsFlags, supportsLinearEasing, supportsPartialKeyframes, supportsScrollTimeline, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, testValueType, Text2 as Text, throttle, time, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformPropOrder, transformProps, transformString2 as transformString, transformTemplate, transformValue, transformValueTypes, turnOffReactEventHandling, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimateMini, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRoute, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useIsStaticRenderer, useLoadMorePaginatedQuery, useLoadMorePagination, useLocale, useLocaleCode, useLocaleInfo, useLocalesForCurrentRoute, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePrefetch, usePreloadQuery, usePresence, usePresenceData, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSiteRefs, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, velocityPerSecond, version, vh, ViewTransitionBuilder, VisualElement, visualElementStore, vw, warning, warnOnce, WillChangeMotionValue, WindowContext, withCodeBoundaryForOverrides, withCSS, withFX, withGeneratedLayoutId, withInfiniteScroll, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, withOptimizedAppearEffect, WithOverride, withParallaxTransform, withPath, withPerformanceMarks, withShape, withStyleAppearEffect, withV1StrokeFX, withVariantAppearEffect, withVariantFX, wrap, yieldToMain, };
 //! Credit to Astro | MIT License
 /**
  * @license Emotion v11.0.0