text: import { raf } from '@react-spring/rafz';
  export { raf } from '@react-spring/rafz';
  import * as React from 'react';
  import { useEffect, useState, useRef } from 'react';
  
  function noop() {}
  const defineHidden = (obj, key, value) => Object.defineProperty(obj, key, {
    value,
    writable: true,
    configurable: true
  });
  const is = {
    arr: Array.isArray,
    obj: a => !!a && a.constructor.name === 'Object',
    fun: a => typeof a === 'function',
    str: a => typeof a === 'string',
    num: a => typeof a === 'number',
    und: a => a === undefined
  };
  function isEqual(a, b) {
    if (is.arr(a)) {
      if (!is.arr(b) || a.length !== b.length) return false;
  
      for (let i = 0; i < a.length; i++) {
        if (a[i] !== b[i]) return false;
      }
  
      return true;
    }
  
    return a === b;
  }
  const each = (obj, fn) => obj.forEach(fn);
  function eachProp(obj, fn, ctx) {
    if (is.arr(obj)) {
      for (let i = 0; i < obj.length; i++) {
        fn.call(ctx, obj[i], `${i}`);
      }
  
      return;
    }
  
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        fn.call(ctx, obj[key], key);
      }
    }
  }
  const toArray = a => is.und(a) ? [] : is.arr(a) ? a : [a];
  function flush(queue, iterator) {
    if (queue.size) {
      const items = Array.from(queue);
      queue.clear();
      each(items, iterator);
    }
  }
  const flushCalls = (queue, ...args) => flush(queue, fn => fn(...args));
  
  let createStringInterpolator$1;
  let to;
  let colors$1 = null;
  let skipAnimation = false;
  let willAdvance = noop;
  const assign = globals => {
    if (globals.to) to = globals.to;
    if (globals.now) raf.now = globals.now;
    if (globals.colors !== undefined) colors$1 = globals.colors;
    if (globals.skipAnimation != null) skipAnimation = globals.skipAnimation;
    if (globals.createStringInterpolator) createStringInterpolator$1 = globals.createStringInterpolator;
    if (globals.requestAnimationFrame) raf.use(globals.requestAnimationFrame);
    if (globals.batchedUpdates) raf.batchedUpdates = globals.batchedUpdates;
    if (globals.willAdvance) willAdvance = globals.willAdvance;
    if (globals.frameLoop) raf.frameLoop = globals.frameLoop;
  };
  
  var globals = /*#__PURE__*/Object.freeze({
    __proto__: null,
    get createStringInterpolator () { return createStringInterpolator$1; },
    get to () { return to; },
    get colors () { return colors$1; },
    get skipAnimation () { return skipAnimation; },
    get willAdvance () { return willAdvance; },
    assign: assign
  });
  
  const startQueue = new Set();
  let currentFrame = [];
  let prevFrame = [];
  let priority = 0;
  const frameLoop = {
    get idle() {
      return !startQueue.size && !currentFrame.length;
    },
  
    start(animation) {
      if (priority > animation.priority) {
        startQueue.add(animation);
        raf.onStart(flushStartQueue);
      } else {
        startSafely(animation);
        raf(advance);
      }
    },
  
    advance,
  
    sort(animation) {
      if (priority) {
        raf.onFrame(() => frameLoop.sort(animation));
      } else {
        const prevIndex = currentFrame.indexOf(animation);
  
        if (~prevIndex) {
          currentFrame.splice(prevIndex, 1);
          startUnsafely(animation);
        }
      }
    },
  
    clear() {
      currentFrame = [];
      startQueue.clear();
    }
  
  };
  
  function flushStartQueue() {
    startQueue.forEach(startSafely);
    startQueue.clear();
    raf(advance);
  }
  
  function startSafely(animation) {
    if (!currentFrame.includes(animation)) startUnsafely(animation);
  }
  
  function startUnsafely(animation) {
    currentFrame.splice(findIndex(currentFrame, other => other.priority > animation.priority), 0, animation);
  }
  
  function advance(dt) {
    const nextFrame = prevFrame;
  
    for (let i = 0; i < currentFrame.length; i++) {
      const animation = currentFrame[i];
      priority = animation.priority;
  
      if (!animation.idle) {
        willAdvance(animation);
        animation.advance(dt);
  
        if (!animation.idle) {
          nextFrame.push(animation);
        }
      }
    }
  
    priority = 0;
    prevFrame = currentFrame;
    prevFrame.length = 0;
    currentFrame = nextFrame;
    return currentFrame.length > 0;
  }
  
  function findIndex(arr, test) {
    const index = arr.findIndex(test);
    return index < 0 ? arr.length : index;
  }
  
  const colors = {
    transparent: 0x00000000,
    aliceblue: 0xf0f8ffff,
    antiquewhite: 0xfaebd7ff,
    aqua: 0x00ffffff,
    aquamarine: 0x7fffd4ff,
    azure: 0xf0ffffff,
    beige: 0xf5f5dcff,
    bisque: 0xffe4c4ff,
    black: 0x000000ff,
    blanchedalmond: 0xffebcdff,
    blue: 0x0000ffff,
    blueviolet: 0x8a2be2ff,
    brown: 0xa52a2aff,
    burlywood: 0xdeb887ff,
    burntsienna: 0xea7e5dff,
    cadetblue: 0x5f9ea0ff,
    chartreuse: 0x7fff00ff,
    chocolate: 0xd2691eff,
    coral: 0xff7f50ff,
    cornflowerblue: 0x6495edff,
    cornsilk: 0xfff8dcff,
    crimson: 0xdc143cff,
    cyan: 0x00ffffff,
    darkblue: 0x00008bff,
    darkcyan: 0x008b8bff,
    darkgoldenrod: 0xb8860bff,
    darkgray: 0xa9a9a9ff,
    darkgreen: 0x006400ff,
    darkgrey: 0xa9a9a9ff,
    darkkhaki: 0xbdb76bff,
    darkmagenta: 0x8b008bff,
    darkolivegreen: 0x556b2fff,
    darkorange: 0xff8c00ff,
    darkorchid: 0x9932ccff,
    darkred: 0x8b0000ff,
    darksalmon: 0xe9967aff,
    darkseagreen: 0x8fbc8fff,
    darkslateblue: 0x483d8bff,
    darkslategray: 0x2f4f4fff,
    darkslategrey: 0x2f4f4fff,
    darkturquoise: 0x00ced1ff,
    darkviolet: 0x9400d3ff,
    deeppink: 0xff1493ff,
    deepskyblue: 0x00bfffff,
    dimgray: 0x696969ff,
    dimgrey: 0x696969ff,
    dodgerblue: 0x1e90ffff,
    firebrick: 0xb22222ff,
    floralwhite: 0xfffaf0ff,
    forestgreen: 0x228b22ff,
    fuchsia: 0xff00ffff,
    gainsboro: 0xdcdcdcff,
    ghostwhite: 0xf8f8ffff,
    gold: 0xffd700ff,
    goldenrod: 0xdaa520ff,
    gray: 0x808080ff,
    green: 0x008000ff,
    greenyellow: 0xadff2fff,
    grey: 0x808080ff,
    honeydew: 0xf0fff0ff,
    hotpink: 0xff69b4ff,
    indianred: 0xcd5c5cff,
    indigo: 0x4b0082ff,
    ivory: 0xfffff0ff,
    khaki: 0xf0e68cff,
    lavender: 0xe6e6faff,
    lavenderblush: 0xfff0f5ff,
    lawngreen: 0x7cfc00ff,
    lemonchiffon: 0xfffacdff,
    lightblue: 0xadd8e6ff,
    lightcoral: 0xf08080ff,
    lightcyan: 0xe0ffffff,
    lightgoldenrodyellow: 0xfafad2ff,
    lightgray: 0xd3d3d3ff,
    lightgreen: 0x90ee90ff,
    lightgrey: 0xd3d3d3ff,
    lightpink: 0xffb6c1ff,
    lightsalmon: 0xffa07aff,
    lightseagreen: 0x20b2aaff,
    lightskyblue: 0x87cefaff,
    lightslategray: 0x778899ff,
    lightslategrey: 0x778899ff,
    lightsteelblue: 0xb0c4deff,
    lightyellow: 0xffffe0ff,
    lime: 0x00ff00ff,
    limegreen: 0x32cd32ff,
    linen: 0xfaf0e6ff,
    magenta: 0xff00ffff,
    maroon: 0x800000ff,
    mediumaquamarine: 0x66cdaaff,
    mediumblue: 0x0000cdff,
    mediumorchid: 0xba55d3ff,
    mediumpurple: 0x9370dbff,
    mediumseagreen: 0x3cb371ff,
    mediumslateblue: 0x7b68eeff,
    mediumspringgreen: 0x00fa9aff,
    mediumturquoise: 0x48d1ccff,
    mediumvioletred: 0xc71585ff,
    midnightblue: 0x191970ff,
    mintcream: 0xf5fffaff,
    mistyrose: 0xffe4e1ff,
    moccasin: 0xffe4b5ff,
    navajowhite: 0xffdeadff,
    navy: 0x000080ff,
    oldlace: 0xfdf5e6ff,
    olive: 0x808000ff,
    olivedrab: 0x6b8e23ff,
    orange: 0xffa500ff,
    orangered: 0xff4500ff,
    orchid: 0xda70d6ff,
    palegoldenrod: 0xeee8aaff,
    palegreen: 0x98fb98ff,
    paleturquoise: 0xafeeeeff,
    palevioletred: 0xdb7093ff,
    papayawhip: 0xffefd5ff,
    peachpuff: 0xffdab9ff,
    peru: 0xcd853fff,
    pink: 0xffc0cbff,
    plum: 0xdda0ddff,
    powderblue: 0xb0e0e6ff,
    purple: 0x800080ff,
    rebeccapurple: 0x663399ff,
    red: 0xff0000ff,
    rosybrown: 0xbc8f8fff,
    royalblue: 0x4169e1ff,
    saddlebrown: 0x8b4513ff,
    salmon: 0xfa8072ff,
    sandybrown: 0xf4a460ff,
    seagreen: 0x2e8b57ff,
    seashell: 0xfff5eeff,
    sienna: 0xa0522dff,
    silver: 0xc0c0c0ff,
    skyblue: 0x87ceebff,
    slateblue: 0x6a5acdff,
    slategray: 0x708090ff,
    slategrey: 0x708090ff,
    snow: 0xfffafaff,
    springgreen: 0x00ff7fff,
    steelblue: 0x4682b4ff,
    tan: 0xd2b48cff,
    teal: 0x008080ff,
    thistle: 0xd8bfd8ff,
    tomato: 0xff6347ff,
    turquoise: 0x40e0d0ff,
    violet: 0xee82eeff,
    wheat: 0xf5deb3ff,
    white: 0xffffffff,
    whitesmoke: 0xf5f5f5ff,
    yellow: 0xffff00ff,
    yellowgreen: 0x9acd32ff
  };
  
  const NUMBER = '[-+]?\\d*\\.?\\d+';
  const PERCENTAGE = NUMBER + '%';
  
  function call(...parts) {
    return '\\(\\s*(' + parts.join(')\\s*,\\s*(') + ')\\s*\\)';
  }
  
  const rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
  const rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));
  const hsl = new RegExp('hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE));
  const hsla = new RegExp('hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER));
  const hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
  const hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
  const hex6 = /^#([0-9a-fA-F]{6})$/;
  const hex8 = /^#([0-9a-fA-F]{8})$/;
  
  function normalizeColor(color) {
    let match;
  
    if (typeof color === 'number') {
      return color >>> 0 === color && color >= 0 && color <= 0xffffffff ? color : null;
    }
  
    if (match = hex6.exec(color)) return parseInt(match[1] + 'ff', 16) >>> 0;
  
    if (colors$1 && colors$1[color] !== undefined) {
      return colors$1[color];
    }
  
    if (match = rgb.exec(color)) {
      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | 0x000000ff) >>> 0;
    }
  
    if (match = rgba.exec(color)) {
      return (parse255(match[1]) << 24 | parse255(match[2]) << 16 | parse255(match[3]) << 8 | parse1(match[4])) >>> 0;
    }
  
    if (match = hex3.exec(color)) {
      return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + 'ff', 16) >>> 0;
    }
  
    if (match = hex8.exec(color)) return parseInt(match[1], 16) >>> 0;
  
    if (match = hex4.exec(color)) {
      return parseInt(match[1] + match[1] + match[2] + match[2] + match[3] + match[3] + match[4] + match[4], 16) >>> 0;
    }
  
    if (match = hsl.exec(color)) {
      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | 0x000000ff) >>> 0;
    }
  
    if (match = hsla.exec(color)) {
      return (hslToRgb(parse360(match[1]), parsePercentage(match[2]), parsePercentage(match[3])) | parse1(match[4])) >>> 0;
    }
  
    return null;
  }
  
  function hue2rgb(p, q, t) {
    if (t < 0) t += 1;
    if (t > 1) t -= 1;
    if (t < 1 / 6) return p + (q - p) * 6 * t;
    if (t < 1 / 2) return q;
    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
    return p;
  }
  
  function hslToRgb(h, s, l) {
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    const r = hue2rgb(p, q, h + 1 / 3);
    const g = hue2rgb(p, q, h);
    const b = hue2rgb(p, q, h - 1 / 3);
    return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
  }
  
  function parse255(str) {
    const int = parseInt(str, 10);
    if (int < 0) return 0;
    if (int > 255) return 255;
    return int;
  }
  
  function parse360(str) {
    const int = parseFloat(str);
    return (int % 360 + 360) % 360 / 360;
  }
  
  function parse1(str) {
    const num = parseFloat(str);
    if (num < 0) return 0;
    if (num > 1) return 255;
    return Math.round(num * 255);
  }
  
  function parsePercentage(str) {
    const int = parseFloat(str);
    if (int < 0) return 0;
    if (int > 100) return 1;
    return int / 100;
  }
  
  function colorToRgba(input) {
    let int32Color = normalizeColor(input);
    if (int32Color === null) return input;
    int32Color = int32Color || 0;
    let r = (int32Color & 0xff000000) >>> 24;
    let g = (int32Color & 0x00ff0000) >>> 16;
    let b = (int32Color & 0x0000ff00) >>> 8;
    let a = (int32Color & 0x000000ff) / 255;
    return `rgba(${r}, ${g}, ${b}, ${a})`;
  }
  
  const createInterpolator = (range, output, extrapolate) => {
    if (is.fun(range)) {
      return range;
    }
  
    if (is.arr(range)) {
      return createInterpolator({
        range,
        output: output,
        extrapolate
      });
    }
  
    if (is.str(range.output[0])) {
      return createStringInterpolator$1(range);
    }
  
    const config = range;
    const outputRange = config.output;
    const inputRange = config.range || [0, 1];
    const extrapolateLeft = config.extrapolateLeft || config.extrapolate || 'extend';
    const extrapolateRight = config.extrapolateRight || config.extrapolate || 'extend';
  
    const easing = config.easing || (t => t);
  
    return input => {
      const range = findRange(input, inputRange);
      return interpolate(input, inputRange[range], inputRange[range + 1], outputRange[range], outputRange[range + 1], easing, extrapolateLeft, extrapolateRight, config.map);
    };
  };
  
  function interpolate(input, inputMin, inputMax, outputMin, outputMax, easing, extrapolateLeft, extrapolateRight, map) {
    let result = map ? map(input) : input;
  
    if (result < inputMin) {
      if (extrapolateLeft === 'identity') return result;else if (extrapolateLeft === 'clamp') result = inputMin;
    }
  
    if (result > inputMax) {
      if (extrapolateRight === 'identity') return result;else if (extrapolateRight === 'clamp') result = inputMax;
    }
  
    if (outputMin === outputMax) return outputMin;
    if (inputMin === inputMax) return input <= inputMin ? outputMin : outputMax;
    if (inputMin === -Infinity) result = -result;else if (inputMax === Infinity) result = result - inputMin;else result = (result - inputMin) / (inputMax - inputMin);
    result = easing(result);
    if (outputMin === -Infinity) result = -result;else if (outputMax === Infinity) result = result + outputMin;else result = result * (outputMax - outputMin) + outputMin;
    return result;
  }
  
  function findRange(input, inputRange) {
    for (var i = 1; i < inputRange.length - 1; ++i) if (inputRange[i] >= input) break;
  
    return i - 1;
  }
  
  function _extends() {
    _extends = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
  
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
  
      return target;
    };
  
    return _extends.apply(this, arguments);
  }
  
  const $get = Symbol.for('FluidValue.get');
  const $observers = Symbol.for('FluidValue.observers');
  
  const hasFluidValue = arg => Boolean(arg && arg[$get]);
  
  const getFluidValue = arg => arg && arg[$get] ? arg[$get]() : arg;
  
  const getFluidObservers = target => target[$observers] || null;
  
  function callFluidObserver(observer, event) {
    if (observer.eventObserved) {
      observer.eventObserved(event);
    } else {
      observer(event);
    }
  }
  
  function callFluidObservers(target, event) {
    let observers = target[$observers];
  
    if (observers) {
      observers.forEach(observer => {
        callFluidObserver(observer, event);
      });
    }
  }
  
  class FluidValue {
    constructor(get) {
      this[$get] = void 0;
      this[$observers] = void 0;
  
      if (!get && !(get = this.get)) {
        throw Error('Unknown getter');
      }
  
      setFluidGetter(this, get);
    }
  
  }
  
  const setFluidGetter = (target, get) => setHidden(target, $get, get);
  
  function addFluidObserver(target, observer) {
    if (target[$get]) {
      let observers = target[$observers];
  
      if (!observers) {
        setHidden(target, $observers, observers = new Set());
      }
  
      if (!observers.has(observer)) {
        observers.add(observer);
  
        if (target.observerAdded) {
          target.observerAdded(observers.size, observer);
        }
      }
    }
  
    return observer;
  }
  
  function removeFluidObserver(target, observer) {
    let observers = target[$observers];
  
    if (observers && observers.has(observer)) {
      const count = observers.size - 1;
  
      if (count) {
        observers.delete(observer);
      } else {
        target[$observers] = null;
      }
  
      if (target.observerRemoved) {
        target.observerRemoved(count, observer);
      }
    }
  }
  
  const setHidden = (target, key, value) => Object.defineProperty(target, key, {
    value,
    writable: true,
    configurable: true
  });
  
  const numberRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
  const colorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
  const unitRegex = new RegExp(`(${numberRegex.source})(%|[a-z]+)`, 'i');
  let namedColorRegex;
  const rgbaRegex = /rgba\(([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+), ([0-9\.-]+)\)/gi;
  
  const rgbaRound = (_, p1, p2, p3, p4) => `rgba(${Math.round(p1)}, ${Math.round(p2)}, ${Math.round(p3)}, ${p4})`;
  
  const createStringInterpolator = config => {
    if (!namedColorRegex) namedColorRegex = colors$1 ? new RegExp(`(${Object.keys(colors$1).join('|')})(?!\\w)`, 'g') : /^\b$/;
    const output = config.output.map(value => getFluidValue(value).replace(colorRegex, colorToRgba).replace(namedColorRegex, colorToRgba));
    const keyframes = output.map(value => value.match(numberRegex).map(Number));
    const outputRanges = keyframes[0].map((_, i) => keyframes.map(values => {
      if (!(i in values)) {
        throw Error('The arity of each "output" value must be equal');
      }
  
      return values[i];
    }));
    const interpolators = outputRanges.map(output => createInterpolator(_extends({}, config, {
      output
    })));
    return input => {
      var _output$find;
  
      const missingUnit = !unitRegex.test(output[0]) && ((_output$find = output.find(value => unitRegex.test(value))) == null ? void 0 : _output$find.replace(numberRegex, ''));
      let i = 0;
      return output[0].replace(numberRegex, () => `${interpolators[i++](input)}${missingUnit || ''}`).replace(rgbaRegex, rgbaRound);
    };
  };
  
  const prefix = 'react-spring: ';
  
  const once = fn => {
    const func = fn;
    let called = false;
  
    if (typeof func != 'function') {
      throw new TypeError(`${prefix}once requires a function parameter`);
    }
  
    return (...args) => {
      if (!called) {
        func(...args);
        called = true;
      }
    };
  };
  
  const warnInterpolate = once(console.warn);
  function deprecateInterpolate() {
    warnInterpolate(`${prefix}The "interpolate" function is deprecated in v9 (use "to" instead)`);
  }
  const warnDirectCall = once(console.warn);
  function deprecateDirectCall() {
    warnDirectCall(`${prefix}Directly calling start instead of using the api object is deprecated in v9 (use ".start" instead), this will be removed in later 0.X.0 versions`);
  }
  
  function isAnimatedString(value) {
    return is.str(value) && (value[0] == '#' || /\d/.test(value) || value in (colors$1 || {}));
  }
  
  const useOnce = effect => useEffect(effect, emptyDeps);
  const emptyDeps = [];
  
  function useForceUpdate() {
    const update = useState()[1];
    const mounted = useState(makeMountedRef)[0];
    useOnce(mounted.unmount);
    return () => {
      if (mounted.current) {
        update({});
      }
    };
  }
  
  function makeMountedRef() {
    const mounted = {
      current: true,
      unmount: () => () => {
        mounted.current = false;
      }
    };
    return mounted;
  }
  
  function useMemoOne(getResult, inputs) {
    const [initial] = useState(() => ({
      inputs,
      result: getResult()
    }));
    const committed = useRef();
    const prevCache = committed.current;
    let cache = prevCache;
  
    if (cache) {
      const useCache = Boolean(inputs && cache.inputs && areInputsEqual(inputs, cache.inputs));
  
      if (!useCache) {
        cache = {
          inputs,
          result: getResult()
        };
      }
    } else {
      cache = initial;
    }
  
    useEffect(() => {
      committed.current = cache;
  
      if (prevCache == initial) {
        initial.inputs = initial.result = undefined;
      }
    }, [cache]);
    return cache.result;
  }
  
  function areInputsEqual(next, prev) {
    if (next.length !== prev.length) {
      return false;
    }
  
    for (let i = 0; i < next.length; i++) {
      if (next[i] !== prev[i]) {
        return false;
      }
    }
  
    return true;
  }
  
  function usePrev(value) {
    const prevRef = useRef();
    useEffect(() => {
      prevRef.current = value;
    });
    return prevRef.current;
  }
  
  const useLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
  
  export { FluidValue, globals as Globals, addFluidObserver, callFluidObserver, callFluidObservers, colorToRgba, colors, createInterpolator, createStringInterpolator, defineHidden, deprecateDirectCall, deprecateInterpolate, each, eachProp, flush, flushCalls, frameLoop, getFluidObservers, getFluidValue, hasFluidValue, hex3, hex4, hex6, hex8, hsl, hsla, is, isAnimatedString, isEqual, noop, removeFluidObserver, rgb, rgba, setFluidGetter, toArray, useForceUpdate, useLayoutEffect, useMemoOne, useOnce, usePrev };
  