unframer 2.6.0 → 2.6.1

package/esm/framer.js

@@ -158,7 +158,7 @@ var SwitchLayoutGroupContext = createContext({});
 var LazyContext = createContext({
     strict: false,
 });
-var Queue = /*#__PURE__*/ class {
+var Queue = class {
     constructor() {
         this.order = [];
         this.scheduled = /* @__PURE__ */ new Set();
@@ -1498,7 +1498,7 @@ function flushKeyframeResolvers() {
     readAllKeyframes();
     measureAllKeyframes();
 }
-var KeyframeResolver = /*#__PURE__*/ class {
+var KeyframeResolver = class {
     constructor(unresolvedKeyframes, onComplete, name, motionValue2, element, isAsync = false) {
         this.isComplete = false;
         this.isAsync = false;
@@ -1753,7 +1753,7 @@ function getFinalKeyframe(keyframes2, { repeat, repeatType = 'loop', }, finalKey
     const index = repeat && repeatType !== 'loop' && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
     return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
 }
-var BaseAnimation = /*#__PURE__*/ class {
+var BaseAnimation = class {
     constructor(_j) {
         var { autoplay = true, delay: delay2 = 0, type = 'keyframes', repeat = 0, repeatDelay = 0, repeatType = 'loop' } = _j, options = __rest(_j, ["autoplay", "delay", "type", "repeat", "repeatDelay", "repeatType"]);
         this.isStopped = false;
@@ -1862,7 +1862,7 @@ var generators = {
     spring,
 };
 var percentToProgress = (percent2) => percent2 / 100;
-var MainThreadAnimation = /*#__PURE__*/ class extends BaseAnimation {
+var MainThreadAnimation = class extends BaseAnimation {
     constructor(_j) {
         var { KeyframeResolver: KeyframeResolver$1 = KeyframeResolver } = _j, options = __rest(_j, ["KeyframeResolver"]);
         super(options);
@@ -2285,7 +2285,7 @@ function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, n
         }
     }
 }
-var DOMKeyframesResolver = /*#__PURE__*/ class extends KeyframeResolver {
+var DOMKeyframesResolver = class extends KeyframeResolver {
     constructor(unresolvedKeyframes, onComplete, name, motionValue2) {
         super(unresolvedKeyframes, onComplete, name, motionValue2, motionValue2 === null || motionValue2 === void 0 ? void 0 : motionValue2.owner, true);
     }
@@ -2467,7 +2467,7 @@ function pregenerateKeyframes(keyframes2, options) {
         ease: 'linear',
     };
 }
-var AcceleratedAnimation = /*#__PURE__*/ class extends BaseAnimation {
+var AcceleratedAnimation = class extends BaseAnimation {
     constructor(options) {
         super(options);
         const { name, motionValue: motionValue2, keyframes: keyframes2, } = this.options;
@@ -2658,7 +2658,7 @@ function moveItem([...arr], fromIndex, toIndex) {
     }
     return arr;
 }
-var SubscriptionManager = /*#__PURE__*/ class {
+var SubscriptionManager = class {
     constructor() {
         this.subscriptions = [];
     }
@@ -2694,7 +2694,7 @@ var isFloat = (value) => {
 var collectMotionValues = {
     current: void 0,
 };
-var MotionValue = /*#__PURE__*/ class {
+var MotionValue = class {
     /**
      * @param init - The initiating value
      * @param config - Optional configuration options
@@ -3016,7 +3016,7 @@ function observeTimeline(update, timeline) {
     return () => cancelFrame(onFrame);
 }
 var supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
-var GroupPlaybackControls = /*#__PURE__*/ class {
+var GroupPlaybackControls = class {
     constructor(animations2) {
         this.stop = () => this.runAll('stop');
         this.animations = animations2.filter(Boolean);
@@ -3478,14 +3478,14 @@ function createState() {
         exit: createTypeState(),
     };
 }
-var Feature = /*#__PURE__*/ class {
+var Feature = class {
     constructor(node) {
         this.isMounted = false;
         this.node = node;
     }
     update() { }
 };
-var AnimationFeature = /*#__PURE__*/ class extends Feature {
+var AnimationFeature = class extends Feature {
     /**
      * We dynamically generate the AnimationState manager as it contains a reference
      * to the underlying animation library. We only want to load that if we load this,
@@ -3518,7 +3518,7 @@ var AnimationFeature = /*#__PURE__*/ class extends Feature {
     unmount() { }
 };
 var id = 0;
-var ExitAnimationFeature = /*#__PURE__*/ class extends Feature {
+var ExitAnimationFeature = class extends Feature {
     constructor() {
         super(...arguments);
         this.id = id++;
@@ -3629,7 +3629,7 @@ function isPresent(context) {
     return context === null ? true : context.isPresent;
 }
 var compareByDepth = (a, b) => a.depth - b.depth;
-var FlatTree = /*#__PURE__*/ class {
+var FlatTree = class {
     constructor() {
         this.children = [];
         this.isDirty = false;
@@ -3746,7 +3746,7 @@ function getClosestProjectingNode(visualElement) {
         return void 0;
     return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
-var VisualElement = /*#__PURE__*/ class {
+var VisualElement = class {
     /**
      * This method takes React props and returns found MotionValues. For example, HTML
      * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
@@ -4510,13 +4510,13 @@ function addHoverEvent(node, isActive) {
         passive: !node.getProps()[callbackName],
     });
 }
-var HoverGesture = /*#__PURE__*/ class extends Feature {
+var HoverGesture = class extends Feature {
     mount() {
         this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false));
     }
     unmount() { }
 };
-var FocusGesture = /*#__PURE__*/ class extends Feature {
+var FocusGesture = class extends Feature {
     constructor() {
         super(...arguments);
         this.isActive = false;
@@ -4562,7 +4562,7 @@ function fireSyntheticPointerEvent(name, handler) {
     const syntheticPointerEvent = new PointerEvent('pointer' + name);
     handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
 }
-var PressGesture = /*#__PURE__*/ class extends Feature {
+var PressGesture = class extends Feature {
     constructor() {
         super(...arguments);
         this.removeStartListeners = noop;
@@ -4697,7 +4697,7 @@ var thresholdNames = {
     some: 0,
     all: 1,
 };
-var InViewFeature = /*#__PURE__*/ class extends Feature {
+var InViewFeature = class extends Feature {
     constructor() {
         super(...arguments);
         this.hasEnteredView = false;
@@ -4763,7 +4763,7 @@ var gestureAnimations = {
         Feature: HoverGesture,
     },
 };
-var PanSession = /*#__PURE__*/ class {
+var PanSession = class {
     constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
         this.startEvent = null;
         this.lastMoveEvent = null;
@@ -5127,7 +5127,7 @@ var getContextWindow = ({ current, }) => {
     return current ? current.ownerDocument.defaultView : null;
 };
 var elementDragControls = /* @__PURE__ */ new WeakMap();
-var VisualElementDragControls = /*#__PURE__*/ class {
+var VisualElementDragControls = class {
     constructor(visualElement) {
         this.openGlobalLock = null;
         this.isDragging = false;
@@ -5484,7 +5484,7 @@ function getCurrentDirection(offset, lockThreshold = 10) {
     }
     return direction;
 }
-var DragGesture = /*#__PURE__*/ class extends Feature {
+var DragGesture = class extends Feature {
     constructor(node) {
         super(node);
         this.removeGroupControls = noop;
@@ -5508,7 +5508,7 @@ var asyncHandler = (handler) => (event, info) => {
         frame.postRender(() => handler(event, info));
     }
 };
-var PanGesture = /*#__PURE__*/ class extends Feature {
+var PanGesture = class extends Feature {
     constructor() {
         super(...arguments);
         this.removePointerDownListener = noop;
@@ -5598,7 +5598,7 @@ var correctBoxShadow = {
         return template(shadow);
     },
 };
-var MeasureLayoutWithContext = /*#__PURE__*/ class extends Component {
+var MeasureLayoutWithContext = class extends Component {
     /**
      * This only mounts projection nodes for components that
      * need measuring, we might want to do it for all components
@@ -5798,7 +5798,7 @@ function boxEqualsRounded(a, b) {
 function aspectRatio(box) {
     return calcLength(box.x) / calcLength(box.y);
 }
-var NodeStack = /*#__PURE__*/ class {
+var NodeStack = class {
     constructor() {
         this.members = [];
     }
@@ -7032,7 +7032,7 @@ var drag = {
         MeasureLayout,
     },
 };
-var DOMVisualElement = /*#__PURE__*/ class extends VisualElement {
+var DOMVisualElement = class extends VisualElement {
     constructor() {
         super(...arguments);
         this.KeyframeResolver = DOMKeyframesResolver;
@@ -7051,7 +7051,7 @@ var DOMVisualElement = /*#__PURE__*/ class extends VisualElement {
 function getComputedStyle2(element) {
     return window.getComputedStyle(element);
 }
-var HTMLVisualElement = /*#__PURE__*/ class extends DOMVisualElement {
+var HTMLVisualElement = class extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = 'html';
@@ -7093,7 +7093,7 @@ var HTMLVisualElement = /*#__PURE__*/ class extends DOMVisualElement {
         renderHTML(instance, renderState, styleProp, projection);
     }
 };
-var SVGVisualElement = /*#__PURE__*/ class extends DOMVisualElement {
+var SVGVisualElement = class extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = 'svg';
@@ -7173,7 +7173,7 @@ function useForceUpdate() {
 function useUnmountEffect(callback) {
     return useEffect(() => () => callback(), []);
 }
-var PopChildMeasure = /*#__PURE__*/ class extends React2.Component {
+var PopChildMeasure = class extends React2.Component {
     getSnapshotBeforeUpdate(prevProps) {
         const element = this.props.childRef.current;
         if (element && prevProps.isPresent && !this.props.isPresent) {
@@ -8164,7 +8164,7 @@ function useTime() {
     useAnimationFrame((t) => time2.set(t));
     return time2;
 }
-var WillChangeMotionValue = /*#__PURE__*/ class extends MotionValue {
+var WillChangeMotionValue = class extends MotionValue {
     constructor() {
         super(...arguments);
         this.members = [];
@@ -8649,7 +8649,7 @@ function useInView(ref, { root, margin, amount, once = false, } = {}) {
     }, [root, ref, margin, once, amount,]);
     return isInView;
 }
-var DragControls = /*#__PURE__*/ class {
+var DragControls = class {
     constructor() {
         this.componentControls = /* @__PURE__ */ new Set();
     }
@@ -8841,7 +8841,7 @@ function startOptimizedAppearAnimation(element, name, keyframes2, options, onRea
     }
 }
 var createObject = () => ({});
-var StateVisualElement = /*#__PURE__*/ class extends VisualElement {
+var StateVisualElement = class extends VisualElement {
     build() { }
     measureInstanceViewportBox() {
         return createBox();
@@ -8990,7 +8990,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     acc[key7] = (process2) => cancelFrame(process2);
     return acc;
 }, {});
-// https :https://app.framerstatic.com/framer.VEJ3JK5Y.js
+// https :https://app.framerstatic.com/framer.K4XHQ4DX.js
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
 import { Suspense as Suspense2, } from 'react';
@@ -9003,7 +9003,7 @@ var require_hsluv = __commonJS({
             value: true,
         });
         exports.Hsluv = void 0;
-        var Hsluv2 = /*#__PURE__*/ class {
+        var Hsluv2 = class {
             constructor() {
                 this.hex = '#000000';
                 this.rgb_r = 0;
@@ -10687,11 +10687,11 @@ function renderPage(Page4, defaultPageStyle) {
     };
     return React4.isValidElement(Page4) ? React4.cloneElement(Page4, style) : React4.createElement(Page4, style);
 }
-var NotFoundError = /*#__PURE__*/ class extends Error {
+var NotFoundError = class extends Error {
 };
-var ErrorBoundaryCaughtError = /*#__PURE__*/ class extends Error {
+var ErrorBoundaryCaughtError = class extends Error {
 };
-var ErrorBoundary = /*#__PURE__*/ class extends Component {
+var ErrorBoundary = class extends Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -11759,7 +11759,7 @@ function RoutesProvider({ routes, children, }) {
         children,
     });
 }
-var SuspenseErrorBoundary = /*#__PURE__*/ class extends Component {
+var SuspenseErrorBoundary = class extends Component {
     constructor() {
         super(...arguments);
         this.state = {
@@ -12326,7 +12326,7 @@ function deprecationWarning(removedItem, removalVersion, replacement) {
     const warningText = `Deprecation warning: ${removedItem} will be removed in version ${removalVersion}${replacementText}.`;
     warnOnce2(warningText);
 }
-var Observers = /*#__PURE__*/ class {
+var Observers = class {
     constructor() {
         __publicField(this, 'observers', /* @__PURE__ */ new Set());
         __publicField(this, 'transactions', {});
@@ -12449,7 +12449,7 @@ function animatableInterpolation(value, currentInterpolation) {
         },
     };
 }
-var AnimatableValue = /*#__PURE__*/ class {
+var AnimatableValue = class {
     constructor(value) {
         this.value = value;
         __publicField(this, 'observers', new Observers());
@@ -12641,7 +12641,7 @@ function controlPointsForCurve(curve) {
             return [0.42, 0, 0.58, 1,];
     }
 }
-var BezierAnimator = /*#__PURE__*/ class {
+var BezierAnimator = class {
     constructor(options, interpolation) {
         this.interpolation = interpolation;
         __publicField(this, 'unitBezier');
@@ -12692,7 +12692,7 @@ var BezierAnimator = /*#__PURE__*/ class {
         return 1 / (200 * duration);
     }
 };
-var UnitBezier = /*#__PURE__*/ class {
+var UnitBezier = class {
     constructor(point1, point2) {
         __publicField(this, 'a');
         __publicField(this, 'b');
@@ -12745,7 +12745,7 @@ var UnitBezier = /*#__PURE__*/ class {
         return t2;
     }
 };
-var Integrator = /*#__PURE__*/ class {
+var Integrator = class {
     constructor(accelerationFunction) {
         __publicField(this, 'accelerationForState');
         this.accelerationForState = accelerationFunction;
@@ -12780,7 +12780,7 @@ var Integrator = /*#__PURE__*/ class {
         return output;
     }
 };
-var FrictionAnimator = /*#__PURE__*/ class {
+var FrictionAnimator = class {
     constructor(options) {
         __publicField(this, 'options');
         __publicField(this, 'state');
@@ -12960,7 +12960,7 @@ function isDampingDurationSpringOptions(options) {
     }
     return typeof options.dampingRatio === 'number' || typeof options.duration === 'number' || typeof options.mass === 'number';
 }
-var SpringAnimator = /*#__PURE__*/ class {
+var SpringAnimator = class {
     constructor(options, interpolation) {
         this.interpolation = interpolation;
         __publicField(this, 'options');
@@ -13042,7 +13042,7 @@ var Defaults = {
         tolerance: 1,
     },
 };
-var InertialScrollAnimator = /*#__PURE__*/ class {
+var InertialScrollAnimator = class {
     constructor(options) {
         __publicField(this, 'options');
         __publicField(this, 'current');
@@ -14237,7 +14237,7 @@ var DefaultInterpolationOptions = {
     colorModel: 'husl',
     /* HUSL */
 };
-var ValueInterpolation = /*#__PURE__*/ class {
+var ValueInterpolation = class {
     /**
      * @internal
      */
@@ -14290,7 +14290,7 @@ var Defaults2 = /* @__PURE__ */ (() => ({
     delta: 1 / 60,
     maxValues: 1e4,
 }))();
-var PrecalculatedAnimator = /*#__PURE__*/ class {
+var PrecalculatedAnimator = class {
     constructor(options) {
         __publicField(this, 'animator');
         __publicField(this, 'values');
@@ -14350,7 +14350,7 @@ var PrecalculatedAnimator = /*#__PURE__*/ class {
     }
 };
 var EventEmitter3 = /* @__PURE__ */ (() => require_eventemitter3().EventEmitter)();
-var EventEmitter = /*#__PURE__*/ class {
+var EventEmitter = class {
     constructor() {
         __publicField(this, '_emitter', new EventEmitter3());
     }
@@ -14469,7 +14469,7 @@ var _raf = (f) => {
 var __raf = /* @__PURE__ */ (() => safeWindow['requestAnimationFrame'] || _raf)();
 var raf = (f) => __raf(f);
 var LoopTimeStep = /* @__PURE__ */ (() => 1 / 60)();
-var Loop = /*#__PURE__*/ class extends EventEmitter {
+var Loop = class extends EventEmitter {
     /**
      * @internal
      */
@@ -14681,7 +14681,7 @@ var RenderTarget = {
         return false;
     },
 };
-var AnimationDriver = /*#__PURE__*/ class {
+var AnimationDriver = class {
     constructor(animator, updateCallback, finishedCallback) {
         this.animator = animator;
         this.updateCallback = updateCallback;
@@ -14708,7 +14708,7 @@ var AnimationDriver = /*#__PURE__*/ class {
         return this.animator.isFinished();
     }
 };
-var MainLoopAnimationDriver = /*#__PURE__*/ class extends AnimationDriver {
+var MainLoopAnimationDriver = class extends AnimationDriver {
     play() {
         if (RenderEnvironment.target !== RenderTarget.preview) {
             this.finishedCallback && this.finishedCallback(false);
@@ -14729,7 +14729,7 @@ var DefaultDeprecatedAnimationOptions = {
     colorModel: 'husl',
     /* HUSL */
 };
-var FramerAnimation = /*#__PURE__*/ class {
+var FramerAnimation = class {
     /**
      * @internal
      */
@@ -15348,7 +15348,7 @@ function getColorsFromTheme(theme, type) {
         screenColor: isDarkTheme ? '#333' : '#eee',
     };
 }
-var ErrorBoundary2 = /*#__PURE__*/ class extends Component {
+var ErrorBoundary2 = class extends Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'state', {});
@@ -17160,16 +17160,16 @@ var richTextCSSRules = [
         ol.framer-text,
         ul.framer-text,
         span.framer-text:not([data-text-fill]) {
-            font-family: var(--framer-font-family, Inter, Inter Placeholder, sans-serif);
-            font-style: var(--framer-font-style, normal);
-            font-weight: var(--framer-font-weight, 400);
-            color: var(--framer-text-color, #000);
-            font-size: calc(var(--framer-font-size, 16px) * var(--framer-font-size-scale, 1));
-            letter-spacing: var(--framer-letter-spacing, 0);
-            text-transform: var(--framer-text-transform, none);
-            text-decoration: var(--framer-text-decoration, none);
-            line-height: var(--framer-line-height, 1.2em);
-            text-align: var(--framer-text-alignment, start);
+            font-family: var(--framer-blockquote-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
+            font-style: var(--framer-blockquote-font-style, var(--framer-font-style, normal));
+            font-weight: var(--framer-blockquote-font-weight, var(--framer-font-weight, 400));
+            color: var(--framer-blockquote-text-color, var(--framer-text-color, #000));
+            font-size: calc(var(--framer-blockquote-font-size, var(--framer-font-size, 16px)) * var(--framer-font-size-scale, 1));
+            letter-spacing: var(--framer-blockquote-letter-spacing, var(--framer-letter-spacing, 0));
+            text-transform: var(--framer-blockquote-text-transform, var(--framer-text-transform, none));
+            text-decoration: var(--framer-blockquote-text-decoration, var(--framer-text-decoration, none));
+            line-height: var(--framer-blockquote-line-height, var(--framer-line-height, 1.2em));
+            text-align: var(--framer-blockquote-text-alignment, var(--framer-text-alignment, start));
             -webkit-text-stroke-width: var(--framer-text-stroke-width, initial);
             -webkit-text-stroke-color: var(--framer-text-stroke-color, initial);
         }
@@ -17182,23 +17182,23 @@ var richTextCSSRules = [
     `, /* css */
     `
         strong.framer-text {
-            font-family: var(--framer-font-family-bold);
-            font-style: var(--framer-font-style-bold);
-            font-weight: var(--framer-font-weight-bold, bolder);
+            font-family: var(--framer-blockquote-font-family-bold, var(--framer-font-family-bold));
+            font-style: var(--framer-blockquote-font-style-bold, var(--framer-font-style-bold));
+            font-weight: var(--framer-blockquote-font-weight-bold, var(--framer-font-weight-bold, bolder));
         }
     `, /* css */
     `
         em.framer-text {
-            font-family: var(--framer-font-family-italic);
-            font-style: var(--framer-font-style-italic, italic);
-            font-weight: var(--framer-font-weight-italic);
+            font-family: var(--framer-blockquote-font-family-italic, var(--framer-font-family-italic));
+            font-style: var(--framer-blockquote-font-style-italic, var(--framer-font-style-italic, italic));
+            font-weight: var(--framer-blockquote-font-weight-italic, var(--framer-font-weight-italic));
         }
     `, /* css */
     `
         em.framer-text > strong.framer-text {
-            font-family: var(--framer-font-family-bold-italic);
-            font-style: var(--framer-font-style-bold-italic, italic);
-            font-weight: var(--framer-font-weight-bold-italic, bolder);
+            font-family: var(--framer-blockquote-font-family-bold-italic, var(--framer-font-family-bold-italic));
+            font-style: var(--framer-blockquote-font-style-bold-italic, var(--framer-font-style-bold-italic, italic));
+            font-weight: var(--framer-blockquote-font-weight-bold-italic, var(--framer-font-weight-bold-italic, bolder));
         }
     `, /* css */
     `
@@ -17213,7 +17213,7 @@ var richTextCSSRules = [
         ol.framer-text:not(:first-child),
         ul.framer-text:not(:first-child),
         .framer-image.framer-text:not(:first-child) {
-            margin-top: var(--framer-paragraph-spacing, 0);
+            margin-top: var(--framer-blockquote-paragraph-spacing, var(--framer-paragraph-spacing, 0));
         }
     `,
     // The first child of a list item is a paragraph. If the second child is a
@@ -17242,8 +17242,8 @@ var richTextCSSRules = [
             -webkit-background-clip: text;
             /* make this a transparent color if you want to visualise the clipping  */
             -webkit-text-fill-color: transparent;
-            padding: max(0em, calc(calc(1.3em - var(--framer-line-height, 1.3em)) / 2));
-            margin: min(0em, calc(calc(1.3em - var(--framer-line-height, 1.3em)) / -2));
+            padding: max(0em, calc(calc(1.3em - var(--framer-blockquote-line-height, var(--framer-line-height, 1.3em))) / 2));
+            margin: min(0em, calc(calc(1.3em - var(--framer-blockquote-line-height, var(--framer-line-height, 1.3em))) / -2));
         }
     `, /* css */
     `
@@ -17258,6 +17258,15 @@ var richTextCSSRules = [
             line-height: var(--framer-line-height, 1.2em);
         }
     `, /* css */
+    `
+        blockquote.framer-text {
+            margin-block-start: initial;
+            margin-block-end: initial;
+            margin-inline-start: initial;
+            margin-inline-end: initial;
+            unicode-bidi: initial;
+        }
+    `, /* css */
     `
         a.framer-text,
         a.framer-text span.framer-text:not([data-text-fill]) {
@@ -20001,7 +20010,7 @@ function useForceUpdate3() {
 }
 var ResizeObserverPolyfill = /* @__PURE__ */ (() => require_resize_observer_umd().ResizeObserver)();
 var DEFAULT_SIZE = 200;
-var SharedObserver = /*#__PURE__*/ class {
+var SharedObserver = class {
     constructor() {
         var _j;
         __publicField(this, 'sharedResizeObserver');
@@ -20356,7 +20365,6 @@ function resetSetStyle(element, key7, toValue, microtask2 = true) {
     }
 }
 var Layer = /* @__PURE__ */ (() => {
-    /*#__PURE__*/
     class Layer2 extends Component {
         constructor() {
             super(...arguments);
@@ -21123,7 +21131,7 @@ var SharedLayoutContext = /* @__PURE__ */ React4.createContext({
     scheduleProjectionDidUpdate: () => { },
     initLead: () => { },
 });
-var SharedLayoutRoot = /*#__PURE__*/ class extends Component {
+var SharedLayoutRoot = class extends Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'shouldAnimate', false);
@@ -21209,7 +21217,7 @@ function MagicMotionCrossfadeRoot(props) {
         children: props.children,
     });
 }
-var SharedIntersectionObserver = /*#__PURE__*/ class {
+var SharedIntersectionObserver = class {
     constructor(options) {
         __publicField(this, 'sharedIntersectionObserver');
         __publicField(this, 'callbacks', /* @__PURE__ */ new WeakMap());
@@ -21345,7 +21353,7 @@ function pointForEvent(event, customTarget = null) {
     };
     return point2;
 }
-var FramerEvent = /*#__PURE__*/ class {
+var FramerEvent = class {
     /**
      * @internal
      */
@@ -21454,7 +21462,7 @@ var DraggingContext = /* @__PURE__ */ React4.createContext({
     dragging: false,
 });
 function WithDragging(Component15) {
-    const _WithDraggingHOC = /*#__PURE__*/ class extends React4.Component {
+    const _WithDraggingHOC = class extends React4.Component {
         constructor(props, defaultProps) {
             super(props, defaultProps);
             __publicField(this, 'state', {
@@ -22203,7 +22211,7 @@ var ObservableObject = /* @__PURE__ */ (() => {
     };
     return ObservableObject2;
 })();
-var ObservableObjectProxyHandler = /*#__PURE__*/ class {
+var ObservableObjectProxyHandler = class {
     constructor() {
         __publicField(this, 'set', (target, key7, value, receiver) => {
             if (key7 === $private) {
@@ -22854,7 +22862,7 @@ function applyLayoutProp(style, props, key7) {
     }
 }
 var DeprecatedFrame = /* @__PURE__ */ (() => {
-    const _DeprecatedFrameInner = /*#__PURE__*/ class extends Layer {
+    const _DeprecatedFrameInner = class extends Layer {
         constructor() {
             super(...arguments);
             __publicField(this, 'element', null);
@@ -23213,7 +23221,7 @@ var Frame = /* @__PURE__ */ (() => {
     FrameInner['displayName'] = 'Frame';
     return FrameInner;
 })();
-var LayoutTree = /*#__PURE__*/ class extends Component {
+var LayoutTree = class extends Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'layoutMaybeMutated');
@@ -23578,7 +23586,7 @@ var allAnimatableProperties = {
     originZ: 0,
     opacity: 1,
 };
-var NavigatorMock = /*#__PURE__*/ class {
+var NavigatorMock = class {
     constructor() {
         __publicField(this, 'warning', () => {
             warnOnce2('The Navigator API is only available inside of Framer: https://www.framer.com/');
@@ -24546,7 +24554,7 @@ var NavigationTransitionType = /* @__PURE__ */ ((NavigationTransitionType2) => {
     return NavigationTransitionType2;
 })(NavigationTransitionType || {});
 function WithNavigator(BaseComponent, navigationTransition, navigationTransitionDirection, NavigationTarget, navigationTransitionOptions) {
-    const InternalWithNavigator = /*#__PURE__*/ class extends React4.Component {
+    const InternalWithNavigator = class extends React4.Component {
         render() {
             return /* @__PURE__ */ jsx(NavigationContext.Consumer, {
                 children: (navigation) => {
@@ -25896,7 +25904,7 @@ function stateName(state) {
 function containsBitmask(value, bitmask) {
     return (value & bitmask) !== 0;
 }
-var GestureRecognizer = /*#__PURE__*/ class {
+var GestureRecognizer = class {
     constructor() {
         __publicField(this, '_state', 2);
         __publicField(this, 'handler');
@@ -25963,7 +25971,7 @@ var GestureRecognizer = /*#__PURE__*/ class {
         }
     }
 };
-var MouseWheelGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
+var MouseWheelGestureRecognizer = class extends GestureRecognizer {
     constructor() {
         super(...arguments);
         __publicField(this, 'startEvent');
@@ -25996,7 +26004,7 @@ var MouseWheelGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer
         this.onMouseWheelEnd(event);
     }
 };
-var PanGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
+var PanGestureRecognizer = class extends GestureRecognizer {
     constructor() {
         super(...arguments);
         __publicField(this, 'startEvent');
@@ -26060,7 +26068,7 @@ var PanGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
         }
     }
 };
-var TapGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
+var TapGestureRecognizer = class extends GestureRecognizer {
     constructor() {
         super(...arguments);
         __publicField(this, 'eventType', 'tap');
@@ -26089,7 +26097,7 @@ var TapGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
         }
     }
 };
-var FramerEventSession = /*#__PURE__*/ class {
+var FramerEventSession = class {
     constructor(dispatcher, customOrigin) {
         __publicField(this, 'events', []);
         __publicField(this, 'recognizers', []);
@@ -26251,7 +26259,7 @@ var FramerEventSession = /*#__PURE__*/ class {
         return subtract(event.devicePoint, this.startEvent.devicePoint);
     }
 };
-var MouseEventListener = /*#__PURE__*/ class extends Component {
+var MouseEventListener = class extends Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'domMouseDown', (originalEvent) => {
@@ -26303,7 +26311,7 @@ var MouseEventListener = /*#__PURE__*/ class extends Component {
         safeWindow.removeEventListener('wheel', this.domMouseWheel);
     }
 };
-var TouchEventListener = /*#__PURE__*/ class extends Component {
+var TouchEventListener = class extends Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'domTouchStart', (originalEvent) => {
@@ -27275,7 +27283,7 @@ function useObserveData() {
     const context = React4.useContext(DataObserverContext);
     return !isNaN(context.update);
 }
-var DataObserver = /*#__PURE__*/ class extends Component {
+var DataObserver = class extends Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'observers', []);
@@ -28331,7 +28339,7 @@ var withGeneratedLayoutId = (Component15) => React4.forwardRef((props, ref) => {
     const layoutId = useLayoutId2(props);
     return /* @__PURE__ */ jsx(Component15, Object.assign(Object.assign({ layoutId }, props), { layoutIdKey: void 0, duplicatedFrom: void 0, ref }));
 });
-var ContainerErrorBoundary = /*#__PURE__*/ class extends Component {
+var ContainerErrorBoundary = class extends Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'state', {
@@ -29227,7 +29235,7 @@ function Floating(_j) {
         onDismiss,
     });
     return ReactDOM.createPortal(
-    /* @__PURE__ */ jsxs('div', Object.assign(Object.assign({ ref: floatingPositionRef, className: className2, style: {
+    /* @__PURE__ */ jsxs(motion.div, Object.assign(Object.assign({ ref: floatingPositionRef, className: className2, style: {
             // Initially rendered as hidden, but the layout effect will set
             // to visible when the position is calculated.
             visibility: 'hidden',
@@ -29262,7 +29270,7 @@ function Floating(_j) {
         ] })), (_k = document.querySelector(portalSelector)) !== null && _k !== void 0 ? _k : document.body);
 }
 var GeneratedComponentContext = /* @__PURE__ */ React4.createContext(void 0);
-var LazyValue = /*#__PURE__*/ class {
+var LazyValue = class {
     constructor(resolver) {
         this.resolver = resolver;
         __publicField(this, 'status');
@@ -30402,7 +30410,7 @@ function getCollection(collection, locale) {
         return collection;
     });
 }
-var CompatibilityDatabaseCollection = /*#__PURE__*/ class {
+var CompatibilityDatabaseCollection = class {
     constructor(collection, locale) {
         this.collection = collection;
         this.locale = locale;
@@ -30667,12 +30675,12 @@ function compare(left, right, collation) {
     }
 }
 var INDEX_IDENTIFIER = 'index';
-var ScalarExpression = /*#__PURE__*/ class {
+var ScalarExpression = class {
     static from(expression, schema) {
         return convertExpression(expression, schema, void 0);
     }
 };
-var ScalarIdentifier = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarIdentifier = class extends ScalarExpression {
     constructor(schema, name) {
         var _j;
         super();
@@ -30707,7 +30715,7 @@ var ScalarIdentifier = /*#__PURE__*/ class extends ScalarExpression {
         return false;
     }
 };
-var ScalarLiteralValue = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarLiteralValue = class extends ScalarExpression {
     constructor(definition, value) {
         super();
         this.definition = definition;
@@ -30774,7 +30782,7 @@ var ScalarLiteralValue = /*#__PURE__*/ class extends ScalarExpression {
         return true;
     }
 };
-var ScalarFunctionCall = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarFunctionCall = class extends ScalarExpression {
     constructor(argumentExpressions) {
         super();
         this.argumentExpressions = argumentExpressions;
@@ -30800,7 +30808,7 @@ var ScalarFunctionCall = /*#__PURE__*/ class extends ScalarExpression {
         });
     }
 };
-var ScalarFunctionCallContains = /*#__PURE__*/ class extends ScalarFunctionCall {
+var ScalarFunctionCallContains = class extends ScalarFunctionCall {
     constructor() {
         super(...arguments);
         __publicField(this, 'definition', ScalarFunctionCallContains.getDefinition());
@@ -30838,7 +30846,7 @@ var ScalarFunctionCallContains = /*#__PURE__*/ class extends ScalarFunctionCall
         };
     }
 };
-var ScalarFunctionCallStartsWith = /*#__PURE__*/ class extends ScalarFunctionCall {
+var ScalarFunctionCallStartsWith = class extends ScalarFunctionCall {
     constructor() {
         super(...arguments);
         __publicField(this, 'definition', ScalarFunctionCallStartsWith.getDefinition());
@@ -30876,7 +30884,7 @@ var ScalarFunctionCallStartsWith = /*#__PURE__*/ class extends ScalarFunctionCal
         };
     }
 };
-var ScalarFunctionCallEndsWith = /*#__PURE__*/ class extends ScalarFunctionCall {
+var ScalarFunctionCallEndsWith = class extends ScalarFunctionCall {
     constructor() {
         super(...arguments);
         __publicField(this, 'definition', ScalarFunctionCallEndsWith.getDefinition());
@@ -30914,7 +30922,7 @@ var ScalarFunctionCallEndsWith = /*#__PURE__*/ class extends ScalarFunctionCall
         };
     }
 };
-var ScalarCase = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarCase = class extends ScalarExpression {
     constructor(valueExpression, conditions, elseExpression) {
         super();
         this.valueExpression = valueExpression;
@@ -30999,13 +31007,13 @@ var ScalarCase = /*#__PURE__*/ class extends ScalarExpression {
         });
     }
 };
-var ScalarCaseCondition = /*#__PURE__*/ class {
+var ScalarCaseCondition = class {
     constructor(whenExpression, thenExpression) {
         this.whenExpression = whenExpression;
         this.thenExpression = thenExpression;
     }
 };
-var ScalarUnaryOperation = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarUnaryOperation = class extends ScalarExpression {
     constructor(valueExpression) {
         super();
         this.valueExpression = valueExpression;
@@ -31018,7 +31026,7 @@ var ScalarUnaryOperation = /*#__PURE__*/ class extends ScalarExpression {
         return this.valueExpression.canEvaluate();
     }
 };
-var ScalarUnaryOperationNot = /*#__PURE__*/ class extends ScalarUnaryOperation {
+var ScalarUnaryOperationNot = class extends ScalarUnaryOperation {
     constructor() {
         super(...arguments);
         __publicField(this, 'definition', ScalarUnaryOperationNot.getDefinition());
@@ -31040,7 +31048,7 @@ var ScalarUnaryOperationNot = /*#__PURE__*/ class extends ScalarUnaryOperation {
         };
     }
 };
-var ScalarLogicalOperation = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarLogicalOperation = class extends ScalarExpression {
     constructor(operandExpressions) {
         super();
         this.operandExpressions = operandExpressions;
@@ -31065,7 +31073,7 @@ var ScalarLogicalOperation = /*#__PURE__*/ class extends ScalarExpression {
         });
     }
 };
-var ScalarLogicalOperationAnd = /*#__PURE__*/ class extends ScalarLogicalOperation {
+var ScalarLogicalOperationAnd = class extends ScalarLogicalOperation {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', 'AND');
@@ -31081,7 +31089,7 @@ var ScalarLogicalOperationAnd = /*#__PURE__*/ class extends ScalarLogicalOperati
         };
     }
 };
-var ScalarLogicalOperationOr = /*#__PURE__*/ class extends ScalarLogicalOperation {
+var ScalarLogicalOperationOr = class extends ScalarLogicalOperation {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', 'OR');
@@ -31097,7 +31105,7 @@ var ScalarLogicalOperationOr = /*#__PURE__*/ class extends ScalarLogicalOperatio
         };
     }
 };
-var ScalarComparison = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarComparison = class extends ScalarExpression {
     constructor(leftExpression, rightExpression) {
         super();
         this.leftExpression = leftExpression;
@@ -31125,7 +31133,7 @@ var ScalarComparison = /*#__PURE__*/ class extends ScalarExpression {
         return this.leftExpression.canEvaluate() && this.rightExpression.canEvaluate();
     }
 };
-var ScalarComparisonEquals = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonEquals = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '=');
@@ -31139,7 +31147,7 @@ var ScalarComparisonEquals = /*#__PURE__*/ class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonNotEquals = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonNotEquals = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '!=');
@@ -31153,7 +31161,7 @@ var ScalarComparisonNotEquals = /*#__PURE__*/ class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonLessThan = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonLessThan = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '<');
@@ -31167,7 +31175,7 @@ var ScalarComparisonLessThan = /*#__PURE__*/ class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonLessThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonLessThanOrEqual = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '<=');
@@ -31181,7 +31189,7 @@ var ScalarComparisonLessThanOrEqual = /*#__PURE__*/ class extends ScalarComparis
         };
     }
 };
-var ScalarComparisonGreaterThan = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonGreaterThan = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '>');
@@ -31195,7 +31203,7 @@ var ScalarComparisonGreaterThan = /*#__PURE__*/ class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonGreaterThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonGreaterThanOrEqual = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '>=');
@@ -31209,7 +31217,7 @@ var ScalarComparisonGreaterThanOrEqual = /*#__PURE__*/ class extends ScalarCompa
         };
     }
 };
-var ScalarTypeCast = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarTypeCast = class extends ScalarExpression {
     constructor(valueExpression) {
         super();
         this.valueExpression = valueExpression;
@@ -31225,7 +31233,7 @@ var ScalarTypeCast = /*#__PURE__*/ class extends ScalarExpression {
         return this.valueExpression.canEvaluate();
     }
 };
-var ScalarTypeCastBoolean = /*#__PURE__*/ class extends ScalarTypeCast {
+var ScalarTypeCastBoolean = class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'BOOLEAN');
@@ -31255,7 +31263,7 @@ function convertToBoolean(value) {
     }
     return false;
 }
-var ScalarTypeCastDate = /*#__PURE__*/ class extends ScalarTypeCast {
+var ScalarTypeCastDate = class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'DATE');
@@ -31293,7 +31301,7 @@ function convertToDate(value) {
     }
     return null;
 }
-var ScalarTypeCastNumber = /*#__PURE__*/ class extends ScalarTypeCast {
+var ScalarTypeCastNumber = class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'NUMBER');
@@ -31330,7 +31338,7 @@ function convertToNumber(value) {
     }
     return null;
 }
-var ScalarTypeCastString = /*#__PURE__*/ class extends ScalarTypeCast {
+var ScalarTypeCastString = class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'STRING');
@@ -31763,7 +31771,7 @@ function stringifyExecutionTime(self2, total) {
 function stringifyItems(items) {
     return `(items: ${items})`;
 }
-var QueryPlan = /*#__PURE__*/ class {
+var QueryPlan = class {
     constructor() {
         __publicField(this, 'executionTime', 0);
         __publicField(this, 'itemCount', 0);
@@ -31778,7 +31786,7 @@ var QueryPlan = /*#__PURE__*/ class {
         });
     }
 };
-var ScanCollectionPlan = /*#__PURE__*/ class extends QueryPlan {
+var ScanCollectionPlan = class extends QueryPlan {
     constructor(collection) {
         super();
         this.collection = collection;
@@ -31794,7 +31802,7 @@ var ScanCollectionPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var LookupIndexPlan = /*#__PURE__*/ class extends QueryPlan {
+var LookupIndexPlan = class extends QueryPlan {
     constructor(index, query) {
         super();
         this.index = index;
@@ -31838,7 +31846,7 @@ var LookupIndexPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var UnionPlan = /*#__PURE__*/ class extends QueryPlan {
+var UnionPlan = class extends QueryPlan {
     constructor(childPlans) {
         super();
         this.childPlans = childPlans;
@@ -31870,7 +31878,7 @@ var UnionPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var IntersectionPlan = /*#__PURE__*/ class extends QueryPlan {
+var IntersectionPlan = class extends QueryPlan {
     constructor(childPlans) {
         super();
         this.childPlans = childPlans;
@@ -31902,7 +31910,7 @@ var IntersectionPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var ResolveItemsPlan = /*#__PURE__*/ class extends QueryPlan {
+var ResolveItemsPlan = class extends QueryPlan {
     constructor(childPlan, collection, richTextResolver, select) {
         super();
         this.childPlan = childPlan;
@@ -31934,7 +31942,7 @@ var ResolveItemsPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var FilterItemsPlan = /*#__PURE__*/ class extends QueryPlan {
+var FilterItemsPlan = class extends QueryPlan {
     constructor(childPlan, filterExpression) {
         super();
         this.childPlan = childPlan;
@@ -31956,7 +31964,7 @@ var FilterItemsPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var SortItemsPlan = /*#__PURE__*/ class extends QueryPlan {
+var SortItemsPlan = class extends QueryPlan {
     constructor(childPlan, orderExpressions, collection) {
         super();
         this.childPlan = childPlan;
@@ -31999,14 +32007,14 @@ var SortItemsPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var ScalarOrderExpression = /*#__PURE__*/ class {
+var ScalarOrderExpression = class {
     constructor(expression, direction, collation) {
         this.expression = expression;
         this.direction = direction;
         this.collation = collation;
     }
 };
-var SliceItemsPlan = /*#__PURE__*/ class extends QueryPlan {
+var SliceItemsPlan = class extends QueryPlan {
     constructor(childPlan, offsetExpression, limitExpression) {
         super();
         this.childPlan = childPlan;
@@ -32045,7 +32053,7 @@ var SliceItemsPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var DatabaseItemMap = /*#__PURE__*/ class extends Map {
+var DatabaseItemMap = class extends Map {
     constructor(items = []) {
         super();
         for (const item of items) {
@@ -32076,7 +32084,7 @@ var DatabaseItemMap = /*#__PURE__*/ class extends Map {
         return [...values,];
     }
 };
-var RichTextResolver = /*#__PURE__*/ class {
+var RichTextResolver = class {
     constructor(collection) {
         this.collection = collection;
         __publicField(this, 'cache', /* @__PURE__ */ new Map());
@@ -32229,7 +32237,7 @@ function getDatabaseCollection({ data: data2, }, locale) {
     }
     assertNever(data2, 'Unsupported collection type');
 }
-var QueryEngine = /*#__PURE__*/ class {
+var QueryEngine = class {
     query(query, locale) {
         return __awaiter(this, void 0, void 0, function* () {
             const collection = getDatabaseCollection(query.from, locale);
@@ -32448,7 +32456,7 @@ function createScanCollectionPlan(collection, expression) {
     const plan = new ScanCollectionPlan(collection);
     return new FilterItemsPlan(plan, expression);
 }
-var AnimationCollector = /*#__PURE__*/ class {
+var AnimationCollector = class {
     constructor() {
         __publicField(this, 'entries', /* @__PURE__ */ new Map());
     }
@@ -33090,7 +33098,7 @@ function usePrototypeNavigate({ preload, } = {}) {
         return false;
     });
 }
-var QueryCache = /*#__PURE__*/ class {
+var QueryCache = class {
     constructor(queryEngine2) {
         this.queryEngine = queryEngine2;
         __publicField(this, 'cache', /* @__PURE__ */ new Map());
@@ -33345,17 +33353,14 @@ function useVariantState({ variant, defaultVariant: externalDefaultVariant, tran
         if (gestureVariant)
             variants.push(gestureVariant);
         const gestures = enabledGestures == null ? void 0 : enabledGestures[baseVariant];
-        const gestureHandlers = {};
-        if (gestures == null ? void 0 : gestures.hover) {
-            Object.assign(gestureHandlers, {
-                onMouseEnter: () => setGestureState({
-                    isHovered: true,
-                }),
-                onMouseLeave: () => setGestureState({
-                    isHovered: false,
-                }),
-            });
-        }
+        const gestureHandlers = {
+            onMouseEnter: () => setGestureState({
+                isHovered: true,
+            }),
+            onMouseLeave: () => setGestureState({
+                isHovered: false,
+            }),
+        };
         if (gestures == null ? void 0 : gestures.pressed) {
             Object.assign(gestureHandlers, {
                 onTapStart: () => setGestureState({
@@ -34141,7 +34146,7 @@ var FontSourceNames = /* @__PURE__ */ ((FontSourceNames2) => {
     return FontSourceNames2;
 })(FontSourceNames || {});
 var systemFontFamilyName = 'System Default';
-var LocalFontSource = /*#__PURE__*/ class {
+var LocalFontSource = class {
     constructor() {
         __publicField(this, 'name', 'local');
         __publicField(this, 'fontFamilies', []);
@@ -34281,7 +34286,7 @@ function getCustomFontName(fileName, properties) {
     const variant = properties.font.preferredSubFamily === '' ? properties.font.fontSubFamily : properties.font.preferredSubFamily;
     return `${fontFamily} ${variant}`;
 }
-var CustomFontSource = /*#__PURE__*/ class {
+var CustomFontSource = class {
     constructor() {
         __publicField(this, 'name', 'custom');
         __publicField(this, 'fontFamilies', []);
@@ -34462,7 +34467,7 @@ var weightNameToNumber = {
 };
 var weightNames = /* @__PURE__ */ Object.keys(weightNameToNumber);
 var allowedVariantsRegex = /* @__PURE__ */ (() => new RegExp(`^(?:${[...weightNames, 'italic',].join('|')})`, 'u'))();
-var FontshareSource = /*#__PURE__*/ class {
+var FontshareSource = class {
     constructor() {
         __publicField(this, 'name', 'fontshare');
         __publicField(this, 'fontFamilies', []);
@@ -34594,7 +34599,7 @@ var weightNameToNumber2 = {
     ExtraBold: 800,
     Black: 900,
 };
-var FramerFontSource = /*#__PURE__*/ class {
+var FramerFontSource = class {
     constructor() {
         __publicField(this, 'name', 'framer');
         __publicField(this, 'fontFamilies', []);
@@ -34651,7 +34656,7 @@ var FramerFontSource = /*#__PURE__*/ class {
     }
 };
 var googleFontSelectorPrefix = 'GF;';
-var GoogleFontSource = /*#__PURE__*/ class {
+var GoogleFontSource = class {
     constructor() {
         __publicField(this, 'name', 'google');
         __publicField(this, 'fontFamilies', []);
@@ -34757,7 +34762,7 @@ function mapToKnownCategory2(category) {
 var import_fontfaceobserver = __toESM(require_fontfaceobserver_standalone(), 1);
 var FONT_LOADING_TIMEOUT = 5e3;
 var MAX_RETRIES = 3;
-var FontLoadingError = /*#__PURE__*/ class extends Error {
+var FontLoadingError = class extends Error {
     constructor(message) {
         super(message);
         this.name = 'FontLoadingError';
@@ -34826,7 +34831,7 @@ function isFontReady(family, style, weight) {
         }
     });
 }
-var FontStore = /*#__PURE__*/ class {
+var FontStore = class {
     constructor() {
         __publicField(this, 'enabled', false);
         __publicField(this, 'bySelector', /* @__PURE__ */ new Map());
@@ -34906,6 +34911,8 @@ var FontStore = /*#__PURE__*/ class {
         return fontFamily;
     }
     getFontBySelector(selector, createFont = true) {
+        if (!selector)
+            return void 0;
         if (selector.startsWith(customFontSelectorPrefix)) {
             return this.custom.getFontBySelector(selector, createFont);
         }
@@ -35283,6 +35290,7 @@ var FormInputStyleVariableNames = /* @__PURE__ */ ((FormInputStyleVariableNames2
     FormInputStyleVariableNames2['IconBackgroundImage'] = '--framer-input-icon-image';
     FormInputStyleVariableNames2['IconMaskImage'] = '--framer-input-icon-mask-image';
     FormInputStyleVariableNames2['IconColor'] = '--framer-input-icon-color';
+    FormInputStyleVariableNames2['WrapperHeight'] = '--framer-input-wrapper-height';
     return FormInputStyleVariableNames2;
 })(FormInputStyleVariableNames || {});
 var Var = FormInputStyleVariableNames;
@@ -35333,7 +35341,7 @@ var sharedInputCSS = [
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         width: '100%',
-        height: '100%',
+        height: css.variable(Var.WrapperHeight, '100%'),
         letterSpacing: css.variable(Var.FontLetterSpacing),
         textAlign: css.variable(Var.FontTextAlignment),
         lineHeight: css.variable(Var.FontLineHeight),
@@ -35440,9 +35448,7 @@ var inputIconCSSDeclaration = {
     bottom: 0,
     width: `${iconSize}px`,
     boxSizing: 'content-box',
-    // Offset the icon inwards by the padding.
-    margin: css.variable(Var.Padding),
-    marginLeft: 0,
+    padding: css.variable(Var.Padding),
     border: 'none',
     pointerEvents: 'none',
     backgroundRepeat: 'no-repeat',
@@ -35531,7 +35537,7 @@ var styles = /* @__PURE__ */ (() => [
     css(`.${textInputWrapperClassName} textarea`, {
         display: 'flex',
         resize: css.variable('--framer-textarea-resize'),
-        overflowY: 'scroll',
+        overflowY: 'auto',
         minHeight: 'inherit',
         maxHeight: 'inherit',
         whiteSpace: 'break-spaces',
@@ -35558,6 +35564,9 @@ var styles = /* @__PURE__ */ (() => [
         color: css.variable('--framer-input-placeholder-color'),
         // This tells safari to use the color for the shadow dom elements.
         '-webkit-text-fill-color': css.variable('--framer-input-placeholder-color'),
+        // Prevent browsers from improvising the date/time placeholder height.
+        height: css.variable('--framer-input-font-line-height'),
+        overflow: 'visible',
     }),
     css(`.${textInputWrapperClassName} .${inputClassName}[type="date"]::before, .${textInputWrapperClassName} .${inputClassName}[type="time"]::before`, Object.assign(Object.assign({}, inputIconCSSDeclaration), { paddingLeft: `${iconSpacing}px`, maskPosition: `${iconSpacing}px center`, backgroundPosition: `${iconSpacing}px center` })),
     css(`.${textInputWrapperClassName} .${inputClassName}[type="date"]::before`, {
@@ -35568,14 +35577,20 @@ var styles = /* @__PURE__ */ (() => [
         maskImage: css.variable('--framer-input-icon-mask-image', `url('${defaultTimeIconMaskImage}')`),
         backgroundImage: css.variable('--framer-input-icon-image'),
     }),
-    // Hide the native date picker icon, but still allow the user to click it.
+    // Hide the native date picker icon, but still align it with the custom icon, allowing user to click it to show the
+    // date/time picker.
     css(`.${textInputWrapperClassName} .${inputClassName}::-webkit-calendar-picker-indicator`, {
         opacity: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
         padding: css.variable('--framer-input-padding'),
-        paddingRight: 0,
-        paddingLeft: `${iconSpacing}px`,
+        paddingTop: 0,
+        paddingBottom: 0,
         width: `${iconSize2}px`,
-        height: `${iconSize2}px`,
+        // Makes sure the icon hit target covers the entire height of the input.
+        height: '100%',
     }),
     css(`.${textInputWrapperClassName}:focus-within, .${textInputWrapperClassName}.${forcedFocusClassName}`, {
         boxShadow: css.variable('--framer-input-focused-box-shadow', '--framer-input-box-shadow'),
@@ -35695,9 +35710,16 @@ var styles2 = /* @__PURE__ */ (() => [
 ])();
 var FormBooleanInput = /* @__PURE__ */ withCSS(BooleanInput, styles2);
 var Select = /* @__PURE__ */ React4.forwardRef(function Select2(props, measureRef) {
-    const { autoFocus, className: className2, inputName, required, defaultValue, selectOptions, style, onValid, onChange, onBlur, onInvalid, onFocus } = props, rest = __rest(props, ["autoFocus", "className", "inputName", "required", "defaultValue", "selectOptions", "style", "onValid", "onChange", "onBlur", "onInvalid", "onFocus"]);
+    const { autoFocus, className: className2, inputName, required, hidden, defaultValue, selectOptions, style, onValid, onChange, onBlur, onInvalid, onFocus } = props, rest = __rest(props, ["autoFocus", "className", "inputName", "required", "hidden", "defaultValue", "selectOptions", "style", "onValid", "onChange", "onBlur", "onInvalid", "onFocus"]);
     const eventHandlers = useCustomValidity(onValid, onInvalid, onChange, onBlur, onFocus);
     const key7 = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
+    if (hidden) {
+        return /* @__PURE__ */ jsx(motion.input, {
+            type: 'hidden',
+            name: inputName,
+            defaultValue,
+        });
+    }
     return /* @__PURE__ */ jsx(motion.div, Object.assign(Object.assign({ ref: measureRef, style, className: cx(inputWrapperClassName, selectWrapperClassName, className2) }, rest), { children: /* @__PURE__ */ jsx(motion.select, Object.assign(Object.assign({ name: inputName, autoFocus,
             required, className: inputClassName, defaultValue }, eventHandlers), { children: selectOptions == null ? void 0 : selectOptions.map((option, index) => {
                 var _j, _k;
@@ -35842,7 +35864,7 @@ function convertCodeComponentContainer(componentDefinitionProvider, node, conver
         converter(codeComponentPresentation, codeComponentPresentation.children.map((child) => convertPresentationTree(child, converter, componentDefinitionProvider, getCachedNode, skipCodeComponentPropsCache))),
     ];
 }
-var CodeComponentPresentation = /*#__PURE__*/ class {
+var CodeComponentPresentation = class {
     constructor(id3, componentIdentifier, packageVersion, props, children, codeOverrideIdentifier) {
         this.id = id3;
         this.componentIdentifier = componentIdentifier;
@@ -35864,6 +35886,11 @@ var CodeComponentPresentation = /*#__PURE__*/ class {
         };
     }
 };
+var nonSlugCharactersRegExp = /[^\p{Letter}\p{Number}()]+/gu;
+var trimSlugRegExp = /^-+|-+$/gu;
+function slugify(value) {
+    return value.toLowerCase().replace(nonSlugCharactersRegExp, '-').replace(trimSlugRegExp, '');
+}
 var htmlRegExp = /[&<>'"]/g;
 var escapeHTML = (str) => str.replace(htmlRegExp, (tag) => ({
     '&': '&amp;',
@@ -36090,7 +36117,7 @@ var FitText = /* @__PURE__ */ forwardRef((_j, ref) => {
 });
 var RichTextContainer = /* @__PURE__ */ forwardRef((props, ref) => {
     var _j;
-    const { __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, as: _as, bottom, center, children, environment: environment2 = RenderTarget.current, fonts = [], height, isEditable = false, left, name, opacity, positionSticky, positionStickyBottom, positionStickyLeft, positionStickyRight, positionStickyTop, right, rotation = 0, style, _initialStyle, stylesPresetsClassNames, text: plainText, top, verticalAlignment = 'top', visible = true, width, willChangeTransform, withExternalLayout = false, viewBox, viewBoxScale = 1 } = props, rest = __rest(props, ["__fromCanvasComponent", "_forwardedOverrideId", "_forwardedOverrides", "_usesDOMRect", "as", "bottom", "center", "children", "environment", "fonts", "height", "isEditable", "left", "name", "opacity", "positionSticky", "positionStickyBottom", "positionStickyLeft", "positionStickyRight", "positionStickyTop", "right", "rotation", "style", "_initialStyle", "stylesPresetsClassNames", "text", "top", "verticalAlignment", "visible", "width", "willChangeTransform", "withExternalLayout", "viewBox", "viewBoxScale"]);
+    const { __fromCanvasComponent = false, _forwardedOverrideId, _forwardedOverrides, _usesDOMRect, anchorLinkOffsetY, as: _as, bottom, center, children, environment: environment2 = RenderTarget.current, fonts = [], height, isEditable = false, left, name, opacity, positionSticky, positionStickyBottom, positionStickyLeft, positionStickyRight, positionStickyTop, right, rotation = 0, style, _initialStyle, stylesPresetsClassNames, text: plainText, top, verticalAlignment = 'top', visible = true, width, willChangeTransform, withExternalLayout = false, viewBox, viewBoxScale = 1 } = props, rest = __rest(props, ["__fromCanvasComponent", "_forwardedOverrideId", "_forwardedOverrides", "_usesDOMRect", "anchorLinkOffsetY", "as", "bottom", "center", "children", "environment", "fonts", "height", "isEditable", "left", "name", "opacity", "positionSticky", "positionStickyBottom", "positionStickyLeft", "positionStickyRight", "positionStickyTop", "right", "rotation", "style", "_initialStyle", "stylesPresetsClassNames", "text", "top", "verticalAlignment", "visible", "width", "willChangeTransform", "withExternalLayout", "viewBox", "viewBoxScale"]);
     const parentSize = useParentSize();
     const isOnCanvas = useIsOnFramerCanvas();
     const inCodeComponent = useContext3(ComponentContainerContext);
@@ -36102,6 +36129,11 @@ var RichTextContainer = /* @__PURE__ */ forwardRef((props, ref) => {
     useInsertionEffect(() => {
         injectComponentCSSRules();
     }, []);
+    const processedChildren = useMemo(() => {
+        if (!children)
+            return;
+        return processRichTextChildren(children, stylesPresetsClassNames, plainText, anchorLinkOffsetY);
+    }, [children, stylesPresetsClassNames, plainText, anchorLinkOffsetY,]);
     if (!visible)
         return null;
     const isHidden = isEditable && environment2() === RenderTarget.canvas;
@@ -36170,39 +36202,79 @@ var RichTextContainer = /* @__PURE__ */ forwardRef((props, ref) => {
                         width: '100%',
                         height: '100%',
                     },
-                    children: children && styleRichTextChildren(children, stylesPresetsClassNames, plainText),
+                    children: processedChildren,
                 }) }));
         }
         else {
             return /* @__PURE__ */ jsx(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) }));
+                viewBoxScale, transformTemplate: template, 'data-framer-name': name, 'data-framer-component-type': 'RichTextContainer', children: processedChildren }));
         }
     }
-    return /* @__PURE__ */ jsx(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__ */ jsx(Component15, Object.assign(Object.assign({}, rest), { ref: containerRef, style: containerStyle, layoutId, transformTemplate: template, 'data-framer-name': name, 'data-framer-component-type': 'RichTextContainer', children: processedChildren }));
 });
-function styleRichTextChildren(element, stylesPresetsClassNames, plainText) {
+function processRichTextChildren(element, stylesPresetsClassNames, plainText, anchorLinkOffsetY, slugCounters = {}) {
+    var _j;
     let children = Children.toArray(element.props.children);
     if (isString22(plainText)) {
         children = children.slice(0, 1);
     }
     children = children.map((child) => {
         if (isValidElement(child)) {
-            return styleRichTextChildren(child, stylesPresetsClassNames, plainText);
+            return processRichTextChildren(child, stylesPresetsClassNames, plainText, anchorLinkOffsetY, slugCounters);
         }
         if (isString22(plainText)) {
             return plainText;
         }
         return child;
     });
-    const _j = element.props, { ['data-preset-tag']: dataPresetTag } = _j, props = __rest(_j, ['data-preset-tag']);
+    const _k = element.props, { ['data-preset-tag']: dataPresetTag } = _k, props = __rest(_k, ['data-preset-tag']);
     if (isString22(element.type) || isMotionComponent(element.type)) {
-        const tag = dataPresetTag || unwrapMotionComponent(element.type) || element.type;
+        const elementType = unwrapMotionComponent(element.type) || element.type;
+        const tag = dataPresetTag || elementType;
         const stylesPresetClassName = isString22(tag) ? stylesPresetsClassNames == null ? void 0 : stylesPresetsClassNames[tag] : void 0;
         props.className = cx('framer-text', props.className, stylesPresetClassName);
+        const isHeading = elementType === 'h1' || elementType === 'h2' || elementType === 'h3' || elementType === 'h4' ||
+            elementType === 'h5' || elementType === 'h6';
+        const anchorLinkStylePresetClassName = stylesPresetsClassNames == null ? void 0 : stylesPresetsClassNames['anchor'];
+        if (isHeading && anchorLinkStylePresetClassName) {
+            const slug = generateHeadingSlug(children, slugCounters);
+            props.id = slug;
+            const className2 = cx('framer-text', anchorLinkStylePresetClassName);
+            const anchorLink = /* @__PURE__ */ jsx('a', {
+                href: `#${slug}`,
+                className: className2,
+                children,
+            });
+            props.style = Object.assign(Object.assign({}, ((_j = props.style) !== null && _j !== void 0 ? _j : {})), { scrollMarginTop: anchorLinkOffsetY });
+            children = [anchorLink,];
+        }
     }
     return cloneElement2(element, props, ...children);
 }
+function generateHeadingSlug(children, slugCounters) {
+    var _j;
+    const headingText = children.map(extractTextFromReactNode).join('');
+    let slug = slugify(headingText);
+    const slugCounter = (_j = slugCounters[slug]) !== null && _j !== void 0 ? _j : 0;
+    if (slugCounter > 0) {
+        slug += `-${slugCounter}`;
+    }
+    slugCounters[slug] = slugCounter + 1;
+    return slug;
+}
+function extractTextFromReactNode(node) {
+    if (isString22(node) || isNumber2(node)) {
+        return node.toString();
+    }
+    if (isValidElement(node)) {
+        return extractTextFromReactNode(node.props.children);
+    }
+    if (Array.isArray(node)) {
+        return node.map(extractTextFromReactNode).join('');
+    }
+    return '';
+}
 var RichText = /* @__PURE__ */ forwardRef((_j, ref) => {
     var { children, html, htmlFromDesign } = _j, props = __rest(_j, ["children", "html", "htmlFromDesign"]);
     const content = html || children || htmlFromDesign;
@@ -36439,7 +36511,7 @@ var ImagePatternElement = ({ id: id3, path, transform: transform2, repeat, width
     });
 };
 var useDOM = /* @__PURE__ */ isBrowser2();
-var SharedSVGEntry = /*#__PURE__*/ class {
+var SharedSVGEntry = class {
     constructor(id3, svg, innerHTML, viewBox, count = 0) {
         this.id = id3;
         this.svg = svg;
@@ -36448,7 +36520,7 @@ var SharedSVGEntry = /*#__PURE__*/ class {
         this.count = count;
     }
 };
-var SharedSVGManager = /*#__PURE__*/ class {
+var SharedSVGManager = class {
     constructor() {
         __publicField(this, 'entries', /* @__PURE__ */ new Map());
     }
@@ -37309,7 +37381,7 @@ function getTabIndexProps(tabIndex) {
     };
 }
 var keys22 = /* @__PURE__ */ new Map();
-var InternalID = /*#__PURE__*/ class {
+var InternalID = class {
     constructor(id3) {
         this.id = id3;
         __publicField(this, '_link', null);
@@ -37343,7 +37415,7 @@ var InternalID = /*#__PURE__*/ class {
     }
 };
 var PathSegmentOuter = /* @__PURE__ */ (() => {
-    const _PathSegment = /*#__PURE__*/ class {
+    const _PathSegment = class {
         constructor(value) {
             __publicField(this, '__class', 'PathSegment');
             __publicField(this, 'x', 0);
@@ -37589,7 +37661,7 @@ function transformString(transform2) {
     }
     return result;
 }
-var LinearGradientElement = /*#__PURE__*/ class extends Component {
+var LinearGradientElement = class extends Component {
     render() {
         const { id: id3, stops, x1, x2, y1, y2, } = this.props;
         return /* @__PURE__ */ jsx('linearGradient', {
@@ -37608,7 +37680,7 @@ var LinearGradientElement = /*#__PURE__*/ class extends Component {
         });
     }
 };
-var RadialGradientElement = /*#__PURE__*/ class extends Component {
+var RadialGradientElement = class extends Component {
     render() {
         const { centerAnchorX, centerAnchorY, id: id3, widthFactor, heightFactor, stops, } = this.props;
         return /* @__PURE__ */ jsx('radialGradient', {
@@ -37627,7 +37699,7 @@ var RadialGradientElement = /*#__PURE__*/ class extends Component {
         });
     }
 };
-var SVGRoot = /*#__PURE__*/ class extends Component {
+var SVGRoot = class extends Component {
     render() {
         const { children, frame: frame2, innerRef, } = this.props;
         const { width, height, } = frame2;