unframer 2.0.0 → 2.0.2

package/src/framer.js

@@ -1,5 +1,5 @@
 // @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';
@@ -19,6 +19,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';
@@ -1937,7 +1938,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,) => {
@@ -3386,8 +3387,8 @@ function updateMotionValuesFromProps(element, next, prev,) {
       }
       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.`,
+          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,)) {
@@ -3418,6 +3419,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',
@@ -3575,7 +3582,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,
@@ -5648,7 +5655,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) `;
     }
@@ -7145,7 +7155,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: {
@@ -9076,7 +9089,7 @@ var cancelSync = stepsOrder.reduce((acc, key7,) => {
   return acc;
 }, {},);
 
-// https :https://app.framerstatic.com/framer.Q2DHSUSM.js
+// https :https://app.framerstatic.com/framer.PRO3WDEJ.js
 import { Component as Component2, } from 'react';
 import React12 from 'react';
 import { jsx as _jsx5, } from 'react/jsx-runtime';
@@ -9276,7 +9289,12 @@ 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 { jsx as jsx58, } from 'react/jsx-runtime';
+import { jsx as jsx59, } from 'react/jsx-runtime';
+import React86 from 'react';
+import { jsx as jsx60, jsxs as jsxs19, } from 'react/jsx-runtime';
+import React87 from 'react';
+import { jsx as jsx61, jsxs as jsxs20, } from 'react/jsx-runtime';
 import {
   Children as Children32,
   cloneElement as cloneElement32,
@@ -9286,10 +9304,10 @@ import {
   useInsertionEffect as useInsertionEffect42,
   useRef as useRef19,
 } from 'react';
-import * as React86 from 'react';
+import * as React88 from 'react';
 import { useRef as useRef18, } from 'react';
-import { jsx as jsx59, } from 'react/jsx-runtime';
-import { jsx as jsx60, } from 'react/jsx-runtime';
+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,) {
@@ -10445,12 +10463,13 @@ var require_fontfaceobserver_standalone = __commonJS({
   },
 },);
 function renderPage(Page4, defaultPageStyle,) {
-  return React12.isValidElement(Page4,)
-    ? React12.cloneElement(Page4, { style: defaultPageStyle, },)
-    : React12.createElement(Page4, { style: defaultPageStyle, },);
+  const style = { style: defaultPageStyle, };
+  return React12.isValidElement(Page4,) ? React12.cloneElement(Page4, style,) : React12.createElement(Page4, style,);
 }
 var NotFoundError = class extends Error {
 };
+var ErrorBoundaryCaughtError = class extends Error {
+};
 var ErrorBoundary = class extends Component2 {
   constructor(props,) {
     super(props,);
@@ -10477,7 +10496,9 @@ var ErrorBoundary = class extends Component2 {
       return this.props.children;
     }
     if (!(this.state.error instanceof NotFoundError)) {
-      throw this.state.error;
+      const error = new ErrorBoundaryCaughtError();
+      error.cause = this.state.error;
+      throw error;
     }
     const { notFoundPage, defaultPageStyle, } = this.props;
     if (!notFoundPage) {
@@ -11359,17 +11380,17 @@ function RoutesProvider({ routes, children, },) {
   return _jsx2(RouterContext.Provider, { value: { getRoute, }, children, },);
 }
 var SuspenseErrorBoundary = class extends Component22 {
-  constructor(props,) {
-    super(props,);
+  constructor() {
+    super(...arguments,);
     this.state = { error: void 0, };
   }
   static getDerivedStateFromError(error,) {
-    console.error('Error in SuspenseErrorBoundary (getDerivedStateFromError).', error,);
+    console.error('Derived error in SuspenseErrorBoundary', error,);
     return { error, };
   }
   componentDidCatch(error, errorInfo,) {
     var _a;
-    console.error('Caught error in in SuspenseErrorBoundary.', error, errorInfo,);
+    console.error('Caught error in SuspenseErrorBoundary', error, errorInfo,);
     (_a = window.__framer_events) === null || _a === void 0 ? void 0 : _a.push([
       'published_site_load_recoverable_error',
       {
@@ -11382,6 +11403,9 @@ var SuspenseErrorBoundary = class extends Component22 {
     if (this.state.error === void 0) {
       return this.props.children;
     }
+    if (this.state.error instanceof ErrorBoundaryCaughtError) {
+      throw this.state.error.cause;
+    }
     return _jsx3(Suspense, { children: this.props.fallbackChildren, },);
   }
 };
@@ -12139,6 +12163,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;
   };
@@ -12168,24 +12195,6 @@ function Point(x, y,) {
     };
   }
   Point2.center = center;
-  function insidePoints(point2, points,) {
-    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 = ((_a = points[i]) == null ? void 0 : _a.x) ?? 0;
-      const yi = ((_b = points[i]) == null ? void 0 : _b.y) ?? 0;
-      const xj = ((_c = points[j]) == null ? void 0 : _c.x) ?? 0;
-      const yj = ((_d = points[j]) == null ? void 0 : _d.y) ?? 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',
@@ -14908,15 +14917,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,
@@ -15325,13 +15337,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;
@@ -16153,6 +16170,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;
@@ -17017,6 +17036,7 @@ var hideScrollbars = [
   `[data-hide-scrollbars="true"]::-webkit-scrollbar { width: 0px; height: 0px; }`,
   `[data-hide-scrollbars="true"]::-webkit-scrollbar-thumb { background: transparent; }`,
 ];
+var formInputRules = [`[data-framer-component-type="Form"] input { padding: var(--input-padding); }`,];
 var frameCSSRules = (isPreview,) => {
   return isPreview ? frameCSS : [];
 };
@@ -17038,6 +17058,7 @@ var combineCSSRules = (isPreview,) => [
   ...svgCSSRules,
   ...resetCSS,
   ...hideScrollbars,
+  ...formInputRules,
 ];
 export var combinedCSSRules = combineCSSRules(false,);
 var combinedCSSRulesForPreview = combineCSSRules(true,);
@@ -17099,6 +17120,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;
@@ -20044,7 +20067,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) {
@@ -20659,7 +20682,7 @@ var VisibleFrame = /* @__PURE__ */ forwardRef4(function VisibleFrame2(props, for
   const fallbackRef = useRef62(null,);
   const ref = forwardedRef ?? fallbackRef;
   const dataProps = {
-    'data-framer-component-type': 'Frame',
+    'data-framer-component-type': props.componentType ?? 'Frame',
     'data-framer-cursor': cursor,
     'data-framer-highlight': cursor === 'pointer' ? true : void 0,
     'data-layoutid': layoutId,
@@ -24558,6 +24581,9 @@ function makePaddingString({
   bottom,
   right,
 },) {
+  if (top === right && right === bottom && bottom === left) {
+    return `${top}px`;
+  }
   return `${top}px ${right}px ${bottom}px ${left}px`;
 }
 function triggerStackReflow(element, display,) {
@@ -27682,7 +27708,7 @@ function getTransition(value,) {
   }
   return value == null ? void 0 : value.transition;
 }
-async function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId,) {
+async function runEffectAnimation(target, effect, shouldReduceMotion, ref, appearId, instant,) {
   const transition = getTransition(target,);
   return Promise.all(
     effectValuesKeys.map((key7,) => {
@@ -27709,14 +27735,17 @@ async function runEffectAnimation(target, effect, shouldReduceMotion, ref, appea
               elapsed: safeWindow.HandoffAppearAnimations(appearId, key7, motionValue2, frame,),
             }
             : void 0;
-        const opts = {
-          ...transition,
-          velocity: 0,
-          elapsed: 0,
-          ...handoff,
-          onComplete: () => resolve(),
-        };
-        animate(motionValue2, value, opts,);
+        if (instant) {
+          motionValue2.set(value,);
+        } else {
+          animate(motionValue2, value, {
+            ...transition,
+            velocity: 0,
+            elapsed: 0,
+            ...handoff,
+            onComplete: () => resolve(),
+          },);
+        }
       },);
     },),
   );
@@ -27726,16 +27755,6 @@ var presenceOptionsKeys = /* @__PURE__ */ new Set([
   'presenceAnimate',
   'presenceExit',
 ],);
-function getVisualElementBase(visualElement, style,) {
-  const ctx = visualElement.getVariantContext();
-  const base = { ...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,
@@ -27754,6 +27773,9 @@ function usePresenceAnimation(
   const animateConfig = presenceAnimate ?? motionAnimate;
   const exit = 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 ?? style;
@@ -27770,43 +27792,51 @@ function usePresenceAnimation(
     }
     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,) {
@@ -28201,6 +28231,9 @@ function useStyleTransform({
             if (pageInputRange.length !== outputRange[key7].length) {
               continue;
             }
+            if (outputRange[key7][0] === void 0) {
+              continue;
+            }
             effect.values[key7].set(transform(scrollY.progress, pageInputRange, outputRange[key7],),);
           }
         },
@@ -28230,6 +28263,9 @@ function useStyleTransform({
           if (scrollYInputRange.length !== effectKeyOutputRange[key7].length) {
             continue;
           }
+          if (effectKeyOutputRange[key7][0] === void 0) {
+            continue;
+          }
           effect.values[key7].set(transform(scrollY.current, scrollYInputRange, effectKeyOutputRange[key7],),);
         }
       },);
@@ -28909,6 +28945,181 @@ 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 _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 = ((_a = polygonPoints2[i]) == null ? void 0 : _a.x) ?? 0;
+      const yi = ((_b = polygonPoints2[i]) == null ? void 0 : _b.y) ?? 0;
+      const xj = ((_c = polygonPoints2[j]) == null ? void 0 : _c.x) ?? 0;
+      const yj = ((_d = polygonPoints2[j]) == null ? void 0 : _d.y) ?? 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':
@@ -29020,7 +29231,7 @@ function getSafePlacementFloatingPositionRect(
   ];
 }
 function preferredPoint(a, b, points,) {
-  if (Point.insidePoints(a, [b, ...points,],)) {
+  if (Polygon.containsPoint([b, ...points,], a,)) {
     return b;
   }
   return a;
@@ -33264,6 +33475,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':
@@ -33872,15 +34087,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,
@@ -34043,61 +34261,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;
@@ -37512,19 +37675,131 @@ function CustomProperties({
 },) {
   return /* @__PURE__ */ jsx57('div', { style: customProperties, children, },);
 }
-var Image2 = /* @__PURE__ */ React85.forwardRef(function Image3(props, ref,) {
+var FormButton = /* @__PURE__ */ React85.forwardRef(function FormButon(props, ref,) {
+  const [submitting, setSubmitting,] = React85.useState(false,);
+  const { style: baseStyle2, } = props;
+  const style = mergeWithDefaultStyle(baseStyle2 ?? {},);
+  const onSubmit = () => {
+    setSubmitting(true,);
+    setTimeout(() => {
+      setSubmitting(false,);
+    }, 500,);
+  };
+  return /* @__PURE__ */ jsx58(
+    motion.input,
+    {
+      type: props.type,
+      'data-submitting': submitting,
+      disabled: props.isDisabled || submitting,
+      ref,
+      style,
+      value: submitting ? 'Submitting' : props.value ?? 'Submit',
+      onClick: onSubmit,
+    },
+  );
+},);
+function mergeWithDefaultStyle(style,) {
+  return {
+    display: 'block',
+    padding: '12px',
+    fontSize: '14px',
+    width: '100%',
+    fontWeight: 'bold',
+    cursor: 'pointer',
+    background: '#222',
+    color: '#fff',
+    borderRadius: '10px',
+    border: '1px solid rgba(0,0,0,0.05)',
+    ...style,
+  };
+}
+var FormContainer = ({ action: _, formId, ...props },) => {
+  const handleSubmit = async (event,) => {
+    event.preventDefault();
+    const data2 = new URLSearchParams();
+    for (const [key7, value,] of new FormData(event.currentTarget,)) {
+      data2.append(key7, value,);
+    }
+    await fetch('https://hooks.zapier.com/hooks/catch/8935032/3pzgf76/', {
+      body: new URLSearchParams(data2,),
+      method: 'POST',
+    },);
+  };
+  return /* @__PURE__ */ jsx59(motion.form, { ...props, 'data-formid': formId, onSubmit: handleSubmit, children: props.children, },);
+};
+var passwordManagerIgnoreDataProps = {
+  // 1Password
+  'data-1p-ignore': true,
+  // LastPass
+  'data-lpignore': true,
+};
+var sensibleInputDefaults = {
+  autocomplete: 'off',
+};
+var labelStyles = {
+  display: 'block',
+  marginBottom: 8,
+  fontSize: 12,
+  color: '#000',
+  width: '100%',
+  fontWeight: 'bold',
+  textTransform: 'capitalize',
+};
+var FormPlainTextInput = /* @__PURE__ */ React86.forwardRef(function FormPlainTextInput2(props, ref,) {
+  const dataProps = {
+    ...sensibleInputDefaults,
+    ...passwordManagerIgnoreDataProps,
+  };
+  const baseStyle2 = {
+    fontSize: '14px',
+    width: '100%',
+    background: '#f5f5f5',
+    borderRadius: '10px',
+    border: '1px solid rgba(0,0,0,0.05)',
+  };
+  const input = /* @__PURE__ */ jsx60(
+    motion.input,
+    {
+      id: props.inputName,
+      disabled: props.isDisabled,
+      ...dataProps,
+      type: props.type,
+      required: props.required,
+      autoFocus: props.autoFocus,
+      name: props.inputName,
+      style: baseStyle2,
+      placeholder: props.placeholder,
+    },
+  );
+  if (props.label) {
+    return /* @__PURE__ */ jsx60('div', {
+      ref,
+      style: { width: '100%', },
+      children: /* @__PURE__ */ jsxs19('label', {
+        style: { width: '100%', },
+        htmlFor: props.inputName,
+        children: [
+          /* @__PURE__ */ jsx60('span', { style: labelStyles, children: props.label, },),
+          input,
+        ],
+      },),
+    },);
+  }
+  return /* @__PURE__ */ jsx60('div', { ref, style: { width: '100%', }, children: input, },);
+},);
+var Image2 = /* @__PURE__ */ React87.forwardRef(function Image3(props, ref,) {
   const { background, children, alt, ...rest } = props;
   const style = { ...rest.style, };
   if (background) {
     delete style.background;
   }
   const MotionComponent = htmlElementAsMotionComponent(props.as,);
-  return /* @__PURE__ */ jsxs19(MotionComponent, {
+  return /* @__PURE__ */ jsxs20(MotionComponent, {
     ...rest,
     style,
     ref,
     children: [
-      background && /* @__PURE__ */ jsx58(BackgroundImageComponent, { image: background, alt, },),
+      background && /* @__PURE__ */ jsx61(BackgroundImageComponent, { image: background, alt, },),
       children,
     ],
   },);
@@ -37659,7 +37934,7 @@ function escapeHTML2(str,) {
 }
 var deprecatedRichTextPlaceholder = '{{ text-placeholder }}';
 var richTextWrapperClassName = 'rich-text-wrapper';
-var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
+var DeprecatedRichText = /* @__PURE__ */ React88.forwardRef(
   function Text3(props, forwardedRef,) {
     const {
       id: id3,
@@ -37707,7 +37982,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
     const currentRoute = useCurrentRoute();
     useRoutePreloader(props.preload ?? [],);
     useMeasureLayout(props, layoutRef,);
-    const inCodeComponent = React86.useContext(ComponentContainerContext,);
+    const inCodeComponent = React88.useContext(ComponentContainerContext,);
     const isOnCanvas = useIsOnFramerCanvas();
     let textOrOverride = text;
     const forwardedOverrideId = _forwardedOverrideId ?? id3;
@@ -37730,13 +38005,13 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
       innerHTML = htmlFromDesign;
     }
     const implicitPathVariables = useImplicitPathVariables();
-    const innerHTMLWithReplacedFramerPageLinks = React86.useMemo(() => {
+    const innerHTMLWithReplacedFramerPageLinks = React88.useMemo(() => {
       if (isOnCanvas || !getRoute || !currentRoute) {
         return innerHTML;
       }
       return replaceFramerPageLinks(innerHTML, getRoute, currentRoute, implicitPathVariables,);
     }, [isOnCanvas, innerHTML, getRoute, currentRoute, implicitPathVariables,],);
-    React86.useEffect(() => {
+    React88.useEffect(() => {
       const container = layoutRef.current;
       if (container === null) {
         return;
@@ -37757,7 +38032,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
       };
     }, [navigate, implicitPathVariables,],);
     useLoadFonts(fonts, __fromCanvasComponent, layoutRef,);
-    React86.useInsertionEffect(() => {
+    React88.useInsertionEffect(() => {
       injectComponentCSSRules();
     }, [],);
     if (!visible) {
@@ -37813,7 +38088,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
       forceLayerBackingWithCSSProperties(style,);
     }
     Object.assign(style, props.style,);
-    return /* @__PURE__ */ jsx59(
+    return /* @__PURE__ */ jsx62(
       motion.div,
       {
         id: id3,
@@ -37857,11 +38132,11 @@ function useLoadFonts(fonts, fromCanvasComponent, containerRef,) {
 }
 var FitText = /* @__PURE__ */ forwardRef52(
   ({ viewBoxScale, viewBox, children, ...props }, ref,) => {
-    return /* @__PURE__ */ jsx60(motion.svg, {
+    return /* @__PURE__ */ jsx63(motion.svg, {
       ref,
       ...props,
       viewBox,
-      children: /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsx63(
         motion.foreignObject,
         {
           width: '100%',
@@ -37944,8 +38219,9 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52(
     const template = hasTransformTemplate ? props.transformTemplate ?? 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;
@@ -37984,7 +38260,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52(
     const Component15 = htmlElementAsMotionComponent(props.as,);
     if (isString22(props.viewBox,)) {
       if (props.as !== void 0) {
-        return /* @__PURE__ */ jsx60(
+        return /* @__PURE__ */ jsx63(
           Component15,
           {
             ...rest,
@@ -37994,7 +38270,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52(
             transformTemplate: template,
             'data-framer-name': name,
             'data-framer-component-type': 'RichTextContainer',
-            children: /* @__PURE__ */ jsx60(
+            children: /* @__PURE__ */ jsx63(
               FitText,
               {
                 viewBox,
@@ -38006,7 +38282,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52(
           },
         );
       } else {
-        return /* @__PURE__ */ jsx60(
+        return /* @__PURE__ */ jsx63(
           FitText,
           {
             ...rest,
@@ -38023,7 +38299,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52(
         );
       }
     }
-    return /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx63(
       Component15,
       {
         ...rest,
@@ -38071,7 +38347,7 @@ var RichText = /* @__PURE__ */ forwardRef52(
         // We need to use the original prop name.
         [isString22(html,) ? 'html' : 'htmlFromDesign']: content,
       };
-      return /* @__PURE__ */ jsx60(DeprecatedRichText, { ...props, ...contentProp, ref, },);
+      return /* @__PURE__ */ jsx63(DeprecatedRichText, { ...props, ...contentProp, ref, },);
     }
     if (!props.stylesPresetsClassNames && isString22(props.stylesPresetsClassName,)) {
       const [h1, h2, h3, p, a,] = props.stylesPresetsClassName.split(' ',);
@@ -38081,7 +38357,7 @@ var RichText = /* @__PURE__ */ forwardRef52(
         props.stylesPresetsClassNames = { h1, h2, h3, p, a, };
       }
     }
-    return /* @__PURE__ */ jsx60(RichTextContainer, { ...props, ref, children: isValidElement32(content,) ? content : void 0, },);
+    return /* @__PURE__ */ jsx63(RichTextContainer, { ...props, ref, children: isValidElement32(content,) ? content : void 0, },);
   },
 );
 var key6 = 'calculatedPaths';
@@ -38481,7 +38757,9 @@ var package_default = {
   scripts: {
     prepublishOnly: 'make build',
     coverage: 'yarn :jest --coverage',
-    lint: 'yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet',
+    lint: 'yarn format-check:ts && yarn :eslint ./src --ext .ts,.tsx --format codeframe --quiet',
+    'format:ts': 'yarn :format "src/**/*.{ts,tsx}"',
+    'format-check:ts': 'yarn :format-check "src/**/*.{ts,tsx}"',
     'lint:fix': 'yarn lint --fix --cache',
     test: 'yarn :jest',
     watch: 'yarn :jest --watch',
@@ -38504,8 +38782,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',
@@ -38521,7 +38799,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',
   },
@@ -38639,6 +38917,7 @@ export {
   DataObserverContext,
   debounce,
   defaultDeviceProps,
+  degreesToRadians,
   delay,
   DeprecatedComponentContainer,
   DeprecatedFrameWithEvents,
@@ -38671,6 +38950,9 @@ export {
   FontSourceNames,
   fontStore,
   forceLayerBackingWithCSSProperties,
+  FormButton,
+  FormContainer,
+  FormPlainTextInput,
   fraction,
   Frame,
   frame,
@@ -38778,6 +39060,7 @@ export {
   PathVariablesContext,
   pipe,
   Point,
+  Polygon,
   PresenceContext,
   print,
   progress,
@@ -38885,6 +39168,7 @@ export {
   usePresence,
   usePrototypeNavigate,
   useProvidedWindow,
+  useQueryCount,
   useQueryData,
   useReducedMotion,
   useReducedMotionConfig,