motion-start 0.0.3 → 0.1.1

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

@@ -1 +1 @@
-{"version":3,"file":"unit-conversion.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/utils/unit-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;AACjD,aAAK,oBAAoB;IACrB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,MAAM,WAAW;CACpB;AAsOD;;;;;;GAMG;AACH,iBAAS,cAAc,CAAC,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG;IACzH,MAAM,EAAE,mBAAmB,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAIA;AAED,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"unit-conversion.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/utils/unit-conversion.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,MAAM,EAAE,mBAAmB,EAAc,MAAM,gBAAgB,CAAC;AAC9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,aAAK,oBAAoB;IACxB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,MAAM,WAAW;CACjB;AA4ND;;;;;;GAMG;AACH,iBAAS,cAAc,CACtB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,mBAAmB,EAC3B,MAAM,CAAC,EAAE,MAAM,EACf,aAAa,CAAC,EAAE,MAAM,GACpB;IACF,MAAM,EAAE,mBAAmB,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAIA;AAED,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,CAAC"}

package/dist/render/dom/utils/unit-conversion.js

@@ -12,67 +12,49 @@ based on framer-motion@4.0.3,
 Copyright (c) 2018 Framer B.V.
 */
 import { fixed } from '../../../utils/fix-process-env.js';
-import { __assign, __read } from 'tslib';
 import { number, px } from 'style-value-types';
 import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.js';
 // import { invariant } from '../../../utils/errors.js';
 import { transformProps } from '../../html/utils/transform.js';
 import { findDimensionValueType } from '../value-types/dimensions.js';
-var positionalKeys = new Set([
-    "width",
-    "height",
-    "top",
-    "left",
-    "right",
-    "bottom",
-    "x",
-    "y",
-]);
-var isPositionalKey = function (key) { return positionalKeys.has(key); };
-var hasPositionalKey = function (target) {
-    return Object.keys(target).some(isPositionalKey);
-};
-var setAndResetVelocity = function (value, to) {
+var positionalKeys = new Set(['width', 'height', 'top', 'left', 'right', 'bottom', 'x', 'y']);
+var isPositionalKey = (key) => positionalKeys.has(key);
+var hasPositionalKey = (target) => Object.keys(target).some(isPositionalKey);
+var setAndResetVelocity = (value, to) => {
     // Looks odd but setting it twice doesn't render, it'll just
     // set both prev and current to the latest value
     value.set(to, false);
     value.set(to);
 };
-var isNumOrPxType = function (v) {
-    return v === number || v === px;
-};
-var getPosFromMatrix = function (matrix, pos) {
-    return parseFloat(matrix.split(", ")[pos]);
-};
-var getTranslateFromMatrix = function (pos2, pos3) {
-    return function (_bbox, _a) {
-        var transform = _a.transform;
-        if (transform === "none" || !transform)
-            return 0;
-        var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
-        if (matrix3d) {
-            return getPosFromMatrix(matrix3d[1], pos3);
+var isNumOrPxType = (v) => v === number || v === px;
+var getPosFromMatrix = (matrix, pos) => Number.parseFloat(matrix.split(', ')[pos]);
+var getTranslateFromMatrix = (pos2, pos3) => (_bbox, _a) => {
+    varm = _a.transform; // @ts-expect-error
+    if (transform === 'none' || !transform)
+        return 0; // @ts-expect-error
+    var matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+    if (matrix3d) {
+        return getPosFromMatrix(matrix3d[1], pos3);
+    }
+    else { // @ts-expect-error
+        var matrix = transform.match(/^matrix\((.+)\)$/);
+        if (matrix) {
+            return getPosFromMatrix(matrix[1], pos2);
         }
         else {
-            var matrix = transform.match(/^matrix\((.+)\)$/);
-            if (matrix) {
-                return getPosFromMatrix(matrix[1], pos2);
-            }
-            else {
-                return 0;
-            }
+            return 0;
         }
-    };
+    }
 };
-var transformKeys = new Set(["x", "y", "z"]);
-var nonTranslationalTransformKeys = transformProps.filter(function (key) { return !transformKeys.has(key); });
+var transformKeys = new Set(['x', 'y', 'z']);
+var nonTranslationalTransformKeys = transformProps.filter((key) => !transformKeys.has(key));
 function removeNonTranslationalTransform(visualElement) {
     var removedTransforms = [];
-    nonTranslationalTransformKeys.forEach(function (key) {
+    nonTranslationalTransformKeys.forEach((key) => {
         var value = visualElement.getValue(key);
         if (value !== undefined) {
             removedTransforms.push([key, value.get()]);
-            value.set(key.startsWith("scale") ? 1 : 0);
+            value.set(key.startsWith('scale') ? 1 : 0);
         }
     });
     // Apply changes to element before measurement
@@ -82,37 +64,37 @@ function removeNonTranslationalTransform(visualElement) {
 }
 var positionalValues = {
     // Dimensions
-    width: function (_a) {
+    width: (_a) => {
         var x = _a.x;
         return x.max - x.min;
     },
-    height: function (_a) {
+    height: (_a) => {
         var y = _a.y;
         return y.max - y.min;
     },
-    top: function (_bbox, _a) {
+    top: (_bbox, _a) => {
         var top = _a.top;
-        return parseFloat(top);
+        return top;
     },
-    left: function (_bbox, _a) {
+    left: (_bbox, _a) => {
         var left = _a.left;
-        return parseFloat(left);
+        return left;
     },
-    bottom: function (_a, _b) {
+    bottom: (_a, _b) => {
         var y = _a.y;
         var top = _b.top;
-        return parseFloat(top) + (y.max - y.min);
+        return top + (y.max - y.min);
     },
-    right: function (_a, _b) {
+    right: (_a, _b) => {
         var x = _a.x;
         var left = _b.left;
-        return parseFloat(left) + (x.max - x.min);
+        return left + (x.max - x.min);
     },
     // Transform
     x: getTranslateFromMatrix(4, 13),
     y: getTranslateFromMatrix(5, 14),
 };
-var convertChangedValueTypes = function (target, visualElement, changedKeys) {
+var convertChangedValueTypes = (target, visualElement, changedKeys) => {
     var originBbox = visualElement.measureViewportBox();
     var element = visualElement.getInstance();
     var elementComputedStyle = getComputedStyle(element);
@@ -120,37 +102,39 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
     var originComputedStyle = { top: top, left: left, bottom: bottom, right: right, transform: transform };
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
-    if (display === "none") {
-        visualElement.setStaticValue("display", target.display || "block");
+    if (display === 'none') {
+        visualElement.setStaticValue('display', target.display || 'block');
     }
     // Apply the latest values (as set in checkAndConvertChangedValueTypes)
     visualElement.syncRender();
     var targetBbox = visualElement.measureViewportBox();
-    changedKeys.forEach(function (key) {
+    changedKeys.forEach((key) => {
         // Restore styles to their **calculated computed style**, not their actual
         // originally set style. This allows us to animate between equivalent pixel units.
         var value = visualElement.getValue(key);
+        //@ts-ignore
         setAndResetVelocity(value, positionalValues[key](originBbox, originComputedStyle));
+        //@ts-ignore
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;
 };
-var checkAndConvertChangedValueTypes = function (visualElement, target, origin, transitionEnd) {
+var checkAndConvertChangedValueTypes = (visualElement, target, origin, transitionEnd) => {
     if (origin === void 0) {
         origin = {};
     }
     if (transitionEnd === void 0) {
         transitionEnd = {};
     }
-    target = __assign({}, target);
-    transitionEnd = __assign({}, transitionEnd);
+    target = Object.assign({}, target);
+    transitionEnd = Object.assign({}, transitionEnd);
     var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
     // We want to remove any transform values that could affect the element's bounding box before
     // it's measured. We'll reapply these later.
     var removedTransformValues = [];
     var hasAttemptedToRemoveTransformValues = false;
     var changedValueTypeKeys = [];
-    targetPositionalKeys.forEach(function (key) {
+    targetPositionalKeys.forEach((key) => {
         var value = visualElement.getValue(key);
         if (!visualElement.hasValue(key))
             return;
@@ -182,15 +166,15 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
             // If they're both just number or px, convert them both to numbers rather than
             // relying on resize/remeasure to convert (which is wasteful in this situation)
             if (isNumOrPxType(fromType) && isNumOrPxType(toType)) {
-                var current = value.get();
-                if (typeof current === "string") {
-                    value.set(parseFloat(current));
+                var current = value?.get();
+                if (typeof current === 'string') {
+                    value?.set(Number.parseFloat(current));
                 }
-                if (typeof to === "string") {
-                    target[key] = parseFloat(to);
+                if (typeof to === 'string') {
+                    target[key] = Number.parseFloat(to);
                 }
                 else if (Array.isArray(to) && toType === px) {
-                    target[key] = to.map(parseFloat);
+                    target[key] = to.map(Number.parseFloat);
                 }
             }
             else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) &&
@@ -199,10 +183,12 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
                 // If one or the other value is 0, it's safe to coerce it to the
                 // type of the other without measurement
                 if (from === 0) {
-                    value.set(toType.transform(from));
+                    // @ts-ignore
+                    value?.set(toType?.transform(from));
                 }
                 else {
-                    target[key] = fromType.transform(to);
+                    // @ts-ignore
+                    target[key] = fromType?.transform(to);
                 }
             }
             else {
@@ -213,10 +199,7 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
                     hasAttemptedToRemoveTransformValues = true;
                 }
                 changedValueTypeKeys.push(key);
-                transitionEnd[key] =
-                    transitionEnd[key] !== undefined
-                        ? transitionEnd[key]
-                        : target[key];
+                transitionEnd[key] = transitionEnd[key] !== undefined ? transitionEnd[key] : target[key];
                 setAndResetVelocity(value, to);
             }
         }
@@ -225,8 +208,8 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         var convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
         // If we removed transform values, reapply them before the next render
         if (removedTransformValues.length) {
-            removedTransformValues.forEach(function (_a) {
-                var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            removedTransformValues.forEach((_a) => {
+                var [key, value] = _a;
                 visualElement.getValue(key).set(value);
             });
         }

package/dist/render/dom/value-types/defaults.d.ts

@@ -2,7 +2,7 @@
 based on framer-motion@4.1.17,
 Copyright (c) 2018 Framer B.V.
 */
-import type { ValueTypeMap } from "./types";
+import type { ValueTypeMap } from './types';
 /**
  * A map of default value types for common values
  */

package/dist/render/dom/value-types/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/value-types/defaults.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAY5C;;GAEG;AACH,QAAA,IAAI,iBAAiB,EAIgJ,YAAY,CAAC;AAClL;;GAEG;AACH,QAAA,IAAI,mBAAmB,QAAiB,MAAM,0CAAoC,CAAC;AAEnF,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/value-types/defaults.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAU5C;;GAEG;AACH,QAAA,IAAI,iBAAiB,EAef,YAAY,CAAC;AACnB;;GAEG;AACH,QAAA,IAAI,mBAAmB,QAAS,MAAM,0CAA2B,CAAC;AAElE,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/render/dom/value-types/defaults.js

@@ -3,20 +3,29 @@ based on framer-motion@4.0.3,
 Copyright (c) 2018 Framer B.V.
 */
 import { fixed } from '../../../utils/fix-process-env.js';
-import { __assign } from 'tslib';
 import { color, filter } from 'style-value-types';
 import { numberValueTypes } from './number.js';
 /**
  * A map of default value types for common values
  */
-var defaultValueTypes = __assign(__assign({}, numberValueTypes), {
+var defaultValueTypes = Object.assign(Object.assign({}, numberValueTypes), {
     // Color props
-    color: color, backgroundColor: color, outlineColor: color, fill: color, stroke: color,
+    color: color,
+    backgroundColor: color,
+    outlineColor: color,
+    fill: color,
+    stroke: color,
     // Border props
-    borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter: filter, WebkitFilter: filter
+    borderColor: color,
+    borderTopColor: color,
+    borderRightColor: color,
+    borderBottomColor: color,
+    borderLeftColor: color,
+    filter: filter,
+    WebkitFilter: filter,
 });
 /**
  * Gets the default ValueType for the provided value key
  */
-var getDefaultValueType = function (key) { return defaultValueTypes[key]; };
+var getDefaultValueType = (key) => defaultValueTypes[key];
 export { defaultValueTypes, getDefaultValueType };

package/dist/render/dom/value-types/dimensions.d.ts

@@ -2,6 +2,7 @@
 based on framer-motion@4.1.17,
 Copyright (c) 2018 Framer B.V.
 */
+import type { CustomValueType } from '../../../types.js';
 /**
  * A list of value types commonly used for dimensions
  */
@@ -9,6 +10,6 @@ declare var dimensionValueTypes: import("style-value-types").ValueType[];
 /**
  * Tests a dimensional value against the list of dimension ValueTypes
  */
-declare var findDimensionValueType: (v: any) => import("style-value-types").ValueType | undefined;
+declare var findDimensionValueType: (v: string | number | CustomValueType | null) => import("style-value-types").ValueType | undefined;
 export { dimensionValueTypes, findDimensionValueType };
 //# sourceMappingURL=dimensions.d.ts.map

package/dist/render/dom/value-types/dimensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/value-types/dimensions.ts"],"names":[],"mappings":"AAAA;;;EAGE;AAYF;;GAEG;AACH,QAAA,IAAI,mBAAmB,yCAA+C,CAAC;AACvE;;GAEG;AACH,QAAA,IAAI,sBAAsB,+DAEzB,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"dimensions.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/value-types/dimensions.ts"],"names":[],"mappings":"AAAA;;;EAGE;AAWF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD;;GAEG;AACH,QAAA,IAAI,mBAAmB,yCAA+C,CAAC;AACvE;;GAEG;AACH,QAAA,IAAI,sBAAsB,MAAgB,MAAM,GAAG,MAAM,GAAG,eAAe,GAAG,IAAI,sDAEjF,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/render/dom/value-types/find.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"find.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/value-types/find.ts"],"names":[],"mappings":"AAAA;;;EAGE;AAiBF;;GAEG;AACH,QAAA,IAAI,aAAa,MAAgB,GAAG,KAAgD,OAAO,mBAAmB,EAAE,SAAS,GAAG;IACxH,IAAI,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC;IAC1B,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,MAAM,GAAG,OAAO,mBAAmB,EAAE,IAAI,GAAG,OAAO,mBAAmB,EAAE,IAAI,CAAC,EAAE,CAAC;IACvG,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,MAAM,CAAC;IACzG,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C,GAAG,SAAY,CAAC;AAEjB,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"find.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/value-types/find.ts"],"names":[],"mappings":"AAAA;;;EAGE;AAeF;;GAEG;AACH,QAAA,IAAI,aAAa,MAAO,GAAG,KAEvB,OAAO,mBAAmB,EAAE,SAAS,GACrC;IACA,IAAI,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC;IAC1B,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,MAAM,GAAG,OAAO,mBAAmB,EAAE,IAAI,GAAG,OAAO,mBAAmB,EAAE,IAAI,CAAC,EAAE,CAAC;IACvG,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,mBAAmB,EAAE,KAAK,CAAC,EAAE,KAAK,MAAM,CAAC;IACzG,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC,GACD,SAAS,CAAC;AAEd,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/render/dom/value-types/find.js

@@ -7,18 +7,15 @@ based on framer-motion@4.0.3,
 Copyright (c) 2018 Framer B.V.
 */
 import { fixed } from '../../../utils/fix-process-env.js';
-import { __spreadArray, __read } from 'tslib';
 import { color, complex } from 'style-value-types';
 import { dimensionValueTypes } from './dimensions.js';
 import { testValueType } from './test.js';
 /**
  * A list of all ValueTypes
  */
-var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes)), [color, complex]);
+var valueTypes = [...dimensionValueTypes, ...[color, complex]];
 /**
  * Tests a value against the list of ValueTypes
  */
-var findValueType = function (v) {
-    return valueTypes.find(testValueType(v));
-};
+var findValueType = (v) => valueTypes.find(testValueType(v));
 export { findValueType };

package/dist/render/dom/value-types/get-as-type.js

@@ -6,7 +6,7 @@ Copyright (c) 2018 Framer B.V.
  * Provided a value and a ValueType, returns the value as that value type.
  */
 var getValueAsType = function (value, type) {
-    return type && typeof value === "number"
+    return type && typeof value === "number" //@ts-ignore
         ? type.transform(value)
         : value;
 };

package/dist/render/dom/value-types/type-int.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type-int.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/value-types/type-int.ts"],"names":[],"mappings":"AAAA;;;EAGE;AAUF,QAAA,IAAI,GAAG,EAAgE;IACnE,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,IAAI,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC;IAC1B,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,mBAAmB,EAAE,WAAW,CAAC,GAAG,SAAS,CAAC;IAChG,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC,GAAG,SAAS,CAAC;CACrD,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"type-int.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/motion-start/render/dom/value-types/type-int.ts"],"names":[],"mappings":"AAAA;;;EAGE;AASF,QAAA,IAAI,GAAG,EAA0E;IAChF,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACjC,IAAI,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,OAAO,CAAC;IAC1B,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC;IACvB,iBAAiB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,mBAAmB,EAAE,WAAW,CAAC,GAAG,SAAS,CAAC;IAChG,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAC,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/render/dom/value-types/type-int.js

@@ -7,7 +7,6 @@ based on framer-motion@4.0.3,
 Copyright (c) 2018 Framer B.V.
 */
 import { fixed } from '../../../utils/fix-process-env';
-import { __assign } from 'tslib';
 import { number } from 'style-value-types';
-var int = __assign(__assign({}, number), { transform: Math.round });
+var int = Object.assign(Object.assign({}, number), { transform: Math.round });
 export { int };

package/dist/render/html/UseHTMLProps.svelte

@@ -3,11 +3,23 @@ Copyright (c) 2018 Framer B.V. -->
 
 <script lang="ts">
   import UseStyle from "./UseStyle.svelte";
+  import type { HTMLProps } from "./types";
 
   export let props, visualState, isStatic;
 
-  const getHTMLProps = (style, props) => {
-    let htmlProps = {};
+  const getHTMLProps = (
+    style: HTMLProps["style"],
+    props: { drag: string | boolean },
+  ) => {
+    let htmlProps: HTMLProps = {
+      draggable: false,
+      style: {
+        userSelect: undefined,
+        WebkitUserSelect: undefined,
+        WebkitTouchCallout: undefined,
+        touchAction: undefined,
+      },
+    };
     if (Boolean(props.drag)) {
       // Disable the ghost element when a user drags
       htmlProps.draggable = false;

package/dist/render/html/UseHTMLProps.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLProps } from "./types";
 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;
@@ -22,13 +23,13 @@ declare const UseHtmlProps: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
     isStatic: any;
 }, {
     default: {
-        visualProps: {};
+        visualProps: HTMLProps;
     };
 }>, {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {
-        visualProps: {};
+        visualProps: HTMLProps;
     };
 }, {}, string>;
 type UseHtmlProps = InstanceType<typeof UseHtmlProps>;

package/dist/render/html/UseHTMLProps.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UseHTMLProps.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/UseHTMLProps.svelte.ts"],"names":[],"mappings":"AAwCA,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,YAAY;;;;;;;;;;;;;;cAAmF,CAAC;AACpF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"UseHTMLProps.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/UseHTMLProps.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiDzC,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,YAAY;;;;;;;;;;;;;;cAAmF,CAAC;AACpF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/dist/render/html/UseInitialMotionValues.svelte

@@ -1,12 +1,13 @@
 <!-- based on framer-motion@4.0.3,
 Copyright (c) 2018 Framer B.V. -->
+<svelte:options runes />
 
 <script lang="ts">
   import { buildHTMLStyles } from "./utils/build-styles.js";
 
   import { createHtmlRenderState } from "./utils/create-render-state.js";
-  export let visualState, isStatic, props;
-  const memo = () => {
+  let { visualState, isStatic, props, children } = $props();
+  const memo = (variantLabelsAsDependency?: string | boolean | undefined) => {
     let state = createHtmlRenderState();
 
     buildHTMLStyles(
@@ -15,13 +16,13 @@ Copyright (c) 2018 Framer B.V. -->
       undefined,
       undefined,
       { enableHardwareAcceleration: !isStatic },
-      props.transformTemplate
+      props.transformTemplate,
     );
 
     const { vars, style } = state;
     return { ...vars, ...style };
   };
-  $: styles = memo(visualState);
+  const styles = $derived(memo(visualState));
 </script>
 
-<slot {styles} />
+{@render children(styles)}

package/dist/render/html/UseInitialMotionValues.svelte.d.ts

@@ -1,36 +1,8 @@
-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 UseInitialMotionValues: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    visualState: any;
-    isStatic: any;
-    props: any;
-}, {
-    default: {
-        styles: {};
-    };
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        styles: {};
-    };
-}, {}, string>;
-type UseInitialMotionValues = InstanceType<typeof UseInitialMotionValues>;
+declare const UseInitialMotionValues: import("svelte").Component<{
+    visualState: unknown;
+    isStatic: unknown;
+    props: unknown;
+    children: unknown;
+}, {}, "">;
 export default UseInitialMotionValues;
 //# sourceMappingURL=UseInitialMotionValues.svelte.d.ts.map

package/dist/render/html/UseInitialMotionValues.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UseInitialMotionValues.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/UseInitialMotionValues.svelte.ts"],"names":[],"mappings":"AAoCA,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,sBAAsB;;;;;;;;;;;;;;cAAmF,CAAC;AAC9F,KAAK,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC5E,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"UseInitialMotionValues.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/UseInitialMotionValues.svelte.ts"],"names":[],"mappings":"AAqCA,QAAA,MAAM,sBAAsB;iBA3BgC,OAAO;cAAY,OAAO;WAAS,OAAO;cAAY,OAAO;UA2BvD,CAAC;AACnE,eAAe,sBAAsB,CAAC"}

package/dist/render/html/UseStyle.svelte

@@ -2,27 +2,12 @@
 Copyright (c) 2018 Framer B.V. -->
 
 <script lang="ts" context="module">
-  export function copyRawValuesOnly(
-    target: ResolvedValues,
-    source: {
-      [key: string]: string | number | MotionValue;
-    },
-    props: MotionProps
-  ) {
-    for (const key in source) {
-      if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
-        target[key] = source[key];
-      }
-    }
-  }
+  import { copyRawValuesOnly } from "./use-props.js";
 </script>
 
 <script lang="ts">
-  import type { MotionProps, MotionValue } from "../../index.js";
-  import { isForcedMotionValue } from "../../motion/utils/is-forced-motion-value.js";
-  import { isMotionValue } from "../../value/utils/is-motion-value.js";
-  import type { ResolvedValues } from "../types.js";
   import UseInitialMotionValues from "./UseInitialMotionValues.svelte";
+
   export let visualState, props, isStatic;
   $: styleProp = props.style || {};
   let style = {};
@@ -32,7 +17,7 @@ Copyright (c) 2018 Framer B.V. -->
   const cRVO = copyRawValuesOnly;
   $: cRVO(style, styleProp, props);
 
-  const toStyle = (s1: { s1: {}; props: any; style: {}; }) => {
+  const toStyle = (s1: { s1: {}; props: any; style: {} }) => {
     Object.assign(style, s1);
     if (props.transformValues) {
       style = props.transformValues(style);
@@ -42,6 +27,8 @@ Copyright (c) 2018 Framer B.V. -->
   };
 </script>
 
-<UseInitialMotionValues {props} {visualState} {isStatic} let:styles={s1}>
-  <slot styles={toStyle({ s1, props, style })} />
+<UseInitialMotionValues {props} {visualState} {isStatic}>
+  {#snippet children(s1: any)}
+    <slot styles={toStyle({ s1, props, style })} />
+  {/snippet}
 </UseInitialMotionValues>

package/dist/render/html/UseStyle.svelte.d.ts

@@ -1,8 +1,3 @@
-export declare function copyRawValuesOnly(target: ResolvedValues, source: {
-    [key: string]: string | number | MotionValue;
-}, props: MotionProps): void;
-import type { MotionProps, MotionValue } from "../../index.js";
-import type { ResolvedValues } from "../types.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;

package/dist/render/html/UseStyle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UseStyle.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/UseStyle.svelte.ts"],"names":[],"mappings":"AAGE,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,cAAc,EACtB,MAAM,EAAE;IACN,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC;CAC9C,EACD,KAAK,EAAE,WAAW,QAOnB;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAsClD,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,QAAQ;;;;;;;;;;;;;;cAAmF,CAAC;AAChF,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"UseStyle.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/UseStyle.svelte.ts"],"names":[],"mappings":"AA0CA,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,QAAQ;;;;;;;;;;;;;;cAAmF,CAAC;AAChF,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/render/html/config-motion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config-motion.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/config-motion.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAE9E,QAAA,IAAI,gBAAgB;;;;;;;;;CAGoD,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"config-motion.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/render/html/config-motion.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AAE9E,QAAA,IAAI,gBAAgB;;;;;;;;;CAIoD,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/render/html/config-motion.js

@@ -6,6 +6,7 @@ Copyright (c) 2018 Framer B.V.
 import { createHtmlRenderState } from './utils/create-render-state.js';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js';
 var htmlMotionConfig = {
+    //@ts-ignore
     scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
     createRenderState: createHtmlRenderState,
 };