From 88d65b57416e834e97aaf6e52fb10bf61ac123cc Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Fri, 15 Mar 2019 09:28:37 -0600
Subject: [PATCH 01/29] Install styled-components and update react version

---
 package.json |   7 ++-
 yarn.lock    | 173 ++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 170 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 874a09a27..7b2ddddf1 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
     "classnames": "^2.2.1",
     "date-fns": "2.0.0-alpha.7",
     "prop-types": "^15.5.10",
-    "react-list": "^0.8.8"
+    "react-list": "^0.8.8",
+    "styled-components": "^4.1.3"
   },
   "peerDependencies": {
     "react": "^0.14 || ^15.0.0-rc || >=15.0"
@@ -71,8 +72,8 @@
     "postcss-loader": "^2.0.10",
     "precss": "^2.0.0",
     "prettier": "^1.9.2",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "16.4.2",
+    "react-dom": "16.4.2",
     "react-hot-loader": "^3.1.3",
     "style-loader": "^0.19.1",
     "webpack": "^3.10.0",
diff --git a/yarn.lock b/yarn.lock
index 6ef9a6374..b0743fb2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18,6 +18,13 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/helper-annotate-as-pure@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
+  integrity sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
 "@babel/helper-function-name@7.0.0-beta.31":
   version "7.0.0-beta.31"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.31.tgz#afe63ad799209989348b1109b44feb66aa245f57"
@@ -33,6 +40,13 @@
   dependencies:
     "@babel/types" "7.0.0-beta.31"
 
+"@babel/helper-module-imports@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
+  integrity sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
 "@babel/template@7.0.0-beta.31":
   version "7.0.0-beta.31"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.31.tgz#577bb29389f6c497c3e7d014617e7d6713f68bda"
@@ -63,6 +77,32 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.0.0":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.4.tgz#bf482eaeaffb367a28abbf9357a94963235d90ed"
+  integrity sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.11"
+    to-fast-properties "^2.0.0"
+
+"@emotion/is-prop-valid@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
+  integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==
+  dependencies:
+    "@emotion/memoize" "0.7.1"
+
+"@emotion/memoize@0.7.1":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
+  integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
+
+"@emotion/unitless@^0.7.0":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
+  integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -630,6 +670,16 @@ babel-plugin-jest-hoist@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.1.0.tgz#c1281dd7887d77a1711dc760468c3b8285dde9ee"
 
+"babel-plugin-styled-components@>= 1":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
+  integrity sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.10"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -646,7 +696,7 @@ babel-plugin-syntax-flow@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
-babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
@@ -1349,6 +1399,11 @@ camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
@@ -1798,6 +1853,11 @@ css-color-function@~1.3.3:
     debug "^3.1.0"
     rgb "~0.1.0"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -1838,6 +1898,15 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
+css-to-react-native@^2.2.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.0.tgz#bf80d24ec4a08e430306ef429c0586e6ed5485f7"
+  integrity sha512-IhR7bNIrCFwbJbKZOAjNDZdwpsbjTN6f1agXeELHDqg1wHPA8c2QLruttKOW7hgMGetkfraRJCIEMrptifBfVw==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^3.3.0"
+
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -4207,6 +4276,11 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
@@ -4467,6 +4541,11 @@ lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3,
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.17.10, lodash@^4.17.11:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+
 log-symbols@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
@@ -4487,6 +4566,13 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   dependencies:
     js-tokens "^3.0.0"
 
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -4556,6 +4642,11 @@ mem@^1.1.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+memoize-one@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.1.0.tgz#a2387c58c03fff27ca390c31b764a79addf3f906"
+  integrity sha512-2GApq0yI/b22J2j9rhbrAlsHb0Qcz+7yWxeLG8h+95sl1XPUgeLimQSOdur4Vw7cUhrBHwaUZxWFZueojqNRzA==
+
 memory-fs@^0.4.0, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -5948,6 +6039,15 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proxy-addr@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -6092,9 +6192,10 @@ react-deep-force-update@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909"
 
-react-dom@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
+react-dom@16.4.2:
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.2.tgz#4afed569689f2c561d2b8da0b819669c38a0bda4"
+  integrity sha512-Usl73nQqzvmJN+89r97zmeUpQDKDlh58eX6Hbs/ERdDHzeBzWy+ENk7fsGQ+5KxArV1iOFPT46/VneklK9zoWw==
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -6111,6 +6212,11 @@ react-hot-loader@^3.1.3:
     redbox-react "^1.3.6"
     source-map "^0.6.1"
 
+react-is@^16.6.0, react-is@^16.8.1:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
+  integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
+
 react-list@^0.8.8:
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/react-list/-/react-list-0.8.8.tgz#de2cb768dd210fb3e4835b9277f158e9cd403078"
@@ -6140,15 +6246,26 @@ react-test-renderer@^16.0.0-0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react@^16.2.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+react@16.4.2:
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
+  integrity sha512-dMv7YrbxO4y2aqnvA7f/ik9ibeLSHQJTI6TrYAenPSaQ6OXfb+Oti+oJiy8WBxgRzlKatYqtCjphTgDSCEiWFg==
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react@^16.8.4:
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768"
+  integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.4"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -6558,6 +6675,14 @@ sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
+scheduler@^0.13.4:
+  version "0.13.4"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
+  integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
@@ -6999,6 +7124,33 @@ style-loader@^0.19.1:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
+styled-components@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.1.3.tgz#4472447208e618b57e84deaaeb6acd34a5e0fe9b"
+  integrity sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/is-prop-valid" "^0.7.3"
+    "@emotion/unitless" "^0.7.0"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^2.2.2"
+    memoize-one "^4.0.0"
+    prop-types "^15.5.4"
+    react-is "^16.6.0"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
+    supports-color "^5.5.0"
+
+stylis-rule-sheet@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
+
+stylis@^3.5.0:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
 sugarss@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-1.0.1.tgz#be826d9003e0f247735f92365dc3fd7f1bae9e44"
@@ -7033,6 +7185,13 @@ supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"

From c4576b9fed17532f5bde4887e549472b9272254c Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Fri, 15 Mar 2019 16:53:33 -0600
Subject: [PATCH 02/29] Use `styled-components` to stylize the components

---
 src/components/Calendar.js                    | 102 +++++----
 src/components/DateRange.js                   |   2 +-
 src/components/DateRangePicker.js             |   6 +-
 src/components/DayCell.js                     |  16 +-
 src/components/DefinedRange.js                |  38 ++--
 src/components/Month.js                       |  23 +--
 src/components/calendar.scss                  |  97 ---------
 src/components/dateRangePicker.scss           |   4 -
 src/components/dayCell.scss                   |  19 --
 src/components/definedRange.scss              |  13 --
 src/components/styles/Calendar.styled.js      | 176 ++++++++++++++++
 .../styles/DateRangePicker.styles.js          |   6 +
 src/components/styles/DayCell.styled.js       |  60 ++++++
 src/components/styles/DefinedRange.styled.js  |  72 +++++++
 src/components/styles/Month.styled.js         |  35 ++++
 src/theme/default.scss                        | 193 +-----------------
 16 files changed, 442 insertions(+), 420 deletions(-)
 create mode 100644 src/components/styles/Calendar.styled.js
 create mode 100644 src/components/styles/DateRangePicker.styles.js
 create mode 100644 src/components/styles/DayCell.styled.js
 create mode 100644 src/components/styles/DefinedRange.styled.js
 create mode 100644 src/components/styles/Month.styled.js

diff --git a/src/components/Calendar.js b/src/components/Calendar.js
index be26e122b..570221cf5 100644
--- a/src/components/Calendar.js
+++ b/src/components/Calendar.js
@@ -26,6 +26,19 @@ import {
 } from 'date-fns';
 import defaultLocale from 'date-fns/locale/en-US';
 import coreStyles from '../styles';
+import {
+  MonthAndYearWrapper,
+  MonthAndYearPickers,
+  YearPicker,
+  DateDisplay,
+  CalendarWrapper,
+  MonthPicker,
+  Months,
+  InfiniteMonths,
+  NavigationButton,
+  DateDisplayItem,
+} from './styles/Calendar.styled.js';
+import { WeekDays, WeekDay } from './styles/Month.styled.js';
 
 class Calendar extends PureComponent {
   constructor(props, context) {
@@ -166,18 +179,18 @@ class Calendar extends PureComponent {
     const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear();
     const styles = this.styles;
     return (
-      <div onMouseUp={e => e.stopPropagation()} className={styles.monthAndYearWrapper}>
+      <MonthAndYearWrapper onMouseUp={e => e.stopPropagation()}>
         {showMonthArrow ? (
-          <button
+          <NavigationButton
             type="button"
-            className={classnames(styles.nextPrevButton, styles.prevButton)}
+            actionType="prev"
             onClick={() => changeShownDate(-1, 'monthOffset')}>
             <i />
-          </button>
+          </NavigationButton>
         ) : null}
         {showMonthAndYearPickers ? (
-          <span className={styles.monthAndYearPickers}>
-            <span className={styles.monthPicker}>
+          <MonthAndYearPickers>
+            <MonthPicker>
               <select
                 value={focusedDate.getMonth()}
                 onChange={e => changeShownDate(e.target.value, 'setMonth')}>
@@ -187,9 +200,9 @@ class Calendar extends PureComponent {
                   </option>
                 ))}
               </select>
-            </span>
+            </MonthPicker>
             <span className={styles.monthAndYearDivider} />
-            <span className={styles.yearPicker}>
+            <YearPicker>
               <select
                 value={focusedDate.getFullYear()}
                 onChange={e => changeShownDate(e.target.value, 'setYear')}>
@@ -204,76 +217,64 @@ class Calendar extends PureComponent {
                     );
                   })}
               </select>
-            </span>
-          </span>
+            </YearPicker>
+          </MonthAndYearPickers>
         ) : (
-          <span className={styles.monthAndYearPickers}>
+          <MonthAndYearPickers>
             {locale.localize.months()[focusedDate.getMonth()]} {focusedDate.getFullYear()}
-          </span>
+          </MonthAndYearPickers>
         )}
         {showMonthArrow ? (
-          <button
+          <NavigationButton
             type="button"
-            className={classnames(styles.nextPrevButton, styles.nextButton)}
+            actionType="next"
             onClick={() => changeShownDate(+1, 'monthOffset')}>
             <i />
-          </button>
+          </NavigationButton>
         ) : null}
-      </div>
+      </MonthAndYearWrapper>
     );
   }
   renderWeekdays() {
     const now = new Date();
     return (
-      <div className={this.styles.weekDays}>
+      <WeekDays>
         {eachDayOfInterval({
           start: startOfWeek(now, this.dateOptions),
           end: endOfWeek(now, this.dateOptions),
-        }).map((day, i) => (
-          <span className={this.styles.weekDay} key={i}>
-            {format(day, 'ddd', this.dateOptions)}
-          </span>
-        ))}
-      </div>
+        }).map((day, i) => <WeekDay key={i}>{format(day, 'ddd', this.dateOptions)}</WeekDay>)}
+      </WeekDays>
     );
   }
   renderDateDisplay() {
     const { focusedRange, color, ranges, rangeColors } = this.props;
     const defaultColor = rangeColors[focusedRange[0]] || color;
-    const styles = this.styles;
     return (
-      <div className={styles.dateDisplayWrapper}>
+      <div>
         {ranges.map((range, i) => {
           if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay))
             return null;
           return (
-            <div
-              className={styles.dateDisplay}
-              key={i}
-              style={{ color: range.color || defaultColor }}>
-              <span
-                className={classnames(styles.dateDisplayItem, {
-                  [styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 0,
-                })}
+            <DateDisplay key={i} style={{ color: range.color || defaultColor }}>
+              <DateDisplayItem
+                active={focusedRange[0] === i && focusedRange[1] === 0}
                 onFocus={() => this.handleRangeFocusChange(i, 0)}>
                 <input
                   disabled={range.disabled}
                   readOnly
                   value={this.formatDateDisplay(range.startDate, 'Early')}
                 />
-              </span>
-              <span
-                className={classnames(styles.dateDisplayItem, {
-                  [styles.dateDisplayItemActive]: focusedRange[0] === i && focusedRange[1] === 1,
-                })}
+              </DateDisplayItem>
+              <DateDisplayItem
+                active={focusedRange[0] === i && focusedRange[1] === 1}
                 onFocus={() => this.handleRangeFocusChange(i, 1)}>
                 <input
                   disabled={range.disabled}
                   readOnly
                   value={this.formatDateDisplay(range.endDate, 'Continuous')}
                 />
-              </span>
-            </div>
+              </DateDisplayItem>
+            </DateDisplay>
           );
         })}
       </div>
@@ -366,7 +367,7 @@ class Calendar extends PureComponent {
       color: range.color || rangeColors[i] || color,
     }));
     return (
-      <div
+      <CalendarWrapper
         className={classnames(this.styles.calendarWrapper, this.props.className)}
         onMouseUp={() => this.setState({ drag: { status: false, range: {} } })}
         onMouseLeave={() => {
@@ -377,11 +378,8 @@ class Calendar extends PureComponent {
         {scroll.enabled ? (
           <div>
             {isVertical && this.renderWeekdays(this.dateOptions)}
-            <div
-              className={classnames(
-                this.styles.infiniteMonths,
-                isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
-              )}
+            <InfiniteMonths
+              direction={direction}
               onMouseLeave={() => onPreviewChange && onPreviewChange()}
               style={{
                 width: scrollArea.calendarWidth + 11,
@@ -428,14 +426,10 @@ class Calendar extends PureComponent {
                   );
                 }}
               />
-            </div>
+            </InfiniteMonths>
           </div>
         ) : (
-          <div
-            className={classnames(
-              this.styles.months,
-              isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal
-            )}>
+          <Months direction={direction}>
             {new Array(this.props.months).fill(null).map((_, i) => {
               const monthStep = addMonths(this.state.focusedDate, i);
               return (
@@ -459,9 +453,9 @@ class Calendar extends PureComponent {
                 />
               );
             })}
-          </div>
+          </Months>
         )}
-      </div>
+      </CalendarWrapper>
     );
   }
 }
diff --git a/src/components/DateRange.js b/src/components/DateRange.js
index 6815f0679..dfe26bf95 100644
--- a/src/components/DateRange.js
+++ b/src/components/DateRange.js
@@ -120,7 +120,7 @@ class DateRange extends Component {
         }}
         {...this.props}
         displayMode="dateRange"
-        className={classnames(this.styles.dateRangeWrapper, this.props.className)}
+        className={this.props.className}
         onChange={this.setSelection}
         updateRange={val => this.setSelection(val, false)}
         ref={target => {
diff --git a/src/components/DateRangePicker.js b/src/components/DateRangePicker.js
index 10cafcd40..0a8811af1 100644
--- a/src/components/DateRangePicker.js
+++ b/src/components/DateRangePicker.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import DateRange from './DateRange';
 import DefinedRange from './DefinedRange';
 import { findNextRangeIndex, generateStyles } from '../utils.js';
-import classnames from 'classnames';
 import coreStyles from '../styles';
+import { DateRangePickerWrapper } from './styles/DateRangePicker.styles';
 
 class DateRangePicker extends Component {
   constructor(props) {
@@ -17,7 +17,7 @@ class DateRangePicker extends Component {
   render() {
     const { focusedRange } = this.state;
     return (
-      <div className={classnames(this.styles.dateRangePickerWrapper, this.props.className)}>
+      <DateRangePickerWrapper className={this.props.className}>
         <DefinedRange
           focusedRange={focusedRange}
           onPreviewChange={value => this.dateRange.updatePreview(value)}
@@ -32,7 +32,7 @@ class DateRangePicker extends Component {
           ref={t => (this.dateRange = t)}
           className={undefined}
         />
-      </div>
+      </DateRangePickerWrapper>
     );
   }
 }
diff --git a/src/components/DayCell.js b/src/components/DayCell.js
index 72bda900e..2bca4f9da 100644
--- a/src/components/DayCell.js
+++ b/src/components/DayCell.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { startOfDay, format, isSameDay, isAfter, isBefore, endOfDay } from 'date-fns';
+import { DayNumber, Day } from './styles/DayCell.styled';
 
 class DayCell extends Component {
   constructor(props, context) {
@@ -76,13 +77,11 @@ class DayCell extends Component {
       isEndOfWeek,
       isStartOfMonth,
       isEndOfMonth,
-      disabled,
       styles,
     } = this.props;
 
     return classnames(styles.day, {
       [styles.dayPassive]: isPassive,
-      [styles.dayDisabled]: disabled,
       [styles.dayToday]: isToday,
       [styles.dayWeekend]: isWeekend,
       [styles.dayStartOfWeek]: isStartOfWeek,
@@ -118,7 +117,7 @@ class DayCell extends Component {
     if (this.props.displayMode === 'date') {
       let isSelected = isSameDay(this.props.day, this.props.date);
       return isSelected ? (
-        <span className={styles.selected} style={{ color: this.props.color }} />
+        <span className={styles.selected} data="teste" style={{ color: this.props.color }} />
       ) : null;
     }
 
@@ -161,10 +160,11 @@ class DayCell extends Component {
     ));
   }
   render() {
-    const { styles } = this.props;
+    const { disabled, styles } = this.props;
     return (
-      <button
+      <Day
         type="button"
+        disabled={disabled}
         onMouseEnter={this.handleMouseEvent}
         onMouseLeave={this.handleMouseEvent}
         onFocus={this.handleMouseEvent}
@@ -179,10 +179,10 @@ class DayCell extends Component {
         style={{ color: this.props.color }}>
         {this.renderSelectionPlaceholders()}
         {this.renderPreviewPlaceholder()}
-        <span className={styles.dayNumber}>
+        <DayNumber className={styles.dayNumber}>
           <span>{format(this.props.day, 'D')}</span>
-        </span>
-      </button>
+        </DayNumber>
+      </Day>
     );
   }
 }
diff --git a/src/components/DefinedRange.js b/src/components/DefinedRange.js
index 2d94d686f..1b906ab0c 100644
--- a/src/components/DefinedRange.js
+++ b/src/components/DefinedRange.js
@@ -4,6 +4,15 @@ import styles from '../styles';
 import { defaultInputRanges, defaultStaticRanges } from '../defaultRanges';
 import { rangeShape } from './DayCell';
 import cx from 'classnames';
+import {
+  InputRanges,
+  InputRange,
+  InputRangeInput,
+  StaticRanges,
+  StaticRange,
+  StaticRangeLabel,
+  DefinedRangesWrapper,
+} from './styles/DefinedRange.styled';
 
 class DefinedRanges extends Component {
   constructor(props) {
@@ -37,9 +46,9 @@ class DefinedRanges extends Component {
     const { onPreviewChange, ranges, renderStaticRangeLabel, rangeColors, className } = this.props;
 
     return (
-      <div className={cx(styles.definedRangesWrapper, className)}>
+      <DefinedRangesWrapper className={className}>
         {this.props.headerContent}
-        <div className={styles.staticRanges}>
+        <StaticRanges>
           {this.props.staticRanges.map((staticRange, i) => {
             const { selectedRange, focusedRangeIndex } = this.getSelectedRange(ranges, staticRange);
             let labelContent;
@@ -51,9 +60,9 @@ class DefinedRanges extends Component {
             }
 
             return (
-              <button
+              <StaticRange
                 type="button"
-                className={cx(styles.staticRange, {
+                className={cx({
                   [styles.staticRangeSelected]: Boolean(selectedRange),
                 })}
                 style={{
@@ -70,18 +79,15 @@ class DefinedRanges extends Component {
                 onMouseLeave={() => {
                   this.props.onPreviewChange && this.props.onPreviewChange();
                 }}>
-                <span tabIndex={-1} className={styles.staticRangeLabel}>
-                  {labelContent}
-                </span>
-              </button>
+                <StaticRangeLabel tabIndex={-1}>{labelContent}</StaticRangeLabel>
+              </StaticRange>
             );
           })}
-        </div>
-        <div className={styles.inputRanges}>
+        </StaticRanges>
+        <InputRanges>
           {this.props.inputRanges.map((rangeOption, i) => (
-            <div className={styles.inputRange} key={i}>
-              <input
-                className={styles.inputRangeInput}
+            <InputRange key={i}>
+              <InputRangeInput
                 onFocus={() => this.setState({ focusedInput: i, rangeOffset: 0 })}
                 onBlur={() => this.setState({ rangeOffset: 0 })}
                 onChange={e => {
@@ -98,11 +104,11 @@ class DefinedRanges extends Component {
                 }
               />
               <span className={styles.inputRangeLabel}>{rangeOption.label}</span>
-            </div>
+            </InputRange>
           ))}
-        </div>
+        </InputRanges>
         {this.props.footerContent}
-      </div>
+      </DefinedRangesWrapper>
     );
   }
 }
diff --git a/src/components/Month.js b/src/components/Month.js
index 92358f0d0..e0a9e67d4 100644
--- a/src/components/Month.js
+++ b/src/components/Month.js
@@ -16,20 +16,17 @@ import {
   eachDayOfInterval,
 } from 'date-fns';
 import { getMonthDisplayRange } from '../utils';
+import { WeekDays, WeekDay, MonthWrapper, MonthName, Days } from './styles/Month.styled.js';
 
 function renderWeekdays(styles, dateOptions) {
   const now = new Date();
   return (
-    <div className={styles.weekDays}>
+    <WeekDays>
       {eachDayOfInterval({
         start: startOfWeek(now, dateOptions),
         end: endOfWeek(now, dateOptions),
-      }).map((day, i) => (
-        <span className={styles.weekDay} key={i}>
-          {format(day, 'ddd', dateOptions)}
-        </span>
-      ))}
-    </div>
+      }).map((day, i) => <WeekDay key={i}>{format(day, 'ddd', dateOptions)}</WeekDay>)}
+    </WeekDays>
   );
 }
 
@@ -54,14 +51,14 @@ class Month extends PureComponent {
     }
     const showPreview = this.props.showPreview && !drag.disablePreview;
     return (
-      <div className={styles.month} style={this.props.style}>
+      <MonthWrapper style={this.props.style}>
         {this.props.showMonthName ? (
-          <div className={styles.monthName}>
+          <MonthName>
             {format(this.props.month, this.props.monthDisplayFormat, this.props.dateOptions)}
-          </div>
+          </MonthName>
         ) : null}
         {this.props.showWeekDays && renderWeekdays(styles, this.props.dateOptions)}
-        <div className={styles.days} onMouseLeave={this.props.onMouseLeave}>
+        <Days onMouseLeave={this.props.onMouseLeave}>
           {eachDayOfInterval({ start: monthDisplay.start, end: monthDisplay.end }).map(
             (day, index) => {
               const isStartOfMonth = isSameDay(day, monthDisplay.startDateOfMonth);
@@ -101,8 +98,8 @@ class Month extends PureComponent {
               );
             }
           )}
-        </div>
-      </div>
+        </Days>
+      </MonthWrapper>
     );
   }
 }
diff --git a/src/components/calendar.scss b/src/components/calendar.scss
index ba8704a9b..e69de29bb 100644
--- a/src/components/calendar.scss
+++ b/src/components/calendar.scss
@@ -1,97 +0,0 @@
-.rdrCalendarWrapper {
-  box-sizing: border-box;
-  background: #ffffff;
-  display: inline-flex;
-  flex-direction: column;
-  user-select: none;
-}
-
-.rdrDateDisplay{
-  display: flex;
-  justify-content: space-between;
-}
-
-.rdrDateDisplayItem{
-  flex: 1 1;
-  width: 0;
-  text-align: center;
-  color: inherit;
-  & + &{
-    margin-left: 0.833em;
-  }
-  input{
-    text-align: inherit;
-    &:disabled{
-      cursor: default;
-    }
-  }
-}
-
-.rdrDateDisplayItemActive{}
-
-.rdrMonthAndYearWrapper {
-  box-sizing: inherit;
-  display: flex;
-  justify-content: space-between;
-}
-
-.rdrMonthAndYearPickers{
-  flex: 1 1 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.rdrMonthPicker{}
-
-.rdrYearPicker{}
-
-.rdrNextPrevButton {
-  box-sizing: inherit;
-  cursor: pointer;
-  outline: none;
-}
-
-.rdrPprevButton {}
-
-.rdrNextButton {}
-
-.rdrMonths{
-  display: flex;
-}
-
-.rdrMonthsVertical{
-  flex-direction: column;
-}
-
-.rdrMonthsHorizontal > div > div > div{
-  display: flex;
-  flex-direction: row;
-}
-
-.rdrMonth{
-  width: 27.667em;
-}
-
-.rdrWeekDays{
-  display: flex;
-}
-
-.rdrWeekDay {
-  flex-basis: calc(100% / 7);
-  box-sizing: inherit;
-  text-align: center;
-}
-
-.rdrDays{
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.rdrDateDisplayWrapper{}
-
-.rdrMonthName{}
-
-.rdrInfiniteMonths{
-  overflow: auto;
-}
\ No newline at end of file
diff --git a/src/components/dateRangePicker.scss b/src/components/dateRangePicker.scss
index 1e2d18360..e69de29bb 100644
--- a/src/components/dateRangePicker.scss
+++ b/src/components/dateRangePicker.scss
@@ -1,4 +0,0 @@
-.rdrDateRangePickerWrapper{
-  display: inline-flex;
-  user-select: none;
-}
\ No newline at end of file
diff --git a/src/components/dayCell.scss b/src/components/dayCell.scss
index 228671054..8bbcb9c75 100644
--- a/src/components/dayCell.scss
+++ b/src/components/dayCell.scss
@@ -1,11 +1,3 @@
-.rdrDay {
-  box-sizing: inherit;
-  width: calc(100% / 7);
-  position: relative;
-  font: inherit;
-  cursor: pointer;
-}
-
 .rdrDayNumber {
   display: block;
   position: relative;
@@ -14,21 +6,10 @@
   }
 }
 
-.rdrDayDisabled {
-  cursor: not-allowed;
-}
-
-
 .rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
   pointer-events: none;
 }
 
-.rdrInRange{}
-
 .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
   pointer-events: none;
 }
-
-.rdrDayHovered{}
-
-.rdrDayActive{}
diff --git a/src/components/definedRange.scss b/src/components/definedRange.scss
index 9f05efa0c..c61233813 100644
--- a/src/components/definedRange.scss
+++ b/src/components/definedRange.scss
@@ -1,20 +1,7 @@
-.rdrDefinedRangesWrapper{}
-
-.rdrStaticRanges{
-  display: flex;
-  flex-direction: column;
-}
-
 .rdrStaticRange{
   font-size: inherit;
 }
 
-.rdrStaticRangeLabel{}
-
-.rdrInputRanges{}
-
 .rdrInputRange{
   display: flex;
 }
-
-.rdrInputRangeInput{}
diff --git a/src/components/styles/Calendar.styled.js b/src/components/styles/Calendar.styled.js
new file mode 100644
index 000000000..80c43488b
--- /dev/null
+++ b/src/components/styles/Calendar.styled.js
@@ -0,0 +1,176 @@
+import styled, { css } from 'styled-components';
+
+const marginHorizontal = css`
+  margin: 0 5px;
+`;
+
+export const CalendarWrapper = styled('div')`
+  box-sizing: border-box;
+  background: #ffffff;
+  display: inline-flex;
+  flex-direction: column;
+  user-select: none;
+  color: #000000;
+  font-size: 12px;
+`;
+
+export const MonthAndYearWrapper = styled('div')`
+  box-sizing: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+  padding-top: 10px;
+`;
+
+export const MonthAndYearPickers = styled('span')`
+  flex: 1 1 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-weight: 600;
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    border: 0;
+    background: transparent;
+    padding: 10px 30px 10px 10px;
+    border-radius: 4px;
+    outline: 0;
+    color: #3e484f;
+    background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>")
+      no-repeat;
+    background-position: right 8px center;
+    cursor: pointer;
+    text-align: center;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.07);
+    }
+  }
+`;
+
+export const YearPicker = styled('span')`
+  ${marginHorizontal};
+`;
+
+export const MonthPicker = styled('span')`
+  ${marginHorizontal};
+`;
+
+export const DateDisplay = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  background-color: rgb(239, 242, 247);
+  padding: 0.833em;
+`;
+
+const monthsVertical = css`
+  flex-direction: column;
+`;
+
+const monthsHorizontal = css`
+  > div > div > div {
+    display: flex;
+    flex-direction: row;
+  }
+`;
+
+export const Months = styled('div')`
+  display: flex;
+  ${props => (props.direction === 'vertical' ? monthsVertical : monthsHorizontal)};
+`;
+
+export const InfiniteMonths = styled('div')`
+  overflow: auto;
+  ${props => (props.direction === 'vertical' ? monthsVertical : monthsHorizontal)};
+`;
+
+//
+// Date Display Item
+
+const dateDisplayItemActive = css`
+  border-color: currentColor;
+  input {
+    color: #7d888d;
+  }
+`;
+
+export const DateDisplayItem = styled('span')`
+  flex: 1 1;
+  width: 0;
+  text-align: center;
+  color: inherit;
+  border-radius: 4px;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
+  border: 1px solid transparent;
+
+  & + & {
+    margin-left: 0.833em;
+  }
+
+  input {
+    width: 100%;
+    height: 2.5em;
+    color: #849095;
+    background: transparent;
+    border: 0px;
+    line-height: 2.5em;
+    text-align: inherit;
+    cursor: pointer;
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  ${props => (props.active ? dateDisplayItemActive : '')};
+`;
+
+// Buttons
+// TODO: Split into separated file
+const prevButton = css`
+  i {
+    border-width: 4px 6px 4px 4px;
+    border-color: transparent rgb(52, 73, 94) transparent transparent;
+    transform: translate(-3px, 0px);
+  }
+`;
+
+const nextButton = css`
+  i {
+    margin: 0 0 0 7px;
+    border-width: 4px 4px 4px 6px;
+    border-color: transparent transparent transparent rgb(52, 73, 94);
+    transform: translate(3px, 0px);
+  }
+`;
+
+export const NavigationButton = styled('button')`
+  box-sizing: inherit;
+  cursor: pointer;
+  outline: none;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 0 0.833em;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: #eff2f7;
+  &:hover {
+    background: #e1e7f0;
+  }
+  i {
+    display: block;
+    width: 0;
+    height: 0;
+    padding: 0;
+    text-align: center;
+    border-style: solid;
+    margin: auto;
+    transform: translate(-3px, 0px);
+  }
+
+  ${({ actionType }) => (actionType === 'next' ? nextButton : prevButton)};
+`;
diff --git a/src/components/styles/DateRangePicker.styles.js b/src/components/styles/DateRangePicker.styles.js
new file mode 100644
index 000000000..2b553141e
--- /dev/null
+++ b/src/components/styles/DateRangePicker.styles.js
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const DateRangePickerWrapper = styled('div')`
+  display: inline-flex;
+  user-select: none;
+`;
diff --git a/src/components/styles/DayCell.styled.js b/src/components/styles/DayCell.styled.js
new file mode 100644
index 000000000..e760772c7
--- /dev/null
+++ b/src/components/styles/DayCell.styled.js
@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components';
+
+export const DayNumber = styled('span')`
+  outline: 0;
+  font-weight: 300;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  top: 5px;
+  bottom: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  span {
+    color: #1d2429;
+  }
+`;
+
+// Day States
+const dayDisabled = css`
+  background-color: rgb(248, 248, 248);
+  cursor: not-allowed;
+
+  .rdrDayNumber span {
+    color: #aeb9bf;
+  }
+  .rdrInRange,
+  .rdrStartEdge,
+  .rdrEndEdge,
+  .rdrSelected,
+  .rdrDayStartPreview,
+  .rdrDayInPreview,
+  .rdrDayEndPreview {
+    filter: grayscale(100%) opacity(60%);
+  }
+`;
+
+// Day Cell
+export const Day = styled('button')`
+  box-sizing: inherit;
+  width: calc(100% / 7);
+  position: relative;
+  font: inherit;
+  cursor: pointer;
+  background: transparent;
+  user-select: none;
+  border: 0;
+  padding: 0;
+  line-height: 3em;
+  height: 3em;
+  text-align: center;
+  color: #1d2429;
+  &:focus {
+    outline: 0;
+  }
+
+  ${props => (props.disabled ? dayDisabled : '')};
+`;
diff --git a/src/components/styles/DefinedRange.styled.js b/src/components/styles/DefinedRange.styled.js
new file mode 100644
index 000000000..67642a77c
--- /dev/null
+++ b/src/components/styles/DefinedRange.styled.js
@@ -0,0 +1,72 @@
+import styled, { css } from 'styled-components';
+
+// Static Ranges
+export const StaticRanges = styled('div')`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StaticRangeLabel = styled('span')`
+  display: block;
+  outline: 0;
+  line-height: 18px;
+  padding: 10px 20px;
+  text-align: left;
+`;
+
+const staticRangeSelected = css``;
+
+export const StaticRange = styled('button')`
+  border: 0;
+  cursor: pointer;
+  display: block;
+  outline: 0;
+  border-bottom: 1px solid #eff2f7;
+  padding: 0;
+  background: #fff;
+  &:hover,
+  &:focus {
+    .rdrStaticRangeLabel {
+      background: #eff2f7;
+    }
+  }
+`;
+
+export const DefinedRangesWrapper = styled('div')`
+  font-size: 12px;
+  width: 226px;
+  border-right: solid 1px #eff2f7;
+  background: #fff;
+  ${staticRangeSelected} {
+    color: currentColor;
+    font-weight: 600;
+  }
+`;
+
+// Input ranges
+export const InputRanges = styled('div')`
+  padding: 10px 0;
+`;
+
+export const InputRange = styled('div')`
+  display: flex;
+  align-items: center;
+  padding: 5px 20px;
+`;
+
+export const InputRangeInput = styled('input')`
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 4px;
+  text-align: center;
+  border: solid 1px rgb(222, 231, 235);
+  margin-right: 10px;
+  color: rgb(108, 118, 122);
+  &:focus,
+  &:hover {
+    border-color: rgb(180, 191, 196);
+    outline: 0;
+    color: #333;
+  }
+`;
diff --git a/src/components/styles/Month.styled.js b/src/components/styles/Month.styled.js
new file mode 100644
index 000000000..705518634
--- /dev/null
+++ b/src/components/styles/Month.styled.js
@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const MonthName = styled('div')`
+  text-align: left;
+  font-weight: 600;
+  color: #849095;
+  padding: 0.833em;
+`;
+
+export const WeekDays = styled('div')`
+  display: flex;
+  padding: 0 0.833em;
+`;
+
+export const WeekDay = styled('span')`
+  flex-basis: calc(100% / 7);
+  box-sizing: inherit;
+  text-align: center;
+  font-weight: 400;
+  line-height: 2.667em;
+  color: rgb(132, 144, 149);
+`;
+
+export const Days = styled('div')`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+export const MonthWrapper = styled('div')`
+  width: 27.667em;
+  padding: 0 0.833em 1.666em 0.833em;
+  ${WeekDays} {
+    padding: 0;
+  }
+`;
diff --git a/src/theme/default.scss b/src/theme/default.scss
index 91bd46ef3..406769564 100644
--- a/src/theme/default.scss
+++ b/src/theme/default.scss
@@ -1,162 +1,12 @@
-.rdrCalendarWrapper{
-  color: #000000;
-  font-size: 12px;
-}
-
 .rdrDateDisplay{
   background-color: rgb(239, 242, 247);
   padding: 0.833em;
 }
 
-.rdrDateDisplayItem{
-  border-radius: 4px;
-  background-color: rgb(255, 255, 255);
-  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
-  border: 1px solid transparent;
-  input{
-    cursor: pointer;
-    height: 2.5em;
-    line-height: 2.5em;
-    border: 0px;
-    background: transparent;
-    width: 100%;
-    color: #849095;
-  }
-}
-
-.rdrDateDisplayItemActive{
-  border-color: currentColor;
-}
-
-.rdrDateDisplayItemActive{
-  input{
-    color: #7d888d
-  }
-}
-
-.rdrMonthAndYearWrapper {
-  align-items: center;
-  height: 60px;
-  padding-top: 10px;
-}
-
-.rdrMonthAndYearPickers{
-  font-weight: 600;
-  select{
-    appearance: none;
-    -webkit-appearance: none;
-    border: 0;
-    background: transparent;
-    padding: 10px 30px 10px 10px;
-    border-radius: 4px;
-    outline: 0;
-    color: #3e484f;
-    background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;
-    background-position: right 8px center;
-    cursor: pointer;
-    text-align: center;
-    &:hover{
-      background-color: rgba(0,0,0,0.07);
-    }
-  }
-}
-
-.rdrMonthPicker, .rdrYearPicker{
-  margin: 0 5px
-}
-
-.rdrNextPrevButton {
-  display: block;
-  width: 24px;
-  height: 24px;
-  margin: 0 0.833em;
-  padding: 0;
-  border: 0;
-  border-radius: 5px;
-  background: #EFF2F7;
-  &:hover{
-    background: #E1E7F0;
-  }
-  i {
-    display: block;
-    width: 0;
-    height: 0;
-    padding: 0;
-    text-align: center;
-    border-style: solid;
-    margin: auto;
-    transform: translate(-3px, 0px);
-  }
-}
-
-.rdrPprevButton {
-  i {
-    border-width: 4px 6px 4px 4px;
-    border-color: transparent rgb(52, 73, 94) transparent transparent;
-    transform: translate(-3px, 0px);
-  }
-}
-
-.rdrNextButton {
-  i {
-    margin: 0 0 0 7px;
-    border-width: 4px 4px 4px 6px;
-    border-color: transparent transparent transparent rgb(52, 73, 94);
-    transform: translate(3px, 0px);
-  }
-}
-
-
-.rdrWeekDays {
-  padding: 0 0.833em;
-}
-
-.rdrMonth{
-  padding: 0 0.833em 1.666em 0.833em;
-  .rdrWeekDays {
-    padding: 0;
-  }
-}  
-
 .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
   display: none;
 }  
 
-.rdrWeekDay {
-  font-weight: 400;
-  line-height: 2.667em;
-  color: rgb(132, 144, 149);
-}
-
-.rdrDay {
-  background: transparent;
-  user-select: none;
-  border: 0;
-  padding: 0;
-  line-height: 3.000em;
-  height: 3.000em;
-  text-align: center;
-  color: #1d2429;
-  &:focus {
-    outline: 0;
-  }
-}
-
-.rdrDayNumber {
-  outline: 0;
-  font-weight: 300;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  top: 5px;
-  bottom: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .rdrDayToday .rdrDayNumber span{
   font-weight: 500;
   &:after{
@@ -204,8 +54,6 @@
   right: 2px;
 }
 
-.rdrInRange{}
-
 .rdrStartEdge{
   border-top-left-radius: 1.042em;
   border-bottom-left-radius: 1.042em;
@@ -300,7 +148,7 @@
   border-right: solid 1px #eff2f7;
   background: #fff;
   .rdrStaticRangeSelected{
-    color: currentColor;
+    color: red !important;
     font-weight: 600;
   }
 }
@@ -320,13 +168,6 @@
   }
 }
 
-.rdrStaticRangeLabel{
-  display: block;
-  outline: 0;
-  line-height: 18px;
-  padding: 10px 20px;
-  text-align: left;
-}
 
 .rdrInputRanges{
   padding: 10px 0;
@@ -337,21 +178,6 @@
   padding: 5px 20px;
 }
 
-.rdrInputRangeInput{
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-  border-radius: 4px;
-  text-align: center;
-  border: solid 1px rgb(222, 231, 235);
-  margin-right: 10px;
-  color: rgb(108, 118, 122);
-  &:focus, &:hover{
-    border-color: rgb(180, 191, 196);
-    outline: 0;
-    color: #333;
-  }
-}
 
 .rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
   content: '';
@@ -374,20 +200,3 @@
     display: none;
   }
 }
-
-.rdrDayDisabled {
-  background-color: rgb(248, 248, 248);
-  .rdrDayNumber span{
-    color: #aeb9bf;
-  }
-  .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected, .rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
-    filter: grayscale(100%) opacity(60%);
-  }
-}
-
-.rdrMonthName{
-  text-align: left;
-  font-weight: 600;
-  color: #849095;
-  padding: 0.833em;
-}

From 2de769d02533bdda1cef67cc2e1e38b5afb44109 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Mon, 18 Mar 2019 09:11:11 -0600
Subject: [PATCH 03/29] Fix DayNumber CSS specificity

---
 src/components/styles/DayCell.styled.js | 30 +++++++++++++------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/styles/DayCell.styled.js b/src/components/styles/DayCell.styled.js
index e760772c7..4c437a245 100644
--- a/src/components/styles/DayCell.styled.js
+++ b/src/components/styles/DayCell.styled.js
@@ -1,20 +1,22 @@
 import styled, { css } from 'styled-components';
 
 export const DayNumber = styled('span')`
-  outline: 0;
-  font-weight: 300;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  top: 5px;
-  bottom: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  span {
-    color: #1d2429;
+  && {
+    outline: 0;
+    font-weight: 300;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    top: 5px;
+    bottom: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    span {
+      color: #1d2429;
+    }
   }
 `;
 

From 470daf9bd01d0024e918843a61b7f3ea552518da Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Mon, 18 Mar 2019 10:33:19 -0600
Subject: [PATCH 04/29] Remove unused Sass styles/files

---
 src/components/calendar.scss                 |  0
 src/components/dateRangePicker.scss          |  0
 src/components/definedRange.scss             |  7 ----
 src/components/styles/DefinedRange.styled.js |  1 +
 src/styles.scss                              |  3 --
 src/theme/default.scss                       | 35 --------------------
 6 files changed, 1 insertion(+), 45 deletions(-)
 delete mode 100644 src/components/calendar.scss
 delete mode 100644 src/components/dateRangePicker.scss
 delete mode 100644 src/components/definedRange.scss

diff --git a/src/components/calendar.scss b/src/components/calendar.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/components/dateRangePicker.scss b/src/components/dateRangePicker.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/components/definedRange.scss b/src/components/definedRange.scss
deleted file mode 100644
index c61233813..000000000
--- a/src/components/definedRange.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.rdrStaticRange{
-  font-size: inherit;
-}
-
-.rdrInputRange{
-  display: flex;
-}
diff --git a/src/components/styles/DefinedRange.styled.js b/src/components/styles/DefinedRange.styled.js
index 67642a77c..501bee1c9 100644
--- a/src/components/styles/DefinedRange.styled.js
+++ b/src/components/styles/DefinedRange.styled.js
@@ -22,6 +22,7 @@ export const StaticRange = styled('button')`
   display: block;
   outline: 0;
   border-bottom: 1px solid #eff2f7;
+  font-size: inherit;
   padding: 0;
   background: #fff;
   &:hover,
diff --git a/src/styles.scss b/src/styles.scss
index 0e2aa27e6..7b0a79cfe 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,2 @@
-@import 'components/calendar.scss';
 @import 'components/dateRange.scss';
 @import 'components/dayCell.scss';
-@import 'components/dateRangePicker.scss';
-@import 'components/definedRange.scss';
diff --git a/src/theme/default.scss b/src/theme/default.scss
index 406769564..c148fce9d 100644
--- a/src/theme/default.scss
+++ b/src/theme/default.scss
@@ -1,8 +1,3 @@
-.rdrDateDisplay{
-  background-color: rgb(239, 242, 247);
-  padding: 0.833em;
-}
-
 .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
   display: none;
 }  
@@ -143,42 +138,12 @@
 }
 
 .rdrDefinedRangesWrapper{
-  font-size: 12px;
-  width: 226px;
-  border-right: solid 1px #eff2f7;
-  background: #fff;
   .rdrStaticRangeSelected{
     color: red !important;
     font-weight: 600;
   }
 }
 
-.rdrStaticRange{
-  border: 0;
-  cursor: pointer;
-  display: block;
-  outline: 0;
-  border-bottom: 1px solid #eff2f7;
-  padding: 0;
-  background: #fff;
-  &:hover, &:focus{
-    .rdrStaticRangeLabel{
-      background: #eff2f7;
-    }
-  }
-}
-
-
-.rdrInputRanges{
-  padding: 10px 0;
-}
-
-.rdrInputRange{
-  align-items: center;
-  padding: 5px 20px;
-}
-
-
 .rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
   content: '';
   border: 1px solid currentColor;

From 807c0b0f3f138469d8d96cbd5cd8a45786e12707 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Mon, 18 Mar 2019 16:51:36 -0600
Subject: [PATCH 05/29] Setup `react-testing-library`

---
 jest.config.js |   1 +
 package.json   |   2 +
 rtl.setup.js   |   2 +
 yarn.lock      | 842 ++++++++++++++++++++++++++++++++++---------------
 4 files changed, 584 insertions(+), 263 deletions(-)
 create mode 100644 rtl.setup.js

diff --git a/jest.config.js b/jest.config.js
index ffe01365d..1688f3859 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,4 +2,5 @@ module.exports = {
   verbose: true,
   setupFiles: ['<rootDir>/setupTests.js'],
   testPathIgnorePatterns: ['/node_modules/', '/dist/', '/demo/dist/'],
+  setupTestFrameworkScriptFile: '<rootDir>/rtl.setup.js',
 };
diff --git a/package.json b/package.json
index 7b2ddddf1..1e0b9bdcd 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "eslint-plugin-react": "^7.5.1",
     "html-webpack-plugin": "^2.30.1",
     "jest": "^22.1.4",
+    "jest-dom": "^3.1.3",
     "normalize.css": "^7.0.0",
     "postcss": "^7.0.1",
     "postcss-cli": "^6.0.0",
@@ -75,6 +76,7 @@
     "react": "16.4.2",
     "react-dom": "16.4.2",
     "react-hot-loader": "^3.1.3",
+    "react-testing-library": "^6.0.0",
     "style-loader": "^0.19.1",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.9.7",
diff --git a/rtl.setup.js b/rtl.setup.js
new file mode 100644
index 000000000..411a80cd5
--- /dev/null
+++ b/rtl.setup.js
@@ -0,0 +1,2 @@
+import 'jest-dom/extend-expect';
+import 'react-testing-library/cleanup-after-each';
diff --git a/yarn.lock b/yarn.lock
index b0743fb2a..f5d8bc122 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11,12 +11,11 @@
     js-tokens "^3.0.0"
 
 "@babel/code-frame@^7.0.0-beta.35":
-  version "7.0.0-beta.38"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.38.tgz#c0af5930617e55e050336838e3a3670983b0b2b2"
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
+  integrity sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==
   dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
+    "@babel/highlight" "^7.0.0"
 
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
@@ -47,6 +46,22 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/highlight@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
+  integrity sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
+"@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.4.tgz#73d12ba819e365fcf7fd152aed56d6df97d21c83"
+  integrity sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
 "@babel/template@7.0.0-beta.31":
   version "7.0.0-beta.31"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.31.tgz#577bb29389f6c497c3e7d014617e7d6713f68bda"
@@ -103,6 +118,14 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
   integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==
 
+"@jest/types@^24.5.0":
+  version "24.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.5.0.tgz#feee214a4d0167b0ca447284e95a57aa10b3ee95"
+  integrity sha512-kN7RFzNMf2R8UDadPOl6ReyI+MT8xfqRuAnuVL+i4gwjv/zubdDK+EDeLHYwq1j0CSSR2W/MmgaRlMZJzXdmVA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^1.1.0"
+    "@types/yargs" "^12.0.9"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -114,10 +137,25 @@
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.0.tgz#50c1e2260ac0ed9439a181de3725a0168d59c48a"
 
+"@sheerun/mutationobserver-shim@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
+  integrity sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==
+
+"@types/istanbul-lib-coverage@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.0.tgz#2cc2ca41051498382b43157c8227fea60363f94a"
+  integrity sha512-ohkhb9LehJy+PA40rDtGAji61NCgdtKLAlFoYp4cnuuQEswwdK3vz9SOIkkyc3wrk8dzjphQApNs56yyXLStaQ==
+
 "@types/node@*":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-9.3.0.tgz#3a129cda7c4e5df2409702626892cb4b96546dd5"
 
+"@types/yargs@^12.0.9":
+  version "12.0.9"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.9.tgz#693e76a52f61a2f1e7fb48c0eef167b95ea4ffd0"
+  integrity sha512-sCZy4SxP9rN2w30Hlmg5dtdRwgYQfYRiLo9usw8X9cxlf+H4FqM1xX7+sNH7NNKVdbXMJWqva7iyy+fxh/V7fA==
+
 abab@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@@ -195,10 +233,6 @@ alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
 
-amdefine@>=0.0.4:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
-
 ansi-escapes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
@@ -215,6 +249,11 @@ ansi-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
 
+ansi-regex@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
+  integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -248,6 +287,7 @@ anymatch@^2.0.0:
 append-transform@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/append-transform/-/append-transform-0.4.0.tgz#d76ebf8ca94d276e247a36bad44a4b74ab611991"
+  integrity sha1-126/jKlNJ24keja61EpLdKthGZE=
   dependencies:
     default-require-extensions "^1.0.0"
 
@@ -383,16 +423,23 @@ async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
 
-async@^1.4.0, async@^1.5.2:
+async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.1.2, async@^2.1.4:
+async@^2.1.2:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
   dependencies:
     lodash "^4.14.0"
 
+async@^2.1.4:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
+  integrity sha512-H1qVYh1MYhEEFLsP97cVKqCGo7KfCyTt6uEWqsTBr9SO84oK9Uwbyd/yCW+6rKJLHksBNUVWZDAjfS+Ccx0Bbg==
+  dependencies:
+    lodash "^4.17.11"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -470,7 +517,32 @@ babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-core@^6.0.0, babel-core@^6.26.0:
+babel-core@^6.0.0:
+  version "6.26.3"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
+  integrity sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-generator "^6.26.0"
+    babel-helpers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-register "^6.26.0"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    convert-source-map "^1.5.1"
+    debug "^2.6.9"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.8"
+    slash "^1.0.0"
+    source-map "^0.5.7"
+
+babel-core@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
   dependencies:
@@ -634,6 +706,14 @@ babel-jest@^22.1.0:
     babel-plugin-istanbul "^4.1.5"
     babel-preset-jest "^22.1.0"
 
+babel-jest@^22.4.4:
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-22.4.4.tgz#977259240420e227444ebe49e226a61e49ea659d"
+  integrity sha512-A9NB6/lZhYyypR9ATryOSDcqBaqNdzq4U+CN+/wcMsLcmKkPxQEoTKLajGfd3IkxNyVBT8NewUK2nWyGbSzHEQ==
+  dependencies:
+    babel-plugin-istanbul "^4.1.5"
+    babel-preset-jest "^22.4.4"
+
 babel-loader@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.2.tgz#f6cbe122710f1aa2af4d881c6d5b54358ca24126"
@@ -670,6 +750,11 @@ babel-plugin-jest-hoist@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.1.0.tgz#c1281dd7887d77a1711dc760468c3b8285dde9ee"
 
+babel-plugin-jest-hoist@^22.4.4:
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.4.4.tgz#b9851906eab34c7bf6f8c895a2b08bea1a844c0b"
+  integrity sha512-DUvGfYaAIlkdnygVIEl0O4Av69NtuQWcrjMOv6DODPuhuGLDnbsARz3AwiiI/EkIMMlxQDUcrZ9yoyJvTNjcVQ==
+
 "babel-plugin-styled-components@>= 1":
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz#ff1f42ad2cc78c21f26b62266b8f564dbc862939"
@@ -1010,6 +1095,14 @@ babel-preset-jest@^22.1.0:
     babel-plugin-jest-hoist "^22.1.0"
     babel-plugin-syntax-object-rest-spread "^6.13.0"
 
+babel-preset-jest@^22.4.4:
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-22.4.4.tgz#ec9fbd8bcd7dfd24b8b5320e0e688013235b7c39"
+  integrity sha512-+dxMtOFwnSYWfum0NaEc0O03oSdwBsjx4tMSChRDPGwu/4wSY6Q6ANW3wkjKpJzzguaovRs/DODcT4hbSN8yiA==
+  dependencies:
+    babel-plugin-jest-hoist "^22.4.4"
+    babel-plugin-syntax-object-rest-spread "^6.13.0"
+
 babel-preset-react@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
@@ -1228,8 +1321,9 @@ browser-process-hrtime@^0.1.2:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz#425d68a58d3447f02a04aa894187fce8af8b7b8e"
 
 browser-resolve@^1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
   dependencies:
     resolve "1.1.7"
 
@@ -1305,6 +1399,11 @@ bser@^2.0.0:
   dependencies:
     node-int64 "^0.4.0"
 
+buffer-from@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+
 buffer-indexof@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
@@ -1364,6 +1463,7 @@ callsites@^0.2.0:
 callsites@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
 
 camel-case@3.0.x:
   version "3.0.0"
@@ -1421,6 +1521,13 @@ caniuse-lite@^1.0.30000784:
   version "1.0.30000787"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000787.tgz#a76c4fa1d6ac00640447ec83c1e7c6b33dd615c5"
 
+capture-exit@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
+  integrity sha1-HF/MSJ/QqwDU8ax64QcuMXP7q28=
+  dependencies:
+    rsvp "^3.3.3"
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -1511,9 +1618,10 @@ chownr@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
 
-ci-info@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.2.tgz#03561259db48d0474c8bdc90f5b47b068b6bbfb4"
+ci-info@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
+  integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
 
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
@@ -1660,6 +1768,11 @@ commander@2.12.x, commander@^2.11.0, commander@~2.12.1:
   version "2.12.2"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
 
+commander@~2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -1736,6 +1849,13 @@ convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
+convert-source-map@^1.5.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -1911,6 +2031,21 @@ css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
+
+css@^2.2.3:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -2044,6 +2179,7 @@ deep-is@~0.1.3:
 default-require-extensions@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
+  integrity sha1-836hXT4T/9m0N9M+GnW1+5eHTLg=
   dependencies:
     strip-bom "^2.0.0"
 
@@ -2145,9 +2281,15 @@ detect-node@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 
+diff-sequences@^24.3.0:
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.3.0.tgz#0f20e8a1df1abddaf4d9c226680952e64118b975"
+  integrity sha512-xLqpez+Zj9GKSnPWS0WZw1igGocZ+uua8+y+5dDNTT934N3QuY1sp2LkHzwiaYQGz60hMq0pjAshdeXm5VUOEw==
+
 diff@^3.2.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
+  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
 
 diffie-hellman@^5.0.0:
   version "5.0.2"
@@ -2211,6 +2353,16 @@ dom-serializer@0, dom-serializer@~0.1.0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-testing-library@^3.13.1:
+  version "3.17.1"
+  resolved "https://registry.yarnpkg.com/dom-testing-library/-/dom-testing-library-3.17.1.tgz#3291bc3cf68c555ba5e663697ee77d604aaa122b"
+  integrity sha512-SbkaRfQvuLjnv+xFgSo/cmKoN9tjBL6Rh1f3nQH9jnjUe5q+keRwacYSi3uSpcB4D1K768iavCayKH3ZN9ea+g==
+  dependencies:
+    "@babel/runtime" "^7.3.4"
+    "@sheerun/mutationobserver-shim" "^0.3.2"
+    pretty-format "^24.0.0"
+    wait-for-expect "^1.1.0"
+
 dom-walk@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
@@ -2678,10 +2830,11 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     safe-buffer "^5.1.1"
 
 exec-sh@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.1.tgz#163b98a6e89e6b65b47c2a28d215bc1f63989c38"
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.2.tgz#2a5e7ffcbd7d0ba2755bdecb16e5a427dfbdec36"
+  integrity sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==
   dependencies:
-    merge "^1.1.3"
+    merge "^1.2.0"
 
 execa@^0.7.0:
   version "0.7.0"
@@ -2723,16 +2876,17 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
-expect@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-22.1.0.tgz#f8f9b019ab275d859cbefed531fbaefe8972431d"
+expect@^22.4.0:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-22.4.3.tgz#d5a29d0a0e1fb2153557caef2674d4547e914674"
+  integrity sha512-XcNXEPehqn8b/jm8FYotdX0YrXn36qp4HWlrVT4ktwQas1l1LPxiVWncYnnL2eyMtKAmVIaG0XAp0QlrqJaxaA==
   dependencies:
     ansi-styles "^3.2.0"
-    jest-diff "^22.1.0"
-    jest-get-type "^22.1.0"
-    jest-matcher-utils "^22.1.0"
-    jest-message-util "^22.1.0"
-    jest-regex-util "^22.1.0"
+    jest-diff "^22.4.3"
+    jest-get-type "^22.4.3"
+    jest-matcher-utils "^22.4.3"
+    jest-message-util "^22.4.3"
+    jest-regex-util "^22.4.3"
 
 express@^4.16.2:
   version "4.16.2"
@@ -2902,6 +3056,7 @@ filename-regex@^2.0.0:
 fileset@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/fileset/-/fileset-2.0.3.tgz#8e7548a96d3cc2327ee5e674168723a333bba2a0"
+  integrity sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=
   dependencies:
     glob "^7.0.3"
     minimatch "^3.0.3"
@@ -3047,7 +3202,7 @@ fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
-fsevents@^1.0.0, fsevents@^1.1.1:
+fsevents@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.3.tgz#11f82318f5fe7bb2cd22965a108e9306208216d8"
   dependencies:
@@ -3061,6 +3216,14 @@ fsevents@^1.2.2:
     nan "^2.9.2"
     node-pre-gyp "^0.10.0"
 
+fsevents@^1.2.3:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz#4851b664a3783e52003b3c66eb0eee1074933aa4"
+  integrity sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==
+  dependencies:
+    nan "^2.9.2"
+    node-pre-gyp "^0.10.0"
+
 fstream-ignore@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
@@ -3237,14 +3400,15 @@ handle-thing@^1.2.5:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
 
 handlebars@^4.0.3:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.1.1.tgz#6e4e41c18ebe7719ae4d38e5aca3d32fa3dd23d3"
+  integrity sha512-3Zhi6C0euYZL5sM0Zcy7lInLXKQ+YLcF/olbN010mzGQ4XVm50JeyBnMqofHh696GrciGruC7kCcApPDJvVgwA==
   dependencies:
-    async "^1.4.0"
+    neo-async "^2.6.0"
     optimist "^0.6.1"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
   optionalDependencies:
-    uglify-js "^2.6"
+    uglify-js "^3.1.4"
 
 har-schema@^1.0.5:
   version "1.0.5"
@@ -3576,6 +3740,7 @@ import-local@^0.1.1:
 import-local@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+  integrity sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==
   dependencies:
     pkg-dir "^2.0.0"
     resolve-cwd "^2.0.0"
@@ -3590,6 +3755,11 @@ indent-string@^2.1.0:
   dependencies:
     repeating "^2.0.0"
 
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -3709,10 +3879,11 @@ is-callable@^1.1.1, is-callable@^1.1.3:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
 
 is-ci@^1.0.10:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
   dependencies:
-    ci-info "^1.0.0"
+    ci-info "^1.5.0"
 
 is-data-descriptor@^0.1.4:
   version "0.1.4"
@@ -3797,6 +3968,7 @@ is-fullwidth-code-point@^2.0.0:
 is-generator-fn@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-1.0.0.tgz#969d49e1bb3329f6bb7f09089be26578b2ddd46a"
+  integrity sha1-lp1J4bszKfa7fwkIm+JleLLd1Go=
 
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
@@ -3952,17 +4124,18 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
 istanbul-api@^1.1.14:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.3.7.tgz#a86c770d2b03e11e3f778cd7aedd82d2722092aa"
+  integrity sha512-4/ApBnMVeEPG3EkSzcw25wDe4N66wxwn+KKn6b47vyek8Xb3NBAcg4xfuQbS7BqcZuTX4wxfD5lVagdggR3gyA==
   dependencies:
     async "^2.1.4"
     fileset "^2.0.2"
-    istanbul-lib-coverage "^1.1.1"
-    istanbul-lib-hook "^1.1.0"
-    istanbul-lib-instrument "^1.9.1"
-    istanbul-lib-report "^1.1.2"
-    istanbul-lib-source-maps "^1.2.2"
-    istanbul-reports "^1.1.3"
+    istanbul-lib-coverage "^1.2.1"
+    istanbul-lib-hook "^1.2.2"
+    istanbul-lib-instrument "^1.10.2"
+    istanbul-lib-report "^1.1.5"
+    istanbul-lib-source-maps "^1.2.6"
+    istanbul-reports "^1.5.1"
     js-yaml "^3.7.0"
     mkdirp "^0.5.1"
     once "^1.4.0"
@@ -3971,13 +4144,32 @@ istanbul-lib-coverage@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
 
-istanbul-lib-hook@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.1.0.tgz#8538d970372cb3716d53e55523dd54b557a8d89b"
+istanbul-lib-coverage@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz#ccf7edcd0a0bb9b8f729feeb0930470f9af664f0"
+  integrity sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==
+
+istanbul-lib-hook@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.2.2.tgz#bc6bf07f12a641fbf1c85391d0daa8f0aea6bf86"
+  integrity sha512-/Jmq7Y1VeHnZEQ3TL10VHyb564mn6VrQXHchON9Jf/AEcmQ3ZIiyD1BVzNOKTZf/G3gE+kiGK6SmpF9y3qGPLw==
   dependencies:
     append-transform "^0.4.0"
 
-istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.8.0, istanbul-lib-instrument@^1.9.1:
+istanbul-lib-instrument@^1.10.2, istanbul-lib-instrument@^1.8.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz#1f55ed10ac3c47f2bdddd5307935126754d0a9ca"
+  integrity sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==
+  dependencies:
+    babel-generator "^6.18.0"
+    babel-template "^6.16.0"
+    babel-traverse "^6.18.0"
+    babel-types "^6.18.0"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.2.1"
+    semver "^5.3.0"
+
+istanbul-lib-instrument@^1.7.5:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
   dependencies:
@@ -3989,40 +4181,45 @@ istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.8.0, istanbul-lib-ins
     istanbul-lib-coverage "^1.1.1"
     semver "^5.3.0"
 
-istanbul-lib-report@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.2.tgz#922be27c13b9511b979bd1587359f69798c1d425"
+istanbul-lib-report@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.5.tgz#f2a657fc6282f96170aaf281eb30a458f7f4170c"
+  integrity sha512-UsYfRMoi6QO/doUshYNqcKJqVmFe9w51GZz8BS3WB0lYxAllQYklka2wP9+dGZeHYaWIdcXUx8JGdbqaoXRXzw==
   dependencies:
-    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-coverage "^1.2.1"
     mkdirp "^0.5.1"
     path-parse "^1.0.5"
     supports-color "^3.1.2"
 
-istanbul-lib-source-maps@^1.2.1, istanbul-lib-source-maps@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
+istanbul-lib-source-maps@^1.2.1, istanbul-lib-source-maps@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.6.tgz#37b9ff661580f8fca11232752ee42e08c6675d8f"
+  integrity sha512-TtbsY5GIHgbMsMiRw35YBHGpZ1DVFEO19vxxeiDMYaeOFOCzfnYVxvl6pOUIZR4dtPhAGpSMup8OyF8ubsaqEg==
   dependencies:
     debug "^3.1.0"
-    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-coverage "^1.2.1"
     mkdirp "^0.5.1"
     rimraf "^2.6.1"
     source-map "^0.5.3"
 
-istanbul-reports@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.3.tgz#3b9e1e8defb6d18b1d425da8e8b32c5a163f2d10"
+istanbul-reports@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.5.1.tgz#97e4dbf3b515e8c484caea15d6524eebd3ff4e1a"
+  integrity sha512-+cfoZ0UXzWjhAdzosCPP3AN8vvef8XDkWtTfgaN+7L3YTpNYITnCaEkceo5SEYy644VkHka/P1FvkWvrG/rrJw==
   dependencies:
     handlebars "^4.0.3"
 
-jest-changed-files@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.1.4.tgz#1f7844bcb739dec07e5899a633c0cb6d5069834e"
+jest-changed-files@^22.2.0:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.4.3.tgz#8882181e022c38bd46a2e4d18d44d19d90a90fb2"
+  integrity sha512-83Dh0w1aSkUNFhy5d2dvqWxi/y6weDwVVLU6vmK0cV9VpRxPzhTeGimbsbRDSnEoszhF937M4sDLLeS7Cu/Tmw==
   dependencies:
     throat "^4.0.0"
 
-jest-cli@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-22.1.4.tgz#0fe9f3ac881b0cdc00227114c58583a2ebefcc04"
+jest-cli@^22.4.4:
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-22.4.4.tgz#68cd2a2aae983adb1e6638248ca21082fd6d9e90"
+  integrity sha512-I9dsgkeyjVEEZj9wrGrqlH+8OlNob9Iptyl+6L5+ToOLJmHm4JwOPatin1b2Bzp5R5YRQJ+oiedx7o1H7wJzhA==
   dependencies:
     ansi-escapes "^3.0.0"
     chalk "^2.0.1"
@@ -4035,21 +4232,22 @@ jest-cli@^22.1.4:
     istanbul-lib-coverage "^1.1.1"
     istanbul-lib-instrument "^1.8.0"
     istanbul-lib-source-maps "^1.2.1"
-    jest-changed-files "^22.1.4"
-    jest-config "^22.1.4"
-    jest-environment-jsdom "^22.1.4"
+    jest-changed-files "^22.2.0"
+    jest-config "^22.4.4"
+    jest-environment-jsdom "^22.4.1"
     jest-get-type "^22.1.0"
-    jest-haste-map "^22.1.0"
-    jest-message-util "^22.1.0"
+    jest-haste-map "^22.4.2"
+    jest-message-util "^22.4.0"
     jest-regex-util "^22.1.0"
     jest-resolve-dependencies "^22.1.0"
-    jest-runner "^22.1.4"
-    jest-runtime "^22.1.4"
-    jest-snapshot "^22.1.2"
-    jest-util "^22.1.4"
-    jest-worker "^22.1.0"
+    jest-runner "^22.4.4"
+    jest-runtime "^22.4.4"
+    jest-snapshot "^22.4.0"
+    jest-util "^22.4.1"
+    jest-validate "^22.4.4"
+    jest-worker "^22.2.2"
     micromatch "^2.3.11"
-    node-notifier "^5.1.2"
+    node-notifier "^5.2.1"
     realpath-native "^1.0.0"
     rimraf "^2.5.4"
     slash "^1.0.0"
@@ -4058,104 +4256,155 @@ jest-cli@^22.1.4:
     which "^1.2.12"
     yargs "^10.0.3"
 
-jest-config@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-22.1.4.tgz#075ffacce83c3e38cf85b1b9ba0d21bd3ee27ad0"
+jest-config@^22.4.4:
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-22.4.4.tgz#72a521188720597169cd8b4ff86934ef5752d86a"
+  integrity sha512-9CKfo1GC4zrXSoMLcNeDvQBfgtqGTB1uP8iDIZ97oB26RCUb886KkKWhVcpyxVDOUxbhN+uzcBCeFe7w+Iem4A==
   dependencies:
     chalk "^2.0.1"
     glob "^7.1.1"
-    jest-environment-jsdom "^22.1.4"
-    jest-environment-node "^22.1.4"
+    jest-environment-jsdom "^22.4.1"
+    jest-environment-node "^22.4.1"
     jest-get-type "^22.1.0"
-    jest-jasmine2 "^22.1.4"
+    jest-jasmine2 "^22.4.4"
     jest-regex-util "^22.1.0"
-    jest-resolve "^22.1.4"
-    jest-util "^22.1.4"
-    jest-validate "^22.1.2"
-    pretty-format "^22.1.0"
+    jest-resolve "^22.4.2"
+    jest-util "^22.4.1"
+    jest-validate "^22.4.4"
+    pretty-format "^22.4.0"
 
-jest-diff@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-22.1.0.tgz#0fad9d96c87b453896bf939df3dc8aac6919ac38"
+jest-diff@^22.4.0, jest-diff@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-22.4.3.tgz#e18cc3feff0aeef159d02310f2686d4065378030"
+  integrity sha512-/QqGvCDP5oZOF6PebDuLwrB2BMD8ffJv6TAGAdEVuDx1+uEgrHpSFrfrOiMRx2eJ1hgNjlQrOQEHetVwij90KA==
   dependencies:
     chalk "^2.0.1"
     diff "^3.2.0"
-    jest-get-type "^22.1.0"
-    pretty-format "^22.1.0"
+    jest-get-type "^22.4.3"
+    pretty-format "^22.4.3"
+
+jest-diff@^24.0.0, jest-diff@^24.5.0:
+  version "24.5.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.5.0.tgz#a2d8627964bb06a91893c0fbcb28ab228c257652"
+  integrity sha512-mCILZd9r7zqL9Uh6yNoXjwGQx0/J43OD2vvWVKwOEOLZliQOsojXwqboubAQ+Tszrb6DHGmNU7m4whGeB9YOqw==
+  dependencies:
+    chalk "^2.0.1"
+    diff-sequences "^24.3.0"
+    jest-get-type "^24.3.0"
+    pretty-format "^24.5.0"
 
 jest-docblock@^21.0.0:
   version "21.2.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
 
-jest-docblock@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-22.1.0.tgz#3fe5986d5444cbcb149746eb4b07c57c5a464dfd"
+jest-docblock@^22.4.0, jest-docblock@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-22.4.3.tgz#50886f132b42b280c903c592373bb6e93bb68b19"
+  integrity sha512-uPKBEAw7YrEMcXueMKZXn/rbMxBiSv48fSqy3uEnmgOlQhSX+lthBqHb1fKWNVmFqAp9E/RsSdBfiV31LbzaOg==
   dependencies:
     detect-newline "^2.1.0"
 
-jest-environment-jsdom@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-22.1.4.tgz#704518ce8375f7ec5de048d1e9c4268b08a03e00"
+jest-dom@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/jest-dom/-/jest-dom-3.1.3.tgz#9490de549c02366fe586f23bdafffd8374bd1d65"
+  integrity sha512-V9LdySiA74/spcAKEG3FRMRKnisKlcYr3EeCNYI4n7CWNE7uYg5WoBUHeGXirjWjRYLLZ5vx8rUaR/6x6o75oQ==
   dependencies:
-    jest-mock "^22.1.0"
-    jest-util "^22.1.4"
+    chalk "^2.4.1"
+    css "^2.2.3"
+    css.escape "^1.5.1"
+    jest-diff "^24.0.0"
+    jest-matcher-utils "^24.0.0"
+    lodash "^4.17.11"
+    pretty-format "^24.0.0"
+    redent "^2.0.0"
+
+jest-environment-jsdom@^22.4.1:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-22.4.3.tgz#d67daa4155e33516aecdd35afd82d4abf0fa8a1e"
+  integrity sha512-FviwfR+VyT3Datf13+ULjIMO5CSeajlayhhYQwpzgunswoaLIPutdbrnfUHEMyJCwvqQFaVtTmn9+Y8WCt6n1w==
+  dependencies:
+    jest-mock "^22.4.3"
+    jest-util "^22.4.3"
     jsdom "^11.5.1"
 
-jest-environment-node@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-22.1.4.tgz#0f2946e8f8686ce6c5d8fa280ce1cd8d58e869eb"
+jest-environment-node@^22.4.1:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-22.4.3.tgz#54c4eaa374c83dd52a9da8759be14ebe1d0b9129"
+  integrity sha512-reZl8XF6t/lMEuPWwo9OLfttyC26A5AMgDyEQ6DBgZuyfyeNUzYT8BFo6uxCCP/Av/b7eb9fTi3sIHFPBzmlRA==
   dependencies:
-    jest-mock "^22.1.0"
-    jest-util "^22.1.4"
+    jest-mock "^22.4.3"
+    jest-util "^22.4.3"
 
-jest-get-type@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.1.0.tgz#4e90af298ed6181edc85d2da500dbd2753e0d5a9"
+jest-get-type@^22.1.0, jest-get-type@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
+  integrity sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==
 
-jest-haste-map@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-22.1.0.tgz#1174c6ff393f9818ebf1163710d8868b5370da2a"
+jest-get-type@^24.3.0:
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.3.0.tgz#582cfd1a4f91b5cdad1d43d2932f816d543c65da"
+  integrity sha512-HYF6pry72YUlVcvUx3sEpMRwXEWGEPlJ0bSPVnB3b3n++j4phUEoSPcS6GC0pPJ9rpyPSe4cb5muFo6D39cXow==
+
+jest-haste-map@^22.4.2:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-22.4.3.tgz#25842fa2ba350200767ac27f658d58b9d5c2e20b"
+  integrity sha512-4Q9fjzuPVwnaqGKDpIsCSoTSnG3cteyk2oNVjBX12HHOaF1oxql+uUiqZb5Ndu7g/vTZfdNwwy4WwYogLh29DQ==
   dependencies:
     fb-watchman "^2.0.0"
     graceful-fs "^4.1.11"
-    jest-docblock "^22.1.0"
-    jest-worker "^22.1.0"
+    jest-docblock "^22.4.3"
+    jest-serializer "^22.4.3"
+    jest-worker "^22.4.3"
     micromatch "^2.3.11"
     sane "^2.0.0"
 
-jest-jasmine2@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-22.1.4.tgz#cada0baf50a220c616a9575728b80d4ddedebe8b"
+jest-jasmine2@^22.4.4:
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-22.4.4.tgz#c55f92c961a141f693f869f5f081a79a10d24e23"
+  integrity sha512-nK3vdUl50MuH7vj/8at7EQVjPGWCi3d5+6aCi7Gxy/XMWdOdbH1qtO/LjKbqD8+8dUAEH+BVVh7HkjpCWC1CSw==
   dependencies:
-    callsites "^2.0.0"
     chalk "^2.0.1"
     co "^4.6.0"
-    expect "^22.1.0"
+    expect "^22.4.0"
     graceful-fs "^4.1.11"
     is-generator-fn "^1.0.0"
-    jest-diff "^22.1.0"
-    jest-matcher-utils "^22.1.0"
-    jest-message-util "^22.1.0"
-    jest-snapshot "^22.1.2"
+    jest-diff "^22.4.0"
+    jest-matcher-utils "^22.4.0"
+    jest-message-util "^22.4.0"
+    jest-snapshot "^22.4.0"
+    jest-util "^22.4.1"
     source-map-support "^0.5.0"
 
-jest-leak-detector@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-22.1.0.tgz#08376644cee07103da069baac19adb0299b772c2"
+jest-leak-detector@^22.4.0:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-22.4.3.tgz#2b7b263103afae8c52b6b91241a2de40117e5b35"
+  integrity sha512-NZpR/Ls7+ndO57LuXROdgCGz2RmUdC541tTImL9bdUtU3WadgFGm0yV+Ok4Fuia/1rLAn5KaJ+i76L6e3zGJYQ==
   dependencies:
-    pretty-format "^22.1.0"
+    pretty-format "^22.4.3"
 
-jest-matcher-utils@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-22.1.0.tgz#e164665b5d313636ac29f7f6fe9ef0a6ce04febc"
+jest-matcher-utils@^22.4.0, jest-matcher-utils@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-22.4.3.tgz#4632fe428ebc73ebc194d3c7b65d37b161f710ff"
+  integrity sha512-lsEHVaTnKzdAPR5t4B6OcxXo9Vy4K+kRRbG5gtddY8lBEC+Mlpvm1CJcsMESRjzUhzkz568exMV1hTB76nAKbA==
   dependencies:
     chalk "^2.0.1"
-    jest-get-type "^22.1.0"
-    pretty-format "^22.1.0"
+    jest-get-type "^22.4.3"
+    pretty-format "^22.4.3"
 
-jest-message-util@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-22.1.0.tgz#51ba0794cb6e579bfc4e9adfac452f9f1a0293fc"
+jest-matcher-utils@^24.0.0:
+  version "24.5.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.5.0.tgz#5995549dcf09fa94406e89526e877b094dad8770"
+  integrity sha512-QM1nmLROjLj8GMGzg5VBra3I9hLpjMPtF1YqzQS3rvWn2ltGZLrGAO1KQ9zUCVi5aCvrkbS5Ndm2evIP9yZg1Q==
+  dependencies:
+    chalk "^2.0.1"
+    jest-diff "^24.5.0"
+    jest-get-type "^24.3.0"
+    pretty-format "^24.5.0"
+
+jest-message-util@^22.4.0, jest-message-util@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-22.4.3.tgz#cf3d38aafe4befddbfc455e57d65d5239e399eb7"
+  integrity sha512-iAMeKxhB3Se5xkSjU0NndLLCHtP4n+GtCqV0bISKA5dmOXQfEbdEmYiu2qpnWBDCQdEafNDDU6Q+l6oBMd/+BA==
   dependencies:
     "@babel/code-frame" "^7.0.0-beta.35"
     chalk "^2.0.1"
@@ -4163,59 +4412,66 @@ jest-message-util@^22.1.0:
     slash "^1.0.0"
     stack-utils "^1.0.1"
 
-jest-mock@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-22.1.0.tgz#87ec21c0599325671c9a23ad0e05c86fb5879b61"
+jest-mock@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-22.4.3.tgz#f63ba2f07a1511772cdc7979733397df770aabc7"
+  integrity sha512-+4R6mH5M1G4NK16CKg9N1DtCaFmuxhcIqF4lQK/Q1CIotqMs/XBemfpDPeVZBFow6iyUNu6EBT9ugdNOTT5o5Q==
 
-jest-regex-util@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-22.1.0.tgz#5daf2fe270074b6da63e5d85f1c9acc866768f53"
+jest-regex-util@^22.1.0, jest-regex-util@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-22.4.3.tgz#a826eb191cdf22502198c5401a1fc04de9cef5af"
+  integrity sha512-LFg1gWr3QinIjb8j833bq7jtQopiwdAs67OGfkPrvy7uNUbVMfTXXcOKXJaeY5GgjobELkKvKENqq1xrUectWg==
 
 jest-resolve-dependencies@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-22.1.0.tgz#340e4139fb13315cd43abc054e6c06136be51e31"
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-22.4.3.tgz#e2256a5a846732dc3969cb72f3c9ad7725a8195e"
+  integrity sha512-06czCMVToSN8F2U4EvgSB1Bv/56gc7MpCftZ9z9fBgUQM7dzHGCMBsyfVA6dZTx8v0FDcnALf7hupeQxaBCvpA==
   dependencies:
-    jest-regex-util "^22.1.0"
+    jest-regex-util "^22.4.3"
 
-jest-resolve@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-22.1.4.tgz#72b9b371eaac48f84aad4ad732222ffe37692602"
+jest-resolve@^22.4.2:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-22.4.3.tgz#0ce9d438c8438229aa9b916968ec6b05c1abb4ea"
+  integrity sha512-u3BkD/MQBmwrOJDzDIaxpyqTxYH+XqAXzVJP51gt29H8jpj3QgKof5GGO2uPGKGeA1yTMlpbMs1gIQ6U4vcRhw==
   dependencies:
     browser-resolve "^1.11.2"
     chalk "^2.0.1"
 
-jest-runner@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-22.1.4.tgz#e039039110cb1b31febc0f99e349bf7c94304a2f"
+jest-runner@^22.4.4:
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-22.4.4.tgz#dfca7b7553e0fa617e7b1291aeb7ce83e540a907"
+  integrity sha512-5S/OpB51igQW9xnkM5Tgd/7ZjiAuIoiJAVtvVTBcEBiXBIFzWM3BAMPBM19FX68gRV0KWyFuGKj0EY3M3aceeQ==
   dependencies:
     exit "^0.1.2"
-    jest-config "^22.1.4"
-    jest-docblock "^22.1.0"
-    jest-haste-map "^22.1.0"
-    jest-jasmine2 "^22.1.4"
-    jest-leak-detector "^22.1.0"
-    jest-message-util "^22.1.0"
-    jest-runtime "^22.1.4"
-    jest-util "^22.1.4"
-    jest-worker "^22.1.0"
+    jest-config "^22.4.4"
+    jest-docblock "^22.4.0"
+    jest-haste-map "^22.4.2"
+    jest-jasmine2 "^22.4.4"
+    jest-leak-detector "^22.4.0"
+    jest-message-util "^22.4.0"
+    jest-runtime "^22.4.4"
+    jest-util "^22.4.1"
+    jest-worker "^22.2.2"
     throat "^4.0.0"
 
-jest-runtime@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-22.1.4.tgz#1474d9f5cda518b702e0b25a17d4ef3fc563a20c"
+jest-runtime@^22.4.4:
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-22.4.4.tgz#9ba7792fc75582a5be0f79af6f8fe8adea314048"
+  integrity sha512-WRTj9m///npte1YjuphCYX7GRY/c2YvJImU9t7qOwFcqHr4YMzmX6evP/3Sehz5DKW2Vi8ONYPCFWe36JVXxfw==
   dependencies:
     babel-core "^6.0.0"
-    babel-jest "^22.1.0"
+    babel-jest "^22.4.4"
     babel-plugin-istanbul "^4.1.5"
     chalk "^2.0.1"
     convert-source-map "^1.4.0"
     exit "^0.1.2"
     graceful-fs "^4.1.11"
-    jest-config "^22.1.4"
-    jest-haste-map "^22.1.0"
+    jest-config "^22.4.4"
+    jest-haste-map "^22.4.2"
     jest-regex-util "^22.1.0"
-    jest-resolve "^22.1.4"
-    jest-util "^22.1.4"
+    jest-resolve "^22.4.2"
+    jest-util "^22.4.1"
+    jest-validate "^22.4.4"
     json-stable-stringify "^1.0.1"
     micromatch "^2.3.11"
     realpath-native "^1.0.0"
@@ -4224,49 +4480,61 @@ jest-runtime@^22.1.4:
     write-file-atomic "^2.1.0"
     yargs "^10.0.3"
 
-jest-snapshot@^22.1.2:
-  version "22.1.2"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-22.1.2.tgz#b270cf6e3098f33aceeafda02b13eb0933dc6139"
+jest-serializer@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-22.4.3.tgz#a679b81a7f111e4766235f4f0c46d230ee0f7436"
+  integrity sha512-uPaUAppx4VUfJ0QDerpNdF43F68eqKWCzzhUlKNDsUPhjOon7ZehR4C809GCqh765FoMRtTVUVnGvIoskkYHiw==
+
+jest-snapshot@^22.4.0:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-22.4.3.tgz#b5c9b42846ffb9faccb76b841315ba67887362d2"
+  integrity sha512-JXA0gVs5YL0HtLDCGa9YxcmmV2LZbwJ+0MfyXBBc5qpgkEYITQFJP7XNhcHFbUvRiniRpRbGVfJrOoYhhGE0RQ==
   dependencies:
     chalk "^2.0.1"
-    jest-diff "^22.1.0"
-    jest-matcher-utils "^22.1.0"
+    jest-diff "^22.4.3"
+    jest-matcher-utils "^22.4.3"
     mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    pretty-format "^22.1.0"
+    pretty-format "^22.4.3"
 
-jest-util@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-22.1.4.tgz#ac8cbd43ee654102f1941f3f0e9d1d789a8b6a9b"
+jest-util@^22.4.1, jest-util@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-22.4.3.tgz#c70fec8eec487c37b10b0809dc064a7ecf6aafac"
+  integrity sha512-rfDfG8wyC5pDPNdcnAlZgwKnzHvZDu8Td2NJI/jAGKEGxJPYiE4F0ss/gSAkG4778Y23Hvbz+0GMrDJTeo7RjQ==
   dependencies:
     callsites "^2.0.0"
     chalk "^2.0.1"
     graceful-fs "^4.1.11"
     is-ci "^1.0.10"
-    jest-message-util "^22.1.0"
-    jest-validate "^22.1.2"
+    jest-message-util "^22.4.3"
     mkdirp "^0.5.1"
+    source-map "^0.6.0"
 
-jest-validate@^22.1.2:
-  version "22.1.2"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-22.1.2.tgz#c3b06bcba7bd9a850919fe336b5f2a8c3a239404"
+jest-validate@^22.4.4:
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-22.4.4.tgz#1dd0b616ef46c995de61810d85f57119dbbcec4d"
+  integrity sha512-dmlf4CIZRGvkaVg3fa0uetepcua44DHtktHm6rcoNVtYlpwe6fEJRkMFsaUVcFHLzbuBJ2cPw9Gl9TKfnzMVwg==
   dependencies:
     chalk "^2.0.1"
+    jest-config "^22.4.4"
     jest-get-type "^22.1.0"
     leven "^2.1.0"
-    pretty-format "^22.1.0"
+    pretty-format "^22.4.0"
 
-jest-worker@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-22.1.0.tgz#0987832fe58fbdc205357f4c19b992446368cafb"
+jest-worker@^22.2.2, jest-worker@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-22.4.3.tgz#5c421417cba1c0abf64bf56bd5fb7968d79dd40b"
+  integrity sha512-B1ucW4fI8qVAuZmicFxI1R3kr2fNeYJyvIQ1rKcuLYnenFV5K5aMbxFj6J0i00Ju83S8jP2d7Dz14+AvbIHRYQ==
   dependencies:
     merge-stream "^1.0.1"
 
 jest@^22.1.4:
-  version "22.1.4"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-22.1.4.tgz#9ec71373a38f40ff92a3e5e96ae85687c181bb72"
+  version "22.4.4"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-22.4.4.tgz#ffb36c9654b339a13e10b3d4b338eb3e9d49f6eb"
+  integrity sha512-eBhhW8OS/UuX3HxgzNBSVEVhSuRDh39Z1kdYkQVWna+scpgsrD7vSeBI7tmEvsguPDMnfJodW28YBnhv/BzSew==
   dependencies:
-    jest-cli "^22.1.4"
+    import-local "^1.0.0"
+    jest-cli "^22.4.4"
 
 js-base64@^2.1.9:
   version "2.4.0"
@@ -4276,18 +4544,26 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-"js-tokens@^3.0.0 || ^4.0.0":
+js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
+js-yaml@^3.4.3, js-yaml@^3.9.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
   dependencies:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^3.7.0:
+  version "3.12.2"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.2.tgz#ef1d067c5a9d9cb65bd72f285b5d8105c77f14fc"
+  integrity sha512-QHn/Lh/7HhZ/Twc7vJYQTkjuCa0kaCcDcjK5Zlk2rvnUpy7DxMJ23+Jc2dcyvltwQVg1nygAVlB2oRDFHoRS5Q==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^3.9.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
@@ -4566,13 +4842,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   dependencies:
     js-tokens "^3.0.0"
 
-loose-envify@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -4683,9 +4952,10 @@ merge2@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.2.2.tgz#03212e3da8d86c4d8523cebd6318193414f94e34"
 
-merge@^1.1.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+merge@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
+  integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
 
 methods@~1.1.2:
   version "1.1.2"
@@ -4891,6 +5161,11 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
+neo-async@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.0.tgz#b9d15e4d71c6762908654b5183ed38b753340835"
+  integrity sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==
+
 no-case@^2.2.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
@@ -4940,12 +5215,14 @@ node-libs-browser@^2.0.0:
     util "^0.10.3"
     vm-browserify "0.0.4"
 
-node-notifier@^5.1.2:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.2.1.tgz#fa313dd08f5517db0e2502e5758d664ac69f9dea"
+node-notifier@^5.2.1:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.0.tgz#7b455fdce9f7de0c63538297354f3db468426e6a"
+  integrity sha512-SUDEb+o71XR5lXSTyivXd9J7fCloE3SyP4lSgt3lU2oSANiox+SxlNRGPjDKrwU1YN3ix2KN/VGGCg0t01rttQ==
   dependencies:
     growly "^1.3.0"
-    semver "^5.4.1"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
     shellwords "^0.1.1"
     which "^1.3.0"
 
@@ -5986,18 +6263,29 @@ pretty-error@^2.0.2:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^22.1.0:
-  version "22.1.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.1.0.tgz#2277605b40ed4529ae4db51ff62f4be817647914"
+pretty-format@^22.4.0, pretty-format@^22.4.3:
+  version "22.4.3"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.4.3.tgz#f873d780839a9c02e9664c8a082e9ee79eaac16f"
+  integrity sha512-S4oT9/sT6MN7/3COoOy+ZJeA92VmOnveLHgrwBE3Z1W5N9S2A1QGNYiE1z75DAENbJrXXUb+OWXhpJcg05QKQQ==
   dependencies:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
+pretty-format@^24.0.0, pretty-format@^24.5.0:
+  version "24.5.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.5.0.tgz#cc69a0281a62cd7242633fc135d6930cd889822d"
+  integrity sha512-/3RuSghukCf8Riu5Ncve0iI+BzVkbRU5EeUoArKARZobREycuH5O4waxvaNIloEXdb0qwgmEAed5vTpX1HNROQ==
+  dependencies:
+    "@jest/types" "^24.5.0"
+    ansi-regex "^4.0.0"
+    ansi-styles "^3.2.0"
+    react-is "^16.8.4"
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
 
-private@^0.1.6, private@^0.1.7:
+private@^0.1.6, private@^0.1.7, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
 
@@ -6039,15 +6327,6 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.6.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
 proxy-addr@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -6212,7 +6491,7 @@ react-hot-loader@^3.1.3:
     redbox-react "^1.3.6"
     source-map "^0.6.1"
 
-react-is@^16.6.0, react-is@^16.8.1:
+react-is@^16.6.0, react-is@^16.8.4:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
   integrity sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==
@@ -6246,6 +6525,14 @@ react-test-renderer@^16.0.0-0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-testing-library@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-testing-library/-/react-testing-library-6.0.0.tgz#81edfcfae8a795525f48685be9bf561df45bb35d"
+  integrity sha512-h0h+YLe4KWptK6HxOMnoNN4ngu3W8isrwDmHjPC5gxc+nOZOCurOvbKVYCvvuAw91jdO7VZSm/5KR7TxKnz0qA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    dom-testing-library "^3.13.1"
+
 react@16.4.2:
   version "16.4.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.4.2.tgz#2cd90154e3a9d9dd8da2991149fdca3c260e129f"
@@ -6256,16 +6543,6 @@ react@16.4.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react@^16.8.4:
-  version "16.8.4"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768"
-  integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.13.4"
-
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -6333,8 +6610,9 @@ readdirp@^2.0.0:
     set-immediate-shim "^1.0.1"
 
 realpath-native@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.0.0.tgz#7885721a83b43bd5327609f0ddecb2482305fdf0"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
   dependencies:
     util.promisify "^1.0.0"
 
@@ -6354,6 +6632,14 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
+  dependencies:
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
+
 reduce-css-calc@^1.2.6:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
@@ -6380,6 +6666,11 @@ regenerator-runtime@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
+regenerator-runtime@^0.12.0:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
+  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
+
 regenerator-transform@^0.10.0:
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd"
@@ -6623,6 +6914,11 @@ rst-selector-parser@^2.2.3:
     lodash.flattendeep "^4.4.0"
     nearley "^2.7.10"
 
+rsvp@^3.3.3:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
+  integrity sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==
+
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -6658,31 +6954,25 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
 
 sane@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-2.2.0.tgz#d6d2e2fcab00e3d283c93b912b7c3a20846f1d56"
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-2.5.2.tgz#b4dc1861c21b427e929507a3e751e2a2cb8ab3fa"
+  integrity sha1-tNwYYcIbQn6SlQej51HiosuKs/o=
   dependencies:
-    anymatch "^1.3.0"
+    anymatch "^2.0.0"
+    capture-exit "^1.2.0"
     exec-sh "^0.2.0"
     fb-watchman "^2.0.0"
-    minimatch "^3.0.2"
+    micromatch "^3.1.4"
     minimist "^1.1.1"
     walker "~1.0.5"
     watch "~0.18.0"
   optionalDependencies:
-    fsevents "^1.1.1"
+    fsevents "^1.2.3"
 
 sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-scheduler@^0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.4.tgz#8fef05e7a3580c76c0364d2df5e550e4c9140298"
-  integrity sha512-cvSOlRPxOHs5dAhP9yiS/6IDmVAVxmk33f0CtTJRkmUWcb1Us+t7b1wqdzoC0REw2muC9V5f1L/w5R5uKGaepA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 schema-utils@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.3.0.tgz#f5877222ce3e931edae039f17eb3716e7137f8cf"
@@ -6703,9 +6993,10 @@ selfsigned@^1.9.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
 
-semver@^5.4.1:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+semver@^5.5.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
+  integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
 
 send@0.16.1:
   version "0.16.1"
@@ -6886,7 +7177,7 @@ source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
   dependencies:
@@ -6903,9 +7194,11 @@ source-map-support@^0.4.15:
     source-map "^0.5.6"
 
 source-map-support@^0.5.0:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.2.tgz#1a6297fd5b2e762b39688c7fc91233b60984f0a5"
+  version "0.5.11"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.11.tgz#efac2ce0800355d026326a0ca23e162aeac9a4e2"
+  integrity sha512-//sajEx/fGL3iw6fltKMdPvy8kL3kJ2O3iuYlRoT3k9Kb4BjOoZ+BZzaNHeuaruSt+Kf3Zk9tnfAQg9/AJqUVQ==
   dependencies:
+    buffer-from "^1.0.0"
     source-map "^0.6.0"
 
 source-map-url@^0.4.0:
@@ -6916,16 +7209,10 @@ source-map@0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
-source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.6:
+source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  dependencies:
-    amdefine ">=0.0.4"
-
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -7113,6 +7400,11 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
+strip-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
+  integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
+
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -7406,7 +7698,7 @@ uglify-js@3.3.x:
     commander "~2.12.1"
     source-map "~0.6.1"
 
-uglify-js@^2.6, uglify-js@^2.8.29:
+uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
   dependencies:
@@ -7415,6 +7707,14 @@ uglify-js@^2.6, uglify-js@^2.8.29:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
+uglify-js@^3.1.4:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
+  integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
+  dependencies:
+    commander "~2.19.0"
+    source-map "~0.6.1"
+
 uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
@@ -7590,6 +7890,11 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+wait-for-expect@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.1.0.tgz#6607375c3f79d32add35cd2c87ce13f351a3d453"
+  integrity sha512-vQDokqxyMyknfX3luCDn16bSaRcOyH6gGuUXMIbxBLeTo6nWuEWYqMTT9a+44FmW8c2m6TRWBdNvBBjA1hwEKg==
+
 walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
@@ -7599,6 +7904,7 @@ walker@~1.0.5:
 watch@~0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986"
+  integrity sha1-KAlUdsbffJDJYxOJkMClQj60uYY=
   dependencies:
     exec-sh "^0.2.0"
     minimist "^1.2.0"
@@ -7747,7 +8053,14 @@ which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which@^1.2.12, which@^1.2.9, which@^1.3.0:
+which@^1.2.12:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
+which@^1.2.9, which@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
   dependencies:
@@ -7787,8 +8100,9 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
 
 write-file-atomic@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.3.0.tgz#1ff61575c2e2a4e8e510d6fa4e243cce183999ab"
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.2.tgz#a7181706dfba17855d221140a9c06e15fcdd87b9"
+  integrity sha512-s0b6vB3xIVRLWywa6X9TOMA7k9zio0TMOsl9ZnDkliA/cfJlpHXAscj0gbHVJiTdIuAYpIyqS5GW91fqm6gG5g==
   dependencies:
     graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
@@ -7853,12 +8167,14 @@ yargs-parser@^7.0.0:
 yargs-parser@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-8.1.0.tgz#f1376a33b6629a5d063782944da732631e966950"
+  integrity sha512-yP+6QqN8BmrgW2ggLtTbdrOyBNSI7zBa4IykmiV5R1wl1JWNxQvWhMfMdmzIYtKU7oP3OOInY/tl2ov3BDjnJQ==
   dependencies:
     camelcase "^4.1.0"
 
 yargs@^10.0.3:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.1.1.tgz#5fe1ea306985a099b33492001fa19a1e61efe285"
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.1.2.tgz#454d074c2b16a51a43e2fb7807e4f9de69ccb5c5"
+  integrity sha512-ivSoxqBGYOqQVruxD35+EyCFDYNEFL/Uo6FcOnz+9xZdZzK0Zzw4r4KhbrME1Oo2gOggwJod2MnsdamSG7H9ig==
   dependencies:
     cliui "^4.0.0"
     decamelize "^1.1.1"

From 74d4f77f7d3badece947f92041f01284c56c2d5d Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Mon, 18 Mar 2019 16:53:03 -0600
Subject: [PATCH 06/29] Add Month test cases using `react-testing-library`

---
 src/components/Month.js                |  4 ++-
 src/components/__tests__/Month.spec.js | 40 ++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/components/__tests__/Month.spec.js

diff --git a/src/components/Month.js b/src/components/Month.js
index e0a9e67d4..c6670907d 100644
--- a/src/components/Month.js
+++ b/src/components/Month.js
@@ -104,7 +104,9 @@ class Month extends PureComponent {
   }
 }
 
-Month.defaultProps = {};
+Month.defaultProps = {
+  disabledDates: [],
+};
 
 Month.propTypes = {
   style: PropTypes.object,
diff --git a/src/components/__tests__/Month.spec.js b/src/components/__tests__/Month.spec.js
new file mode 100644
index 000000000..16b581a2f
--- /dev/null
+++ b/src/components/__tests__/Month.spec.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { render } from 'react-testing-library';
+import Month from '../Month';
+import { getMonthDisplayRange } from '../../utils';
+
+describe('The Month component', () => {
+  const monthDate = new Date('2019-03-10');
+  const props = {
+    month: monthDate,
+    drag: {
+      status: false,
+      range: {},
+    },
+    ranges: [],
+    styles: {},
+  };
+
+  it('should display the days from the other months', () => {
+    const displayMonthRange = getMonthDisplayRange(monthDate);
+    const { container, getByText } = render(<Month {...props} />);
+    expect(container).toContainElement(getByText(`${displayMonthRange.start.getDate()}`));
+    expect(container).toContainElement(getByText(`${displayMonthRange.end.getDate()}`));
+  });
+
+  it('should display the month name according the given format', () => {
+    const { container, getByText } = render(
+      <Month showMonthName monthDisplayFormat="MMM" {...props} />
+    );
+    expect(container).toContainElement(getByText('Mar'));
+  });
+
+  it('should be able to disable a specific date', () => {
+    const disabledDates = [new Date('2019-03-20'), new Date('2019-03-30')];
+    const { getByText } = render(<Month {...props} disabledDates={disabledDates} />);
+    expect(getByText('10').parentNode.parentNode).not.toBeDisabled();
+    // TODO: Find closest??
+    expect(getByText(`${disabledDates[0].getDate()}`).parentNode.parentNode).toBeDisabled();
+    expect(getByText(`${disabledDates[1].getDate()}`).parentNode.parentNode).toBeDisabled();
+  });
+});

From e7db5ec0604a5dbd188aecdcb3add7d56c17f19d Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Wed, 20 Mar 2019 09:43:38 -0600
Subject: [PATCH 07/29] Use `jest-styled-components`

---
 package.json | 1 +
 rtl.setup.js | 1 +
 yarn.lock    | 9 ++++++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1e0b9bdcd..7c433771d 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "html-webpack-plugin": "^2.30.1",
     "jest": "^22.1.4",
     "jest-dom": "^3.1.3",
+    "jest-styled-components": "^6.3.1",
     "normalize.css": "^7.0.0",
     "postcss": "^7.0.1",
     "postcss-cli": "^6.0.0",
diff --git a/rtl.setup.js b/rtl.setup.js
index 411a80cd5..7a144afae 100644
--- a/rtl.setup.js
+++ b/rtl.setup.js
@@ -1,2 +1,3 @@
 import 'jest-dom/extend-expect';
+import 'jest-styled-components';
 import 'react-testing-library/cleanup-after-each';
diff --git a/yarn.lock b/yarn.lock
index f5d8bc122..e806ec3f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2036,7 +2036,7 @@ css.escape@^1.5.1:
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
 
-css@^2.2.3:
+css@^2.2.3, css@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
   integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@@ -4497,6 +4497,13 @@ jest-snapshot@^22.4.0:
     natural-compare "^1.4.0"
     pretty-format "^22.4.3"
 
+jest-styled-components@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/jest-styled-components/-/jest-styled-components-6.3.1.tgz#fa21a89bfe8c20081c7c083cbaed2200854b60e3"
+  integrity sha512-zie3ajvJbwlbHCAq8/Bv5jdbcYCz0ZMRNNX6adL7wSRpkCVPQtiJigv1140JN1ZOJIODPn8VKrjeFCN+jlPa7w==
+  dependencies:
+    css "^2.2.4"
+
 jest-util@^22.4.1, jest-util@^22.4.3:
   version "22.4.3"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-22.4.3.tgz#c70fec8eec487c37b10b0809dc064a7ecf6aafac"

From 35f33174c876ce63c8785d509f90a20d7f2294bf Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Wed, 20 Mar 2019 09:46:51 -0600
Subject: [PATCH 08/29] Refactor DayCell to use style-components

---
 src/components/DayCell.js               |  54 ++++++---
 src/components/styles/DayCell.styled.js | 144 ++++++++++++++++++++++--
 2 files changed, 169 insertions(+), 29 deletions(-)

diff --git a/src/components/DayCell.js b/src/components/DayCell.js
index 2bca4f9da..fc0591e1e 100644
--- a/src/components/DayCell.js
+++ b/src/components/DayCell.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { startOfDay, format, isSameDay, isAfter, isBefore, endOfDay } from 'date-fns';
-import { DayNumber, Day } from './styles/DayCell.styled';
+import { DayNumber, Day, InRange, PreviewRange } from './styles/DayCell.styled';
 
 class DayCell extends Component {
   constructor(props, context) {
@@ -97,17 +97,16 @@ class DayCell extends Component {
     if (!preview) return null;
     const startDate = preview.startDate ? endOfDay(preview.startDate) : null;
     const endDate = preview.endDate ? startOfDay(preview.endDate) : null;
+    const isStartEdge = isSameDay(day, startDate);
+    const isEndEdge = isSameDay(day, endDate);
     const isInRange =
-      (!startDate || isAfter(day, startDate)) && (!endDate || isBefore(day, endDate));
-    const isStartEdge = !isInRange && isSameDay(day, startDate);
-    const isEndEdge = !isInRange && isSameDay(day, endDate);
+      (isStartEdge || isAfter(day, startDate)) && (isEndEdge || isBefore(day, endDate));
     return (
-      <span
-        className={classnames({
-          [styles.dayStartPreview]: isStartEdge,
-          [styles.dayInPreview]: isInRange,
-          [styles.dayEndPreview]: isEndEdge,
-        })}
+      <PreviewRange
+        data-testid="preview-range"
+        isStartEdge={isStartEdge}
+        isEndEdge={isEndEdge}
+        isInRange={isInRange}
         style={{ color: preview.color }}
       />
     );
@@ -117,7 +116,7 @@ class DayCell extends Component {
     if (this.props.displayMode === 'date') {
       let isSelected = isSameDay(this.props.day, this.props.date);
       return isSelected ? (
-        <span className={styles.selected} data="teste" style={{ color: this.props.color }} />
+        <InRange className={styles.selected} data="teste" style={{ color: this.props.color }} />
       ) : null;
     }
 
@@ -148,21 +147,40 @@ class DayCell extends Component {
     }, []);
 
     return inRanges.map((range, i) => (
-      <span
+      <InRange
         key={i}
-        className={classnames({
-          [styles.startEdge]: range.isStartEdge,
-          [styles.endEdge]: range.isEndEdge,
-          [styles.inRange]: range.isInRange,
-        })}
+        data-testid="in-range"
+        isStartEdge={range.isStartEdge}
+        isEndEdge={range.isEndEdge}
+        isInRange={range.isInRange}
         style={{ color: range.color || this.props.color }}
       />
     ));
   }
   render() {
-    const { disabled, styles } = this.props;
+    const {
+      isPassive,
+      isToday,
+      isWeekend,
+      isStartOfWeek,
+      isEndOfWeek,
+      isStartOfMonth,
+      isEndOfMonth,
+      disabled,
+      styles,
+    } = this.props;
+    const { active, hover } = this.state;
     return (
       <Day
+        isHover={hover}
+        isToday={isToday}
+        isActive={active}
+        isPassive={isPassive}
+        isEndOfWeek={isEndOfWeek}
+        isEndOfMonth={isEndOfMonth}
+        isStartOfWeek={isStartOfWeek}
+        isStartOfMonth={isStartOfMonth}
+        data-testid="day"
         type="button"
         disabled={disabled}
         onMouseEnter={this.handleMouseEvent}
diff --git a/src/components/styles/DayCell.styled.js b/src/components/styles/DayCell.styled.js
index 4c437a245..38d6e30e9 100644
--- a/src/components/styles/DayCell.styled.js
+++ b/src/components/styles/DayCell.styled.js
@@ -14,31 +14,149 @@ export const DayNumber = styled('span')`
     display: flex;
     align-items: center;
     justify-content: center;
+  }
+
+  span {
+    color: #1d2429;
+  }
+`;
+
+const rangeStart = css`
+  border-top-left-radius: 1.333em;
+  border-bottom-left-radius: 1.333em;
+  border-left-width: 1px;
+  left: 0px;
+`;
+
+const rangeEnd = css`
+  border-top-right-radius: 1.333em;
+  border-bottom-right-radius: 1.333em;
+  border-right-width: 1px;
+  right: 0px;
+`;
+
+export const InRange = styled('span')`
+  background: currentColor;
+  position: absolute;
+  top: 5px;
+  left: 0;
+  right: 0;
+  bottom: 5px;
+
+  ${({ isEndEdge }) => (isEndEdge ? rangeEnd : '')};
+  ${({ isStartEdge }) => (isStartEdge ? rangeStart : '')};
+
+  && ~ ${DayNumber} {
     span {
-      color: #1d2429;
+      color: #fff;
+    }
+
+    &:after {
+      background: #fff;
     }
   }
 `;
 
+export const inPreview = css`
+  border: 0px solid currentColor;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+`;
+
+export const PreviewRange = styled('span')`
+  position: absolute;
+  top: 3px;
+  left: -6px;
+  right: -6px;
+  bottom: 3px;
+  z-index: 1;
+  pointer-events: none;
+  border-color: currentColor;
+
+  ${({ isInRange }) => (isInRange ? inPreview : '')};
+  ${({ isEndEdge }) => (isEndEdge ? rangeEnd : '')};
+  ${({ isStartEdge }) => (isStartEdge ? rangeStart : '')};
+`;
+
+/**
+ * Day "edges"
+ */
+const dayRangeStart = css`
+  ${InRange}, ${PreviewRange} {
+    ${rangeStart};
+  }
+`;
+
+const dayRangeEnd = css`
+  ${InRange}, ${PreviewRange} {
+    ${rangeEnd};
+  }
+`;
+
 // Day States
 const dayDisabled = css`
-  background-color: rgb(248, 248, 248);
   cursor: not-allowed;
 
-  .rdrDayNumber span {
+  ${DayNumber} span {
     color: #aeb9bf;
   }
-  .rdrInRange,
-  .rdrStartEdge,
-  .rdrEndEdge,
-  .rdrSelected,
-  .rdrDayStartPreview,
-  .rdrDayInPreview,
-  .rdrDayEndPreview {
+
+  ${InRange} {
+    background-color: rgb(248, 248, 248);
+  }
+
+  ${InRange}, ${PreviewRange}, .rdrSelected {
     filter: grayscale(100%) opacity(60%);
   }
 `;
 
+const dayPassive = css`
+  pointer-events: none;
+  && ${DayNumber} span {
+    color: #d5dce0;
+  }
+
+  ${InRange}, ${PreviewRange}, .rdrSelected {
+    display: none;
+  }
+`;
+
+const dayToday = css`
+  ${DayNumber} {
+    font-weight: 500;
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 4px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      width: 18px;
+      height: 2px;
+      border-radius: 2px;
+      background: #3d91ff;
+    }
+  }
+`;
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+const isToday = ({ isToday }) => (isToday ? dayToday : '');
+// const isActive = ({ isActive }) => (isActive ? dayActive : '');
+const isDisabled = ({ disabled }) => (disabled ? dayDisabled : '');
+const isPassive = ({ isPassive }) => (isPassive ? dayPassive : '');
+const isRangeEnd = ({ isEndOfWeek, isEndOfMonth }) =>
+  isEndOfWeek || isEndOfMonth ? dayRangeEnd : '';
+const isRangeStart = ({ isStartOfMonth, isStartOfWeek }) =>
+  isStartOfWeek || isStartOfMonth ? dayRangeStart : '';
+
 // Day Cell
 export const Day = styled('button')`
   box-sizing: inherit;
@@ -58,5 +176,9 @@ export const Day = styled('button')`
     outline: 0;
   }
 
-  ${props => (props.disabled ? dayDisabled : '')};
+  ${isRangeEnd};
+  ${isRangeStart};
+  ${isDisabled};
+  ${isToday};
+  ${isPassive};
 `;

From b1cc9e24d0e960a0bc52f9be8f93050494df9abc Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Wed, 20 Mar 2019 09:48:18 -0600
Subject: [PATCH 09/29] Add test cases to DayCell

---
 src/components/__tests__/DayCell.spec.js | 159 +++++++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 src/components/__tests__/DayCell.spec.js

diff --git a/src/components/__tests__/DayCell.spec.js b/src/components/__tests__/DayCell.spec.js
new file mode 100644
index 000000000..d0a80ddc7
--- /dev/null
+++ b/src/components/__tests__/DayCell.spec.js
@@ -0,0 +1,159 @@
+import React from 'react';
+import { fireEvent, render } from 'react-testing-library';
+import DayCell from '../DayCell';
+import { inPreview } from '../styles/DayCell.styled';
+
+const range1 = {
+  startDate: new Date(),
+  endDate: new Date(),
+  color: 'red',
+  key: '1',
+  autoFocus: true,
+  disabled: true,
+  showDateDisplay: true,
+};
+
+const ranges = [range1];
+
+describe('The DayCell Component', () => {
+  const day = new Date('2019-03-01');
+  const props = {
+    day,
+    ranges,
+    styles: {
+      dayActive: 'dayActive',
+      dayHovered: 'dayHovered',
+    },
+    onPreviewChange: jest.fn(),
+  };
+
+  it('should display the day received as the prop', () => {
+    const { container, getByText } = render(<DayCell {...props} />);
+    const matcher = new RegExp(day.getDate());
+    expect(container).toContainElement(getByText(matcher));
+  });
+
+  describe('mouse events', () => {
+    const mockPreviewChange = jest.fn();
+    afterEach(() => {
+      jest.restoreAllMocks();
+      jest.resetAllMocks();
+    });
+
+    it('should not call onPreviewChange with the day when disabled', () => {
+      const { getByTestId, debug } = render(
+        <DayCell {...props} disabled onPreviewChange={mockPreviewChange} />
+      );
+      fireEvent.mouseEnter(getByTestId('day'));
+      expect(mockPreviewChange).toHaveBeenCalledWith();
+    });
+
+    it('should add hover styles on mouseEnter', () => {
+      let preview;
+      const mockMouseEnter = day => {
+        preview = {
+          startDate: day,
+          endDate: day,
+        };
+      };
+
+      const { queryByTestId, rerender } = render(
+        <DayCell {...props} preview={preview} onMouseEnter={mockMouseEnter} />
+      );
+
+      expect(queryByTestId('preview-range')).toBe(null);
+
+      fireEvent.mouseEnter(queryByTestId('day'));
+
+      rerender(
+        <DayCell
+          {...props}
+          preview={preview}
+          onMouseEnter={mockMouseEnter}
+          onPreviewChange={mockPreviewChange}
+        />
+      );
+      expect(queryByTestId('preview-range')).toHaveStyleRule(inPreview);
+    });
+
+    it('should select the day on mousedown and mouseup', () => {
+      let ranges = [];
+      const mockMouseEvent = day => {
+        ranges = [
+          {
+            startDate: day,
+            endDate: day,
+          },
+        ];
+      };
+      const { queryByTestId, rerender } = render(
+        <DayCell
+          {...props}
+          ranges={ranges}
+          onMouseDown={mockMouseEvent}
+          onMouseUp={mockMouseEvent}
+        />
+      );
+
+      expect(queryByTestId('in-range')).toBe(null);
+
+      fireEvent.mouseDown(queryByTestId('day'));
+      fireEvent.mouseUp(queryByTestId('day'));
+
+      rerender(
+        <DayCell
+          {...props}
+          ranges={ranges}
+          onMouseDown={mockMouseEvent}
+          onMouseUp={mockMouseEvent}
+        />
+      );
+      expect(queryByTestId('in-range')).toBeDefined();
+    });
+  });
+
+  describe('keyboard events', () => {
+    const mockMouseDown = jest.fn();
+    const mockMouseUp = jest.fn();
+    afterEach(() => {
+      jest.restoreAllMocks();
+      jest.resetAllMocks();
+    });
+
+    it('should support space key as if were a mouse event', () => {
+      const { getByTestId } = render(
+        <DayCell {...props} onMouseDown={mockMouseDown} onMouseUp={mockMouseUp} />
+      );
+
+      fireEvent.keyDown(getByTestId('day'), { keyCode: 13 });
+      expect(mockMouseDown).toBeCalledWith(day);
+
+      fireEvent.keyUp(getByTestId('day'), { keyCode: 13 });
+      expect(mockMouseUp).toBeCalledWith(day);
+    });
+
+    it('should support enter key as if were a mouse event', () => {
+      const { getByTestId } = render(
+        <DayCell {...props} onMouseDown={mockMouseDown} onMouseUp={mockMouseUp} />
+      );
+
+      fireEvent.keyDown(getByTestId('day'), { keyCode: 32 });
+      expect(mockMouseDown).toBeCalledWith(day);
+
+      fireEvent.keyUp(getByTestId('day'), { keyCode: 32 });
+      expect(mockMouseUp).toBeCalledWith(day);
+    });
+
+    it('should not trigger mouse events if not space or enter key', () => {
+      const { getByTestId } = render(
+        <DayCell {...props} onMouseDown={mockMouseDown} onMouseUp={mockMouseUp} />
+      );
+
+      fireEvent.keyDown(getByTestId('day'), { keyCode: 62 });
+      expect(mockMouseDown).not.toHaveBeenCalled();
+
+      fireEvent.keyUp(getByTestId('day'), { keyCode: 62 });
+      expect(mockMouseUp).not.toHaveBeenCalled();
+    });
+  });
+});

From 07a6cc94094622ae0389c8cb7591f0c429b703f1 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Wed, 20 Mar 2019 13:29:51 -0600
Subject: [PATCH 10/29] Remove unused styles

---
 src/components/dateRange.scss | 3 ---
 src/styles.scss               | 1 -
 src/theme/default.scss        | 6 ------
 3 files changed, 10 deletions(-)
 delete mode 100644 src/components/dateRange.scss

diff --git a/src/components/dateRange.scss b/src/components/dateRange.scss
deleted file mode 100644
index 89dcf26d2..000000000
--- a/src/components/dateRange.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.rdrDateRangeWrapper{
-  user-select: none;
-}
diff --git a/src/styles.scss b/src/styles.scss
index 7b0a79cfe..4047fa97a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,2 +1 @@
-@import 'components/dateRange.scss';
 @import 'components/dayCell.scss';
diff --git a/src/theme/default.scss b/src/theme/default.scss
index c148fce9d..24491eec3 100644
--- a/src/theme/default.scss
+++ b/src/theme/default.scss
@@ -137,12 +137,6 @@
   right: 0px;
 }
 
-.rdrDefinedRangesWrapper{
-  .rdrStaticRangeSelected{
-    color: red !important;
-    font-weight: 600;
-  }
-}
 
 .rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
   content: '';

From 36bd8f8763a3b84df0b8261ea6d541367f4c9a4f Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Wed, 20 Mar 2019 14:53:29 -0600
Subject: [PATCH 11/29] Use new syntax on `styled-components`

---
 src/components/styles/Calendar.styled.js      | 20 +++++++++----------
 .../styles/DateRangePicker.styles.js          |  2 +-
 src/components/styles/DayCell.styled.js       |  4 ++--
 src/components/styles/DefinedRange.styled.js  | 14 ++++++-------
 src/components/styles/Month.styled.js         | 10 +++++-----
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/styles/Calendar.styled.js b/src/components/styles/Calendar.styled.js
index 80c43488b..ea35218a0 100644
--- a/src/components/styles/Calendar.styled.js
+++ b/src/components/styles/Calendar.styled.js
@@ -4,7 +4,7 @@ const marginHorizontal = css`
   margin: 0 5px;
 `;
 
-export const CalendarWrapper = styled('div')`
+export const CalendarWrapper = styled.div`
   box-sizing: border-box;
   background: #ffffff;
   display: inline-flex;
@@ -14,7 +14,7 @@ export const CalendarWrapper = styled('div')`
   font-size: 12px;
 `;
 
-export const MonthAndYearWrapper = styled('div')`
+export const MonthAndYearWrapper = styled.div`
   box-sizing: inherit;
   display: flex;
   justify-content: space-between;
@@ -23,7 +23,7 @@ export const MonthAndYearWrapper = styled('div')`
   padding-top: 10px;
 `;
 
-export const MonthAndYearPickers = styled('span')`
+export const MonthAndYearPickers = styled.span`
   flex: 1 1 auto;
   display: flex;
   justify-content: center;
@@ -50,15 +50,15 @@ export const MonthAndYearPickers = styled('span')`
   }
 `;
 
-export const YearPicker = styled('span')`
+export const YearPicker = styled.span`
   ${marginHorizontal};
 `;
 
-export const MonthPicker = styled('span')`
+export const MonthPicker = styled.span`
   ${marginHorizontal};
 `;
 
-export const DateDisplay = styled('div')`
+export const DateDisplay = styled.div`
   display: flex;
   justify-content: space-between;
   background-color: rgb(239, 242, 247);
@@ -76,12 +76,12 @@ const monthsHorizontal = css`
   }
 `;
 
-export const Months = styled('div')`
+export const Months = styled.div`
   display: flex;
   ${props => (props.direction === 'vertical' ? monthsVertical : monthsHorizontal)};
 `;
 
-export const InfiniteMonths = styled('div')`
+export const InfiniteMonths = styled.div`
   overflow: auto;
   ${props => (props.direction === 'vertical' ? monthsVertical : monthsHorizontal)};
 `;
@@ -96,7 +96,7 @@ const dateDisplayItemActive = css`
   }
 `;
 
-export const DateDisplayItem = styled('span')`
+export const DateDisplayItem = styled.span`
   flex: 1 1;
   width: 0;
   text-align: center;
@@ -146,7 +146,7 @@ const nextButton = css`
   }
 `;
 
-export const NavigationButton = styled('button')`
+export const NavigationButton = styled.button`
   box-sizing: inherit;
   cursor: pointer;
   outline: none;
diff --git a/src/components/styles/DateRangePicker.styles.js b/src/components/styles/DateRangePicker.styles.js
index 2b553141e..09d8ce491 100644
--- a/src/components/styles/DateRangePicker.styles.js
+++ b/src/components/styles/DateRangePicker.styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const DateRangePickerWrapper = styled('div')`
+export const DateRangePickerWrapper = styled.div`
   display: inline-flex;
   user-select: none;
 `;
diff --git a/src/components/styles/DayCell.styled.js b/src/components/styles/DayCell.styled.js
index 4c437a245..ba3969545 100644
--- a/src/components/styles/DayCell.styled.js
+++ b/src/components/styles/DayCell.styled.js
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-export const DayNumber = styled('span')`
+export const DayNumber = styled.span`
   && {
     outline: 0;
     font-weight: 300;
@@ -40,7 +40,7 @@ const dayDisabled = css`
 `;
 
 // Day Cell
-export const Day = styled('button')`
+export const Day = styled.button`
   box-sizing: inherit;
   width: calc(100% / 7);
   position: relative;
diff --git a/src/components/styles/DefinedRange.styled.js b/src/components/styles/DefinedRange.styled.js
index 501bee1c9..9a5e91cc5 100644
--- a/src/components/styles/DefinedRange.styled.js
+++ b/src/components/styles/DefinedRange.styled.js
@@ -1,12 +1,12 @@
 import styled, { css } from 'styled-components';
 
 // Static Ranges
-export const StaticRanges = styled('div')`
+export const StaticRanges = styled.div`
   display: flex;
   flex-direction: column;
 `;
 
-export const StaticRangeLabel = styled('span')`
+export const StaticRangeLabel = styled.span`
   display: block;
   outline: 0;
   line-height: 18px;
@@ -16,7 +16,7 @@ export const StaticRangeLabel = styled('span')`
 
 const staticRangeSelected = css``;
 
-export const StaticRange = styled('button')`
+export const StaticRange = styled.button`
   border: 0;
   cursor: pointer;
   display: block;
@@ -33,7 +33,7 @@ export const StaticRange = styled('button')`
   }
 `;
 
-export const DefinedRangesWrapper = styled('div')`
+export const DefinedRangesWrapper = styled.div`
   font-size: 12px;
   width: 226px;
   border-right: solid 1px #eff2f7;
@@ -45,17 +45,17 @@ export const DefinedRangesWrapper = styled('div')`
 `;
 
 // Input ranges
-export const InputRanges = styled('div')`
+export const InputRanges = styled.div`
   padding: 10px 0;
 `;
 
-export const InputRange = styled('div')`
+export const InputRange = styled.div`
   display: flex;
   align-items: center;
   padding: 5px 20px;
 `;
 
-export const InputRangeInput = styled('input')`
+export const InputRangeInput = styled.input`
   width: 30px;
   height: 30px;
   line-height: 30px;
diff --git a/src/components/styles/Month.styled.js b/src/components/styles/Month.styled.js
index 705518634..c7c455f34 100644
--- a/src/components/styles/Month.styled.js
+++ b/src/components/styles/Month.styled.js
@@ -1,18 +1,18 @@
 import styled from 'styled-components';
 
-export const MonthName = styled('div')`
+export const MonthName = styled.div`
   text-align: left;
   font-weight: 600;
   color: #849095;
   padding: 0.833em;
 `;
 
-export const WeekDays = styled('div')`
+export const WeekDays = styled.div`
   display: flex;
   padding: 0 0.833em;
 `;
 
-export const WeekDay = styled('span')`
+export const WeekDay = styled.span`
   flex-basis: calc(100% / 7);
   box-sizing: inherit;
   text-align: center;
@@ -21,12 +21,12 @@ export const WeekDay = styled('span')`
   color: rgb(132, 144, 149);
 `;
 
-export const Days = styled('div')`
+export const Days = styled.div`
   display: flex;
   flex-wrap: wrap;
 `;
 
-export const MonthWrapper = styled('div')`
+export const MonthWrapper = styled.div`
   width: 27.667em;
   padding: 0 0.833em 1.666em 0.833em;
   ${WeekDays} {

From 6e447ab480e7dd5559e7b6e10ca1a6b7029c5c1d Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Wed, 20 Mar 2019 16:59:47 -0600
Subject: [PATCH 12/29] Add selection test cases for DateRange

---
 src/components/DateRange.js                |  6 +++-
 src/components/__tests__/DateRange.spec.js | 35 ++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/components/__tests__/DateRange.spec.js

diff --git a/src/components/DateRange.js b/src/components/DateRange.js
index dfe26bf95..00f608827 100644
--- a/src/components/DateRange.js
+++ b/src/components/DateRange.js
@@ -4,7 +4,6 @@ import Calendar from './Calendar.js';
 import { rangeShape } from './DayCell';
 import { findNextRangeIndex, generateStyles } from '../utils.js';
 import { isBefore, differenceInCalendarDays, addDays, min, isWithinInterval, max } from 'date-fns';
-import classnames from 'classnames';
 import coreStyles from '../styles';
 
 class DateRange extends Component {
@@ -20,6 +19,7 @@ class DateRange extends Component {
     };
     this.styles = generateStyles([coreStyles, props.classNames]);
   }
+
   calcNewSelection(value, isSingleValue = true) {
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const { ranges, onChange, maxDate, moveRangeOnFirstSelection, disabledDates } = this.props;
@@ -76,6 +76,7 @@ class DateRange extends Component {
       nextFocusRange: nextFocusRange,
     };
   }
+
   setSelection(value, isSingleValue) {
     const { onChange, ranges, onRangeFocusChange } = this.props;
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
@@ -95,10 +96,12 @@ class DateRange extends Component {
     });
     onRangeFocusChange && onRangeFocusChange(newSelection.nextFocusRange);
   }
+
   handleRangeFocusChange(focusedRange) {
     this.setState({ focusedRange });
     this.props.onRangeFocusChange && this.props.onRangeFocusChange(focusedRange);
   }
+
   updatePreview(val) {
     if (!val) {
       this.setState({ preview: null });
@@ -109,6 +112,7 @@ class DateRange extends Component {
     const color = ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color;
     this.setState({ preview: { ...val.range, color } });
   }
+
   render() {
     return (
       <Calendar
diff --git a/src/components/__tests__/DateRange.spec.js b/src/components/__tests__/DateRange.spec.js
new file mode 100644
index 000000000..9ece54578
--- /dev/null
+++ b/src/components/__tests__/DateRange.spec.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, getAllByTestId, getByTestId, fireEvent } from 'react-testing-library';
+import DateRange from '../DateRange';
+
+const getByTestIdAndText = (container, testId, text) =>
+  getByTestId(container, (content, element) => {
+    return content === testId && element.textContent === text;
+  });
+
+const getDayByText = (container, day) => getByTestIdAndText(container, 'day', day);
+
+describe('The DateRange Component', () => {
+  it('should select a range of days', () => {
+    let range = {
+      startDate: new Date(),
+      key: 'selection',
+    };
+    const handleChange = ({ selection }) => {
+      range = selection;
+    };
+    const { container, rerender } = render(<DateRange ranges={[range]} onChange={handleChange} />);
+
+    const firstDay = getDayByText(container, '15');
+    const secondDay = getDayByText(container, '16');
+    fireEvent.mouseEnter(firstDay);
+    fireEvent.mouseDown(firstDay);
+    fireEvent.mouseMove(secondDay);
+    fireEvent.mouseUp(secondDay);
+
+    rerender(<DateRange ranges={[range]} onChange={handleChange} />);
+
+    expect(firstDay).toContainElement(getByTestId(firstDay, 'in-range'));
+    expect(secondDay).toContainElement(getByTestId(secondDay, 'in-range'));
+  });
+});

From 1485d65e471116dbd01747673970e5024a1c4a3e Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevin.dantas@skipthedishes.ca>
Date: Thu, 21 Mar 2019 10:59:47 -0600
Subject: [PATCH 13/29] Add test cases for DefinedRange component

---
 src/components/DefinedRange.js                |    4 +-
 src/components/DefinedRange.test.js           |  135 --
 .../__snapshots__/DefinedRange.test.js.snap   | 1322 -----------------
 src/components/__tests__/DefinedRange.spec.js |  221 +++
 .../__snapshots__/DefinedRange.spec.js.snap   |  183 +++
 src/components/styles/DefinedRange.styled.js  |   18 +-
 6 files changed, 414 insertions(+), 1469 deletions(-)
 delete mode 100644 src/components/DefinedRange.test.js
 delete mode 100644 src/components/__snapshots__/DefinedRange.test.js.snap
 create mode 100644 src/components/__tests__/DefinedRange.spec.js
 create mode 100644 src/components/__tests__/__snapshots__/DefinedRange.spec.js.snap

diff --git a/src/components/DefinedRange.js b/src/components/DefinedRange.js
index 1b906ab0c..e8ccdc9be 100644
--- a/src/components/DefinedRange.js
+++ b/src/components/DefinedRange.js
@@ -62,9 +62,7 @@ class DefinedRanges extends Component {
             return (
               <StaticRange
                 type="button"
-                className={cx({
-                  [styles.staticRangeSelected]: Boolean(selectedRange),
-                })}
+                selected={Boolean(selectedRange)}
                 style={{
                   color: selectedRange
                     ? selectedRange.color || rangeColors[focusedRangeIndex]
diff --git a/src/components/DefinedRange.test.js b/src/components/DefinedRange.test.js
deleted file mode 100644
index 9e9711c61..000000000
--- a/src/components/DefinedRange.test.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-
-import DefinedRange from './DefinedRange';
-import { isSameDay } from 'date-fns';
-
-describe('DefinedRange tests', () => {
-  test('Should call "renderStaticRangeLabel" callback correct amount of times according to the "hasCustomRendering" option', () => {
-    const renderStaticRangeLabel = jest.fn();
-
-    mount(
-      <DefinedRange
-        staticRanges={[
-          {
-            label: 'Dynamic Label',
-            range: {},
-            isSelected(range) {
-              const definedRange = this.range();
-              return (
-                isSameDay(range.startDate, definedRange.startDate) &&
-                isSameDay(range.endDate, definedRange.endDate)
-              );
-            },
-            hasCustomRendering: true,
-          },
-          {
-            label: 'Static Label',
-            range: {},
-            isSelected(range) {
-              const definedRange = this.range();
-              return (
-                isSameDay(range.startDate, definedRange.startDate) &&
-                isSameDay(range.endDate, definedRange.endDate)
-              );
-            },
-          },
-          {
-            label: 'Hede',
-            range: {},
-            isSelected(range) {
-              const definedRange = this.range();
-              return (
-                isSameDay(range.startDate, definedRange.startDate) &&
-                isSameDay(range.endDate, definedRange.endDate)
-              );
-            },
-            hasCustomRendering: true,
-          },
-        ]}
-        renderStaticRangeLabel={renderStaticRangeLabel}
-      />
-    );
-
-    expect(renderStaticRangeLabel).toHaveBeenCalledTimes(2);
-  });
-
-  test('Should render dynamic static label contents correctly', () => {
-    const renderItalicLabelContent = () => (
-      <i className={'italic-label-content'}>{'Italic Content'}</i>
-    );
-    const renderBoldLabelContent = () => <b className={'bold-label-content'}>{'Bold Content'}</b>;
-    const renderSomethingElse = () => <img className={'random-image'} />;
-
-    const renderStaticRangeLabel = function(staticRange) {
-      let result;
-
-      if (staticRange.id === 'italic') {
-        result = renderItalicLabelContent();
-      } else if (staticRange.id === 'bold') {
-        result = renderBoldLabelContent();
-      } else {
-        result = renderSomethingElse();
-      }
-
-      return result;
-    };
-
-    const wrapper = shallow(
-        <DefinedRange
-          staticRanges={[
-            {
-              id: 'italic',
-              range: {},
-              isSelected(range) {
-                const definedRange = this.range();
-                return (
-                  isSameDay(range.startDate, definedRange.startDate) &&
-                  isSameDay(range.endDate, definedRange.endDate)
-                );
-              },
-              hasCustomRendering: true,
-            },
-            {
-              label: 'Static Label',
-              range: {},
-              isSelected(range) {
-                const definedRange = this.range();
-                return (
-                  isSameDay(range.startDate, definedRange.startDate) &&
-                  isSameDay(range.endDate, definedRange.endDate)
-                );
-              },
-            },
-            {
-              id: 'whatever',
-              range: {},
-              isSelected(range) {
-                const definedRange = this.range();
-                return (
-                  isSameDay(range.startDate, definedRange.startDate) &&
-                  isSameDay(range.endDate, definedRange.endDate)
-                );
-              },
-              hasCustomRendering: true,
-            },
-            {
-              id: 'bold',
-              range: {},
-              isSelected(range) {
-                const definedRange = this.range();
-                return (
-                  isSameDay(range.startDate, definedRange.startDate) &&
-                  isSameDay(range.endDate, definedRange.endDate)
-                );
-              },
-              hasCustomRendering: true,
-            },
-          ]}
-          renderStaticRangeLabel={renderStaticRangeLabel}
-        />
-      );
-
-    expect(wrapper).toMatchSnapshot();
-  });
-});
diff --git a/src/components/__snapshots__/DefinedRange.test.js.snap b/src/components/__snapshots__/DefinedRange.test.js.snap
deleted file mode 100644
index 1f8b93115..000000000
--- a/src/components/__snapshots__/DefinedRange.test.js.snap
+++ /dev/null
@@ -1,1322 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DefinedRange tests Should render dynamic static label contents correctly 1`] = `
-ShallowWrapper {
-  "length": 1,
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <DefinedRanges
-    focusedRange={
-      Array [
-        0,
-        0,
-      ]
-    }
-    inputRanges={
-      Array [
-        Object {
-          "getCurrentValue": [Function],
-          "label": "days up to today",
-          "range": [Function],
-        },
-        Object {
-          "getCurrentValue": [Function],
-          "label": "days starting today",
-          "range": [Function],
-        },
-      ]
-    }
-    rangeColors={
-      Array [
-        "#3d91ff",
-        "#3ecf8e",
-        "#fed14c",
-      ]
-    }
-    ranges={Array []}
-    renderStaticRangeLabel={[Function]}
-    staticRanges={
-      Array [
-        Object {
-          "hasCustomRendering": true,
-          "id": "italic",
-          "isSelected": [Function],
-          "range": Object {},
-        },
-        Object {
-          "isSelected": [Function],
-          "label": "Static Label",
-          "range": Object {},
-        },
-        Object {
-          "hasCustomRendering": true,
-          "id": "whatever",
-          "isSelected": [Function],
-          "range": Object {},
-        },
-        Object {
-          "hasCustomRendering": true,
-          "id": "bold",
-          "isSelected": [Function],
-          "range": Object {},
-        },
-      ]
-    }
-  />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": Array [
-        undefined,
-        <div
-          className="rdrStaticRanges"
-        >
-          <button
-            className="rdrStaticRange"
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseOver={[Function]}
-            style={
-              Object {
-                "color": null,
-              }
-            }
-            type="button"
-          >
-            <span
-              className="rdrStaticRangeLabel"
-              tabIndex={-1}
-            >
-              <i
-                className="italic-label-content"
-              >
-                Italic Content
-              </i>
-            </span>
-          </button>
-          <button
-            className="rdrStaticRange"
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseOver={[Function]}
-            style={
-              Object {
-                "color": null,
-              }
-            }
-            type="button"
-          >
-            <span
-              className="rdrStaticRangeLabel"
-              tabIndex={-1}
-            >
-              Static Label
-            </span>
-          </button>
-          <button
-            className="rdrStaticRange"
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseOver={[Function]}
-            style={
-              Object {
-                "color": null,
-              }
-            }
-            type="button"
-          >
-            <span
-              className="rdrStaticRangeLabel"
-              tabIndex={-1}
-            >
-              <img
-                className="random-image"
-              />
-            </span>
-          </button>
-          <button
-            className="rdrStaticRange"
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseLeave={[Function]}
-            onMouseOver={[Function]}
-            style={
-              Object {
-                "color": null,
-              }
-            }
-            type="button"
-          >
-            <span
-              className="rdrStaticRangeLabel"
-              tabIndex={-1}
-            >
-              <b
-                className="bold-label-content"
-              >
-                Bold Content
-              </b>
-            </span>
-          </button>
-        </div>,
-        <div
-          className="rdrInputRanges"
-        >
-          <div
-            className="rdrInputRange"
-          >
-            <input
-              className="rdrInputRangeInput"
-              max={99999}
-              min={0}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              value="-"
-            />
-            <span
-              className={undefined}
-            >
-              days up to today
-            </span>
-          </div>
-          <div
-            className="rdrInputRange"
-          >
-            <input
-              className="rdrInputRangeInput"
-              max={99999}
-              min={0}
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              value="-"
-            />
-            <span
-              className={undefined}
-            >
-              days starting today
-            </span>
-          </div>
-        </div>,
-        undefined,
-      ],
-      "className": "rdrDefinedRangesWrapper",
-    },
-    "ref": null,
-    "rendered": Array [
-      undefined,
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <button
-              className="rdrStaticRange"
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              style={
-                Object {
-                  "color": null,
-                }
-              }
-              type="button"
-            >
-              <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                <i
-                  className="italic-label-content"
-                >
-                  Italic Content
-                </i>
-              </span>
-            </button>,
-            <button
-              className="rdrStaticRange"
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              style={
-                Object {
-                  "color": null,
-                }
-              }
-              type="button"
-            >
-              <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                Static Label
-              </span>
-            </button>,
-            <button
-              className="rdrStaticRange"
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              style={
-                Object {
-                  "color": null,
-                }
-              }
-              type="button"
-            >
-              <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                <img
-                  className="random-image"
-                />
-              </span>
-            </button>,
-            <button
-              className="rdrStaticRange"
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              style={
-                Object {
-                  "color": null,
-                }
-              }
-              type="button"
-            >
-              <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                <b
-                  className="bold-label-content"
-                >
-                  Bold Content
-                </b>
-              </span>
-            </button>,
-          ],
-          "className": "rdrStaticRanges",
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": "0",
-            "nodeType": "host",
-            "props": Object {
-              "children": <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                <i
-                  className="italic-label-content"
-                >
-                  Italic Content
-                </i>
-              </span>,
-              "className": "rdrStaticRange",
-              "onClick": [Function],
-              "onFocus": [Function],
-              "onMouseLeave": [Function],
-              "onMouseOver": [Function],
-              "style": Object {
-                "color": null,
-              },
-              "type": "button",
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": <i
-                  className="italic-label-content"
-                >
-                  Italic Content
-                </i>,
-                "className": "rdrStaticRangeLabel",
-                "tabIndex": -1,
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": "Italic Content",
-                  "className": "italic-label-content",
-                },
-                "ref": null,
-                "rendered": "Italic Content",
-                "type": "i",
-              },
-              "type": "span",
-            },
-            "type": "button",
-          },
-          Object {
-            "instance": null,
-            "key": "1",
-            "nodeType": "host",
-            "props": Object {
-              "children": <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                Static Label
-              </span>,
-              "className": "rdrStaticRange",
-              "onClick": [Function],
-              "onFocus": [Function],
-              "onMouseLeave": [Function],
-              "onMouseOver": [Function],
-              "style": Object {
-                "color": null,
-              },
-              "type": "button",
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "Static Label",
-                "className": "rdrStaticRangeLabel",
-                "tabIndex": -1,
-              },
-              "ref": null,
-              "rendered": "Static Label",
-              "type": "span",
-            },
-            "type": "button",
-          },
-          Object {
-            "instance": null,
-            "key": "2",
-            "nodeType": "host",
-            "props": Object {
-              "children": <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                <img
-                  className="random-image"
-                />
-              </span>,
-              "className": "rdrStaticRange",
-              "onClick": [Function],
-              "onFocus": [Function],
-              "onMouseLeave": [Function],
-              "onMouseOver": [Function],
-              "style": Object {
-                "color": null,
-              },
-              "type": "button",
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": <img
-                  className="random-image"
-                />,
-                "className": "rdrStaticRangeLabel",
-                "tabIndex": -1,
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "className": "random-image",
-                },
-                "ref": null,
-                "rendered": null,
-                "type": "img",
-              },
-              "type": "span",
-            },
-            "type": "button",
-          },
-          Object {
-            "instance": null,
-            "key": "3",
-            "nodeType": "host",
-            "props": Object {
-              "children": <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                <b
-                  className="bold-label-content"
-                >
-                  Bold Content
-                </b>
-              </span>,
-              "className": "rdrStaticRange",
-              "onClick": [Function],
-              "onFocus": [Function],
-              "onMouseLeave": [Function],
-              "onMouseOver": [Function],
-              "style": Object {
-                "color": null,
-              },
-              "type": "button",
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": <b
-                  className="bold-label-content"
-                >
-                  Bold Content
-                </b>,
-                "className": "rdrStaticRangeLabel",
-                "tabIndex": -1,
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": "Bold Content",
-                  "className": "bold-label-content",
-                },
-                "ref": null,
-                "rendered": "Bold Content",
-                "type": "b",
-              },
-              "type": "span",
-            },
-            "type": "button",
-          },
-        ],
-        "type": "div",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <div
-              className="rdrInputRange"
-            >
-              <input
-                className="rdrInputRangeInput"
-                max={99999}
-                min={0}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                value="-"
-              />
-              <span
-                className={undefined}
-              >
-                days up to today
-              </span>
-            </div>,
-            <div
-              className="rdrInputRange"
-            >
-              <input
-                className="rdrInputRangeInput"
-                max={99999}
-                min={0}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                value="-"
-              />
-              <span
-                className={undefined}
-              >
-                days starting today
-              </span>
-            </div>,
-          ],
-          "className": "rdrInputRanges",
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": "0",
-            "nodeType": "host",
-            "props": Object {
-              "children": Array [
-                <input
-                  className="rdrInputRangeInput"
-                  max={99999}
-                  min={0}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  value="-"
-                />,
-                <span
-                  className={undefined}
-                >
-                  days up to today
-                </span>,
-              ],
-              "className": "rdrInputRange",
-            },
-            "ref": null,
-            "rendered": Array [
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "className": "rdrInputRangeInput",
-                  "max": 99999,
-                  "min": 0,
-                  "onBlur": [Function],
-                  "onChange": [Function],
-                  "onFocus": [Function],
-                  "value": "-",
-                },
-                "ref": null,
-                "rendered": null,
-                "type": "input",
-              },
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": "days up to today",
-                  "className": undefined,
-                },
-                "ref": null,
-                "rendered": "days up to today",
-                "type": "span",
-              },
-            ],
-            "type": "div",
-          },
-          Object {
-            "instance": null,
-            "key": "1",
-            "nodeType": "host",
-            "props": Object {
-              "children": Array [
-                <input
-                  className="rdrInputRangeInput"
-                  max={99999}
-                  min={0}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  value="-"
-                />,
-                <span
-                  className={undefined}
-                >
-                  days starting today
-                </span>,
-              ],
-              "className": "rdrInputRange",
-            },
-            "ref": null,
-            "rendered": Array [
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "className": "rdrInputRangeInput",
-                  "max": 99999,
-                  "min": 0,
-                  "onBlur": [Function],
-                  "onChange": [Function],
-                  "onFocus": [Function],
-                  "value": "-",
-                },
-                "ref": null,
-                "rendered": null,
-                "type": "input",
-              },
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": "days starting today",
-                  "className": undefined,
-                },
-                "ref": null,
-                "rendered": "days starting today",
-                "type": "span",
-              },
-            ],
-            "type": "div",
-          },
-        ],
-        "type": "div",
-      },
-      undefined,
-    ],
-    "type": "div",
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          undefined,
-          <div
-            className="rdrStaticRanges"
-          >
-            <button
-              className="rdrStaticRange"
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              style={
-                Object {
-                  "color": null,
-                }
-              }
-              type="button"
-            >
-              <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                <i
-                  className="italic-label-content"
-                >
-                  Italic Content
-                </i>
-              </span>
-            </button>
-            <button
-              className="rdrStaticRange"
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              style={
-                Object {
-                  "color": null,
-                }
-              }
-              type="button"
-            >
-              <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                Static Label
-              </span>
-            </button>
-            <button
-              className="rdrStaticRange"
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              style={
-                Object {
-                  "color": null,
-                }
-              }
-              type="button"
-            >
-              <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                <img
-                  className="random-image"
-                />
-              </span>
-            </button>
-            <button
-              className="rdrStaticRange"
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              style={
-                Object {
-                  "color": null,
-                }
-              }
-              type="button"
-            >
-              <span
-                className="rdrStaticRangeLabel"
-                tabIndex={-1}
-              >
-                <b
-                  className="bold-label-content"
-                >
-                  Bold Content
-                </b>
-              </span>
-            </button>
-          </div>,
-          <div
-            className="rdrInputRanges"
-          >
-            <div
-              className="rdrInputRange"
-            >
-              <input
-                className="rdrInputRangeInput"
-                max={99999}
-                min={0}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                value="-"
-              />
-              <span
-                className={undefined}
-              >
-                days up to today
-              </span>
-            </div>
-            <div
-              className="rdrInputRange"
-            >
-              <input
-                className="rdrInputRangeInput"
-                max={99999}
-                min={0}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                value="-"
-              />
-              <span
-                className={undefined}
-              >
-                days starting today
-              </span>
-            </div>
-          </div>,
-          undefined,
-        ],
-        "className": "rdrDefinedRangesWrapper",
-      },
-      "ref": null,
-      "rendered": Array [
-        undefined,
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              <button
-                className="rdrStaticRange"
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseLeave={[Function]}
-                onMouseOver={[Function]}
-                style={
-                  Object {
-                    "color": null,
-                  }
-                }
-                type="button"
-              >
-                <span
-                  className="rdrStaticRangeLabel"
-                  tabIndex={-1}
-                >
-                  <i
-                    className="italic-label-content"
-                  >
-                    Italic Content
-                  </i>
-                </span>
-              </button>,
-              <button
-                className="rdrStaticRange"
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseLeave={[Function]}
-                onMouseOver={[Function]}
-                style={
-                  Object {
-                    "color": null,
-                  }
-                }
-                type="button"
-              >
-                <span
-                  className="rdrStaticRangeLabel"
-                  tabIndex={-1}
-                >
-                  Static Label
-                </span>
-              </button>,
-              <button
-                className="rdrStaticRange"
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseLeave={[Function]}
-                onMouseOver={[Function]}
-                style={
-                  Object {
-                    "color": null,
-                  }
-                }
-                type="button"
-              >
-                <span
-                  className="rdrStaticRangeLabel"
-                  tabIndex={-1}
-                >
-                  <img
-                    className="random-image"
-                  />
-                </span>
-              </button>,
-              <button
-                className="rdrStaticRange"
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseLeave={[Function]}
-                onMouseOver={[Function]}
-                style={
-                  Object {
-                    "color": null,
-                  }
-                }
-                type="button"
-              >
-                <span
-                  className="rdrStaticRangeLabel"
-                  tabIndex={-1}
-                >
-                  <b
-                    className="bold-label-content"
-                  >
-                    Bold Content
-                  </b>
-                </span>
-              </button>,
-            ],
-            "className": "rdrStaticRanges",
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": "0",
-              "nodeType": "host",
-              "props": Object {
-                "children": <span
-                  className="rdrStaticRangeLabel"
-                  tabIndex={-1}
-                >
-                  <i
-                    className="italic-label-content"
-                  >
-                    Italic Content
-                  </i>
-                </span>,
-                "className": "rdrStaticRange",
-                "onClick": [Function],
-                "onFocus": [Function],
-                "onMouseLeave": [Function],
-                "onMouseOver": [Function],
-                "style": Object {
-                  "color": null,
-                },
-                "type": "button",
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": <i
-                    className="italic-label-content"
-                  >
-                    Italic Content
-                  </i>,
-                  "className": "rdrStaticRangeLabel",
-                  "tabIndex": -1,
-                },
-                "ref": null,
-                "rendered": Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": "Italic Content",
-                    "className": "italic-label-content",
-                  },
-                  "ref": null,
-                  "rendered": "Italic Content",
-                  "type": "i",
-                },
-                "type": "span",
-              },
-              "type": "button",
-            },
-            Object {
-              "instance": null,
-              "key": "1",
-              "nodeType": "host",
-              "props": Object {
-                "children": <span
-                  className="rdrStaticRangeLabel"
-                  tabIndex={-1}
-                >
-                  Static Label
-                </span>,
-                "className": "rdrStaticRange",
-                "onClick": [Function],
-                "onFocus": [Function],
-                "onMouseLeave": [Function],
-                "onMouseOver": [Function],
-                "style": Object {
-                  "color": null,
-                },
-                "type": "button",
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": "Static Label",
-                  "className": "rdrStaticRangeLabel",
-                  "tabIndex": -1,
-                },
-                "ref": null,
-                "rendered": "Static Label",
-                "type": "span",
-              },
-              "type": "button",
-            },
-            Object {
-              "instance": null,
-              "key": "2",
-              "nodeType": "host",
-              "props": Object {
-                "children": <span
-                  className="rdrStaticRangeLabel"
-                  tabIndex={-1}
-                >
-                  <img
-                    className="random-image"
-                  />
-                </span>,
-                "className": "rdrStaticRange",
-                "onClick": [Function],
-                "onFocus": [Function],
-                "onMouseLeave": [Function],
-                "onMouseOver": [Function],
-                "style": Object {
-                  "color": null,
-                },
-                "type": "button",
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": <img
-                    className="random-image"
-                  />,
-                  "className": "rdrStaticRangeLabel",
-                  "tabIndex": -1,
-                },
-                "ref": null,
-                "rendered": Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "className": "random-image",
-                  },
-                  "ref": null,
-                  "rendered": null,
-                  "type": "img",
-                },
-                "type": "span",
-              },
-              "type": "button",
-            },
-            Object {
-              "instance": null,
-              "key": "3",
-              "nodeType": "host",
-              "props": Object {
-                "children": <span
-                  className="rdrStaticRangeLabel"
-                  tabIndex={-1}
-                >
-                  <b
-                    className="bold-label-content"
-                  >
-                    Bold Content
-                  </b>
-                </span>,
-                "className": "rdrStaticRange",
-                "onClick": [Function],
-                "onFocus": [Function],
-                "onMouseLeave": [Function],
-                "onMouseOver": [Function],
-                "style": Object {
-                  "color": null,
-                },
-                "type": "button",
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": <b
-                    className="bold-label-content"
-                  >
-                    Bold Content
-                  </b>,
-                  "className": "rdrStaticRangeLabel",
-                  "tabIndex": -1,
-                },
-                "ref": null,
-                "rendered": Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": "Bold Content",
-                    "className": "bold-label-content",
-                  },
-                  "ref": null,
-                  "rendered": "Bold Content",
-                  "type": "b",
-                },
-                "type": "span",
-              },
-              "type": "button",
-            },
-          ],
-          "type": "div",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              <div
-                className="rdrInputRange"
-              >
-                <input
-                  className="rdrInputRangeInput"
-                  max={99999}
-                  min={0}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  value="-"
-                />
-                <span
-                  className={undefined}
-                >
-                  days up to today
-                </span>
-              </div>,
-              <div
-                className="rdrInputRange"
-              >
-                <input
-                  className="rdrInputRangeInput"
-                  max={99999}
-                  min={0}
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  value="-"
-                />
-                <span
-                  className={undefined}
-                >
-                  days starting today
-                </span>
-              </div>,
-            ],
-            "className": "rdrInputRanges",
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": "0",
-              "nodeType": "host",
-              "props": Object {
-                "children": Array [
-                  <input
-                    className="rdrInputRangeInput"
-                    max={99999}
-                    min={0}
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    value="-"
-                  />,
-                  <span
-                    className={undefined}
-                  >
-                    days up to today
-                  </span>,
-                ],
-                "className": "rdrInputRange",
-              },
-              "ref": null,
-              "rendered": Array [
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "className": "rdrInputRangeInput",
-                    "max": 99999,
-                    "min": 0,
-                    "onBlur": [Function],
-                    "onChange": [Function],
-                    "onFocus": [Function],
-                    "value": "-",
-                  },
-                  "ref": null,
-                  "rendered": null,
-                  "type": "input",
-                },
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": "days up to today",
-                    "className": undefined,
-                  },
-                  "ref": null,
-                  "rendered": "days up to today",
-                  "type": "span",
-                },
-              ],
-              "type": "div",
-            },
-            Object {
-              "instance": null,
-              "key": "1",
-              "nodeType": "host",
-              "props": Object {
-                "children": Array [
-                  <input
-                    className="rdrInputRangeInput"
-                    max={99999}
-                    min={0}
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    value="-"
-                  />,
-                  <span
-                    className={undefined}
-                  >
-                    days starting today
-                  </span>,
-                ],
-                "className": "rdrInputRange",
-              },
-              "ref": null,
-              "rendered": Array [
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "className": "rdrInputRangeInput",
-                    "max": 99999,
-                    "min": 0,
-                    "onBlur": [Function],
-                    "onChange": [Function],
-                    "onFocus": [Function],
-                    "value": "-",
-                  },
-                  "ref": null,
-                  "rendered": null,
-                  "type": "input",
-                },
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": "days starting today",
-                    "className": undefined,
-                  },
-                  "ref": null,
-                  "rendered": "days starting today",
-                  "type": "span",
-                },
-              ],
-              "type": "div",
-            },
-          ],
-          "type": "div",
-        },
-        undefined,
-      ],
-      "type": "div",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-      },
-    },
-  },
-}
-`;
diff --git a/src/components/__tests__/DefinedRange.spec.js b/src/components/__tests__/DefinedRange.spec.js
new file mode 100644
index 000000000..793a50fe3
--- /dev/null
+++ b/src/components/__tests__/DefinedRange.spec.js
@@ -0,0 +1,221 @@
+import React from 'react';
+import { render, fireEvent } from 'react-testing-library';
+import { defaultStaticRanges, defaultInputRanges } from '../../defaultRanges';
+import { DefinedRange } from '../..';
+import { startOfDay, isSameDay } from 'date-fns';
+import { staticRangeSelected } from '../styles/DefinedRange.styled';
+
+describe('The DefinedRange Component', () => {
+  const customStaticRanges = [
+    {
+      label: 'Custom Today',
+      range: () => ({
+        startDate: startOfDay(new Date()),
+        endDate: startOfDay(new Date()),
+      }),
+      isSelected: () => true,
+    },
+  ];
+  const ranges = [
+    {
+      startDate: startOfDay(new Date()),
+      endDate: startOfDay(new Date()),
+      key: 'selection',
+    },
+  ];
+
+  describe('static ranges', () => {
+    it('should list the default static ranges', () => {
+      const { getByText } = render(<DefinedRange />);
+      defaultStaticRanges.forEach(staticRange => {
+        expect(getByText(staticRange.label)).toBeDefined();
+      });
+    });
+
+    it('should list custom static ranges', () => {
+      const { getByText } = render(<DefinedRange staticRanges={customStaticRanges} />);
+      customStaticRanges.forEach(staticRange => {
+        expect(getByText(staticRange.label)).toBeDefined();
+      });
+    });
+
+    it('should select a static range', () => {
+      let newRange;
+      const mockChange = jest.fn().mockImplementation(({ selection }) => {
+        newRange = [selection];
+      });
+      const { getByText, rerender } = render(
+        <DefinedRange onChange={mockChange} ranges={ranges} />
+      );
+
+      const selectedRange = defaultStaticRanges[1];
+      const firstStaticRange = getByText(selectedRange.label);
+      fireEvent.click(firstStaticRange);
+      expect(mockChange).toHaveBeenCalledWith({
+        selection: {
+          key: ranges[0].key,
+          ...selectedRange.range(),
+        },
+      });
+
+      rerender(<DefinedRange onChange={mockChange} ranges={newRange} />);
+      expect(getByText(selectedRange.label)).toHaveStyleRule(staticRangeSelected);
+    });
+
+    it('should call "renderStaticRangeLabel" callback correct amount of times according to the "hasCustomRendering" option', () => {
+      const renderStaticRangeLabel = jest.fn();
+
+      render(
+        <DefinedRange
+          staticRanges={[
+            {
+              label: 'Dynamic Label',
+              range: {},
+              isSelected(range) {
+                const definedRange = this.range();
+                return (
+                  isSameDay(range.startDate, definedRange.startDate) &&
+                  isSameDay(range.endDate, definedRange.endDate)
+                );
+              },
+              hasCustomRendering: true,
+            },
+            {
+              label: 'Static Label',
+              range: {},
+              isSelected(range) {
+                const definedRange = this.range();
+                return (
+                  isSameDay(range.startDate, definedRange.startDate) &&
+                  isSameDay(range.endDate, definedRange.endDate)
+                );
+              },
+            },
+            {
+              label: 'Hede',
+              range: {},
+              isSelected(range) {
+                const definedRange = this.range();
+                return (
+                  isSameDay(range.startDate, definedRange.startDate) &&
+                  isSameDay(range.endDate, definedRange.endDate)
+                );
+              },
+              hasCustomRendering: true,
+            },
+          ]}
+          renderStaticRangeLabel={renderStaticRangeLabel}
+        />
+      );
+
+      expect(renderStaticRangeLabel).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('input ranges', () => {
+    it('should update the selection on input change', () => {
+      const mockChange = jest.fn();
+      const { getByDisplayValue } = render(<DefinedRange onChange={mockChange} ranges={ranges} />);
+
+      const input = getByDisplayValue((content, elem) => {
+        return elem.parentNode.textContent === defaultInputRanges[0].label;
+      });
+
+      const days = 2;
+      fireEvent.change(input, {
+        target: {
+          value: days,
+        },
+      });
+
+      const expectedRange = {
+        selection: {
+          key: ranges[0].key,
+          ...defaultInputRanges[0].range(days),
+        },
+      };
+      expect(mockChange).toHaveBeenCalledWith(expectedRange);
+    });
+  });
+
+  describe('snapshots', () => {
+    it('should render dynamic static label contents correctly', () => {
+      const renderItalicLabelContent = () => (
+        <i className={'italic-label-content'}>{'Italic Content'}</i>
+      );
+      const renderBoldLabelContent = () => <b className={'bold-label-content'}>{'Bold Content'}</b>;
+      const renderSomethingElse = () => <img className={'random-image'} />;
+
+      const renderStaticRangeLabel = function(staticRange) {
+        let result;
+
+        if (staticRange.id === 'italic') {
+          result = renderItalicLabelContent();
+        } else if (staticRange.id === 'bold') {
+          result = renderBoldLabelContent();
+        } else {
+          result = renderSomethingElse();
+        }
+
+        return result;
+      };
+
+      const { container } = render(
+        <DefinedRange
+          staticRanges={[
+            {
+              id: 'italic',
+              range: {},
+              isSelected(range) {
+                const definedRange = this.range();
+                return (
+                  isSameDay(range.startDate, definedRange.startDate) &&
+                  isSameDay(range.endDate, definedRange.endDate)
+                );
+              },
+              hasCustomRendering: true,
+            },
+            {
+              label: 'Static Label',
+              range: {},
+              isSelected(range) {
+                const definedRange = this.range();
+                return (
+                  isSameDay(range.startDate, definedRange.startDate) &&
+                  isSameDay(range.endDate, definedRange.endDate)
+                );
+              },
+            },
+            {
+              id: 'whatever',
+              range: {},
+              isSelected(range) {
+                const definedRange = this.range();
+                return (
+                  isSameDay(range.startDate, definedRange.startDate) &&
+                  isSameDay(range.endDate, definedRange.endDate)
+                );
+              },
+              hasCustomRendering: true,
+            },
+            {
+              id: 'bold',
+              range: {},
+              isSelected(range) {
+                const definedRange = this.range();
+                return (
+                  isSameDay(range.startDate, definedRange.startDate) &&
+                  isSameDay(range.endDate, definedRange.endDate)
+                );
+              },
+              hasCustomRendering: true,
+            },
+          ]}
+          renderStaticRangeLabel={renderStaticRangeLabel}
+        />
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/components/__tests__/__snapshots__/DefinedRange.spec.js.snap b/src/components/__tests__/__snapshots__/DefinedRange.spec.js.snap
new file mode 100644
index 000000000..7c23d6801
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/DefinedRange.spec.js.snap
@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The DefinedRange Component snapshots should render dynamic static label contents correctly 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c4 {
+  display: block;
+  outline: 0;
+  line-height: 18px;
+  padding: 10px 20px;
+  text-align: left;
+}
+
+.c2 {
+  border: 0;
+  cursor: pointer;
+  display: block;
+  outline: 0;
+  border-bottom: 1px solid #eff2f7;
+  font-size: inherit;
+  padding: 0;
+  background: #fff;
+  font-weight: normal;
+}
+
+.c2:hover .c3,
+.c2:focus .c3 {
+  background: #eff2f7;
+}
+
+.c8:hover .c3,
+.c8:focus .c3 {
+  background: #eff2f7;
+}
+
+.c8 .c3 {
+  background: #eff2f7;
+}
+
+.c0 {
+  font-size: 12px;
+  width: 226px;
+  border-right: solid 1px #eff2f7;
+  background: #fff;
+}
+
+.c5 {
+  padding: 10px 0;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 5px 20px;
+}
+
+.c7 {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 4px;
+  text-align: center;
+  border: solid 1px rgb(222,231,235);
+  margin-right: 10px;
+  color: rgb(108,118,122);
+}
+
+.c7:focus,
+.c7:hover {
+  border-color: rgb(180,191,196);
+  outline: 0;
+  color: #333;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <button
+        class="c2"
+        type="button"
+      >
+        <span
+          class="c3 c4"
+          tabindex="-1"
+        >
+          <i
+            class="italic-label-content"
+          >
+            Italic Content
+          </i>
+        </span>
+      </button>
+      <button
+        class="c2"
+        type="button"
+      >
+        <span
+          class="c3 c4"
+          tabindex="-1"
+        >
+          Static Label
+        </span>
+      </button>
+      <button
+        class="c2"
+        type="button"
+      >
+        <span
+          class="c3 c4"
+          tabindex="-1"
+        >
+          <img
+            class="random-image"
+          />
+        </span>
+      </button>
+      <button
+        class="c2"
+        type="button"
+      >
+        <span
+          class="c3 c4"
+          tabindex="-1"
+        >
+          <b
+            class="bold-label-content"
+          >
+            Bold Content
+          </b>
+        </span>
+      </button>
+    </div>
+    <div
+      class="c5"
+    >
+      <label
+        class="c6"
+      >
+        <input
+          class="c7"
+          max="99999"
+          min="0"
+          value="-"
+        />
+        <span>
+          days up to today
+        </span>
+      </label>
+      <label
+        class="c6"
+      >
+        <input
+          class="c7"
+          max="99999"
+          min="0"
+          value="-"
+        />
+        <span>
+          days starting today
+        </span>
+      </label>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/styles/DefinedRange.styled.js b/src/components/styles/DefinedRange.styled.js
index 501bee1c9..3141614e3 100644
--- a/src/components/styles/DefinedRange.styled.js
+++ b/src/components/styles/DefinedRange.styled.js
@@ -14,7 +14,11 @@ export const StaticRangeLabel = styled('span')`
   text-align: left;
 `;
 
-const staticRangeSelected = css``;
+export const staticRangeSelected = css`
+  ${StaticRangeLabel} {
+    background: #eff2f7;
+  }
+`;
 
 export const StaticRange = styled('button')`
   border: 0;
@@ -27,10 +31,10 @@ export const StaticRange = styled('button')`
   background: #fff;
   &:hover,
   &:focus {
-    .rdrStaticRangeLabel {
-      background: #eff2f7;
-    }
+    ${staticRangeSelected};
   }
+  font-weight: ${({ selected }) => (selected ? 'bold' : 'normal')};
+  ${({ selected }) => (selected ? staticRangeSelected : '')};
 `;
 
 export const DefinedRangesWrapper = styled('div')`
@@ -38,10 +42,6 @@ export const DefinedRangesWrapper = styled('div')`
   width: 226px;
   border-right: solid 1px #eff2f7;
   background: #fff;
-  ${staticRangeSelected} {
-    color: currentColor;
-    font-weight: 600;
-  }
 `;
 
 // Input ranges
@@ -49,7 +49,7 @@ export const InputRanges = styled('div')`
   padding: 10px 0;
 `;
 
-export const InputRange = styled('div')`
+export const InputRange = styled('label')`
   display: flex;
   align-items: center;
   padding: 5px 20px;

From 1335a36705dd49d86541e41d9812fa17c3ee1324 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Thu, 21 Mar 2019 11:19:49 -0600
Subject: [PATCH 14/29] Fix StaticRange hover style

---
 src/components/styles/DefinedRange.styled.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/styles/DefinedRange.styled.js b/src/components/styles/DefinedRange.styled.js
index 3141614e3..074bfb2f6 100644
--- a/src/components/styles/DefinedRange.styled.js
+++ b/src/components/styles/DefinedRange.styled.js
@@ -16,7 +16,7 @@ export const StaticRangeLabel = styled('span')`
 
 export const staticRangeSelected = css`
   ${StaticRangeLabel} {
-    background: #eff2f7;
+    font-weight: bold;
   }
 `;
 
@@ -29,11 +29,11 @@ export const StaticRange = styled('button')`
   font-size: inherit;
   padding: 0;
   background: #fff;
+  transition: background-color 0.2s ease-in;
   &:hover,
   &:focus {
-    ${staticRangeSelected};
+    background: #eff2f7;
   }
-  font-weight: ${({ selected }) => (selected ? 'bold' : 'normal')};
   ${({ selected }) => (selected ? staticRangeSelected : '')};
 `;
 

From 35391f2dbb198cc088125ec4e7817bf2c5c7dcf3 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Thu, 21 Mar 2019 13:10:14 -0600
Subject: [PATCH 15/29] Test DefinedRange preview range props

---
 src/components/__tests__/DefinedRange.spec.js | 30 +++++++++++++++++++
 .../__snapshots__/DefinedRange.spec.js.snap   | 14 ++++-----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/__tests__/DefinedRange.spec.js b/src/components/__tests__/DefinedRange.spec.js
index 793a50fe3..cea4e5568 100644
--- a/src/components/__tests__/DefinedRange.spec.js
+++ b/src/components/__tests__/DefinedRange.spec.js
@@ -138,6 +138,36 @@ describe('The DefinedRange Component', () => {
     });
   });
 
+  describe('preview range', () => {
+    const selectedRange = defaultStaticRanges[1];
+    const mockPreviewChange = jest.fn();
+
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
+    it('should call onPreviewChange on focus', () => {
+      const { getByText } = render(<DefinedRange onPreviewChange={mockPreviewChange} />);
+      const selectedStaticRange = getByText(selectedRange.label);
+      fireEvent.focus(selectedStaticRange);
+      expect(mockPreviewChange).toHaveBeenCalledWith(selectedRange.range());
+    });
+
+    it('should call onPreviewChange on mouseover', () => {
+      const { getByText } = render(<DefinedRange onPreviewChange={mockPreviewChange} />);
+      const selectedStaticRange = getByText(selectedRange.label);
+      fireEvent.mouseOver(selectedStaticRange);
+      expect(mockPreviewChange).toHaveBeenCalledWith(selectedRange.range());
+    });
+
+    it("should call onPreviewChange on mouseleave and don't return selection range", () => {
+      const { getByText } = render(<DefinedRange onPreviewChange={mockPreviewChange} />);
+      const selectedStaticRange = getByText(selectedRange.label);
+      fireEvent.mouseLeave(selectedStaticRange);
+      expect(mockPreviewChange).toHaveBeenCalledWith();
+    });
+  });
+
   describe('snapshots', () => {
     it('should render dynamic static label contents correctly', () => {
       const renderItalicLabelContent = () => (
diff --git a/src/components/__tests__/__snapshots__/DefinedRange.spec.js.snap b/src/components/__tests__/__snapshots__/DefinedRange.spec.js.snap
index 7c23d6801..b4e939c6e 100644
--- a/src/components/__tests__/__snapshots__/DefinedRange.spec.js.snap
+++ b/src/components/__tests__/__snapshots__/DefinedRange.spec.js.snap
@@ -28,21 +28,17 @@ exports[`The DefinedRange Component snapshots should render dynamic static label
   font-size: inherit;
   padding: 0;
   background: #fff;
-  font-weight: normal;
+  -webkit-transition: background-color 0.2s ease-in;
+  transition: background-color 0.2s ease-in;
 }
 
-.c2:hover .c3,
-.c2:focus .c3 {
-  background: #eff2f7;
-}
-
-.c8:hover .c3,
-.c8:focus .c3 {
+.c2:hover,
+.c2:focus {
   background: #eff2f7;
 }
 
 .c8 .c3 {
-  background: #eff2f7;
+  font-weight: bold;
 }
 
 .c0 {

From f310dcf2121955d668c647e5f1c2b24fd11e41ac Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Thu, 21 Mar 2019 15:49:58 -0600
Subject: [PATCH 16/29] Add title on the buttons and add Calendar test cases

---
 src/components/Calendar.js                | 20 ++++++++-
 src/components/__tests__/Calendar.spec.js | 54 +++++++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/components/__tests__/Calendar.spec.js

diff --git a/src/components/Calendar.js b/src/components/Calendar.js
index 570221cf5..7e87f3e9f 100644
--- a/src/components/Calendar.js
+++ b/src/components/Calendar.js
@@ -174,7 +174,14 @@ class Calendar extends PureComponent {
     }
   }
   renderMonthAndYear(focusedDate, changeShownDate, props) {
-    const { showMonthArrow, locale, minDate, maxDate, showMonthAndYearPickers } = props;
+    const {
+      buttonsText,
+      showMonthArrow,
+      locale,
+      minDate,
+      maxDate,
+      showMonthAndYearPickers,
+    } = props;
     const upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear();
     const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear();
     const styles = this.styles;
@@ -183,6 +190,7 @@ class Calendar extends PureComponent {
         {showMonthArrow ? (
           <NavigationButton
             type="button"
+            title={buttonsText.prev}
             actionType="prev"
             onClick={() => changeShownDate(-1, 'monthOffset')}>
             <i />
@@ -228,6 +236,7 @@ class Calendar extends PureComponent {
           <NavigationButton
             type="button"
             actionType="next"
+            title={buttonsText.next}
             onClick={() => changeShownDate(+1, 'monthOffset')}>
             <i />
           </NavigationButton>
@@ -379,6 +388,7 @@ class Calendar extends PureComponent {
           <div>
             {isVertical && this.renderWeekdays(this.dateOptions)}
             <InfiniteMonths
+              data-testid="infinite-months"
               direction={direction}
               onMouseLeave={() => onPreviewChange && onPreviewChange()}
               style={{
@@ -461,6 +471,10 @@ class Calendar extends PureComponent {
 }
 
 Calendar.defaultProps = {
+  buttonsText: {
+    next: 'Next',
+    prev: 'Previous',
+  },
   showMonthArrow: true,
   showMonthAndYearPickers: true,
   disabledDates: [],
@@ -486,6 +500,10 @@ Calendar.defaultProps = {
 };
 
 Calendar.propTypes = {
+  buttonsText: PropTypes.shape({
+    prev: PropTypes.string,
+    next: PropTypes.string,
+  }),
   showMonthArrow: PropTypes.bool,
   showMonthAndYearPickers: PropTypes.bool,
   disabledDates: PropTypes.array,
diff --git a/src/components/__tests__/Calendar.spec.js b/src/components/__tests__/Calendar.spec.js
new file mode 100644
index 000000000..3fb0ab66b
--- /dev/null
+++ b/src/components/__tests__/Calendar.spec.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { fireEvent, render } from 'react-testing-library';
+import { addMonths, format, subMonths } from 'date-fns';
+import Calendar from '../Calendar';
+
+describe('The Calendar Component', () => {
+  const now = new Date();
+
+  describe('months', () => {
+    const months = 2;
+    it('should render the months according to the prop', () => {
+      const { queryByTestId } = render(<Calendar months={months} />);
+      expect(queryByTestId('month').children).toHaveLength(months);
+    });
+  });
+
+  describe('select dates', () => {
+    const currentMonthName = format(now, 'MMMM');
+    it('should advance to the next month when click the button', () => {
+      const { getByTitle, getByText } = render(<Calendar months={1} />);
+      expect(getByText(currentMonthName).selected).toBe(true);
+
+      const nextMonth = addMonths(now, 1);
+      const nextMonthName = format(nextMonth, 'MMMM');
+      fireEvent.click(getByTitle('Next'));
+      expect(getByText(nextMonthName).selected).toBe(true);
+    });
+
+    it('should return to the previous month when click the button', () => {
+      const { getByTitle, getByText } = render(<Calendar months={1} />);
+      expect(getByText(currentMonthName).selected).toBe(true);
+
+      const prevMonth = subMonths(now, 1);
+      const prevMonthName = format(prevMonth, 'MMMM');
+      fireEvent.click(getByTitle('Previous'));
+      expect(getByText(prevMonthName).selected).toBe(true);
+    });
+  });
+
+  describe('infinite months', () => {
+    const props = {
+      direction: 'vertical',
+      minDate: addMonths(new Date(), -3),
+      maxDate: addMonths(new Date(), 3),
+      scroll: {
+        enabled: true,
+      },
+    };
+    it('should render InfiniteMonths styled element', () => {
+      const { getByTestId } = render(<Calendar {...props} />);
+      expect(getByTestId('infinite-months')).toBeDefined();
+    });
+  });
+});

From fcd5327fc9b8e6c71dabd3a1be56e2dad7fe71af Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Thu, 21 Mar 2019 15:52:34 -0600
Subject: [PATCH 17/29] Add test when selecting endDate before startDate

---
 src/components/__tests__/DateRange.spec.js | 61 +++++++++++++++-------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/components/__tests__/DateRange.spec.js b/src/components/__tests__/DateRange.spec.js
index 9ece54578..1106fb143 100644
--- a/src/components/__tests__/DateRange.spec.js
+++ b/src/components/__tests__/DateRange.spec.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, getAllByTestId, getByTestId, fireEvent } from 'react-testing-library';
+import { render, getByTestId, fireEvent } from 'react-testing-library';
 import DateRange from '../DateRange';
 
 const getByTestIdAndText = (container, testId, text) =>
@@ -10,26 +10,51 @@ const getByTestIdAndText = (container, testId, text) =>
 const getDayByText = (container, day) => getByTestIdAndText(container, 'day', day);
 
 describe('The DateRange Component', () => {
-  it('should select a range of days', () => {
-    let range = {
-      startDate: new Date(),
-      key: 'selection',
-    };
-    const handleChange = ({ selection }) => {
-      range = selection;
+  let range = {
+    startDate: new Date('2019-03-20'),
+    key: 'selection',
+  };
+  const handleChange = ({ selection }) => {
+    range = selection;
+  };
+
+  describe('when select range', () => {
+    const fireMouseEvents = (firstDay, secondDay) => {
+      fireEvent.mouseEnter(firstDay);
+      fireEvent.mouseDown(firstDay);
+      fireEvent.mouseMove(secondDay);
+      fireEvent.mouseUp(secondDay);
     };
-    const { container, rerender } = render(<DateRange ranges={[range]} onChange={handleChange} />);
 
-    const firstDay = getDayByText(container, '15');
-    const secondDay = getDayByText(container, '16');
-    fireEvent.mouseEnter(firstDay);
-    fireEvent.mouseDown(firstDay);
-    fireEvent.mouseMove(secondDay);
-    fireEvent.mouseUp(secondDay);
+    it('should be able to select a endDate after the startDate', () => {
+      const { container, rerender } = render(
+        <DateRange ranges={[range]} onChange={handleChange} />
+      );
+
+      const firstDay = getDayByText(container, '15');
+      const secondDay = getDayByText(container, '16');
+
+      fireMouseEvents(firstDay, secondDay);
+
+      rerender(<DateRange ranges={[range]} onChange={handleChange} />);
+
+      expect(firstDay).toContainElement(getByTestId(firstDay, 'in-range'));
+      expect(secondDay).toContainElement(getByTestId(secondDay, 'in-range'));
+    });
+
+    it('should be able to select a endDate before the startDate', () => {
+      const { container, rerender } = render(
+        <DateRange ranges={[range]} onChange={handleChange} />
+      );
+
+      const firstDay = getDayByText(container, '15');
+      const secondDay = getDayByText(container, '14');
+      fireMouseEvents(firstDay, secondDay);
 
-    rerender(<DateRange ranges={[range]} onChange={handleChange} />);
+      rerender(<DateRange ranges={[range]} onChange={handleChange} />);
 
-    expect(firstDay).toContainElement(getByTestId(firstDay, 'in-range'));
-    expect(secondDay).toContainElement(getByTestId(secondDay, 'in-range'));
+      expect(firstDay).toContainElement(getByTestId(firstDay, 'in-range'));
+      expect(secondDay).toContainElement(getByTestId(secondDay, 'in-range'));
+    });
   });
 });

From d41b862ff0e92477492948fd5d6fdbcd66fe161e Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 10:16:24 -0600
Subject: [PATCH 18/29] Add test to the DateRangePicker

---
 src/components/DateRangePicker.js              |  6 +-----
 .../__tests__/DateRangePicker.spec.js          | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 src/components/__tests__/DateRangePicker.spec.js

diff --git a/src/components/DateRangePicker.js b/src/components/DateRangePicker.js
index 0a8811af1..669da4622 100644
--- a/src/components/DateRangePicker.js
+++ b/src/components/DateRangePicker.js
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import DateRange from './DateRange';
 import DefinedRange from './DefinedRange';
-import { findNextRangeIndex, generateStyles } from '../utils.js';
-import coreStyles from '../styles';
+import { findNextRangeIndex } from '../utils.js';
 import { DateRangePickerWrapper } from './styles/DateRangePicker.styles';
 
 class DateRangePicker extends Component {
@@ -12,7 +11,6 @@ class DateRangePicker extends Component {
     this.state = {
       focusedRange: [findNextRangeIndex(props.ranges), 0],
     };
-    this.styles = generateStyles([coreStyles, props.classNames]);
   }
   render() {
     const { focusedRange } = this.state;
@@ -23,14 +21,12 @@ class DateRangePicker extends Component {
           onPreviewChange={value => this.dateRange.updatePreview(value)}
           {...this.props}
           range={this.props.ranges[focusedRange[0]]}
-          className={undefined}
         />
         <DateRange
           onRangeFocusChange={focusedRange => this.setState({ focusedRange })}
           focusedRange={focusedRange}
           {...this.props}
           ref={t => (this.dateRange = t)}
-          className={undefined}
         />
       </DateRangePickerWrapper>
     );
diff --git a/src/components/__tests__/DateRangePicker.spec.js b/src/components/__tests__/DateRangePicker.spec.js
new file mode 100644
index 000000000..b9e5ecf0f
--- /dev/null
+++ b/src/components/__tests__/DateRangePicker.spec.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from 'react-testing-library';
+import DateRangePicker from '../DateRangePicker';
+
+describe('The DateRangePicker Component', () => {
+  const mockChange = jest.fn();
+  const ranges = [];
+  /**
+   * This is supost to be a snapshot, but the jest-styled-component have an issue
+   * The snapshot can't be generated due ":" on the background url (data:image/svg...)
+   * @see {@link https://github.com/styled-components/jest-styled-components/issues/97}
+   * TODO: Create snapshots
+   */
+  it('should render the component', () => {
+    const { container } = render(<DateRangePicker onChange={mockChange} ranges={ranges} />);
+    expect(container).toBeDefined();
+  });
+});

From 0d330c70f3d102eaffa9f56c3a17e95eccdd3f05 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 10:17:08 -0600
Subject: [PATCH 19/29] Remove obsolete tests

---
 src/components/Calendar.test.js  | 7 -------
 src/components/DateRange.test.js | 7 -------
 2 files changed, 14 deletions(-)
 delete mode 100644 src/components/Calendar.test.js
 delete mode 100644 src/components/DateRange.test.js

diff --git a/src/components/Calendar.test.js b/src/components/Calendar.test.js
deleted file mode 100644
index f567be45a..000000000
--- a/src/components/Calendar.test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Calendar from './Calendar';
-
-describe('Calendar', () => {
-  test('Should resolve', () => {
-    expect(Calendar).toEqual(expect.anything());
-  });
-});
diff --git a/src/components/DateRange.test.js b/src/components/DateRange.test.js
deleted file mode 100644
index 9b0687bf8..000000000
--- a/src/components/DateRange.test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import DateRange from './DateRange';
-
-describe('DateRange', () => {
-  test('Should resolve', () => {
-    expect(DateRange).toEqual(expect.anything());
-  });
-});

From e256921b5bb16d4ee7f2b649b9662e8c2ab39327 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 10:18:47 -0600
Subject: [PATCH 20/29] Optimize SVG image

---
 src/components/styles/Calendar.styled.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/styles/Calendar.styled.js b/src/components/styles/Calendar.styled.js
index 80c43488b..309c555e0 100644
--- a/src/components/styles/Calendar.styled.js
+++ b/src/components/styles/Calendar.styled.js
@@ -39,7 +39,7 @@ export const MonthAndYearPickers = styled('span')`
     border-radius: 4px;
     outline: 0;
     color: #3e484f;
-    background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>")
+    background: url('data:image/svg+xml;utf8,<svg width="9" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M1.28.24a.712.712 0 0 0-1.06 0 .855.855 0 0 0 0 1.144L4.499 6 8.78 1.382a.855.855 0 0 0 0-1.145.712.712 0 0 0-1.06 0L4.499 3.71 1.28.24z" fill="%230E242F" fill-rule="nonzero" fill-opacity=".369"/></svg>')
       no-repeat;
     background-position: right 8px center;
     cursor: pointer;

From ef56209bbd6a4ea92bce4187467b80b2242acc59 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 10:19:06 -0600
Subject: [PATCH 21/29] Add testid on Month

---
 src/components/Month.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Month.js b/src/components/Month.js
index c6670907d..8ac5329aa 100644
--- a/src/components/Month.js
+++ b/src/components/Month.js
@@ -51,7 +51,7 @@ class Month extends PureComponent {
     }
     const showPreview = this.props.showPreview && !drag.disablePreview;
     return (
-      <MonthWrapper style={this.props.style}>
+      <MonthWrapper data-testid="month" style={this.props.style}>
         {this.props.showMonthName ? (
           <MonthName>
             {format(this.props.month, this.props.monthDisplayFormat, this.props.dateOptions)}

From 58c8143a8360a109f1be670863a2cd9f9d0bda95 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 10:20:10 -0600
Subject: [PATCH 22/29] Ignore `coverage` folder

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index c95a69547..9de3048f1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ dist/
 .idea
 *.orig
 lib/
+coverage
\ No newline at end of file

From 57ec0e7c9c19c4df9d77262a22d18234931c9aa0 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 10:33:53 -0600
Subject: [PATCH 23/29] Fix range preview bug

---
 src/components/DateRange.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/DateRange.js b/src/components/DateRange.js
index 00f608827..8e49a5aaa 100644
--- a/src/components/DateRange.js
+++ b/src/components/DateRange.js
@@ -110,7 +110,8 @@ class DateRange extends Component {
     const { rangeColors, ranges } = this.props;
     const focusedRange = this.props.focusedRange || this.state.focusedRange;
     const color = ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color;
-    this.setState({ preview: { ...val.range, color } });
+    const range = val.range || val;
+    this.setState({ preview: { ...range, color } });
   }
 
   render() {

From 8534aa0ce36f77211194eac61e358021eb546fe2 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 10:43:17 -0600
Subject: [PATCH 24/29] FIx some layout issues on DayCell

---
 src/components/styles/DayCell.styled.js | 46 +++++++++++++------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/styles/DayCell.styled.js b/src/components/styles/DayCell.styled.js
index 38d6e30e9..d24f69353 100644
--- a/src/components/styles/DayCell.styled.js
+++ b/src/components/styles/DayCell.styled.js
@@ -25,14 +25,14 @@ const rangeStart = css`
   border-top-left-radius: 1.333em;
   border-bottom-left-radius: 1.333em;
   border-left-width: 1px;
-  left: 0px;
+  left: 2px;
 `;
 
 const rangeEnd = css`
   border-top-right-radius: 1.333em;
   border-bottom-right-radius: 1.333em;
   border-right-width: 1px;
-  right: 0px;
+  right: 2px;
 `;
 
 export const InRange = styled('span')`
@@ -46,7 +46,7 @@ export const InRange = styled('span')`
   ${({ isEndEdge }) => (isEndEdge ? rangeEnd : '')};
   ${({ isStartEdge }) => (isStartEdge ? rangeStart : '')};
 
-  && ~ ${DayNumber} {
+  & ~ ${DayNumber} {
     span {
       color: #fff;
     }
@@ -64,14 +64,16 @@ export const inPreview = css`
 `;
 
 export const PreviewRange = styled('span')`
-  position: absolute;
-  top: 3px;
-  left: -6px;
-  right: -6px;
-  bottom: 3px;
-  z-index: 1;
-  pointer-events: none;
-  border-color: currentColor;
+  & {
+    position: absolute;
+    top: 3px;
+    left: 0px;
+    right: 0px;
+    bottom: 3px;
+    z-index: 1;
+    pointer-events: none;
+    border-color: currentColor;
+  }
 
   ${({ isInRange }) => (isInRange ? inPreview : '')};
   ${({ isEndEdge }) => (isEndEdge ? rangeEnd : '')};
@@ -79,23 +81,32 @@ export const PreviewRange = styled('span')`
 `;
 
 /**
- * Day "edges"
+ * Week "edges"
  */
 const dayRangeStart = css`
   ${InRange}, ${PreviewRange} {
     ${rangeStart};
   }
+
+  ${PreviewRange} {
+    left: 0;
+  }
 `;
 
 const dayRangeEnd = css`
   ${InRange}, ${PreviewRange} {
     ${rangeEnd};
   }
+
+  ${PreviewRange} {
+    right: 0;
+  }
 `;
 
 // Day States
 const dayDisabled = css`
   cursor: not-allowed;
+  background: rgb(248, 248, 248);
 
   ${DayNumber} span {
     color: #aeb9bf;
@@ -138,16 +149,7 @@ const dayToday = css`
   }
 `;
 
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
+// Get day variations
 const isToday = ({ isToday }) => (isToday ? dayToday : '');
 // const isActive = ({ isActive }) => (isActive ? dayActive : '');
 const isDisabled = ({ disabled }) => (disabled ? dayDisabled : '');

From 1ab4583603e65821181d9440bc96ee033b6deda1 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 10:43:25 -0600
Subject: [PATCH 25/29] Remove unused styles

---
 src/theme/default.scss | 118 -----------------------------------------
 1 file changed, 118 deletions(-)

diff --git a/src/theme/default.scss b/src/theme/default.scss
index c148fce9d..868677a3a 100644
--- a/src/theme/default.scss
+++ b/src/theme/default.scss
@@ -1,22 +1,6 @@
 .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
   display: none;
 }  
-
-.rdrDayToday .rdrDayNumber span{
-  font-weight: 500;
-  &:after{
-    content: '';
-    position: absolute;
-    bottom: 4px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    width: 18px;
-    height: 2px;
-    border-radius: 2px;
-    background: #3d91ff;
-  }
-}
-
 .rdrDayToday:not(.rdrDayPassive) {
   .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{
     & ~ .rdrDayNumber span:after{
@@ -35,107 +19,17 @@
   }
 }
 
-.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
-  background: currentColor;
-  position: absolute;
-  top: 5px;
-  left: 0;
-  right: 0;
-  bottom: 5px;
-}
-
 .rdrSelected{
   left: 2px;
   right: 2px;
 }
 
-.rdrStartEdge{
-  border-top-left-radius: 1.042em;
-  border-bottom-left-radius: 1.042em;
-  left: 2px;
-}
-
-.rdrEndEdge{
-  border-top-right-radius: 1.042em;
-  border-bottom-right-radius: 1.042em;
-  right: 2px;
-}
 
 .rdrSelected{
   border-radius: 1.042em;
 }
 
-.rdrDayStartOfMonth, .rdrDayStartOfWeek{
-  .rdrInRange, .rdrEndEdge{
-    border-top-left-radius: 1.042em;
-    border-bottom-left-radius: 1.042em;
-    left: 2px;
-  }
-}
-
-.rdrDayEndOfMonth, .rdrDayEndOfWeek{
-  .rdrInRange,  .rdrStartEdge{
-    border-top-right-radius: 1.042em;
-    border-bottom-right-radius: 1.042em;
-    right: 2px;
-  }
-}
-
-.rdrDayStartOfMonth, .rdrDayStartOfWeek{
-  .rdrDayInPreview, .rdrDayEndPreview{
-    border-top-left-radius: 1.333em;
-    border-bottom-left-radius: 1.333em;
-    border-left-width: 1px;
-    left: 0px;
-  }
-}
 
-.rdrDayEndOfMonth, .rdrDayEndOfWeek{
-  .rdrDayInPreview, .rdrDayStartPreview{
-   border-top-right-radius: 1.333em;
-   border-bottom-right-radius: 1.333em;
-   border-right-width: 1px;
-   right: 0px;
- }
-}
-
-
-.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
-  background: rgba(255, 255, 255, 0.09);
-  position: absolute;
-  top: 3px;
-  left: 0px;
-  right: 0px;
-  bottom: 3px;
-  pointer-events: none;
-  border: 0px solid currentColor;
-  z-index: 1;
-}
-
-
-.rdrDayStartPreview{
-  border-top-width: 1px;
-  border-left-width: 1px;
-  border-bottom-width: 1px;
-  border-top-left-radius: 1.333em;
-  border-bottom-left-radius: 1.333em;
-  left: 0px;
-}
-
-.rdrDayInPreview{
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-}
-
-.rdrDayEndPreview{
-  border-top-width: 1px;
-  border-right-width: 1px;
-  border-bottom-width: 1px;
-  border-top-right-radius: 1.333em;
-  border-bottom-right-radius: 1.333em;
-  right: 2px;
-  right: 0px;
-}
 
 .rdrDefinedRangesWrapper{
   .rdrStaticRangeSelected{
@@ -144,18 +38,6 @@
   }
 }
 
-.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
-  content: '';
-  border: 1px solid currentColor;
-  border-radius: 1.333em;
-  position: absolute;
-  top: -2px;
-  bottom: -2px;
-  left: 0px;
-  right: 0px;
-  background: transparent;
-}
-
 .rdrDayPassive{
   pointer-events: none;
   .rdrDayNumber span{

From cec8296f5e12cf73a682dc46975d12b8b030297c Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 12:31:14 -0600
Subject: [PATCH 26/29] Fix ESLint errors

---
 src/components/DayCell.js                | 3 ++-
 src/components/DefinedRange.js           | 1 -
 src/components/__tests__/DayCell.spec.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DayCell.js b/src/components/DayCell.js
index fc0591e1e..a86c30272 100644
--- a/src/components/DayCell.js
+++ b/src/components/DayCell.js
@@ -93,7 +93,7 @@ class DayCell extends Component {
     });
   }
   renderPreviewPlaceholder() {
-    const { preview, day, styles } = this.props;
+    const { preview, day } = this.props;
     if (!preview) return null;
     const startDate = preview.startDate ? endOfDay(preview.startDate) : null;
     const endDate = preview.endDate ? startOfDay(preview.endDate) : null;
@@ -175,6 +175,7 @@ class DayCell extends Component {
         isHover={hover}
         isToday={isToday}
         isActive={active}
+        isWeekend={isWeekend}
         isPassive={isPassive}
         isEndOfWeek={isEndOfWeek}
         isEndOfMonth={isEndOfMonth}
diff --git a/src/components/DefinedRange.js b/src/components/DefinedRange.js
index e8ccdc9be..77461de73 100644
--- a/src/components/DefinedRange.js
+++ b/src/components/DefinedRange.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import styles from '../styles';
 import { defaultInputRanges, defaultStaticRanges } from '../defaultRanges';
 import { rangeShape } from './DayCell';
-import cx from 'classnames';
 import {
   InputRanges,
   InputRange,
diff --git a/src/components/__tests__/DayCell.spec.js b/src/components/__tests__/DayCell.spec.js
index d0a80ddc7..807f835e9 100644
--- a/src/components/__tests__/DayCell.spec.js
+++ b/src/components/__tests__/DayCell.spec.js
@@ -41,7 +41,7 @@ describe('The DayCell Component', () => {
     });
 
     it('should not call onPreviewChange with the day when disabled', () => {
-      const { getByTestId, debug } = render(
+      const { getByTestId } = render(
         <DayCell {...props} disabled onPreviewChange={mockPreviewChange} />
       );
       fireEvent.mouseEnter(getByTestId('day'));

From d9946cea703859bce9db41eff2b3408fe85ba756 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 14:14:13 -0600
Subject: [PATCH 27/29] Refactor `dayToday` styles

---
 src/components/styles/DayCell.styled.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/styles/DayCell.styled.js b/src/components/styles/DayCell.styled.js
index 133d16391..ac227c74d 100644
--- a/src/components/styles/DayCell.styled.js
+++ b/src/components/styles/DayCell.styled.js
@@ -50,10 +50,6 @@ export const InRange = styled('span')`
     span {
       color: #fff;
     }
-
-    &:after {
-      background: #fff;
-    }
   }
 `;
 
@@ -147,6 +143,10 @@ const dayToday = css`
       background: #3d91ff;
     }
   }
+
+  ${InRange} ~ ${DayNumber}:after {
+    background: #fff;
+  }
 `;
 
 // Get day variations

From 9d6b0ecdb92b1cb47d9e6be8b98beb2aa82e72a1 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 14:51:51 -0600
Subject: [PATCH 28/29] Rename style InfiniteMonths styled component

---
 src/components/Calendar.js               | 6 +++---
 src/components/styles/Calendar.styled.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Calendar.js b/src/components/Calendar.js
index 7e87f3e9f..9be5be1b8 100644
--- a/src/components/Calendar.js
+++ b/src/components/Calendar.js
@@ -34,7 +34,7 @@ import {
   CalendarWrapper,
   MonthPicker,
   Months,
-  InfiniteMonths,
+  InfiniteMonthsWrapper,
   NavigationButton,
   DateDisplayItem,
 } from './styles/Calendar.styled.js';
@@ -387,7 +387,7 @@ class Calendar extends PureComponent {
         {scroll.enabled ? (
           <div>
             {isVertical && this.renderWeekdays(this.dateOptions)}
-            <InfiniteMonths
+            <InfiniteMonthsWrapper
               data-testid="infinite-months"
               direction={direction}
               onMouseLeave={() => onPreviewChange && onPreviewChange()}
@@ -436,7 +436,7 @@ class Calendar extends PureComponent {
                   );
                 }}
               />
-            </InfiniteMonths>
+            </InfiniteMonthsWrapper>
           </div>
         ) : (
           <Months direction={direction}>
diff --git a/src/components/styles/Calendar.styled.js b/src/components/styles/Calendar.styled.js
index f38fe7b3a..108c3116c 100644
--- a/src/components/styles/Calendar.styled.js
+++ b/src/components/styles/Calendar.styled.js
@@ -81,7 +81,7 @@ export const Months = styled.div`
   ${props => (props.direction === 'vertical' ? monthsVertical : monthsHorizontal)};
 `;
 
-export const InfiniteMonths = styled.div`
+export const InfiniteMonthsWrapper = styled.div`
   overflow: auto;
   ${props => (props.direction === 'vertical' ? monthsVertical : monthsHorizontal)};
 `;

From 3a4697c8bf8d7337dabb0b0bb95762a7a4666f08 Mon Sep 17 00:00:00 2001
From: Kevin Dantas <kevinds29@gmail.com>
Date: Fri, 22 Mar 2019 16:52:51 -0600
Subject: [PATCH 29/29] Refactor MonthAndYearPicker

---
 src/components/Calendar.js                    |  98 ++--------------
 src/components/MonthAndYearPicker.js          | 106 ++++++++++++++++++
 .../__tests__/MonthAndYearPicker.spec.js      |  57 ++++++++++
 3 files changed, 171 insertions(+), 90 deletions(-)
 create mode 100644 src/components/MonthAndYearPicker.js
 create mode 100644 src/components/__tests__/MonthAndYearPicker.spec.js

diff --git a/src/components/Calendar.js b/src/components/Calendar.js
index 9be5be1b8..f1e009459 100644
--- a/src/components/Calendar.js
+++ b/src/components/Calendar.js
@@ -27,18 +27,14 @@ import {
 import defaultLocale from 'date-fns/locale/en-US';
 import coreStyles from '../styles';
 import {
-  MonthAndYearWrapper,
-  MonthAndYearPickers,
-  YearPicker,
   DateDisplay,
   CalendarWrapper,
-  MonthPicker,
   Months,
   InfiniteMonthsWrapper,
-  NavigationButton,
   DateDisplayItem,
 } from './styles/Calendar.styled.js';
 import { WeekDays, WeekDay } from './styles/Month.styled.js';
+import MonthAndYearPicker from './MonthAndYearPicker.js';
 
 class Calendar extends PureComponent {
   constructor(props, context) {
@@ -51,7 +47,6 @@ class Calendar extends PureComponent {
     this.onDragSelectionStart = this.onDragSelectionStart.bind(this);
     this.onDragSelectionEnd = this.onDragSelectionEnd.bind(this);
     this.onDragSelectionMove = this.onDragSelectionMove.bind(this);
-    this.renderMonthAndYear = this.renderMonthAndYear.bind(this);
     this.updatePreview = this.updatePreview.bind(this);
     this.estimateMonthSize = this.estimateMonthSize.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
@@ -173,77 +168,7 @@ class Calendar extends PureComponent {
       onShownDateChange && onShownDateChange(visibleMonth);
     }
   }
-  renderMonthAndYear(focusedDate, changeShownDate, props) {
-    const {
-      buttonsText,
-      showMonthArrow,
-      locale,
-      minDate,
-      maxDate,
-      showMonthAndYearPickers,
-    } = props;
-    const upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear();
-    const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear();
-    const styles = this.styles;
-    return (
-      <MonthAndYearWrapper onMouseUp={e => e.stopPropagation()}>
-        {showMonthArrow ? (
-          <NavigationButton
-            type="button"
-            title={buttonsText.prev}
-            actionType="prev"
-            onClick={() => changeShownDate(-1, 'monthOffset')}>
-            <i />
-          </NavigationButton>
-        ) : null}
-        {showMonthAndYearPickers ? (
-          <MonthAndYearPickers>
-            <MonthPicker>
-              <select
-                value={focusedDate.getMonth()}
-                onChange={e => changeShownDate(e.target.value, 'setMonth')}>
-                {locale.localize.months().map((month, i) => (
-                  <option key={i} value={i}>
-                    {month}
-                  </option>
-                ))}
-              </select>
-            </MonthPicker>
-            <span className={styles.monthAndYearDivider} />
-            <YearPicker>
-              <select
-                value={focusedDate.getFullYear()}
-                onChange={e => changeShownDate(e.target.value, 'setYear')}>
-                {new Array(upperYearLimit - lowerYearLimit + 1)
-                  .fill(upperYearLimit)
-                  .map((val, i) => {
-                    const year = val - i;
-                    return (
-                      <option key={year} value={year}>
-                        {year}
-                      </option>
-                    );
-                  })}
-              </select>
-            </YearPicker>
-          </MonthAndYearPickers>
-        ) : (
-          <MonthAndYearPickers>
-            {locale.localize.months()[focusedDate.getMonth()]} {focusedDate.getFullYear()}
-          </MonthAndYearPickers>
-        )}
-        {showMonthArrow ? (
-          <NavigationButton
-            type="button"
-            actionType="next"
-            title={buttonsText.next}
-            onClick={() => changeShownDate(+1, 'monthOffset')}>
-            <i />
-          </NavigationButton>
-        ) : null}
-      </MonthAndYearWrapper>
-    );
-  }
+
   renderWeekdays() {
     const now = new Date();
     return (
@@ -366,10 +291,10 @@ class Calendar extends PureComponent {
       minDate,
       rangeColors,
       color,
+      navigatorRenderer,
     } = this.props;
     const { scrollArea, focusedDate } = this.state;
     const isVertical = direction === 'vertical';
-    const navigatorRenderer = this.props.navigatorRenderer || this.renderMonthAndYear;
 
     const ranges = this.props.ranges.map((range, i) => ({
       ...range,
@@ -471,12 +396,6 @@ class Calendar extends PureComponent {
 }
 
 Calendar.defaultProps = {
-  buttonsText: {
-    next: 'Next',
-    prev: 'Previous',
-  },
-  showMonthArrow: true,
-  showMonthAndYearPickers: true,
   disabledDates: [],
   classNames: {},
   locale: defaultLocale,
@@ -497,15 +416,14 @@ Calendar.defaultProps = {
   minDate: addYears(new Date(), -100),
   rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'],
   dragSelectionEnabled: true,
+  navigatorRenderer(focusedDate, changeShownDate, props) {
+    return (
+      <MonthAndYearPicker {...props} focusedDate={focusedDate} changeShownDate={changeShownDate} />
+    );
+  },
 };
 
 Calendar.propTypes = {
-  buttonsText: PropTypes.shape({
-    prev: PropTypes.string,
-    next: PropTypes.string,
-  }),
-  showMonthArrow: PropTypes.bool,
-  showMonthAndYearPickers: PropTypes.bool,
   disabledDates: PropTypes.array,
   minDate: PropTypes.object,
   maxDate: PropTypes.object,
diff --git a/src/components/MonthAndYearPicker.js b/src/components/MonthAndYearPicker.js
new file mode 100644
index 000000000..dc8ebe622
--- /dev/null
+++ b/src/components/MonthAndYearPicker.js
@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  MonthAndYearWrapper,
+  NavigationButton,
+  MonthAndYearPickers,
+  MonthPicker,
+  YearPicker,
+} from './styles/Calendar.styled';
+
+function MonthAndYearPicker(props) {
+  const {
+    locale,
+    minDate,
+    maxDate,
+    buttonsText,
+    focusedDate,
+    showMonthArrow,
+    changeShownDate,
+    showMonthAndYearPickers,
+  } = props;
+  const upperYearLimit = maxDate.getFullYear();
+  const lowerYearLimit = minDate.getFullYear();
+  const styles = {};
+  return (
+    <MonthAndYearWrapper onMouseUp={e => e.stopPropagation()}>
+      {showMonthArrow ? (
+        <NavigationButton
+          type="button"
+          title={buttonsText.prev}
+          actionType="prev"
+          onClick={() => changeShownDate(-1, 'monthOffset')}>
+          <i />
+        </NavigationButton>
+      ) : null}
+      {showMonthAndYearPickers ? (
+        <MonthAndYearPickers>
+          <MonthPicker>
+            <select
+              value={focusedDate.getMonth()}
+              onChange={e => changeShownDate(e.target.value, 'setMonth')}>
+              {locale.localize.months().map((month, i) => (
+                <option key={i} value={i}>
+                  {month}
+                </option>
+              ))}
+            </select>
+          </MonthPicker>
+          <span className={styles.monthAndYearDivider} />
+          <YearPicker>
+            <select
+              value={focusedDate.getFullYear()}
+              onChange={e => changeShownDate(e.target.value, 'setYear')}>
+              {new Array(upperYearLimit - lowerYearLimit + 1).fill(upperYearLimit).map((val, i) => {
+                const year = val - i;
+                return (
+                  <option key={year} value={year}>
+                    {year}
+                  </option>
+                );
+              })}
+            </select>
+          </YearPicker>
+        </MonthAndYearPickers>
+      ) : (
+        <MonthAndYearPickers>
+          {locale.localize.months()[focusedDate.getMonth()]} {focusedDate.getFullYear()}
+        </MonthAndYearPickers>
+      )}
+      {showMonthArrow ? (
+        <NavigationButton
+          type="button"
+          actionType="next"
+          title={buttonsText.next}
+          onClick={() => changeShownDate(+1, 'monthOffset')}>
+          <i />
+        </NavigationButton>
+      ) : null}
+    </MonthAndYearWrapper>
+  );
+}
+
+MonthAndYearPicker.defaultProps = {
+  showMonthArrow: true,
+  showMonthAndYearPickers: true,
+  buttonsText: {
+    next: 'Next',
+    prev: 'Previous',
+  },
+};
+
+MonthAndYearPicker.propTypes = {
+  locale: PropTypes.object,
+  minDate: PropTypes.objectOf(Date),
+  maxDate: PropTypes.objectOf(Date),
+  buttonsText: PropTypes.shape({
+    prev: PropTypes.string,
+    next: PropTypes.string,
+  }),
+  focusedDate: PropTypes.objectOf(Date),
+  showMonthArrow: PropTypes.bool,
+  changeShownDate: PropTypes.func,
+  showMonthAndYearPickers: PropTypes.bool,
+};
+
+export default MonthAndYearPicker;
diff --git a/src/components/__tests__/MonthAndYearPicker.spec.js b/src/components/__tests__/MonthAndYearPicker.spec.js
new file mode 100644
index 000000000..517e2fb0d
--- /dev/null
+++ b/src/components/__tests__/MonthAndYearPicker.spec.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, fireEvent } from 'react-testing-library';
+import MonthAndYearPicker from '../MonthAndYearPicker';
+import defaultLocale from 'date-fns/locale/en-US';
+import { addMonths, format, addYears } from 'date-fns';
+
+describe('The MonthAndyearPicker component', () => {
+  const props = {
+    minDate: new Date(),
+    maxDate: addYears(new Date(), 5),
+    focusedDate: new Date(),
+    locale: defaultLocale,
+    changeShownDate: jest.fn(),
+  };
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should hide the navigation buttons when showMonthArrow=false', () => {
+    const { queryByTitle } = render(<MonthAndYearPicker showMonthArrow={false} {...props} />);
+    expect(queryByTitle('Next')).toBe(null);
+    expect(queryByTitle('Prev')).toBe(null);
+  });
+
+  it('should call changeShownDate with monthOffset when click the navigation buttons', () => {
+    const { getByTitle } = render(<MonthAndYearPicker {...props} />);
+    fireEvent.click(getByTitle('Next'));
+    expect(props.changeShownDate).toHaveBeenCalledWith(1, 'monthOffset');
+    fireEvent.click(getByTitle('Previous'));
+    expect(props.changeShownDate).toHaveBeenCalledWith(-1, 'monthOffset');
+  });
+
+  it('should call changeShownDate with setMonth when select a month', () => {
+    const { getByDisplayValue } = render(<MonthAndYearPicker {...props} />);
+    const focusedMonth = format(props.focusedDate, 'MMMM');
+    const nextMonth = addMonths(props.focusedDate, 1).getMonth();
+    fireEvent.change(getByDisplayValue(focusedMonth), {
+      target: {
+        value: nextMonth,
+      },
+    });
+    expect(props.changeShownDate).toHaveBeenCalledWith(`${nextMonth}`, 'setMonth');
+  });
+
+  it('should call changeShownDate with setYear when select a year', () => {
+    const { getByDisplayValue } = render(<MonthAndYearPicker {...props} />);
+    const focusedYear = format(props.focusedDate, 'YYYY');
+    const nextYear = format(addYears(focusedYear, 1), 'YYYY');
+    fireEvent.change(getByDisplayValue(focusedYear), {
+      target: {
+        value: nextYear,
+      },
+    });
+    expect(props.changeShownDate).toHaveBeenCalledWith(nextYear, 'setYear');
+  });
+});