framer-motion 7.7.0 → 7.7.1

package/dist/es/animation/legacy-popmotion/index.mjs

@@ -1,7 +1,7 @@
 import { keyframes } from './keyframes.mjs';
 import { spring } from './spring.mjs';
 import { decay } from './decay.mjs';
-import sync, { cancelSync } from 'framesync';
+import { sync, cancelSync } from '../../frameloop/index.mjs';
 import { interpolate } from '../../utils/interpolate.mjs';
 
 const types = { decay, keyframes, spring };

package/dist/es/animation/legacy-popmotion/inertia.mjs

@@ -1,6 +1,6 @@
 import { animate } from './index.mjs';
-import { getFrameData } from 'framesync';
 import { velocityPerSecond } from '../../utils/velocity-per-second.mjs';
+import { frameData } from '../../frameloop/data.mjs';
 
 function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) {
     let currentAnimation;
@@ -60,7 +60,7 @@ function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant =
         const checkBoundary = (v) => {
             prev = current;
             current = v;
-            velocity = velocityPerSecond(v - prev, getFrameData().delta);
+            velocity = velocityPerSecond(v - prev, frameData.delta);
             if ((heading === 1 && v > boundary) ||
                 (heading === -1 && v < boundary)) {
                 startSpring({ from: v, to: boundary, velocity });

package/dist/es/animation/utils/is-animatable.mjs

@@ -1,4 +1,4 @@
-import { complex } from 'style-value-types';
+import { complex } from '../../value/types/complex/index.mjs';
 
 /**
  * Check if a value is animatable. Examples:

package/dist/es/frameloop/create-render-step.mjs

@@ -0,0 +1,88 @@
+function createRenderStep(runNextFrame) {
+    /**
+     * We create and reuse two arrays, one to queue jobs for the current frame
+     * and one for the next. We reuse to avoid triggering GC after x frames.
+     */
+    let toRun = [];
+    let toRunNextFrame = [];
+    /**
+     *
+     */
+    let numToRun = 0;
+    /**
+     * Track whether we're currently processing jobs in this step. This way
+     * we can decide whether to schedule new jobs for this frame or next.
+     */
+    let isProcessing = false;
+    let flushNextFrame = false;
+    /**
+     * A set of processes which were marked keepAlive when scheduled.
+     */
+    const toKeepAlive = new WeakSet();
+    const step = {
+        /**
+         * Schedule a process to run on the next frame.
+         */
+        schedule: (callback, keepAlive = false, immediate = false) => {
+            const addToCurrentFrame = immediate && isProcessing;
+            const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+            if (keepAlive)
+                toKeepAlive.add(callback);
+            // If the buffer doesn't already contain this callback, add it
+            if (buffer.indexOf(callback) === -1) {
+                buffer.push(callback);
+                // If we're adding it to the currently running buffer, update its measured size
+                if (addToCurrentFrame && isProcessing)
+                    numToRun = toRun.length;
+            }
+            return callback;
+        },
+        /**
+         * Cancel the provided callback from running on the next frame.
+         */
+        cancel: (callback) => {
+            const index = toRunNextFrame.indexOf(callback);
+            if (index !== -1)
+                toRunNextFrame.splice(index, 1);
+            toKeepAlive.delete(callback);
+        },
+        /**
+         * Execute all schedule callbacks.
+         */
+        process: (frameData) => {
+            /**
+             * If we're already processing we've probably been triggered by a flushSync
+             * inside an existing process. Instead of executing, mark flushNextFrame
+             * as true and ensure we flush the following frame at the end of this one.
+             */
+            if (isProcessing) {
+                flushNextFrame = true;
+                return;
+            }
+            isProcessing = true;
+            [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
+            // Clear the next frame list
+            toRunNextFrame.length = 0;
+            // Execute this frame
+            numToRun = toRun.length;
+            if (numToRun) {
+                for (let i = 0; i < numToRun; i++) {
+                    const callback = toRun[i];
+                    callback(frameData);
+                    if (toKeepAlive.has(callback)) {
+                        step.schedule(callback);
+                        runNextFrame();
+                    }
+                }
+            }
+            isProcessing = false;
+            if (flushNextFrame) {
+                flushNextFrame = false;
+                step.process(frameData);
+            }
+        },
+    };
+    return step;
+}
+
+export { createRenderStep };

package/dist/es/frameloop/data.mjs

@@ -0,0 +1,6 @@
+const frameData = {
+    delta: 0,
+    timestamp: 0,
+};
+
+export { frameData };

package/dist/es/frameloop/index.mjs

@@ -0,0 +1,59 @@
+import { onNextFrame, defaultTimestep } from './on-next-frame.mjs';
+import { createRenderStep } from './create-render-step.mjs';
+import { frameData } from './data.mjs';
+
+const maxElapsed = 40;
+let useDefaultElapsed = true;
+let runNextFrame = false;
+let isProcessing = false;
+const stepsOrder = [
+    "read",
+    "update",
+    "preRender",
+    "render",
+    "postRender",
+];
+const steps = stepsOrder.reduce((acc, key) => {
+    acc[key] = createRenderStep(() => (runNextFrame = true));
+    return acc;
+}, {});
+const sync = stepsOrder.reduce((acc, key) => {
+    const step = steps[key];
+    acc[key] = (process, keepAlive = false, immediate = false) => {
+        if (!runNextFrame)
+            startLoop();
+        return step.schedule(process, keepAlive, immediate);
+    };
+    return acc;
+}, {});
+const cancelSync = stepsOrder.reduce((acc, key) => {
+    acc[key] = steps[key].cancel;
+    return acc;
+}, {});
+const flushSync = stepsOrder.reduce((acc, key) => {
+    acc[key] = () => steps[key].process(frameData);
+    return acc;
+}, {});
+const processStep = (stepId) => steps[stepId].process(frameData);
+const processFrame = (timestamp) => {
+    runNextFrame = false;
+    frameData.delta = useDefaultElapsed
+        ? defaultTimestep
+        : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed), 1);
+    frameData.timestamp = timestamp;
+    isProcessing = true;
+    stepsOrder.forEach(processStep);
+    isProcessing = false;
+    if (runNextFrame) {
+        useDefaultElapsed = false;
+        onNextFrame(processFrame);
+    }
+};
+const startLoop = () => {
+    runNextFrame = true;
+    useDefaultElapsed = true;
+    if (!isProcessing)
+        onNextFrame(processFrame);
+};
+
+export { cancelSync, flushSync, sync };

package/dist/es/frameloop/on-next-frame.mjs

@@ -0,0 +1,12 @@
+/*
+  Detect and load appropriate clock setting for the execution environment
+ */
+const defaultTimestep = (1 / 60) * 1000;
+const getCurrentTime = typeof performance !== "undefined"
+    ? () => performance.now()
+    : () => Date.now();
+const onNextFrame = typeof window !== "undefined"
+    ? (callback) => window.requestAnimationFrame(callback)
+    : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
+
+export { defaultTimestep, onNextFrame };

package/dist/es/gestures/PanSession.mjs

@@ -1,10 +1,11 @@
 import { isMouseEvent, isTouchEvent } from './utils/event-type.mjs';
 import { extractEventInfo } from '../events/event-info.mjs';
-import sync, { getFrameData, cancelSync } from 'framesync';
+import { sync, cancelSync } from '../frameloop/index.mjs';
 import { secondsToMilliseconds } from '../utils/time-conversion.mjs';
 import { addPointerEvent } from '../events/use-pointer-event.mjs';
 import { pipe } from '../utils/pipe.mjs';
 import { distance2D } from '../utils/distance.mjs';
+import { frameData } from '../frameloop/data.mjs';
 
 /**
  * @internal
@@ -39,7 +40,7 @@ class PanSession {
             if (!isPanStarted && !isDistancePastThreshold)
                 return;
             const { point } = info;
-            const { timestamp } = getFrameData();
+            const { timestamp } = frameData;
             this.history.push({ ...point, timestamp });
             const { onStart, onMove } = this.handlers;
             if (!isPanStarted) {
@@ -76,7 +77,7 @@ class PanSession {
         const info = extractEventInfo(event);
         const initialInfo = transformPoint(info, this.transformPagePoint);
         const { point } = initialInfo;
-        const { timestamp } = getFrameData();
+        const { timestamp } = frameData;
         this.history = [{ ...point, timestamp }];
         const { onSessionStart } = handlers;
         onSessionStart &&

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -12,9 +12,9 @@ import { extractEventInfo } from '../../events/event-info.mjs';
 import { startAnimation } from '../../animation/utils/transitions.mjs';
 import { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';
 import { addDomEvent } from '../../events/use-dom-event.mjs';
-import { percent } from 'style-value-types';
 import { calcLength } from '../../projection/geometry/delta-calc.mjs';
 import { mix } from '../../utils/mix.mjs';
+import { percent } from '../../value/types/numbers/units.mjs';
 
 const elementDragControls = new WeakMap();
 /**

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -1,4 +1,4 @@
-import sync from 'framesync';
+import { sync } from '../../../frameloop/index.mjs';
 import React__default, { useContext } from 'react';
 import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
 import { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';

package/dist/es/projection/animation/mix-values.mjs

@@ -1,8 +1,8 @@
-import { percent, px } from 'style-value-types';
 import { circOut } from '../../easing/circ.mjs';
 import { progress } from '../../utils/progress.mjs';
 import { mix } from '../../utils/mix.mjs';
 import { noop } from '../../utils/noop.mjs';
+import { percent, px } from '../../value/types/numbers/units.mjs';
 
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 const numBorders = borders.length;

package/dist/es/projection/geometry/delta-remove.mjs

@@ -1,5 +1,5 @@
-import { percent } from 'style-value-types';
 import { mix } from '../../utils/mix.mjs';
+import { percent } from '../../value/types/numbers/units.mjs';
 import { scalePoint } from './delta-apply.mjs';
 
 /**

package/dist/es/projection/node/create-projection-node.mjs

@@ -1,4 +1,4 @@
-import sync, { cancelSync, flushSync } from 'framesync';
+import { cancelSync, flushSync, sync } from '../../frameloop/index.mjs';
 import { animate } from '../../animation/animate.mjs';
 import { SubscriptionManager } from '../../utils/subscription-manager.mjs';
 import { mixValues } from '../animation/mix-values.mjs';

package/dist/es/projection/styles/scale-border-radius.mjs

@@ -1,4 +1,4 @@
-import { px } from 'style-value-types';
+import { px } from '../../value/types/numbers/units.mjs';
 
 function pixelsToPercent(pixels, axis) {
     if (axis.max === axis.min)

package/dist/es/projection/styles/scale-box-shadow.mjs

@@ -1,6 +1,6 @@
-import { complex } from 'style-value-types';
 import { cssVariableRegex } from '../../render/dom/utils/css-variables-conversion.mjs';
 import { mix } from '../../utils/mix.mjs';
+import { complex } from '../../value/types/complex/index.mjs';
 
 const varToken = "_$css";
 const correctBoxShadow = {

package/dist/es/render/VisualElement.mjs

@@ -1,4 +1,4 @@
-import sync, { cancelSync } from 'framesync';
+import { sync, cancelSync } from '../frameloop/index.mjs';
 import { invariant } from 'hey-listen';
 import { createElement } from 'react';
 import { featureDefinitions } from '../motion/features/definitions.mjs';

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

@@ -1,9 +1,10 @@
-import { px, number } from 'style-value-types';
 import { isKeyframesTarget } from '../../../animation/utils/is-keyframes-target.mjs';
 import { invariant } from 'hey-listen';
 import { transformPropOrder } from '../../html/utils/transform.mjs';
 import { findDimensionValueType } from '../value-types/dimensions.mjs';
 import { isBrowser } from '../../../utils/is-browser.mjs';
+import { number } from '../../../value/types/numbers/index.mjs';
+import { px } from '../../../value/types/numbers/units.mjs';
 
 const positionalKeys = new Set([
     "width",

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

@@ -1,4 +1,5 @@
-import { filter, complex } from 'style-value-types';
+import { complex } from '../../../value/types/complex/index.mjs';
+import { filter } from '../../../value/types/complex/filter.mjs';
 import { getDefaultValueType } from './defaults.mjs';
 
 function getAnimatableNone(key, value) {

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

@@ -1,4 +1,5 @@
-import { color, filter } from 'style-value-types';
+import { color } from '../../../value/types/color/index.mjs';
+import { filter } from '../../../value/types/complex/filter.mjs';
 import { numberValueTypes } from './number.mjs';
 
 /**

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

@@ -1,4 +1,5 @@
-import { number, px, percent, degrees, vw, vh } from 'style-value-types';
+import { number } from '../../../value/types/numbers/index.mjs';
+import { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.mjs';
 import { testValueType } from './test.mjs';
 import { auto } from './type-auto.mjs';
 

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

@@ -1,4 +1,5 @@
-import { color, complex } from 'style-value-types';
+import { color } from '../../../value/types/color/index.mjs';
+import { complex } from '../../../value/types/complex/index.mjs';
 import { dimensionValueTypes } from './dimensions.mjs';
 import { testValueType } from './test.mjs';
 

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

@@ -1,4 +1,5 @@
-import { px, degrees, scale, alpha, progressPercentage } from 'style-value-types';
+import { scale, alpha } from '../../../value/types/numbers/index.mjs';
+import { px, degrees, progressPercentage } from '../../../value/types/numbers/units.mjs';
 import { int } from './type-int.mjs';
 
 const numberValueTypes = {

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

@@ -1,4 +1,4 @@
-import { number } from 'style-value-types';
+import { number } from '../../../value/types/numbers/index.mjs';
 
 const int = {
     ...number,

package/dist/es/render/svg/utils/path.mjs

@@ -1,4 +1,4 @@
-import { px } from 'style-value-types';
+import { px } from '../../../value/types/numbers/units.mjs';
 
 const dashKeys = {
     offset: "stroke-dashoffset",

package/dist/es/render/svg/utils/transform-origin.mjs

@@ -1,4 +1,4 @@
-import { px } from 'style-value-types';
+import { px } from '../../../value/types/numbers/units.mjs';
 
 function calcOrigin(origin, offset, size) {
     return typeof origin === "string"

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

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.7.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.0 may not work as expected.`);
+                warnOnce(nextValue.version === "7.7.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.7.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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

@@ -1,8 +1,8 @@
-import { complex } from 'style-value-types';
 import { isNumericalString } from '../../utils/is-numerical-string.mjs';
 import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';
 import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
 import { motionValue } from '../../value/index.mjs';
+import { complex } from '../../value/types/complex/index.mjs';
 import { getAnimatableNone } from '../dom/value-types/animatable-none.mjs';
 import { findValueType } from '../dom/value-types/find.mjs';
 import { resolveVariant } from './resolve-dynamic-variants.mjs';

package/dist/es/utils/delay.mjs

@@ -1,4 +1,4 @@
-import sync, { cancelSync } from 'framesync';
+import { sync, cancelSync } from '../frameloop/index.mjs';
 
 function delay(callback, timeout) {
     const start = performance.now();

package/dist/es/utils/interpolate.mjs

@@ -1,5 +1,5 @@
 import { invariant } from 'hey-listen';
-import { color } from 'style-value-types';
+import { color } from '../value/types/color/index.mjs';
 import { clamp } from './clamp.mjs';
 import { mix } from './mix.mjs';
 import { mixColor } from './mix-color.mjs';

package/dist/es/utils/mix-color.mjs

@@ -1,7 +1,9 @@
 import { mix } from './mix.mjs';
-import { rgba, hsla, hex } from 'style-value-types';
 import { invariant } from 'hey-listen';
 import { hslaToRgba } from './hsla-to-rgba.mjs';
+import { hex } from '../value/types/color/hex.mjs';
+import { rgba } from '../value/types/color/rgba.mjs';
+import { hsla } from '../value/types/color/hsla.mjs';
 
 // Linear color space blending
 // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
@@ -17,6 +19,7 @@ function asRGBA(color) {
     invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
     let model = type.parse(color);
     if (type === hsla) {
+        // TODO Remove this cast - needed since Framer Motion's stricter typing
         model = hslaToRgba(model);
     }
     return model;

package/dist/es/utils/mix-complex.mjs

@@ -1,8 +1,9 @@
-import { complex, color } from 'style-value-types';
 import { mix } from './mix.mjs';
 import { mixColor } from './mix-color.mjs';
 import { pipe } from './pipe.mjs';
 import { warning } from 'hey-listen';
+import { color } from '../value/types/color/index.mjs';
+import { complex, analyseComplexValue } from '../value/types/complex/index.mjs';
 
 function getMixer(origin, target) {
     if (typeof origin === "number") {
@@ -41,34 +42,14 @@ const mixObject = (origin, target) => {
         return output;
     };
 };
-/**
- * TODO: Combine with function within complex when style-value-types moved inside Framer Motion
- */
-function analyse(value) {
-    const parsed = complex.parse(value);
-    const numValues = parsed.length;
-    let numNumbers = 0;
-    let numColors = 0;
-    for (let i = 0; i < numValues; i++) {
-        // Parsed complex values return with colors first, so if we've seen any number
-        // we're already past that part of the array and don't need to continue running typeof
-        if (numNumbers || typeof parsed[i] === "number") {
-            numNumbers++;
-        }
-        else {
-            numColors++;
-        }
-    }
-    return { parsed, numNumbers, numColors };
-}
 const mixComplex = (origin, target) => {
     const template = complex.createTransformer(target);
-    const originStats = analyse(origin);
-    const targetStats = analyse(target);
+    const originStats = analyseComplexValue(origin);
+    const targetStats = analyseComplexValue(target);
     const canInterpolate = originStats.numColors === targetStats.numColors &&
         originStats.numNumbers >= targetStats.numNumbers;
     if (canInterpolate) {
-        return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+        return pipe(mixArray(originStats.values, targetStats.values), template);
     }
     else {
         warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);

package/dist/es/utils/use-animation-frame.mjs

@@ -1,4 +1,4 @@
-import sync, { cancelSync } from 'framesync';
+import { sync, cancelSync } from '../frameloop/index.mjs';
 import { useRef, useContext, useEffect } from 'react';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 

package/dist/es/utils/use-force-update.mjs

@@ -1,4 +1,4 @@
-import sync from 'framesync';
+import { sync } from '../frameloop/index.mjs';
 import { useState, useCallback } from 'react';
 import { useIsMounted } from './use-is-mounted.mjs';
 

package/dist/es/utils/use-instant-transition.mjs

@@ -1,4 +1,4 @@
-import sync from 'framesync';
+import { sync } from '../frameloop/index.mjs';
 import { useEffect } from 'react';
 import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs';
 import { useForceUpdate } from './use-force-update.mjs';

package/dist/es/value/index.mjs

@@ -1,4 +1,5 @@
-import sync, { getFrameData } from 'framesync';
+import { sync } from '../frameloop/index.mjs';
+import { frameData } from '../frameloop/data.mjs';
 import { SubscriptionManager } from '../utils/subscription-manager.mjs';
 import { velocityPerSecond } from '../utils/velocity-per-second.mjs';
 
@@ -24,7 +25,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.7.0";
+        this.version = "7.7.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -67,7 +68,7 @@ class MotionValue {
             this.prev = this.current;
             this.current = v;
             // Update timestamp
-            const { delta, timestamp } = getFrameData();
+            const { delta, timestamp } = frameData;
             if (this.lastUpdated !== timestamp) {
                 this.timeDelta = delta;
                 this.lastUpdated = timestamp;

package/dist/es/value/types/color/hex.mjs

@@ -0,0 +1,40 @@
+import { rgba } from './rgba.mjs';
+import { isColorString } from './utils.mjs';
+
+function parseHex(v) {
+    let r = "";
+    let g = "";
+    let b = "";
+    let a = "";
+    // If we have 6 characters, ie #FF0000
+    if (v.length > 5) {
+        r = v.substring(1, 3);
+        g = v.substring(3, 5);
+        b = v.substring(5, 7);
+        a = v.substring(7, 9);
+        // Or we have 3 characters, ie #F00
+    }
+    else {
+        r = v.substring(1, 2);
+        g = v.substring(2, 3);
+        b = v.substring(3, 4);
+        a = v.substring(4, 5);
+        r += r;
+        g += g;
+        b += b;
+        a += a;
+    }
+    return {
+        red: parseInt(r, 16),
+        green: parseInt(g, 16),
+        blue: parseInt(b, 16),
+        alpha: a ? parseInt(a, 16) / 255 : 1,
+    };
+}
+const hex = {
+    test: isColorString("#"),
+    parse: parseHex,
+    transform: rgba.transform,
+};
+
+export { hex };

package/dist/es/value/types/color/hsla.mjs

@@ -0,0 +1,22 @@
+import { alpha } from '../numbers/index.mjs';
+import { percent } from '../numbers/units.mjs';
+import { sanitize } from '../utils.mjs';
+import { isColorString, splitColor } from './utils.mjs';
+
+const hsla = {
+    test: isColorString("hsl", "hue"),
+    parse: splitColor("hue", "saturation", "lightness"),
+    transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+        return ("hsla(" +
+            Math.round(hue) +
+            ", " +
+            percent.transform(sanitize(saturation)) +
+            ", " +
+            percent.transform(sanitize(lightness)) +
+            ", " +
+            sanitize(alpha.transform(alpha$1)) +
+            ")");
+    },
+};
+
+export { hsla };

package/dist/es/value/types/color/index.mjs

@@ -0,0 +1,28 @@
+import { isString } from '../utils.mjs';
+import { hex } from './hex.mjs';
+import { hsla } from './hsla.mjs';
+import { rgba } from './rgba.mjs';
+
+const color = {
+    test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+    parse: (v) => {
+        if (rgba.test(v)) {
+            return rgba.parse(v);
+        }
+        else if (hsla.test(v)) {
+            return hsla.parse(v);
+        }
+        else {
+            return hex.parse(v);
+        }
+    },
+    transform: (v) => {
+        return isString(v)
+            ? v
+            : v.hasOwnProperty("red")
+                ? rgba.transform(v)
+                : hsla.transform(v);
+    },
+};
+
+export { color };