unframer 2.0.0 → 2.0.1

package/esm/framer.js

@@ -19,7 +19,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // @ts-nocheck
-// https :https://app.framerstatic.com/chunk-73TYJ7YB.js
+// https :https://app.framerstatic.com/chunk-O7E5UDPD.js
 import { createContext, } from 'react';
 import { createContext as createContext2, } from 'react';
 import { createContext as createContext3, } from 'react';
@@ -39,6 +39,7 @@ import { createElement as createElement2, Fragment, useMemo as useMemo4, } from
 import { useMemo as useMemo2, } from 'react';
 import { useMemo as useMemo3, } from 'react';
 import React__default, { useContext as useContext6, } from 'react';
+import React__default2 from 'react';
 import { useCallback as useCallback2, useState, } from 'react';
 import { useRef as useRef3, } from 'react';
 import { useEffect as useEffect4, } from 'react';
@@ -1861,7 +1862,7 @@ var MotionValue = class {
      * @internal
      */
     constructor(init, options = {}) {
-        this.version = '11.0.11-sync.2';
+        this.version = '11.0.11-sync.5';
         this.canTrackVelocity = false;
         this.events = {};
         this.updateAndNotify = (v, render = true) => {
@@ -3241,7 +3242,7 @@ function updateMotionValuesFromProps(element, next, prev) {
                 willChange.add(key7);
             }
             if (false) {
-                warnOnce(nextValue.version === '11.0.11-sync.2', `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.11-sync.2 may not work as expected.`);
+                warnOnce(nextValue.version === '11.0.11-sync.5', `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.11-sync.5 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -3275,6 +3276,12 @@ function updateMotionValuesFromProps(element, next, prev) {
 }
 var featureNames = Object.keys(featureDefinitions);
 var numFeatures = featureNames.length;
+function getClosestProjectingNode(visualElement) {
+    if (!visualElement) {
+        return void 0;
+    }
+    return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
+}
 var propEventHandlers = [
     'AnimationStart',
     'AnimationComplete',
@@ -3432,7 +3439,7 @@ var VisualElement = class {
             }
         }
         if ((this.type === 'html' || this.type === 'svg') && !this.projection && ProjectionNodeConstructor) {
-            this.projection = new ProjectionNodeConstructor(this.latestValues, this.parent && this.parent.projection);
+            this.projection = new ProjectionNodeConstructor(this.latestValues, getClosestProjectingNode(this.parent));
             const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot, } = renderedProps;
             this.projection.setOptions({
                 layoutId,
@@ -5426,7 +5433,10 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
         transform2 += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
     }
     if (latestTransform) {
-        const { rotate, rotateX, rotateY, skewX, skewY, } = latestTransform;
+        const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY, } = latestTransform;
+        if (transformPerspective) {
+            transform2 = `perspective(${transformPerspective}px) ${transform2}`;
+        }
         if (rotate) {
             transform2 += `rotate(${rotate}deg) `;
         }
@@ -6909,7 +6919,10 @@ var SVGVisualElement = class extends DOMVisualElement {
 var createDomVisualElement = (Component23, options) => {
     return isSVGComponent(Component23)
         ? new SVGVisualElement(options, { enableHardwareAcceleration: false, })
-        : new HTMLVisualElement(options, { enableHardwareAcceleration: true, });
+        : new HTMLVisualElement(options, {
+            enableHardwareAcceleration: true,
+            allowProjection: Component23 !== React__default2.Fragment,
+        });
 };
 var layout = {
     layout: {
@@ -8782,7 +8795,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     acc[key7] = (process2) => cancelFrame(process2);
     return acc;
 }, {});
-// https :https://app.framerstatic.com/framer.Q2DHSUSM.js
+// https :https://app.framerstatic.com/framer.L736M3IJ.js
 import { Component as Component2, } from 'react';
 import React12 from 'react';
 import { jsx as _jsx5, } from 'react/jsx-runtime';
@@ -8958,13 +8971,18 @@ import { jsx as jsx54, jsxs as jsxs18, } from 'react/jsx-runtime';
 import { jsx as jsx55, } from 'react/jsx-runtime';
 import { jsx as jsx56, } from 'react/jsx-runtime';
 import { jsx as jsx57, } from 'react/jsx-runtime';
-import React85 from 'react';
-import { jsx as jsx58, jsxs as jsxs19, } from 'react/jsx-runtime';
-import { Children as Children32, cloneElement as cloneElement32, forwardRef as forwardRef52, isValidElement as isValidElement32, useContext as useContext162, useInsertionEffect as useInsertionEffect42, useRef as useRef19, } from 'react';
-import * as React86 from 'react';
+import { jsx as jsx58, } from 'react/jsx-runtime';
 import { useRef as useRef18, } from 'react';
 import { jsx as jsx59, } from 'react/jsx-runtime';
+import { useRef as useRef19, } from 'react';
 import { jsx as jsx60, } from 'react/jsx-runtime';
+import React85 from 'react';
+import { jsx as jsx61, jsxs as jsxs19, } from 'react/jsx-runtime';
+import { Children as Children32, cloneElement as cloneElement32, forwardRef as forwardRef52, isValidElement as isValidElement32, useContext as useContext162, useInsertionEffect as useInsertionEffect42, useRef as useRef21, } from 'react';
+import * as React86 from 'react';
+import { useRef as useRef20, } from 'react';
+import { jsx as jsx62, } from 'react/jsx-runtime';
+import { jsx as jsx63, } from 'react/jsx-runtime';
 import { useEffect as useEffect142, useState as useState22, } from 'react';
 var require_hsluv = __commonJS({
     '../../../node_modules/hsluv/hsluv.js'(exports, module) {
@@ -11787,6 +11805,9 @@ function Point(x, y) {
     Point2.angle = (a, b) => {
         return Math.atan2(b.y - a.y, b.x - a.x) * 180 / Math.PI - 90;
     };
+    Point2.angleFromX = (a, b) => {
+        return Math.atan2(b.y - a.y, b.x - a.x) * 180 / Math.PI;
+    };
     Point2.isEqual = (a, b) => {
         return a.x === b.x && a.y === b.y;
     };
@@ -11816,25 +11837,6 @@ function Point(x, y) {
         };
     }
     Point2.center = center;
-    function insidePoints(point2, points) {
-        var _f, _j, _k, _l;
-        var _a, _b, _c, _d;
-        const x = point2.x;
-        const y = point2.y;
-        let isInside = false;
-        for (let i = 0, j = points.length - 1; i < points.length; j = i++) {
-            const xi = (_f = ((_a = points[i]) == null ? void 0 : _a.x)) !== null && _f !== void 0 ? _f : 0;
-            const yi = (_j = ((_b = points[i]) == null ? void 0 : _b.y)) !== null && _j !== void 0 ? _j : 0;
-            const xj = (_k = ((_c = points[j]) == null ? void 0 : _c.x)) !== null && _k !== void 0 ? _k : 0;
-            const yj = (_l = ((_d = points[j]) == null ? void 0 : _d.y)) !== null && _l !== void 0 ? _l : 0;
-            const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
-            if (intersect) {
-                isInside = !isInside;
-            }
-        }
-        return isInside;
-    }
-    Point2.insidePoints = insidePoints;
 })(Point || (Point = {}));
 var BezierDefaults = {
     curve: 'ease',
@@ -14465,15 +14467,18 @@ var ErrorBoundary2 = class extends Component3 {
         __publicField(this, 'state', {});
     }
     componentDidCatch(error, info) {
-        let stack = info.componentStack.split('\n').filter((line) => line.length !== 0);
+        var _a;
+        let stack = (_a = info.componentStack) == null ? void 0 : _a.split('\n').filter((line) => line.length !== 0);
         let currentIndex = 0;
-        for (const line of stack) {
-            if (line.startsWith(`    in ${this.constructor.name}`)) {
-                break;
+        if (stack) {
+            for (const line of stack) {
+                if (line.startsWith(`    in ${this.constructor.name}`)) {
+                    break;
+                }
+                currentIndex++;
             }
-            currentIndex++;
+            stack = stack.slice(0, currentIndex);
         }
-        stack = stack.slice(0, currentIndex);
         this.setState({
             lastError: {
                 error,
@@ -14829,13 +14834,18 @@ var Rect;
         };
     };
     Rect2.boundingRectFromPoints = (ps) => {
-        const xValues = ps.map((point2) => point2.x);
-        const yValues = ps.map((point2) => point2.y);
-        const x = Math.min(...xValues);
-        const y = Math.min(...yValues);
-        const width = Math.max(...xValues) - x;
-        const height = Math.max(...yValues) - y;
-        return { x, y, width, height, };
+        let minX2 = Infinity;
+        let maxX2 = -Infinity;
+        let minY2 = Infinity;
+        let maxY2 = -Infinity;
+        for (let i = 0; i < ps.length; i++) {
+            const point2 = ps[i];
+            minX2 = Math.min(minX2, point2.x);
+            maxX2 = Math.max(maxX2, point2.x);
+            minY2 = Math.min(minY2, point2.y);
+            maxY2 = Math.max(maxY2, point2.y);
+        }
+        return { x: minX2, y: minY2, width: maxX2 - minX2, height: maxY2 - minY2, };
     };
     Rect2.fromPoints = (ps) => {
         const [tl, tr, _, bl,] = ps;
@@ -15672,6 +15682,8 @@ var ControlType = /* @__PURE__ */ ((ControlType2) => {
     ControlType2['CustomCursor'] = 'customcursor';
     ControlType2['Border'] = 'border';
     ControlType2['Cursor'] = 'cursor';
+    ControlType2['Padding'] = 'padding';
+    ControlType2['BorderRadius'] = 'borderradius';
     return ControlType2;
 })(ControlType || {});
 var isFlexboxGapSupportedCached;
@@ -16620,6 +16632,8 @@ function getControlDefaultValue(control) {
             case 'date':
             case 'link':
             case 'boxshadow':
+            case 'padding':
+            case 'borderradius':
                 return isString22(control.defaultValue) ? control.defaultValue : void 0;
             case 'boolean':
                 return isBoolean(control.defaultValue) ? control.defaultValue : void 0;
@@ -19447,7 +19461,7 @@ function setTranslateZHack(style, enabled) {
     if (!useTranslateZHack || !onCanvas) {
         return;
     }
-    const transform2 = style.transform || '';
+    const transform2 = isString22(style.transform) ? style.transform || '' : '';
     if (enabled) {
         const hasTranslateZ = transform2.includes(translateZ);
         if (!hasTranslateZ) {
@@ -26475,7 +26489,7 @@ function getTransition(value) {
     }
     return value == null ? void 0 : value.transition;
 }
-function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId) {
+function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId, instant) {
     return __awaiter(this, void 0, void 0, function* () {
         const transition = getTransition(target);
         return Promise.all(effectValuesKeys.map((key7) => {
@@ -26502,8 +26516,12 @@ function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId) {
                         elapsed: safeWindow.HandoffAppearAnimations(appearId, key7, motionValue2, frame),
                     }
                     : void 0;
-                const opts = Object.assign(Object.assign(Object.assign(Object.assign({}, transition), { velocity: 0, elapsed: 0 }), handoff), { onComplete: () => resolve() });
-                animate(motionValue2, value, opts);
+                if (instant) {
+                    motionValue2.set(value);
+                }
+                else {
+                    animate(motionValue2, value, Object.assign(Object.assign(Object.assign(Object.assign({}, transition), { velocity: 0, elapsed: 0 }), handoff), { onComplete: () => resolve() }));
+                }
             });
         }));
     });
@@ -26513,21 +26531,14 @@ var presenceOptionsKeys = /* @__PURE__ */ new Set([
     'presenceAnimate',
     'presenceExit',
 ]);
-function getVisualElementBase(visualElement, style) {
-    const ctx = visualElement.getVariantContext();
-    const base = Object.assign({}, style);
-    if (Array.isArray(ctx == null ? void 0 : ctx.animate)) {
-        for (const variant of ctx.animate) {
-            Object.assign(base, visualElement.getVariant(variant));
-        }
-    }
-    return base;
-}
 function usePresenceAnimation({ initial: motionInitial, animate: motionAnimate, exit: motionExit, presenceInitial, presenceAnimate, presenceExit, }, ref, enabled, style, appearId) {
     const initial = presenceInitial !== null && presenceInitial !== void 0 ? presenceInitial : motionInitial;
     const animateConfig = presenceAnimate !== null && presenceAnimate !== void 0 ? presenceAnimate : motionAnimate;
     const exit = presenceExit !== null && presenceExit !== void 0 ? presenceExit : motionExit;
     const hasMounted = useRef122(false);
+    const lastAnimate = useRef122(animateConfig);
+    const [isPresent2, safeToRemove,] = usePresence();
+    const lastPresence = useRef122(false);
     const effect = useConstant2(() => {
         var _a;
         const base = initial !== null && initial !== void 0 ? initial : style;
@@ -26544,45 +26555,54 @@ function usePresenceAnimation({ initial: motionInitial, animate: motionAnimate,
         }
         return { values: makeFXValues(defaults), };
     });
-    const [isPresent2, safeToRemove,] = usePresence();
-    const shouldReduceMotion = useReducedMotionConfig();
     useLayoutEffect22(() => {
-        hasMounted.current = true;
-        if (!enabled) {
-            safeToRemove == null ? void 0 : safeToRemove();
-            return;
-        }
-        if (isPresent2) {
-            if (initial && animateConfig) {
-                runEffectAnimation(animateConfig, effect, shouldReduceMotion, ref, appearId);
-            }
-        }
-        else {
-            if (exit) {
-                runEffectAnimation(exit, effect, shouldReduceMotion, ref).then(() => safeToRemove());
-            }
-            else {
-                safeToRemove();
-            }
-        }
-    }, [isPresent2,]);
-    useLayoutEffect22(() => {
-        if (!hasMounted.current) {
+        if (hasMounted.current && animateConfig) {
             return;
         }
         const visualElement = visualElementStore.get(ref.current);
         if (!visualElement) {
             return;
         }
-        const base = isObject2(animateConfig) ? animateConfig : getVisualElementBase(visualElement, style);
+        hasMounted.current = true;
         for (const key7 in effect.values) {
             if (!isFXValuesKey(key7)) {
                 continue;
             }
-            const value = base == null ? void 0 : base[key7];
+            const value = style == null ? void 0 : style[key7];
             visualElement.setBaseTarget(key7, isNumber2(value) ? value : defaultFXValues[key7]);
         }
-    }, [JSON.stringify(animateConfig),]);
+    }, [animateConfig,]);
+    const shouldReduceMotion = useReducedMotionConfig();
+    useLayoutEffect22(() => {
+        if (!enabled) {
+            safeToRemove == null ? void 0 : safeToRemove();
+            return;
+        }
+        if (isPresent2 !== lastPresence.current) {
+            lastPresence.current = isPresent2;
+            if (isPresent2) {
+                if (initial && animateConfig) {
+                    runEffectAnimation(animateConfig, effect, shouldReduceMotion, ref, appearId);
+                }
+            }
+            else {
+                if (exit) {
+                    runEffectAnimation(exit, effect, shouldReduceMotion, ref, appearId).then(() => safeToRemove());
+                }
+                else {
+                    safeToRemove();
+                }
+            }
+        }
+        else {
+            const hasAnimateChanged = !isEqual(animateConfig, lastAnimate.current);
+            if (!hasAnimateChanged || !animateConfig) {
+                return;
+            }
+            lastAnimate.current = animateConfig;
+            runEffectAnimation(animateConfig, effect, shouldReduceMotion, ref, appearId, true);
+        }
+    });
     return effect;
 }
 function calcOffsetTop(element, container) {
@@ -27585,6 +27605,179 @@ function useCustomCursors(webPageCursors) {
         registerCursors(cursors);
     }, [cursors, registerCursors,]);
 }
+function degreesToRadians(degrees2) {
+    return degrees2 * (Math.PI / 180);
+}
+var Line = /* @__PURE__ */ (() => {
+    function Line2(a, b) {
+        return { a, b, };
+    }
+    Line2.offset = (line, offset) => {
+        const angle = Point.angleFromX(line.a, line.b);
+        const rad = degreesToRadians(angle);
+        const x = offset * Math.sin(rad);
+        const y = offset * Math.cos(rad);
+        return Line2({ x: line.a.x + x, y: line.a.y - y, }, {
+            x: line.b.x + x,
+            y: line.b.y - y,
+        });
+    };
+    Line2.intersection = (lineA, lineB) => {
+        const x1 = lineA.a.x;
+        const y1 = lineA.a.y;
+        const x2 = lineA.b.x;
+        const y2 = lineA.b.y;
+        const x3 = lineB.a.x;
+        const y3 = lineB.a.y;
+        const x4 = lineB.b.x;
+        const y4 = lineB.b.y;
+        const d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+        if (d === 0) {
+            return null;
+        }
+        const xi = ((x3 - x4) * (x1 * y2 - y1 * x2) - (x1 - x2) * (x3 * y4 - y3 * x4)) / d;
+        const yi = ((y3 - y4) * (x1 * y2 - y1 * x2) - (y1 - y2) * (x3 * y4 - y3 * x4)) / d;
+        return { x: xi, y: yi, };
+    };
+    Line2.intersectionAngle = (lineA, lineB) => {
+        const deltaAX = lineA.b.x - lineA.a.x;
+        const deltaAY = lineA.b.y - lineA.a.y;
+        const deltaBX = lineB.b.x - lineB.a.x;
+        const deltaBY = lineB.b.y - lineB.a.y;
+        const angle = Math.atan2(deltaAX * deltaBY - deltaAY * deltaBX, deltaAX * deltaBX + deltaAY * deltaBY);
+        return angle * (180 / Math.PI);
+    };
+    Line2.isOrthogonal = (line) => {
+        return line.a.x === line.b.x || line.a.y === line.b.y;
+    };
+    Line2.perpendicular = (line, pointOnLine) => {
+        const deltaX = line.a.x - line.b.x;
+        const deltaY = line.a.y - line.b.y;
+        const pointB = Point(pointOnLine.x - deltaY, pointOnLine.y + deltaX);
+        return Line2(pointB, pointOnLine);
+    };
+    Line2.projectPoint = (line, point2) => {
+        const perp = Line2.perpendicular(line, point2);
+        return Line2.intersection(line, perp);
+    };
+    Line2.pointAtPercentDistance = (line, distance2) => {
+        const hypotenuse = Line2.distance(line);
+        const r = distance2 * hypotenuse / hypotenuse;
+        return {
+            x: r * line.b.x + (1 - r) * line.a.x,
+            y: r * line.b.y + (1 - r) * line.a.y,
+        };
+    };
+    Line2.distance = (line) => {
+        return Point.distance(line.a, line.b);
+    };
+    return Line2;
+})();
+var Polygon = {
+    /**
+     * Determine if the vertices are ordered clockwise or counter-clockwise. This works for simple
+     * (non-self-intersecting) convex polygons. If the polygon is collapsed into a line (signedArea = 0), we consider it
+     * clockwise for it works with how Framer draws the polygons.
+     * See: https://paulbourke.net/geometry/polygonmesh/
+     * @internal */
+    isClockwise: (points) => {
+        return Polygon.signedArea(points) <= 0;
+    },
+    /**
+     * Calculate the signed area to determine if the vertices go clockwise or counter clockwise. We flip all the y
+     * values because the y axis in our canvas coordinate is fipped.
+     * See: https://mathworld.wolfram.com/PolygonArea.html
+     * @internal */
+    signedArea: (points) => {
+        let sum = 0;
+        const len = points.length;
+        for (let i = 0; i < len; i++) {
+            const pointA = points[i];
+            const pointB = points[(i + 1) % len];
+            if (!pointA || !pointB) {
+                continue;
+            }
+            sum += pointA.x * -pointB.y - pointB.x * -pointA.y;
+        }
+        return 1 / 2 * sum;
+    },
+    /**
+     * Determine if some Point lies inside the polygon formed by other Points.
+     * The other points must be provided in a clockwise/counter clockwise order.
+     *
+     * Ray-casting algorithm based on
+     * https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html
+     *
+     * @internal */
+    containsPoint: (polygonPoints2, point2) => {
+        var _f, _j, _k, _l;
+        var _a, _b, _c, _d;
+        const x = point2.x;
+        const y = point2.y;
+        let isInside = false;
+        for (let i = 0, j = polygonPoints2.length - 1; i < polygonPoints2.length; j = i++) {
+            const xi = (_f = ((_a = polygonPoints2[i]) == null ? void 0 : _a.x)) !== null && _f !== void 0 ? _f : 0;
+            const yi = (_j = ((_b = polygonPoints2[i]) == null ? void 0 : _b.y)) !== null && _j !== void 0 ? _j : 0;
+            const xj = (_k = ((_c = polygonPoints2[j]) == null ? void 0 : _c.x)) !== null && _k !== void 0 ? _k : 0;
+            const yj = (_l = ((_d = polygonPoints2[j]) == null ? void 0 : _d.y)) !== null && _l !== void 0 ? _l : 0;
+            const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+            if (intersect) {
+                isInside = !isInside;
+            }
+        }
+        return isInside;
+    },
+    /** @internal */
+    intersect: (pointsA, pointsB) => {
+        if (pointsA.length < 1 || pointsB.length < 1) {
+            return false;
+        }
+        const boundingRectA = Rect.boundingRectFromPoints(pointsA);
+        const boundingRectB = Rect.boundingRectFromPoints(pointsB);
+        if (!Rect.intersects(boundingRectA, boundingRectB)) {
+            return false;
+        }
+        const edgesA = [];
+        const pointsALength = pointsA.length;
+        pointsA.forEach((point2, index) => {
+            const nextPoint = pointsA[(index + 1) % pointsALength];
+            if (!nextPoint) {
+                return;
+            }
+            edgesA.push(Line(point2, nextPoint));
+        });
+        const edgesB = [];
+        const pointsBLength = pointsB.length;
+        pointsB.forEach((point2, index) => {
+            const nextPoint = pointsB[(index + 1) % pointsBLength];
+            if (!nextPoint) {
+                return;
+            }
+            edgesB.push(Line(point2, nextPoint));
+        });
+        for (const edgeA of edgesA) {
+            for (const edgeB of edgesB) {
+                const intersection2 = segmentsIntersect(edgeA, edgeB);
+                if (intersection2) {
+                    return true;
+                }
+            }
+        }
+        if (Polygon.containsPoint(pointsB, pointsA[0])) {
+            return true;
+        }
+        if (Polygon.containsPoint(pointsA, pointsB[0])) {
+            return true;
+        }
+        return false;
+    },
+};
+function segmentsIntersect(segmentA, segmentB) {
+    const { a, b, } = segmentA;
+    const { a: c, b: d, } = segmentB;
+    return Polygon.isClockwise([a, c, d,]) !== Polygon.isClockwise([b, c, d,]) &&
+        Polygon.isClockwise([a, b, c,]) !== Polygon.isClockwise([a, b, d,]);
+}
 function invertPlacement(placement) {
     switch (placement) {
         case 'top':
@@ -27674,7 +27867,7 @@ function getSafePlacementFloatingPositionRect(anchor, element, placement, alignm
     ];
 }
 function preferredPoint(a, b, points) {
-    if (Point.insidePoints(a, [b, ...points,])) {
+    if (Polygon.containsPoint([b, ...points,], a)) {
         return b;
     }
     return a;
@@ -31684,6 +31877,10 @@ function useQueryData(query) {
     result = useExecuteSelect(result, query.select);
     return result;
 }
+function useQueryCount(query) {
+    const collection = useQueryData(query);
+    return collection.length;
+}
 function evaluateExpression(expression, context) {
     switch (expression.type) {
         case 'Identifier':
@@ -32233,15 +32430,18 @@ var DeprecatedComponentContainer = /* @__PURE__ */ (() => {
             });
         }
         componentDidCatch(error, info) {
-            let stack = info.componentStack.split('\n').filter((line) => line.length !== 0);
+            var _a2;
+            let stack = (_a2 = info.componentStack) == null ? void 0 : _a2.split('\n').filter((line) => line.length !== 0);
             let currentIndex = 0;
-            for (const line of stack) {
-                if (line.startsWith(`    in ${this.constructor.name}`)) {
-                    break;
+            if (stack) {
+                for (const line of stack) {
+                    if (line.startsWith(`    in ${this.constructor.name}`)) {
+                        break;
+                    }
+                    currentIndex++;
                 }
-                currentIndex++;
+                stack = stack.slice(0, currentIndex);
             }
-            stack = stack.slice(0, currentIndex);
             this.setState({
                 lastError: {
                     children: this.props.children,
@@ -32356,61 +32556,6 @@ function isPageOrScroll(identifier) {
     }
     return false;
 }
-var Line = /* @__PURE__ */ (() => {
-    function Line2(a, b) {
-        return { a, b, };
-    }
-    Line2.intersection = (lineA, lineB) => {
-        const x1 = lineA.a.x;
-        const y1 = lineA.a.y;
-        const x2 = lineA.b.x;
-        const y2 = lineA.b.y;
-        const x3 = lineB.a.x;
-        const y3 = lineB.a.y;
-        const x4 = lineB.b.x;
-        const y4 = lineB.b.y;
-        const d = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
-        if (d === 0) {
-            return null;
-        }
-        const xi = ((x3 - x4) * (x1 * y2 - y1 * x2) - (x1 - x2) * (x3 * y4 - y3 * x4)) / d;
-        const yi = ((y3 - y4) * (x1 * y2 - y1 * x2) - (y1 - y2) * (x3 * y4 - y3 * x4)) / d;
-        return { x: xi, y: yi, };
-    };
-    Line2.intersectionAngle = (lineA, lineB) => {
-        const deltaAX = lineA.b.x - lineA.a.x;
-        const deltaAY = lineA.b.y - lineA.a.y;
-        const deltaBX = lineB.b.x - lineB.a.x;
-        const deltaBY = lineB.b.y - lineB.a.y;
-        const angle = Math.atan2(deltaAX * deltaBY - deltaAY * deltaBX, deltaAX * deltaBX + deltaAY * deltaBY);
-        return angle * (180 / Math.PI);
-    };
-    Line2.isOrthogonal = (line) => {
-        return line.a.x === line.b.x || line.a.y === line.b.y;
-    };
-    Line2.perpendicular = (line, pointOnLine) => {
-        const deltaX = line.a.x - line.b.x;
-        const deltaY = line.a.y - line.b.y;
-        const pointB = Point(pointOnLine.x - deltaY, pointOnLine.y + deltaX);
-        return Line2(pointB, pointOnLine);
-    };
-    Line2.projectPoint = (line, point2) => {
-        const perp = Line2.perpendicular(line, point2);
-        return Line2.intersection(line, perp);
-    };
-    Line2.pointAtPercentDistance = (line, distance2) => {
-        const hypotenuse = Line2.distance(line);
-        const r = distance2 * hypotenuse / hypotenuse;
-        return {
-            x: r * line.b.x + (1 - r) * line.a.x,
-            y: r * line.b.y + (1 - r) * line.a.y,
-        };
-    };
-    Line2.distance = (line) => {
-        return Point.distance(line.a, line.b);
-    };
-    return Line2;
-})();
 function linearGradientLine(angle) {
     var _a, _b;
     const rad = angle * Math.PI / 180;
@@ -35519,6 +35664,45 @@ var localPackageFallbackIdentifier = '|local|';
 function CustomProperties({ children, customProperties, }) {
     return /* @__PURE__ */ jsx57('div', { style: customProperties, children, });
 }
+var FormContainer = (props) => {
+    return /* @__PURE__ */ jsx58(FrameWithMotion, Object.assign(Object.assign({}, props), { as: 'form' }));
+};
+var FormButton = (props) => {
+    var _f;
+    const { __fromCanvasComponent, style: baseStyle2, } = props;
+    const layoutId = useLayoutId2(props);
+    const ref = useRef18(null);
+    const style = mergeWithDefaultStyle(baseStyle2 !== null && baseStyle2 !== void 0 ? baseStyle2 : {});
+    const dataProps = {
+        'data-layoutid': layoutId,
+    };
+    const isDisabled = Boolean(__fromCanvasComponent);
+    useMeasureLayout(props, ref);
+    return /* @__PURE__ */ jsx59(motion.input, Object.assign(Object.assign({ type: props.type, disabled: isDisabled }, dataProps), { layoutId,
+        ref, style: Object.assign(Object.assign({}, baseStyle2), style), value: (_f = props.value) !== null && _f !== void 0 ? _f : 'Submit' }));
+};
+function mergeWithDefaultStyle(style) {
+    return Object.assign({ display: 'block', padding: '12px', width: '100%', background: '#222', color: '#fff', borderRadius: '10px', border: '1px solid rgba(0,0,0,0.05)' }, style);
+}
+var FormPlainTextInput = (props) => {
+    const { __fromCanvasComponent, } = props;
+    const layoutId = useLayoutId2(props);
+    const ref = useRef19(null);
+    const dataProps = {
+        'data-layoutid': layoutId,
+    };
+    const isDisabled = Boolean(__fromCanvasComponent);
+    useMeasureLayout(props, ref);
+    const baseStyle2 = {
+        padding: '12px',
+        width: '100%',
+        background: '#f5f5f5',
+        borderRadius: '10px',
+        border: '1px solid rgba(0,0,0,0.05)',
+    };
+    return /* @__PURE__ */ jsx60(motion.input, Object.assign(Object.assign({ disabled: isDisabled }, dataProps), { layoutId,
+        ref, style: Object.assign(Object.assign({}, baseStyle2), props.style), placeholder: props.placeholder }));
+};
 var Image2 = /* @__PURE__ */ React85.forwardRef(function Image3(props, ref) {
     const { background, children, alt } = props, rest = __rest(props, ["background", "children", "alt"]);
     const style = Object.assign({}, rest.style);
@@ -35528,7 +35712,7 @@ var Image2 = /* @__PURE__ */ React85.forwardRef(function Image3(props, ref) {
     const MotionComponent = htmlElementAsMotionComponent(props.as);
     return /* @__PURE__ */ jsxs19(MotionComponent, Object.assign(Object.assign({}, rest), { style,
         ref, children: [
-            background && /* @__PURE__ */ jsx58(BackgroundImageComponent, { image: background, alt, }),
+            background && /* @__PURE__ */ jsx61(BackgroundImageComponent, { image: background, alt, }),
             children,
         ] }));
 });
@@ -35623,7 +35807,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(function Text3(props
     const { id: id3, name, html, htmlFromDesign, text, textFromDesign, fonts = [], width, height, left, right, top, bottom, center, className, stylesPresetsClassName, visible = true, opacity, rotation = 0, verticalAlignment = 'top', isEditable = false, willChangeTransform, environment: environment2 = RenderTarget.current, withExternalLayout = false, positionSticky, positionStickyTop, positionStickyRight, positionStickyBottom, positionStickyLeft, __htmlStructure, __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, children } = props, rest = __rest(props, ["id", "name", "html", "htmlFromDesign", "text", "textFromDesign", "fonts", "width", "height", "left", "right", "top", "bottom", "center", "className", "stylesPresetsClassName", "visible", "opacity", "rotation", "verticalAlignment", "isEditable", "willChangeTransform", "environment", "withExternalLayout", "positionSticky", "positionStickyTop", "positionStickyRight", "positionStickyBottom", "positionStickyLeft", "__htmlStructure", "__fromCanvasComponent", "_forwardedOverrideId", "_forwardedOverrides", "_usesDOMRect", "children"]);
     const parentSize = useParentSize();
     const layoutId = useLayoutId2(props);
-    const fallbackLayoutRef = useRef18(null);
+    const fallbackLayoutRef = useRef20(null);
     const layoutRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : fallbackLayoutRef;
     const { navigate, getRoute, } = useRouter();
     const currentRoute = useCurrentRoute();
@@ -35740,7 +35924,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(function Text3(props
         forceLayerBackingWithCSSProperties(style);
     }
     Object.assign(style, props.style);
-    return /* @__PURE__ */ jsx59(motion.div, Object.assign(Object.assign({ id: id3, ref: layoutRef }, rest), { style,
+    return /* @__PURE__ */ jsx62(motion.div, Object.assign(Object.assign({ id: id3, ref: layoutRef }, rest), { style,
         layoutId, 'data-framer-name': name, 'data-framer-component-type': 'DeprecatedRichText', 'data-center': center, className: cx(className, stylesPresetsClassName, richTextWrapperClassName), transformTemplate: template, dangerouslySetInnerHTML: { __html: innerHTMLWithReplacedFramerPageLinks, } }));
 });
 function convertVerticalAlignment2(verticalAlignment) {
@@ -35754,7 +35938,7 @@ function convertVerticalAlignment2(verticalAlignment) {
     }
 }
 function useLoadFonts(fonts, fromCanvasComponent, containerRef) {
-    const prevFontsRef = useRef18([]);
+    const prevFontsRef = useRef20([]);
     if (!isShallowEqualArray(prevFontsRef.current, fonts)) {
         prevFontsRef.current = fonts;
         fontStore.loadFonts(fonts).then(({ newlyLoadedFontCount, }) => {
@@ -35769,7 +35953,7 @@ function useLoadFonts(fonts, fromCanvasComponent, containerRef) {
 }
 var FitText = /* @__PURE__ */ forwardRef52((_f, ref) => {
     var { viewBoxScale, viewBox, children } = _f, props = __rest(_f, ["viewBoxScale", "viewBox", "children"]);
-    return /* @__PURE__ */ jsx60(motion.svg, Object.assign(Object.assign({ ref }, props), { viewBox, children: /* @__PURE__ */ jsx60(motion.foreignObject, {
+    return /* @__PURE__ */ jsx63(motion.svg, Object.assign(Object.assign({ ref }, props), { viewBox, children: /* @__PURE__ */ jsx63(motion.foreignObject, {
             width: '100%',
             height: '100%',
             className: 'framer-fit-text',
@@ -35785,7 +35969,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52((props, ref) => {
     const isOnCanvas = useIsOnFramerCanvas();
     const inCodeComponent = useContext162(ComponentContainerContext);
     const layoutId = useLayoutId2(props);
-    const fallbackRef = useRef19(null);
+    const fallbackRef = useRef21(null);
     const containerRef = ref !== null && ref !== void 0 ? ref : fallbackRef;
     useMeasureLayout(props, containerRef);
     useLoadFonts(fonts, __fromCanvasComponent, containerRef);
@@ -35811,8 +35995,9 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52((props, ref) => {
     const template = hasTransformTemplate ? (_f = props.transformTemplate) !== null && _f !== void 0 ? _f : transformTemplate(center) : void 0;
     if (!withExternalLayout) {
         if (frame2 && restrictedRenderTarget && !isAutoSized2) {
-            const rotate = Animatable.getNumber(rotation).toFixed(4);
-            containerStyle.transform = `translate(${frame2.x}px, ${frame2.y}px) rotate(${rotate}deg)`;
+            containerStyle.x = frame2.x;
+            containerStyle.y = frame2.y;
+            containerStyle.rotate = Animatable.getNumber(rotation);
             containerStyle.width = frame2.width;
             containerStyle.minWidth = frame2.width;
             containerStyle.height = frame2.height;
@@ -35853,7 +36038,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52((props, ref) => {
     const Component15 = htmlElementAsMotionComponent(props.as);
     if (isString22(props.viewBox)) {
         if (props.as !== void 0) {
-            return /* @__PURE__ */ jsx60(Component15, Object.assign(Object.assign({}, rest), { ref: containerRef, style: containerStyle, layoutId, transformTemplate: template, 'data-framer-name': name, 'data-framer-component-type': 'RichTextContainer', children: /* @__PURE__ */ jsx60(FitText, {
+            return /* @__PURE__ */ jsx63(Component15, Object.assign(Object.assign({}, rest), { ref: containerRef, style: containerStyle, layoutId, transformTemplate: template, 'data-framer-name': name, 'data-framer-component-type': 'RichTextContainer', children: /* @__PURE__ */ jsx63(FitText, {
                     viewBox,
                     viewBoxScale,
                     style: { width: '100%', height: '100%', },
@@ -35861,12 +36046,12 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52((props, ref) => {
                 }) }));
         }
         else {
-            return /* @__PURE__ */ jsx60(FitText, Object.assign(Object.assign({}, rest), { ref: containerRef, style: containerStyle, layoutId,
+            return /* @__PURE__ */ jsx63(FitText, Object.assign(Object.assign({}, rest), { ref: containerRef, style: containerStyle, layoutId,
                 viewBox,
                 viewBoxScale, transformTemplate: template, 'data-framer-name': name, 'data-framer-component-type': 'RichTextContainer', children: children && styleRichTextChildren(children, stylesPresetsClassNames, plainText) }));
         }
     }
-    return /* @__PURE__ */ jsx60(Component15, Object.assign(Object.assign({}, rest), { ref: containerRef, style: containerStyle, layoutId, transformTemplate: template, 'data-framer-name': name, 'data-framer-component-type': 'RichTextContainer', children: children && styleRichTextChildren(children, stylesPresetsClassNames, plainText) }));
+    return /* @__PURE__ */ jsx63(Component15, Object.assign(Object.assign({}, rest), { ref: containerRef, style: containerStyle, layoutId, transformTemplate: template, 'data-framer-name': name, 'data-framer-component-type': 'RichTextContainer', children: children && styleRichTextChildren(children, stylesPresetsClassNames, plainText) }));
 });
 function styleRichTextChildren(element, stylesPresetsClassNames, plainText) {
     let children = Children32.toArray(element.props.children);
@@ -35901,7 +36086,7 @@ var RichText = /* @__PURE__ */ forwardRef52((_f, ref) => {
             // We need to use the original prop name.
             [isString22(html) ? 'html' : 'htmlFromDesign']: content,
         };
-        return /* @__PURE__ */ jsx60(DeprecatedRichText, Object.assign(Object.assign(Object.assign({}, props), contentProp), { ref }));
+        return /* @__PURE__ */ jsx63(DeprecatedRichText, Object.assign(Object.assign(Object.assign({}, props), contentProp), { ref }));
     }
     if (!props.stylesPresetsClassNames && isString22(props.stylesPresetsClassName)) {
         const [h1, h2, h3, p, a,] = props.stylesPresetsClassName.split(' ');
@@ -35912,7 +36097,7 @@ var RichText = /* @__PURE__ */ forwardRef52((_f, ref) => {
             props.stylesPresetsClassNames = { h1, h2, h3, p, a, };
         }
     }
-    return /* @__PURE__ */ jsx60(RichTextContainer, Object.assign(Object.assign({}, props), { ref, children: isValidElement32(content) ? content : void 0 }));
+    return /* @__PURE__ */ jsx63(RichTextContainer, Object.assign(Object.assign({}, props), { ref, children: isValidElement32(content) ? content : void 0 }));
 });
 var key6 = 'calculatedPaths';
 function withShape(target) {
@@ -36326,8 +36511,8 @@ var package_default = {
         '@types/google.fonts': '1.0.3',
         '@types/hsluv': 'https://github.com/framer/typed_hsluv#bump',
         '@types/node': '^18.17.15',
-        '@types/react': '^18.0.26',
-        '@types/react-dom': '^18.0.10',
+        '@types/react': '^18.2.67',
+        '@types/react-dom': '^18.2.22',
         '@types/yargs': '^17.0.19',
         '@typescript-eslint/eslint-plugin': '^6.16.0',
         '@typescript-eslint/parser': '^6.16.0',
@@ -36343,7 +36528,7 @@ var package_default = {
         yargs: '^17.6.2',
     },
     peerDependencies: {
-        'framer-motion': '11.0.7',
+        'framer-motion': '11.0.11-sync.4',
         react: '^18.2.0',
         'react-dom': '^18.2.0',
     },
@@ -36383,7 +36568,7 @@ MotionValue.prototype.addChild = function ({ transformer = (v) => v, }) {
 if (false) {
     MainLoop.start();
 }
-export { _injectRuntime, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, AnchorLinkTarget, Animatable, animate2 as animate, AnimatePresence, AnimateSharedLayout, animateValue, animateVisualElement, animationControls, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform, calcLength, calculateRect, callEach, cancelFrame, cancelSync, CanvasStore, checkTargetForNewValues, circIn, circInOut, circOut, clamp, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertPresentationTree, convertPropsToDeviceOptions, createBox, createData, createDesignComponent, createDomMotionComponent, createFramerPageLink, createMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, domMax, DragControls, Draggable, easeIn, easeInOut, easeOut, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, filterProps, finiteNumber, FlatTree, Floating, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, FramerEvent, FramerEventListener, FramerEventSession, FrameWithMotion, GamepadContext, GeneratedComponentContext, getComponentSize, getDevicePreset, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getMeasurableCodeComponentChildren, getMergedConstraintsProps, getPropertyControls, getWhereExpressionFromPathVariables, gradientForShape, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, isAnimatable2 as isAnimatable, isBrowser, isDesignDefinition, isDragActive, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isMotionComponent, isMotionValue2 as isMotionValue, isOfAnnotatedType, isOverride, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStraightCurve, isValidMotionProp, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, memoize2 as memoize, mirrorEasing, mix, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, NotFoundError, ObservableObject, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseFramerPageLink, pathDefaults, PathSegment, PathVariablesContext, pipe, Point, PresenceContext, print, progress, PropertyOverrides, PropertyStore, propsForLink, px, QueryEngine, RadialGradient, Rect, removeHiddenBreakpointLayers, RenderNodeProvider, RenderTarget, Reorder, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, RichText, roundedNumber, roundedNumberString, roundWithOffset, Scroll, scroll, scrollInfo, setGlobalRenderEnvironment, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, steps, StyleSheetContext, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, Text, throttle, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformString, transformTemplate, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useLocale, useLocaleCode, useLocaleInfo, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePresence, usePrototypeNavigate, useProvidedWindow, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, version, VisualElement, visualElementStore, warning, WindowContext, withCSS, withFX, withGeneratedLayoutId, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, WithOverride, withParallaxTransform, withPath, withShape, withStyleAppearEffect, withVariantAppearEffect, withVariantFX, wrap, };
+export { _injectRuntime, addActionControls, addFonts, addPointerEvent, addPointerInfo, addPropertyControls, addScaleCorrector, AnchorLinkTarget, Animatable, animate2 as animate, AnimatePresence, AnimateSharedLayout, animateValue, animateVisualElement, animationControls, animations, annotateTypeOnStringify, anticipate, AnyInterpolation, AutomaticLayoutIds, BackgroundImage, backgroundImageFromProps, backIn, backInOut, backOut, BezierAnimator, BoxShadow, buildTransform, calcLength, calculateRect, callEach, cancelFrame, cancelSync, CanvasStore, checkTargetForNewValues, circIn, circInOut, circOut, clamp, collectVisualStyleFromProps, Color, color, ColorFormat, ColorMixModelType, combinedCSSRulesForPreview, complex, ComponentContainerContext, ComponentPresetsConsumer, ComponentPresetsProvider, ComponentViewportProvider, ConstraintMask, constraintsEnabled, ConstraintValues, Container, ControlType, ConvertColor, convertPresentationTree, convertPropsToDeviceOptions, createBox, createData, createDesignComponent, createDomMotionComponent, createFramerPageLink, createMotionComponent, createScopedAnimate, cssBackgroundSize, cubicBezier, CustomCursorHost, CustomProperties, cx, CycleVariantState, Data, DataContext, DataObserver, DataObserverContext, debounce, defaultDeviceProps, degreesToRadians, delay, DeprecatedComponentContainer, DeprecatedFrameWithEvents, DeprecatedLayoutGroupContext, DeprecatedLayoutGroupContext as LayoutGroupContext, Device, DeviceCodeComponent, devicePresets, DimensionType, disableInstantTransitions, dispatchKeyDownEvent, distance, distance2D, DOM, domAnimation, domMax, DragControls, Draggable, easeIn, easeInOut, easeOut, EmptyState, environment, ErrorPlaceholder, executeInRenderEnvironment, filterProps, finiteNumber, FlatTree, Floating, FontSourceNames, fontStore, forceLayerBackingWithCSSProperties, FormButton, FormContainer, FormPlainTextInput, fraction, Frame, frame, frameData, frameFromElement, frameFromElements, FramerAnimation, framerAppearAnimationScriptKey, framerAppearEffects, framerAppearIdKey, framerAppearTransformTemplateToken, FramerEvent, FramerEventListener, FramerEventSession, FrameWithMotion, GamepadContext, GeneratedComponentContext, getComponentSize, getDevicePreset, getFonts, getFontsFromComponentPreset, getFontsFromSharedStyle, getMeasurableCodeComponentChildren, getMergedConstraintsProps, getPropertyControls, getWhereExpressionFromPathVariables, gradientForShape, Image2 as Image, imagePatternPropsForFill, imageUrlForAsset, inferInitialRouteFromPath, injectComponentCSSRules, installFlexboxGapWorkaroundIfNeeded, InternalID, interpolate, invariant, inView, isAnimatable2 as isAnimatable, isBrowser, isDesignDefinition, isDragActive, isEqual, isFiniteNumber, isFractionDimension, isFramerGamepadKeydownData, isFramerPageLink, isGapEnabled, isMotionComponent, isMotionValue2 as isMotionValue, isOfAnnotatedType, isOverride, isReactDefinition, isRelativeNumber, isShallowEqualArray, isStraightCurve, isValidMotionProp, Layer, LayoutGroup, LayoutIdContext, lazy, LazyMotion, LazyValue, LibraryFeaturesProvider, Line, LinearGradient, Link, loadFont, loadJSON, localPackageFallbackIdentifier, localShadowFrame, m, MainLoop, makePaddingString, makeUseVisualState, memoize2 as memoize, mirrorEasing, mix, modulate, motion, MotionConfig, MotionConfigContext, MotionContext, MotionGlobalConfig, MotionSetup, MotionValue, motionValue, NavigateTo, NavigationCallbackProvider, NavigationConsumer, NavigationTransitionType, NavigationWrapper as Navigation, NotFoundError, ObservableObject, optimizeAppear, optimizeAppearTransformTemplate, optimizedAppearDataAttribute, paddingFromProps, Page3 as Page, PageEffectsProvider, PageRoot, ParentSizeState, parseFramerPageLink, pathDefaults, PathSegment, PathVariablesContext, pipe, Point, Polygon, PresenceContext, print, progress, PropertyOverrides, PropertyStore, propsForLink, px, QueryEngine, RadialGradient, Rect, removeHiddenBreakpointLayers, RenderNodeProvider, RenderTarget, Reorder, resolveLink, ResolveLinks, resolveMotionValue, resolvePageScope, reverseEasing, RichText, roundedNumber, roundedNumberString, roundWithOffset, Scroll, scroll, scrollInfo, setGlobalRenderEnvironment, Shadow, sharedSVGManager, shouldOpenLinkInNewTab, Size, spring, SpringAnimator, SSRVariants, Stack, stagger, startAnimation, startOptimizedAppearAnimation, steps, StyleSheetContext, SVG, SwitchLayoutGroupContext, sync, systemFontFamilyName, Text, throttle, toFlexDirection, toJustifyOrAlignment, toSVGPath, transform, transformString, transformTemplate, unwrapMotionComponent, useActiveTargetCallback, useActiveVariantCallback, useAddVariantProps, useAnimate, useAnimatedState, useAnimatedState as useDeprecatedAnimatedState, useAnimation, useAnimationControls, useAnimationFrame, useBreakpointVariants, useComponentViewport, useConstant2 as useConstant, useCurrentPathVariables, useCurrentRouteId, useCustomCursors, useCycle, useDataRecord, useDomEvent, useDragControls, useDynamicRefs, useElementScroll, useForceUpdate, useGamepad, useHotkey, useHydratedBreakpointVariants, useInitialRouteComponent, useInstantLayoutTransition, useInstantTransition, useInvertedScale, useInvertedScale as useDeprecatedInvertedScale, useInView, useIsInCurrentNavigationTarget, useIsomorphicLayoutEffect, useIsOnFramerCanvas, useIsPresent, useLocale, useLocaleCode, useLocaleInfo, useLocalizationInfo, useMeasureLayout, useMotionTemplate, useMotionValue, useMotionValueEvent, useNavigate, useNavigation, useObserveData, useOnAppear, useOnCurrentTargetChange, useOnVariantChange, useOverlayState, usePageEffects, usePresence, usePrototypeNavigate, useProvidedWindow, useQueryCount, useQueryData, useReducedMotion, useReducedMotionConfig, useRenderEnvironment, useResetProjection, useRoute, useRouteAnchor, useRouteElementId, useRouteHandler, useRouter, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVariantState, useVelocity, useViewportScroll, useWillChange, ValueInterpolation, valueToDimensionType, VariantSelector, Vector, VectorGroup, version, VisualElement, visualElementStore, warning, WindowContext, withCSS, withFX, withGeneratedLayoutId, withMappedReactProps, withMeasuredSize, WithNavigator, withOpacity, WithOverride, withParallaxTransform, withPath, withShape, withStyleAppearEffect, withVariantAppearEffect, withVariantFX, wrap, };
 /**
  * @license Emotion v11.0.0
  * MIT License