framer-motion 7.0.3 → 7.1.2

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,11 +1,11 @@
-import { __assign, __read } from 'tslib';
 import { px, number } from 'style-value-types';
 import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.mjs';
 import { invariant } from 'hey-listen';
 import { transformProps } from '../../html/utils/transform.mjs';
 import { findDimensionValueType } from '../value-types/dimensions.mjs';
+import { isBrowser } from '../../../utils/is-browser.mjs';
 
-var positionalKeys = new Set([
+const positionalKeys = new Set([
     "width",
     "height",
     "top",
@@ -15,19 +15,17 @@ var positionalKeys = new Set([
     "x",
     "y",
 ]);
-var isPositionalKey = function (key) { return positionalKeys.has(key); };
-var hasPositionalKey = function (target) {
+const isPositionalKey = (key) => positionalKeys.has(key);
+const hasPositionalKey = (target) => {
     return Object.keys(target).some(isPositionalKey);
 };
-var setAndResetVelocity = function (value, to) {
+const 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;
-};
+const isNumOrPxType = (v) => v === number || v === px;
 var BoundingBoxDimension;
 (function (BoundingBoxDimension) {
     BoundingBoxDimension["width"] = "width";
@@ -37,35 +35,30 @@ var BoundingBoxDimension;
     BoundingBoxDimension["top"] = "top";
     BoundingBoxDimension["bottom"] = "bottom";
 })(BoundingBoxDimension || (BoundingBoxDimension = {}));
-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);
+const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
+const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
+    if (transform === "none" || !transform)
+        return 0;
+    const matrix3d = transform.match(/^matrix3d\((.+)\)$/);
+    if (matrix3d) {
+        return getPosFromMatrix(matrix3d[1], pos3);
+    }
+    else {
+        const 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); });
+const transformKeys = new Set(["x", "y", "z"]);
+const nonTranslationalTransformKeys = transformProps.filter((key) => !transformKeys.has(key));
 function removeNonTranslationalTransform(visualElement) {
-    var removedTransforms = [];
-    nonTranslationalTransformKeys.forEach(function (key) {
-        var value = visualElement.getValue(key);
+    const removedTransforms = [];
+    nonTranslationalTransformKeys.forEach((key) => {
+        const value = visualElement.getValue(key);
         if (value !== undefined) {
             removedTransforms.push([key, value.get()]);
             value.set(key.startsWith("scale") ? 1 : 0);
@@ -76,46 +69,24 @@ function removeNonTranslationalTransform(visualElement) {
         visualElement.syncRender();
     return removedTransforms;
 }
-var positionalValues = {
+const positionalValues = {
     // Dimensions
-    width: function (_a, _b) {
-        var x = _a.x;
-        var _c = _b.paddingLeft, paddingLeft = _c === void 0 ? "0" : _c, _d = _b.paddingRight, paddingRight = _d === void 0 ? "0" : _d;
-        return x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight);
-    },
-    height: function (_a, _b) {
-        var y = _a.y;
-        var _c = _b.paddingTop, paddingTop = _c === void 0 ? "0" : _c, _d = _b.paddingBottom, paddingBottom = _d === void 0 ? "0" : _d;
-        return y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom);
-    },
-    top: function (_bbox, _a) {
-        var top = _a.top;
-        return parseFloat(top);
-    },
-    left: function (_bbox, _a) {
-        var left = _a.left;
-        return parseFloat(left);
-    },
-    bottom: function (_a, _b) {
-        var y = _a.y;
-        var top = _b.top;
-        return parseFloat(top) + (y.max - y.min);
-    },
-    right: function (_a, _b) {
-        var x = _a.x;
-        var left = _b.left;
-        return parseFloat(left) + (x.max - x.min);
-    },
+    width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
+    height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+    top: (_bbox, { top }) => parseFloat(top),
+    left: (_bbox, { left }) => parseFloat(left),
+    bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
+    right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
     // Transform
     x: getTranslateFromMatrix(4, 13),
     y: getTranslateFromMatrix(5, 14),
 };
-var convertChangedValueTypes = function (target, visualElement, changedKeys) {
-    var originBbox = visualElement.measureViewportBox();
-    var element = visualElement.getInstance();
-    var elementComputedStyle = getComputedStyle(element);
-    var display = elementComputedStyle.display;
-    var origin = {};
+const convertChangedValueTypes = (target, visualElement, changedKeys) => {
+    const originBbox = visualElement.measureViewportBox();
+    const element = visualElement.getInstance();
+    const elementComputedStyle = getComputedStyle(element);
+    const { display } = elementComputedStyle;
+    const origin = {};
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
     if (display === "none") {
@@ -124,50 +95,48 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
     /**
      * Record origins before we render and update styles
      */
-    changedKeys.forEach(function (key) {
+    changedKeys.forEach((key) => {
         origin[key] = positionalValues[key](originBbox, elementComputedStyle);
     });
     // Apply the latest values (as set in checkAndConvertChangedValueTypes)
     visualElement.syncRender();
-    var targetBbox = visualElement.measureViewportBox();
-    changedKeys.forEach(function (key) {
+    const targetBbox = visualElement.measureViewportBox();
+    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);
+        const value = visualElement.getValue(key);
         setAndResetVelocity(value, origin[key]);
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;
 };
-var checkAndConvertChangedValueTypes = function (visualElement, target, origin, transitionEnd) {
-    if (origin === void 0) { origin = {}; }
-    if (transitionEnd === void 0) { transitionEnd = {}; }
-    target = __assign({}, target);
-    transitionEnd = __assign({}, transitionEnd);
-    var targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
+const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
+    target = Object.assign({}, target);
+    transitionEnd = Object.assign({}, transitionEnd);
+    const 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) {
-        var value = visualElement.getValue(key);
+    let removedTransformValues = [];
+    let hasAttemptedToRemoveTransformValues = false;
+    const changedValueTypeKeys = [];
+    targetPositionalKeys.forEach((key) => {
+        const value = visualElement.getValue(key);
         if (!visualElement.hasValue(key))
             return;
-        var from = origin[key];
-        var fromType = findDimensionValueType(from);
-        var to = target[key];
-        var toType;
+        let from = origin[key];
+        let fromType = findDimensionValueType(from);
+        const to = target[key];
+        let toType;
         // TODO: The current implementation of this basically throws an error
         // if you try and do value conversion via keyframes. There's probably
         // a way of doing this but the performance implications would need greater scrutiny,
         // as it'd be doing multiple resize-remeasure operations.
         if (isKeyframesTarget(to)) {
-            var numKeyframes = to.length;
-            var fromIndex = to[0] === null ? 1 : 0;
+            const numKeyframes = to.length;
+            const fromIndex = to[0] === null ? 1 : 0;
             from = to[fromIndex];
             fromType = findDimensionValueType(from);
-            for (var i = fromIndex; i < numKeyframes; i++) {
+            for (let i = fromIndex; i < numKeyframes; i++) {
                 if (!toType) {
                     toType = findDimensionValueType(to[i]);
                     invariant(toType === fromType ||
@@ -185,7 +154,7 @@ 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();
+                const current = value.get();
                 if (typeof current === "string") {
                     value.set(parseFloat(current));
                 }
@@ -226,26 +195,26 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
         }
     });
     if (changedValueTypeKeys.length) {
-        var scrollY_1 = changedValueTypeKeys.indexOf("height") >= 0
+        const scrollY = changedValueTypeKeys.indexOf("height") >= 0
             ? window.pageYOffset
             : null;
-        var convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys);
+        const 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(([key, value]) => {
                 visualElement.getValue(key).set(value);
             });
         }
         // Reapply original values
         visualElement.syncRender();
         // Restore scroll position
-        if (scrollY_1 !== null)
-            window.scrollTo({ top: scrollY_1 });
-        return { target: convertedTarget, transitionEnd: transitionEnd };
+        if (isBrowser && scrollY !== null) {
+            window.scrollTo({ top: scrollY });
+        }
+        return { target: convertedTarget, transitionEnd };
     }
     else {
-        return { target: target, transitionEnd: transitionEnd };
+        return { target, transitionEnd };
     }
 };
 /**
@@ -258,7 +227,7 @@ var checkAndConvertChangedValueTypes = function (visualElement, target, origin,
 function unitConversion(visualElement, target, origin, transitionEnd) {
     return hasPositionalKey(target)
         ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd)
-        : { target: target, transitionEnd: transitionEnd };
+        : { target, transitionEnd };
 }
 
 export { BoundingBoxDimension, positionalValues, unitConversion };

package/dist/es/render/dom/value-types/animatable-none.mjs

@@ -3,7 +3,7 @@ import { getDefaultValueType } from './defaults.mjs';
 
 function getAnimatableNone(key, value) {
     var _a;
-    var defaultValueType = getDefaultValueType(key);
+    let defaultValueType = getDefaultValueType(key);
     if (defaultValueType !== filter)
         defaultValueType = complex;
     // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target

package/dist/es/render/dom/value-types/defaults.mjs

@@ -1,18 +1,17 @@
-import { __assign } from 'tslib';
 import { color, filter } from 'style-value-types';
 import { numberValueTypes } from './number.mjs';
 
 /**
  * A map of default value types for common values
  */
-var defaultValueTypes = __assign(__assign({}, numberValueTypes), { 
+const defaultValueTypes = Object.assign(Object.assign({}, numberValueTypes), { 
     // Color props
-    color: color, backgroundColor: color, outlineColor: color, fill: color, stroke: 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, WebkitFilter: filter });
 /**
  * Gets the default ValueType for the provided value key
  */
-var getDefaultValueType = function (key) { return defaultValueTypes[key]; };
+const getDefaultValueType = (key) => defaultValueTypes[key];
 
 export { defaultValueTypes, getDefaultValueType };

package/dist/es/render/dom/value-types/dimensions.mjs

@@ -5,12 +5,10 @@ import { auto } from './type-auto.mjs';
 /**
  * A list of value types commonly used for dimensions
  */
-var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
 /**
  * Tests a dimensional value against the list of dimension ValueTypes
  */
-var findDimensionValueType = function (v) {
-    return dimensionValueTypes.find(testValueType(v));
-};
+const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
 
 export { dimensionValueTypes, findDimensionValueType };

package/dist/es/render/dom/value-types/find.mjs

@@ -1,4 +1,3 @@
-import { __spreadArray, __read } from 'tslib';
 import { color, complex } from 'style-value-types';
 import { dimensionValueTypes } from './dimensions.mjs';
 import { testValueType } from './test.mjs';
@@ -6,10 +5,10 @@ import { testValueType } from './test.mjs';
 /**
  * A list of all ValueTypes
  */
-var valueTypes = __spreadArray(__spreadArray([], __read(dimensionValueTypes), false), [color, complex], false);
+const valueTypes = [...dimensionValueTypes, color, complex];
 /**
  * Tests a value against the list of ValueTypes
  */
-var findValueType = function (v) { return valueTypes.find(testValueType(v)); };
+const findValueType = (v) => valueTypes.find(testValueType(v));
 
 export { findValueType };

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

@@ -1,7 +1,7 @@
 /**
  * Provided a value and a ValueType, returns the value as that value type.
  */
-var getValueAsType = function (value, type) {
+const getValueAsType = (value, type) => {
     return type && typeof value === "number"
         ? type.transform(value)
         : value;

package/dist/es/render/dom/value-types/number.mjs

@@ -1,7 +1,7 @@
 import { px, degrees, scale, alpha, progressPercentage } from 'style-value-types';
 import { int } from './type-int.mjs';
 
-var numberValueTypes = {
+const numberValueTypes = {
     // Border props
     borderWidth: px,
     borderTopWidth: px,
@@ -40,7 +40,7 @@ var numberValueTypes = {
     rotateX: degrees,
     rotateY: degrees,
     rotateZ: degrees,
-    scale: scale,
+    scale,
     scaleX: scale,
     scaleY: scale,
     scaleZ: scale,

package/dist/es/render/dom/value-types/test.mjs

@@ -1,6 +1,6 @@
 /**
  * Tests a provided value against a ValueType
  */
-var testValueType = function (v) { return function (type) { return type.test(v); }; };
+const testValueType = (v) => (type) => type.test(v);
 
 export { testValueType };

package/dist/es/render/dom/value-types/type-auto.mjs

@@ -1,9 +1,9 @@
 /**
  * ValueType for "auto"
  */
-var auto = {
-    test: function (v) { return v === "auto"; },
-    parse: function (v) { return v; },
+const auto = {
+    test: (v) => v === "auto",
+    parse: (v) => v,
 };
 
 export { auto };

package/dist/es/render/dom/value-types/type-int.mjs

@@ -1,6 +1,5 @@
-import { __assign } from 'tslib';
 import { number } from 'style-value-types';
 
-var int = __assign(__assign({}, number), { transform: Math.round });
+const int = Object.assign(Object.assign({}, number), { transform: Math.round });
 
 export { int };

package/dist/es/render/html/config-motion.mjs

@@ -2,7 +2,7 @@ import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 import { createHtmlRenderState } from './utils/create-render-state.mjs';
 
-var htmlMotionConfig = {
+const htmlMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createHtmlRenderState,

package/dist/es/render/html/use-props.mjs

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import { useMemo } from 'react';
 import { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
@@ -6,24 +5,23 @@ import { buildHTMLStyles } from './utils/build-styles.mjs';
 import { createHtmlRenderState } from './utils/create-render-state.mjs';
 
 function copyRawValuesOnly(target, source, props) {
-    for (var key in source) {
+    for (const key in source) {
         if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
             target[key] = source[key];
         }
     }
 }
-function useInitialMotionValues(_a, visualState, isStatic) {
-    var transformTemplate = _a.transformTemplate;
-    return useMemo(function () {
-        var state = createHtmlRenderState();
+function useInitialMotionValues({ transformTemplate }, visualState, isStatic) {
+    return useMemo(() => {
+        const state = createHtmlRenderState();
         buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
-        var vars = state.vars, style = state.style;
-        return __assign(__assign({}, vars), style);
+        const { vars, style } = state;
+        return Object.assign(Object.assign({}, vars), style);
     }, [visualState]);
 }
 function useStyle(props, visualState, isStatic) {
-    var styleProp = props.style || {};
-    var style = {};
+    const styleProp = props.style || {};
+    let style = {};
     /**
      * Copy non-Motion Values straight into style
      */
@@ -36,8 +34,8 @@ function useStyle(props, visualState, isStatic) {
 }
 function useHTMLProps(props, visualState, isStatic) {
     // The `any` isn't ideal but it is the type of createElement props argument
-    var htmlProps = {};
-    var style = useStyle(props, visualState, isStatic);
+    const htmlProps = {};
+    const style = useStyle(props, visualState, isStatic);
     if (Boolean(props.drag) && props.dragListener !== false) {
         // Disable the ghost element when a user drags
         htmlProps.draggable = false;
@@ -50,7 +48,7 @@ function useHTMLProps(props, visualState, isStatic) {
         style.touchAction =
             props.drag === true
                 ? "none"
-                : "pan-".concat(props.drag === "x" ? "y" : "x");
+                : `pan-${props.drag === "x" ? "y" : "x"}`;
     }
     htmlProps.style = style;
     return htmlProps;

package/dist/es/render/html/utils/build-styles.mjs

@@ -6,24 +6,24 @@ import { numberValueTypes } from '../../dom/value-types/number.mjs';
 
 function buildHTMLStyles(state, latestValues, options, transformTemplate) {
     var _a;
-    var style = state.style, vars = state.vars, transform = state.transform, transformKeys = state.transformKeys, transformOrigin = state.transformOrigin;
+    const { style, vars, transform, transformKeys, transformOrigin } = state;
     // Empty the transformKeys array. As we're throwing out refs to its items
     // this might not be as cheap as suspected. Maybe using the array as a buffer
     // with a manual incrementation would be better.
     transformKeys.length = 0;
     // Track whether we encounter any transform or transformOrigin values.
-    var hasTransform = false;
-    var hasTransformOrigin = false;
+    let hasTransform = false;
+    let hasTransformOrigin = false;
     // Does the calculated transform essentially equal "none"?
-    var transformIsNone = true;
+    let transformIsNone = true;
     /**
      * Loop over all our latest animated values and decide whether to handle them
      * as a style or CSS variable.
      *
      * Transforms and transform origins are kept seperately for further processing.
      */
-    for (var key in latestValues) {
-        var value = latestValues[key];
+    for (const key in latestValues) {
+        const value = latestValues[key];
         /**
          * If this is a CSS variable we don't do any further processing.
          */
@@ -32,8 +32,8 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
             continue;
         }
         // Convert the value to its default value type, ie 0 -> "0px"
-        var valueType = numberValueTypes[key];
-        var valueAsType = getValueAsType(value, valueType);
+        const valueType = numberValueTypes[key];
+        const valueAsType = getValueAsType(value, valueType);
         if (isTransformProp(key)) {
             // If this is a transform, flag to enable further transform processing
             hasTransform = true;

package/dist/es/render/html/utils/build-transform.mjs

@@ -1,6 +1,6 @@
 import { sortTransformProps } from './transform.mjs';
 
-var translateAlias = {
+const translateAlias = {
     x: "translateX",
     y: "translateY",
     z: "translateZ",
@@ -12,30 +12,26 @@ var translateAlias = {
  * This outputs with a default order of transforms/scales/rotations, this can be customised by
  * providing a transformTemplate function.
  */
-function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
-    var transform = _a.transform, transformKeys = _a.transformKeys;
-    var _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.allowTransformNone, allowTransformNone = _d === void 0 ? true : _d;
+function buildTransform({ transform, transformKeys }, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
     // The transform string we're going to build into.
-    var transformString = "";
+    let transformString = "";
     // Transform keys into their default order - this will determine the output order.
     transformKeys.sort(sortTransformProps);
     // Track whether the defined transform has a defined z so we don't add a
     // second to enable hardware acceleration
-    var transformHasZ = false;
+    let transformHasZ = false;
     // Loop over each transform and build them into transformString
-    var numTransformKeys = transformKeys.length;
-    for (var i = 0; i < numTransformKeys; i++) {
-        var key = transformKeys[i];
-        transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
+    const numTransformKeys = transformKeys.length;
+    for (let i = 0; i < numTransformKeys; i++) {
+        const key = transformKeys[i];
+        transformString += `${translateAlias[key] || key}(${transform[key]}) `;
         if (key === "z")
             transformHasZ = true;
     }
     if (!transformHasZ && enableHardwareAcceleration) {
         transformString += "translateZ(0)";
     }
-    else {
-        transformString = transformString.trim();
-    }
+    transformString = transformString.trim();
     // If we have a custom `transform` template, pass our transform values and
     // generated transformString to that before returning
     if (transformTemplate) {
@@ -50,9 +46,8 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
  * Build a transformOrigin style. Uses the same defaults as the browser for
  * undefined origins.
  */
-function buildTransformOrigin(_a) {
-    var _b = _a.originX, originX = _b === void 0 ? "50%" : _b, _c = _a.originY, originY = _c === void 0 ? "50%" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;
-    return "".concat(originX, " ").concat(originY, " ").concat(originZ);
+function buildTransformOrigin({ originX = "50%", originY = "50%", originZ = 0, }) {
+    return `${originX} ${originY} ${originZ}`;
 }
 
 export { buildTransform, buildTransformOrigin };

package/dist/es/render/html/utils/create-render-state.mjs

@@ -1,9 +1,9 @@
-var createHtmlRenderState = function () { return ({
+const createHtmlRenderState = () => ({
     style: {},
     transform: {},
     transformKeys: [],
     transformOrigin: {},
     vars: {},
-}); };
+});
 
 export { createHtmlRenderState };

package/dist/es/render/html/utils/render.mjs

@@ -1,8 +1,7 @@
-function renderHTML(element, _a, styleProp, projection) {
-    var style = _a.style, vars = _a.vars;
+function renderHTML(element, { style, vars }, styleProp, projection) {
     Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
     // Loop over any CSS variables and assign those.
-    for (var key in vars) {
+    for (const key in vars) {
         element.style.setProperty(key, vars[key]);
     }
 }

package/dist/es/render/html/utils/scrape-motion-values.mjs

@@ -2,9 +2,9 @@ import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-valu
 import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
 
 function scrapeMotionValuesFromProps(props) {
-    var style = props.style;
-    var newValues = {};
-    for (var key in style) {
+    const { style } = props;
+    const newValues = {};
+    for (const key in style) {
         if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) {
             newValues[key] = style[key];
         }