unframer 2.6.0 → 2.6.1

package/dist/framer.js

@@ -202,7 +202,7 @@ exports.SwitchLayoutGroupContext = SwitchLayoutGroupContext;
 var LazyContext = (0, react_1.createContext)({
     strict: false,
 });
-var Queue = /*#__PURE__*/ class {
+var Queue = class {
     constructor() {
         this.order = [];
         this.scheduled = /* @__PURE__ */ new Set();
@@ -1580,7 +1580,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;
@@ -1835,7 +1835,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;
@@ -1944,7 +1944,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);
@@ -2368,7 +2368,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);
     }
@@ -2550,7 +2550,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;
@@ -2742,7 +2742,7 @@ function moveItem([...arr], fromIndex, toIndex) {
     }
     return arr;
 }
-var SubscriptionManager = /*#__PURE__*/ class {
+var SubscriptionManager = class {
     constructor() {
         this.subscriptions = [];
     }
@@ -2778,7 +2778,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
@@ -3102,7 +3102,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);
@@ -3565,14 +3565,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,
@@ -3605,7 +3605,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++;
@@ -3723,7 +3723,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;
@@ -3843,7 +3843,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.
@@ -4608,13 +4608,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;
@@ -4660,7 +4660,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;
@@ -4795,7 +4795,7 @@ var thresholdNames = {
     some: 0,
     all: 1,
 };
-var InViewFeature = /*#__PURE__*/ class extends Feature {
+var InViewFeature = class extends Feature {
     constructor() {
         super(...arguments);
         this.hasEnteredView = false;
@@ -4861,7 +4861,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;
@@ -5225,7 +5225,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;
@@ -5582,7 +5582,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;
@@ -5606,7 +5606,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;
@@ -5696,7 +5696,7 @@ var correctBoxShadow = {
         return template(shadow);
     },
 };
-var MeasureLayoutWithContext = /*#__PURE__*/ class extends react_9.Component {
+var MeasureLayoutWithContext = class extends react_9.Component {
     /**
      * This only mounts projection nodes for components that
      * need measuring, we might want to do it for all components
@@ -5896,7 +5896,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 = [];
     }
@@ -7130,7 +7130,7 @@ var drag = {
         MeasureLayout,
     },
 };
-var DOMVisualElement = /*#__PURE__*/ class extends VisualElement {
+var DOMVisualElement = class extends VisualElement {
     constructor() {
         super(...arguments);
         this.KeyframeResolver = DOMKeyframesResolver;
@@ -7149,7 +7149,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';
@@ -7191,7 +7191,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';
@@ -7276,7 +7276,7 @@ function useUnmountEffect(callback) {
     return (0, react_2.useEffect)(() => () => callback(), []);
 }
 exports.useUnmountEffect = useUnmountEffect;
-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) {
@@ -8289,7 +8289,7 @@ function useTime() {
     return time2;
 }
 exports.useTime = useTime;
-var WillChangeMotionValue = /*#__PURE__*/ class extends MotionValue {
+var WillChangeMotionValue = class extends MotionValue {
     constructor() {
         super(...arguments);
         this.members = [];
@@ -8786,7 +8786,7 @@ function useInView(ref, { root, margin, amount, once = false, } = {}) {
     return isInView;
 }
 exports.useInView = useInView;
-var DragControls = /*#__PURE__*/ class {
+var DragControls = class {
     constructor() {
         this.componentControls = /* @__PURE__ */ new Set();
     }
@@ -8988,7 +8988,7 @@ function startOptimizedAppearAnimation(element, name, keyframes2, options, onRea
 }
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
 var createObject = () => ({});
-var StateVisualElement = /*#__PURE__*/ class extends VisualElement {
+var StateVisualElement = class extends VisualElement {
     build() { }
     measureInstanceViewportBox() {
         return createBox();
@@ -9145,7 +9145,7 @@ var cancelSync = stepsOrder.reduce((acc, key7) => {
     return acc;
 }, {});
 exports.cancelSync = cancelSync;
-// https :https://app.framerstatic.com/framer.VEJ3JK5Y.js
+// https :https://app.framerstatic.com/framer.K4XHQ4DX.js
 const react_12 = __importDefault(require("react"));
 const react_13 = require("react");
 const react_14 = require("react");
@@ -9158,7 +9158,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;
@@ -10842,12 +10842,12 @@ function renderPage(Page4, defaultPageStyle) {
     };
     return react_12.default.isValidElement(Page4) ? react_12.default.cloneElement(Page4, style) : react_12.default.createElement(Page4, style);
 }
-var NotFoundError = /*#__PURE__*/ class extends Error {
+var NotFoundError = class extends Error {
 };
 exports.NotFoundError = NotFoundError;
-var ErrorBoundaryCaughtError = /*#__PURE__*/ class extends Error {
+var ErrorBoundaryCaughtError = class extends Error {
 };
-var ErrorBoundary = /*#__PURE__*/ class extends react_9.Component {
+var ErrorBoundary = class extends react_9.Component {
     constructor(props) {
         super(props);
         this.state = {
@@ -11920,7 +11920,7 @@ function RoutesProvider({ routes, children, }) {
         children,
     });
 }
-var SuspenseErrorBoundary = /*#__PURE__*/ class extends react_9.Component {
+var SuspenseErrorBoundary = class extends react_9.Component {
     constructor() {
         super(...arguments);
         this.state = {
@@ -12498,7 +12498,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', {});
@@ -12623,7 +12623,7 @@ function animatableInterpolation(value, currentInterpolation) {
         },
     };
 }
-var AnimatableValue = /*#__PURE__*/ class {
+var AnimatableValue = class {
     constructor(value) {
         this.value = value;
         __publicField(this, 'observers', new Observers());
@@ -12819,7 +12819,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');
@@ -12871,7 +12871,7 @@ var BezierAnimator = /*#__PURE__*/ class {
     }
 };
 exports.BezierAnimator = BezierAnimator;
-var UnitBezier = /*#__PURE__*/ class {
+var UnitBezier = class {
     constructor(point1, point2) {
         __publicField(this, 'a');
         __publicField(this, 'b');
@@ -12924,7 +12924,7 @@ var UnitBezier = /*#__PURE__*/ class {
         return t2;
     }
 };
-var Integrator = /*#__PURE__*/ class {
+var Integrator = class {
     constructor(accelerationFunction) {
         __publicField(this, 'accelerationForState');
         this.accelerationForState = accelerationFunction;
@@ -12959,7 +12959,7 @@ var Integrator = /*#__PURE__*/ class {
         return output;
     }
 };
-var FrictionAnimator = /*#__PURE__*/ class {
+var FrictionAnimator = class {
     constructor(options) {
         __publicField(this, 'options');
         __publicField(this, 'state');
@@ -13139,7 +13139,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');
@@ -13222,7 +13222,7 @@ var Defaults = {
         tolerance: 1,
     },
 };
-var InertialScrollAnimator = /*#__PURE__*/ class {
+var InertialScrollAnimator = class {
     constructor(options) {
         __publicField(this, 'options');
         __publicField(this, 'current');
@@ -14421,7 +14421,7 @@ var DefaultInterpolationOptions = {
     colorModel: 'husl',
     /* HUSL */
 };
-var ValueInterpolation = /*#__PURE__*/ class {
+var ValueInterpolation = class {
     /**
      * @internal
      */
@@ -14477,7 +14477,7 @@ var Defaults2 = /* @__PURE__ */ (() => ({
     delta: 1 / 60,
     maxValues: 1e4,
 }))();
-var PrecalculatedAnimator = /*#__PURE__*/ class {
+var PrecalculatedAnimator = class {
     constructor(options) {
         __publicField(this, 'animator');
         __publicField(this, 'values');
@@ -14537,7 +14537,7 @@ var PrecalculatedAnimator = /*#__PURE__*/ class {
     }
 };
 var EventEmitter3 = /* @__PURE__ */ (() => require_eventemitter3().EventEmitter)();
-var EventEmitter = /*#__PURE__*/ class {
+var EventEmitter = class {
     constructor() {
         __publicField(this, '_emitter', new EventEmitter3());
     }
@@ -14656,7 +14656,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
      */
@@ -14873,7 +14873,7 @@ var RenderTarget = {
     },
 };
 exports.RenderTarget = RenderTarget;
-var AnimationDriver = /*#__PURE__*/ class {
+var AnimationDriver = class {
     constructor(animator, updateCallback, finishedCallback) {
         this.animator = animator;
         this.updateCallback = updateCallback;
@@ -14900,7 +14900,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);
@@ -14921,7 +14921,7 @@ var DefaultDeprecatedAnimationOptions = {
     colorModel: 'husl',
     /* HUSL */
 };
-var FramerAnimation = /*#__PURE__*/ class {
+var FramerAnimation = class {
     /**
      * @internal
      */
@@ -15548,7 +15548,7 @@ function getColorsFromTheme(theme, type) {
         screenColor: isDarkTheme ? '#333' : '#eee',
     };
 }
-var ErrorBoundary2 = /*#__PURE__*/ class extends react_9.Component {
+var ErrorBoundary2 = class extends react_9.Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'state', {});
@@ -17377,16 +17377,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);
         }
@@ -17399,23 +17399,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 */
     `
@@ -17430,7 +17430,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
@@ -17459,8 +17459,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 */
     `
@@ -17475,6 +17475,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]) {
@@ -20234,7 +20243,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');
@@ -20594,7 +20603,6 @@ function resetSetStyle(element, key7, toValue, microtask2 = true) {
     }
 }
 var Layer = /* @__PURE__ */ (() => {
-    /*#__PURE__*/
     class Layer2 extends react_9.Component {
         constructor() {
             super(...arguments);
@@ -21368,7 +21376,7 @@ var SharedLayoutContext = /* @__PURE__ */ react_12.default.createContext({
     scheduleProjectionDidUpdate: () => { },
     initLead: () => { },
 });
-var SharedLayoutRoot = /*#__PURE__*/ class extends react_9.Component {
+var SharedLayoutRoot = class extends react_9.Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'shouldAnimate', false);
@@ -21454,7 +21462,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());
@@ -21590,7 +21598,7 @@ function pointForEvent(event, customTarget = null) {
     };
     return point2;
 }
-var FramerEvent = /*#__PURE__*/ class {
+var FramerEvent = class {
     /**
      * @internal
      */
@@ -21700,7 +21708,7 @@ var DraggingContext = /* @__PURE__ */ react_12.default.createContext({
     dragging: false,
 });
 function WithDragging(Component15) {
-    const _WithDraggingHOC = /*#__PURE__*/ class extends react_12.default.Component {
+    const _WithDraggingHOC = class extends react_12.default.Component {
         constructor(props, defaultProps) {
             super(props, defaultProps);
             __publicField(this, 'state', {
@@ -22450,7 +22458,7 @@ var ObservableObject = /* @__PURE__ */ (() => {
     return ObservableObject2;
 })();
 exports.ObservableObject = ObservableObject;
-var ObservableObjectProxyHandler = /*#__PURE__*/ class {
+var ObservableObjectProxyHandler = class {
     constructor() {
         __publicField(this, 'set', (target, key7, value, receiver) => {
             if (key7 === $private) {
@@ -23107,7 +23115,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);
@@ -23468,7 +23476,7 @@ var Frame = /* @__PURE__ */ (() => {
     return FrameInner;
 })();
 exports.Frame = Frame;
-var LayoutTree = /*#__PURE__*/ class extends react_9.Component {
+var LayoutTree = class extends react_9.Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'layoutMaybeMutated');
@@ -23835,7 +23843,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/');
@@ -24808,7 +24816,7 @@ var NavigationTransitionType = /* @__PURE__ */ ((NavigationTransitionType2) => {
 })(NavigationTransitionType || {});
 exports.NavigationTransitionType = NavigationTransitionType;
 function WithNavigator(BaseComponent, navigationTransition, navigationTransitionDirection, NavigationTarget, navigationTransitionOptions) {
-    const InternalWithNavigator = /*#__PURE__*/ class extends react_12.default.Component {
+    const InternalWithNavigator = class extends react_12.default.Component {
         render() {
             return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(NavigationContext.Consumer, {
                 children: (navigation) => {
@@ -26172,7 +26180,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');
@@ -26239,7 +26247,7 @@ var GestureRecognizer = /*#__PURE__*/ class {
         }
     }
 };
-var MouseWheelGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
+var MouseWheelGestureRecognizer = class extends GestureRecognizer {
     constructor() {
         super(...arguments);
         __publicField(this, 'startEvent');
@@ -26272,7 +26280,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');
@@ -26336,7 +26344,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');
@@ -26365,7 +26373,7 @@ var TapGestureRecognizer = /*#__PURE__*/ class extends GestureRecognizer {
         }
     }
 };
-var FramerEventSession = /*#__PURE__*/ class {
+var FramerEventSession = class {
     constructor(dispatcher, customOrigin) {
         __publicField(this, 'events', []);
         __publicField(this, 'recognizers', []);
@@ -26528,7 +26536,7 @@ var FramerEventSession = /*#__PURE__*/ class {
     }
 };
 exports.FramerEventSession = FramerEventSession;
-var MouseEventListener = /*#__PURE__*/ class extends react_9.Component {
+var MouseEventListener = class extends react_9.Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'domMouseDown', (originalEvent) => {
@@ -26580,7 +26588,7 @@ var MouseEventListener = /*#__PURE__*/ class extends react_9.Component {
         safeWindow.removeEventListener('wheel', this.domMouseWheel);
     }
 };
-var TouchEventListener = /*#__PURE__*/ class extends react_9.Component {
+var TouchEventListener = class extends react_9.Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'domTouchStart', (originalEvent) => {
@@ -27562,7 +27570,7 @@ function useObserveData() {
     return !isNaN(context.update);
 }
 exports.useObserveData = useObserveData;
-var DataObserver = /*#__PURE__*/ class extends react_9.Component {
+var DataObserver = class extends react_9.Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'observers', []);
@@ -28628,7 +28636,7 @@ var withGeneratedLayoutId = (Component15) => react_12.default.forwardRef((props,
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(Component15, Object.assign(Object.assign({ layoutId }, props), { layoutIdKey: void 0, duplicatedFrom: void 0, ref }));
 });
 exports.withGeneratedLayoutId = withGeneratedLayoutId;
-var ContainerErrorBoundary = /*#__PURE__*/ class extends react_9.Component {
+var ContainerErrorBoundary = class extends react_9.Component {
     constructor() {
         super(...arguments);
         __publicField(this, 'state', {
@@ -29531,7 +29539,7 @@ function Floating(_j) {
         onDismiss,
     });
     return react_dom_1.default.createPortal(
-    /* @__PURE__ */ (0, jsx_runtime_1.jsxs)('div', Object.assign(Object.assign({ ref: floatingPositionRef, className: className2, style: {
+    /* @__PURE__ */ (0, jsx_runtime_1.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',
@@ -29568,7 +29576,7 @@ function Floating(_j) {
 exports.Floating = Floating;
 var GeneratedComponentContext = /* @__PURE__ */ react_12.default.createContext(void 0);
 exports.GeneratedComponentContext = GeneratedComponentContext;
-var LazyValue = /*#__PURE__*/ class {
+var LazyValue = class {
     constructor(resolver) {
         this.resolver = resolver;
         __publicField(this, 'status');
@@ -30725,7 +30733,7 @@ function getCollection(collection, locale) {
         return collection;
     });
 }
-var CompatibilityDatabaseCollection = /*#__PURE__*/ class {
+var CompatibilityDatabaseCollection = class {
     constructor(collection, locale) {
         this.collection = collection;
         this.locale = locale;
@@ -30990,12 +30998,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();
@@ -31030,7 +31038,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;
@@ -31097,7 +31105,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;
@@ -31123,7 +31131,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());
@@ -31161,7 +31169,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());
@@ -31199,7 +31207,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());
@@ -31237,7 +31245,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;
@@ -31322,13 +31330,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;
@@ -31341,7 +31349,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());
@@ -31363,7 +31371,7 @@ var ScalarUnaryOperationNot = /*#__PURE__*/ class extends ScalarUnaryOperation {
         };
     }
 };
-var ScalarLogicalOperation = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarLogicalOperation = class extends ScalarExpression {
     constructor(operandExpressions) {
         super();
         this.operandExpressions = operandExpressions;
@@ -31388,7 +31396,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');
@@ -31404,7 +31412,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');
@@ -31420,7 +31428,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;
@@ -31448,7 +31456,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', '=');
@@ -31462,7 +31470,7 @@ var ScalarComparisonEquals = /*#__PURE__*/ class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonNotEquals = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonNotEquals = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '!=');
@@ -31476,7 +31484,7 @@ var ScalarComparisonNotEquals = /*#__PURE__*/ class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonLessThan = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonLessThan = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '<');
@@ -31490,7 +31498,7 @@ var ScalarComparisonLessThan = /*#__PURE__*/ class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonLessThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonLessThanOrEqual = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '<=');
@@ -31504,7 +31512,7 @@ var ScalarComparisonLessThanOrEqual = /*#__PURE__*/ class extends ScalarComparis
         };
     }
 };
-var ScalarComparisonGreaterThan = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonGreaterThan = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '>');
@@ -31518,7 +31526,7 @@ var ScalarComparisonGreaterThan = /*#__PURE__*/ class extends ScalarComparison {
         };
     }
 };
-var ScalarComparisonGreaterThanOrEqual = /*#__PURE__*/ class extends ScalarComparison {
+var ScalarComparisonGreaterThanOrEqual = class extends ScalarComparison {
     constructor() {
         super(...arguments);
         __publicField(this, 'operator', '>=');
@@ -31532,7 +31540,7 @@ var ScalarComparisonGreaterThanOrEqual = /*#__PURE__*/ class extends ScalarCompa
         };
     }
 };
-var ScalarTypeCast = /*#__PURE__*/ class extends ScalarExpression {
+var ScalarTypeCast = class extends ScalarExpression {
     constructor(valueExpression) {
         super();
         this.valueExpression = valueExpression;
@@ -31548,7 +31556,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');
@@ -31578,7 +31586,7 @@ function convertToBoolean(value) {
     }
     return false;
 }
-var ScalarTypeCastDate = /*#__PURE__*/ class extends ScalarTypeCast {
+var ScalarTypeCastDate = class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'DATE');
@@ -31616,7 +31624,7 @@ function convertToDate(value) {
     }
     return null;
 }
-var ScalarTypeCastNumber = /*#__PURE__*/ class extends ScalarTypeCast {
+var ScalarTypeCastNumber = class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'NUMBER');
@@ -31653,7 +31661,7 @@ function convertToNumber(value) {
     }
     return null;
 }
-var ScalarTypeCastString = /*#__PURE__*/ class extends ScalarTypeCast {
+var ScalarTypeCastString = class extends ScalarTypeCast {
     constructor() {
         super(...arguments);
         __publicField(this, 'dataType', 'STRING');
@@ -32086,7 +32094,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);
@@ -32101,7 +32109,7 @@ var QueryPlan = /*#__PURE__*/ class {
         });
     }
 };
-var ScanCollectionPlan = /*#__PURE__*/ class extends QueryPlan {
+var ScanCollectionPlan = class extends QueryPlan {
     constructor(collection) {
         super();
         this.collection = collection;
@@ -32117,7 +32125,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;
@@ -32161,7 +32169,7 @@ var LookupIndexPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var UnionPlan = /*#__PURE__*/ class extends QueryPlan {
+var UnionPlan = class extends QueryPlan {
     constructor(childPlans) {
         super();
         this.childPlans = childPlans;
@@ -32193,7 +32201,7 @@ var UnionPlan = /*#__PURE__*/ class extends QueryPlan {
         });
     }
 };
-var IntersectionPlan = /*#__PURE__*/ class extends QueryPlan {
+var IntersectionPlan = class extends QueryPlan {
     constructor(childPlans) {
         super();
         this.childPlans = childPlans;
@@ -32225,7 +32233,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;
@@ -32257,7 +32265,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;
@@ -32279,7 +32287,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;
@@ -32322,14 +32330,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;
@@ -32368,7 +32376,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) {
@@ -32399,7 +32407,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());
@@ -32552,7 +32560,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);
@@ -32772,7 +32780,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());
     }
@@ -33439,7 +33447,7 @@ function usePrototypeNavigate({ preload, } = {}) {
     });
 }
 exports.usePrototypeNavigate = usePrototypeNavigate;
-var QueryCache = /*#__PURE__*/ class {
+var QueryCache = class {
     constructor(queryEngine2) {
         this.queryEngine = queryEngine2;
         __publicField(this, 'cache', /* @__PURE__ */ new Map());
@@ -33699,17 +33707,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({
@@ -34507,7 +34512,7 @@ var FontSourceNames = /* @__PURE__ */ ((FontSourceNames2) => {
 exports.FontSourceNames = FontSourceNames;
 var systemFontFamilyName = 'System Default';
 exports.systemFontFamilyName = systemFontFamilyName;
-var LocalFontSource = /*#__PURE__*/ class {
+var LocalFontSource = class {
     constructor() {
         __publicField(this, 'name', 'local');
         __publicField(this, 'fontFamilies', []);
@@ -34647,7 +34652,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', []);
@@ -34828,7 +34833,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', []);
@@ -34960,7 +34965,7 @@ var weightNameToNumber2 = {
     ExtraBold: 800,
     Black: 900,
 };
-var FramerFontSource = /*#__PURE__*/ class {
+var FramerFontSource = class {
     constructor() {
         __publicField(this, 'name', 'framer');
         __publicField(this, 'fontFamilies', []);
@@ -35017,7 +35022,7 @@ var FramerFontSource = /*#__PURE__*/ class {
     }
 };
 var googleFontSelectorPrefix = 'GF;';
-var GoogleFontSource = /*#__PURE__*/ class {
+var GoogleFontSource = class {
     constructor() {
         __publicField(this, 'name', 'google');
         __publicField(this, 'fontFamilies', []);
@@ -35123,7 +35128,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';
@@ -35193,7 +35198,7 @@ function isFontReady(family, style, weight) {
         }
     });
 }
-var FontStore = /*#__PURE__*/ class {
+var FontStore = class {
     constructor() {
         __publicField(this, 'enabled', false);
         __publicField(this, 'bySelector', /* @__PURE__ */ new Map());
@@ -35273,6 +35278,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);
         }
@@ -35653,6 +35660,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;
@@ -35703,7 +35711,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),
@@ -35810,9 +35818,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',
@@ -35901,7 +35907,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',
@@ -35928,6 +35934,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`, {
@@ -35938,14 +35947,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'),
@@ -36067,9 +36082,16 @@ var styles2 = /* @__PURE__ */ (() => [
 var FormBooleanInput = /* @__PURE__ */ withCSS(BooleanInput, styles2);
 exports.FormBooleanInput = FormBooleanInput;
 var Select = /* @__PURE__ */ react_12.default.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__ */ (0, jsx_runtime_1.jsx)(motion.input, {
+            type: 'hidden',
+            name: inputName,
+            defaultValue,
+        });
+    }
     return /* @__PURE__ */ (0, jsx_runtime_1.jsx)(motion.div, Object.assign(Object.assign({ ref: measureRef, style, className: cx(inputWrapperClassName, selectWrapperClassName, className2) }, rest), { children: /* @__PURE__ */ (0, jsx_runtime_1.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;
@@ -36218,7 +36240,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;
@@ -36240,6 +36262,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;',
@@ -36466,7 +36493,7 @@ var FitText = /* @__PURE__ */ (0, react_3.forwardRef)((_j, ref) => {
 });
 var RichTextContainer = /* @__PURE__ */ (0, react_3.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 = (0, react_3.useContext)(ComponentContainerContext);
@@ -36478,6 +36505,11 @@ var RichTextContainer = /* @__PURE__ */ (0, react_3.forwardRef)((props, ref) =>
     (0, react_4.useInsertionEffect)(() => {
         injectComponentCSSRules();
     }, []);
+    const processedChildren = (0, react_6.useMemo)(() => {
+        if (!children)
+            return;
+        return processRichTextChildren(children, stylesPresetsClassNames, plainText, anchorLinkOffsetY);
+    }, [children, stylesPresetsClassNames, plainText, anchorLinkOffsetY,]);
     if (!visible)
         return null;
     const isHidden = isEditable && environment2() === RenderTarget.canvas;
@@ -36546,39 +36578,79 @@ var RichTextContainer = /* @__PURE__ */ (0, react_3.forwardRef)((props, ref) =>
                         width: '100%',
                         height: '100%',
                     },
-                    children: children && styleRichTextChildren(children, stylesPresetsClassNames, plainText),
+                    children: processedChildren,
                 }) }));
         }
         else {
             return /* @__PURE__ */ (0, jsx_runtime_1.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__ */ (0, jsx_runtime_1.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__ */ (0, jsx_runtime_1.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 = react_11.Children.toArray(element.props.children);
     if (isString22(plainText)) {
         children = children.slice(0, 1);
     }
     children = children.map((child) => {
         if ((0, react_11.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__ */ (0, jsx_runtime_1.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 (0, react_11.cloneElement)(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 ((0, react_11.isValidElement)(node)) {
+        return extractTextFromReactNode(node.props.children);
+    }
+    if (Array.isArray(node)) {
+        return node.map(extractTextFromReactNode).join('');
+    }
+    return '';
+}
 var RichText = /* @__PURE__ */ (0, react_3.forwardRef)((_j, ref) => {
     var { children, html, htmlFromDesign } = _j, props = __rest(_j, ["children", "html", "htmlFromDesign"]);
     const content = html || children || htmlFromDesign;
@@ -36819,7 +36891,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;
@@ -36828,7 +36900,7 @@ var SharedSVGEntry = /*#__PURE__*/ class {
         this.count = count;
     }
 };
-var SharedSVGManager = /*#__PURE__*/ class {
+var SharedSVGManager = class {
     constructor() {
         __publicField(this, 'entries', /* @__PURE__ */ new Map());
     }
@@ -37692,7 +37764,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);
@@ -37727,7 +37799,7 @@ var InternalID = /*#__PURE__*/ class {
 };
 exports.InternalID = InternalID;
 var PathSegmentOuter = /* @__PURE__ */ (() => {
-    const _PathSegment = /*#__PURE__*/ class {
+    const _PathSegment = class {
         constructor(value) {
             __publicField(this, '__class', 'PathSegment');
             __publicField(this, 'x', 0);
@@ -37979,7 +38051,7 @@ function transformString(transform2) {
     return result;
 }
 exports.transformString = transformString;
-var LinearGradientElement = /*#__PURE__*/ class extends react_9.Component {
+var LinearGradientElement = class extends react_9.Component {
     render() {
         const { id: id3, stops, x1, x2, y1, y2, } = this.props;
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)('linearGradient', {
@@ -37998,7 +38070,7 @@ var LinearGradientElement = /*#__PURE__*/ class extends react_9.Component {
         });
     }
 };
-var RadialGradientElement = /*#__PURE__*/ class extends react_9.Component {
+var RadialGradientElement = class extends react_9.Component {
     render() {
         const { centerAnchorX, centerAnchorY, id: id3, widthFactor, heightFactor, stops, } = this.props;
         return /* @__PURE__ */ (0, jsx_runtime_1.jsx)('radialGradient', {
@@ -38017,7 +38089,7 @@ var RadialGradientElement = /*#__PURE__*/ class extends react_9.Component {
         });
     }
 };
-var SVGRoot = /*#__PURE__*/ class extends react_9.Component {
+var SVGRoot = class extends react_9.Component {
     render() {
         const { children, frame: frame2, innerRef, } = this.props;
         const { width, height, } = frame2;