@epic-web/workshop-app 4.0.0

package/node_modules/framer-motion/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/node_modules/framer-motion/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/node_modules/framer-motion/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 };

package/node_modules/framer-motion/dist/es/value/types/color/rgba.mjs

@@ -0,0 +1,25 @@
+import { clamp } from '../../../utils/clamp.mjs';
+import { number, alpha } from '../numbers/index.mjs';
+import { sanitize } from '../utils.mjs';
+import { isColorString, splitColor } from './utils.mjs';
+
+const clampRgbUnit = (v) => clamp(0, 255, v);
+const rgbUnit = {
+    ...number,
+    transform: (v) => Math.round(clampRgbUnit(v)),
+};
+const rgba = {
+    test: isColorString("rgb", "red"),
+    parse: splitColor("red", "green", "blue"),
+    transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" +
+        rgbUnit.transform(red) +
+        ", " +
+        rgbUnit.transform(green) +
+        ", " +
+        rgbUnit.transform(blue) +
+        ", " +
+        sanitize(alpha.transform(alpha$1)) +
+        ")",
+};
+
+export { rgbUnit, rgba };

package/node_modules/framer-motion/dist/es/value/types/color/utils.mjs

@@ -0,0 +1,23 @@
+import { isString, singleColorRegex, floatRegex } from '../utils.mjs';
+
+/**
+ * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
+ * but false if a number or multiple colors
+ */
+const isColorString = (type, testProp) => (v) => {
+    return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+        (testProp && Object.prototype.hasOwnProperty.call(v, testProp)));
+};
+const splitColor = (aName, bName, cName) => (v) => {
+    if (!isString(v))
+        return v;
+    const [a, b, c, alpha] = v.match(floatRegex);
+    return {
+        [aName]: parseFloat(a),
+        [bName]: parseFloat(b),
+        [cName]: parseFloat(c),
+        alpha: alpha !== undefined ? parseFloat(alpha) : 1,
+    };
+};
+
+export { isColorString, splitColor };

package/node_modules/framer-motion/dist/es/value/types/complex/filter.mjs

@@ -0,0 +1,30 @@
+import { complex } from './index.mjs';
+import { floatRegex } from '../utils.mjs';
+
+/**
+ * Properties that should default to 1 or 100%
+ */
+const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
+function applyDefaultFilter(v) {
+    const [name, value] = v.slice(0, -1).split("(");
+    if (name === "drop-shadow")
+        return v;
+    const [number] = value.match(floatRegex) || [];
+    if (!number)
+        return v;
+    const unit = value.replace(number, "");
+    let defaultValue = maxDefaults.has(name) ? 1 : 0;
+    if (number !== value)
+        defaultValue *= 100;
+    return name + "(" + defaultValue + unit + ")";
+}
+const functionRegex = /\b([a-z-]*)\(.*?\)/gu;
+const filter = {
+    ...complex,
+    getAnimatableNone: (v) => {
+        const functions = v.match(functionRegex);
+        return functions ? functions.map(applyDefaultFilter).join(" ") : v;
+    },
+};
+
+export { filter };

package/node_modules/framer-motion/dist/es/value/types/complex/index.mjs

@@ -0,0 +1,90 @@
+import { color } from '../color/index.mjs';
+import { isString, floatRegex, colorRegex, sanitize } from '../utils.mjs';
+
+function test(v) {
+    var _a, _b;
+    return (isNaN(v) &&
+        isString(v) &&
+        (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
+            (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
+            0);
+}
+const NUMBER_TOKEN = "number";
+const COLOR_TOKEN = "color";
+const VAR_TOKEN = "var";
+const VAR_FUNCTION_TOKEN = "var(";
+const SPLIT_TOKEN = "${}";
+// this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`
+const complexRegex = /var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
+function analyseComplexValue(value) {
+    const originalValue = value.toString();
+    const values = [];
+    const indexes = {
+        color: [],
+        number: [],
+        var: [],
+    };
+    const types = [];
+    let i = 0;
+    const tokenised = originalValue.replace(complexRegex, (parsedValue) => {
+        if (color.test(parsedValue)) {
+            indexes.color.push(i);
+            types.push(COLOR_TOKEN);
+            values.push(color.parse(parsedValue));
+        }
+        else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {
+            indexes.var.push(i);
+            types.push(VAR_TOKEN);
+            values.push(parsedValue);
+        }
+        else {
+            indexes.number.push(i);
+            types.push(NUMBER_TOKEN);
+            values.push(parseFloat(parsedValue));
+        }
+        ++i;
+        return SPLIT_TOKEN;
+    });
+    const split = tokenised.split(SPLIT_TOKEN);
+    return { values, split, indexes, types };
+}
+function parseComplexValue(v) {
+    return analyseComplexValue(v).values;
+}
+function createTransformer(source) {
+    const { split, types } = analyseComplexValue(source);
+    const numSections = split.length;
+    return (v) => {
+        let output = "";
+        for (let i = 0; i < numSections; i++) {
+            output += split[i];
+            if (v[i] !== undefined) {
+                const type = types[i];
+                if (type === NUMBER_TOKEN) {
+                    output += sanitize(v[i]);
+                }
+                else if (type === COLOR_TOKEN) {
+                    output += color.transform(v[i]);
+                }
+                else {
+                    output += v[i];
+                }
+            }
+        }
+        return output;
+    };
+}
+const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+function getAnimatableNone(v) {
+    const parsed = parseComplexValue(v);
+    const transformer = createTransformer(v);
+    return transformer(parsed.map(convertNumbersToZero));
+}
+const complex = {
+    test,
+    parse: parseComplexValue,
+    createTransformer,
+    getAnimatableNone,
+};
+
+export { analyseComplexValue, complex };

package/node_modules/framer-motion/dist/es/value/types/numbers/index.mjs

@@ -0,0 +1,17 @@
+import { clamp } from '../../../utils/clamp.mjs';
+
+const number = {
+    test: (v) => typeof v === "number",
+    parse: parseFloat,
+    transform: (v) => v,
+};
+const alpha = {
+    ...number,
+    transform: (v) => clamp(0, 1, v),
+};
+const scale = {
+    ...number,
+    default: 1,
+};
+
+export { alpha, number, scale };

package/node_modules/framer-motion/dist/es/value/types/numbers/units.mjs

@@ -0,0 +1,19 @@
+import { isString } from '../utils.mjs';
+
+const createUnitType = (unit) => ({
+    test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
+    parse: parseFloat,
+    transform: (v) => `${v}${unit}`,
+});
+const degrees = createUnitType("deg");
+const percent = createUnitType("%");
+const px = createUnitType("px");
+const vh = createUnitType("vh");
+const vw = createUnitType("vw");
+const progressPercentage = {
+    ...percent,
+    parse: (v) => percent.parse(v) / 100,
+    transform: (v) => percent.transform(v * 100),
+};
+
+export { degrees, percent, progressPercentage, px, vh, vw };

package/node_modules/framer-motion/dist/es/value/types/utils.mjs

@@ -0,0 +1,15 @@
+/**
+ * TODO: When we move from string as a source of truth to data models
+ * everything in this folder should probably be referred to as models vs types
+ */
+// If this number is a decimal, make it just five decimal places
+// to avoid exponents
+const sanitize = (v) => Math.round(v * 100000) / 100000;
+const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
+const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
+const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
+function isString(v) {
+    return typeof v === "string";
+}
+
+export { colorRegex, floatRegex, isString, sanitize, singleColorRegex };

package/node_modules/framer-motion/dist/es/value/use-combine-values.mjs

@@ -0,0 +1,37 @@
+import { useMotionValue } from './use-motion-value.mjs';
+import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
+import { cancelFrame, frame } from '../frameloop/frame.mjs';
+
+function useCombineMotionValues(values, combineValues) {
+    /**
+     * Initialise the returned motion value. This remains the same between renders.
+     */
+    const value = useMotionValue(combineValues());
+    /**
+     * Create a function that will update the template motion value with the latest values.
+     * This is pre-bound so whenever a motion value updates it can schedule its
+     * execution in Framesync. If it's already been scheduled it won't be fired twice
+     * in a single frame.
+     */
+    const updateValue = () => value.set(combineValues());
+    /**
+     * Synchronously update the motion value with the latest values during the render.
+     * This ensures that within a React render, the styles applied to the DOM are up-to-date.
+     */
+    updateValue();
+    /**
+     * Subscribe to all motion values found within the template. Whenever any of them change,
+     * schedule an update.
+     */
+    useIsomorphicLayoutEffect(() => {
+        const scheduleUpdate = () => frame.preRender(updateValue, false, true);
+        const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
+        return () => {
+            subscriptions.forEach((unsubscribe) => unsubscribe());
+            cancelFrame(updateValue);
+        };
+    });
+    return value;
+}
+
+export { useCombineMotionValues };

package/node_modules/framer-motion/dist/es/value/use-computed.mjs

@@ -0,0 +1,19 @@
+import { collectMotionValues } from './index.mjs';
+import { useCombineMotionValues } from './use-combine-values.mjs';
+
+function useComputed(compute) {
+    /**
+     * Open session of collectMotionValues. Any MotionValue that calls get()
+     * will be saved into this array.
+     */
+    collectMotionValues.current = [];
+    compute();
+    const value = useCombineMotionValues(collectMotionValues.current, compute);
+    /**
+     * Synchronously close session of collectMotionValues.
+     */
+    collectMotionValues.current = undefined;
+    return value;
+}
+
+export { useComputed };

package/node_modules/framer-motion/dist/es/value/use-inverted-scale.mjs

@@ -0,0 +1,52 @@
+import { useTransform } from './use-transform.mjs';
+import { invariant, warning } from '../utils/errors.mjs';
+import { useMotionValue } from './use-motion-value.mjs';
+import { MotionContext } from '../context/MotionContext/index.mjs';
+import { useContext } from 'react';
+
+// Keep things reasonable and avoid scale: Infinity. In practise we might need
+// to add another value, opacity, that could interpolate scaleX/Y [0,0.01] => [0,1]
+// to simply hide content at unreasonable scales.
+const maxScale = 100000;
+const invertScale = (scale) => scale > 0.001 ? 1 / scale : maxScale;
+let hasWarned = false;
+/**
+ * Returns a `MotionValue` each for `scaleX` and `scaleY` that update with the inverse
+ * of their respective parent scales.
+ *
+ * This is useful for undoing the distortion of content when scaling a parent component.
+ *
+ * By default, `useInvertedScale` will automatically fetch `scaleX` and `scaleY` from the nearest parent.
+ * By passing other `MotionValue`s in as `useInvertedScale({ scaleX, scaleY })`, it will invert the output
+ * of those instead.
+ *
+ * ```jsx
+ * const MyComponent = () => {
+ *   const { scaleX, scaleY } = useInvertedScale()
+ *   return <motion.div style={{ scaleX, scaleY }} />
+ * }
+ * ```
+ *
+ * @deprecated
+ */
+function useInvertedScale(scale) {
+    let parentScaleX = useMotionValue(1);
+    let parentScaleY = useMotionValue(1);
+    const { visualElement } = useContext(MotionContext);
+    invariant(!!(scale || visualElement), "If no scale values are provided, useInvertedScale must be used within a child of another motion component.");
+    warning(hasWarned, "useInvertedScale is deprecated and will be removed in 3.0. Use the layout prop instead.");
+    hasWarned = true;
+    if (scale) {
+        parentScaleX = scale.scaleX || parentScaleX;
+        parentScaleY = scale.scaleY || parentScaleY;
+    }
+    else if (visualElement) {
+        parentScaleX = visualElement.getValue("scaleX", 1);
+        parentScaleY = visualElement.getValue("scaleY", 1);
+    }
+    const scaleX = useTransform(parentScaleX, invertScale);
+    const scaleY = useTransform(parentScaleY, invertScale);
+    return { scaleX, scaleY };
+}
+
+export { invertScale, useInvertedScale };

package/node_modules/framer-motion/dist/es/value/use-motion-template.mjs

@@ -0,0 +1,45 @@
+import { useCombineMotionValues } from './use-combine-values.mjs';
+import { isMotionValue } from './utils/is-motion-value.mjs';
+
+/**
+ * Combine multiple motion values into a new one using a string template literal.
+ *
+ * ```jsx
+ * import {
+ *   motion,
+ *   useSpring,
+ *   useMotionValue,
+ *   useMotionTemplate
+ * } from "framer-motion"
+ *
+ * function Component() {
+ *   const shadowX = useSpring(0)
+ *   const shadowY = useMotionValue(0)
+ *   const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
+ *
+ *   return <motion.div style={{ filter: shadow }} />
+ * }
+ * ```
+ *
+ * @public
+ */
+function useMotionTemplate(fragments, ...values) {
+    /**
+     * Create a function that will build a string from the latest motion values.
+     */
+    const numFragments = fragments.length;
+    function buildValue() {
+        let output = ``;
+        for (let i = 0; i < numFragments; i++) {
+            output += fragments[i];
+            const value = values[i];
+            if (value) {
+                output += isMotionValue(value) ? value.get() : value;
+            }
+        }
+        return output;
+    }
+    return useCombineMotionValues(values.filter(isMotionValue), buildValue);
+}
+
+export { useMotionTemplate };

package/node_modules/framer-motion/dist/es/value/use-motion-value.mjs

@@ -0,0 +1,38 @@
+import { useContext, useState, useEffect } from 'react';
+import { motionValue } from './index.mjs';
+import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
+import { useConstant } from '../utils/use-constant.mjs';
+
+/**
+ * Creates a `MotionValue` to track the state and velocity of a value.
+ *
+ * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const scale = useMotionValue(1)
+ *
+ *   return <motion.div style={{ scale }} />
+ * }
+ * ```
+ *
+ * @param initial - The initial state.
+ *
+ * @public
+ */
+function useMotionValue(initial) {
+    const value = useConstant(() => motionValue(initial));
+    /**
+     * If this motion value is being used in static mode, like on
+     * the Framer canvas, force components to rerender when the motion
+     * value is updated.
+     */
+    const { isStatic } = useContext(MotionConfigContext);
+    if (isStatic) {
+        const [, setLatest] = useState(initial);
+        useEffect(() => value.on("change", setLatest), []);
+    }
+    return value;
+}
+
+export { useMotionValue };

package/node_modules/framer-motion/dist/es/value/use-scroll.mjs

@@ -0,0 +1,39 @@
+import { motionValue } from './index.mjs';
+import { useConstant } from '../utils/use-constant.mjs';
+import { useEffect } from 'react';
+import { warning } from '../utils/errors.mjs';
+import { scrollInfo } from '../render/dom/scroll/track.mjs';
+import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
+
+function refWarning(name, ref) {
+    warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \`layoutEffect: false\` option.`);
+}
+const createScrollMotionValues = () => ({
+    scrollX: motionValue(0),
+    scrollY: motionValue(0),
+    scrollXProgress: motionValue(0),
+    scrollYProgress: motionValue(0),
+});
+function useScroll({ container, target, layoutEffect = true, ...options } = {}) {
+    const values = useConstant(createScrollMotionValues);
+    const useLifecycleEffect = layoutEffect
+        ? useIsomorphicLayoutEffect
+        : useEffect;
+    useLifecycleEffect(() => {
+        refWarning("target", target);
+        refWarning("container", container);
+        return scrollInfo(({ x, y }) => {
+            values.scrollX.set(x.current);
+            values.scrollXProgress.set(x.progress);
+            values.scrollY.set(y.current);
+            values.scrollYProgress.set(y.progress);
+        }, {
+            ...options,
+            container: (container === null || container === void 0 ? void 0 : container.current) || undefined,
+            target: (target === null || target === void 0 ? void 0 : target.current) || undefined,
+        });
+    }, [container, target, JSON.stringify(options.offset)]);
+    return values;
+}
+
+export { useScroll };

package/node_modules/framer-motion/dist/es/value/use-spring.mjs

@@ -0,0 +1,73 @@
+import { useContext, useRef, useInsertionEffect } from 'react';
+import { isMotionValue } from './utils/is-motion-value.mjs';
+import { useMotionValue } from './use-motion-value.mjs';
+import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
+import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
+import { animateValue } from '../animation/animators/MainThreadAnimation.mjs';
+import { frameData } from '../frameloop/frame.mjs';
+
+/**
+ * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
+ *
+ * It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriber
+ * to another `MotionValue`.
+ *
+ * @remarks
+ *
+ * ```jsx
+ * const x = useSpring(0, { stiffness: 300 })
+ * const y = useSpring(x, { damping: 10 })
+ * ```
+ *
+ * @param inputValue - `MotionValue` or number. If provided a `MotionValue`, when the input `MotionValue` changes, the created `MotionValue` will spring towards that value.
+ * @param springConfig - Configuration options for the spring.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+function useSpring(source, config = {}) {
+    const { isStatic } = useContext(MotionConfigContext);
+    const activeSpringAnimation = useRef(null);
+    const value = useMotionValue(isMotionValue(source) ? source.get() : source);
+    const stopAnimation = () => {
+        if (activeSpringAnimation.current) {
+            activeSpringAnimation.current.stop();
+        }
+    };
+    useInsertionEffect(() => {
+        return value.attach((v, set) => {
+            /**
+             * A more hollistic approach to this might be to use isStatic to fix VisualElement animations
+             * at that level, but this will work for now
+             */
+            if (isStatic)
+                return set(v);
+            /**
+             * If the previous animation hasn't had the chance to even render a frame, render it now.
+             */
+            const animation = activeSpringAnimation.current;
+            if (animation && animation.time === 0) {
+                animation.sample(frameData.delta);
+            }
+            stopAnimation();
+            activeSpringAnimation.current = animateValue({
+                keyframes: [value.get(), v],
+                velocity: value.getVelocity(),
+                type: "spring",
+                restDelta: 0.001,
+                restSpeed: 0.01,
+                ...config,
+                onUpdate: set,
+            });
+            return value.get();
+        }, stopAnimation);
+    }, [JSON.stringify(config)]);
+    useIsomorphicLayoutEffect(() => {
+        if (isMotionValue(source)) {
+            return source.on("change", (v) => value.set(parseFloat(v)));
+        }
+    }, [value]);
+    return value;
+}
+
+export { useSpring };

package/node_modules/framer-motion/dist/es/value/use-time.mjs

@@ -0,0 +1,10 @@
+import { useAnimationFrame } from '../utils/use-animation-frame.mjs';
+import { useMotionValue } from './use-motion-value.mjs';
+
+function useTime() {
+    const time = useMotionValue(0);
+    useAnimationFrame((t) => time.set(t));
+    return time;
+}
+
+export { useTime };

package/node_modules/framer-motion/dist/es/value/use-transform.mjs

@@ -0,0 +1,29 @@
+import { transform } from '../utils/transform.mjs';
+import { useCombineMotionValues } from './use-combine-values.mjs';
+import { useConstant } from '../utils/use-constant.mjs';
+import { useComputed } from './use-computed.mjs';
+
+function useTransform(input, inputRangeOrTransformer, outputRange, options) {
+    if (typeof input === "function") {
+        return useComputed(input);
+    }
+    const transformer = typeof inputRangeOrTransformer === "function"
+        ? inputRangeOrTransformer
+        : transform(inputRangeOrTransformer, outputRange, options);
+    return Array.isArray(input)
+        ? useListTransform(input, transformer)
+        : useListTransform([input], ([latest]) => transformer(latest));
+}
+function useListTransform(values, transformer) {
+    const latest = useConstant(() => []);
+    return useCombineMotionValues(values, () => {
+        latest.length = 0;
+        const numValues = values.length;
+        for (let i = 0; i < numValues; i++) {
+            latest[i] = values[i].get();
+        }
+        return transformer(latest);
+    });
+}
+
+export { useTransform };