@remotion/animation-utils 4.0.143 → 4.0.145

package/dist/esm/index.mjs

@@ -1,664 +1,660 @@
-import { interpolateColors, interpolate } from 'remotion';
-import { NoReactInternals } from 'remotion/no-react';
+// src/transformation-helpers/interpolate-styles/index.tsx
+import {interpolate, interpolateColors} from "remotion";
 
-const NUMBER = '[-+]?\\d*\\.?\\d+';
-const PERCENTAGE = NUMBER + '%';
+// src/transformation-helpers/interpolate-styles/utils.ts
+import {NoReactInternals} from "remotion/no-react";
 
-function call(...args) {
-    return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)';
-}
-function getColorMatchers() {
-    const cachedMatchers = {
-        rgb: undefined,
-        rgba: undefined,
-        hsl: undefined,
-        hsla: undefined,
-        hex3: undefined,
-        hex4: undefined,
-        hex5: undefined,
-        hex6: undefined,
-        hex8: undefined,
-    };
-    if (cachedMatchers.rgb === undefined) {
-        cachedMatchers.rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
-        cachedMatchers.rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));
-        cachedMatchers.hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));
-        cachedMatchers.hsla = new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
-        cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-        cachedMatchers.hex4 =
-            /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
-        cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
-        cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
-    }
-    return cachedMatchers;
-}
-const extractOrderedPartsOfValue = (value) => {
-    const parts = [];
-    let remainingValue = value;
-    while (remainingValue.length > 0) {
-        const functionMatch = remainingValue.match(/([a-zA-Z-]+)\(([^)]+)\)/);
-        // If there's a function, add it to the parts and remove it from the remaining value
-        if (functionMatch) {
-            const { index } = functionMatch;
-            const matchedFunction = functionMatch[0];
-            // Add any parts before the function
-            if ((index || 0) > 0) {
-                parts.push(...remainingValue.substring(0, index).trim().split(/\s+/));
-            }
-            parts.push(matchedFunction);
-            remainingValue = remainingValue.substring((index || 0) + matchedFunction.length);
-        }
-        else {
-            // If there's no function, add the remaining value to the parts
-            parts.push(...remainingValue.trim().split(/\s+/));
-            break;
-        }
-    }
-    return parts.filter((part) => part !== ''); // Filter out any empty strings
-};
-const classifyArgsOfFunction = (value) => {
-    let nestedLevel = 0;
-    const values = [];
-    let currentValue = '';
-    for (const char of value) {
-        if (char === '(')
-            nestedLevel++;
-        else if (char === ')')
-            nestedLevel--;
-        if (char === ',' && nestedLevel === 0) {
-            values.push(currentValue.trim());
-            currentValue = '';
-        }
-        else {
-            currentValue += char;
-        }
-    }
-    if (currentValue)
-        values.push(currentValue.trim());
-    // Classify each value
-    return values.map((val) => {
-        const numberUnitMatch = val.match(/^(-?\d+(?:\.\d+)?)([a-zA-Z%]*)$/);
-        if (numberUnitMatch) {
-            const number = parseFloat(numberUnitMatch[1]);
-            const unit = numberUnitMatch[2];
-            return unit ? { number, unit } : { number };
-        }
-        const numberMatch = val.match(/^(\d+(?:\.\d+)?)$/);
-        if (numberMatch) {
-            const number = parseFloat(numberMatch[1]);
-            return { number };
-        }
-        return { unit: val };
-    });
+// src/transformation-helpers/interpolate-styles/constants.ts
+var NUMBER = "[-+]?\\d*\\.?\\d+";
+var PERCENTAGE = NUMBER + "%";
+
+// src/transformation-helpers/interpolate-styles/utils.ts
+var call = function(...args) {
+  return "\\(\\s*(" + args.join(")\\s*,\\s*(") + ")\\s*\\)";
 };
-const isColorValue = (value) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    if (Object.keys(NoReactInternals.colorNames).includes(value)) {
-        return true;
-    }
-    const matchers = getColorMatchers();
-    return (((_a = matchers.rgb) === null || _a === void 0 ? void 0 : _a.test(value)) ||
-        ((_b = matchers.rgba) === null || _b === void 0 ? void 0 : _b.test(value)) ||
-        ((_c = matchers.hsl) === null || _c === void 0 ? void 0 : _c.test(value)) ||
-        ((_d = matchers.hsla) === null || _d === void 0 ? void 0 : _d.test(value)) ||
-        ((_e = matchers.hex3) === null || _e === void 0 ? void 0 : _e.test(value)) ||
-        ((_f = matchers.hex4) === null || _f === void 0 ? void 0 : _f.test(value)) ||
-        ((_g = matchers.hex5) === null || _g === void 0 ? void 0 : _g.test(value)) ||
-        ((_h = matchers.hex6) === null || _h === void 0 ? void 0 : _h.test(value)) ||
-        ((_j = matchers.hex8) === null || _j === void 0 ? void 0 : _j.test(value)));
-};
-const classifyParts = (parts) => {
-    return parts.map((part) => {
-        // Check for a color value like 'red', 'rgba(0, 0, 0, 0)', '#fff', etc.
-        if (isColorValue(part)) {
-            return { color: part };
-        }
-        // Check for a function like 'translateX(10px)' or 'rotate(90deg)'
-        const functionMatch = part.match(/([a-zA-Z-]+)\(([^)]+)\)/);
-        if (functionMatch) {
-            const functionName = functionMatch[1];
-            const functionValues = classifyArgsOfFunction(functionMatch[2]);
-            return { function: { name: functionName, values: functionValues } };
-        }
-        // Check for a number possibly followed by a unit like '10px' or '10' or '-10px'
-        const numberUnitMatch = part.match(/^(-?\d+(?:\.\d+)?)([a-zA-Z%]*)$/);
-        if (numberUnitMatch) {
-            const number = parseFloat(numberUnitMatch[1]);
-            const unit = numberUnitMatch[2];
-            return unit ? { number, unit } : { number };
-        }
-        // Check for a number without a unit like '10' or '-10'
-        const numberMatch = part.match(/^(-?\d+(?:\.\d+)?)$/);
-        if (numberMatch) {
-            const number = parseFloat(numberMatch[1]);
-            return { number };
-        }
-        // If neither, treat as a unit (like 'solid', 'none', etc.)
-        return { unit: part };
-    });
+var getColorMatchers = function() {
+  const cachedMatchers = {
+    rgb: undefined,
+    rgba: undefined,
+    hsl: undefined,
+    hsla: undefined,
+    hex3: undefined,
+    hex4: undefined,
+    hex5: undefined,
+    hex6: undefined,
+    hex8: undefined
+  };
+  if (cachedMatchers.rgb === undefined) {
+    cachedMatchers.rgb = new RegExp("rgb" + call(NUMBER, NUMBER, NUMBER));
+    cachedMatchers.rgba = new RegExp("rgba" + call(NUMBER, NUMBER, NUMBER, NUMBER));
+    cachedMatchers.hsl = new RegExp("hsl" + call(NUMBER, PERCENTAGE, PERCENTAGE));
+    cachedMatchers.hsla = new RegExp("hsla" + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
+    cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+    cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
+    cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
+    cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
+  }
+  return cachedMatchers;
 };
-const breakDownValueIntoUnitNumberAndFunctions = (value) => {
-    if (typeof value === 'number') {
-        return [{ number: value }];
-    }
-    if (typeof value !== 'string') {
-        return [];
-    }
-    const valueParts = extractOrderedPartsOfValue(value);
-    return classifyParts(valueParts);
+var extractOrderedPartsOfValue = (value) => {
+  const parts = [];
+  let remainingValue = value;
+  while (remainingValue.length > 0) {
+    const functionMatch = remainingValue.match(/([a-zA-Z-]+)\(([^)]+)\)/);
+    if (functionMatch) {
+      const { index } = functionMatch;
+      const matchedFunction = functionMatch[0];
+      if ((index || 0) > 0) {
+        parts.push(...remainingValue.substring(0, index).trim().split(/\s+/));
+      }
+      parts.push(matchedFunction);
+      remainingValue = remainingValue.substring((index || 0) + matchedFunction.length);
+    } else {
+      parts.push(...remainingValue.trim().split(/\s+/));
+      break;
+    }
+  }
+  return parts.filter((part) => part !== "");
+};
+var classifyArgsOfFunction = (value) => {
+  let nestedLevel = 0;
+  const values = [];
+  let currentValue = "";
+  for (const char of value) {
+    if (char === "(")
+      nestedLevel++;
+    else if (char === ")")
+      nestedLevel--;
+    if (char === "," && nestedLevel === 0) {
+      values.push(currentValue.trim());
+      currentValue = "";
+    } else {
+      currentValue += char;
+    }
+  }
+  if (currentValue)
+    values.push(currentValue.trim());
+  return values.map((val) => {
+    const numberUnitMatch = val.match(/^(-?\d+(?:\.\d+)?)([a-zA-Z%]*)$/);
+    if (numberUnitMatch) {
+      const number = parseFloat(numberUnitMatch[1]);
+      const unit = numberUnitMatch[2];
+      return unit ? { number, unit } : { number };
+    }
+    const numberMatch = val.match(/^(\d+(?:\.\d+)?)$/);
+    if (numberMatch) {
+      const number = parseFloat(numberMatch[1]);
+      return { number };
+    }
+    return { unit: val };
+  });
+};
+var isColorValue = (value) => {
+  if (Object.keys(NoReactInternals.colorNames).includes(value)) {
+    return true;
+  }
+  const matchers = getColorMatchers();
+  return matchers.rgb?.test(value) || matchers.rgba?.test(value) || matchers.hsl?.test(value) || matchers.hsla?.test(value) || matchers.hex3?.test(value) || matchers.hex4?.test(value) || matchers.hex5?.test(value) || matchers.hex6?.test(value) || matchers.hex8?.test(value);
+};
+var classifyParts = (parts) => {
+  return parts.map((part) => {
+    if (isColorValue(part)) {
+      return { color: part };
+    }
+    const functionMatch = part.match(/([a-zA-Z-]+)\(([^)]+)\)/);
+    if (functionMatch) {
+      const functionName = functionMatch[1];
+      const functionValues = classifyArgsOfFunction(functionMatch[2]);
+      return { function: { name: functionName, values: functionValues } };
+    }
+    const numberUnitMatch = part.match(/^(-?\d+(?:\.\d+)?)([a-zA-Z%]*)$/);
+    if (numberUnitMatch) {
+      const number = parseFloat(numberUnitMatch[1]);
+      const unit = numberUnitMatch[2];
+      return unit ? { number, unit } : { number };
+    }
+    const numberMatch = part.match(/^(-?\d+(?:\.\d+)?)$/);
+    if (numberMatch) {
+      const number = parseFloat(numberMatch[1]);
+      return { number };
+    }
+    return { unit: part };
+  });
+};
+var breakDownValueIntoUnitNumberAndFunctions = (value) => {
+  if (typeof value === "number") {
+    return [{ number: value }];
+  }
+  if (typeof value !== "string") {
+    return [];
+  }
+  const valueParts = extractOrderedPartsOfValue(value);
+  return classifyParts(valueParts);
 };
 
-const interpolatedPropertyPart = ({ inputValue, inputRange, initialStylePropertyPart, finalStylePropertyPart, initialStyleProperty, finalStyleProperty, options, }) => {
-    var _a;
-    if (finalStylePropertyPart === undefined) {
-        throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
-    }
-    if (initialStylePropertyPart.color) {
-        if (!finalStylePropertyPart.color) {
-            throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
-        }
-        const interpolatedColor = interpolateColors(inputValue, inputRange, [
-            initialStylePropertyPart.color,
-            finalStylePropertyPart.color,
-        ]);
-        return `${interpolatedColor}`;
-    }
-    if (initialStylePropertyPart.function) {
-        if (!(finalStylePropertyPart === null || finalStylePropertyPart === void 0 ? void 0 : finalStylePropertyPart.function) ||
-            initialStylePropertyPart.function.name !==
-                ((_a = finalStylePropertyPart.function) === null || _a === void 0 ? void 0 : _a.name)) {
-            throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
-        }
-        const endValuePartFunction = finalStylePropertyPart.function;
-        const endValuePartFunctionArgs = endValuePartFunction.values || [];
-        const interpolatedFunctionArgs = initialStylePropertyPart.function.values.reduce((acc, startValuePartFunctionArg, index) => {
-            const endValuePartFunctionArg = endValuePartFunctionArgs[index];
-            const interpolatedArg = interpolatedPropertyPart({
-                inputValue,
-                inputRange,
-                initialStylePropertyPart: startValuePartFunctionArg,
-                finalStylePropertyPart: endValuePartFunctionArg,
-                initialStyleProperty,
-                finalStyleProperty,
-                options,
-            });
-            return `${acc}, ${interpolatedArg}`;
-        }, '');
-        return `${initialStylePropertyPart.function.name}(${interpolatedFunctionArgs.slice(2)})`;
-    }
-    if (typeof initialStylePropertyPart.number === 'undefined') {
-        if (initialStylePropertyPart.unit !== finalStylePropertyPart.unit) {
-            throw new TypeError(`Non-animatable values cannot be interpolated. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
-        }
-        return `${initialStylePropertyPart.unit}`;
-    }
-    if (initialStylePropertyPart.unit !== finalStylePropertyPart.unit &&
-        initialStylePropertyPart.number !== 0 &&
-        finalStylePropertyPart.number !== 0) {
-        throw new TypeError(`The units of the start and end values must match. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
-    }
-    const startNumber = initialStylePropertyPart.number;
-    const endNumber = finalStylePropertyPart.number || 0;
-    const interpolatedNumber = interpolate(inputValue, inputRange, [startNumber, endNumber], options);
-    const interpolatedUnit = initialStylePropertyPart.unit || finalStylePropertyPart.unit || '';
-    if (!interpolatedUnit) {
-        return interpolatedNumber;
-    }
-    return `${interpolatedNumber}${interpolatedUnit}`;
+// src/transformation-helpers/interpolate-styles/index.tsx
+var checkInputRange = function(arr) {
+  if (arr.length < 2) {
+    throw new Error("inputRange must have at least 2 elements");
+  }
+  for (let index = 0;index < arr.length; index++) {
+    if (typeof arr[index] !== "number") {
+      throw new Error(`inputRange must contain only numbers`);
+    }
+    if (arr[index] === (-Infinity) || arr[index] === Infinity) {
+      throw new Error(`inputRange must contain only finite numbers, but got [${arr.join(",")}]`);
+    }
+    if (index > 0 && !(arr[index] > arr[index - 1])) {
+      throw new Error(`inputRange must be strictly monotonically non-decreasing but got [${arr.join(",")}]`);
+    }
+  }
 };
-const interpolateProperty = ({ inputValue, inputRange, initialStyleProperty, finalStyleProperty, options, }) => {
-    if (typeof initialStyleProperty !== typeof finalStyleProperty &&
-        initialStyleProperty !== 0 &&
-        finalStyleProperty !== 0) {
-        throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
-    }
-    const initialStylePropertyParts = breakDownValueIntoUnitNumberAndFunctions(initialStyleProperty);
-    const finalStylePropertyParts = breakDownValueIntoUnitNumberAndFunctions(finalStyleProperty);
-    if (initialStylePropertyParts.length !== finalStylePropertyParts.length) {
-        throw new TypeError(`The start and end values must have the same structure. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
-    }
-    const interpolatedValue = initialStylePropertyParts.reduce((acc, initialStylePropertyPart, index) => {
-        return `${acc} ${interpolatedPropertyPart({
-            inputValue,
-            inputRange,
-            initialStylePropertyPart,
-            finalStylePropertyPart: finalStylePropertyParts[index],
-            initialStyleProperty,
-            finalStyleProperty,
-            options,
-        })}`;
-    }, '');
-    return interpolatedValue.slice(1);
-};
-const interpolateStylesFunction = ({ inputValue, inputRange, initialStyle, finalStyle, options, }) => {
-    const [startingValue, endingValue] = inputRange;
-    return Object.keys(initialStyle).reduce((acc, key) => {
-        const value = finalStyle[key];
-        if (value === undefined || value === null) {
-            return {
-                ...acc,
-                [key]: initialStyle[key],
-            };
-        }
-        const finalStyleValue = interpolateProperty({
-            inputValue,
-            inputRange: [startingValue, endingValue],
-            initialStyleProperty: initialStyle[key],
-            finalStyleProperty: finalStyle[key],
-            options,
-        });
-        // Avoid number to be a string
-        if (!isNaN(Number(finalStyleValue))) {
-            return {
-                ...acc,
-                [key]: Number(finalStyleValue),
-            };
-        }
-        return {
-            ...acc,
-            [key]: finalStyleValue,
-        };
-    }, {});
-};
-function checkInputRange(arr) {
-    if (arr.length < 2) {
-        throw new Error('inputRange must have at least 2 elements');
-    }
-    for (let index = 0; index < arr.length; index++) {
-        if (typeof arr[index] !== 'number') {
-            throw new Error(`inputRange must contain only numbers`);
-        }
-        if (arr[index] === -Infinity || arr[index] === Infinity) {
-            throw new Error(`inputRange must contain only finite numbers, but got [${arr.join(',')}]`);
-        }
-        if (index > 0 && !(arr[index] > arr[index - 1])) {
-            throw new Error(`inputRange must be strictly monotonically non-decreasing but got [${arr.join(',')}]`);
-        }
-    }
-}
-function checkStylesRange(arr) {
-    if (arr.length < 2) {
-        throw new Error('outputStyles must have at least 2 elements');
-    }
-    for (const index in arr) {
-        if (typeof arr[index] !== 'object') {
-            throw new Error('outputStyles must contain only objects');
-        }
-    }
-}
-/**
- * @description A function that interpolates between two styles based on an input range.
- * @see [Documentation](https://www.remotion.dev/docs/animation-utils/interpolate-styles)
- */
-const interpolateStyles = (input, inputRange, outputStylesRange, options) => {
-    var _a, _b, _c;
-    if (typeof input === 'undefined') {
-        throw new Error('input can not be undefined');
-    }
-    if (typeof inputRange === 'undefined') {
-        throw new Error('inputRange can not be undefined');
-    }
-    if (typeof outputStylesRange === 'undefined') {
-        throw new Error('outputRange can not be undefined');
-    }
-    if (inputRange.length !== outputStylesRange.length) {
-        throw new Error('inputRange (' +
-            inputRange.length +
-            ') and outputStylesRange (' +
-            outputStylesRange.length +
-            ') must have the same length');
-    }
-    checkInputRange(inputRange);
-    checkStylesRange(outputStylesRange);
-    let startIndex = inputRange.findIndex((step) => input < step) - 1;
-    if (startIndex === -2) {
-        startIndex = inputRange.length - 2;
-    }
-    const endIndex = startIndex + 1;
-    const startingValue = inputRange[startIndex];
-    const endingValue = inputRange[endIndex];
-    const initialStyle = outputStylesRange[startIndex];
-    const finalStyle = outputStylesRange[endIndex];
-    const easing = (_a = options === null || options === void 0 ? void 0 : options.easing) !== null && _a !== void 0 ? _a : ((num) => num);
-    const extrapolateLeft = (_b = options === null || options === void 0 ? void 0 : options.extrapolateLeft) !== null && _b !== void 0 ? _b : 'extend';
-    const extrapolateRight = (_c = options === null || options === void 0 ? void 0 : options.extrapolateRight) !== null && _c !== void 0 ? _c : 'extend';
-    return interpolateStylesFunction({
-        inputValue: input,
-        inputRange: [startingValue, endingValue],
-        initialStyle,
-        finalStyle,
-        options: {
-            easing,
-            extrapolateLeft,
-            extrapolateRight,
-        },
+var checkStylesRange = function(arr) {
+  if (arr.length < 2) {
+    throw new Error("outputStyles must have at least 2 elements");
+  }
+  for (const index in arr) {
+    if (typeof arr[index] !== "object") {
+      throw new Error("outputStyles must contain only objects");
+    }
+  }
+};
+var interpolatedPropertyPart = ({
+  inputValue,
+  inputRange,
+  initialStylePropertyPart,
+  finalStylePropertyPart,
+  initialStyleProperty,
+  finalStyleProperty,
+  options
+}) => {
+  if (finalStylePropertyPart === undefined) {
+    throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+  }
+  if (initialStylePropertyPart.color) {
+    if (!finalStylePropertyPart.color) {
+      throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+    }
+    const interpolatedColor = interpolateColors(inputValue, inputRange, [
+      initialStylePropertyPart.color,
+      finalStylePropertyPart.color
+    ]);
+    return `${interpolatedColor}`;
+  }
+  if (initialStylePropertyPart.function) {
+    if (!finalStylePropertyPart?.function || initialStylePropertyPart.function.name !== finalStylePropertyPart.function?.name) {
+      throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+    }
+    const endValuePartFunction = finalStylePropertyPart.function;
+    const endValuePartFunctionArgs = endValuePartFunction.values || [];
+    const interpolatedFunctionArgs = initialStylePropertyPart.function.values.reduce((acc, startValuePartFunctionArg, index) => {
+      const endValuePartFunctionArg = endValuePartFunctionArgs[index];
+      const interpolatedArg = interpolatedPropertyPart({
+        inputValue,
+        inputRange,
+        initialStylePropertyPart: startValuePartFunctionArg,
+        finalStylePropertyPart: endValuePartFunctionArg,
+        initialStyleProperty,
+        finalStyleProperty,
+        options
+      });
+      return `${acc}, ${interpolatedArg}`;
+    }, "");
+    return `${initialStylePropertyPart.function.name}(${interpolatedFunctionArgs.slice(2)})`;
+  }
+  if (typeof initialStylePropertyPart.number === "undefined") {
+    if (initialStylePropertyPart.unit !== finalStylePropertyPart.unit) {
+      throw new TypeError(`Non-animatable values cannot be interpolated. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+    }
+    return `${initialStylePropertyPart.unit}`;
+  }
+  if (initialStylePropertyPart.unit !== finalStylePropertyPart.unit && initialStylePropertyPart.number !== 0 && finalStylePropertyPart.number !== 0) {
+    throw new TypeError(`The units of the start and end values must match. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+  }
+  const startNumber = initialStylePropertyPart.number;
+  const endNumber = finalStylePropertyPart.number || 0;
+  const interpolatedNumber = interpolate(inputValue, inputRange, [startNumber, endNumber], options);
+  const interpolatedUnit = initialStylePropertyPart.unit || finalStylePropertyPart.unit || "";
+  if (!interpolatedUnit) {
+    return interpolatedNumber;
+  }
+  return `${interpolatedNumber}${interpolatedUnit}`;
+};
+var interpolateProperty = ({
+  inputValue,
+  inputRange,
+  initialStyleProperty,
+  finalStyleProperty,
+  options
+}) => {
+  if (typeof initialStyleProperty !== typeof finalStyleProperty && initialStyleProperty !== 0 && finalStyleProperty !== 0) {
+    throw new TypeError(`The start and end values must be of the same type. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+  }
+  const initialStylePropertyParts = breakDownValueIntoUnitNumberAndFunctions(initialStyleProperty);
+  const finalStylePropertyParts = breakDownValueIntoUnitNumberAndFunctions(finalStyleProperty);
+  if (initialStylePropertyParts.length !== finalStylePropertyParts.length) {
+    throw new TypeError(`The start and end values must have the same structure. Start value: ${initialStyleProperty}, end value: ${finalStyleProperty}`);
+  }
+  const interpolatedValue = initialStylePropertyParts.reduce((acc, initialStylePropertyPart, index) => {
+    return `${acc} ${interpolatedPropertyPart({
+      inputValue,
+      inputRange,
+      initialStylePropertyPart,
+      finalStylePropertyPart: finalStylePropertyParts[index],
+      initialStyleProperty,
+      finalStyleProperty,
+      options
+    })}`;
+  }, "");
+  return interpolatedValue.slice(1);
+};
+var interpolateStylesFunction = ({
+  inputValue,
+  inputRange,
+  initialStyle,
+  finalStyle,
+  options
+}) => {
+  const [startingValue, endingValue] = inputRange;
+  return Object.keys(initialStyle).reduce((acc, key) => {
+    const value = finalStyle[key];
+    if (value === undefined || value === null) {
+      return {
+        ...acc,
+        [key]: initialStyle[key]
+      };
+    }
+    const finalStyleValue = interpolateProperty({
+      inputValue,
+      inputRange: [startingValue, endingValue],
+      initialStyleProperty: initialStyle[key],
+      finalStyleProperty: finalStyle[key],
+      options
     });
+    if (!isNaN(Number(finalStyleValue))) {
+      return {
+        ...acc,
+        [key]: Number(finalStyleValue)
+      };
+    }
+    return {
+      ...acc,
+      [key]: finalStyleValue
+    };
+  }, {});
 };
-
-const lengthUnits = [
-    'px',
-    'em',
-    'rem',
-    'pt',
-    'cap',
-    'ch',
-    'ex',
-    'ic',
-    'lh',
-    'rlh',
-    'vmax',
-    'vmin',
-    'vb',
-    'vi',
-    'cqw',
-    'vh',
-    'vw',
-    'cqh',
-    'cqi',
-    'cqb',
-    'cqmin',
-    'cqmax',
-    'cm',
-    'mm',
-    'Q',
-    'in',
-    'pc',
+var interpolateStyles = (input, inputRange, outputStylesRange, options) => {
+  if (typeof input === "undefined") {
+    throw new Error("input can not be undefined");
+  }
+  if (typeof inputRange === "undefined") {
+    throw new Error("inputRange can not be undefined");
+  }
+  if (typeof outputStylesRange === "undefined") {
+    throw new Error("outputRange can not be undefined");
+  }
+  if (inputRange.length !== outputStylesRange.length) {
+    throw new Error("inputRange (" + inputRange.length + ") and outputStylesRange (" + outputStylesRange.length + ") must have the same length");
+  }
+  checkInputRange(inputRange);
+  checkStylesRange(outputStylesRange);
+  let startIndex = inputRange.findIndex((step) => input < step) - 1;
+  if (startIndex === -2) {
+    startIndex = inputRange.length - 2;
+  }
+  const endIndex = startIndex + 1;
+  const startingValue = inputRange[startIndex];
+  const endingValue = inputRange[endIndex];
+  const initialStyle = outputStylesRange[startIndex];
+  const finalStyle = outputStylesRange[endIndex];
+  const easing = options?.easing ?? ((num) => num);
+  const extrapolateLeft = options?.extrapolateLeft ?? "extend";
+  const extrapolateRight = options?.extrapolateRight ?? "extend";
+  return interpolateStylesFunction({
+    inputValue: input,
+    inputRange: [startingValue, endingValue],
+    initialStyle,
+    finalStyle,
+    options: {
+      easing,
+      extrapolateLeft,
+      extrapolateRight
+    }
+  });
+};
+// src/type.ts
+var lengthUnits = [
+  "px",
+  "em",
+  "rem",
+  "pt",
+  "cap",
+  "ch",
+  "ex",
+  "ic",
+  "lh",
+  "rlh",
+  "vmax",
+  "vmin",
+  "vb",
+  "vi",
+  "cqw",
+  "vh",
+  "vw",
+  "cqh",
+  "cqi",
+  "cqb",
+  "cqmin",
+  "cqmax",
+  "cm",
+  "mm",
+  "Q",
+  "in",
+  "pc"
 ];
-const angleUnits = ['rad', 'deg', 'grad', 'turn'];
-const lengthPercentageUnits = ['%', ...lengthUnits];
+var angleUnits = ["rad", "deg", "grad", "turn"];
+var lengthPercentageUnits = ["%", ...lengthUnits];
 
-const isUnitWithString = (input, units) => {
-    if (typeof input !== 'string') {
-        return false;
-    }
-    if (!units.find((u) => input.endsWith(u))) {
-        throw new Error(`input ${input} does not end with a valid unit. Valid units are: ${units.join(', ')}`);
-    }
-    const match = input.match(/([0-9.]+)([a-z%]+)/);
-    if (!match) {
-        throw new Error(`input ${input} is not a valid transform. Must be a number or a string ending in one of the following units: ${lengthUnits.join(', ')}`);
-    }
-    return true;
+// src/transformation-helpers/make-transform/is-unit-with-string.ts
+var isUnitWithString = (input, units) => {
+  if (typeof input !== "string") {
+    return false;
+  }
+  if (!units.find((u) => input.endsWith(u))) {
+    throw new Error(`input ${input} does not end with a valid unit. Valid units are: ${units.join(", ")}`);
+  }
+  const match = input.match(/([0-9.]+)([a-z%]+)/);
+  if (!match) {
+    throw new Error(`input ${input} is not a valid transform. Must be a number or a string ending in one of the following units: ${lengthUnits.join(", ")}`);
+  }
+  return true;
 };
 
-/* eslint-disable no-redeclare */
-/* Matrix transformation */
-const checkNumber = ({ num, param, api, }) => {
-    if (typeof num === 'undefined') {
-        throw new TypeError(`Argument passed to "${api}" for param "${param}" is undefined`);
-    }
-    if (typeof num !== 'number') {
-        throw new TypeError(`Argument passed to "${api}" for param "${param}" is ${JSON.stringify(num)}`);
-    }
-    if (!Number.isFinite(num)) {
-        throw new TypeError(`Argument passed to "${api}" for param "${param}" is ${JSON.stringify(num)} (must be finite)`);
-    }
+// src/transformation-helpers/make-transform/transform-functions.ts
+var matrix = function(a, b, c, d, tx, ty) {
+  checkNumber({ num: a, param: "a", api: "matrix" });
+  checkNumber({ num: b, param: "b", api: "matrix" });
+  checkNumber({ num: c, param: "c", api: "matrix" });
+  checkNumber({ num: d, param: "d", api: "matrix" });
+  checkNumber({ num: tx, param: "tx", api: "matrix" });
+  checkNumber({ num: ty, param: "ty", api: "matrix" });
+  return `matrix(${a}, ${b}, ${c}, ${d}, ${tx}, ${ty})`;
+};
+var matrix3d = function(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) {
+  checkNumber({ num: a1, param: "a1", api: "matrix3d" });
+  checkNumber({ num: b1, param: "b1", api: "matrix3d" });
+  checkNumber({ num: c1, param: "c1", api: "matrix3d" });
+  checkNumber({ num: d1, param: "d1", api: "matrix3d" });
+  checkNumber({ num: a2, param: "a2", api: "matrix3d" });
+  checkNumber({ num: b2, param: "b2", api: "matrix3d" });
+  checkNumber({ num: c2, param: "c2", api: "matrix3d" });
+  checkNumber({ num: d2, param: "d2", api: "matrix3d" });
+  checkNumber({ num: a3, param: "a3", api: "matrix3d" });
+  checkNumber({ num: b3, param: "b3", api: "matrix3d" });
+  checkNumber({ num: c3, param: "c3", api: "matrix3d" });
+  checkNumber({ num: d3, param: "d3", api: "matrix3d" });
+  checkNumber({ num: a4, param: "a4", api: "matrix3d" });
+  checkNumber({ num: b4, param: "b4", api: "matrix3d" });
+  checkNumber({ num: c4, param: "c4", api: "matrix3d" });
+  checkNumber({ num: d4, param: "d4", api: "matrix3d" });
+  return `matrix3d(${a1}, ${b1}, ${c1}, ${d1}, ${a2}, ${b2}, ${c2}, ${d2}, ${a3}, ${b3}, ${c3}, ${d3}, ${a4}, ${b4}, ${c4}, ${d4})`;
+};
+var perspective = function(length, unit = "px") {
+  if (isUnitWithString(length, lengthUnits)) {
+    return `perspective(${length})`;
+  }
+  checkNumber({ num: length, param: "length", api: "perspective" });
+  return `perspective(${length}${unit})`;
+};
+var rotate = function(angle, unit = "deg") {
+  if (isUnitWithString(angle, angleUnits)) {
+    return `rotate(${angle})`;
+  }
+  checkNumber({ num: angle, param: "angle", api: "rotate" });
+  return `rotate(${angle}${unit})`;
+};
+var rotate3d = function(x, y, z, angle, unit = "deg") {
+  checkNumber({ num: x, param: "x", api: "rotate3d" });
+  checkNumber({ num: y, param: "y", api: "rotate3d" });
+  checkNumber({ num: z, param: "z", api: "rotate3d" });
+  if (isUnitWithString(angle, angleUnits)) {
+    return `rotate3d(${x}, ${y}, ${z}, ${angle})`;
+  }
+  checkNumber({ num: angle, param: "angle", api: "rotate3d" });
+  return `rotate3d(${x}, ${y}, ${z}, ${angle}${unit})`;
+};
+var rotateX = function(angle, unit = "deg") {
+  if (isUnitWithString(angle, angleUnits)) {
+    return `rotateX(${angle})`;
+  }
+  checkNumber({ num: angle, param: "angle", api: "rotateX" });
+  return `rotateX(${angle}${unit})`;
+};
+var rotateY = function(angle, unit = "deg") {
+  if (isUnitWithString(angle, angleUnits)) {
+    return `rotateY(${angle})`;
+  }
+  checkNumber({ num: angle, param: "angle", api: "rotateY" });
+  return `rotateY(${angle}${unit})`;
+};
+var rotateZ = function(angle, unit = "deg") {
+  if (isUnitWithString(angle, angleUnits)) {
+    return `rotateZ(${angle})`;
+  }
+  checkNumber({ num: angle, param: "angle", api: "rotateZ" });
+  return `rotateZ(${angle}${unit})`;
+};
+var scale = function(x, y = x) {
+  checkNumber({ num: x, param: "x", api: "scale" });
+  return `scale(${x}, ${y})`;
+};
+var scale3d = function(x, y, z) {
+  checkNumber({ num: x, param: "x", api: "scale3d" });
+  checkNumber({ num: y, param: "y", api: "scale3d" });
+  checkNumber({ num: z, param: "z", api: "scale3d" });
+  return `scale3d(${x}, ${y}, ${z})`;
+};
+var scaleX = function(x) {
+  checkNumber({ num: x, param: "x", api: "scaleX" });
+  return `scaleX(${x})`;
+};
+var scaleY = function(y) {
+  checkNumber({ num: y, param: "y", api: "scaleY" });
+  return `scaleY(${y})`;
+};
+var scaleZ = function(z) {
+  checkNumber({ num: z, param: "z", api: "scaleZ" });
+  return `scaleZ(${z})`;
+};
+var skew = function(...args) {
+  const [arg1, arg2, arg3, arg4] = args;
+  if (arguments.length === 1) {
+    if (isUnitWithString(arg1, angleUnits)) {
+      return `skew(${arg1}, ${arg1})`;
+    }
+    checkNumber({ num: arg1, param: "angle", api: "skew" });
+    return `skew(${arg1}deg, ${arg1}deg)`;
+  }
+  if (arguments.length === 2) {
+    if (isUnitWithString(arg1, angleUnits) && isUnitWithString(arg2, angleUnits)) {
+      return `skew(${arg1}, ${arg2})`;
+    }
+    if (typeof arg1 === "number" && typeof arg2 !== "number") {
+      checkNumber({ num: arg1, param: "angle", api: "skew" });
+      return `skew(${arg1}${arg2}, ${arg1}${arg2})`;
+    }
+    if (typeof arg1 === "number" && typeof arg2 === "number") {
+      checkNumber({ num: arg1, param: "angle", api: "skew" });
+      checkNumber({ num: arg2, param: "angle", api: "skew" });
+      return `skew(${arg1}deg, ${arg2}deg)`;
+    }
+  }
+  if (arguments.length === 4) {
+    if (typeof arg1 === "number" && isUnitWithString(arg2, angleUnits) && typeof arg3 === "number" && isUnitWithString(arg4, angleUnits)) {
+      checkNumber({ num: arg1, param: "angle", api: "skew" });
+      checkNumber({ num: arg3, param: "angle", api: "skew" });
+      return `skew(${arg1}${arg2}, ${arg3}${arg4})`;
+    }
+  }
+  throw new TypeError([
+    "skew() supports only the following signatures:",
+    "skew(angle: AngleUnitString): string;",
+    "skew(angle: AngleUnitString, angle2: AngleUnitString): string;",
+    "skew(angle: number, unit: AngleUnit): string;",
+    "skew(angleX: number, angleY: number): string;",
+    "skew(angleX: number, unitX: AngleUnit, angleY: number, unitY: AngleUnit): string;"
+  ].join("\n"));
+};
+var skewX = function(angle, unit = "deg") {
+  if (isUnitWithString(angle, angleUnits)) {
+    return `skewX(${angle})`;
+  }
+  checkNumber({ num: angle, param: "angle", api: "skewX" });
+  return `skewX(${angle}${unit})`;
+};
+var skewY = function(angle, unit = "deg") {
+  if (isUnitWithString(angle, angleUnits)) {
+    return `skewY(${angle})`;
+  }
+  checkNumber({ num: angle, param: "angle", api: "skewY" });
+  return `skewY(${angle}${unit})`;
+};
+var translate = function(...args) {
+  const [arg1, arg2, arg3, arg4] = args;
+  if (arguments.length === 1) {
+    if (isUnitWithString(arg1, lengthPercentageUnits)) {
+      return `translate(${arg1})`;
+    }
+    checkNumber({ num: arg1, param: "x", api: "translate" });
+    return `translate(${arg1}px)`;
+  }
+  if (arguments.length === 2) {
+    if (typeof arg1 === "number" && typeof arg2 === "number") {
+      checkNumber({ num: arg1, param: "x", api: "translate" });
+      checkNumber({ num: arg2, param: "y", api: "translate" });
+      return `translate(${arg1}px, ${arg2}px)`;
+    }
+    if (isUnitWithString(arg1, lengthPercentageUnits) && isUnitWithString(arg2, lengthPercentageUnits)) {
+      return `translate(${arg1}, ${arg2})`;
+    }
+    if (typeof arg1 === "number" && typeof arg2 !== "number") {
+      checkNumber({ num: arg1, param: "x", api: "translate" });
+      return `translate(${arg1}${arg2})`;
+    }
+  }
+  if (arguments.length === 4) {
+    if (typeof arg1 === "number" && typeof arg3 === "number") {
+      checkNumber({ num: arg1, param: "x", api: "translate" });
+      checkNumber({ num: arg3, param: "y", api: "translate" });
+      return `translate(${arg1}${arg2}, ${arg3}${arg4})`;
+    }
+  }
+  throw new TypeError([
+    `translate() supports only the following signatures:`,
+    `translate(x: LengthPercentageUnitString)`,
+    `translate(x: number)`,
+    `translate(x: number, y: number)`,
+    `translate(translation: number, unit: LengthPercentageUnit)`,
+    `translate(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit): string;`
+  ].join("\n"));
+};
+var translate3d = function(...args) {
+  if (arguments.length === 3) {
+    const [x, y, z] = args;
+    const vars = [x, y, z].map((arg, i) => {
+      if (isUnitWithString(arg, lengthPercentageUnits)) {
+        return arg;
+      }
+      checkNumber({
+        num: arg,
+        param: i === 0 ? "x" : i === 1 ? "y" : "z",
+        api: "translate3d"
+      });
+      if (typeof arg === "number") {
+        return `${arg}px`;
+      }
+      return arg;
+    });
+    return `translate3d(${vars.join(", ")})`;
+  }
+  if (arguments.length === 6) {
+    const [x, unitX, y, unitY, z, unitZ] = args;
+    if (typeof x === "number" && typeof y === "number" && typeof z === "number") {
+      checkNumber({ num: x, param: "x", api: "translate3d" });
+      checkNumber({ num: y, param: "y", api: "translate3d" });
+      checkNumber({ num: z, param: "z", api: "translate3d" });
+      return `translate3d(${x}${unitX}, ${y}${unitY}, ${z}${unitZ})`;
+    }
+  }
+  throw new TypeError([
+    `translate3d() supports only the following signatures:`,
+    `translate3d(x: LengthPercentageUnitString, y: LengthPercentageUnitString, z: LengthPercentageUnitString)`,
+    `translate3d(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit, z: number, unitZ: LengthUnit)`
+  ].join("\n"));
+};
+var translateX = function(x, unit = "px") {
+  if (isUnitWithString(x, lengthPercentageUnits)) {
+    return `translateX(${x})`;
+  }
+  checkNumber({ num: x, param: "x", api: "translateX" });
+  return `translateX(${x}${unit})`;
+};
+var translateY = function(y, unit = "px") {
+  if (isUnitWithString(y, lengthPercentageUnits)) {
+    return `translateY(${y})`;
+  }
+  checkNumber({ num: y, param: "y", api: "translateY" });
+  return `translateY(${y}${unit})`;
+};
+var translateZ = function(z, unit = "px") {
+  if (isUnitWithString(z, lengthUnits)) {
+    return `translateZ(${z})`;
+  }
+  checkNumber({ num: z, param: "z", api: "translateZ" });
+  return `translateZ(${z}${unit})`;
+};
+var checkNumber = ({
+  num,
+  param,
+  api
+}) => {
+  if (typeof num === "undefined") {
+    throw new TypeError(`Argument passed to "${api}" for param "${param}" is undefined`);
+  }
+  if (typeof num !== "number") {
+    throw new TypeError(`Argument passed to "${api}" for param "${param}" is ${JSON.stringify(num)}`);
+  }
+  if (!Number.isFinite(num)) {
+    throw new TypeError(`Argument passed to "${api}" for param "${param}" is ${JSON.stringify(num)} (must be finite)`);
+  }
 };
-function matrix(a, b, c, d, tx, ty) {
-    checkNumber({ num: a, param: 'a', api: 'matrix' });
-    checkNumber({ num: b, param: 'b', api: 'matrix' });
-    checkNumber({ num: c, param: 'c', api: 'matrix' });
-    checkNumber({ num: d, param: 'd', api: 'matrix' });
-    checkNumber({ num: tx, param: 'tx', api: 'matrix' });
-    checkNumber({ num: ty, param: 'ty', api: 'matrix' });
-    return `matrix(${a}, ${b}, ${c}, ${d}, ${tx}, ${ty})`;
-}
-function matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) {
-    checkNumber({ num: a1, param: 'a1', api: 'matrix3d' });
-    checkNumber({ num: b1, param: 'b1', api: 'matrix3d' });
-    checkNumber({ num: c1, param: 'c1', api: 'matrix3d' });
-    checkNumber({ num: d1, param: 'd1', api: 'matrix3d' });
-    checkNumber({ num: a2, param: 'a2', api: 'matrix3d' });
-    checkNumber({ num: b2, param: 'b2', api: 'matrix3d' });
-    checkNumber({ num: c2, param: 'c2', api: 'matrix3d' });
-    checkNumber({ num: d2, param: 'd2', api: 'matrix3d' });
-    checkNumber({ num: a3, param: 'a3', api: 'matrix3d' });
-    checkNumber({ num: b3, param: 'b3', api: 'matrix3d' });
-    checkNumber({ num: c3, param: 'c3', api: 'matrix3d' });
-    checkNumber({ num: d3, param: 'd3', api: 'matrix3d' });
-    checkNumber({ num: a4, param: 'a4', api: 'matrix3d' });
-    checkNumber({ num: b4, param: 'b4', api: 'matrix3d' });
-    checkNumber({ num: c4, param: 'c4', api: 'matrix3d' });
-    checkNumber({ num: d4, param: 'd4', api: 'matrix3d' });
-    return `matrix3d(${a1}, ${b1}, ${c1}, ${d1}, ${a2}, ${b2}, ${c2}, ${d2}, ${a3}, ${b3}, ${c3}, ${d3}, ${a4}, ${b4}, ${c4}, ${d4})`;
-}
-function perspective(length, unit = 'px') {
-    if (isUnitWithString(length, lengthUnits)) {
-        return `perspective(${length})`;
-    }
-    checkNumber({ num: length, param: 'length', api: 'perspective' });
-    return `perspective(${length}${unit})`;
-}
-function rotate(angle, unit = 'deg') {
-    if (isUnitWithString(angle, angleUnits)) {
-        return `rotate(${angle})`;
-    }
-    checkNumber({ num: angle, param: 'angle', api: 'rotate' });
-    return `rotate(${angle}${unit})`;
-}
-function rotate3d(x, y, z, angle, unit = 'deg') {
-    checkNumber({ num: x, param: 'x', api: 'rotate3d' });
-    checkNumber({ num: y, param: 'y', api: 'rotate3d' });
-    checkNumber({ num: z, param: 'z', api: 'rotate3d' });
-    if (isUnitWithString(angle, angleUnits)) {
-        return `rotate3d(${x}, ${y}, ${z}, ${angle})`;
-    }
-    checkNumber({ num: angle, param: 'angle', api: 'rotate3d' });
-    return `rotate3d(${x}, ${y}, ${z}, ${angle}${unit})`;
-}
-function rotateX(angle, unit = 'deg') {
-    if (isUnitWithString(angle, angleUnits)) {
-        return `rotateX(${angle})`;
-    }
-    checkNumber({ num: angle, param: 'angle', api: 'rotateX' });
-    return `rotateX(${angle}${unit})`;
-}
-function rotateY(angle, unit = 'deg') {
-    if (isUnitWithString(angle, angleUnits)) {
-        return `rotateY(${angle})`;
-    }
-    checkNumber({ num: angle, param: 'angle', api: 'rotateY' });
-    return `rotateY(${angle}${unit})`;
-}
-function rotateZ(angle, unit = 'deg') {
-    if (isUnitWithString(angle, angleUnits)) {
-        return `rotateZ(${angle})`;
-    }
-    checkNumber({ num: angle, param: 'angle', api: 'rotateZ' });
-    return `rotateZ(${angle}${unit})`;
-}
-/* Scale */
-function scale(x, y = x) {
-    checkNumber({ num: x, param: 'x', api: 'scale' });
-    return `scale(${x}, ${y})`;
-}
-function scale3d(x, y, z) {
-    checkNumber({ num: x, param: 'x', api: 'scale3d' });
-    checkNumber({ num: y, param: 'y', api: 'scale3d' });
-    checkNumber({ num: z, param: 'z', api: 'scale3d' });
-    return `scale3d(${x}, ${y}, ${z})`;
-}
-function scaleX(x) {
-    checkNumber({ num: x, param: 'x', api: 'scaleX' });
-    return `scaleX(${x})`;
-}
-function scaleY(y) {
-    checkNumber({ num: y, param: 'y', api: 'scaleY' });
-    return `scaleY(${y})`;
-}
-function scaleZ(z) {
-    checkNumber({ num: z, param: 'z', api: 'scaleZ' });
-    return `scaleZ(${z})`;
-}
-function skew(...args) {
-    const [arg1, arg2, arg3, arg4] = args;
-    if (arguments.length === 1) {
-        // Case A
-        if (isUnitWithString(arg1, angleUnits)) {
-            return `skew(${arg1}, ${arg1})`;
-        }
-        // Case Z
-        checkNumber({ num: arg1, param: 'angle', api: 'skew' });
-        return `skew(${arg1}deg, ${arg1}deg)`;
-    }
-    if (arguments.length === 2) {
-        // Case B
-        if (isUnitWithString(arg1, angleUnits) &&
-            isUnitWithString(arg2, angleUnits)) {
-            return `skew(${arg1}, ${arg2})`;
-        }
-        // Case C
-        if (typeof arg1 === 'number' && typeof arg2 !== 'number') {
-            checkNumber({ num: arg1, param: 'angle', api: 'skew' });
-            return `skew(${arg1}${arg2}, ${arg1}${arg2})`;
-        }
-        // Case D
-        if (typeof arg1 === 'number' && typeof arg2 === 'number') {
-            checkNumber({ num: arg1, param: 'angle', api: 'skew' });
-            checkNumber({ num: arg2, param: 'angle', api: 'skew' });
-            return `skew(${arg1}deg, ${arg2}deg)`;
-        }
-    }
-    if (arguments.length === 4) {
-        // Case E
-        if (typeof arg1 === 'number' &&
-            isUnitWithString(arg2, angleUnits) &&
-            typeof arg3 === 'number' &&
-            isUnitWithString(arg4, angleUnits)) {
-            checkNumber({ num: arg1, param: 'angle', api: 'skew' });
-            checkNumber({ num: arg3, param: 'angle', api: 'skew' });
-            return `skew(${arg1}${arg2}, ${arg3}${arg4})`;
-        }
-    }
-    throw new TypeError([
-        'skew() supports only the following signatures:',
-        'skew(angle: AngleUnitString): string;',
-        'skew(angle: AngleUnitString, angle2: AngleUnitString): string;',
-        'skew(angle: number, unit: AngleUnit): string;',
-        'skew(angleX: number, angleY: number): string;',
-        'skew(angleX: number, unitX: AngleUnit, angleY: number, unitY: AngleUnit): string;',
-    ].join('\n'));
-}
-function skewX(angle, unit = 'deg') {
-    if (isUnitWithString(angle, angleUnits)) {
-        return `skewX(${angle})`;
-    }
-    checkNumber({ num: angle, param: 'angle', api: 'skewX' });
-    return `skewX(${angle}${unit})`;
-}
-function skewY(angle, unit = 'deg') {
-    if (isUnitWithString(angle, angleUnits)) {
-        return `skewY(${angle})`;
-    }
-    checkNumber({ num: angle, param: 'angle', api: 'skewY' });
-    return `skewY(${angle}${unit})`;
-}
-function translate(...args) {
-    const [arg1, arg2, arg3, arg4] = args;
-    if (arguments.length === 1) {
-        // Case A
-        if (isUnitWithString(arg1, lengthPercentageUnits)) {
-            return `translate(${arg1})`;
-        }
-        // Case B
-        checkNumber({ num: arg1, param: 'x', api: 'translate' });
-        return `translate(${arg1}px)`;
-    }
-    if (arguments.length === 2) {
-        // Case C
-        if (typeof arg1 === 'number' && typeof arg2 === 'number') {
-            checkNumber({ num: arg1, param: 'x', api: 'translate' });
-            checkNumber({ num: arg2, param: 'y', api: 'translate' });
-            return `translate(${arg1}px, ${arg2}px)`;
-        }
-        // Case C.1
-        if (isUnitWithString(arg1, lengthPercentageUnits) &&
-            isUnitWithString(arg2, lengthPercentageUnits)) {
-            return `translate(${arg1}, ${arg2})`;
-        }
-        // Case D
-        if (typeof arg1 === 'number' && typeof arg2 !== 'number') {
-            checkNumber({ num: arg1, param: 'x', api: 'translate' });
-            return `translate(${arg1}${arg2})`;
-        }
-    }
-    if (arguments.length === 4) {
-        // Case E
-        if (typeof arg1 === 'number' && typeof arg3 === 'number') {
-            checkNumber({ num: arg1, param: 'x', api: 'translate' });
-            checkNumber({ num: arg3, param: 'y', api: 'translate' });
-            return `translate(${arg1}${arg2}, ${arg3}${arg4})`;
-        }
-    }
-    throw new TypeError([
-        `translate() supports only the following signatures:`,
-        `translate(x: LengthPercentageUnitString)`,
-        `translate(x: number)`,
-        `translate(x: number, y: number)`,
-        `translate(translation: number, unit: LengthPercentageUnit)`,
-        `translate(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit): string;`,
-    ].join('\n'));
-}
-function translate3d(...args) {
-    if (arguments.length === 3) {
-        const [x, y, z] = args;
-        const vars = [x, y, z].map((arg, i) => {
-            if (isUnitWithString(arg, lengthPercentageUnits)) {
-                return arg;
-            }
-            checkNumber({
-                num: arg,
-                param: i === 0 ? 'x' : i === 1 ? 'y' : 'z',
-                api: 'translate3d',
-            });
-            if (typeof arg === 'number') {
-                return `${arg}px`;
-            }
-            return arg;
-        });
-        return `translate3d(${vars.join(', ')})`;
-    }
-    if (arguments.length === 6) {
-        const [x, unitX, y, unitY, z, unitZ] = args;
-        if (typeof x === 'number' &&
-            typeof y === 'number' &&
-            typeof z === 'number') {
-            checkNumber({ num: x, param: 'x', api: 'translate3d' });
-            checkNumber({ num: y, param: 'y', api: 'translate3d' });
-            checkNumber({ num: z, param: 'z', api: 'translate3d' });
-            return `translate3d(${x}${unitX}, ${y}${unitY}, ${z}${unitZ})`;
-        }
-    }
-    throw new TypeError([
-        `translate3d() supports only the following signatures:`,
-        `translate3d(x: LengthPercentageUnitString, y: LengthPercentageUnitString, z: LengthPercentageUnitString)`,
-        `translate3d(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit, z: number, unitZ: LengthUnit)`,
-    ].join('\n'));
-}
-function translateX(x, unit = 'px') {
-    if (isUnitWithString(x, lengthPercentageUnits)) {
-        return `translateX(${x})`;
-    }
-    checkNumber({ num: x, param: 'x', api: 'translateX' });
-    return `translateX(${x}${unit})`;
-}
-function translateY(y, unit = 'px') {
-    if (isUnitWithString(y, lengthPercentageUnits)) {
-        return `translateY(${y})`;
-    }
-    checkNumber({ num: y, param: 'y', api: 'translateY' });
-    return `translateY(${y}${unit})`;
-}
-function translateZ(z, unit = 'px') {
-    if (isUnitWithString(z, lengthUnits)) {
-        return `translateZ(${z})`;
-    }
-    checkNumber({ num: z, param: 'z', api: 'translateZ' });
-    return `translateZ(${z}${unit})`;
-}
 
+// src/transformation-helpers/make-transform/index.ts
 function makeTransform(transforms) {
-    return transforms.join(' ');
+  return transforms.join(" ");
 }
-
-export { interpolateStyles, makeTransform, matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ };
+export {
+  translateZ,
+  translateY,
+  translateX,
+  translate3d,
+  translate,
+  skewY,
+  skewX,
+  skew,
+  scaleZ,
+  scaleY,
+  scaleX,
+  scale3d,
+  scale,
+  rotateZ,
+  rotateY,
+  rotateX,
+  rotate3d,
+  rotate,
+  perspective,
+  matrix3d,
+  matrix,
+  makeTransform,
+  interpolateStyles
+};