[AFP-131 Shaphen Pangburn]: Add recurring animation to cart length indicateor...

[AFP-131 Shaphen Pangburn]: Add recurring animation to cart length indicateor using react-animate-on-change

ecom-web/src/components/Header/header.css

@@ -32,13 +32,15 @@
 
 .items-in-cart {
     position: absolute;
-    right: 10px;
+    right: 4px;
     top: 1px;
     padding: 0px 8px;
     background-color: gray;
     border-radius: 15px;
     cursor: pointer;
+}
 
+.items-in-cart-animation {
     animation: headShake;
     animation-duration: 0.8s;
 }

ecom-web/src/components/Header/header.js

@@ -6,6 +6,7 @@ import {NavLink} from 'react-router-dom'
 import Session from '../session/session-container'
 import {LinkContainer} from 'react-router-bootstrap'
 import { AiOutlineShoppingCart } from 'react-icons/ai'
+import AnimateOnChange from 'react-animate-on-change'
 
 import './header.css';
 
@@ -43,10 +44,15 @@ export default class Header extends Component {
                             <LinkContainer to="/cart" >
                                 <Nav.Link to="/cart" className="cart-link" id={this.props.user?.currentUser ? "" : "disabled-cart-link"} disabled={ !this.props.user?.currentUser }><AiOutlineShoppingCart fill="black" size={30} /></Nav.Link>
                             </LinkContainer>
+                            <AnimateOnChange
+                                baseClassName="items-in-cart"
+                                animationClassName="items-in-cart-animation"
+                                animate={ this.props.diff != 0 }
+                            >
                                 <LinkContainer to="/cart" >
                                     <Nav.Link to="/cart" className={ this.props.cartLength > 0 ? "items-in-cart" : "no-show" }>{ this.props.cartLength }</Nav.Link>
                                 </LinkContainer>
-                            {/* <span id="items-in-cart">{ this.props.cartLength }</span> */}
+                            </AnimateOnChange>
                         </Nav>
                     </Navbar.Collapse>
                 </Navbar>

node_modules/.bin/loose-envify

+../loose-envify/cli.js
\ No newline at end of file

node_modules/.package-lock.json

+{
+  "name": "ecommerce-maven",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-animate-on-change": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-animate-on-change/-/react-animate-on-change-2.2.0.tgz",
+      "integrity": "sha512-cM0YHbsxIh8fshX/U24+pk4nDG7Ike9NsEy21reqJPqVt6xRA+6oYkaQHEggINKjYEMbztwK40Ro0/EHZ5naVQ==",
+      "peerDependencies": {
+        "react": ">15.0.0"
+      }
+    }
+  }
+}

node_modules/js-tokens/CHANGELOG.md

+### Version 4.0.0 (2018-01-28) ###
+
+- Added: Support for ES2018. The only change needed was recognizing the `s`
+  regex flag.
+- Changed: _All_ tokens returned by the `matchToToken` function now have a
+  `closed` property. It is set to `undefined` for the tokens where “closed”
+  doesn’t make sense. This means that all tokens objects have the same shape,
+  which might improve performance.
+
+These are the breaking changes:
+
+- `'/a/s'.match(jsTokens)` no longer returns `['/', 'a', '/', 's']`, but
+  `['/a/s']`. (There are of course other variations of this.)
+- Code that rely on some token objects not having the `closed` property could
+  now behave differently.
+
+
+### Version 3.0.2 (2017-06-28) ###
+
+- No code changes. Just updates to the readme.
+
+
+### Version 3.0.1 (2017-01-30) ###
+
+- Fixed: ES2015 unicode escapes with more than 6 hex digits are now matched
+  correctly.
+
+
+### Version 3.0.0 (2017-01-11) ###
+
+This release contains one breaking change, that should [improve performance in
+V8][v8-perf]:
+
+> So how can you, as a JavaScript developer, ensure that your RegExps are fast?
+> If you are not interested in hooking into RegExp internals, make sure that
+> neither the RegExp instance, nor its prototype is modified in order to get the
+> best performance:
+>
+> ```js
+> var re = /./g;
+> re.exec('');  // Fast path.
+> re.new_property = 'slow';
+> ```
+
+This module used to export a single regex, with `.matchToToken` bolted
+on, just like in the above example. This release changes the exports of
+the module to avoid this issue.
+
+Before:
+
+```js
+import jsTokens from "js-tokens"
+// or:
+var jsTokens = require("js-tokens")
+var matchToToken = jsTokens.matchToToken
+```
+
+After:
+
+```js
+import jsTokens, {matchToToken} from "js-tokens"
+// or:
+var jsTokens = require("js-tokens").default
+var matchToToken = require("js-tokens").matchToToken
+```
+
+[v8-perf]: http://v8project.blogspot.se/2017/01/speeding-up-v8-regular-expressions.html
+
+
+### Version 2.0.0 (2016-06-19) ###
+
+- Added: Support for ES2016. In other words, support for the `**` exponentiation
+  operator.
+
+These are the breaking changes:
+
+- `'**'.match(jsTokens)` no longer returns `['*', '*']`, but `['**']`.
+- `'**='.match(jsTokens)` no longer returns `['*', '*=']`, but `['**=']`.
+
+
+### Version 1.0.3 (2016-03-27) ###
+
+- Improved: Made the regex ever so slightly smaller.
+- Updated: The readme.
+
+
+### Version 1.0.2 (2015-10-18) ###
+
+- Improved: Limited npm package contents for a smaller download. Thanks to
+  @zertosh!
+
+
+### Version 1.0.1 (2015-06-20) ###
+
+- Fixed: Declared an undeclared variable.
+
+
+### Version 1.0.0 (2015-02-26) ###
+
+- Changed: Merged the 'operator' and 'punctuation' types into 'punctuator'. That
+  type is now equivalent to the Punctuator token in the ECMAScript
+  specification. (Backwards-incompatible change.)
+- Fixed: A `-` followed by a number is now correctly matched as a punctuator
+  followed by a number. It used to be matched as just a number, but there is no
+  such thing as negative number literals. (Possibly backwards-incompatible
+  change.)
+
+
+### Version 0.4.1 (2015-02-21) ###
+
+- Added: Support for the regex `u` flag.
+
+
+### Version 0.4.0 (2015-02-21) ###
+
+- Improved: `jsTokens.matchToToken` performance.
+- Added: Support for octal and binary number literals.
+- Added: Support for template strings.
+
+
+### Version 0.3.1 (2015-01-06) ###
+
+- Fixed: Support for unicode spaces. They used to be allowed in names (which is
+  very confusing), and some unicode newlines were wrongly allowed in strings and
+  regexes.
+
+
+### Version 0.3.0 (2014-12-19) ###
+
+- Changed: The `jsTokens.names` array has been replaced with the
+  `jsTokens.matchToToken` function. The capturing groups of `jsTokens` are no
+  longer part of the public API; instead use said function. See this [gist] for
+  an example. (Backwards-incompatible change.)
+- Changed: The empty string is now considered an “invalid” token, instead an
+  “empty” token (its own group). (Backwards-incompatible change.)
+- Removed: component support. (Backwards-incompatible change.)
+
+[gist]: https://gist.github.com/lydell/be49dbf80c382c473004
+
+
+### Version 0.2.0 (2014-06-19) ###
+
+- Changed: Match ES6 function arrows (`=>`) as an operator, instead of its own
+  category (“functionArrow”), for simplicity. (Backwards-incompatible change.)
+- Added: ES6 splats (`...`) are now matched as an operator (instead of three
+  punctuations). (Backwards-incompatible change.)
+
+
+### Version 0.1.0 (2014-03-08) ###
+
+- Initial release.

node_modules/js-tokens/LICENSE

+The MIT License (MIT)
+
+Copyright (c) 2014, 2015, 2016, 2017, 2018 Simon Lydell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

node_modules/js-tokens/README.md

+Overview [![Build Status](https://travis-ci.org/lydell/js-tokens.svg?branch=master)](https://travis-ci.org/lydell/js-tokens)
+========
+
+A regex that tokenizes JavaScript.
+
+```js
+var jsTokens = require("js-tokens").default
+
+var jsString = "var foo=opts.foo;\n..."
+
+jsString.match(jsTokens)
+// ["var", " ", "foo", "=", "opts", ".", "foo", ";", "\n", ...]
+```
+
+
+Installation
+============
+
+`npm install js-tokens`
+
+```js
+import jsTokens from "js-tokens"
+// or:
+var jsTokens = require("js-tokens").default
+```
+
+
+Usage
+=====
+
+### `jsTokens` ###
+
+A regex with the `g` flag that matches JavaScript tokens.
+
+The regex _always_ matches, even invalid JavaScript and the empty string.
+
+The next match is always directly after the previous.
+
+### `var token = matchToToken(match)` ###
+
+```js
+import {matchToToken} from "js-tokens"
+// or:
+var matchToToken = require("js-tokens").matchToToken
+```
+
+Takes a `match` returned by `jsTokens.exec(string)`, and returns a `{type:
+String, value: String}` object. The following types are available:
+
+- string
+- comment
+- regex
+- number
+- name
+- punctuator
+- whitespace
+- invalid
+
+Multi-line comments and strings also have a `closed` property indicating if the
+token was closed or not (see below).
+
+Comments and strings both come in several flavors. To distinguish them, check if
+the token starts with `//`, `/*`, `'`, `"` or `` ` ``.
+
+Names are ECMAScript IdentifierNames, that is, including both identifiers and
+keywords. You may use [is-keyword-js] to tell them apart.
+
+Whitespace includes both line terminators and other whitespace.
+
+[is-keyword-js]: https://github.com/crissdev/is-keyword-js
+
+
+ECMAScript support
+==================
+
+The intention is to always support the latest ECMAScript version whose feature
+set has been finalized.
+
+If adding support for a newer version requires changes, a new version with a
+major verion bump will be released.
+
+Currently, ECMAScript 2018 is supported.
+
+
+Invalid code handling
+=====================
+
+Unterminated strings are still matched as strings. JavaScript strings cannot
+contain (unescaped) newlines, so unterminated strings simply end at the end of
+the line. Unterminated template strings can contain unescaped newlines, though,
+so they go on to the end of input.
+
+Unterminated multi-line comments are also still matched as comments. They
+simply go on to the end of the input.
+
+Unterminated regex literals are likely matched as division and whatever is
+inside the regex.
+
+Invalid ASCII characters have their own capturing group.
+
+Invalid non-ASCII characters are treated as names, to simplify the matching of
+names (except unicode spaces which are treated as whitespace). Note: See also
+the [ES2018](#es2018) section.
+
+Regex literals may contain invalid regex syntax. They are still matched as
+regex literals. They may also contain repeated regex flags, to keep the regex
+simple.
+
+Strings may contain invalid escape sequences.
+
+
+Limitations
+===========
+
+Tokenizing JavaScript using regexes—in fact, _one single regex_—won’t be
+perfect. But that’s not the point either.
+
+You may compare jsTokens with [esprima] by using `esprima-compare.js`.
+See `npm run esprima-compare`!
+
+[esprima]: http://esprima.org/
+
+### Template string interpolation ###
+
+Template strings are matched as single tokens, from the starting `` ` `` to the
+ending `` ` ``, including interpolations (whose tokens are not matched
+individually).
+
+Matching template string interpolations requires recursive balancing of `{` and
+`}`—something that JavaScript regexes cannot do. Only one level of nesting is
+supported.
+
+### Division and regex literals collision ###
+
+Consider this example:
+
+```js
+var g = 9.82
+var number = bar / 2/g
+
+var regex = / 2/g
+```
+
+A human can easily understand that in the `number` line we’re dealing with
+division, and in the `regex` line we’re dealing with a regex literal. How come?
+Because humans can look at the whole code to put the `/` characters in context.
+A JavaScript regex cannot. It only sees forwards. (Well, ES2018 regexes can also
+look backwards. See the [ES2018](#es2018) section).
+
+When the `jsTokens` regex scans throught the above, it will see the following
+at the end of both the `number` and `regex` rows:
+
+```js
+/ 2/g
+```
+
+It is then impossible to know if that is a regex literal, or part of an
+expression dealing with division.
+
+Here is a similar case:
+
+```js
+foo /= 2/g
+foo(/= 2/g)
+```
+
+The first line divides the `foo` variable with `2/g`. The second line calls the
+`foo` function with the regex literal `/= 2/g`. Again, since `jsTokens` only
+sees forwards, it cannot tell the two cases apart.
+
+There are some cases where we _can_ tell division and regex literals apart,
+though.
+
+First off, we have the simple cases where there’s only one slash in the line:
+
+```js
+var foo = 2/g
+foo /= 2
+```
+
+Regex literals cannot contain newlines, so the above cases are correctly
+identified as division. Things are only problematic when there are more than
+one non-comment slash in a single line.
+
+Secondly, not every character is a valid regex flag.
+
+```js
+var number = bar / 2/e
+```
+
+The above example is also correctly identified as division, because `e` is not a
+valid regex flag. I initially wanted to future-proof by allowing `[a-zA-Z]*`
+(any letter) as flags, but it is not worth it since it increases the amount of
+ambigous cases. So only the standard `g`, `m`, `i`, `y` and `u` flags are
+allowed. This means that the above example will be identified as division as
+long as you don’t rename the `e` variable to some permutation of `gmiyus` 1 to 6
+characters long.
+
+Lastly, we can look _forward_ for information.
+
+- If the token following what looks like a regex literal is not valid after a
+  regex literal, but is valid in a division expression, then the regex literal
+  is treated as division instead. For example, a flagless regex cannot be
+  followed by a string, number or name, but all of those three can be the
+  denominator of a division.
+- Generally, if what looks like a regex literal is followed by an operator, the
+  regex literal is treated as division instead. This is because regexes are
+  seldomly used with operators (such as `+`, `*`, `&&` and `==`), but division
+  could likely be part of such an expression.
+
+Please consult the regex source and the test cases for precise information on
+when regex or division is matched (should you need to know). In short, you
+could sum it up as:
+
+If the end of a statement looks like a regex literal (even if it isn’t), it
+will be treated as one. Otherwise it should work as expected (if you write sane
+code).
+
+### ES2018 ###
+
+ES2018 added some nice regex improvements to the language.
+
+- [Unicode property escapes] should allow telling names and invalid non-ASCII
+  characters apart without blowing up the regex size.
+- [Lookbehind assertions] should allow matching telling division and regex
+  literals apart in more cases.
+- [Named capture groups] might simplify some things.
+
+These things would be nice to do, but are not critical. They probably have to
+wait until the oldest maintained Node.js LTS release supports those features.
+
+[Unicode property escapes]: http://2ality.com/2017/07/regexp-unicode-property-escapes.html
+[Lookbehind assertions]: http://2ality.com/2017/05/regexp-lookbehind-assertions.html
+[Named capture groups]: http://2ality.com/2017/05/regexp-named-capture-groups.html
+
+
+License
+=======
+
+[MIT](LICENSE).

node_modules/js-tokens/index.js

+// Copyright 2014, 2015, 2016, 2017, 2018 Simon Lydell
+// License: MIT. (See LICENSE.)
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+})
+
+// This regex comes from regex.coffee, and is inserted here by generate-index.js
+// (run `npm run build`).
+exports.default = /((['"])(?:(?!\2|\\).|\\(?:\r\n|[\s\S]))*(\2)?|`(?:[^`\\$]|\\[\s\S]|\$(?!\{)|\$\{(?:[^{}]|\{[^}]*\}?)*\}?)*(`)?)|(\/\/.*)|(\/\*(?:[^*]|\*(?!\/))*(\*\/)?)|(\/(?!\*)(?:\[(?:(?![\]\\]).|\\.)*\]|(?![\/\]\\]).|\\.)+\/(?:(?!\s*(?:\b|[\u0080-\uFFFF$\\'"~({]|[+\-!](?!=)|\.?\d))|[gmiyus]{1,6}\b(?![\u0080-\uFFFF$\\]|\s*(?:[+\-*%&|^<>!=?({]|\/(?![\/*])))))|(0[xX][\da-fA-F]+|0[oO][0-7]+|0[bB][01]+|(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?)|((?!\d)(?:(?!\s)[$\w\u0080-\uFFFF]|\\u[\da-fA-F]{4}|\\u\{[\da-fA-F]+\})+)|(--|\+\+|&&|\|\||=>|\.{3}|(?:[+\-\/%&|^]|\*{1,2}|<{1,2}|>{1,3}|!=?|={1,2})=?|[?~.,:;[\](){}])|(\s+)|(^$|[\s\S])/g
+
+exports.matchToToken = function(match) {
+  var token = {type: "invalid", value: match[0], closed: undefined}
+       if (match[ 1]) token.type = "string" , token.closed = !!(match[3] || match[4])
+  else if (match[ 5]) token.type = "comment"
+  else if (match[ 6]) token.type = "comment", token.closed = !!match[7]
+  else if (match[ 8]) token.type = "regex"
+  else if (match[ 9]) token.type = "number"
+  else if (match[10]) token.type = "name"
+  else if (match[11]) token.type = "punctuator"
+  else if (match[12]) token.type = "whitespace"
+  return token
+}

node_modules/js-tokens/package.json

+{
+  "name": "js-tokens",
+  "version": "4.0.0",
+  "author": "Simon Lydell",
+  "license": "MIT",
+  "description": "A regex that tokenizes JavaScript.",
+  "keywords": [
+    "JavaScript",
+    "js",
+    "token",
+    "tokenize",
+    "regex"
+  ],
+  "files": [
+    "index.js"
+  ],
+  "repository": "lydell/js-tokens",
+  "scripts": {
+    "test": "mocha --ui tdd",
+    "esprima-compare": "node esprima-compare ./index.js everything.js/es5.js",
+    "build": "node generate-index.js",
+    "dev": "npm run build && npm test"
+  },
+  "devDependencies": {
+    "coffeescript": "2.1.1",
+    "esprima": "4.0.0",
+    "everything.js": "1.0.3",
+    "mocha": "5.0.0"
+  }
+}

node_modules/loose-envify/LICENSE

+The MIT License (MIT)
+
+Copyright (c) 2015 Andres Suarez <zertosh@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

node_modules/loose-envify/README.md

+# loose-envify
+
+[![Build Status](https://travis-ci.org/zertosh/loose-envify.svg?branch=master)](https://travis-ci.org/zertosh/loose-envify)
+
+Fast (and loose) selective `process.env` replacer using [js-tokens](https://github.com/lydell/js-tokens) instead of an AST. Works just like [envify](https://github.com/hughsk/envify) but much faster.
+
+## Gotchas
+
+* Doesn't handle broken syntax.
+* Doesn't look inside embedded expressions in template strings.
+  - **this won't work:**
+  ```js
+  console.log(`the current env is ${process.env.NODE_ENV}`);
+  ```
+* Doesn't replace oddly-spaced or oddly-commented expressions.
+  - **this won't work:**
+  ```js
+  console.log(process./*won't*/env./*work*/NODE_ENV);
+  ```
+
+## Usage/Options
+
+loose-envify has the exact same interface as [envify](https://github.com/hughsk/envify), including the CLI.
+
+## Benchmark
+
+```
+envify:
+
+  $ for i in {1..5}; do node bench/bench.js 'envify'; done
+  708ms
+  727ms
+  791ms
+  719ms
+  720ms
+
+loose-envify:
+
+  $ for i in {1..5}; do node bench/bench.js '../'; done
+  51ms
+  52ms
+  52ms
+  52ms
+  52ms
+```

node_modules/loose-envify/cli.js

+#!/usr/bin/env node
+'use strict';
+
+var looseEnvify = require('./');
+var fs = require('fs');
+
+if (process.argv[2]) {
+  fs.createReadStream(process.argv[2], {encoding: 'utf8'})
+    .pipe(looseEnvify(process.argv[2]))
+    .pipe(process.stdout);
+} else {
+  process.stdin.resume()
+  process.stdin
+    .pipe(looseEnvify(__filename))
+    .pipe(process.stdout);
+}

node_modules/loose-envify/custom.js

+// envify compatibility
+'use strict';
+
+module.exports = require('./loose-envify');

node_modules/loose-envify/index.js

+'use strict';
+
+module.exports = require('./loose-envify')(process.env);

node_modules/loose-envify/loose-envify.js

+'use strict';
+
+var stream = require('stream');
+var util = require('util');
+var replace = require('./replace');
+
+var jsonExtRe = /\.json$/;
+
+module.exports = function(rootEnv) {
+  rootEnv = rootEnv || process.env;
+  return function (file, trOpts) {
+    if (jsonExtRe.test(file)) {
+      return stream.PassThrough();
+    }
+    var envs = trOpts ? [rootEnv, trOpts] : [rootEnv];
+    return new LooseEnvify(envs);
+  };
+};
+
+function LooseEnvify(envs) {
+  stream.Transform.call(this);
+  this._data = '';
+  this._envs = envs;
+}
+util.inherits(LooseEnvify, stream.Transform);
+
+LooseEnvify.prototype._transform = function(buf, enc, cb) {
+  this._data += buf;
+  cb();
+};
+
+LooseEnvify.prototype._flush = function(cb) {
+  var replaced = replace(this._data, this._envs);
+  this.push(replaced);
+  cb();
+};

node_modules/loose-envify/package.json

+{
+  "name": "loose-envify",
+  "version": "1.4.0",
+  "description": "Fast (and loose) selective `process.env` replacer using js-tokens instead of an AST",
+  "keywords": [
+    "environment",
+    "variables",
+    "browserify",
+    "browserify-transform",
+    "transform",
+    "source",
+    "configuration"
+  ],
+  "homepage": "https://github.com/zertosh/loose-envify",
+  "license": "MIT",
+  "author": "Andres Suarez <zertosh@gmail.com>",
+  "main": "index.js",
+  "bin": {
+    "loose-envify": "cli.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/zertosh/loose-envify.git"
+  },
+  "scripts": {
+    "test": "tap test/*.js"
+  },
+  "dependencies": {
+    "js-tokens": "^3.0.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "browserify": "^13.1.1",
+    "envify": "^3.4.0",
+    "tap": "^8.0.0"
+  }
+}

node_modules/loose-envify/replace.js

+'use strict';
+
+var jsTokens = require('js-tokens').default;
+
+var processEnvRe = /\bprocess\.env\.[_$a-zA-Z][$\w]+\b/;
+var spaceOrCommentRe = /^(?:\s|\/[/*])/;
+
+function replace(src, envs) {
+  if (!processEnvRe.test(src)) {
+    return src;
+  }
+
+  var out = [];
+  var purge = envs.some(function(env) {
+    return env._ && env._.indexOf('purge') !== -1;
+  });
+
+  jsTokens.lastIndex = 0
+  var parts = src.match(jsTokens);
+
+  for (var i = 0; i < parts.length; i++) {
+    if (parts[i    ] === 'process' &&
+        parts[i + 1] === '.' &&
+        parts[i + 2] === 'env' &&
+        parts[i + 3] === '.') {
+      var prevCodeToken = getAdjacentCodeToken(-1, parts, i);
+      var nextCodeToken = getAdjacentCodeToken(1, parts, i + 4);
+      var replacement = getReplacementString(envs, parts[i + 4], purge);
+      if (prevCodeToken !== '.' &&
+          nextCodeToken !== '.' &&
+          nextCodeToken !== '=' &&
+          typeof replacement === 'string') {
+        out.push(replacement);
+        i += 4;
+        continue;
+      }
+    }
+    out.push(parts[i]);
+  }
+
+  return out.join('');
+}
+
+function getAdjacentCodeToken(dir, parts, i) {
+  while (true) {
+    var part = parts[i += dir];
+    if (!spaceOrCommentRe.test(part)) {
+      return part;
+    }
+  }
+}
+
+function getReplacementString(envs, name, purge) {
+  for (var j = 0; j < envs.length; j++) {
+    var env = envs[j];
+    if (typeof env[name] !== 'undefined') {
+      return JSON.stringify(env[name]);
+    }
+  }
+  if (purge) {
+    return 'undefined';
+  }
+}
+
+module.exports = replace;

node_modules/object-assign/index.js

+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+'use strict';
+/* eslint-disable no-unused-vars */
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+function toObject(val) {
+	if (val === null || val === undefined) {
+		throw new TypeError('Object.assign cannot be called with null or undefined');
+	}
+
+	return Object(val);
+}
+
+function shouldUseNative() {
+	try {
+		if (!Object.assign) {
+			return false;
+		}
+
+		// Detect buggy property enumeration order in older V8 versions.
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
+		test1[5] = 'de';
+		if (Object.getOwnPropertyNames(test1)[0] === '5') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test2 = {};
+		for (var i = 0; i < 10; i++) {
+			test2['_' + String.fromCharCode(i)] = i;
+		}
+		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+			return test2[n];
+		});
+		if (order2.join('') !== '0123456789') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test3 = {};
+		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+			test3[letter] = letter;
+		});
+		if (Object.keys(Object.assign({}, test3)).join('') !==
+				'abcdefghijklmnopqrst') {
+			return false;
+		}
+
+		return true;
+	} catch (err) {
+		// We don't expect any of the above to throw, but better to be safe.
+		return false;
+	}
+}
+
+module.exports = shouldUseNative() ? Object.assign : function (target, source) {
+	var from;
+	var to = toObject(target);
+	var symbols;
+
+	for (var s = 1; s < arguments.length; s++) {
+		from = Object(arguments[s]);
+
+		for (var key in from) {
+			if (hasOwnProperty.call(from, key)) {
+				to[key] = from[key];
+			}
+		}
+
+		if (getOwnPropertySymbols) {
+			symbols = getOwnPropertySymbols(from);
+			for (var i = 0; i < symbols.length; i++) {
+				if (propIsEnumerable.call(from, symbols[i])) {
+					to[symbols[i]] = from[symbols[i]];
+				}
+			}
+		}
+	}
+
+	return to;
+};

node_modules/object-assign/license

+The MIT License (MIT)
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

node_modules/object-assign/package.json

+{
+  "name": "object-assign",
+  "version": "4.1.1",
+  "description": "ES2015 `Object.assign()` ponyfill",
+  "license": "MIT",
+  "repository": "sindresorhus/object-assign",
+  "author": {
+    "name": "Sindre Sorhus",
+    "email": "sindresorhus@gmail.com",
+    "url": "sindresorhus.com"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "test": "xo && ava",
+    "bench": "matcha bench.js"
+  },
+  "files": [
+    "index.js"
+  ],
+  "keywords": [
+    "object",
+    "assign",
+    "extend",
+    "properties",
+    "es2015",
+    "ecmascript",
+    "harmony",
+    "ponyfill",
+    "prollyfill",
+    "polyfill",
+    "shim",
+    "browser"
+  ],
+  "devDependencies": {
+    "ava": "^0.16.0",
+    "lodash": "^4.16.4",
+    "matcha": "^0.7.0",
+    "xo": "^0.16.0"
+  }
+}

node_modules/object-assign/readme.md

+# object-assign [![Build Status](https://travis-ci.org/sindresorhus/object-assign.svg?branch=master)](https://travis-ci.org/sindresorhus/object-assign)
+
+> ES2015 [`Object.assign()`](http://www.2ality.com/2014/01/object-assign.html) [ponyfill](https://ponyfill.com)
+
+
+## Use the built-in
+
+Node.js 4 and up, as well as every evergreen browser (Chrome, Edge, Firefox, Opera, Safari),
+support `Object.assign()` :tada:. If you target only those environments, then by all
+means, use `Object.assign()` instead of this package.
+
+
+## Install
+
+```
+$ npm install --save object-assign
+```
+
+
+## Usage
+
+```js
+const objectAssign = require('object-assign');
+
+objectAssign({foo: 0}, {bar: 1});
+//=> {foo: 0, bar: 1}
+
+// multiple sources
+objectAssign({foo: 0}, {bar: 1}, {baz: 2});
+//=> {foo: 0, bar: 1, baz: 2}
+
+// overwrites equal keys
+objectAssign({foo: 0}, {foo: 1}, {foo: 2});
+//=> {foo: 2}
+
+// ignores null and undefined sources
+objectAssign({foo: 0}, null, {bar: 1}, undefined);
+//=> {foo: 0, bar: 1}
+```
+
+
+## API
+
+### objectAssign(target, [source, ...])
+
+Assigns enumerable own properties of `source` objects to the `target` object and returns the `target` object. Additional `source` objects will overwrite previous ones.
+
+
+## Resources
+
+- [ES2015 spec - Object.assign](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-object.assign)
+
+
+## Related
+
+- [deep-assign](https://github.com/sindresorhus/deep-assign) - Recursive `Object.assign()`
+
+
+## License
+
+MIT © [Sindre Sorhus](https://sindresorhus.com)

node_modules/react-animate-on-change/.babelrc

+{ "presets": ["react", "es2015"] }

node_modules/react-animate-on-change/.travis.yml

+language: node_js
+cache:
+  directories:
+    - node_modules
+    - test/node_modules
+node_js:
+  - '10'

node_modules/react-animate-on-change/README.md

+# react-animate-on-change
+
+[![Build Status](https://travis-ci.org/arve0/react-animate-on-change.svg?branch=master)](https://travis-ci.org/arve0/react-animate-on-change)
+
+Animate your react components on props or state changes, in contrast to [entries added/removed from arrays](https://facebook.github.io/react/docs/animation.html).
+
+<img src="demo.gif" width="300">
+
+## Install
+```sh
+npm install react-animate-on-change react
+```
+
+## Usage
+```js
+import AnimateOnChange from 'react-animate-on-change'
+// CommonJS:
+// const AnimateOnChange = require('react-animate-on-change').default
+
+// functional component
+const Score = (props) =>
+  <AnimateOnChange
+    baseClassName="Score"
+    animationClassName="Score--bounce"
+    animate={props.diff != 0}>
+      Score: {props.score}
+  </AnimateOnChange>
+```
+
+The example above will (roughly) render to:
+
+**On enter or changes in `props.diff` or `props.score`:**
+```html
+<span class="Score Score--bounce">
+  <span>Score: 100</span>
+</span>
+```
+
+**On animation end:**
+```html
+<span class="Score">
+  <span>Score: 100</span>
+</span>
+```
+
+Also, [see the example folder](example).
+
+## Props
+`baseClassName {string}` : Base class name that be added to the component.
+
+`animationClassName {string}` : Animation class name. Added when `animate == true`. Removed when the event [`animationend`](http://www.w3.org/TR/css3-animations/#animationend) is triggered.
+
+`animate {bool}` : Whether component should animate.
+
+`customTag {string}` : HTML tag of the component.
+
+`onAnimationEnd {() => void)}` : Callback which is called when animation ends.
+
+## Develop
+Setup:
+```sh
+npm install
+cd test
+npm install
+cd ..
+```
+
+Add tests in [test/client-tests.js](client-tests.js), start tests with:
+```
+npm test
+```
+
+Build and view example:
+```
+npm run build-example
+open example/index.html
+```
+
+## Known issues
+- The browser must support CSS3 animations.

node_modules/react-animate-on-change/example/index.d.ts

+export {};

node_modules/react-animate-on-change/example/index.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>react-animate-on-change exmaple</title>
+  <style>
+    .Score {
+      background-color: #000;
+      color: #fff;
+      padding: 5px;
+      border-radius: 3px;
+      position: fixed;
+      top: 45%;
+      left: 45%;
+    }
+
+    .Score--bounce {
+      animation: Score-keyframes--bounce .8s ease-out
+    }
+
+    @keyframes Score-keyframes--bounce {
+      0%,
+      to {
+        transform: rotate(0)
+      }
+      10% {
+        transform: scale(1.1)
+      }
+      20% {
+        transform: rotate(4deg) translateY(-12px)
+      }
+      40% {
+        transform: rotate(2deg) translateY(0)
+      }
+      60% {
+        transform: rotate(-2deg) translateY(-8px)
+      }
+      80% {
+        transform: rotate(-1deg) translateY(0)
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="bundle.js"></script>
+</body>
+
+</html>
\ No newline at end of file

node_modules/react-animate-on-change/example/index.tsx

+import React from 'react'
+import ReactDOM from 'react-dom'
+import { createStore, Store } from 'redux'
+import { connect, Provider } from 'react-redux'
+import AnimateOnChange from '../index.js'
+
+const initialState = {
+  diff: 0,
+  score: 0
+}
+
+interface Action {
+  type: string,
+  diff: number
+}
+
+const reducer = (state = initialState, action: Action) => {
+  switch (action.type) {
+    case 'INCREMENT_SCORE':
+      return { ...state,
+        diff: action.diff,
+        score: state.score + action.diff }
+    default:
+      return state
+  }
+}
+
+const store: Store<typeof initialState, Action> = createStore(reducer)
+setInterval(() => {
+  store.dispatch({
+    type: 'INCREMENT_SCORE',
+    diff: 10
+  })
+}, 2000)
+
+interface Props {
+  diff: number,
+  score: number,
+}
+
+function handleClick(): void {
+  console.log('click!');
+}
+
+const AppComponent = ({ diff, score }: Props) =>
+  <div className='App'>
+    <AnimateOnChange
+      baseClassName='Score'
+      animationClassName='Score--bounce'
+      animate={diff !== 0}
+      id="example-id"
+      onClick={handleClick}
+    >
+        Score: {score}
+    </AnimateOnChange>
+  </div>
+
+const App = connect(s => s)(AppComponent)
+
+// @ts-ignore
+ReactDOM.render(<Provider store={store}><App/></Provider>,
+                document.getElementById('root'))

node_modules/react-animate-on-change/example/webpack.config.js

+var path = require('path')
+
+module.exports = {
+  entry: path.resolve(__dirname, 'index.tsx'),
+  output: {
+    path: path.resolve(__dirname),
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      },
+    ]
+  },
+  resolve: {
+    extensions: [ '.tsx', '.ts', '.js' ]
+  },
+  mode: 'development'
+}

node_modules/react-animate-on-change/index.d.ts

+import { Component } from 'react';
+export interface Props {
+    children: any;
+    animate: boolean;
+    baseClassName: string;
+    animationClassName: string;
+    customTag?: string;
+    onAnimationEnd?: () => void;
+}
+export interface State {
+    animating: boolean;
+    clearAnimationClass: boolean;
+}
+interface AnimateOnChange {
+    elm: HTMLElement;
+    setElementRef: (ref: HTMLElement) => void;
+}
+/**
+ * # AnimateOnChange component.
+ * Adds `animationClassName` when `animate` is true, then removes
+ * `animationClassName` when animation is done (event `animationend` is
+ * triggered).
+ *
+ * @prop {string} baseClassName - Base class name.
+ * @prop {string} animationClassName - Class added when `animate == true`.
+ * @prop {bool} animate - Wheter to animate component.
+ */
+declare class AnimateOnChange extends Component<Props & any, State> implements AnimateOnChange {
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    addEventListener(type: string, elm: HTMLElement, eventHandler: (e: Event) => void): void;
+    removeEventListeners(type: string, elm: HTMLElement, eventHandler: (e: Event) => void): void;
+    updateEvents(type: string, newEvent: string): void;
+    animationStart(e: Event): void;
+    animationEnd(e: Event): void;
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
+    render(): JSX.Element;
+}
+export default AnimateOnChange;

node_modules/react-animate-on-change/index.js

+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var events = {
+    start: ['animationstart', 'webkitAnimationStart', 'mozAnimationStart', 'oanimationstart', 'MSAnimationStart'],
+    end: ['animationend', 'webkitAnimationEnd', 'mozAnimationEnd', 'oanimationend', 'MSAnimationEnd'],
+    startRemoved: [],
+    endRemoved: []
+};
+/**
+ * # AnimateOnChange component.
+ * Adds `animationClassName` when `animate` is true, then removes
+ * `animationClassName` when animation is done (event `animationend` is
+ * triggered).
+ *
+ * @prop {string} baseClassName - Base class name.
+ * @prop {string} animationClassName - Class added when `animate == true`.
+ * @prop {bool} animate - Wheter to animate component.
+ */
+var AnimateOnChange = /** @class */ (function (_super) {
+    __extends(AnimateOnChange, _super);
+    function AnimateOnChange(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = { animating: false, clearAnimationClass: false };
+        _this.animationStart = _this.animationStart.bind(_this);
+        _this.animationEnd = _this.animationEnd.bind(_this);
+        _this.setElementRef = function (ref) {
+            _this.elm = ref;
+        };
+        return _this;
+    }
+    AnimateOnChange.prototype.componentDidMount = function () {
+        this.addEventListener('start', this.elm, this.animationStart);
+        this.addEventListener('end', this.elm, this.animationEnd);
+    };
+    AnimateOnChange.prototype.componentWillUnmount = function () {
+        this.removeEventListeners('start', this.elm, this.animationStart);
+        this.removeEventListeners('end', this.elm, this.animationEnd);
+    };
+    AnimateOnChange.prototype.addEventListener = function (type, elm, eventHandler) {
+        // until an event has been triggered bind them all
+        events[type].map(function (event) {
+            // console.log(`adding ${event}`)
+            // @ts-ignore
+            elm.addEventListener(event, eventHandler);
+        });
+    };
+    AnimateOnChange.prototype.removeEventListeners = function (type, elm, eventHandler) {
+        events[type].map(function (event) {
+            // console.log(`removing ${event}`)
+            // @ts-ignore
+            elm.removeEventListener(event, eventHandler);
+        });
+    };
+    AnimateOnChange.prototype.updateEvents = function (type, newEvent) {
+        // console.log(`updating ${type} event to ${newEvent}`)
+        events[type + 'Removed'] = events[type].filter(function (e) { return e !== newEvent; });
+        events[type] = [newEvent];
+    };
+    AnimateOnChange.prototype.animationStart = function (e) {
+        if (events['start'].length > 1) {
+            this.updateEvents('start', e.type);
+            this.removeEventListeners('startRemoved', this.elm, this.animationStart);
+        }
+        this.setState({ animating: true, clearAnimationClass: false });
+    };
+    AnimateOnChange.prototype.animationEnd = function (e) {
+        if (events['end'].length > 1) {
+            this.updateEvents('end', e.type);
+            this.removeEventListeners('endRemoved', this.elm, this.animationStart);
+        }
+        // send separate, animation state change will not render
+        this.setState({ clearAnimationClass: true }); // renders
+        this.setState({ animating: false, clearAnimationClass: false });
+        if (typeof this.props.onAnimationEnd === 'function') {
+            this.props.onAnimationEnd();
+        }
+    };
+    AnimateOnChange.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (this.state.animating !== nextState.animating) {
+            // do not render on animation change
+            return false;
+        }
+        return true;
+    };
+    AnimateOnChange.prototype.render = function () {
+        var clearAnimationClass = this.state.clearAnimationClass;
+        var _a = this.props, baseClassName = _a.baseClassName, animate = _a.animate, animationClassName = _a.animationClassName, customTag = _a.customTag, children = _a.children, onAnimationEnd = _a.onAnimationEnd, // unpack, such that otherProps does not contain it
+        otherProps = __rest(_a, ["baseClassName", "animate", "animationClassName", "customTag", "children", "onAnimationEnd"]);
+        var className = baseClassName;
+        if (animate && !clearAnimationClass) {
+            className += " " + animationClassName;
+        }
+        var Tag = customTag || 'span';
+        return react_1.default.createElement(Tag, __assign({ ref: this.setElementRef, className: className }, otherProps), children);
+    };
+    return AnimateOnChange;
+}(react_1.Component));
+exports.default = AnimateOnChange;

node_modules/react-animate-on-change/index.tsx

+import React, { Component, ReactInstance } from 'react'
+
+interface Events {
+  [index:string]: string[]
+}
+
+const events: Events = {
+  start: ['animationstart', 'webkitAnimationStart', 'mozAnimationStart', 'oanimationstart', 'MSAnimationStart'],
+  end: ['animationend', 'webkitAnimationEnd', 'mozAnimationEnd', 'oanimationend', 'MSAnimationEnd'],
+  startRemoved: [],
+  endRemoved: []
+}
+
+export interface Props {
+  children: any,
+  animate: boolean,
+  baseClassName: string,
+  animationClassName: string,
+  customTag?: string,
+  onAnimationEnd?: () => void,
+}
+
+export interface State {
+  animating: boolean,
+  clearAnimationClass: boolean
+}
+
+interface AnimateOnChange {
+  elm: HTMLElement,
+  setElementRef: (ref: HTMLElement) => void
+}
+
+/**
+ * # AnimateOnChange component.
+ * Adds `animationClassName` when `animate` is true, then removes
+ * `animationClassName` when animation is done (event `animationend` is
+ * triggered).
+ *
+ * @prop {string} baseClassName - Base class name.
+ * @prop {string} animationClassName - Class added when `animate == true`.
+ * @prop {bool} animate - Wheter to animate component.
+ */
+class AnimateOnChange extends Component<Props & any, State> implements AnimateOnChange {
+  constructor (props: Props) {
+    super(props)
+    this.state = { animating: false, clearAnimationClass: false }
+    this.animationStart = this.animationStart.bind(this)
+    this.animationEnd = this.animationEnd.bind(this)
+
+    this.setElementRef = (ref) => {
+      this.elm = ref
+    }
+  }
+
+  componentDidMount () {
+    this.addEventListener('start', this.elm, this.animationStart)
+    this.addEventListener('end', this.elm, this.animationEnd)
+  }
+
+  componentWillUnmount () {
+    this.removeEventListeners('start', this.elm, this.animationStart)
+    this.removeEventListeners('end', this.elm, this.animationEnd)
+  }
+
+  addEventListener (type: string, elm: HTMLElement, eventHandler: (e: Event) => void) {
+    // until an event has been triggered bind them all
+    events[type].map(event => {
+      // console.log(`adding ${event}`)
+      // @ts-ignore
+      elm.addEventListener(event, eventHandler)
+    })
+  }
+
+  removeEventListeners (type: string, elm: HTMLElement, eventHandler: (e: Event) => void) {
+    events[type].map(event => {
+      // console.log(`removing ${event}`)
+      // @ts-ignore
+      elm.removeEventListener(event, eventHandler)
+    })
+  }
+
+  updateEvents (type: string, newEvent: string) {
+    // console.log(`updating ${type} event to ${newEvent}`)
+    events[type + 'Removed'] = events[type].filter(e => e !== newEvent)
+    events[type] = [newEvent]
+  }
+
+  animationStart (e: Event) {
+    if (events['start'].length > 1) {
+      this.updateEvents('start', e.type)
+      this.removeEventListeners('startRemoved', this.elm, this.animationStart)
+    }
+    this.setState({ animating: true, clearAnimationClass: false })
+  }
+
+  animationEnd (e: Event) {
+    if (events['end'].length > 1) {
+      this.updateEvents('end', e.type)
+      this.removeEventListeners('endRemoved', this.elm, this.animationStart)
+    }
+    // send separate, animation state change will not render
+    this.setState({ clearAnimationClass: true })  // renders
+    this.setState({ animating: false, clearAnimationClass: false })
+
+    if (typeof this.props.onAnimationEnd === 'function') {
+      this.props.onAnimationEnd()
+    }
+  }
+
+  shouldComponentUpdate (nextProps: Props, nextState: State) {
+    if (this.state.animating !== nextState.animating) {
+      // do not render on animation change
+      return false
+    }
+    return true
+  }
+
+  render () {
+    const { clearAnimationClass } = this.state;
+    const {
+      baseClassName,
+      animate,
+      animationClassName,
+      customTag,
+      children,
+      onAnimationEnd, // unpack, such that otherProps does not contain it
+      ...otherProps
+    } = this.props;
+
+    let className = baseClassName
+
+    if (animate && !clearAnimationClass) {
+      className += ` ${animationClassName}`
+    }
+
+    let Tag = customTag || 'span';
+
+    return <Tag ref={this.setElementRef} className={className} {...otherProps}>
+      {children}
+    </Tag>
+  }
+}
+
+export default AnimateOnChange

node_modules/react-animate-on-change/package.json

+{
+  "name": "react-animate-on-change",
+  "version": "2.2.0",
+  "description": "Animate your components on state change",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsc",
+    "build-example": "cd example && webpack",
+    "postversion": "npm run build && npm run build-example && git add . && git commit --amend --no-edit",
+    "postpublish": "git push && git push --tags",
+    "test": "npm run build && mocha"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arve0/react-animate-on-change.git"
+  },
+  "keywords": [
+    "react-component",
+    "react",
+    "animate",
+    "animation",
+    "css"
+  ],
+  "author": "Arve Seljebu",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/arve0/react-animate-on-change/issues"
+  },
+  "homepage": "https://github.com/arve0/react-animate-on-change#readme",
+  "devDependencies": {
+    "@types/node": "^10.3.1",
+    "@types/react": "^16.3.16",
+    "@types/react-dom": "^16.0.6",
+    "@types/react-redux": "^6.0.2",
+    "debug": "^3.1.0",
+    "mocha": "^6.1.4",
+    "puppeteer-firefox": "^0.5.0",
+    "react": ">15.0.0",
+    "react-dom": ">15.0.0",
+    "react-redux": "^5.0.7",
+    "redux": "^4.0.0",
+    "ts-loader": "^4.4.1",
+    "typescript": "^2.9.1",
+    "webpack": "^4.11.1",
+    "webpack-cli": "^3.0.3"
+  },
+  "peerDependencies": {
+    "react": ">15.0.0"
+  }
+}

node_modules/react-animate-on-change/test/index.html

+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Browser testing with puppeteer</title>
+    <!-- avoid 404 for favicon.ico -->
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+</head>
+<body>
+    <div id="root"></div>
+
+    <script src="/node_modules/react/umd/react.production.min.js"></script>
+    <script src="/node_modules/react-dom/umd/react-dom.production.min.js"></script>
+    <script>
+        exports = {}
+        var nameMap = {
+            'react': 'React'
+        }
+        function require(name) {
+            return nameMap[name] ? window[nameMap[name]] : window[name]
+        }
+    </script>
+    <script src="/index.js"></script>
+</body>
+</html>

node_modules/react-animate-on-change/test/server.js

+const http = require("http");
+const fs = require("fs");
+const { normalize, join } = require("path");
+
+let rootPath;
+const mimeTypes = {
+    'html': 'text/html',
+    'jpeg': 'image/jpeg',
+    'jpg': 'image/jpeg',
+    'png': 'image/png',
+    'js': 'text/javascript',
+    'css': 'text/css',
+    'default': 'text/plain',
+};
+
+const webserver = http.createServer(sendFile);
+
+function sendFile(request, response) {
+    let path = request.url || '';
+    let safePath = normalize(path).replace('^(\.\.[\/\\])+', '');
+    if (safePath === '' || safePath === '/' || safePath === '\\') {
+        safePath = 'index.html';
+    }
+    let filename = join(rootPath, safePath);
+    if (!fs.existsSync(filename)) {
+        console.log('Server: 404 - ' + request.method + ': ' + request.url);
+        response.statusCode = 404;
+        response.end('File not found.');
+    }
+    else {
+        // console.log('Server: 200 - ' + request.method + ': ' + request.url);
+        let headers = {
+            // @ts-ignore
+            'Content-Type': mimeTypes[filename.split('.').pop()] || mimeTypes['default']
+        };
+        response.writeHead(200, headers);
+        response.end(fs.readFileSync(filename));
+    }
+}
+
+function start(path = __dirname, port = 8888) {
+    rootPath = path
+    return new Promise((resolve, reject) => {
+        webserver.listen(port, (err) => {
+            if (err) {
+                return reject(err);
+            }
+            console.log(`Server: Listening on port ${port}`);
+            resolve();
+        });
+    });
+}
+exports.start = start;
+function shutdown() {
+    webserver.close();
+}
+exports.shutdown = shutdown;
+//# sourceMappingURL=server.js.map

node_modules/react-animate-on-change/test/test.js

+const server = require('./server')
+const configuration = require('../package.json')
+const puppeteer = configuration.devDependencies.puppeteer
+    ? require('puppeteer')
+    : require('puppeteer-firefox');
+const path = require('path')
+const assert = require('assert')
+
+// configuration
+const rootPath = path.join(__dirname, '..')  // which folder to serve over http
+const port = 8888  // which port to use for http server
+const mainPage = `http://localhost:${port}/test/index.html`
+const headless = true  // false: show browser, true: hide browser
+const slowMo = false  // true: each browser action will take 100 milliseconds
+    ? 100
+    : 0
+
+const ANIMATION_TIME = slowMo ? 1000 : 100
+const ANIMATION_SETTLE = slowMo ? 500 : 50
+const STYLE = `
+    #root {
+        margin-top: 50vh;
+        margin-left: 50vw;
+    }
+    .base {
+        background-color: black;
+        color: white;
+        border-radius: 3px;
+        padding: 5px;
+        width: 100px;
+    }
+    .fade {
+        animation-name: fade-in;
+        animation-duration: ${ANIMATION_TIME}ms;
+    }
+        @keyframes fade-in {
+        0% { opacity: 0; }
+        100% { opacity: 1; }
+    }`
+
+// globals
+let browser = null
+let page = null
+
+before(async function () {
+    this.timeout(30 * 1000) // starting browser may take more than 2 seconds
+
+    await server.start(rootPath, port)
+    browser = await puppeteer.launch({ headless, slowMo })
+    page = (await browser.pages())[0]
+
+    page.on('console', async function (msg) {
+        if (msg.type() === 'error' && msg.args().length) {
+            let args = await Promise.all(msg.args().map(arg => arg.jsonValue()))
+            console.error("Browser console.error:", ...args)
+        } else {
+            console.log(msg.text())
+        }
+    })
+})
+
+beforeEach(async function () {
+    await page.goto(mainPage)
+    await page.addStyleTag({ content: STYLE })
+    await page.evaluate(setup)
+})
+
+after(function () {
+    browser.close()
+    server.shutdown()
+})
+
+describe('tests', function () {
+    this.timeout(slowMo === 0 ? 2000 : 0)
+
+    it('should render to dom', async () => {
+        await page.evaluate(renderAnimated)
+        await page.waitFor(10)
+        const children = await page.evaluate(() => root.children.length)
+        assert.equal(children, 1, 'no children in root')
+        const tag = await page.evaluate(() => root.children[0].tagName)
+        assert.equal(tag, 'SPAN', `custom tag 'span' not rendered, got ${tag}`)
+    })
+
+    it('animation class name is added on enter', async () => {
+        await page.evaluate(renderAnimated)
+        await page.waitFor(10)
+        const fadeElement = await page.$('.fade')
+        assert.notDeepStrictEqual(fadeElement, null, 'animation class not added')
+    })
+
+    it('removes animation class', async () => {
+        await page.evaluate(renderAnimated)
+        await page.waitFor(ANIMATION_TIME + ANIMATION_SETTLE)
+        const fadeElement = await page.$('.fade')
+        assert.deepStrictEqual(fadeElement, null, 'animation class not removed')
+    })
+
+    it('adds animation class on props change', async () => {
+        await page.evaluate(renderUpdateProps, ANIMATION_TIME, ANIMATION_SETTLE)
+
+        await page.waitFor(ANIMATION_TIME + ANIMATION_SETTLE)
+        let fadeElement = await page.$('.fade')
+        assert.deepStrictEqual(fadeElement, null, 'animation class not removed')
+
+        await page.waitFor(ANIMATION_SETTLE + 0.5 * ANIMATION_TIME)
+        const textContent = await page.$eval('.fade', element => element.textContent)
+        assert.equal(textContent, 'updated text')
+    })
+
+    it('define custom tag', async () => {
+        await page.evaluate(renderAnimated, { tag: 'div' })
+        const tag = await page.$eval('#root', root => root.children[0].tagName)
+        assert.equal(tag, 'DIV', `custom tag 'div' not rendered, got ${tag}`)
+    })
+
+    it('calls back when animation complete', async () => {
+        await page.evaluate(renderAnimated, { cb: true })
+        await page.waitFor(ANIMATION_TIME + ANIMATION_SETTLE)
+        const callCount = await page.$eval('#root', root => root.callCount)
+        assert.equal(callCount, 1)
+    })
+
+    it('should support other props', async () => {
+        await page.evaluate(renderAnimated, { someProp: 'asdf' })
+        const someProp = await page.$eval('.base', base => base.getAttribute('someProp'))
+        assert.equal(someProp, 'asdf', 'attribute someProp not rendered to dom')
+    })
+})
+
+function setup() {
+    window.root = document.getElementById('root')
+
+    window.Animated = ({ children = 'text', tag = 'span', cb, ...rest }) =>
+        React.createElement(AnimateOnChange, Object.assign({
+            baseClassName: "base",
+            animationClassName: "fade",
+            animate: true,
+            customTag: tag,
+            onAnimationEnd: cb
+        }, rest), children)
+
+    class UpdatePropsAfterAnimationTimePlus2xAnimationSettle extends React.Component {
+        constructor(props) {
+            super(props)
+            this.state = {
+                text: 'initial text'
+            }
+            setTimeout(() => {
+                this.setState({ text: 'updated text' })
+            }, props.ANIMATION_TIME + 2 * props.ANIMATION_SETTLE)
+        }
+        render() {
+            return React.createElement(AnimateOnChange, {
+                baseClassName: "base",
+                animationClassName: "fade",
+                animate: true,
+            }, this.state.text)
+        }
+    }
+    window.UpdatePropsAfterAnimationTimePlus2xAnimationSettle = UpdatePropsAfterAnimationTimePlus2xAnimationSettle
+}
+
+function renderAnimated(props) {
+    if (props && props.cb) {
+        props.cb = () => {
+            if (!root.callCount) { root.callCount = 0 }
+            root.callCount += 1
+        }
+    }
+    ReactDOM.render(React.createElement(Animated, props), root)
+}
+
+// AnimateOnChange with prop change after ANIMATION_TIME + 2 * ANIMATION_SETTLE
+function renderUpdateProps(ANIMATION_TIME, ANIMATION_SETTLE) {
+    ReactDOM.render(React.createElement(UpdatePropsAfterAnimationTimePlus2xAnimationSettle, {
+        ANIMATION_TIME, ANIMATION_SETTLE
+    }), root)
+}

node_modules/react-animate-on-change/tsconfig.json

+{
+  "include": [
+    "*.tsx"
+  ],
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "declaration": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+  }
+}

node_modules/react/LICENSE

+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

node_modules/react/README.md

+# `react`
+
+React is a JavaScript library for creating user interfaces.
+
+The `react` package contains only the functionality necessary to define React components. It is typically used together with a React renderer like `react-dom` for the web, or `react-native` for the native environments.
+
+**Note:** by default, React will be in development mode. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages. Don't forget to use the [production build](https://reactjs.org/docs/optimizing-performance.html#use-the-production-build) when deploying your application.
+
+## Example Usage
+
+```js
+var React = require('react');
+```

node_modules/react/build-info.json

+{
+  "branch": "pull/21051",
+  "buildNumber": "287151",
+  "checksum": "94f5c65",
+  "commit": "12adaffef",
+  "environment": "ci",
+  "reactVersion": "17.0.0-12adaffef"
+}

node_modules/react/cjs/react-jsx-dev-runtime.production.min.js

+/** @license React v17.0.2
+ * react-jsx-dev-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';require("object-assign");require("react");exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var a=Symbol.for;exports.Fragment=a("react.fragment")}exports.jsxDEV=void 0;

node_modules/react/cjs/react-jsx-dev-runtime.profiling.min.js

+/** @license React v17.0.2
+ * react-jsx-dev-runtime.profiling.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';require("object-assign");require("react");exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var a=Symbol.for;exports.Fragment=a("react.fragment")}exports.jsxDEV=void 0;

node_modules/react/cjs/react-jsx-runtime.production.min.js

+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';require("object-assign");var f=require("react"),g=60103;exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");exports.Fragment=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;

node_modules/react/cjs/react-jsx-runtime.profiling.min.js

+/** @license React v17.0.2
+ * react-jsx-runtime.profiling.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';require("object-assign");var f=require("react"),g=60103;exports.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");exports.Fragment=h("react.fragment")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;

node_modules/react/cjs/react.production.min.js

+/** @license React v17.0.2
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';var l=require("object-assign"),n=60103,p=60106;exports.Fragment=60107;exports.StrictMode=60108;exports.Profiler=60114;var q=60109,r=60110,t=60112;exports.Suspense=60113;var u=60115,v=60116;
+if("function"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w("react.element");p=w("react.portal");exports.Fragment=w("react.fragment");exports.StrictMode=w("react.strict_mode");exports.Profiler=w("react.profiler");q=w("react.provider");r=w("react.context");t=w("react.forward_ref");exports.Suspense=w("react.suspense");u=w("react.memo");v=w("react.lazy")}var x="function"===typeof Symbol&&Symbol.iterator;
+function y(a){if(null===a||"object"!==typeof a)return null;a=x&&a[x]||a["@@iterator"];return"function"===typeof a?a:null}function z(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return"Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}
+var A={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},B={};function C(a,b,c){this.props=a;this.context=b;this.refs=B;this.updater=c||A}C.prototype.isReactComponent={};C.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error(z(85));this.updater.enqueueSetState(this,a,b,"setState")};C.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate")};
+function D(){}D.prototype=C.prototype;function E(a,b,c){this.props=a;this.context=b;this.refs=B;this.updater=c||A}var F=E.prototype=new D;F.constructor=E;l(F,C.prototype);F.isPureReactComponent=!0;var G={current:null},H=Object.prototype.hasOwnProperty,I={key:!0,ref:!0,__self:!0,__source:!0};
+function J(a,b,c){var e,d={},k=null,h=null;if(null!=b)for(e in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)H.call(b,e)&&!I.hasOwnProperty(e)&&(d[e]=b[e]);var g=arguments.length-2;if(1===g)d.children=c;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];d.children=f}if(a&&a.defaultProps)for(e in g=a.defaultProps,g)void 0===d[e]&&(d[e]=g[e]);return{$$typeof:n,type:a,key:k,ref:h,props:d,_owner:G.current}}
+function K(a,b){return{$$typeof:n,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function L(a){return"object"===typeof a&&null!==a&&a.$$typeof===n}function escape(a){var b={"=":"=0",":":"=2"};return"$"+a.replace(/[=:]/g,function(a){return b[a]})}var M=/\/+/g;function N(a,b){return"object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)}
+function O(a,b,c,e,d){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case n:case p:h=!0}}if(h)return h=a,d=d(h),a=""===e?"."+N(h,0):e,Array.isArray(d)?(c="",null!=a&&(c=a.replace(M,"$&/")+"/"),O(d,b,c,"",function(a){return a})):null!=d&&(L(d)&&(d=K(d,c+(!d.key||h&&h.key===d.key?"":(""+d.key).replace(M,"$&/")+"/")+a)),b.push(d)),1;h=0;e=""===e?".":e+":";if(Array.isArray(a))for(var g=
+0;g<a.length;g++){k=a[g];var f=e+N(k,g);h+=O(k,b,c,f,d)}else if(f=y(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=e+N(k,g++),h+=O(k,b,c,f,d);else if("object"===k)throw b=""+a,Error(z(31,"[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b));return h}function P(a,b,c){if(null==a)return a;var e=[],d=0;O(a,e,"","",function(a){return b.call(c,a,d++)});return e}
+function Q(a){if(-1===a._status){var b=a._result;b=b();a._status=0;a._result=b;b.then(function(b){0===a._status&&(b=b.default,a._status=1,a._result=b)},function(b){0===a._status&&(a._status=2,a._result=b)})}if(1===a._status)return a._result;throw a._result;}var R={current:null};function S(){var a=R.current;if(null===a)throw Error(z(321));return a}var T={ReactCurrentDispatcher:R,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:G,IsSomeRendererActing:{current:!1},assign:l};
+exports.Children={map:P,forEach:function(a,b,c){P(a,function(){b.apply(this,arguments)},c)},count:function(a){var b=0;P(a,function(){b++});return b},toArray:function(a){return P(a,function(a){return a})||[]},only:function(a){if(!L(a))throw Error(z(143));return a}};exports.Component=C;exports.PureComponent=E;exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=T;
+exports.cloneElement=function(a,b,c){if(null===a||void 0===a)throw Error(z(267,a));var e=l({},a.props),d=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=G.current);void 0!==b.key&&(d=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)H.call(b,f)&&!I.hasOwnProperty(f)&&(e[f]=void 0===b[f]&&void 0!==g?g[f]:b[f])}var f=arguments.length-2;if(1===f)e.children=c;else if(1<f){g=Array(f);for(var m=0;m<f;m++)g[m]=arguments[m+2];e.children=g}return{$$typeof:n,type:a.type,
+key:d,ref:k,props:e,_owner:h}};exports.createContext=function(a,b){void 0===b&&(b=null);a={$$typeof:r,_calculateChangedBits:b,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:q,_context:a};return a.Consumer=a};exports.createElement=J;exports.createFactory=function(a){var b=J.bind(null,a);b.type=a;return b};exports.createRef=function(){return{current:null}};exports.forwardRef=function(a){return{$$typeof:t,render:a}};exports.isValidElement=L;
+exports.lazy=function(a){return{$$typeof:v,_payload:{_status:-1,_result:a},_init:Q}};exports.memo=function(a,b){return{$$typeof:u,type:a,compare:void 0===b?null:b}};exports.useCallback=function(a,b){return S().useCallback(a,b)};exports.useContext=function(a,b){return S().useContext(a,b)};exports.useDebugValue=function(){};exports.useEffect=function(a,b){return S().useEffect(a,b)};exports.useImperativeHandle=function(a,b,c){return S().useImperativeHandle(a,b,c)};
+exports.useLayoutEffect=function(a,b){return S().useLayoutEffect(a,b)};exports.useMemo=function(a,b){return S().useMemo(a,b)};exports.useReducer=function(a,b,c){return S().useReducer(a,b,c)};exports.useRef=function(a){return S().useRef(a)};exports.useState=function(a){return S().useState(a)};exports.version="17.0.2";

node_modules/react/index.js

+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react.production.min.js');
+} else {
+  module.exports = require('./cjs/react.development.js');
+}

node_modules/react/jsx-dev-runtime.js

+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-dev-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-dev-runtime.development.js');
+}

node_modules/react/jsx-runtime.js

+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-jsx-runtime.production.min.js');
+} else {
+  module.exports = require('./cjs/react-jsx-runtime.development.js');
+}

node_modules/react/package.json

+{
+  "name": "react",
+  "description": "React is a JavaScript library for building user interfaces.",
+  "keywords": [
+    "react"
+  ],
+  "version": "17.0.2",
+  "homepage": "https://reactjs.org/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "build-info.json",
+    "index.js",
+    "cjs/",
+    "umd/",
+    "jsx-runtime.js",
+    "jsx-dev-runtime.js"
+  ],
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/react"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "dependencies": {
+    "loose-envify": "^1.1.0",
+    "object-assign": "^4.1.1"
+  },
+  "browserify": {
+    "transform": [
+      "loose-envify"
+    ]
+  }
+}

package-lock.json

+{
+  "name": "ecommerce-maven",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "react-animate-on-change": "^2.2.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-animate-on-change": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-animate-on-change/-/react-animate-on-change-2.2.0.tgz",
+      "integrity": "sha512-cM0YHbsxIh8fshX/U24+pk4nDG7Ike9NsEy21reqJPqVt6xRA+6oYkaQHEggINKjYEMbztwK40Ro0/EHZ5naVQ==",
+      "peerDependencies": {
+        "react": ">15.0.0"
+      }
+    }
+  },
+  "dependencies": {
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "peer": true
+    },
+    "react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-animate-on-change": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-animate-on-change/-/react-animate-on-change-2.2.0.tgz",
+      "integrity": "sha512-cM0YHbsxIh8fshX/U24+pk4nDG7Ike9NsEy21reqJPqVt6xRA+6oYkaQHEggINKjYEMbztwK40Ro0/EHZ5naVQ==",
+      "requires": {}
+    }
+  }
+}

package.json

+{
+  "dependencies": {
+    "react-animate-on-change": "^2.2.0"
+  }
+}