@samline/notify 0.1.1 → 0.1.7

package/dist/notifications.umd.js

@@ -1,1133 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.notifications = {}));
-})(this, (function (exports) { 'use strict';
-
-    class SileoController {
-        constructor() {
-            this.toasts = [];
-            this.listeners = new Set();
-            this.idCounter = 1;
-        }
-        nextId() {
-            return `sileo_${Date.now()}_${this.idCounter++}`;
-        }
-        subscribe(fn) {
-            this.listeners.add(fn);
-            fn(this.toasts.slice());
-            return () => this.listeners.delete(fn);
-        }
-        notify() {
-            const snapshot = this.toasts.slice();
-            this.listeners.forEach((l) => l(snapshot));
-        }
-        getToasts() {
-            return this.toasts.slice();
-        }
-        show(opts) {
-            const id = this.nextId();
-            const item = { id, options: { ...opts }, createdAt: Date.now() };
-            this.toasts.push(item);
-            this.notify();
-            return id;
-        }
-        success(opts) {
-            return this.show({ ...opts, type: 'success' });
-        }
-        error(opts) {
-            return this.show({ ...opts, type: 'error' });
-        }
-        info(opts) {
-            return this.show({ ...opts, type: 'info' });
-        }
-        warning(opts) {
-            return this.show({ ...opts, type: 'warning' });
-        }
-        action(opts) {
-            return this.show({ ...opts, type: 'action' });
-        }
-        dismiss(id) {
-            const idx = this.toasts.findIndex((t) => t.id === id);
-            if (idx >= 0) {
-                this.toasts.splice(idx, 1);
-                this.notify();
-            }
-        }
-        clear(position) {
-            if (position) {
-                this.toasts = this.toasts.filter((t) => t.options.position !== position);
-            }
-            else {
-                this.toasts = [];
-            }
-            this.notify();
-        }
-        promise(p, opts) {
-            const loadingId = this.show({ ...(opts.loading || {}), type: 'loading', position: opts.position });
-            p.then((res) => {
-                this.dismiss(loadingId);
-                const successOpt = typeof opts.success === 'function' ? opts.success(res) : opts.success;
-                if (successOpt)
-                    this.show({ ...(successOpt || {}), type: 'success', position: opts.position });
-            }).catch((err) => {
-                this.dismiss(loadingId);
-                const errorOpt = typeof opts.error === 'function' ? opts.error(err) : opts.error;
-                if (errorOpt)
-                    this.show({ ...(errorOpt || {}), type: 'error', position: opts.position });
-            });
-            return p;
-        }
-    }
-    const sileo = new SileoController();
-
-    function addUniqueItem(array, item) {
-        array.indexOf(item) === -1 && array.push(item);
-    }
-
-    const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
-
-    const defaults = {
-        duration: 0.3,
-        delay: 0,
-        endDelay: 0,
-        repeat: 0,
-        easing: "ease",
-    };
-
-    const isNumber = (value) => typeof value === "number";
-
-    const isEasingList = (easing) => Array.isArray(easing) && !isNumber(easing[0]);
-
-    const wrap = (min, max, v) => {
-        const rangeSize = max - min;
-        return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-    };
-
-    function getEasingForSegment(easing, i) {
-        return isEasingList(easing) ? easing[wrap(0, easing.length, i)] : easing;
-    }
-
-    const mix = (min, max, progress) => -progress * min + progress * max + min;
-
-    const noop = () => { };
-    const noopReturn = (v) => v;
-
-    const progress = (min, max, value) => max - min === 0 ? 1 : (value - min) / (max - min);
-
-    function fillOffset(offset, remaining) {
-        const min = offset[offset.length - 1];
-        for (let i = 1; i <= remaining; i++) {
-            const offsetProgress = progress(0, remaining, i);
-            offset.push(mix(min, 1, offsetProgress));
-        }
-    }
-    function defaultOffset(length) {
-        const offset = [0];
-        fillOffset(offset, length - 1);
-        return offset;
-    }
-
-    function interpolate(output, input = defaultOffset(output.length), easing = noopReturn) {
-        const length = output.length;
-        /**
-         * If the input length is lower than the output we
-         * fill the input to match. This currently assumes the input
-         * is an animation progress value so is a good candidate for
-         * moving outside the function.
-         */
-        const remainder = length - input.length;
-        remainder > 0 && fillOffset(input, remainder);
-        return (t) => {
-            let i = 0;
-            for (; i < length - 2; i++) {
-                if (t < input[i + 1])
-                    break;
-            }
-            let progressInRange = clamp(0, 1, progress(input[i], input[i + 1], t));
-            const segmentEasing = getEasingForSegment(easing, i);
-            progressInRange = segmentEasing(progressInRange);
-            return mix(output[i], output[i + 1], progressInRange);
-        };
-    }
-
-    const isCubicBezier = (easing) => Array.isArray(easing) && isNumber(easing[0]);
-
-    const isEasingGenerator = (easing) => typeof easing === "object" &&
-        Boolean(easing.createAnimation);
-
-    const isFunction = (value) => typeof value === "function";
-
-    const isString = (value) => typeof value === "string";
-
-    const time = {
-        ms: (seconds) => seconds * 1000,
-        s: (milliseconds) => milliseconds / 1000,
-    };
-
-    /*
-      Bezier function generator
-
-      This has been modified from Gaëtan Renaudeau's BezierEasing
-      https://github.com/gre/bezier-easing/blob/master/src/index.js
-      https://github.com/gre/bezier-easing/blob/master/LICENSE
-      
-      I've removed the newtonRaphsonIterate algo because in benchmarking it
-      wasn't noticiably faster than binarySubdivision, indeed removing it
-      usually improved times, depending on the curve.
-
-      I also removed the lookup table, as for the added bundle size and loop we're
-      only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-      to 12 to compensate and this still tended to be faster for no perceivable
-      loss in accuracy.
-
-      Usage
-        const easeOut = cubicBezier(.17,.67,.83,.67);
-        const x = easeOut(0.5); // returns 0.627...
-    */
-    // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-    const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) * t;
-    const subdivisionPrecision = 0.0000001;
-    const subdivisionMaxIterations = 12;
-    function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-        let currentX;
-        let currentT;
-        let i = 0;
-        do {
-            currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-            currentX = calcBezier(currentT, mX1, mX2) - x;
-            if (currentX > 0.0) {
-                upperBound = currentT;
-            }
-            else {
-                lowerBound = currentT;
-            }
-        } while (Math.abs(currentX) > subdivisionPrecision &&
-            ++i < subdivisionMaxIterations);
-        return currentT;
-    }
-    function cubicBezier(mX1, mY1, mX2, mY2) {
-        // If this is a linear gradient, return linear easing
-        if (mX1 === mY1 && mX2 === mY2)
-            return noopReturn;
-        const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-        // If animation is at start/end, return t without easing
-        return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-    }
-
-    const steps = (steps, direction = "end") => (progress) => {
-        progress =
-            direction === "end"
-                ? Math.min(progress, 0.999)
-                : Math.max(progress, 0.001);
-        const expanded = progress * steps;
-        const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
-        return clamp(0, 1, rounded / steps);
-    };
-
-    const namedEasings = {
-        ease: cubicBezier(0.25, 0.1, 0.25, 1.0),
-        "ease-in": cubicBezier(0.42, 0.0, 1.0, 1.0),
-        "ease-in-out": cubicBezier(0.42, 0.0, 0.58, 1.0),
-        "ease-out": cubicBezier(0.0, 0.0, 0.58, 1.0),
-    };
-    const functionArgsRegex = /\((.*?)\)/;
-    function getEasingFunction(definition) {
-        // If already an easing function, return
-        if (isFunction(definition))
-            return definition;
-        // If an easing curve definition, return bezier function
-        if (isCubicBezier(definition))
-            return cubicBezier(...definition);
-        // If we have a predefined easing function, return
-        const namedEasing = namedEasings[definition];
-        if (namedEasing)
-            return namedEasing;
-        // If this is a steps function, attempt to create easing curve
-        if (definition.startsWith("steps")) {
-            const args = functionArgsRegex.exec(definition);
-            if (args) {
-                const argsArray = args[1].split(",");
-                return steps(parseFloat(argsArray[0]), argsArray[1].trim());
-            }
-        }
-        return noopReturn;
-    }
-
-    class Animation {
-        constructor(output, keyframes = [0, 1], { easing, duration: initialDuration = defaults.duration, delay = defaults.delay, endDelay = defaults.endDelay, repeat = defaults.repeat, offset, direction = "normal", autoplay = true, } = {}) {
-            this.startTime = null;
-            this.rate = 1;
-            this.t = 0;
-            this.cancelTimestamp = null;
-            this.easing = noopReturn;
-            this.duration = 0;
-            this.totalDuration = 0;
-            this.repeat = 0;
-            this.playState = "idle";
-            this.finished = new Promise((resolve, reject) => {
-                this.resolve = resolve;
-                this.reject = reject;
-            });
-            easing = easing || defaults.easing;
-            if (isEasingGenerator(easing)) {
-                const custom = easing.createAnimation(keyframes);
-                easing = custom.easing;
-                keyframes = custom.keyframes || keyframes;
-                initialDuration = custom.duration || initialDuration;
-            }
-            this.repeat = repeat;
-            this.easing = isEasingList(easing) ? noopReturn : getEasingFunction(easing);
-            this.updateDuration(initialDuration);
-            const interpolate$1 = interpolate(keyframes, offset, isEasingList(easing) ? easing.map(getEasingFunction) : noopReturn);
-            this.tick = (timestamp) => {
-                var _a;
-                // TODO: Temporary fix for OptionsResolver typing
-                delay = delay;
-                let t = 0;
-                if (this.pauseTime !== undefined) {
-                    t = this.pauseTime;
-                }
-                else {
-                    t = (timestamp - this.startTime) * this.rate;
-                }
-                this.t = t;
-                // Convert to seconds
-                t /= 1000;
-                // Rebase on delay
-                t = Math.max(t - delay, 0);
-                /**
-                 * If this animation has finished, set the current time
-                 * to the total duration.
-                 */
-                if (this.playState === "finished" && this.pauseTime === undefined) {
-                    t = this.totalDuration;
-                }
-                /**
-                 * Get the current progress (0-1) of the animation. If t is >
-                 * than duration we'll get values like 2.5 (midway through the
-                 * third iteration)
-                 */
-                const progress = t / this.duration;
-                // TODO progress += iterationStart
-                /**
-                 * Get the current iteration (0 indexed). For instance the floor of
-                 * 2.5 is 2.
-                 */
-                let currentIteration = Math.floor(progress);
-                /**
-                 * Get the current progress of the iteration by taking the remainder
-                 * so 2.5 is 0.5 through iteration 2
-                 */
-                let iterationProgress = progress % 1.0;
-                if (!iterationProgress && progress >= 1) {
-                    iterationProgress = 1;
-                }
-                /**
-                 * If iteration progress is 1 we count that as the end
-                 * of the previous iteration.
-                 */
-                iterationProgress === 1 && currentIteration--;
-                /**
-                 * Reverse progress if we're not running in "normal" direction
-                 */
-                const iterationIsOdd = currentIteration % 2;
-                if (direction === "reverse" ||
-                    (direction === "alternate" && iterationIsOdd) ||
-                    (direction === "alternate-reverse" && !iterationIsOdd)) {
-                    iterationProgress = 1 - iterationProgress;
-                }
-                const p = t >= this.totalDuration ? 1 : Math.min(iterationProgress, 1);
-                const latest = interpolate$1(this.easing(p));
-                output(latest);
-                const isAnimationFinished = this.pauseTime === undefined &&
-                    (this.playState === "finished" || t >= this.totalDuration + endDelay);
-                if (isAnimationFinished) {
-                    this.playState = "finished";
-                    (_a = this.resolve) === null || _a === void 0 ? void 0 : _a.call(this, latest);
-                }
-                else if (this.playState !== "idle") {
-                    this.frameRequestId = requestAnimationFrame(this.tick);
-                }
-            };
-            if (autoplay)
-                this.play();
-        }
-        play() {
-            const now = performance.now();
-            this.playState = "running";
-            if (this.pauseTime !== undefined) {
-                this.startTime = now - this.pauseTime;
-            }
-            else if (!this.startTime) {
-                this.startTime = now;
-            }
-            this.cancelTimestamp = this.startTime;
-            this.pauseTime = undefined;
-            this.frameRequestId = requestAnimationFrame(this.tick);
-        }
-        pause() {
-            this.playState = "paused";
-            this.pauseTime = this.t;
-        }
-        finish() {
-            this.playState = "finished";
-            this.tick(0);
-        }
-        stop() {
-            var _a;
-            this.playState = "idle";
-            if (this.frameRequestId !== undefined) {
-                cancelAnimationFrame(this.frameRequestId);
-            }
-            (_a = this.reject) === null || _a === void 0 ? void 0 : _a.call(this, false);
-        }
-        cancel() {
-            this.stop();
-            this.tick(this.cancelTimestamp);
-        }
-        reverse() {
-            this.rate *= -1;
-        }
-        commitStyles() { }
-        updateDuration(duration) {
-            this.duration = duration;
-            this.totalDuration = duration * (this.repeat + 1);
-        }
-        get currentTime() {
-            return this.t;
-        }
-        set currentTime(t) {
-            if (this.pauseTime !== undefined || this.rate === 0) {
-                this.pauseTime = t;
-            }
-            else {
-                this.startTime = performance.now() - t / this.rate;
-            }
-        }
-        get playbackRate() {
-            return this.rate;
-        }
-        set playbackRate(rate) {
-            this.rate = rate;
-        }
-    }
-
-    var invariant = function () { };
-    if (process.env.NODE_ENV !== 'production') {
-        invariant = function (check, message) {
-            if (!check) {
-                throw new Error(message);
-            }
-        };
-    }
-
-    /**
-     * The MotionValue tracks the state of a single animatable
-     * value. Currently, updatedAt and current are unused. The
-     * long term idea is to use this to minimise the number
-     * of DOM reads, and to abstract the DOM interactions here.
-     */
-    class MotionValue {
-        setAnimation(animation) {
-            this.animation = animation;
-            animation === null || animation === void 0 ? void 0 : animation.finished.then(() => this.clearAnimation()).catch(() => { });
-        }
-        clearAnimation() {
-            this.animation = this.generator = undefined;
-        }
-    }
-
-    const data = new WeakMap();
-    function getAnimationData(element) {
-        if (!data.has(element)) {
-            data.set(element, {
-                transforms: [],
-                values: new Map(),
-            });
-        }
-        return data.get(element);
-    }
-    function getMotionValue(motionValues, name) {
-        if (!motionValues.has(name)) {
-            motionValues.set(name, new MotionValue());
-        }
-        return motionValues.get(name);
-    }
-
-    /**
-     * A list of all transformable axes. We'll use this list to generated a version
-     * of each axes for each transform.
-     */
-    const axes = ["", "X", "Y", "Z"];
-    /**
-     * An ordered array of each transformable value. By default, transform values
-     * will be sorted to this order.
-     */
-    const order = ["translate", "scale", "rotate", "skew"];
-    const transformAlias = {
-        x: "translateX",
-        y: "translateY",
-        z: "translateZ",
-    };
-    const rotation = {
-        syntax: "<angle>",
-        initialValue: "0deg",
-        toDefaultUnit: (v) => v + "deg",
-    };
-    const baseTransformProperties = {
-        translate: {
-            syntax: "<length-percentage>",
-            initialValue: "0px",
-            toDefaultUnit: (v) => v + "px",
-        },
-        rotate: rotation,
-        scale: {
-            syntax: "<number>",
-            initialValue: 1,
-            toDefaultUnit: noopReturn,
-        },
-        skew: rotation,
-    };
-    const transformDefinitions = new Map();
-    const asTransformCssVar = (name) => `--motion-${name}`;
-    /**
-     * Generate a list of every possible transform key
-     */
-    const transforms = ["x", "y", "z"];
-    order.forEach((name) => {
-        axes.forEach((axis) => {
-            transforms.push(name + axis);
-            transformDefinitions.set(asTransformCssVar(name + axis), baseTransformProperties[name]);
-        });
-    });
-    /**
-     * A function to use with Array.sort to sort transform keys by their default order.
-     */
-    const compareTransformOrder = (a, b) => transforms.indexOf(a) - transforms.indexOf(b);
-    /**
-     * Provide a quick way to check if a string is the name of a transform
-     */
-    const transformLookup = new Set(transforms);
-    const isTransform = (name) => transformLookup.has(name);
-    const addTransformToElement = (element, name) => {
-        // Map x to translateX etc
-        if (transformAlias[name])
-            name = transformAlias[name];
-        const { transforms } = getAnimationData(element);
-        addUniqueItem(transforms, name);
-        /**
-         * TODO: An optimisation here could be to cache the transform in element data
-         * and only update if this has changed.
-         */
-        element.style.transform = buildTransformTemplate(transforms);
-    };
-    const buildTransformTemplate = (transforms) => transforms
-        .sort(compareTransformOrder)
-        .reduce(transformListToString, "")
-        .trim();
-    const transformListToString = (template, name) => `${template} ${name}(var(${asTransformCssVar(name)}))`;
-
-    const isCssVar = (name) => name.startsWith("--");
-    const registeredProperties = new Set();
-    function registerCssVariable(name) {
-        if (registeredProperties.has(name))
-            return;
-        registeredProperties.add(name);
-        try {
-            const { syntax, initialValue } = transformDefinitions.has(name)
-                ? transformDefinitions.get(name)
-                : {};
-            CSS.registerProperty({
-                name,
-                inherits: false,
-                syntax,
-                initialValue,
-            });
-        }
-        catch (e) { }
-    }
-
-    const testAnimation = (keyframes, options) => document.createElement("div").animate(keyframes, options);
-    const featureTests = {
-        cssRegisterProperty: () => typeof CSS !== "undefined" &&
-            Object.hasOwnProperty.call(CSS, "registerProperty"),
-        waapi: () => Object.hasOwnProperty.call(Element.prototype, "animate"),
-        partialKeyframes: () => {
-            try {
-                testAnimation({ opacity: [1] });
-            }
-            catch (e) {
-                return false;
-            }
-            return true;
-        },
-        finished: () => Boolean(testAnimation({ opacity: [0, 1] }, { duration: 0.001 }).finished),
-        linearEasing: () => {
-            try {
-                testAnimation({ opacity: 0 }, { easing: "linear(0, 1)" });
-            }
-            catch (e) {
-                return false;
-            }
-            return true;
-        },
-    };
-    const results = {};
-    const supports = {};
-    for (const key in featureTests) {
-        supports[key] = () => {
-            if (results[key] === undefined)
-                results[key] =
-                    featureTests[key]();
-            return results[key];
-        };
-    }
-
-    // Create a linear easing point for every x second
-    const resolution = 0.015;
-    const generateLinearEasingPoints = (easing, duration) => {
-        let points = "";
-        const numPoints = Math.round(duration / resolution);
-        for (let i = 0; i < numPoints; i++) {
-            points += easing(progress(0, numPoints - 1, i)) + ", ";
-        }
-        return points.substring(0, points.length - 2);
-    };
-    const convertEasing = (easing, duration) => {
-        if (isFunction(easing)) {
-            return supports.linearEasing()
-                ? `linear(${generateLinearEasingPoints(easing, duration)})`
-                : defaults.easing;
-        }
-        else {
-            return isCubicBezier(easing) ? cubicBezierAsString(easing) : easing;
-        }
-    };
-    const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
-
-    function hydrateKeyframes(keyframes, readInitialValue) {
-        for (let i = 0; i < keyframes.length; i++) {
-            if (keyframes[i] === null) {
-                keyframes[i] = i ? keyframes[i - 1] : readInitialValue();
-            }
-        }
-        return keyframes;
-    }
-    const keyframesList = (keyframes) => Array.isArray(keyframes) ? keyframes : [keyframes];
-
-    function getStyleName(key) {
-        if (transformAlias[key])
-            key = transformAlias[key];
-        return isTransform(key) ? asTransformCssVar(key) : key;
-    }
-
-    const style = {
-        get: (element, name) => {
-            name = getStyleName(name);
-            let value = isCssVar(name)
-                ? element.style.getPropertyValue(name)
-                : getComputedStyle(element)[name];
-            // TODO Decide if value can be 0
-            if (!value && value !== 0) {
-                const definition = transformDefinitions.get(name);
-                if (definition)
-                    value = definition.initialValue;
-            }
-            return value;
-        },
-        set: (element, name, value) => {
-            name = getStyleName(name);
-            if (isCssVar(name)) {
-                element.style.setProperty(name, value);
-            }
-            else {
-                element.style[name] = value;
-            }
-        },
-    };
-
-    function stopAnimation(animation, needsCommit = true) {
-        if (!animation || animation.playState === "finished")
-            return;
-        // Suppress error thrown by WAAPI
-        try {
-            if (animation.stop) {
-                animation.stop();
-            }
-            else {
-                needsCommit && animation.commitStyles();
-                animation.cancel();
-            }
-        }
-        catch (e) { }
-    }
-
-    function getUnitConverter(keyframes, definition) {
-        var _a;
-        let toUnit = (definition === null || definition === void 0 ? void 0 : definition.toDefaultUnit) || noopReturn;
-        const finalKeyframe = keyframes[keyframes.length - 1];
-        if (isString(finalKeyframe)) {
-            const unit = ((_a = finalKeyframe.match(/(-?[\d.]+)([a-z%]*)/)) === null || _a === void 0 ? void 0 : _a[2]) || "";
-            if (unit)
-                toUnit = (value) => value + unit;
-        }
-        return toUnit;
-    }
-
-    function getDevToolsRecord() {
-        return window.__MOTION_DEV_TOOLS_RECORD;
-    }
-    function animateStyle(element, key, keyframesDefinition, options = {}, AnimationPolyfill) {
-        const record = getDevToolsRecord();
-        const isRecording = options.record !== false && record;
-        let animation;
-        let { duration = defaults.duration, delay = defaults.delay, endDelay = defaults.endDelay, repeat = defaults.repeat, easing = defaults.easing, persist = false, direction, offset, allowWebkitAcceleration = false, autoplay = true, } = options;
-        const data = getAnimationData(element);
-        const valueIsTransform = isTransform(key);
-        let canAnimateNatively = supports.waapi();
-        /**
-         * If this is an individual transform, we need to map its
-         * key to a CSS variable and update the element's transform style
-         */
-        valueIsTransform && addTransformToElement(element, key);
-        const name = getStyleName(key);
-        const motionValue = getMotionValue(data.values, name);
-        /**
-         * Get definition of value, this will be used to convert numerical
-         * keyframes into the default value type.
-         */
-        const definition = transformDefinitions.get(name);
-        /**
-         * Stop the current animation, if any. Because this will trigger
-         * commitStyles (DOM writes) and we might later trigger DOM reads,
-         * this is fired now and we return a factory function to create
-         * the actual animation that can get called in batch,
-         */
-        stopAnimation(motionValue.animation, !(isEasingGenerator(easing) && motionValue.generator) &&
-            options.record !== false);
-        /**
-         * Batchable factory function containing all DOM reads.
-         */
-        return () => {
-            const readInitialValue = () => { var _a, _b; return (_b = (_a = style.get(element, name)) !== null && _a !== void 0 ? _a : definition === null || definition === void 0 ? void 0 : definition.initialValue) !== null && _b !== void 0 ? _b : 0; };
-            /**
-             * Replace null values with the previous keyframe value, or read
-             * it from the DOM if it's the first keyframe.
-             */
-            let keyframes = hydrateKeyframes(keyframesList(keyframesDefinition), readInitialValue);
-            /**
-             * Detect unit type of keyframes.
-             */
-            const toUnit = getUnitConverter(keyframes, definition);
-            if (isEasingGenerator(easing)) {
-                const custom = easing.createAnimation(keyframes, key !== "opacity", readInitialValue, name, motionValue);
-                easing = custom.easing;
-                keyframes = custom.keyframes || keyframes;
-                duration = custom.duration || duration;
-            }
-            /**
-             * If this is a CSS variable we need to register it with the browser
-             * before it can be animated natively. We also set it with setProperty
-             * rather than directly onto the element.style object.
-             */
-            if (isCssVar(name)) {
-                if (supports.cssRegisterProperty()) {
-                    registerCssVariable(name);
-                }
-                else {
-                    canAnimateNatively = false;
-                }
-            }
-            /**
-             * If we've been passed a custom easing function, and this browser
-             * does **not** support linear() easing, and the value is a transform
-             * (and thus a pure number) we can still support the custom easing
-             * by falling back to the animation polyfill.
-             */
-            if (valueIsTransform &&
-                !supports.linearEasing() &&
-                (isFunction(easing) || (isEasingList(easing) && easing.some(isFunction)))) {
-                canAnimateNatively = false;
-            }
-            /**
-             * If we can animate this value with WAAPI, do so.
-             */
-            if (canAnimateNatively) {
-                /**
-                 * Convert numbers to default value types. Currently this only supports
-                 * transforms but it could also support other value types.
-                 */
-                if (definition) {
-                    keyframes = keyframes.map((value) => isNumber(value) ? definition.toDefaultUnit(value) : value);
-                }
-                /**
-                 * If this browser doesn't support partial/implicit keyframes we need to
-                 * explicitly provide one.
-                 */
-                if (keyframes.length === 1 &&
-                    (!supports.partialKeyframes() || isRecording)) {
-                    keyframes.unshift(readInitialValue());
-                }
-                const animationOptions = {
-                    delay: time.ms(delay),
-                    duration: time.ms(duration),
-                    endDelay: time.ms(endDelay),
-                    easing: !isEasingList(easing)
-                        ? convertEasing(easing, duration)
-                        : undefined,
-                    direction,
-                    iterations: repeat + 1,
-                    fill: "both",
-                };
-                animation = element.animate({
-                    [name]: keyframes,
-                    offset,
-                    easing: isEasingList(easing)
-                        ? easing.map((thisEasing) => convertEasing(thisEasing, duration))
-                        : undefined,
-                }, animationOptions);
-                /**
-                 * Polyfill finished Promise in browsers that don't support it
-                 */
-                if (!animation.finished) {
-                    animation.finished = new Promise((resolve, reject) => {
-                        animation.onfinish = resolve;
-                        animation.oncancel = reject;
-                    });
-                }
-                const target = keyframes[keyframes.length - 1];
-                animation.finished
-                    .then(() => {
-                    if (persist)
-                        return;
-                    // Apply styles to target
-                    style.set(element, name, target);
-                    // Ensure fill modes don't persist
-                    animation.cancel();
-                })
-                    .catch(noop);
-                /**
-                 * This forces Webkit to run animations on the main thread by exploiting
-                 * this condition:
-                 * https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp?rev=281238#L1099
-                 *
-                 * This fixes Webkit's timing bugs, like accelerated animations falling
-                 * out of sync with main thread animations and massive delays in starting
-                 * accelerated animations in WKWebView.
-                 */
-                if (!allowWebkitAcceleration)
-                    animation.playbackRate = 1.000001;
-                /**
-                 * If we can't animate the value natively then we can fallback to the numbers-only
-                 * polyfill for transforms.
-                 */
-            }
-            else if (AnimationPolyfill && valueIsTransform) {
-                /**
-                 * If any keyframe is a string (because we measured it from the DOM), we need to convert
-                 * it into a number before passing to the Animation polyfill.
-                 */
-                keyframes = keyframes.map((value) => typeof value === "string" ? parseFloat(value) : value);
-                /**
-                 * If we only have a single keyframe, we need to create an initial keyframe by reading
-                 * the current value from the DOM.
-                 */
-                if (keyframes.length === 1) {
-                    keyframes.unshift(parseFloat(readInitialValue()));
-                }
-                animation = new AnimationPolyfill((latest) => {
-                    style.set(element, name, toUnit ? toUnit(latest) : latest);
-                }, keyframes, Object.assign(Object.assign({}, options), { duration,
-                    easing }));
-            }
-            else {
-                const target = keyframes[keyframes.length - 1];
-                style.set(element, name, definition && isNumber(target)
-                    ? definition.toDefaultUnit(target)
-                    : target);
-            }
-            if (isRecording) {
-                record(element, key, keyframes, {
-                    duration,
-                    delay: delay,
-                    easing,
-                    repeat,
-                    offset,
-                }, "motion-one");
-            }
-            motionValue.setAnimation(animation);
-            if (animation && !autoplay)
-                animation.pause();
-            return animation;
-        };
-    }
-
-    const getOptions = (options, key) => 
-    /**
-     * TODO: Make test for this
-     * Always return a new object otherwise delay is overwritten by results of stagger
-     * and this results in no stagger
-     */
-    options[key] ? Object.assign(Object.assign({}, options), options[key]) : Object.assign({}, options);
-
-    function resolveElements(elements, selectorCache) {
-        var _a;
-        if (typeof elements === "string") {
-            if (selectorCache) {
-                (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = document.querySelectorAll(elements));
-                elements = selectorCache[elements];
-            }
-            else {
-                elements = document.querySelectorAll(elements);
-            }
-        }
-        else if (elements instanceof Element) {
-            elements = [elements];
-        }
-        /**
-         * Return an empty array
-         */
-        return Array.from(elements || []);
-    }
-
-    const createAnimation = (factory) => factory();
-    const withControls = (animationFactory, options, duration = defaults.duration) => {
-        return new Proxy({
-            animations: animationFactory.map(createAnimation).filter(Boolean),
-            duration,
-            options,
-        }, controls);
-    };
-    /**
-     * TODO:
-     * Currently this returns the first animation, ideally it would return
-     * the first active animation.
-     */
-    const getActiveAnimation = (state) => state.animations[0];
-    const controls = {
-        get: (target, key) => {
-            const activeAnimation = getActiveAnimation(target);
-            switch (key) {
-                case "duration":
-                    return target.duration;
-                case "currentTime":
-                    return time.s((activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key]) || 0);
-                case "playbackRate":
-                case "playState":
-                    return activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key];
-                case "finished":
-                    if (!target.finished) {
-                        target.finished = Promise.all(target.animations.map(selectFinished)).catch(noop);
-                    }
-                    return target.finished;
-                case "stop":
-                    return () => {
-                        target.animations.forEach((animation) => stopAnimation(animation));
-                    };
-                case "forEachNative":
-                    /**
-                     * This is for internal use only, fire a callback for each
-                     * underlying animation.
-                     */
-                    return (callback) => {
-                        target.animations.forEach((animation) => callback(animation, target));
-                    };
-                default:
-                    return typeof (activeAnimation === null || activeAnimation === void 0 ? void 0 : activeAnimation[key]) ===
-                        "undefined"
-                        ? undefined
-                        : () => target.animations.forEach((animation) => animation[key]());
-            }
-        },
-        set: (target, key, value) => {
-            switch (key) {
-                case "currentTime":
-                    value = time.ms(value);
-                // Fall-through
-                case "playbackRate":
-                    for (let i = 0; i < target.animations.length; i++) {
-                        target.animations[i][key] = value;
-                    }
-                    return true;
-            }
-            return false;
-        },
-    };
-    const selectFinished = (animation) => animation.finished;
-
-    function resolveOption(option, i, total) {
-        return isFunction(option) ? option(i, total) : option;
-    }
-
-    function createAnimate(AnimatePolyfill) {
-        return function animate(elements, keyframes, options = {}) {
-            elements = resolveElements(elements);
-            const numElements = elements.length;
-            invariant(Boolean(numElements), "No valid element provided.");
-            invariant(Boolean(keyframes), "No keyframes defined.");
-            /**
-             * Create and start new animations
-             */
-            const animationFactories = [];
-            for (let i = 0; i < numElements; i++) {
-                const element = elements[i];
-                for (const key in keyframes) {
-                    const valueOptions = getOptions(options, key);
-                    valueOptions.delay = resolveOption(valueOptions.delay, i, numElements);
-                    const animation = animateStyle(element, key, keyframes[key], valueOptions, AnimatePolyfill);
-                    animationFactories.push(animation);
-                }
-            }
-            return withControls(animationFactories, options, 
-            /**
-             * TODO:
-             * If easing is set to spring or glide, duration will be dynamically
-             * generated. Ideally we would dynamically generate this from
-             * animation.effect.getComputedTiming().duration but this isn't
-             * supported in iOS13 or our number polyfill. Perhaps it's possible
-             * to Proxy animations returned from animateStyle that has duration
-             * as a getter.
-             */
-            options.duration);
-        };
-    }
-
-    const animate$1 = createAnimate(Animation);
-
-    function animateProgress(target, options = {}) {
-        return withControls([
-            () => {
-                const animation = new Animation(target, [0, 1], options);
-                animation.finished.catch(() => { });
-                return animation;
-            },
-        ], options, options.duration);
-    }
-    function animate(target, keyframesOrOptions, options) {
-        const factory = isFunction(target) ? animateProgress : animate$1;
-        return factory(target, keyframesOrOptions, options);
-    }
-
-    const POSITIONS = [
-        'top-left',
-        'top-center',
-        'top-right',
-        'bottom-left',
-        'bottom-center',
-        'bottom-right'
-    ];
-    function createContainer(position, root) {
-        const c = document.createElement('div');
-        c.className = 'sileo-toaster';
-        c.setAttribute('data-position', position);
-        c.setAttribute('role', 'status');
-        c.setAttribute('aria-live', 'polite');
-        return c;
-    }
-    function renderToast(item) {
-        const el = document.createElement('div');
-        el.className = 'sileo-toast';
-        el.dataset.id = item.id;
-        el.setAttribute('data-type', item.options.type || 'info');
-        el.style.opacity = '0';
-        el.style.transform = 'translateY(-6px)';
-        const body = document.createElement('div');
-        body.style.display = 'flex';
-        body.style.flexDirection = 'column';
-        body.style.flex = '1';
-        const header = document.createElement('div');
-        header.className = 'sileo-toast-header';
-        header.textContent = item.options.title || '';
-        body.appendChild(header);
-        if (item.options.description) {
-            const desc = document.createElement('div');
-            desc.className = 'sileo-toast-desc';
-            desc.textContent = item.options.description;
-            body.appendChild(desc);
-        }
-        el.appendChild(body);
-        if (item.options.button) {
-            const btn = document.createElement('button');
-            btn.className = 'sileo-toast-btn';
-            btn.textContent = item.options.button.title;
-            btn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                try {
-                    if (item.options.button && typeof item.options.button.onClick === 'function') {
-                        item.options.button.onClick();
-                    }
-                }
-                catch (err) {
-                    console.error(err);
-                }
-            });
-            el.appendChild(btn);
-        }
-        const close = document.createElement('button');
-        close.className = 'sileo-toast-close';
-        close.innerHTML = '×';
-        close.addEventListener('click', () => sileo.dismiss(item.id));
-        el.appendChild(close);
-        if (typeof item.options.duration === 'number') {
-            if (item.options.duration > 0) {
-                setTimeout(() => sileo.dismiss(item.id), item.options.duration);
-            }
-        }
-        return el;
-    }
-    function initToasters(root = document.body, positions = ['top-right']) {
-        const containers = {};
-        positions.forEach((pos) => {
-            const c = createContainer(pos);
-            root.appendChild(c);
-            containers[pos] = c;
-        });
-        function rerender(items) {
-            positions.forEach((pos) => {
-                const container = containers[pos];
-                const visible = items.filter((t) => (t.options.position || 'top-right') === pos);
-                // Diff existing children and animate out removed toasts
-                const visibleIds = new Set(visible.map((v) => v.id));
-                const existing = Array.from(container.children);
-                existing.forEach((child) => {
-                    const id = child.dataset.id;
-                    if (!id || !visibleIds.has(id)) {
-                        // animate out then remove
-                        animate(child, { opacity: 0, y: -8 }, { duration: 0.18 }).finished.then(() => child.remove());
-                    }
-                });
-                // Add new items
-                visible.forEach((t) => {
-                    if (!container.querySelector(`[data-id="${t.id}"]`)) {
-                        const node = renderToast(t);
-                        container.appendChild(node);
-                        // animate in
-                        requestAnimationFrame(() => {
-                            animate(node, { opacity: [0, 1], y: [-6, 0] }, { duration: 0.24 });
-                        });
-                    }
-                });
-            });
-        }
-        const unsub = sileo.subscribe(rerender);
-        return {
-            destroy() {
-                unsub();
-                Object.values(containers).forEach((c) => c.remove());
-            }
-        };
-    }
-
-    const notify = sileo.show;
-    const defaultExport = { sileo, initToasters, notify };
-
-    exports.POSITIONS = POSITIONS;
-    exports.default = defaultExport;
-    exports.initToasters = initToasters;
-    exports.notify = notify;
-    exports.sileo = sileo;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-}));