@epic-web/workshop-app 4.0.0

package/node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs

@@ -0,0 +1,40 @@
+import { transformProps } from '../../render/html/utils/transform.mjs';
+
+const underDampedSpring = {
+    type: "spring",
+    stiffness: 500,
+    damping: 25,
+    restSpeed: 10,
+};
+const criticallyDampedSpring = (target) => ({
+    type: "spring",
+    stiffness: 550,
+    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
+    restSpeed: 10,
+});
+const keyframesTransition = {
+    type: "keyframes",
+    duration: 0.8,
+};
+/**
+ * Default easing curve is a slightly shallower version of
+ * the default browser easing curve.
+ */
+const ease = {
+    type: "keyframes",
+    ease: [0.25, 0.1, 0.35, 1],
+    duration: 0.3,
+};
+const getDefaultTransition = (valueKey, { keyframes }) => {
+    if (keyframes.length > 2) {
+        return keyframesTransition;
+    }
+    else if (transformProps.has(valueKey)) {
+        return valueKey.startsWith("scale")
+            ? criticallyDampedSpring(keyframes[1])
+            : underDampedSpring;
+    }
+    return ease;
+};
+
+export { getDefaultTransition };

package/node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs

@@ -0,0 +1,30 @@
+import { complex } from '../../value/types/complex/index.mjs';
+
+/**
+ * Check if a value is animatable. Examples:
+ *
+ * ✅: 100, "100px", "#fff"
+ * ❌: "block", "url(2.jpg)"
+ * @param value
+ *
+ * @internal
+ */
+const isAnimatable = (value, name) => {
+    // If the list of keys tat might be non-animatable grows, replace with Set
+    if (name === "zIndex")
+        return false;
+    // If it's a number or a keyframes array, we can animate it. We might at some point
+    // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
+    // but for now lets leave it like this for performance reasons
+    if (typeof value === "number" || Array.isArray(value))
+        return true;
+    if (typeof value === "string" && // It's animatable if we have a string
+        (complex.test(value) || value === "0") && // And it contains numbers and/or colors
+        !value.startsWith("url(") // Unless it starts with "url("
+    ) {
+        return true;
+    }
+    return false;
+};
+
+export { isAnimatable };

package/node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs

@@ -0,0 +1,7 @@
+function isAnimationControls(v) {
+    return (v !== null &&
+        typeof v === "object" &&
+        typeof v.start === "function");
+}
+
+export { isAnimationControls };

package/node_modules/framer-motion/dist/es/animation/utils/is-dom-keyframes.mjs

@@ -0,0 +1,5 @@
+function isDOMKeyframes(keyframes) {
+    return typeof keyframes === "object" && !Array.isArray(keyframes);
+}
+
+export { isDOMKeyframes };

package/node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs

@@ -0,0 +1,5 @@
+const isKeyframesTarget = (v) => {
+    return Array.isArray(v);
+};
+
+export { isKeyframesTarget };

package/node_modules/framer-motion/dist/es/animation/utils/is-none.mjs

@@ -0,0 +1,15 @@
+import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';
+
+function isNone(value) {
+    if (typeof value === "number") {
+        return value === 0;
+    }
+    else if (value !== null) {
+        return value === "none" || value === "0" || isZeroValueString(value);
+    }
+    else {
+        return true;
+    }
+}
+
+export { isNone };

package/node_modules/framer-motion/dist/es/animation/utils/stagger.mjs

@@ -0,0 +1,26 @@
+import { easingDefinitionToFunction } from '../../easing/utils/map.mjs';
+
+function getOriginIndex(from, total) {
+    if (from === "first") {
+        return 0;
+    }
+    else {
+        const lastIndex = total - 1;
+        return from === "last" ? lastIndex : lastIndex / 2;
+    }
+}
+function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
+    return (i, total) => {
+        const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
+        const distance = Math.abs(fromIndex - i);
+        let delay = duration * distance;
+        if (ease) {
+            const maxDelay = total * duration;
+            const easingFunction = easingDefinitionToFunction(ease);
+            delay = easingFunction(delay / maxDelay) * maxDelay;
+        }
+        return startDelay + delay;
+    };
+}
+
+export { getOriginIndex, stagger };

package/node_modules/framer-motion/dist/es/animation/utils/transitions.mjs

@@ -0,0 +1,13 @@
+/**
+ * Decide whether a transition is defined on a given Transition.
+ * This filters out orchestration options and returns true
+ * if any options are left.
+ */
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
+    return !!Object.keys(transition).length;
+}
+function getValueTransition(transition, key) {
+    return transition[key] || transition["default"] || transition;
+}
+
+export { getValueTransition, isTransitionDefined };

package/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useId, useRef, useContext, useInsertionEffect } from 'react';
+import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
+
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+class PopChildMeasure extends React.Component {
+    getSnapshotBeforeUpdate(prevProps) {
+        const element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            const size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = element.offsetTop;
+            size.left = element.offsetLeft;
+        }
+        return null;
+    }
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    componentDidUpdate() { }
+    render() {
+        return this.props.children;
+    }
+}
+function PopChild({ children, isPresent }) {
+    const id = useId();
+    const ref = useRef(null);
+    const size = useRef({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+    });
+    const { nonce } = useContext(MotionConfigContext);
+    /**
+     * We create and inject a style block so we can apply this explicit
+     * sizing in a non-destructive manner by just deleting the style block.
+     *
+     * We can't apply size via render as the measurement happens
+     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+     * styles directly on the DOM node, we might be overwriting
+     * styles set via the style prop.
+     */
+    useInsertionEffect(() => {
+        const { width, height, top, left } = size.current;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        ref.current.dataset.motionPopId = id;
+        const style = document.createElement("style");
+        if (nonce)
+            style.nonce = nonce;
+        document.head.appendChild(style);
+        if (style.sheet) {
+            style.sheet.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            top: ${top}px !important;
+            left: ${left}px !important;
+          }
+        `);
+        }
+        return () => {
+            document.head.removeChild(style);
+        };
+    }, [isPresent]);
+    return (React.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React.cloneElement(children, { ref })));
+}
+
+export { PopChild };

package/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useId, useMemo } from 'react';
+import { PresenceContext } from '../../context/PresenceContext.mjs';
+import { useConstant } from '../../utils/use-constant.mjs';
+import { PopChild } from './PopChild.mjs';
+
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
+    const presenceChildren = useConstant(newChildrenMap);
+    const id = useId();
+    const context = useMemo(() => ({
+        id,
+        initial,
+        isPresent,
+        custom,
+        onExitComplete: (childId) => {
+            presenceChildren.set(childId, true);
+            for (const isComplete of presenceChildren.values()) {
+                if (!isComplete)
+                    return; // can stop searching when any is incomplete
+            }
+            onExitComplete && onExitComplete();
+        },
+        register: (childId) => {
+            presenceChildren.set(childId, false);
+            return () => presenceChildren.delete(childId);
+        },
+    }), 
+    /**
+     * If the presence of a child affects the layout of the components around it,
+     * we want to make a new context value to ensure they get re-rendered
+     * so they can detect that layout change.
+     */
+    presenceAffectsLayout ? undefined : [isPresent]);
+    useMemo(() => {
+        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+    }, [isPresent]);
+    /**
+     * If there's no `motion` components to fire exit animations, we want to remove this
+     * component immediately.
+     */
+    React.useEffect(() => {
+        !isPresent &&
+            !presenceChildren.size &&
+            onExitComplete &&
+            onExitComplete();
+    }, [isPresent]);
+    if (mode === "popLayout") {
+        children = React.createElement(PopChild, { isPresent: isPresent }, children);
+    }
+    return (React.createElement(PresenceContext.Provider, { value: context }, children));
+};
+function newChildrenMap() {
+    return new Map();
+}
+
+export { PresenceChild };

package/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
+import { useForceUpdate } from '../../utils/use-force-update.mjs';
+import { useIsMounted } from '../../utils/use-is-mounted.mjs';
+import { PresenceChild } from './PresenceChild.mjs';
+import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
+import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
+import { invariant } from '../../utils/errors.mjs';
+
+const getChildKey = (child) => child.key || "";
+function updateChildLookup(children, allChildren) {
+    children.forEach((child) => {
+        const key = getChildKey(child);
+        allChildren.set(key, child);
+    });
+}
+function onlyElements(children) {
+    const filtered = [];
+    // We use forEach here instead of map as map mutates the component key by preprending `.$`
+    Children.forEach(children, (child) => {
+        if (isValidElement(child))
+            filtered.push(child);
+    });
+    return filtered;
+}
+/**
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
+ *
+ * When adding/removing more than a single child, every child **must** be given a unique `key` prop.
+ *
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
+ *
+ * ```jsx
+ * import { motion, AnimatePresence } from 'framer-motion'
+ *
+ * export const Items = ({ items }) => (
+ *   <AnimatePresence>
+ *     {items.map(item => (
+ *       <motion.div
+ *         key={item.id}
+ *         initial={{ opacity: 0 }}
+ *         animate={{ opacity: 1 }}
+ *         exit={{ opacity: 0 }}
+ *       />
+ *     ))}
+ *   </AnimatePresence>
+ * )
+ * ```
+ *
+ * You can sequence exit animations throughout a tree using variants.
+ *
+ * If a child contains multiple `motion` components with `exit` props, it will only unmount the child
+ * once all `motion` components have finished animating out. Likewise, any components using
+ * `usePresence` all need to call `safeToRemove`.
+ *
+ * @public
+ */
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
+    invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'");
+    // We want to force a re-render once all exiting animations have finished. We
+    // either use a local forceRender function, or one from a parent context if it exists.
+    const forceRender = useContext(LayoutGroupContext).forceRender || useForceUpdate()[0];
+    const isMounted = useIsMounted();
+    // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
+    const filteredChildren = onlyElements(children);
+    let childrenToRender = filteredChildren;
+    const exitingChildren = useRef(new Map()).current;
+    // Keep a living record of the children we're actually rendering so we
+    // can diff to figure out which are entering and exiting
+    const presentChildren = useRef(childrenToRender);
+    // A lookup table to quickly reference components by key
+    const allChildren = useRef(new Map()).current;
+    // If this is the initial component render, just deal with logic surrounding whether
+    // we play onMount animations or not.
+    const isInitialRender = useRef(true);
+    useIsomorphicLayoutEffect(() => {
+        isInitialRender.current = false;
+        updateChildLookup(filteredChildren, allChildren);
+        presentChildren.current = childrenToRender;
+    });
+    useUnmountEffect(() => {
+        isInitialRender.current = true;
+        allChildren.clear();
+        exitingChildren.clear();
+    });
+    if (isInitialRender.current) {
+        return (React.createElement(React.Fragment, null, childrenToRender.map((child) => (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)))));
+    }
+    // If this is a subsequent render, deal with entering and exiting children
+    childrenToRender = [...childrenToRender];
+    // Diff the keys of the currently-present and target children to update our
+    // exiting list.
+    const presentKeys = presentChildren.current.map(getChildKey);
+    const targetKeys = filteredChildren.map(getChildKey);
+    // Diff the present children with our target children and mark those that are exiting
+    const numPresent = presentKeys.length;
+    for (let i = 0; i < numPresent; i++) {
+        const key = presentKeys[i];
+        if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
+            exitingChildren.set(key, undefined);
+        }
+    }
+    // If we currently have exiting children, and we're deferring rendering incoming children
+    // until after all current children have exiting, empty the childrenToRender array
+    if (mode === "wait" && exitingChildren.size) {
+        childrenToRender = [];
+    }
+    // Loop through all currently exiting components and clone them to overwrite `animate`
+    // with any `exit` prop they might have defined.
+    exitingChildren.forEach((component, key) => {
+        // If this component is actually entering again, early return
+        if (targetKeys.indexOf(key) !== -1)
+            return;
+        const child = allChildren.get(key);
+        if (!child)
+            return;
+        const insertionIndex = presentKeys.indexOf(key);
+        let exitingComponent = component;
+        if (!exitingComponent) {
+            const onExit = () => {
+                // clean up the exiting children map
+                exitingChildren.delete(key);
+                // compute the keys of children that were rendered once but are no longer present
+                // this could happen in case of too many fast consequent renderings
+                // @link https://github.com/framer/motion/issues/2023
+                const leftOverKeys = Array.from(allChildren.keys()).filter((childKey) => !targetKeys.includes(childKey));
+                // clean up the all children map
+                leftOverKeys.forEach((leftOverKey) => allChildren.delete(leftOverKey));
+                // make sure to render only the children that are actually visible
+                presentChildren.current = filteredChildren.filter((presentChild) => {
+                    const presentChildKey = getChildKey(presentChild);
+                    return (
+                    // filter out the node exiting
+                    presentChildKey === key ||
+                        // filter out the leftover children
+                        leftOverKeys.includes(presentChildKey));
+                });
+                // Defer re-rendering until all exiting children have indeed left
+                if (!exitingChildren.size) {
+                    if (isMounted.current === false)
+                        return;
+                    forceRender();
+                    onExitComplete && onExitComplete();
+                }
+            };
+            exitingComponent = (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+            exitingChildren.set(key, exitingComponent);
+        }
+        childrenToRender.splice(insertionIndex, 0, exitingComponent);
+    });
+    // Add `MotionContext` even to children that don't need it to ensure we're rendering
+    // the same tree between renders
+    childrenToRender = childrenToRender.map((child) => {
+        const key = child.key;
+        return exitingChildren.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+    });
+    if (process.env.NODE_ENV !== "production" &&
+        mode === "wait" &&
+        childrenToRender.length > 1) {
+        console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+    }
+    return (React.createElement(React.Fragment, null, exitingChildren.size
+        ? childrenToRender
+        : childrenToRender.map((child) => cloneElement(child))));
+};
+
+export { AnimatePresence };

package/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs

@@ -0,0 +1,66 @@
+import { useContext, useId, useEffect } from 'react';
+import { PresenceContext } from '../../context/PresenceContext.mjs';
+
+/**
+ * When a component is the child of `AnimatePresence`, it can use `usePresence`
+ * to access information about whether it's still present in the React tree.
+ *
+ * ```jsx
+ * import { usePresence } from "framer-motion"
+ *
+ * export const Component = () => {
+ *   const [isPresent, safeToRemove] = usePresence()
+ *
+ *   useEffect(() => {
+ *     !isPresent && setTimeout(safeToRemove, 1000)
+ *   }, [isPresent])
+ *
+ *   return <div />
+ * }
+ * ```
+ *
+ * If `isPresent` is `false`, it means that a component has been removed the tree, but
+ * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
+ *
+ * @public
+ */
+function usePresence() {
+    const context = useContext(PresenceContext);
+    if (context === null)
+        return [true, null];
+    const { isPresent, onExitComplete, register } = context;
+    // It's safe to call the following hooks conditionally (after an early return) because the context will always
+    // either be null or non-null for the lifespan of the component.
+    const id = useId();
+    useEffect(() => register(id), []);
+    const safeToRemove = () => onExitComplete && onExitComplete(id);
+    return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
+}
+/**
+ * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
+ * There is no `safeToRemove` function.
+ *
+ * ```jsx
+ * import { useIsPresent } from "framer-motion"
+ *
+ * export const Component = () => {
+ *   const isPresent = useIsPresent()
+ *
+ *   useEffect(() => {
+ *     !isPresent && console.log("I've been removed!")
+ *   }, [isPresent])
+ *
+ *   return <div />
+ * }
+ * ```
+ *
+ * @public
+ */
+function useIsPresent() {
+    return isPresent(useContext(PresenceContext));
+}
+function isPresent(context) {
+    return context === null ? true : context.isPresent;
+}
+
+export { isPresent, useIsPresent, usePresence };

package/node_modules/framer-motion/dist/es/components/AnimateSharedLayout.mjs

@@ -0,0 +1,14 @@
+import { invariant } from '../utils/errors.mjs';
+import * as React from 'react';
+import { useConstant } from '../utils/use-constant.mjs';
+import { LayoutGroup } from './LayoutGroup/index.mjs';
+
+let id = 0;
+const AnimateSharedLayout = ({ children }) => {
+    React.useEffect(() => {
+        invariant(false, "AnimateSharedLayout is deprecated: https://www.framer.com/docs/guide-upgrade/##shared-layout-animations");
+    }, []);
+    return (React.createElement(LayoutGroup, { id: useConstant(() => `asl-${id++}`) }, children));
+};
+
+export { AnimateSharedLayout };

package/node_modules/framer-motion/dist/es/components/LayoutGroup/index.mjs

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useContext, useRef, useMemo } from 'react';
+import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
+import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGroupContext.mjs';
+import { useForceUpdate } from '../../utils/use-force-update.mjs';
+import { nodeGroup } from '../../projection/node/group.mjs';
+
+const shouldInheritGroup = (inherit) => inherit === true;
+const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
+const LayoutGroup = ({ children, id, inherit = true }) => {
+    const layoutGroupContext = useContext(LayoutGroupContext);
+    const deprecatedLayoutGroupContext = useContext(DeprecatedLayoutGroupContext);
+    const [forceRender, key] = useForceUpdate();
+    const context = useRef(null);
+    const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
+    if (context.current === null) {
+        if (shouldInheritId(inherit) && upstreamId) {
+            id = id ? upstreamId + "-" + id : upstreamId;
+        }
+        context.current = {
+            id,
+            group: shouldInheritGroup(inherit)
+                ? layoutGroupContext.group || nodeGroup()
+                : nodeGroup(),
+        };
+    }
+    const memoizedContext = useMemo(() => ({ ...context.current, forceRender }), [key]);
+    return (React.createElement(LayoutGroupContext.Provider, { value: memoizedContext }, children));
+};
+
+export { LayoutGroup };

package/node_modules/framer-motion/dist/es/components/LazyMotion/index.mjs

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { useState, useRef, useEffect } from 'react';
+import { LazyContext } from '../../context/LazyContext.mjs';
+import { loadFeatures } from '../../motion/features/load-features.mjs';
+
+/**
+ * Used in conjunction with the `m` component to reduce bundle size.
+ *
+ * `m` is a version of the `motion` component that only loads functionality
+ * critical for the initial render.
+ *
+ * `LazyMotion` can then be used to either synchronously or asynchronously
+ * load animation and gesture support.
+ *
+ * ```jsx
+ * // Synchronous loading
+ * import { LazyMotion, m, domAnimation } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={domAnimation}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ *
+ * // Asynchronous loading
+ * import { LazyMotion, m } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={() => import('./path/to/domAnimation')}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ * ```
+ *
+ * @public
+ */
+function LazyMotion({ children, features, strict = false }) {
+    const [, setIsLoaded] = useState(!isLazyBundle(features));
+    const loadedRenderer = useRef(undefined);
+    /**
+     * If this is a synchronous load, load features immediately
+     */
+    if (!isLazyBundle(features)) {
+        const { renderer, ...loadedFeatures } = features;
+        loadedRenderer.current = renderer;
+        loadFeatures(loadedFeatures);
+    }
+    useEffect(() => {
+        if (isLazyBundle(features)) {
+            features().then(({ renderer, ...loadedFeatures }) => {
+                loadFeatures(loadedFeatures);
+                loadedRenderer.current = renderer;
+                setIsLoaded(true);
+            });
+        }
+    }, []);
+    return (React.createElement(LazyContext.Provider, { value: { renderer: loadedRenderer.current, strict } }, children));
+}
+function isLazyBundle(features) {
+    return typeof features === "function";
+}
+
+export { LazyMotion };