motion-start 0.0.1 → 0.1.0

package/{src/render/dom/utils/batch-layout.ts → dist/render/dom/utils/batch-layout.js}

@@ -1,77 +1,67 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-type Job = () => void;
-type JobSetter = (job: Job) => void;
-type ReadWrites = (read: JobSetter, write: JobSetter) => void;
-
-/** 
-based on framer-motion@4.1.15,
-Copyright (c) 2018 Framer B.V.
-*/
-import sync from 'framesync';
-
-var unresolvedJobs = new Set();
-var layoutState = {
-    isMeasuringLayout: false,
-};
-function pushJob(stack, job, pointer) {
-    if (!stack[pointer])
-        stack[pointer] = [];
-    stack[pointer].push(job);
-}
-function batchLayout(callback: ReadWrites) {
-    unresolvedJobs.add(callback);
-    return function () { return unresolvedJobs.delete(callback); };
-}
-function flushLayout() {
-    if (!unresolvedJobs.size)
-        return;
-    var pointer = 0;
-    var reads = [[]];
-    var writes = [];
-    var setRead = function (job) { return pushJob(reads, job, pointer); };
-    var setWrite = function (job) {
-        pushJob(writes, job, pointer);
-        pointer++;
-    };
-    /**
-     * Resolve jobs into their array stacks
-     */
-    unresolvedJobs.forEach(function (callback) {
-        callback(setRead, setWrite);
-        pointer = 0;
-    });
-    unresolvedJobs.clear();
-    /**
-     * Mark that we're currently measuring layouts. This allows us to, for instance, ignore
-     * hover events that might be triggered as a result of resetting transforms.
-     *
-     * The postRender/setTimeout combo seems like an odd bit of scheduling but what it's saying
-     * is *after* the next render, wait 10ms before re-enabling hover events. Waiting until the
-     * next frame completely will result in missed, valid hover events. But events seem to
-     * be fired async from their actual action, so setting this to false too soon can still
-     * trigger events from layout measurements.
-     *
-     * Note: If we figure out a way of measuring layout while transforms remain applied, this can be removed.
-     * I have attempted unregistering event listeners and setting CSS to pointer-events: none
-     * but neither seem to work as expected.
-     */
-    layoutState.isMeasuringLayout = true;
-    sync.postRender(function () {
-        setTimeout(function () { return (layoutState.isMeasuringLayout = false); }, 10);
-    });
-    /**
-     * Execute jobs
-     */
-    var numStacks = writes.length;
-    for (var i = 0; i <= numStacks; i++) {
-        reads[i] && reads[i].forEach(executeJob);
-        writes[i] && writes[i].forEach(executeJob);
-    }
-}
-var executeJob = function (job) { return job(); };
-
-export { batchLayout, flushLayout, layoutState };
-
+/**
+based on framer-motion@4.1.15,
+Copyright (c) 2018 Framer B.V.
+*/
+import sync from 'framesync';
+var unresolvedJobs = new Set();
+var layoutState = {
+    isMeasuringLayout: false,
+};
+function pushJob(stack, job, pointer) {
+    if (!stack[pointer])
+        stack[pointer] = [];
+    stack[pointer].push(job);
+}
+function batchLayout(callback) {
+    unresolvedJobs.add(callback);
+    return function () { return unresolvedJobs.delete(callback); };
+}
+function flushLayout() {
+    if (!unresolvedJobs.size)
+        return;
+    var pointer = 0;
+    var reads = [[]];
+    var writes = [];
+    var setRead = function (job) { return pushJob(reads, job, pointer); };
+    var setWrite = function (job) {
+        pushJob(writes, job, pointer);
+        pointer++;
+    };
+    /**
+     * Resolve jobs into their array stacks
+     */
+    unresolvedJobs.forEach(function (callback) {
+        //@ts-ignore
+        callback(setRead, setWrite);
+        pointer = 0;
+    });
+    unresolvedJobs.clear();
+    /**
+     * Mark that we're currently measuring layouts. This allows us to, for instance, ignore
+     * hover events that might be triggered as a result of resetting transforms.
+     *
+     * The postRender/setTimeout combo seems like an odd bit of scheduling but what it's saying
+     * is *after* the next render, wait 10ms before re-enabling hover events. Waiting until the
+     * next frame completely will result in missed, valid hover events. But events seem to
+     * be fired async from their actual action, so setting this to false too soon can still
+     * trigger events from layout measurements.
+     *
+     * Note: If we figure out a way of measuring layout while transforms remain applied, this can be removed.
+     * I have attempted unregistering event listeners and setting CSS to pointer-events: none
+     * but neither seem to work as expected.
+     */
+    layoutState.isMeasuringLayout = true;
+    sync.postRender(function () {
+        setTimeout(function () { return (layoutState.isMeasuringLayout = false); }, 10);
+    });
+    /**
+     * Execute jobs
+     */
+    var numStacks = writes.length;
+    for (var i = 0; i <= numStacks; i++) {
+        reads[i] && reads[i].forEach(executeJob);
+        writes[i] && writes[i].forEach(executeJob);
+    }
+}
+var executeJob = function (job) { return job(); };
+export { batchLayout, flushLayout, layoutState };

package/dist/render/dom/utils/camel-to-dash.d.ts

@@ -0,0 +1,10 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * Convert camelCase to dash-case properties.
+ */
+declare var camelToDash: (str: string) => string;
+export { camelToDash };
+//# sourceMappingURL=camel-to-dash.d.ts.map

package/dist/render/dom/utils/camel-to-dash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"camel-to-dash.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/utils/camel-to-dash.ts"],"names":[],"mappings":"AAAA;;;EAGE;AASF;;GAEG;AACH,QAAA,IAAI,WAAW,QAAkB,MAAM,WAEtC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/{src/render/dom/utils/camel-to-dash.ts → dist/render/dom/utils/camel-to-dash.js}

@@ -1,20 +1,17 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
-var REPLACE_TEMPLATE = "$1-$2";
-/**
- * Convert camelCase to dash-case properties.
- */
-var camelToDash = function (str: string) {
-    return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
-};
-
-export { camelToDash };
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
+var REPLACE_TEMPLATE = "$1-$2";
+/**
+ * Convert camelCase to dash-case properties.
+ */
+var camelToDash = function (str) {
+    return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
+};
+export { camelToDash };

package/dist/render/dom/utils/create-config.d.ts

@@ -0,0 +1,7 @@
+import type { FeatureComponents } from '../../../motion/features/types';
+import type { CreateVisualElement } from '../../types';
+import type { CustomMotionComponentConfig } from '../motion-proxy';
+import type { Component } from 'svelte';
+declare function createDomMotionConfig(Component: string | Component, { forwardMotionProps }: CustomMotionComponentConfig, preloadedFeatures?: FeatureComponents, createVisualElement?: CreateVisualElement<any>): any;
+export { createDomMotionConfig };
+//# sourceMappingURL=create-config.d.ts.map

package/dist/render/dom/utils/create-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-config.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/utils/create-config.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAWxC,iBAAS,qBAAqB,CAC7B,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,EAAE,kBAAkB,EAAE,EAAE,2BAA2B,EACnD,iBAAiB,CAAC,EAAE,iBAAiB,EACrC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,OAY9C;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/render/dom/utils/create-config.js

@@ -0,0 +1,18 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { htmlMotionConfig } from '../../html/config-motion.js';
+import { svgMotionConfig } from '../../svg/config-motion.js';
+import { createUseRender } from '../use-render.js';
+import { isSVGComponent } from './is-svg-component.js';
+function createDomMotionConfig(Component, { forwardMotionProps }, preloadedFeatures, createVisualElement) {
+    var baseConfig = isSVGComponent(Component) ? svgMotionConfig : htmlMotionConfig;
+    return Object.assign(Object.assign({}, baseConfig), {
+        preloadedFeatures,
+        useRender: createUseRender(forwardMotionProps),
+        createVisualElement,
+        Component,
+    });
+}
+export { createDomMotionConfig };

package/dist/render/dom/utils/css-variables-conversion.d.ts

@@ -0,0 +1,28 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Target, TargetWithKeyframes } from '../../../types';
+import type { VisualElement } from '../../types';
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+declare var cssVariableRegex: RegExp;
+declare function parseCSSVariable(current: string): string[] | undefined[];
+/**
+ * Resolve CSS variables from
+ *
+ * @internal
+ */
+declare function resolveCSSVariables(visualElement: VisualElement, { ...target }: TargetWithKeyframes, transitionEnd: Target | undefined): {
+    target: TargetWithKeyframes;
+    transitionEnd?: Target;
+};
+export { cssVariableRegex, parseCSSVariable, resolveCSSVariables };
+//# sourceMappingURL=css-variables-conversion.d.ts.map

package/dist/render/dom/utils/css-variables-conversion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-variables-conversion.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/utils/css-variables-conversion.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AA4BjD;;;;;;;;GAQG;AACH,QAAA,IAAI,gBAAgB,QAAyD,CAAC;AAC9E,iBAAS,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,EAAE,CAKjE;AAqBD;;;;GAIG;AACH,iBAAS,mBAAmB,CAC3B,aAAa,EAAE,aAAa,EAC5B,EAAE,GAAG,MAAM,EAAE,EAAE,mBAAmB,EAClC,aAAa,EAAE,MAAM,GAAG,SAAS,GAC/B;IACF,MAAM,EAAE,mBAAmB,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAkCA;AAED,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAC"}

package/{src/render/dom/utils/css-variables-conversion.ts → dist/render/dom/utils/css-variables-conversion.js}

@@ -1,121 +1,111 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { Target, TargetWithKeyframes } from "../../../types";
-import type { VisualElement } from "../../types";
-/**
- * Parse Framer's special CSS variable format into a CSS token and a fallback.
- *
- * ```
- * `var(--foo, #fff)` => [`--foo`, '#fff']
- * ```
- *
- * @param current
- */
-// export declare const cssVariableRegex: RegExp;
-// export declare function parseCSSVariable(current: string): string[] | undefined[];
-/**
- * Resolve CSS variables from
- *
- * @internal
- */
-// export declare function resolveCSSVariables(): ;
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-import { __assign, __read } from 'tslib';
-// import { invariant } from '../../../utils/errors.js';
-
-function isCSSVariable(value) {
-    return typeof value === "string" && value.startsWith("var(--");
-}
-/**
- * Parse Framer's special CSS variable format into a CSS token and a fallback.
- *
- * ```
- * `var(--foo, #fff)` => [`--foo`, '#fff']
- * ```
- *
- * @param current
- */
-var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
-function parseCSSVariable(current: string): string[] | undefined[] {
-    var match = cssVariableRegex.exec(current);
-    if (!match)
-        return [,];
-    var _a = __read(match, 3), token = _a[1], fallback = _a[2];
-    return [token, fallback];
-}
-var maxDepth = 4;
-function getVariableValue(current, element, depth) {
-    if (depth === void 0) { depth = 1; }
-    //invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
-    var _a = __read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
-    // No CSS variable detected
-    if (!token)
-        return;
-    // Attempt to read this CSS variable off the element
-    var resolved = window.getComputedStyle(element).getPropertyValue(token);
-    if (resolved) {
-        return resolved.trim();
-    }
-    else if (isCSSVariable(fallback)) {
-        // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
-        return getVariableValue(fallback, element, depth + 1);
-    }
-    else {
-        return fallback;
-    }
-}
-/**
- * Resolve CSS variables from
- *
- * @internal
- */
-function resolveCSSVariables(visualElement: VisualElement, { ...target }: TargetWithKeyframes, transitionEnd: Target | undefined): {
-    target: TargetWithKeyframes;
-    transitionEnd?: Target;
-} {
-    var element = visualElement.getInstance();
-    if (!(element instanceof HTMLElement))
-        return { target: target, transitionEnd: transitionEnd };
-    // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
-    // only if they change but I think this reads clearer and this isn't a performance-critical path.
-    if (transitionEnd) {
-        transitionEnd = __assign({}, transitionEnd);
-    }
-    // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
-    visualElement.forEachValue(function (value) {
-        var current = value.get();
-        if (!isCSSVariable(current))
-            return;
-        var resolved = getVariableValue(current, element);
-        if (resolved)
-            value.set(resolved);
-    });
-    // Cycle through every target property and resolve CSS variables. Currently
-    // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
-    for (var key in target) {
-        var current = target[key];
-        if (!isCSSVariable(current))
-            continue;
-        var resolved = getVariableValue(current, element);
-        if (!resolved)
-            continue;
-        // Clone target if it hasn't already been
-        target[key] = resolved;
-        // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
-        // CSS variable. This will ensure that after the animation the component will reflect
-        // changes in the value of the CSS variable.
-        if (transitionEnd)
-            (_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : (transitionEnd[key] = current);
-    }
-    return { target: target, transitionEnd: transitionEnd };
-}
-
-export { cssVariableRegex, parseCSSVariable, resolveCSSVariables };
-
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+// export declare const cssVariableRegex: RegExp;
+// export declare function parseCSSVariable(current: string): string[] | undefined[];
+/**
+ * Resolve CSS variables from
+ *
+ * @internal
+ */
+// export declare function resolveCSSVariables(): ;
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+// import { invariant } from '../../../utils/errors.js';
+function isCSSVariable(value) {
+    return typeof value === 'string' && value.startsWith('var(--');
+}
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/;
+function parseCSSVariable(current) {
+    var match = cssVariableRegex.exec(current);
+    if (!match)
+        return [,];
+    var [_, token, fallback] = match;
+    return [token, fallback];
+}
+var maxDepth = 4;
+function getVariableValue(current, element, depth) {
+    if (depth === void 0) {
+        depth = 1;
+    }
+    //invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
+    var [token, fallback] = parseCSSVariable(current);
+    // No CSS variable detected
+    if (!token)
+        return;
+    // Attempt to read this CSS variable off the element
+    var resolved = window.getComputedStyle(element).getPropertyValue(token);
+    if (resolved) {
+        return resolved.trim();
+    }
+    else if (isCSSVariable(fallback)) {
+        // The fallback might itself be a CSS variable, in which case we attempt to resolve it too.
+        return getVariableValue(fallback, element, depth + 1);
+    }
+    else {
+        return fallback;
+    }
+}
+/**
+ * Resolve CSS variables from
+ *
+ * @internal
+ */
+function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
+    var element = visualElement.getInstance();
+    if (!(element instanceof HTMLElement))
+        return { target: target, transitionEnd: transitionEnd };
+    // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
+    // only if they change but I think this reads clearer and this isn't a performance-critical path.
+    if (transitionEnd) {
+        transitionEnd = Object.assign({}, transitionEnd);
+    }
+    // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
+    visualElement.forEachValue((value) => {
+        var current = value.get();
+        if (!isCSSVariable(current))
+            return;
+        var resolved = getVariableValue(current, element);
+        if (resolved)
+            value.set(resolved);
+    });
+    // Cycle through every target property and resolve CSS variables. Currently
+    // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)`
+    for (var key in target) {
+        //@ts-ignore
+        var current = target[key];
+        if (!isCSSVariable(current))
+            continue;
+        var resolved = getVariableValue(current, element);
+        if (!resolved)
+            continue;
+        // Clone target if it hasn't already been
+        //@ts-ignore
+        target[key] = resolved;
+        // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
+        // CSS variable. This will ensure that after the animation the component will reflect
+        // changes in the value of the CSS variable.
+        if (transitionEnd)
+            //@ts-ignore
+            (_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : (transitionEnd[key] = current);
+    }
+    return { target: target, transitionEnd: transitionEnd };
+}
+export { cssVariableRegex, parseCSSVariable, resolveCSSVariables };

package/dist/render/dom/utils/filter-props.d.ts

@@ -0,0 +1,8 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionProps } from "../../../motion/types";
+declare function filterProps(props: MotionProps, isDom: boolean, forwardMotionProps: boolean): {};
+export { filterProps };
+//# sourceMappingURL=filter-props.d.ts.map

package/dist/render/dom/utils/filter-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-props.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/utils/filter-props.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAsCzD,iBAAS,WAAW,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,OAAO,MAWnF;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/{src/render/dom/utils/filter-props.ts → dist/render/dom/utils/filter-props.js}

@@ -1,55 +1,47 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { MotionProps } from "../../../motion/types";
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-import { isValidMotionProp } from '../../../motion/utils/valid-prop.js';
-
-var shouldForward = function (key) { return !isValidMotionProp(key); };
-/**
- * Emotion and Styled Components both allow users to pass through arbitrary props to their components
- * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
- * of these should be passed to the underlying DOM node.
- *
- * However, when styling a Motion component `styled(MotionDiv)`, both packages pass through *all* props
- * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
- * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
- * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
- *
- * By making it an optionalDependency we can offer this functionality only in the situations where it's
- * actually required.
- */
-try {
-    var emotionIsPropValid_1 = require("@emotion/is-prop-valid").default;
-    shouldForward = function (key) {
-        // Handle events explicitly as Emotion validates them all as true
-        if (key.startsWith("on")) {
-            return !isValidMotionProp(key);
-        }
-        else {
-            return emotionIsPropValid_1(key);
-        }
-    };
-}
-catch (_a) {
-    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
-}
-function filterProps(props: MotionProps, isDom: boolean, forwardMotionProps: boolean) {
-    var filteredProps = {};
-    for (var key in props) {
-        if (shouldForward(key) ||
-            (forwardMotionProps === true && isValidMotionProp(key)) ||
-            (!isDom && !isValidMotionProp(key))) {
-            filteredProps[key] = props[key];
-        }
-    }
-    return filteredProps;
-}
-
-export { filterProps };
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { isValidMotionProp } from '../../../motion/utils/valid-prop.js';
+var shouldForward = function (key) { return !isValidMotionProp(key); };
+/**
+ * Emotion and Styled Components both allow users to pass through arbitrary props to their components
+ * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
+ * of these should be passed to the underlying DOM node.
+ *
+ * However, when styling a Motion component `styled(MotionDiv)`, both packages pass through *all* props
+ * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
+ * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
+ * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
+ *
+ * By making it an optionalDependency we can offer this functionality only in the situations where it's
+ * actually required.
+ */
+try {
+    var emotionIsPropValid_1 = require("@emotion/is-prop-valid").default;
+    shouldForward = function (key) {
+        // Handle events explicitly as Emotion validates them all as true
+        if (key.startsWith("on")) {
+            return !isValidMotionProp(key);
+        }
+        else {
+            return emotionIsPropValid_1(key);
+        }
+    };
+}
+catch (_a) {
+    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
+}
+function filterProps(props, isDom, forwardMotionProps) {
+    var filteredProps = {};
+    for (var key in props) {
+        if (shouldForward(key) ||
+            (forwardMotionProps === true && isValidMotionProp(key)) ||
+            (!isDom && !isValidMotionProp(key))) {
+            //@ts-ignore
+            filteredProps[key] = props[key];
+        }
+    }
+    return filteredProps;
+}
+export { filterProps };

package/dist/render/dom/utils/is-css-variable.d.ts

@@ -0,0 +1,14 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * Returns true if the provided key is a CSS variable
+ */
+declare function isCSSVariable(key: string): boolean;
+export { isCSSVariable };
+//# sourceMappingURL=is-css-variable.d.ts.map