motion-start 0.0.1 → 0.1.0

package/{src/components/AnimateSharedLayout/utils/stack.ts → dist/components/AnimateSharedLayout/utils/stack.js}

@@ -1,160 +1,138 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { VisualElement } from "../../../render/types";
-export type LeadAndFollow = [
-    VisualElement | undefined,
-    VisualElement | undefined
-];
-export interface LayoutStack {
-    add(element: VisualElement): void;
-    remove(element: VisualElement): void;
-    getLead(): VisualElement | undefined;
-    updateSnapshot(): void;
-    clearSnapshot(): void;
-    animate(element: VisualElement, crossfade: boolean): void;
-    updateLeadAndFollow(): void;
-}
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-
-import { __assign } from 'tslib';
-import { elementDragControls } from '../../../gestures/drag/VisualElementDragControls.js';
-import { Presence } from '../types.js';
-import { createCrossfader } from './crossfader.js';
-
-function layoutStack(): LayoutStack {
-    var stack = new Set();
-    var state = { leadIsExiting: false };
-    var prevState = __assign({}, state);
-    var prevValues;
-    var prevViewportBox;
-    var prevDragCursor;
-    var crossfader = createCrossfader();
-    var needsCrossfadeAnimation = false;
-    function getFollowViewportBox() {
-        return state.follow ? state.follow.prevViewportBox : prevViewportBox;
-    }
-    function getFollowLayout() {
-        var _a;
-        return (_a = state.follow) === null || _a === void 0 ? void 0 : _a.getLayoutState().layout;
-    }
-    return {
-        add: function (element) {
-            element.setCrossfader(crossfader);
-            stack.add(element);
-            /**
-             * Hydrate new element with previous drag position if we have one
-             */
-            if (prevDragCursor)
-                element.prevDragCursor = prevDragCursor;
-            if (!state.lead)
-                state.lead = element;
-        },
-        remove: function (element) {
-            stack.delete(element);
-        },
-        getLead: function () { return state.lead; },
-        updateSnapshot: function () {
-            if (!state.lead)
-                return;
-            prevValues = crossfader.isActive()
-                ? crossfader.getLatestValues()
-                : state.lead.getLatestValues();
-            prevViewportBox = state.lead.prevViewportBox;
-            var dragControls = elementDragControls.get(state.lead);
-            if (dragControls && dragControls.isDragging) {
-                prevDragCursor = dragControls.cursorProgress;
-            }
-        },
-        clearSnapshot: function () {
-            prevDragCursor = prevViewportBox = undefined;
-        },
-        updateLeadAndFollow: function () {
-            var _a;
-            prevState = __assign({}, state);
-            var lead;
-            var follow;
-            var order = Array.from(stack);
-            for (var i = order.length; i--; i >= 0) {
-                var element = order[i];
-                if (lead)
-                    follow !== null && follow !== void 0 ? follow : (follow = element);
-                lead !== null && lead !== void 0 ? lead : (lead = element);
-                if (lead && follow)
-                    break;
-            }
-            state.lead = lead;
-            state.follow = follow;
-            state.leadIsExiting = ((_a = state.lead) === null || _a === void 0 ? void 0 : _a.presence) === Presence.Exiting;
-            crossfader.setOptions({
-                lead: lead,
-                follow: follow,
-                prevValues: prevValues,
-                crossfadeOpacity: (follow === null || follow === void 0 ? void 0 : follow.isPresenceRoot) || (lead === null || lead === void 0 ? void 0 : lead.isPresenceRoot),
-            });
-            if (
-            // Don't crossfade if we've just animated back from lead and switched the
-            // old follow to the new lead.
-            state.lead !== prevState.follow &&
-                (prevState.lead !== state.lead ||
-                    prevState.leadIsExiting !== state.leadIsExiting)) {
-                needsCrossfadeAnimation = true;
-            }
-        },
-        animate: function (child, shouldCrossfade) {
-            var _a;
-            if (shouldCrossfade === void 0) { shouldCrossfade = false; }
-            if (child === state.lead) {
-                if (shouldCrossfade) {
-                    /**
-                     * Point a lead to itself in case it was previously pointing
-                     * to a different visual element
-                     */
-                    child.pointTo(state.lead);
-                }
-                else {
-                    child.setVisibility(true);
-                }
-                var config = {};
-                var prevParent = (_a = state.follow) === null || _a === void 0 ? void 0 : _a.getProjectionParent();
-                if (prevParent) {
-                    /**
-                     * We'll use this to determine if the element or its layoutId has been reparented.
-                     */
-                    config.prevParent = prevParent;
-                }
-                if (child.presence === Presence.Entering) {
-                    config.originBox = getFollowViewportBox();
-                }
-                else if (child.presence === Presence.Exiting) {
-                    config.targetBox = getFollowLayout();
-                }
-                if (needsCrossfadeAnimation) {
-                    needsCrossfadeAnimation = false;
-                    var transition = child.getDefaultTransition();
-                    child.presence === Presence.Entering
-                        ? crossfader.toLead(transition)
-                        : crossfader.fromLead(transition);
-                }
-                child.notifyLayoutReady(config);
-            }
-            else {
-                if (shouldCrossfade) {
-                    state.lead && child.pointTo(state.lead);
-                }
-                else {
-                    child.setVisibility(false);
-                }
-            }
-        },
-    };
-}
-
-export { layoutStack };
-
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { elementDragControls } from '../../../gestures/drag/VisualElementDragControls.js';
+import { Presence } from '../types.js';
+import { createCrossfader } from './crossfader.js';
+function layoutStack() {
+    var stack = new Set();
+    var state = { leadIsExiting: false, lead: {}, follow: {} };
+    var prevState = Object.assign({}, state);
+    var prevValues;
+    var prevViewportBox;
+    var prevDragCursor;
+    var crossfader = createCrossfader();
+    var needsCrossfadeAnimation = false;
+    function getFollowViewportBox() {
+        return state.follow ? state.follow.prevViewportBox : prevViewportBox;
+    }
+    function getFollowLayout() {
+        var _a;
+        return (_a = state.follow) === null || _a === void 0 ? void 0 : _a.getLayoutState().layout;
+    }
+    return {
+        add: (element) => {
+            element.setCrossfader(crossfader);
+            stack.add(element);
+            /**
+             * Hydrate new element with previous drag position if we have one
+             */
+            if (prevDragCursor)
+                element.prevDragCursor = prevDragCursor;
+            if (!state.lead)
+                state.lead = element;
+        },
+        remove: (element) => {
+            stack.delete(element);
+        },
+        getLead: () => state.lead,
+        updateSnapshot: () => {
+            //@ts-ignore
+            if (!state.lead)
+                return;
+            prevValues = crossfader.isActive() ? crossfader.getLatestValues() : state.lead.getLatestValues(); //wierd
+            prevViewportBox = state.lead.prevViewportBox;
+            var dragControls = elementDragControls.get(state.lead);
+            if (dragControls && dragControls.isDragging) {
+                //@ts-ignore
+                prevDragCursor = dragControls.cursorProgress;
+            }
+        },
+        clearSnapshot: () => {
+            prevDragCursor = prevViewportBox = undefined;
+        },
+        updateLeadAndFollow: () => {
+            var _a;
+            prevState = Object.assign({}, state);
+            var lead;
+            var follow;
+            var order = Array.from(stack);
+            for (var i = order.length; i--; i >= 0) {
+                var element = order[i];
+                if (lead)
+                    follow !== null && follow !== void 0 ? follow : (follow = element);
+                lead !== null && lead !== void 0 ? lead : (lead = element);
+                if (lead && follow)
+                    break;
+            }
+            state.lead = lead;
+            state.follow = follow;
+            state.leadIsExiting = ((_a = state.lead) === null || _a === void 0 ? void 0 : _a.presence) === Presence.Exiting;
+            crossfader.setOptions({
+                lead: lead,
+                follow: follow,
+                prevValues: prevValues,
+                crossfadeOpacity: 
+                // @ts-expect-error
+                (follow === null || follow === void 0 ? void 0 : follow.isPresenceRoot) || // @ts-expect-error
+                    (lead === null || lead === void 0 ? void 0 : lead.isPresenceRoot),
+            });
+            if (
+            // Don't crossfade if we've just animated back from lead and switched the
+            // old follow to the new lead.
+            state.lead !== prevState.follow &&
+                (prevState.lead !== state.lead || prevState.leadIsExiting !== state.leadIsExiting)) {
+                needsCrossfadeAnimation = true;
+            }
+        },
+        animate: (child, shouldCrossfade) => {
+            var _a;
+            if (shouldCrossfade === void 0) {
+                shouldCrossfade = false;
+            }
+            if (child === state.lead) {
+                if (shouldCrossfade) {
+                    /**
+                     * Point a lead to itself in case it was previously pointing
+                     * to a different visual element
+                     */
+                    child.pointTo(state.lead);
+                }
+                else {
+                    child.setVisibility(true);
+                }
+                var config = {};
+                var prevParent = (_a = state.follow) === null || _a === void 0 ? void 0 : _a.getProjectionParent();
+                if (prevParent) {
+                    /**
+                     * We'll use this to determine if the element or its layoutId has been reparented.
+                     */
+                    // @ts-expect-error
+                    config.prevParent = prevParent;
+                }
+                if (child.presence === Presence.Entering) { // @ts-expect-error
+                    config.originBox = getFollowViewportBox();
+                }
+                else if (child.presence === Presence.Exiting) { // @ts-expect-error
+                    config.targetBox = getFollowLayout();
+                }
+                if (needsCrossfadeAnimation) {
+                    needsCrossfadeAnimation = false;
+                    var transition = child.getDefaultTransition();
+                    child.presence === Presence.Entering ? crossfader.toLead(transition) : crossfader.fromLead(transition);
+                }
+                child.notifyLayoutReady(config);
+            }
+            else {
+                if (shouldCrossfade) {
+                    state.lead && child.pointTo(state.lead);
+                }
+                else {
+                    child.setVisibility(false);
+                }
+            }
+        },
+    };
+}
+export { layoutStack };

package/{src → dist}/components/LazyMotion/LazyMotion.svelte

@@ -9,6 +9,8 @@ Copyright (c) 2018 Framer B.V. -->
 
   import { LazyContext } from "../../context/LazyContext";
   import { loadFeatures } from "../../motion/features/definitions";
+  import type { FeatureBundle } from "../../motion/features/types";
+  import type { LazyFeatureBundle } from "./types";
 
   type $$Props = LazyProps;
 
@@ -52,16 +54,18 @@ Copyright (c) 2018 Framer B.V. -->
     isCustom = false;
 
   let _ = !isLazyBundle(features);
-  let loadedRenderer = undefined;
+  let loadedRenderer = undefined as any;
   /**
    * If this is a synchronous load, load features immediately
    */
-  $: if (!isLazyBundle(features, _)) {
+  $: if (!isLazyBundle(features) && _) {
     const { renderer, ...loadedFeatures } = features;
     loadedRenderer.current = renderer;
     loadFeatures(loadedFeatures);
   }
-  function isLazyBundle(features) {
+  function isLazyBundle(
+    features: FeatureBundle | LazyFeatureBundle,
+  ): features is LazyFeatureBundle {
     return typeof features === "function";
   }
   onMount(() => {
@@ -69,6 +73,8 @@ Copyright (c) 2018 Framer B.V. -->
       features().then(({ renderer, ...loadedFeatures }) => {
         loadFeatures(loadedFeatures);
         loadedRenderer.current = renderer;
+
+        // @ts-expect-error
         setIsLoaded(true);
       });
     }

package/dist/components/LazyMotion/LazyMotion.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { LazyProps } from "./index.js";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const LazyMotion: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<LazyProps, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type LazyMotion = InstanceType<typeof LazyMotion>;
+export default LazyMotion;
+//# sourceMappingURL=LazyMotion.svelte.d.ts.map

package/dist/components/LazyMotion/LazyMotion.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LazyMotion.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/components/LazyMotion/LazyMotion.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AA0M5C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,UAAU;;;;;;cAAmF,CAAC;AAClF,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/{src/components/LazyMotion/index.ts → dist/components/LazyMotion/index.d.ts}

@@ -1,42 +1,42 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-export type { LazyProps } from "./types";
-/**
- * Used in conjunction with the `m` component to reduce bundle size.
- *
- * `m` is a version of the `motion` component that only loads functionality
- * critical for the initial render.
- *
- * `LazyMotion` can then be used to either synchronously or asynchronously
- * load animation and gesture support.
- *
- * ```jsx
- * // Synchronous loading
- * import { LazyMotion, m, domAnimations } from "framer-motion"
- *
- * function App() {
- *   return (
- *     <LazyMotion features={domAnimations}>
- *       <m.div animate={{ scale: 2 }} />
- *     </LazyMotion>
- *   )
- * }
- *
- * // Asynchronous loading
- * import { LazyMotion, m } from "framer-motion"
- *
- * function App() {
- *   return (
- *     <LazyMotion features={() => import('./path/to/domAnimations')}>
- *       <m.div animate={{ scale: 2 }} />
- *     </LazyMotion>
- *   )
- * }
- * ```
- *
- * @public
- */
-export {default as LazyMotion} from './LazyMotion.svelte';
-
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+export type { LazyProps } from "./types";
+/**
+ * Used in conjunction with the `m` component to reduce bundle size.
+ *
+ * `m` is a version of the `motion` component that only loads functionality
+ * critical for the initial render.
+ *
+ * `LazyMotion` can then be used to either synchronously or asynchronously
+ * load animation and gesture support.
+ *
+ * ```jsx
+ * // Synchronous loading
+ * import { LazyMotion, m, domAnimations } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={domAnimations}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ *
+ * // Asynchronous loading
+ * import { LazyMotion, m } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={() => import('./path/to/domAnimations')}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ * ```
+ *
+ * @public
+ */
+export { default as LazyMotion } from './LazyMotion.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/LazyMotion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/components/LazyMotion/index.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,qBAAqB,CAAC"}

package/dist/components/LazyMotion/index.js

@@ -0,0 +1,36 @@
+/**
+ * Used in conjunction with the `m` component to reduce bundle size.
+ *
+ * `m` is a version of the `motion` component that only loads functionality
+ * critical for the initial render.
+ *
+ * `LazyMotion` can then be used to either synchronously or asynchronously
+ * load animation and gesture support.
+ *
+ * ```jsx
+ * // Synchronous loading
+ * import { LazyMotion, m, domAnimations } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={domAnimations}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ *
+ * // Asynchronous loading
+ * import { LazyMotion, m } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={() => import('./path/to/domAnimations')}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ * ```
+ *
+ * @public
+ */
+export { default as LazyMotion } from './LazyMotion.svelte';

package/{src/components/LazyMotion/types.ts → dist/components/LazyMotion/types.d.ts}

@@ -1,58 +1,57 @@
-/// <reference types="react" />
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { FeatureBundle } from "../../motion/features/types";
-export type LazyFeatureBundle = () => Promise<FeatureBundle>;
-/**
- * @public
- */
-export interface LazyProps {
-    // children?: React.ReactNode;
-    /**
-     * Can be used to provide a feature bundle synchronously or asynchronously.
-     *
-     * ```jsx
-     * // features.js
-     * import { domAnimations } from "framer-motion"
-     * export default domAnimations
-     *
-     * // index.js
-     * import { LazyMotion, m } from "framer-motion"
-     *
-     * const loadFeatures = import("./features.js")
-     *   .then(res => res.default)
-     *
-     * function Component() {
-     *   return (
-     *     <LazyMotion features={loadFeatures}>
-     *       <m.div animate={{ scale: 1.5 }} />
-     *     </LazyMotion>
-     *   )
-     * }
-     * ```
-     *
-     * @public
-     */
-    features: FeatureBundle | LazyFeatureBundle;
-    /**
-     * If `true`, will throw an error if a `motion` component renders within
-     * a `LazyMotion` component.
-     *
-     * ```jsx
-     * // This component will throw an error that explains using a motion component
-     * // instead of the m component will break the benefits of code-splitting.
-     * function Component() {
-     *   return (
-     *     <LazyMotion features={domAnimation} strict>
-     *       <MotionDiv />
-     *     </LazyMotion>
-     *   )
-     * }
-     * ```
-     *
-     * @public
-     */
-    strict?: boolean;
-}
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureBundle } from '../../motion/features/types';
+export type LazyFeatureBundle = () => Promise<FeatureBundle>;
+/**
+ * @public
+ */
+export interface LazyProps {
+    /**
+     * Can be used to provide a feature bundle synchronously or asynchronously.
+     *
+     * ```jsx
+     * // features.js
+     * import { domAnimations } from "framer-motion"
+     * export default domAnimations
+     *
+     * // index.js
+     * import { LazyMotion, m } from "framer-motion"
+     *
+     * const loadFeatures = import("./features.js")
+     *   .then(res => res.default)
+     *
+     * function Component() {
+     *   return (
+     *     <LazyMotion features={loadFeatures}>
+     *       <m.div animate={{ scale: 1.5 }} />
+     *     </LazyMotion>
+     *   )
+     * }
+     * ```
+     *
+     * @public
+     */
+    features: FeatureBundle | LazyFeatureBundle;
+    /**
+     * If `true`, will throw an error if a `motion` component renders within
+     * a `LazyMotion` component.
+     *
+     * ```jsx
+     * // This component will throw an error that explains using a motion component
+     * // instead of the m component will break the benefits of code-splitting.
+     * function Component() {
+     *   return (
+     *     <LazyMotion features={domAnimation} strict>
+     *       <MotionDiv />
+     *     </LazyMotion>
+     *   )
+     * }
+     * ```
+     *
+     * @public
+     */
+    strict?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/LazyMotion/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/components/LazyMotion/types.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACjE,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,CAAC,aAAa,CAAC,CAAC;AAC7D;;GAEG;AACH,MAAM,WAAW,SAAS;IAEzB;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,QAAQ,EAAE,aAAa,GAAG,iBAAiB,CAAC;IAC5C;;;;;;;;;;;;;;;;;OAiBG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/dist/components/LazyMotion/types.js

@@ -0,0 +1 @@
+export {};

package/{src → dist}/components/MotionConfig/MotionConfig.svelte

@@ -19,8 +19,9 @@ Copyright (c) 2018 Framer B.V. -->
     isStatic: $$Props["isStatic"] = undefined,
     transition: $$Props["transition"] = undefined,
     isCustom = false;
-  const mcc: Writable<MotionConfigContextObject> =
-    getContext(MotionConfigContext) || MotionConfigContext(isCustom);
+  const mcc =
+    getContext<Writable<MotionConfigContextObject>>(MotionConfigContext) ||
+    MotionConfigContext(isCustom);
   /**
    * Inherit props from any parent MotionConfig components
    */
@@ -48,6 +49,7 @@ Copyright (c) 2018 Framer B.V. -->
   const memo = () => config;
   const scaleCorrector = scaleCorrection();
   $: {
+    // @ts-expect-error
     context.set(memo(transitionDependency, config.transformPagePoint));
     scaleCorrector.update();
   }